CodeReview 280480

by ajmeese7

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">
    <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>

CSS

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;
 }

JavaScript

const textInput = document.querySelector(`#search__box`);
const btn = document.querySelector(`#btn`);
const ShowName = document.querySelector(`.show__name`);
const btn_reset = document.querySelector(`.btn__reset`);
const btnClickHandler = (e) => {
  e.preventDefault();
  axios.get(`https://api.tvmaze.com/search/shows?q=${userData}`).then((res) => {
    const looparr = res.data;
    try {
      for (const 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;
      }
    } catch (e) {}
  });
};

const btnResetHanddler = (e) => {
  e.preventDefault();
  const btn__test = document.querySelectorAll(`.yes`);
  for (const 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_reset.addEventListener(`click`, btnResetHanddler);