<html> <head> <title>Quad's site</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="assets/favicon.png" type="image/png"/> <link rel="stylesheet" href="assets/fork-awesome/css/fork-awesome.min.css"> <link href="style.css" rel="stylesheet" /> <link href="assets/fonts/poppins/poppins.css" rel="stylesheet" /> </head> <body> <div id="site"> <div id="content"> <div id="splits"> <div id="split1"> <img src="assets/avi.png" /> </div> <div id="split2"> <h1 class="title">Quad</h1> </div> </div> <div id="main-container"> <div id="navbar"> <div id="button1" class="nav-button">About</div> <div id="button2" class="nav-button">Contact</div> <div id="button3" class="nav-button">Projects</div> </div> <div id="page"> <p class="initial-text"> <i class="fa fa-arrow-up" aria-hidden="true"></i><br> Click a button! </p> </div> </div> <p class="notice"> P.S Anime is for bakas </p> </div> </div> <script> // Brace yourself for horrible JavaScript. // This code doesn't really exist for any reason other than the lolz // Find all our buttons const button1 = document.getElementById('button1'); const button2 = document.getElementById('button2'); const button3 = document.getElementById('button3'); // Create variables that will get populated by loadContent() later var page1 = "pages/about.html"; var page2 = "pages/contact.html"; var page3 = "pages/projects.html"; const contentArea = document.getElementById("page"); // Very bad function to get rid of the "active" class wherever it is atm function resetButtons() { button1.className = "nav-button"; button2.className = "nav-button"; button3.className = "nav-button"; } function httpGet(myUrl, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(contentArea, xmlHttp.responseText); } xmlHttp.open("GET", myUrl, true); xmlHttp.send(null); } function activatePage(navbutt, source) { resetButtons(); navbutt.className += " active"; console.log("there's absolutely no reason for this site to use ajax lmao"); httpGet(source, setContent); } function setContent(target, payload) { target.innerHTML = payload; } function initialContent() { // Slap on all the event listeners button1.addEventListener('click', function() { activatePage(button1, page1); }, false); button2.addEventListener('click', function() { activatePage(button2, page2); }, false); button3.addEventListener('click', function() { activatePage(button3, page3); }, false); setContent(contentArea, '<p class="initial-text"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Click a button!</p>'); } initialContent(); </script> </body> </html>