refactoring 2.0

JS/main.js

@@ -1,22 +1,23 @@
+// DOM elements
 const form = document.querySelector('#form');
 const toDoInput = document.querySelector('.todo-input');
 const toDoList = document.querySelector('.todo-list');
 const standardTheme = document.querySelector('.standard-theme');
 const lightTheme = document.querySelector('.light-theme');
 
+// Initial setup
 let todos = getTodosFromLocalStorage();
+let savedTheme = localStorage.getItem('savedTheme') || 'standard';
+changeTheme(savedTheme);
 
-// event listeners
+// Event listeners
 form.addEventListener('submit', addToDo);
 toDoList.addEventListener('click', handleToDoListClick);
 document.addEventListener("DOMContentLoaded", renderTodos);
 standardTheme.addEventListener('click', () => changeTheme('standard'));
 lightTheme.addEventListener('click', () => changeTheme('light'));
 
-// Check if one theme has been set previously and apply it (or std theme if not found):
-let savedTheme = localStorage.getItem('savedTheme') || 'standard';
-changeTheme(savedTheme);
-
+// Todo functions
 function addToDo(event) {
     event.preventDefault();
     const todo = { text: toDoInput.value, checked: false };
@@ -52,39 +53,33 @@ function checkedToDo (item) {
 }
 
 function saveToLocalStorage(todo){
-    todos.push({ text: todo, checked: false });
+    todos.push(todo);
     localStorage.setItem('todos', JSON.stringify(todos));
 }
 
 function getTodosFromLocalStorage() {
     let storedTodos = localStorage.getItem('todos');
-    if(storedTodos === null) {
-        return [];
-    } else {
-        return JSON.parse(storedTodos);
-    }
+    return storedTodos ? JSON.parse(storedTodos) : [];
 }
 
 function renderTodos() {
-    todos.forEach(function(todo) {
-        renderTodo(todo.text);
-    });
+    todos.forEach(renderTodo);
 }
 
 function renderTodo(todo) {
-    const toDoDiv = createToDoDiv(todo.text); // Use todo.text here
-    if (todo.checked) {
-        toDoDiv.classList.add('completed');
-    }
+    const toDoDiv = createToDoDiv(todo);
     toDoList.appendChild(toDoDiv);
 }
 
 function createToDoDiv(todo) {
     const toDoDiv = document.createElement("div");
     toDoDiv.classList.add("todo", `${savedTheme}-todo`);
+    if (todo.checked) {
+        toDoDiv.classList.add('completed');
+    }
 
     const newToDo = document.createElement('li');
-    newToDo.innerText = todo;
+    newToDo.innerText = todo.text;
     newToDo.classList.add('todo-item');
     toDoDiv.appendChild(newToDo);
 
@@ -97,30 +92,33 @@ function createToDoDiv(todo) {
     return toDoDiv;
 }
 
-function createButton(className, innerHTML) {
-    const button = document.createElement('button');
-    button.innerHTML = innerHTML;
-    button.classList.add(className, `${savedTheme}-button`);
-    return button;
-}
-
 function removeLocalTodos(todoDiv){
     const index = todos.findIndex(todo => todo.text === todoDiv.children[0].innerText);
     todos.splice(index, 1);
     localStorage.setItem('todos', JSON.stringify(todos));
 }
 
+// Theme functions
 function changeTheme(color) {
     localStorage.setItem('savedTheme', color);
     savedTheme = color;
     document.body.className = color;
     document.querySelector('input').className = `${color}-input`;
-    Array.from(document.querySelectorAll('.todo')).forEach(changeElementTheme);
-    Array.from(document.querySelectorAll('button')).forEach(changeElementTheme);
+    Array.from(document.querySelectorAll('.todo')).forEach(element => changeElementTheme(element, 'todo'));
+    Array.from(document.querySelectorAll('button')).forEach(element => changeElementTheme(element, 'button'));
 }
 
-function changeElementTheme(element) {
+function changeElementTheme(element, baseClass) {
     const isCompleted = element.classList.contains('completed');
-    const baseClass = element.classList[0];
-    element.className = `${baseClass} ${savedTheme}-button ${isCompleted ? 'completed' : ''}`;
+    const isButton = baseClass === 'button';
+    const buttonType = isButton ? element.classList[0] : '';
+    element.className = `${isButton ? buttonType : baseClass} ${savedTheme}-${baseClass} ${isCompleted ? 'completed' : ''}`;
+}
+
+// Button function
+function createButton(className, innerHTML) {
+    const button = document.createElement('button');
+    button.innerHTML = innerHTML;
+    button.classList.add(className, `${savedTheme}-button`);
+    return button;
 }

index.html

@@ -25,13 +25,13 @@
             <div class="standard-theme theme-selector"></div>
             <div class="light-theme theme-selector"></div>
         </div>
-        <h1 id="title">Just do it.<div id="border"></div></h1>
+        <h1 id="title">Todo list<div id="border"></div></h1>
     </div>
 
     <div id="form">
         <form>
-            <input class="todo-input" type="text" placeholder="Add a task.">
-            <button class="todo-btn" type="submit">I Got This!</button>
+            <input class="todo-input" type="text" placeholder="Write a task">
+            <button class="todo-btn" type="submit">Add</button>
         </form>
     </div>