Create a Note Taking App Using HTML CSS JavaScript PHP
In this tutorial we will be creating a note taking app using HTML CSS JavaScript PHP. The app will allow users to create notes and save them to a database. The notes will be displayed in a grid layout with thumbnails. Users will be able to click on a thumbnail to view the note.
We will be using the following tools in this project:
HTML for the markup
CSS for the styling
JavaScript for the functionality
PHP for the backend
MySQL for the database
Let's get started!
- Create the project folder
Create a new folder for the project. I will be using the following project structure:
project-folder - css - js - php - index.html
2. Create the HTML
Create a new file in the project folder and name it index.html . Add the following code to the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Note Taking App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Note Taking App</h1>
<div class="notes">
<div class="note">
<div class="note-title">
<input type="text" placeholder="Note Title"></div>
<div class="note-body">
<textarea placeholder="Write your note here"></textarea>
</div> <div class="note-footer">
<button class="note-button">Save</button>
<button class="note-button">Delete</button>
</div>
</div>
</div>
<div class="add-note">
<button>+ Add Note</button>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
In the code above we have the basic HTML structure for our app. We have a container div which contains the app title, the notes grid and the add note button.
Each note in the grid is represented by a div with the class note . This div contains the note title, body and footer. The note title and body are editable by the user. The note footer contains the save and delete buttons.
3. Create the CSS
Create a new file in the css folder and name it style.css . Add the following code to the file:
body {
font-family: sans-serif;
padding: 20px;
background: #fafafa; }
.container {
max-width: 600px;
margin: 0 auto; }
h1 {
text-align: center;
padding: 20px 0; }
.notes {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px; }
.note { background: #fff;
border-radius: 5px;
padding: 15px; }
.note-title {
border: none;
outline: none; }
.note-body {
height: 100px;
overflow: auto; }
.note-footer {
display: flex;
justify-content: flex-end; }
.note-button {
background: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer; }
.note-button:hover {
background: #fafafa; }
.add-note {
text-align: center;
cursor: pointer; }
.add-note button {
background: #fff;
border: none;
padding: 20px;
font-size: 24px;
cursor: pointer; }
.add-note button:hover {
background: #fafafa; }
In the code above we have styled the basic HTML structure. We have set a max-width for the container and centered it. We have also styled the notes grid and the add note button.
4. Create the JavaScript
Create a new file in the js folder and name it script.js . Add the following code to the file:
const notes = document.querySelector('.notes');
const addNoteButton = document.querySelector('.add-note button');
const noteTemplate = document.querySelector('.note');
addNoteButton.addEventListener('click', () => {
const noteElement = noteTemplate.cloneNode(true);
notes.appendChild(noteElement);
});
In the code above we have defined some constants. The notes constant is used to store the notes grid. The addNoteButton constant is used to store the add note button. The noteTemplate constant is used to store the note template.
We have added an event listener to the add note button. When the button is clicked, we clone the note template and append it to the notes grid.
5. Create the PHP
Create a new file in the php folder and name it save-note.php . Add the following code to the file:
<?php
$title = $_POST['title'];
$body = $_POST['body']; // Connect to the database $conn = mysqli_connect('localhost', 'root', '', 'notes'); // Check for errors if (!$conn) { die('Connection failed: ' . mysqli_connect_error()); } // Insert note into the database $sql = "INSERT INTO notes (title, body) VALUES ('$title', '$body')"; if (mysqli_query($conn, $sql)) { echo 'Note saved successfully'; } else { echo 'Error: ' . $sql . '<br>' . mysqli_error($conn); } // Close the database connection mysqli_close($conn); ?>
In the code above we have a PHP script to save the notes to the database. We start by getting the title and body of the note from the $_POST superglobal.
We then connect to the database. We have used a MySQL database named notes . If the connection fails, we print an error message.
We then insert the note into the database. If the query is successful, we print a success message. Otherwise, we print the error message.
We then close the database connection.
Create a new file in the php folder and name it delete-note.php . Add the following code to the file:
<?php $id = $_POST['id']; // Connect to the database $conn = mysqli_connect('localhost', 'root', '', 'notes'); // Check for errors if (!$conn) { die('Connection failed: ' . mysqli_connect_error()); } // Delete note from the database $sql = "DELETE FROM notes WHERE id=$id"; if (mysqli_query($conn, $sql)) { echo 'Note deleted successfully'; } else { echo 'Error: ' . $sql . '<br>' . mysqli_error($conn); } // Close the database connection mysqli_close($conn); ?>
In the code above we have a PHP script to delete the notes from the database. We start by getting the id of the note from the $_POST superglobal.
We then connect to the database. If the connection fails, we print an error message.
We then delete the note from the database. If the query is successful, we print a success message. Otherwise, we print the error message.
We then close the database connection.
6. Create the MySQL Database
We will be using a MySQL database to store the notes. Create a new database named notes .
Create a new table named notes in the database. The table should have the following columns:
id - int(11) - primary key, auto increment
primary key, auto increment title - varchar(255)
body - text
Your database should look like this:
7. Testing
Open the index.html file in your browser. You should see the following:
Click on the add note button. A new note should be added to the grid:
Enter some text in the title and body fields. Click on the save button. The note should be saved to the database:
Refresh the page. The note should still be there:
Click on the delete button. The note should be deleted from the database:
And that's it! You have successfully created a note taking app using HTML CSS JavaScript PHP.
