├── rc1.png ├── rc2.png ├── package.json ├── views └── index.ejs ├── README.md ├── index.js ├── public └── styles │ └── main.css └── recipe.json /rc1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahekar001aditya/Recipe_page_using_JSON/HEAD/rc1.png -------------------------------------------------------------------------------- /rc2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahekar001aditya/Recipe_page_using_JSON/HEAD/rc2.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "5.2-json", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "body-parser": "^1.20.2", 15 | "ejs": "^3.1.9", 16 | "express": "^4.18.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Taco Recipes 6 | 7 | 8 | 9 | 10 |

Taco Town 🌮

11 | 12 | 17 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌮 Recipe Page using JSON 2 | 3 | A simple website showcasing taco recipes dynamically using JSON data. 4 | Built with **EJS**, **CSS**, and **Node.js + Express**. 5 | 6 | --- 7 | | 🌮 Recipe Page 1 | 🌮 Recipe Page 2 | 8 | |------------------|------------------| 9 | | ![Recipe Page 1](./rc1.png) | ![Recipe Page 2](./rc2.png) | 10 | 11 | 12 | --- 13 | ## ✨ Features 14 | - Select between **Chicken, Beef, or Fish** tacos 15 | - Recipes rendered dynamically using **EJS** 16 | - JSON-based recipe data for easy updates 17 | - Clean modular structure with `views` and `public` folders 18 | - Easy setup with **npm** 19 | 20 | --- 21 | 22 | ## 📂 Project Structure 23 | .
24 | ├── views/
25 | │ └── index.ejs
26 | ├── public/
27 | │ └── styles/
28 | │ └── main.css
29 | ├── recipe.json
30 | ├── index.js
31 | ├── package.json
32 | └── README.md
33 | 34 | 35 | --- 36 | 37 | ## 🚀 Installation & Setup 38 | 39 | 1. **Clone the repository** 40 | ```bash 41 | git clone https://github.com//Recipe_page_using_JSON.git 42 | cd Recipe_page_using_JSON 43 | ``` 44 | 45 | 2. **Install dependencies** 46 | ```bash 47 | npm install 48 | ``` 49 | 50 | 3. **Start the server** 51 | ```bash 52 | node index.js 53 | ``` 54 | 55 | # Open in browser

56 | [https://localhost:3000](https://localhost:3000) 57 | 58 | 59 | --- 60 | 61 | 62 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import bodyParser from "body-parser"; 3 | 4 | const app = express(); 5 | const port = 3000; 6 | 7 | 8 | const recipeJSON = 9 | '[{"id": "0001","type": "taco","name": "Chicken Taco","price": 2.99,"ingredients": {"protein": {"name": "Chicken","preparation": "Grilled"}, "salsa": {"name": "Tomato Salsa","spiciness": "Medium"}, "toppings": [{"name": "Lettuce", "quantity": "1 cup", "ingredients": ["Iceberg Lettuce"] }, {"name": "Cheese", "quantity": "1/2 cup", "ingredients": ["Cheddar Cheese", "Monterey Jack Cheese"] }, {"name": "Guacamole", "quantity": "2 tablespoons", "ingredients": ["Avocado", "Lime Juice", "Salt", "Onion", "Cilantro"] }, {"name": "Sour Cream", "quantity": "2 tablespoons", "ingredients": ["Sour Cream"] } ] } },{"id": "0002","type": "taco","name": "Beef Taco","price": 3.49,"ingredients": {"protein": {"name": "Beef","preparation": "Seasoned and Grilled"}, "salsa": {"name": "Salsa Verde","spiciness": "Hot"}, "toppings": [{"name": "Onions", "quantity": "1/4 cup", "ingredients": ["White Onion", "Red Onion"] }, {"name": "Cilantro", "quantity": "2 tablespoons", "ingredients": ["Fresh Cilantro"] }, {"name": "Queso Fresco", "quantity": "1/4 cup", "ingredients": ["Queso Fresco"] } ] } },{"id": "0003","type": "taco","name": "Fish Taco","price": 4.99,"ingredients": {"protein": {"name": "Fish","preparation": "Battered and Fried"}, "salsa": {"name": "Chipotle Mayo","spiciness": "Mild"}, "toppings": [{"name": "Cabbage Slaw", "quantity": "1 cup", "ingredients": [ "Shredded Cabbage", "Carrot", "Mayonnaise", "Lime Juice", "Salt" ] }, {"name": "Pico de Gallo", "quantity": "1/2 cup", "ingredients": ["Tomato", "Onion", "Cilantro", "Lime Juice", "Salt"] }, {"name": "Lime Crema", "quantity": "2 tablespoons", "ingredients": ["Sour Cream", "Lime Juice", "Salt"] } ] } }]'; 10 | 11 | app.use(express.static("public")); 12 | app.use(bodyParser.urlencoded({ extended: true })); 13 | 14 | let data; 15 | 16 | app.get("/", (req, res) => { 17 | res.render("index.ejs",{recipe: data}); 18 | }); 19 | 20 | app.post("/recipe", (req, res) => { 21 | 22 | switch(req.body.choice){ 23 | case "chicken": 24 | data = JSON.parse(recipeJSON)[0]; 25 | break; 26 | case "bee": 27 | data = JSON.parse(recipeJSON)[1]; 28 | break; 29 | case "fish": 30 | data = JSON.parse(recipeJSON)[2]; 31 | break; 32 | default: 33 | break; 34 | 35 | } 36 | res.redirect("/"); 37 | }); 38 | 39 | app.listen(port, () => { 40 | console.log(`Server running on port: ${port}`); 41 | }); 42 | -------------------------------------------------------------------------------- /public/styles/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | body { 5 | font-family: Arial, sans-serif; 6 | margin: 20px; 7 | padding: 0; 8 | background-color: #e26e5c; 9 | background-image: url("data:image/svg+xml,"); 10 | text-align: center; 11 | } 12 | h1 { 13 | display: inline; 14 | font-size: 5rem; 15 | text-align: center; 16 | color: #e26e5c; 17 | background-color: white; 18 | } 19 | 20 | h2 { 21 | color: #e26e5c; 22 | } 23 | 24 | .buttons { 25 | display: flex; 26 | justify-content: center; 27 | margin: 20px; 28 | } 29 | 30 | button { 31 | font-size: 5rem; 32 | } 33 | 34 | .buttons button { 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | justify-content: center; 39 | border: none; 40 | background-color: white; 41 | cursor: pointer; 42 | padding: 0; 43 | margin: 0 10px; 44 | width: 180px; 45 | height: 180px; 46 | border-radius: 50%; 47 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 48 | transition: transform 0.3s, box-shadow 0.3s; 49 | } 50 | 51 | .buttons button:hover { 52 | transform: scale(1.05); 53 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 54 | } 55 | 56 | .buttons button img { 57 | width: 120px; 58 | height: 120px; 59 | object-fit: cover; 60 | border-radius: 50%; 61 | margin-bottom: 10px; 62 | } 63 | 64 | #recipeContainer { 65 | background-color: white; 66 | margin-top: 40px; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | } 71 | 72 | #recipeTitle { 73 | color: #e26e5c; 74 | } 75 | 76 | #ingredientsList { 77 | margin: 0; 78 | padding: 0; 79 | list-style-type: none; 80 | } 81 | 82 | #ingredientsList li { 83 | margin-bottom: 10px; 84 | color: #555; 85 | } 86 | -------------------------------------------------------------------------------- /recipe.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "0001", 4 | "type": "taco", 5 | "name": "Chicken Taco", 6 | "price": 2.99, 7 | "ingredients": { 8 | "protein": { 9 | "name": "Chicken", 10 | "preparation": "Grilled" 11 | }, 12 | "salsa": { 13 | "name": "Tomato Salsa", 14 | "spiciness": "Medium" 15 | }, 16 | "toppings": [ 17 | { 18 | "name": "Lettuce", 19 | "quantity": "1 cup", 20 | "ingredients": ["Iceberg Lettuce"] 21 | }, 22 | { 23 | "name": "Cheese", 24 | "quantity": "1/2 cup", 25 | "ingredients": ["Cheddar Cheese", "Monterey Jack Cheese"] 26 | }, 27 | { 28 | "name": "Guacamole", 29 | "quantity": "2 tablespoons", 30 | "ingredients": ["Avocado", "Lime Juice", "Salt", "Onion", "Cilantro"] 31 | }, 32 | { 33 | "name": "Sour Cream", 34 | "quantity": "2 tablespoons", 35 | "ingredients": ["Sour Cream"] 36 | } 37 | ] 38 | } 39 | }, 40 | { 41 | "id": "0002", 42 | "type": "taco", 43 | "name": "Beef Taco", 44 | "price": 3.49, 45 | "ingredients": { 46 | "protein": { 47 | "name": "Beef", 48 | "preparation": "Seasoned and Grilled" 49 | }, 50 | "salsa": { 51 | "name": "Salsa Verde", 52 | "spiciness": "Hot" 53 | }, 54 | "toppings": [ 55 | { 56 | "name": "Onions", 57 | "quantity": "1/4 cup", 58 | "ingredients": ["White Onion", "Red Onion"] 59 | }, 60 | { 61 | "name": "Cilantro", 62 | "quantity": "2 tablespoons", 63 | "ingredients": ["Fresh Cilantro"] 64 | }, 65 | { 66 | "name": "Queso Fresco", 67 | "quantity": "1/4 cup", 68 | "ingredients": ["Queso Fresco"] 69 | } 70 | ] 71 | } 72 | }, 73 | { 74 | "id": "0003", 75 | "type": "taco", 76 | "name": "Fish Taco", 77 | "price": 4.99, 78 | "ingredients": { 79 | "protein": { 80 | "name": "Fish", 81 | "preparation": "Battered and Fried" 82 | }, 83 | "salsa": { 84 | "name": "Chipotle Mayo", 85 | "spiciness": "Mild" 86 | }, 87 | "toppings": [ 88 | { 89 | "name": "Cabbage Slaw", 90 | "quantity": "1 cup", 91 | "ingredients": [ 92 | "Shredded Cabbage", 93 | "Carrot", 94 | "Mayonnaise", 95 | "Lime Juice", 96 | "Salt" 97 | ] 98 | }, 99 | { 100 | "name": "Pico de Gallo", 101 | "quantity": "1/2 cup", 102 | "ingredients": ["Tomato", "Onion", "Cilantro", "Lime Juice", "Salt"] 103 | }, 104 | { 105 | "name": "Lime Crema", 106 | "quantity": "2 tablespoons", 107 | "ingredients": ["Sour Cream", "Lime Juice", "Salt"] 108 | } 109 | ] 110 | } 111 | } 112 | ] 113 | --------------------------------------------------------------------------------

Taco Town 🌮

<%= recipe.name %>

Ingredients:

Pick your favourite taco ingredient 👆