[SOLVED] Using HTML, CSS and JavaScript Fetch to make a POST request to an API service

Using HTML, CSS and JavaScript Fetch to make a POST request to an API service

I have an assignment about using JavaScript API. I don't know anything about JavaScript APIs. Can anyone help me? I wrote the login page with html CSS code. But the second stage of the assignment:

When the login button on the login page is clicked, the values entered in the username and password inputs will be received with JavaScript and a request will be sent to the service here https://fakestoreapi.com/docs#a-login. When a response comes from this service, a redirection will be made to the dashboard page from the login page.

I'm very new to the software, I searched for a video to learn, but I couldn't find it for the login page. Can anyone help me.

I was able to create a login page using only html CSS.

Solution

Please check out this before anything else:

You said in your question that you code this using html and css, so there should be a <form> attribute and because you don't send a back-end server, so I guess this will do:

<!DOCTYPE html>
<html>

<head>
  <script>
    document.addEventListener("DOMContentLoaded", function() {


      loginform.addEventListener("submit", function(event) {
        event.preventDefault()
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const data = {
          username,
          password
        }
        fetch('https://fakestoreapi.com/auth/login', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          })
          .then(res => res.json())
          .then(json => console.log(json))
          .catch(err => console.log(err.message));
      });
    });
  </script>
</head>

<body>
  <form id="loginform">
    <input type="text" placeholder="username" id="username" name="username" value="mor_2314">
    <input type="text" placeholder="password" id="password" name="password" value="83r5^_">
    <input type="submit" value="login">
  </form>
</body>

</html>

The code provided here https://fakestoreapi.com/docs#a-login do not have header type method, remember to add it in. Once received the data you should change how the code should react in each of their corresponding section.

In the success case, it returns JSON format:

The failed case returns an error (and seemingly an HTML page), so I use .catch to catch it:

Hope this helps!