Skip to content
OverviewSolutions
14
Comments
6

The Requiem

@TheRequiem330 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!

Latest solutions

View more solutions

Latest comments

  • The Requiem•330
    @TheRequiemPosted over 1 year ago

    Seems great, though it may be nice if you can add another line of code to close the bubble if the user clicks outside the share bubble

    Marked as helpful
    1
  • The Requiem•330
    @TheRequiemPosted over 1 year ago

    First of all, well done on your solution. You're brave and curious to ask that question and willing to learn! Always think about semantics. How accessible it will be on screen readers for example. Backgrounds are only decoration in nature and images on the other hand may contain meaning. In this case, the perfume is a product and it is not part of a decoration but an image of a perfume that the customer is supposed to order and buy. You should use <img> tag here and make sure to include alt attribute in the tag to describe the image because with it being background, the screen readers will just ignore there ever being an image and overall it is a bad HTML practice. Another thing you can do for accessibility is try to use <main> , <article>, <aside> etc. instead of just <div>.

    Marked as helpful
    2
  • P
    Rafael Dias•1,040
    @rafaeldgeoSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing the challenge asked. I would planning before to start, because I spended a lot of time doing it.

    What challenges did you encounter, and how did you overcome them?

    Keep the responsibility was very hard. I studied more the concepts

    What specific areas of your project would you like help with?

    I would like help about the picture tag.

    Article-preview-component-master using grid, media queries and JS

    #bem
    2
    The Requiem•330
    @TheRequiemPosted over 1 year ago

    I like you solution but another thing that you can add is if clicking anywhere outside the share button closes the share bubble. In JavaScript, you can run a ternary operator or an if condition to check for an event listener of click with event.target.closest(insert the DOM element for share button and the bubble here). You can use a negative ! for event listener for clicks anywhere but near the share button and that should run a function that hides the bubble or you can use an if condition where it shows the bubble when event.target.closest(DOM element) is true and an else to hide the bubble. Hope it makes sense, it will require you to write more code but if you don't want to, your solution still is great!

    Marked as helpful
    0
  • The Requiem•330
    @TheRequiemPosted over 1 year ago

    Since you are using inline CSS of Tailwind CSS. You have to add hover: before the style in className such as className="hover:bg-sky-700".

    Marked as helpful
    0
  • The Requiem•330
    @TheRequiemPosted over 2 years ago

    I love your solution. It is almost perfect except for a few little things that I noticed. The <a> tags by default have an underline, that you should remove by adding a CSS property text-decoration: none;. The "3 Days left" part has a different styling than "0.041 ETH", you can surround the "3 Days Left" with <span></span> in HTML which is an inline element for text, and then set the CSS properties appropriately without affecting "0.041 ETH" part. "Creation of" part also needs to be styled appropriately with the design. Lastly, your hover animation is almost perfect, except that it is not transparent because, in background, you're using the variable to the HSL values provided for the cyan color. You should use rgba instead, where R,G, and B are the values of Red, Green, and Blue, and A is the alpha value that sets the opacity, something like 0.5 would do, so after converting those values, your property should be background: rgba(0, 255, 247, 0.5); . Just change those and I think this is probably the best solution to this challenge I've seen! Cheers!

    0
  • The Requiem•330
    @TheRequiemPosted over 2 years ago

    Well done! I am also new to the scene and I'll share what was shared with me a few days ago.

    • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container"> to improve the accessibility of the website and semantics.
    • Use <footer> if you intend to include <div class="attribution">. The <footer> element contains authorship information.
    • Improve your alt= "QR Code" to something like "QR Code to Front End Mentor", I'll share the same link that was shared with me which is super helpful to get a good idea for alt=" " values.
    Marked as helpful
    0