I am facing an issue with loading two images in my HTML when the 'next' button is clicked. Initially, everything was working fine before I integrated the front end with Flask. The CSS and JS files are functioning properly, but the images are not loading as expected. On clicking the button, the JS is supposed to replace the old HTML in the main div with the new content containing the images, as defined in the update() function. All the JS, CSS, and images are stored in the static folder. Any suggestions or assistance would be highly appreciated. Additional information: I am receiving a 404 error indicating that the images cannot be located in a folder named Images, even though I have specified the static folder as the location. You can access the GitHub repository here: https://github.com/ewanh26/Web-App Code:
main.py:
from flask import *
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
index.js:
<!-- language: lang-js -->
let pageCounter = 0;
let maxPages = 5
const $prevButton = document.getElementById('prev')
const $nextButton = document.getElementById('next');
const $div = document.getElementById('maindiv')
function update() {
switch (pageCounter) {
default:
$div.className = 'slide1Header';
$($div).html("<h1>THE WORLD OF TOMORROW. WHAT'S NEXT FOR US?</h1>");
break;
case 1:
$div.className = 'slide2';
$($div).html(`
<img src="{{ url_for('static', filename='starry.jpg') }}" alt="stars" id="starimg">
<img src="{{ url_for('static', filename='moon.png') }}" alt="moon" id="moonimg">
`);
break;
}
}
update();
$prevButton.addEventListener('click', function () {
if (pageCounter > 0) {
pageCounter--;
console.log(pageCounter);
update();
}
});
$nextButton.addEventListener('click', function () {
if (pageCounter < maxPages) {
pageCounter++;
console.log(pageCounter);
update();
}
});
window.addEventListener('scroll', function () {
document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
});
style.css
<!-- language: lang-css -->
html, body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.slide1Header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
font-style: italic;
width: 100%;
height: 100%;
background: linear-gradient(-45deg,
#bd33c4,
#DE498E,
#FF5F58,
#FC9144,
#f8c330e1,
#FBAB19,
#FD9301,
#FE4A2B,
#FF0055
);
background-size: 2000% 2000%;
animation: backgroundChange 15s ease infinite;
transform: none;
}
.slide2 {
background: black;
}
#starimg {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#moonimg {
display: block;
width: 30px;
height: 30px;
top: 17px;
right: 33%;
left: 66%;
position: absolute;
filter: brightness(5);
filter: contrast(0);
filter: blur(0.7px);
filter: opacity(0.95);
animation: moonScroll 0.5s linear infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
transform: rotate(-40deg);
transform-origin: 0px 500px;
}
#moonimg::before {
transform: rotate(-30deg);
}
button.prev, button.next {
border-radius: 8px;
position: fixed;
transition-duration: 0.4s;
border-color: white;
border-style: none;
padding: 4pt;
}
button.prev {
left: 5%;
bottom: 5%;
}
button.next {
right: 5%;
bottom: 5%;
}
.prev:hover, .next:hover, .prev:focus, .next:focus {
background-color: #ff245b;
color: white;
outline: none;
}
@keyframes backgroundChange {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes moonScroll {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-90deg);
}
}
index.html
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!--<link rel="preload" as="image" href="{{ url_for('static', filename='starry.jpg') }}">
<link rel="preload" as="image" href="{{ url_for('static', filename='moon.png') }}">!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>The Future</title>
</head>
<body>
<div id="maindiv"></div>
<button class="prev" id="prev">← Previous</button>
<button class="next" id="next">Next →</button>
<script src="{{ url_for('static', filename='index.js') }}"></script>
</body>
</html>
index.js
let pageCounter = 0;
let maxPages = 5
const $prevButton = document.getElementById('prev')
const $nextButton = document.getElementById('next');
const $div = document.getElementById('maindiv')
function update() {
switch (pageCounter) {
default:
$div.className = 'slide1Header';
$($div).html("<h1>THE WORLD OF TOMORROW. WHAT'S NEXT FOR US?</h1>");
break;
case 1:
$div.className = 'slide2';
$($div).html(`
<img src="{{ url_for('static', filename='starry.jpg') }}" alt="stars" id="starimg">
<img src="{{ url_for('static', filename='moon.png') }}" alt="moon" id="moonimg">
`);
break;
}
}
update();
$prevButton.addEventListener('click', function () {
if (pageCounter > 0) {
pageCounter--;
console.log(pageCounter);
update();
}
});
$nextButton.addEventListener('click', function () {
if (pageCounter < maxPages) {
pageCounter++;
console.log(pageCounter);
update();
}
});
window.addEventListener('scroll', function () {
document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
});