Lecture 35

on

 Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <center>
        <input id="txt" type="email" placeholder="type something" >

        <!-- <button id="btn">Click me </button> -->

        <h2>Text will shown here</h2>
    </center>


    <script src="js/script.js"></script>
</body>

</html>

Script.js




let h2 = document.querySelector("h2")

let input = document.querySelector("#txt")

console.log(h2.innerText)


// let btn = document.querySelector("#btn")



// btn.onclick = () =>{

// }


// btn.addEventListener("mouseout", getValue)

// function getValue() {
//     console.log(input.value)
//     h2.innerText = input.value

// }


input.addEventListener("keyup", function () {
    // h2.innerText = input.value


    let val = input.value

    if (val.includes("@") == false) {
        h2.innerText = "Please enter a valid email"
        h2.style.color = "red"
    }
    else {
        h2.innerText = ""
    }
})

Comments

Post a Comment