Skip to content

Commit d530cef

Browse files
jigar-sablejigar-sable
committed
wekeep added
1 parent 592bc5b commit d530cef

5 files changed

Lines changed: 126 additions & 0 deletions

File tree

‎assests/js/projects.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
[
2+
{
3+
"name":"WeKeep Notes",
4+
"desc":"We keep notes saver. Stores Notes in LocalStorage. TailwindCSS",
5+
"meta":"wekeep"
6+
},
27
{
38
"name":"Songify Music Player",
49
"desc":"Music Player with play, pause, playlist and all major features. SASS/SCSS",

‎assests/projects-img/wekeep.PNG‎

81.5 KB
Loading

‎projects/wekeep/assests/fav.ico‎

15 KB
Binary file not shown.

‎projects/wekeep/assests/script.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const addBtn = document.getElementById('addBtn');
2+
3+
const updateNote = () => {
4+
const textAreaData = document.querySelectorAll('textarea')
5+
const notes = [];
6+
textAreaData.forEach((note) => {
7+
if(note.value != ""){
8+
return notes.push(note.value);
9+
}
10+
});
11+
localStorage.setItem('notes', JSON.stringify(notes));
12+
}
13+
14+
const addNewNote = (txt = '') => {
15+
16+
const notesContainer = document.getElementById('notesContainer');
17+
const note = document.createElement('div');
18+
const classes = ['note','h-52','p-2','bg-purple-800','rounded','flex','flex-col','shadow-lg','border-b-4','border-yellow-400'];
19+
note.classList.add(...classes);
20+
21+
const htmlData = `
22+
<div class="operation p-0.5 flex justify-end gap-2 mb-0.5">
23+
<button class="material-icons-round edit bg-green-400 p-1 rounded hover:bg-green-600 hover:text-white transition-colors duration-75">${txt ? "edit_note" : "done" }</button>
24+
<button class="material-icons-round delete bg-red-600 text-white p-1 rounded hover:bg-red-700 transition-colors duration-75">delete</button>
25+
</div>
26+
27+
<div class="noteTxt p-1 overflow-y-auto pb-4 text-white ${txt ? "" : "hidden" }"></div>
28+
<textarea class="p-1 outline-none border border-yellow-500 rounded resize-none w-full placeholder-gray-500 ${txt ? "hidden" : "" }" rows="6" placeholder="Type your note.."></textarea>`;
29+
30+
note.insertAdjacentHTML('afterbegin',htmlData);
31+
32+
const editBtn = note.querySelector('.edit');
33+
const delBtn = note.querySelector('.delete');
34+
const noteTxt = note.querySelector('.noteTxt');
35+
const textArea = note.querySelector('textarea');
36+
37+
// delete note
38+
delBtn.addEventListener('click', () => {
39+
note.classList.add('animate-ping','opacity-30');
40+
setTimeout(() => {
41+
note.remove();
42+
updateNote();
43+
}, 200);
44+
});
45+
46+
textArea.value = txt;
47+
noteTxt.innerHTML = txt;
48+
49+
// edit btn event
50+
editBtn.addEventListener('click', () => {
51+
noteTxt.classList.toggle('hidden');
52+
textArea.classList.toggle('hidden');
53+
if(textArea.classList.contains('hidden')) {
54+
editBtn.textContent = "edit_note";
55+
} else {
56+
editBtn.textContent = "done";
57+
}
58+
updateNote();
59+
});
60+
61+
textArea.addEventListener('change', (event) => {
62+
const value = event.target.value;
63+
noteTxt.innerHTML = value;
64+
if(note.value != ""){
65+
updateNote();
66+
}
67+
});
68+
69+
notesContainer.appendChild(note);
70+
}
71+
72+
// fetch stored notes from localstorage
73+
const notes = JSON.parse(localStorage.getItem('notes'));
74+
if(notes) {
75+
notes.forEach((note) => addNewNote(note));
76+
}
77+
78+
// add new note btn event
79+
addBtn.addEventListener('click', () => addNewNote() );

‎projects/wekeep/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>We Keep | Notes</title>
8+
<link rel="shortcut icon" href="./assests/fav.ico" type="image/x-icon">
9+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
14+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
15+
</head>
16+
<body class="bg-green-100" style="font-family: 'Poppins', sans-serif;">
17+
18+
<header class="w-full px-3 sm:px-0 py-4 bg-gray-900 shadow-lg">
19+
20+
<div class="nav-container sm:w-4/5 mx-auto flex items-center justify-between">
21+
<a class="text-2xl sm:text-3xl font-bold text-yellow-500 hover:text-yellow-600 flex items-center" href="/"> <i class="material-icons-round text-3xl">description</i> We Keep</a>
22+
<button class="bg-yellow-500 p-2 rounded-md hover:bg-yellow-600 flex items-center gap-1" id="addBtn"><i class="material-icons-round">add_box</i>Add New Note</button>
23+
</div>
24+
</header>
25+
26+
<div class="grid pt-6 pb-8 pr-4 sm:pr-12 pl-4 sm:pl-12 h-full w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-4 gap-y-6" id="notesContainer">
27+
28+
<!-- <div class="note h-52 p-2 bg-purple-800 rounded flex flex-col shadow-lg border-b-4 border-yellow-400">
29+
<div class="operation p-0.5 flex justify-end gap-2 mb-0.5">
30+
<button class="material-icons-round edit bg-green-400 p-1 rounded hover:bg-green-600 hover:text-white transition-colors duration-75">edit_note</button>
31+
<button class="material-icons-round delete bg-red-600 text-white p-1 rounded hover:bg-red-700 transition-colors duration-75">delete</button>
32+
</div>
33+
34+
<div class="noteTxt p-1 overflow-y-auto pb-4 text-white"></div>
35+
<textarea class="p-1 outline-none border border-yellow-500 rounded resize-none w-full placeholder-gray-500" rows="6" placeholder="Type your note.."></textarea>
36+
</div> -->
37+
38+
</div>
39+
40+
<script src="./assests/script.js"></script>
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)