Spooky Halloween Code

Spooky Halloween Code using HTML5  CSS and JavaScript




<!DOCTYPE html>
<html>
    <head>
        <title>Happy Halloween</title>
        <style>
            body {
    background-image:url("https://media.giphy.com/media/1V17m8MgM0fEk/giphy.gif");
}
h2{
    color:orange;
}
#a{
position:absolute ;
top:580px;
left:180px;
font-size:24px;
}
#b{
position:absolute ;
top:400px;
left:300px;
font-size:24px;


}
#c{
position:absolute ;
top:350px;
left:200px;
font-size:24px;


}
#d{
position:absolute ;
top:480px;
left:80px;
font-size:24px;


}
#e{
position:absolute ;
top:640px;
left:150px;
font-size:24px;


}
#f{
position:absolute ;
top:450px;
left:310px;
font-size:24px;

}
#g{
position:absolute ;
top:610px;
left:30px;
font-size:24px;


}
#h{
position:absolute ;
top:520px;
left:130px;
font-size:24px;


}
#i{
position:absolute ;
top:690px;
left:270px;
font-size:24px;


}
#j{
position:absolute ;
top:440px;
left:280px;
font-size:16px;


}

        </style>
    </head>
    <body>
<h1>Happy Halloween</h1>
    <h2>Find and tap all the ghosts</h2>
        <div id="a" onclick=" b()";>👻</div>
        <div id="b"onclick=" c()";>👻</div>
         <div id="c" onclick=" d()";>👻</div>
        <div id="d"onclick=" e()";>👻</div>
         <div id="e" onclick=" f()";>👻</div>
        <div id="f"onclick=" g()";>👻</div>
         <div id="g" onclick=" h()";>👻</div>
        <div id="h"onclick=" i()";>👻</div>
        <div id="i"onclick=" j()";>👻</div>
        <div id="j"onclick=" k()";>👻</div>
    
    <script>
        function b() {
    var x = document.getElementById("a");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function c() {
    var x = document.getElementById("b");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function d() {
    var x = document.getElementById("c");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function e() {
    var x = document.getElementById("d");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function f() {
    var x = document.getElementById("e");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function g() {
    var x = document.getElementById("f");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function h() {
    var x = document.getElementById("g");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function i() {
    var x = document.getElementById("h");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function j() {
    var x = document.getElementById("i");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function k(){
 document.body.style.backgroundImage = "url('https://i.gifer.com/Za8W.gif')"
 }


    </script>
</body>
</html>

Click here to run this spooky code



Share with Friends


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon Tumblr



Try these Fun Games by Bobbie:


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News


 



Comments

Popular posts from this blog