https://jsonplaceholder.typicode.com/guide/
https://my-json-server.typicode.com/
<!DOCTYPE html>
<html>
<head>
<title>JavaScript API</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Oswald', sans-serif;
}
.num {
font-size: 1.5em;
max-width: 70px;
}
.box {
border: 1px solid #ddd;
border-radius: 25px;
padding: 10px;
margin: 10px auto;
width: 80%;
}
.active {
background-color: #ddd;
}
.del {
padding: 5px;
display: block;
width: 50%;
margin: auto;
background-color: red;
color: white;
font-size: 1em;
border-radius: 15px;
}
.del:hover {
opacity: 0.7;
}
.sav {
padding: 5px;
display: block;
width: 50%;
margin: auto;
background-color: rgb(115, 255, 0);
color: white;
font-size: 1em;
border-radius: 15px;
}
.container1 {
font-size: 1.2em;
padding: 10px;
margin: auto;
width: 80%;
text-align: center;
}
.container1 input,
.container1 button,
.btn {
font-size: 1.2em;
padding: 10px;
margin: auto;
}
.sav:hover {
opacity: 0.7;
}
.active .editme {
background-color: white;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="val">
<button class="btn">Click</button>
<div class="output"></div>
</div>
<script src="code5.js"></script>
</body>
</html>const baseURL = 'https://jsonplaceholder.typicode.com/'
const btn = document.querySelector('.btn');
const inpEle = document.querySelector('input');
const output = document.querySelector('.output');
const container = document.querySelector('.container');
const output1 = addEle(container, 'div', '');
output1.classList.add('container1');
const btn2 = addEle(output1, 'button', 'add Item');
const input1 = addEle(output1, 'input', '');
input1.setAttribute('type', 'text');
input1.setAttribute('placeholder', 'title');
const input2 = addEle(output1, 'input', '');
input2.setAttribute('type', 'text');
input2.setAttribute('placeholder', 'body');
inpEle.value = 1;
inpEle.classList.add('num');
inpEle.setAttribute('type', 'number');
btn.textContent = 'Select Post ID';
const btn1 = addEle(output1, 'button', 'Load All Posts');
btn1.style.display = 'block';
btn.addEventListener('click', loadData);
btn1.addEventListener('click', loadAll);
btn2.addEventListener('click', addItem);
function addItem() {
const title = input1.value || 'Title';
const body = input2.value || 'Body Contents';
const json = {
title: title,
body: body,
userId: 1
}
const url = baseURL + 'posts';
makeReq(json, 'POST', url);
}
function makeReq(json, meth, url) {
fetch(url, {
method: meth,
body: JSON.stringify(json),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(rep => rep.json())
.then(data => {
addtoPage(data);
})
}
function loadAll(e) {
console.log('ready');
const url = baseURL + 'posts';
fetch(url)
.then(rep => rep.json())
.then(data => {
addItems(data);
})
}
function addItems(json) {
output.innerHTML = '';
json.forEach(element => {
addtoPage(element);
});
}
function loadData(e) {
console.log('ready');
const url = baseURL + 'posts/' + inpEle.value;
fetch(url)
.then(rep => rep.json())
.then(data => {
addtoPage(data);
})
}
function addtoPage(info) {
console.log(info);
const main = addEle(output, 'div', '');
const delButton = addEle(output, 'button', 'Delete Item #' + info.id);
delButton.classList.add('del');
delButton.addEventListener('click', (e) => {
fetch(baseURL + 'posts/' + info.id, {
method: 'DELETE',
});
main.remove();
delButton.remove();
})
main.classList.add('box');
let html = `<h1 class="editme">${info.title}</h1>`;
html += `<p class="editme">${info.body}</p>`;
html += `<small>ID: ${info.id} - UserID: ${info.userId}</small>`;
const item = addEle(main, 'div', html);
item.addEventListener('click', (e) => {
console.log(info.id);
main.classList.add('active');
const saver = addEle(main, 'button', 'Save to Server');
saver.classList.add('sav');
const eles = main.querySelectorAll('.editme');
eles.forEach((el) => {
el.setAttribute('contenteditable', true);
})
saver.addEventListener('click', (e) => {
const tempObj = {
'title': eles[0].textContent,
'body': eles[1].textContent,
'id': info.id,
'userId': info.userId
}
eles.forEach((el) => {
el.setAttribute('contenteditable', false);
})
putItem(tempObj);
main.classList.remove('active');
saver.remove();
}, {
once: true
});
}, {
once: true
})
}
function putItem(json) {
console.log(json.id);
console.log(json);
const url = baseURL + 'posts/' + json.id;
makeReq(json, 'PUT', url);
}
function addEle(parent, t, html) {
const ele = document.createElement(t);
parent.prepend(ele);
ele.innerHTML = html;
return ele;
}