Today I done a small JS challenge

// /properties/propertyForSaleArr.js data

const propertyForSaleArr = [
    {
        propertyLocation: 'Kensington, London',
        priceGBP: 890000,
        roomsM2: [14, 18, 14, 10, 6],
        comment: 'Highly desirable location in stunning scenery!',
        image: 'cottage.jpg'
    },
    {
        propertyLocation: 'Wirral, Liverpool',
        priceGBP: 650000,
        roomsM2: [18, 16, 15, 14, 17, 19, 9, 8],
        comment: 'Astonishing view with a modern finish!',
        image: 'desres.jpg'
    },
    {
        propertyLocation: 'Beach, Brighton',
        priceGBP: 420000,
        roomsM2: [5],
        comment: 'Beautiful interior and a spacious room.',
        image: 'hut.jpg'
    },
    {
        propertyLocation: 'Highlands, Scotland',
        priceGBP: 550000,
        roomsM2: [6, 12, 11, 5],
        comment: 'Lots of potential, snug, a must see!',
        image: 'shed.jpg'
    }
]

export default propertyForSaleArr

// /properties/placeholderPropertyObj.js data

const placeholderPropertyObj = {
    propertyLocation: '1 Joe Bloggs street',
    priceGBP: 100000,
    roomsM2: [16, 12, 6, 11, 5],
    comment: 'This is the description',
    image: 'placeholder.jpg'
}

export default placeholderPropertyObj

// index.js code

import propertyForSaleArr from '/properties/propertyForSaleArr'
import placeholderPropertyObj from '/properties/placeholderPropertyObj'

function getPropertyHtml(propertyArr = [placeholderPropertyObj]) {
    return propertyArr.map(property => {
        const { propertyLocation, priceGBP, roomsM2, comment, image} = property
        const totalRoomSizeM2 = roomsM2.reduce((total, current) => total + current)
        return `
            <section class="card">
                <img src="/images/${image}">
                <div class="card-right">
                    <h2>${propertyLocation}</h2>
                    <h3>${priceGBP}</h3>
                    <p>${comment}</p>
                    <h3>${totalRoomSizeM2} m&sup2;</h3>
                </div>
            </section>` 
    }).join('')
}

document.getElementById('container').innerHTML = getPropertyHtml(propertyForSaleArr)

In this challenge, getPropertyHtml function will take an array parameter and the default parameter is [placeholderPropertyObj].
In the function I use .map() method to iterate the array of object and object keys is set on const { propertyLocation, priceGBP, roomsM2, comment, image} = property.
.reduce() method is use to calculate the total room size in meter square.
Then function will return the information in the html boilerplate to render out the image as shown on the top of this post. Lastly, .join() method use to remove the comma at the end of the post.

- Beside that, there are few learning of the day:

const score = 50

// Do this
const mark = score < 51 ? 'You get C!' 
    : score < 80 ? 'You get B!' 
    : 'You get A!'

console.log(mark)

// Instead of this
let mark = ''

if (score < 51) {
    mark = 'You get C!'
}
else if(score < 80) {
    mark = 'You get B!'
}
else {
    mark = 'You get A!'
}

First is ternary operator, return value if the first condition before ? is true else check second condition until the end.

function menuOfTheDay(restaurantName, ...menuItems) {
  menuItems.forEach((item) => console.log(`Today menu at restaurant ${restaurantName} is ${item}`))
}
menuOfTheDay('Good Food', 'Fried Chicken', 'Steam Fish', 'ABC Soup')
>>> Today menu at restaurant Good Food is Fried Chicken
>>> Today menu at restaurant Good Food is Steam Fish
>>> Today menu at restaurant Good Food is ABC Soup

Second is rest parameter (...rest) which is useful to catch the rest of the arguments and return in an array. But the rest parameter must be the last parameter.

const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b]
console.log(c)
>> [1, 2, 3, 4, 5, 6]

Third is spread operator ...array can be use to expand and joining arrays.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
}

const {first, second, third, forth} = life

console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)

Andrew Tan

Blog

Today I done a small JS challenge

anderu

Join Our Newsletter. No Spam, Only the good stuff.

Related