added

JaveriyaSaleem · Sep 1, 2024 · df307ed · df307ed
1 parent 0ee7247
commit df307ed
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/app.js b/app.js
@@ -6,7 +6,7 @@ var containerValue = document.getElementById('containerOfTask')
 function addTask(){
   var createRow = document.createElement('div');
   createRow.className = 'row'; //row created
-  createRow.classList.add('row', 'd-inline-flex', 'align-items-center', 'border', 'border-0', 'rounded-pill', 'bg-lightdark', 'p-1', 'mb-2');
+  createRow.classList.add('row', 'd-inline-flex', 'align-items-center', 'border', 'border-0', 'rounded-pill', 'standard-input', 'p-1', 'mb-2');
 var containerValue = document.getElementById('containerOfTask')
 containerValue.appendChild(createRow)
 createRow.innerHTML = `<div class="col-auto d-flex align-items-center fs-4">`+inputValue.value+`</div>
@@ -79,3 +79,20 @@ function saveData(){
 }
 //show stored data when reload
 
+function standardTheme() {
+  var bodyGet = document.getElementsByTagName('body')[0];
+  // Set the class name
+  bodyGet.className = 'standard';
+}
+function lightTheme() {
+  var bodyGet = document.getElementsByTagName('body')[0];
+
+  // Set the class name
+  bodyGet.className = 'light';
+}
+function darkTheme() {
+  var bodyGet = document.getElementsByTagName('body')[0];
+
+  // Set the class name
+  bodyGet.className = 'darker';
+}
diff --git a/index.html b/index.html
@@ -13,13 +13,13 @@
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
   />
 </head>
-<body class="standard">
+<body class="darker">
     <!-- theme circles  -->
 
     <div class="container w-100  d-flex justify-content-center d-md-flex justify-content-md-end  gap-4 mt-4">
-        <button class="btn bg-standard rounded-css p-3 border border-1"></button>
-        <button class="btn bg-light rounded-css p-3 border border-1"></button>
-        <button class="btn bg-dark rounded-css p-3 border border-1"></button>
+        <button class="btn bg-standard rounded-css p-3 border border-1" onclick="standardTheme()"></button>
+        <button class="btn bg-light rounded-css p-3 border border-1" onclick="lightTheme()"></button>
+        <button class="btn bg-dark rounded-css p-3 border border-1" onclick="darkTheme()"></button>
     </div>
     <!-- Main text  -->
     <div class="pt-4">
@@ -28,7 +28,9 @@ <h1 class="text-center font-94 fw-normal">Just do it</h1>
     <!-- input  -->
      <div class="container  w-100" id="inputDiv">
         <div class="row w-100 d-flex justify-content-center mt-5">
-        <input type="text" id="input" class="col-8 col-md-6 no-border text-center p-2   text-light " placeholder="Add a Task.">
+
+        <input type="text" id="input" class="col-8 col-md-6 standard-input no-border text-center p-2   text-light " placeholder="Add a Task.">
+
         <button class="col-3 col-md-2 col-lg-1 radius-right " onclick="addTask()">Add!!</button>      
 
     </div>
@@ -37,7 +39,7 @@ <h1 class="text-center font-94 fw-normal">Just do it</h1>
      <!-- list of task -->
      <div class="container d-flex flex-column align-items-center mt-1" id="containerOfTask">
 <!-- child of container row>>  -->
-        <!-- <div class="row d-inline-flex align-items-center border border-0 rounded-pill bg-lightdark p-1 mb-2">
+        <!-- <div class="row d-inline-flex align-items-center border border-0 rounded-pill dark-input-bg p-1 mb-2">
             <div class="col-auto d-flex align-items-center fs-4">task</div>
             <div class="col-auto d-flex align-items-center justify-content-center gap-2">
 

diff --git a/style.css b/style.css
@@ -8,6 +8,10 @@
     color: white;
     transition: 0.3s linear;
 }
+/* input  */
+.dark-input-bg{
+    background-color: #01394C;
+}
 
 .light {
     background-image: linear-gradient(100deg, #d4f1ff, #ffffff);
@@ -17,7 +21,7 @@
 
 .standard {
     background-image: linear-gradient(100deg, #575656, #062e3f);
-    color: #ffdfdb;
+    color: white;
     transition: 0.3s linear;
     overflow: hidden;
 }
@@ -88,39 +92,38 @@
 }
 
 /* input  */
-.no-border {
-    background-color: #00000087;
+.no-border{
     border: solid transparent 2px;
     outline: none;
     border-radius: 20px 0px 0px 20px !important;
+}
+.standard-input {
+    background-color: #00000087;
+
 
 }
 
-.no-border:hover {
+.standard-input:hover {
     background-color: #000000;
-    border: solid transparent 2px;
-    outline: none;
-    border-radius: 20px 0px 0px 20px !important;
+    color: white;
 }
 
+
 /* add button  */
 .radius-right {
-    background-color: #ffdfdb;
     border: solid transparent 2px !important;
     border-radius: 0px 20px 20px 0px !important;
 }
 
 .radius-right:hover {
-    background-color: white;
-    border: solid transparent 2px !important;
-    border-radius: 0px 20px 20px 0px !important;
+    background-color: rgba(255, 255, 255, 0.779);
     box-shadow: 0 0 10px #ffffff;
     transition: 0.3s;
 }
 
 /* button of task  */
 .task-button {
-    background-color: #ffdfdb;
+    background-color: rgba(255, 255, 255, 0.842);
     border: solid transparent 2px !important;
     /* border-radius: 60px !important; */
 }
@@ -129,4 +132,4 @@
     background-color: white;
     box-shadow: 0 0 10px #ffffff;
     transition: 0.3s;
-}
+}