-
Notifications
You must be signed in to change notification settings - Fork 60
Technigo classmate assesment #44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verkligen ett bra jobb Rebecca. Din kod är väldigt lättläst, och du kommenterar så att man förstår vad du velat åstadkomma. Utförandet är snyggt, och enligt instruktionerna. Jag har inte något att påpeka. Suuuuuperbra jobbat!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job with this project!
Your code is clean and structured and easy to follow. It seems like you really made an effort to understand every part of the code based on your comments.
Keep up the good work
| const myHeaders = new Headers(); | ||
| myHeaders.append('x-api-key', '0c625ab60e6a40a1a4b6cc2e4a5fe9b0'); | ||
| // Tells the API that we want the data in JSON format | ||
| myHeaders.append('Content-Type', 'application/json') | ||
|
|
||
| const requestOptions = { | ||
| method: 'GET', // We want to GET (fetch) data | ||
| redirect: 'follow', | ||
| headers: myHeaders // API-key sends as a HTTP-header, more safe without the key in the URL | ||
| }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
great that you have investigated in this. We will learn more about storing API keys in a secret and secure way
| if (!recipesToShow || recipesToShow.length === 0) { | ||
| recipeContainer.innerHTML = '<p class="empty-state-message">Sorry, no recipes match your filter. Please try another one!</p>'; | ||
| return; // terminate the function otherwise it would runt map() with an empty list | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good fallback to have an empty state
| cardOverlay.addEventListener("click", (event) => { | ||
| // Checks if the clicked element was the background itself, and not the box inside it | ||
| if (event.target === cardOverlay) { | ||
| cardOverlay.classList.remove("visible");// Hides the popup window. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
⭐
| <!-- ================================================== | ||
| Scripts | ||
| ================================================== --> | ||
| <script src="backup-script.js"></script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is it called backup-script?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did not want the first one to crash with the changes that I did in my first script.js, but when I finished the backup script I went with that instead :)
| --clr-primary: rgba(0, 24, 164, 1); | ||
| --clr-primary-1: rgba(204, 255, 226, 1); | ||
| --clr-secondary: rgba(255, 101, 137, 1); | ||
| --clr-secondary-1: rgba(255, 236, 234, 1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yay! css variables
https://recipe-assignment-technigo.netlify.app/