Skip to content
Snippets Groups Projects
Select Git revision
  • 8e92863cbd53ddc697a87c292832011336187d4c
  • master default
  • goodpaths
  • movie-page
  • front-bilel
  • vieille-branche
  • octofront
  • branche-TP-de-Tom
8 results

SearchBar.vue

Blame
  • user avatar
    Juliette Kalflèche authored
    a965a3c7
    History
    SearchBar.vue 1.43 KiB
    <template>
       <input type="text" v-model="input" placeholder="Search movies..." />
    </template>
    
    <script>
    import axios from "axios";
    
    export default  {
      data: function () {
        return {
          moviename: "",
          movies: [],
          moviesLoadingError: "",
        };
      },
      methods: {
        fetchMovies: function () {
          axios
            .get(
              `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
            )
            .then((response) => {
              this.movies = response.data.results;
            })
            .catch((error) => {
              this.moviesLoadingError = "An error occured while e ing movies.";
              console.error(error);
            });
        },
      },
    };
    </script>
    
    <style scoped>
    @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
    
    input {
      display: block;
      width: 350px;
      margin: 20px auto;
      padding: 10px 45px;
      background: white url("../assets/loupe.png") no-repeat 15px center;
      background-size: 15px 15px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }
    
    .item {
      width: 350px;
      margin: 0 auto 10px auto;
      padding: 10px 20px;
      color: white;
      border-radius: 5px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }
    
    .movie {
      background-color: rgb(97, 62, 252);
      cursor: pointer;
    }
    
    .error {
      background-color: tomato;
    }
    </style>