Notes

import React, { useState } from "react";
export default function Home() {

return (
<>
<nav className="navbar navbar-light d-flex justify-content-center">
<span className="navbar-brand mb-0 h1">Sticky-Notes</span>
</nav>
<div className="container">
<div className="inputGroup">
<div data-testid="inpGrp" id="inpGrp">
<label>Title</label>
<input data-testid="titleInp"/>
<div data-testid="errorMsg" id="errorMsg">
<p data-testid="titleReq">
{/* Display "Title is required" here if input field is not valid*/}
</p>
</div>
<label>Description</label>
<textarea data-testid="descInp"
></textarea>
<div data-testid="errorMsg" id="errorMsg">
<p data-testid="descReq">
{/* Display "Description is required" here if input field is not valid*/}
</p>
</div>
<div data-testid="btnGrp" id="btnGrp">
{/* On add button click add the notes */}
<button data-testid="addBtn" className="btn btn-secondary">
Add
</button>
&nbsp;
{/* On reset button click remove all the notes */}
<button data-testid="resetBtn" className="btn btn-danger">
Reset
</button>
</div>
</div>
</div>
<div data-testid="notes" id="notes">
{/* Map the below div tag and display the data */}
<div data-testid="note" id="note">
{/* On X button click delete the respective notes */}
<button
className="btn"
data-testid="deleteBtn"
id="deleteBtn"
>
X
</button>
<h3 data-testid="title">
{/* Display the notes title here */}
</h3>
<p data-testid="desc">
{/* Display the notes Description here */}
</p>
</div>
</div>
<div className="noNotes" >
<h4 className="alert alert-secondary" role="alert" data-testid="noNotes">
{/* If there is no notes added by the user display "No notes!" */}
</h4>
</div>
</div>
</>
);
}