Responsive page, vanilla JS

@mauro1998 Thanks again for taking the time to go through my solution. I repaired the image too. The only thing that doesnt work now is submitting the form on "Enter" keypress. Somehow the function is not working. If you have any suggestions for this problem, please let me know.

@Hanka8 ok, I'm going to assume that you already know what is an api, what is a web server and how client/server architecture and communication over http works.

Now you just need to understand how the html <form> works: If you look at the html markup, this is how your form is defined:

<form class="nav" id="myForm" action="index.html" method="post">
  ...
</form>

The action attribute defines the action to be performed when the form is submitted. The method attribute specifies the HTTP method to be used when submitting the form data.

This implies that when the form is submitted it will make a http request. That's the default behavior of <form> element. In your case, since you are making the http request via AJAX (using the Javascript handler) to prevent reloading the page you'll have to prevent that default behavior.

This is your current code implementation:

// click handle for search button:
search.onclick = () => {
  ... // logic to get data from form and send request
}

// keypress handler for "Enter" key:
window.addEventListener("keypress", (keyPressed) => {
  if (keyPressed.key == "Enter") {
    search.click();
  }
});

Since you are using a form, this is not the best way to handle submission. This is what you can do:

1- Move the submission logic to a function and prevent the default behavior of the form:

function handleFormSubmit(event) {
  event.preventDefault(); // this is how you avoid page reload on submit
  const input = document.getElementById("inputUsername");
  
  if (input.value == "") {
    errorMessage.classList.remove("hidden");
    errorMessage.textContent = "Type a name"
  } else {
    errorMessage.classList.add("hidden");
    errorMessage.textContent = "No results";
    requestUser(input.value);
  }
}

2- Add a submit form handler and register the function:

const form = document.getElementById('myForm');

form.addEventListener('submit', handleFormSubmit);

3- Change search button type attribute to "submit":

<button id="search" type="submit" ...>

4- Remove the other handlers and the html attributes (action and method) of the form.

// remove this code...
search.onclick = () => { ... }
window.addEventListener("keypress", (keyPressed) => { ... });

// html cleanup
<form class="nav" id="myForm">...</form>

At this point you should be able to search using the button or the Enter key on the input because both will trigger the submit event on the form.

Hope it helps.

@mauro1998 Wow, many thanks for your answer! I wouldnt figure this on my own. After reading through your answer now It seems clear to me. I repaired my solution and finally it works as it should. Thansk again mate!

@mauro1998 Thanks a lot for your answer! Next time, I will keep falsy values at mind. I repaired my solution according to your suggestions and now it works.