diff --git a/Ex/2021-11-25/css/Ex2_solution.css b/Ex/2021-11-25/css/Ex2_solution.css index d9c0a18..78e669d 100644 --- a/Ex/2021-11-25/css/Ex2_solution.css +++ b/Ex/2021-11-25/css/Ex2_solution.css @@ -1,13 +1,13 @@ -.err { - background: #ffe6ee; +.err { + background: #ffe6ee; /*border: 1px solid #b1395f; */ } -.empty { - border: 1px solid #1f44eb; +.empty { + border: 1px solid #1f44eb; } -div{ +div { /* Center the form on the page */ margin: 0 auto; width: 450px; @@ -15,76 +15,92 @@ div{ padding: 1em; } -div.emsg{ - color: #c12020; - font-weight: bold; +div.emsg { + color: #c12020; + font-weight: bold; padding: 0; height: 1em; } form { - /* Center the form on the page */ - margin: 0 auto; - width: 450px; - /* Form outline */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; - } - - ul { - list-style: none; - padding: 0; - margin: 0; - } - - /*all li elements inside form and adjacent sibling li elements*/ - form li + li { - margin-top: 1em; - } - - label { - /* Uniform size & alignment */ - display: inline-block; - width: 100px; - text-align: right; - } - - input, - textarea { - /* To make sure that all text fields have the same font settings + /* Center the form on the page */ + margin: 0 auto; + width: 450px; + /* Form outline */ + padding: 1em; + border: 1px solid #ccc; + border-radius: 1em; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +/*all li elements inside form and adjacent sibling li elements*/ +form li + li { + margin-top: 1em; +} + +label { + /* Uniform size & alignment */ + display: inline-block; + width: 100px; + text-align: right; +} + +input, +textarea { + /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */ - font: 1em sans-serif; - - /* Uniform text field size */ - width: 300px; - box-sizing: border-box; - - /* Match form field borders */ - border: 1px solid #999; - } - - input:focus, - textarea:focus { - /* Additional highlight for focused elements */ - border-color: #000; - } - - textarea { - /* Align multiline text fields with their labels */ - vertical-align: top; - - /* Provide space to type some text */ - height: 5em; - } - - .button { - /* Align buttons with the text fields */ - padding-left: 90px; /* same size as the label elements */ - } - - button { - /* This extra margin represent roughly the same space as the space + font: 1em sans-serif; + + /* Uniform text field size */ + width: 300px; + box-sizing: border-box; + + /* Match form field borders */ + border: 1px solid #999; +} + +input:focus, +textarea:focus { + /* Additional highlight for focused elements */ + border-color: #000; +} + +textarea { + /* Align multiline text fields with their labels */ + vertical-align: top; + + /* Provide space to type some text */ + height: 5em; +} + +.button { + /* Align buttons with the text fields */ + padding-left: 90px; /* same size as the label elements */ +} + +button { + /* This extra margin represent roughly the same space as the space between the labels and their text fields */ - margin-left: .5em; - } \ No newline at end of file + margin-left: 0.5em; +} + +#A { + border: solid black; + background-color: gray; + text-align: center; +} +#B { + border: solid black; + background-color: gray; + text-align: center; +} +#C { + border: solid black; + background-color: gray; + text-align: center; +} diff --git a/Ex/2021-11-25/formValidationOnSubmit.html b/Ex/2021-11-25/formValidationOnSubmit.html index 30eb502..aa1155f 100644 --- a/Ex/2021-11-25/formValidationOnSubmit.html +++ b/Ex/2021-11-25/formValidationOnSubmit.html @@ -1,62 +1,35 @@ - - - + + + Student details
-

פרטי סטודנט

-
+

בדיקת חבילה

+
- -
+ +

+ +

+ + +
- -
+ + +
+
א
+
ב
+
ג
+
- \ No newline at end of file + diff --git a/Ex/2021-11-25/js/formValidationOnSubmit.css b/Ex/2021-11-25/js/formValidationOnSubmit.css new file mode 100644 index 0000000..51f54df --- /dev/null +++ b/Ex/2021-11-25/js/formValidationOnSubmit.css @@ -0,0 +1,3 @@ +#packages { + background-color: gray; +} diff --git a/Ex/2021-11-25/js/formValidationOnSubmit.js b/Ex/2021-11-25/js/formValidationOnSubmit.js index 6ef4310..f4c4ed5 100644 --- a/Ex/2021-11-25/js/formValidationOnSubmit.js +++ b/Ex/2021-11-25/js/formValidationOnSubmit.js @@ -1,110 +1,115 @@ -function saveStudent(){ - if (validateEducation()){ - let student = { - fname: document.getElementById('fname').value, - lname: document.getElementById('lname').value, - mail: document.getElementById('mail').value, - msg: document.getElementById('msg').value - } - window.localStorage.setItem("student",JSON.stringify(student)); - alert(`The following studen details were saved successfully:\n ${JSON.stringify(student, undefined, 2 )}`); - return true; - }else{ - return false; - } +function saveStudent() { + if (validateEducation()) { + let student = { + fname: document.getElementById("fname").value, + lname: document.getElementById("lname").value, + mail: document.getElementById("mail").value, + msg: document.getElementById("msg").value, + }; + window.localStorage.setItem("student", JSON.stringify(student)); + alert( + `The following studen details were saved successfully:\n ${JSON.stringify( + student, + undefined, + 2 + )}` + ); + return true; + } else { + return false; + } } -function getStudentFromLocalStorage(){ +function getStudentFromLocalStorage() { let studentStr = window.localStorage.getItem("student"); - if (studentStr != null){ + if (studentStr != null) { console.log(studentStr); let studentObj = JSON.parse(studentStr); - document.getElementById('fname').value = studentObj.fname; - document.getElementById('lname').value = studentObj.lname; - document.getElementById('mail').value = studentObj.mail; - document.getElementById('msg').value = studentObj.msg; - - setTimeout(function(){ - document.getElementById('fname').value = ""; - document.getElementById('lname').value = ""; - document.getElementById('mail').value = ""; - document.getElementById('msg').value = ""; + document.getElementById("fname").value = studentObj.fname; + document.getElementById("lname").value = studentObj.lname; + document.getElementById("mail").value = studentObj.mail; + document.getElementById("msg").value = studentObj.msg; + + setTimeout(function () { + document.getElementById("fname").value = ""; + document.getElementById("lname").value = ""; + document.getElementById("mail").value = ""; + document.getElementById("msg").value = ""; window.localStorage.removeItem("student"); }, 5000); - } - } -function validateEducation(){ - let birthDate = new Date(document.getElementById('birthDate').value); +function validateEducation() { + let birthDate = new Date(document.getElementById("birthDate").value); console.log("birthDate.getUTCFullYear() = " + birthDate.getUTCFullYear()); // diff = now (in ms since 1970) - birthday (in ms since 1970) - // diff = age in ms - console.log("Date.now().getUTCFullYear() = " + new Date(Date.now()).getUTCFullYear()); + // diff = age in ms + console.log( + "Date.now().getUTCFullYear() = " + new Date(Date.now()).getUTCFullYear() + ); var diff_ms = Date.now() - birthDate.getTime(); - var age_dt = new Date(diff_ms); + var age_dt = new Date(diff_ms); console.log("age_dt.getUTCFullYear() = " + age_dt.getUTCFullYear()); let age = Math.abs(age_dt.getUTCFullYear() - 1970); console.log("age = " + age); - let education = parseInt(document.getElementById('education').value); + let education = parseInt(document.getElementById("education").value); console.log("education = " + education); let field = document.getElementById("education"); let error = document.getElementById("education_err"); - if (education + 5 < age){ + if (education + 5 < age) { field.classList.remove("err"); - error.innerHTML = ""; - return true; - }else{ + error.innerHTML = ""; + return true; + } else { field.classList.add("err"); error.innerHTML = "חינוך פורמלי מתחיל מגיל 5"; return false; } } -function cleanEducationError(){ +function cleanEducationError() { document.getElementById("education").classList.remove("err"); - document.getElementById("education_err").innerHTML = ""; + document.getElementById("education_err").innerHTML = ""; } -function setSubmitButton(){ +function setSubmitButton() { let inputElements = document.querySelectorAll("input[required]"); document.getElementById("submitForm").disabled = false; inputElements.forEach((inputElement) => { - console.log("Checking value of " + inputElement.id) - if (inputElement.value == "") - { + console.log("Checking value of " + inputElement.id); + if (inputElement.value == "") { document.getElementById("submitForm").disabled = true; } }); } -function initiateForm(){ - //Limit maximum birth date to be 18 years ago - var today = new Date(); - var dd = today.getDate(); - var mm = today.getMonth() + 1; //January is 0! - var yyyy = today.getFullYear() - 18; +function initiateForm() { + //Limit maximum birth date to be 18 years ago + var today = new Date(); + var dd = today.getDate(); + var mm = today.getMonth() + 1; //January is 0! + var yyyy = today.getFullYear() - 18; - if (dd < 10) { - dd = '0' + dd; - } + if (dd < 10) { + dd = "0" + dd; + } + + if (mm < 10) { + mm = "0" + mm; + } - if (mm < 10) { - mm = '0' + mm; - } - - maxBirthDate = yyyy + '-' + mm + '-' + dd; - console.log("Maximum birth date is: " + maxBirthDate); - //document.getElementById('fname').setAttribute("class","empty"); - //document.getElementById('fname').classList.add("empty"); - //document.getElementById('fname').style.setProperty("background", "#afc2e94d"); - //document.getElementById('fname').style.background = "#afc2e94d"; - - document.getElementById("submitForm").disabled = true; - let inputElements = document.querySelectorAll("input"); - inputElements.forEach((inputElement) => { - inputElement.addEventListener("change", setSubmitButton); - }); + maxBirthDate = yyyy + "-" + mm + "-" + dd; + console.log("Maximum birth date is: " + maxBirthDate); + //document.getElementById('fname').setAttribute("class","empty"); + //document.getElementById('fname').classList.add("empty"); + //document.getElementById('fname').style.setProperty("background", "#afc2e94d"); + //document.getElementById('fname').style.background = "#afc2e94d"; + + //document.getElementById("submitForm").disabled = true; + let inputElements = document.querySelectorAll("input"); + inputElements.forEach((inputElement) => { + inputElement.addEventListener("change", setSubmitButton); + }); } diff --git a/Ex/2021-11-25/js/formValidationOnSubmit2.js b/Ex/2021-11-25/js/formValidationOnSubmit2.js new file mode 100644 index 0000000..e157f5c --- /dev/null +++ b/Ex/2021-11-25/js/formValidationOnSubmit2.js @@ -0,0 +1,30 @@ +let packages=[]; + + +let theChoise={ + + minutes="", + sms="", + giga="", + + +}; + +let theException= { + +minutes= "", +giga = "", +sms= "", + + +} + +function readData(){ + + theChoise.minutes=document.querySelectorAll("minutes"); + + + +} + + diff --git a/Ex/2021-12-02/hanuka.html b/Ex/2021-12-02/hanuka.html index 4612421..8a45c95 100644 --- a/Ex/2021-12-02/hanuka.html +++ b/Ex/2021-12-02/hanuka.html @@ -11,10 +11,13 @@ bootstrap grid sample - +

חנוכה שמח

-
-
+ + +
+
+
@@ -36,7 +39,9 @@

חנוכה שמח

- הדלק נר + + +
@@ -44,4 +49,6 @@

חנוכה שמח

- \ No newline at end of file + + +
\ No newline at end of file diff --git a/Ex/2021-12-02/js/hanuka_oop.js b/Ex/2021-12-02/js/hanuka_oop.js index bd45857..0169592 100644 --- a/Ex/2021-12-02/js/hanuka_oop.js +++ b/Ex/2021-12-02/js/hanuka_oop.js @@ -74,4 +74,38 @@ function initPage(){ function lightCandle(){ if (nextCandleIndex < candleDays.length) dayCandles[nextCandleIndex].show(); -} \ No newline at end of file + + disableButton() + + + +} + +function disableButton(){ + + if (nextCandleIndex == candleDays.length) + + {document.getElementById('newCandle').disabled=true;} + + +} + + + + + + +function eraseCandle(){ + + + let erase=document.getElementsByClassName('container'); + + erase.classList.remove("col-lg-1"); + + + } + + + + + diff --git a/Ex/2021-12-02/project.Fjs b/Ex/2021-12-02/project.Fjs new file mode 100644 index 0000000..7cb6a4f --- /dev/null +++ b/Ex/2021-12-02/project.Fjs @@ -0,0 +1,66 @@ +let tasks = []; +let deleteBtn = []; + +document.addEventListener("DOMContentLoaded", () => { + tasks = JSON.parse(window.localStorage.getItem("tasks")); + drawTaskCard(); +}); + +let task = { + name: "", + date: "", + time: "", +}; + +function addTask() { + const name = document.querySelector("textarea").value; + const date = document.getElementById("date").value; + const time = document.getElementById("time").value; + + task = { + name, + date, + time, + }; + + tasks.push({ ...task }); + localStorage.setItem("tasks", JSON.stringify(tasks)); +} + +function drawTaskCard() { + const taskContainer = document.querySelector(".col-3"); + taskContainer.innerHTML = ""; + tasks.forEach((task, index) => { + // drawing the card each time clicked on addTask with the task object values. + taskContainer.innerHTML += ` +
+ +
${task.name}
+

${task.time} ${task.date}

+
+ `; + }); + + const taskCards = document.querySelectorAll(".task_Id"); + const removeButton = document.querySelectorAll(".remove-btn"); + taskCards.forEach((_, index) => { + removeButton[index].addEventListener("click", () => { + tasks.splice(index, 1); // removing the exact index clicked + window.localStorage.setItem("tasks", JSON.stringify(tasks)); // saving the updated task to the localstorage + location.reload(); // reloading window to apply changes + }); + }); +} + +const form = document.querySelector("form"); +form.addEventListener("submit", (e) => { + e.preventDefault(); + addTask(); + drawTaskCard(); +}); + +function resetForm() { + document.getElementById("form").reset(); +} diff --git a/Ex/2021-12-02/projectF.css b/Ex/2021-12-02/projectF.css new file mode 100644 index 0000000..044c1a5 --- /dev/null +++ b/Ex/2021-12-02/projectF.css @@ -0,0 +1,128 @@ +body { + background-image: url("tile.jpg"); +} + +h1 img { + display: block; + margin-left: auto; + margin-right: auto; +} + +h1 { + text-align: center; + font-family: Brush Script MT, Brush Script Std, cursive; + font-size: 80px; +} + +input, +label { + font-family: "Lobster", cursive; + font-size: 15px; +} + +form { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); +} + +.task_Id { + float: left; + padding-top: 22px; + padding-right: 22px; + padding-bottom: 30px; + padding-left: 5px; + background-image: url(notebg.png); + width: 190px; + height: 220px; + margin-left: 4px; + display: block; + top: 50%; + left: 50%; + transition: 3s; + opacity: 1; + text-align: justify; + overflow: auto; + word-break: break-all; + overflow-y: auto; +} + +div.new_Task:active { + transition: height 4s; + opacity: 0.2; +} + +div.new_Task { + height: 20px; + padding-top: 22px; + padding-right: 22px; + padding-bottom: 30px; + padding-left: 17px; + text-align: center; + word-break: break-all; + width: 150px; + padding: 15px; + overflow: hidden; + margin-left: 10px; +} + +p { + top: 80%; + margin: 0; + padding: 0; + position: relative; + bottom: 0; +} + +#delButton { + opacity: 0.02; +} + +#delButton:hover { + opacity: 1; +} + +#delButton { + left: 190px; + top: -40px; + position: sticky; +} + +#content { + text-align: left; + padding-right: 10px; + width: 150px; + height: 110px; + padding-top: 1px; + position: absolute; + overflow: auto; + word-break: break-all; + overflow-y: auto; + padding: 5px; + margin-top: 15px; + margin-right: 5px; + margin-left: -10px; +} + +#textarea { + display: inline-block; + word-spacing: 0px; +} + +.task_Id- { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 0.3s; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/Ex/2021-12-02/projectF.html b/Ex/2021-12-02/projectF.html new file mode 100644 index 0000000..9e83ed4 --- /dev/null +++ b/Ex/2021-12-02/projectF.html @@ -0,0 +1,57 @@ + + + + project + + + + + + + + + + + + +

My Task Board

+
+

+ + + +
+ +
+

+ + + +

+ + +
+

+ + +
+ + + +
+
+ + + + + + + + + + + + + + + diff --git a/Ex/2021-12-09/errorHandling.html b/Ex/2021-12-09/errorHandling.html index 2ee51f8..1b51f5e 100644 --- a/Ex/2021-12-09/errorHandling.html +++ b/Ex/2021-12-09/errorHandling.html @@ -1,29 +1,39 @@ - - + + -

JavaScript Errors handling

-
+

JavaScript Errors handling

+
+ + + + + + + + + + + + + + + diff --git a/project/new/projectF.js b/project/new/projectF.js new file mode 100644 index 0000000..ea4ca22 --- /dev/null +++ b/project/new/projectF.js @@ -0,0 +1,66 @@ +let tasks = []; +let deleteBtn = []; + +document.addEventListener("DOMContentLoaded", () => { + tasks = JSON.parse(window.localStorage.getItem("tasks")); + drawTaskCard(); +}); + +let task = { + name: "", + date: "", + time: "", +}; + +function addTask() { + const name = document.querySelector("textarea").value; + const date = document.getElementById("date").value; + const time = document.getElementById("time").value; + + task = { + name, + date, + time, + }; + + tasks.push({ ...task }); + localStorage.setItem("tasks", JSON.stringify(tasks)); +} + +function drawTaskCard() { + const taskContainer = document.querySelector(".col-3"); + taskContainer.innerHTML = ""; + tasks.forEach((task, index) => { + // drawing the card each time clicked on addTask with the task object values. + taskContainer.innerHTML += ` +
+ +
${task.name}
+

${task.date}
[${task.time}

+
+ `; + }); + + const taskCards = document.querySelectorAll(".task_Id"); + const removeButton = document.querySelectorAll(".remove-btn"); + taskCards.forEach((_, index) => { + removeButton[index].addEventListener("click", () => { + tasks.splice(index, 1); // removing the exact index clicked + window.localStorage.setItem("tasks", JSON.stringify(tasks)); // saving the updated task to the localstorage + location.reload(); // reloading window to apply changes + }); + }); +} + +const form = document.querySelector("form"); +form.addEventListener("submit", (e) => { + e.preventDefault(); + addTask(); + drawTaskCard(); +}); + +function resetForm() { + document.querySelector(".form").reset(); +} diff --git a/project/new/tile.jpg b/project/new/tile.jpg new file mode 100644 index 0000000..141cfdf Binary files /dev/null and b/project/new/tile.jpg differ diff --git a/project/new/title.png b/project/new/title.png new file mode 100644 index 0000000..23946ca Binary files /dev/null and b/project/new/title.png differ diff --git a/project/newprojectF.html b/project/newprojectF.html new file mode 100644 index 0000000..9e83ed4 --- /dev/null +++ b/project/newprojectF.html @@ -0,0 +1,57 @@ + + + + project + + + + + + + + + + + + +

My Task Board

+
+

+ + + +
+ +
+

+ + + +

+ + +
+

+ + +
+ + + + + + + + + + + + + + + + + + + + diff --git a/project/project.css b/project/project.css new file mode 100644 index 0000000..337d154 --- /dev/null +++ b/project/project.css @@ -0,0 +1,46 @@ + + +body{background-image: url('tile.jpg');} + +h1 img { + + display: block; + margin-left: auto; + margin-right: auto;} + + + h1{text-align: center; + font-family: Brush Script MT, Brush Script Std, cursive; + font-size: 80px;} + + form{text-align: center; + + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + + + } + + + #taskDiv div{float: left; + + + padding: 25px; + + background-image: url(notebg.png); + + width:180px; + height:220px; + + + margin-left: 30px; + + display: block; + top: 50%; + left: 50%;} + + p{margin-bottom: 100px;} + + \ No newline at end of file diff --git a/project/project.html b/project/project.html new file mode 100644 index 0000000..e58322d --- /dev/null +++ b/project/project.html @@ -0,0 +1,57 @@ + + + + project + + + + + + + + + + + + +

My Task Board

+
+

+ + + +
+ +
+

+ + + +

+ + +
+

+ + +
+ + + + + + + + + + + + + + + + + + + + diff --git a/project/project.js b/project/project.js new file mode 100644 index 0000000..bcdd4c6 --- /dev/null +++ b/project/project.js @@ -0,0 +1,34 @@ +function addTask() { + const task = { + Name: this.Name, + dueDate: this.dueDate, + dueTime: this.dueTime, + }; + + task.Name = document.getElementById("task").value; + task.dueDate = document.getElementById("date").value; + task.dueTime = document.getElementById("time").value; + + let newTask = document.createElement("div"); + + let taskname = document.createElement("p"); + let taskdate = document.createElement("p"); + let tasktime = document.createElement("p"); + + newTask.appendChild(taskname); + newTask.appendChild(taskdate); + newTask.appendChild(tasktime); + + let taskN = document.createTextNode(task.Name); + let taskD = document.createTextNode(task.dueDate); + let taskT = document.createTextNode(task.dueTime); + + taskname.appendChild(taskN); + taskdate.appendChild(taskD); + tasktime.appendChild(taskT); + + let br = document.createElement("br"); + taskname.appendChild(br); + + document.getElementById("taskDiv").appendChild(newTask); +} diff --git a/project/projectN.css b/project/projectN.css new file mode 100644 index 0000000..044c1a5 --- /dev/null +++ b/project/projectN.css @@ -0,0 +1,128 @@ +body { + background-image: url("tile.jpg"); +} + +h1 img { + display: block; + margin-left: auto; + margin-right: auto; +} + +h1 { + text-align: center; + font-family: Brush Script MT, Brush Script Std, cursive; + font-size: 80px; +} + +input, +label { + font-family: "Lobster", cursive; + font-size: 15px; +} + +form { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); +} + +.task_Id { + float: left; + padding-top: 22px; + padding-right: 22px; + padding-bottom: 30px; + padding-left: 5px; + background-image: url(notebg.png); + width: 190px; + height: 220px; + margin-left: 4px; + display: block; + top: 50%; + left: 50%; + transition: 3s; + opacity: 1; + text-align: justify; + overflow: auto; + word-break: break-all; + overflow-y: auto; +} + +div.new_Task:active { + transition: height 4s; + opacity: 0.2; +} + +div.new_Task { + height: 20px; + padding-top: 22px; + padding-right: 22px; + padding-bottom: 30px; + padding-left: 17px; + text-align: center; + word-break: break-all; + width: 150px; + padding: 15px; + overflow: hidden; + margin-left: 10px; +} + +p { + top: 80%; + margin: 0; + padding: 0; + position: relative; + bottom: 0; +} + +#delButton { + opacity: 0.02; +} + +#delButton:hover { + opacity: 1; +} + +#delButton { + left: 190px; + top: -40px; + position: sticky; +} + +#content { + text-align: left; + padding-right: 10px; + width: 150px; + height: 110px; + padding-top: 1px; + position: absolute; + overflow: auto; + word-break: break-all; + overflow-y: auto; + padding: 5px; + margin-top: 15px; + margin-right: 5px; + margin-left: -10px; +} + +#textarea { + display: inline-block; + word-spacing: 0px; +} + +.task_Id- { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 0.3s; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/project/projectN.html b/project/projectN.html new file mode 100644 index 0000000..b284d98 --- /dev/null +++ b/project/projectN.html @@ -0,0 +1,59 @@ + + + + project + + + + + + + + + + + + + + +

My Task Board

+
+

+ + + +
+ +
+

+ + + +

+ + +
+

+ + + +
+
+ + + + + + + + + + + + + + + + + + diff --git a/project/projectN.js b/project/projectN.js new file mode 100644 index 0000000..7cb6a4f --- /dev/null +++ b/project/projectN.js @@ -0,0 +1,66 @@ +let tasks = []; +let deleteBtn = []; + +document.addEventListener("DOMContentLoaded", () => { + tasks = JSON.parse(window.localStorage.getItem("tasks")); + drawTaskCard(); +}); + +let task = { + name: "", + date: "", + time: "", +}; + +function addTask() { + const name = document.querySelector("textarea").value; + const date = document.getElementById("date").value; + const time = document.getElementById("time").value; + + task = { + name, + date, + time, + }; + + tasks.push({ ...task }); + localStorage.setItem("tasks", JSON.stringify(tasks)); +} + +function drawTaskCard() { + const taskContainer = document.querySelector(".col-3"); + taskContainer.innerHTML = ""; + tasks.forEach((task, index) => { + // drawing the card each time clicked on addTask with the task object values. + taskContainer.innerHTML += ` +
+ +
${task.name}
+

${task.time} ${task.date}

+
+ `; + }); + + const taskCards = document.querySelectorAll(".task_Id"); + const removeButton = document.querySelectorAll(".remove-btn"); + taskCards.forEach((_, index) => { + removeButton[index].addEventListener("click", () => { + tasks.splice(index, 1); // removing the exact index clicked + window.localStorage.setItem("tasks", JSON.stringify(tasks)); // saving the updated task to the localstorage + location.reload(); // reloading window to apply changes + }); + }); +} + +const form = document.querySelector("form"); +form.addEventListener("submit", (e) => { + e.preventDefault(); + addTask(); + drawTaskCard(); +}); + +function resetForm() { + document.getElementById("form").reset(); +}