Simple Notes Application using JavaScript Free Source Code

Language

This is a simple web application entitled Simple Notes Application. This program was developed or written in HTML, CSS, and JavaScript. It is a mobile responsive application that can store, retrieve, edit, delete, and searches user notes. It has a simple and pleasant user interface. It also consists of user-friendly features and functionalities.

About the Simple Notes Application

The Simple Notes Application was developed using the following technologies.

  • HTML
  • CSS
  • JavaScript
  • Browser's Local Storage
  • Bootstrap

The application functionalities were achieved using Pure JavaScript Coding which means it was developed without using any JS Library such as jQuery. It has CRUD functionalities which stand for Create, Read, Update, and Delete operations.

The Simple Notes Application was built for new JavaScript Programmers or Students as their guides or reference to have knowledge on how to create a CRUD operation using javascript. This program uses localStorage Object to store the notes or data.

Here are the Sample Snapshots

Note's Form Panel

JS Notes App - Form Panel

This is the panel where the user will enter or write their notes. The text field provided is both for Creating New Data or Updating Existing Data.

List of Notes Panel

JS Notes App - List of Notes Pane

This panel or part of the application page UI where all the stored notes of the users are listed. Each note has a delete and edit button. When deleting a note, the application will return a confirmation dialog first to prevent the unwanted deletion of data.

Search

JS Notes App - Search

The search input or text field can be found at the upper right of the screen. The search function will be triggered by entering a keyword on the search text input. Only the notes that contain the provided keyword will be shown on the notes list as the result of the search query.

Whole Interface

JS Notes App - Search

Features

  • Create a New Note
  • List All Notes
  • Edit Note
  • Delete Note
  • Note's Delete Confirmation
  • Search Note
  • Mobile Responsive

How to Run?

  1. Download the provided source code zip file. (download button is located below this article)
  2. Extract the source code.
  3. Locate the index.html file in the extracted source code folder.
  4. Open the file with your preferred browser such as Chrome Browser.

DEMO VIDEO

There you go! You can now test and explore the features and functionalities of this Simple Notes Application in JavaScript on your end. I hope this will help you with what you are looking for and enhance your programming capabilities.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
7 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.