Initial commit: Add all website files

sources/js/main.js

@@ -0,0 +1,19 @@
+import { attachHeaderHandlers } from './modules/headerManipulate.js';
+import { currentNavButtonHighlighter } from './modules/currentNavButtonHighlighter.js';
+import { dropdownToggle } from './modules/dropdownToggle.js';
+import { videoPlaybackManager } from './modules/videoPlaybackManager.js';
+import { bookingSearchHandler } from './modules/bookingSearchHandler.js';
+import { imageGalleryHandler } from './modules/imageGalleryHandler.js';
+import { arabicTranslation } from './translations/arabicTranslation.js';
+
+document.addEventListener('DOMContentLoaded', main);
+
+function main() {
+  attachHeaderHandlers();
+  currentNavButtonHighlighter();
+  dropdownToggle();
+  videoPlaybackManager();
+  bookingSearchHandler();
+  imageGalleryHandler();
+  arabicTranslation();
+}

sources/js/modules/bookingSearchHandler.js

@@ -0,0 +1,128 @@
+import { checkVariables } from '../utils/checkVariables.js';
+//booking- search bar - start:
+export const bookingSearchHandler = () => {
+  const searchForm = document.getElementById('search-bar-form');
+  const checkInDate = document.getElementById('check-in');
+  const checkOutDate = document.getElementById('check-out');
+  const numberOfVillas = document.getElementById('villas');
+
+  checkVariables(
+    'booking search',
+    searchForm,
+    checkInDate,
+    checkOutDate,
+    numberOfVillas,
+  );
+
+  //validate inputs
+  let checkFlag = false;
+  let firstCheckFlag = false;
+  let secondCheckFlag = false;
+
+  (() => {
+    //checks if the order of dates logical
+    const datesValidate = (event) => {
+      if (!checkInDate.value || !checkOutDate.value) {
+        return;
+      }
+
+      const inDate = new Date(checkInDate.value);
+      const outDate = new Date(checkOutDate.value);
+
+      if (inDate < outDate) {
+        event.target.style.color = '';
+        firstCheckFlag = true;
+        console.log('first true');
+      } else {
+        window.alert('Check out date cannot be earlier than check in date!');
+        event.target.style.color = 'red';
+        firstCheckFlag = false;
+      }
+    };
+
+    //checks if the number on the limit
+    const numberValidate = (event) => {
+      const villasNumber = numberOfVillas.value;
+      const regEx = /^[1-9]$/;
+      if (regEx.test(villasNumber)) {
+        event.target.style.color = '';
+        secondCheckFlag = true;
+        console.log('second true');
+      } else {
+        window.alert('Enter a number between 1 and 9!');
+        event.target.style.color = 'red';
+        secondCheckFlag = false;
+      }
+    };
+
+    //set the date picker to today or later, earlier not allowed
+
+    const setMinDate = () => {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, '0');
+      const day = String(today.getDate()).padStart(2, '0');
+
+      const minDate = `${year}-${month}-${day}`;
+
+      checkInDate.setAttribute('min', minDate);
+      checkOutDate.setAttribute('min', minDate);
+    };
+
+    window.addEventListener('load', setMinDate);
+    numberOfVillas.addEventListener('change', numberValidate);
+    checkInDate.addEventListener('change', datesValidate);
+    checkOutDate.addEventListener('change', datesValidate);
+  })();
+
+  const searchBooking = (event) => {
+    event.preventDefault();
+
+    checkFlag = firstCheckFlag && secondCheckFlag;
+    console.log(firstCheckFlag);
+    console.log(secondCheckFlag);
+    console.log(checkFlag);
+    if (!checkFlag) {
+      window.alert('Some of the search bar fields are empty or wrong');
+      event.preventDefault();
+      return;
+    }
+    const availableVillas = document.getElementById('available-villas');
+    const searchResult = document.getElementById('search-result');
+    const tableRows = searchResult.getElementsByTagName('tr');
+
+    checkVariables('booking search', availableVillas, searchResult, tableRows);
+
+    const inDate = new Date(checkInDate.value);
+    const outDate = new Date(checkOutDate.value);
+    const villasNumber = numberOfVillas.value;
+
+    const totalDays = (outDate - inDate) / (1000 * 60 * 60 * 24);
+    const priceDayVilla = 200;
+    const totalPrice = priceDayVilla * villasNumber * totalDays;
+    const discountRate = 0.005 * Math.round(villasNumber * 0.5) * totalDays;
+    const offerPrice = Math.floor(totalPrice - discountRate * totalPrice);
+
+    availableVillas.innerText = villasNumber;
+    availableVillas.innerHTML = villasNumber;
+
+    tableRows[0].children[1].innerText = inDate.toDateString();
+    tableRows[1].children[1].innerText = outDate.toDateString();
+    tableRows[2].children[1].innerText = totalDays;
+    tableRows[3].children[1].innerText = villasNumber;
+    tableRows[4].children[1].innerText = `$${priceDayVilla}`;
+    tableRows[5].children[1].innerText = `$${totalPrice}`;
+    tableRows[6].children[1].innerText = `$${offerPrice}`;
+
+    if (searchResult.style.display !== 'grid') {
+      searchResult.style.display = 'grid';
+    } else {
+      searchResult.style.display = 'none';
+      const wait = setTimeout(() => {
+        searchResult.style.display = 'grid';
+      }, 500);
+    }
+  };
+  searchForm.addEventListener('submit', searchBooking);
+};
+/*end - booking- search bar*/

sources/js/modules/currentNavButtonHighlighter.js

@@ -0,0 +1,41 @@
+import { checkVariables } from '../utils/checkVariables.js';
+
+//current nav button - start:
+export const currentNavButtonHighlighter = () => {
+  const pageSections = document.querySelectorAll('main > div'); // ERROR CHANGED TO div from section based on w3 html validation warning
+  const navButtons = document.querySelectorAll('nav li');
+  checkVariables('current navigation button', pageSections, navButtons);
+
+  const changeCurrent = (event) => {
+    const viewLocation = window.scrollY;
+    //runs the code for every section
+    pageSections.forEach((section, index) => {
+      if (index === 1 || index === 2) return; //ERROR was not added
+      const sectionTop = section.offsetTop - 10; // the number for header height
+      const sectionBottom =
+        index > 0 //the first section is in 2 containers
+          ? sectionTop + section.offsetHeight
+          : sectionTop +
+            section.offsetHeight +
+            document.getElementById('home-rest').offsetHeight;
+
+      //if the section is in view, it removes 'current' class from every button and the add it to the one that matches the section
+      if (viewLocation > sectionTop && viewLocation < sectionBottom) {
+        navButtons.forEach((button) => {
+          button.classList.remove('current');
+
+          const buttonHref = button.firstElementChild
+            .getAttribute('href')
+            .replace('#', '');
+
+          if (section.id === buttonHref) {
+            button.classList.add('current');
+          }
+        });
+      }
+    });
+  };
+  window.addEventListener('scroll', changeCurrent);
+  window.addEventListener('hashchange', changeCurrent);
+};
+/*end - current nav button*/

sources/js/modules/dropdownToggle.js

@@ -0,0 +1,59 @@
+import { checkVariables } from '../utils/checkVariables.js';
+import { headerManipulate } from './headerManipulate.js';
+
+//dropdown menu - start:
+/*display based on click*/
+export const dropdownToggle = () => {
+  const hamburgerButton = document.getElementById('hamburger-button');
+  const closeButton = document.getElementById('close-button');
+  const dropdownContainer = document.getElementById('dropdown-container');
+  const overlay = document.getElementById('overlay');
+  const header = document.getElementById('header');
+  if (
+    !checkVariables(
+      'dropdownMenu',
+      hamburgerButton,
+      closeButton,
+      dropdownContainer,
+      overlay,
+      header,
+    )
+  )
+    return;
+
+  const showDropdown = (event) => {
+    event.stopPropagation();
+
+    hamburgerButton.classList.add('hide');
+    closeButton.classList.add('show');
+    dropdownContainer.classList.add('show');
+    overlay.classList.toggle('show');
+    header.classList.add('primaryColor');
+
+    window.removeEventListener('scroll', headerManipulate);
+  };
+
+  const closeDropdown = (event) => {
+    if (
+      dropdownContainer.classList.contains('show') &&
+      (event.type === 'resize' ||
+        event.type === 'hashchange' ||
+        !dropdownContainer.contains(event.target))
+    ) {
+      hamburgerButton.classList.remove('hide');
+      closeButton.classList.remove('show');
+      dropdownContainer.classList.remove('show');
+      overlay.classList.toggle('show');
+      header.classList.remove('primaryColor');
+
+      window.addEventListener('scroll', headerManipulate);
+      headerManipulate();
+    }
+  };
+
+  hamburgerButton.addEventListener('click', showDropdown);
+  window.addEventListener('click', closeDropdown);
+  window.addEventListener('resize', closeDropdown);
+  window.addEventListener('hashchange', closeDropdown);
+};
+/*end - dropdown menu */

sources/js/modules/headerManipulate.js

@@ -0,0 +1,61 @@
+import { checkVariables } from '../utils/checkVariables.js';
+
+//header - start:
+/*style & display header based on its position relative to the whole page*/
+export const headerManipulate = () => {
+  const header = document.getElementById('header');
+  const footer = document.querySelector('#footer');
+  const logo = document.getElementById('logo');
+  const firstContainerH1 =
+    document.querySelector('.container:first-of-type>h1') ||
+    document.querySelector('main').children[1];
+  const windowHeight = window.innerHeight;
+  const scrollPosition = window.scrollY;
+  const heading1stPosition = firstContainerH1.offsetTop;
+  const footerPosition = footer.offsetTop;
+  if (
+    !checkVariables(
+      headerManipulate,
+      header,
+      footer,
+      logo,
+      firstContainerH1,
+      windowHeight,
+      scrollPosition,
+      heading1stPosition,
+      footerPosition,
+    )
+  )
+    return;
+
+  header.classList.add('transition');
+  //first area near the header
+
+  if (scrollPosition < heading1stPosition - 0.3 * windowHeight) {
+    header.classList.remove('hide');
+    header.classList.remove('primaryColor');
+    header.classList.remove('justify');
+    logo.classList.remove('hide');
+  }
+  //middle area - the numbers are different to prevent a rapid change when the user keeps moving around the threshold
+  else if (
+    scrollPosition > heading1stPosition - 0.2 * windowHeight &&
+    scrollPosition < footerPosition - windowHeight
+  ) {
+    header.classList.remove('hide');
+    logo.classList.add('hide');
+    header.classList.add('primaryColor');
+    header.classList.add('justify');
+  }
+  //last area near the footer
+  else if (scrollPosition > footerPosition - windowHeight) {
+    header.classList.add('hide');
+  }
+};
+
+export const attachHeaderHandlers = () => {
+  window.addEventListener('scroll', headerManipulate);
+  window.addEventListener('resize', headerManipulate);
+  window.addEventListener('load', headerManipulate);
+};
+/*end - header*/