Merge pull request #103 from MahajanPreksha/content

Added content to the website
Kritika30032002 · Oct 11, 2023 · aacad33 · aacad33
2 parents 7864827 + b201fa6
commit aacad33
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -18,9 +18,8 @@
     <link rel="stylesheet" href="style.css" />
     <script src="index.js"></script>
 
-    <title>To Do List</title>
+    <title>To-Do List</title>
   </head>
-
   <body>
     <div class="container-xl">
       <header class="text-white p-5">
@@ -33,45 +32,42 @@
                 alt=""
                 style="height: 70px; margin-bottom: 20px"
               />
-              <h1 class="text text-center">To-Do List</h1>
+              <h1 class="text text-center">SimplyTasked</h1>
 
-              <input type="checkbox" id="modeToggle" class="mode-toggle">
+              <input type="checkbox" id="modeToggle" class="mode-toggle" />
             </div>
           </div>
         </div>
       </header>
 
       <div class="container main mt-5">
-        <h2 class="text-center mb-4">ADD ITEMS</h2>
+        <h2 class="text-center mb-4">Add your tasks below</h2>
 
         <label
           id="lblsuccess"
           class="text-success"
           style="display: none"
         ></label>
-        <label
-          id="lblerror"
-          class="text-danger"
-          style="display: none;"
-        ></label>
+        <label id="lblerror" class="text-danger" style="display: none"></label>
 
         <form id="addForm" class="main_form">
           <input
-              type="text"
-              onkeyup="toggleButton(this, 'submit')"
-              id="item"
-              placeholder="Write your task here"
+            type="text"
+            onkeyup="toggleButton(this, 'submit')"
+            id="item"
+            placeholder="Input your task"
           />
-          <input type="text" id="dueDate" placeholder="Due Date" />
+          <input type="text" id="dueDate" placeholder="Set your due date" />
           <input
-              type="submit"
-              class="form_btn"
-              id="submit"
-              value="Submit"
-              disabled
-              style="background-color: rgb(1,110,225); color: white;"
+            type="submit"
+            class="form_btn"
+            id="submit"
+            value="Add Task"
+            disabled
+
+            style="background-color: rgb(1,110,225); color: white;"
           />
-      </form>
+        </form>
 
           <button id="clearAllTasks" class="btn btn-danger clear_btn" onclick="clearAllTasks();">Clear All Tasks</button>
 
@@ -84,5 +80,15 @@ <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
         </div>
       </div>
     </div>
+    <br> <br>
+          <h2 style="text-align: center; color: white;">Why SimplyTasked?</h2>
+          <p style="text-align: center; color: white;">Simply, because it is a SIMPLE To-Do List Tool to organize your tasks efficiently.</p>
+          <br>
+          <div  class='list' style="color: white; text-align: center;">
+            <p>=> Intuitive task management</p>
+            <p>=> Seamless due date tracking</p>
+            <p>=> Beautiful and user-friendly design</p>
+          </div>
+
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -69,9 +69,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
@@ -46,18 +46,17 @@ body {
   letter-spacing: 10px;
   border-right: 5px solid black;
   white-space: nowrap;
-  animation: typing 2.5s steps(9), cursor 0.55s step-end infinite alternate;
+
+  animation: typing 3s steps(10), cursor 0.4s step-end infinite alternate;
+
   overflow: hidden;
   animation-fill-mode: forwards;
 }
 
 @keyframes cursor {
-  from,
-  to {
-    border-color: transparent;
-  }
+
   50% {
-    border-color: rgb(0, 131, 201);
+    border-color: transparent;
   }
 }
 
@@ -66,7 +65,8 @@ body {
     width: 0;
   }
   to {
-    width: 31%;
+    width: 36%;
+
   }
 }
 .text-center {
@@ -87,7 +87,10 @@ body.light-mode {
 }
 
 body.dark-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)*/
+
+  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) */
+
   color: #fff; /* Text color for dark mode */
 }
 
@@ -102,7 +105,8 @@ body.dark-mode::before {
     0,
     0,
     0,
-    0.75
+    0.9
+
   ); /* Adjust the alpha (last) value to control darkness */
   z-index: -1;
 }
@@ -248,9 +252,17 @@ body.dark-mode::before {
   font-size: 1.2rem;
 }
 
+
+.list{
+  display: flex;
+  flex-direction:row;
+  justify-content: space-evenly;
+
+}
 .main h2,
 h3 {
-  width: 12rem;
+  width: 20rem;
+
   margin: auto;
   border-bottom: 2px solid #ffffff;
   font-weight: 600;