4th November 2021 17.00

Adion52330 · Nov 4, 2021 · a097e55 · a097e55
commit a097e55
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tossing Project</title>
+</head>
+<body>
+    <section class="main">
+        <h1 id="num">1</h1>
+        <button class="neon_btn" id="btn">Toss</button>
+    </section>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+let num_array = [1, 2, 3, 4, 5, 6];
+let display = document.getElementById("num");
+
+// get random digit from the array
+let num;
+function getRandomDigit() {
+    return num = Math.floor(Math.random() * num_array.length);
+}
+
+document.getElementById('btn').addEventListener('click', () => {
+    getRandomDigit();
+    display.innerHTML = num_array[num];
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,61 @@
+body {
+    background-color: rgb(82, 82, 255);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.main {
+    width: 100%;
+    height: 100%;
+    background-color: rgb(255, 255, 255);
+    border-radius: 10px;
+    padding: 10px;
+    background-color: darkblue;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow:
+    0 0 60px 30px #fff,  /* inner white */
+    0 0 100px 60px #f0f, /* middle magenta */
+    0 0 140px 90px #0ff; /* outer cyan */
+}
+
+#btn {
+    background-color: gold;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 5px;
+    box-shadow: inset 0 0 50px #fff,      /* inner white */
+    inset 20px 0 80px #f0f,   /* inner left magenta short */
+    inset -20px 0 80px #0ff,  /* inner right cyan short */
+    inset 20px 0 300px #f0f,  /* inner left magenta broad */
+    inset -20px 0 300px #0ff, /* inner right cyan broad */
+    0 0 50px #fff,            /* outer white */
+    -10px 0 80px #f0f,        /* outer left magenta */
+    10px 0 80px #0ff;
+}
+#btn:hover {
+    background-color: goldenrod;
+    color:white;
+}
+#btn:active {
+    background-color: gold;
+    box-shadow: 0px 1px #666;
+    transform: translateY(1px);
+}
+
+.main > h1 {
+    font-size: 40px;
+    font-weight: bold;
+    color: rgb(0, 255, 213);
+    text-align: center;
+    margin-bottom: 50px;
+    transition: all 0.2s ease-in-out;
+}