Add files via upload

Spyware007 · Nov 7, 2021 · fa87ed4 · fa87ed4
1 parent 3171aca
commit fa87ed4
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,61 @@
+let tasks = []
+const taskInput = document.querySelector("#task-input")
+const addTask = document.querySelector("#add-task")
+const removeAllTask = document.querySelector("#remove-all-task")
+const taskElement = document.querySelector("#task-element")
+const tasksFromLocalStorage = JSON.parse(localStorage.getItem("tasks"))
+
+
+addTask.addEventListener("click", addTodo ,success)
+taskInput.addEventListener("click", initialState)
+removeAllTask.addEventListener("click", removeAll)
+
+if(tasksFromLocalStorage){
+    tasks = tasksFromLocalStorage
+    renderTasks()
+}
+
+function addTodo() {
+    console.log(taskInput.value)
+    if(taskInput.value === ""){
+        taskInput.placeholder = "Type Something!"
+        taskInput.style.color = "White"
+        taskInput.style.backgroundColor = "red"
+        addTask.disabled = true
+    }
+    addTask.disabled = false
+    tasks.push(taskInput.value)
+    taskInput.value = ""
+    localStorage.setItem("tasks", JSON.stringify(tasks))
+    renderTasks()
+}
+
+function initialState() {
+    taskInput.style.color = "black"
+    taskInput.style.backgroundColor = "bisque"
+    taskInput.placeholder = "What you wanna do, Today?"
+}
+
+function removeAll() {
+    localStorage.clear()
+    tasks = []
+    renderTasks()
+}
+
+function renderTasks() {
+    let taskItems = ""
+    for( let i=0; i<tasks.length; i++){
+        if( tasks[i]){
+            taskItems += `
+            <li>
+                ${tasks[i]}
+            </li>
+        `
+        }
+    }
+    taskElement.innerHTML = taskItems
+}
+
+function success (){
+
+}
diff --git a/images/V.png b/images/V.png
diff --git a/images/icon.png b/images/icon.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,9 @@
+{
+    "manifest_version": 3,
+    "version": "1.0",
+    "name":"V-do",
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": "images/V.png"
+    }
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="images/V.png">
+    <title>V-do</title>
+</head>
+<body>
+    <div class="wrapper">
+        <img src="images/icon.png" alt="">
+        <h1>What's up, Spidey!</h1>
+        <h4>TODAY'S TASKS</h4>
+    </div>
+    <div class="wrapper2">
+        <input id="task-input" type="text" placeholder="What you wanna do, Today?" >
+        <button id="add-task" type="button" ></button>
+        <button id="remove-all-task"><i class="fa fa-trash" aria-hidden="true"></i></button>
+    </div>
+    <ul id="task-element">
+
+    </ul>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+body{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-width: 400px;
+    background-color: rgb(127, 219, 255);
+}
+html{
+    width: 100%;
+}
+.wrapper{
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    background-color: aqua;
+    border-radius: 0 0 20px 20px;
+    box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+img{
+  height: 100px;
+  position: absolute;
+  left: 0;
+}
+h1{
+    color: rgb(10, 10, 10);
+    padding: 0px;
+    margin-top: 0;
+}
+h4{
+    color: rgb(62, 100, 100);
+}
+.wrapper2{
+    display: flex;
+    text-align: left;
+    width: 360px;
+    padding: 20px;
+}
+input{
+    background-color: bisque;
+    padding: 8px;
+    width: 300px;
+    border-radius: 10px;
+    border: 2px solid;
+}
+#add-task {
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  height: 40px;
+  width: 60px;
+  background-color: deepskyblue;
+  padding: 0;
+  outline: 0;
+  margin-left: 40px;
+  border: 2px solid rgb(186, 188, 197);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform .2s;
+}
+#add-task::after,
+#add-task::before {
+  content: "";
+  position: absolute;
+  top: 15%;
+  right: 40%;
+  bottom: 15%;
+  left: 40%;
+  background-color: black;
+  border-radius: 2px;
+  transition: transform .25s;
+}
+#add-task::before {
+  top: 40%;
+  right: 15%;
+  bottom: 40%;
+  left: 15%;
+}
+#add-task:focus::before {
+  transform: rotate(-35deg) translate(7px, 5px);
+  width: 50px;
+  border-radius: 2;
+  background-color: yellow;
+}
+#add-task:focus::after{
+    transform: rotate(-33deg) translate(-5.4px, 5.9px);
+    height: 20px;
+    background-color: yellow;
+}
+#remove-all-task{
+  height: 40px;
+  width: 60px;
+  background-color: deepskyblue;
+  padding: 0;
+  margin-left: 25px;
+  font-size: 20px;
+  outline: 0;
+  border: 2px solid rgb(186, 188, 197);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform .2s;
+}
+#remove-all-task:hover,
+#add-task:hover{
+  background-color: rgb(67, 11, 221);
+  color: white;
+}
+#add-task:hover::after,
+#add-task:hover::before{
+  background-color: white;
+}
+#task li{
+  color: black;
+}
+#task-element li{
+  list-style: none;
+  background-color: rgb(32, 140, 202);
+  color: rgb(155, 247, 36);
+  width: 300px;
+  font-size: 20px;
+  padding: 5px;
+  margin: 10px; 
+  border: 2px solid #fff;
+  border-radius: 4px;
+}
+#task-element li:hover{
+  border: 2px solid #000;
+  background-color: rgb(155, 247, 36);
+  color:rgb(32, 140, 202) ;
+}