sortttaaa

<!DOCTYPE html>

<html>
    <head>

    </head>
    <body>
        <h1>Fruit salad</h1>
        <select id="sort-by">
            <option value="" selected>Sort by price</option>
            <option value="byPriceAscend">Lowest first</option>
            <option value="byPriceDescend">Highest first</option>
        </select>
        <div id="fruits"></div>
        <form id="fruits-form">
            <input type="text" name="newFruit" placeholder="Add Fruit"><br>
            <input type="number" name="newPrice" placeholder="Add Price"><br>
            <button>Submit</button>
        </form>
        <script src="appi.js"></script>
    </body>
</html>

appi.js:
document.querySelector('#sort-by', '#byPriceAscend').addEventListener('change', function(e) {
    fruits.sort(function(a, b) {
        return parseFloat(a.price) - parseFloat(b.price);
    });
    renderFruits(fruits, 'change')
})


document.querySelector('#sort-by', '#byPriceDescend').addEventListener('change', function(e) {
    fruits.sort(function(a, b) {
        return parseFloat(b.price) - parseFloat(a.price);
    });
    renderFruits(fruits, 'change')
})