The Bill Splitter

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Calculate the correct tip and total cost of the bill per person

Screenshot

Links

• Solution URL: Solution Rep
• Live Site URL: Live Site

About

An Open Source web application which uses the information provided by the user to calculate the tip and total amount per person i.e. the Bill Splitter. Made for the ease of the convinience of the user, the UI is user-friendly and easy to use interface.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Media Query
• Mobile-first workflow
• Vanilla JavaScript
• VSCode

What I learned

This was a really helpful project. Though I was comfortable using HTML and CSS, JavaScript was a bit scrampy. I'll be making changes to this project soon.

<h1>Some HTML code I'm proud of</h1>

.calculator #no-of-people {
    background-image: url(images/icon-person.svg);
    background-repeat: no-repeat;
    background-position: left 20px center;
}
.calculator form {
    position: relative;
}
.calculator form label {
    position: absolute;
    right: 5px;
    bottom: 52px;
    font-size: 14px;
}

if(peopleNumber.value === 0 || peopleNumber.value == "") {
          peopleNumber.style.border = "1px solid red";
          error.classList.remove("error");
          tipAmount.innerHTML = "$0.00";
          totalTip.innerHTML = "$0.00";
      }
      else {
        tipAmount.innerHTML = "$" + tipPerPerson.toFixed(2);
        totalAmount.innerHTML = "$" + totalTip.toFixed(2);
        peopleNumber.style.border = "none";
        error.classList.add("error");
      }
}

Continued development

Since I'm not quite comfortable with JavaScript therefore I will be working more on JavaScript based Projects.

Useful resources

• Input Events - This helped me in understanding events related to input fields.
• Mouse Events - This is an amazing article which helped me understand mouseover and mouseout events. I'd recommend it to anyone still learning this concept.

Author

• Website - Saurav Srivastava
• Frontend Mentor - @Sauravionic
• LinkedIn - Saurav Srivastava