First Comment

kunal-umap · Sep 3, 2023 · 64ae482 · 64ae482
commit 64ae482
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Morce Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 class="head">Able Morse Code Translator</h1>
+    <div class="wrap">
+        <textarea style="text-transform:uppercase" name="morceIP" id="morceIP" ></textarea>
+       <div class="submit">Translate</div> 
+    </div>
+    <div class="output1">
+
+    </div>
+    <div class="output2">
+
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,68 @@
+const input = document.getElementById('morceIP');
+const op1 = document.querySelector('.output1');
+const op2 = document.querySelector('.output2');
+MORSE_CODE_DICT = ['A', 'B',
+                    'C', 'D', 'E',
+                    'F', 'G', 'H',
+                    'I', 'J', 'K',
+                    'L', 'M', 'N',
+                    'O', 'P', 'Q',
+                    'R', 'S', 'T',
+                    'U', 'V', 'W',
+                    'X', 'Y', 'Z',
+                    '1', '2', '3',
+                    '4', '5', '6',
+                    '7', '8', '9',
+                    '0'];
+MORSE_CODE_DICT1 = ['.-', '-...',
+                    '-.-.', '-..', '.',
+                    '..-.', '--.', '....',
+                    '..', '.---', '-.-',
+                    '.-..', '--', '-.',
+                    '---', '.--.', '--.-',
+                    '.-.', '...', '-',
+                    '..-', '...-', '.--',
+                    '-..-', '-.--', '--..',
+                    '.----', '..---', '...--',
+                    '....-', '.....', '-....',
+                    '--...', '---..', '----.',
+                    '-----'];
+let MorseCode = "";
+let arrowCode = "_Click_ ";
+
+input.addEventListener('change',(e)=>{
+    let text = input.value.toUpperCase();
+
+    for(var i =0;i<text.length;i++){
+        if(text[i] == ' '){
+            MorseCode += "_";
+        }else{
+            let code = text[i];
+            for(var j = 0;j<36;j++){
+                if(MORSE_CODE_DICT[j] == code){
+                    MorseCode += MORSE_CODE_DICT1[j];
+                    MorseCode += ' ';
+                }
+                console.log(code, MORSE_CODE_DICT[j])
+            }
+
+            // MorseCode += a;
+            // MorseCode += " ";
+        }
+    }
+
+    for(var i =0;i<MorseCode.length;i++){
+        if(MorseCode[i]==" "){
+            arrowCode += '→ ';
+        }else if(MorseCode[i] == "."){
+            arrowCode += '↑ ';
+        }else if(MorseCode[i] == "-"){
+            arrowCode += '↓ ';
+        }else if(MorseCode[i] == "_"){
+            arrowCode += '← ';
+        }
+    }
+    op1.innerHTML = MorseCode;
+    op2.innerHTML = arrowCode +" _Click_";
+    // ↑ ↓ → ←
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+body {
+    margin: 0px;
+}
+
+.head {
+    margin: 0px;
+    background: gold;
+    text-align: center;
+    width: 100%;
+    padding: 12px;
+    box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.438);
+}
+
+.wrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px;
+    justify-content: space-around;
+    flex: 1;
+    border-bottom: .5px solid gray;
+}
+#morceIP {
+    padding: 12px;
+    margin: 12px;
+    height: 40px;
+    width: 40vw;
+}
+.submit {
+    cursor: pointer;
+    height: 20px;
+    background-color: gold;
+    padding: 12px 28px;
+    border-radius: 5px;
+    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.425);
+}
+.submit:hover {
+    box-shadow: inset 2px 3px 3px rgba(0, 0, 0, 0.413);
+}
+
+.output1 {
+    min-height: 14px;
+    min-width: 20px;
+    border: .5px solid rgb(107, 107, 107);
+    padding: 12px;
+    margin: 20px;
+    font-size: 42px;
+    letter-spacing: 2px;
+}
+.output2 {
+    min-height: 14px;
+    min-width: 20px;
+    border: .5px solid rgb(138, 137, 137);
+    margin: 20px;
+    padding: 12px;
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-weight: bolder;
+}