Chris Ferdinandi cferdinandi

## localStoragePerformanceTest.html
<!DOCTYPE html>
<html>
<head>
	<title>localStorage Performance Test</title>
</head>
<body>

	<script>
		// Number of items to store
		var count = 10000;

## routing-and-spas.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cferdinandi
                / routing-and-spas.md
            
            
              Created May 23, 2019
            
              
                An excerpt from my Web Apps pocket guide: https://vanillajsguides.com/web-apps/

              
      View routing-and-spas.md
  
    
    If you build a JavaScript app with more than one page or view, you'll probably need a way to determine which UI or layout to show based on the URL. That's routing.
The problem with single-page apps
Single-page apps (or SPAs as they're sometimes called) serve all of the code for an entire multi-UI app from a single index.html file.
They use JavaScript to handle URL routing with real URLs. For this to work, you need to:

Configure the server to point all paths on a domain back to the root index.html file. For example, todolist.com and todolist.com/lists should both point to the same file.
Suppress the default behavior when someone clicks a link that points to another page in the app.


## performance.html
<!DOCTYPE html>
<html>
<head>
	<title>DOM Injection Performance Testing</title>
</head>
<body>


	<div id="app1"></div>
	<ul id="app2"></ul>

## code.css
/**
 * @section Code
 * Styling for code and preformatted text.
 */

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, "Courier New", monospace;

## who-is-driving-refactor.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Who should drive?</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Styles -->
		<style type="text/css">

## rss-to-email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <!-- This is a simple example template that you can edit to create your own custom templates -->
    <!--[if gte mso 15]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>

## README.md

      
              2 files
            
          
              1 fork
            
          
              0 comments
            
          
              0 stars
            
          
                cferdinandi
                / README.md
            
            
              Created Jan 17, 2019
            
              
                GitHub repo project template from https://learnvanillajs.com.
              
          
      View README.md
  
    
    Project Details
Use the GitHub API to get a list of repositories for a user and list them on a web page.
Bonus: Display the last three commits for each repository below it.
Considerations

How many repositories will you list? All of them, or a just the last few?


## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                cferdinandi
                / README.md
            
            
              Created Jan 17, 2019
            
              
                Find a Pet app project template from https://learnvanillajs.com.
              
          
      View README.md
  
    
    Project Details
Use the Petfinder API to get a list of available pets from a shelter and display them on a web page.
Bonus: Dynamically create filters for things like age, gender, breed, and type of animal, and let users filter out pets that don't match their criteria.
Quick heads up: The Petfinder API is buggy and poorly maintained, so you may run into some hiccups along the way.
Considerations

  
## README.md

      
              14 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                cferdinandi
                / README.md
            
            
              Last active Apr 27, 2019
            
              
                Monsters! game project template from https://learnvanillajs.com.
              
          
      View README.md
  
    
    Project Details
Build a game inspired by the movie Monsters, Inc. and loosely based on the old PC game Minesweeper.
Create a three-by-four grid of 12 doors. When the user clicks a door, they'll find one of their monster friends. But behind one door is a human sock. These are dangerous and should be avoided at all costs. Finding it means you lose the game.
If the user finds all 11 monster friends without stumbling onto the sock, they win!
Note: SVG files for the monsters, sock, and door have been included for you.

  
## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cferdinandi
                / README.md
            
            
              Created Jan 17, 2019
            
              
                Randomize app project template from https://learnvanillajs.com.
              
          
      View README.md
  
    
    Project Details
Write an app that randomly picks an option for a list of choices. Users should be able to add and delete items from the list.
Bonus: Save the list between sessions.
Considerations

Can users edit items in the list, or only add and delete them?
How will you choose a random item from the list?