Frontend Mentor - Advice Generator App Solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Generate a new piece of advice by clicking the dice icon

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vanilla JavaScript
• Fetch API for asynchronous requests

What I learned

This project was a great opportunity to practice working with external APIs and handling asynchronous JavaScript. I learned how to:

• Make API requests using the Fetch API
• Handle loading states and errors in API requests
• Create responsive designs that work well on both mobile and desktop
• Implement hover effects for interactive elements

Some code snippets I'm proud of:

<picture>
  <source media="(min-width: 768px)" srcset="./images/pattern-divider-desktop.svg">
  <img src="./images/pattern-divider-mobile.svg" alt="divider">
</picture>

.dice-button:hover {
  box-shadow: 0 0 40px var(--neon-green);
}

async function getAdvice() {
    try {
        // Show loading state
        adviceText.textContent = 'Loading...';

        // Fetch advice from the API with cache-busting
        const response = await fetch('https://api.adviceslip.com/advice?t=' + Math.random());

        if (!response.ok) {
            throw new Error('Failed to fetch advice');
        }

        const data = await response.json();

        // Update the DOM with the new advice
        adviceNumber.textContent = data.slip.id;
        adviceText.textContent = data.slip.advice;
    } catch (error) {
        console.error('Error fetching advice:', error);
        adviceText.textContent = 'Failed to load advice. Please try again.';
    }
}

Continued development

In future projects, I would like to focus on:

• Implementing more advanced animations and transitions
• Exploring more complex API interactions
• Improving accessibility features
• Learning more about error handling and edge cases in web applications

Useful resources

• MDN Web Docs - Fetch API - This helped me understand how to make API requests using the Fetch API.
• CSS-Tricks - A Complete Guide to Flexbox - This is an excellent resource for understanding Flexbox layout.
• Web.dev - Responsive Design - This helped me create a responsive design that works well on different screen sizes.

Author

• Frontend Mentor - @AyokanmiAdejola