Table of contents
If you have started learning Web development, then instead of watching tutorial after tutorial and falling into the trap of something called as 'Tutorial Hell '. It's better to have project-based learning where you learn by making projects. First, you start with small projects and then you keep on increasing the complexity of your projects.
The great thing about web development is that whenever you get stuck somewhere, you are just a few searches away from knowing the solution to your problem. There is so much content around web development on the internet, you will never find a problem unanswered.
Well here is a simple Notes app using HTML, CSS, and Javascript made by me you can try to make your own versions and learn from it.
Here is the HTML code of the app.
<div id="notesWrapper">
<div class="addNewNote aNNCenter" onclick="openPopup()" >
<img src="utils/addNote.png" alt="Add new note" >
</div>
</div>
<!-- this is the code of the popup -->
<div id="popup-backdrop" class="popup-backdrop-remove">
</div>
<div class="popup popup-close">
<div id="topHead">
<span id="tH-left">Add a new Note</span>
<span id="tH-right"><img src="utils/cross.jpg" alt="close" id="closeNewNote" onclick="closePopup()"></span>
</div>
<div id="newNoteBottom">
<div>Title</div>
<input type="text" id="newNoteTitle">
<div>Description</div>
<textarea cols="41" rows="10" id="newNoteDescription"></textarea>
</div>
<button id="addNoteBtn" onclick="appendNote()">Add Note</button>
</div>
<script src="script.js"></script>
Here is the CSS of the app which gives its styling:
*{
font-family: Arial, sans-serif;
}
body{
background-color: rgb(14,22,58);
position: relative;
padding-left:auto;
}
#notesWrapper{
display:flex;
flex-wrap: wrap;
}
.addNewNote{
background-color: rgb(231, 255, 242);
height: 20rem;
width: 16rem;
border-radius: 5%;
margin:1rem;
padding: 1rem;
position: relative;
word-wrap: break-word;
overflow: hidden;
cursor: pointer;
}
.NewNote{
background-color: rgb(231, 255, 242);
height: 20rem;
width: 16rem;
border-radius: 5%;
margin:1rem;
padding: 1rem;
position: relative;
word-wrap: break-word;
overflow: hidden;
}
.aNNCenter{
display: flex;
justify-content: center;
align-items: center;
}
.addNewNote>img{
width: 50%;
height: auto;
}
#popup-backdrop{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 50%;
}
.popup-backdrop-remove{
transform: scale(0);
}
.popup{
position: fixed;
top: 50%;
left: 50%;
/* transform: ; */
height: 25rem;
width: 20rem;
background-color: white;
padding: 1rem;
z-index: 10;
border-radius: 1%;
transform: scale(1) translate(-50%,-50%);
transition: scale .1s;
transform-origin: center;
}
.popup-close{
transform: scale(0);
transition: transform 0.3s ease;
}
.popup button{
width: 100%;
background-color:rgb(14,22,58);
color: #fff;
text-align: center;
padding: .4rem;
border-radius: 5%;
margin-top: 1.5rem;
}
#topHead{
position: relative;
border-bottom: 2px solid black;
padding-bottom: .5rem;
}
#tH-left{
font-weight: bolder;
}
#tH-right img{
width: 1.5rem;
height: auto;
position: absolute;
left: 95%;
}
#newNoteBottom{
margin-top: 1rem;
}
#newNoteBottom input{
display: block;
width: 100%;
padding: .5rem;
box-sizing: border-box;
margin-top: .5rem;
margin-bottom: .5rem;
}
#newNoteBottom textarea{
display: block;
width: 100%;
padding: .5rem;
box-sizing: border-box;
margin-top: .5rem;
margin-bottom: .5rem;
resize: none;
}
/* note inside elements styling */
.noteBody{
color:blue;
max-height: 200px;
overflow: auto;
}
.noteBody::-webkit-scrollbar{
width: 0;
}
.noteBody:hover::-webkit-scrollbar{
width: 15px;
}
.noteBody:hover::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 25px;
}
.noteBody:hover:-webkit-scrollbar-track{
background: blue;
}
.noteBody:hover::-webkit-scrollbar-thumb{
background: blue;
border-radius: 25px;
}
.noteFooter{
position: absolute;
bottom: 05%;
border-top: 2px solid blue;
padding-top: 7px;
font-size: .8rem;
color: brown;
padding-left: 1rem;
}
#editNote{
width: 1rem;
margin-left: 4rem;
margin-right: 1rem;
}
#deleteNote{
width: 1rem;
}
.makeInvisible{
transform: scale(0);
}
And here is the Javascript code :
window.onload=()=>{
// making a Notes array as the stored array or an empty array if not found any in the storage
Notes=localStorage.getItem('notes')?JSON.parse(localStorage.getItem('notes')):[]
Notes.forEach((note,index)=>{
notesFactory(note,index)
})
}
let notesWraper=document.getElementById('notesWrapper');
let noteAdder=document.querySelector('.addNewNote');
let popup=document.querySelector('.popup');
let popupBackdrop=document.getElementById('popup-backdrop')
let title=document.getElementById('newNoteTitle');
let discription=document.getElementById('newNoteDescription');
let popupHeading=document.getElementById('tH-left');
let popupClose=document.getElementById('closeNewNote');
let popupBtn=document.getElementById('addNoteBtn');
function openPopup(){
popup.classList.remove('popup-close')
popupBackdrop.classList.remove('popup-backdrop-remove')
title.focus()
popupHeading.innerText='Add a new note'
popupBtn.innerText='Add note'
};
function closePopup(){
if(title.value!=''||discription.value!=''){
let confirmClose=confirm('You will lose your note! Are you sure?')
if(!confirmClose)return;
}
title.value='';
discription.value=''
popup.classList.add('popup-close')
popupBackdrop.classList.add('popup-backdrop-remove')
}
function notesFactory(note,index){
noteDiv=`<div class="NewNote" id="Note${index}">
<h2 class="noteHeader">${note.title}</h2>
<p class="noteBody">${note.discription}</p>
<div class="noteFooter">
${note.currDate}
<img src="utils/edit.png" id="editNote" onclick='editNoteFunction(this)'>
<img src="utils/delete.png" id="deleteNote" onclick='deleteNoteFunction(this)'>
</div>
</div>`
// At deleteNoteFunction given a parameter this, which sends the html element object to the function
noteAdder.insertAdjacentHTML('afterend',noteDiv);
}
//function to append new note in the div
function appendNote(){
if(title.value==''&& discription.value==''){
alert('Note is empty, write something first');
}
else{
//current date
let dateObj=new Date();
let month = dateObj.toLocaleString('default', { month: 'long' });
let note={
'title':title.value,
'discription':discription.value,
'currDate':dateObj.getDate()+' '+ month+' '+dateObj.getFullYear(),
}
Notes.push(note);
localStorage.setItem('notes',JSON.stringify(Notes))
//making the popup invisible:
title.value='';
discription.value='';
popup.classList.add('popup-close');
popupBackdrop.classList.add('popup-backdrop-remove')
//drawing the notes
Notes=JSON.parse(localStorage.getItem('notes'))
Notes.slice(-1).forEach((note)=>{
notesFactory(note);
});
}
}
function deleteNoteFunction(elem){
let Elem=elem.parentElement.parentElement
let Id=Elem.id;
let deleteOrNOt=confirm('Are you sure you want to delete the note?')
if(deleteOrNOt){
indexOfNote=Id[Id.length-1] //last letter of the id of the note is it's index (example Note7 )
Notes.splice(indexOfNote,1)
localStorage.setItem('notes',JSON.stringify(Notes))
document.getElementById(Id).remove();
}
else return;
}
function editNoteFunction(elem){
let Elem=elem.parentElement.parentElement
let titleOfNote=Elem.getElementsByTagName('h2')[0].innerText
let discriptionOfNote=Elem.getElementsByTagName('p')[0].innerText
let Id=Elem.id;
//deleting the note that is being updated
indexOfNote=Id[Id.length-1] //last letter of the id of the note is it's index (example Note7 )
Notes.splice(indexOfNote,1)
localStorage.setItem('notes',JSON.stringify(Notes))
document.getElementById(Id).remove();
openPopup();
popupClose.classList.add('makeInvisible') // making the close btn invisible so that users may not lose the note
popupHeading.innerText='Update the Note'
popupBtn.innerText='Update Note'
title.value=titleOfNote;
discription.value=discriptionOfNote;
}
That it. Here's the output
Or you could try it here by clicking on the link below: