guzart/inde.html

## inde.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Recipe Dashboard</title>
    <script src="https://use.fontawesome.com/99d8f1b106.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  </head>
  <body class="dqpl-no-sidebar">
    <div id="app">
      <div class="App">
        <nav class="dqpl-skip-container">
          <a href="#main-content" class="dqpl-skip-link">
            <span class="dqpl-skip-one">Skip to</span>
            <span class="dqpl-skip-two">Main Content</span></a></nav>
        <div class="dqpl-top-bar" role="banner">
          <ul role="menubar">
            <li tabindex="0" role="menuitem"><span>awesome recipes</span></li>
          </ul>
        </div>
        <div class="dqpl-layout">
          <div class="dqpl-main-content" role="main" id="main-content" aria-labelledby="main-heading" tabindex="-1">
            <div class="App__head">
              <div class="confined">
                <h1 id="main-heading">Recipe Dashboard</h1>
              </div>
            </div>
            <button type="button" class="Edit">
              <span aria-hidden="true" class="fa fa-pencil"></span>
            </button>

            <div class="Modal" role="dialog" aria-modal="false" aria-labelledby="edit-recipe-title">
              <h2 id="edit-recipe-title" tabindex="-1">
                Edit Recipe
              </h2>
              <button class="Close" aria-label="Close Modal">X</button>
              MODAL CONTENT GOES HERE
              <input type="text" />
              <input type="text" />
              <input type="text" />
              <input type="text" />
              <input type="text" />
              <input type="text" />
            </div>

          </div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
          <a href="#main-content" class="dqpl-skip-link">
            <span class="dqpl-skip-one">Skip to</span>
            <span class="dqpl-skip-two">Main Content</span></a></nav>
</html>

## index.css
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-size: 26px;
  color: #333;
  font-weight: 400;
}

h2 {
  font-size: 28px;
  color: #666;
}

h3 {
  font-size: 24px;
  color: #333;
  font-weight: 400;
}

body .dqpl-top-bar [role='menubar'],
.confined {
  max-width: 1024px;
  margin: 0 auto;
}

body .dqpl-top-bar [role='menubar'] > li:first-child {
  border-left: 1px solid #5a6268;
  border-right: 1px solid #5a6268;
}

body .dqpl-layout,
body .dqpl-layout .dqpl-main-content {
  padding: 0;
}

.App .dqpl-top-bar img {
  width: 30px;
}

.App .App__head {
  background: #f2f2f2;
  border-bottom: 1px solid #ccc;
  z-index: 2;
}

.App .App__head,
.App .dqpl-main-content {
  width: 100%;
  min-width: 1024px;
}

.App .dqpl-layout {
  overflow-x: auto;
}

.App .App__head h1 {
  text-transform: uppercase;
  margin-left: 10px;
}

.App .dqpl-field-wrap {
  margin-bottom: 0;
}

.App .dqpl-content {
  max-height: calc(100vh - 300px);
}

.Stats {
  border-bottom: 1px solid #ccc;
}

.Stats .confined {
  display: flex;
  justify-content: center;
}

.App .dqpl-layout .dqpl-main-content {
  border: none;
}

.App .dqpl-layout .dqpl-main-content::before {
  content: '';
  position: absolute;
  background-color: transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 70px;
  left: 9px;
  bottom: 0;
  width: 18px;
}

.App .dqpl-layout .dqpl-main-content:focus::before {
  border-left: 6px solid #fdfdfe;
  border-right: 6px solid #fdfdfe;
  background-color: #283640;
}

.App .dqpl-modal .dqpl-dialog-inner .dqpl-modal-header h2 {
  padding: 10px 24px;
}

.App .Edit {
  margin: 25px auto;
  font-size: 30px;
  background: #f2f2f2;
  box-shadow: 0 0 1px #000;
}

.Modal {
  border: solid 1px black;
  width: 500px;
  height: 500px;
}

.Modal[aria-modal="false"] {
  display: none;
}

.Modal[aria-modal="true"] {
  display: block;
}

.Modal h2:focus {
  color: red;
}

## index.js
import delegate from 'delegate';
import './index.css';
import 'deque-pattern-library/dist/css/pattern-library.min.css';
import 'deque-pattern-library/dist/js/pattern-library.min.js';

const editButton = document.querySelector('.Edit');

editButton.addEventListener('click', () => {
  const modal = document.querySelector('.Modal');
  modal.setAttribute('aria-modal', 'true')

  const heading = modal.querySelector('h2');
  heading.focus();
});

const closeButton = document.querySelector('.Close')
closeButton.addEventListener('click', () => {
  const modal = document.querySelector('.Modal');
  modal.setAttribute('aria-modal', 'false');
})

/**
 * Example delegated modal keydown listener
 * NOTE: For this to work, uncomment out lines 20-22 (and line 1!)
 * and add the following to the index.html file:
 * ```html
 * <div class="Modal">MODAL CONTENT GOES HERE</div>
 * ```
 */
delegate('.Modal', 'keydown', e => {
  const modal = document.querySelector('.Modal');

  if (e.key === 'Escape') {
    modal.setAttribute('aria-modal', 'false')
  }

  if (e.key === 'Tab') {
    const focusableElements = Array.from(modal.querySelectorAll('a,button,input,select'));
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];

    const firstFocusableIsActive = e.target === firstFocusableElement;
    const lastFocusableElementIsActive = e.target === lastFocusableElement

    const isShiftKeyPressed = e.shiftKey

    if (isShiftKeyPressed && firstFocusableIsActive) {
      e.preventDefault();
      lastFocusableElement.focus()
    } else if (!isShiftKeyPressed && lastFocusableElementIsActive) {
      e.preventDefault()
      firstFocusableElement.focus()
    }
  }
});

/**
 * Here is an example recipe object:
    {
      "name": "Chocolate Cake",
      "date": "11/17/2018",
      "cookCount": 4,
      "image": "/food/cake.png",
      "prepTime": "20 min",
      "cookTime": "30 min",
      "difficulty": "Beginner",
      "greaseFireCount": 2,
      "yumminess": 42,
      "ingredients": [
        "2 cups white sugar",
        "1 3/4 cups of all-purpose flour",
        "3/4 cup unsweetened cocoa powder",
        "1 1/2 teaspoons baking powder",
        "1 1/2 teaspoons baking soda",
        "1 teaspoon of salt",
        "2 eggs",
        "1 cup milk",
        "1/2 cup vegetable oil",
        "2 teaspoons vanilla extract",
        "1 cup boiling water"
      ],
      "instructions": [
        "Preheat oven to 350 degrees F (175 degrees C)",
        "In a large bowl, stir together the sugar, flour, cocoa, baking poweder, baking soda and salt. Add the eggs, milk, oil and vanilla, mix for 2 mins on medium speed of mixer. Stir in the boiling water last. Batter will be thin. Pour evenly into prepared pans.",
        "Bake 30 to 35 minutes in the preheated oven, until the cake tests done with a toothpick. Cool in the pans for 10 minutes, then remove to a wire rack to completely cool down."
      ]
    }
 */
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Recipe Dashboard</title>
	<script src="https://use.fontawesome.com/99d8f1b106.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	</head>
	<body class="dqpl-no-sidebar">
	<div id="app">
	<div class="App">
	<nav class="dqpl-skip-container">
	<a href="#main-content" class="dqpl-skip-link">
	<span class="dqpl-skip-one">Skip to</span>
	<span class="dqpl-skip-two">Main Content</span></a></nav>
	<div class="dqpl-top-bar" role="banner">
	<ul role="menubar">
	<li tabindex="0" role="menuitem"><span>awesome recipes</span></li>
	</ul>
	</div>
	<div class="dqpl-layout">
	<div class="dqpl-main-content" role="main" id="main-content" aria-labelledby="main-heading" tabindex="-1">
	<div class="App__head">
	<div class="confined">
	<h1 id="main-heading">Recipe Dashboard</h1>
	</div>
	</div>
	<button type="button" class="Edit">
	<span aria-hidden="true" class="fa fa-pencil"></span>
	</button>

	<div class="Modal" role="dialog" aria-modal="false" aria-labelledby="edit-recipe-title">
	<h2 id="edit-recipe-title" tabindex="-1">
	Edit Recipe
	</h2>
	<button class="Close" aria-label="Close Modal">X</button>
	MODAL CONTENT GOES HERE
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	</div>

	</div>
	</div>
	</div>
	</div>
	<script src="index.js"></script>
	</body>
	<a href="#main-content" class="dqpl-skip-link">
	<span class="dqpl-skip-one">Skip to</span>
	<span class="dqpl-skip-two">Main Content</span></a></nav>
	</html>
	html {
	box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	h1 {
	font-size: 26px;
	color: #333;
	font-weight: 400;
	}

	h2 {
	font-size: 28px;
	color: #666;
	}

	h3 {
	font-size: 24px;
	color: #333;
	font-weight: 400;
	}

	body .dqpl-top-bar [role='menubar'],
	.confined {
	max-width: 1024px;
	margin: 0 auto;
	}

	body .dqpl-top-bar [role='menubar'] > li:first-child {
	border-left: 1px solid #5a6268;
	border-right: 1px solid #5a6268;
	}

	body .dqpl-layout,
	body .dqpl-layout .dqpl-main-content {
	padding: 0;
	}

	.App .dqpl-top-bar img {
	width: 30px;
	}

	.App .App__head {
	background: #f2f2f2;
	border-bottom: 1px solid #ccc;
	z-index: 2;
	}

	.App .App__head,
	.App .dqpl-main-content {
	width: 100%;
	min-width: 1024px;
	}

	.App .dqpl-layout {
	overflow-x: auto;
	}

	.App .App__head h1 {
	text-transform: uppercase;
	margin-left: 10px;
	}

	.App .dqpl-field-wrap {
	margin-bottom: 0;
	}

	.App .dqpl-content {
	max-height: calc(100vh - 300px);
	}

	.Stats {
	border-bottom: 1px solid #ccc;
	}

	.Stats .confined {
	display: flex;
	justify-content: center;
	}

	.App .dqpl-layout .dqpl-main-content {
	border: none;
	}

	.App .dqpl-layout .dqpl-main-content::before {
	content: '';
	position: absolute;
	background-color: transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	top: 70px;
	left: 9px;
	bottom: 0;
	width: 18px;
	}

	.App .dqpl-layout .dqpl-main-content:focus::before {
	border-left: 6px solid #fdfdfe;
	border-right: 6px solid #fdfdfe;
	background-color: #283640;
	}

	.App .dqpl-modal .dqpl-dialog-inner .dqpl-modal-header h2 {
	padding: 10px 24px;
	}

	.App .Edit {
	margin: 25px auto;
	font-size: 30px;
	background: #f2f2f2;
	box-shadow: 0 0 1px #000;
	}

	.Modal {
	border: solid 1px black;
	width: 500px;
	height: 500px;
	}

	.Modal[aria-modal="false"] {
	display: none;
	}

	.Modal[aria-modal="true"] {
	display: block;
	}

	.Modal h2:focus {
	color: red;
	}
	import delegate from 'delegate';
	import './index.css';
	import 'deque-pattern-library/dist/css/pattern-library.min.css';
	import 'deque-pattern-library/dist/js/pattern-library.min.js';

	const editButton = document.querySelector('.Edit');

	editButton.addEventListener('click', () => {
	const modal = document.querySelector('.Modal');
	modal.setAttribute('aria-modal', 'true')

	const heading = modal.querySelector('h2');
	heading.focus();
	});

	const closeButton = document.querySelector('.Close')
	closeButton.addEventListener('click', () => {
	const modal = document.querySelector('.Modal');
	modal.setAttribute('aria-modal', 'false');
	})

	/**
	* Example delegated modal keydown listener
	* NOTE: For this to work, uncomment out lines 20-22 (and line 1!)
	* and add the following to the index.html file:
	* ```html
	* <div class="Modal">MODAL CONTENT GOES HERE</div>
	* ```
	*/
	delegate('.Modal', 'keydown', e => {
	const modal = document.querySelector('.Modal');

	if (e.key === 'Escape') {
	modal.setAttribute('aria-modal', 'false')
	}

	if (e.key === 'Tab') {
	const focusableElements = Array.from(modal.querySelectorAll('a,button,input,select'));
	const firstFocusableElement = focusableElements[0];
	const lastFocusableElement = focusableElements[focusableElements.length - 1];

	const firstFocusableIsActive = e.target === firstFocusableElement;
	const lastFocusableElementIsActive = e.target === lastFocusableElement

	const isShiftKeyPressed = e.shiftKey

	if (isShiftKeyPressed && firstFocusableIsActive) {
	e.preventDefault();
	lastFocusableElement.focus()
	} else if (!isShiftKeyPressed && lastFocusableElementIsActive) {
	e.preventDefault()
	firstFocusableElement.focus()
	}
	}
	});

	/**
	* Here is an example recipe object:
	{
	"name": "Chocolate Cake",
	"date": "11/17/2018",
	"cookCount": 4,
	"image": "/food/cake.png",
	"prepTime": "20 min",
	"cookTime": "30 min",
	"difficulty": "Beginner",
	"greaseFireCount": 2,
	"yumminess": 42,
	"ingredients": [
	"2 cups white sugar",
	"1 3/4 cups of all-purpose flour",
	"3/4 cup unsweetened cocoa powder",
	"1 1/2 teaspoons baking powder",
	"1 1/2 teaspoons baking soda",
	"1 teaspoon of salt",
	"2 eggs",
	"1 cup milk",
	"1/2 cup vegetable oil",
	"2 teaspoons vanilla extract",
	"1 cup boiling water"
	],
	"instructions": [
	"Preheat oven to 350 degrees F (175 degrees C)",
	"In a large bowl, stir together the sugar, flour, cocoa, baking poweder, baking soda and salt. Add the eggs, milk, oil and vanilla, mix for 2 mins on medium speed of mixer. Stir in the boiling water last. Batter will be thin. Pour evenly into prepared pans.",
	"Bake 30 to 35 minutes in the preheated oven, until the cake tests done with a toothpick. Cool in the pans for 10 minutes, then remove to a wire rack to completely cool down."
	]
	}
	*/