Day 33: Notes App

This project uses local storage to allow a user to create, edit, and delete sticky notes
cyberTwitty · Jan 18, 2021 · 6b61ba6 · 6b61ba6
1 parent a5f31ba
commit 6b61ba6
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/notes-app/index.html b/notes-app/index.html
@@ -0,0 +1,23 @@
+<!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.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
+    <link rel="icon" href="https://img.icons8.com/dotty/80/FFFFFF/add-rule.png">
+    <link rel="stylesheet" href="style.css" />
+    <title>Notes App</title>
+</head>
+<body>
+    <button class="add" id="add">
+        <i class="fas fa-plus"></i>
+        Add Note
+    </button>
+
+
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.7/marked.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/notes-app/script.js b/notes-app/script.js
@@ -0,0 +1,62 @@
+const addButton = document.getElementById("add")
+const notes = JSON.parse(localStorage.getItem('notes'))
+
+if(notes) {
+    notes.forEach(note => addNewNote(note))
+}
+
+
+addButton.addEventListener('click', () => {
+    addNewNote('Click the edit button to start writing!')
+})
+
+function addNewNote(text = '') {
+    const note = document.createElement('div')
+    note.classList.add('note')
+
+    note.innerHTML = `
+        <div class="tools">
+            <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>
+    `
+    const editButton = note.querySelector('.edit')
+    const deleteButton = note.querySelector('.delete')
+    const main = note.querySelector('.main')
+    const textArea = note.querySelector('textarea')
+
+    textArea.value = text
+    main.innerHTML = marked(text)
+
+    deleteButton.addEventListener('click', () => {
+        note.remove()
+        updateLocalStorage()
+    })
+
+    editButton.addEventListener('click', ()=> {
+        main.classList.toggle('hidden')
+        textArea.classList.toggle('hidden')
+    })
+
+    textArea.addEventListener('input', (event) => {
+        const { value } = event.target
+        main.innerHTML = marked(value)
+
+        updateLocalStorage()
+    })
+
+    document.body.appendChild(note)
+}
+
+function updateLocalStorage() {
+    const notesText = document.querySelectorAll('textarea')
+
+    const notes = []
+
+    notesText.forEach(note => notes.push(note.value))
+
+    localStorage.setItem('notes', JSON.stringify(notes))
+}
diff --git a/notes-app/style.css b/notes-app/style.css
@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #989199;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    margin: 0;
+    flex-wrap: wrap;
+    padding-top: 3rem;
+    color: #f5f5f5;
+}
+
+.add {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    background-color: #087E8B;
+    border: none;
+    border-radius: 3px;
+    padding: 0.5rem 1rem;
+    color: #f5f5f5;
+    cursor: pointer;
+    box-shadow: 0 0 20px 1px rgba(0,0,0,0.2);
+}
+
+.note {
+    background-color: #f5f5f5;
+    box-shadow: 0 0 29px 1px rgba(0,0,0,0.2);
+    margin: 30px 20px;
+    height: 400px;
+    width: 400px;
+    color: #525152;
+}
+
+.note .tools {
+    background-color: #087E8B;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+}
+
+.note .tools button {
+    background-color: transparent;
+    border: none;
+    color: #f5f5f5;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-left: 0.5rem;
+}
+
+.note textarea {
+    outline: none;
+    font-family: inherit;
+    font-size: 1.2rem;
+    border: none;
+    height: 400px;
+    width: 100%;
+    padding: 20px;
+}
+
+.main {
+    padding: 20px;
+}
+
+.hidden {
+    display: none;
+}
+
+.add {
+    font-family: 'Poppins', sans-serif;
+}