Rakesh9100 · AkhilaSunesh · May 27, 2024 · May 27, 2024 · May 28, 2024 · May 31, 2024
diff --git a/5-Band-Resistance-Calculator/README.md b/5-Band-Resistance-Calculator/README.md
@@ -0,0 +1,24 @@
+# <p align="center">5 Band Resistance Calculator</p>
+
+# Description :-
+
+As the name suggest this is a Calculator which will help you calculate the resistance value by input the 5 colour bands present on the resistor and it will return the resistance value for it with including the tolerance value. The calculator is responsive also and can be viewed on any device.
+
+## Tech Stacks :-
+
+- HTML 
+- CSS 
+- Javascript
+
+## Features :-
+
+- Gives the theoritical reistance value of a given resistor.
+
+## Screenshots :-
+
+![Project demo 1](./assets/demo.png)
+---
+![Project demo 2](./assets/demo1.png)
+---
+
+
diff --git a/5-Band-Resistance-Calculator/assets/demo.png b/5-Band-Resistance-Calculator/assets/demo.png
diff --git a/5-Band-Resistance-Calculator/assets/demo1.png b/5-Band-Resistance-Calculator/assets/demo1.png
diff --git a/5-Band-Resistance-Calculator/assets/resistor.png b/5-Band-Resistance-Calculator/assets/resistor.png
diff --git a/5-Band-Resistance-Calculator/assets/resistor2.png b/5-Band-Resistance-Calculator/assets/resistor2.png
diff --git a/5-Band-Resistance-Calculator/index.html b/5-Band-Resistance-Calculator/index.html
@@ -0,0 +1,56 @@
+<!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>5 Band Resistance Calculator</title>
+</head>
+
+<body>
+    <h1 class="title">Resistance <br> <img src="./assets/resistor2.png" alt="" srcset=""> <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="4rdcol">
+                <label for="band4">Select Band 4 colour:</label>
+                <select id="band4">
+                </select>
+            </div>
+            <div class="tolr">
+                <label for="band5">Select Tolerance:</label>
+                <select id="band5">
+                </select>
+            </div>
+            <button class="btn">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">Close</button>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/5-Band-Resistance-Calculator/script.js b/5-Band-Resistance-Calculator/script.js
@@ -0,0 +1,84 @@
+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 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: ['Gold', 'Silver', 'No Colour']
+};
+
+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);
+
+//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();
+    console.log(band4Value);
+    const resistorValues = {
+        black: 0,
+        brown: 1,
+        red: 2,
+        orange: 3,
+        yellow: 4,
+        green: 5,
+        blue: 6,
+        violet: 7,
+        gray: 8,
+        white: 9
+    };
+
+    const resistanceValue = (resistorValues[band1Value] * 100 + resistorValues[band2Value] * 10 + resistorValues[band3Value]);
+
+    let tolerancePercentage = '';
+
+    if (band5Value === 'gold') {
+        tolerancePercentage = '5%';
+    } else if (band5Value === 'silver') {
+        tolerancePercentage = '10%';
+    } else {
+        tolerancePercentage = '20%';
+    }
+
+    // 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} x 10^${resistorValues[band4Value]} Ω ± ${tolerancePercentage} tolerance`;
+    popup.style.display = 'flex';
+}
+
+// Hide the popup when OK button is clicked
+const okButton = document.getElementById('closebtn');
+okButton.addEventListener('click', () => {
+    const popup = document.getElementById('popup');
+    popup.style.display = 'none';
+});
diff --git a/5-Band-Resistance-Calculator/style.css b/5-Band-Resistance-Calculator/style.css
@@ -0,0 +1,130 @@
+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;
+    height: 120vh;
+}
+
+.title {
+    color: rgb(107, 30, 2);
+}
+
+.container {
+    display: flex;
+}
+
+.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;
+        /* height: auto; */
+        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/Calculators/Capacitor-Calculator/Assets/1.PNG b/Calculators/Capacitor-Calculator/Assets/1.PNG
diff --git a/Calculators/Capacitor-Calculator/Assets/2.PNG b/Calculators/Capacitor-Calculator/Assets/2.PNG
diff --git a/Calculators/Capacitor-Calculator/Assets/3.PNG b/Calculators/Capacitor-Calculator/Assets/3.PNG
diff --git a/Calculators/Capacitor-Calculator/README.md b/Calculators/Capacitor-Calculator/README.md
@@ -0,0 +1,53 @@
+# Capacitor Conversion Chart Tool
+
+This tool is designed to help users convert capacitor values between different units: picofarads (pF), nanofarads (nF), microfarads (µF), and farads (F). The tool also includes a capacitance conversion chart for quick reference.
+
+## Features
+
+-   **Input Fields**: Enter values in any of the four units (pF, nF, µF, F) to see the equivalent values in the other units.
+-   **Auto-Conversion**: As you type a value in one unit, the equivalent values in the other units are automatically calculated and displayed.
+-   **Capacitance Conversion Chart**: A table showing common capacitance values and their equivalents in pF, nF, µF, and their corresponding code.
+
+## How to Use
+
+1.  **Open the Tool**: Load the HTML file in a web browser.
+2.  **Enter a Value**: Input a value in any of the four units (Picofarad, Nanofarad, Microfarad, or Farad).
+    -   The corresponding fields will update automatically to show the converted values.
+3.  **Refer to the Chart**: Use the capacitance conversion chart to find common values and their equivalents.
+
+## Input Fields
+
+-   **Picofarad (pF)**: Enter the value in picofarads.
+-   **Nanofarad (nF)**: Enter the value in nanofarads.
+-   **Microfarad (µF)**: Enter the value in microfarads.
+-   **Farad (F)**: Enter the value in farads.
+-   **Code**: Refer to the chart for the code.
+
+## Conversion Logic
+
+When you enter a value in one of the input fields, the following conversions occur:
+
+-   **Picofarads (pF)**:
+    -   Nanofarads (nF) = Picofarads / 1000
+    -   Microfarads (µF) = Picofarads / 1,000,000
+    -   Farads (F) = Picofarads / 1,000,000,000,000
+-   **Nanofarads (nF)**:
+    -   Picofarads (pF) = Nanofarads * 1000
+    -   Microfarads (µF) = Nanofarads / 1000
+    -   Farads (F) = Nanofarads / 1,000,000
+-   **Microfarads (µF)**:
+    -   Picofarads (pF) = Microfarads * 1,000,000
+    -   Nanofarads (nF) = Microfarads * 1000
+    -   Farads (F) = Microfarads / 1000
+-   **Farads (F)**:
+    -   Picofarads (pF) = Farads * 1,000,000,000,000
+    -   Nanofarads (nF) = Farads * 1,000,000,000
+    -   Microfarads (µF) = Farads * 1,000,000
+
+## Capacitance Conversion Chart
+
+The chart provides a quick reference for common capacitance values and their equivalents:
+
+![Project demo 1](./assets/1.png)
+![Project demo 1](./assets/2.png)
+![Project demo 1](./assets/3.png)