Note Taking Web Application​

Project Overview


The objective for this project was to design a simple note taking web application that includes an user sign-up, login and logout feature. Each user that is created along with the every note that is created within the account will be stored in the SQL database so they can log in again and reopen their notes at any time. This project is built using HTML, CSS and JavaScript for the front-end and uses Bootstrap framework for the UI layout, and PHP for the back end aspect which connects to the SQL database. 



This is the landing page and essentially the user sign up and login page of the website. When the user first enters, they would be required to first sign up by entering their email and password. This sign up form encodes cross-site scripting attacks which prevents users from using special characters to create email or special text format to login etc. Once the user has signed up, their account would be then automatically stored in the SQL database and the URL should display “?success=1” meaning the account was successfully created. Then the user would be brought back to the home page and would be able to reenter their email and password to login to the website. 


This is the main page where it leads the user after they login to their account (next step from previous section). When the user first enters, they would see an “Add New Note” section where the user can create a note by entering the following specific entries of the form. The note should be categorized from one of the 3 following options that include, “College”, “Friends”, and “Chores”. The user would then enter the title of the note along with a small brief description of the note and the posted (today’s date). If the note is already completed, the user can simply check the “Complete” checkbox and finally add the note to their collection. The logout button is on the top right which would then lead back to the original home page. 


This is the active and archived notes section which right below the note creating form. These are all the notes that the user creates would appear and would be stored until the user decides to delete the note. The active notes are the notes that the user has yet to complete and right below is the archived notes which essentially is completed and ready to be deleted. Each of these notes that are created by the user would only appear by the user who has created, meaning the notes that are created by other users would not appear and would have no access to the notes other than theirs. 

Scroll to top