Add files via upload

iamkanhaiyakumar · Mar 14, 2024 · 47f758b · 47f758b
1 parent 7134e5c
commit 47f758b
Show file tree

Hide file tree

Showing 6 changed files with 321 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,130 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,300&family=Poppins:wght@300;400;500;600&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Noto Sans', sans-serif;
+    font-family: 'Poppins', sans-serif;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgb(26, 26, 185);
+    color: white;
+    padding: 19px 12px;
+
+}
+
+nav span:hover{
+    font-size: 17px;
+    color: rgb(242, 7, 7);
+    cursor: pointer;
+}
+
+ul {
+    display: flex;
+}
+
+ul li {
+    list-style: none;
+    padding: 0 13px;
+}
+
+ul li a{
+    color: white;
+    text-decoration: none;
+}
+
+ul >li> a:hover{
+    color: rgb(236, 6, 6);
+}
+
+main{
+    min-height: 100vh; 
+}
+
+.logo img{
+    width: 15px;
+    filter: invert(1);
+}
+
+.logo :hover{
+    cursor: pointer;
+}
+
+.container{ 
+    max-width: 80vw;
+    margin: auto;
+    padding: 9px 15px;
+}
+
+.container h1{
+    padding: 12px 0;
+}
+
+input[type='text']{
+    min-width: 23vw;
+    padding: 3px 12px;
+    border: 2px solid black;
+    border-radius: 4px;
+    font-size: 20px;
+}
+
+.btn{
+    background: black;
+    color: white;
+    padding: 9px 12px;
+    border: 1px solid gray;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: bold;
+
+}
+
+.btn:hover{
+    background: rgb(233, 9, 9);
+    color: white;
+}
+
+#resultCont div::first-letter{
+    text-transform: uppercase;
+}
+
+footer{
+    font-size: 12px;
+    background-color: black;
+    color: white;
+    display: flex;
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@media only screen and (max-width: 600px) {
+
+    .container{
+        font-size: 12px; 
+    }
+
+    input[type='text'] {
+        width: 100%; 
+    }
+
+    nav{
+        flex-direction: column;
+    }
+    .logo{
+        padding: 6px 0;
+        font-size: 12px;
+    }
+    .logo span{
+        font-size: 20px;
+    }
+    .logo img{
+        width: 15px;
+        filter: invert(1);
+    }
+  }
diff --git a/img/email.svg b/img/email.svg
diff --git a/img/loading.svg b/img/loading.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eamil-Valitor </title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="img/email.svg" alt="email svg">
+               <span>YouValidate</span></div>
+            <ul>
+                <li><a href="">Home</a></li>
+                <li><a href="https://www.linkedin.com/in/kanhaiyakumar01/">About</a></li>
+                <li><a href="https://www.linkedin.com/in/kanhaiyakumar01/">Contact Us</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <div class="container">
+            <h1>Enter your email to validate</h1>
+            <form action="/submit" method="post">
+                <!-- Input Filed to Validate Email Address --> 
+                <input placeholder="Enter your email to validate" type="text" id="username" name="username" required>
+                <br><br>
+                <!-- Submit button -->
+                <input id="submitBtn" class="btn" type="submit" value="Submit">
+              </form>
+        </div>
+
+        <div class="container">
+            <h2>Your Results</h2>
+            <div id="resultCont">
+                Your results will show here  
+            </div>
+        </div>
+    </main>
+    <footer>
+        Copyright@2024 | YouValidate.com | All Rights reserved
+    </footer>
+    <script src="js/index.js"></script>
+
+</body>
+</html>
+
+
+
+
+
+
+
+
+<!-- text input username -->
+<!-- <label for="username">Username:</label>
+<input type="text" id="username" name="username" required> -->
+<!-- <br><br> -->
+<!-- Password button -->
+<!-- <label for="Password">Password:</label>
+<input type="text" id="password" name="password" required>
+<br><br> -->
+<!-- Gender Button with radio-->
+<!-- <label for="">Gender:</label>
+<input type="radio" id="male" name="gender"  value="male">
+<label for="male">Male</label>
+<input type="radio" id="female" name="gender"  value="female">
+<label for="female">Female</label>  -->
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,42 @@
+console.log("This is my script")
+
+let result = {
+    "tag": "",
+    "free": false,
+    "role": false,
+    "user": "akshaykumar",
+    "email": "[email protected]",
+    "score": 0.64,
+    "state": "undeliverable",
+    "domain": "codewithharry.com",
+    "reason": "invalid_mailbox",
+    "mx_found": true,
+    "catch_all": null,
+    "disposable": false,
+    "smtp_check": false,
+    "did_you_mean": "",
+    "format_valid": true
+}
+
+
+
+submitBtn.addEventListener("click", async (e) => {
+    e.preventDefault()
+    console.log("Clicked!")
+    resultCont.innerHTML = `<img width="123" src="img/loading.svg" alt="">`
+    let key = "ema_live_ITkV5Pqq40WNdMLdjqMZlNcb4AEBrNvWiSFd1MYE"
+    let email = document.getElementById("username").value 
+    let url = `https://api.emailvalidation.io/v1/info?apikey=${key}&email=${email}`
+    let res = await fetch(url)
+    let result = await res.json()
+    let str = ``
+    for (key of Object.keys(result)) {
+        if(result[key] !== "" && result[key]!== " "){ 
+            str = str + `<div>${key}: ${result[key]}</div>`
+        }
+    }
+
+    console.log(str)
+    resultCont.innerHTML = str
+})
+
diff --git a/ting.mp3 b/ting.mp3