prof3ssorSt3v3/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" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="main.css" />
    <link rel="manifest" href="manifest.json" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <script src="main.js" type="module"></script>
  </head>
  <body>
    <header>
      <h1>Chrome Dev Tools</h1>
    </header>
    <main>
      <h2>Application Tab</h2>
      <p><code>Cmd + Option + J</code> Open the Console Mac</p>
      <p><code>Ctrl + Shift + J</code> Open the Console Windows</p>
      <p class="lorem">
        Learn how to manage all your data and file storage in the browser. This includes cookies, local storage, indexedDB, and more. You can also learn how to manage your cache data and clear it out
        when you need to.
      </p>
      <p>Icons from <a href="https://realfavicongenerator.net/">RealFaviconGenerator</a></p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi animi voluptatem, ullam, quibusdam nisi sit rerum corrupti tempore consequuntur, eaque illo placeat hic doloribus optio vero
        voluptates laborum non laudantium accusantium saepe. Ad, quo reiciendis porro similique cum nemo unde fuga perferendis velit quasi, praesentium atque id facere consequuntur numquam!
      </p>
      <p>
        Quaerat deleniti culpa animi est blanditiis laborum quis corporis voluptatibus architecto at temporibus, illum itaque quasi quisquam nulla aliquid non debitis quibusdam dolore. Earum veritatis
        deleniti qui necessitatibus iure ratione in velit illum dignissimos rerum labore veniam nisi, obcaecati laudantium perspiciatis consequatur dolorum quisquam suscipit quis provident dolorem.
        Quod, autem!
      </p>
      <p>
        Laborum ut quis dolore deleniti pariatur porro delectus sequi, nemo consequuntur repudiandae, dolorum, facere cumque et atque deserunt vero quaerat! Ipsam provident praesentium necessitatibus
        magnam quo sint officiis sunt maxime, doloribus blanditiis commodi iure eius illum cupiditate placeat eaque alias nobis fugit asperiores. Sint voluptatibus nostrum quos fugiat impedit omnis.
      </p>
      <p>
        Sit eveniet nam praesentium unde corrupti nesciunt doloremque, amet aliquid tempora culpa doloribus labore odio vitae laboriosam aspernatur, laudantium ipsam expedita, voluptates consequuntur!
        Vero, eos ducimus? Necessitatibus ad delectus, vero blanditiis autem ex suscipit repellat debitis deserunt perferendis dolor velit tempora ipsum obcaecati temporibus recusandae similique
        nesciunt minus quibusdam mollitia!
      </p>
    </main>
  </body>
</html>

## main.css
:root {
  --fsize: 20px;
  --color: white;
}
* {
  box-sizing: border-box;
  margin: 0;
  color: var(--color);
  font-size: 0.8rem;
}
html {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fsize);
  font-weight: 300;
  line-height: 1.6;
  color-scheme: dark light;
}
body {
  min-height: 100vh;
}
header,
main {
  padding: 1rem 4rem;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
code {
  width: 800px;
}
p {
  font-size: 1rem;
  margin-block: 1rem;
}
@media screen and (prefers-color-scheme: light) {
  :root {
    --color: rebeccapurple;
  }
}
@media screen and (min-width: 600px) {
  :root {
    --fsize: 24px;
    --color: orangered;
  }
}
@media screen and (min-width: 900px) {
  :root {
    --fsize: 30px;
    --color: cornflowerblue;
  }
}
@media screen and (prefers-color-scheme: light) and (min-width: 900px) {
  :root {
    --color: steelblue;
  }
}

## main.js
const data = {
  id: crypto.randomUUID(),
  name: 'John Doe',
  email: 'john@work.org',
};

document.addEventListener('DOMContentLoaded', () => {
  document.body.addEventListener('click', () => {
    //every click, update the id
    data.id = crypto.randomUUID();

    registerServiceWorker();
    setACookie();
    saveDataInWebStorage();
    saveFileInCache();
    saveDataInIndexedDB();
  });
});

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js', { scope: './' }).then((registration) => {
      console.log('SW: registered');
    });
  }
}

function setACookie() {
  document.cookie = `data=${JSON.stringify(data)}; Expires=Thu, 3 May 2023 07:00:00 GMT;`;
}

function saveDataInWebStorage() {
  localStorage.setItem('myDataKey', JSON.stringify(data));
  sessionStorage.setItem('myDataKey', JSON.stringify(data));
}

function saveFileInCache() {
  const cacheName = 'myDataCache';
  const fileName = 'my-file.json';
  const file = new File([JSON.stringify(data)], fileName, { type: 'application/json' });
  const resp = new Response(file, { status: 200, statusText: 'OK', headers: { 'content-type': 'application/json' } });
  caches.open(cacheName).then((cache) => {
    cache.put(fileName, resp);
  });
}

function saveDataInIndexedDB() {
  const version = 1;
  const storeName = 'myDataStore';
  let DB;
  const request = window.indexedDB.open(storeName, version);
  request.onerror = (ev) => {
    console.warn(ev.error);
  };
  request.onsuccess = (ev) => {
    DB = ev.target.result;
    const transaction = DB.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);
    const addRequest = store.add(data);
    addRequest.onsuccess = (ev) => {
      console.log('Data added');
    };
  };
  request.onupgradeneeded = (ev) => {
    DB = ev.target.result;
    DB.createObjectStore(storeName, { keyPath: 'id' });
  };
}

## manifest.json
{
  "name": "My web app",
  "short_name": "My App",
  "description": "My web app",
  "author": "Me",
  "version": "0.0.1",
  "background_color": "#3367D6",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#3367D6",
  "icons": [
    {
      "src": "./favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "./favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

## sw.js
self.addEventListener('install', (ev) => {
  console.log('SW: installed');
});
self.addEventListener('active', (ev) => {
  console.log('SW: activated');
});
self.addEventListener('fetch', (ev) => {
  console.log('SW: fetch');
});
	<!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" />
	<title>Document</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="main.css" />
	<link rel="manifest" href="manifest.json" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<script src="main.js" type="module"></script>
	</head>
	<body>
	<header>
	<h1>Chrome Dev Tools</h1>
	</header>
	<main>
	<h2>Application Tab</h2>
	<p><code>Cmd + Option + J</code> Open the Console Mac</p>
	<p><code>Ctrl + Shift + J</code> Open the Console Windows</p>
	<p class="lorem">
	Learn how to manage all your data and file storage in the browser. This includes cookies, local storage, indexedDB, and more. You can also learn how to manage your cache data and clear it out
	when you need to.
	</p>
	<p>Icons from <a href="https://realfavicongenerator.net/">RealFaviconGenerator</a></p>
	<p>
	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi animi voluptatem, ullam, quibusdam nisi sit rerum corrupti tempore consequuntur, eaque illo placeat hic doloribus optio vero
	voluptates laborum non laudantium accusantium saepe. Ad, quo reiciendis porro similique cum nemo unde fuga perferendis velit quasi, praesentium atque id facere consequuntur numquam!
	</p>
	<p>
	Quaerat deleniti culpa animi est blanditiis laborum quis corporis voluptatibus architecto at temporibus, illum itaque quasi quisquam nulla aliquid non debitis quibusdam dolore. Earum veritatis
	deleniti qui necessitatibus iure ratione in velit illum dignissimos rerum labore veniam nisi, obcaecati laudantium perspiciatis consequatur dolorum quisquam suscipit quis provident dolorem.
	Quod, autem!
	</p>
	<p>
	Laborum ut quis dolore deleniti pariatur porro delectus sequi, nemo consequuntur repudiandae, dolorum, facere cumque et atque deserunt vero quaerat! Ipsam provident praesentium necessitatibus
	magnam quo sint officiis sunt maxime, doloribus blanditiis commodi iure eius illum cupiditate placeat eaque alias nobis fugit asperiores. Sint voluptatibus nostrum quos fugiat impedit omnis.
	</p>
	<p>
	Sit eveniet nam praesentium unde corrupti nesciunt doloremque, amet aliquid tempora culpa doloribus labore odio vitae laboriosam aspernatur, laudantium ipsam expedita, voluptates consequuntur!
	Vero, eos ducimus? Necessitatibus ad delectus, vero blanditiis autem ex suscipit repellat debitis deserunt perferendis dolor velit tempora ipsum obcaecati temporibus recusandae similique
	nesciunt minus quibusdam mollitia!
	</p>
	</main>
	</body>
	</html>
	:root {
	--fsize: 20px;
	--color: white;
	}
	* {
	box-sizing: border-box;
	margin: 0;
	color: var(--color);
	font-size: 0.8rem;
	}
	html {
	font-family: 'Montserrat', sans-serif;
	font-size: var(--fsize);
	font-weight: 300;
	line-height: 1.6;
	color-scheme: dark light;
	}
	body {
	min-height: 100vh;
	}
	header,
	main {
	padding: 1rem 4rem;
	}
	h1 {
	font-size: 3rem;
	}
	h2 {
	font-size: 2rem;
	}
	code {
	width: 800px;
	}
	p {
	font-size: 1rem;
	margin-block: 1rem;
	}
	@media screen and (prefers-color-scheme: light) {
	:root {
	--color: rebeccapurple;
	}
	}
	@media screen and (min-width: 600px) {
	:root {
	--fsize: 24px;
	--color: orangered;
	}
	}
	@media screen and (min-width: 900px) {
	:root {
	--fsize: 30px;
	--color: cornflowerblue;
	}
	}
	@media screen and (prefers-color-scheme: light) and (min-width: 900px) {
	:root {
	--color: steelblue;
	}
	}
	const data = {
	id: crypto.randomUUID(),
	name: 'John Doe',
	email: 'john@work.org',
	};

	document.addEventListener('DOMContentLoaded', () => {
	document.body.addEventListener('click', () => {
	//every click, update the id
	data.id = crypto.randomUUID();

	registerServiceWorker();
	setACookie();
	saveDataInWebStorage();
	saveFileInCache();
	saveDataInIndexedDB();
	});
	});

	function registerServiceWorker() {
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('sw.js', { scope: './' }).then((registration) => {
	console.log('SW: registered');
	});
	}
	}

	function setACookie() {
	document.cookie = `data=${JSON.stringify(data)}; Expires=Thu, 3 May 2023 07:00:00 GMT;`;
	}

	function saveDataInWebStorage() {
	localStorage.setItem('myDataKey', JSON.stringify(data));
	sessionStorage.setItem('myDataKey', JSON.stringify(data));
	}

	function saveFileInCache() {
	const cacheName = 'myDataCache';
	const fileName = 'my-file.json';
	const file = new File([JSON.stringify(data)], fileName, { type: 'application/json' });
	const resp = new Response(file, { status: 200, statusText: 'OK', headers: { 'content-type': 'application/json' } });
	caches.open(cacheName).then((cache) => {
	cache.put(fileName, resp);
	});
	}

	function saveDataInIndexedDB() {
	const version = 1;
	const storeName = 'myDataStore';
	let DB;
	const request = window.indexedDB.open(storeName, version);
	request.onerror = (ev) => {
	console.warn(ev.error);
	};
	request.onsuccess = (ev) => {
	DB = ev.target.result;
	const transaction = DB.transaction(storeName, 'readwrite');
	const store = transaction.objectStore(storeName);
	const addRequest = store.add(data);
	addRequest.onsuccess = (ev) => {
	console.log('Data added');
	};
	};
	request.onupgradeneeded = (ev) => {
	DB = ev.target.result;
	DB.createObjectStore(storeName, { keyPath: 'id' });
	};
	}
	{
	"name": "My web app",
	"short_name": "My App",
	"description": "My web app",
	"author": "Me",
	"version": "0.0.1",
	"background_color": "#3367D6",
	"display": "standalone",
	"start_url": "/",
	"theme_color": "#3367D6",
	"icons": [
	{
	"src": "./favicon-16x16.png",
	"sizes": "16x16",
	"type": "image/png"
	},
	{
	"src": "./favicon-32x32.png",
	"sizes": "32x32",
	"type": "image/png"
	},
	{
	"src": "./apple-touch-icon.png",
	"sizes": "180x180",
	"type": "image/png",
	"purpose": "maskable"
	},
	{
	"src": "./android-chrome-192x192.png",
	"type": "image/png",
	"sizes": "192x192"
	}
	]
	}
	self.addEventListener('install', (ev) => {
	console.log('SW: installed');
	});
	self.addEventListener('active', (ev) => {
	console.log('SW: activated');
	});
	self.addEventListener('fetch', (ev) => {
	console.log('SW: fetch');
	});