diff --git a/index.html b/index.html
index a0c0a63..e47c737 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,12 @@
- LEARN JS
+ Todo
+
@@ -24,6 +25,7 @@
+
diff --git a/script.js b/script.js
index bc934df..e86c89a 100644
--- a/script.js
+++ b/script.js
@@ -1,2 +1,170 @@
// You can start writing your code below
+// You can start writing your code below
+
+const todoForm = document.querySelector(".todo-form");
+const todoInput = document.querySelector("input");
+const todoCollection = document.querySelector(".todo-collection");
+
+todoForm.addEventListener("submit",addTodo);
+
+function addTodo(e) {
+ if (todoInput.value === "") {
+ //alert !!!!
+ alert("Please Enter Something");
+ }
+ else{
+ const li =document.createElement("li");
+ const todoTitle = document.createElement("span");
+ const editableInput = document.createElement("input");
+ const saveButton = document.createElement("button");
+ const editButton = document.createElement("button");
+ const deleteButton = document.createElement("button");
+
+ li.classList.add("todo-collection_item");
+ todoTitle.classList.add("todo-collection_itm_title");
+ todoTitle.innerText = todoInput.value;
+ editableInput.classList.add("input");
+ editableInput.classList.add("input--todo");
+ editableInput.classList.add("hidden");
+ editableInput.type = "text";
+ editableInput.value = todoInput.value;
+ editButton.classList.add("button");
+ editButton.classList.add("button--todo");
+ editButton.classList.add("button--edit");
+ editButton.innerText = "Edit";
+
+ saveButton.classList.add("button");
+ saveButton.classList.add("button--todo");
+ saveButton.classList.add("button--save");
+ saveButton.classList.add("hidden");
+ saveButton.innerText = "Save";
+
+ deleteButton.classList.add("button");
+ deleteButton.classList.add("button--todo");
+ deleteButton.classList.add("button--delete");
+ deleteButton.innerText = "Delete";
+
+ li.appendChild(todoTitle);
+ li.appendChild(editableInput);
+ li.appendChild(editButton);
+ li.appendChild(saveButton);
+ li.appendChild(deleteButton);
+ todoCollection.appendChild(li);
+
+ function toggleTodoEditForm(){
+ todoTitle.classList.toggle("hidden");
+ editableInput.classList.toggle("hidden");
+ editButton.classList.toggle("hidden");
+ saveButton.classList.toggle("hidden");
+ }
+
+ editButton.addEventListener("click",() =>{
+ toggleTodoEditForm();
+ editableInput.focus();
+ });
+ saveButton.addEventListener("click",()=>{
+ todoTitle.innerText = editableInput.value;
+ toggleTodoEditForm();
+ });
+ deleteButton.addEventListener("click",()=> {
+ setTimeout(()=>{
+ todoCollection.removeChild(li);
+ },100);
+
+ });
+ }
+ todoInput.value = "";
+ e.preventDefault();
+}
+ function getTodosFormLS(){
+ let todos;
+ if(localStorage.getItem("todos") === null){
+ todos=[];
+ }
+ else{
+ todos = JSON.parse(localStorage.getItem("todos"));
+ }
+ todos.forEach(todo=>{
+ const li = document.createElement("li");
+ const todoTitle = document.createElement("span");
+ const saveButton = document.createElement("button");
+ const deleteButton = document.createElement("button");
+ const editButton = document.createElement("button");
+
+ li.classList.add("todo-collection_item");
+
+ todoTitle.classList.add("todo-collection_item_title");
+ todoTitle.inputText = todoInput.value;
+
+ editableInput.classList.add("input");
+ editableInput.classList.add('input--todo');
+ editableInput.classList.add("hidden");
+ editableInput.type = "text";
+ editableInput.value = todoInput.value;
+
+ editButton.classList.add("button");
+ editButton.classList.add("button--todo");
+ editButton.classList.add("button--edit");
+ editButton.inputText = "Edit";
+
+ saveButton.classList.add("button");
+ saveButton.classList.add("button-todo");
+ saveButton.classList.add("button--save");
+ saveButton.classList.add("hidden");
+ saveButton.innerText = "Save";
+
+ deleteButton.classList.add("button");
+ deleteButton.classList.add("button--todo");
+ deleteButton.classList.add("button--delete");
+ deleteButton.innerText = "Delete";
+
+ li.appendChild(todoTitle);
+ li.appendChild(editableInput);
+ li.appendChild(editButton);
+ li.appendChild(saveButton);
+ li.appendChild(deleteButton);
+
+ todoCollection.appendChild(li);
+
+ function toggleTodoEditForm(){
+ todoTitle.classList.toggle("hidden");
+ editableInput.classList.toggle("hidden");
+ editButton.classList.toggle("hidden");
+ saveButton.classList.toggle("hidden");
+ }
+ editButton.addEventListener("click",()=>{
+ toggleTodoEditForm();
+ editableInput.focus();
+ });
+ saveButton.addEventListener("click",()=>{
+ todoTitle.innerText = editableInput.value;
+ toggleTodoEditForm;
+
+ });
+ deleteButton.addEventListener("click",()=>{
+ setTimeout(()=>{
+ todoCollection.removeChild(li);
+
+ },100
+ );
+ });
+
+ });
+ }
+ function saveTodoToLS(){
+ let todos;
+ todos=localStorage.getItem("todos")==="null" ?[]:JSON.parse(localStorage.getItem("todos"));
+ todos.push(todoInput.value);
+ localStorage.setItem("todos",JSON.stringify(todos));
+ }
+ function deleteTodoFromLS(){
+ let todos;
+ todos = localStorage.getItem("todos")==="null"?[]:JSON.parse(localStorage.getItem("todos"));
+
+ }
+ function updateTodoInLS(){
+ let todos;
+ todos = localStorage.getItem("todos")==="null"?[]:
+ JSON.parse(localStorage.getItem("todos"));
+ }
diff --git a/styles.css b/styles.css
index 2800eca..573888a 100644
--- a/styles.css
+++ b/styles.css
@@ -2,30 +2,32 @@ html,
body {
box-sizing: border-box;
margin: 0;
- background-color: #AD0AE9;
- color: white;
- font-family: "Arial", sans-serif;
+ background-color: #0c0c0c;
+ color: rgb(4, 237, 245);
+ font-family: 'Quintessential', cursive;
+ font-size: 20px;
}
.wrapper {
margin: 0 auto;
width: 67%;
- min-height: 100vh;
+ min-height: 150vh;
}
.navbar {
width: 100%;
height: 10rem;
+ color: aliceblue;
}
.nav {
margin: 0;
- padding: 0;
+ padding:0;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content:center;
height: 100%;
- text-align: center;
+ text-align:center;
}
.nav__item {
@@ -59,7 +61,7 @@ body {
flex-direction: column;
justify-content: center;
text-align: left;
- color: rgba(255, 255, 255, 0.3);
+ color: rgba(116, 41, 41, 0.3);
transition: 0.3s;
cursor: text;
}
@@ -79,12 +81,13 @@ body {
height: 2rem;
font-family: "Arial", sans-serif;
margin: 0;
- padding: 0 0.5rem;
+ padding:0 0.5rem;
font-size: 1.1rem;
- color: white;
+ color: rgb(13, 191, 245);
background-color: rgb(46, 46, 46);
- border: none;
- border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
+ border: 5px solid rgb(253, 196, 7);
+ border-bottom: 5px solid rgb(253, 196, 7);
+ border-radius: 10px;
transition: 0.3s;
}
@@ -101,9 +104,9 @@ body {
font-size: 1.1rem;
font-weight: bold;
line-height: 0.9rem;
- background-color: white;
+ background-color: rgb(13, 245, 52);
color: rgb(46, 46, 46);
- border-color: transparent;
+ border-color:darkgreen;
padding: 0.5rem;
margin-right: 150px;
border: 1px solid white;
@@ -118,10 +121,14 @@ body {
}
.button--todo {
- color: #ddd;
- background-color: inherit;
- border: 1px solid #ddd;
+ color: rgb(10, 10, 10);
+ background-color:red ;
+ border: 5px solid rgb(252, 228, 13);
transition: 0.3s;
+ margin-left:100px;
+ grid-template-rows: min-content;
+ font-size: 20px;
+ margin-bottom: 20px;
}
@@ -130,22 +137,24 @@ body {
}
.todo-collection__item {
- list-style-type: none;
- margin: 0;
+ list-style-type:none;
+ margin: 10px;
padding: 1rem 0;
border-top: 0.1rem solid rgba(255, 255, 255, 0.6);
- font-size: 1.1rem;
+ font-size: 100px;
display: grid;
grid-row-gap: 1rem;
grid-template-columns: 1fr auto auto;
}
.todo-collection__item__title {
- display: flex;
+ display:flex;
flex-direction: column;
justify-content: center;
margin-left: 0.5rem;
overflow-x: auto;
+ font-family: 100px;
+
}
.hidden {
@@ -162,7 +171,16 @@ body {
width: 75%;
}
.todo-collection__item__title {
- overflow-x: auto;
+ overflow-x:auto;
+ }
+ .button--todo{
+ font-size: 10px;
+ margin-inline-end: auto;
+ margin-inline-start: auto;
+ }
+ #input--add{
+ width: 200px;
+ height: 35px;
}
}
@@ -170,4 +188,5 @@ body {
.wrapper {
width: 90%;
}
-}
+
+}
\ No newline at end of file