Created
September 3, 2023 14:09
-
-
Save Isabellae4567/02c7ecd19079f7c42d64cd9b65bc1e49 to your computer and use it in GitHub Desktop.
Dynamic Ingredient Listing Script for Recipe Websites
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Recipe Ingredient Table</title> | |
| <style> | |
| /* Add CSS styling for the ingredient table */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| th, td { | |
| padding: 8px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { | |
| background-color: #f2f2f2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Delicious Recipe</h1> | |
| <!-- Create a table to list ingredients --> | |
| <table> | |
| <tr> | |
| <th>Ingredient</th> | |
| <th>Quantity</th> | |
| <th>Unit</th> | |
| </tr> | |
| <!-- You can dynamically generate rows with JavaScript or retrieve data from a database --> | |
| <tr> | |
| <td>Ingredient 1</td> | |
| <td>1</td> | |
| <td>Cup</td> | |
| </tr> | |
| <tr> | |
| <td>Ingredient 2</td> | |
| <td>200</td> | |
| <td>grams</td> | |
| </tr> | |
| <tr> | |
| <td>Ingredient 3</td> | |
| <td>2</td> | |
| <td>teaspoons</td> | |
| </tr> | |
| <!-- Add more rows as needed --> | |
| </table> | |
| <!-- You can add more content here, such as instructions, images, etc. --> | |
| <h2>Instructions</h2> | |
| <p>Follow these steps to prepare the delicious recipe:</p> | |
| <ol> | |
| <li>Step 1: Lorem ipsum dolor sit amet.</li> | |
| <li>Step 2: Consectetur adipiscing elit.</li> | |
| <li>Step 3: Integer nec odio.</li> | |
| </ol> | |
| <!-- Add more content as needed --> | |
| <footer> | |
| <p>© 2023 Delicious Recipe Website</p> | |
| </footer> | |
| </body> | |
| </html> |
Author
I’ve added a little piece of code to my site that’s all about the 7 Brew menu. You should check it out — it’ll give you a clear idea of how it looks in action.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have used this script for making a table of ingredients in my testirecipe website. Any one working on this niche can get benefit from this script.