Meal Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Challenge</title>
    <style>
    body {
     font-family: Arial, sans-serif;
     background-color:#afb2e4;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 50vh;
    }

    .container {
     text-align: center;
    }
   </style>
    <pre><code>
<html>

<head>
  <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="stylesheet.css" />
  <script> src = "../Bootstrap/js/bootstrap.bundle.min.js"; </script>
  <title>Comment Post</title>
  <script>

   let ps = ["Chunky Peanut Butter", "Strawberry Jam", "two slices of bread"];
   let ham = ["Buns", "Meat", "Onions", "Tomatoes", "Lettuce", "Ketchup", "Mushrooms"];
   let salad = ["Chicken", "Strawberries", "Spinach", "Roman Lettuce", "Walnuts", "Honey"];   

   let array = [ps, ham, salad];

   function picker() {
    var rand = Math.floor(Math.random() * array.length);
    var list = document.getElementById("ing");
    
    list.innerHTML = "";
    for (var i = 0; i < array[rand].length; i++) {
     let li = document.createElement('li');
     li.innerText = array[rand][i];
     list.append(li);
    }
   }

    function meals(e) {
      var list = document.getElementById("ing");
      if (e.value == "pbs") {
        list.innerHTML = "";
        for(var i = 0; i < ps.length; i++) {
          let li = document.createElement('li');
          li.innerText = ps[i];
          list.append(li);
        }
      }
      else if (e.value == "ham") {
       list.innerHTML = "";
       for (var i = 0; i < ham.length; i++) {
        let li = document.createElement('li');
        li.innerText = ham[i];
        list.append(li);
       }
     }
     else if (e.value == "scs") {
      list.innerHTML = "";
      for (var i = 0; i < salad.length; i++) {
       let li = document.createElement('li');
       li.innerText = salad[i];
       list.append(li);
      } 
     } 
    } //end meals function 
    
  </script>
</head>

<body>
 <div class="container">
  <p>What do you want to eat:</p>
  <select onchange="meals(this)">
    <option value="">Select a Meal</option>
    <option value="pbs">Peanut Butter Sandwhich</option>
    <option value="ham">Hamburger</option>
    <option value="scs">Strawberry Chicken Salad</option>
  </select>
   <br><br>
   Ingredients:
   <ul id="ing"></ul>
   <input onclick="picker()" type="button" value="Select a Meal" />
  </div>

</body>


</html>