Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 4692bf9

Browse files
PeterJanicPeterJanic
authoredOct 27, 2020
storage feature (#130)
1 parent 3aa65cb commit 4692bf9

File tree

5 files changed

+578
-0
lines changed

5 files changed

+578
-0
lines changed
 

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ If you want to add Color Gradients to your code [click here](https://backgroundg
6666
- [ ] [surface tension]
6767
- [ ] [resolution]
6868
- [ ] [charge]
69+
- [x] [storage](conversionTools/storage/storage.html)
6970

7071
### [Mathematical Tools](mathematicalTools)
7172
- [x] [number base](mathematicalTools/numberBase)

‎conversionTools/storage/Screenshot_storage.jpg

77.6 KB
Loading

‎conversionTools/storage/storage.css

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
2+
3+
/*
4+
*----------------------------------------------------------------
5+
* SITE HEADER
6+
*----------------------------------------------------------------
7+
*/
8+
.site-header {
9+
background-color: rgba(0, 0, 0, 0.85);
10+
-webkit-backdrop-filter: saturate(180%) blur(20px);
11+
backdrop-filter: saturate(180%) blur(20px);
12+
}
13+
/*
14+
*----------------------------------------------------------------
15+
* heading
16+
*----------------------------------------------------------------
17+
*/
18+
.heading
19+
{
20+
/* margin-top: 50px; */
21+
text-align: center;
22+
}
23+
/*
24+
*----------------------------------------------------------------
25+
* container
26+
*----------------------------------------------------------------
27+
*/
28+
.container_wrapper
29+
{
30+
width: 90%;
31+
height: auto;
32+
display: flex;
33+
margin: .5rem auto auto;
34+
align-items: center;
35+
justify-content: center;
36+
flex-direction: column;
37+
color: white;
38+
}
39+
/*
40+
*----------------------------------------------------------------
41+
* wrapper
42+
*----------------------------------------------------------------
43+
*/
44+
.storage__wrapper
45+
{
46+
width: 90%;
47+
margin: .5rem auto auto;
48+
align-items: center;
49+
display: flex;
50+
border-radius: 1rem;
51+
height: auto;
52+
flex-direction: column;
53+
justify-content: center;
54+
background-color: var(--indigo);
55+
padding: 2rem 0;
56+
box-shadow: 1px 2px 20px #2828288c;
57+
58+
59+
}
60+
/*
61+
*----------------------------------------------------------------
62+
* container
63+
*----------------------------------------------------------------
64+
*/
65+
.storage__container
66+
{
67+
display: flex;
68+
flex-direction: column;
69+
margin: 0 auto;
70+
}
71+
.storage__container p
72+
{
73+
margin-bottom: 0.5rem;
74+
}
75+
/*
76+
*----------------------------------------------------------------
77+
* value ,result, button container
78+
*----------------------------------------------------------------
79+
*/
80+
.value__container,
81+
.result__container,
82+
.button__container
83+
{
84+
margin: 10px auto;
85+
}
86+
/*
87+
*----------------------------------------------------------------
88+
* value ,result dropdown box
89+
*----------------------------------------------------------------
90+
*/
91+
#conversion_value,
92+
#conversion_result
93+
{
94+
color: Black;
95+
/* #fff */
96+
background-color: mediumturquoise;
97+
border-color: #020405;
98+
outline: none;
99+
100+
}
101+
/*
102+
*----------------------------------------------------------------
103+
* convert button
104+
*----------------------------------------------------------------
105+
*/
106+
#convert_button
107+
{
108+
color: #fff;
109+
background-color: #4CAF50;
110+
border-color: #07090a;
111+
outline: none;
112+
font-weight: 500;
113+
}
114+
115+
116+
input,select
117+
{
118+
padding: 0.5rem;
119+
border-radius: 0.4rem;
120+
border: 1px solid #abaaaa;
121+
min-width: 12.5rem;
122+
}
123+
124+
/*
125+
*----------------------------------------------------------------
126+
* HERO SECTION
127+
*----------------------------------------------------------------
128+
*/
129+
.hero-section {
130+
background-color: var(--indigo);
131+
}
132+
133+
.hero-section__graphic,
134+
.hero-section__graphic:before,
135+
.hero-section__graphic:after {
136+
background-color: rgba(255, 255, 255, 0.1);
137+
width: 300px;
138+
height: 200px;
139+
border-radius: 40% 30% 30% 40% / 60% 40% 60% 40%;
140+
}
141+
142+
.hero-section__graphic:before,
143+
.hero-section__graphic:after {
144+
content: "";
145+
display: inline-block;
146+
position: absolute;
147+
left: 0;
148+
top: 0;
149+
animation: float 10s infinite linear;
150+
}
151+
.hero-section__graphic:after {
152+
animation-direction: reverse;
153+
animation-delay: 500ms;
154+
}
155+
156+
.hero-section__icon {
157+
fill: var(--light);
158+
width: 100%;
159+
height: auto;
160+
}
161+
162+
@keyframes float {
163+
0% {
164+
transform: translate(0%, 0%) rotate(0);
165+
}
166+
167+
33% {
168+
transform: translate(2%, 2%) rotate(120deg);
169+
}
170+
171+
66% {
172+
transform: translate(2%, -2%) rotate(240deg);
173+
}
174+
175+
to {
176+
transform: translate(0%, 0%) rotate(360deg);
177+
}
178+
}
179+
180+
181+
/* Testing */
182+
img {
183+
width: 135px;
184+
height: 135px;
185+
position: relative;
186+
left: 83px;
187+
top: 30px;
188+
}

‎conversionTools/storage/storage.html

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!--
2+
Contributor Details:
3+
Name: Peter Janic
4+
GitHub profile link : https://github.com/PeterJanic
5+
-->
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
11+
<meta name="theme-color" content="#6610f2" />
12+
<link rel="icon" type="image/ico" href="../../favicon.ico" />
13+
<title>Utility Website</title>
14+
<!-- Styles -->
15+
<link
16+
rel="stylesheet"
17+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
18+
/>
19+
<link
20+
rel="stylesheet"
21+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
22+
/>
23+
<link rel="stylesheet" href="storage.css" />
24+
</head>
25+
<body>
26+
<!-- Navbar -->
27+
<nav class="site-header sticky-top py-1 text-light">
28+
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
29+
<a class="py-2 text-light" href="/index.html">
30+
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
31+
</a>
32+
33+
<div class="btn-group d-none d-md-block py-2">
34+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Conversion Tools</button>
35+
<div class="dropdown-menu">
36+
37+
<a href="/conversionTools/Angle_Conversion/angleconversions.html" class="dropdown-item">Angle Conversion Tool</a>
38+
<a href="/conversionTools/density/density.html" class="dropdown-item">Density Conversion Tool</a>
39+
<a href="/conversionTools/Energy/energy.html" class="dropdown-item">Energy Conversion Tool</a>
40+
<a href="/conversionTools/fuelEfficiency/fuel.html" class="dropdown-item">Fuel Efficiency Calculator</a>
41+
<a href="/conversionTools/image/image.html" class="dropdown-item">Image Conversion Tool</a>
42+
<a href="/conversionTools/imagePdf/imagePdf.html" class="dropdown-item">Image to PDF Conversion Tool</a>
43+
<a href="/conversionTools/length/length.html" class="dropdown-item">Length Conversion Tool</a>
44+
<a href="/conversionTools/power/power.html" class="dropdown-item">Power Conversion Tool</a>
45+
<a href="/conversionTools/pressure/pressure.html" class="dropdown-item">Pressure Conversion Tool</a>
46+
<a href="/conversionTools/temperture/temperture.html" class="dropdown-item">Temperture Conversion Tool</a>
47+
<a href="/conversionTools/Torque/torque.html" class="dropdown-item">Torque Conversion Tool</a>
48+
<a href="/conversionTools/storage/storage.html" class="dropdown-item">Storage Conversion Tool</a>
49+
<a href="#" class="dropdown-item">Demo</a>
50+
51+
</div>
52+
</div>
53+
54+
<div class="btn-group d-none d-md-block py-2">
55+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Daily Use Tools</button>
56+
<div class="dropdown-menu">
57+
58+
<a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="dropdown-item">BMI Calculator</a>
59+
<a href="/dailyUseTools/notes/notes.html" class="dropdown-item">Take Notes</a>
60+
<a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="dropdown-item">Password Generator</a>
61+
<a href="#" class="dropdown-item">Demo</a>
62+
63+
</div>
64+
</div>
65+
<div class="btn-group d-none d-md-block py-2">
66+
<button
67+
type="button"
68+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
69+
data-toggle="dropdown">
70+
Finance Tools
71+
</button>
72+
<div class="dropdown-menu">
73+
74+
<a href="financeTools/compound-interest-calculator/compoundinterestcalculator.html" class="dropdown-item">Compound Interest Calculator</a>
75+
<a href="/financeTools/discountcalculator/discount.html" class="dropdown-item">Discount Calculator</a>
76+
<a href="/financeTools/emiCalculator/emi-calculator.html" class="dropdown-item">EMI Calculator</a>
77+
<a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="dropdown-item">Mortgage Calculator</a>
78+
<a href="/financeTools/retirementcalaculator/index.html" class="dropdown-item">Retirement Calculator</a>
79+
<a href="/financeTools/service-tax-calculator/tools.html" class="dropdown-item">Service Tax Calculator</a>
80+
<a href="#" class="dropdown-item">Demo</a>
81+
82+
</div>
83+
</div>
84+
85+
<div class="btn-group d-none d-md-block py-2">
86+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Mathematical Tools</button>
87+
<div class="dropdown-menu">
88+
89+
<a href="/mathmeticalTools/percentageCalculator/percentageCalculator.html" class="dropdown-item">Percentage Calculator</a>
90+
<a href="#" class="dropdown-item">Demo</a>
91+
92+
</div>
93+
</div>
94+
95+
</div>
96+
</nav>
97+
<!-- Navbar End -->
98+
<div class="heading">
99+
</div>
100+
101+
<!-- Hero Section Starts -->
102+
<section
103+
class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
104+
>
105+
<div class="container-xl">
106+
<div class="row">
107+
<div class="d-none d-md-block col-5 align-self-center">
108+
<div class="hero-section__graphic position-relative m-auto">
109+
<img src="https://i.imgur.com/oU55IyI.png" />
110+
</div>
111+
</div>
112+
<div class="col align-self-center">
113+
<h1 class="text-white mb-5">Storage Converter</h1>
114+
<p class="lead mb-4">You can use this tool to convert storage from one unit to another. </p>
115+
</div>
116+
</div>
117+
</div>
118+
</section>
119+
<!-- Hero Section End -->
120+
121+
<!-- Storage conversion tool -->
122+
<div class="container_wrapper">
123+
<div class="storage__wrapper">
124+
<div class="storage__container">
125+
<div class="value__container">
126+
<label for="storage_value">Enter the value</label>
127+
<br>
128+
<input type="text" name="storage_value" id="storage_value">
129+
<select class="storage_dropdown" name="conversion_value" id="conversion_value">
130+
<option value="b">bits [b]</option>
131+
<option value="B">Bytes [B]</option>
132+
</select>
133+
</div>
134+
135+
<div class="result__container">
136+
<label for="storage_result">Result</label>
137+
<br>
138+
<input type="text" name="storage_result" id="storage_result" readonly>
139+
<select class="storage_dropdown" name="conversion_result" id="conversion_result">
140+
<option value="b">bits [b]</option>
141+
<option value="B">Bytes [B]</option>
142+
</select>
143+
</div>
144+
145+
<div class="button__container">
146+
<input type="button" name="Convert" value="Convert" id="convert_button">
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
152+
153+
<!-- Footer -->
154+
<footer class="border-top py-3 px-4">
155+
<div class="row align-items-center">
156+
<div class="col-md-6">
157+
<p class="m-0">Copyright &copy; 2020 Peter Janic</p>
158+
<p class="m-0">
159+
Page Created by
160+
<a href="https://github.com/PeterJanic" target="_blank"
161+
>Peter Janic</a
162+
>
163+
</p>
164+
</div>
165+
<div class="col-md-6 text-md-right">
166+
<a href="contributors.html" target="_blank" class="text-dark"
167+
>Contributors</a
168+
>
169+
<span class="text-muted mx-2">|</span>
170+
171+
<a href="#" class="text-dark">Terms of Use</a>
172+
<span class="text-muted mx-2">|</span>
173+
<a href="#" class="text-dark">Privacy Policy</a>
174+
</div>
175+
</div>
176+
</footer>
177+
<script src="storage.js"></script>
178+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
179+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
180+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
181+
</body>
182+
</html>

‎conversionTools/storage/storage.js

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
const bits = new Map();
2+
const bibits = new Map();
3+
const bytes = new Map();
4+
const bibytes = new Map();
5+
6+
function map_set(){
7+
8+
bits.set('kbit', 'kilobits');
9+
bits.set('Mbit', 'Megabits');
10+
bits.set('Gbit', 'Gigabits');
11+
bits.set('Tbit', 'Terabits');
12+
bits.set('Pbit', 'Petabits');
13+
bits.set('Ebit', 'Exabits');
14+
bits.set('Zbit', 'Zettabits');
15+
bits.set('Ybit', 'Yottabits');
16+
17+
bibits.set('Kibit', 'Kibibits');
18+
bibits.set('Mibit', 'Mebibits');
19+
bibits.set('Gibit', 'Gibibits');
20+
bibits.set('Tibit', 'Tebibits');
21+
bibits.set('Pibit', 'Pebibits');
22+
bibits.set('Eibit', 'Exbibits');
23+
bibits.set('Zibit', 'Zebibits');
24+
bibits.set('Yibit', 'Yobibits');
25+
26+
bytes.set('kB', 'kilobytes');
27+
bytes.set('MB', 'Megabytes');
28+
bytes.set('GB', 'Gigabytes');
29+
bytes.set('TB', 'Terabytes');
30+
bytes.set('PB', 'Petabytes');
31+
bytes.set('EB', 'Exabytes');
32+
bytes.set('ZB', 'Zettabytes');
33+
bytes.set('YB', 'Yottabytes');
34+
35+
bibytes.set('KiB', 'Kibibytes');
36+
bibytes.set('MiB', 'Mebibytes');
37+
bibytes.set('GiB', 'Gibibytes');
38+
bibytes.set('TiB', 'Tebibytes');
39+
bibytes.set('PiB', 'Pebibytes');
40+
bibytes.set('EiB', 'Exbibytes');
41+
bibytes.set('ZiB', 'Zebibytes');
42+
bibytes.set('YiB', 'Yobibytes');
43+
44+
}
45+
46+
function print_option_values(){
47+
let i = 0;
48+
let j = 0;
49+
let k = 0;
50+
let l = 0;
51+
52+
bits.forEach( (value1, key1) => {
53+
j = 0;
54+
bibits.forEach( (value2, key2) => {
55+
k = 0
56+
bytes.forEach( (value3, key3) => {
57+
l = 0;
58+
bibytes.forEach( (value4, key4) => {
59+
if (i == j && i == k && i == l){
60+
fill(key1, value1);
61+
fill(key2, value2);
62+
fill(key3, value3);
63+
fill(key4, value4);
64+
}
65+
l++;
66+
});
67+
k++;
68+
});
69+
j++;
70+
});
71+
i++;
72+
});
73+
}
74+
75+
function fill (key, value){
76+
let sel_elements = document.getElementsByClassName("storage_dropdown");
77+
let len = sel_elements.length;
78+
79+
for(let i = 0; i < len; i++){
80+
let el = document.createElement("option");
81+
el.text = value + " [" + key + "]";
82+
el.value = key;
83+
sel_elements[i].add(el);
84+
}
85+
}
86+
87+
function convertStorage() {
88+
//getting the value
89+
let conversion_input = document.getElementById("conversion_value").value;
90+
let conversion_output = document.getElementById("conversion_result").value;
91+
92+
let storage_value = document.getElementById("storage_value").value;
93+
let storage_result = document.getElementById("storage_result");
94+
95+
let input = get_map_position(conversion_input);
96+
let output = get_map_position(conversion_output);
97+
let temp_unit;
98+
99+
//convert to basic unit
100+
if (input[0] == 1 || input[0] == 3){
101+
temp_unit = storage_value * Math.pow(1000, input[1]);
102+
}
103+
else if (input[0] == 2 || input[0] == 4){
104+
temp_unit = storage_value * Math.pow(2, (10 * input[1]));
105+
}
106+
107+
//convert bytes to bits or vice versa
108+
if ((input[0] == 1 || input[0] == 2) && (output[0] == 3 || output[0] == 4)){
109+
// console.log("bits To Bytes / 8");
110+
if(temp_unit != 0)
111+
temp_unit = temp_unit / 8;
112+
}
113+
else if ((output[0] == 1 || output[0] == 2) && (input[0] == 3 || input[0] == 4)){
114+
// console.log("Bytes To bites * 8");
115+
if(temp_unit != 0)
116+
temp_unit = temp_unit * 8;
117+
}
118+
119+
//final convert to desired format
120+
if (output[0] == 1 || output[0] == 3){
121+
temp_unit = temp_unit / Math.pow(1000, output[1]);
122+
}
123+
else if (output[0] == 2 || output[0] == 4){
124+
temp_unit = temp_unit * Math.pow(2, (-10 * output[1]));
125+
}
126+
127+
//inform the user if the input is not valid
128+
if(isNaN(temp_unit)){
129+
storage_result.value = "Enter a valid number";
130+
}
131+
else{
132+
storage_result.value = temp_unit;
133+
}
134+
135+
}
136+
137+
function get_map_position(text){
138+
let map;
139+
let position;
140+
141+
if(text === "b"){
142+
return [1, 0];
143+
}
144+
145+
else if(text === "B"){
146+
return [3, 0];
147+
}
148+
149+
// return [map, position]
150+
// ret 1 for bits
151+
if(bits.has(text)){
152+
map = 1;
153+
let a = 1;
154+
bits.forEach( (value, key) => {
155+
if(key === text){
156+
position = a;
157+
}
158+
a++;
159+
});
160+
return [map, position];
161+
}
162+
// ret 2 for bibits
163+
else if(bibits.has(text)){
164+
map = 2;
165+
let b = 1;
166+
bibits.forEach( (value, key) => {
167+
if(key === text){
168+
position = b;
169+
}
170+
b++;
171+
});
172+
return [map, position];
173+
}
174+
// ret 3 for bytes
175+
else if(bytes.has(text)){
176+
map = 3;
177+
let c = 1;
178+
bytes.forEach( (value, key) => {
179+
if(key === text){
180+
position = c;
181+
}
182+
c++;
183+
});
184+
return [map, position];
185+
}
186+
// ret 4 for bibytes
187+
else if(bibytes.has(text)){
188+
map = 4;
189+
let d = 1;
190+
bibytes.forEach( (value, key) => {
191+
if(key === text){
192+
position = d;
193+
}
194+
d++;
195+
});
196+
return [map, position];
197+
}
198+
}
199+
200+
//program begins here
201+
function main(argument) {
202+
map_set();
203+
print_option_values();
204+
let convert_button = document.getElementById("convert_button");
205+
convert_button.addEventListener("click",convertStorage);
206+
}
207+
main();

0 commit comments

Comments
 (0)
Please sign in to comment.