Creating a Note App
Published: 2024-04-21 12:52:51

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 (
    <>
     



<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;

```
4. 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 (
    <div className="app">
      <Notes/>
     
        
    </div>
  );
}

export default App;

```
```
6.Run npm start and it will open on the browser and look like this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05vxspessuocqhe6mfv9.png)
7. Click the plus button on the right to add a note 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk5yb0s2kkfqwc87i5vo.png)

8. Once you add the note you will see that they have been displayed on the screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73al0cjra1cthu5tog70.png)

And Yep thats it :) :)

If you would like to connect with me reach me on 
Linkedin: Bakhita Otieno