Website

T05619 · Apr 21, 2024 · 8fa6749 · 8fa6749
1 parent d24bf99
commit 8fa6749
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Reactivity Series</title>
+ <link rel="stylesheet" href="style.css">
+ <script src="script.js"></script>
+</head>
+<body>
+ <div class="container">
+ <h1>Reactivity Series Quiz</h1>
+ <div class="reactivity-series">
+ <div class="box"><p id="potassium">Empty</p></div>
+ <div class="box"><p id="sodium">Empty</p></div>
+ <div class="box"><p id="lithium">Empty</p></div>
+ <div class="box"><p id="calcium">Empty</p></div>
+ <div class="box"><p id="magnesium">Empty</p></div>
+ <div class="box"><p id="aluminium">Empty</p></div>
+ <div class="box"><p id="carbon" class="splitter">Empty</p></div>
+ <div class="box"><p id="zinc">Empty</p></div>
+ <div class="box"><p id="iron">Empty</p></div>
+ <div class="box"><p id="hydrogen" class="splitter">Empty</p></div>
+ <div class="box"><p id="copper">Empty</p></div>
+ <div class="box"><p id="silver">Empty</p></div>
+ <div class="box"><p id="gold">Empty</p></div>
+ <div class="box"><p id="platinum">Empty</p></div>
+ </div>
+ <input type="text" id="input" placeholder="Type an element..." autocomplete="off">
+ </div>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
+let reactivitySeries = ['potassium', 'sodium', 'lithium', 'calcium', 'magnesium', 'aluminium', 'carbon', 'zinc', 'iron', 'hydrogen', 'copper', 'silver', 'gold', 'platinum'];
+
+function checkElement(input) {
+ input = input.toLowerCase();
+ for (let i = 0; i < reactivitySeries.length; i++) {
+ if (input === reactivitySeries[i]) {
+ document.getElementById(reactivitySeries[i]).innerHTML = reactivitySeries[i].charAt(0).toUpperCase() + reactivitySeries[i].slice(1);
+ document.getElementById(reactivitySeries[i]).style.backgroundColor = "#78FA5F"
+ document.getElementById('input').value = "";
+ reactivitySeries.splice(i, 1);
+ if (reactivitySeries.length == 0) {
+ reactivitySeries = ['potassium', 'sodium', 'lithium', 'calcium', 'magnesium', 'aluminium', 'carbon', 'zinc', 'iron', 'hydrogen', 'copper', 'silver', 'gold', 'platinum'];
+ for (let textBox = 0; textBox < reactivitySeries.length; textBox++) {
+ document.getElementById(reactivitySeries[textBox]).innerHTML = "Empty";
+ if (reactivitySeries[textBox] == "carbon" || reactivitySeries[textBox] == "hydrogen") {
+ document.getElementById(reactivitySeries[textBox]).style.backgroundColor = "#F0AA00"
+ } else {
+ document.getElementById(reactivitySeries[textBox]).style.backgroundColor = "#DDDDDD"
+ }
+ }
+ return
+ } else {
+ return
+ }
+ }
+ }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ document.getElementById('input').addEventListener('input', function(event) {
+ let valueEntered = this.value;
+ if (valueEntered !== "") {
+ checkElement(valueEntered);
+ }
+ });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,38 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+ background-color: rgb(221, 221, 221);
+}
+
+.container {
+ text-align: center;
+ font-family: "Roboto", sans-serif;
+}
+
+h1 {
+ font-size: 250%;
+}
+
+.box {
+ padding-left: 44%;
+}
+
+.splitter {
+ background-color: rgb(240, 170, 0);
+}
+
+p {
+ border-radius: 5px;
+ border-style: solid;
+ border-color: black;
+ border-width: 2px;
+ font-size: 140%;
+ width: 20%;
+}
+
+input {
+ text-align: center;
+ font-size: 150%;
+ border-radius: 5px;
+ border-style: none;
+}