Skip to content

Commit 3cbfc84

Browse files
kushaangowdakushaangowda
authoredOct 9, 2020
Feature/density (#57)
* added density converter tool with minor changes * added footer
1 parent 8fe883f commit 3cbfc84

File tree

4 files changed

+380
-0
lines changed

4 files changed

+380
-0
lines changed
 

Diff for: ‎conversionTools/density/Screenshot.png

166 KB
Loading

Diff for: ‎conversionTools/density/density.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
***
3+
* COSTUME STYLESHEET
4+
***
5+
* Please use the bootstrap color pallet and available css variables
6+
* for a more consistent design
7+
*/
8+
9+
/*
10+
*----------------------------------------------------------------
11+
* SITE HEADER
12+
*----------------------------------------------------------------
13+
*/
14+
15+
.site-header {
16+
background-color: rgba(0, 0, 0, 0.85);
17+
-webkit-backdrop-filter: saturate(180%) blur(20px);
18+
backdrop-filter: saturate(180%) blur(20px);
19+
}
20+
21+
/*
22+
*----------------------------------------------------------------
23+
* HERO SECTION
24+
*----------------------------------------------------------------
25+
*/
26+
.hero-section {
27+
background-color: var(--indigo);
28+
}
29+
30+
.hero-section__graphic {
31+
/* to be added */
32+
}
33+
34+
.hero-section__graphic,
35+
.hero-section__graphic:before,
36+
.hero-section__graphic:after {
37+
background-color: rgba(255, 255, 255, 0.1);
38+
width: 300px;
39+
height: 300px;
40+
border-radius: 40% 30% 30% 40% / 60% 40% 60% 40%;
41+
}
42+
43+
.hero-section__graphic:before,
44+
.hero-section__graphic:after {
45+
content: "";
46+
display: inline-block;
47+
position: absolute;
48+
left: 0;
49+
top: 0;
50+
animation: float 10s infinite linear;
51+
}
52+
.hero-section__graphic:after {
53+
animation-direction: reverse;
54+
animation-delay: 500ms;
55+
}
56+
57+
.hero-section__icon {
58+
fill: var(--light);
59+
width: 100%;
60+
height: auto;
61+
}
62+
63+
@keyframes float {
64+
0% {
65+
transform: translate(0%, 0%) rotate(0);
66+
}
67+
68+
33% {
69+
transform: translate(2%, 2%) rotate(120deg);
70+
}
71+
72+
66% {
73+
transform: translate(2%, -2%) rotate(240deg);
74+
}
75+
76+
to {
77+
transform: translate(0%, 0%) rotate(360deg);
78+
}
79+
}
80+
footer .row a {
81+
text-decoration: none;
82+
}
83+
.form-control{
84+
background-color: #eaeaf2;
85+
color: #000;
86+
border: 1px solid #3013bc;
87+
}
88+
form{
89+
margin-top: -30px;
90+
}/*
91+
#formula{
92+
text-align: center;
93+
background-color: #000;
94+
color: #fff;
95+
border-radius: 5px;
96+
margin: 20px;
97+
padding: 20px;
98+
}*/
99+
.card{
100+
text-align: center;
101+
}

Diff for: ‎conversionTools/density/density.html

+217
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#6610f2" />
10+
<link rel="icon" type="image/ico" href="../../favicon.ico" />
11+
<title>Density Converter</title>
12+
13+
<!-- Styles -->
14+
<link
15+
rel="stylesheet"
16+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
17+
/>
18+
<link
19+
rel="stylesheet"
20+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
21+
/>
22+
<link rel="stylesheet" href="density.css" />
23+
<script src="density.js"></script>
24+
</head>
25+
<body onload="i1()">
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+
<div class="btn-group d-none d-md-block py-2">
33+
<button
34+
type="button"
35+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
36+
data-toggle="dropdown"
37+
>
38+
Conversion Tools
39+
</button>
40+
<div class="dropdown-menu">
41+
<a href="" class="dropdown-item">Density converter</a>
42+
</div>
43+
</div>
44+
45+
<div class="btn-group d-none d-md-block py-2">
46+
<button
47+
type="button"
48+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
49+
data-toggle="dropdown"
50+
>
51+
Daily Use Tools
52+
</button>
53+
<div class="dropdown-menu">
54+
<a href="#" class="dropdown-item">Demo</a>
55+
</div>
56+
</div>
57+
58+
<div class="btn-group d-none d-md-block py-2">
59+
<button
60+
type="button"
61+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
62+
data-toggle="dropdown"
63+
>
64+
Finance Tools
65+
</button>
66+
<div class="dropdown-menu">
67+
<a href="#" class="dropdown-item">Demo</a>
68+
</div>
69+
</div>
70+
71+
<div class="btn-group d-none d-md-block py-2">
72+
<button
73+
type="button"
74+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
75+
data-toggle="dropdown"
76+
>
77+
Mathmetical Tools
78+
</button>
79+
<div class="dropdown-menu">
80+
<a href="#" class="dropdown-item">Demo</a>
81+
</div>
82+
</div>
83+
</div>
84+
</nav>
85+
<!-- Hero Section Starts -->
86+
<section
87+
class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
88+
>
89+
<div class="container-xl">
90+
<div class="row">
91+
<div class="d-none d-md-block col-5 align-self-center">
92+
<div class="hero-section__graphic position-relative m-auto">
93+
<svg
94+
class="hero-section__icon"
95+
height="569pt"
96+
viewBox="0 0 569 569.54905"
97+
width="569pt"
98+
xmlns="http://www.w3.org/2000/svg"
99+
>
100+
<path
101+
d="m1.527344 52.246094 37.984375 66.46875c1.28125 2.246094 3.425781 3.871094 5.933593 4.5l35.4375 8.859375 121.542969 121.542969 13.429688-13.425782-123.445313-123.441406c-1.214844-1.21875-2.738281-2.082031-4.40625-2.5l-34.050781-8.542969-32.339844-56.625 27.726563-27.726562 56.648437 32.371093 8.546875 34.050782c.414063 1.671875 1.28125 3.199218 2.496094 4.414062l123.445312 123.445313 13.425782-13.429688-121.542969-121.542969-8.859375-35.417968c-.628906-2.511719-2.253906-4.660156-4.5-5.945313l-66.472656-37.980469c-3.707032-2.109374-8.371094-1.484374-11.394532 1.527344l-37.980468 37.984375c-3.0546878 3.003907-3.71875 7.675781-1.625 11.414063zm0 0"
102+
/>
103+
<path
104+
d="m396.3125 187.144531-208.902344 208.90625-13.429687-13.429687 208.90625-208.902344zm0 0"
105+
/>
106+
<path
107+
d="m150.847656 403.441406c-1.71875-2.859375-4.804687-4.605468-8.140625-4.605468h-56.972656c-3.332031 0-6.421875 1.746093-8.136719 4.605468l-28.488281 47.476563c-1.808594 3.007812-1.808594 6.769531 0 9.78125l28.488281 47.476562c1.714844 2.855469 4.804688 4.605469 8.136719 4.605469h56.972656c3.335938 0 6.421875-1.75 8.140625-4.605469l28.484375-47.476562c1.808594-3.011719 1.808594-6.773438 0-9.78125zm-13.511718 90.347656h-46.226563l-22.789063-37.980468 22.789063-37.984375h46.226563l22.789062 37.984375zm0 0"
108+
/>
109+
<path
110+
d="m456.0625 227.914062c62.714844.210938 113.730469-50.460937 113.941406-113.175781.03125-9.546875-1.140625-19.054687-3.488281-28.308593-1.265625-5.089844-6.417969-8.1875-11.507813-6.921876-1.671874.417969-3.195312 1.28125-4.414062 2.496094l-59.109375 59.070313-46.898437-15.628907-15.640626-46.886718 59.109376-59.121094c3.707031-3.710938 3.703124-9.722656-.007813-13.429688-1.222656-1.222656-2.761719-2.089843-4.445313-2.503906-60.820312-15.402344-122.605468 21.414063-138.007812 82.230469-2.339844 9.226563-3.507812 18.710937-3.476562 28.230469.023437 7.476562.792968 14.929687 2.308593 22.25l-207.957031 207.953125c-7.320312-1.511719-14.773438-2.28125-22.246094-2.308594-62.933594 0-113.949218 51.015625-113.949218 113.949219 0 62.929687 51.015624 113.945312 113.949218 113.945312 62.929688 0 113.945313-51.015625 113.945313-113.945312-.023438-7.476563-.796875-14.929688-2.308594-22.25l49.785156-49.785156 21.773438 21.773437c3.710937 3.707031 9.71875 3.707031 13.429687 0l4.746094-4.75c4.164062-4.136719 10.894531-4.136719 15.058594 0 4.160156 4.148437 4.167968 10.882813.019531 15.042969-.003906.003906-.011719.011718-.019531.019531l-4.746094 4.746094c-3.707031 3.707031-3.707031 9.71875 0 13.425781l113.273438 113.273438c29.792968 30.066406 78.316406 30.285156 108.382812.492187 30.0625-29.792969 30.28125-78.320313.488281-108.382813-.160156-.164062-.324219-.328124-.488281-.492187l-113.273438-113.269531c-3.707031-3.707032-9.71875-3.707032-13.425781 0l-4.746093 4.746094c-4.167969 4.140624-10.894532 4.140624-15.0625 0-4.15625-4.148438-4.167969-10.882813-.019532-15.039063.007813-.007813.015625-.011719.019532-.019531l4.75-4.75c3.707031-3.707032 3.707031-9.71875 0-13.425782l-21.773438-21.773437 49.785156-49.785156c7.320313 1.511719 14.773438 2.285156 22.246094 2.308593zm37.308594 322.851563c-6.898438-.011719-13.738282-1.257813-20.195313-3.683594l74.160157-74.164062c11.191406 29.769531-3.867188 62.972656-33.636719 74.164062-6.496094 2.441407-13.382813 3.691407-20.328125 3.683594zm-107.574219-246.792969c-10.515625 12.542969-8.867187 31.238282 3.675781 41.75 11.023438 9.238282 27.089844 9.230469 38.101563-.027344l106.5625 106.65625c1.15625 1.160157 2.238281 2.382813 3.285156 3.625l-81.1875 81.1875c-1.246094-1.042968-2.46875-2.125-3.628906-3.285156l-106.644531-106.652344c10.515624-12.542968 8.867187-31.238281-3.675782-41.75-11.023437-9.242187-27.09375-9.230468-38.105468.023438l-15.191407-15.191406 81.613281-81.492188zm38.34375-95.503906-215.410156 215.367188c-2.363281 2.359374-3.3125 5.785156-2.507813 9.023437 13.027344 51.160156-17.886718 103.195313-69.050781 116.21875-51.160156 13.027344-103.195313-17.886719-116.222656-69.050781-13.023438-51.160156 17.890625-103.195313 69.054687-116.222656 15.476563-3.9375 31.691406-3.9375 47.167969 0 3.238281.792968 6.65625-.15625 9.023437-2.503907l215.359376-215.371093c2.359374-2.359376 3.308593-5.785157 2.496093-9.019532-12.9375-50.5625 17.5625-102.039062 68.125-114.980468 9.554688-2.441407 19.4375-3.378907 29.28125-2.765626l-50.089843 50.109376c-2.542969 2.539062-3.433594 6.300781-2.296876 9.710937l18.988282 56.976563c.949218 2.832031 3.175781 5.058593 6.011718 6l56.976563 18.992187c3.40625 1.136719 7.167969.25 9.710937-2.289063l50.089844-50.089843c.113282 1.8125.171875 3.605469.171875 5.390625.265625 52.175781-41.8125 94.6875-93.988281 94.957031-8.066406.039063-16.105469-.953125-23.917969-2.953125-3.238281-.808594-6.664062.136719-9.023437 2.496094h.050781zm0 0"
111+
/>
112+
<path
113+
d="m491.273438 477.578125-13.429688 13.429687-94.953125-94.953124 13.425781-13.429688zm0 0"
114+
/>
115+
</svg>
116+
</div>
117+
</div>
118+
<div class="col align-self-center">
119+
<h1 class="text-white mb-5">Density Converter</h1>
120+
<p class="lead mb-4">You can use this tool to convert density from one unit to another.<br/>Formula will also be mentioned for your reference. </p>
121+
</div>
122+
</div>
123+
</div>
124+
</section>
125+
<!-- Hero Section End -->
126+
127+
128+
129+
130+
<div class="container">
131+
<form>
132+
<div class="form-row">
133+
<div class="form-group col-4 col-md-6">
134+
<input type="text" name="inp1" id="inp1" onkeyup="i1()" value="1" class="form-control">
135+
</div>
136+
<div class="form-group col-8 col-md-6">
137+
<select name="s1" id="s1" onchange="i1s()" class="form-control">
138+
<option value="gcm" >gram per cubic cm (g/cm&sup3;)</option>
139+
<option value="kgcm" >kg per cubic cm (kg/cm&sup3;)</option>
140+
<option value="gm" >gram per cubic meter (g/m&sup3;)</option>
141+
<option value="kgm" selected="selected">kg per cubic meter (kg/m&sup3;)</option>
142+
<option value="gml" >gram per milliliter (g/mL)</option>
143+
<option value="gl" >gram per liter (g/L)</option>
144+
<option value="kgl" >kg per liter (kg/L)</option>
145+
<option value="ozi" >oz per cubic inch (oz/in&sup3;)</option>
146+
<option value="ozf" >oz per cubic foot (oz/ft&sup3;)</option>
147+
<option value="lbi" >lb per cubic inch (lb/in&sup3;)</option>
148+
<option value="lbf" >lb per cubic foot (lb/ft&sup3;)</option>
149+
<option value="lby" >lb per cubic yard (lb/yd&sup3;)</option>
150+
<option value="ozgali" >oz per gal (Imperial) (oz/gal)</option>
151+
<option value="ozgalu" >oz per gal (U.S. fluid) (oz/gal)</option>
152+
<option value="lbgali" >lb per gal (Imperial) (lb/gal)</option>
153+
<option value="lbgalu" >lb per gal (U.S. fluid) (lb/gal)</option>
154+
<option value="sf" >slug per cubic foot (slug/ft&sup3;)</option>
155+
<option value="lty" >long ton per yd&sup3; (l tn/yd&sup3;)</option>
156+
<option value="sty" >short ton per yd&sup3; (sh tn/yd&sup3;)</option>
157+
</select>
158+
</div>
159+
</div>
160+
<div class="form-row">
161+
<div class="form-group col-4 col-md-6">
162+
<input type="text" name="inp2" id="inp2" onkeyup="i2()" class="form-control">
163+
</div>
164+
<div class="form-group col-8 col-md-6">
165+
<select name="s2" id="s2" onchange="i1s()" class="form-control">
166+
<option value="gcm" >gram per cubic cm (g/cm&sup3;)</option>
167+
<option value="kgcm" >kg per cubic cm (kg/cm&sup3;)</option>
168+
<option value="gm" >gram per cubic meter (g/m&sup3;)</option>
169+
<option value="kgm" selected="selected">kg per cubic meter (kg/m&sup3;)</option>
170+
<option value="gml" >gram per milliliter (g/mL)</option>
171+
<option value="gl" >gram per liter (g/L)</option>
172+
<option value="kgl" >kg per liter (kg/L)</option>
173+
<option value="ozi" >oz per cubic inch (oz/in&sup3;)</option>
174+
<option value="ozf" >oz per cubic foot (oz/ft&sup3;)</option>
175+
<option value="lbi" >lb per cubic inch (lb/in&sup3;)</option>
176+
<option value="lbf" >lb per cubic foot (lb/ft&sup3;)</option>
177+
<option value="lby" >lb per cubic yard (lb/yd&sup3;)</option>
178+
<option value="ozgali" >oz per gal (Imperial) (oz/gal)</option>
179+
<option value="ozgalu" >oz per gal (U.S. fluid) (oz/gal)</option>
180+
<option value="lbgali" >lb per gal (Imperial) (lb/gal)</option>
181+
<option value="lbgalu" >lb per gal (U.S. fluid) (lb/gal)</option>
182+
<option value="sf" >slug per cubic foot (slug/ft&sup3;)</option>
183+
<option value="lty" >long ton per yd&sup3; (l tn/yd&sup3;)</option>
184+
<option value="sty" >short ton per yd&sup3; (sh tn/yd&sup3;)</option>
185+
</select>
186+
</div>
187+
</div>
188+
</form>
189+
<div class="card text-white bg-dark mb-3 mx-auto" style="max-width: 18rem;">
190+
<div class="card-header"><h4>Formula Used</h4></div>
191+
<div class="card-body">
192+
<p class="card-text" id="formula"></p>
193+
</div>
194+
</div>
195+
<!-- Footer -->
196+
<footer class="border-top py-3 px-4">
197+
<div class="row align-items-center">
198+
<div class="col-md-6">
199+
<p class="m-0">Copyright &copy; 2020 codeezzi</p>
200+
<p class="m-0">Page Created by <a href="https://github.com/kushaangowda" target="_blank">Kushaan Gowda</a></p>
201+
</div>
202+
<div class="col-md-6 text-md-right">
203+
<a href="#" class="text-dark">Terms of Use</a>
204+
<span class="text-muted mx-2">|</span>
205+
<a href="#" class="text-dark">Privacy Policy</a>
206+
</div>
207+
</div>
208+
</footer>
209+
<!-- Footer End -->
210+
211+
<!--Scripts-->
212+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
213+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
214+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
215+
</div>
216+
</body>
217+
</html>

Diff for: ‎conversionTools/density/density.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var a={};
2+
a['gcm'] = 1000;
3+
a['kgcm'] = 1000000;
4+
a['gm'] = 0.001;
5+
a['kgm'] = 1;
6+
a['gml'] = 1000;
7+
a['gl'] = 1;
8+
a['kgl'] = 1000;
9+
a['ozi'] = 1729.994;
10+
a['ozf'] = 1.001153;
11+
a['lbi'] = 27679.90471;
12+
a['lbf'] = 16.018463;
13+
a['lby'] = 0.5932764;
14+
a['ozgali'] = 6.236023;
15+
a['ozgalu'] = 7.489151;
16+
a['lbgali'] = 99.776372;
17+
a['lbgalu'] = 119.826;
18+
a['sf'] = 515.3788184;
19+
a['lty'] = 1328.939;
20+
a['sty'] = 1186.553;
21+
22+
// these values are with respect to kg/m^3, i.e.,
23+
// a['gcm'] = 1000; implies 1g/cm^3 is equivalent to 1000kg/m^3
24+
25+
var full={};
26+
full['gcm'] = 'g/cm&sup3;';
27+
full['kgcm'] = 'kg/cm&sup3;';
28+
full['gm'] = 'g/m&sup3;';
29+
full['kgm'] = 'kg/m&sup3;';
30+
full['gml'] = 'g/ml';
31+
full['gl'] = 'g/L';
32+
full['kgl'] = 'kg/L';
33+
full['ozi'] = 'oz/in&sup3;';
34+
full['ozf'] = 'oz/ft&sup3;';
35+
full['lbi'] = 'lb/in&sup3;';
36+
full['lbf'] = 'lb/ft&sup3;';
37+
full['lby'] = 'lb/yd&sup3;';
38+
full['ozgali'] = '(Imperial) oz/gal';
39+
full['ozgalu'] = '(U.S. fluid) oz/gal';
40+
full['lbgali'] = '(Imperial) lb/gal';
41+
full['lbgalu'] = '(U.S. fluid) lb/gal';
42+
full['sf'] = 'slug/ft&sup3;';
43+
full['lty'] = 'l tn/yd&sup3;';
44+
full['sty'] = 'sh tn/yd&sup3;';
45+
46+
47+
var factor = 0;
48+
49+
function i1(){
50+
factor = a[document.getElementById('s1').value] / a[document.getElementById('s2').value];
51+
document.getElementById('inp2').value = document.getElementById('inp1').value * factor;
52+
document.getElementById('formula').innerHTML = '1 '+full[document.getElementById('s1').value]+' = '+factor+' '+full[document.getElementById('s2').value];
53+
}
54+
function i2(){
55+
factor = a[document.getElementById('s2').value] / a[document.getElementById('s1').value];
56+
document.getElementById('inp1').value = document.getElementById('inp2').value * factor;
57+
document.getElementById('formula').innerHTML = '1 '+full[document.getElementById('s2').value]+' = '+factor+' '+full[document.getElementById('s1').value];
58+
}
59+
function i1s(){
60+
document.getElementById('inp1').value = 1;
61+
i1();
62+
}

0 commit comments

Comments
 (0)
Please sign in to comment.