Skip to content
OverviewSolutions
5
Comments
6

Iman Kimiaei

@kimaginPoland170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

- Javascript - Alpine js - Express js - React - Astro - Vim (Lunar Vim) - Mongo DB

Latest solutions

Latest comments

  • Iman Kimiaei•170
    @kimaginPosted about 2 years 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
    @kimaginPosted about 2 years 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
  • Iman Kimiaei•170
    @kimaginPosted about 2 years 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
  • Iman Kimiaei•170
    @kimaginPosted about 2 years 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
  • Iman Kimiaei•170
    @kimaginPosted about 2 years 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 about 2 years 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