Advice generator app HTML, CSS, JavaScript

Community feedback

• 

  Iman Kimiaei•170

  @kimaginPosted over 1 year ago

  Hello Moamal,

  I was just reviewing your code and noticed a few things which I think can be helpful for you. Feel free to check these and in case you like them you can update your project or use It in the feature projects :

  First of all, on your live website, I can see two green buttons. After reviewing your code, I understood that they are supposed to be buttons for the next and previous advice which is a great idea! Having said that, It's important to make the user understand your interface and will be able to communicate with the idea that you as a developer have in mind. For example, the dice icon, immediately indicates that by clicking on it, you will receive something related to chance. My proposition is to add a third button and leave the dice icon to shuffle through the advice randomly. Then add to UI buttons Icons that indicate next and previous such as "<" and ">" or "🫲" and "🫱". It will be also great from the UX point of view to let the left icon be disabled on load because there is no previous advice yet.

  Another thing that comes to my mind is related to your attempt for retrieving the advice object it selves. In your code, I can see that you hardcoded manually every advice in an array object. script.js [line:10] const advices = [ { id: 32, advice: "Take care of your mental health." }, ... ] In a real-world application, this data never will be hardcoded on the client side for various purposes. The purpose of this project is to communicate with an external database (API) and request the data. If you take a look at project Readme.md file for this particular case we can use api.adviceslip.com. You may take a look at the documentation on their website, but in order to receive the data, you can send a GET request to the URL and receive the data. Here is how I did it with an Async/Await function :

  //Random Number Generator
  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  
  //Receiving Random data each time it will be invoked
  async function generateAdvice() {
    const request = await fetch(
      `https://api.adviceslip.com/advice/${random(1, 200)}`
    )
    const slip = await request.json()
    return slip.slip
  }
  

  Now every time when you invoke the generateAdvice() it will return an object which looks something like this: {id: 183, advice: "Always get two ciders."}

  You can also modify this function by your self to store the data in an array which you can later refer to them.

  I hope this will be helpful and wish you all the best with your projects.

  0