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
import React, { useState } from "react";
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 (
<>
{visibility &&
}
Notes
{notes.map((nt,index)=>(
{nt.body}
))}
);
}
export default Notes;
- Style the code in the Notes component in App.css as follows
.notes {
/* 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 (
