├── icon.png
├── .gitattributes
├── manifest.json
├── index.js
├── index.html
└── index.css
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/K-Jadeja/Unit-Converter/main/icon.png
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "version": "1.0",
4 | "name": "Unit-Converter",
5 | "action": {
6 | "default_popup": "index.html",
7 | "default_icon": "icon.png"
8 | }
9 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1 meter = 3.281 feet
3 | 1 liter = 0.264 gallon
4 | 1 kilogram = 2.204 pound
5 | */
6 |
7 | const convertBtn = document.getElementById("convert-btn")
8 | const inputEl = document.getElementById("input-el")
9 | const lenOut = document.getElementById("len-out")
10 | const volOut = document.getElementById("vol-out")
11 | const massOut = document.getElementById("mass-out")
12 |
13 | convertBtn.addEventListener("click", function() {
14 | const input = inputEl.value
15 | lenOut.textContent = `${input} meters = ${(input*3.281).toFixed(2)} feet | ${input} feet = ${(input/3.281).toFixed(2)} meters`
16 | volOut.textContent = `${input} liters = ${(input*0.264).toFixed(2)} gallons | ${input} gallons = ${(input/0.264).toFixed(2)} liters`
17 | massOut.textContent = `${input} kilos = ${(input*2.204).toFixed(2)} pounds | ${input} pounds = ${(input/2.204).toFixed(2)} kilos`
18 | })
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
Metric/Imperial Unit Conversion
12 |
13 |
14 |
15 |
16 |
17 |
Length (Meter/Feet)
18 |
19 |
20 |
21 |
Volume (Liters/Gallons)
22 |
23 |
24 |
25 |
Mass (Kilograms/Pounds)
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | text-align: center;
4 | }
5 | .input-grid {
6 | border: 25px solid #6943FF;
7 | border-width: 25px 0px 25px 0px;
8 | background-color: #6943FF;
9 | width: 370px;
10 | margin: auto;
11 |
12 | }
13 | h1 {
14 | margin-top: 0px;
15 | font-family: 'Inter', sans-serif;
16 | font-style: normal;
17 | font-weight: 800;
18 | font-size: 20px;
19 | color: white;
20 | }
21 |
22 | #input-el {
23 | display: block;
24 | margin: auto;
25 | margin-top: 20px;
26 | background-color: #6943FF;
27 | border: 2px solid #B295FF;
28 | border-radius: 6px;
29 | width: 100px;
30 | height: 75px;
31 | font-size: 50px;
32 | color: white;
33 | text-align: center;
34 | font-family: 'Inter', sans-serif;
35 | font-style: normal;
36 | font-weight: 800;
37 | line-height: 24px;
38 | }
39 | #convert-btn {
40 | margin-top: 15px;
41 | background-color: white;
42 | width: 100px;
43 | height: 35px;
44 | border: 5px solid white;
45 | border-radius: 6px;
46 | font-family: 'Inter';
47 | font-style: normal;
48 | font-weight: 500;
49 | }
50 | .output-grid {
51 | padding-top: 25px;
52 | padding-bottom: 10px;
53 | background-color: #1F2937;
54 | width: 370px;
55 | margin: auto;
56 | }
57 | .output-box {
58 | width: 340px;
59 | vertical-align: middle;
60 | margin:auto;
61 | color: #CCC1FF;
62 | background: #273549;
63 | border: 1px solid #273549;
64 | border-radius: 5px;
65 | margin-bottom: 15px;
66 | line-height: 10px;
67 | padding-top: 10px;
68 | padding-bottom: 10px;
69 | }
70 | h2 {
71 | font-family: 'Inter';
72 | font-style: normal;
73 | font-weight: 600;
74 | font-size: 15px;
75 | }
76 | p {
77 | font-family: 'Inter';
78 | font-style: normal;
79 | font-weight: 400;
80 | font-size: 12px;
81 | color: white;
82 | }
--------------------------------------------------------------------------------