Skip to content
OverviewSolutions
5
Comments
6
Iman Kimiaei
@kimagin

All comments

  • Iman Kimiaei•170
    @kimaginPosted over 1 year ago

    Hi Eric,

    Congratulation on finishing this project to both you and your teammate. Your website looks great, having said that I have a minor proposition:

    It is a convention that when the user wants to navigate back to the home page, simply can achieve this by clicking on the header's or footer's logo. It would be even greater if you simply wrap an <a href="/"></a> tag around the logo that you are currently using as an <img>.

    Keep up the good work and I hope to see your next project in the future.

    Cheers, Iman

    Marked as helpful
    1
  • Iman Kimiaei•170
    @kimaginSubmitted over 1 year ago

    Hello All,

    I have a question and a favor to ask. The question is in the mobile version when the screen is narrow, the contents of the chart stop getting narrower and therefore they are not staying on the screen. Do you see any solution for that?

    And the favor to ask is, for an unknown reason to me, Google Lighthouse gives me an error with the performance test. I will appreciate it if you can let me know if on your end you are receiving the same error, or even better if you can tell me where this error comes from.

    Looking forward to all your helpful comments and reviews.

    Cheers!

    💹Expenses chart component | JSON | Animation | Dynamic | TailwindCSS

    2
    Iman Kimiaei•170
    @kimaginPosted over 1 year ago

    Hello Grace,

    Thank you very much for your feedback. I'm not sure if I understood you correctly but since this is just a web component and it is supposed to be used as a single module in a whole project, there won't be a need to have a <header> or a <nav> element and in this case, I've used <main> in order to pass the bots test. All that said, SEO was not the main goal of this project and for sure you know that only using semantic HTML doe's not magically make your site crawl to the top. You need to have all your Meta data and OGs correctly set, you need to set your robot.txt file to inform the search engines which part of the site should be crawled, and quite a lot more steps which were not the purpose of this assignment.

    For the projects that are a full application or complete website, I am using 🚀Astro which has several integrations to convert your site to a semantic HTML such as Astro-SEO which definitely worth investigating.

    I know my HTML code can be a bit intimidating since I wrote it with a bunch of Alpine JS directives (please refer to the uncompiled code on my GitHub page), but let's say If you wanted to restructure it as a component, how would you do It?

    Thanks again and I will be looking forward to hearing from you again.

    0
  • Leonel•250
    @SLeo99Submitted over 1 year ago

    Welcome Welcome! 👋

    This is my solution for advice-generator-app.

    I built this project using :

    • Vanilla JavaScript
    • SASS/SCSS
    • HTML5
    • Mobile first workflow

    If you have any advice/feedback that can help me to improve my code, it will be more than welcome 😊

    GitHub-Repo | Live

    TYSM.

    Advice generator App | HTML, SASS/SCSS, VanillaJS

    1
    Iman Kimiaei•170
    @kimaginPosted over 1 year ago

    Hello Leonel, Congratulations, this looks great!

    I have a suggestion that might help you with a more accurate result. In comparison to the original design, yours has smaller padding on the left and right sides of the card. If you can modify the padding of your .advice-generator { padding: 3rem 1 rem 4rem } selector, then you will reach perfection :)

    Hope this will be helpful and looking forward to seeing your next projects.

    Marked as helpful
    1
  • Pavle Pavičić•60
    @MellowTangeloSubmitted over 1 year ago

    Hi all,

    this is my second challenge on Frontend Mentor. I would like to hear your opinion on my solution.

    I am interested in these topics in particular: 1.) Is my HTML ok, semantically? 2.) Is my CSS file structured correctly, and should it be divided in multiple CSS files instead? If yes, what's the common approach when dividing CSS files into smaller ones? 3.) Are there any other breakpoints that you can see on my web page?

    Thanks in advance! :)

    Results Summary Component (HTML/CSS/JS)

    2
    Iman Kimiaei•170
    @kimaginPosted over 1 year ago

    Hello Pavle, I think you did a great job.

    Regarding your question, you don't need to divide your CSS file into multiple files since most modern servers are minifying and compressing the CSS file on the server side. You can use Netlify or Vercel as your host which both offer this feature.

    One common practice is to create all the media queries in a separate file and @import it in your style.css or main.css file. You can also inject CSS with javascript for the elements that you are dynamically creating. For bigger applications, you can use a framework such as React or VUE which gives you the opportunity to create individual components and write specific styling for each component in a separate file. For example, you can create a card component and use that multiple times over your project.

    All that said, I think you are doing a great job, and can't wait to see your next project.

    Marked as helpful
    0
  • Santiago Morales•370
    @AleromsSubmitted over 1 year ago

    Hi Frontend Community!

    I really enjoyed this one! I know understand APIs and how to GET information from them ;)

    one thing that I'd like to address is my advice card changes height whenever i resend a request. This is because the text length changes. Is there any way I could maintain the same height?

    Vue Advice Generator API

    1
    Iman Kimiaei•170
    @kimaginPosted over 1 year ago

    Hello, This looks great! I'm still looking for an answer to the question which you've posted. The best thing that comes to my mind is to give a min-height of at least two lines to a wrapper for the text.

    One other thing that I just learned is that instead of adding quotation marks manually, you can inject the text in a <h1><q>advice</q></h1> tag, and then the quotation marks will look like the one on the provided design images.

    Hope this will be helpful :)

    Marked as helpful
    1
  • 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