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.

Sign up for GitHub

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 Website Bandwidth Calculator #616

Merged
merged 3 commits into from
Mar 1, 2024
Merged

Added Website Bandwidth Calculator #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51c76c0
Added Bandwidth Calc
Yuvraj960 Feb 27, 2024
c23b6ae
Update README.md
Rakesh9100 Mar 1, 2024
79080d3
Update index.html
Rakesh9100 Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions Calculators/Website-Bandwidth-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# <p align="center">Website Bandwidth Estimator</p>

This is a simple website calculator that estimates the bandwidth needs of a website based on three factors:

#### Page Views: The total number of times your website is loaded in a given period.
#### Average Page Size: The average size of a webpage on your website in megabytes (MB).
#### Page Views Per Visitor: The average number of pages a visitor views on your website during a single visit (also known as redundancy factor).

## Tech Stacks :-

- HTML
- CSS
- JavaScript

### Note:

> This is a basic estimation tool and may not reflect the exact bandwidth requirements of your website.
Other factors, such as the use of multimedia content and traffic patterns, can also affect bandwidth usage.

## Screenshots :-

![image](https://github.com/Rakesh9100/CalcDiverse/assets/146326636/02d4e968-1d60-4fad-894b-d515dd9118b3)
32 changes: 32 additions & 0 deletions Calculators/Website-Bandwidth-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Website Bandwidth Estimator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<h1>Website Bandwidth Estimator</h1>
<label for="pageViews">Page Views:</label>
<br><br>
<input type="number" id="pageViews" name="pageViews">
<br><br>
<label for="pageSize">Average Page Size (MB):</label>
<br><br>
<input type="number" id="pageSize" name="pageSize">
<br><br>
<label for="redundancyFactor">Page Views Per Visitor:</label>
<br><br>
<input type="number" id="redundancyFactor" name="redundancyFactor">
<br><br>
<button type="button" onclick="calculateBandwidth()">Calculate</button>
<button type="button" onclick="reset()">Clear</button>
<div id="result" class="result"></div>
</div>

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

</html>
17 changes: 17 additions & 0 deletions Calculators/Website-Bandwidth-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
function calculateBandwidth() {
const pageViews = document.getElementById("pageViews").value;
const pageSize = document.getElementById("pageSize").value;
const redundancyFactor = document.getElementById("redundancyFactor").value;

let bandwidth = ((pageViews * pageSize) / redundancyFactor).toFixed(2);

document.getElementById("result").innerHTML =
"Estimated Website Bandwidth: " + bandwidth + " MB";
}

function reset() {
document.getElementById("pageViews").value = "";
document.getElementById("pageSize").value = "";
document.getElementById("redundancyFactor").value = "";
document.getElementById("result").innerHTML = " ";
}
59 changes: 59 additions & 0 deletions Calculators/Website-Bandwidth-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
* {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #265073, #59D5E0);
}

.container {
max-width: 600px;
padding: 30px;
border: 1px solid black;
/* Add 3d box shadow */
box-shadow: 0 0 10px 5px #333A73,
0 0 20px 10px #333A73;

border-radius: 20px;
margin-top: calc(50vh - 280px);
margin-left: calc(50vw - 300px);
background: #9AD0C2;
}

input[type="number"] {
width: 100%;
height: 35px;
font-size: 15px;
border-radius: 10px;
}

h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}

button {
width: 100%;
height: 40px;
outline: none;
border-radius: 20px;
background: #6420AA;
color: white;
transition: all 0.3s ease;
font-size: large;
cursor: pointer;
margin-bottom: 10px;
}

button:hover {
background: #265073;
}

.result {
margin-top: 20px;
text-align: center;
font-size: 20px;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1939,6 +1939,20 @@ <h3>Calculates the compatibility score based on the entered names, hobbies, and
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Website Bandwidth Calculator</h2>
<h3>Calculates the bandwidth of a website based on some factors.</h3>
<div class="card-footer">
<a href="./Calculators/Website-Bandwidth-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Website-Bandwidth-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
</div>

<!-- Calculator Section Ends Here -->
Expand Down