SCRIPT IN WEBPAGE

[ this funtion is visible in all the pages except for, { how to get to lallo, lallo attractions, lallo
accomodations, and cabibi pages} ]

Function updateDateTime()

This function updates the date and time displayed on the page.

1. const now = new Date();: Creates a new Date object, which represents the current date and time.
2. const options = { ... };: Defines an object options that specifies the format of the date and time string. The
properties of the object are:
 weekday: specifies the weekday (e.g., "Monday", "Tuesday", etc.)
 year: specifies the year (e.g., "2023")
 month: specifies the month (e.g., "January", "February", etc.)
 day: specifies the day of the month (e.g., "1", "2", etc.)
 hour: specifies the hour in 24-hour format (e.g., "14", "15", etc.)
 minute: specifies the minute (e.g., "30", "45", etc.)
 second: specifies the second (e.g., "00", "15", etc.)
3. const dateTimeString = now.toLocaleString('en-US', options);: Uses the toLocaleString() method to
format the now date object according to the options object. The en-US parameter specifies the locale to use for formatting
(in this case, English, United States).
4. document.getElementById('date-time').innerText = dateTimeString;: Sets the inner text of an HTML element
with the ID date-time to the formatted date and time string dateTimeString.

Calling the updateDateTime() function

The script calls the updateDateTime() function once, which updates the date and time displayed on the
page.

In summary, this script updates the date and time displayed on the page by formatting the current date
and time using the toLocaleString() method and setting the inner text of an HTML element with the
ID date-time to the formatted string.

Form Submission Confirmation

The first part of the script adds an event listener to the submit event of the first form element on the page.

1. document.querySelector('form').addEventListener('submit', function(event) {...});: Selects the

first form element on the page and adds an event listener to its submit event. The event listener function is
called when the form is submitted.
2. event.preventDefault();: Prevents the default form submission behavior, which would normally send the
form data to the server and reload the page.
3. var confirmation = confirm('Are you sure you want to submit this form?');: Displays a confirmation
dialog box with the message "Are you sure you want to submit this form?". The confirm() function
returns true if the user clicks "OK" and false if they click "Cancel".
4. if (confirmation) {...}: Checks if the user confirmed the action. If they did:
 alert('Form submitted!');: Displays an alert box with the message "Form submitted!".
5. else {...}: If the user cancelled the action:
 alert('Form submission cancelled.');: Displays an alert box with the message "Form submission
cancelled.".
 SCRIPT IN WEBPAGE
Scroll-based Table Container Styling

The second part of the script adds an event listener to the scroll event of the window object.

1. const tableContainer = document.querySelector('.table-container');: Selects the first element with the

class table-container on the page.
2. window.addEventListener('scroll', () => {...});: Adds an event listener to the scroll event of
the window object. The event listener function is called whenever the user scrolls the page.
3. const scrollPosition = window.scrollY;: Gets the current scroll position of the page (i.e., how far down
the user has scrolled).
4. const tableContainerTop = tableContainer.offsetTop;: Gets the top offset of
the tableContainer element (i.e., its distance from the top of the page).
5. const tableContainerHeight = tableContainer.offsetHeight;: Gets the height of
the tableContainer element.
6. if (scrollPosition >= tableContainerTop - tableContainerHeight / 2) {...}: Checks if the user has
scrolled far enough down the page to reach the middle of the tableContainer element. If they have:
 tableContainer.classList.add('scrolled');: Adds the class scrolled to the tableContainer element.

7. else {...}: If the user has not scrolled far enough down the page:
 tableContainer.classList.remove('scrolled');: Removes the class scrolled from
the tableContainer element.

In summary, this script:

1. Adds a confirmation dialog box to the form submission process.

2. Styles the tableContainer element based on the user's scroll position. When the user scrolls far enough
down the page to reach the middle of the tableContainer element, the script adds the class scrolled to the
element. When the user scrolls back up, the script removes the class.

JAvascript [transparency, about lallo, and servces page] [ajay buttons ti adda java na]

This script is used to create a simple tabbed interface, where clicking on a button reveals a corresponding
section of content. Here's a breakdown of how it works:

Selecting elements

The script selects two sets of elements:

1. const buttons = document.querySelectorAll('button');: Selects all button elements on the page.

2. const sections = document.querySelectorAll('.section');: Selects all elements with the
class section on the page.

Adding event listeners

The script then adds an event listener to each button:

1. buttons.forEach((button, index) => {...});: Loops through each button and adds an event listener to
its click event. The index variable keeps track of the current button's index in the array.
2. button.addEventListener('click', () => {...});: Adds an event listener to the button's click event.

Hiding and showing sections

When a button is clicked, the event listener function is called, which:

 SCRIPT IN WEBPAGE

1. sections.forEach((section) => { section.style.display = 'none'; });: Hides all sections by setting

their display style to none.
2. sections[index].style.display = 'block';: Shows the section corresponding to the clicked button by
setting its display style to block. The index variable is used to select the correct section.

How it works

Here's an example of how this script would work:

isInViewport function

This function checks if an element is within the viewport (i.e., visible on the screen). It takes an element as
an argument and returns a boolean value indicating whether the element is in the viewport.

Here's how it works:

1. const rect = element.getBoundingClientRect();: Gets the bounding rectangle of the element, which
contains information about the element's position and size.
2. The function then checks four conditions to determine if the element is in the viewport:
 rect.top >= 0: The top edge of the element is above the top edge of the viewport.
 rect.left >= 0: The left edge of the element is to the right of the left edge of the viewport.
 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight): The bottom edge of
the element is below the bottom edge of the viewport.
 rect.right <= (window.innerWidth || document.documentElement.clientWidth): The right edge of the
element is to the left of the right edge of the viewport.
3. If all conditions are true, the function returns true, indicating that the element is in the viewport.

handleIntersection function

This function is a callback that will be called whenever an observed element intersects with the viewport. It
takes two arguments: entries and observer.

Here's what it does:

1. entries.forEach(entry => {...});: Loops through each entry in the entries array.
2. For each entry, it checks if the element is intersecting with the viewport ( entry.isIntersecting).
 If it is, it sets the element's visibility style to visible.
 If not, it sets the element's visibility style to hidden.

3. It also sets an animation style on the element using entry.target.style.animation = "slow 1.5s ease-in-
out";.

IntersectionObserver options

The script defines an options object for the IntersectionObserver:

1. root: null: The root element for the observer. In this case, it's set to null, which means the observer will
use the viewport as the root.
2. rootMargin: '0px': The margin around the root element. In this case, it's set to 0px, which means there's no
margin.
3. threshold: 0.3: The threshold value determines when the observer should trigger the callback. In this case,
it's set to 0.3, which means the callback will be triggered when the element is at least 30% visible in the
viewport.
 SCRIPT IN WEBPAGE
Creating the IntersectionObserver

The script creates a new IntersectionObserver instance, passing the handleIntersection function and
the options object as arguments.

Observing elements

The script selects all elements with the class card using document.querySelectorAll('.card'). It then loops
through each card element and adds it to the observer using observer.observe(card).

In summary, this script uses the IntersectionObserver API to observe a set of elements (cards) and trigger a
callback function when they intersect with the viewport. The callback function sets the element's visibility
and animation styles based on whether it's intersecting with the viewport.

Script to modify the page when opened using a button:

Script to animate an image on scroll:
Script to update date and time:
Script to handle form submission:
Script to handle table container scrolling:
Script to handle button clicks and show corresponding sections:
Script to handle IntersectionObserver: