DEV Community

anderu
anderu

Posted on

Today I done a small JS challenge

JS challenge screenshot

// /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

Enter fullscreen mode Exit fullscreen mode

// /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
Enter fullscreen mode Exit fullscreen mode

// 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)
Enter fullscreen mode Exit fullscreen mode
  • 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!'
} 
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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)}!`)
Enter fullscreen mode Exit fullscreen mode

Andrew Tan

Top comments (2)

Collapse
 
moopet profile image
Ben Sinclair

This doesn't have anything to do with Tailwind, does it?

Collapse
 
anderutan profile image
anderu

Hi @agramofpro , thank you so much for your tips!