비전공자 개발일기

TIP CAlculator 본문

Javascript

TIP CAlculator

HiroDaegu 2022. 10. 23. 00:01
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TIP CALCULATOR</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>

<body>
    <div id="container">

        <h1>Tip Calculator</h1>

        <div id="calculator">

            <form>
                <label>How much was your bill? <br>
                    $ <input type=" text" id="billAmount">
                </label>

                <label>How was your service? <br>
                    <select id="serviceQuality">
                        <option disabled selected value="0">-- Choose an option --</option>

                        <option value="0.3">30% - Outstanding</option>

                        <option value="0.2">20% - Good</option>

                        <option value="0.15">15% - Okay</option>

                        <option value="0.1">10% - Bad</option>

                        <option value="0.05">5% - Terrible</option>
                    </select>
                </label>

                <label>
                    How many people are sharing the bill?<br>
                    <input type="text" id="totalPeople"> people
                </label>
                <button type="button" id="calculate">Calculate!</button>

            </form>


        </div>
        <!--calculator -->

        <div id="totalTip">
            <sup>$</sup><span id="tip">0.00</span>
            <small id="each">each</small>
        </div>
        <!--totalTip-->


    </div><!-- container -->
</body>

</html>
body {
    background: #333 url(https://photos-2.dropbox.com/t/2/AACXQ_67JHXFKvEaqJWfsntp3cdvZ5wouSYvGO6wvJXxrg/12/670825672/jpeg/32x32/1/_/1/2/cutlery.jpg/EMbmxb0FGB0gBygH/hFUR9L79V2OIV-qumnK9gEZDFufrBDC0AvCr9pctqno?size=1280x960&size_mode=3) center center no-repeat;
    background-size: cover;
    color: orange;
}

#container {
    width: 400px;
    margin: 40px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: url(https://photos-3.dropbox.com/t/2/AADc4QWfisqOp9ossiflh-MjZfYwwMsTMxogUkSELkEBog/12/670825672/jpeg/32x32/1/_/1/2/paper-pattern.jpg/EMbmxb0FGB4gBygH/HXFrPb4KgB-jYL8JrSohX_9NNPGgbKsDnptQBOEO-xo?size=1280x960&size_mode=3) top left repeat;
    box-shadow: 0 10px 15px -8px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
}

h1 {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: solid 1px #ddd;
}

form {
    text-align: left;
}

form label {
    display: block;
    margin: 25px 0;
    font-weight: bold;
}

form input,
form select {
    padding: 8px;
    margin: 10px 0;
}

form input [type="text"] {
    width: 90px;
}

button {
    background: #6c2726;
    color: white;
    border: none;
    border-bottom: solid 4px #222;
    text-transform: uppercase;
    font-size: 18px;
    padding: 20px 30px;
    width: 100%
}


button:hover {
    background: #4c2827;
    border-bottom-color: #111;
}

button:active {
    position: relative;
    top: 1px;
}

#totalTip {
    font-size: 50px;
    margin-top: 40px;
}

#totalTip:before {
    content: "Tip Amount";
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-transform: upppercase;
}

#totalTip sup {
    font-size: 24px;
    top: -18px;
}


#totalTip small {
    font-size: 14px;
    font-weight: bold;
    display: block;
}
// Custom function
function calculateTip() {
  // Store the data of inputs
  var billAmount = document.getElementById("billAmount").value;
  var serviceQuality = document.getElementById("serviceQuality").value;
  var numPeople = document.getElementById("totalPeople").value;

  // Quick validation
  if (billAmount === "" || serviceQuality == 0) {
    window.alert("Please enter some values to get this baby up and running!");
    return; // this will prevent the function from continuing
  }

  // Check to see if this input is empty or less than or equal to 1
  if (numPeople === "" || numPeople <= 1) {
    numPeople = 1;

    document.getElementById("each").style.display = "none";
  } else {
    document.getElementById("each").style.display = "block";
  }

  // Do some math!
  var total = (billAmount * serviceQuality) / numPeople;
  total = Math.round(total * 100) / 100;
  total = total.toFixed(2);

  // Display the tip!
  document.getElementById("totalTip").style.display = "block";
  document.getElementById("tip").innerHTML = total;
}

// Hide the tip amount on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";

// Clicking the button calls our custom function
document.getElementById("calculate").onclick = function () {
  calculateTip();
};

//hide tip amount on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";

//Clicking the button
document.getElementById("calculate").onclick = function () {
  calculateTip();
};
728x90
LIST

'Javascript' 카테고리의 다른 글

Captcha validation  (0) 2022.10.31
Parallax Tilt Effect Cards  (0) 2022.10.29
NASA APIs  (0) 2022.10.19
Netflix Landing Screen  (0) 2022.10.17
2048 GAME  (0) 2022.10.11
'Javascript' Related Articles more