JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<body>
    <h1>Javascript Objects</h1>
    <div><button onclick="goPressed()">Go</button></div>
    <h2>Output</h2>
    <div id="output"></div>
</body>

CSS

body {
    margin: 10px;
    font-family: Helvetica;
}
h1 {
    font-size: 140%;
    margin-bottom: 20px;
}
h2 {
    font-size: 110%;
    margin: 10px 0;
}

JavaScript

//test object

function goPressed() {

    // Input
    var listOfPhones = [
        {
        brand: "Apple",
        model: "iPhone 4S",
        price: 23000},
    {
        brand: "HTC",
        model: "One X",
        price: 21000},
    {
        brand: "Samsung",
        model: "Galaxy S3",
        price: 25000}
    ];

    // pass list of object to function then return object which is the most expensive
    var phone = mostExpensive(listOfPhones);

    // Output
    $('#output').html("The most expensive phone is: " + phone.brand + " : " + phone.model);

}

function mostExpensive(phones) {
    var result = phones[0];
    for (i = 1; i < phones.length; i++) {
        result = result.price < phones[i].price ? phones[i] : result;
    }
    return result;
}