Carrot store fetch challenge #3
Conversation
nicoleta-tuturuga
commented
Mar 8, 2020
nicoleta-tuturuga
commented
- I made the site responsive
- I fetched the resources from the given server and rendered the data dynamic in the list page and details page
- I used query params to send the value of the product id in the url from list page to details page
- I used html template with fetch to reuse the header and footer
| name = name.replace(/[\[\]]/g, '\\$&'); | ||
| var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), | ||
| results = regex.exec(url); | ||
| if (!results) return null; |
There was a problem hiding this comment.
stiu ca nu am discutat inca despre asta dar ar fi o buna practica sa folosim tot timpul block-uri in expresii conditionale ca si if-urile:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#Description
| function getParameterByName(name, url) { | ||
| if (!url) url = window.location.href; | ||
| name = name.replace(/[\[\]]/g, '\\$&'); | ||
| var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), |
There was a problem hiding this comment.
Sa incerci sa pastrezi consistenta - daca ai folosit let, sa folosesti doar let sau daca e var doar var. Dar e o practica buna sa folosesti doar let si const
|
|
||
|
|
||
| // logic to get de id from query param | ||
| function getParameterByName(name, url) { |
There was a problem hiding this comment.
niste sugestii la aceasta functie:
-
poti sa te folosesti de window.location.search ca sa iti dea direct ce vine dupa '?' in url:
https://developer.mozilla.org/en-US/docs/Web/API/Location
https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search
si asa mai scapi putin de regex-uri -
alta varianta ar fi sa folosesti acest API: https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams#Example dar sa ai in vedere ca nu merge pentru Internet Explorer si ar fi nevoie de un Polyfill: https://developer.mozilla.org/en-US/docs/Glossary/Polyfill
-
se poate include in HTML folosind acest CDN: https://cdnjs.com/libraries/url-search-params
There was a problem hiding this comment.
"poti sa te folosesti de window.location.search ca sa iti dea direct ce vine dupa '?' in url:
https://developer.mozilla.org/en-US/docs/Web/API/Location
https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search
si asa mai scapi putin de regex-uri"
Nevermind 😄 am vazut dupa cum ai folosit si si ca te-ai folosit si de window.location.search e oki
|
|
||
| } | ||
|
|
||
| function getUsersData(user) { |
There was a problem hiding this comment.
Legat de naming-ul functiilor, parerea mea e ca s-ar potrivi mai bine displayUserData(user) sau chiar displayComments(user) deoarece get reprezinta actiunea de a lua ceva de undeva si altfel poate introduce confuzie. In cazul getDataFromServer se potriveste pentru ca iei datele de pe server.
La fel si pentru getProductDetails
| justify-content: center; | ||
| } | ||
|
|
||
| .carrot-svg{ |
There was a problem hiding this comment.
ar trebui un spatiu pus inainte de acolada:D ( si pentru restul) autoindent din vs code
| if (productId === null) { | ||
| productId = "0" | ||
| } | ||
|
|
There was a problem hiding this comment.
It is possible to assign a default value to productId by using the || (OR) operator, e.g.
productId = getParameterByName("id", window.location.search) || "0"
This would filter out any "falsy" value ("", 0, null, undefined, etc...)
| for (let i = 0; i < data.comments.length; i++) { | ||
| let user = data.comments[i]; | ||
| getUsersData(user); | ||
| } |
There was a problem hiding this comment.
It is good practice to extract a deeply nested value in a variable if we need to access it many times (e.g. for loop)
const deeplyNestedVariable = a.b.c.d.e.f
for (let i = 0; i < deeplyNestedVariable ; i++) {...}
That way we do not have to look through the object chain every loop.
We could also inline the user variable, e.g. :
getUsersData(data.comments[i]);
|
Good job 👍 |
