modster/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="response.js" async defer></script>
    <title>Custom Response</title>
  </head>
  <body>
    <header>
      <h1>Custom Response Objects</h1>
    </header>
    <main>
      <h2>Creating Response Objects</h2>
      <p>Why would you want to create a Response Object?</p>
      <ul>
        <li>Save a generated file in the Cache</li>
        <li>Put a user's local file into the Cache</li>
        <li>Return a generated file from a Service Worker</li>
        <li>Make copies of files</li>
      </ul>
    </main>
    <footer>
      <p>&copy; 2022</p>
    </footer>
  </body>
</html>

## response.js
/*
new Response(body, {
  status: 200,
  statusText: 'All good',
  headers: {
    'x-my-header': 'some value',
  }
});

body - Blob, File, ArrayBuffer, TypedArray, DataView,
  FormData, String, ReadableStream, URLSearchParams
*/

document.addEventListener('DOMContentLoaded', () => {
  //when the page is ready...
  createJSONResponse();

  createImageResponse();
});

async function createJSONResponse() {
  //create an object, convert to JSON and create a file in a Response
  const myobj = {
    id: 123,
    name: 'Sheldon',
  };
  let json = JSON.stringify(myobj);
  let file = new File([json], 'mydata.json', { type: 'application/json' });
  console.log(file);
  const response = new Response(file, {
    status: 200,
    statusText: 'All good',
    headers: {
      'x-my-header': 'some value',
      'content-type': file.type,
      'content-length': file.size,
    },
  });
  console.log(response);
  const copy = response.clone();
  console.log(copy);
  let contents = await copy.json();
  console.log({ contents });
}

function createImageResponse() {
  //load a local image and put it in a Response
  let input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.addEventListener('change', async (ev) => {
    let input = ev.target;
    let file = input.files[0];
    let response = new Response(file, {
      status: 200,
      statusText: 'ok',
      headers: {
        'content-type': file.type,
        'content-length': file.size,
      },
    });
    let copy = response.clone();
    console.log(copy);
    //get image from response
    let blob = await copy.blob();
    //add to <a href>
    let url = URL.createObjectURL(blob);
    console.log(url);
  });
  document.body.addEventListener('click', (ev) => {
    input.click();
  });
}

## style.css
* {
  box-sizing: border-box;
  font: inherit;
}
html {
  font-size: 20px;
  font-family: sans-serif;
  margin: 0;
}
body {
  margin: 0;
}
header {
  padding: 1rem 3rem;
  background-color: coral;
  color: white;
  border-bottom: 1px solid #000;
}
:is(main, footer) {
  padding: 1rem 3rem;
}
header h1 {
  font-size: 2rem;
}
h2 {
  font-size: 2rem;
}
p {
  font-size: 1rem;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<script src="response.js" async defer></script>
	<title>Custom Response</title>
	</head>
	<body>
	<header>
	<h1>Custom Response Objects</h1>
	</header>
	<main>
	<h2>Creating Response Objects</h2>
	<p>Why would you want to create a Response Object?</p>
	<ul>
	<li>Save a generated file in the Cache</li>
	<li>Put a user's local file into the Cache</li>
	<li>Return a generated file from a Service Worker</li>
	<li>Make copies of files</li>
	</ul>
	</main>
	<footer>
	<p>© 2022</p>
	</footer>
	</body>
	</html>
	/*
	new Response(body, {
	status: 200,
	statusText: 'All good',
	headers: {
	'x-my-header': 'some value',
	}
	});

	body - Blob, File, ArrayBuffer, TypedArray, DataView,
	FormData, String, ReadableStream, URLSearchParams
	*/

	document.addEventListener('DOMContentLoaded', () => {
	//when the page is ready...
	createJSONResponse();

	createImageResponse();
	});

	async function createJSONResponse() {
	//create an object, convert to JSON and create a file in a Response
	const myobj = {
	id: 123,
	name: 'Sheldon',
	};
	let json = JSON.stringify(myobj);
	let file = new File([json], 'mydata.json', { type: 'application/json' });
	console.log(file);
	const response = new Response(file, {
	status: 200,
	statusText: 'All good',
	headers: {
	'x-my-header': 'some value',
	'content-type': file.type,
	'content-length': file.size,
	},
	});
	console.log(response);
	const copy = response.clone();
	console.log(copy);
	let contents = await copy.json();
	console.log({ contents });
	}

	function createImageResponse() {
	//load a local image and put it in a Response
	let input = document.createElement('input');
	input.type = 'file';
	input.accept = 'image/*';
	input.addEventListener('change', async (ev) => {
	let input = ev.target;
	let file = input.files[0];
	let response = new Response(file, {
	status: 200,
	statusText: 'ok',
	headers: {
	'content-type': file.type,
	'content-length': file.size,
	},
	});
	let copy = response.clone();
	console.log(copy);
	//get image from response
	let blob = await copy.blob();
	//add to <a href>
	let url = URL.createObjectURL(blob);
	console.log(url);
	});
	document.body.addEventListener('click', (ev) => {
	input.click();
	});
	}
	* {
	box-sizing: border-box;
	font: inherit;
	}
	html {
	font-size: 20px;
	font-family: sans-serif;
	margin: 0;
	}
	body {
	margin: 0;
	}
	header {
	padding: 1rem 3rem;
	background-color: coral;
	color: white;
	border-bottom: 1px solid #000;
	}
	:is(main, footer) {
	padding: 1rem 3rem;
	}
	header h1 {
	font-size: 2rem;
	}
	h2 {
	font-size: 2rem;
	}
	p {
	font-size: 1rem;
	}