commit 22d623e9e3d900f1fcace84f48e12f1cc38f08c1 Author: Oskar-Mikael Date: Tue Jan 26 16:58:56 2021 +0100 Initial commit diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..1fc3feb Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..27204a6 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + Randomize App + + + + +
+

+ Randomizer app +

+
+ +
+ +
+

+ Add item to randomize +

+
+

+ +
+ +
+

List of items:

+
    +
+
+ +
+

+ Result: +

+

+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..cd8ae5d --- /dev/null +++ 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(); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..ebc1927 --- /dev/null +++ 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; +} \ No newline at end of file