The project aims to create a Todo App using JS and Css.
- Your company has recently started on a project that aims to create a Todo App. So you and your colleagues have started to work on the project.
Todo App (folder)
|
|----readme.md
|----index.html
|----style.css
|----app.js
|----withCreateElement.js
-
HTML
- font-awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
- html entities
+ ©
- font-awesome
-
CSS
- google fonts
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap");
- @media query
-
JS
-
DOM Manipulations
- innerHTML
- innerText
- textContent
-
DOM Selectors
-
querySelector
-
querySelectorAll
-
const productList = document.querySelector("div.main__product-painel"); //?basina div yazarak belirtirsek performans acisindan daha hizli olur
-
Date() object 1
-
Events
- click
- load
- keydown
todoInput.addEventListener("keydown", (e) => { if (e.key === "Enter") { btn.click(); } })
-
Capturing & Bubbling
-
DOM Traversing
-
localStorage
- localStorage.setItem("tasks", JSON.stringify(tasks)); - tasks = JSON.parse(localStorage.getItem("tasks")) || [];
-
Array Methods
-
filter()
tasks = tasks.filter((task) => task.id != id); }
-
if else - if - else conditions
-
-
improve coding skills within HTML, CSS and JS
-
use git commands (push, pull, commit, add etc.) and Github as a Version Control System.
- You can use HTML, CSS and JS to complete this project.
⌛ Happy Coding ✍