Design comparison
Solution retrospective
Hello frontendmentor community. This was substantially a simple challenge but if you take a close look, every piece of advice is enclosed by quotes which is something my code lacks. So, how could I implement this to my code. On top of that, every piece of advice appears abruptly when a user clicks on the dice button, thus I'd like to add some fade animation to advice whenever it shows up.
Community feedback
- @redpangilinanPosted about 2 years ago
To add quotes on the advice, just change your line 11 code on main,js and put a quote unquote between the data that you are fetching, like this: quote.innerHTML =
“${dataObj.advice}”
;For the animations, you can put your fetch code into a const then use a setTimeout() to call the said fetch advices code with await to give it a delay. You can then put animations based on that delay, whether you want it on button click or after the advice has been fetched.
I hope this helps!
1 - @RaymacmillanPosted about 2 years ago
Hey DAN KANT.I saw that you used the <p> tag on your text but instead you can use the quote tag(<q>) which will automatically wrap your whole text into quotes.With the quote tag you will not need to put the quotations around your text
For example: <q class="quote">Everything that doesn't kill us, evolves and tries again</q>
1 - @BilalSalmiPosted about 2 years ago
Hi Dan, your design solution is awsome.
but when I click the button I will get anthor quote without " " .
So I think you should modify your Js code
adviceNumber.innerHTML =
${dataObj.id}
;to like this:
adviceNumber.innerHTML =
" ${dataObj.id} "
;Hopefully this trick will help you :)
0
Please log in to post a comment
Log in with GitHubJoin 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