Skip to content

Commit 4d033e6

Browse files
solygambassolygambas
committed
add notes app
1 parent 2cd0a4d commit 4d033e6

File tree

4 files changed

+147
-4
lines changed

4 files changed

+147
-4
lines changed

‎33-notes app/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Notes App</title>
14+
</head>
15+
<body>
16+
<button class="add" id="add"><i class="fas fa-plus"></i> Add note</button>
17+
18+
<script
19+
src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.7/marked.min.js"
20+
integrity="sha512-Sl04EWeJ0QgILm83WoubQbZqh71aWLJP8xnswnKSBI37S+ZtrWVtSHmd1YaYYdC1g9PWN1siY7KO2jU3HtCVHA=="
21+
crossorigin="anonymous"
22+
></script>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎33-notes app/script.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const addButton = document.getElementById("add");
2+
const notes = JSON.parse(localStorage.getItem("notes"));
3+
4+
const updateLocalStorage = () => {
5+
const notesText = document.querySelectorAll("textarea");
6+
const notes = [];
7+
notesText.forEach((note) => notes.push(note.value));
8+
localStorage.setItem("notes", JSON.stringify(notes));
9+
};
10+
11+
const addNewNote = (text = "") => {
12+
const note = document.createElement("div");
13+
note.classList.add("note");
14+
note.innerHTML = `
15+
<div class="tools">
16+
<button class="edit"><i class="fas fa-edit"></i></button>
17+
<button class="delete"><i class="fas fa-trash-alt"></i></button>
18+
</div>
19+
<div class="main ${text ? "" : "hidden"}"></div>
20+
<textarea class="${text ? "hidden" : ""}"></textarea>`;
21+
22+
const editButton = note.querySelector(".edit");
23+
const deleteButton = note.querySelector(".delete");
24+
const main = note.querySelector(".main");
25+
const textArea = note.querySelector("textarea");
26+
textArea.value = text;
27+
main.innerHTML = marked(text);
28+
29+
deleteButton.addEventListener("click", () => {
30+
note.remove();
31+
updateLocalStorage();
32+
});
33+
editButton.addEventListener("click", () => {
34+
main.classList.toggle("hidden");
35+
textArea.classList.toggle("hidden");
36+
});
37+
textArea.addEventListener("input", (e) => {
38+
const { value } = e.target;
39+
main.innerHTML = marked(value);
40+
updateLocalStorage();
41+
});
42+
document.body.appendChild(note);
43+
};
44+
45+
addButton.addEventListener("click", () => addNewNote());
46+
47+
if (notes) {
48+
notes.forEach((note) => addNewNote(note));
49+
}

‎33-notes app/style.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #7bdaf3;
9+
font-family: "Poppins", sans-serif;
10+
display: flex;
11+
flex-wrap: wrap;
12+
margin: 0;
13+
padding-top: 3rem;
14+
}
15+
16+
.add {
17+
position: fixed;
18+
top: 1rem;
19+
right: 1rem;
20+
background-color: #9ec862;
21+
color: #fff;
22+
border: none;
23+
border-radius: 3px;
24+
padding: 0.5rem 1rem;
25+
cursor: pointer;
26+
}
27+
28+
.note {
29+
background-color: #fff;
30+
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
31+
margin: 30px 20px;
32+
height: 400px;
33+
width: 400px;
34+
overflow-y: scroll;
35+
}
36+
37+
.note .tools {
38+
background-color: #9ec862;
39+
display: flex;
40+
justify-content: flex-end;
41+
padding: 0.5rem;
42+
}
43+
44+
.note .tools button {
45+
background-color: transparent;
46+
border: none;
47+
color: #fff;
48+
cursor: pointer;
49+
font-size: 1rem;
50+
margin-left: 0.5rem;
51+
}
52+
53+
.note textarea {
54+
outline: none;
55+
font-family: inherit;
56+
font-size: 1.2rem;
57+
border: none;
58+
height: 400px;
59+
width: 100%;
60+
padding: 20px;
61+
}
62+
63+
.main {
64+
padding: 20px;
65+
}
66+
67+
.hidden {
68+
display: none;
69+
}

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,17 @@
3838
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/30-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) |
3939
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) |
4040
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/32-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) |
41-
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/notes-app) | [Live Demo](/notes-app/) |
41+
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/33-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) |
4242
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/animated-countdown) | [Live Demo](/animated-countdown/) |
4343
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/image-carousel) | [Live Demo](/image-carousel/) |
4444
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/hoverboard) | [Live Demo](/hoverboard/) |
4545
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/pokedex) | [Live Demo](/pokedex/) |
4646
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
4747
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
48-
| 40 | [3d Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/3d-boxes-background) | [Live Demo](/3d-background-boxes/) |
49-
| 41 | [Verify Account Ui](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-ui) | [Live Demo](/verify-account-ui/) |
48+
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/3d-boxes-background) | [Live Demo](/3d-background-boxes/) |
49+
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-ui) | [Live Demo](/verify-account-ui/) |
5050
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/live-user-filter) | [Live Demo](/live-user-filter/) |
51-
| 43 | [Feedback Ui Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/feedback-ui-design) | [Live Demo](/feedback-ui-design/) |
51+
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/feedback-ui-design) | [Live Demo](/feedback-ui-design/) |
5252
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/custom-range-slider) | [Live Demo](/custom-range-slider/) |
5353
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/netflix-mobile-navigation) | [Live Demo](/netflix-mobile-navigation/) |
5454
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/quiz-app) | [Live Demo](/quiz-app/) |

0 commit comments

Comments
 (0)