I've requested an image from this recipe api (spoonacular) and I've managed to post the pic on my site, but it's located under my background image. I know how to move and edit images but I can`t link this one in CSS so I can edit it. Here's the .js code and the rest. How do I address the api image in CSS? Many noob thanks!
Tom
import axios from 'axios';
const container = document.getElementById('container')
// const recipeImage = document.getElementById(`image`)
async function fetchImage() {
try {
const result = await axios.get('https://api.spoonacular.com/recipes/complexSearch?apiKey=...',{
headers:{
"Content-Type": "application/json"
}})
const recipe = result.data;
console.log(recipe.results[5]);
const image = document.createElement('p')
const title = document.createElement('h3')
title.innerHTML = `<h3>${recipe.results[5].title} </h3>`
image.innerHTML = `<img src="${recipe.results[5].image}"/>`
container.appendChild(title)
container.appendChild(image)
} catch (e) {
console.error(e);
}
}
fetchImage();.container{
position: absolute;
z-index: auto;
left:43%;
top: 25%;
height: 500px;
width: 645px;
}<body>
<h1> Jouw selectie voor vandaag . . </h1>
<header>
<img src="../assets/mood&food%20achtergrond%20licht%20patroon.jpg" height="800" width="1695" class="background"/>
<a href="index.html">
<img src="../assets/mood&food logo basic.png" height="80px" width="45%" class="logo"/></a>
<div id="container">
<h3></h3>
<p></p>
</div>
</header>
</body>
<script type="module" src="app.js"></script>
</html>The api key needed to be refreshed. Second time this problem occurred. Now the 'id=container' reference worked and the image was editable.