├── 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 | } --------------------------------------------------------------------------------