push

ABDESSAMADMESRAR · Nov 16, 2023 · f468884 · f468884
commit f468884
Show file tree

Hide file tree

Showing 3 changed files with 226 additions and 0 deletions.
diff --git a/To do list.css 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;
+}
diff --git a/To do list.html b/To do list.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="To do list.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+
+  <title>To do list</title>
+</head>
+<body>
+  <h1>To do list</h1>
+<div class="container">
+    <div class="task">
+      <h2 class="tas">task1</h2>
+      <i class="fa-solid fa-trash-can trash"></i>
+      <i class="fa-solid fa-star star"></i>
+      <!-- <i class="fa-solid fa-heart heart"></i> -->
+      <i class="fa-solid fa-face-angry angry"></i>
+    </div>
+    <div class="task">  
+        <h2 class="tas">task2</h2>
+        <i class="fa-solid fa-trash-can trash"></i>
+        <i class="fa-solid fa-star star"></i>
+        <!-- <i class="fa-solid fa-heart heart"></i> -->
+        <i class="fa-solid fa-face-angry angry"></i>
+    </div>
+</div>
+<h2>donner To do list</h2>
+
+<form action="#">
+  <input type="text" maxlength="20">
+  <button type="submit"><i class="fa-solid fa-upload upload"></i>
+  </button>
+</form>
+
+<script src="To do list.js"></script>
+</body>
+</html>
diff --git a/To do list.js 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 = `  <div class="task">  
+<h2 class="tas">${input.value}</h2>
+  <i class="fa-solid fa-trash-can trash"></i>
+  <i class="fa-solid fa-star star"></i>
+  <i class="fa-solid fa-face-angry angry"></i>
+</div>`;
+
+  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 = `<i class="fa-solid fa-heart heart"></i>`;
+  //   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 = `<i class="fa-solid fa-face-angry angry"></i>`;
+  //   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 = `<i class="fa-solid fa-heart heart"></i>`;
+      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 = `<i class="fa-solid fa-face-angry angry"></i>`;
+      eo.target.parentElement.innerHTML += angry;
+      break;
+    case "fa-solid fa-star star":
+      container.prepend(eo.target.parentElement);
+      break;
+
+    default:
+      break;
+  }
+});