Coding Hobbyist here trying to figure out how to: “Create a Digital Archive.”
more specifically:
A.) “when someone stumbles upon this (HTML/CSS/JavaScript only) webpage, they’ll see a list of items (that, when their mouse hovers over such an item, such an item zooms in).
B.) The list of items they’ll see, will be either:
3 entries per row,
5 entries per row,
or 10 entries per row. (almost like, you’re looking through someone’s archive of artwork. (a random passerbyer, can click from the dropdown menu, if they wanna see “3,5,or 10” images at a time (that’s the code we’re working on together today.).
C.) I have coded together something that shows 3 entries per row.
C.1) I’m stuck. i do not know what’s the best method/code/ability to move forward. Like:
C.1.1) If a random person comes to my webpage, and wants to see “5 entries per row.” How do i get “image number 4” to show up after the third entry? but then BOUNCE BACK TO THE NEXT ROW, if someone chooses “theyd rather see 3 entries per row.”
Here is my provided code before i continue further:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Digital Archive 3-5-10 Images Per Row</title>
<style>
.CenterOfCardCreationPage {
text-align: center;
}
.ContainerForCardCreationContainer {
flex-direction: column;
}
.CardCreationContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
.CardCreationColumn {
flex: 0 0 30%;
margin: 10px;
padding: 10px;
text-align: center;
}
.CardCreationButton {
display: inline-block;
padding: 10px 20px;
color: white;
text-decoration: none;
border: none;
cursor: pointer;
}
.CardCreationImage {
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 600px) {
.CardCreationColumn {
flex: 0 0 45%;
}
}
@media (max-width: 400px) {
.CardCreationColumn {
flex: 0 0 90%;
}
}
</style>
</head>
<body>
<header class="CenterOfCardCreationPage">
<h1>Items Per Page: 3,5 or 10?</h1>
<label for="resultsPerPage">How many Results would you like?</label>
<select id="resultsPerPage">
<option value="1">3</option>
<option value="2">5</option>
<option value="3">10</option>
</select>
</header>
<div class="ContainerForCardCreationContainer">
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton1" onclick="uploadImage(1)">Upload Image</button>
<div id="imagePlaceholder1" class="CardCreationButton">
<img id="image1" class="CardCreationImage" src="" alt="An Image 01" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton2" onclick="uploadImage(2)">Upload Image</button>
<div id="imagePlaceholder2" class="CardCreationButton">
<img id="image2" class="CardCreationImage" src="" alt="An Image 02" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton3" onclick="uploadImage(3)">Upload Image</button>
<div id="imagePlaceholder3" class="CardCreationButton">
<img id="image3" class="CardCreationImage" src="" alt="An Image 03" />
</div>
</div>
</div>
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton4" onclick="uploadImage(4)">Upload Image</button>
<div id="imagePlaceholder4" class="CardCreationButton">
<img id="image4" class="CardCreationImage" src="" alt="An Image 04" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton5" onclick="uploadImage(5)">Upload Image</button>
<div id="imagePlaceholder5" class="CardCreationButton">
<img id="image5" class="CardCreationImage" src="" alt="An Image 05" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton6" onclick="uploadImage(6)">Upload Image</button>
<div id="imagePlaceholder6" class="CardCreationButton">
<img id="image6" class="CardCreationImage" src="" alt="An Image 06" />
</div>
</div>
</div>
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton7" onclick="uploadImage(7)">Upload Image</button>
<div id="imagePlaceholder7" class="CardCreationButton">
<img id="image7" class="CardCreationImage" src="" alt="An Image 74" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton8" onclick="uploadImage(8)">Upload Image</button>
<div id="imagePlaceholder8" class="CardCreationButton">
<img id="image8" class="CardCreationImage" src="" alt="An Image 08" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton9" onclick="uploadImage(9)">Upload Image</button>
<div id="imagePlaceholder9" class="CardCreationButton">
<img id="image9" class="CardCreationImage" src="" alt="An Image 09" />
</div>
</div>
</div>
</div>
<!-- Footer with centered text -->
<footer class="CenterOfCardCreationPage">
<h2>Thank you for checking this code out!</h2>
</footer>
<script>
//the code below is the stuff for dropdownmenu
const resultsPerPageSelect = document.getElementById('resultsPerPage');
const cardCreationContainers = document.getElementsByClassName('CardCreationContainer');
resultsPerPageSelect.addEventListener('change', (event) => {
const selectedOption = parseInt(event.target.value, 10);
for (let i = 0; i < cardCreationContainers.length; i++) {
if (i < selectedOption) {
cardCreationContainers[i].style.display = 'flex';
} else {
cardCreationContainers[i].style.display = 'none';
}
}
});
// Initial display based on the selected option
resultsPerPageSelect.dispatchEvent(new Event('change'));
// the stuff below is the code for uploading images
let uploadedImages = 0;
// Function to handle image upload
function uploadImage(CardCreationColumnNumber) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function () {
const file = this.files[0];
const reader = new FileReader();
reader.onload = function () {
const imagePlaceholder = document.getElementById(`image${CardCreationColumnNumber}`);
imagePlaceholder.src = reader.result;
uploadedImages++;
// Enable the second button if the first image is uploaded
if (CardCreationColumnNumber === 1) {
const secondButton = document.getElementById('uploadButton27');
secondButton.disabled = false;
}
};
reader.readAsDataURL(file);
};
input.click();
}
</script>
</body>
</html>
C.1.2.) Like, what i tried was plugging in the “fourth and fifth image” (and then the 6th to 10th) into the first row, (and such equivalents in the second two rows) but that didnt work. when someone would change from 5 rows back to 3, or 10 rows back to 3, those “IDs, that represented other images, would disappear from view, and only the next visible set of rows would show their IDs”.
D.) Which leads to my question, (for I think I’m seeing this too much from one point of view and not wanting to abandon it cause I worked on it for a hot minute). “How do i properly fix/upgrade this so that when a random passerbyer sees this webpage, they can choose if they want to see 3, 5, 10 results/images per ROW, and if and when they ever wish to change it back to 3 images per ROW, we dont lose image number 4-10 in the first row just for the second row to show its first 3 options (which would have been image 11, 12, 13 (and then the third row showing images 21, 22, & 23) instead of just “image 4,5,6 being removed from the first row, and being placed in the second row; and image 7 8 and 9 being placed in third row.”
(Note: Semi-unrelated-note about this question: I think i kept saying: “Results per page” when i meant “Results per row” i edited it here and there but if i missed any- my b- but thats what i mean here. Results per page would be cool but not the goal right now.)
Y’all get what I be asking? I’m stuck on how to move forward; any help (or even any sage advice on how to better tackle this on) would be greatly appreciated!
-Scholah