This Post shows one how to create a note app and the necessary steps to follow
1.Create a react app first with npx create-react-app
2.Then proceed to install dependencies
3.Structure you folders and create a component folder called Notes.js that will Have the main code as follows
const list1 = []
function Notes() {
const[visibility, setVisibility] = useState(false);
const[notes, setNotes] = useState([])
const colors = [“lightpink”, “lightgreen” ]
const [miscellanous, setMiscellanous] = useState({
title: “”,
body: “”,
});
const popUp = ()=>{
setVisibility(!visibility)
}
const addNote = (event) => {
const {name,value} = event.target
setMiscellanous ({…miscellanous, [name]: value})
}
const appendNote = () => {
if(miscellanous .body.trim().length > 0){
setNotes([ …notes, miscellanous])
setVisibility(!visibility)
}
}
return (
<>
<div className=”modal” style={{display: visibility ? “block” : “none”}}>
{visibility && <div className=”modal-content” >
<textarea type=”text” id=”note-body” name=”body” value={miscellanous.body} onChange={addNote}></textarea>
<div className=”button-group”>
<button onClick={appendNote}>Add note</button>
<button onClick={popUp} >Close</button>
</div>
</div>}
</div>
<div className=”notes”>
<div className=”header”>
<h1>Notes</h1>
<button onClick={popUp} className=”btn”>+</button>
</div>
<div className=”note-container” >
{notes.map((nt,index)=>(
<div key= {notes.indexOf(nt)}className=”note-card” style={{backgroundColor: colors[index % colors.length]}}>
<p>{nt.body}</p>
</div>
))}
</div>
</div>
</>
);
}
export default Notes;
Style the code in the Notes component in App.css as follows
/* Add styles for the container if needed */
background-color: white;
width: 80%;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header h1 {
margin-right: 130px; /* Adjust spacing between h1 and button */
}
.btn {
background-color: black;
border-radius: 50%;
color: white;
padding: 7px 10px;
border: none;
}
.note-container{
display: flex;
flex-wrap: wrap;
}
.note-card{
width: 200px;
height: 200px;
border-radius: 10px;
background-color: pink;
margin-right: 15px;
margin-bottom: 15px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
word-wrap: break-word;
}
.note-text{
height: 70%;
overflow: scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera */.note-text::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.note-text {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.modal {
position: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
.button-group{
display: flex;
flex-direction: column;
}
textarea{
width: 100%;
height: 100px;
}
.button-group button{
margin-top: 10px;
width: 100%;
background-color: rgb(110, 3, 3);
color: white;
border: 3px solid rgb(110, 3, 3);
border-radius: 5px;
font-size: 15px;
}
5. Call the notes component in the App.js folder to make it work as well as import the App.css in this folder
import ‘./App.css’;
import Notes from ‘./components/Notes’;
function App() {
return (
</div>
);
}
export default App;
6.Run npm start and it will open on the browser and look like this
Click the plus button on the right to add a note
Once you add the note you will see that they have been displayed on the screen
And Yep thats it 🙂 🙂
If you would like to connect with me reach me on
Linkedin: Bakhita Otieno
