Hello everyone.
I am trying to change my path while still working and being a father of 2 lovely children and a husband to a beautiful wife. This is my 7-month starting point from scratch. I need your positive criticisms of my last project. Thank you for everyone putting in a comment.
Things that are great:
Suggestion:
Functions like this do too much.
Separate concern and allow functions to be reused.
const fetchData = async(url) =>{
try{
const res = await fetch(url);
const data = await res.json();
pokemonIdContainer(data)
pokemonStatsContainer(data)
}catch(err){
console.log(err)
alert("Pokémon not found")
}
}
like this
const fetchData = async(url) =>{
try{
const res = await fetch(url);
const data = await res.json();
return data;
}catch(err){
console.error(`Something went wrong. GET request for url ${url}`, err);
}
return null;
}
.... later or in a new function
const pokemonData = fetchData(url)
if (pokemonData) {
pokemonIdContainer(pokemonData)
pokemonStatsContainer(pokemonData)
} else {
... show something to the screen
}
I would separate fetch data to only fetch data and let the pokemon state being handled somewhere else.
Things that are not so great:
Inconsistent usage of semicolon.
Some constant variable are set at the top for caching html elements some in functions. Declare all the elements queried by id at the top so the function body is smaller, more readable and reusable. Also that saves in memory for each function invocation. Reuse rather than recreate.
Too much styling based on ids. Classes are used in the industry because ids should be unique per page while classes can be reused.
Too much usage of window alert. You are doing a great job in the UI, make error handling and other messages part of the UI.
Naming functions can be more descriptive, take this const pokemonIdContainer = (data) =>{ could be instead named renderDataToScreen or renderPokemonToScreen, hope you see my point.
Great work nevertheless.
I want to emphasise that it is neat and you are on the right path.
The application looks great.
This is the only pokemon I know to spell the name for 
Just as an FYI, try/catch will only throw for network/server errors (500), not 400.
You should check the response using the .ok property (or .status).
The reason it works with just the try/catch is because .json() will throw an error when called on res when it was a 404. Basically, it throws a Syntax Error which is caught by the try/catch.
Thank you so much for your beneficial comments. It is so good to hear these comments at the beginning of my adventure. there was no Pokemon I know how to spell. I learned 
Thank you for your feedback lasjorg…
I still haven’t gotten to this part, but seeing other people’s work (especially the great ones, like yours) really makes me excited. I’ve completed my Responsive Web Design certification and am currently practicing and trying to perfect my HTML and CSS skills (or atleast improve them).
Really good work!
Thank you Joseph1205 for your sincere sharing. It is not easy for me to handle this path but I am excited to see what I will be evolved at the end of my adventure. I hope you will enjoy this challenge as much as I do.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
