Preset

index.html

@@ -31,6 +31,13 @@
                 <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">
@@ -69,6 +76,11 @@
         </div>
 
         <button id="reset">Reset</button>
+
+        <div style="text-align: left; font-size:1rem;position:absolute;bottom:0">
+            &copy; 2023 Oskar Boström
+        </div>
+
         <script src="script.js"></script>
 
     </body>

script.js

@@ -37,11 +37,33 @@ $(document).on('click', 'img.delete', function () {
     console.log(itemValue)
 });
 
+$('button#presetFootball').click(function () {
+    let ul = $('#itemlist');
+    console.log(ul)
+    items = [];
+    items.push('Oskar', 'Emil', 'Kim', 'Mads', 'Anton', 'Alexander')
+    // 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.val().length < 1) {
         $('#inputError').html("Add an item please");
-        return
+    } else {
-    }
         items.push($(input).val());
         let ul = $('#itemlist');
         let li = document.createElement('li');
@@ -55,6 +77,7 @@ function addItem() {
         $(input).val('');
         $('#inputError').html("")
     }
+}
 
 function displayResult() {
     if (items.length < 1) {