-
Notifications
You must be signed in to change notification settings - Fork 7
majd_jadalhaq-W1-Browsers #19
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?
majd_jadalhaq-W1-Browsers #19
Conversation
|
|
||
| // Image for the book | ||
| const img = document.createElement('img'); | ||
| img.src = `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`; |
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.
Clever :P I do also see that there's images of the three books provided in the repo, so there's also another way of doing it. But, this works too!
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.
Actually tho, no it appears it doesn't work! The second book seems to give back a 1x1 pixel photo 🫣
Maybe you can find a way to show all the book covers?
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.
Oh, i was trying to use cover URLs from OpenLibrary and i forgot to edit it back it doesn’t return a full image, just a tiny placeholder ,sorry for that
| } | ||
|
|
||
| li:hover { | ||
| transform: scale(1.05); |
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.
fun !
| /* 3. Add a css rule for .list-item to make the color red */ | ||
| .list-item { | ||
| color: red; | ||
| font-weight: bold; |
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 not 💪
| } | ||
|
|
||
| // Execute | ||
| hijackGoogleLogo(); |
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.
This is now doubled, because this line already exists below :P
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.
oh I accidentally left two calls to hijackGoogleLogo() its on me , sorry for that,ill edit it
|
|
||
| if (logo) { | ||
| // 2. Replace the src and srcset with HackYourFuture logo | ||
| logo.src = 'https://www.hackyourfuture.dk/static/images/logo.png'; |
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.
I don't think this image exists?
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.
tbh i guess i was too dived into the code and i thought i can predict the img url lmao
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.
I'm afraid to say I can't really check this exercise, because Google as it shows up on my computer doesn't show an img, but an svg, and also has a different alt. That being said, I wonder whether you were able to run it? The image you link would not seem to work. What's the deal here? :P
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.
I could make it work when it was an i mg ,but it breaks when Google switches to the SVG version ill try to fix it and check
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.
Well done 💪
Small note: the double check whether #time exists yet or not is a bit silly, because the function is only run once, so you know you need to make it. You wrote the function in such a way that you could run it multiple times and it would have any "additional" effects. This is not necessary in this case, but, it's also not a bad practice, and it's called "idempotency". (You can google it.)
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.
when i was studying i came a cross writing safer code so i tried that by making it exist twice since the funcction run once ,in case someone called it agaain that was the senario in my brain i will Remove the extra guard / existence check in whatsTheTime thank you
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.
I'm very happy to see that you've gotten further than the others and have the cat moving across the screen steadily until the center, where it starts dancing. However, after that, there's a bit of a mess, probably mostly due to the fact that you also have the interval still running.
If you're running into problems organizing your code and the logic (which is understandable, it's a tricky exercise), then you can ignore the following. However, if you've been copy-pasting the solution with e.g. AI and don't really know how to proceed, I'd like to point out that for a development workflow, you need to at least follow these steps:
- Make sure you open the devtools console and take note of any errors that occur, so you get early feedback on possible problems in your code.
- Make small incremental steps towards a solution, while observing that your edits make actual changes in how your solution is working. It feels like you just put all the code in, without getting any feedback from your solution.
- Use tools like
console.log(...)to figure out what's going on during the execution of your code, it you don't understand it. This can be extremely useful!
Please try to redo this exercise, following this process.
If you can't get any further with this exercise, it might be wise to schedule a little call (possibly shared with others) to discuss how to approach this kind of exercise. Let me know :)
| title: 'The Most Human Human', | ||
| author: 'Brian Christian', | ||
| isbn: '978-1617933431', | ||
| image: 'the_most_human_human.jpg', |
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.
Haha, yes, that's also a way to do it 😅
Except this is not per the exercise. The exercise states you should try to solve it within the function, not by changing the array myBooks.
I'll give you a tip: you can try to reconstruct the image names from the book titles, by doing a little processing on the title.
No description provided.