diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7aaa95a6926b8bc8228ef1b4c6b13f2fd7cb4162..bfc105717922d387cc711c1c7ba3e1efb6e43f03 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,25 +1,23 @@
<template>
- <div class="nav">
- <router-link class="nav-link" to="/">Home</router-link> |
- <router-link class="nav-link" to="/counter">Counter</router-link> |
- <router-link class="nav-link" to="/users">Users</router-link> |
- <router-link class="nav-link" to="/about">About</router-link>
- </div>
+ <Banner />
+ <NavBar />
<router-view />
+ <Footer />
</template>
-<style scoped>
-.nav {
- text-align: center;
- padding: 30px;
-}
+<script>
+import NavBar from "@/components/NavBar.vue";
+import Footer from "@/components/Footer.vue";
+import Banner from "@/components/Banner.vue";
-.nav-link {
- font-weight: bold;
- color: #2c3e50;
-}
+export default {
+ name: "App",
+ components: {
+ NavBar,
+ Footer,
+ Banner,
+ },
+};
+</script>
-.nav-link.router-link-exact-active {
- color: #42b983;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..abae93914fcfa57de1be67d23b56816fa21f8975 100644
Binary files a/frontend/src/assets/logo.png and b/frontend/src/assets/logo.png differ
diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1080e0961d4025f3c821b023c5ea5756668cb7aa
--- /dev/null
+++ b/frontend/src/components/Banner.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="banner">
+ <Text>CaCaoCritics</Text>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Banner",
+};
+</script>
+
+<style>
+.banner {
+ text-align: left;
+ background-color: #FF68AD;
+}
+</style>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12c47bad48905e8afea35edf3754e1291f8cee0b
--- /dev/null
+++ b/frontend/src/components/Footer.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="footer">
+ <h4>Footer</h4>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Footer",
+};
+</script>
+
+<style>
+.footer {
+ text-align: center;
+ background-color: #FF68AD;
+}
+</style>
diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e8ab7ea554ef61f31ed65ba790c8e92655cebe3
--- /dev/null
+++ b/frontend/src/components/Movie.vue
@@ -0,0 +1,27 @@
+<template>
+ <table>
+ <thead>
+ <th>Titre</th>
+ <th>Date de sortie</th>
+ <th>Image</th>
+ </thead>
+ <tbody>
+ <tr v-for="movie in movies" :key="movie.id">
+ <td>{{ movie.title }}</td>
+ <td>{{ movie.release_date }}</td>
+ <td> <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" /> </td>
+ </tr>
+ </tbody>
+ </table>
+</template>
+
+<script>
+export default {
+ props: {
+ movies: Array,
+ },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f87eacb6a597c0e908473894143339aaf9423492
--- /dev/null
+++ b/frontend/src/components/NavBar.vue
@@ -0,0 +1,30 @@
+<template>
+ <div class="nav">
+ <router-link class="nav-link" to="/">Accueil</router-link> |
+ <router-link class="nav-link" to="/counter">Counter</router-link> |
+ <router-link class="nav-link" to="/users">Users</router-link> |
+ <router-link class="nav-link" to="/about">About</router-link>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "NavBar",
+};
+</script>
+
+<style scoped>
+.nav {
+ text-align: center;
+ padding: 30px;
+}
+
+.nav-link {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+.nav-link.router-link-exact-active {
+ color: #FF68AD;
+}
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index afd20648c60c6ede43306e29c93df55ce80ed89f..0a2fe0f243db853c7daf6e8f614b941a921f3ae8 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,84 +1,51 @@
<template>
<div class="home">
+ <h1>Bienvenue sur CaCaoCritics</h1>
<img alt="Vue logo" src="../assets/logo.png" />
- <h1>Welcome to Your Vue.js App</h1>
+ <br />
+ <input type="text" v-model="moviename" placeholder="enter a movie name"/>
+ <div class="film-name">Le film est : {{ moviename }}</div>
+ <li v-for="movie in movies" :key="movie.id">
<p>
- For a guide and recipes on how to configure / customize this project,<br />
- check out the
- <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
+ {{ movie.title }}
</p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
- target="_blank"
- >babel</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
- target="_blank"
- >router</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
- target="_blank"
- >eslint</a
- >
- </li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li>
- <a href="https://vuejs.org" target="_blank">Core Docs</a>
- </li>
- <li>
- <a href="https://forum.vuejs.org" target="_blank">Forum</a>
- </li>
- <li>
- <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
- </li>
- <li>
- <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
- </li>
- <li>
- <a href="https://news.vuejs.org" target="_blank">News</a>
- </li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li>
- <a href="https://router.vuejs.org" target="_blank">vue-router</a>
- </li>
- <li>
- <a href="https://vuex.vuejs.org" target="_blank">vuex</a>
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-devtools#vue-devtools"
- target="_blank"
- >vue-devtools</a
- >
- </li>
- <li>
- <a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a>
- </li>
- <li>
- <a href="https://github.com/vuejs/awesome-vue" target="_blank"
- >awesome-vue</a
- >
- </li>
- </ul>
+ <p>
+ <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" />
+ </p>
+ </li>
</div>
</template>
<script>
+import axios from "axios";
+
export default {
name: "Home",
+ 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 fetching movies.";
+ console.error(error);
+ });
+ },
+ },
+ created() {
+ this.fetchMovies();
+ },
};
</script>
@@ -103,6 +70,6 @@ li {
}
a {
- color: #42b983;
+ color: #FF68AD;
}
</style>