Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
12
P
Felix
@felix-stuff

All comments

  • LincolnBollschweiler•350
    @LincolnBollschweiler
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Figuring out how to use npm package 'joi' for validation.

    Next time I'll make the validation it's own JS file for reusability. I also want to figure out how to set the failed messages in the Joi.object({config}). If anyone knows, please send me a link to an example.

    Contact Form w/ validation and 508 compliance

    #accessibility#jquery#sass/scss#vite#vee-validate
    1
    P
    Felix•300
    @felix-stuff
    Posted 5 months ago

    Really cool solution using JOI! I also want to look into that, hate to do the form validation :D

    If you want to improve something, maybe look into small design details like the exact sizes of input fields or the selected radio design.

    But it's already a neat solution that you created.

    Keep it going :)

  • P
    Skyz Walker•1,215
    @Skyz03
    Submitted over 3 years ago
    What are you most proud of, and what would you do differently next time?

    JavaScript Popup Implementation: Successfully created dynamic and user-friendly popups using JavaScript.

    Overall Code Structure: Applied a modular design, separating concerns into smaller, reusable components. Followed best practices for CSS and JavaScript methodologies, ensuring maintainability.

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

    Improve Code Reusability: Create a utility function or a library for common popup behaviors like opening, closing, and adding dynamic content. Implement better separation between business logic and UI for easier testing and debugging.

    NFT card using Tailwind & Next

    #next#tailwind-css
    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Hi @Skyz03,

    nice solution you have here with next / react and tailwind.

    I also tried tailwind for this project. One tiny detail I just saw on the design / solution comparison: the image of the avater is a little bit too small.

    Keep up the good work!

  • dullarzee•600
    @dullarzee
    Submitted 6 months ago

    just a Faq

    #accessibility
    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Hi @dullarzee,

    you built the accordion challenge with React JS - nice, still something I need to dive into.

    I just looked at your solution and if you're willing to invest some more time into it, here are some suggestions what you could improve:

    • overall design has details that are not quite right yet: for example the current font is not the desired one and responsive design needs to be improved to make the mobile view look like in the design file
    • usage of semantic html markup can be improved
    • accessibility adjustments to implement keyboard navigation and screen reader support

    If you're not into improving your solution it's fine anyways, just some ideas to improve your challenge solution.

    Enjoy your day and keep on coding!

  • Abigail Figaro•290
    @abigailjulie
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am comfortable with toggled visibility in JavaScript. The main emphasis on this project was accessibility and I implemented most of the concepts.

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

    Figuring out the visibility of the buttons and the "selected" classlist was difficult but I used an older project and AI to help me through.

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

    All good!

    Interactive Rating Component

    #accessibility
    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Hi @abigailjulie,

    nice solution to the rating component! Really like your efficient code and how well you implemented the accessibility features and the design detail in this project.

    One little thing I came across: Since you used buttons for the rating numbers instead of a group of radio buttons you have to hit a few times tab to get to the submit button, while you can tab to the submit button immediatly by default if it was a radio button group. The radio button group can be navigated by arrow keys, maybe you add some event handling for your buttons for arrow keys or adjust some tabindex to improve this a little bit.

    Other than that, great project, keep up the good work!

  • adegbenro marvellous•470
    @alinco6426
    Submitted over 1 year ago

    a quiz app using vanilla js

    #accessibility
    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Hey @alinco6426,

    I just looked at your solution for the quiz app.

    This one gave me a little headaches for all the details with the accessibility, styling and code organization.

    Your JS looks really nice, very organized and thought through.

    If you want to improve something on your solution take a deeper look at the design details in the screenshots. There are some details you're missing out on.

    You could also see if the markup is semantic in all places and increase the accessibility standard with features like keyboard navigation, which is not possible right now.

    Either way keep up the good work!

  • P
    Matthew•360
    @MattJM1007
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of figuring out the Javascript logic to generate the random password. I was initially intimidated by this project, but it turned easier than I expected and I think it turned out great!

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

    Styling the slider and checklist was a little challenging and took a lot of googling. But I figured it out.

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

    I would like to know if my javascript code could be shortened or condense (if it even should be). It certainly works and gets the job done but wondering if it can be written a little more efficiently.

    Password Generator App

    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Hi Matthew, great solution you created for this task. I also really like how you handled the show password strength section in the code, that is way more flexible than what I did. Maybe I should refactor this.

    The styling seems to be on point too. Only thing I just noticed is a 'jumping' form when you hover the submit button, I guess because of appearing borders. If you add transparent borders with 2px width to the non hover styles of your submit button, the issue should be solved.

    So good job on that. :-)

    Marked as helpful
  • Lunarix09•350
    @Lunarix09
    Submitted 6 months ago

    Simple Tip calculator app with HTML, CSS & JS

    1
    P
    Felix•300
    @felix-stuff
    Posted 6 months ago

    Nice solution! While testing I saw that the "Can't Be Zero" error message also appeared for the people input even though I only entered the bill input. Maybe you can check that for further improvements. Other than than nicely designed solution!

  • Mohammed Jazeem Mp•200
    @jazeemmp
    Submitted 12 months ago

    time tracking dashboard responsive

    1
    P
    Felix•300
    @felix-stuff
    Posted 12 months ago

    Really nice solution. Very close to the original design and I really like the levitating hover effect on the cards. Your JS code also looks really clean and nice and way smarter than my solution, but when I look at it I get the impression you have quite much similar code, that you could even simplify more with a single method where you pass matching parameters and make some smart switch case maybe?

    Really cool solution anyways, good job!

    Marked as helpful
  • Gia Miminoshvili•170
    @giamimino
    Submitted 12 months ago

    Frontend Mentor | Newsletter sign-up form with success message

    1
    P
    Felix•300
    @felix-stuff
    Posted 12 months ago

    Hi @giamimino, I don't want to criticise your solution, but you decided to not use any validation on the input field? Do you need help with that?

    The design is nicely done though. :-) Only a few adjustments and it'd be pixel perfect. If you want some help with the details let me know.

  • errbrokko•80
    @errbrokko
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I got it running because this one was tougher than the ones before. It's still not perfect though.

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

    Combining Javascript and CSS for responsive layouts was tough. I did not solve my problem fully. See below.

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

    I would like to know how to effectively combine Javascript and CSS in this case. Although my solution seems to work at first, it does run into problems when I toggle a state and then switch from mobile to desktop viewport or vice versa.

    Also, how do I get the "bubble look" for a popup?

    Article Preview with HTML, CSS and JS

    1
    P
    Felix•300
    @felix-stuff
    Posted about 1 year ago

    Hi @errbrokko, I just looked at your solution. It's quite far, but some of the CSS spacing needs a closer look and for the mobile version there are some issues with the popup and the overall design of the card.

    For your questions on how to combine JS and CSS in this case I would recommend reducing the JS to a bare minimum. In my solution I only use one event listener to toggle the share popups visibility. The rest is all done by CSS.

    For the bubble look you are only missing on the little arrow at the bottom of your popup. Maybe check out https://cssarrowplease.com to see how you can use the border property in CSS to create this type of arrow.

    Another thing worth checking out might be the details of position absolute. In my solution I repositioned the popup to be visible in the center of the screen on mobile and moved the little arrow to the right so that its above the share button.

    Marked as helpful
  • Vladimir Semeryuk•80
    @vladimir-semeryuk
    Submitted about 2 years ago

    Age Calculator using Flexbox, Vanilla JavaScript, Semantic HTML

    1
    P
    Felix•300
    @felix-stuff
    Posted about 2 years ago

    Hi @vladimir-semeryuk, first of all: great solution, I love the clean JS code and I must admit I needed to get some help on the calculation of months and days and had to steal your beautiful and easy calc function. I was getting really unnecessary complicated with that one.

    One thing I was wondering about in your solution was that I could enter a date in the future and it'd say "-1 years". I don't know if you want to fix this, but I thought I'd point it out.

    Besides that, thank you for your clean solution that inspires me to fix my own. :-)

  • Ferabel•50
    @Ferabel
    Submitted about 2 years ago

    Interactive-Rating-Component-using-Javascript

    1
    P
    Felix•300
    @felix-stuff
    Posted about 2 years ago

    Hi @Ferabel, I just saw your solution for this challenge, that I also created yesterday. One thing I noticed was that I can't see the active state on the selected rating number in Chrome.

    And for my solution I used a form element with input type radio and removed the usual radio button design with CSS. Maybe you take a look into my code as inspiration. That way the selected state is easy to accomplish by browser default on click of the corresponding label.

    Besides that, nice solution. :-)

    Marked as helpful
Frontend Mentor logo

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

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