Initial commit

2021-01-26 16:58:56 +01:00
commit 22d623e9e3
4 changed files with 145 additions and 0 deletions
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
+        <link rel="icon" type="img/png" href="favicon.png">
+        <title>Randomize App</title>
+    </head>
+
+    <body>
+
+        <header>
+            <h1>
+                Randomizer app
+            </h1>
+        </header>
+        
+        <div id="grid">
+
+            <div class="box1">
+                <h2>
+                    Add item to randomize
+                </h2>
+                <input id="input" autocomplete="off"><br>
+                <p id="inputError"></p>
+                <button type="submit" id="add">Add item</button>
+            </div>
+
+            <div class="box2">
+                <h2>List of items:</h2>
+                <ol id="itemlist">
+                </ol>
+            </div>
+
+            <div>
+                <h2 class="result">
+                    Result:
+                </h2>
+                <h3 id="result"></h3>
+                <button id="submit">Randomize</button>
+            </div>
+
+        </div>
+
+        <button id="reset">Reset</button>
+        <script src="script.js"></script>
+    </body>
+
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,47 @@
+let items = []
+let result = ""
+let input = document.querySelector("#input");
+
+
+input.addEventListener('keyup', function (event) {
+    if (event.keyCode === 13) {
+        event.preventDefault();
+        document.querySelector("#add").click();
+    }
+
+})
+document.querySelector("#add").addEventListener('click', addItem);
+document.querySelector("#submit").addEventListener('click', displayResult);
+document.querySelector("#reset").addEventListener('click', reset);
+
+
+
+function addItem() {
+    if (input.value.length < 1) {
+        document.querySelector("#inputError").innerHTML = "Add an item please";
+    } else {
+        items.push(document.querySelector("#input").value)
+        let ul = document.querySelector("#itemlist");
+        let li = document.createElement('li');
+        li.appendChild(document.createTextNode(input.value));
+        ul.appendChild(li)
+        document.querySelector("#input").style.border = "2px solid black";
+        document.querySelector("#input").value = '';
+        document.querySelector("#inputError").innerHTML = "";
+    }
+}
+
+
+function displayResult() {
+    if (items.length < 1) {
+        document.querySelector("#result").innerHTML = "Error: Add atleast 1 item"
+        document.querySelector("#input").style.border = "2px solid red"
+    } else {
+        result = items[Math.floor(Math.random() * items.length)];
+        document.querySelector("#result").innerHTML = result
+    }
+}
+
+function reset() {
+    window.location.reload();
+}
--- a/style.css
+++ b/style.css
@@ -0,0 +1,46 @@
+body {
+    text-align: center;
+    background-color: antiquewhite;
+    font-size: 150%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+input {
+    height: 2rem;
+    width: 20rem;
+    font-size: 110%;
+    padding: 1rem 0.5rem;
+}
+
+h1 {
+    padding: 2rem;
+}
+
+button {
+    font-size: 100%;
+    margin-top: 1rem;
+    padding: 1rem 1.5rem;
+    border-radius: 5px;
+    background-color: burlywood;
+    outline: none;
+    cursor: pointer;
+}
+
+ol {
+    padding: 0;
+    margin-bottom: 5rem;
+}
+
+ol>li {
+    padding-bottom: 1rem;
+    text-align: center;
+}
+
+#grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+#reset {
+    margin-top: 5rem;
+}