IDeletedSystem64/blueheartforever-web
IDeletedSystem64/blueheartforever-web
Archived
1
1
Fork 0
Code Releases Activity

Add javascript for memories

Browse source
This commit is contained in:
Sophie Marie 2023-10-28 18:03:39 -05:00
parent d3335bf329
commit 2b0199b6b3
Signed by: IDeletedSystem64
GPG key ID: 33A12B0480AFC8E9
2 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
js/memories.js Normal file
View file

@ -0,0 +1,30 @@
// I don't know if this will work, but we can try..... -fs64
// https://codingartistweb.com/2022/06/testimonial-slider-using-javascript/ heavily modified from this -64
console.info("Loading memories.js...");
let memories = "../conf/memories.json" // File containing the memories
let cm = 0; // (C)urrent (m)emory
let l = memories.length; // Total file length
console.info(`Found ${l} memory keys!`);
let memoriesBox = document.getElementById("memoriesBox");
let nxtBtn = document.getElementById("next");
let bckBtn = document.getElementById("prev");
// Get our memeoriesBox and buttons from HTML elements on the HTML page
nxtBtn.addEventListener("click", () => {
cm = (l + cm + 1) % l;
displayMemory();
}); // Switch to the next memory
nxtBtn.addEventListener("click", () => {
cm = (l + cm - 1) % l;
displayMemory();
}); // Switch back to the previous memory, nopony tell anyone else that we copied this :^) -64
let displayMemory = () => {
displayMemory.innerHTML = `
<h2>${memoriesBox[cm].name}</h2>
<p>${memoriesBox[cm].memory}</p>
`;
};
window.onload = displayMemory;
console.info("Done!");

30
memories.html Normal file
View file

@ -0,0 +1,30 @@
<!-- Now I watch over as you sleep, sleep tight princess.. -->
<!DOCTYPE html>
<head>
<title>💙 Blueheart Forever</title>
<link rel="stylesheet" href="styles/style_main.css"> <!-- Main Stylesheet -->
<link rel="stylesheet" href="styles/style_buttons.css"> <!-- Button Stylesheet -->
<link rel="icon" type="image/x-icon" href="img/blueheart.gif">
<!-- Website embed -->
<meta content="Blueheart" property="og:title"/>
<meta content="Blueheart - a Tribute" property="og:description"/>
<meta content="https://blueheart.system64.dev/img/blueheart.gif">
</head>
<body>
<div class="container">
<div class="taskbar">
<input type="button" onclick="location.href='/';" value="Blueheart forever">
</div>
<h1>Thank you for the memories.</h1>
<div class="wrapper">
<div class="memoriesBox" id="memoriesBox"></div>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
<script src="/js/memories.js"></script>
</div>
</body>
</div>
</body>