Skip to content
OverviewSolutions
8
Comments
5
Jansel
@JanselLopez

All comments

  • Juan Cruz Vila•150
    @yunagosh7Submitted almost 2 years ago

    This is my first application that uses the MVC pattern, sorry for the variable names, but I couldn't think of any more xD. If you have any recommendations, I would greatly appreciate it

    Tip Calculator MVC

    1
    Jansel•230
    @JanselLopezPosted almost 2 years ago

    for center the calculator try:

    body {
  background-color: var(--light-grayish-cyan);
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    0
  • i_d_s_l•270
    @ilvdrsknSubmitted almost 2 years ago

    I made this challenge frankly badly, at least there were problems with the background of the card. What can be tweaked to make it better?

    FLEXBOX

    2
    Jansel•230
    @JanselLopezPosted almost 2 years ago

    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
    1
  • Jansel•230
    @JanselLopezPosted almost 2 years ago

    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
    0
  • Jansel•230
    @JanselLopezPosted almost 2 years ago
    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;
      });
    });
    1
  • Jansel•230
    @JanselLopezPosted almost 2 years ago

    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
    0