Update script.js

index.html

@@ -29,8 +29,15 @@
                 <input id="input" autocomplete="off"><br>
                 <p id="inputError"></p>
                 <form>
-                <button type="submit" id="add">Add item</button>
+                    <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">
@@ -45,13 +52,35 @@
                 </h2>
                 <h3 id="result"></h3>
                 <form>
-                <button type="submit" id="submit">Randomize</button>
+                    <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>

script.js

@@ -30,13 +30,33 @@ $(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) {
+    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("")
+    })
+});
+
 
 
 
@@ -52,7 +72,7 @@ function addItem() {
         ul.append(li);
         li.append(img);
         $(img).addClass('delete')
-        $(img).attr('src', '/close.png');
+        $(img).attr('src', 'close.png');
         $(input).css('border', '1px solid black');
         $(input).val('');
         $('#inputError').html("")
@@ -63,10 +83,19 @@ function displayResult() {
     if (items.length < 1) {
         $('#result').html('Error: Add atleast 1 item')
         $(input).css('border', '2px solid red');
-    } else {
+        return;
-        result = items[Math.floor(Math.random() * items.length)];
-        $('#result').html(result)
-        $('#result').hide().fadeIn(1000);
     }
-}
 
+    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

@@ -56,6 +56,20 @@ ol>li {
     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;