Advice generator app

This is a solution to the Advice Generator app challenge on Frontend Mentor.

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 the 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

Desktop view

Mobile view

Links

• Solution URL: My Solution
• Live Site URL: Advice Generator App

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex
• Mobile-first workflow
• Google Fonts
• Responsive web design
• JavaScript interactivity
• JavaScript selectors
• Event Handling
• Fetch API
• Advice Slip JSON API
• setTimeout() function

What I learned

Besides implementing HTML and CSS in web development, JavaScript greatly enhances this process in terms of interactivity and responsive web design which in turn makes it more user-friendly.

Some of the cool stuff I learned in JavaScript are Event Handling, fetching API URLs and typing animation using setTimeout() function.

 <button id="btn" onclick="console.clear()"><img id="dice" src=images\icon-dice.svg></button>

document.getElementById("btn").addEventListener("click",advice);
//Event Handling using JavaScript
function advice()
{ 
    document.getElementById('advice').innerHTML="";//selector
    fetch('https://api.adviceslip.com/advice')//Fetch API
    .then(response=>response.json())
    .then(data=>{
    console.log(data);
    var i = 0;
    var txt = JSON.stringify(data.slip.advice);//JSON object to string conversion
    var speed = 50;
    function typeWriter() {
        if (i < txt.length) {
            document.getElementById('advice').innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);//typing animation
        }
    }
    typeWriter();
    document.getElementById('n').innerHTML="#"+data.slip.id;})
}

Continued development

The problem with this app is that it often generates the same advice on clicking the dice button multiple times. It may seem that the app is not functioning properly but it is just a bug. It can be resolved by doing more research on this issue. I would prefer to move on to some other projects rather than fixing this issue in the meantime.

You are free to open a new issue and make a pull request suggesting the necessary changes.

Useful resources

• w3schools - This helped me understand various properties and features of HTML, CSS and JavaScript that are used in this project.
• StackOverflow - Another awesome website to fix issues related to web development minutely.
• Advice Slip JSON API - An API that generates some random advice.
• Kapwing - A nice website to screen record a GIF directly from your web browser.

Author

• Github - Parthasarathi Roy
• Frontend Mentor - @coding-with-parthasarathi
• LinkedIn - Parthasarathi Roy