diff --git a/app.js b/app.js new file mode 100644 index 0000000..213d7b5 --- /dev/null +++ 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[i]} + + ` + } + } + taskElement.innerHTML = taskItems +} + +function success (){ + +} \ No newline at end of file diff --git a/images/V.png b/images/V.png new file mode 100644 index 0000000..a687fde Binary files /dev/null and b/images/V.png differ diff --git a/images/icon.png b/images/icon.png new file mode 100644 index 0000000..715995f Binary files /dev/null and b/images/icon.png differ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..a9e54d3 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/popup.html b/popup.html new file mode 100644 index 0000000..f1ad56b --- /dev/null +++ b/popup.html @@ -0,0 +1,28 @@ + + + + + + + + + + V-do + + +
+ +

What's up, Spidey!

+

TODAY'S TASKS

+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7bbe8f7 --- /dev/null +++ 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) ; +} \ No newline at end of file