Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
            <input id="artist"type="text" name="artist" placeholder="artist">
            <input type="text" placeholder="name" id="name">
            <input type="text" placeholder="label" id="label">
            <input type="number" placeholder="released" id="released">
            <input type="text" placeholder="country" id="country">
            <input type="number" placeholder="quantity" id="quantity">
            <select id="mediaCondition">
                <option value="Mint (M)">Mint (M)</option>
                <option value="Near Mint (NM or M-)">Near Mint (NM or M-)</option>
                <option value="Very Good Plus (VG+)">Very Good Plus (VG+)</option>
                <option value="Very Good (VG)">Very Good (VG)</option>
                <option value="Good Plus (G+)">Good Plus (G+)</option>
                <option value="Good (G)">Good (G)</option>
                <option value="Fair (F)">Fair (F)</option>
                <option value="Poor (P)">Poor (P))</option>
            </select>
            <select id="sleeveCondition">
                <option value="Mint (M)">Mint (M)</option>
                <option value="Near Mint (NM or M-)">Near Mint (NM or M-)</option>
                <option value="Very Good Plus (VG+)">Very Good Plus (VG+)</option>
                <option value="Very Good (VG)">Very Good (VG)</option>
                <option value="Good Plus (G+)">Good Plus (G+)</option>
                <option value="Good (G)">Good (G)</option>
                <option value="Fair (F)">Fair (F)</option>
                <option value="Poor (P)">Poor (P))</option>
            </select>
            <input type="number" placeholder="price" id="price">
        <input type="submit" id="submit">
    </div>
    <h3>Delete</h3>
        <input type="text" id="deletebyname" placeholder="Name of record you want to delete">
        <button id="delete">Delete</button>
    <h3>Sell</h3>
    <input type="text" id="sellbyname" placeholder="Name of record you want to sell">
    <button id="sell">Sell</button>
    <h3>Kõik tulemused:</h3>
    <button id="refresh">Uuenda:</button>
    <ul id="tulemused"></ul>
    <h3>Kuva tooted:</h3>
    <ul id="tooted"></ul>
</body>
<script>

    window.onload = function(){
        //Lühendan d.getElementById:
        const grab = id => document.getElementById(id)
        let buttonId

        //Targetin välju..
        let artist=grab("artist"), name=grab("name"), label=grab('label'), released=grab('released'),
            country=grab('country'), mediaCondition=grab('mediaCondition'), sleeveCondition=grab('sleeveCondition')
        //...Ja kuulan submit-i
        grab('submit').addEventListener("click",function(event){
            event.preventDefault()
            fetch('http://localhost:3456/uus', {
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    artist: artist.value,
                    name: name.value,
                    label: label.value,
                    released: released.value,
                    country: country.value,
                    mediaCondition: mediaCondition.value,
                    sleeveCondition: sleeveCondition.value,
                    quantity: quantity.value,
                    price: price.value,

                })
            })
                .then(res => res.json())
                .then(data => {alert('lisatud!')})
                .catch(e => alert(e))
            }
        )
        //displaying all records
        //helper funtions
        function createNode(element) {
            return document.createElement(element); // Create the type of element you pass in the parameters
        }
        function createTextNode(text) {
            return document.createTextNode(text); // Create the button text node
        }
        function append(parent, el) {
            return parent.appendChild(el); // Append the second element to the first one
        }
        const ul = document.getElementById('tooted'); // Get the list where we will place our records

            fetch('http://localhost:3456/k6ik')
                .then(res => res.json())
                .then(function(data) {
                    let records = data; // Get the results
                    return records.map(function(record) { // Map through the results and for each run the code below
                        let li = createNode('li'), //  Create the elements we need
                            span = createNode('span'),
                            button = createNode('BUTTON'),

                            t = createTextNode("Lisa ostukorvi");
                        span.innerHTML = `Artist: ${record.artist} Name: ${record.name} Label: ${record.label} Year: ${record.released}
                                            Country: ${record.country} Quantity: ${record.quantity} Media condition: ${record.mediaCondition}
                                            Sleeve condition: ${record.sleeveCondition} Price: ${record.price} €`; // Make the HTML of our span to be the first and last name of our author
                        button.setAttribute("id",`${record._id}`)//add mongo id to button id

                        //button.setAttribute("onclick","idListener(this.id);")
                        button.setAttribute("class","buttonz")
                        append(li, span);
                        append(ul, li);
                        append(li, button);
                        append(button, t);

                        let buttons = document.getElementsByClassName('buttonz');
                        console.log(buttons)
                        for (let i = 0; i < buttons.length; i++) {
                            buttons[i].addEventListener('click', function() {
                                buttonId=this.id
                                console.log(buttonId)

                                grab(buttonId).addEventListener('click', function(e) {
                                    console.log(buttonId)

                                    fetch("http://localhost:3456/"+buttonId, {
                                        body: JSON.stringify({_id: buttonId}),
                                        method: "post",
                                        headers: {
                                            'Accept': 'application/json',
                                            'Content-Type': 'application/json'
                                        },
                                    })
                                        .then(res => res.json())
                                        .then(data => alert(data))
                                        .catch(e => alert(e))
                                })
                            });
                        }

            })

        const ulTulemused = document.getElementById('tulemused'); // Get the list where we will place our records
        grab('refresh').addEventListener('click', function(e) {
            fetch('http://localhost:3456/k6ik')
                .then(res => res.json())
                .then(function (data) {
                    let records = data; // Get the results
                    return records.map(function (record) { // Map through the results and for each run the code below
                        let li = createNode('li'), //  Create the elements we need
                            span = createNode('span');
                        span.innerHTML = `Artist: ${record.artist} Name: ${record.name} Label: ${record.label} Year: ${record.released}
                                            Country: ${record.country} Quantity: ${record.quantity} Media condition: ${record.mediaCondition}
                                            Sleeve condition: ${record.sleeveCondition} Price: ${record.price} €`; // Make the HTML of our span to be the first and last name of our author
                        append(li, span);
                        append(ulTulemused, li);
                    })
                })
        })
        grab("delete").addEventListener("click", function(e){
            fetch("http://localhost:3456/"+grab("deletebyname").value, {
                body: JSON.stringify({name: grab("deletebyname").value}),
                method: "delete",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
            })
                .then(res => res.json())
                .then(data => alert(data))
                .catch(e => alert(e))
        })

        grab("sell").addEventListener("click", function(e){
            fetch("http://localhost:3456/"+grab("sellbyname").value, {
                body: JSON.stringify({name: grab("sellbyname").value}),
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
            })
                .then(res => res.json())
                .then(data => alert(data))
                .catch(e => alert(e))
        })
    }

</script>
</html>