html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Periodic Table Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Parth">
<meta name="keywords" content="Sololearn">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h1 class="pre-loader w3-display-middle w3-text-red">
<span class="dot1">•</span>
<span class="dot2">•</span>
<span class="dot3">•</span>
</h1>
<div class="subBody w3-hide">
<a href="https://pubchem.ncbi.nlm.nih.gov/periodic-table/"><img src="https://anotherbloodybullshitblog.files.wordpress.com/2019/10/periodic_table_of_elements_w_chemical_group_block_pubchem.png" alt="Periodic Table" /></a>
<button class="startGame w3-amber w3-padding-16 w3-round-large" onclick="startGame()">Start Game</button>
</div>
<div class="game w3-container w3-hide w3-margin">
<h1 class="marks w3-center w3-hide"></h1>
<h1 class="elementName w3-center"></h1>
<input type="number" class="w3-margin-top w3-padding-16" placeholder="Write the atomic number of the given element." />
<h2 class="w3-green w3-center w3-round-xlarge" onclick="checkInputLength()">✓</h2>
<button class="w3-padding-16 w3-pale-red w3-border w3-round-large w3-border-red" onclick="endGame()">End Game</button>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
}
img {
width: 100%;
}
.pre-loader span {
position: relative;
font-size: 80px;
}
.startGame {
border: 2px solid orange;
position: relative;
bottom: 5px;
left: 45%;
}
.elementName {
font-family: fantasy;
}
.game input[type = number] {
position: relative;
width: 100%;
text-align: center;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var elements = ["Hydrogen", "Helium", "Lithium", "Beryllium", "Boron", "Carbon", "Nitrogen", "Oxygen", "Flourine", "Neon", "Sodium", "Magnesium", "Aluminium", "Silicon", "Phosphorous", "Sulfur", "Chlorine", "Argon", "Pottasium", "Calcium", "Scandium", "Titanium", "Vanadium", "Chromium", "Manganese"];
var elementCount = elements.length;
var randInt = Math.random() * elementCount;
randInt = Math.round(randInt);
$(function() {
var elementNameInH1 = elements[randInt];
$(".elementName").html(elementNameInH1);
});
$(function() {
$(".dot1").animate({right: "80%"}, 800);
$(".dot3").animate({left: "80%"}, 800);
setInterval(changeToGreen, 1500);
setInterval(hidePreLoader, 2300);
});
function changeToGreen() {
$(".pre-loader span").addClass("w3-text-green");
}
function hidePreLoader() {
$(".pre-loader").hide();
$(".subBody").removeClass("w3-hide");
}
function startGame() {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run