From 18dc255e7845e9408af74d7c35d8f1c8dc2e43ee Mon Sep 17 00:00:00 2001 From: Yuvraj Gupta Date: Fri, 1 Mar 2024 23:54:59 +0530 Subject: [PATCH] Added Website Bandwidth Calculator (#616) --- .../Website-Bandwidth-Calculator/README.md | 22 +++++++ .../Website-Bandwidth-Calculator/index.html | 32 ++++++++++ .../Website-Bandwidth-Calculator/script.js | 17 ++++++ .../Website-Bandwidth-Calculator/style.css | 59 +++++++++++++++++++ index.html | 14 +++++ 5 files changed, 144 insertions(+) create mode 100644 Calculators/Website-Bandwidth-Calculator/README.md create mode 100644 Calculators/Website-Bandwidth-Calculator/index.html create mode 100644 Calculators/Website-Bandwidth-Calculator/script.js create mode 100644 Calculators/Website-Bandwidth-Calculator/style.css diff --git a/Calculators/Website-Bandwidth-Calculator/README.md b/Calculators/Website-Bandwidth-Calculator/README.md new file mode 100644 index 000000000..2fd510cf7 --- /dev/null +++ b/Calculators/Website-Bandwidth-Calculator/README.md @@ -0,0 +1,22 @@ +#

Website Bandwidth Estimator

+ +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) diff --git a/Calculators/Website-Bandwidth-Calculator/index.html b/Calculators/Website-Bandwidth-Calculator/index.html new file mode 100644 index 000000000..04e55d5ff --- /dev/null +++ b/Calculators/Website-Bandwidth-Calculator/index.html @@ -0,0 +1,32 @@ + + + + + Website Bandwidth Estimator + + + + +
+

Website Bandwidth Estimator

+ +

+ +

+ +

+ +

+ +

+ +

+ + +
+
+ + + + + \ No newline at end of file diff --git a/Calculators/Website-Bandwidth-Calculator/script.js b/Calculators/Website-Bandwidth-Calculator/script.js new file mode 100644 index 000000000..efd6036eb --- /dev/null +++ b/Calculators/Website-Bandwidth-Calculator/script.js @@ -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 = " "; +} diff --git a/Calculators/Website-Bandwidth-Calculator/style.css b/Calculators/Website-Bandwidth-Calculator/style.css new file mode 100644 index 000000000..5a460e15f --- /dev/null +++ b/Calculators/Website-Bandwidth-Calculator/style.css @@ -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; +} diff --git a/index.html b/index.html index e3c35a3f4..862981ada 100644 --- a/index.html +++ b/index.html @@ -1939,6 +1939,20 @@

Calculates the compatibility score based on the entered names, hobbies, and +
+
+

Website Bandwidth Calculator

+

Calculates the bandwidth of a website based on some factors.

+
+ + + + + Source Code + +
+
+