@Adel-Harrat
Posted
Hello and congratulations on successfully completing this amazing challenge! 😍
I must say, you've done an exceptional job with the user interface. The design is remarkably identical to the original concept, and you should be proud of your attention to detail. Great work! 🎉✨
- Javascript bug 🔴
I encountered a minor issue while using the application. It appears that when I click on the button to generate or fetch a new piece of advice, the content doesn't update as expected. It seems to be working fine for you, but for some reason, it's not working for me.
Fortunately ❗, I have a simple solution that should resolve this problem. To ensure the button triggers the desired behavior and fetches new advice, please make this modification in the way you send the fetch request api:
const response = await fetch(`https://api.adviceslip.com/advice?t=${Math.random()}`);
By implementing this approach, you should be able to fetch and display new advice seamlessly. ✨✨
- UI bug 🔴
It seems that there is an issue with the image of the divider not loading properly. To resolve this problem, you can try removing the slash before the image source in the code. Here's how you can make the adjustment:
Instead of:
<img alt="" width="295" height="16" src="/images/pattern-divider-mobile.svg">
Change it to:
<img alt="" width="295" height="16" src="images/pattern-divider-mobile.svg" />
Once again, congratulations 😍 on your impressive achievement, and I hope this solution resolves the issue you encountered. If you have any further questions or require additional assistance, please don't hesitate to ask. Best of luck ❗💥
Marked as helpful
@taavi80
Posted
Hello Adel,
Thanks for your help. But I have another problem. When I open app on github pages with my mobile phone the hover effect doesn't disappear after clicking on .dice-wrapper. What could be the reason?
@Adel-Harrat
Posted
@taavi80 On mobile devices, the "hover" effect that is commonly used on desktop browsers doesn't work the same way. Instead, you can use JavaScript to add a shadow effect when the user clicks on an element. Here's an example of how you can achieve this:
HTML:
<div id="myElement">Click me</div>
CSS:
.shadow {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
JavaScript:
var element = document.getElementById("myElement");
element.addEventListener("click", function() {
element.classList.add("shadow");
});
In this example, we have a <div> element with the ID "myElement" that represents the element you want to add a shadow to. In the CSS, we define a class called "shadow" that applies the desired box shadow effect. Then, in the JavaScript, we use addEventListener to attach a click event listener to the element. When the element is clicked, we add the "shadow" class to it using classList.add, which applies the shadow effect to the element.
You can customize the CSS class and the shadow effect based on your specific requirements. Remember to include the necessary CSS and JavaScript in your HTML file, and make sure the JavaScript code is executed after the element is loaded on the page.
Marked as helpful
@taavi80
Posted
@Adel-Harrat I have this code:
JavaScript
const diceWrapper = document.querySelector(".dice-wrapper");
window.addEventListener("load", fetchAdvice);
diceWrapper.addEventListener("click", function () {
diceWrapper.classList.add("hovered");
setTimeout(function () {
diceWrapper.classList.remove("hovered");
}, 200);
fetchAdvice();
});
async function fetchAdvice() {
...
}
but still not working.
@Adel-Harrat
Posted
Hey @taavi80 , I downloaded your GitHub repo and gave it a try. I'm happy to report that the hover effect when the button is clicked is working perfectly for me! Great job! 🎉
@taavi80
Posted
Hey @Adel-Harrat, I added this CSS code:
@media (hover: hover) {
.dice-wrapper:hover {
cursor: pointer;
box-shadow: 0 0 20px var(--Neon-Green);
}
}
@media (pointer: coarse) {
.dice-wrapper:active {
box-shadow: 0 0 20px var(--Neon-Green);
}
}
For me it solved the problem.
@Adel-Harrat
Posted
@taavi80 Congratulations 🎉 Happy Coding 👋
