blacksun1/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button {
  border: 1px solid rgba(0, 0, 0, 0.3);
  min-width: 10em;
  min-height: 2em;
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button:hover {
  font-weight: 700;
}
button.cancel {
  box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>

<!-- Simple pop-up dialog box, containing a form -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
      </section>
      <section>
        <p>
          <label for="favAnimal">Favorite animal:</label>
          <select id="favAnimal" name="favAnimal">
            <option></option>
            <option>Brine shrimp</option>
            <option>Red panda</option>
            <option>Spider monkey</option>
          </select>
        </p>
      </section>
      <menu>
        <button id="cancel" value="cancel">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </form>
  </dialog>

  <menu>
    <button id="updateDetails">Update details</button>
  </menu>

<script id="jsbin-javascript">
'use strict';

(function () {
  'use strict';

  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var dialog = document.getElementById('favDialog');
  var favAnimal = document.getElementById('favAnimal');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function () {
    dialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function () {
    dialog.close('cancel');
  });

  dialog.addEventListener('close', function (event) {
    if (dialog.returnValue === 'confirm') {
      var selection = favAnimal.selectedOptions[0].childNodes[0].data;
      console.log(selection + ' was selected');
    } else {
      console.log('Cancelled');
    }
  });
})();
</script>


<script id="jsbin-source-css" type="text/css">dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button {
  border: 1px solid rgba(0, 0, 0, 0.3);
  min-width: 10em;
  min-height: 2em;
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button:hover {
  font-weight: 700;
}
button.cancel {
  box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3);
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">(function() {
  'use strict';

  const updateButton = document.getElementById('updateDetails');
  const cancelButton = document.getElementById('cancel');
  const dialog = document.getElementById('favDialog');
  const favAnimal = document.getElementById('favAnimal');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {
    dialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {
    dialog.close('cancel');
  });

  dialog.addEventListener('close', function(event) {
    if (dialog.returnValue === 'confirm') {
      const selection = favAnimal.selectedOptions[0].childNodes[0].data;
      console.log(`${selection} was selected`);
    } else {
      console.log('Cancelled');
    }
  });
})();
</script></body>
</html>

## jsbin.guniho.css
dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button {
  border: 1px solid rgba(0, 0, 0, 0.3);
  min-width: 10em;
  min-height: 2em;
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

button:hover {
  font-weight: 700;
}
button.cancel {
  box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3);
}

## jsbin.guniho.js
'use strict';

(function () {
  'use strict';

  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var dialog = document.getElementById('favDialog');
  var favAnimal = document.getElementById('favAnimal');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function () {
    dialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function () {
    dialog.close('cancel');
  });

  dialog.addEventListener('close', function (event) {
    if (dialog.returnValue === 'confirm') {
      var selection = favAnimal.selectedOptions[0].childNodes[0].data;
      console.log(selection + ' was selected');
    } else {
      console.log('Cancelled');
    }
  });
})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	dialog {
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	}

	button {
	border: 1px solid rgba(0, 0, 0, 0.3);
	min-width: 10em;
	min-height: 2em;
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	}

	button:hover {
	font-weight: 700;
	}
	button.cancel {
	box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3);
	}
	</style>
	</head>
	<body>

	<!-- Simple pop-up dialog box, containing a form -->
	<dialog id="favDialog">
	<form method="dialog">
	<section>
	</section>
	<section>
	<p>
	<label for="favAnimal">Favorite animal:</label>
	<select id="favAnimal" name="favAnimal">
	<option></option>
	<option>Brine shrimp</option>
	<option>Red panda</option>
	<option>Spider monkey</option>
	</select>
	</p>
	</section>
	<menu>
	<button id="cancel" value="cancel">Cancel</button>
	<button type="submit" value="confirm">Confirm</button>
	</menu>
	</form>
	</dialog>

	<menu>
	<button id="updateDetails">Update details</button>
	</menu>

	<script id="jsbin-javascript">
	'use strict';

	(function () {
	'use strict';

	var updateButton = document.getElementById('updateDetails');
	var cancelButton = document.getElementById('cancel');
	var dialog = document.getElementById('favDialog');
	var favAnimal = document.getElementById('favAnimal');

	// Update button opens a modal dialog
	updateButton.addEventListener('click', function () {
	dialog.showModal();
	});

	// Form cancel button closes the dialog box
	cancelButton.addEventListener('click', function () {
	dialog.close('cancel');
	});

	dialog.addEventListener('close', function (event) {
	if (dialog.returnValue === 'confirm') {
	var selection = favAnimal.selectedOptions[0].childNodes[0].data;
	console.log(selection + ' was selected');
	} else {
	console.log('Cancelled');
	}
	});
	})();
	</script>


	<script id="jsbin-source-css" type="text/css">dialog {
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	}

	button {
	border: 1px solid rgba(0, 0, 0, 0.3);
	min-width: 10em;
	min-height: 2em;
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	}

	button:hover {
	font-weight: 700;
	}
	button.cancel {
	box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3);
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">(function() {
	'use strict';

	const updateButton = document.getElementById('updateDetails');
	const cancelButton = document.getElementById('cancel');
	const dialog = document.getElementById('favDialog');
	const favAnimal = document.getElementById('favAnimal');

	// Update button opens a modal dialog
	updateButton.addEventListener('click', function() {
	dialog.showModal();
	});

	// Form cancel button closes the dialog box
	cancelButton.addEventListener('click', function() {
	dialog.close('cancel');
	});

	dialog.addEventListener('close', function(event) {
	if (dialog.returnValue === 'confirm') {
	const selection = favAnimal.selectedOptions[0].childNodes[0].data;
	console.log(`${selection} was selected`);
	} else {
	console.log('Cancelled');
	}
	});
	})();
	</script></body>
	</html>