Forkify website created from Udemy's The Complete JavaScript Course by Jonas Schmedtmann. Personal modifications were made to resolve functionality issues and layout concerns. Those are clarified below.
-
Download Node.js (reminder: adjust specifications of your local machine) and install: Download Node.js
Note: Includes Node Package Manager (npm)
-
Download the zip file from this repo: Download zip
-
The development files are all located in the start_here folder.
-
Open up your terminal/command prompt and navigate to your start_here folder. Install dependencies with
$ npm install& type$ npm run startto start your webpack server and begin development. -
Located in the src file, on line 434 in index.html, change
{%NAME%}with your first and last name. -
You will need to create a spoonacular api account to obtain the API key.
-
In the API Console, click on Profile.
- Click on the Show/ Hide API Key button. Copy the API Key. Located in the js folder, replace the
{%API_KEY%}in the config.js file. (The free plan only allows 150 points per day, then no more calls)
-
In your terminal, type
$ npm run buildto package your production code. Deploy!
As of February 2020, Jonas has updated his javaScript course. I have not viewed the recent changes so I can neither confirm nor deny that he resolved the issues from the 2018 edition.
| Issue | Resolution |
|---|---|
| Uncaught (in promise) TypeError: Cannot read property 'classList' of null | if (document.querySelector(`.results__link[href*="${id}"]`)) { document.querySelector(`.results__link[href*="${id}"]`).classList.add('results__link--active'); } added to highlightSelected function in searchView.js. Comment left: when displaying recipe from favorites, error occurs when recipe is not in results list |
| food2fork.com has shut down | directions direct user to create a spoonacular api account |
| Mobile view broken | .container { width: 100%; margin: 0; border-radius: 0; background-color: #fff; overflow: hidden; box-shadow: 0 2rem 6rem 0.5rem rgba(101, 90, 86, 0.2); display: flex; flex-flow: column wrap; } .header { grid-area: head; background-color: #F9F5F3; display: flex; flex-flow: row wrap; justify-content: center; } .header__logo { height: 4.5rem; display: block; } .pic, .search, .likes { margin: 4% 0; } @media only screen and (min-width: 40em) { .header { align-items: center; justify-content: space-between; } .header__logo { margin-left: 4rem; } .container { max-width: 120rem; margin: 4vw auto; border-radius: 6px; display: grid; grid-template-rows: 10rem minmax(100rem, auto); grid-template-columns: 1.1fr 2fr 1.1fr; grid-template-areas: "head head head" "list recipe shopping"; } .pic, .search, .likes { margin: 0; } } @media only screen and (min-width: 68.75em) { html { font-size: 62.5%; } } in style.css in the css folder |
<picture class="pic"> <img src="img/logo.png" alt="Logo" class="header__logo"> </picture> in index.html |
renderRecipe function points to a different URL |
| recipe.publisher is not accessible from getResults async function | await Promise.all(this.result.map(async recipe => { const res = await axios(`${proxy}/https://api.spoonacular.com/recipes/${recipe.id}/information?apiKey=${key}`); recipe.publisher = res.data.sourceName; })); in Search.js in the models folder. This code is commented out due to 30 calls (points) made per search |
| calcTime(), calcServings(), and parseIngredients() are no longer needed | the code has been commented out in the Recipe.js file. The updated function is parseIngredients() { const newIngredients = this.ingredients.map(el => { let rObj = {}; rObj.count = el.amount; rObj.unit = el.unit; rObj.ingredient = el.originalName; return rObj; }); this.ingredients = newIngredients; }. Note, any references to the old functions have been commented out |
Desktop:
Mobile:
