Skip to content
OverviewSolutions
4
Comments
4
Justin
@jpal91

All comments

  • Iva Beriashvili•140
    @ivaberiashviliSubmitted over 2 years ago

    Any feedback will be appreciated. Also I would love to hear your way of placing the main background shape so that the edge rounding is not distorted.

    Interactive pricing component

    1
    Justin•160
    @jpal91Posted over 2 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

    0
  • Justin•160
    @jpal91Posted over 2 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!

    0
  • Justin•160
    @jpal91Posted over 2 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!

    0
  • micoirvin•80
    @micoirvinSubmitted over 2 years ago

    There are a lot of challenges and learnings from this project. I became a little more skilled in manipulating objects. This is also the first time I used a browser’s localStorage. I had to organize my data structures and algorithms smartly. I also had to organize my HTML structure, so that I could manipulate it easier in the script. I also learned some new things in CSS and layouts. Read everything in my documentation:

    https://micoirvin.com/projects-docu/interactive-comments-section-docu.html

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

    4
    Justin•160
    @jpal91Posted over 2 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
    1