Recipe book flipped-coding

How To Make A Recipe Book
Flipped Coding Workbook

Make your HTML file.
Create a new file named "recipe-book.html" and start with your basic
HTML code.
Now start filling in the head element.
This is where the behind the scenes stuff happens.
You will link to your CSS and JavaScript files here, but don't worry
because you will be making those files later on.
First you will use the link element to make a reference to the style sheet
you will make.
The link element uses the href attribute to tell the browser where it
should look for styles.
Give the href attribute a value of "recipe-styles.css" and you're done.
Next you will use the script element to reference the JavaScript file you'll
be making later.
The script element uses the src attribute to tell the browser where to find
the JavaScript it will run on the page.

Just as a side note, you can have multiple link and script elements that
reference different files.
Now you can turn your attention to the body element.
This is where everything that you see on a screen goes.
Just to see how the recipes will look, make a simple one first.
In the example, there are only four elements that make up a recipe card.
You will have a div element that acts as a container for the recipe details.
Then you will have three div elements inside of the container that hold the
title of the recipe, the ingredients, and the cooking instructions.
If you notice, all of the current elements have different class attributes.
The reason you want to use classes here instead of ids is because you will
be reusing styles to make all of the recipe cards look the same.
Here you'll see my famous (very basic, but delicious) taco recipe as an
example.
Feel free to use any other title, ingredient list, or instructions to replace
my recipe.

You are about halfway done with the HTML file now.
The next element you're going to make is another div, but when we get to
the style sheet and the JavaScript, you'll see how to make a div behave like
a button.
For now go ahead and create another div element and give it an id
attribute of "add-recipe-card".
This has an id instead of a class because you will only use this name once
in the entire project.
The last thing you're going to add to your HTML file is a form element that
contains four sub-elements.
You are making this form so that you will be able to add other recipe cards
to your recipe book and you need a place to enter all of the new
information.

Take a note that the form element has a class attribute.
Why do you think it has a class instead of an id?
Think about it for a moment and I'll explain why in the CSS section.
For now, add an input element to inside of the form.
This input is going to be used to get the title of a new recipe.
Give it a type attribute of "text", a name attribute with the value "new-
recipe-title", and a placeholder attribute with some simple instructions of
what should be entered in this field.
Next make a textarea element.
This is where you will be able to write the ingredients you need.
Give the textarea a type of "text", a name of "new-recipe-ingredients", and
a placeholder that tells you to enter the ingredients.
You need one more textarea for the cooking instructions.
So make a new textarea element and give it a type of "text", a name of
"new-recipe-instructions", and a placeholder telling you to enter the
cooking instructions.
The last thing you need to add to this form and to the entire HTML file is a
button.
This button is what you will click after you have entered all of your recipe
information.
All you have to do here is give it a type of "button" and write some text
between the button tags.
Here's what your code should look like.

Now that you have finished the HTML file, open it in your browser.
It should look something like this.

It's ugly right now, but once you finish your style sheet it will be a lot
easier to read and work with.
Just to make sure that all of your code is right, here is what the entire
HTML file should look like.

Make your CSS file.
You are officially a third of the way through you recipe app.
It doesn’t do anything yet, but it will soon enough.
Now it's time to style it.
Make a new file and save it as "recipe-styles.css".
Start by adding styles to the div with the "add-recipe-card" id.
When you are targeting an element by an id attribute, always include a
pound sign (#) in front of the id name.
That's how this CSS selector works.
After you have the selector, you can start adding style properties.
In this case, you'll be adding seven properties.
You want the button to be noticeable so that means you want to position
it in a good spot and give it the size and color it needs to stand out.
First you'll add a background color.
Give it the hexadecimal value you see in the following code.
Next you'll want to change the color of the font.
You do that by using the color property.
Give it the hexadecimal value you see next to it in the following code.
Now you want to adjust the font size so that it's readable and it draws
your attention to it.
The value it has makes it 1.3 times bigger than the normal font size.

Make your CSS file.
Then you'll add some padding to the button so that it really looks like a
button.
Padding is responsible for the spacing inside of an element.
Then you get to the positioning part.
The fixed value is going to hold that button in the same place regardless of
whether you scroll down the page or not.
You'll always be able to see it.
To put the button in the right position, you'll use the right and top
properties.
This dictates how far from those edges the button should be.
This is what your button styles should look like.
Now you're ready for a few selectors with less properties.
To really make that div element act like a button, it needs to change when
you hover over it.

Make your CSS file.
Have you ever noticed that almost all buttons change colors a little when
you hover over them?
You're going to learn how that works.
You'll use the same id selector that you used before except now you'll add
the pseudo-selector called hover.
Any styles that you put on this selector will only show when you hover
over that div.
To keep the color consistent, you're going to make it fade a little.
There are a few ways to do that, but you'll be using the rgba format.
This will give you the same color with some opacity.
Now you need to set a font type for everything in your recipe book.
To do that, you'll use the font-family property on the body element.
You can type the name of any font you want here, but keep in mind that
font might not be available on every computer.
That's why you use the sans-serif back up. That will let the browser pick a
font similar to yours.

Make your CSS file.
It's time for a bit of explanation.
Remember that class you only used once in the HTML file?
This is what it does.
You set the display property to none so that you can't see the form on the
screen until you click the button.
The reason it was a class instead of an id is because this is a fairly common
style and it's typically used to hide and show multiple elements.
If you haven't seen this before then you're in for a treat.
You can apply the same styles to different elements by using multiple
selectors.
For this recipe app, you want the input and textareas to look about the
same.
There's no need to add a class to each of them because you can use their
tag names as selectors.
You can apply the same styles to different elements by joining the element
names together with a comma because that's how the CSS syntax works.
You'll set the display property to block so that the elements are stacked
on top of each other instead of sitting side by side.

Make your CSS file.
Then you'll want to increase the font size to make the text you type more
readable.
After that you'll want to put a margin on the bottom of each element to
give them some spacing or else they will blend together.
Lastly you need to give them a width.
The 30% value you see isn't anything special.
It's just the number I chose because it looked good to me.
The recipe-card class is the last big thing you need to style.
Give it a border so that it will have some definition.
Otherwise it looks like some text floating on the screen.
You've seen how the font-size property works, but this kind of margin
value is new.
When you see a margin property set like this, the first value is going to be
the margin for the top and bottom of the element and the second value is
going to be the margin for the left and right of the element.
You'll see the auto value used a lot for centering elements in the screen.

Make your CSS file.
The last two properties on this selector should look familiar.
Remember, the padding property sets how much space is inside of the
element and the width determines how much horizontal space an element
takes up on the screen.
There are only two more sets of styles you need to add before your style
sheet is finished.
You're going to use the same set of styles for both the recipe ingredients
and instructions.
So chain those class selectors together and add a bottom margin to them.

Make your CSS file.
The last styles that you will be adding are for the recipe title.
You want the title to stand out so that you can quickly skim through your
recipes to find the one you need.
To do that you will use some of the properties you've seen already to
increase the font size and add a bottom margin.
Once you've finished writing all of the styles, you're recipe book should
look something like this.

Make your CSS file.
Here's the full CSS code as well.
That's all!
Your CSS file is finished!

Make your JavaScript file.
You're on the last part of this tutorial.
This is where the real programming happens and this is where you make
your recipe book work.
This code is going to be made of three main functions, but first make a
new file called "recipe-functions.js".
The first function is responsible for making the code run once the page
has been loaded.
Inside of this function you are going to make a variable that captures the
"add-recipe-card" element using the id name for in the querySelector
method.
Next you'll add an event listener that runs a function called
addRecipeCard every time that element is clicked.
After that you'll create another variable that holds the form element.
Then you can start making the addRecipeCard function.
First you'll declare the function and then you'll start adding things to it.

Inside of the function, go ahead and remove the "hidden" class from the
form element.
This will show your form on the screen after you click the "add-recipe-
card" button.
Next you'll make a variable to hold the button element.
Then you'll use that variable to add an event listener to it.
Whenever you click the button that's in the form it will called the
makeNewRecipeCard function that you are about to write.
Now you can declare this new function called makeNewRecipeCard and
start adding stuff inside of it.
The first thing you want to do is make a new variable that will hold a blank
recipe card.
That's what the createElement method does.
Then you'll want to add the right class name to that new recipe card so
that the styles will style consistent.

Next you'll want to get the values you entered into the form.
To do that you have to get the value of the element by using the value
property.
You'll put those values into variables that you can use later.
You're almost there!
Now you have to make the elements for your new recipe title, ingredients,
and instructions.
To do that, you'll need to use the insertAdjacentHTML method.
This will allow you to use a template literal string to make the HTML
element itself and to include the values you got from the input and
textareas.
All of these elements become part of the newRecipeCard you made
earlier.

It's almost over now.
You only have a few lines of code left to write.
Now that you have built a completely new recipe card, you need to
include it on the page.
To do that, you need to use the insertBefore method.
This will keep your cards in the order you put them in.
Then to finish up, you'll add the "hidden" class back to the form so that it's
not lingering with the other recipes and you want to reset that form so
that you don't have old values there when you go to add a new recipe.
That's it!
You are finally finished with your recipe book.
When you click the button to in the upper right corner you should see this.

After you finish adding your recipe details and you click the "Add Recipe"
button in the form, you should see something like this.

Here’s the full JavaScript code as well.

Call To Action
I hope that you enjoyed making your own recipe
book!
Now go add a new feature to your book.
Make it include pictures or something like that.
A quick note: if you leave the page your recipe book is
on, your recipes ARE NOT SAVED.
It takes a database of some sort to do that and a
different programming language.
If you have questions about this code or you need
some help, come to the Flipped Coding membership.
You'll be able to get direct feedback for your code and
you'll be able to ask a private community your specific
questions.
Go check it out right now!
www.flippedcoding.com/course-sign-up

Recipe book flipped-coding

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Recipe book flipped-coding

Similar to Recipe book flipped-coding (20)

Recently uploaded

Recently uploaded (20)

Recipe book flipped-coding