The list of features is ordered by descending priority.
Must Have Features 😊
[x] Todos can be added using the add button
[x] List all added todos
[x] Added todos can be marked as done
Nice To Have Features 😏
[x] Add styling according to design requirements
[x] Add a filter which allows to display either "all todos", "open todos" or "done todos"
[x] Add a button which will delete all done todos
If You Really Have Time Features 🥳
[x] Add a check that allows only todos with 5 or more characters
[x] Add a feature that allows to add todos when pressing enter in the textbox
[x] Display the text of done todos different than the text of open todos
Technical requirements ⚙️
[x] Create a new repository on GitHub for your todo app
[x] Create one or more commits for each feature
Please mind all hints from the Code Review Guide like formatting or comments
Design Requirements
Use the following color scheme from coolors. The design additionally uses #f5f5f5 as the background color and #ffffff.
[x] Add custom styling to the input elements (checkbox, radio button, button, input)
[x] Use a sans-serif font
[x] Add visible focus states to your inputs
[x] Responsive design is not required but will be appreciated
Overall Styling
Focus state of input, button and radio
Focus state of list items
Checked Status
You can use all: unset to reset all predefined stylings from input elements - this will also remove display: inline-block. Remember to add the :checked state for custom elements.
.custom-button {
all: unset;
/* your new stylings here */
}
You can use an svg to set a check mark as background for the checkbox.
glissario
commented
3 years ago
Kata Todo App
Create a todo app with HTML, CSS and JavaScript.
Features 🍡
The list of features is ordered by descending priority.
Must Have Features 😊
Nice To Have Features 😏
If You Really Have Time Features 🥳
Technical requirements ⚙️
Design Requirements
Use the following color scheme from coolors. The design additionally uses
#f5f5f5as the background color and#ffffff.Overall Styling
Focus state of input, button and radio
Focus state of list items
Checked Status
You can use
all: unsetto reset all predefined stylings from input elements - this will also removedisplay: inline-block. Remember to add the:checkedstate for custom elements.You can use an svg to set a check mark as background for the checkbox.
You can use the
:focus-withinpseudo class to target elements with focussed children.The example styling uses
text-shadowandbox-shadow.General Requirements 📝