Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page using mspaint,WindowTop,VSC,Brave Browser.

GHNetCode 170

@GHNetCode

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Thank you FrontEndMentor yet again for this challenge! It was great to put together and learn about JSON API which is my FIRST API project now completed. Muchly appreciated and i was surprised how easy it was to implement. Due to the interface being quite simple in design i could not resist but give it some life with Animations. Please do have a whirl and let me know what you think. One question i do have in regards to the animations, is there a way of doing it via CSS instead of via JS to replay the animation? I managed to get it as far as playing on the first push of the button, but on the second press onwards, there was no joy in the animation playing... I suspect it might have something to do with the name of the KeyFrame and using it in conjuction with the "animation-name" attribute. One last comment and bit of great advice for those who are using "ontouch" And "onclick" to handle their events in JS, just to say there is another event called "pointerdown" that will handle BOTH so no need to duplicate your code. BR, Mark.

Community feedback

AC 🍀 340

@alleycaaat

Posted

Congrats on finishing the project! APIs were daunting at first to me, but they're really not that bad and really open up so many fun programming opportunities.

Can you elaborate on your question about the animation? When I hover the dice icon/button it rotates fast, clicking it slides a new quote in, and when I remove hover from the button it slowly reverses its spin. So the animations appear to be working. Are you talking about making the animations occur every time via CSS instead of JS? That I may be able to help with! Or rather, the classList property can help.

I typically define the styles in my SCSS and add or remove them via JS; this keeps my JS cleaner and all my styles in the stylesheet. Sometimes a class may need to be removed automatically after a set time, the setTimeOut function can help you there. This is really helpful with animations in particular, in my experience.

Let me know if this didn't make sense, I'm happy to clarify further.

-Cheers!

Marked as helpful

0

GHNetCode 170

@GHNetCode

Posted

@alleycaaat Hey Alleycaat Thank you so much for your input and response, apologies that it is so late at responding it has been quite hectic at my end. Yes you are right, it is in relation to ensuring the animations can continue to work every time i push the button when defined within CSS preferably. I would prefer the most elegant and proper way of doing it as i feel via JS it is more of a "hack" when dealing with animations. Don`t get me wrong i love JS haha, just i like to try to keep code where it should belongs.

Thank you.. :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord