diff --git a/week-1/fix/median.js b/week-1/fix/median.js index 046be3d0..c28d8dd6 100644 --- a/week-1/fix/median.js +++ b/week-1/fix/median.js @@ -1,6 +1,6 @@ -// Fix this implementation -// Start by running the tests for this function -// If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory +//Fix this implementation +//Start by running the tests for this function +//If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory function calculateMedian(list) { const middleIndex = Math.floor(list.length / 2); @@ -8,4 +8,9 @@ function calculateMedian(list) { return median; } -module.exports = calculateMedian; +//calculateMedian( 3, 3, 4, 5) +//module.exports = calculateMedian; + +// console.log(calculateMedian( 3, 3, 4, 5)) + + diff --git a/week-3/alarmclock/index.html b/week-3/alarmclock/index.html index 48e2e80d..159db274 100644 --- a/week-3/alarmclock/index.html +++ b/week-3/alarmclock/index.html @@ -4,6 +4,7 @@ + Title here @@ -15,6 +16,6 @@

Time Remaining: 00:00

- + diff --git a/week-3/todo-list/index.html b/week-3/todo-list/index.html index ee3ef64f..2969310e 100644 --- a/week-3/todo-list/index.html +++ b/week-3/todo-list/index.html @@ -3,24 +3,27 @@ - Title here + + + Todo List
-
- + +
+ +
+
-
- - +
+ + +
+
    + + diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js index 61982a54..38f003f8 100644 --- a/week-3/todo-list/script.js +++ b/week-3/todo-list/script.js @@ -1,25 +1,68 @@ -function populateTodoList(todos) { - let list = document.getElementById("todo-list"); - // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. -} - -// These are the same todos that currently display in the HTML -// You will want to remove the ones in the current HTML after you have created them using JavaScript let todos = [ { task: "Wash the dishes", completed: false }, { task: "Do the shopping", completed: false }, ]; -populateTodoList(todos); - -// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal. function addNewTodo(event) { - // The code below prevents the page from refreshing when we click the 'Add Todo' button. - event.preventDefault(); - // Write your code here... and remember to reset the input field to be blank after creating a todo! + + let list = document.getElementById("todo-list"); + let listValue = list.value; + + + let li = document.createElement("li") + li.classList.add("style-list"); + list.appendChild(li); + + + let container = document.createElement("span") + container.classList.add("layout"); + list.appendChild(container); + + + let checkIcon = document.createElement("i"); + checkIcon.className = 'fa fa-check'; + checkIcon.setAttribute("aria-hidden", "true"); + checkIcon.onclick = function() { + li.classList.toggle("completed"); + } + container.appendChild(checkIcon); + + + let trashIcon = document.createElement("i"); + trashIcon.className = 'fa fa-trash'; + trashIcon.setAttribute("aria-hidden", "true"); + trashIcon.onclick = function(){ + li.remove(); + }; + container.appendChild(trashIcon); + + let textNode = document.createTextNode(listValue); + li.appendChild(container); + li.appendChild(textNode); + + const ul = document.getElementById("task-list"); + ul.appendChild(li); + + list.value = ""; + event.preventDefault(); } -// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not). -function deleteAllCompletedTodos() { - // Write your code here... + +function deleteAllCompletedTodos(event) { + let todoList = document.getElementById("task-list"); + let itemsTocompleted = document.querySelectorAll(".completed"); + itemsTocompleted.forEach(function (item) { + todoList.removeChild(item); + }); } + + + + + + + + + + + diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css index 8b137891..0a5c8f82 100644 --- a/week-3/todo-list/style.css +++ b/week-3/todo-list/style.css @@ -1 +1,97 @@ +body{ + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: auto; + background-image: url("./assets/world.jpg"); +} + +.completed{ + text-decoration: line-through; + color: rgb(24, 27, 24); +} +form{ + margin-left: 600px; + background-color: white; + width: 40%; + border-radius: 6px; + margin-top: 200px; + align-items: center; + justify-content: center; +} +.line{ + width: 569px; + margin-top: 25px; + margin-bottom: 30px; + border: 1px solid gray; +} +#add-style{ + font-size: 1.4em; + padding-left: 5px; + padding-top: 15px; + display: block; +} + +.style-list{ + list-style: none; + background-color: rgb(215, 211, 211); + font-size : "1.2em"; + position: relative; + width: 70%; + padding: 20px; + border-radius: 7px; + margin-right: 800px; + margin-bottom: 20px; + font-size: 1.3em; +} + +.layout{ + position: absolute; + display: inline-block; + left: 20px; + padding-left:300px; + top: 50%; + padding-top: 20px; + transform: translateY(-50%); +} +.btn{ + display: inline; + text-align: center; + display: flex; + gap: 10px; + padding-bottom: 30px; + padding-left: 8px; +} + + +button{ + padding: 15px 15px; + font-weight: bold; + font-size: 1em; + border: none; + border-radius: 6px; + color: white; + background-color: rgb(69, 69, 233); + } + + @media screen and (max-width: 768px) { + .layout{ + padding-left:200px; + } + form{ + align-items: flex-start; + justify-content: start; + width: 100%; + margin-bottom: 30px; + margin-left: 0px; + padding: 0px; + } + .line{ + width: 100%; + } + button{ + background-color: burlywood; + } + + } \ No newline at end of file