oskarb/randomize-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Oskar-Mikael
2021-01-26 16:58:56 +01:00
commit 22d623e9e3
4 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

52
index.html Normal file
View File

@@ -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>

47
script.js Normal file
View File

@@ -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();
}

46
style.css Normal file
View File

@@ -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;
}