Learning the fundamentals of CRUD operations using HTML CSS JavaScript is essential for creating dynamic and interactive applications.
In this tutorial we’ll develop a simple To-Do app which will be perfect for the beginners to practice these operations (INSERT, UPDATE and DELETE).
We’ll use nothing but the foundational web technologies: HTML, CSS, and JavaScript.
What is CRUD?
CRUD represents the four basic operations of persistent storage: Create, Read, Update, and Delete.
These operations form the backbone of most web applications, allowing users to interact with and manipulate data stored in databases or other storage systems.
- Create: Add new records or data.
- Read: Retrieve or view existing data.
- Update: Modify existing data.
- Delete: Remove existing data.
Setting Up for the CRUD operations using HTML CSS JavaScript
To start, we’ll create a simple interface for our to-do list application. Our project will consist of three main files:
index.html: Structures the application and forms the user interface.style.css: Styles the application to improve user experience.script.js: Adds functionality to the application, enabling CRUD operations.
HTML Structure
The HTML file (index.html) lays out the structure of our to-do list application.
It includes a form for adding new tasks and a section to display the list of tasks.
The form will capture the task’s title, description, due date, and priority.
<body>
<div class="crud-container">
<fieldset>
<label for="title">Title:</label>
<input type="text" name="title" id="title" required>
<label for="description">Description:</label>
<textarea name="description" id="description"></textarea>
<label for="dueDate">Due Date:</label>
<input type="date" name="dueDate" id="dueDate">
<label for="priority">Priority:</label>
<select name="priority" id="priority">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<div class="form-actions">
<button type="submit" onclick="addOrUpdateTask()">Add/Update</button>
<button type="button" onclick="resetForm()">Clear</button>
</div>
</fieldset>
<div id="taskList" class="task-list"></div>
</div>
<script src="script.js"></script>
</body>CSS Styling
With the CSS file (style.css), we aim to make the application visually appealing and user-friendly.
We’ll use modern CSS properties to design a clean and intuitive layout, ensuring that the application is easy to navigate and interact with.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.crud-container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
fieldset {
border: none;
margin-bottom: 20px;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 20px;
}
.form-actions {
text-align: right;
}
button {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
button:hover {
background-color: #4cae4c;
}
.task-list {
margin-top: 20px;
}
.task {
background: #eee;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.task-info {
flex-grow: 1;
}
.task-actions button {
margin-left: 10px;
}
JavaScript Logic
The JavaScript file (script.js) brings our application to life, enabling the CRUD operations.
We’ll write functions to handle adding new tasks, displaying tasks, editing existing tasks, and deleting tasks.
This involves manipulating the DOM based on user interactions and ensuring a seamless experience.
var selectedTask = null;
function addOrUpdateTask() {
if (selectedTask === null) {
insertTask();
} else {
updateTask();
}
}
function updateTask() {
selectedTask.getElementsByClassName('task-info')[0].innerHTML = `
${document.getElementById('title').value}
${document.getElementById('description').value}
Due: ${document.getElementById('dueDate').value}
Priority: ${document.getElementById('priority').value}
`;
resetForm();
selectedTask = null;
}
function insertTask() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const dueDate = document.getElementById('dueDate').value;
const priority = document.getElementById('priority').value;
if (!title) {
alert('Please add a title to your task.');
return;
}
const taskList = document.getElementById('taskList');
const taskDiv = document.createElement('div');
taskDiv.classList.add('task');
taskDiv.innerHTML = `
${title}
${description}
Due: ${dueDate}
Priority: ${priority}
`;
taskList.appendChild(taskDiv);
}
function editTask(button) {
selectedTask = button.parentElement.parentElement;
document.getElementById('title').value = selectedTask.getElementsByTagName('strong')[0].innerText;
document.getElementById('description').value = selectedTask.getElementsByTagName('p')[0].innerText;
document.getElementById('dueDate').value = selectedTask.getElementsByTagName('small')[0].innerText.replace('Due: ', '').trim();
document.getElementById('priority').value = selectedTask.getElementsByTagName('small')[1].innerText.replace('Priority: ', '').trim();
}
function removeTask(button) {
if (confirm('Do you want to delete this task?')) {
const task = button.parentElement.parentElement;
document.getElementById('taskList').removeChild(task);
}
}
function resetForm() {
document.getElementById('title').value = '';
document.getElementById('description').value = '';
document.getElementById('dueDate').value = '';
document.getElementById('priority').value = '';
selectedTask = null;
}
Enhancing the Application
With the basic CRUD operations in place, there are several enhancements you can consider for further learning:
- Persisting Tasks: Integrate a backend database to save tasks persistently.
- Authentication: Add user authentication to create personalized to-do lists.
- Frameworks: Consider using frameworks like React, Vue, or Angular for more advanced state management and component-based architecture.
Conclusion
Building a CRUD to-do list application with HTML, CSS, and JavaScript is an excellent way to understand the basics of web development and CRUD operations.
This project not only reinforces your understanding of web technologies but also provides a foundation on which to build more complex applications.
As you continue to explore web development, remember that the principles of CRUD operations will remain a constant, guiding you through the development of dynamic and interactive web applications.
Happy coding!
