first commit

adinathraut · Sep 27, 2023 · 6513cc1 · 6513cc1
1 parent 1c96aae
commit 6513cc1
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 0 deletions.
diff --git a/index.html b/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">
+    <title>Code Converter 😊</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Comfortaa:wght@500&family=Montserrat:wght@300&family=Open+Sans:wght@300&family=Roboto:wght@400;500&family=Sofia+Sans:wght@500;900&display=swap" rel="stylesheet">
+</head>
+
+<body background="https://cdn.cbeditz.com/cbeditz/large/11625049314ji68a0ctornpauyi33bglx8hgbmsqgtlmyxrmnbzxu5d0rlftu4rcen9qiio96tcadjbsh87lav4u7mrn0w2uvsw2wst0b9nlkxu.jpg">
+
+    <div class="menu card">
+        <label for="codeChoice">Which code you want to convert? 😊</label>
+        <select id="codeChoice" class="btn btn-warning dropdown-toggle m-3" onchange="showCodeInterface()">
+            <option value="none" selected >Select Code</option>
+            <option value="hamming" class="dropdown">Hamming Code</option>
+            <option value="crc" class="dropdown">CRC Code</option>
+        </select>
+    </div>
+
+    <div id="hammingInterface" class="container hidden card">
+        <h1>Hamming Code Generator</h1>
+        <label for="inputBinary">Enter Binary String:</label>
+        <input type="text" id="inputBinary">
+        <button onclick="generateHammingCode()" class="btn btn-outline-success">Generate</button>
+        <p id="output"></p>
+    </div>
+
+    <div id="crcInterface" class="container hidden">
+        <h1>CRC Encoder </h1>
+        <label for="dataWord">Enter Data Word:</label>
+        <input type="text" id="dataWord" placeholder="e.g., 100100">
+        <label for="key">Enter Key:</label>
+        <input type="text" id="key" placeholder="e.g., 1101">
+        <button onclick="encodeData()" class="btn btn-outline-success">Encode</button>
+        <div id="outputCrc"></div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,103 @@
+// Hamming Code
+function generateHammingCode() {
+    let input = document.getElementById('inputBinary').value;
+    let output = hammingEncoder(input);
+    document.getElementById('output').innerText = "Hamming Code: " + output;
+}
+
+function hammingEncoder(input) {
+    let parityCount = 0;
+    while (Math.pow(2, parityCount) < input.length + parityCount + 1) {
+        parityCount++;
+    }
+
+    let encoded = '';
+    let j = 0;
+
+    for (let i = 1; i <= input.length + parityCount; i++) {
+        if (Math.log2(i) % 1 === 0) {
+            encoded += '0';
+        } else {
+            encoded += input[j];
+            j++;
+        }
+    }
+
+    for (let i = 0; i < parityCount; i++) {
+        let position = Math.pow(2, i);
+        let sum = 0;
+
+        for (let j = 1; j <= encoded.length; j++) {
+            if (j & position) {
+                sum += encoded[j - 1] === '1' ? 1 : 0;
+            }
+        }
+
+        encoded = setCharAt(encoded, position - 1, sum % 2 === 0 ? '0' : '1');
+    }
+
+    return encoded;
+}
+
+function setCharAt(str, index, chr) {
+    if (index > str.length - 1) return str;
+    return str.substring(0, index) + chr + str.substring(index + 1);
+}
+
+// CRC Code
+function xor1(a, b) {
+    let result = "";
+    let n = b.length;
+    for (let i = 1; i < n; i++) {
+        if (a[i] == b[i]) {
+            result += "0";
+        } else {
+            result += "1";
+        }
+    }
+    return result;
+}
+
+function mod2div(dividend, divisor) {
+    let pick = divisor.length;
+    let tmp = dividend.substr(0, pick);
+    let n = dividend.length;
+
+    while (pick < n) {
+        if (tmp[0] == '1') {
+            tmp = xor1(divisor, tmp) + dividend[pick];
+        } else {
+            tmp = xor1('0'.repeat(pick), tmp) + dividend[pick];
+        }
+        pick += 1;
+    }
+
+    if (tmp[0] == '1') {
+        tmp = xor1(divisor, tmp);
+    } else {
+        tmp = xor1('0'.repeat(pick), tmp);
+    }
+    return tmp;
+}
+
+function encodeData() {
+    let data = document.getElementById('dataWord').value;
+    let key = document.getElementById('key').value;
+
+    let l_key = key.length;
+    let str = '0'.repeat(l_key - 1);
+    let appended_data = data + str;
+
+    let remainder = mod2div(appended_data, key);
+    let codeword = data + remainder;
+
+    document.getElementById('outputCrc').innerText = "Remainder: " + remainder + "\nEncoded Data (Data + Remainder): " + codeword;
+}
+
+// Display the selected interface
+function showCodeInterface() {
+    let choice = document.getElementById('codeChoice').value;
+
+    document.getElementById('hammingInterface').style.display = choice === 'hamming' ? 'block' : 'none';
+    document.getElementById('crcInterface').style.display = choice === 'crc' ? 'block' : 'none';
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+body {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+}
+
+.menu {
+    width: 80%;
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    text-align: center;
+}
+
+.container {
+    width: 80%;
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: #f1f3b0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+
+label {
+    font-family: 'Comfortaa', cursive;
+    font-weight: 800;
+    display: block;
+    margin-top: 15px;
+}
+
+input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    display: block;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.hidden {
+    display: none;
+}
+
+h1 {
+    margin-top: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+    font-family: 'Comfortaa', cursive;
+    font-weight: bold;
+    font-size: 20px;
+}