Added 6 Band Resistance Calculator (#1751)

Rakesh9100 · Aug 3, 2024 · df0f7dc · df0f7dc
1 parent 7df1e54
commit df0f7dc
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 1 deletion.
diff --git 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
@@ -0,0 +1,20 @@
+# <p align="center">6 Band Resistance Calculator</p>
+
+## 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
diff --git a/Calculators/6-Band-Resistance-Calculator/assets/resistor2.png b/Calculators/6-Band-Resistance-Calculator/assets/resistor2.png
diff --git a/Calculators/6-Band-Resistance-Calculator/index.html b/Calculators/6-Band-Resistance-Calculator/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./assets/resistor.png" type="image/x-icon">
+    <title>6 Band Resistance Calculator</title>
+</head>
+
+<body>
+    <h1 class="title">Resistance <br> <img src="./assets/resistor2.png" alt="Resistor Image"> <br> Calculator</h1>
+    <div id="container">
+        <div class="value_inp">
+            <div class="1stcol">
+                <label for="band1">Select Band 1 colour:</label>
+                <select id="band1"></select>
+            </div>
+            <div class="2ndcol">
+                <label for="band2">Select Band 2 colour:</label>
+                <select id="band2"></select>
+            </div>
+            <div class="3rdcol">
+                <label for="band3">Select Band 3 colour:</label>
+                <select id="band3"></select>
+            </div>
+            <div class="4thcol">
+                <label for="band4">Select Band 4 (Multiplier):</label>
+                <select id="band4"></select>
+            </div>
+            <div class="tolr">
+                <label for="band5">Select Tolerance:</label>
+                <select id="band5"></select>
+            </div>
+            <div class="temp-coeff">
+                <label for="band6">Select Temperature Coefficient:</label>
+                <select id="band6"></select>
+            </div>
+            <button class="btn" onclick="calculateResistance()">Calculate</button>
+        </div>
+        <div id="popup" class="popup">
+            <div class="popup-content">
+                <h2 id="result">Resistance Result</h2>
+                <p id="popup-result"></p>
+                <button id="closebtn" onclick="closePopup()">Close</button>
+            </div>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/6-Band-Resistance-Calculator/script.js 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
@@ -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
@@ -211,6 +211,20 @@ <h3>Calculate the theoretical resistance of a 5-band resistor.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>6 Band Resistance Calculator</h2>
+                <h3>Calculate the theoretical resistance of a 6-band resistor.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/6-Band-Resistance-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/6-Band-Resistance-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>AC/DC Power Calculator</h2>