Google Keep App Clone with Local Storage using JavaScript in Hindi 2022
I highly recommend to watch the Main JavaScript in 16hours video.
After working on JavaScript for so long, It's time to move our knowledge to more advanced part. Where we will see How to use the JavaScript Advanced and apply it in our applications. We will go through each property line by line and understand the meaning and the output of it in a practically manner.
First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.
Here is the code
Here is the complete code of my Google Keep Clone
HTML FILE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ=="
crossorigin="anonymous"
/>
<title>thapa keep</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="heading">
<h1><i class="fas fa-sticky-note"></i> Thapa Keep</h1>
</div>
<div class="btn-div">
<button class="learn-more" class="add" id="add">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Add note</span>
</button>
</div>
<!-- SUbSCRIBE THAPA TECHNICAL YOUTUBE CHANNEL https://www.youtube.com/thapatechnical -->
<script src="script.js"></script>
</body>
</html>
CSS FILE CODE
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
background-color: #f4f7f8;
font-family: "Poppins", sans-serif;
display: flex;
flex-wrap: wrap;
}
.heading {
width: 100vw;
height: 5.5rem;
background-color: #f1c40f;
color: #282936;
box-shadow: 0px 10px 16px rgb(248, 247, 247);
}
.heading h1 {
line-height: 5.8rem;
margin-left: 2rem;
font-weight: 400;
}
.add:active {
transform: scale(0.98);
}
/* button style start */
.btn-div {
position: fixed;
top: 7rem;
right: 1rem;
border: none;
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
}
/* <!-- SUbSCRIBE THAPA TECHNICAL YOUTUBE CHANNEL https://www.youtube.com/thapatechnical --> */
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #f1c12e;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
/* <!-- SUbSCRIBE THAPA TECHNICAL YOUTUBE CHANNEL https://www.youtube.com/thapatechnical --> */
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 100%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
/* button style end */
.main {
padding: 2rem;
}
.note {
background-color: #fff;
margin: 30px 20px;
height: 200px;
width: 400px;
overflow-y: scroll;
margin-top: 7rem;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.note .operation {
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .operation button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 300px;
width: 100%;
padding: 20px;
}
.fa-edit,
.fa-trash-alt {
color: #fff;
padding: 10px;
background-color: #2ecc71;
border-radius: 50%;
}
.fa-trash-alt {
background-color: #e74c3c;
}
.fa-edit:hover {
background-color: #fff;
color: #27ae60;
filter: drop-shadow(0px 10px 8px rgb(219, 218, 218));
}
.fa-trash-alt:hover {
background-color: #fff;
color: #e74c3c;
filter: drop-shadow(0px 10px 8px rgb(219, 218, 218));
}
.hidden {
display: none;
}
JAVASCRIPT CODE
const addButton = document.querySelector("#add");
const updateLSData = () => {
const textAreaData = document.querySelectorAll("textarea");
const notes = [];
console.log(textAreaData);
textAreaData.forEach((note) => {
return notes.push(note.value);
});
console.log(notes);
localStorage.setItem("notes", JSON.stringify(notes));
};
// <!-- SUbSCRIBE THAPA TECHNICAL YOUTUBE CHANNEL https://www.youtube.com/thapatechnical -->
const addNewNote = (text = "") => {
const note = document.createElement("div");
note.classList.add("note");
const htmlData = `
<div class="operation">
<button class="edit"> <i class="fas fa-edit"></i> </button>
<button class="delete"> <i class="fas fa-trash-alt"></i> </button>
</div>
<div class="main ${text ? "" : "hidden"} "> </div>
<textarea class="${text ? "hidden" : ""}"></textarea> `;
note.insertAdjacentHTML("afterbegin", htmlData);
// console.log(note);
// getting the References
const editButton = note.querySelector(".edit");
const delButton = note.querySelector(".delete");
const mainDiv = note.querySelector(".main");
const textArea = note.querySelector("textarea");
// deleting the node
delButton.addEventListener("click", () => {
note.remove();
updateLSData();
});
// toggle using edit button
textArea.value = text;
mainDiv.innerHTML = text;
editButton.addEventListener("click", () => {
mainDiv.classList.toggle("hidden");
textArea.classList.toggle("hidden");
});
textArea.addEventListener("change", (event) => {
const value = event.target.value;
mainDiv.innerHTML = value;
updateLSData();
});
document.body.appendChild(note);
// it appeds a node as the last child of a node
};
// getting data back from localStorage
const notes = JSON.parse(localStorage.getItem("notes"));
if (notes) {
notes.forEach((note) => addNewNote(note));
}
addButton.addEventListener("click", () => addNewNote());
Hope you love the video.