In this project, we will build a message pop-up modal using JavaScript and Tailwind CSS. This project is part of my "Learn Web Development From the Beginning" series, where we progressively create real-world projects with HTML, CSS, JavaScript, and Tailwind.

🔥 Become a channel member and get full access to all my web development courses: https://www.youtube.com/playlist?list=UUMOx8iaEliW-CFrS0t9KHisTw

📚GET ULTIMATE COURSES BUNDLES: https://norbert-bm-s-school.teachable.com/

You’ll learn how to:

* Create a hidden modal

* Toggle modal visibility with JavaScript

* Send and validate a message input

* Close the modal when clicking outside or on a cancel button

Step 1: Set Up the Basic Project Structure

* Create a new folder for your project.

* Inside, create:

* index.html

* style.css (optional if you want custom styles)

* script.js

* Link TailwindCSS via CDN in your HTML file.

Message Modal

Step 2: Build the Modal Structure (HTML)

Create the modal structure inside the . Initially, the modal should be hidden.

<button class="bg-blue-600 text-white p-2 rounded hover:bg-blue-700" id="message-button">
Open Message Modal
</button>

Step 3: Handle the Modal with JavaScript

In script.js, write the logic to open, close, and send messages.

// Select Elements
const modal = document.getElementById('modal');
const messageButton = document.getElementById('message-button');
const sendButton = document.getElementById('send-button');
const closeButton = document.getElementById('close-button');
const messageInput = document.getElementById('modal-input');

// Toggle Modal Visibility
function toggleModal() {
modal.classList.toggle('hidden');
}

// Open Modal
messageButton.addEventListener('click', toggleModal);

// Close Modal on Cancel
closeButton.addEventListener('click', toggleModal);

// Close Modal When Clicking Outside
modal.addEventListener('click', function (event) {
if (event.target === modal) {
toggleModal();
}
});

// Send Message
sendButton.addEventListener('click', function () {
if (messageInput.value.trim() === '') {
alert('Please enter a message.');
return;
}
alert(`Message sent: ${messageInput.value}`);
messageInput.value = ''; // Clear input
toggleModal(); // Close modal
});

Step 4: (Optional) Enable Dark Mode Toggle

Add a dark mode toggle button if you want to enable Tailwind’s dark mode classes dynamically.

Final Result

* Click the "Open Message Modal" button ➔ Modal opens.

* Type a message and click Send ➔ Shows an alert and closes the modal.

* Click Cancel or click outside the modal ➔ Closes the modal.

Congratulations! 🎉 You now have a fully functioning, stylish message modal!

Complete Source Code: https://github.com/NorbertBM/learn-web-development-for-beginners-.git