Last active
April 28, 2024 03:01
-
-
Save prof3ssorSt3v3/f874503cef833f84b0247b7318cbd4a2 to your computer and use it in GitHub Desktop.
Starter code for Cache Storage assignment - /index.html, /css/main.css, /js/main.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment