_readme.md

The code below asks the user how many eggs they would like, ensures they enter a value, and renders a number of egg images matching the entered value. Update this code to ask the user how many dozens of eggs they would like, and render the one-dozen.gif image instead.

index.html

How many eggs would you like: <input> <span></span><br />
<script src="main.js"></script>

main.js

document.querySelector('input').onkeyup = function (e) {
  e.preventDefault();
  
  var val = e.target.value;
  
  if (!is_valid(val)) {
    show_error('Please enter a number');
    return;
  }

  hide_error();
  save(val);
};

function is_valid (val) {
  if (val.length > 0) {
    return true;
  }
  return false;
}

function show_error (msg) {
  var $error = document.querySelector('span');
  $error.textContent = msg;
}

function hide_error () {
  document.querySelector('span').textContent = '';
}

function save (eggs) {
  var $img;
  while ($img = document.querySelector('img')) {
    $img.parentNode.removeChild($img);
  }

  for (var i = 0; i < eggs; i++) {
    var $egg = document.createElement('img');
    $egg.src = 'one-egg.png';
    document.body.appendChild($egg);
  }
}

one-dozen.gif

one-egg.png