Skip to content

Matt/javascript/minicapstone #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iammattwalsh wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Matt/javascript/minicapstone #386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69cc42a
implemented ingredient list API call, list search, saving user ingred…
iammattwalsh May 23, 2022
94e4ca2
added recipe details and sorting by missing ingredients, improved rec…
iammattwalsh May 24, 2022
962ca28
fixed timing of method calling, added possible recipes to localstorag…
iammattwalsh May 25, 2022
29e9518
added styling, made search case-insensitive, yelled at CSS
iammattwalsh May 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 161 additions & 0 deletions code/matt/javascript/minicapstone/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
body {
font-family: 'Nunito', sans-serif;
}
#app {
height: 100vh;
}
h1, h2, h3, h4, h5 {
margin-top: 5px;
margin-bottom: 5px;
}
main {
display: flex;
}
#ing-select {
height: 100vh;
background-color: #A1EF8B;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#ing-search {
flex-direction: column;
align-items: center;
}
#ing-search-results {
background-color: white;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 20vh;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
.active #ing-search-results, .active #my-ingredients {
width: 40vw;
}
.inactive #ing-search-results, .inactive #my-ingredients {
width: 18vw;
}
#ing-select a {
color: #7F80B8;
}
#ing-select a:hover {
color: #62BFED;
}
#my-ingredients {
background-color: rgba(255,255,255,.2);
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 20px;
}
#recipe-select {
height: 100vh;
background-color: #62BFED;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: center;
}
#recipe-view {
height: 100vh;
background-color: #7F80B8;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and ( max-height: 1000px ) {
#recipe-view.has-recipe {
justify-content: flex-start;
}
}
#recipe-view div {
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
}
div.active {
width: 60vw
}
div.inactive {
width: 20vw;
}
.transition, .transition * {
transition: .25s;
}
#drink-image {
max-width: 100%;
}
.active h1 {
font-size: xx-large;
}
.inactive h1 {
font-size: small;
}
#recipe-view p, #recipe-view li {
text-align: center;
}
.active p, .active li {
font-size: medium;
}
.inactive p, .inactive li {
font-size: small;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#recipe-select ul {
margin: 10px;
width: 25vw;
text-align: center;
}
.open-button {
position: absolute;
bottom: 0px;
}
.num-missing {
background-color: rgba(255,255,255,.2);
border-radius: 10px;
padding: 10px;
}
.num-missing a {
color: #7F80B8;
}
.num-missing a:hover {
color: #A1EF8B;
}
input {
text-align: center;
font-size: large;
height: 40px;
border-radius: 10px;
border: 0px;
box-sizing: border-box;
margin-top: 20px;
}
input:focus {
border: 0px;
outline: none;
}
.active input {
width: 40vw;
}
.inactive input {
width: 18vw;
}
106 changes: 106 additions & 0 deletions code/matt/javascript/minicapstone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!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>Drink Decider 2000</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize-css@2.3.1/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="js/secrets.js"></script>
<script src="js/script.js" defer></script>
</head>
<body>
<div id="app">
<main>
<div id="ing-select" :class="[isActive[0] ? 'active' : 'inactive']" class="transition">


<button @click="makeActive(0);" v-if="!(isActive[0])" class="open-button">expand</button>

<h1>
Drink Decider 2000
</h1>

<div id="ing-search">
<input type="text" v-model="ingredientSearchInput" @keyup="ingredientSearch" @keyup.enter="addToMyIngredients(ingredientSearchInput)" placeholder="search ingredients">
<div id="ing-search-results" v-if="filteredIngredients.length > 0">
<ul>
<li v-for="ingredient in filteredIngredients">
<a href="" @click.prevent="addToMyIngredients(ingredient)">
{{ ingredient }}
</a>
</li>
</ul>
</div>
</div>
<div id="my-ingredients">
<h3 v-if="myIngredients.length">my ingredients:</h1>
<h3 v-else>select ingredients to continue</h3>
<ul v-if="myIngredients.length">
<li v-for="ingredient in myIngredients">
{{ ingredient }}
</li>
</ul>
</div>
<a href="" @click.prevent="clearLocal">reset my ingredients</a>


</div>
<div id="recipe-select" :class="[isActive[1] ? 'active' : 'inactive']" class="transition">


<button @click="makeActive(1);" v-if="!(isActive[1]) && possibleRecipes.length" class="open-button">expand</button>

<h3 v-if="!(possibleRecipes.length)">
add ingredients to continue
</h3>

<div v-if="possibleRecipes.length">
<div v-for="x,index in possibleRecipes.length">
<ul v-if="possibleRecipes[index]" class="num-missing">
<h3>missing {{ index }} ingredients</h2>
<li v-for="recipe in possibleRecipes[index]">
<a href="" @click.prevent="showCurrentRecipe(recipe); makeActive(2);">
{{ recipe }}
</a>
</li>
</ul>
</div>
</div>


</div>
<div id="recipe-view" :class="[isActive[2] ? 'active' : 'inactive', currentRecipe ? 'has-recipe' : 'no-recipe']" class="transition">


<button @click="makeActive(2);" v-if="!(isActive[2]) && currentRecipe" class="open-button">expand</button>

<h3 v-if="!(currentRecipe)">
select a recipe to continue
</h3>

<div id="current-recipe" v-if="currentRecipe" :class="[isActive[2] ? 'active' : 'inactive']">
<h1 >{{ currentRecipe.name }}</h1>
<img id="drink-image" :src="currentRecipe.image" alt="currentrecipe.name">
<ul>
<li v-for="(measure, ingredient) in currentRecipe.ingredients">
{{ measure }} {{ ingredient }}
</li>
</ul>
<p>
Serve in a {{ currentRecipe.glass }}
</p>
<p>
{{ currentRecipe.instructions }}
</p>
</div>


</main>
</div>
</div>
</body>
</html>
Loading