<!DOCTYPE html>
<html>
<head>
<title>JavaScript API</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
}
.ind {
padding: 10px;
width: 50px;
display: inline-block;
margin: 10px;
border: 1px solid black;
border-radius: 25px;
text-align: center;
cursor: pointer;
color: white;
background-color: #333;
}
.box {
text-align: center;
width: 80%;
padding: 10px;
border: 1px solid #ddd;
margin: 10px auto;
}
.updater div {
border: 1px solid #ccc;
padding: 10px;
background-color: azure;
margin: 10px;
}
.updateBtn {
display: block;
width: 50%;
margin: auto;
text-align: center;
padding: 10px;
border-radius: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="val">
<button class="btn">Click</button>
<div class="output"></div>
</div>
<script src="code2.js"></script>
</body>
</html>const btn = document.querySelector('.btn');
const inpEle = document.querySelector('input');
const output = document.querySelector('.output');
const baseurl = 'https://reqres.in/api/';
inpEle.style.display = 'none';
btn.textContent = 'Main Menu';
btn.classList.add('updateBtn');
const app = {
pg: 1
};
//https://reqres.in/api/users?page=2
btn.addEventListener('click', loadData);
window.addEventListener('DOMContentLoaded', loadData);
function loadData() {
const para = 'users?page=' + app.pg;
const url = baseurl + para;
fetch(url)
.then(res => res.json())
.then(data => {
buildPage(data);
})
}
function buildPage(data) {
//console.log(data);
output.innerHTML = '';
data.data.forEach(user => {
//console.log(user);
const main = addUser(user);
main.addEventListener('click', (e) => {
userPage(user.id);
})
});
const div3 = makeNode(output, 'div', '');
div3.classList.add('box');
for (let i = 0; i < data.total_pages; i++) {
const span = makeNode(div3, 'span', (i + 1));
span.classList.add('ind');
span.addEventListener('click', (e) => {
app.pg = i + 1;
loadData();
})
}
}
function makeNode(parent, nodeType, content) {
const el = document.createElement(nodeType);
el.innerHTML = content;
return parent.appendChild(el);
}
function addUser(user) {
const output1 = makeNode(output, 'div', '');
output1.classList.add('box');
const html1 = `${user.first_name} ${user.last_name}`;
const div1 = makeNode(output1, 'div', html1);
div1.userID = user.id;
const html2 = `${user.email}`;
const div2 = makeNode(output1, 'div', html2);
//const html3 = `${user.id}`;
//const div3 = makeNode(output1, 'div', html3);
const img1 = makeNode(output1, 'img', '');
img1.setAttribute('src', user.avatar);
//console.log(img1);
return output1;
}
function userPage(id) {
//console.log(id);
const para = 'users/' + id;
const url = baseurl + para;
fetch(url)
.then(res => res.json())
.then(data => {
createPage(data.data);
})
}
function createPage(data) {
//console.log(data);
output.innerHTML = '';
const main = addUser(data);
main.classList.add('updater');
main.setAttribute('contenteditable', true);
const updateBtn = makeNode(main, 'button', 'update');
updateBtn.classList.add('updateBtn');
updateBtn.addEventListener('click', (e) => {
const divEles = main.querySelectorAll('div');
const userInfo = {
"name": divEles[0].textContent,
"id": divEles[0].userID,
"email": divEles[1].textContent
}
updateUser(userInfo);
})
}
function updateUser(userInfo) {
console.log(userInfo);
const para = 'users/' + userInfo.id;
const url = baseurl + para;
console.log(url);
const headers = {
"Content-Type": "application/json"
};
const info = {
"name": userInfo.name,
"email": userInfo.email
}
fetch(url, {
method: "PUT",
headers: headers,
body: JSON.stringify(info)
})
.then(res => res.json())
.then(data => {
console.log(data);
})
}
chrome://flags/#cookies-without-same-site-must-be-secure
Cookies without SameSite must be secure
If enabled, cookies without SameSite restrictions must also be Secure. If a cookie without SameSite restrictions is set without the Secure attribute, it will be rejected. This flag only has an effect if "SameSite by default cookies" is also enabled. – Mac, Windows, Linux, Chrome OS, Android
#cookies-without-same-site-must-be-secure