JSON APIs and Ajax: Post Data with the JavaScript XMLHttpRequest Method

What is your hint or solution suggestion?
Use JavaScript's XMLHttpRequest method to post data to a server.The open method initializes the request as a "POST" to the given URL i.e. of external resource, and uses the true Boolean to set it asynchronous. The setRequestHeader method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the open method, but before the send method. The two parameters are the name of the header and the value to set as the body of that header. Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 201 means it was a successful request.Transform the data from server's response using JSON.parse ().Set this data to the desired HTML element.Transform the JSON data to string format using JSON.stringify().Finally, the send method sends the request with the body value, which the userName key was given by the user in the input field.

  document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('sendMessage').onclick = function(){

      const userName = document.getElementById('name').value;
      const url = 'https://jsonplaceholder.typicode.com/posts';
      // Add your code below this line

     const xhr = new XMLHttpRequest();
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
     xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 201){
        const serverResponse = JSON.parse(xhr.response);
        $('.message')[0].textContent = serverResponse.userName + serverResponse.suffix;
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });

      // Add your code above this line

  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  h1 {
    font-size: 2em;
    font-weight: bold;
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;

<h1>Cat Friends</h1>
<p class="message box">
  Reply from Server will be here
  <label for="name">Your name:
    <input type="text" id="name"/>
  <button id="sendMessage">
    Send Message

Challenge: Post Data with the JavaScript XMLHttpRequest Method

Link to the challenge:

Hello there.

Thank you, for your contribution. For future contributions, please wrap your solution within :

code goes here...

Also, when you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).