Added new styles to li elements

robert-ds · May 4, 2024 · b8da5c8 · b8da5c8
1 parent 476b6a2
commit b8da5c8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -11,18 +11,18 @@
  	font-weight: 400;
  	line-height: 1.5;
  	color: #333;
- 	margin: 1rem;
  }
 
  h1 {
  	text-align: center;
  	font-size: 3rem;
- 	color: darkorange;
+ 	color: darkgreen;
  }
 
  .container {
  	margin: 0	 auto;
- 	height: 90vh;
+ 	width: 90%;
+ 	height: 90%;
  }
 
  input, button {
@@ -31,6 +31,11 @@
  	border: none;
  	border-radius: 4px;
  	outline: none;
+ 	margin: 5px 5px;
+ }
+
+ input {
+ 	border: 1px solid darkgreen;
  }
 
  button {
@@ -42,19 +47,30 @@
  ul {
  	list-style: none;
  	padding: 0;
+ 	margin-top: 15px;
  }
 
  li {
- 	background-color: #fff;
+ 	background-color: lightgreen;
  	display: flex;
  	align-items: center;
- 	justify-content: flex-start;
+ 	justify-content: space-between;
  	margin-bottom: 10px;
  	padding: 10px;
  	border-radius: 4px;
  }
 
+ li span {
+ 	color: darkgreen;
+ 	font-weight: bold;
+ 	margin: 8px;
+ }
+
  .completed {
  	text-decoration: line-through;
  }
 
+ .delete-button {
+ 	float: right;
+ }
+
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -39,8 +39,9 @@ function createTaskElement(task) {
 	taskCheckBox.type 		= 'checkbox';
 	taskCheckBox.checked 	= task.isCompleted;
 
+
 	taskCheckBox.addEventListener('change', () => {
-		task.isCompleted = taskCheckbox.checked;
+		task.isCompleted = taskCheckBox.checked;
 		taskText.classList.toggle("completed", task.isCompleted);
 		saveTasksToLocalStorage(app.tasks);
 	});
@@ -80,17 +81,17 @@ function saveTasksToLocalStorage(tasks) {
 
 window.onload = () => {
 	const savedTasks = JSON.parse(localStorage.getItem('tasks') || []);
-	app.tasks = savedTasks.map((task => {
+	app.tasks = savedTasks.map((task) => {
 		return createTask(task.title, task.isCompleted);
-	}));
+	});
 
 	app.tasks.forEach((task) => {
 		return addTaskToList(task, app.tasksList);
-	})
+	});
 };
 
 addTaskButton.addEventListener('click', () => {
-	alert("save");
+	// alert("save");
 	addTask(app);
 });
 

diff --git a/index.html b/index.html
@@ -14,12 +14,10 @@ <h1>Todo List</h1>
 
 		<div class="container">
 
-			<input type="text" name="" id="new-task-input" placeholder="Write task">
-			<button id="add-task-button">Add task</button>
+			<input type="text" id="new-task-input" placeholder="Write task">
+			<button id="add-task-button">Add</button>
 
-			<ul id="task-list">
-
-			</ul>
+			<ul id="task-list"></ul>
 
 		</div>