chruit30/fetchURL.html

## fetchURL.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>

## sample.txt
I am a sample text file

## users.json
[
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz",
address: {
street: "Kulas Light",
suite: "Apt. 556",
city: "Gwenborough",
zipcode: "92998-3874",
geo: {
lat: "-37.3159",
lng: "81.1496"
}
},
phone: "1-770-736-8031 x56442",
website: "hildegard.org",
company: {
name: "Romaguera-Crona",
catchPhrase: "Multi-layered client-server neural-net",
bs: "harness real-time e-markets"
}
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna@melissa.tv",
address: {
street: "Victor Plains",
suite: "Suite 879",
city: "Wisokyburgh",
zipcode: "90566-7771",
geo: {
lat: "-43.9509",
lng: "-34.4618"
}
},
phone: "010-692-6593 x09125",
website: "anastasia.net",
company: {
name: "Deckow-Crist",
catchPhrase: "Proactive didactic contingency",
bs: "synergize scalable supply-chains"
}
},
{
id: 3,
name: "Clementine Bauch",
username: "Samantha",
email: "Nathan@yesenia.net",
address: {
street: "Douglas Extension",
suite: "Suite 847",
city: "McKenziehaven",
zipcode: "59590-4157",
geo: {
lat: "-68.6102",
lng: "-47.0653"
}
},
phone: "1-463-123-4447",
website: "ramiro.info",
company: {
name: "Romaguera-Jacobson",
catchPhrase: "Face to face bifurcated interface",
bs: "e-enable strategic applications"
}
},
{
id: 4,
name: "Patricia Lebsack",
username: "Karianne",
email: "Julianne.OConner@kory.org",
address: {
street: "Hoeger Mall",
suite: "Apt. 692",
city: "South Elvis",
zipcode: "53919-4257",
geo: {
lat: "29.4572",
lng: "-164.2990"
}
},
phone: "493-170-9623 x156",
website: "kale.biz",
company: {
name: "Robel-Corkery",
catchPhrase: "Multi-tiered zero tolerance productivity",
bs: "transition cutting-edge web services"
}
},
{
id: 5,
name: "Chelsey Dietrich",
username: "Kamren",
email: "Lucio_Hettinger@annie.ca",
address: {
street: "Skiles Walks",
suite: "Suite 351",
city: "Roscoeview",
zipcode: "33263",
geo: {
lat: "-31.8129",
lng: "62.5342"
}
},
phone: "(254)954-1289",
website: "demarco.info",
company: {
name: "Keebler LLC",
catchPhrase: "User-centric fault-tolerant solution",
bs: "revolutionize end-to-end systems"
}
},
{
id: 6,
name: "Mrs. Dennis Schulist",
username: "Leopoldo_Corkery",
email: "Karley_Dach@jasper.info",
address: {
street: "Norberto Crossing",
suite: "Apt. 950",
city: "South Christy",
zipcode: "23505-1337",
geo: {
lat: "-71.4197",
lng: "71.7478"
}
},
phone: "1-477-935-8478 x6430",
website: "ola.org",
company: {
name: "Considine-Lockman",
catchPhrase: "Synchronised bottom-line interface",
bs: "e-enable innovative applications"
}
},
{
id: 7,
name: "Kurtis Weissnat",
username: "Elwyn.Skiles",
email: "Telly.Hoeger@billy.biz",
address: {
street: "Rex Trail",
suite: "Suite 280",
city: "Howemouth",
zipcode: "58804-1099",
geo: {
lat: "24.8918",
lng: "21.8984"
}
},
phone: "210.067.6132",
website: "elvis.io",
company: {
name: "Johns Group",
catchPhrase: "Configurable multimedia task-force",
bs: "generate enterprise e-tailers"
}
},
{
id: 8,
name: "Nicholas Runolfsdottir V",
username: "Maxime_Nienow",
email: "Sherwood@rosamond.me",
address: {
street: "Ellsworth Summit",
suite: "Suite 729",
city: "Aliyaview",
zipcode: "45169",
geo: {
lat: "-14.3990",
lng: "-120.7677"
}
},
phone: "586.493.6943 x140",
website: "jacynthe.com",
company: {
name: "Abernathy Group",
catchPhrase: "Implemented secondary concept",
bs: "e-enable extensible e-tailers"
}
},
{
id: 9,
name: "Glenna Reichert",
username: "Delphine",
email: "Chaim_McDermott@dana.io",
address: {
street: "Dayna Park",
suite: "Suite 449",
city: "Bartholomebury",
zipcode: "76495-3109",
geo: {
lat: "24.6463",
lng: "-168.8889"
}
},
phone: "(775)976-6794 x41206",
website: "conrad.com",
company: {
name: "Yost and Sons",
catchPhrase: "Switchable contextually-based project",
bs: "aggregate real-time technologies"
}
},
{
id: 10,
name: "Clementina DuBuque",
username: "Moriah.Stanton",
email: "Rey.Padberg@karina.biz",
address: {
street: "Kattie Turnpike",
suite: "Suite 198",
city: "Lebsackbury",
zipcode: "31428-2261",
geo: {
lat: "-38.2386",
lng: "57.2232"
}
},
phone: "024-648-3804",
website: "ambrose.net",
company: {
name: "Hoeger LLC",
catchPhrase: "Centralized empowering task-force",
bs: "target end-to-end models"
}
}
]
	<!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>
	[
	{
	id: 1,
	name: "Leanne Graham",
	username: "Bret",
	email: "Sincere@april.biz",
	address: {
	street: "Kulas Light",
	suite: "Apt. 556",
	city: "Gwenborough",
	zipcode: "92998-3874",
	geo: {
	lat: "-37.3159",
	lng: "81.1496"
	}
	},
	phone: "1-770-736-8031 x56442",
	website: "hildegard.org",
	company: {
	name: "Romaguera-Crona",
	catchPhrase: "Multi-layered client-server neural-net",
	bs: "harness real-time e-markets"
	}
	},
	{
	id: 2,
	name: "Ervin Howell",
	username: "Antonette",
	email: "Shanna@melissa.tv",
	address: {
	street: "Victor Plains",
	suite: "Suite 879",
	city: "Wisokyburgh",
	zipcode: "90566-7771",
	geo: {
	lat: "-43.9509",
	lng: "-34.4618"
	}
	},
	phone: "010-692-6593 x09125",
	website: "anastasia.net",
	company: {
	name: "Deckow-Crist",
	catchPhrase: "Proactive didactic contingency",
	bs: "synergize scalable supply-chains"
	}
	},
	{
	id: 3,
	name: "Clementine Bauch",
	username: "Samantha",
	email: "Nathan@yesenia.net",
	address: {
	street: "Douglas Extension",
	suite: "Suite 847",
	city: "McKenziehaven",
	zipcode: "59590-4157",
	geo: {
	lat: "-68.6102",
	lng: "-47.0653"
	}
	},
	phone: "1-463-123-4447",
	website: "ramiro.info",
	company: {
	name: "Romaguera-Jacobson",
	catchPhrase: "Face to face bifurcated interface",
	bs: "e-enable strategic applications"
	}
	},
	{
	id: 4,
	name: "Patricia Lebsack",
	username: "Karianne",
	email: "Julianne.OConner@kory.org",
	address: {
	street: "Hoeger Mall",
	suite: "Apt. 692",
	city: "South Elvis",
	zipcode: "53919-4257",
	geo: {
	lat: "29.4572",
	lng: "-164.2990"
	}
	},
	phone: "493-170-9623 x156",
	website: "kale.biz",
	company: {
	name: "Robel-Corkery",
	catchPhrase: "Multi-tiered zero tolerance productivity",
	bs: "transition cutting-edge web services"
	}
	},
	{
	id: 5,
	name: "Chelsey Dietrich",
	username: "Kamren",
	email: "Lucio_Hettinger@annie.ca",
	address: {
	street: "Skiles Walks",
	suite: "Suite 351",
	city: "Roscoeview",
	zipcode: "33263",
	geo: {
	lat: "-31.8129",
	lng: "62.5342"
	}
	},
	phone: "(254)954-1289",
	website: "demarco.info",
	company: {
	name: "Keebler LLC",
	catchPhrase: "User-centric fault-tolerant solution",
	bs: "revolutionize end-to-end systems"
	}
	},
	{
	id: 6,
	name: "Mrs. Dennis Schulist",
	username: "Leopoldo_Corkery",
	email: "Karley_Dach@jasper.info",
	address: {
	street: "Norberto Crossing",
	suite: "Apt. 950",
	city: "South Christy",
	zipcode: "23505-1337",
	geo: {
	lat: "-71.4197",
	lng: "71.7478"
	}
	},
	phone: "1-477-935-8478 x6430",
	website: "ola.org",
	company: {
	name: "Considine-Lockman",
	catchPhrase: "Synchronised bottom-line interface",
	bs: "e-enable innovative applications"
	}
	},
	{
	id: 7,
	name: "Kurtis Weissnat",
	username: "Elwyn.Skiles",
	email: "Telly.Hoeger@billy.biz",
	address: {
	street: "Rex Trail",
	suite: "Suite 280",
	city: "Howemouth",
	zipcode: "58804-1099",
	geo: {
	lat: "24.8918",
	lng: "21.8984"
	}
	},
	phone: "210.067.6132",
	website: "elvis.io",
	company: {
	name: "Johns Group",
	catchPhrase: "Configurable multimedia task-force",
	bs: "generate enterprise e-tailers"
	}
	},
	{
	id: 8,
	name: "Nicholas Runolfsdottir V",
	username: "Maxime_Nienow",
	email: "Sherwood@rosamond.me",
	address: {
	street: "Ellsworth Summit",
	suite: "Suite 729",
	city: "Aliyaview",
	zipcode: "45169",
	geo: {
	lat: "-14.3990",
	lng: "-120.7677"
	}
	},
	phone: "586.493.6943 x140",
	website: "jacynthe.com",
	company: {
	name: "Abernathy Group",
	catchPhrase: "Implemented secondary concept",
	bs: "e-enable extensible e-tailers"
	}
	},
	{
	id: 9,
	name: "Glenna Reichert",
	username: "Delphine",
	email: "Chaim_McDermott@dana.io",
	address: {
	street: "Dayna Park",
	suite: "Suite 449",
	city: "Bartholomebury",
	zipcode: "76495-3109",
	geo: {
	lat: "24.6463",
	lng: "-168.8889"
	}
	},
	phone: "(775)976-6794 x41206",
	website: "conrad.com",
	company: {
	name: "Yost and Sons",
	catchPhrase: "Switchable contextually-based project",
	bs: "aggregate real-time technologies"
	}
	},
	{
	id: 10,
	name: "Clementina DuBuque",
	username: "Moriah.Stanton",
	email: "Rey.Padberg@karina.biz",
	address: {
	street: "Kattie Turnpike",
	suite: "Suite 198",
	city: "Lebsackbury",
	zipcode: "31428-2261",
	geo: {
	lat: "-38.2386",
	lng: "57.2232"
	}
	},
	phone: "024-648-3804",
	website: "ambrose.net",
	company: {
	name: "Hoeger LLC",
	catchPhrase: "Centralized empowering task-force",
	bs: "target end-to-end models"
	}
	}
	]