Add functionality for deleting list items

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>
@@ -26,7 +28,9 @@
                 </h2>
                 <input id="input" autocomplete="off"><br>
                 <p id="inputError"></p>
+                <form>
                 <button type="submit" id="add">Add item</button>
+                </form>
             </div>
 
             <div class="box2">
@@ -40,13 +44,16 @@
                     Result:
                 </h2>
                 <h3 id="result"></h3>
-                <button id="submit">Randomize</button>
+                <form>
+                <button type="submit" id="submit">Randomize</button>
+                </form>
             </div>
 
         </div>
 
         <button id="reset">Reset</button>
         <script src="script.js"></script>
+        
     </body>
 
 </html>

script.js

@@ -1,47 +1,72 @@
 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)
+});
+
 
 
 
 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"
+        $('#result').html('Error: Add atleast 1 item')
+        $(input).css('border', '2px solid red');
     } else {
         result = items[Math.floor(Math.random() * items.length)];
-        document.querySelector("#result").innerHTML = result
+        $('#result').html(result)
+        $('#result').hide().fadeIn(1000);
     }
 }
 
-function reset() {
-    window.location.reload();
-}

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 {
@@ -44,3 +45,19 @@ ol>li {
 #reset {
     margin-top: 5rem;
 }
+
+.delete {
+    margin-left: 2rem;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.delete:hover {
+    color: rgb(0, 0, 0);
+}
+
+@media screen and (max-width:768px) {
+    #grid {
+        grid-template-columns: 1fr;
+    }
+}