Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Tip Calculator #650

Closed
wants to merge 8 commits into from
31 changes: 31 additions & 0 deletions Calculators/BMR-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMR Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<h1>BMR Calculator</h1>
<div class="form">
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="age">Age (years):</label>
<input type="number" id="age" min="0" required>
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" min="0" required>
<label for="height">Height (cm):</label>
<input type="number" id="height" min="0" required>
<button onclick="calculateBMR()">Calculate</button>
</div>
<div id="result"></div>
</div>

<script src="script.js"></script>
</body>
</html>
16 changes: 16 additions & 0 deletions Calculators/BMR-Calculator/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# <p align="center"> BMR Calculator</p>

## Description :-

Calculates the Basal Metabolic Rate of a person with the help of its height,weight,age,gender.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-


![Screenshot 2024-05-10 233027](https://github.com/Nayanika1402/CalcDiverse/assets/132455412/bec7c951-47be-48cc-a20a-f2784110332e)
19 changes: 19 additions & 0 deletions Calculators/BMR-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
function calculateBMR() {
var gender = document.getElementById("gender").value;
var age = parseInt(document.getElementById("age").value);
var weight = parseFloat(document.getElementById("weight").value);
var height = parseFloat(document.getElementById("height").value);

var bmr;
if (gender === "male") {

bmr = 10 * weight + 6.25 * height - 5 * age + 5;

} else {

bmr = 10 * weight + 6.25 * height - 5 * age - 161;
}

document.getElementById("result").innerHTML = "Your Basal Metabolic Rate (BMR) is " + bmr.toFixed(2) + " calories per day.";
}

63 changes: 63 additions & 0 deletions Calculators/BMR-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color:#fff;
background-image: linear-gradient(90deg,#1CA7EC,#1F2F98);
}

.calculator {
background-color:#fff;
width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

.form {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
color: #555;
}

input[type="number"],
select {
width: 100%;
padding: 8px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}


button {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #45a049;
}

#result {
text-align: center;
font-size: 18px;
color: #333;
}

27 changes: 27 additions & 0 deletions Calculators/Tip-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Tip Calculator</h1>
<p>Enter the Bill amount and Tip percentage to calculate the total😊 </p>
<lable for="bill">Bill amount:</lable>
<input type="number" id="bill">
<br/>
<label for="tip">Tip percentage:</label>
<input type="number" id="tip">
<br/>
<button id="calculate">Calculate</button>
<br/>
<label for="total">Total:</label>
<span id="total"></span>
</div>

<script src="script.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions Calculators/Tip-Calculator/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Tip Calculator</p>

## Description :-

Calculates the total bill with the value of Bill Amount and Tip Percentage.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![Screenshot 2024-05-10 182459](https://github.com/Nayanika1402/CalcDiverse/assets/132455412/c6ed81ff-4a69-4988-baf0-09ca0acd5a2c)
15 changes: 15 additions & 0 deletions Calculators/Tip-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const btnE1 = document.getElementById("calculate");
const billInput =document.getElementById("bill");
const tipInput = document.getElementById("tip");
const totalSpan = document.getElementById("total");

function calculateTotal(){
const billValue = billInput.value;
const tipValue = tipInput.value;
const totalValue = billValue * (1 + tipValue / 100);
totalSpan.innerText = totalValue.toFixed(2);

}


btnE1.addEventListener("click", calculateTotal);
59 changes: 59 additions & 0 deletions Calculators/Tip-Calculator/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
*{
box-sizing: border-box;
}

body{

background: linear-gradient(90deg, #3498db, #2c3e50);
font-family: "Helvetica",
sans-serif;
}

.container{

background-color:white;
max-width:600px;
margin:100px auto;
padding:20px;
box-shadow:0 0 10px rgba(0,0,0,.2);
border-radius: 10px;
}

h1{
color: #3498db;
margin-top: 0;
text-align: center;

}

input{
padding:10px;
border:1px solid #ccc;
border-radius: 4px;
margin:10px 0;
width:100%;
}

button{
background-color: #4caf50;
color:white;
padding:10px;
border:none;
cursor:pointer;
margin:10px 0;
width:100%;
font-size: 18px;
text-transform: uppercase;
transition: background-color .2s ease;
}

button:hover{
background-color: #0d5d11;
}

#total{
font-size: 24px;
font-weight: bold;
margin-top: 10px;

}
29 changes: 29 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,21 @@ <h3>Calculates the Body Mass Index of a person using Height & Weight.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>BMR Calculator</h2>
<h3>Calculates the Basal Metabolic Rate of a person using Height,Weight,Age and Gender.</h3>
<div class="card-footer">
<a href="./Calculators/BMR-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/BMR-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>

<div class="box">
<div class="content">
<h2>Book Reading Time Calculator</h2>
Expand Down Expand Up @@ -1798,6 +1813,20 @@ <h3>Instantly find the time difference anywhere in the world.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Tip Calculator</h2>
<h3>Hustle free calculation of restuarent bill with the tip.</h3>
<div class="card-footer">
<a href="./Calculators/Tip Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Tip Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Triangle Calculator</h2>
Expand Down