Add files via upload

anas20023 · Nov 23, 2023 · f639cdc · f639cdc
1 parent e13e358
commit f639cdc
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Converter</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="./upr_twr.js"></script>
+  </head>
+  <body>
+    <h1 class="heading">Convert Your Letters</h1>
+    <div class="container">
+      <input
+        type="text"
+        onblur="get_text()"
+        name="text"
+        id="text"
+        placeholder="Enter Text"
+        required />
+      <div class="btns">
+        <button type="submit" onclick="Upr()" class="btn">UpperCase</button>
+        <button type="submit" onclick="Lwr()" class="btn">LowerCase</button>
+        <button type="submit" onclick="Lnt()" class="btn">Legnth</button>
+      </div>
+      <h2 id="change"></h2>
+      <button onclick="Clr()" class="clear">Clear All</button>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,85 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+.container , form
+{
+    width: 90%;
+    max-width: 1080px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.heading
+{
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 20px auto;
+    text-align: center;
+}
+button
+{
+    padding: 8px 10px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    background: #333;
+    color: #ffff;
+    margin: 10px;
+    transition: all 0.3s ease;
+}
+#text
+{
+    width: 325px;
+    padding: 8px 10px;
+    border: 1px solid #333;
+    outline: none;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    color: #333;
+    margin: 10px;
+    transition: all 0.3s ease;
+}
+.btns
+{
+    width: 90%;
+    max-width: 1080px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+.btns button:hover
+{
+    background: #ffff;
+    color: #333;
+    border: 1px solid #333;
+}
+#change
+{
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 500;
+    margin-top: 30px;
+}
+.clear
+{
+    padding: 8px 10px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    background: blueviolet;
+    color: #ffff;
+    margin-top: 10px;
+    transition: all 0.3s ease;
+
+}
diff --git a/upr_twr.js b/upr_twr.js
@@ -0,0 +1,31 @@
+var txt, cupr, clwr;
+
+function get_text() {
+  txt = document.getElementById("text").value;
+}
+function Upr() {
+  if (txt == null) {
+    alert("Dont Leave the field Empty !");
+  }
+  cupr = txt.toUpperCase();
+  document.getElementById("change").innerHTML = cupr;
+}
+function Lwr() {
+  if (txt == null) {
+    alert("Dont Leave the field Empty !");
+  }
+  clwr = txt.toLowerCase();
+  document.getElementById("change").innerHTML = clwr;
+}
+function Clr() {
+  if (txt == null || cupr == null || clwr == null) {
+    alert("Nothing to Clean !!");
+  }
+  document.getElementById("change").innerHTML = "";
+}
+function Lnt() {
+  if (txt == null) {
+    alert("Dont Leave the field Empty !");
+  }
+  document.getElementById("change").innerHTML = "Length is = " + txt.length;
+}