Question 364095 in Javascript Question posted in
A very good W3school tutorial can be found here.

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.

Tags:

2

Answers


  1. 0

    This is how I would implement it

    myform.addEventListener("submit", function(evt) {
    evt.preventDefault();
    let fields = this.querySelectorAll("[name]");
    let obj = {};
    for (let field of fields) {
        obj[field.name] = field.value;
    }
    fetch('https://fakestoreapi.com/auth/login',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body:JSON.stringify(obj)
        })
            .then(res=>res.json())
            .then(json=>console.log(json))
});
    <form id="myform">
    <input type="text" placeholder="username" name="username" value="mor_2314">
    <input type="password" placeholder="password" name="password" value="83r5^_">
    <input type="submit" value="login">
</form>

    I created a form and a submit event for it. I preventDefault in the submit event so we don’t do a postback. We also specify that our values are JSON and convert our collected values into JSON.

    Login or Signup to reply.
  2. 0

    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:
    enter image description here

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

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search