Skip to content

Commit

Permalink
added grid for home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Piyush-Bhor
Piyush-Bhor committed May 3, 2023
1 parent f14a76d commit 9d74cba
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 48 deletions.
56 changes: 24 additions & 32 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,26 @@ app.use(session({
// home page - random recipes
app.get('/',(req, res) => {
var pageData = {
recipe_title : "Ramen Noodle Coleslaw",
recipe_image : "https://spoonacular.com/recipeImages/Ramen-Noodle-Coleslaw-556177.jpg"
recipes : {
0 : {
title : "Ramen Noodle Coleslaw",
image : "https://spoonacular.com/recipeImages/Ramen-Noodle-Coleslaw-556177.jpg",
},
1 : {
title : "Ramen Noodle Coleslaw",
image : "https://spoonacular.com/recipeImages/Ramen-Noodle-Coleslaw-556177.jpg",
},
2 : {
title : "Ramen Noodle Coleslaw",
image : "https://spoonacular.com/recipeImages/Ramen-Noodle-Coleslaw-556177.jpg",
},
3 : {
title : "Ramen Noodle Coleslaw",
image : "https://spoonacular.com/recipeImages/Ramen-Noodle-Coleslaw-556177.jpg",
}
}
}
res.render('home',pageData);

});

// get recipe detail
Expand All @@ -59,29 +74,21 @@ app.get('/detail',(req, res) => {
res.render('recipe_single', pageData );
});

/*
/* Real Routes
// home page - random recipes
app.get('/',(req, res) => {
const recipeAPI = require('./api/recipe_random');
const async_random = async () => {
const response = await recipeAPI.get_random_recipe(1,['vegetarian','dessert']);
const response = await recipeAPI.get_random_recipe(4,['vegetarian','dessert']);
var pageData = {
recipe_title : response.data.recipes[0].title,
recipe_image : response.data.recipes[0].image,
recipes : response.data.recipes,
}
res.render('home',pageData);
}
async_random();
});
//get 6 results
const async_random = async () => {
const response = await recipeAPI.get_random_recipe(6,['vegetarian','dessert']);
var pageData = response.data.recipes;
res.render('home', { pageData });
}
async_random();
// get recipe detail
app.get('/detail',(req, res) => {
const recipeAPI = require('./api/recipe_detail');
Expand All @@ -94,23 +101,8 @@ app.get('/detail',(req, res) => {
res.render('recipe_single',pageData);
}
async_detail();
});*/

// get recipes using keywords (havent really tested this yet)
/*ingredients will be an array, when the user
adds a comma they separate eleements */
/*app.get('search',(req, res) => {
let ingredients = req.body.ingredients;
const recipeAPI = require('./api/recipe_search');
const async_detail = async () =>{
const response = await recipeAPI.get_recipes(9, ingredients);
var pageData = {
recipe_title : response.data.recipes[0].title,
recipe_image : response.data.recipes[0].image,
}
res.render('recipe_single',pageData);
}
});*/
});
*/

// add to favorite
app.get('/add',(req,res) => {
Expand Down
5 changes: 5 additions & 0 deletions public/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
.suggested-recipes{
margin-top:30px;
margin-bottom:50px;
text-align: center;
}

.suggested-recipes h3{
Expand All @@ -56,6 +57,10 @@
font-weight: 700;
}

.suggested-recipes .col {
padding-bottom: 20px;
}

@media screen and (max-width: 1000px) {
#large-text {
font-size:48px;
Expand Down
77 changes: 61 additions & 16 deletions views/home.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,69 @@
<img id="hero-img" src="img/hero3.png">
</section>
<section class="suggested-recipes">
<h3>Try these tasty recipes</h3>
<div class="generated">
<!--generated recipes go here-->

<%// pageData.forEach(item => { %>
<div class="recipe">
<!--onclick="toggleFavourites(pageData.id)""-->
<i class="fa-solid fa-star" id="thing" onclick="toggleFavourites()"></i>
<img src="<%= recipe_image %>" alt="food" />
<div class="recipe-info">
<h4><%= recipe_title %></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam
</p>
<h3>Try these tasty recipes</h3> <br>
<!--generated recipes go here-->
<div class="container">
<div class="row">
<div class="col">
<div class="recipe">
<!--onclick="toggleFavourites(pageData.id)""-->
<i class="fa-solid fa-star" id="thing" onclick="toggleFavourites()"></i>
<img src="<%= recipes[0].image %>" alt="food" />
<div class="recipe-info">
<h4><%= recipes[0].title %></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam
</p>
</div>
</div>
</div>
<div class="col">
<div class="recipe">
<!--onclick="toggleFavourites(pageData.id)""-->
<i class="fa-solid fa-star" id="thing" onclick="toggleFavourites()"></i>
<img src="<%= recipes[1].image %>" alt="food" />
<div class="recipe-info">
<h4><%= recipes[1].title %></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="recipe">
<!--onclick="toggleFavourites(pageData.id)""-->
<i class="fa-solid fa-star" id="thing" onclick="toggleFavourites()"></i>
<img src="<%= recipes[2].image %>" alt="food" />
<div class="recipe-info">
<h4><%= recipes[2].title %></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam
</p>
</div>
</div>
</div>
<div class="col">
<div class="recipe">
<!--onclick="toggleFavourites(pageData.id)""-->
<i class="fa-solid fa-star" id="thing" onclick="toggleFavourites()"></i>
<img src="<%= recipes[3].image %>" alt="food" />
<div class="recipe-info">
<h4><%= recipes[3].title %></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam
</p>
</div>
</div>
</div>
</div>
<%// }); %>
</div>
</section>
</main>
Expand Down

0 comments on commit 9d74cba

Please sign in to comment.