diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md
index 73d3290ae52253d..36e5ece4f467e59 100644
--- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md
@@ -438,27 +438,7 @@ If you make a mistake, you can always reset the example with the "Reset" button.
 
 ```html hidden
 <h2>Live output</h2>
-<div class="output" style="height: 500px;overflow: auto;">
-  <label for="month">Select month: </label>
-  <select id="month">
-    <option value="January">January</option>
-    <option value="February">February</option>
-    <option value="March">March</option>
-    <option value="April">April</option>
-    <option value="May">May</option>
-    <option value="June">June</option>
-    <option value="July">July</option>
-    <option value="August">August</option>
-    <option value="September">September</option>
-    <option value="October">October</option>
-    <option value="November">November</option>
-    <option value="December">December</option>
-  </select>
-
-  <h1></h1>
-
-  <ul></ul>
-</div>
+<iframe id="output" width="100%" height="600px"></iframe>
 
 <h2>Editable code</h2>
 <p class="a11y-label">
@@ -488,7 +468,7 @@ function createCalendar(days, choice) {
   }
 }
 
-createCalendar(31,'January');
+createCalendar(31, 'January');
 </textarea>
 
 <div class="playable-buttons">
@@ -498,25 +478,6 @@ createCalendar(31,'January');
 ```
 
 ```css hidden
-.output * {
-  box-sizing: border-box;
-}
-
-.output ul {
-  padding-left: 0;
-}
-
-.output li {
-  display: block;
-  float: left;
-  width: 25%;
-  border: 2px solid white;
-  padding: 5px;
-  height: 40px;
-  background-color: #4a2db6;
-  color: white;
-}
-
 html {
   font-family: sans-serif;
 }
@@ -539,46 +500,29 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById("code");
 const reset = document.getElementById("reset");
 const solution = document.getElementById("solution");
-let code = textarea.value;
-let userEntry = textarea.value;
-
-function updateCode() {
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function () {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = jsSolution;
-  solution.value = "Show solution";
-  updateCode();
-});
-
-solution.addEventListener("click", function () {
-  if (solution.value === "Show solution") {
-    textarea.value = solutionEntry;
-    solution.value = "Hide solution";
-  } else {
-    textarea.value = userEntry;
-    solution.value = "Show solution";
-  }
-  updateCode();
-});
+const outputIFrame = document.querySelector("#output");
+const textarea = document.getElementById("code");
+const initialCode = textarea.value;
+let userCode = textarea.value;
 
-const jsSolution = `const select = document.querySelector('select');
-const list = document.querySelector('ul');
-const h1 = document.querySelector('h1');
+const solutionCode = `const select = document.querySelector("select");
+const list = document.querySelector("ul");
+const h1 = document.querySelector("h1");
 
-select.addEventListener('change', () => {
+select.addEventListener("change", () => {
   const choice = select.value;
 
   let days = 31;
-  if (choice === 'February') {
+  if (choice === "February") {
     days = 28;
-  } else if (choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
+  } else if (
+    choice === "April" ||
+    choice === "June" ||
+    choice === "September" ||
+    choice === "November"
+  ) {
     days = 30;
   }
 
@@ -586,26 +530,112 @@ select.addEventListener('change', () => {
 });
 
 function createCalendar(days, choice) {
-  list.innerHTML = '';
+  list.innerHTML = "";
   h1.textContent = choice;
   for (let i = 1; i <= days; i++) {
-    const listItem = document.createElement('li');
+    const listItem = document.createElement("li");
     listItem.textContent = i;
     list.appendChild(listItem);
   }
 }
 
-createCalendar(31,'January');`;
+createCalendar(31, "January");`;
 
-let solutionEntry = jsSolution;
+function outputDocument(code) {
+  const outputBody = `
+<div class="output" style="height: 500px; overflow: auto">
+  <label for="month">Select month: </label>
+  <select id="month">
+    <option value="January">January</option>
+    <option value="February">February</option>
+    <option value="March">March</option>
+    <option value="April">April</option>
+    <option value="May">May</option>
+    <option value="June">June</option>
+    <option value="July">July</option>
+    <option value="August">August</option>
+    <option value="September">September</option>
+    <option value="October">October</option>
+    <option value="November">November</option>
+    <option value="December">December</option>
+  </select>
 
-textarea.addEventListener("input", updateCode);
-window.addEventListener("load", updateCode);
+  <h1></h1>
+
+  <ul></ul>
+</div>`;
+
+  const outputStyle = `
+.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4a2db6;
+  color: white;
+}
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}`;
+  return `
+<!doctype html>
+<html>
+  <head>
+    <style>${outputStyle}</style>
+  </head>
+  <body>
+    ${outputBody}
+    <script>${code}</script>
+  </body>
+</html>`;
+}
+
+function update() {
+  output.setAttribute("srcdoc", outputDocument(textarea.value));
+}
+
+update();
+
+textarea.addEventListener("input", update);
+
+reset.addEventListener("click", () => {
+  textarea.value = initialCode;
+  userEntry = textarea.value;
+  solution.value = "Show solution";
+  update();
+});
+
+solution.addEventListener("click", () => {
+  if (solution.value === "Show solution") {
+    // remember the state of the user's code
+    // so we can restore it
+    userCode = textarea.value;
+    textarea.value = solutionCode;
+    solution.value = "Hide solution";
+  } else {
+    textarea.value = userCode;
+    solution.value = "Show solution";
+  }
+  update();
+});
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
-
-textarea.onkeydown = function (e) {
+textarea.onkeydown = (e) => {
   if (e.keyCode === 9) {
     e.preventDefault();
     insertAtCaret("\t");
@@ -632,23 +662,9 @@ function insertAtCaret(text) {
   textarea.focus();
   textarea.scrollTop = scrollPos;
 }
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function () {
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if (solution.value === "Show solution") {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};
 ```
 
-{{ EmbedLiveSample('Active_learning_A_simple_calendar', '100%', 1110) }}
+{{ EmbedLiveSample('Active_learning_A_simple_calendar', '100%', 1210) }}
 
 ## Active learning: More color choices