Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
4
Justin
@jpal91

All comments

  • Iva Beriashvili•140
    @ivaberiashvili
    Submitted almost 3 years ago

    Interactive pricing component

    1
    Justin•160
    @jpal91
    Posted almost 3 years ago

    Awesome job, looks super clean and I really loved the slider animation you added.

    Not sure what you meant with the background being blurred, though. It looked fine on my side, but I may be misunderstanding there.

    Feel free to ignore this next bit, because it isn't really necessary but I just like buttons to "do" something. I wrote a few extra lines to make the Start my trial button more reactive -

    Added to main.css

    .start {
      ...
      transform: scale(1);
      transition: 0.2s ease-in;
    }
    
    .start:hover {
      ...
      cursor: pointer;
      transform: scale(1.05);
      transition: 0.2s ease-in;
    }
    
    .bounce {
      animation: 0.5s ease 0s 1 normal forwards bouncebtn;
    }
    
    @keyframes bouncebtn {
      0% {
        transform: scale(1.05);
      }
    
      50% {
        transform: scale(0.9);
      }
    
      100% {
        transform: scale(1);
      }
    }
    

    Added to script.js

    const button = document.getElementById("submit-btn");
    
    button.addEventListener("click", (e) => {
      e.preventDefault();
      button.classList.add("bounce");
      setTimeout(() => button.classList.remove("bounce"), 1000);
    });
    

    Added to index.html

    <button id="submit-btn" class="start" type="button">
    //same button, just with added id
    

    I don't usually mess with vanilla CSS too much, but this ended up looking pretty cool so I wanted to share!

    Here it is on CodeSandbox

  • P
    Oscar•260
    @OscarRobertRodriguez
    Submitted about 3 years ago

    markdown editor showdownjs, react, css grid , styled components

    #react
    2
    Justin•160
    @jpal91
    Posted almost 3 years ago

    Your menu transitioning so smoothly made me realize how choppy mine is so I'm going to have to go back and fix that...

    Also, great idea on creating your own hook for useLocalStorage(), that was really cool and I've never though about doing something like that before. Great job!

    One recommendation I'd add in, mostly because I took a while trying to do the same thing, is adding in some CSS to remove the scrollbars. This is what I used as overrides in Material UI but you should be able to get the gist for Vanilla CSS -

      html: {
        scrollBehavior: "smooth"
      },
      "::-webkit-scrollbar": {
        width: "5px"
      },
      "::-webkit-scrollbar-track": {
        visibility: "hidden"
      },
      "::-webkit-scrollbar-thumb": {
        visibility: "hidden"
      },
      ":hover": {
        "::-webkit-scrollbar-thumb": {
          border: "5px solid gray",
          borderRadius: "10px",
          visibility: "visible"
        }
      },
    

    This way the scroll bars are only visible on hover and they look a little nicer too. Great job overall!

  • Mahmoud Attia•330
    @attia-mahmoud
    Submitted about 3 years ago

    Responsive Rock, Paper, Scissors Game

    1
    Justin•160
    @jpal91
    Posted about 3 years ago

    I really loved the "slots machine" pick for the House. That was really cool and added some additional flair to it. Awesome job!

  • micoirvin•80
    @micoirvin
    Submitted about 3 years ago

    Vanilla JS, data structures and algorithms, DOM access, grid, flex

    4
    Justin•160
    @jpal91
    Posted about 3 years ago

    I really loved the drop down, I think I'm going to have to add something like that to mine. Super simple and gets the job done.

    The design and overall style looks great. Nothing is "jumpy", it's reactive, it's clean-looking, and just works. Really great job.

    Only thing I noticed is if you start nesting replies, you end up getting most of the text cut off by the 3rd or 4th reply. I'd recommend just adding in some logic to keep the comment card from getting too small. Maybe min-width would do just fine. Also, you don't get the "@user" after a reply.

    Marked as helpful

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