Answer to Question #181264 in HTML/JavaScript Web Application for chandu

Question

Answer to Question #181264 in HTML/JavaScript Web Application for chandu

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #181264

Unite Family (*inputs must be from keyboard.its user choice.)

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

<!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">
      <title>User Input</title>
</head>
<body>
      <p>Enter values for the father object: </p>
      <input type="text" id="surname" placeholder="surname">
      <input type="text" id="city" placeholder="city">
      <p>Enter values for the mother object:</p>
      <input type="text" id="dish" placeholder="Favourite dish">
      <p>Enter values for the child object:</p>
      <input type="text" id="pet"placeholder="Child's Pet'"><br><br>
      <input type="button" value="Submit" id="button">
      <p id="output"></p>
</body>
<script>
       
      document.getElementById("button").addEventListener("click",()=>{
         let surname = document.getElementById("surname").value;
         let city = document.getElementById("city").value;
         let dish = document.getElementById("dish").value;
         let pet = document.getElementById("pet").value;

         let father = {
                 "surname": surname,
                 "city": city
         };
         let mother = {
               "dish":dish
         };
         let child = {
               "pet": pet
         };
        
         let family = {...father,...mother,...child};

         document.getElementById("output").innerHTML = `Mr and Mrs ${family.surname} went to a picnic in ${family.city} with a boy and a pet ${family.pet}. Mrs ${family.surname} made a special dish "${family.dish}".`;
        
      })
</script>
</html>