<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <button type="button" onclick="dragonslayer()">Call DragonSlayer!</button>
   <br>
    <div id="result"></div>
  </body>

</html>
// Code goes here
function dragonslayer(){
var slaying = true;
var youHit = Math.floor(Math.random()*2);
var damageThisRound = Math.floor(Math.random() * 5 + 1);
var totalDamage = 0 ;
var result ="";

while(slaying){
    if(youHit){
        result = result + "<br>"+ "You hit the dragon and did " + damageThisRound + " damage!";
        totalDamage += damageThisRound ; 
        if(totalDamage >= 4){
             result = result + "<br>" +"that the player slew the dragon";
            slaying = false;
            }
        else {
            youHit = Math.floor(Math.random()*2);
            }    
        }
    else {
           result = result + "<br>" +"The dragon defeated you.";
        }
         slaying = false;
    }
    
    
    document.getElementById('result').innerHTML = slaying.toString() + " "+ youHit.toString()+" " + result ;
}
    
    



/* Styles go here */