Hallo,
meine Aufgabe:
wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!
Omg Leute ich habe schon wieder die Frage im Bereich "Java" hochgeladen.. Sryy! Ich kenne mich im Forum nicht aus!
MfG
MrOsmo
meine Aufgabe:
wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./script.js"></script>
</head>
<body>
<form class="form">
<input id="loginInput" type="text" placeholder="Login">
<input id="passwordInput" type="password" placeholder="Password">
<button id="sendButton">Send</button>
<button id="loginButton">Login</button>
<p class="p">If you want to delete an Item press the button "Delete" twice to confirm it!</p>
<div id="userTable"></div>
</form>
</body>
</html>
Javascript:
// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");
const loginButton = document.getElementById("loginButton");
// FETCH
const url = "https://crudcrud.com/api/bd869993491343229a7e663ecbd41211/todos";
const dataRender = (array) => {
const getHtml = document.getElementById("userTable");
if (array === undefined) {
console.log("Loading results...");
} else {
let dataList = array.map((item) => {
return `
<div class="users">
<p>${item.login}</p>
<button onclick="deleteRequest('${item._id}')">Delete</button>
</div>
`;
});
getHtml.innerHTML = dataList.join("");
}
};
const fetchData = async () => {
try {
const response = await fetch(url);
const data = await response.json();
dataRender(data);
} catch (error) {
console.error(error);
}
};
fetchData();
// POST_REQUEST
const postRequest = async () => {
const data = {
login: login.value,
password: password.value,
isLogin: false,
};
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
const results = await response.json();
console.log(results.message);
fetchData();
} catch (error) {
console.error(error);
}
};
button.addEventListener("click", () => {
postRequest();
});
// DELETE_REQUEST
const deleteRequest = async (id) => {
try {
const response = await fetch(`${url}/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const results = await response.json();
console.log(results.message);
fetchData();
} catch (error) {
console.error(error);
}
};
//GET_LOGIN
loginButton.addEventListener("click", () => {
const getLoginData = async () => {
try {
const response = await fetch(`${url}?login=${login.value}&password=${password.value}`);
const data = await response.json();
dataRender(data);
} catch (error) {
console.error(error);
}
};
//UPDATE_IS_LOGIN
const updateIsLogin = async () => {
try {
const response = await fetch(url, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ isLogin: true }),
});
const results = await response.json();
console.log(results.message);
} catch (error) {
console.error(error);
}
};
getLoginData();
updateIsLogin();
});
Omg Leute ich habe schon wieder die Frage im Bereich "Java" hochgeladen.. Sryy! Ich kenne mich im Forum nicht aus!
MfG
MrOsmo