Fairly new to JavaScript so bear with me!
I'm currently building a simple TV show rating search app, using TVmaze's API and I'm having trouble figuring out how I can have the search bar move to the top of the page after the search button is clicked. I tried creating a function called searchBarPos to remove the class "center" but I can't seem to figure out why it won't work within my click event listener. Any tips on how to solve this is much appreciated!
JS code:
const form = document.querySelector("#searchForm");
let div = document.querySelector("#container");
const ul = document.querySelector("#ratingList");
const reset = () => {
ul.innerText = '';
}
form.addEventListener('submit', async function (e) {
e.preventDefault();
reset();
const showName = form.elements.query.value;
const config = { params: { q: showName } }
const res = await axios.get(`https://api.tvmaze.com/search/shows?q=`, config)
display(res.data);
form.elements.query.value = '';
});
const display = (shows) => {
for (let result of shows) {
if (result.show.image) {
const img = document.createElement('IMG');
img.classList.add('movieData')
img.src = result.show.image.medium;
ul.append(img);
}
if (result.show.name && result.show.premiered) {
const title = result.show.name;
const date = result.show.premiered;
const li = document.createElement('li');
li.classList.add('movieData')
li.textContent = `${title} (${date})`;
ul.append(li);
}
if (result.show.rating) {
const avg = result.show.rating.average;
const li = document.createElement('li');
li.classList.add('movieData')
li.textContent = `Rating: ${avg}`;
ul.append(li);
}
}
}
CSS code:
body {
text-align: center;
}
.center {
margin:0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#title {
margin-top: 2rem;
font-family: 'M PLUS Code Latin', sans-serif;
}
form {
margin-bottom: 3rem;
}
.movieData{
margin: 0.5rem;
font-family: 'M PLUS Code Latin', sans-serif;
font-size: 18px;
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment