Today I done a small JS challenge
Tags: webdev, javascript, beginners, programming
Published: 2024-01-03 12:10:57


![JS challenge screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9cnvy0oglf6aotzlwwc.png)

// /properties/propertyForSaleArr.js data
```js
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
```js
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

```js
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:**

```js
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.  

```js
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.

```js
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.

```js
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