<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
#txt{
height: 20vh;
width: 80vw;
}
#n{
border: 2px solid black;
margin: 8px;
}
button{
background: blue;
color: white;
}
.deleteBtn{
margin: 4px;
color: white;
background: red;
}
#searchtxt{
margin: 10px;
}
</style>
</head>
<body>
<label for="searchtxt">Search</label>
<input type="search" name="searchtxt" id="searchtxt" value="" placeholder="search"/>
<h1>Notes</h1>
<textarea id="txt"></textarea>
<div style="margin: 30px;">
<button id="addbtn" style="font-size:30px;">AddNote</button>
</div>
<hr/>
<hr/>
<h3 style="font-size:40px;">Your Notes </h3>
<hr/>
<hr/>
<div id="main2">
</div>
</body>
<script type="text/javascript" charset="utf-8">
console.log('Very simple note')
const setNote = (value)=> {
let note = localStorage.getItem('note')
if (note == null) {
notesObj = []
} else {
notesObj = JSON.parse(note);
}
notesObj.push(value)
notesObj = JSON.stringify(notesObj);
localStorage.setItem('note', notesObj)
}
const showNote = ()=> {
let div = document.getElementById('main2')
div.innerHTML = ''
let note = localStorage.getItem('note')
if (note == null) {
notesObj = []
} else {
notesObj = JSON.parse(note);
}
for (var i = 0; i < notesObj.length; i++) {
div.innerHTML += `<div id="n" class='cards'>
<b><h4>Note Number ${i+1}</h4></b>
<hr />
<p> ${notesObj[i]}</p>
<button id=${i} onclick='deletebtn(this.id)' class="deleteBtn">Delete</button>
</div>`
}
}
showNote()
let addbtn = document.getElementById('addbtn')
addbtn.addEventListener('click', function() {
let value = document.getElementById('txt')
if (value.value != '') {
setNote(value.value)
value.value = ''
} else {
alert('Invalid')
}
showNote()
})
const deletebtn = (index)=> {
let note = localStorage.getItem('note')
notesObj = JSON.parse(note);
notesObj.splice(index, 1)
localStorage.setItem('note',JSON.stringify(notesObj))
showNote()
}
let search = document.getElementById('searchtxt')
search.addEventListener('input',function(){
let cards = document.getElementsByClassName('cards')
Array.from(cards).forEach((ele)=>{
let cardtxt= ele.getElementsByTagName('p')[0].innerText.toLowerCase()
if(cardtxt.includes(search.value.toLowerCase())){
ele.style.display = 'block'
}
else{
ele.style.display = 'none'
}
})
})
</script>
<script src="note2.js" type="text/javascript" charset="utf-8"></script>
</html>
Comments
Post a Comment