From dfc0c582e4d30c224f3b25baf74c3dd243aa395d Mon Sep 17 00:00:00 2001 From: MahajanPreksha Date: Tue, 10 Oct 2023 15:43:00 +0530 Subject: [PATCH] Added content to the website I have added and modified content on the website. --- index.html | 50 ++++++++++++++------------ index.js | 4 +-- style.css | 103 +++++++++++++++++++++++++++++++---------------------- 3 files changed, 91 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index eb969f8..cd0d460 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,8 @@ - To Do List + To-Do List -
@@ -33,45 +32,42 @@ alt="" style="height: 70px; margin-bottom: 20px" /> -

To-Do List

+

SimplyTasked

- +
-

ADD ITEMS

+

Add your tasks below

- +
- + -
+

Tasks

@@ -82,5 +78,15 @@

Tasks

+

+

Why SimplyTasked?

+

Simply, because it is a SIMPLE To-Do List Tool to organize your tasks efficiently.

+
+
+

=> Intuitive task management

+

=> Seamless due date tracking

+

=> Beautiful and user-friendly design

+
+ \ No newline at end of file diff --git a/index.js b/index.js index 733a5ae..fb44e13 100644 --- a/index.js +++ b/index.js @@ -63,9 +63,9 @@ let editItem = null; function addItem(e) { e.preventDefault(); - if (submit.value !== "Submit") { + if (submit.value !== "Add Task") { editItem.target.parentElement.childNodes[1].textContent = document.getElementById("item").value; - submit.value = "Submit"; + submit.value = "Add Task"; document.getElementById("item").value = ""; displaySuccessMessage("Text edited successfully"); diff --git a/style.css b/style.css index ed3a6bd..0d2ceae 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,7 @@ } */ body { - font-family: 'Young Serif'; + font-family: "Young Serif"; font-weight: 400; margin: 30px; padding: 0; @@ -24,65 +24,70 @@ body { display: flex; flex-direction: column; min-height: 100vh; - background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1)); + background: linear-gradient( + to right, + rgba(126, 64, 246, 1), + rgba(80, 139, 252, 1) + ); /* background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); */ background-size: cover; background-position: center; } - .container-xl { position: relative; width: 100%; flex: 1; /* Take remaining vertical space */ } - .text { - width: 100%; - font-size: 50px; - color: rgb(255, 255, 255); - letter-spacing: 10px; - border-right: 5px solid black; - white-space: nowrap; - animation: typing 3s steps(10), cursor .4s step-end infinite alternate; - overflow: hidden; - animation-fill-mode: forwards; +.text { + width: 100%; + font-size: 50px; + color: rgb(255, 255, 255); + letter-spacing: 10px; + border-right: 5px solid black; + white-space: nowrap; + animation: typing 3s steps(10), cursor 0.4s step-end infinite alternate; + overflow: hidden; + animation-fill-mode: forwards; +} + +@keyframes cursor { + 50% { + border-color: transparent; } - - @keyframes cursor { - 50% { - border-color: transparent; - } +} + +@keyframes typing { + from { + width: 0; } - - @keyframes typing { - from { - width: 0; - } - to { - width: 30%; - } - + to { + width: 36%; } -.text-center{ - margin-left: auto; - margin-right: auto ; +} +.text-center { + margin-left: auto; + margin-right: auto; } /* .container.main.mt-3{ padding-top: 10%; } */ body.light-mode { - background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1)); - background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Light mode background image */ + background: linear-gradient( + to right, + rgba(1, 110, 225), + rgba(80, 139, 252, 1) + ); + background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Light mode background image */ } body.dark-mode { background: #0f0000; /* Dark mode background color */ - background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Dark mode background image (same as light mode) */ + background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Dark mode background image (same as light mode) */ color: #fff; /* Text color for dark mode */ } - body.dark-mode::before { content: ""; position: fixed; @@ -90,7 +95,12 @@ body.dark-mode::before { left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.9); /* Adjust the alpha (last) value to control darkness */ + background-color: rgba( + 0, + 0, + 0, + 0.9 + ); /* Adjust the alpha (last) value to control darkness */ z-index: -1; } @@ -98,7 +108,6 @@ body.dark-mode::before { /* Rest of your CSS remains unchanged */ - /* body.light-mode { background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1)); } */ @@ -169,7 +178,11 @@ body.dark-mode::before { color: #fff; letter-spacing: 0.11rem; border: none; - background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1)); + background: linear-gradient( + to right, + rgba(1, 110, 225), + rgba(80, 139, 252, 1) + ); padding: 0.6rem 2rem; border-radius: 5rem; cursor: pointer; @@ -193,12 +206,18 @@ body.dark-mode::before { font-size: 1.2rem; } -.main h2, h3 { - width: 12rem; +.list{ + display: flex; + flex-direction:row; + justify-content: space-evenly; + +} +.main h2, +h3 { + width: 20rem; margin: auto; border-bottom: 2px solid #ffffff; font-weight: 600; - } @media screen and (max-width: 415px) { @@ -255,7 +274,7 @@ input[type="checkbox"]:not(.task-completed) { outline: none; border-radius: 2rem; cursor: pointer; - box-shadow: inset 0 0 5px rgba(1,110,225); + box-shadow: inset 0 0 5px rgba(1, 110, 225); } input[type="checkbox"]:not(.task-completed)::before { @@ -303,4 +322,4 @@ input[type="checkbox"]:not(.task-completed):checked::before { padding: 0.5rem 1rem; width: auto; } -} \ No newline at end of file +}