Javascript Tip Calculator

Enter Bill $

Enter Tip %

Split Bill #

Code

HTML

<div id="projContainer">
    <header>
        <h1><span>Javascript </span>Tip Calculator</h1>
    </header>
    <div class="contentWrap">
        <section class="img">
            <div class="coin">
                <div class="dollar">$</div>
            </div>
        </section>
        <div class="flexWrap">
            <label for="bill">Enter Bill $</label>
            <input id="billAmount" name="bill" type="number"/>
        </div>
        <div class="flexWrap">
            <label for="tip">Enter Tip %</label>
            <input id="tipAmount" value="15" name="tip" type="number"/>
        </div>
        <div class="flexWrap">
            <label for="bill">Split Bill #</label>
            <input id="split" value="1" name="bill" type="number"/>
        </div>
        <div class="buttons">
            <button id="calc" onClick="calcTip();">Calculate</button>
            <button id="round" onclick="roundTip(calcTip());">Round <span>Close </span>to Dollar</button>
        </div>
    </div>
    <footer>
        <h3 id="tip-total">Tip:<span></span></h3>
        <h3 id="total-total">Total:<span></span></h3>
    </footer>
</div>

CSS

:root {
	--imgSize: 12rem;
	--cornerCurve: 5px;
}
h1 span, button span {display: none;}
#projContainer {
	background: #eee;
	position: relative;
	width: 100%;
	height: 100%;
}
#projContainer > * {
	width: inherit;
	padding: var(--contGap);
}
article header {
	color: #BF964B;
    background: #401E0A;
}
article footer {
    color: #BF964B;
    background: #401E0A;
	display: inline-block;
	text-align: left;
}
h1 {
	font: 2em 'Lobster', cursive;
	padding: var(--contGap) 0;
	width: 100%;
	text-align: var(--textAlign);
}
footer h3 {font: 1.6em 'Lobster', cursive;}
footer h3 span {color: #F2E52E;}
.flexWrap {
	width: inherit;
	display: flex;
	flex-flow: row nowrap;
	margin-top: var(--contGap);
	margin-bottom: var(--contGap);
	justify-content: space-between;
	border-radius: var(--cornerCurve);
}
label, input {
	display: inline-block;
	padding: calc(var(--contGap)/4);
}
label {
	width: 6rem;
	flex: none;
	display: grid;
	place-items: center;
	color: #BF964B;
    background: #401E0A;
	border-radius: var(--cornerCurve) 0% 0% var(--cornerCurve);
}
input {
	width: calc(100% - 6rem);
	background:rgb(242 194 48 / 50%);
	flex: auto;
	border-radius: 0% var(--cornerCurve) var(--cornerCurve) 0%;
}
button:first-of-type {
	margin-right: var(--contGap);
}
button {
	border-radius: var(--cornerCurve);
	padding: calc(var(--contGap)/4);
	background: #F2C230;
	transition: var(--transAll);
}
button:hover {
	background: #F2E52E;
	color: var(--dark);
}
.img, .dollar {
    width: 100%;
    display: grid;
    place-items: center;
}
.coin {
    width: var(--imgSize);
    height: var(--imgSize);
    border-radius: 50%;
    background-color: #F2E52E;
    position: relative;
	overflow: hidden;
	border: calc(var(--imgSize)/12) solid #F2C230;
}
.coin::after {
    content: "";
    position: absolute;
    top: -.2rem;
    left: -.2rem;
    border-width: calc(var(--imgSize)/2);
    border-style: solid;
    border-radius: 50%;
    border-color: #fff #fff transparent transparent;
    z-index: 1;
    opacity: .3;
}
.dollar {
    width: 100%;
    height: 100%;
    font-size: calc(var(--imgSize)*.5);
    font-weight: 900;
    color: #F2C230;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
/*CSS Breakpoints*/
@media only screen and (min-width: 800px) {
	:root {
		--contGap: 1.5rem;
	}
	h1 {font-size: 3rem;}
	footer h3 {font-size: 2rem;}
	#projContainer {
		display: flex;
		flex-flow: column nowrap;
	}
	.contentWrap {
		flex: auto;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}
	article footer {
		height: 10rem;
	}
	label {width: 10rem;}
	input, label, button {
		font-size: 1.5rem;
		padding: calc(var(--contGap)/3);
	}
	h1 span, button span {display: inline;}
}
@media only screen and (min-width: 1000px) {
	:root {
		--imgSize: 20vw;
	}
	.contentWrap {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: repeat(4, 3rem);
		grid-gap: var(--contGap);
		margin-top: 15vh;
		height: calc(100% - 15vh);
	}
	.img {
		grid-column: 1 / 2;
		grid-row: 1 / -1;
	}
	.flexWrap, .buttons {
		grid-column: 2 / 3;
		margin: 0;
	}
	.dollar {
		font-size: 14vw;
	}
	article footer {
		height: 15vh;
	}
	.contentWrap {
		padding: 0 calc(var(--contGap)*2) !important;
	}

}

JS

function calcTip() {
    var split = Number(document.querySelector("#split").value);
    var billInput = Number(document.querySelector("#billAmount").value);
    var tipInput = Number(document.querySelector("#tipAmount").value) / 100;  
    var totalTip = Math.round((billInput * tipInput) * 100) / 100;
    var spanTip = document.querySelectorAll("h3")[0].querySelector("span"); 
    if(split > 1) {
        var splitTip = Math.round((totalTip / split) * 100) / 100;
        var totalBill = billInput + (splitTip * split);
        var totalTip = splitTip * split;
        spanTip.innerText = " $" + splitTip.toFixed(2) + " ($" + totalTip.toFixed(2) + " all)";
    } else {
        var totalBill = billInput + totalTip;
        spanTip.innerText = " $" + totalTip.toFixed(2);
    }
    var spanTotal = document.querySelectorAll("h3")[1].querySelector("span"); 
    spanTotal.innerText = " $" + totalBill.toFixed(2);
    return [totalBill, totalTip];
}
function roundTip(array) {
    var split = Number(document.querySelector("#split").value);
    var totalBill = array[0];
    var totalTip = array[1];
    var spanTip = document.querySelectorAll("h3")[0].querySelector("span"); 
    var adjTotalBill = Math.ceil(totalBill);
    if(split > 1) {
        var splitTip = Math.round((totalTip / split) * 100) / 100;
        var increaseTip = adjTotalBill - totalBill;
        var splitTipInc = Math.round((increaseTip / split) * 100) / 100;
        splitTip = splitTip + splitTipInc;
        var billInput = totalBill - totalTip;
        adjTotalBill = splitTip * split + billInput;
        totalTip = splitTip * split;
        spanTip.innerText = " $" + splitTip.toFixed(2) + " ($" + totalTip.toFixed(2) + " all)";
    } else {
        var adjTip = adjTotalBill - totalBill + totalTip;
        spanTip.innerText = " $" + adjTip.toFixed(2);
    }
    var spanTotal = document.querySelectorAll("h3")[1].querySelector("span"); 
    spanTotal.innerText = " $" + adjTotalBill.toFixed(2);
}