-
Notifications
You must be signed in to change notification settings - Fork 395
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
145 changed files
with
303,673 additions
and
411 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 :- | ||
|
|
||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; | ||
| }); |
Oops, something went wrong.