prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cache Storage</title>
    <link rel="stylesheet" href="./css/main.css" />
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Friend Maker</h1>
      </header>
      <main>
        <h2>List of <span>0</span> Friends</h2>
        <ul>
          <li>So lonely...</li>
        </ul>
      </main>
      <aside>
        <h2>Add a Friend</h2>
        <form>
          <div class="formbox">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Friend's name" required />
          </div>
          <div class="formbox">
            <label for="dob">Birthday</label>
            <input type="date" id="dob" name="dob" min="1900-01-01" max="2023-12-31" value="2000-06-01" required />
          </div>
          <div class="formbox">
            <label for="avatar">Avatar</label>
            <input type="file" id="avatar" name="avatar" accept="image/*" required />
          </div>
          <div class="formbox">
            <button id="btnAddFriend">Add Friend</button>
          </div>
        </form>
      </aside>
    </div>
  </body>
</html>

## main.js
/*
create an object like
{
  id: '1234-2342343-3423423424', //uuid
  name: 'friend',
  dob: '2000-06-01',
  avatar: 'filename same as id',
}

- submit form
- generate UUID
- file -> rename -> response -> cache
- json with filename, name, dob, id
- json -> file -> response -> cache
*/

let myJSONCache;
let myImageCache;

document.addEventListener('DOMContentLoaded', () => {
  //open image cache and json cache and save references
  //add listener for form submit
  //build list of friends
});

function saveFriend(ev) {
  ev.preventDefault();
  const form = ev.target;
  //make sure everything is filled out.
  //create the JSON string and save it in the json cache
  //save the image in the image cache
  //when complete call the function to update the list of people
}

function showFriendsList() {
  //show the contents of cache as a list of cards
}

function makeCard(friend) {
  //create HTML card for a friend in the <ul>
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Cache Storage</title>
	<link rel="stylesheet" href="./css/main.css" />
	<script type="module" src="./js/main.js"></script>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Friend Maker</h1>
	</header>
	<main>
	<h2>List of <span>0</span> Friends</h2>
	<ul>
	<li>So lonely...</li>
	</ul>
	</main>
	<aside>
	<h2>Add a Friend</h2>
	<form>
	<div class="formbox">
	<label for="name">Name</label>
	<input type="text" id="name" name="name" placeholder="Friend's name" required />
	</div>
	<div class="formbox">
	<label for="dob">Birthday</label>
	<input type="date" id="dob" name="dob" min="1900-01-01" max="2023-12-31" value="2000-06-01" required />
	</div>
	<div class="formbox">
	<label for="avatar">Avatar</label>
	<input type="file" id="avatar" name="avatar" accept="image/*" required />
	</div>
	<div class="formbox">
	<button id="btnAddFriend">Add Friend</button>
	</div>
	</form>
	</aside>
	</div>
	</body>
	</html>
	/*
	create an object like
	{
	id: '1234-2342343-3423423424', //uuid
	name: 'friend',
	dob: '2000-06-01',
	avatar: 'filename same as id',
	}

	- submit form
	- generate UUID
	- file -> rename -> response -> cache
	- json with filename, name, dob, id
	- json -> file -> response -> cache
	*/

	let myJSONCache;
	let myImageCache;

	document.addEventListener('DOMContentLoaded', () => {
	//open image cache and json cache and save references
	//add listener for form submit
	//build list of friends
	});

	function saveFriend(ev) {
	ev.preventDefault();
	const form = ev.target;
	//make sure everything is filled out.
	//create the JSON string and save it in the json cache
	//save the image in the image cache
	//when complete call the function to update the list of people
	}

	function showFriendsList() {
	//show the contents of cache as a list of cards
	}

	function makeCard(friend) {
	//create HTML card for a friend in the <ul>
	}