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:
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.
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!