Recipes

The Odin Project's very first assignment.

The very first assigment of the Odin Project is to create a recipe page. This assigment is preceded by an introductory lesson on HTML and CSS. There were no expectations of using any styling, and certainly no JavaScript. Nonetheless, I feel like my original submission was a bit too minimalistic.

StartedMVPUpdated
19/05/202320/05/2023

Original Submission

You can view a mostly faithful recreation of my original submission here, or if you really want to get in the weeds you can see the repo.

I created a landing page with a link to two recipes.

<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Odin Recipes</title>
		</head>
 
		<body>
			<h1>Odin Recipes</h1>
			<a href="./recipes/lasagna.html">Lasagna</a>
			<a href="./recipes/risotto.html">Risotto</a>
		</body>
	</html>
<h1>Lasagna</h1>
<img src="../images/lasagna.jpg" alt="An image of a baked lasagna">
<h2>Description</h2>
<p>Delicious lasagna</p>
 
<h2>Ingredients</h2>
<ul>
	<li>Minced meat</li>
	<li>Bechamel sauce</li>
</ul>
 
<h2>Steps</h2>
<ol>
	<li>Cook minced meat</li>
	<li>Assemble</li>
</ol>

New Assignment

When I first started redoing this assignment, I went slightly overboard. I created a schema for the recipes and I was going to use a database to store them and retrieve them. I was also going to implement some kind of authentication so that users could create their own recipes, and was considering how I could use editorJS to allow users to create their own recipes with a WYSIWYG editor.

I quickly realized that this was way too much for a simple assignment, and that I was getting ahead of myself.

The goal of the original assigment was to simply familiarize oneself with the structure of a website, so I instead decided to create some statically generated pages. I liked how the Taxonomy website used mdx for static content, and I'd done something similar on my portfolio to show code snippets, so I kind of sort did the same for the recipes. In truth, I'd already made the JSON structure for the recipes, so I could have a nice accordion effect, and I simply stashed them into the field of the Markdown document.

Components

  • A grid of recipes on the landing page
  • A card for each recipe with a photo, title, and description
  • A recipe page with a photo, description, ingredients, and steps
  • An accordion for the ingredients and steps

End Result

You can view the end result here.

IntroductionLanding Page