.

aman44444 · Jun 14, 2024 · 7145d1e · 7145d1e
1 parent 21851ea
commit 7145d1e
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 110 deletions.
diff --git a/src/Components/Input.js b/src/Components/Input.js
@@ -30,23 +30,23 @@ const Input = () => {
 
     return (
         <>
-         <div className="form-div">
-        <form className="form">
-          <div className="task-div">
-            <input
-              id="task-input"
-              type="text"
-              placeholder="Type Here..."
-              value={task}
-              onChange={onChangeHandler}
-            />
-            <input type="time" onChange={setAlarmTimeHandler} className="time" />
-            <button id="task-button" onClick={taskHandler}>
-              ADD
-            </button>
-          </div>
-        </form>
-      </div>
+         <div className="form-container">
+            <form className="form">
+               <div className="task-div">
+                  <input
+                      className="task-input"
+                      type="text"
+                      placeholder="Type Here..."
+                      value={task}
+                       onChange={onChangeHandler}
+                  />
+                   <input type="time" onChange={setAlarmTimeHandler} className="timer" />
+                   <button className="add-button" onClick={taskHandler}>
+                    ADD
+                   </button>
+               </div>
+            </form>
+         </div>
          <div className='container'>
           <div className='task-container'>
 

diff --git a/src/Styles/Input.css b/src/Styles/Input.css
@@ -4,44 +4,48 @@
   box-sizing: border-box;
 }
 
-.form-div {
-  margin-top: 2em;
-}
-
-.form {
-  width: 100%;
-  height: 6em;
+.form-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: row;
-}
-.form .title-div {
-  margin-right: 2em;
-}
-.form div {
   width: 100%;
+  margin-top: 4em;
 }
-.form .task-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.form input {
+.form-container .form {
   width: 80%;
-  height: 3em;
+}
+
+.task-input {
+  width: 50%;
   border: 1px solid rgb(197, 190, 190);
   border-radius: 1.3em;
-  padding-left: 10px;
+  height: 4em;
+  padding: 1em;
+  margin: 0.5em;
 }
-.form button {
-  height: 3em;
-  width: 5em;
-  border: none;
+
+.timer {
+  width: 20%;
+  border: 1px solid rgb(197, 190, 190);
+  border-radius: 1.3em;
+  height: 4em;
+  padding: 1em;
+  margin: 0.5em;
+}
+
+.container::-webkit-scrollbar {
+  display: none;
+}
+
+.add-button {
   background-color: black;
   color: white;
-  margin-left: 5px;
+  border: 1px solid rgb(197, 190, 190);
   border-radius: 1.3em;
+  height: 4em;
+  padding: 1em;
+  margin: 0.5em;
+  cursor: pointer;
 }
 
 .container {
@@ -58,13 +62,11 @@
 }
 .container .task-container {
   border: 1px solid rgb(197, 190, 190);
-  width: 70%;
+  width: 80%;
+  border-radius: 1em;
+  margin-left: 1em;
 }
 .container .alarm-container {
   border: 1px solid rgb(197, 190, 190);
   width: 20%;
-}
-
-.container::-webkit-scrollbar {
-  display: none;
 }/*# sourceMappingURL=Input.css.map */
diff --git a/src/Styles/Input.css.map b/src/Styles/Input.css.map
diff --git a/src/Styles/Input.scss b/src/Styles/Input.scss
@@ -13,72 +13,65 @@
 @mixin area{
     width:80%;
    height: 3em;
-}
 
-.form-div{
-    margin-top: 2em;
 }
 
-.form{
-
-    width:100%;
-    height:6em;
- @include flex;
-  flex-direction: row;
-  .title-div{
-    margin-right: 2em;
-
-  }
-  div{
-    width:100%;
-  }
-
-  .task-div{
-    @include flex;
-    }
-
+@mixin input {
+  border: 1px solid rgb(197, 190, 190);
+  border-radius: 1.3em;
+  height:4em;
+  padding: 1em;
+  margin:0.5em;
+}
 
-  input{
-    @include area;
-    border: 1px solid rgb(197, 190, 190);
-    border-radius: 1.3em;
-    padding-left: 10px;
-
-  }
-
-  button{
-    height:3em;
-    width:5em;
-    border: none;
-    background-color: black;
-    color: white;
-    margin-left:5px;
-    border-radius: 1.3em;
+.form-container{
+  @include flex;
+  width:100%;
+  margin-top: 4em;
+  .form{
+    width:80%;
   }
+}
 
+.task-input{
+  width:50%;
+  @include input;
 }
 
-.container{
-  width:100%;
-  height:27em;
-  display: flex;
-  justify-content: center;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left:0;
-  overflow-y: scroll;
-   .task-container{
-    border: 1px solid rgb(197, 190, 190);
-    width:70%
-
-   }
-   .alarm-container{
-    border: 1px solid rgb(197, 190, 190);
-    width:20%
-   }
+.timer{
+  width:20%;
+  @include input;
 }
 .container::-webkit-scrollbar{
   display:none
-}
+}
+
+.add-button{
+  background-color: black;
+  color:white;
+  @include input;
+  cursor: pointer;
+}
+
+.container{
+    width:100%;
+    height:27em;
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left:0;
+    overflow-y: scroll;
+     .task-container{
+      border: 1px solid rgb(197, 190, 190);
+      width:80%;
+      border-radius: 1em;
+      margin-left: 1em;
+     }
+     .alarm-container{
+      border: 1px solid rgb(197, 190, 190);
+      width:20%
+     }
+  }
diff --git a/src/Styles/Output.css b/src/Styles/Output.css
@@ -6,10 +6,12 @@
 
 .output-task {
   width: 100%;
-  height: 2em;
+  height: auto;
   flex-direction: row;
   margin-top: 0.5em;
   border-bottom: 1px solid rgb(227, 220, 220);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/Styles/Output.css.map b/src/Styles/Output.css.map
diff --git a/src/Styles/Output.scss b/src/Styles/Output.scss
@@ -12,10 +12,12 @@
 
 .output-task{
     width:100%;
-    height:2em;
+    height:auto;
     flex-direction: row;
     margin-top:0.5em;
     border-bottom: 1px solid rgb(227, 220, 220);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
  @include flex;
  .task{
     width:80%;