From 8de50e404d0ed6b83a3124aca882a639acdcb2ad Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Wed, 4 Nov 2020 15:07:51 -0500 Subject: [PATCH] Notes app --- notes-app/index.html | 18 +++++++++++ notes-app/script.js | 63 ++++++++++++++++++++++++++++++++++++++ notes-app/style.css | 73 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 insertions(+) create mode 100644 notes-app/index.html create mode 100644 notes-app/script.js create mode 100644 notes-app/style.css diff --git a/notes-app/index.html b/notes-app/index.html new file mode 100644 index 0000000..c2054c0 --- /dev/null +++ b/notes-app/index.html @@ -0,0 +1,18 @@ + + + + + + + + Notes App + + + + + + + + diff --git a/notes-app/script.js b/notes-app/script.js new file mode 100644 index 0000000..399ab0f --- /dev/null +++ b/notes-app/script.js @@ -0,0 +1,63 @@ +const addBtn = document.getElementById('add') + +const notes = JSON.parse(localStorage.getItem('notes')) + +if(notes) { + notes.forEach(note => addNewNote(note)) +} + +addBtn.addEventListener('click', () => addNewNote()) + +function addNewNote(text = '') { + const note = document.createElement('div') + note.classList.add('note') + + note.innerHTML = ` +
+ + +
+ +
+ + ` + + const editBtn = note.querySelector('.edit') + const deleteBtn = note.querySelector('.delete') + const main = note.querySelector('.main') + const textArea = note.querySelector('textarea') + + textArea.value = text + main.innerHTML = marked(text) + + deleteBtn.addEventListener('click', () => { + note.remove() + + updateLS() + }) + + editBtn.addEventListener('click', () => { + main.classList.toggle('hidden') + textArea.classList.toggle('hidden') + }) + + textArea.addEventListener('input', (e) => { + const { value } = e.target + + main.innerHTML = marked(value) + + updateLS() + }) + + document.body.appendChild(note) +} + +function updateLS() { + const notesText = document.querySelectorAll('textarea') + + const notes = [] + + notesText.forEach(note => notes.push(note.value)) + + localStorage.setItem('notes', JSON.stringify(notes)) +} \ No newline at end of file diff --git a/notes-app/style.css b/notes-app/style.css new file mode 100644 index 0000000..d0cff07 --- /dev/null +++ b/notes-app/style.css @@ -0,0 +1,73 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; + outline: none; +} + +body { + background-color: #7bdaf3; + font-family: 'Poppins', sans-serif; + display: flex; + flex-wrap: wrap; + margin: 0; + padding-top: 3rem; +} + +.add { + position: fixed; + top: 1rem; + right: 1rem; + background-color: #9ec862; + color: #fff; + border: none; + border-radius: 3px; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.add:active { + transform: scale(0.98); +} + +.note { + background-color: #fff; + box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); + margin: 30px 20px; + height: 400px; + width: 400px; +} + +.note .tools { + background-color: #9ec862; + display: flex; + justify-content: flex-end; + padding: 0.5rem; +} + +.note .tools 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: 400px; + width: 100%; + padding: 20px; +} + +.main { + padding: 20px; +} + +.hidden { + display: none; +}