Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
6

yahappylemon

@yahappylemon170 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

  • tip calculator


    yahappylemon•170
    Submitted 10 months ago

    1 comment
  • time tracking dashboard with grid and fetch


    yahappylemon•170
    Submitted 11 months ago

    1 comment
  • Newsletter sign-up form using


    yahappylemon•170
    Submitted 11 months ago

    1 comment
  • Article preview component with statemanagement and RWD


    yahappylemon•170
    Submitted 11 months ago

    1 comment
  • recipe page


    yahappylemon•170
    Submitted 11 months ago

    1 comment
  • Social links profile


    yahappylemon•170
    Submitted 11 months ago

    1 comment
View more solutions

Latest comments

  • P
    Austin•430
    @astnio
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I decided to change things up in a few different ways for this project.

    The first thing I did differently was that I did not use the images completely as they were. I noticed that the images given all had preset colors, based on the background color of its category. I didn't think this was very flexible if the user wanted a new background color or a different image, so I configured images to use a combination of CSS filters so that they instead dark the area of the background they are on. This allows them to be a tint of the background, like their original color, while allowing it to be flexible enough to use any image on any background while keeping it looking good.

    The second thing I did was add more properties to the JSON data. This was mostly so that I could utilize this information for how I setup my JavaScript.

    For my JavaScript, I wanted to create a system that was expandable. I also tried to keep my code concise by splitting it into 5 main files:

    • fetchData.js is just to get data from my .json file
    • categoryCard.js is a class that helps me model my categoryCard objects
    • categoryCardsManager.js reads the data from fetchData.js and instantiates a the categoryCards, and puts them into an object that is exported
    • elementMaker.js is just used to create an HTML element to append to the main document, however it is used as a property for each categoryCard
    • main.js is where I setup the buttons and begin appending the card elements to the main page

    I think the way this is setup is nice, because each categoryCard contains the information for its own element, which is appended to the main page. This makes it easy to change the info on everything at once, as my function for updating info is based on the categoryCard class, which also has its own info from the JSON file it was made from.

    This means that in my main file, I can just loop over my primary list of time cards, and call their functions to update. This was easy to do as there are only 3 buttons (daily, weekly, monthly) which just changes the hours and labels to match the information already given in the JSON file.

    The design works well too. Since I am using grid, having more than 6 items actually doesn't look too bad, as they simply wrap down to the next row, leaving everything else perfectly fine. Mobile works fine too as it just makes the column longer.

    Responsive Dashboard with CSS Grid, Flexbox, and JavaScript

    2
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    Your work is impressive, it's flexible and expandable. Also, I like the way you manage your js code by using the concept of components.

    Maybe you could add a loading message to inform the user in advance, since it will take some time for the browser to fetch data and render the DOM!

  • Abdallah Aboelsaoud•220
    @Saoud2021
    Submitted 11 months ago

    newsletter-sign-up-with-success-message-main

    1
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    Since you commented out your code in script.js and disabled your subscribeButton, I'm not able to make sure the function of your newsletter form.

    Apart from that, I suggest considering to remove place-content: center in .container, so it looks more identical to the design when the screen size is between 650px to 480px.

    This is a peer review.

  • Obare•340
    @simplyObare
    Submitted 11 months ago

    Article preview component

    2
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    Great work!

    Just noticed a small bug: when I resize from mobile version to desktop version, a share btn img would appear below the card component.

    I guess just change .mobile-share-container {display: none;} into .mobile-share-btn-container {display: none;} in your CSS file will fix the bug!

    This is a peer review.

    Marked as helpful
  • Wasiqur Zaman•170
    @wasiqurzaman
    Submitted 11 months ago

    Recipe page solution

    1
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    Your project is perfect! It looks similar to the design, and your code is well-structured in every aspect!

    Also, I like the way you deal with fonts and colors, it's pretty neat!

    Keep up the great work!

  • emeraldknytt•90
    @emeraldknytt
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am quite impressed to have built the profile card without using Figma starter pack. While it took me a significantly longer time to get the values right, I liked the challenge it posed. I would like to purchase the pro plan as I will greatly benefit from using it to further improve on my skills. Thank you, Frontend Mentor!

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

    The biggest challenge I faced was in trying to make sure that my solution mimics the design as best as I could afford to get it done without using Figma. Also, I struggled a little with the socials components, not knowing if a `` tag with border property was better than using a button tag. I eventually went with the latter as it made more sense that those components links and are meant to be clicked.

    Social Profile Card for web and mobile screens using HTML and CSS

    2
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    I also spent a lot of time and effort on the design without the Figma file😂

    As for the social links part, I went for <a> tag with padding instead of <button>, since there's a href attribute on <a> and it seems more semantic in my opinion. But I think both ways will do the job!

    Anyway, you did a great job!

    Marked as helpful
  • Gideon Ubuake•10
    @dev-gideon
    Submitted 11 months ago

    the Frontend Mentor | QR code component website

    2
    yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    I'm not familiar with Grid so I'm afraid I can't give too much feedback on that part, but the rest seems amazing!Well-done!!

    This is a peer review required by the challenge.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub