From bbedbd1bb02aefa4d6378a6d3045f5ec0447b423 Mon Sep 17 00:00:00 2001 From: Derrick Daniel Mwikyo <50372816+mwikyo@users.noreply.github.com> Date: Sun, 10 Nov 2024 02:46:25 +0300 Subject: [PATCH] Update main.js --- assets/js/main.js | 110 +++++++++++++++++++++++----------------------- 1 file changed, 54 insertions(+), 56 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 1e7c9ed..d8e0cfb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -5,65 +5,65 @@ * Easy selector helper function */ const select = (el, all = false) => { - el = el.trim() + el = el.trim(); if (all) { - return [...document.querySelectorAll(el)] + return [...document.querySelectorAll(el)]; } else { - return document.querySelector(el) + return document.querySelector(el); } - } + }; /** * Easy event listener function */ const on = (type, el, listener, all = false) => { - let selectEl = select(el, all) + let selectEl = select(el, all); if (selectEl) { if (all) { - selectEl.forEach(e => e.addEventListener(type, listener)) + selectEl.forEach(e => e.addEventListener(type, listener)); } else { - selectEl.addEventListener(type, listener) + selectEl.addEventListener(type, listener); } } - } + }; /** * Easy on scroll event listener */ const onscroll = (el, listener) => { - el.addEventListener('scroll', listener) - } + el.addEventListener('scroll', listener); + }; /** * Navbar links active state on scroll */ - let navbarlinks = select('#navbar .scrollto', true) + let navbarlinks = select('#navbar .scrollto', true); const navbarlinksActive = () => { - let position = window.scrollY + 200 + let position = window.scrollY + 200; navbarlinks.forEach(navbarlink => { - if (!navbarlink.hash) return - let section = select(navbarlink.hash) - if (!section) return + if (!navbarlink.hash) return; + let section = select(navbarlink.hash); + if (!section) return; if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { - navbarlink.classList.add('active') + navbarlink.classList.add('active'); } else { - navbarlink.classList.remove('active') + navbarlink.classList.remove('active'); } - }) - } - window.addEventListener('load', navbarlinksActive) - onscroll(document, navbarlinksActive) + }); + }; + window.addEventListener('load', navbarlinksActive); + onscroll(document, navbarlinksActive); /** * Scrolls to an element with header offset */ const scrollto = (el) => { - let elementPos = select(el).offsetTop + let elementPos = select(el).offsetTop; window.scrollTo({ top: elementPos, behavior: 'smooth' - }) - } + }); + }; /** * Form Submission @@ -71,59 +71,58 @@ $('#myForm').on('submit', function(e) { $('#myForm *').fadeOut(2000); $('#myForm').prepend('
Your submission has been processed...
'); - - }); + }); /** * Back to top button */ - let backtotop = select('.back-to-top') + let backtotop = select('.back-to-top'); if (backtotop) { const toggleBacktotop = () => { if (window.scrollY > 100) { - backtotop.classList.add('active') + backtotop.classList.add('active'); } else { - backtotop.classList.remove('active') + backtotop.classList.remove('active'); } - } - window.addEventListener('load', toggleBacktotop) - onscroll(document, toggleBacktotop) + }; + window.addEventListener('load', toggleBacktotop); + onscroll(document, toggleBacktotop); } /** * Mobile nav toggle */ on('click', '.mobile-nav-toggle', function(e) { - select('body').classList.toggle('mobile-nav-active') - this.classList.toggle('bi-list') - this.classList.toggle('bi-x') - }) + select('body').classList.toggle('mobile-nav-active'); + this.classList.toggle('bi-list'); + this.classList.toggle('bi-x'); + }); /** - * Scrool with ofset on links with a class name .scrollto + * Scroll with offset on links with a class name .scrollto */ on('click', '.scrollto', function(e) { if (select(this.hash)) { - e.preventDefault() + e.preventDefault(); - let body = select('body') + let body = select('body'); if (body.classList.contains('mobile-nav-active')) { - body.classList.remove('mobile-nav-active') - let navbarToggle = select('.mobile-nav-toggle') - navbarToggle.classList.toggle('bi-list') - navbarToggle.classList.toggle('bi-x') + body.classList.remove('mobile-nav-active'); + let navbarToggle = select('.mobile-nav-toggle'); + navbarToggle.classList.toggle('bi-list'); + navbarToggle.classList.toggle('bi-x'); } - scrollto(this.hash) + scrollto(this.hash); } - }, true) + }, true); /** - * Scroll with ofset on page load with hash links in the url + * Scroll with offset on page load with hash links in the url */ window.addEventListener('load', () => { if (window.location.hash) { if (select(window.location.hash)) { - scrollto(window.location.hash) + scrollto(window.location.hash); } } }); @@ -134,17 +133,17 @@ let preloader = select('#preloader'); if (preloader) { window.addEventListener('load', () => { - preloader.remove() + preloader.remove(); }); } /** * Hero type effect */ - const typed = select('.typed') + const typed = select('.typed'); if (typed) { - let typed_strings = typed.getAttribute('data-typed-items') - typed_strings = typed_strings.split(',') + let typed_strings = typed.getAttribute('data-typed-items'); + typed_strings = typed_strings.split(','); new Typed('.typed', { strings: typed_strings, loop: true, @@ -163,7 +162,7 @@ easing: 'ease-in-out', once: true, mirror: false - }) + }); }); /** @@ -176,10 +175,9 @@ */ const blogArticles = [ { - title: "Download Youtube Videos", - description: "Download YouTube videos through the terminal using a bash script.", - image: "assets/img/blog/image1.jpg", // Replace with your image path - link: "https://medium.com/@mwikyo/download-youtube-videos-through-the-terminal-using-a-bash-script-205b21161339" + title: "Understanding Systems Reliability Engineering", + description: "Exploring the principles of SRE, from monitoring to automation.", + link: "https://medium.com/example1" }, { title: "Web Development Essentials",