Skip to content

Instantly share code, notes, and snippets.

@amantheroot

amantheroot/index.html

Created February 1, 2019 22:15
Show Gist options
  • Save amantheroot/131d589d10fa4be7fb38386b8324b324 to your computer and use it in GitHub Desktop.
Save amantheroot/131d589d10fa4be7fb38386b8324b324 to your computer and use it in GitHub Desktop.
Download ZIP
Fetch API by Traversy Media
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fetch API Sandbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 mb-4">Fetch API Sandbox</h1>
<div class="d-flex">
<button class="btn btn-primary mr-4" id="getText">Get Text</button>
<button class="btn btn-success mr-4" id="getUsers">Get JSON</button>
<button class="btn btn-warning mr-4" id="getPosts">Get API DATA</button>
</div>
<hr>
<div id="output"></div>
<form id="addPost">
<div class="form-group">
<input type="text" id="title" class="form-control" placeholder="Title">
</div>
<div class="form-group">
<textarea id="body" class="form-control" placeholder="Body"></textarea>
</div>
<input type="submit" class="btn btn-secondary" value="Submit">
</form>
</div>
<script>
document.getElementById('getText').addEventListener('click', getText);
document.getElementById('getUsers').addEventListener('click', getUsers);
document.getElementById('getPosts').addEventListener('click', getPosts);
document.getElementById('addPost').addEventListener('submit', addPost);
function getText(){
// fetch('sample.txt')
// .then(function(res){
// return res.text();
// })
// .then(function(data){
// console.log(data);
// });
fetch('sample.txt')
.then((res) => res.text())
.then((data) => {
document.getElementById('output').innerHTML = data;
})
.catch((err) => console.log(err))
}
function getUsers(){
fetch('users.json')
.then((res) => res.json())
.then((data) => {
let output = '<h2 class="mb-4">Users</h2>';
data.forEach(function(user){
output += `
<ul class="list-group mb-3">
<li class="list-group-item">ID: ${user.id}</li>
<li class="list-group-item">Name: ${user.name}</li>
<li class="list-group-item">Email: ${user.email}</li>
</ul>
`;
});
document.getElementById('output').innerHTML = output;
})
}
function getPosts(){
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
let output = '<h2 class="mb-4">Posts</h2>';
data.forEach(function(post){
output += `
<div class="card card-body mb-3">
<h3>${post.title}</h3>
<p>${post.body}</p>
</div>
`;
});
document.getElementById('output').innerHTML = output;
})
}
function addPost(e){
e.preventDefault();
let title = document.getElementById('title').value;
let body = document.getElementById('body').value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method:'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-type':'application/json'
},
body:JSON.stringify({title:title, body:body})
})
.then((res) => res.json())
.then((data) => console.log(data))
}
</script>
</body>
</html>
Raw
sample.txt
I am a sample text file
Raw
users.json
[
{
"id":1,
"name":"Rick",
"email":"[email protected]"
},
{
"id":2,
"name":"Glenn",
"email":"[email protected]"
},
{
"id":3,
"name":"Negan",
"email":"[email protected]"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment