<div id="container">
  <h1>SpongeBob Meme Generator</h1>
</div>

#container {
  box-sizing: border-box;
  left: 50%;
  max-width: 502px;
  min-width: 200px;
  padding: 5%;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  top: 50%;
  width: 100%;
  padding: calc(10px);
  width: calc(100% - 20px);
}

#container > * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

#container h1 {
  font-family: Arial, sans-serif;
}

const memeGenerator = function(element) {
  
  // actual code of the challenge
  let formatText = function(message) {
    return message.split(" ")
                  .map(function(el) {
                    return el.split('')
                             .map(function(letter, idx) {
                               return idx % 2 === 0 ? letter.toLowerCase() : letter.toUpperCase();
                             })
                             .join('');
                  })
                  .join(' ')
  }
  
  // generate the elements in the meme generator
  const textarea = document.createElement("textarea");
  const canvas = document.createElement("canvas");
  textarea.style = "font-size: 20px; line-height: 25px; height: 50px;";
  textarea.placeholder = "Write your text here";
  element.appendChild(textarea);
  element.appendChild(canvas);

  // set up the canvas
  canvas.width = 502;     // actual image width
  canvas.height = 353;    // actual image height
  const ctx = canvas.getContext("2d");

  // load the image in the background
  const background = new Image();
  background.src = "https://i.imgflip.com/1otk96.jpg";
  background.onload = function(){
    ctx.drawImage(background, 0, 0);   
  }
  
  textarea.addEventListener("input", function() {
    const lines = formatText(this.value).split("\n");
    canvas.width = canvas.width;
    ctx.drawImage(background, 0, 0); 
    ctx.textAlign = "center";
    ctx.font = "50px Impact,sans-serif";
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.lineWidth = "2";
    for (let x = 1; x <= lines.length; x++) {
      ctx.fillText(lines[x-1], 251, 50 * x);
      ctx.strokeText(lines[x-1], 251, 50 * x);
    }
    
  });
}

const mg = document.querySelector("#container");
memeGenerator(mg);