Rakesh9100 · Rakesh9100 · Jun 23, 2024 · May 27, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/Calculators/Electronegativity-Calculator/README.md b/Calculators/Electronegativity-Calculator/README.md
@@ -0,0 +1,17 @@
+# <p align="center">Electronegativity Calculator</p>
+
+## Description :-
+
+The calculator designed is an electronegativity calculator that allows users to select two elements from dropdown menus. Upon selection, the calculator displays the electronegativity values of both elements, calculates their difference, and determines the polarity of the chemical bond formed between them. The results are shown in four input fields: electronegativity of element 1, electronegativity of element 2, electronegativity difference, and chemical bond polarity.
+
+This calculator is useful for understanding and predicting the nature of chemical bonds based on electronegativity values, providing educational and practical insights into chemical interactions.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/9812141b-8b68-4ca1-9655-a74d752bb3c4)
diff --git a/Calculators/Electronegativity-Calculator/index.html b/Calculators/Electronegativity-Calculator/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/bda94d7539.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Electronegativity Calculator</title>
+</head>
+<body>
+    <div class="icon-container">
+        <!-- Icon (example using Font Awesome) -->
+        <i class="fa-solid fa-atom"></i>
+    </div>
+
+    <div class="container">
+        <h1 class="main-heading">Electronegativity Calculator</h1>
+        <form id="calculator-form">
+            <label for="element1">Element 1:</label>
+            <select id="element1" required></select>
+
+            <label for="element2">Element 2:</label>
+            <select id="element2" required></select>
+
+            <button type="submit">Calculate</button>
+        </form>
+        <div class="result-container">
+            <div class="result-item">
+                <label for="electronegativity1">Electronegativity of Element 1:</label>
+                <input type="text" id="electronegativity1" readonly>
+            </div>
+            <div class="result-item">
+                <label for="electronegativity2">Electronegativity of Element 2:</label>
+                <input type="text" id="electronegativity2" readonly>
+            </div>
+            <div class="result-item">
+                <label for="difference">Electronegativity Difference:</label>
+                <input type="text" id="difference" readonly>
+            </div>
+            <div class="result-item">
+                <label for="polarity" style="margin-top: 25px;">Chemical Bond Polarity:</label>
+                <input type="text" id="polarity" readonly >
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Calculators/Electronegativity-Calculator/script.js b/Calculators/Electronegativity-Calculator/script.js
@@ -0,0 +1,64 @@
+// scripts.js
+
+const electronegativityValues = {
+    H: 2.20, He: 0,
+    Li: 0.98, Be: 1.57, B: 2.04, C: 2.55, N: 3.04, O: 3.44, F: 3.98, Ne: 0,
+    Na: 0.93, Mg: 1.31, Al: 1.61, Si: 1.90, P: 2.19, S: 2.58, Cl: 3.16, Ar: 0,
+    K: 0.82, Ca: 1.00, Sc: 1.36, Ti: 1.54, V: 1.63, Cr: 1.66, Mn: 1.55, Fe: 1.83, Co: 1.88, Ni: 1.91, Cu: 1.90, Zn: 1.65, Ga: 1.81, Ge: 2.01, As: 2.18, Se: 2.55, Br: 2.96, Kr: 3.00,
+    Rb: 0.82, Sr: 0.95, Y: 1.22, Zr: 1.33, Nb: 1.60, Mo: 2.16, Tc: 1.90, Ru: 2.20, Rh: 2.28, Pd: 2.20, Ag: 1.93, Cd: 1.69, In: 1.78, Sn: 1.96, Sb: 2.05, Te: 2.10, I: 2.66, Xe: 2.60,
+    Cs: 0.79, Ba: 0.89, La: 1.10, Ce: 1.12, Pr: 1.13, Nd: 1.14, Pm: 1.13, Sm: 1.17, Eu: 1.20, Gd: 1.20, Tb: 1.10, Dy: 1.22, Ho: 1.23, Er: 1.24, Tm: 1.25, Yb: 1.10, Lu: 1.27,
+    Hf: 1.30, Ta: 1.50, W: 2.36, Re: 1.90, Os: 2.20, Ir: 2.20, Pt: 2.28, Au: 2.54, Hg: 2.00, Tl: 1.62, Pb: 2.33, Bi: 2.02, Po: 2.00, At: 2.20, Rn: 0,
+    Fr: 0.70, Ra: 0.89, Ac: 1.10, Th: 1.30, Pa: 1.50, U: 1.38, Np: 1.36, Pu: 1.28, Am: 1.30, Cm: 1.30, Bk: 1.30, Cf: 1.30, Es: 1.30, Fm: 1.30, Md: 1.30, No: 1.30, Lr: 1.30,
+    Rf: 0, Db: 0, Sg: 0, Bh: 0, Hs: 0, Mt: 0, Ds: 0, Rg: 0, Cn: 0, Nh: 0, Fl: 0, Mc: 0, Lv: 0, Ts: 0, Og: 0
+};
+
+const elements = Object.keys(electronegativityValues);
+
+document.addEventListener('DOMContentLoaded', function() {
+    const element1Dropdown = document.getElementById('element1');
+    const element2Dropdown = document.getElementById('element2');
+
+    elements.forEach(element => {
+        const option1 = document.createElement('option');
+        option1.value = element;
+        option1.textContent = element;
+        element1Dropdown.appendChild(option1);
+
+        const option2 = document.createElement('option');
+        option2.value = element;
+        option2.textContent = element;
+        element2Dropdown.appendChild(option2);
+    });
+});
+
+document.getElementById('calculator-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const element1 = document.getElementById('element1').value;
+    const element2 = document.getElementById('element2').value;
+
+    const electronegativity1 = getElectronegativity(element1);
+    const electronegativity2 = getElectronegativity(element2);
+    const difference = Math.abs(electronegativity1 - electronegativity2);
+    const polarity = determinePolarity(electronegativity1, electronegativity2);
+
+    document.getElementById('electronegativity1').value = electronegativity1.toFixed(2);
+    document.getElementById('electronegativity2').value = electronegativity2.toFixed(2);
+    document.getElementById('difference').value = difference.toFixed(2);
+    document.getElementById('polarity').value = polarity;
+});
+
+function getElectronegativity(element) {
+    return electronegativityValues[element];
+}
+
+function determinePolarity(electronegativity1, electronegativity2) {
+    const difference = Math.abs(electronegativity1 - electronegativity2);
+    if (difference < 0.5) {
+        return "Non-polar covalent bond";
+    } else if (difference >= 0.5 && difference <= 1.7) {
+        return "Polar covalent bond";
+    } else {
+        return "Ionic bond";
+    }
+}
diff --git a/Calculators/Electronegativity-Calculator/style.css b/Calculators/Electronegativity-Calculator/style.css
@@ -0,0 +1,116 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(100deg,rgb(53, 0, 87) ,rgb(83, 69, 69));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.icon-container {
+    position: fixed; 
+    top: 20px; 
+    left: 20px; 
+    z-index: 1000; 
+}
+
+.icon-container i {
+    font-size: 50px; 
+    color: #d6d6d6; 
+}
+
+.container {
+    background-color: #ffffff9d;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 500px;
+    height: 580px;
+}
+
+h1 {
+    font-family:'Times New Roman', Times, serif;
+    font-size: 40px;
+    position: relative;
+    bottom: 0.5rem;
+    font-weight: bold;
+    color: #28026f;
+}
+
+label {
+    display: block;
+    margin: 10px 0 5px;
+    font-size: larger;
+    font-weight: bold;
+}
+
+select {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="gray" d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    cursor: pointer;
+}
+
+div button {
+    padding: 10px 20px;
+    background-color: #0068d7;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.result-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* Two columns with equal width */
+    grid-gap: 10px; /* Gap between grid items */
+    justify-content: center; /* Center items horizontally */
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+    left: 2rem;
+}
+
+.result-container label{
+    font-size: 15px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.result-container input{
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 90%;
+}
+
+.result-item {
+    flex: 1;
+    margin: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #e8e8e8ea;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.867);
+    color: #030340;
+}
diff --git a/index.html b/index.html
@@ -1268,6 +1268,20 @@ <h3>Calculates electricity costs based on user-supplied units, time, and cost pa
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Electronegativity Calculator</h2>
+                <h3>Calculates the Electronegativity difference between elements.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Electronegativity-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electronegativity-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>Ellipse And Hyperbola Calculator</h2>