So its clear that if you open up the chrome dev tools and look at the DOM tree structure, that once you enter a movie in input and then it renders divs, the divs actually continue to go inside of one another vs staying separate. What do I need to do to fix this?
my goal for the DOM tree within the ‘section’ parent element, is to look something like this once rendered:
<section>
<div> rendered movie card</div>
<div> rendered movie card</div>
<div> rendered movie card</div>
<div> rendered movie card</div>
<div> rendered movie card</div>
........etc
</section>
instead of:
<section>
<div>
rendered movie card
<div>
rendered movie card
<div>
rendered movie card
</div>
</div>
</div>
</section>
Also, I have been told it is bad to post your api key on forums, but given that its a free api, does it really matter? or is the concern relate more to paid apis when you enter financial information?
Thanks in advance for the help.
JS
// VARIABLE LIBRARY
let searchEl = document.querySelector('#search')
let movieCardBoxEl = document.querySelector('#movieCardBox')
// moviecard.setAttrbiute style and add borders and stuff
let movieCardEl = document.querySelector('#movieCard')
let movieTitleEl = document.querySelector('#movieTitle')
// SEARCH FLICK
searchEl.addEventListener('click', () => {
let inputEl = document.querySelector('#input')
console.log('clicked');
// DATA
const url = `https://imdb8.p.rapidapi.com/auto-complete?q=${inputEl.value}`;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '4165450571mshe599f8c8e4e26f2p132bb2jsn0e744e67b61b',
'X-RapidAPI-Host': 'imdb8.p.rapidapi.com'
}
};
// FETCH -- YOU HAVE A HARD STOP OF 500 CALLS
fetch(url, options)
.then(res => res.json())
.then((data) => {
console.log('data: ', data.d[0]);
movieCardBoxEl.innerHTML = data.d.map((title) => {
return `
<div class="movie-cards">
<h2>${title.l}</h2>
<img class="movie-img" src="${title.i.imageUrl}" alt="" srcset="">
</dvi>
`
}).join('')
})
.catch(err => console.error('error:' + err));
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<div>
<h1>Movies</h1>
</div>
<input id="input" type="text">
<button id="search">Search</button>
</header>
<section id="movieCardBox">
<!-- MOVIE CARD RENDERS -->
</section>
<script src="test.js"></script>
</body>
</html>
CSS
.movie-cards {
display: flex;
flex-direction: column;
align-items: center;
border: 1px red solid;
margin: 10px 0 10px 0;
}
h2 {
border: 1px solid red;
}
.movie-title {
border: 1px solid red;
}
.movie-img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}