Skip to content

Commit 330b39f

Browse files
akshitagupta15juneakshitagupta15june
authored
Merge pull request akshitagit#134 from bilalzhd/master
Add files
2 parents eb045a9 + 26ce7db commit 330b39f

File tree

2 files changed

+160
-0
lines changed

2 files changed

+160
-0
lines changed

‎DailyCode/basic todos with localstorage/index.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
// console.log("Welcome to notes app. This is app.js");
3+
showNotes();
4+
5+
// If user adds a note, add it to the localStorage
6+
let addBtn = document.getElementById("addBtn");
7+
addBtn.addEventListener("click", function(e) {
8+
let addTitle = document.getElementById('addTitle');
9+
let addTxt = document.getElementById("addTxt");
10+
let notes = localStorage.getItem("notes");
11+
if (notes == null) {
12+
notesObj = [];
13+
} else {
14+
notesObj = JSON.parse(notes);
15+
}
16+
let myObj = {
17+
title: addTitle.value,
18+
text: addTxt.value
19+
}
20+
notesObj.push(myObj);
21+
localStorage.setItem("notes", JSON.stringify(notesObj));
22+
addTxt.value = "";
23+
addTitle.value = "";
24+
showNotes();
25+
});
26+
27+
28+
29+
30+
31+
32+
// Function to show elements from localStorage
33+
function showNotes() {
34+
let notes = localStorage.getItem("notes");
35+
if (notes == null) {
36+
notesObj = [];
37+
} else {
38+
notesObj = JSON.parse(notes);
39+
}
40+
let html = "";
41+
notesObj.forEach(function(element, index) {
42+
html += `
43+
<div class="noteCard my-2 mx-2 card" style="width: 18rem;">
44+
<div class="card-body">
45+
<h5 class="card-title"><b>${element.title.toUpperCase()}</b></h5>
46+
<p class="card-text"> ${element.text}</p>
47+
<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
48+
</div>
49+
</div>`;
50+
});
51+
let notesElm = document.getElementById("notes");
52+
if (notesObj.length != 0) {
53+
notesElm.innerHTML = html;
54+
} else {
55+
notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
56+
}
57+
}
58+
59+
// Function to delete a note
60+
function deleteNote(index) {
61+
62+
let notes = localStorage.getItem("notes");
63+
if (notes == null) {
64+
notesObj = [];
65+
} else {
66+
notesObj = JSON.parse(notes);
67+
}
68+
69+
notesObj.splice(index, 1);
70+
localStorage.setItem("notes", JSON.stringify(notesObj));
71+
showNotes();
72+
}
73+
74+
75+
let search = document.getElementById('searchTxt');
76+
search.addEventListener("input", function(){
77+
78+
let inputVal = search.value.toLowerCase();
79+
let noteCards = document.getElementsByClassName('noteCard');
80+
Array.from(noteCards).forEach(function(element){
81+
let cardTxt = element.getElementsByTagName("p")[0].innerText;
82+
if(cardTxt.includes(inputVal)){
83+
element.style.display = "block";
84+
}
85+
else{
86+
element.style.display = "none";
87+
}
88+
89+
})
90+
})

‎DailyCode/basic todos with localstorage/notes.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Notes App</title>
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11+
</head>
12+
13+
<body>
14+
15+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16+
<a class="navbar-brand" href="#">Magic Notes</a>
17+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
18+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
19+
<span class="navbar-toggler-icon"></span>
20+
</button>
21+
22+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
23+
<ul class="navbar-nav mr-auto">
24+
<li class="nav-item active">
25+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
26+
</li>
27+
28+
</ul>
29+
<form class="form-inline my-2 my-lg-0">
30+
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search" aria-label="Search">
31+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
32+
</form>
33+
</div>
34+
</nav>
35+
36+
37+
<div class="container my-3">
38+
<h1>Welcome To Magic Notes</h1>
39+
<div class="card">
40+
<div class="card-body">
41+
<h5 class="card-title">Title</h5>
42+
<div class="form-group">
43+
<textarea class="form-control" id="addTitle" rows="1"></textarea>
44+
</div>
45+
<h5 class="card-title">Add a note</h5>
46+
<div class="form-group">
47+
<textarea class="form-control" id="addTxt" rows="3"></textarea>
48+
</div>
49+
<button class="btn btn-primary" id="addBtn">Add Note</button>
50+
</div>
51+
</div>
52+
<hr>
53+
<h1>Your Notes</h1>
54+
<hr>
55+
<div id="notes" class="row container-fluid"> </div>
56+
</div>
57+
58+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
59+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
60+
crossorigin="anonymous"></script>
61+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
62+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
63+
crossorigin="anonymous"></script>
64+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
65+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
66+
crossorigin="anonymous"></script>
67+
<script src="index.js"></script>
68+
</body>
69+
70+
</html>

0 commit comments

Comments
 (0)