Skip to main content

​
Overview

The main application script (script.js) handles the core functionality of the Movie Nachos website, including cookie notifications, responsive navigation, newsletter subscriptions, and contact form submissions.
All functionality is initialized when the DOM is fully loaded using the DOMContentLoaded event listener.
The application uses localStorage to persist cookie acceptance preferences.

​
Implementation

const closeCookieBtn = document.getElementById('closeCookie');
const acceptCookieBtn = document.getElementById('acceptCookie');
const cookieNotification = document.getElementById('cookieNotification');

if (localStorage.getItem('cookie_accepted') != 'true') {
    cookieNotification.style.display = "block";
}

closeCookieBtn.addEventListener('click', function () {
    cookieNotification.style.display = "none"
});

acceptCookieBtn.addEventListener('click', function () {
    localStorage.setItem('cookie_accepted', 'true');
    cookieNotification.style.display = "none"
});

​
Behavior

  • Displays cookie notification if user hasn’t accepted cookies
  • Stores acceptance in localStorage with key cookie_accepted
  • Provides options to close or accept the notification
The cookie notification will reappear on subsequent visits until the user clicks “Accept”.

​
Responsive Menu

Toggle functionality for mobile navigation menu using a burger icon.

​
Implementation

const burgerMenu = document.getElementById('burger-menu');
const menuLinks = document.getElementById('menu-links');
const burgerIcon = burgerMenu.querySelector('i');

burgerMenu.addEventListener('click', function () {
    menuLinks.classList.toggle("show-menu");
    burgerIcon.classList.toggle('fa-times');
    burgerIcon.classList.toggle('fa-bars');
});

​
Features

  • Toggles menu visibility with show-menu class
  • Switches burger icon between bars (☰) and close (×) states
  • Uses Font Awesome icons for visual feedback

​
Newsletter Subscription

Handles email subscriptions and stores them in localStorage.

​
Implementation

const subscribeForm = document.getElementById('subscribe-form');
const subscribeConfirmation = document.getElementById('successully-subscribed');

subscribeForm.addEventListener('submit', function (e) {
    e.preventDefault()
    let email = e.target.elements.email.value;

    // Retrieve subscribed_emails from local storage
    let subscribed_emails = JSON.parse(localStorage.getItem('subscribed_emails')) || [];
    subscribed_emails.push(email);

    // Save email into local storage
    localStorage.setItem('subscribed_emails', JSON.stringify(subscribed_emails));
    subscribeConfirmation.style.display = "block";
    
    // Clear all form inputs
    subscribeForm.reset();
});

​
localStorage Structure

{
  "subscribed_emails": ["[email protected]", "[email protected]"]
}
This implementation stores emails in the browser’s localStorage without validation. In production, you should add email validation and send data to a backend service.

​
Contact Form

Processes contact messages and saves them locally.

​
Implementation

const contactUsForm = document.getElementById('contact-us-form');
const messageSentConfirmation = document.getElementById('message-sent');

contactUsForm.addEventListener('submit', function (e) {
    e.preventDefault()
    let email = e.target.elements.email.value;
    let message = e.target.elements.message.value;

    // Retrieve all messages from local storage
    let messages = JSON.parse(localStorage.getItem('messages')) || [];
    messages.push({ email: email, message: message});

    // Save email and message into local storage
    localStorage.setItem('messages', JSON.stringify(messages));
    messageSentConfirmation.style.display = "block";
    
    // Clear all form inputs
    contactUsForm.reset();
});

​
localStorage Structure

{
  "messages": [
    {
      "email": "[email protected]",
      "message": "Great website!"
    }
  ]
}
All forms use preventDefault() to stop default form submission and handle data client-side.

​
localStorage Keys Reference

KeyTypeDescription
cookie_acceptedStringStores ‘true’ when user accepts cookies
subscribed_emailsArrayList of subscribed email addresses
messagesArrayContact form submissions with email and message

​
Event Listeners

All event listeners are registered within the DOMContentLoaded callback:
  • Cookie buttons: Close and accept cookie notification
  • Burger menu: Toggle mobile navigation
  • Subscribe form: Handle newsletter subscriptions
  • Contact form: Process contact messages

​
Actors Column Height Utility

The actors.js utility script manages the responsive height of the actors column on the homepage to match the popular movies section.

​
Implementation

// Call the function when the page loads
window.addEventListener("load", setRightColumnHeight);

// Call the function when the window is resized
window.addEventListener("resize", setRightColumnHeight);

function setRightColumnHeight() {
    const leftColumn = document.querySelector('.popular-movies');
    const rightColumn = document.querySelector('.actors');
    
    rightColumn.style.maxHeight = (leftColumn.offsetHeight - 10) + "px";
}

​
Functionality

This script ensures the actors sidebar on the homepage stays aligned with the popular movies grid by:
  1. On page load: Sets initial height after content is rendered
  2. On window resize: Recalculates height when viewport changes
  3. Dynamic calculation: Matches left column height minus 10px spacing
The 10px offset accounts for padding or spacing to prevent overflow issues.
  • Main script reference: script.js:1-71
  • Actors utility reference: scripts/actors.js:1-12

Build docs developers (and LLMs) love

Get started for freeTalk to us