Skip to content
This repository was archived by the owner on Oct 21, 2020. It is now read-only.

Commit 53662db

Browse files
Vivi-VoVivi-Vo
committed
Dev branch clean up
-Remove unneccessary files -Setup layout
1 parent 131f802 commit 53662db

15 files changed

+125
-117
lines changed

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VUE_APP_API_KEY=b51e4d59d50246cc93a8a0545843b45c

‎index.html

-55
This file was deleted.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@
1313
"jquery": "^3.5.1",
1414
"popper.js": "^1.16.1",
1515
"vue": "^2.6.11",
16+
"vue-router": "^3.2.0",
1617
"vuetify": "^2.3.6"
1718
},
1819
"devDependencies": {
1920
"@vue/cli-plugin-babel": "~4.4.0",
2021
"@vue/cli-plugin-eslint": "~4.4.0",
22+
"@vue/cli-plugin-router": "~4.4.0",
2123
"@vue/cli-service": "~4.4.0",
2224
"babel-eslint": "^10.1.0",
2325
"eslint": "^6.7.2",

‎public/favicon.ico

-4.19 KB
Binary file not shown.

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<noscript>
1515
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1616
</noscript>
17-
<div id="app"></div>
17+
<div id="home"></div>
1818
<!-- built files will be auto injected -->
1919
</body>
2020
</html>

‎src/App.vue

+14-17
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,33 @@ export default {
1111
name: "app",
1212
components: {
1313
home
14-
},
15-
methods: {
16-
getInstruction: function(id) {
17-
const url = `${this.url_base}/${id}/analyzedInstructions?&apiKey=${this.api_key}&stepBreakdown=true`;
18-
fetch(url)
19-
.then(res => res.json())
20-
.then(result => {
21-
this.instructions = result[0].steps;
22-
});
23-
}
2414
}
2515
};
2616
</script>
2717

2818
<style>
19+
@import url("https://fonts.googleapis.com/css2?family=Anton&family=League+Script&display=swap");
2920
#app {
30-
color: gray;
31-
font-family: monospace;
32-
min-height: 100vh;
21+
color: rgb(46, 44, 44);
22+
font-family: roboto;
23+
/* min-height: 100vh;
3324
width: 100vw;
3425
display: flex;
3526
justify-content: center;
3627
align-items: center;
37-
flex-direction: column;
28+
flex-direction: column; */
3829
margin: 0;
30+
/* background-image: url(./assets/cute-background.jpg); */
3931
}
40-
h1 {
32+
h2 {
4133
text-align: center;
34+
font-family: "Anton", sans-serif;
35+
font-style: normal;
36+
font-stretch: ultra-condensed;
4237
}
43-
#showRecipe {
44-
background-color: salmon;
38+
h1 {
39+
font-family: "League Script", cursive;
40+
text-align: center;
4541
}
42+
4643
</style>

‎src/assets/cute-background.jpg

57.8 KB
Loading

‎src/assets/logo.svg

-1
This file was deleted.

‎src/components/Home.vue

+61-23
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
<template>
2-
<v-container>
3-
<h1 id="greeting">Hi {{username}}!</h1>
4-
<h2 id="header">What's in your fridge?</h2>
2+
<v-app id="home">
3+
<v-container>
4+
<v-row dense>
5+
<v-col justify="center" alignment="center" cols="12">
6+
<h1 id="greeting">Hi there!</h1>
7+
<h2 id="header">WHAT'S IN YOUR FRIDGE?</h2>
58

6-
<v-form
7-
id="ingredientForm"
8-
class="form-group"
9-
v-for="(item, index) in ingredients"
10-
:key="index"
11-
>
12-
<v-text-field label="Ingredient" v-model="ingredients[index]" />
13-
</v-form>
9+
<v-form
10+
id="ingredientForm"
11+
class="form-group"
12+
v-for="(item, index) in ingredients"
13+
:key="index"
14+
>
15+
<v-text-field label="Ingredient" v-model="ingredients[index]" />
16+
</v-form>
1417

15-
<v-btn class="mx-2" fab dark color="indigo">
16-
<v-icon dark>mdi-plus</v-icon>
17-
</v-btn>
18-
<v-btn v-on:click="setTheme">
19-
<v-icon dark>mdi-brightness-6</v-icon>
20-
</v-btn>
21-
<v-btn v-on:click="fetchRecipe" class="btn btn-primary" id="showRecipe">SHOW RECIPES</v-btn>
22-
<recipeCard v-bind:dishes="dishes"></recipeCard>
23-
<v-btn small absolute bottom left icon @click="scrollToTop">
24-
<v-icon>mdi-arrow-up-circle</v-icon>
25-
</v-btn>
26-
</v-container>
18+
<div class="btn-group">
19+
<v-btn class="mx-2" fab dark color="indigo">
20+
<v-icon dark>mdi-plus</v-icon>
21+
</v-btn>
22+
<v-btn v-on:click="fetchRecipe" class="btn btn-primary" id="showRecipe">SHOW RECIPES</v-btn>
23+
</div>
24+
</v-col>
25+
</v-row>
26+
27+
<recipeCard v-bind:dishes="dishes"></recipeCard>
28+
29+
<v-btn large absolute bottom left icon @click="scrollToTop">
30+
<v-icon>mdi-arrow-up-circle</v-icon>
31+
</v-btn>
32+
33+
<v-btn large absolute bottom right icon v-on:click="setTheme">
34+
<v-icon dark>mdi-brightness-6</v-icon>
35+
</v-btn>
36+
</v-container>
37+
</v-app>
2738
</template>
2839

2940
<script>
@@ -72,4 +83,31 @@ export default {
7283
</script>
7384

7485
<style>
86+
@import url("https://fonts.googleapis.com/css2?family=Anton&family=League+Script&display=swap");
87+
88+
.btn-group {
89+
justify-content: center;
90+
align-items: center;
91+
display: flex;
92+
flex-direction: column;
93+
}
94+
#home {
95+
color: rgb(46, 44, 44);
96+
font-family: roboto;
97+
}
98+
#showRecipe {
99+
background-color: salmon;
100+
margin-top: 10px;
101+
padding: 10px;
102+
}
103+
h2 {
104+
text-align: center;
105+
font-family: "Anton", sans-serif;
106+
font-style: normal;
107+
font-stretch: ultra-condensed;
108+
}
109+
h1 {
110+
font-family: "League Script", cursive;
111+
text-align: center;
112+
}
75113
</style>

‎src/components/RecipeCard.vue

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
22
<v-row justify="center">
3-
<v-list v-for="dish in dishes" :key="dish.id">
4-
<v-img
5-
:src="dish.image"
6-
@click.stop="dialog=true;getRecipeIngredients(dish.id);selectedDish=dish"
7-
/>
8-
<p>{{dish.title}}</p>
9-
</v-list>
3+
<v-col v-for="dish in dishes" :key="dish.id" cols="12">
4+
<v-card class="d-flex flex-no-wrap justify-space-between">
5+
<v-img
6+
:src="dish.image"
7+
@click.stop="dialog=true;getRecipeIngredients(dish.id);selectedDish=dish"
8+
/>
9+
</v-card>
10+
</v-col>
1011

11-
<v-dialog width="600px" v-model="dialog">
12+
<v-dialog v-model="dialog">
1213
<v-card>
1314
<v-card-title id="popup">
1415
<span class="headline">{{selectedDish.title}}</span>
@@ -18,19 +19,23 @@
1819
<li v-for="item in ingredients" :key="item.index">{{item}}</li>
1920
</ul>
2021
</v-card-text>
21-
<v-btn raised color="purple lighten-4" @click="getInstruction(selectedDish.id)">Direction</v-btn>
22+
<v-btn
23+
raised
24+
color="purple lighten-4"
25+
@click="getInstruction(selectedDish.id)"
26+
>Get Direction</v-btn>
2227

2328
<v-card-text v-if="instructions.length">
2429
<ol>
2530
<li v-for="steps in instructions" :key="steps.number">{{steps.step}}</li>
2631
</ol>
2732
</v-card-text>
33+
2834
<v-card-actions>
29-
<v-spacer></v-spacer>
30-
<v-btn small absolute bottom left icon @click="scrollToTop">
35+
<v-btn icon @click="scrollToTop">
3136
<v-icon>mdi-arrow-up-circle</v-icon>
3237
</v-btn>
33-
<v-btn color="green darken-1" text @click="dialog = false">Back</v-btn>
38+
<v-btn absolute bottom right color="green darken-1" text @click="dialog = false">Back</v-btn>
3439
</v-card-actions>
3540
</v-card>
3641
</v-dialog>
@@ -50,7 +55,8 @@ export default {
5055
api_key: process.env.VUE_APP_API_KEY,
5156
url_base: "https://api.spoonacular.com/recipes",
5257
selectedDish: {},
53-
ingredients: []
58+
ingredients: [],
59+
instructionURL: ""
5460
};
5561
},
5662
methods: {
@@ -84,7 +90,7 @@ export default {
8490
</script>
8591

8692
<style>
87-
html{
93+
html {
8894
scroll-behavior: smooth;
8995
}
9096
</style>

‎src/main.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import Vue from 'vue'
2-
import app from './App.vue'
3-
import 'bootstrap';
4-
import 'bootstrap/dist/css/bootstrap.min.css';
2+
// import app from './App.vue'
3+
import home from './components/Home.vue'
54
import vuetify from './plugins/vuetify';
5+
import router from './router'
66
Vue.config.productionTip = false
77

88
new Vue({
99
vuetify,
10-
render: h => h(app)
11-
}).$mount('#app')
10+
router,
11+
render: h => h(home)
12+
}).$mount('#home')

‎src/rep.vue

Whitespace-only changes.

‎src/router/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
4+
Vue.use(VueRouter)
5+
6+
const routes = [
7+
]
8+
9+
const router = new VueRouter({
10+
routes
11+
})
12+
13+
export default router

‎style.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body, html {
22
color: gray;
3+
background: #121212;
34
font-family: monospace;
45
height: 100%;
56
display: flex;

‎yarn.lock

+6-1
Original file line numberDiff line numberDiff line change
@@ -1043,7 +1043,7 @@
10431043
webpack "^4.0.0"
10441044
yorkie "^2.0.0"
10451045

1046-
"@vue/cli-plugin-router@^4.4.6":
1046+
"@vue/cli-plugin-router@^4.4.6", "@vue/cli-plugin-router@~4.4.0":
10471047
version "4.4.6"
10481048
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.4.6.tgz#db5bb1c92afd2046376e4faa90270d6363d4b9b8"
10491049
integrity sha512-TkLdn0ZYo3zgn78Rk8doPlR+4UkGjGW2R1eGEaZEkue/mw2VhUWtTk9cKLZaYrw0eY8Ro/j+OV6mD+scyrairg==
@@ -7965,6 +7965,11 @@ vue-loader@^15.9.2:
79657965
vue-hot-reload-api "^2.3.0"
79667966
vue-style-loader "^4.1.0"
79677967

7968+
vue-router@^3.2.0:
7969+
version "3.3.4"
7970+
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b"
7971+
integrity sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg==
7972+
79687973
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
79697974
version "4.1.2"
79707975
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"

0 commit comments

Comments
 (0)