diff --git a/src/ex1/index.html b/src/ex1/index.html index 4d8c49943..cf8eeacb3 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -1,14 +1,24 @@ - Exercise 1 + TO-DO List - -

Todo list

- - +
+

TO-DO list

+
+ + +
+
+
+
+ + + +
+
diff --git a/src/ex1/script.js b/src/ex1/script.js index e69de29bb..92145c6a2 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -0,0 +1,89 @@ +let input = document.querySelector(".newTask input"); +const add = document.querySelector(".newTask button"); +const tasksView = document.querySelector(".tasks"); +const tasks = []; +const howManyTasks = document.querySelector(".bottom .howMany"); +const showClearAll = document.querySelector(".bottom .clear"); +const showSort = document.querySelector(".bottom .sort"); + +//defult massege displayed when there are no tasks +const defultMassage = 'Please add your TO-DO List!'; +howManyTasks.innerHTML = defultMassage; + +//add new tasks +add.addEventListener('click', () => { //recognize click on 'add' button + addNewTask(input.value); +}); + +input.addEventListener('keypress', (event) => { //recognize pressing enter key + if (event.keyCode === 13) { + event.preventDefault(); + addNewTask(input.value); + } +}); + +function addNewTask(value) { + if (value === '') { + alert("You can't add an empty task"); + } + else { + showTasks(value); + updateBottom(); + } +} + +//show the tasks +function showTasks(newTask) { //adds new task to tasks array and adds it to html + let newLiTag = ''; + if (newTask != undefined) { + tasks.push(newTask); + } + tasks.forEach((element, index) => { + newLiTag += '
  • '+element+'🗑
    • '; + }); + tasksView.innerHTML = newLiTag; + input.value = ""; //clears the input after adding task +} + +//updates the bottom +function updateBottom() { //modify the amount of tasks displayed + if (tasks.length >= 1) { + let newSpan = ''; + newSpan = 'You have '+tasks.length+' pending tasks' + howManyTasks.innerHTML = newSpan; + if (tasks.length === 1) { //display clear all button only when there are tasks + showClearAll.style = 'display: block'; + showSort.style = 'display: block'; + } + } + else { //delete clear all button when there aren't tasks + showClearAll.style = 'display: none'; + showSort.style = 'display: none'; + howManyTasks.innerHTML = defultMassage; + } +} + +//delete task +function deleteTask(index){ + tasks.splice(index, 1); + showTasks(); + updateBottom(); +} + +//clear all +showClearAll.addEventListener('click', () => { //recognize click on 'clear all' button + tasks.length = 0; + showTasks(); + updateBottom(); +}); + +//task alert +function taskAlert(index) { + alert(tasks[index]); +} + +//sort +showSort.addEventListener('click', () => { //recognize click on 'sort' button + tasks.sort(); + showTasks(); +}); diff --git a/src/ex1/style.css b/src/ex1/style.css index e69de29bb..c8affb54e 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -0,0 +1,120 @@ + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + width: 100%; + background: linear-gradient( to bottom, #f0fba6 0%, #fb5b2f 100%) +} + +.container { + margin: 120px auto; + max-width: 50%; + background-color: aliceblue; + padding-inline: 25px; + padding-top: 10px; + padding-bottom: 25px; + border-radius: 5px; +} + +.container h1 { + color: rgb(0, 0, 0); + font-size: 30px; + text-align: center; +} + + +.newTask input { + width: 100%; + min-width: 85%; + height: 100%; + border: 1px solid #ccc; + font-size: 17px; + border-radius: 3px; + padding-left: 15px; + outline: none; +} + +.newTask button { + width: 50px; + height: 100%; + border: none; + outline: none; + background: rgb(255, 162, 0); + color: #fff; + font-size: 22px; + cursor: pointer; + border-radius: 3px; + margin-left: 5px; + +} + +.container .newTask { + display: flex; + height: 45px; + width: 100%; + margin: 20px 0; +} + +.container .tasks { + max-height: 250px; + overflow-y: auto; +} + +.tasks li { + list-style: none; + height: 45px; + line-height: 45px; + position: relative; + background: #f2f2f2; + border-radius: 3px; + margin-bottom: 8px; + padding: 0 15px; + overflow: hidden; +} + +.tasks li:hover { + background: #d9d9d9; + cursor: pointer; +} + +.tasks li span { + position: absolute; + right: -45px; + color: #fff; + background-color: red; + width: 45px; + text-align: center; + border-radius: 0 3px 3px 0; + cursor: pointer; + transition: all 0.3s ease; +} + +.tasks li:hover span { + right: 0px; +} + +.container .bottom { + display: flex; + width: 100%; + margin-top: 15px; + padding-left: 15px; +} + +.bottom button { + border: none; + outline: none; + background: gray; + color: #fff; + font-size: 16px; + cursor: pointer; + border-radius: 3px; + padding: 6px 10px; +} + +.container .bottom .sort { + margin-left: auto; + margin-right: 5px; +} \ No newline at end of file