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. The advice generator app generates a new piece of advice by clicking the dice icon.

Table of contents

• Frontend Mentor - Advice generator app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshots
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Installation Instructions
    • Clone the repository
    • Navigate to the project directory
    • Run the project
  • Dependencies
  • Usage Instructions
  • Project Structure
    • Key Files
  • Author

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

Screenshots

Device	State	Screenshot
Mobile	Default View
Desktop	Default View
Desktop	Hover Effect

Links

• Solution URL: Solution URL here
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties, Flexbox for styling
• Mobile-first workflow
• JavaScript (ES6+ features such as async/await)
• Fetch API for handling external data
• Accessibility improvements (ARIA labels for interactive elements)

What I learned

One key takeaway from this project was improving my understanding of async/await for handling API requests. I also learned how to set the aria-label attribute for better accessibility.

Here’s a snippet demonstrating the use of async/await in my API call:

const fetchAdvice = async () => {
  const response = await fetch(apiUrl, { cache: "no-cache" });

  if (!response.ok) {
    throw new Error("Network response was not ok");
  }

  return (await response.json()).slip;
};

• Using await to handle asynchronous operations without .then().
• Adding { cache: "no-cache" } to ensure fresh data on each request.
• Handling API response errors gracefully by checking response.ok.

Continued development

• Further improvements on handling API errors
• Enhancing accessibility features and UI responsiveness
• Experimenting with local storage to save previous advice history

Useful resources

• MDN Web Docs - Fetch API - Helped in understanding how to work with async/await and error handling in API requests.
• MDN Web Docs - ARIA Labels - Used to improve accessibility by adding meaningful labels to interactive elements.
• JavaScript.info - Async/Await - A great explanation of how to use async functions effectively.

Installation Instructions

Clone the repository

To get started, clone the repository using the following command:

git clone https://github.com/doileo/advice-generator-app.git

Navigate to the project directory

After cloning the repository, move into the project folder using the following command:

cd advice-generator-app

Run the project

Open index.html directly in your browser, or use a live server extension in your code editor for a better development experience.

Dependencies

This project does not require any external dependencies. It runs using:

• Vanilla JavaScript
• HTML
• CSS

Usage Instructions

1. Open the app in your browser.
2. Click the dice icon to generate a new piece of advice.
3. Enjoy the randomly generated wisdom!

Project Structure

Key Files

• index.html - Main HTML structure
• main.css - Styling for the app
• main.js - JavaScript functionality
• images/ - Folder containing icons and screenshots

Author

• Frontend Mentor - @Doileo
• LinkedIn - Doina Leovchin