Answer to Question #204232 in HTML/JavaScript Web Application for sai

Question

Answer to Question #204232 in HTML/JavaScript Web Application for sai

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #204232

Unite Family

Given three objects

father, mother, and child, write a JS program to concatenate all the objects into the family object using the spread operator.Input

The first line of input contains an object father
The second line of input contains an object mother
The third line of input contains an object child

Output

The output should be a single line string with the appropriate statement as shown in sample outputs

Constraints

Keys of the objects should be given in quotes

Sample Input

{'surname' : 'Jones', 'city': 'Los Angeles'}

{'dish': 'puddings'}

{'pet': 'Peter'}

Sample Output

Mr and Mrs Jones went to a picnic in Los Angeles with a boy and a pet Peter. Mrs Jones made a special dish "puddings"

Expert's answer

script.js

// Our family members
const father = { 'surname' : 'Jones', 'city': 'Los Angeles' };


const mother = { 'dish': 'puddings' };


const child = { 'pet': 'Peter' };


const family = { 
   // put family members in common object family
   ...father, 
   ...mother, 
   ...child,
   // return sample string
   get returnString(){
      return `Mr and Mrs ${family.surname} went to a picnic in ${family.city} with a boy and a ${getKeyByValue(family, family.pet)} ${family.pet}. Mrs ${family.surname} made a special ${getKeyByValue(family, family.dish)} "${family.dish}"`
   }
};
//show in console result object family with a sample string
console.log(family.returnString);


// get key from object. For exapmle (dish) - key; ("puddings") - value;
function getKeyByValue(object, value) {
   return Object.keys(object).find(key => object[key] === value);
}

Index.html

<!DOCTYPE html>
<html lang="en">


<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <div>
      <h1>Hello <span>JavaScript</span></h1>
   </div>
<script src="script.js"></script>
</body>


</html>

Style.css

body{
   background-color: #333333FF;
   color: #fff;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


h1, h4{
   color: #FFFFFFFF;
}


span{
   color: #F9EF4DFF;
}


div{
   margin: 40px 0px 0px 40px;
}
.active{
   color: #F9EF4DFF;
}