TipCalc

Developer
Anthony Keithley
Size
2,223 Kb
Views
6,072
  1. TipCalc Previews
  2. TipCalc HTML Codes
  3. TipCalc CSS Codes
  4. TipCalc JS Codes

How do I make an tipcalc?

What is a tipcalc? How do you make a tipcalc? This script and codes were developed by Anthony Keithley on 24 December 2022, Saturday.

TipCalc Previews
IQ Test

TipCalc - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TipCalc</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container">
<div class="blocks" id="top"> <h1 id="title">Tip Calculator</h1>
</div>
<div class="blocks" id="subtotal"> <h2>Bill Total:</h2> <br> <input type="number" id="bill" min="0" placeholder="$0.00">
</div>
<div class="blocks" id="tip"> <h2>Tip Percentage:</h2> <br> <button class="tips" id="zero" onclick="getTip(0)">No Tip</button> <button class="tips" id="fifteen" onclick="getTip(0.15)">15%</button> <button class="tips" id="eighteen" onclick="getTip(0.18)">18%</button> <button class="tips" id="twenty" onclick="getTip(0.2)">20%</button> <input class="tips" id="other" type="number" placeholder="other" min="0" onkeydown="enterKey()" onblur="otherTip()">
</div>
<div class="blocks" id="total"> <h2>Total:</h2> <br> <h2 id="result"></h2>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>

TipCalc - Script Codes CSS Codes

*{ margin: 0; padding: 0; box-sizing: border-box;
}
#title { padding: 35px;
}
#container { width: 600px; margin: 50px auto;
}
#top { background: #4A148C;
}
#bill { padding: 5px 10px; font-size: 24px; text-align: center;
}
#tip{ background: #AB47BC;
}
.tips { width: 100px; padding: 5px 10px; font-size: 24px; color: white; background: slategray; text-align: center;
}
#other { background: white; color: black;
}
#subtotal { background: #8E24AA;
}
.blocks{ width: 100%; height: 120px; text-align: center; color: white; font-family: helvetica; padding: 20px;
}
#total { background: #BA68C8;
}

TipCalc - Script Codes JS Codes

var other = document.getElementById("other").value;
function enterKey(){ if(event.keyCode == 13){ otherTip(); }
}
function otherTip(){ var other = document.getElementById("other").value; getTip(other / 100);
}
function getTip(percentage){ var bill = document.getElementById("bill").value; var total = bill * (1 + percentage); total = Math.round(total * 100) / 100; document.getElementById("result").innerHTML = "$" + total.toFixed(2);
}
TipCalc - Script Codes
TipCalc - Script Codes
Home Page Home
Developer Anthony Keithley
Username KeithleySLHS
Uploaded December 24, 2022
Rating 3
Size 2,223 Kb
Views 6,072
Do you need developer help for TipCalc?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Keithley (KeithleySLHS) Script Codes
Name
Portfolio
Padding and Margin
CSS3
Nav Bar
Organizing Your HTML
Linear Equations
Pluralizer
MuchoMatho
Keyframes May 4
Factorial
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!