From f468884d136176774ccc0e446766ae150c391096 Mon Sep 17 00:00:00 2001 From: ABDESSAMADMESRAR Date: Thu, 16 Nov 2023 18:54:54 +0100 Subject: [PATCH] push --- To do list.css | 114 ++++++++++++++++++++++++++++++++++++++++++++++++ To do list.html | 40 +++++++++++++++++ To do list.js | 72 ++++++++++++++++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 To do list.css create mode 100644 To do list.html create mode 100644 To do list.js diff --git a/To do list.css b/To do list.css new file mode 100644 index 0000000..a17af8b --- /dev/null +++ b/To do list.css @@ -0,0 +1,114 @@ +*{ + margin: 0; + padding: 0; +} +body{ + background-color: #352f5b; + color: #fff; +} +h1{ +text-align: center; +margin: 20px 0 0; +font-size: 4rem; +} +.task{ + text-align: center; + width: 80%; + margin: 50px auto; + font-size: 1.5rem; + background: rgba( 60, 116, 200, 0.6 ); + box-shadow: 0 6px 10px 0 #fbfbfb; + backdrop-filter: blur( 2.5px ); + -webkit-backdrop-filter: blur( 2.5px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); + border-bottom: 3px solid #fff ; + cursor: pointer; + + padding: 30px 20px; + +} +.trash{ +opacity: 0.5; +position: absolute; +left: 20px; +bottom: 40px; +transition: 0.4s; + +} +.trash:hover{ + opacity: 1; + color: tomato; +} +.star{ + position: absolute; +right: 20px; +bottom: 65px; +opacity: 0.7; +transition: 0.4s; + +} +.star:hover{ + opacity: 1; + color: orange; +} +.heart{ + + position: absolute; + right: 20px; + bottom: 20px; +display: none; + transition: 0.4s; + +} +.heart:hover{ + color: red; + opacity: 1; + transition: 0.4s; + +} +.angry{ + position: absolute; + right: 20px; + bottom: 20px; +color: #000; + transition: 0.4s; +} +.angry:hover{ +color: rgb(255, 42, 42); + opacity: 1; +} +h2{ + text-align: center; + font-size: 3rem; +} +form { + text-align: center; + margin: 20px auto; + padding: 20px 20px ; + width: 40%; +} +form input { +padding: 10px 15px; +width: 35vh; +border-radius: 10px; +} +button {all: unset;} +.upload{ + opacity: 0.4; +font-size: 2rem; +margin-left: 20px; +position: relative; +top: 9px; +} +.upload:hover{ + color: #b9f1cd; + opacity: 1; +} +/* code for javascript */ +.heart2{ + display: block; +} +.task2{ + text-decoration: line-through; +} \ No newline at end of file diff --git a/To do list.html b/To do list.html new file mode 100644 index 0000000..f703454 --- /dev/null +++ b/To do list.html @@ -0,0 +1,40 @@ + + + + + + + + + + To do list + + +

To do list

+
+
+

task1

+ + + + +
+
+

task2

+ + + + +
+
+

donner To do list

+ +
+ + +
+ + + + \ No newline at end of file diff --git a/To do list.js b/To do list.js new file mode 100644 index 0000000..03d68b5 --- /dev/null +++ b/To do list.js @@ -0,0 +1,72 @@ +// upload To do list + +const button = document.querySelector("button"); +const form = document.querySelector("form"); +const container = document.querySelector(".container"); +const input = document.querySelector("input"); +form.addEventListener("submit", (eo) => { + eo.preventDefault(); + const task = `
+

${input.value}

+ + + +
`; + + container.innerHTML += task; + input.value = ""; +}); +// to survey To do list +container.addEventListener("click", (eo) => { + // if (eo.target.className == "fa-solid fa-trash-can trash") { + // eo.target.parentElement.remove(); + // } else if (eo.target.className == "fa-solid fa-face-angry angry") { + // eo.target.style.display = "none"; + // const heart = ``; + // eo.target.parentElement + // .getElementsByClassName("tas")[0] + // .classList.add("task2"); + + // eo.target.parentElement.innerHTML += heart; + // }else if (eo.target.className == "fa-solid fa-heart heart") { + // eo.target.parentElement + // .getElementsByClassName("tas")[0] + // .classList.remove("task2"); + // eo.target.classList.add("heart") + // const angry = ``; + // eo.target.parentElement.innerHTML += angry ; + + // }else if(eo.target.className == "fa-solid fa-star star"){ + // container.prepend(eo.target.parentElement) + // } + + switch (eo.target.className) { + case "fa-solid fa-trash-can trash": + eo.target.parentElement.remove(); + break; + case "fa-solid fa-face-angry angry": + eo.target.style.display = "none"; + const heart = ``; + eo.target.parentElement + .getElementsByClassName("tas")[0] + .classList.add("task2"); + + eo.target.parentElement.innerHTML += heart; + + break; + case "fa-solid fa-heart heart": + eo.target.parentElement + .getElementsByClassName("tas")[0] + .classList.remove("task2"); + eo.target.classList.add("heart"); + const angry = ``; + eo.target.parentElement.innerHTML += angry; + break; + case "fa-solid fa-star star": + container.prepend(eo.target.parentElement); + break; + + default: + break; + } +});