Select Git revision
SearchBar.vue
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>