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

Post a Comment

Popular posts from this blog

Crypto Mining

Image
How to create a free website to mine Cryptocurrency  Step 1: Create a Free Blog or Website using Blogger. Wordpress or any other free Hosting. Find out how on this post...  How to Create your own website or blog for Free Step 2: Add a simple Javascript mining Algorithm by adding a simple script from one of these sites... Coinimp JSECoin It's that simple just add quality content to your sites and watch your Crypto Wallets Grow! Free Cloud Mining                
Read more

Hello World in 10 Programming Languages

Image
Java Hello World public class Hello {       public static void main(String[] args){           System.out.println("Hello World!");} } Click here to see this code run HTML5 Hello World <!DOCTYPE html> <html>     <head>         <title>Page Title</title>     </head>     <body>         <h1>Hello World</h1>     </body> </html> Click here to run this code Python Hello World print("Hello World") Click here to see this code run C Hello World #include <stdio.h> int main() { printf("Hello World");      return 0;} Click here to see this code run C++ Hello World #include <iostream> using namespace std; int main() { cout << "Hello W...
Read more