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!

michaelbyalsky / myTodoList