Scribd
Upload
11 views6 pages

My Notes App

The document describes the development of a web application called 'MY-NOTES' using HTML, CSS, JavaScript with CRUD operations. It includes code snippets for creating, reading, updating and deleting notes. Screenshots show the CRUD operations in use.

Uploaded by

723mannu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views6 pages

My Notes App

The document describes the development of a web application called 'MY-NOTES' using HTML, CSS, JavaScript with CRUD operations. It includes code snippets for creating, reading, updating and deleting notes. Screenshots show the CRUD operations in use.

Uploaded by

723mannu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Department of Computer Science and Engineering

CTA Activity REPORT

ON

“MY-NOTES”
Problem Statement:
Design and Development of Web-Application titled “MY-
NOTES” which is developed having CRUD operations using
HTML, CSS, and JavaScript.
Code Snippet:
1. HTML CODE:
2. <body>
3. <nav class="navbar navbar-expand-lg navbar-warning bg-warning">
4. <div class="container-fluid">
5. <h2 class="navbar-brand">Keep</h2>
6. <input class="form-control me-2" id="search" type="search"
placeholder="Search" />
7. <button type="button" class="btn btn-light" id="navAddNote">Add
Note</button>
8. </div>
9. </nav>
10.
11. <div class="container mt-4">
12. <div class="form-control addNoteContainer" id="addNoteContainer">
13. <input type="text" class="form-control input_title" id="title"
placeholder="Title"/>
14. <div class="mb-3">
15. <textarea class="form-control input_descp" id="descp" rows="3"
placeholder="Take a note..."></textarea>
16. </div>
17. <button type="button" id="addNote" class="btn btn-warning
button_save">Save</button>
18. </div>
19. <div class="notes" id="notes">
20. <div class="card" style="width: 18rem;">
21. <div class="card-body">
22. <h5 class="card-title">Hi</h5>
23. <p class="card-text">There</p>
24. <button class="btn btn-warning card_btns"><img
src="./delete.svg" alt="" class="delete_btn"></button>
25. <button class="btn btn-warning card_btns"><img src="./edit.svg"
alt="" class="edit_btn"></button>
26. </div>
27. </div>
2. JavaScript code:
a. Create of Note Code:

b. Reading of Notes Code:


b. addNoteContainer.style.display = 'none';
c. let allNotes;
d. let notes = localStorage.getItem("notes")
e. if(notes === null){
f. allNotes =[]
g. }else{
h. allNotes = JSON.parse(notes);
i. }
j.
k. .log(editCard);
l. }
c. Updating of Notes Code:

m. function editNote(noteIndex){
n. let allNotes = JSON.parse(localStorage.getItem('notes'));
o. addNoteContainer.style.display = 'block';
p. addNoteBtn.innerText = 'Update Note'
q.
r. let title = document.getElementById('title')
s. let descp = document.getElementById('descp');
t.
u. title.value = allNotes[noteIndex].title
v. descp.value = allNotes[noteIndex].descp
w.
x. let editCard = document.querySelector('.card')
y. editCard.setAttribute('editIndex', `${noteIndex}`)
z. console.log(editCard);
aa.}

d. Deletion of Notes:
Screenshots of the project showing CRUD operation.
1. Creating single Note:

2. Creating Multiple Notes:

3. Reading of Notes:

4. Updation of Notes:

5. View of the Dashboard after Updation:

6. Deletion of notes:

You might also like