Bank Holiday Manager with HTML, CSS, and JavaScript | Complete CRUD Guide

In this blog post, we’ll walk through the process of creating a Bank Holiday Manager using HTML, CSS, JavaScript, and Bootstrap. This app allows you to add, edit, delete, and store holiday data with a sleek, user-friendly interface. Whether you’re a beginner or looking to sharpen your web development skills, this tutorial will provide you with valuable insights.

What You’ll Learn:

• Responsive Design: Learn how to create a responsive holiday manager using Bootstrap 🎨.
• Modals for Interaction: We’ll use modals to easily add and edit holidays ✍️.
• CRUD Operations: Understand how to implement Create, Read, Update, and Delete operations with JavaScript 📝.
• Persistent Storage: Discover how to store holiday data in the localStorage for persistence 💾.
• Interactive UI Elements: Enhance the user experience with interactive elements like hover effects and smooth animations ✨.

Project Overview:

Our Bank Holiday Manager web app is designed to manage bank holidays in an intuitive way. It’s built using HTML, CSS, and JavaScript, paired with Bootstrap for styling. Here’s how the app works:

• Add Holidays: Users can add a new holiday by entering the date, name, and description.
• Edit Holidays: Users can update holiday details through a modal form.
• Delete Holidays: Users can remove holidays from the list with a simple click.
• Persist Data: All holiday information is stored in the browser’s local storage, so the data is saved even after a page refresh.

How to Build It:

1. HTML: The structure of the app is built using HTML, with a responsive layout for the holiday cards and modal dialogs.
2. CSS: Custom styles are added to ensure the app looks modern and sleek, with hover effects and smooth transitions for interactive elements.
3. JavaScript: JavaScript handles the logic for CRUD operations and managing the holiday data. It also uses localStorage to store the data persistently, so even after refreshing the page, the holidays are not lost.

Code Walkthrough:

Here’s a quick breakdown of the important code sections:

1. Modal for Adding Holidays

The app uses modals for adding and editing holiday details, ensuring a clean and minimal interface.

htmlCopyEdit<!-- Add Holiday Modal -->
<div class="modal fade" id="addHolidayModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="addHolidayForm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add Bank Holiday</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <!-- Form Fields -->
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

2. CRUD Operations with JavaScript

The app implements CRUD functionality using JavaScript. Here’s how we add a new holiday:

javascriptCopyEditdocument.getElementById("addHolidayForm").addEventListener("submit", function (event) {
  event.preventDefault();
  let date = document.getElementById("holidayDate").value;
  let name = document.getElementById("holidayName").value;
  let description = document.getElementById("holidayDesc").value;
  holidays.push({ date, name, description });
  localStorage.setItem("holidays", JSON.stringify(holidays));
  renderHolidays();
  document.getElementById("addHolidayForm").reset();
  $('#addHolidayModal').modal('hide');
});

3. Persisting Data with localStorage

The holidays are stored in localStorage, making them persistent even after the page is refreshed.

javascriptCopyEditlet holidays = JSON.parse(localStorage.getItem('holidays')) || [];

Interactive UI and Design:

To make the app visually appealing, we’ve used Bootstrap for a responsive layout and custom CSS for hover effects and smooth transitions. When a holiday is added or edited, the changes are reflected in real-time.

Here’s a simple hover effect for the holiday cards:

cssCopyEdit.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

Why Should You Build This App?

Creating this Bank Holiday Manager app will give you hands-on experience with:

• Frontend Development: Learn to create interactive, user-friendly web apps.
• Modals and Bootstrap: Master the use of modals and responsive layouts with Bootstrap.
• JavaScript Fundamentals: Enhance your skills in JavaScript, especially with DOM manipulation, events, and local storage.
• Real-World Application: This app can be extended further to suit various use cases, such as managing events or tasks.

Watch the Tutorial:

If you prefer to learn visually, here’s a video that explains the entire process step-by-step. Watch it to see how the Bank Holiday Manager is built from scratch.

Conclusion:

By the end of this tutorial, you’ll have a fully functional Bank Holiday Manager with a modern, responsive design. This project is a great starting point for learning CRUD operations and localStorage, while also improving your HTML, CSS, and JavaScript skills.

If you enjoyed this guide, be sure to check out the complete source code on GitHub and feel free to leave your feedback in the comments.

Code Repository:
You can access the full source code for this project on GitHub.

If you liked this post, don’t forget to like, comment, and subscribe for more exciting web development tutorials!