Advice generator app solution with extra features

Community feedback

• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted over 2 years ago

  Hey Mohammed! This is really impressive! You really put in work with this, it's a great solution! The translator and the copy features are really great and creative! Congrats on completing this challenge! Here's a few pointers:

  • You might want to make your translator feature toggle between en and ar I think this will really be cool!
  • The responsiveness is a little rough. I suggest that you wrap your container div within a <main> tag and then apply the following properties to your <main> :

  main {
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
  }
  

  That will make sure that you card remains centered across multiple screen widths and this should make the responsiveness a little smoother. Wrapping your divs within the <main> will also resolve some of your accessibility issues.

  • You should also add an "alt" text to your <img> element to enable the browser navigate your website effectively and to also fix some more of your accessibility issues and HTML validation issues! Happy coding and keep up the great work!

  1

  ---

  

  Mohammed Kasim•210

  @MO-KA19Posted over 2 years ago

  @tesla-ambassador Thank you so mush the responsive part was awful for me I have tried every thing I know and didn't got a good result, I am gonna try your code now and I hope it work, it's a little bit difficult for me I am still beginner in Frontend, I really appreciate your feedback, Thank you :)

  2

  

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted over 2 years ago

  @MO-KA19 You're welcome Mohammed! I hope it worked!

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  The added features are great! ^_^ One more thing that the others didn't mention: the advice API had an ID for each piece of advice that you should use in the title. So you don't need to set a counter to increment the number but could just use the ID given. :)

  0

  ---

  

  Mohammed Kasim•210

  @MO-KA19Posted over 2 years ago

  @FluffyKas Oh yeah I see, I was know that but I would make a little bit change so I put this counter, so the user know how many advices he got, however, I will try to put the ID instead, thank you for your feedback

  0
• 

  winning Godspower•160

  @winninggodspowerPosted over 2 years ago

  Nice app. But it's not responsive on mobile. And by the way, is it the API that contains the language translation functionality??

  0

  ---

  

  Mohammed Kasim•210

  @MO-KA19Posted over 2 years ago

  @winninggodspower I don't know what exactly you mean but I have used an public api for the translation, there is no any ready functions or modules or what ever that I used for that, it's just a pure api request with JSON response, Check the code on Github!

  0