diff --git a/Calculators/5-Band-Resistance-Calculator/style.css b/Calculators/5-Band-Resistance-Calculator/style.css index 93de93b27..977358c34 100644 --- a/Calculators/5-Band-Resistance-Calculator/style.css +++ b/Calculators/5-Band-Resistance-Calculator/style.css @@ -7,7 +7,9 @@ body { text-align: center; justify-content: center; align-items: center; - height: 120vh; + min-height: 100vh; + margin: 0; + padding: 0; } .title { @@ -16,6 +18,7 @@ body { .container { display: flex; + margin-bottom: 45px; } .value_inp { diff --git a/Calculators/6-Band-Resistance-Calculator/README.md b/Calculators/6-Band-Resistance-Calculator/README.md new file mode 100644 index 000000000..a9b776774 --- /dev/null +++ b/Calculators/6-Band-Resistance-Calculator/README.md @@ -0,0 +1,20 @@ +#

6 Band Resistance Calculator

+ +## Description :- + +This is a calculator that will help you calculate the resistance value by inputting the 6 color bands present on the resistor and it will return the resistance value for it including the tolerance value. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- Gives the theoretical resistance value of a given resistor. +- The calculator is responsive also and can be viewed on any device. + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/bf49c92f-34e4-4ab3-a5c2-ef2b6edd62ae) diff --git a/Calculators/6-Band-Resistance-Calculator/assets/resistor.png b/Calculators/6-Band-Resistance-Calculator/assets/resistor.png new file mode 100644 index 000000000..967213b8f Binary files /dev/null and b/Calculators/6-Band-Resistance-Calculator/assets/resistor.png differ diff --git a/Calculators/6-Band-Resistance-Calculator/assets/resistor2.png b/Calculators/6-Band-Resistance-Calculator/assets/resistor2.png new file mode 100644 index 000000000..bd62f4a5b Binary files /dev/null and b/Calculators/6-Band-Resistance-Calculator/assets/resistor2.png differ diff --git a/Calculators/6-Band-Resistance-Calculator/index.html b/Calculators/6-Band-Resistance-Calculator/index.html new file mode 100644 index 000000000..ccb308856 --- /dev/null +++ b/Calculators/6-Band-Resistance-Calculator/index.html @@ -0,0 +1,53 @@ + + + + + + + + + 6 Band Resistance Calculator + + + +

Resistance
Resistor Image
Calculator

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ + + + diff --git a/Calculators/6-Band-Resistance-Calculator/script.js b/Calculators/6-Band-Resistance-Calculator/script.js new file mode 100644 index 000000000..e8a66ee56 --- /dev/null +++ b/Calculators/6-Band-Resistance-Calculator/script.js @@ -0,0 +1,101 @@ +const band1 = document.getElementById('band1'); +const band2 = document.getElementById('band2'); +const band3 = document.getElementById('band3'); +const band4 = document.getElementById('band4'); +const band5 = document.getElementById('band5'); +const band6 = document.getElementById('band6'); +const calcBtn = document.querySelector('.btn'); + +// Define color options for each band +const colorOptions = { + band1: ['Black', 'Brown', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet', 'Gray', 'White'], + band2: ['Black', 'Brown', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet', 'Gray', 'White'], + band3: ['Black', 'Brown', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet', 'Gray', 'White'], + band4: ['Black', 'Brown', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet', 'Gray', 'White'], + band5: ['Black', 'Brown', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet', 'Gray', 'White', 'Gold', 'Silver'], + band6: ['Brown', 'Red', 'Green', 'Blue', 'Violet', 'Gray'] +}; + +function updateDropdownOptions(dropdown, options) { + dropdown.innerHTML = ''; // Clear existing options + + for (let i = 0; i < options.length; i++) { + const option = document.createElement('option'); + option.value = options[i].toLowerCase(); + option.text = options[i]; + option.style.backgroundColor = options[i]; + dropdown.appendChild(option); + } +} + +// Update dropdown options initially and on change +updateDropdownOptions(band1, colorOptions.band1); +updateDropdownOptions(band2, colorOptions.band2); +updateDropdownOptions(band3, colorOptions.band3); +updateDropdownOptions(band4, colorOptions.band4); +updateDropdownOptions(band5, colorOptions.band5); +updateDropdownOptions(band6, colorOptions.band6); + +// Adding event listener to the button to calculate the resistance +calcBtn.addEventListener('click', calcResistance); + +// Resistance calculating function +function calcResistance() { + const band1Value = band1.value.toLowerCase(); + const band2Value = band2.value.toLowerCase(); + const band3Value = band3.value.toLowerCase(); + const band4Value = band4.value.toLowerCase(); + const band5Value = band5.value.toLowerCase(); + const band6Value = band6.value.toLowerCase(); + + const resistorValues = { + black: 0, + brown: 1, + red: 2, + orange: 3, + yellow: 4, + green: 5, + blue: 6, + violet: 7, + gray: 8, + white: 9, + gold: -1, + silver: -2 + }; + + const temperatureCoefficientValues = { + brown: 100, + red: 50, + green: 20, + blue: 10, + violet: 5, + gray: 1 + }; + + const resistanceValue = (resistorValues[band1Value] * 100 + resistorValues[band2Value] * 10 + resistorValues[band3Value]) * Math.pow(10, resistorValues[band4Value]); + + let tolerancePercentage = ''; + + if (band5Value === 'gold') { + tolerancePercentage = '5%'; + } else if (band5Value === 'silver') { + tolerancePercentage = '10%'; + } else { + tolerancePercentage = `${resistorValues[band5Value]}%`; + } + + const temperatureCoefficient = temperatureCoefficientValues[band6Value]; + + // Open the popup for the resistance result + const popup = document.getElementById('popup'); + const popupResult = document.getElementById('popup-result'); + popupResult.textContent = `The value of Resistance is ${resistanceValue} Ω ± ${tolerancePercentage} tolerance, with a temperature coefficient of ${temperatureCoefficient} ppm/K`; + popup.style.display = 'flex'; +} + +// Hide the popup when the Close button is clicked +const closeButton = document.getElementById('closebtn'); +closeButton.addEventListener('click', () => { + const popup = document.getElementById('popup'); + popup.style.display = 'none'; +}); diff --git a/Calculators/6-Band-Resistance-Calculator/style.css b/Calculators/6-Band-Resistance-Calculator/style.css new file mode 100644 index 000000000..9fa4b6d58 --- /dev/null +++ b/Calculators/6-Band-Resistance-Calculator/style.css @@ -0,0 +1,132 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: rgb(244, 240, 240); + background: linear-gradient(180deg, rgba(244, 240, 240, 1) 0%, rgba(244, 118, 107, 1) 99%); + background-repeat: no-repeat; + background-size: cover; + text-align: center; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 0; +} + +.title { + color: rgb(107, 30, 2); +} + +#container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 45px; +} + +.value_inp { + font-size: 1.2rem; + font-weight: 600; + width: 30%; + margin: auto; + padding: 3%; + background-color: aliceblue; + border-radius: 10px; + -webkit-box-shadow: -7px 0px 93px 19px rgba(0, 0, 0, 0.23); + -moz-box-shadow: -7px 0px 93px 19px rgba(0, 0, 0, 0.23); + box-shadow: -7px 0px 93px 19px rgba(0, 0, 0, 0.23); +} + +label { + display: block; + text-align: left; +} + +select { + font-weight: 650; + width: 100%; + margin: 5% 0; + border: hidden; + border-radius: 2px; + padding: 2%; +} + +.btn { + font-size: 1.3rem; + width: 40%; + border: 5px solid brown; + border-radius: 5px; + font-weight: 600; +} + +.popup { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 999; +} + +.popup-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 10px; +} + +#closebtn { + margin-top: 10px; + width: 40%; + border: 5px solid brown; +} + +@media only screen and (max-width: 786px) { + body { + font-size: 14px; + overflow-y: hidden; + margin-top: 10%; + } + + .title { + padding-bottom: 11%; + } + + #container { + flex-wrap: wrap; + } + + .value_inp { + width: 80%; + padding: 2%; + } + + .btn { + width: 60%; + } + + select { + margin: 2% 0; + } + + .popup-content { + width: 90%; + padding: 10px; + } + + #popup-result { + font-size: 20px; + } + + #closebtn { + width: 60%; + } +} diff --git a/index.html b/index.html index 71a3733a3..dcf93144a 100644 --- a/index.html +++ b/index.html @@ -211,6 +211,20 @@

Calculate the theoretical resistance of a 5-band resistor.

+
+
+

6 Band Resistance Calculator

+

Calculate the theoretical resistance of a 6-band resistor.

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

AC/DC Power Calculator