I am trying to get the value from the from and and pass it to the API and output the result to the DOM. The code works fine but I am 1000% sure there is a better way to write THIS. Thanks for the help and I am new so trying to learn.
JS CODE
const textInput = document.querySelector(`#search__box`);
const btn = document.querySelector(`#btn`);
const ShowName = document.querySelector(`.show__name`);
const btn_rest = document.querySelector(`.btn__reset`);
let btn__test = "";
const btnClickHandler = (e) => {
e.preventDefault();
axios.get(`https://api.tvmaze.com/search/shows?q=${userData}`).then((res) => {
const looparr = res.data;
try {
for (show of looparr) {
const createDiv = document.createElement(`div`);
const createA = document.createElement(`p`);
const createIMG = document.createElement(`img`);
const createH3 = document.createElement(`h3`);
const createH4 = document.createElement(`h4`);
createDiv.classList.add(`yes`);
createIMG.classList.add(`img-style`);
createH3.innerHTML = show.show.summary;
createIMG.src = show.show.image.medium;
createH4.innerText = `Release Year ${show.show.premiered}`;
ShowName.append(createDiv);
createDiv.append(createA);
createDiv.append(createIMG);
createDiv.append(createH3);
createDiv.append(createH4);
createDiv.style.borderBottom = `1px solid black`;
createA.classList.add(`test`);
createA.innerText = show.show.name;
btn__test = document.querySelectorAll(`.yes`);
}
} catch {
(e) => {};
}
});
};
const btnResetHanddler = (e) => {
e.preventDefault();
for (div of btn__test) {
ShowName.removeChild(div);
}
textInput.value = "";
};
const inputHanddler = (e) => {
const test = e.target.value;
return (userData = test);
};
btn.addEventListener(`click`, btnClickHandler);
textInput.addEventListener(`change`, inputHanddler);
btn_rest.addEventListener(`click`, btnResetHanddler);html{
font-size: 62.5%;
position: relative;
}
.search__wrapper{
font-size: 3rem;
display: flex;
justify-content: center;
}
#search__box{
width: 30rem;
height: 3rem;
border-radius: 2rem;
border: none;
background-color: rgb(213, 207, 207);
}
.show__name{
display: flex;
font-size: 2rem;
flex-direction: column;
}
.show__name p {
margin: 1.2rem;
font-size: 3rem;
text-align: center;
}
.test{
font-size: 40rem;
color: black;
}
.img-style{
transition: all 2s;
width: 400px;
}
.img-style:hover{
transform: scale(1.1);
margin-top: 1.5rem;}
.yes {
display: flex;
flex-direction: column;
align-items: center;
} <!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">
<title>TV APP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="search__wrapper">
<form action="#">
<label for="search__box">search</label>
<input type="search" name="search__box" id="search__box">
<button type="submit" id="btn">Submit</button>
<button class="btn__reset">Reset</button>
</form>
<ul class="list">
</ul>
</section>
<section class="show__name">
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
