JavaScript Overview

Relevant source files

The following files were used as context for generating this wiki page:

• js/script.js
• js/submit-form.js
• properties.html
• contact.html
• about.html
• server.js
• css/custom.css

The Vandore Heritage website employs client-side JavaScript, primarily using the jQuery library, to create a dynamic and interactive user experience. The scripts are responsible for UI component behavior, form submissions, and dynamic content filtering. The frontend assets are served by a simple, lightweight Node.js static file server.

The JavaScript is organized into separate files based on functionality. script.js handles general UI interactions across the site, submit-form.js manages all form submissions, and js/custom.js (referenced in HTML files) appears to contain page-specific logic like the property filtering system. This modular approach separates global concerns from feature-specific implementations.

Core UI Enhancements (script.js)

This script manages common UI components and effects across the website. It uses jQuery to handle event listeners and DOM manipulation for features like navigation, tabbed content, and scroll-triggered animations.

Sources: js/script.js

Key Features

Feature	Description	Source
Header Glass Effect	Toggles a glass-effect class on the header when the user scrolls more than 100 pixels, creating a visual change.	js/script.js:12-17
Tab Switching	Handles clicks on .tab elements to show the corresponding content pane. It adds an active class to the selected tab and content.	js/script.js:20-29
Marquee Content	Clones content within .marquee-container elements to create a seamless, continuous scrolling effect.	js/script.js:32-38
Number Animation	Animates numbers from 0 to a target value when they scroll into the viewport. Uses requestAnimationFrame for smooth updates.	js/script.js:101-129
Hotspot Interaction	Displays an alert with text from a data-text attribute when a .hotspot element is clicked.	js/script.js:87-90
i18n Audit	A development utility that audits the DOM for text nodes missing data-i18n attributes and hides language-switching UI elements.	js/script.js:132-173

Tab Switching Logic

The following diagram illustrates the flow for switching between tabs, as seen on the "About Us" page for team members.

This logic is implemented using a delegated event listener on the document.
Sources: js/script.js:20-29, about.html:275-318

Number Animation on Scroll

The site uses a combination of a scroll event listener and requestAnimationFrame to animate numerical statistics when they become visible.

1. The checkScroll function is called on page load and on every scroll event.
2. It iterates through all elements with the class .number that have not yet been animated.
3. It checks if the element is within the viewport using getBoundingClientRect().
4. If visible, it calls animateNumber, passing the element, target value (from data-target), and duration (from data-duration).
5. animateNumber uses requestAnimationFrame to smoothly increment the number over the specified duration.

Sources: js/script.js:101-129

Form Submission (submit-form.js)

A centralized script handles submissions for all forms on the site, including the contact form and newsletter subscription forms. It uses a hidden action input to differentiate between form types.

Sources: js/submit-form.js, contact.html:313-345, about.html:381-396

Submission Flow

The script intercepts the submit event, performs validation, provides UI feedback, and simulates an asynchronous submission with a setTimeout function.

This sequence diagram shows the process for submitting the contact form.

Validation

• Standard Validation: The script leverages Bootstrap's built-in validation by checking this.checkValidity() and adding the was-validated class to show feedback.
  Sources: js/submit-form.js:12-15
• Email Validation: A helper function isValidEmail uses a regular expression to validate email formats. This is used for both the contact form and the real-time validation on newsletter input fields.
  Sources: js/submit-form.js:58-61, js/submit-form.js:70-81

Property Filtering System

The properties.html page features a sophisticated filtering system for property listings. The UI allows users to filter properties by location, price, and number of bedrooms. The implementation relies on data attributes in the HTML and is controlled by JavaScript, which is loaded via <script src="js/custom.js"></script>.

Sources: properties.html:206-384, css/custom.css:3-100

UI Components

Component	Description	Source
Filter Bar	A set of input fields and buttons for desktop users to define filter criteria.	properties.html:245-290
Filter Drawer	An off-canvas element (#filter-drawer) that provides the same filtering functionality for mobile users.	properties.html:211-244
Property Grid	The main container (#property-grid) holding all property cards. Each card is a .col element with data- attributes for filtering.	properties.html:296-384
Active Filters	A container (#filter-chips) to display the currently applied filters as "chips".	properties.html:292-294
Property Count	A span (#property-count) to display the number of results matching the filters.	properties.html:292-294
Empty State	A message (#empty-state) that is shown when no properties match the current filter selection.	properties.html:385-390

Filtering Logic Flow

The JavaScript logic (presumably in js/custom.js) reads the values from the filter inputs, applies them to the property grid, and updates the UI accordingly.

This flow is inferred from the structure of properties.html and the associated CSS in custom.css.
Sources: properties.html:206-390

Each property card in the grid has data attributes that the JavaScript uses for matching:

<div class="col mb-4" data-location="riga heritage lane" data-price="950000" data-bedrooms="4">
    <!-- Card content -->
</div>

Sources: properties.html:297, properties.html:319, properties.html:341

Server-Side Context (server.js)

The project includes a basic HTTP server written in Node.js. Its sole responsibility is to serve the static files (HTML, CSS, JS, images) that make up the website. It does not have any dynamic server-side rendering or complex API logic.

Sources: server.js

File Serving Logic

The server determines the correct MIME type for a requested file based on its extension and serves it. If a file is not found, it serves a custom 404.html page.

This diagram shows the request handling flow of the Node.js server.
Sources: server.js:25-60

The server uses a mimeTypes object to map file extensions to their corresponding Content-Type headers.

const mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.json': 'application/json',
  '.png': 'image/png',
  // ... and others
};

Sources: server.js:8-22