hovering-fnc.js

// SHOW TECHNOLOGY TEXT IN THE HERO SECTION WHEN HOVERING OVER THE ICON - START
/**
 * When hover over the icons in the hero section on the homepage, the title and subtitle
 * text changes with the appropriate text for that technology.
 *
 * @returns {void}
 */
const showHeroTextOnHover = () => {
	const techs = {
		php: {
			title: 'PHP Development',
			subTitle: 'PHP is one of the most popular development languages for web applications and is one of the core technologies we utilize at Guaranteed Software. Guaranteed Software is a full-service development agency backed by vast experience in working with enterprise-level clients.'
		},
		react: {
			title: 'React and React Native Development',
			subTitle: 'Develop dynamic and scalable real-time web applications with the industry standard JavaScript library designed to simplify the development process and improve the user experience.'
		},
		webflow: {
			title: 'WebFlow Development',
			subTitle: 'Develop dynamic and scalable real-time web applications with the industry standard JavaScript library designed to simplify the development process and improve the user experience.'
		},
		mongodb: {
			title: 'MongoDB Development',
			subTitle: 'MongoDB is an open-source object-oriented NoSQL database. It is simple, scalable and provides high performance as well as it is easy to implement and use.'
		},
		java: {
			title: 'Java Development',
			subTitle: 'Java is one of the most popular programming languages widely used for creating web and mobile applications, web portals, customized and enterprise software, games, etc.'
		},
		nodejs: {
			title: 'Node.js Development',
			subTitle: 'Develop dynamic and scalable real-time, data-intensive applications for multiple platforms to make them work fast and efficient.'
		},
		python: {
			title: 'Python Development',
			subTitle: 'Create web or mobile apps, CMS or even video games, with one of the most practical, widely popular solution on any scale.'
		},
		html5: {
			title: 'HTML5 Development',
			subTitle: 'HTML5 and CSS3 are the cornerstones of front-end development. HTML5 and CSS3 bring multiple advantages to the development process and help accelerate it and make it easier.'
		},
		mysql: {
			title: 'MySQL Development',
			subTitle: 'MySQL is an open source database management system and it’s the most popular solution used with PHP.'
		},
		woo: {
			title: 'WooCommerce Development',
			subTitle: 'Are you planning to launch a new online store? Do you already have a project you need to complete? Guaranteed Software can meet your needs.'
		},
		wordpress: {
			title: 'Wordpress Development',
			subTitle: 'Develop any type of website: publishing, e-commerce, SaaS, B2B, B2C, etc, with the no. 1 CMS worldwide.'
		},
		symfony: {
			title: 'Symfony Development',
			subTitle: 'Symfony is one of the most popular and widely used PHP frameworks. It comprises a set of useful components for the development of websites, portals and web applications.'
		},
		ios: {
			title: 'iOS Development',
			subTitle: 'iOS is a particularly popular operating system running across Apple mobile devices with a broad audience all over the world.'
		},
		angular: {
			title: 'Angular Development',
			subTitle: 'Develop dynamic and scalable real-time web applications with the industry standard JavaScript library designed to simplify the development process and improve the user experience.'
		},
		css3: {
			title: 'CSS3 Development',
			subTitle: 'HTML5 and CSS3 are the cornerstones of front-end development. HTML5 and CSS3 bring multiple advantages to the development process and help accelerate it and make it easier.'
		},
		android: {
			title: 'Android Development',
			subTitle: 'Android is definitely one of the most popular operating systems in the world of mobile technology as it has been around for over ten years.'
		},
		magento: {
			title: 'Magento Development',
			subTitle: 'Magento is one of the market leaders of the e-commerce platform segment. It’s increased popularity is due to several reasons such as a high degree of flexibility and a long market presence.'
		},
		laravel: {
			title: 'Laravel Development',
			subTitle: 'Create dynamic and high performing web applications with the widely popular PHP framework.'
		},
	}

	const icons = document.querySelectorAll("[id$='-hero-icon']");
	const heroTextSection = document.querySelector('.hero-text-section');
	const heroTextTitle = document.getElementById('homepage-hero-title-text');
	const heroTextSubtitle = document.getElementById('homepage-hero-subtext');

	/**
	 * Hides the hero text section through opacity, then after 300 ms (to simulate transition):
	 * 1. reset title and subtitle to the default values.
	 * 2. reveal hero text section through opacity.
	 */
	let showDefaultTextiInHeroSectionTimoutHandle;
	const showDefaultTextiInHeroSection = () => {
		heroTextSection.style.opacity = 0;
		showDefaultTextiInHeroSectionTimoutHandle = setTimeout(() => {
			heroTextTitle.innerText = 'Custom Software Development \
			at World Class Standards';
			heroTextSubtitle.innerText = 'Custom Solutions  |  Web Development  \
			|  Mobile Development  |  Cloud Solutions  |  Blockchain  |  IOT';
			heroTextSection.style.opacity = 1;
		}, 300); //simulates transition
	}

	// Associate the appropriate event listener to every icons.
	icons.forEach(icon => {
		// Hides default hero text, shows the text for the choosen technology,
		// and simulates a transition with the opacity.
		icon.addEventListener('mouseover', () => {
			clearTimeout(showDefaultTextiInHeroSectionTimoutHandle);
			icon.style.opacity = 1;
			heroTextSection.style.opacity = 0

			const tech = icon.dataset.tech;
			if (Object.keys(techs).includes(tech)) {
				setTimeout(() => {
					heroTextTitle.innerText = techs[tech].title;
					heroTextSubtitle.innerText = techs[tech].subTitle;
					heroTextSection.style.opacity = 1;
				}, 300);
			} else {
				showDefaultTextiInHeroSection();
			}
		});
		// Resets the hero text to the default value.
		icon.addEventListener('mouseout', showDefaultTextiInHeroSection);
	});
}
// Call the function to handle hovering over the icons.
showHeroTextOnHover();
// SHOW TECHNOLOGY TEXT IN THE HERO SECTION WHEN HOVERING OVER THE ICON - END