Skip to main content

Keeping Notes Web App Project using JavaScript (jQuery) Free Source Code

Language

Introduction

This is a Keeping Notes Web App Project in JavaScript. This mini-project web application manages the user notes to keep. This has a CRUD (Create, Read, Update, and Delete) Operation Functions. With this mini-project, you can learn how to create a simple JavaScript project that uses the Web Browser's Local Storage. The source code might be useful for your future Web Application project.

About the Keeping Notes Web App

This web application was written using HTML, CSS, JavaScript, jQuery, Web Browser's Local Storage, Bootstrap, and Font-Awesome. The user can directly enter their note's title and content to create a new note and the save/submit and close/reset-form button will be shown at the form or bootstrap card header. The created notes are listed on the right side of the window/panel and each of these notes displays only limited note's content. The note's content at the list panel has only 3 maximum lines to show and to read all, update, and delete the note's content, you can simply click the notecard and the details will be automatically filled at the note form. The project includes deleting confirmation and search features. The delete confirmation helps to prevent accidentally deleting data. The search box limits/toggles the note cards that only contain the search input keyword. This mini-project has a dark user interface and user-friendly functionalities.

Features

  • Create New Note to Keep
  • List All Created Notes
  • Search Note in the List
  • View/Update Note's Details
  • Delete Notes
  • Delete Action Confirmation
  • and more

System Snapshots

Whole Page View

Keeping Notes Web App

Note's Form

Keeping Notes Web App

Searched Notes View/Side

Keeping Notes Web App

Delete Confirmation

Keeping Notes Web App

How to Run ??

  1. Download the provided source code zip file. (download button is located below)
  2. Extract the downloaded source code zip file.
  3. Locate the index file of the project inside the extracted source code folder. The file is known as index.html.
  4. Open the index file with your favorite browser or browse the Keeping Notes Web App in a browser using the index file location. i.e. C:/keep_notes/index.html.

DEMO

That's it. You can now explore the features and functionalities of this Keeping Notes Web App. I hope this project will help you with what you are looking for and you'll find something useful for your future projects.

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

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