diff --git a/Screen Recording.mov b/Screen Recording.mov deleted file mode 100644 index 5257e91..0000000 Binary files a/Screen Recording.mov and /dev/null differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..053a292 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,92 @@ +body { + background-color: antiquewhite; + font-family: 'Permanent Marker', cursive; + margin-left: 3rem; + margin-right: 3rem; +} + +form { + display: flex; +} + +input { + border: 0; + background: none; + width: 100%; +} + +input[type=text] { + border-bottom: 3px; + border-style: dashed; + border-bottom-color: black; + border-top: 0; + border-left: 0; + border-right: 0; + color: rgba(0, 0, 0, 0.769); + font-family: 'Permanent Marker', cursive; +} + +input[type=text]:focus { + outline: none; + color: rgba(0, 0, 0, 0.769); + font-family: 'Permanent Marker', cursive; + +} + +li { + display: flex; + border-bottom: 3px; + border-style: groove; + border-bottom-color: black; + border-top: 0; + border-left: 0; + border-right: 0; + align-items: center; + color: rgba(0, 0, 0, 0.737); + font-size: large; + + +} + +.todo-checkbox:checked+.checked-label { + text-decoration: line-through +} + +input[type=checkbox] { + margin: 1rem; + background-color: blue; + accent-color: green; + width: 30px; + height: 30px; + border: 3px solid rgb(189, 18, 18); +} + +button { + background-color: transparent; + border: 0; + font-family: 'Permanent Marker', cursive; + color: rgb(19, 143, 101); + font-size: larger; +} + +::placeholder { + font-family: 'Permanent Marker', cursive; +} + +h1 { + display: flex; + border-bottom: 3px; + border-style: groove; + border-bottom-color: black; + border-top: 0; + border-left: 0; + border-right: 0; + align-items: center; + color: rgba(0, 0, 0, 0.765); +} + +#sig { + position: relative; + bottom: 0; + float: right; +} \ No newline at end of file diff --git a/images/kitties.png b/images/kitties.png new file mode 100644 index 0000000..b167b8e Binary files /dev/null and b/images/kitties.png differ diff --git a/index.html b/index.html index 61b6e04..922c9cd 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,34 @@ + - Todo List - + + + + + + To do List + +
-

Todo List

+

To do List

+ + +
- +
+ +
- - + + - + + \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js new file mode 100644 index 0000000..a36fefd --- /dev/null +++ b/js/scripts.js @@ -0,0 +1,70 @@ +document.getElementById('add').addEventListener('click', function (event) { + event.preventDefault(); + addItem(); +}); + +// Function to add an item to the todo list +function addItem() { + var todoInput = document.getElementById('todoInput'); + var todoList = document.getElementById('todoList'); + + if (todoInput.value !== '') { + var listItem = document.createElement('li'); + + // Create a checkbox input element + var checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.className = 'todo-checkbox'; + + // Create a label for the checkbox + var label = document.createElement('label'); + label.textContent = todoInput.value; + label.className = 'checked-label'; + + // Append the checkbox and label to the list item + listItem.appendChild(checkbox); + listItem.appendChild(label); + + // Append the list item to the todoList + todoList.appendChild(listItem); + + // Clear the input field + todoInput.value = ''; + + saveState(); // Save the state after adding an item + } +} + +// Function to save the state +function saveState() { + var todos = []; + var todoItems = document.querySelectorAll("#todoList li"); + + // Iterate over the todo items and store their text content + for (var i = 0; i < todoItems.length; i++) { + todos.push(todoItems[i].textContent); + } + + // Save the state in local storage + localStorage.setItem("savedTodos", JSON.stringify(todos)); +} + +// Function to load the saved state +function loadState() { + var savedTodos = localStorage.getItem("savedTodos"); + + if (savedTodos) { + var todos = JSON.parse(savedTodos); + + // Create and append list items for each saved todo + var todoList = document.getElementById("todoList"); + for (var i = 0; i < todos.length; i++) { + var listItem = document.createElement("li"); + listItem.innerHTML = ''; + todoList.appendChild(listItem); + } + } +} + +// Call the loadState function when the page loads +window.onload = loadState;