Looping Code Tutorial, Active learning: Launch countdown!

MDN
#1

Final Solution: https://jsfiddle.net/api/mdn/

My solution lacks understanding of the while loop. Can any one review my script and offer tips for better understanding and possibly, tips on writing better questions for help?

 <script type="text/javascript">
        var output = document.getElementById('output');
        var para = document.querySelector('p');
        
        var info = "Countdown ";

        var i = 10; // intializer
        
        while (i > 0) {  // final-condition
            
    //            var info = 'Countdown ' 
            info += i;
            output.appendChild(para);
            para.textContent = info;
            
            
            
    //            info.textContent = info + '';
            
            output.insertAdjacentHTML('beforeend', '<br>')
            
            
            
        
            console.log('Countdown ' + i);
            i--; // final-expression
        }
Thi 
        
        if (i === 0) { 
                
            info = "Blast off!"
            output.appendChild(para)
            para.textContent = info;
            console.log("Blast off!");
            
            }
        
        
    </script>
#2

Reviewing the answer, I realize an error in not including var para = document.createElement('p'); in the while loop.

@chrisdavidmills any thoughts?

I reworked the code, below:

    var output = document.querySelector('.output');
    var para = document.createElement('p');
    output.appendChild(para);
    para.textContent = "Countdown";
    
    var i = 10; // intializer
    
    while (i >= 0) {  // final-condition
        
        para = document.createElement('p')
        output.appendChild(para);
        para.textContent = i;
        
        console.log('Countdown ' + i);
        i--; // final-expression
    }
    
    if (i === 0 || i < 0) { 
            
        info = "Blast off!"
        output.appendChild(para)
        para.textContent = info;
        console.log("Blast off!");
        
        }
#3

I think the link to the final solution is wrong. Would you mind double checking this?

Just a quick recommendation from my side, even though I’m usually not involved in this. However, I just felt like doing a code review :slight_smile:

If Discourse didn’t screw up with the formatting, I think the indentation is not quite correct on the last if (looks way better than the first iteration though!). The last paranthis should be on the same level as the “if” and you could get rid of the two empty lines between. The same goes with the first empty line in the “while”. These are minor things, but make it way easier to understand the code quicker by developers working on the same code base.

Now let’s look at the code itself and the logic. I’m not aware of the assignment, but I think this is a counter that changes and counts down on every line, right? If my assumption is true, I have the following feedback:

  • As para is a variable holding the first “Countdown” textContent, I’d suggest to use a new variable in the while to not override it. As it is, there is no sideeffect, but with a more complex task you might assume that the para variable is still what you assigned it to be
  • I think it might be faster (just a few ms or less) to set the .textContent before you append it to the output (would need to test this with a few million iterations) but I’m quite sure. This way the browser doesn’t need to render the whole thing again after adding it to the DOM. However, there might be engine optimizations exactly for that.
  • You don’t need the if statement below the while. You will be within the while loop as long as i>=0 holds true. Once that is not the case anymore (i=-1) the while loop is left and the other code gets executed. The i === 0 check will never hold true as it will always be -1. So you can leave out the whole check.
  • It’s nice to save the “Blast off” text in a variable, however that needs to be done with care. Any variable assignment that doesn’t have a “var” in front of it, is assigned to the global scope. This means that you would potentially overwrite any “info” variable that exists on the website, including any browser-provided variables there are on the “window” object. This could also be a, uncareful written, variable from another framework your website uses. More info

Happy to help further, I was looking for a possibility to improve my code reviewing skills :slight_smile:

Cheers,
Michael

1 Like
#4

Thanks, @mkohler for responding to @kaotikus. Chris is out until next week, so I’m glad someone else is responding :grin:

This assignment is part of the Looping code tutorial. The “Open in jsfiddle” button uses a macro to send the code to jsfiddle, which the link @kaotikus used didn’t include. You can see the suggested solution by clicking the “Show solution” button below the “starter” code.

@kaotikus: You’re doing great just by realizing that you don’t understand something! The next step might be to try to describe what’s different between the suggested solution and your code. For example, “I don’t understand why I have an extra if block, but I needed it to make the output look right.” Sometimes, just putting it into words is enough to make a lightbulb turn on in your head (like with the placement of the para statement). And if not, at least you’ve expressed more precisely what you’re confused about. :smile:

1 Like
#5

I see, will dive further into that part :slight_smile:

1 Like
#6

Thank you @mkohler and @jswisher. I understand the while…loop solution a bit better.

#7

I am back from vacation now. Thanks for diving into this, @mkohler and @jswisher !

@kaotikus, let me know if you still have any confusion about the provided solution. There are always multiple right answers, so my solution is not necessarily the only one!

1 Like
#8

Hello,

I’m working through loops in MDN and have seen the solution to this task - which makes sense to me, however my attempt gets stuck in a continues loop and crashes the browser and I was hoping someone could read it and point out why this happens and why my attempt doesn’t get the desired outcome? My code is as follows:

let output = document.querySelector(’.output’);
output.innerHTML = ‘’;

for (let i = 10;i > 0; i–) {
if (i = 10) {
const para = document.createElement(‘p’);
para.textContent = ‘Countdown 10’ ;
output.appendChild(para);
} else if (i = 0){
const para = document.createElement(‘p’);
para.textContent = ‘Blast off!’ ;
output.appendChild(para);
} else {
const para = document.createElement(‘p’);
para.textContent = i ;
output.appendChild(para);
}
}

Many thanks

Richard

#9

I now see that my code was breaking because I was using = instead of ===

#10

I’ve now amended my code so the the exit condition within the for loop is i > -1 and it works fine, although I’m using a for loop instead of a while loop in the pre-built solution. I’m just wondering what the benefit of using a while loop over a for loop us in this particular scenario? My updated code is below:

let output = document.querySelector(’.output’);
output.innerHTML = ‘’;

for (let i = 10;i > -1; i–) {
if (i === 10) {
const para = document.createElement(‘p’);
para.textContent = 'Countdown ’ + i ;
output.appendChild(para);
} else if (i === 0){
const para = document.createElement(‘p’);
para.textContent = ‘Blast off!’ ;
output.appendChild(para);
} else {
const para = document.createElement(‘p’);
para.textContent = i ;
output.appendChild(para);
}
}

Many thanks

Richard

#11

Hi @richardanlezarklee! Nice work, this looks good to me.

One small thing — you could replace i > -1 with i >= 0 in the exit condition, for slightly more intuitive code.

As far as I know, there is no real benefit to using while rather than for. It is whatever style you prefer.

#12

Thank you for your help