Okay… I am struggling right here. I am significantly new at JavaScript and am attempting to fetch knowledge from the Artwork Institute of Chicago’s API. My objective is to show the knowledge for a selected piece of artwork in a modal window after clicking on the related paintings. I’ve gotten the CSS and HTML down, I believe. Every part shows correctly so far as the photographs and titles and such. Nevertheless, once I click on the picture to open the modal, all I can get to show is the Artwork itself.
I’ve discovered an identical query on right here and tried a few of its code, however their answer did not fairly get me to the place I should be.
Here is my HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Suitable" content material="IE=edge">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<hyperlink rel="stylesheet" href="index.css">
<script src="index.js" defer></script>
<title>Artwork Institute of Chicago API</title>
</head>
<physique>
<h1>From the Artwork Institute of Chicago:<br>A Sampling of Monet, Van Gogh, and Hokusai</h1>
<div class="container">
<!-- ARTic Banner -->
<div class="gallery-container w-4 h-3">
<div class="gallery-item">
<div class="picture banner" onclick="openInNewTab('https://www.artic.edu');">
<img src="/photographs/bannerArtIC.jpg"
alt="Artwork Institute of Chicago banner">
</div>
<div class="textual content">
The Artwork Institute of Chicago
</div>
</div>
</div>
<!-- Fig 1 - Monet: Water Lilies -->
<div class="gallery-container w-2 h-3">
<div class="gallery-item">
<div class="picture" id="16568">
<img src="photographs/monetWaterLilies_1933.1157.jpg"
alt="Portray of a pond seen up shut noticed with thickly
painted pink and white water lilies and a shadow throughout the
prime third of the image."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Claude Monet:<br>Water Lilies
</div>
</div>
</div>
<!-- Fig 2 - Van Gogh: Self Portrait -->
<div class="gallery-container w-2 h-6">
<div class="gallery-item">
<div class="picture" id="80607">
<img src="photographs/vanGoghSelfPortrait_1954.326.jpg"
alt="Portray of a red-haired, bearded man with mild pores and skin,
painted in brief brushstrokes and multicolored dots. The
background is likewise a mass of small, intently spaced coloured
dots, these in inexperienced, blue, and red-orange."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Vincent Van Gogh:<br>Self Portrait
</div>
</div>
</div>
<!-- Fig 3 - Monet: Water Lily Pond -->
<div class="gallery-container w-4 h-3">
<div class="gallery-item">
<div class="picture" id="87088">
<img src="photographs/monetWaterLilyPond_1933.441.jpg"
alt="Portray of a small pond dense with pink water lilies,
their roots seen by means of the water, a railed footbridge
arching over the pond and plush, darkish inexperienced folliage surrounding
it."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Claude Monet:<br>Water Lily Pond
</div>
</div>
</div>
<!-- Fig 4 - Van Gogh: The Poet's Backyard -->
<div class="gallery-container w-2 h-3">
<div class="gallery-item">
<div class="picture" id="14586">
<img src="photographs/vanGoghThePoetsGarden_1933.433.jpg"
alt="Lush tall grasses with small white flowers foreground a
grove of bushy bushes of various sorts and heights, their leaves
starting from deep inexperienced to golden. Beneath a dense and heavy
yellow sky, a small blue triangle suggesting a mountain peak
crests above the treeline at far left."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Vincent Van Gogh:<br>The Poet's Backyard
</div>
</div>
</div>
<!-- Fig 5 - Hokusai: Beneath the Wave Off Kanagawa -->
<div class="gallery-container w-4 h-3">
<div class="gallery-item">
<div class="picture" id="24645">
<img src="photographs/hokusaiUnderTheWaveOffKanagawa_1925.3245.jpg"
alt="A crashing wave looms over two small ships, Mount Fuji
within the background."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Katsushika Hokusai:<br>Beneath the Wave Off Kanagawa
</div>
</div>
</div>
<!-- Fig 6 - Hokusai: Chrysanthemums and Bee -->
<div class="gallery-container w-2 h-6">
<div class="gallery-item">
<div class="picture" id="25110">
<img src="photographs/hokusaiChrysanthemumsAndBee_1925.3373.jpg"
alt="A coloration woodblock print of pink, orange and yellow
chrysanthemums. Within the higher rihgt a tiny bee flies above the
flowers. Signature and seals within the decrease left nook."
onclick="openModal(occasion); occasion.stopPropagation(); getArtwork(this.id, occasion)">
</div>
<div class="textual content">
Katsushika Hokusai:<br>Chrysanthemums and Bee
</div>
</div>
</div>
<!-- div for modal -->
<div id="myModal" class="modal">
<span class="closebtn" onclick="closeModal(occasion)">&occasions;</span>
<img class="modal-content" id="expandedImg">
<div id="caption">
</div>
</div>
</div>
</physique>
</html>
And this is my JS (with additions from solutions discovered on stack overflow):
// operate to open the AIC homepage in new tab
operate openInNewTab(url) {
var win = window.open(url, 'clean');
win.focus();
}
// operate to open every picture as a modal as soon as it's clicked
operate openModal(occasion) {
var modal = doc.getElementById("myModal");
modal.model.show = "block";
doc.getElementById("expandedImg").setAttribute('src', occasion.goal.getAttribute("src"));
}
// operate to shut the picture modal
operate closeModal(occasion) {
const modal = doc.getElementById("myModal");
modal.model.show = "none";
}
// // // // // // // // // // // // // // // // // // // // // // // // // // //
// //
// features and strategies to tug knowledge for artwork items //
// let artwork;
let showArtInfo;
/**
* @param art_index
* @param info_index
*
* operate to tug the information on the artwork from AIC
*/
async operate clickedEvent(art_index, info_index) { // is the info_index really essential right here if it isn't used once more? is that for the API's profit?
// Get id of paintings
let elem = doc.getElementsByTagName('img')[art_index];
let id = elem.attributes[2].worth;
let headers = new Headers([
['Content-Type', 'application/json'],
['Accept', 'application/json']
]);
let request = new Request(
`https://api.artic.edu/api/v1/artworks${id}?fields=id,title,artist_display,date_display`, {
methodology: 'GET',
headers: headers
});
let end result = await fetch(request);
let response = await end result.json();
console.log(response)
if (showArtInfo) {
stopShow();
} else {
let title = response.knowledge.title;
let artist = response.knowledge['artist_display'];
let date = response.knowledge['date_display'];
let div = doc.getElementById('caption');
div.innerHTML = `<br> Title: ${title}<br> Artist: ${artist}<br> Date Show: ${date}`;
elem.parentElement.appendChild(div);
};
}
/**
* @param id // artwork id
* @param occasion // 'onClick' occasion
*
* operate to show the pulled data of the artpiece when clicked on
*/
operate getArtwork(id, occasion) {
swap(id) {
case '16568': { // Water Lilies by Claude Monet, id# 16568
occasion.stopPropagation();
clickedEvent(0, 0)
break;
}
case '80607': { // Self Portrait by Vincent Van Gogh, id# 80607
occasion.stopPropagation();
clickedEvent(1, 0)
break;
}
case '87088': { // Water Lily Pond by Claude Monet, id# 87088
occasion.stopPropagation();
clickedEvent(2, 0)
break;
}
case '14586': { // The Poet's Backyard by Vincent Van Gogh, id# 14586
occasion.stopPropagation();
clickedEvent(3, 0)
break;
}
case '24645': { // Beneath the Wave Off Kanagawa by Katsushika Hokusai, id# 24645
occasion.stopPropagation();
clickedEvent(4, 0)
break;
}
case '25110': { // Chrysanthemums and Bee by Katsushika Hokusai, id# 25110
occasion.stopPropagation();
clickedEvent(5, 0)
break;
}
}
}
And lastly, my CSS (in case you need to totally replicate my web page to see what I am going for in actual time):
physique {
margin: 50px;
padding: 0;
text-align: heart;
background-color: #292C33;
}
h1 {
margin-bottom: 50px;
padding: 20px;
define: 5px strong white;
coloration: white;
border-radius: 5px;
background-color: #b60235;
}
.container {
show: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 100px 100px;
grid-gap: 18px;
grid-auto-flow: dense;
}
.gallery-item {
width: 100%;
peak: 100%;
place: relative;
}
.gallery-item .picture {
width: 100%;
peak: 100%;
overflow: hidden;
border: 2px strong white;
border-radius: 5px;
}
.gallery-item .picture img {
width: 100%;
peak: 100%;
object-fit: cowl;
object-position: 50% 50%;
cursor: pointer;
transition: .66s ease-in-out;
border-radius: 5px;
}
.gallery-item:hover .picture img {
remodel: scale(1.12);
}
.gallery-item .textual content {
opacity: 0;
place: absolute;
prime: 50%;
left: 50%;
remodel: translate(-50%, -50%);
coloration: white;
font-size: 30px;
pointer-events: none;
z-index: 4;
-webkit-backdrop-filter: blur(22px) saturate(1.5);
backdrop-filter: blur(22px) saturate(1.5);
}
.gallery-item:hover .textual content {
opacity: 1;
animation: move-up .33s linear;
padding: 1em;
width: 77.5%;
define: 2px strong #b60235;
border-radius: 5px;
}
@keyframes move-up {
0% {prime:77.5%}
50% {prime:63.75%}
100% {prime:50%}
}
.w-1 {
grid-column: span 1;
}
.w-2 {
grid-column: span 2;
}
.w-3 {
grid-column: span 3;
}
.w-4 {
grid-column: span 4;
}
.w-5 {
grid-column: span 5;
}
.w-6 {
grid-column: span 6;
}
.h-1 {
grid-row: span 1;
}
.h-2 {
grid-row: span 2;
}
.h-3 {
grid-row: span 3;
}
.h-4 {
grid-row: span 4;
}
.h-5 {
grid-row: span 5;
}
.h-6 {
grid-row: span 6;
}
@media display screen and (max-width: 850px) {
.container {
grid-template-columns: repeat(3,1fr);
}
.w-1, .w-2, .w-3, .w-4, .w-5, .w-6 {
grid-column: span 3;
}
}
/* -------------------------------------------------------------------------- */
.closebtn {
place: absolute;
prime: 15px;
proper: 35px;
coloration: #f1f1f1;
font-size: 40px;
font-weight: daring;
transition: 0.3s;
}
.closebtn:hover, .closebtn:focus {
coloration: #bbb;
text-decoration: none;
cursor: pointer;
}
.modal {
show: none;
place: mounted;
z-index: 10;
padding-top: 5%;
left: 0;
prime: 0;
width: 100%;
peak: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
/* go away it centered and simply show data beneath -- perhaps?
margin-left: 5%;
show: block; */
width: 80%;
max-width: 750px;
max-height: 650px;
object-fit: include;
}
#caption {
margin: auto;
show: block;
width: 80%;
max-width: 700px;
text-align: heart;
coloration: #ccc;
padding: 10px 0;
peak: 150px;
}
.modal-content {
animation-name: zoom;
animation-duration: 0.5s;
}
@keyframes zoom {
from {
remodel: scale(0)
} to {
remodel: scale(1)
}
}
So, hopefully you will see that just about each factor else I am programming features because it ought to, however I am unable to fairly get the info pulled from the API and displaying inside the modal when opened. I imagine my downside rests totally within the JS code and the way I am making an attempt to fetch and show the info from the API. Additionally, I’ve a div with an id of ‘data’ positioned inside the ‘modal’ div in my HTML, however I’ve acquired a sneaking suspicion that I am not utilizing that correctly both. Let me know if there’s any further info required on my finish.
