From 22d623e9e3d900f1fcace84f48e12f1cc38f08c1 Mon Sep 17 00:00:00 2001 From: Oskar-Mikael Date: Tue, 26 Jan 2021 16:58:56 +0100 Subject: [PATCH] Initial commit --- favicon.png | Bin 0 -> 1372 bytes index.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 145 insertions(+) create mode 100644 favicon.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..1fc3feb097c26687a2923364c2b0bba7c3eb2a46 GIT binary patch literal 1372 zcmV-i1*7_jP)*=xYKdavC7Ku?F!4o=7?cwk)0KGra)a2fHfVzf{fS3P=kA9#HL@P?*bDBOhvH?)WX1g3fO!DSDubGZaQAJn_|DO~TPq+Z z2ta3ll%A+D#Z&DkvH|dAto7S9NRfQLa23vWLQy{ac6wN|d@($|48l>^_yN7KM6#>T z*D-kjDQbqEZ3o`omYj-_>m@IgEQ5YbAuwzQ&8N7P2X}lkc>t(Mt4Up~d)lCP0RHZv zzjpwD98LQto53>!)V(+#xM}FUv>3Yj(g6$;_8$cxY*+y3sbN>?Nv z&zbH_pR;#wB$J=9GU0Wtyi$$O7wW-N*HPC{11v<0_Gh~u3C9iPheMlzbvFi}Zo>kQ z?}AbVVB{ta&-*=({a;N`-A{iZkz`47!Vv&GkXTSxd!@U6u!0vy2HdRrvf1q zr1Vnd<6TJ7&9!HbJ2=4HnGn#Sv>2_tgpgmu_B`dnL-n|))z0AA63Dn60XX<` z^5)bNhVz#x4El*%Hl}o+0h&|g*+rmfOE>U)#XsbwR4kQmLB0<_>v1S4f^!$4cL3Y<2pcB-hDq44u-xIlwvb;tn)WRdI*f!6 z)V**SNvS6#0||?;VG=e>;+8W?s{2$sS}@!kdoSluP+V6p1;r+ z!5i@rnxc3iUF+0+YMZ92+bX}?ab!GK6FvkDY=an+~noON*5 eSDAADSoR+k6Xmj-KZ}(B0000 + + + + + + + + + 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