Pre Course Project - Todo List

This project will include most of the topics we have learnt so far. This repository includes a basic skeleton with automated tests, use it for you submissions. In this project you will create a Todo List Web Application, in which the user can store prioritized todo tasks and view/sort that list

Goal (only functionality):

Instructions

• Create Github user
• Go here and import this repository into your account. Make sure to select the private option
• Clone your new repository to your computer
• Install node+npm
• Install the project dependencies by running npm install from the project's directory (using a terminal)
• Create new brunch
• Change the project to meet the requirements
• Commit Early, Push Often - your work might be evaluated by your push history
• Good Luck!

Running tests

We have created automated tests for your convenience, use it to check your progression.

Note that the automated tests rely on your code having the exact class names and Ids as specified below. Feel free to add your own.

To run the tests simply run

$ npm run test

Requirements

• The web app should have a heading

• The web app should have two sections: Control section and View section

• The control section is where the user adds his todo task and priority, and should have three elements:

  • \<input> with id textInput.
  • \<select> with id prioritySelector (options will be: 1-5).
  • \<button> with id addButton.

• The View section is where we display the list of added todo tasks and data and should start empty. Each added todo should be inserted to the list.

• After the user click on add button you need to "reset" the input value

• Every todo item should have "container" div with class todoContainer that will contain 3 elements:

  • An element with a class todoText with the text of the todo task
  • An element with a class todoCreatedAt that will hold the creation time of the task in a SQL format
  • An element for showing the numeric priority of the task, with a class todoPriority

  Good way 👍🏿:

  <div class="todoContainer">
    <div class="priority">
      1
    </div>
    <div class="todoCreatedAt">
      2020-06-18 11:51:12
    </div>
    <div class="todoText">
      the todo text
    </div>
  </div>

  Bad way 👎🏿:

  <div class="todoContainer">
    <div class="priority">
      1
    </div>
    <div class="todoCreatedAt">
      2020-06-18 11:51:12
    </div>
    <div class="todoText">
      <span>the todo text</span>
    </div>
  </div>

• Add a counter element to reflect the current number of todos stored in the app. This element should have a id counter.

• Add a button with id sortButton. Clicking this element should resort the todo list by their todos priority (DESC)

  

Bonus

• Add a new feature/s - any cool functionality you want to add to the app
• https://htmldom.dev/drag-and-drop-element-in-a-list
• Make the TODO list consistent - consider use localStorage
• Add a way to search tasks
• Deploy your app to the internet ! using https://vercel.com/ add a link to your deployed app here (README.md)

Grading policy

• Your project will be graded by the number of automatic tests you pass
• Visual creativity, use css to make this app app awesome 💅🏿
• Bonus - Please add an explanation about the bonus task in the PR.
• Code quality
• Git usage

Submitting

• When you are ready to submit run on windows $env:RECORD_TEST='true'; npm run test, on mac RECORD_TEST=true npm run test (Can take up to 3-4 min) that will create ui-testing-recording.gif that will show your app during testing session - push this file as well
• Add ui-testing-recording.gif to the README.md file under this section, if you want you can add another gif if you feel the auto-generated one not beautiful enough
• Record a 5 min selfie video, describe yourself in a few words, talk about the project you submit - try to explain how your app works. Think about this video as an interview
• Upload the 5 min video to the cloud (google drive) and add here (README.md) the public link for the video (can be located under the gif)
• Create a Pull Request from the new brunch you created in the Instructions into master in your duplicated repository
• add Github usernames: GuySerfaty, fainir and tomeryp as collaborators to your imported repo.

• Add link to the PR you created in your private repo here, fill the other details

  GOOD LUCK!