Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
11
nerdynischal
@nerdynischal

All comments

  • P
    Alexander3717•310
    @Alexander3717
    Submitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    I am quite happy with the UX of the calculator, the implementation of the custom tip button, and how I handled invalid inputs. Using regex testing on the keydown event, I made sure that only digits can be entered (and dots/commas if the input allows decimals). The calculator also removes any leading zeros live as you type.

    Next time, I would probably use <input type="text"> instead of <input type="number">, because <input type="number"> has some quirks (for example, it returns an empty value if the input is invalid), which made some of the features harder to implement. Or better yet, I would try using an external library for validation and input restrictions instead of doing it all manually.

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

    There were many challenges. I will try to describe the biggest ones:

    • The custom button styling and logic

      My solution: a <label> covers the whole custom button. When clicked, it becomes invisible and reveals the custom tip input field under it. It also instantly focuses it, allowing the user to type the custom tip value. In case the user doesn't type anything and clicks away, the custom button returns to its initial state.

    • Giving the custom tip input field a placeholder % symbol that moves live with entered text

      My solution: wrap the input field inside a <div> together with a <span>%</span>. Give the wrapper display: flex, center both elements, and make sure the input is only as wide as the text inside it using JavaScript:

      customTipInput.addEventListener("input", () => {
          const length = customTipInput.value.length;
          customTipInput.style.setProperty("--dynamic-width", `${Math.max(length, 1)}ch`);
      });
      
    • Restrict what the user can type inside the input fields and how many digits can they type before and after decimal dot

      My solution: If you'd like to see the code, it's the restrictInput function in script.js. On input of type text this wouldn't be challenging to do, but browser quirks and differences on <input type="number"> made it frustrating (e.g. when retrieving value from the input field to manipulate it, Chrome returns an empty value if the input is currently invalid, while Firefox returns the last valid one in that case). However, the (hopefully) working code that I reached after many iterations turns out to be fairly simple.

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

    If you test the calculator and notice anything that doesn't feel right, please mention it. It's important to me that it works properly. In case you also take the time to look at the code and have suggestions, don't hesitate to comment; I am happy to hear any feedback.

    Tip calculator made in vanilla JavaScript

    #sass/scss#bem
    1
    nerdynischal•190
    @nerdynischal
    Posted 17 days ago

    Everything works really well, liked that the input was restricted to avoid any faulty inputs like letters. It is also identical to the design and really well done.

  • Baktygul•90
    @MBaktygul
    Submitted 27 days ago

    Dynamic time tracking dashboard

    #sass/scss
    1
    nerdynischal•190
    @nerdynischal
    Posted 20 days ago

    Looks good, is responsive and functions well.

  • P
    Alexander3717•310
    @Alexander3717
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am quite satisfied with how I handled the form validation using Constraint Validation API.

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

    Making the submit button background transition smoothly (from dark blue to the bright gradient) was a minor challenge, since the background property isn’t transitionable. I solved it by creating the gradient as a pseudo-element and changing its opacity.

    .standard-btn {
        // Button styling properties here
        //...
    
        transition: box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    
        &::before { // for the gradient in active state
            content: '';
            position: absolute;
            inset: -1px;
            background: linear-gradient(90deg, #FF6A3A 0%, #FF527B 100%);
            opacity: 0;
            transition: opacity 0.2s;
        }
    
        span { // so the gradient doesn't cover the button text
            position: relative;
            z-index: 1;
        }
    
        &.ready { // class which adds the gradient and box shadow
            box-shadow: 0 rem(16px) rem(32px) 0 rgba(255, 97, 85, 0.50);
    
            &::before {
                opacity: 1;
            }
        }
    }
    
    What specific areas of your project would you like help with?

    Please do you think the form UX is good? I tried to make it realistic and would like to know if others also perceive it that way or if anything feels off.

    Responsive newsletter sign-up form using Constraint Validation API

    #bem#sass/scss
    1
    nerdynischal•190
    @nerdynischal
    Posted 27 days ago

    It looks good and works well across different device widths. From UX perspective, it feels natural and seamless.

  • P
    Max Kravchenko•210
    @kravamax
    Submitted 29 days ago

    Responsive Artcle preview component SCSS/JS

    #sass/scss
    1
    nerdynischal•190
    @nerdynischal
    Posted 29 days ago

    It all looks and works great and according to the brief.

  • P
    Eddie•140
    @WeatherheadOnline
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have used more complicated SASS than last time: this time I learned how to use partials, ie. multiple SASS files, and how to have them pass variables and presets to each other.

    I'm also proud of recognizing the opportunity to use Javascript. I used it to fill out repetitive aspects of the page's contents by iterating over an array I built to contain testimonial objects.

    Next time I would find it easier to start out with a plan of what information will go in each partial SASS file. That might be easier next time, now that I've seen how they fit together.

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

    I found it difficult to get started with using multiple SASS files. What helped me the most were the SASS docs on @use and this Youtube demonstration of @forward.

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

    Any feedback is welcome. Do you know of any SASS best practices I'm missing, or anywhere I could be using SASS better?

    JS & SASS Testimonials Grid plus Hover Effects

    #sass/scss
    1
    nerdynischal•190
    @nerdynischal
    Posted about 2 months ago

    Everything looks identical! Well done! As for the SASS best practices, I think this might help. A Modern Sass Folder Structure

    Marked as helpful
  • P
    Sean Buckle•410
    @seanbuckle
    Submitted over 1 year ago

    Four card feature section using CSS Grid and Flexbox

    #accessibility#bem#sass/scss
    1
    nerdynischal•190
    @nerdynischal
    Posted about 2 months ago

    All looks good!

  • P
    Michael•180
    @Networksentinel
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m pretty proud of how I handled the layout changes for different screen sizes. It wasn’t just a simple clamp() fix — the design needed the component to start small on phones, get bigger by tablet size, then shrink a bit, and finally grow again on bigger screens.

    It was kind of tricky, but I made it work by mixing @media queries with clamp(). The layout feels smooth and responsive, and it really matches the Figma design closely.

    Next time I will commit more often in Git, and be more intentional with it. Like, really think about what each change is doing to the layout or visuals, and pick a commit message/label that fits.

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

    Like I said before, making the layout work well on all screen sizes was tricky.

    Another thing that bugged me was this huge gap showing up under the <footer>. I was honestly almost frustrated trying to figure out what was going on.

    Turns out, it’s just how browsers behave when the page content is smaller than the screen height — I knew this already, but totally blanked on it with everything else going on. After like two hours of debugging and comparing with my old projects, I finally cracked it.

    Funny how sometimes the simplest stuff ends up being the hardest to remember!🤦‍♂️

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

    If anyone has tips on handling responsiveness more effectively, I’m all ears! Same goes for my mixins — if you see anything I could improve or clean up, let me know. Any trick or suggestion is totally welcome and appreciated 🙌

    Responsive preview card - media queries + clamp()

    #sass/scss#vite
    1
    nerdynischal•190
    @nerdynischal
    Posted about 2 months ago

    Looks identical and really well done to the details.

  • P
    Kuba Gużyński•100
    @kuba-guzynski
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In this solution, I am very happy with my detailed approach to creating views for different screen resolutions (computers, tablets, mobile devices). Next time, I need to work on the execution time of the tasks.

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

    In this challenge, I managed to work more with Grid CSS, and with this approach, it took me quite a long time.

    Recipe-Page-Main

    1
    nerdynischal•190
    @nerdynischal
    Posted 3 months ago

    It looks identical and can see how a lot of attention was paid to the tiny details. Well done.

  • Alaa-Zakaria12•40
    @Alaa-Zakaria12
    Submitted 3 months ago

    a solution for "social-links-profile-main" challenge. Using HTML & CSS

    1
    nerdynischal•190
    @nerdynischal
    Posted 3 months ago

    Looks really good and almost identical besides some differences in margins and paddings.

    Marked as helpful
  • Ethan Gandiya•20
    @STR33T-K3Y5
    Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    None if i'm being honest.

    Blog Landing Page

    1
    nerdynischal•190
    @nerdynischal
    Posted 3 months ago

    It does not create the same design provided but use their own design which pretty much covers all the concepts in the original?

  • Nikos Andriotis•10
    @andriotisnikos1
    Submitted 3 months ago

    Responsive qr-code image display

    1
    nerdynischal•190
    @nerdynischal
    Posted 3 months ago

    The design looks very similar to the solution. As for the code, I cannot comment since I do not know React.

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