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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #181266

Unite Family inputs from keyboard only.which means user decide the inputs

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

SampleInput 1(from user side from keyboard)

{'surname' : 'Williams', 'city': 'Columbia'}

{'dish': 'cakes'}

{'pet': 'Rocky'}

Sample Output 1(inputs from user)

Mr and Mrs Williams went to a picnic in Columbia with a boy and a pet Rocky. Mrs Williams made a special dish "cakes"

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>