You are currently viewing Create A Notes App in HTML ,CSS & JavaScript (Source Code)

Create A Notes App in HTML ,CSS & JavaScript (Source Code)

Free Coding Ebook 👉 Get Now

Create A Notes App in HTML CSS & JavaScript

 
 
notes app javascript
Notes app javascript Preview

Welcome to the codewithrandom blog. In this blog, we learn how to create a Notes App Using HTML, CSS, and JavaScript. In this Notes App, you can new Notes, Edit Notes and Delete it.

In this note app, users can easily add, edit, or delete their notes. The notes user has added to this app will be stored in the browser’s local storage so, they won’t remove on page refresh or tab close, and it is done with pure JavaScript.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Hope you enjoy our blog so let’s start with a basic html structure for a Notes app.

HTML Code For Notes app 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Notes App</title>
</head>
<body>
<button class="add" id="add">
<i class="fas fa-plus"></i> Add note
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Before beginning to add structure to our notes-taking app. We need to update some links. Because we utilised three distinct files for our HTML, CSS, and Javascript in this project, we need to link them all together. To do this, please include the links for our CSS and Javascript.

<link rel="stylesheet" href="style.css" />  //Add this link into the head section of our HTML.
    
<script src="index.js"></script>   //Add this link inside the body just before the closing body tag of our HTML.

We used the font-awesome icons to give our website a good notes app look while creating the notes app.

Portfolio Website Using HTML ,CSS and Javascript Source Code

<script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>

Now we will be adding the structure of our notes taking app using simple HTML concepts.

  • first of all using the <button> with class “add” and using the <i> class we will add the Add note button.
  • We’ll put the javascript link for our project under the body section using the script tag.
Code by N/A
Project Download Link Available Below
Language used HTML, CSS And JavaScript
External link / Dependencies YES
Responsive YES
Notes App Table

There is all HTML code for the Notes app. Now, you can see output without CSS & JAVASCRIPT, then we write CSS and JAVASCRIPT for the Notes app.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

output Notes app 

Notes App in HTML CSS & JavaScript
Notes App in HTML CSS & JavaScript

CSS Code For Notes app

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Restaurant Website Using HTML and CSS

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
outline: none;
}
body {
background-color: #7bdaf3;
font-family: 'Poppins', sans-serif;
display: flex;
flex-wrap: wrap;
margin: 0;
padding-top: 3rem;
}
.add {
position: fixed;
top: 1rem;
right: 1rem;
background-color: #9ec862;
color: #fff;
border: none;
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
}
.add:active {
transform: scale(0.98);
}
.note {
background-color: #fff;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
margin: 30px 20px;
height: 400px;
width: 400px;
overflow-y: scroll;
}
.note .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 400px;
width: 100%;
padding: 20px;
}
.main {
padding: 20px;
}
.hidden {
display: none;
}
After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.
 

Step1: The Poppins fonts from Google Fonts will be imported first. Using the universal selector, we will adjust the padding and margins to “zero” and add the box-sizing property as “border-box.”

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

We will utilise the body tag to give our body a blue background, set the display to flex, and set the margin for the flex-wrap property to “zero.” We’ll add 3 pixels of padding to the top using the padding-top property.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
    box-sizing: border-box;
    outline: none;
}

body {
    background-color: #7bdaf3;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 3rem;
}

Create A Notes App in HTML ,CSS & JavaScript (Source Code)

Step2: Using the class selector (.add), position is set to “fixed,” and using the top, we’ll add a 1-rem space from the top. The background colour is set to “green,” and the font colour is set to “white.” The cursor type is set to the pointer, and a border-radius of 3 pixels will be added using the border-radius property.

.add {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #9ec862;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.add:active {
    transform: scale(0.98);
}

Create A Notes App in HTML ,CSS & JavaScript (Source Code)

Step3:We will now style the textarea and note. The background colour will be set to “white” using the class selector, and the notes app’s box shadow will be set using the box-shadow property. The width and height are both set to 400px. The background colour has been set to “transparent,” and styling will be added to the button and textarea. Additionally, we’ll add 20px of padding and change the display attribute to “hidden.”

Create A Travel/Tourism Website Using HTML and CSS

.note {
    background-color: #fff;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
    margin: 30px 20px;
    height: 400px;
    width: 400px;
    overflow-y: scroll;
}

.note .tools {
    background-color: #9ec862;
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
}

.note .tools button {
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
}

.note textarea {
    outline: none;
    font-family: inherit;
    font-size: 1.2rem;
    border: none;
    height: 400px;
    width: 100%;
    padding: 20px;
}

.main {
    padding: 20px;
}

.hidden {
    display: none;
}

Create A Notes App in HTML ,CSS & JavaScript (Source Code)

 

ADVERTISEMENT

Now we have completed our CSS section for the notes app. Here is our updated output of the notes app.
Output  Notes app 

 

ADVERTISEMENT

 
Notes App in HTML CSS & JavaScript
Notes app using css output

Now add javascript for functionality in our notes app. We use Html coding in javascript for our notes app. Because we use most of the code through Javascript. We create Textarea and div for note writing. Then create two buttons in javascript for editing notes and deleting notes form note. Then we use also use local storage to save notes in our browsers.

ADVERTISEMENT

Javascript code For Notes app
 const addBtn = document.getElementById('add')  
 const notes = JSON.parse(localStorage.getItem('notes'))  
 if(notes) {  
   notes.forEach(note => addNewNote(note))  
 }  
 addBtn.addEventListener('click', () => addNewNote())  
 function addNewNote(text = '') {  
   const note = document.createElement('div')  
   note.classList.add('note')  
   note.innerHTML = `  
   <div class="tools">  
     <button class="edit"><i class="fas fa-edit"></i></button>  
     <button class="delete"><i class="fas fa-trash-alt"></i></button>  
   </div>  
   <div class="main ${text ? "" : "hidden"}"></div>  
   <textarea class="${text ? "hidden" : ""}"></textarea>  
   `  
   const editBtn = note.querySelector('.edit')  
   const deleteBtn = note.querySelector('.delete')  
   const main = note.querySelector('.main')  
   const textArea = note.querySelector('textarea')  
   textArea.value = text  
   main.innerHTML = marked(text)  
   deleteBtn.addEventListener('click', () => {  
     note.remove()  
     updateLS()  
   })  
   editBtn.addEventListener('click', () => {  
     main.classList.toggle('hidden')  
     textArea.classList.toggle('hidden')  
   })  
   textArea.addEventListener('input', (e) => {  
     const { value } = e.target  
     main.innerHTML = marked(value)  
     updateLS()  
   })  
   document.body.appendChild(note)  
 }  
 function updateLS() {  
   const notesText = document.querySelectorAll('textarea')  
   const notes = []  
   notesText.forEach(note => notes.push(note.value))  
   localStorage.setItem('notes', JSON.stringify(notes))  
 }  

First, we’ll use the document.getelementById() method to select the html elements. Next, using the click event listener, we’ll add the note class to our notes app as soon as the user clicks the “add note” button. Finally, using the query selector, we’ll add the ability to create, edit, edit, and delete notes in our notes app.

ADVERTISEMENT

Netflix Clone Using HTML,CSS and JavaScritp (Source Code)

ADVERTISEMENT

Just to add functionality, we used the fundamental javascript concept. The user will see the notes form when they click on the icon, and we’ve also included edit and delete buttons using our javascript.

The project is now finished, we have completed Notes taking app using HMTL ,CSS and Javascript. Now look at the live preview.

Final output Of Notes app 

 
notes app Using javascript
notes app Using javascript

10+ Javascript Project Ideas For Beginners( Project Source Code)

Now we have completed our Notes App Using Javascript. Here is our updated output of the notes app. Hope you like the Notes app, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a Notes app using simple HTML, CSS & javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for this Notes App coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

Free Coding Ebook 👉 Get Now

This Post Has One Comment

Leave a Reply