Below is the file structrue of my react notes app with the respective code written in the file.
Please make this app responsive by implementing the required changes in existing files.
Notes-app
Folder-> node_modules
Folder-> public
Folder-> src
Folder-> assets
delete1.png
plus.png
Folder-> components
Folder-> Note
Note.js
Note.css
Folder-> NoteContainer
NoteContainer.js
NoteContainer.css
Folder-> Sidebar
Sidebar.js
Sidebar.css
App.js
App.css
Index.js
Index.css
.gitignore
package
package-lock
README
1) App.js
import { useEffect, useState } from "react";
import "./App.css";
import NoteContainer from "./components/NoteContainer/NoteContainer";
import Sidebar from "./components/Sidebar/Sidebar";
function App() {
const [notes, setNotes] = useState(
JSON.parse(localStorage.getItem("notes-app")) || []
);
const addNote = (color) => {
//creating a copy of current notes array
const tempNotes = [...notes];
//adding new note to this tempNotes array
tempNotes.push({
id: Date.now() + "" + Math.floor(Math.random() * 78),
text: "",
time: Date.now(),
date: Date.now(),
color,
});
//updating the current notes array to this tempNotes
setNotes(tempNotes);
};
const deleteNote = (id) => {
// Filter out the note with the given ID and update the notes array
const updatedNotes = notes.filter((note) => note.id !== id);
setNotes(updatedNotes);
};
const updateText = (text, id) => {
const tempNotes = [...notes];
const index = tempNotes.findIndex((item) => item.id === id);
if (index < 0) return;
tempNotes[index].text = text;
setNotes(tempNotes);
};
useEffect(() => {
localStorage.setItem("notes-app", JSON.stringify(notes));
}, [notes]);
return (
<div className="App">
<Sidebar addNote={addNote} />
<NoteContainer
notes={notes}
deleteNote={deleteNote}
updateText={updateText}
/>
</div>
);
}
export default App;
2) App.css
.App {
height: 100vh;
display: flex;
gap: 20px;
padding: 40px;
}
.custom-scroll::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
background-color: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: lightgray;
transition: 300ms;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background-color: gray;
}
3) index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
4) index.css
* {
border: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
5) Note.js
import React from "react";
import "./Note.css";
import deleteIcon from "../../assets/delete1.png";
let timer = 500,
timeout;
const Note = (props) => {
const getDate = (value) => {
if (!value) return "";
const months = [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC",
];
const today = new Date(value);
const day = today.getDate();
const month = months[today.getMonth()];
const year = today.getFullYear();
const currentDate = day + " " + month + " " + year;
return currentDate;
};
const getTime = (value) => {
if (!value) return "";
const today = new Date(value);
const time = today.toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
});
return time;
};
const debounce = (func) => {
clearTimeout(timeout);
timeout = setTimeout(func, timer);
};
const updateText = (text, id) => {
debounce(() => props.updateText(text, id));
};
return (
<div className="note" style={{ backgroundColor:
props.note.color }}>
<img
src={deleteIcon}
alt="delete-icon"
className="delete-icon"
onClick={() => props.deleteNote(props.note.id)}
/>
<textarea
className="note_content"
style={{ backgroundColor: props.note.color }}
defaultValue={props.note.text}
onChange={(event) => updateText(event.target.value,
props.note.id)}
/>
<div className="date_and_time">
<p className="time">{getTime(props.note.time)}</p>
<p className="date">{getDate(props.note.date)}</p>
</div>
</div>
);
};
export default Note;
6) Note.css
.note {
position: relative;
padding: 25px;
border: none;
height: 20rem;
width: 20rem;
display: flex;
flex-direction: column;
border-radius: 30px;
}
.note_content {
flex: 1;
resize: none;
font-size: 1rem;
line-height: 1.875rem;
border: none;
outline: none;
}
.date_and_time {
display: flex;
justify-content: space-between;
align-items: center;
}
.delete-icon {
width: 20px;
cursor: pointer;
opacity: 0;
transition: opacity 300ms ease;
}
.note:hover .delete-icon {
opacity: 1;
}
7) NoteContainer.js
import React from "react";
import Note from "../Note/Note";
import "./NoteContainer.css";
import loginIcon from "../../assets/login1.png";
import noteIcon from "../../assets/panda.png";
import signUpIcon from "../../assets/signup1.png";
const NoteContainer = (props) => {
const reverseArray = (arr) => {
const array = [];
for (let i = arr.length - 1; i >= 0; i--) {
array.push(arr[i]);
}
return array;
};
const notes = reverseArray(props.notes);
return (
<div className="note-container">
<div className="heading">
<div className="left-heading">
<button className="left-btn">
<div className="left">
<div className="left-img">
<img src={noteIcon} alt="note" />
</div>
<div className="text">
<h2 className="notes-heading">Panda-Notes</h2>
</div>
</div>
</button>
</div>
<div className="right-heading">
<button className="right-btn">
<div className="right">
<div className="right-img">
<img src={signUpIcon} alt="signUp" />
</div>
<div className="text">
<h2 className="notes-heading">Sign Up</h2>
</div>
</div>
</button>
<button className="right-btn">
<div className="right">
<div className="right-img">
<img src={loginIcon} alt="login" />
</div>
<div className="text">
<h2 className="notes-heading">Login</h2>
</div>
</div>
</button>
</div>
</div>
<div className="note-container_notes custom-scroll">
{notes.length > 0 ? (
notes.map((item) => (
<Note
key={item.id}
note={item}
deleteNote={props.deleteNote}
updateText={props.updateText}
/>
))
) : (
<h3>No Notes Present</h3>
)}
</div>
</div>
);
};
export default NoteContainer;
8) NoteContainer.css
.note-container {
height: 100%;
}
.note-container_notes {
margin-top: 10px;
height: 90%;
display: flex;
flex-wrap: wrap;
gap: 20px;
overflow-y: scroll;
}
.heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.left-img img {
width: 40px;
}
.right-img img {
width: 40px;
}
.left {
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
}
.right-btn {
margin-right: 60px;
}
button {
padding-left: 10px;
padding-right: 10px;
border-radius: 20px;
cursor: pointer;
}
.left-btn {
background-color: #97f19e;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add shadow */
transition: box-shadow 0.3s ease-in-out; /* Add transition for
smoother hover effect */
}
.left-btn:hover {
background-color: #85de77;
}
.right-btn {
background-color: #fcf5c7;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add shadow */
transition: box-shadow 0.3s ease-in-out; /* Add transition for
smoother hover effect */
}
.right-btn:hover {
background-color: #ffee93;
}
9) Sidebar.js
import React, { useState } from "react";
import "./Sidebar.css";
import plusIcon from "../../assets/plus.png";
const Sidebar = (props) => {
const [listOpen, setListOpen] = useState(false);
const colors = [
"#8e7ff6",
"#fcc453",
"#fd8d6f",
"#89d2bf",
"#85d0ef",
"#f786a8",
"#ee9aef",
];
return (
<div className="sidebar">
<img src={plusIcon} alt="plus" onClick={() => setListOpen(!
listOpen)} />
<ul className={`sidebar_list ${listOpen ? "sidebar_list_active" :
""}`}>
{colors.map((item, index) => (
<li
key={index}
className="sidebar_list_item"
style={{ backgroundColor: item }}
onClick={() => props.addNote(item)}
/>
))}
</ul>
</div>
);
};
export default Sidebar;
10) Sidebar.css
.sidebar {
display: flex;
flex-direction: column;
gap: 40px;
}
.sidebar img {
width: 40px;
cursor: pointer;
}
.sidebar_list {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
height: 0;
transition: 300ms;
}
.sidebar_list_active {
height: 300px;
}
.sidebar_list_item {
border-radius: 50%;
height: 25px;
width: 25px;
list-style: none;
cursor: pointer;
}
