Skip to content
Submitted over 1 year ago

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

GHNetCode•170
@GHNetCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

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 🍀•360
    @alleycaaatPosted over 1 year ago

    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
    @GHNetCodePosted over 1 year ago

    @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

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