Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
3

Adam Wozniak

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

  • Sign-up-form, React, TypeScript, Zod validation, react-hook-form, Vite

    #accessibility#react#vite#typescript

    Adam Wozniak•230
    Submitted about 2 years ago

    0 comments
  • Tip Calculator App - Live formatting / validation, CUBE CSS

    #cube-css

    Adam Wozniak•230
    Submitted almost 3 years ago

    0 comments
  • Expenses Chart Component - Dynamic chart, Accessibility, Flexbox

    #accessibility#cube-css

    Adam Wozniak•230
    Submitted almost 3 years ago

    0 comments
  • Single Price Grid Component - CUBE CSS, custom properties, mobile 1st

    #cube-css

    Adam Wozniak•230
    Submitted about 3 years ago

    0 comments
  • Huddle Landing Page - Mobile-first, Flexbox, CSS Grid

    #cube-css

    Adam Wozniak•230
    Submitted almost 3 years ago

    0 comments
  • Interactive Rating Component - Vanilla JS, CUBE CSS, accessibility

    #accessibility#cube-css

    Adam Wozniak•230
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • TsuneWeb•260
    @TSune-web
    Submitted almost 3 years ago

    Interactive Rating

    1
    Adam Wozniak•230
    @adamwozhere
    Posted almost 3 years ago

    Hi,

    You might find it easier to use a set of radio buttons within your form; you can hide the actual input with CSS then style the label to look like the buttons as in the design. It also makes accessing the data in JS very easy:

    <input type="radio" name="rating" value="1" id="rating-1">
    <label for="rating-1">1</label>
    
    // JavaScript
    let selectedRating = form.rating.value;
    

    Hope this helps :)

    Marked as helpful
  • Robin•150
    @Mountainbeach
    Submitted almost 3 years ago

    Expenses chart

    1
    Adam Wozniak•230
    @adamwozhere
    Posted almost 3 years ago

    Hi Robin,

    I wonder if in the design the blue highlight colour is meant to signify the highest value for that week, but I like the idea of highlighting the current day.

    To answer your question; looking on MDN for Date.getDay() - you might have missed it; but the zero index starts with Sunday not Monday!

    So incrementing i by one then using modulo % to keep the value in 0 - 6 range should work:

    if( (i + 1) % 7 == date.getDay() ) {
                bars[i].classList.add("today");
    }
    

    Hope that helps!

    Marked as helpful
  • JJ•230
    @julienjavaloyes
    Submitted about 3 years ago

    Stat card (html sass), images overlay

    2
    Adam Wozniak•230
    @adamwozhere
    Posted about 3 years ago

    Looks good! just a couple ideas; with that tricky background, you could try making the background size a fixed scale, although I think it looks quite interesting how it changes with the screen width!

    You could also put a slightly smaller max-width on the container to match the desktop view, and a bit of padding on the body so it will shrink it a bit when it goes down to mobile view.

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