THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Google Keep App Clone with Local Storage using JavaScript in Hindi 2022

 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.

7 comments:

  1. Replies
    1. Do Ctrl + A = selelct all or do right click and select all.. then paste anywhere and then copy the coding part u want..

      Delete
  2. boss javascript source code nahi mil raha 3000 line code wala

    ReplyDelete
  3. css 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;
    }
    /* */
    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;
    }
    /* */
    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;
    }

    ReplyDelete