使用HTML、CSS和JavaScript设计小费计算器

小费是为了对在餐厅为您服务的人给予好的服务而给出的钱。在这个项目中，我们制作了一个简单的小费计算器，它以消费金额、服务类型和人数作为输入。根据这三个输入，它生成了给予服务人员的小费。

方法：

要计算小费，我们将从用户那里获取输入：账单金额（这是总账单的金额，我们将其保存在amount变量中），对于服务类型，我们使用一个下拉菜单，其中选项为质量的百分比（如好、坏、优秀等），最后，我们获取人数的输入（它将帮助将小费平均分配给所有人）。根据用户的输入，我们计算小费，然后使用console.log()函数打印出来。

Total is basically amount multiplied by type of service divided by a number of persons.

使用HTML，我们提供了所需的结构、输入选项和提交按钮。借助CSS，我们通过设置颜色和所需的字体等美化我们的结构。

在JavaScript部分，我们处理输入的数据，并在计算后打印出相应的输出。

示例：

HTML代码： 在这一部分中，我们将创建项目的基本结构
CSS代码： 在这一部分中，我们将为小费计算器应用样式
JavaScript代码： 在这一部分中，我们将应用逻辑和数学公式来计算小费

HTML代码

<html> 
  
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script type="text/javascript" src="app.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>TIP CALCULATOR</h1> 
        <div class="wrapper"> 
  
            <p>Bill Amount</p> 
            <input type="text" id="amount" placeholder="Amount to be paid"> ₹ 
            <p>How was the service ?</p> 
            <select id="services"> 
                <option selected disabled hidden> 
                    Select 
                </option> 
                <option value="0.25">25% - Top Notch</option> 
                <option value="0.20">20% - Excellent</option> 
                <option value="0.15">15% - Good</option> 
                <option value="0.10">10% - Bad</option> 
                <option value="0.05">5% - Worst</option> 
            </select> 
            <p>Total number of persons</p> 
            <input type="text" id="persons" placeholder="Number of people sharing the bill"> 
            <button id="calculate">Calculate</button> 
        </div> 
  
        <div class="tip"> 
            <p>Tip Amount</p> 
            <span id="total">0</span>₹ 
            <span id="each">each</span> 
        </div> 
    </div> 
</body> 
  
</html>

CSS代码

body { 
    background-color: #001f4f; 
    font-family: "Raleway", sans-serif; 
} 
  
.container { 
    width: 350px; 
    height: 500px; 
    background-color: #fff; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    border-radius: 20px; 
} 
  
h1 { 
    position: absolute; 
    left: 50%; 
    top: -60px; 
    width: 300px; 
    transform: translateX(-50%); 
    background-color: #ff851b; 
    color: #fff; 
    font-weight: 100; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    font-size: 18px; 
    text-align: center; 
    padding: 10px; 
} 
  
.wrapper { 
    padding: 20px; 
} 
  
input, 
select { 
    width: 80%; 
    border: none; 
    border-bottom: 1px solid #0074d9; 
    padding: 10px; 
} 
  
input:focus, 
select:focus { 
    border: 1px solid #0074d9; 
    outline: none; 
} 
  
select { 
    width: 88% !important; 
} 
  
button { 
    margin: 20px auto; 
    width: 150px; 
    height: 50px; 
    background-color: #39cccc; 
    color: #fff; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
} 
  
.tip { 
    text-align: center; 
    font-size: 18px; 
    display: none; 
}

JavaScript代码

window.onload = () => 
    //the function called when Calculate button is clicked. 
    { 
        /*calling a function calculateTip 
         which will calculate the tip for the bill.*/
        document.querySelector('#calculate').onclick = calculateTip; 
    } 
  
function calculateTip() { 
    /*assign values of ID : amount, person and service to  
    variables for further calculations.*/
    let amount = document.querySelector('#amount').value; 
    let persons = document.querySelector('#persons').value; 
    let service = document.querySelector('#services').value; 
  
    console.log(service); 
    /*if statement will work when user presses  
          calculate without entering values. */
    //so will display an alert box and return. 
    if (amount === '' && service === 'Select') { 
        alert("Please enter valid values"); 
        return; 
    } 
  
    //now we are checking number of persons  
    if (persons === '1') 
    //if there is only one person then we need not to display each. 
        document.querySelector('#each').style.display = 'none'; 
    else
    //if there are more than one person we will display each.   
        document.querySelector('#each').style.display = 'block'; 
  
    /*calculating the tip by multiplying total-bill and type of 
     service; then dividing it by number of persons.*/
    //fixing the total amount upto 2 digits of decimal 
    let total = (amount * service) / persons; 
    total = total.toFixed(2); 
  
    //finally displaying the tip value  
    document.querySelector('.tip').style.display = 'block'; 
    document.querySelector('#total').innerHTML = total; 
}