Skip to content
OverviewSolutions
23
Comments
6

Goran

@GoranK89Slovenia500 points

Building a solid foundation in vanilla JS, and soon making life easier with React and other frameworks :)

I’m currently learning...

Frontend

Latest solutions

View more solutions

Latest comments

  • Goran•500
    @GoranK89

    Hello Karen!

    The original design has rounded edges and a box shadow, you can add those to the <main> element. Other than that good work! 👍

    Marked as helpful
  • Goran•500
    @GoranK89

    This is not a helpful comment but I have to say, you have very clean and readable code! 👍

    Marked as helpful
  • Goran•500
    @GoranK89

    Hello Shreyas,

    you don't need to worry about flexbox, it's made to make your CSS life easier. Regarding the event listeners, they are fine for small apps like this, but if you are concerned about performance, you can check out the so-called 'event bubbling' on MDN-docs, you can research and experiment with that in your future projects. Cheers!

  • Goran•500
    @GoranK89

    Hello HaYeong,

    the calculator works, well done. Now for the JS part, I would recommend you try the forEach loop on all buttons except the custom one. What I mean is a setup something like this:

    First the HTML setup for the buttons

                <input
              type="button"
              value="5%"
              class="btn-tip"
            />
            <input
              type="button"
              value="10%"
              class="btn-tip"
            />

    Now we can gather all the buttons in JS and run a loop over them:

    const tipButtons = document.querySelectorAll('.btn-tip');  // all the buttons

tipButtons.forEach(btn =>
  btn.addEventListener('click', function (e) {

    // on every clicked button remove the % symbol, only the value remains, store it in a variable
    const clicked = e.target.value.slice(0, -1); 

      // some sample calculations you can do with the "clicked" variable
      const billPerPerson = billAmmount.value / peopleNum.value;
      const tipPerPerson = (billPerPerson / 100) * clicked;
      const totalToPay = billPerPerson + tipPerPerson;
    
      // finally displaying the desired calculations example
      tipAmntPerPerson.textContent = '$' + tipPerPerson.toFixed(2);
    }
  })
);

    You can also add some if/else statements inside the loop so for example calculations for "people < 1" are not done. This will probably shorten your code by 90% and clean it up a lot. Hope this was helpful and keep at it!

    Marked as helpful
  • Goran•500
    @GoranK89

    Hello Skye! Regarding the box-shadow, you can wrap ".community" and ".bottom-wrapper" together into a new div and apply a shadow to that, or you can just apply it to the main html element. Other than that minor detail it looks great!

  • Goran•500
    @GoranK89

    Looks good so far! I would add more space around the titles and text, and the overall shape should come close to the example picture.