Skip to content

Commit

Permalink
Added Lottery Odds Calculator (#1762)
Browse files Browse the repository at this point in the history
  • Loading branch information
anijit18 authored Aug 8, 2024
1 parent 6322810 commit 32e3480
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Calculators/Lottery-Odds-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Lottery Odds Calculator</p>

## Description :-

A calculator that calculates your chances of winning the lottery by taking the input as the number of tickets sold and the number of tickets bought by you.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/user-attachments/assets/c850c5f9-19e7-4e12-bcf2-606661176d74)
33 changes: 33 additions & 0 deletions Calculators/Lottery-Odds-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Lottery Odds Calculator</title>
</head>

<body>
<header>
<h1>Lottery Odds Calculator</h1>
</header>

<section id="calculator">
<label for="tickets" style="font-size: 18px; font-weight:bold; ">Enter the number of tickets you bought:</label>
<input type="number" id="tickets" required>

<label for="sold" style="font-size: 18px; font-weight:bold;">Enter the total number of tickets sold:</label>
<input type="number" id="sold" required>

<button onclick="calculate()">Calculate</button>
<br>
<br>
<span style="font-weight:bold; font-size:16px;">Your chances of winning the lottery are:</span>
<p id="result"></p>
</section>

<script src="script.js"></script>
</body>

</html>
21 changes: 21 additions & 0 deletions Calculators/Lottery-Odds-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
function calculate() {
// Get input values
const tickets = parseFloat(document.getElementById('tickets').value);
const sold = parseFloat(document.getElementById('sold').value);

// Validate inputs
if (isNaN(tickets) || isNaN(sold) || sold <= 0) {
document.getElementById('result').textContent = 'Please enter the values';
return;
}

// Perform the calculation
let r = tickets / sold;
r = r * 100;
let result = r.toFixed(2); // Limit to two decimal places
result += "%";

// Display the result
const resultElement = document.getElementById('result');
resultElement.textContent = result;
}
72 changes: 72 additions & 0 deletions Calculators/Lottery-Odds-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #aaf0dd;
}

header {
background-color: #3c25e8;
color: #fff;
text-align: center;
padding: 1em;
}

#calculator {
max-width: 300px;
margin: 20px auto;
border: 2px solid #0c0101;
padding: 20px;
border-radius: 8px;
background: linear-gradient(to right, #deec76, #15df0e);
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}

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

input,
select {
width: 100%;
padding: 10px;
margin-bottom: 16px;
box-sizing: border-box;
border-radius: 9px;
}

button {
width: 100%;
height: 40px;
font-size: 16px;
cursor: pointer;
background-color: #103cee;
color: #fff;
border: none;
border-radius: 9px;
transition: background-color 0.3s;
}

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

#result {
margin-top: 16px;
font-weight: bold;
color: red;
text-align: center;
font-size: 22px;
}

#base {
font-weight: bold;
}

#value {
font-weight: bold;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2985,6 +2985,20 @@ <h3>Calculates the Force on a moving charge in a magnetic field.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Lottery Odds Calculator</h2>
<h3>Calculates the chances of winning the lottery.</h3>
<div class="card-footer">
<a href="./Calculators/Lottery-Odds-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Lottery-Odds-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>Love Calculator</h2>
Expand Down

0 comments on commit 32e3480

Please sign in to comment.