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

Advice generator app

@saadman-galib

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

Community feedback

Oskar 330

@slothmast3r

Posted

Hey man! Great work! It looks really nice, just exactly like in design!

Unfortunately dice button doesnt work :'( What I recommend is usage of event handling on this website GUIDE HERE @click="someFunction" Next thing what I would do is define color variables. There are many ways to do this. The most common is by :root{...} GUIDE HERE

Good luck with further coding!

Marked as helpful

2

@saadman-galib

Posted

@slothmast3r Thanks for your suggestion. I have added the refresh option to the button. And I will try to remember to define color variables from the next time.

0
Oskar 330

@slothmast3r

Posted

@saadman-galib Hey man. Your solution is pretty good that works. I would like to suggest you solution that is a little more efficient that you dont need to reload whole page.

<div class="dice-icon-container" @click="generateQuote">

async mounted() {
        this.generateQuote()
    },
methods: {
        generateQuote() {
            const response = await axios.get("https://api.adviceslip.com/advice");
        this.adviceText = response.data.slip.advice;
        this.adviceNo = response.data.slip.id;
        },

I hope it works xd. I didnt test it

Marked as helpful

1

@saadman-galib

Posted

@slothmast3r Thank you so much. Now this works quite well and better than the previous one.

1

@saadman-galib

Posted

@slothmast3r will you please again check the project i have added a transition on the dice

0

@optimusprime202

Posted

Hey @saadman-galib, You’ve just about got it.

1

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