From 56a8e00c849664325b7450d6fc18a4374553b72d Mon Sep 17 00:00:00 2001
From: om-666 <104663400+om-666@users.noreply.github.com>
Date: Tue, 6 Dec 2022 18:08:11 +0530
Subject: [PATCH] Add files via upload
---
todo.css | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
todo.html | 53 +++++++++++++++++++
todo.js | 62 ++++++++++++++++++++++
3 files changed, 271 insertions(+)
create mode 100644 todo.css
create mode 100644 todo.html
create mode 100644 todo.js
diff --git a/todo.css b/todo.css
new file mode 100644
index 0000000..55b001a
--- /dev/null
+++ b/todo.css
@@ -0,0 +1,156 @@
+:root {
+ --dark: #1e2838;
+ --darker: #0a0e14;
+ --darkest: #111827;
+ --grey: #6B7280;
+ --pink: #EC4899;
+ --purple: #8B5CF6;
+ --light: #EEE;
+}
+
+* {
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Fira sans", sans-serif;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ color: #FFF;
+ background-color: var(--dark);
+}
+
+header {
+ padding: 2rem 1rem;
+ max-width: 800px;
+ width: 100%;
+ margin: 0 auto;
+}
+
+header h1{
+ font-size: 2.5rem;
+ font-weight: 300;
+ color: var(--grey);
+ margin-bottom: 1rem;
+}
+
+#new-task-form {
+ display: flex;;
+}
+
+input, button {
+ appearance: none;
+ border: none;
+ outline: none;
+ background: none;
+}
+
+#new-task-input {
+ flex: 1 1 0%;
+ background-color: var(--darker);
+ padding: 1rem;
+ border-radius: 1rem;
+ margin-right: 1rem;
+ color: var(--light);
+ font-size: 1.25rem;
+}
+
+#new-task-input::placeholder {
+ color: var(--grey);
+}
+
+#new-task-submit {
+ color: var(--pink);
+ font-size: 1.25rem;
+ font-weight: 700;
+ background-image: linear-gradient(to right, var(--pink), var(--purple));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ cursor: pointer;
+ transition: 0.4s;
+}
+
+#new-task-submit:hover {
+ opacity: 0.8;
+}
+
+#new-task-submit:active {
+ opacity: 0.6;
+}
+
+main {
+ flex: 1 1 0%;
+ max-width: 800px;
+ width: 100%;
+ margin: 0 auto;
+}
+
+.task-list {
+ padding: 1rem;
+}
+
+.task-list h2 {
+ font-size: 1.5rem;
+ font-weight: 300;
+ color: var(--grey);
+ margin-bottom: 1rem;
+}
+
+#tasks .task {
+ display: flex;
+ justify-content: space-between;
+ background-color: var(--darkest);
+ padding: 1rem;
+ border-radius: 1rem;
+ margin-bottom: 1rem;
+}
+
+.task .content {
+ flex: 1 1 0%;
+}
+
+.task .content .text {
+ color: var(--light);
+ font-size: 1.125rem;
+ width: 100%;
+ display: block;
+ transition: 0.4s;
+}
+
+.task .content .text:not(:read-only) {
+ color: var(--pink);
+}
+
+.task .actions {
+ display: flex;
+ margin: 0 -0.5rem;
+}
+
+.task .actions button {
+ cursor: pointer;
+ margin: 0 0.5rem;
+ font-size: 1.125rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ transition: 0.4s;
+}
+
+.task .actions button:hover {
+ opacity: 0.8;
+}
+
+.task .actions button:active {
+ opacity: 0.6;
+}
+
+.task .actions .edit {
+ background-image: linear-gradient(to right, var(--pink), var(--purple));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.task .actions .delete {
+ color: crimson;
+}
\ No newline at end of file
diff --git a/todo.html b/todo.html
new file mode 100644
index 0000000..acb4612
--- /dev/null
+++ b/todo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Task List 2021
+
+
+
+
+
+
+ Enter Your task-list
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/todo.js b/todo.js
new file mode 100644
index 0000000..2fcd143
--- /dev/null
+++ b/todo.js
@@ -0,0 +1,62 @@
+window.addEventListener('load', () => {
+ const form = document.querySelector("#new-task-form");
+ const input = document.querySelector("#new-task-input");
+ const list_el = document.querySelector("#tasks");
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const task = input.value;
+
+ const task_el = document.createElement('div');
+ task_el.classList.add('task');
+
+ const task_content_el = document.createElement('div');
+ task_content_el.classList.add('content');
+
+ task_el.appendChild(task_content_el);
+
+ const task_input_el = document.createElement('input');
+ task_input_el.classList.add('text');
+ task_input_el.type = 'text';
+ task_input_el.value = task;
+ task_input_el.setAttribute('readonly', 'readonly');
+
+ task_content_el.appendChild(task_input_el);
+
+ const task_actions_el = document.createElement('div');
+ task_actions_el.classList.add('actions');
+
+ const task_edit_el = document.createElement('button');
+ task_edit_el.classList.add('edit');
+ task_edit_el.innerText = 'Edit';
+
+ const task_delete_el = document.createElement('button');
+ task_delete_el.classList.add('delete');
+ task_delete_el.innerText = 'Delete';
+
+ task_actions_el.appendChild(task_edit_el);
+ task_actions_el.appendChild(task_delete_el);
+
+ task_el.appendChild(task_actions_el);
+
+ list_el.appendChild(task_el);
+
+ input.value = '';
+
+ task_edit_el.addEventListener('click', (e) => {
+ if (task_edit_el.innerText.toLowerCase() == "edit") {
+ task_edit_el.innerText = "Save";
+ task_input_el.removeAttribute("readonly");
+ task_input_el.focus();
+ } else {
+ task_edit_el.innerText = "Edit";
+ task_input_el.setAttribute("readonly", "readonly");
+ }
+ });
+
+ task_delete_el.addEventListener('click', (e) => {
+ list_el.removeChild(task_el);
+ });
+ });
+});
\ No newline at end of file