Converting HTML, CSS, and JavaScript files to a vue component

Question

I am having a problem converting my files to a vue component. I want my website to function the same way but using vite on a vue 3 project (with axios). I think I should add vue directives like v-if or v-for but I don't know where. I want to know how I could convert all this data to make it into vue components but act the same way as these files do on a website.

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>Movies</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
    <script src="./script.js" defer></script>
 
  </head>
  <body>
 
    <h1 class="title"> Choose a movie from the dropdown <br> menu and press Get for movies: </h1>
 
     <div class="selector">
      <select name="Movies" id="movieselect">
        <option value="">Choose a Movie:</option>
        <option value="divergent">Divergent</option>
        <option value="the adam project">The Adam Project</option>
        <option value="batman">Batman</option>
        <option value="superman">Superman</option>
        <option value="starwars">Starwars</option>
        <option value="hunger games">Hunger Games</option>
        <option value="the maze runner">The Maze Runner</option>
        <option value="spiderman">Spiderman</option>
        <option value="bird box">Bird Box</option>
        <option value="don't look up">Don't Look Up</option>
      </select>
     
      <button class="button" onclick="getMovies1()"> Get </button>
 
      <div id="movieInfo">
 
    </div>
  </div>
  </body>
</html>

CSS:

h1 {
  color: black;
  text-align: center;
  font-size: 65px;
  font-family:'Times New Roman', Times, serif
}
 
body {
    background-color: lavender;
    text-align: center;
    font-size: 20px;
  }
 
  p {
    color: black;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
  }  
 
  img {
    width: 200px;
    aspect-ratio: 2 / 3;
  }
 
  iframe {
    aspect-ratio: 16 / 9;
    height: 300px;
  }

JavaScript:

const getData = async (url, params) => {
    try {
      return await axios.get(url, params);
    } catch (error) {
      console.log(error);
    }
  };
   
  const getMovies1 = async () => {
    let movieInfo= document.getElementById("movieInfo");
    movieInfo.innerHTML="";
    let selectedMovie = document.getElementById("select")
    const movieData = await getData ("https://api.themoviedb.org/3/search/movie", {
    params: {
      api_key: "c6b2390c3ab4bfbd0e064d952df483c9",
        query: selectedMovie.value,
      }
    });
   
    if (movieData.data.results.length < 1) {
      return;
    }
   
    let movie= movieData.data.results[0];
      const extraData = await getData(`https://api.themoviedb.org/3/movie/${movie.id}`, {
        params: {
          api_key: "c6b2390c3ab4bfbd0e064d952df483c9",
          append_to_response: "videos",
        }
      });
   
      const trailer = extraData.data.videos.results.filter((video) => video.type === "Trailer").at(0).key;
      const p = document.createElement('p');
      const img = document.createElement('img');
      const iframe = document.createElement('iframe');
   
      p.innerHTML = `${movie.title} -- ${movie.overview} -- ${movie.release_date}`;
      img.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`
      iframe.src = `https://www.youtube.com/embed/${trailer}`
   
      info.append(p);
      info.append(img);
      info.append(iframe);
    }
   
  ;
   
  getMovies1();

Tanny Nguyen · Accepted Answer · 2022-11-18 02:52:39Z

0

you can create Vue Component:

<template>
  ......All code inside body tag go here.....
</template>  

<script>
 ....... javascript code go here ......
</script>

<style>
 ....defined CSS go here...
</style>

You can read here https://snipcart.com/blog/vue-component-example-tutorial

About v-if or v-for, you can read here https://vuejs.org/guide/essentials/conditional.html

edited Nov 18, 2022 at 2:52

answered Nov 18, 2022 at 2:45

Tanny Nguyen

1404 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting HTML, CSS, and JavaScript files to a vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related