My CRUD (Create, Read, Update, Delete) Program and the CODE JavaScript and HTML

Thumbnail

CRUD PROGRAM



What would you like to do?






CRUD Code


                        <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>lowkixd.com</h1>
        <label>My Arrays: </label>
        <div id="showArray"></div>
        
        <br>
        <label>Your Output:</label>
        <div id="myOutput"></div>
        <br>
        <p>What would you like to do?</p>
        <br>
        <br>
        <label>Update:</label>
        <input id="updateIndex" placeholder="Update">
        <hr>
        <label>Create:</label>
        <input id="createInput" placeholder="Create">
        <button onClick="createItem()">Create</button>
        <hr>
        <label>Read:</label>
        <input id="readInput" placeholder="Read. Input number">
        <button onClick="readItem()">Read</button>
        <br>
        <button onClick="updateItem()">Update</button>
        <hr>
        <label>Delete:</label>
        <input id="deleteIndex" placeholder="Delete">
        <button onClick="deleteItem()">Delete</button>
        <hr>
        
        <script>
        let myArray = ["amogus", "sussy", 67, 420];
    document.getElementById("showArray").innerHTML = (myArray.join(", "));
            
            function createItem(){
        let createValue = document.getElementById("createInput").value;
        myArray.push(createValue);
        
        document.getElementById("showArray").innerHTML = myArray.join(", ");
        document.getElementById("createInput").value = "";
    }
            function readItem(){
        let readInput = document.getElementById("readInput").value -1;
        let result = myArray[readInput];
        document.getElementById("myOutput").innerHTML = result;
        //document.getElementById("readInput").value = "";
    }
          function updateItem(){
        let readIndex = document.getElementById("readInput").value -1;
        let updateIndex = document.getElementById("updateIndex").value;
        myArray[readIndex] = updateIndex;
        document.getElementById("showArray").innerHTML = myArray.join(", ");
    }  
            function deleteItem(){
        let deleteIndex = document.getElementById("deleteIndex").value -1;
        myArray.splice(deleteIndex, 1);
        document.getElementById("showArray").innerHTML = myArray.join(", ");
        document.getElementById("deleteIndex").value = "";
    }
        </script>
    </body>
</html>