Forkify images are undefined in bookmarked + Netlify

@jonasschmedtmann

I set up Forkify with Fracty and latest Parcel. Can you try running it locally and on Netlify?
You can find it here https://github.com/akozdev/Forkify-Fracty-Parcel2.

1. Clone the repository (or download a ZIP)
2. Install dependencies with npm install
3. Run npm start

@akozdev the bookmarked pictures are now there locally, shall i redo the same steps for netlify part... Deploy this git to my own so i can hook it up in netlify process or is there another way :)?

Yeah, you can do that. You can fork that repo and then deploy your fork to Netlify

@akozdev the weird part is, when i try to copy your model.js it does not work unless i do this as like in my own code...
export const loadRecipe = async function (id) {
try {
const data = await AJAX(${API_URL}/${id}?key=${KEY});

• where I have the / after API URL so i can load the recipes. However now i can get the bookmarked img on but not the recipe img, if i change image: recipe.image_url to ------> image_url:recipe.image:url then i can get recipe img but the bookmarked img undefined again xD man oh boy LOL

But yes your Forkify works on local + netlify -.- how do i fix mine then xD

is it because of my dependicies ?
"devDependencies": {
"@parcel/transformer-image": "^2.0.0-rc.0",
"@parcel/transformer-sass": "^2.0.0-rc.0",
"parcel": "^2.0.0-rc.0"
},
"dependencies": {
"core-js": "^3.18.2",
"fractional": "^1.0.0",
"fracty": "^1.0.9",
"regenerator-runtime": "^0.13.9"
}

How does the API_URL look like in your config.js?
Generally, it should look like this
export const API_URL = 'https://forkify-api.herokuapp.com/api/v2/recipes/';
with the slash at the end

@akozdev Damn bro it was the motha effin / at the end of recipes in the API_URL. xD

only netlify/fracty left and my page is not responsive, on mobile it does not work, the screen is cut off ish
this is my json package

{
"name": "forkify",
"version": "1.0.0",
"description": "Recipe application",
"default": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --dist-dir ./dist"
},
"author": "jannick pedersen",
"license": "ISC",
"devDependencies": {
"@parcel/transformer-image": "^2.0.0-rc.0",
"@parcel/transformer-sass": "^2.0.0-rc.0",
"parcel": "^2.0.0-rc.0"
},
"dependencies": {
"core-js": "^3.18.2",
"fractional": "^1.0.0",
"fracty": "^1.0.9",
"regenerator-runtime": "^0.13.9"
}
}

So, does Fracty work on Netlify or not? The original app is not responsive as well. It wasn't meant for mobile, but I guess you could make it mobile-friendly with a few tweaks.

It yes work now - what a ride, lol xD

Does Jonas have a Javascript course which has a responsive part / vanilla or with npm :)?

And thanks for your time !

I'm glad it works for you 😀
Jonas has made an HTML/CSS course where he builds a responsive website, but it's not about JavaScript. Mostly about HTML and CSS.

@akozdev tbh i am mainly drawn to JS vanilla - i think NPM and frameworks have taken over alot - thats why the founder of NPM created Deno lol xD. Im gonna code Deno maybe in 2023. If Jonas do a big JS vanilla responsive, ill throw my money xD the adv dom was nice in this course though :) though i prolly gonna look into his CSS and animation course. Need more UX / design experience too on my CV