fixed formatting in main.js
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
		
							parent
							
								
									b5f4bb0687
								
							
						
					
					
						commit
						5e2d42b409
					
				
							
								
								
									
										154
									
								
								src/js/main.js
									
									
									
									
									
								
							
							
						
						
									
										154
									
								
								src/js/main.js
									
									
									
									
									
								
							@ -2,84 +2,94 @@
 | 
			
		||||
const scrollLimit = 150;
 | 
			
		||||
window.onscroll = () =>
 | 
			
		||||
{
 | 
			
		||||
	// check if scrolled past limit if so add scrolled class to change background of nav
 | 
			
		||||
	if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
 | 
			
		||||
	{
 | 
			
		||||
		document.querySelector("nav").classList.add("scrolled");
 | 
			
		||||
	}
 | 
			
		||||
	else
 | 
			
		||||
	{
 | 
			
		||||
		document.querySelector("nav").classList.remove("scrolled");
 | 
			
		||||
	}
 | 
			
		||||
    // check if scrolled past limit if so add scrolled class to change background of nav
 | 
			
		||||
    if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
 | 
			
		||||
    {
 | 
			
		||||
        document.querySelector("nav").classList.add("scrolled");
 | 
			
		||||
    }
 | 
			
		||||
    else
 | 
			
		||||
    {
 | 
			
		||||
        document.querySelector("nav").classList.remove("scrolled");
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
	let current = ""; //id of current section scrolled to, set to "" if at top
 | 
			
		||||
	// go through all sections and find current section id scrolled to
 | 
			
		||||
	document.querySelectorAll("section").forEach((section) =>
 | 
			
		||||
	{
 | 
			
		||||
		const sectionTop = section.offsetTop;
 | 
			
		||||
		if (window.pageYOffset >= sectionTop - 60)
 | 
			
		||||
		{
 | 
			
		||||
			current = section.getAttribute("id");
 | 
			
		||||
		}
 | 
			
		||||
	});
 | 
			
		||||
    let current = ""; //id of current section scrolled to, set to "" if at top
 | 
			
		||||
    // go through all sections and find current section id scrolled to
 | 
			
		||||
    document.querySelectorAll("section").forEach((section) =>
 | 
			
		||||
    {
 | 
			
		||||
        const sectionTop = section.offsetTop;
 | 
			
		||||
        if (window.pageYOffset >= sectionTop - 60)
 | 
			
		||||
        {
 | 
			
		||||
            current = section.getAttribute("id");
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
	// go through all nav links, remove active class and add it to the link whose href matches the current id scrolled
 | 
			
		||||
	// to
 | 
			
		||||
	document.querySelectorAll("nav ul li a").forEach((a) =>
 | 
			
		||||
	{
 | 
			
		||||
		a.classList.remove("active");
 | 
			
		||||
		if (a.href.includes(current) && current !== "")
 | 
			
		||||
		{
 | 
			
		||||
			a.classList.add("active");
 | 
			
		||||
		}
 | 
			
		||||
		else if (current === "")
 | 
			
		||||
		{
 | 
			
		||||
			document.querySelector("nav ul li a").classList.add("active"); // at the top
 | 
			
		||||
		}
 | 
			
		||||
	});
 | 
			
		||||
    // go through all nav links, remove active class and add it to the link whose href matches the current id scrolled
 | 
			
		||||
    // to
 | 
			
		||||
    document.querySelectorAll("nav ul li a").forEach((a) =>
 | 
			
		||||
    {
 | 
			
		||||
        a.classList.remove("active");
 | 
			
		||||
        if (a.href.includes(current) && current !== "")
 | 
			
		||||
        {
 | 
			
		||||
            a.classList.add("active");
 | 
			
		||||
        }
 | 
			
		||||
        else if (current === "")
 | 
			
		||||
        {
 | 
			
		||||
            document.querySelector("nav ul li a").classList.add("active"); // at the top
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
document.addEventListener('DOMContentLoaded', () =>
 | 
			
		||||
document.addEventListener("DOMContentLoaded", () =>
 | 
			
		||||
{
 | 
			
		||||
	// array with texts to type in typewriter
 | 
			
		||||
	var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
 | 
			
		||||
    // array with texts to type in typewriter
 | 
			
		||||
    var dataText = ["full stack developer", "web designer", "student", "gamer", "drummer"];
 | 
			
		||||
 | 
			
		||||
	// type one text in the typwriter
 | 
			
		||||
	// keeps calling itself until the text is finished
 | 
			
		||||
	function typeWriter(text, i, fnCallback) {
 | 
			
		||||
		// chekc if text isn't finished yet
 | 
			
		||||
		if (i < (text.length)) {
 | 
			
		||||
			// add next character to h1
 | 
			
		||||
			document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>';
 | 
			
		||||
    // type one text in the typwriter
 | 
			
		||||
    // keeps calling itself until the text is finished
 | 
			
		||||
    function typeWriter(text, i, fnCallback)
 | 
			
		||||
    {
 | 
			
		||||
        // chekc if text isn't finished yet
 | 
			
		||||
        if (i < (text.length))
 | 
			
		||||
        {
 | 
			
		||||
            // add next character to h1
 | 
			
		||||
            document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";
 | 
			
		||||
 | 
			
		||||
			// wait for a while and call this function again for next character
 | 
			
		||||
			setTimeout(function() {
 | 
			
		||||
				typeWriter(text, i + 1, fnCallback)
 | 
			
		||||
			}, 100);
 | 
			
		||||
		}
 | 
			
		||||
		// text finished, call callback if there is a callback function
 | 
			
		||||
		else if (typeof fnCallback == 'function') {
 | 
			
		||||
			// call callback after timeout
 | 
			
		||||
			setTimeout(fnCallback, 700);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	// start a typewriter animation for a text in the dataText array
 | 
			
		||||
	function StartTextAnimation(i) {
 | 
			
		||||
		if (typeof dataText[i] === 'undefined'){
 | 
			
		||||
			setTimeout(function() {
 | 
			
		||||
				StartTextAnimation(0);
 | 
			
		||||
			}, 1500);
 | 
			
		||||
			// StartTextAnimation(0);
 | 
			
		||||
		}
 | 
			
		||||
		else if (i < dataText[i].length) {
 | 
			
		||||
			// text exists! start typewriter animation
 | 
			
		||||
			typeWriter(dataText[i], 0, function(){
 | 
			
		||||
				// after callback (and whole text has been animated), start next text
 | 
			
		||||
				setTimeout(StartTextAnimation, 1500, i + 1);
 | 
			
		||||
			});
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	// start the text animation
 | 
			
		||||
	StartTextAnimation(0);
 | 
			
		||||
            // wait for a while and call this function again for next character
 | 
			
		||||
            setTimeout(function ()
 | 
			
		||||
            {
 | 
			
		||||
                typeWriter(text, i + 1, fnCallback)
 | 
			
		||||
            }, 100);
 | 
			
		||||
        }
 | 
			
		||||
        // text finished, call callback if there is a callback function
 | 
			
		||||
        else if (typeof fnCallback == "function")
 | 
			
		||||
        {
 | 
			
		||||
            // call callback after timeout
 | 
			
		||||
            setTimeout(fnCallback, 700);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // start a typewriter animation for a text in the dataText array
 | 
			
		||||
    function StartTextAnimation(i)
 | 
			
		||||
    {
 | 
			
		||||
        if (typeof dataText[i] === "undefined")
 | 
			
		||||
        {
 | 
			
		||||
            setTimeout(function ()
 | 
			
		||||
            {
 | 
			
		||||
                StartTextAnimation(0);
 | 
			
		||||
            }, 1500);
 | 
			
		||||
        }
 | 
			
		||||
        else if (i < dataText[i].length)
 | 
			
		||||
        {
 | 
			
		||||
            // text exists! start typewriter animation
 | 
			
		||||
            typeWriter(dataText[i], 0, function ()
 | 
			
		||||
            {
 | 
			
		||||
                // after callback (and whole text has been animated), start next text
 | 
			
		||||
                setTimeout(StartTextAnimation, 1500, i + 1);
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // start the text animation
 | 
			
		||||
    StartTextAnimation(0);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user