Skip to content
OverviewSolutions
8
Comments
5

Jansel

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

View more solutions

Latest comments

  • Jansel•230
    @JanselLopez

    for center the calculator try:

    body {
  background-color: var(--light-grayish-cyan);
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
  • Jansel•230
    @JanselLopez

    Hi 😃, for the background of the card you can set the width of you container and manage it with media queries, something like:

    .container {
  width: 500px;
}

@media (max-width: 510px) {
  .container {
    width: 90%;
  }
}

    for read about media queries: w3schools/mediaqueries

    Marked as helpful
  • Jansel•230
    @JanselLopez

    Hello 🙃, there are some improvements there that you could implement:

    1. Use flexbox to align the content instead of placing a large margin that does not make it responsive, here are some links to learn flexbox interactively ( flexboxfroggy, flexboxdefense)
    2. Instead of placing images of the dollar sign you can place a background-image to your inputs, this makes them not leave the input, you can try something like this:
      background-image: url(../assets/images/icon-dollar.svg);
  background-repeat: no-repeat;
  background-size: calc(contain);
  background-position-y: center;
  background-position-x: 15px;
    1. In addition to eliminate the "arrows" in the number type input you can put this in your input in css
    "appearance: textfield;"

    There are some more improvements but I think that with this the page should give a good change, I hope it has been helpful 😊.

    Marked as helpful
  • Jansel•230
    @JanselLopez
    1. I think the idea is to show only once at a time, so you can do this in your js code:
        const btn = document.querySelectorAll(".contentbox");
    let current;
    btn.forEach((element) => {
      element.addEventListener("click", () => {
        if (current && current != element) {
          current.classList.toggle("show");
        }
        element.classList.toggle("show");
        current = current === element ? undefined : element;
      });
    });
  • Jansel•230
    @JanselLopez

    For center the calculator you can delete all margins in ".tipCalculator{}" and add these lines of code in your css file:

    body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;  
  justify-content: center;
}

    you can read about viewports(vw, vh) here => Viewport_concepts

    Marked as helpful