I've created a forEach loop that is collecting the urls of 10 gifs and I want to append them to a I currently have in my html on line 33. I have to display the gifs on the page. I'm currently getting a list of the urls. Is there a way I can have a list of images on the page keeping most of the code I currently have? From line 55 down is my forEach loop where I am trying to appendChild.
const button = document.querySelector("#search-btn");
button.addEventListener("click", (event) => {
event.preventDefault();
const giffTitle = document.querySelector("#giffTitle").value;
axios;
const giffSection = document.querySelector(".giffs");
const giffList = document.querySelector(".list");
axios
.get(
`https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en`
)
.then((res) => {
const giff = res.data;
// const giffUrl = giff.data[0].embed_url;
const giffUrl = giff.data;
console.log(giffUrl);
giffUrl.forEach(function(singleGiff) {
let img = document.createElement("li");
img.textContent = singleGiff.embed_url;
giffList.appendChild(img);
console.log(singleGiff.embed_url);
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<h1>Giffs</h1>
<form action="">
<label for="">Search</label>
<input type="text" id="giffTitle" />
<button id="search-btn">Search</button>
</form>
<iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
<section class="giffs"></section>
<ul class="list"></ul>I've edited to end to:
giffUrl.forEach(function (singleGiff) {
let img = document.createElement("img");
img.src = singleGiff.embed_url;
let list = document.createElement("li");
list.appendChild(img);
giffList.appendChild(list);
console.log(singleGiff.embed_url);
});
and the output is a list of broken images.
Something like this should work:
giffUrl.forEach(function (singleGiff) {
let img = document.createElement("img");
img.src = singleGiff.embed_url;
let listElement = document.createElement("li");
listElement.appendChild(img);
giffList.appendChild(listElement);
console.log(singleGiff.embed_url);
});
You can easily append image with help of Template literals and HTML DOM insertAdjacentHTML() Method. I hope below snippet will help you a lot.
Reference Link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp
const button = document.querySelector("#search-btn");
button.addEventListener("click", (event) => {
event.preventDefault();
const giffTitle = document.querySelector("#giffTitle").value;
axios;
const giffSection = document.querySelector(".giffs");
const giffList = document.querySelector(".list");
axios.get(
`https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en`
)
.then((res) => {
const giff = res.data;
// const giffUrl = giff.data[0].embed_url;
const giffUrl = giff.data;
// console.log(giffUrl);
giffList.innerHTML = ''; // empty <ul> before listing
giffUrl.forEach(function (singleGiff) {
console.log(singleGiff)
giffList.insertAdjacentHTML('beforeend', `
<li>
<img src="${singleGiff.images.downsized.url}">
</li>
`)
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"
integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<h1>Giffs</h1>
<form action="">
<label for="">Search</label>
<input type="text" id="giffTitle" />
<button id="search-btn">Search</button>
</form>
<section class="giffs"></section>
<ul class="list"></ul>You need both a new li and img element. And if you would like to present the GIF itself you should set the src attribute of the image to singleGiff.images.downsized.url.
const button = document.querySelector("#search-btn");
button.addEventListener("click", (event) => {
event.preventDefault();
const giffTitle = document.querySelector("#giffTitle").value;
axios;
const giffSection = document.querySelector(".giffs");
const giffList = document.querySelector(".list");
axios
.get(
`https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en`
)
.then((res) => {
const giff = res.data;
// const giffUrl = giff.data[0].embed_url;
const giffUrl = giff.data;
//console.log(giffUrl);
giffUrl.forEach(function(singleGiff) {
let li = document.createElement("li");
let img = document.createElement("img");
img.src = singleGiff.images.downsized.url;
li.appendChild(img);
giffList.appendChild(li);
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<h1>Giffs</h1>
<form action="">
<label for="">Search</label>
<input type="text" id="giffTitle" />
<button id="search-btn">Search</button>
</form>
<iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
<section class="giffs"></section>
<ul class="list"></ul>