Add files via upload

nishap24 · Jul 10, 2023 · 4022586 · 4022586
1 parent 5b6b16b
commit 4022586
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 0 deletions.
diff --git a/images/delete.png b/images/delete.png
diff --git a/images/edit.png b/images/edit.png
diff --git a/images/notes.png b/images/notes.png
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NK Codes💛-Notes Site</title>
+    <!--External Style Sheet-->
+    <link rel="stylesheet" href="style.css">
+
+
+</head>
+
+<body>
+    <div class="container">
+        <h1><img src="./images/notes.png" alt="Notes images">Notes</h1>
+        <button class="btn"><img src="./images/edit.png" alt="">Create Notes</button>
+        <div class="notes-container">
+            <!-- <p contenteditable="true" class="input-box"><img src="../images/notes-app-img/images/delete.png" alt=""></p> -->
+        </div>
+    </div>
+
+
+    <!--JS File-->
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,44 @@
+const notesContainer = document.querySelector(".notes-container");
+const createBtn = document.querySelector(".btn");
+let notes = document.querySelectorAll(".input-box");
+
+createBtn.addEventListener("click", function() {
+    let inputBox = document.createElement("p");
+    let img = document.createElement("img");
+    inputBox.className = "input-box";
+    inputBox.setAttribute("contenteditable", "true");
+    img.src = "./images/delete.png"
+    notesContainer.appendChild(inputBox).appendChild(img);
+    saveData();
+});
+
+notesContainer.addEventListener("click", function (e) {
+    if (e.target.tagName === "IMG") {
+        e.target.parentElement.remove();
+        saveData();
+    } else if (e.target.tagName === "P") {
+        notes = document.querySelectorAll(".input-box");
+        notes.forEach(nt => {
+            nt.onkeyup = function () {
+                saveData();
+            }
+        });
+    }
+});
+
+function saveData() {
+    localStorage.setItem("notes", notesContainer.innerHTML);
+}
+
+function showData() {
+    notesContainer.innerHTML = localStorage.getItem("notes");
+}
+
+showData();
+
+document.addEventListener("keydown",event=>{        /*  to get into different line */
+    if(event.key==="Enter"){
+        document.execCommand("insertLineBreak");
+        event.preventDefault();
+    }
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+.container{
+    width: 100%;
+    min-height: 100vh;
+    background: white;
+    columns: black;
+    padding-top: 4%;
+    padding-left: 10%;
+}
+
+.container h1{
+    display: flex;
+    align-items: center;
+    font-size: 35px;
+    font-weight: 600;
+    color: #663399;
+}
+
+.container h1 img{
+    width: 60px;
+}
+
+.container button img{
+    width: 25px;
+    margin-right: 8px;
+}
+
+.container button{
+    display: flex;
+    align-items: center;
+    background: #663399;
+    color: white;
+    font-size: 16px;
+    outline: 0;
+    border: 0;
+    border-radius: 40px;
+    padding: 15px 25px;
+    margin: 30px 0 20px;
+    cursor: pointer;
+}
+
+.input-box{
+    position: relative;
+    width: 100%;
+    max-width: 500px;
+    min-height: 150px;
+    background: #ececec;
+    color: rebeccapurple;
+    padding: 20px ;
+    margin: 20px 0;
+    outline: none;
+    border-radius: 5px;
+}
+
+.input-box img{
+    position: absolute;
+    width: 25px;
+    right: 15px;
+    bottom: 15px;
+    cursor: pointer;
+}