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
Comments
Post a Comment