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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• 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

Screenshot

Links

• Solution URL: Responsive page, using Flexbox and Mobile-fist Workflow
• Live Site URL: Advice Generator

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Advice Slip JSON API

What I learned

During this project, I was able to apply my basic knowledge of APIs, which I had acquired through online courses. I got a better understanding of how the fetch() command works - which is often used to search for URLs in the browser - and was able to use it in this project.

fetch(url)
  .then(response => response.json())
  .then(json => displayResults(json))
  .catch(error => console.error(`Something went wrong:  ${error.message}`))

Using this command, I discovered one of its methods: json(). This method converts the results of the search made by fetch() into JSON format (learn about JSON), which makes it easier to manipulate the fetched data. This allowed me to include the search results in the HTML document.

function displayResults(json) {
    slip = json.slip;
    advice.textContent = `"${slip.advice}"`;
    adviceId.textContent = slip.id;
}

Continued development

• I want to improve my skills in developing responsive pages using pure CSS. Although I'm not completely comfortable with this subject, I've noticed an improvement in my performance. My code is becoming cleaner and I'm using the Mobile-first Workflow approach.

• I'm excited to improve my understanding of APIs, a subject that I'm not very familiar with. That's why I'd like to keep creating more projects that challenge me in this area.

Useful resources

• Requesting data from the API - MDN - This section of the article was really helpful! It reminded me how to use the fetch command and provided a clear and concise explanation of the necessary steps.

Author

• GitHub - GabJen
• Frontend Mentor - @GabJen
• LinkedIn - gabrielajenyffer