Added html and js for generating both sub and superscripts

PardhuMadipalli · May 19, 2024 · 285f893 · 285f893
1 parent da2ea55
commit 285f893
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 0 deletions.
diff --git a/assets/img/favicon.webp b/assets/img/favicon.webp
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Superscript and Subscript Generator | Pardhu Madipalli</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="theme-color" content="#F8F9FA">
+        <meta property="og:type" content="website" />
+        <link rel="shortcut icon" href="assets/img/favicon.webp" type="image/webp">
+<!--        <script src="https://code.jquery.com/jquery-3.6.0.min.js"-->
+<!--                integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="-->
+<!--                crossorigin="anonymous">-->
+<!--        </script>-->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+              rel="stylesheet"
+              integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
+              crossorigin="anonymous">
+        <link rel="stylesheet" href="index.css">
+    </head>
+    <body class="bg-light">
+        <!-- JavaScript Bundle with Popper -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+                integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+                crossorigin="anonymous">
+        </script>
+        <div class="container-fluid py-2">
+            <div class="sm-6 text-center pt-3">
+                <h1 class="px-3">Superscript generator</h1>
+                <div class="">
+                    <p class="p-2">Enter the text in the input box.</p>
+                </div>
+                <div class="row justify-content-center" style="height: 200px;">
+                    <div class="col-12 col-sm-3">
+                        <textarea class="w-100 h-75 p-2" id="superscript-input" placeholder="Input text"></textarea>
+                    </div>
+                    <div class="col-12 col-sm-3">
+                        <output class="w-100 h-75 text-bg-secondary text-start p-2" id="superscript-output">
+                            <span><sup>Output text</sup></span></output>
+                    </div>
+                </div>
+            </div>
+            <div class="sm-6 text-center pt-3">
+                <h1 class="px-3">Subscript generator</h1>
+                <div class="">
+                    <p class="p-2">Enter the text in the input box.</p>
+                </div>
+                <div class="row justify-content-center" style="height: 200px;">
+                    <div class="col-12 col-sm-3">
+                        <textarea class="w-100 h-75 p-2" id="subscript-input" placeholder="Input text"></textarea>
+                    </div>
+                    <div class="col-12 col-sm-3">
+                        <output class="w-100 h-75 text-bg-secondary text-start p-2" id="subscript-output">
+                            <span><sub>Output text</sub></span></output>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <footer class="text-center">by Pardhu Madipalli</footer> -->
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,24 @@
+const DATA_KEY = 'data'
+
+window.addEventListener("load", () => {
+    // console.log('page loaded')
+})
+
+const outputSuper = document.getElementById("superscript-output")
+
+document.getElementById("superscript-input")
+    .addEventListener('input', function (event) {
+        console.log(event.currentTarget.value)
+        const currText = event.currentTarget.value;
+        outputSuper.innerHTML = currText.sup()
+    });
+
+const outputSub = document.getElementById("subscript-output")
+
+document.getElementById("subscript-input")
+    .addEventListener('input', function (event) {
+        console.log(event.currentTarget.value)
+        const currText = event.currentTarget.value;
+        outputSub.innerHTML = currText.sub()
+    });    
+