Update script.js

README.md

@@ -1,8 +1,8 @@
 # Randomizer Application
-How to install:
-1. Download the zip file
-2. Extract the folder and place it where you want it
-3. Open *index.html* in your browser
-4. Start using the app
+How to use:
+1. Visit the Github pages page for the app: https://oskar-mikael.github.io/randomize-app/
+2. Start adding items and randomize
+
+Feel free to come with suggestions for new features
 
 For quick access, save the website as a bookmark in you browser to quickly open it.

index.html

@@ -6,6 +6,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">
+        <script src="https://code.jquery.com/jquery-3.5.1.js"
+            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
         <link rel="icon" type="img/png" href="favicon.png">
         <title>Randomize App</title>
     </head>
@@ -17,7 +19,7 @@
                 Randomizer app
             </h1>
         </header>
-        
+
         <div id="grid">
 
             <div class="box1">
@@ -26,7 +28,16 @@
                 </h2>
                 <input id="input" autocomplete="off"><br>
                 <p id="inputError"></p>
-                <button type="submit" id="add">Add item</button>
+                <form>
+                    <button type="submit" id="add">Add item</button>
+                </form>
+                <h3 style="margin-top: 2rem;margin-bottom: 1rem;">
+                    Presets
+                </h3>
+                <div style="block">
+                    <button type="submit" id="presetFootball">Football </button>
+                </div>
+
             </div>
 
             <div class="box2">
@@ -40,13 +51,38 @@
                     Result:
                 </h2>
                 <h3 id="result"></h3>
-                <button id="submit">Randomize</button>
+                <form>
+                    <select id="selectNumber" class="dropdown">
+                        <option value="1">
+                            Pick 1
+                        </option>
+                        <option value="2">
+                            Pick 2
+                        </option>
+                        <option value="3">
+                            Pick 3
+                        </option>
+                        <option value="4">
+                            Pick 4
+                        </option>
+                        <option value="5">
+                            Pick 5
+                        </option>
+                    </select>
+                </form>
+                <button type="submit" id="submit">Randomize</button>
             </div>
 
         </div>
 
         <button id="reset">Reset</button>
+
+        <div style="text-align: left; font-size:1rem;position:fixed;bottom:0">
+            &copy; 2023 Oskar Boström
+        </div>
+
         <script src="script.js"></script>
+
     </body>
 
-</html>
+</html>

script.js

@@ -1,47 +1,101 @@
 let items = []
 let result = ""
-let input = document.querySelector("#input");
-
-
-input.addEventListener('keyup', function (event) {
-    if (event.keyCode === 13) {
-        event.preventDefault();
-        document.querySelector("#add").click();
-    }
+let input = $('#input');
 
+$(function () {
+    $('form').on('submit', function (e) {
+        e.preventDefault();
+    })
 })
-document.querySelector("#add").addEventListener('click', addItem);
-document.querySelector("#submit").addEventListener('click', displayResult);
-document.querySelector("#reset").addEventListener('click', reset);
+
+$(input).on('keypress', function (e) {
+    if (e.which == 13) {
+        addItem();
+    }
+});
+
+$('#add').on('click', function () {
+    addItem()
+})
+
+$('#reset').on('click', function () {
+    location.reload();
+});
+
+$('#submit').on('click', function () {
+    displayResult()
+});
+
+$(document).on('click', 'img.delete', function () {
+    let deletedItem = $(this).closest('li')
+    let itemValue = $(this).closest('li').text()
+    let index = items.indexOf(itemValue);
+    if (index != -1) {
+        items.splice(index, 1);
+    }
+    deletedItem.remove();
+    console.log(itemValue)
+});
+
+$('button#presetFootball').click(function () {
+    let ul = $('#itemlist');
+    console.log(ul)
+    items = [];
+    items.push('Oskar', 'Emil', 'Kim', 'Mads', 'Mads C', 'Michal',)
+    // let ul = $('#itemlist');
+    items.forEach(function (item) {
+        let li = document.createElement('li');
+        let img = document.createElement('img')
+        li.append(item);
+        ul.append(li);
+        li.append(img);
+        $(img).addClass('delete')
+        $(img).attr('src', 'close.png');
+        $(input).css('border', '1px solid black');
+        $(input).val('');
+        $('#inputError').html("")
+    })
+});
+
 
 
 
 function addItem() {
-    if (input.value.length < 1) {
-        document.querySelector("#inputError").innerHTML = "Add an item please";
+    if (input.val().length < 1) {
+        $('#inputError').html("Add an item please");
     } else {
-        items.push(document.querySelector("#input").value)
-        let ul = document.querySelector("#itemlist");
+        items.push($(input).val());
+        let ul = $('#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 = "";
+        let img = document.createElement('img')
+        li.append($(input).val());
+        ul.append(li);
+        li.append(img);
+        $(img).addClass('delete')
+        $(img).attr('src', 'close.png');
+        $(input).css('border', '1px solid black');
+        $(input).val('');
+        $('#inputError').html("")
     }
 }
 
-
 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
+        $('#result').html('Error: Add atleast 1 item')
+        $(input).css('border', '2px solid red');
+        return;
     }
-}
 
-function reset() {
-    window.location.reload();
+    let selectNumber = $('#selectNumber').val()
+    const shuffled = items.sort(() => 0.5 - Math.random());
+    result = shuffled.slice(0, selectNumber)
+
+    let resultText = '';
+    result.forEach(function (item) {
+        resultText += item + ', ';
+    });
+
+    $('#result').html(resultText.slice(0, -2))
+    $('#result').hide().fadeIn(1000);
+
 }

style.css

@@ -22,13 +22,14 @@ button {
     padding: 1rem 1.5rem;
     border-radius: 5px;
     background-color: burlywood;
-    outline: none;
     cursor: pointer;
+    border: none;
 }
 
 ol {
     padding: 0;
     margin-bottom: 5rem;
+    list-style-type: none;
 }
 
 ol>li {
@@ -43,4 +44,34 @@ ol>li {
 
 #reset {
     margin-top: 5rem;
+}
+
+.delete {
+    margin-left: 2rem;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.delete:hover {
+    color: rgb(0, 0, 0);
+}
+
+.dropdown {
+    height: 50px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding: 10px;
+    font-size: 18px;
+    font-family: 'Open Sans', sans-serif;
+    color: #555;
+    background-color: rgb(255, 255, 255);
+    background-image: none;
+    border: 1px solid rgb(41, 18, 18);
+}
+
+@media screen and (max-width:768px) {
+    #grid {
+        grid-template-columns: 1fr;
+    }
 }