Criando projeto Daily Planner

gabrielliosc · Sep 4, 2023 · f68e6d7 · f68e6d7
commit f68e6d7
Show file tree

Hide file tree

Showing 14 changed files with 369 additions and 0 deletions.
diff --git a/images/circle-plus-solid.svg b/images/circle-plus-solid.svg
diff --git a/images/face-smile-regular.svg b/images/face-smile-regular.svg
diff --git a/images/plant1.jpg b/images/plant1.jpg
diff --git a/images/plant1.png b/images/plant1.png
diff --git a/images/plant2.jpg b/images/plant2.jpg
diff --git a/images/plant2.png b/images/plant2.png
diff --git a/images/plant3.jpg b/images/plant3.jpg
diff --git a/images/plant3.png b/images/plant3.png
diff --git a/images/planta.jpg b/images/planta.jpg
diff --git a/images/planta.png b/images/planta.png
diff --git a/images/simple-plant.jpg b/images/simple-plant.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>To do list</title>
+  <link rel="stylesheet" href="style.css" />
+  <script src="https://kit.fontawesome.com/bb15cd262c.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+  <div class="container">
+    <header>
+      <img src="images/plant1.png" alt="Daily Planner" />
+      <div class="title">
+        <h1>DAILY PLANNER</h1>
+        <input type="date" name="datePlanner" id="datePlanner" />
+      </div>
+      <img src="images/plant2.png" alt="Daily Planner" />
+    </header>
+
+    <div class="columns">
+      <div class="left">
+        <div class="priority">
+          <h2>PRIORIDADES</h2>
+          <ul>
+            <li class="background-1">
+              <input type="checkbox" name="firstP" id="firstP" />
+              <input type="text" />
+            </li>
+            <li class="background-2">
+              <input type="checkbox" name="secondP" id="secondP" />
+              <input type="text" />
+            </li>
+            <li class="background-3">
+              <input type="checkbox" name="thirdP" id="thirdP" />
+              <input type="text" />
+            </li>
+            <li class="background-4">
+              <input type="checkbox" name="fourthP" id="fourthP" />
+              <input type="text" />
+            </li>
+          </ul>
+        </div>
+        <form>
+          <h2>TO DO</h2>
+          <div class="new-task">
+            <input type="text" placeholder="Add new task" />
+            <button type="submit">
+              <i class="fa-solid fa-circle-plus"></i>
+            </button>
+          </div>
+        </form>
+        <div class="task-box">
+        </div>
+      </div>
+      <div class="right">
+        <div class="commitment">
+          <div>
+            <h2>COMPROMISSOS</h2>
+            <ul>
+              <li>
+                <input type="time" name="fisrtTime" id="fisrtTime" />
+                <input type="text" />
+              </li>
+              <li>
+                <input type="time" name="secondTime" id="secondTime" />
+                <input type="text" />
+              </li>
+              <li>
+                <input type="time" name="thirdTime" id="thirdTime" />
+                <input type="text" />
+              </li>
+              <li>
+                <input type="time" name="fourthTime" id="fourthTime" />
+                <input type="text" />
+              </li>
+            </ul>
+          </div>
+          <img src="images/plant3.png" alt="plant" />
+        </div>
+        <div class="bullet">
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+        </div>
+        <div class="list">
+          <h2>REASONS TO SMILE</h2>
+          <ul>
+            <li>
+              <input type="text">
+            </li>
+            <li>
+              <input type="text">
+            </li>
+            <li>
+              <input type="text">
+            </li>
+            <li>
+              <input type="text">
+            </li>
+          </ul>
+        </div>
+        <div class="bullet">
+          <h2>TOMORROW</h2>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+          <p>................</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,42 @@
+const buttonNewTask = document.querySelector(".new-task button");
+const taskbox = document.querySelector(".task-box");
+const newTaskInput = document.querySelector(".new-task input");
+
+buttonNewTask.addEventListener("click", addTask);
+
+
+function addTask(e) {
+
+  e.preventDefault();
+  const taskItem = document.createElement("div");
+  taskItem.classList.add("task-item");
+
+  const checkboxInput = document.createElement("input");
+  checkboxInput.type = "checkbox";
+
+  const text = newTaskInput.value;
+  const textItem = document.createElement("p");
+  textItem.innerText = text;
+
+  const buttonTrash = document.createElement("button");
+  buttonTrash.innerHTML = '<i class="fa fa-trash"></i>';
+
+  taskItem.appendChild(checkboxInput);
+  taskItem.appendChild(textItem);
+  taskItem.appendChild(buttonTrash);
+  taskbox.appendChild(taskItem);
+
+  buttonTrash.addEventListener("click", deleteTask);
+  checkboxInput.addEventListener('click', completeTask);
+  newTaskInput.value = "";
+}
+function deleteTask(e) {
+  const buttonTrash = e.target.parentElement;
+  const element = buttonTrash.parentElement;
+
+  element.remove();
+}
+function completeTask(e) {
+  e.target.parentElement.classList.toggle("complete");
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,200 @@
+@import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap");
+
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  font-family: "Caveat Brush", cursive;
+  font-size: 12px;
+  box-sizing: border-box;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.container {
+  border: 1px solid #bc5950;
+  border-radius: 10px;
+  background-color: #e4e4de;
+  color: #bc5950;
+  margin: 10vh 0vh;
+  padding: 20px;
+  height: 700px;
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+}
+.container header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.container header input[type="date"] {
+  background-color: transparent;
+  color: #000;
+  border: none;
+}
+.container header input[type="date"]:focus {
+  outline: none;
+}
+.container header ::-webkit-calendar-picker-indicator,
+.commitment ::-webkit-calendar-picker-indicator {
+  display: none;
+}
+.container header ::-webkit-datetime-edit-text {
+  background-image: url("images/planta.jpg");
+  background-repeat: no-repeat;
+  background-size: 10px;
+}
+.container header ::-webkit-datetime-edit-day-field {
+  background-color: transparent;
+}
+.container header img {
+  height: 100px;
+  width: 150px;
+  padding-bottom: 10px;
+}
+.title {
+  text-align: center;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+.columns {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+.columns div {
+  padding: 5px;
+}
+.columns .left {
+  width: 50%;
+}
+.columns .right {
+  width: 50%;
+}
+.right .bullet img {
+  height: 100px;
+  width: 50px;
+  position: absolute;
+  top: 570px;
+  z-index: 1;
+}
+.priority ul li {
+  border: 2px solid #e4e4de;
+  border-radius: 20px;
+  padding: 5px;
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+}
+.priority input[type="text"] {
+  background-color: transparent;
+  margin: 0px 10px;
+  max-width: 160px;
+  border: none;
+  outline: none;
+}
+.priority .background-1 {
+  background-color: #f4dbd0;
+}
+.priority .background-2 {
+  background-color: #f8e5dc;
+}
+.priority .background-3 {
+  background-color: #faf0ea;
+}
+.priority .background-4 {
+  background-color: #fff9f4;
+}
+.list li {
+  list-style-type: none;
+  border-bottom: 1px dashed gray;
+  padding: 2px 0px;
+  width: 210px;
+}
+.list input[type="text"] {
+  background-color: transparent;
+  color: #000;
+  border: none;
+  margin: 0px 5px;
+  width: 210px;
+}
+.list input[type="text"]:focus {
+  outline: none;
+}
+.commitment {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: fit-content;
+}
+.commitment div {
+    padding: 0px;
+}
+.commitment li {
+  list-style-type: none;
+  padding: 2px 0px;
+}
+.commitment li input {
+  border: none;
+  border-bottom: 1px dashed gray;
+}
+.commitment input[type="text"] {
+  background-color: transparent;
+  color: #000;
+  margin: 0px 5px;
+  width: 125px;
+}
+.commitment input[type="text"]:focus {
+  outline: none;
+}
+.commitment input[type="time"] {
+  background-color: transparent;
+  color: #000;
+}
+.commitment input[type="time"]:focus {
+  outline: none;
+}
+::-webkit-datetime-edit-hour-field {
+  background-color: transparent;
+}
+::-webkit-datetime-edit-minute-field {
+  border-radius: 15%;
+}
+.commitment img {
+  height: 100px;
+  width: 50px;
+  position: relative;
+  top: 40px;
+}
+.bullet h2 {
+  text-align: center;
+}
+.bullet p {
+  color: gray;
+  letter-spacing: 0.5em;
+  line-height: 1em;
+  font-size: 20px;
+}
+.list h2 {
+  display: inline;
+}
+.list h2::before {
+    content: url('images/face-smile-regular.svg');
+    padding-right: 5px;
+}
+.list p {
+  font-size: 15px;
+}
+.task-item {
+  display: flex;
+  align-items: center;
+  text-decoration: 2px dotted gray underline;
+}
+.complete {
+  text-decoration: line-through;
+}