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

Multi-tap Keypad Text Entry

Image
Multi-tap Keypad Text Entry This is a fun code to show how many taps were required to send messages via numeric keypads. *Featured Code Submitted and Created By  VENOM666 # Multi-tap Keypad Text Entry (from Codewars) # by: VENOM666 """     Prior to having fancy iPhones, teenagers would wear out their thumbs sending SMS messages on candybar-shaped feature phones with 3x4 numeric keypads.     Prior to the development of T9 (predictive text entry) systems, the method to type words was called "multi-tap" and involved pressing a button repeatedly to cycle through the possible values.     For example, to type a letter "R" you would press the 7 key three times (as the screen display for the current character cycles through P->Q->R->S->7). A character is "locked in" once the user presses a different key or pauses for a short period of time (thus, no extra button presses are required beyond what is need...
Read more