Skip to content
Shadow Cipher

Events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: #414141; color: aliceblue;">
    <h2>Amazing image</h2>
    <div >
        <ul id="images">
            <li><img width="200px" id="photoshop" src="https://images.pexels.com/photos/3561339/pexels-photo-3561339.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="photoshop"></li>
            <li><img width="200px" id="japan" src="https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
            <li><img width="200px" id="river" src="https://images.pexels.com/photos/3532551/pexels-photo-3532551.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
            <li><img width="200px" id="owl" src="https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" ></li>
            <li><img width="200px" id="prayer" src="https://images.pexels.com/photos/2522671/pexels-photo-2522671.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></li>
            <li><a style="color: aliceblue;" href="https://google.com" id="google">Google</a></li>
        </ul>
   </div>
</body>
<script>
    // document.getElementById("owl").onclick = function(){
    //     alert("owl clicked");
    // }


    document.getElementById("images").addEventListener("click", function(e) {
        console.log("clicked isnide the ul");
    }, false);


    document.getElementById("owl").addEventListener("click", function(e) {
        console.log("owl clicked");
        e.stopPropagation();
    }, false);




    document.getElementById("google").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log("google clicked");
    }, false);


    document.querySelector("#images").addEventListener("click", function(e) {
        console.log(e.target.tagName);
        if(e.target.tagName == "IMG"){
            console.log(e.target.id);
            let removeIt = e.target.parentNode;
            removeIt.remove();
        }
    })


</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Chai aur code</h1>
    <button id="stop">Stop</button>
</body>
<script>
    const sayHitesh = function(){
        console.log("Hitesh");
    }
    const changeText = function(){
        document.querySelector("h1").innerHTML = "Best JS Series";
    }


    const changeMe = setTimeout(changeText, 2000);


    document.querySelector("#stop").addEventListener("click", function(){
        clearTimeout(changeMe);
        console.log("STOPPED");
    })


</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Chai aur code</h1>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
</body>
<script>
    const sayData = function(str){
        console.log(str, Date.now());
    }


    const intervalId = setInterval(sayData, 1000, "hi");
    clearInterval(intervalId);
</script>
</html>