.

src/Components/Alarm.js

@@ -7,16 +7,13 @@ const playAlarmSound = () => {
   audio.play();
 };
 
-const AlarmClock = () => {
+const AlarmClock = ({alarmTime}) => {
   const [currentTime, setCurrentTime] = useState('');
-  const [alarmTime, setAlarmTime] = useState('');
   const [alarmMessage, setAlarmMessage] = useState('');
-
+ 
   const checkAlarmClock = useCallback(() => {
-    if (!alarmTime || alarmTime === 'undefined') {
-      setAlarmMessage();
-    } else {
-      setAlarmMessage( alarmTime );
+    if (alarmTime) {
+      setAlarmMessage(alarmTime);
       if (currentTime === alarmTime) {
         playAlarmSound();
       }
@@ -38,36 +35,12 @@ const AlarmClock = () => {
 
   }, [checkAlarmClock]);
 
-  const setAlarmTimeHandler = (event) => {
-    event.preventDefault();
-    const inputAlarmTimeModified = event.target.value + ':00';
-    setAlarmTime(inputAlarmTimeModified);
-    setAlarmMessage('');
-  };
-
-
-
-  const setAlarm = () => {
-    if (!alarmTime || alarmTime === 'undefined') {
-      setAlarmMessage('Please set a valid alarm time.');
-    } else {
-      setAlarmMessage(  alarmTime );
-    }
-  };
-
   return (
     <div>
-
-      {/* <h2>It is {currentTime}.</h2>
-      <h2>{alarmMessage}</h2> */}
-      <form className="alarm-div">
-        <input type="time" onChange={setAlarmTimeHandler} className='time'></input>
-        {/* <button  className="set-btn" type="button" onClick={setAlarm}>
-          Set Alarm
-        </button> */}
-      </form>
+      {alarmMessage && <p> Alarm set for: {alarmMessage}</p>}
     </div>
   );
 };
 
 export default AlarmClock;
+

src/Components/Input.js

@@ -1,116 +1,66 @@
 import React, { useState } from 'react';
 import '../Styles/Input.css';
-import  Output from './Output';
-import TitleName from './Title';
+import Output from './Output';
 import AlarmClock from './Alarm';
 
 
-
-
-export default function Input() {
-
+const Input = () => {
     const [task, setTask] = useState("")
     const [data, setData] = useState([])
-    const [title,setTitle] = useState("");
-    const [titleData,setTitleData] = useState([]);
-
-
-    const titleValue = (e) => {
-        setTitle(e.target.value);
-    }
-
-    const titleHandler = (e) =>{
-        e.preventDefault();
-        setTitleData([title]);
-    }
+    const [alarm, setAlarm] = useState('');
 
-    const onChangeHandler = (e) => {
-        setTask(e.target.value);
-        setTitle('')
-
-    }
+    const onChangeHandler = (e) => setTask(e.target.value);
 
     const taskHandler = (e) => {
         e.preventDefault();
-        const newData = task;
-        setData([newData,...data])
-         setTask('');
+        setData([{ task, alarm},...data])
+        setTask('');
+        setAlarm('')
     }
 
-    const deleteItem = (a) => {
-        const finalData = data.filter((curEle, index) => {
-            return index!==a;
-        })
+    const deleteItem = (index) => {
+        const finalData = data.filter((_, i) => i !== index )
         setData(finalData);
     }
 
+    const setAlarmTimeHandler = (event) => {
+        const inputAlarmTimeModified = event.target.value + ':00';
+        setAlarm(inputAlarmTimeModified);
+    };
 
     return (
         <>
-
-            <div className="form-div">
-                <form className='form'>
-                    <div className='title-div'>
-                        <input type="text" placeholder='Title' id="title-input" value={title} onChange={titleValue} />
-                        <button id='title-button'  onClick={titleHandler}>TITLE</button>
-                    </div>
-                    <div className='task-div'>
-                        <input id='task-input' type="text" placeholder='Type Here...' value={task} onChange={onChangeHandler} />
-                        <button id="task-button" onClick={taskHandler}>ADD</button>
-                    </div>
-
-                </form>
-
-
-            </div>
+         <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='container'>
           <div className='task-container'>
-                {
-                   titleData.map((value,index)=>(
-                    <TitleName
-                      id={index}
-                      key={index}
-                      title ={value}
-                    /> 
-                   ))
-
-                }
-
-
-            {
-            data.map((value, index) => (
-                        <Output
-                           id={index}
-                            key={index}
-
-                            task={value}
-                            onSelect={deleteItem}
-                        />
-                    ))
-
-
-                }
-
-
+
+              {data.map((value, index) => (
+            <div className="task-alarm-pair" key={index}>
+              <Output id={index} task={value.task} onSelect={deleteItem} />
+              <AlarmClock alarmTime={value.alarm} />
             </div>
-            <div className='alarm-container'>
-
-            {
-            data.map((value, index) => (
-                        <AlarmClock
-                           id={index}
-                            key={index}
-
-                            alarmTime={value}
-                            onSelect={deleteItem}
-                        />
-                    ))
-
-                }
+          ))}
             </div>
-
-
          </div>
         </>
     );
-}
+
+}
+
+export default Input;

src/Components/Navbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import '../Styles/Navbar.css';
 
-export default function Navbar(){
+ const Navbar = () => {
      return (
         <>
         <div className = 'navbar'>
@@ -11,4 +11,6 @@ export default function Navbar(){
         </>
      )
 
-}
+}
+
+export default Navbar;

src/Components/Output.js

@@ -2,22 +2,22 @@ import React from 'react';
 import '../Styles/Output.css'
 
 
-
-export default function Output(props){
-
+const Output =(props) => {
 
-          return (
+    return (
          <div className='output-task'>  
             <div className='task'>
                  <p>{props.task}</p>
             </div>     
-
-                <button className='delete-btn' onClick={()=>{
-                    props.onSelect(props.id)
-                }}>X</button>
+            <button className='delete-btn' 
+            onClick={()=>{
+                props.onSelect(props.id)
+                }}>
+                    X
+                </button>
 
          </div>
     );
-
-
 }
+
+export default Output;

src/Styles/Input.css

@@ -22,11 +22,6 @@
 .form div {
   width: 100%;
 }
-.form .title-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .form .task-div {
   display: flex;
   align-items: center;

src/Styles/Input.scss

@@ -33,10 +33,6 @@
     width:100%;
   }
 
-  .title-div{
-  @include flex;
-  }
-
   .task-div{
     @include flex;
     }