quad
/
site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

I think I've finally figured out how JS is supposed to be written. So gonna try changing courses to a less retarded solution.

This commit is contained in:
Dominik V. Salonen 2018-03-14 13:46:37 +01:00 committed by Dominik V. Salonen
parent fc3c7026f3
commit 0d593c7f1e
3 changed files with 19 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -2,6 +2,7 @@
<head> <head>
<title>Quad's site</title> <title>Quad's site</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" />
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
</head> </head>
<body onload="javascript:initialContent();"> <body onload="javascript:initialContent();">

56
main.js
View File

@ -7,13 +7,12 @@ const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2'); const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3'); const button3 = document.getElementById('button3');
// Make the base URL a variable because it's easier if I ever move the site
const baseUrl = "https://quad.moe/test/";
// Create variables that will get populated by loadContent() later // Create variables that will get populated by loadContent() later
var payload1; var page1 = "pages/about.html";
var payload2; var page2 = "pages/about.html";
var payload3; var page3 = "pages/about.html";
const spinner = '<i class="fas fa-spinner loading"></i>';
// Very bad function to get rid of the "active" class wherever it is atm // Very bad function to get rid of the "active" class wherever it is atm
function resetButtons() { function resetButtons() {
@ -22,57 +21,22 @@ function resetButtons() {
button3.className = "nav-button"; button3.className = "nav-button";
} }
// Fetch all the page contents
async function loadContent(baseUrl) {
const http1 = fetch("pages/about.html");
const http2 = fetch("pages/about.html");
const http3 = fetch("pages/about.html");
const requests = [http1, http2, http3];
const responses = await Promise.all(requests);
return responses;
}
function setContent(navbutt, payload) { function setContent(navbutt, payload) {
document.getElementById("page").innerHTML = payload; document.getElementById("page").innerHTML = spinner;
resetButtons(); resetButtons();
navbutt.className += " active"; navbutt.className += " active";
} }
function initialContent() { function initialContent() {
// Get the HTML we need
// This returns Response { type: "basic", url: "https://example.com", redirected: false... etc.
loadContent().then((res) => {console.log(res);});
// This returns a Promise object with <state>: "pending"
loadContent().then((res) => {console.log(res[0].text());});
contents = loadContent();
// Can't figure out how to make sure that each web request in loadContent()
// has returned proper HTML before it actually proceeds executing the rest of this funciton
// Then store the text only for later use
payload1 = contents[0].text();
payload2 = contents[1].text();
payload3 = contents[2].text();
console.log(payload1);
// Slap on all the event listeners // Slap on all the event listeners
button1.addEventListener('click', function() { button1.addEventListener('click', function() {
setContent(button1, payload1); setContent(button1, page1);
}, false); }, false);
button2.addEventListener('click', function() { button2.addEventListener('click', function() {
setContent(button2, payload2); setContent(button2, page2);
}, false); }, false);
button3.addEventListener('click', function() { button3.addEventListener('click', function() {
setContent(button3, payload3); setContent(button3, page3);
}, false); }, false);
// And finally enable the first tab
setContent(button1, payload1);
} }

8
style.css
View File

@ -98,6 +98,14 @@ h1, h2, h3, h4, h5, p {
margin-bottom: 50px; margin-bottom: 50px;
} }
.loading {
font-size: 26pt;
color: #FF5555;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
.notice { .notice {
color: #3b3b3b; color: #3b3b3b;
text-align: right; text-align: right;