nithinexe/index.html

## index.html
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap" rel="stylesheet" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Tip Calculator</title>
</head>

<body>
  <div class="wrapper">
    <div class="container" id="topContainer">
      <h2 id = "name">Nitt's Tip Calculator</h2>
      <div class="title">Bill total</div>
      <div class="inputContainer">
        <span>$</span>
        <input onkeyup="calculateBill()" type="text" id="billTotalInput" placeholder="0.00" />
      </div>
    </div>
    <div class="container">
      <div class="title">Tip</div>
      <div class="inputContainer">
        <span>%</span>
        <input onkeyup="calculateBill()" type="text" id="tipInput" placeholder="10" />
      </div>
    </div>
    <div class="container" id="bottom">
      <div class="splitContainer">
        <div class="title">People</div>
        <div class="controls">
          <span class="buttonContainer">
            <button class="splitButton" onclick="decreasePeople()">
              <span class="buttonText">-</span>
            </button>
          </span>
          <span class="splitAmount" id="numberOfPeople">1</span>
          <span class="buttonContainer">
            <button class="splitButton" onclick="increasePeople()">
              <span class="buttonText">+</span>
            </button>
          </span>
        </div>
      </div>
      <div class="totalContainer">
        <div class="title">Total per Person</div>
        <div class="total" id="perPersonTotal">$0.00</div>
      </div>
    </div>
    <div class = "end">Thank You For Using 😊</div>
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

## script.js

const billInput = document.getElementById('billTotalInput')
const tipInput = document.getElementById('tipInput')
const numberOfPeopleDiv = document.getElementById('numberOfPeople')
const perPersonTotalDiv = document.getElementById('perPersonTotal')

//getting no of people from NoOfPeopleDiv
let numberOfPeople = Number(numberOfPeopleDiv.innerText)

const calculateBill = () => {
  const Bill = Number(billInput.value)
  const Tip = Number(tipInput.value)
  const TipPercent = Tip/100

  const TotalTipAmount = TipPercent * Bill
  const Total = Bill+TotalTipAmount
  const TotalPerPerson = Total/numberOfPeople

perPersonTotalDiv.innerText = `$${TotalPerPerson.toFixed(2)}`
}

const increasePeople = () => {
  // increment the amount
  numberOfPeople += 1

  // update the DOM with the new number of people
  numberOfPeopleDiv.innerText = numberOfPeople

  // calculate the bill based on the new number of people
  calculateBill()
}
const decreasePeople = () => {
  // guard clause
  // if amount is 1 or less simply return
  // (a.k.a you can't decrease the number of people to 0 or negative!)
  if (numberOfPeople <= 1) {
    return
  }

  // decrement the amount
  numberOfPeople -= 1

  // update the DOM with the new number of people
  numberOfPeopleDiv.innerText = numberOfPeople

  // calculate the bill based on the new number of people
  calculateBill()
}

## style.css
* {
  font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif;
  color: white;
}

body {
  background: white;
}

.wrapper {
  height: 525px;
  width: 360px;
  color: white;
  background: #000000;
  border-radius: 1rem;
  padding: 1.2rem;
  margin: 100px auto;
}

#topContainer {
  margin-top: 4rem;
}

.container {
  margin-top: 1.4rem;
}

.title {
  font-weight: bold;
  margin-bottom: 0.6rem;
}

.inputContainer {
  background: #353959;
  border-radius: 1.4rem;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
}

#billTotalInput,
#tipInput {
  font-size: 1.2rem;
  background: none;
  border: none;
  outline: none;
  padding: none;
}

.buttonContainer {
  background: #8990ec;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
}

.splitButton {
  background: none;
  border: none;
}

.controls {
  display: flex;
  align-items: center;
}

.splitButton {
  font-size: 0.8rem;
  font-weight: bold;
  display: grid;
  place-items: center;
}

.buttonText {
  color: #353959 !important;
}

.splitAmount {
  font-size: 1.6rem;
  margin: 0.8rem;
}

#bottom {
  display: flex;
  justify-content: space-between;
}

.totalContainer {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.total {
  font-size: 2rem;
}

#name{
  padding-left: 60px;
  padding-bottom:40px;
}
.end{
  font-size: 1.8rem;
  padding-left:24px;
  padding-top:10px;
}

## tipcalculator.markdown

      
    Raw
  

              tipcalculator.markdown
            
          
    TipCalculator

A Pen by Nithin017 on CodePen.
License.
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap" rel="stylesheet" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Tip Calculator</title>
	</head>

	<body>
	<div class="wrapper">
	<div class="container" id="topContainer">
	<h2 id = "name">Nitt's Tip Calculator</h2>
	<div class="title">Bill total</div>
	<div class="inputContainer">
	<span>$</span>
	<input onkeyup="calculateBill()" type="text" id="billTotalInput" placeholder="0.00" />
	</div>
	</div>
	<div class="container">
	<div class="title">Tip</div>
	<div class="inputContainer">
	<span>%</span>
	<input onkeyup="calculateBill()" type="text" id="tipInput" placeholder="10" />
	</div>
	</div>
	<div class="container" id="bottom">
	<div class="splitContainer">
	<div class="title">People</div>
	<div class="controls">
	<span class="buttonContainer">
	<button class="splitButton" onclick="decreasePeople()">
	<span class="buttonText">-</span>
	</button>
	</span>
	<span class="splitAmount" id="numberOfPeople">1</span>
	<span class="buttonContainer">
	<button class="splitButton" onclick="increasePeople()">
	<span class="buttonText">+</span>
	</button>
	</span>
	</div>
	</div>
	<div class="totalContainer">
	<div class="title">Total per Person</div>
	<div class="total" id="perPersonTotal">$0.00</div>
	</div>
	</div>
	<div class = "end">Thank You For Using 😊</div>
	</div>

	<script type="text/javascript" src="script.js"></script>
	</body>

	</html>

	const billInput = document.getElementById('billTotalInput')
	const tipInput = document.getElementById('tipInput')
	const numberOfPeopleDiv = document.getElementById('numberOfPeople')
	const perPersonTotalDiv = document.getElementById('perPersonTotal')

	//getting no of people from NoOfPeopleDiv
	let numberOfPeople = Number(numberOfPeopleDiv.innerText)

	const calculateBill = () => {
	const Bill = Number(billInput.value)
	const Tip = Number(tipInput.value)
	const TipPercent = Tip/100

	const TotalTipAmount = TipPercent * Bill
	const Total = Bill+TotalTipAmount
	const TotalPerPerson = Total/numberOfPeople

	perPersonTotalDiv.innerText = `$${TotalPerPerson.toFixed(2)}`
	}

	const increasePeople = () => {
	// increment the amount
	numberOfPeople += 1

	// update the DOM with the new number of people
	numberOfPeopleDiv.innerText = numberOfPeople

	// calculate the bill based on the new number of people
	calculateBill()
	}
	const decreasePeople = () => {
	// guard clause
	// if amount is 1 or less simply return
	// (a.k.a you can't decrease the number of people to 0 or negative!)
	if (numberOfPeople <= 1) {
	return
	}

	// decrement the amount
	numberOfPeople -= 1

	// update the DOM with the new number of people
	numberOfPeopleDiv.innerText = numberOfPeople

	// calculate the bill based on the new number of people
	calculateBill()
	}
	* {
	font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif;
	color: white;
	}

	body {
	background: white;
	}

	.wrapper {
	height: 525px;
	width: 360px;
	color: white;
	background: #000000;
	border-radius: 1rem;
	padding: 1.2rem;
	margin: 100px auto;
	}

	#topContainer {
	margin-top: 4rem;
	}

	.container {
	margin-top: 1.4rem;
	}

	.title {
	font-weight: bold;
	margin-bottom: 0.6rem;
	}

	.inputContainer {
	background: #353959;
	border-radius: 1.4rem;
	padding: 0 0.8rem;
	display: flex;
	align-items: center;
	}

	#billTotalInput,
	#tipInput {
	font-size: 1.2rem;
	background: none;
	border: none;
	outline: none;
	padding: none;
	}

	.buttonContainer {
	background: #8990ec;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	}

	.splitButton {
	background: none;
	border: none;
	}

	.controls {
	display: flex;
	align-items: center;
	}

	.splitButton {
	font-size: 0.8rem;
	font-weight: bold;
	display: grid;
	place-items: center;
	}

	.buttonText {
	color: #353959 !important;
	}

	.splitAmount {
	font-size: 1.6rem;
	margin: 0.8rem;
	}

	#bottom {
	display: flex;
	justify-content: space-between;
	}

	.totalContainer {
	display: flex;
	flex-direction: column;
	align-items: end;
	}

	.total {
	font-size: 2rem;
	}

	#name{
	padding-left: 60px;
	padding-bottom:40px;
	}
	.end{
	font-size: 1.8rem;
	padding-left:24px;
	padding-top:10px;
	}