Feedback details cts

Feedback Details HTML & JavaScript Program

Bymadwithcode

Get the feedback details from the user and add it to an array. Display the feedback details in the format as shown in the screenshot.

Concept covered: functions, arrays, control structures and loops, String

Problem Specification:

  1. File name should be index.html.
  2. Create an external script file named script.js.
  3. Use h2 tag for the title of Feedback Details.
  4. Display all the feedbacks followed by a new line separator after printing the above title.
  5. Refer Sample screenshot for more specifications.
  6. Include the script file in html page.
  7. The “Add Feedback” button will add the feedback details to an array.
  8. The “View Feedback” button will display all the feedbacks (multiple feedbacks) in the format as shown in the screenshot in the result div.
  9. Include the below functions/methods in the java script file
 Function NameDescription
addFeedback()It is used to add the feedback details to an array. After clicking the Add Feedback button, clear the text area and display the response message as “Successfully Added Feedback Details!”.
displayFeedback()It is used to display the feedback details. After displaying the feedback details clear the array.

index.html

<html>
	<head>
    <script src="script.js" type="text/javascript"> </script>
  </head>
  <body> 
    <!-- Fill code here -->
    <h1>Feedback for the ART OF LIVING SESSION</h1>
    
    Enter the Feedback:<textarea id="feedback"></textarea>
    <button id="create" onclick="addFeedback()">Add Feedback</button>
    <button id="view" onclick="displayFeedback()">View Feedback</button>
    
    
    <div id="result"></div>
    
  </body>
</html>

Script.js

var feedbacks=[];
function addFeedback(){
 //Fill the required logic 
 const newFeedback=document.getElementById("feedback").value;
 feedbacks.push(newFeedback);
 console.log(feedbacks);
 document.getElementById("feedback").value="";
 document.getElementById("result").innerHTML="<h2>Feedback Details</h2><b>Successfully Added Feedback Details!</b>";
}

function displayFeedback(){
    //Fill the required logic
    document.getElementById("result").innerHTML="<h2>Feedback Details</h2>";
    for (var i = 0; i < feedbacks.length ; i++) {
        document.getElementById("result").innerHTML += "Feedback "+(i+1)+"<br>"+feedbacks[i]+"<br>";
    }
    feedbacks=[];
}

Similar Posts