zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

JS can create window with image in it 

Also styling changes and changes to index.html
This commit is contained in:
emma 2024-10-28 08:15:25 -04:00
parent d838df075e
commit 96db2bf458
3 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -12,7 +12,7 @@
<div class="window">
<div class="title-bar">
<button aria-label="Close" disabled class="hidden"></button>
<h1 class="title">Baxter Images</h1>
<h2 class="title">Baxter Images</h2>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
<div class="separator"></div>
@ -20,7 +20,7 @@
<div class="window-pane">
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-stare-thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>baxter-stare.jpg</figcaption>
<figcaption>baxter-stare.png</figcaption>
</figure>
</div>
</div>

57
js/script.js
View File

@ -1,10 +1,57 @@
let icon = document.querySelector(".clickable-image");
let icon = document.querySelectorAll(".clickable-image");
icon.addEventListener("click", () => {
// let desktop = document.querySelector("body");
// let imageWindow = document.createElement("div");
icon.forEach((item) => {
item.addEventListener("click", () => {
let desktop = document.querySelector("body");
// desktop.appendChild();
let imageWindow = document.createElement("div");
imageWindow.classList.add("window");
let titleBar = document.createElement("div");
titleBar.classList.add("title-bar");
let closeButton = document.createElement("button");
closeButton.ariaLabel = "Close";
closeButton.classList.add("close");
titleBar.appendChild(closeButton);
let windowTilte = document.createElement("h2");
windowTilte.classList.add("title")
windowTilte.textContent = item.querySelector("figcaption").textContent;
titleBar.appendChild(windowTilte);
let separator = document.createElement("div");
separator.classList.add("separator")
imageWindow.appendChild(titleBar);
imageWindow.appendChild(separator);
let windowPane = document.createElement("div");
windowPane.classList.add("window-pane");
windowPane.style.display = "flex";
windowPane.style.justifyContent = "center";
let figure = document.createElement("figure");
let image = document.createElement("img");
image.src = `img/${item.querySelector("figcaption").textContent}`;
image.height = "700";
figure.style.marginTop = "1.5rem";
figure.appendChild(image);
let figureCaption = document.createElement("figcaption");
figureCaption.textContent = `${item.querySelector("figcaption").textContent}`;
figureCaption.style.textAlign = "center";
figure.appendChild(figureCaption);
windowPane.appendChild(figure);
imageWindow.appendChild(windowPane);
document.querySelector(".window").style.display = "none";
imageWindow.style.gridColumn = "1";
imageWindow.style.gridRow = "1";
let = aboutThisCat = document.querySelector(".site-info");
aboutThisCat.style.gridColumn = "2";
desktop.appendChild(imageWindow);
});
});

6
style/style.css
View File

@ -30,6 +30,12 @@ h1 {
margin: 1rem;
}
h2 {
margin: 1rem;
font-size: 1.5rem;
font-family: Chicago_12;
}
p {
line-height: 1.5rem;
margin-bottom: 1rem;