Merge pull request ambujraj#38 from NatsumiHB/master

Added charcounter made in HTML, CSS and JS
manpreetb · Oct 1, 2018 · dfd4ec7 · dfd4ec7
2 parents 4f60e5f + ba2a98e
commit dfd4ec7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/js-char-counter/index.html b/js-char-counter/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Charcounter</title>
+        <meta charset="UTF-8" />
+        <link href="./main.css" rel="stylesheet" />
+    </head>
+    <body>
+        <div class="container">
+            <div class="hero">
+                <header>
+                    <h1>Charcounter</h1>
+                </header>
+                <h3>Chars: <span id="count">0</span></h3>
+                <textarea id="text" rows="20" cols="100"></textarea>
+                <script>
+                    setInterval(() => {
+                        document.getElementById("count").innerHTML = document.getElementById("text").value.toString().length;
+                    }, 100);
+                </script>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/js-char-counter/main.css b/js-char-counter/main.css
@@ -0,0 +1,28 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');
+
+* {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+}
+
+body { 
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    height: 100vh;
+    width: 100vw;
+
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(135deg, #2dbde5 0%,#ed80c6 100%);
+}
+
+header h1 {
+    font-size: 26pt;
+    font-weight: lighter;
+}
+
+header h3 { font-size: 12pt; }
+
+textarea { resize: vertical; }