Ayhamalahmad / xwhloThree

To view the xwhloThree website, simply access the following link

Home Page:https://ayhamalahmad.github.io/xwhloThree/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

To visit the live version of the website, click here.

XwhloThree JavaScript Code

This JavaScript code is part of the XwhloThree web application. It contains various functions that handle user interactions, scrolling, counters, and a countdown timer.

Functionality

This JavaScript code provides the following functionality:

  1. Toggle Menu: The otherLinks element can be clicked to toggle the visibility of the menu (otherLinksMenu). It adds or removes the "open" class on the menu and the "opend" class on the otherLinksA element.

  2. Global Click Listener: A global click event listener ensures that when clicking outside the otherLinksMenu or otherLinks, the menu will close if it's currently open.

  3. Dynamic Year: The year in the .year element is dynamically updated to the current year using JavaScript.

  4. Smooth Scrolling: The scrollTo function allows smooth scrolling to different sections of the page when certain elements (MenuIl, Menua, GoDown, and [upBotton]) are clicked.

  5. Content Tab Switching: Clicking on elements in the tabsLi array switches the displayed content and adds the "active" class to the clicked element.

  6. Animated Counters: The startCountOnScroll and startCounter functions start counters when certain sections (number and spnanumber) are scrolled into view. The counters increment from 0 to a specified number with animation.

  7. Countdown Timer: The code sets a countdown timer to a specified end date (Feb 31, 2023 23:59:59). It updates the remaining days, hours, minutes, and seconds in the appropriate HTML elements.

Responsive and Mobile-Friendly Design

The XwhloThree website is designed to be responsive and mobile-friendly. It is optimized to provide a seamless user experience across various devices, including desktops, tablets, and smartphones. The layout adapts dynamically to different screen sizes, ensuring that users can easily navigate and interact with the web application on any device.

Beautiful and Minimalist Layout

The website boasts a beautiful and minimalist layout. It follows a clean design approach, focusing on essential elements and providing an uncluttered user interface. The minimalist design enhances user engagement and readability while emphasizing the functionality of the XwhloThree web application.

About

To view the xwhloThree website, simply access the following link

https://ayhamalahmad.github.io/xwhloThree/


Languages

Language:CSS 49.1%Language:HTML 46.1%Language:JavaScript 4.9%