Creating a Note App

Bakhita Otieno — Sun, 21 Apr 2024 12:52:51 +0000

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;

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>

);
}

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

DEV Community: Bakhita Otieno

Creating a Note App