refactor: move the days determination logic to the createCalendar fun…

…ction (mdn#35850)

files/en-us/learn/javascript/building_blocks/conditionals/index.md

@@ -429,10 +429,10 @@ In this example, you are going to help us finish a simple calendar application.
 - An `onchange` event handler to detect when the value selected in the `<select>` menu is changed.
 - A function called `createCalendar()` that draws the calendar and displays the correct month in the {{htmlelement("Heading_Elements", "h1")}} element.
 
-We need you to write a conditional statement inside the `onchange` handler function, just below the `// ADD CONDITIONAL HERE` comment. It should:
+We need you to write a conditional statement inside the `createCalendar()` function, just below the `// ADD CONDITIONAL HERE` comment. It should:
 
 1. Look at the selected month (stored in the `choice` variable. This will be the `<select>` element value after the value changes, so "January" for example.)
-2. Set a variable called `days` to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.
+2. Assign the `days` variable to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.
 
 Hints:
 
@@ -451,29 +451,31 @@ If you make a mistake, you can always reset the example with the "Reset" button.
 </p>
 
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
-const select = document.querySelector('select');
-const list = document.querySelector('ul');
-const h1 = document.querySelector('h1');
+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;
+  createCalendar(choice);
+});
 
-  // ADD CONDITIONAL HERE
+function createCalendar(month) {
+  let days = 31;
 
-  createCalendar(days, choice);
-});
+  // ADD CONDITIONAL HERE
 
-function createCalendar(days, choice) {
   list.textContent = "";
-  h1.textContent = choice;
+  h1.textContent = month;
   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');
+select.value = "January";
+createCalendar("January");
 </textarea>
 
 <div class="playable-buttons">
@@ -518,33 +520,34 @@ const h1 = document.querySelector("h1");
 
 select.addEventListener("change", () => {
   const choice = select.value;
+  createCalendar(choice);
+});
 
+function createCalendar(month) {
   let days = 31;
-  if (choice === "February") {
+
+  if (month === "February") {
     days = 28;
   } else if (
-    choice === "April" ||
-    choice === "June" ||
-    choice === "September" ||
-    choice === "November"
+    month === "April" ||
+    month === "June" ||
+    month === "September" ||
+    month === "November"
   ) {
     days = 30;
   }
 
-  createCalendar(days, choice);
-});
-
-function createCalendar(days, choice) {
   list.textContent = "";
-  h1.textContent = choice;
+  h1.textContent = month;
   for (let i = 1; i <= days; i++) {
     const listItem = document.createElement("li");
     listItem.textContent = i;
     list.appendChild(listItem);
   }
 }
 
-createCalendar(31, "January");`;
+select.value = "January";
+createCalendar("January");`;
 
 function outputDocument(code) {
   const outputBody = `