Stuff

task1.css

/* Set the body style to be... */
body {
  /* Set background to be grey */
  background: #f5f5f5;
  /* Set the main font to be Helvetica, and to fall back to sans-serif. */
  font-family: Helvetica, sans-serif;
  /* Set the top padding to be 0px, and the padding on the right to be 5%. */
  padding: 0 5%;
}
/* Start style for the element with id "message" */
#message {
/* Set the background of the element to be white. */
  background: white;
/* Set the largest possible width for element to be 600px */
  max-width: 600px;
/* Centre all the text in the element. */
  text-align: center;
/* Set the top padding to be 1.5ems wide. */
/* The em unit is the width of one "m" as according the computer system settings. */
  padding: 1.5em;
/* Set the margin to be 3ems at the top, automatic at the right, and 1em at the bottom. */
  margin: 3em auto 1em;
  /* Set the top border to be a solid 5 pixel thick light grey broder. */
  border-top: 5px solid #ccc;
}
/* The styles for the h1 element inside of the element with id "message" */
#message h1 {
  /* Set the font colour to be dark grey */
  color: #666;
  /* Set the font to be not of a normal thickness. */
  font-weight: normal;
  /* Set only the bottom side of the element to have  */
  margin: 0 0 0.25em;
}
/* The styles for the paragraph element inside of the element with id "message" */
#message p {
  /* Set the top side to have a margin of 0. */
  margin: 0;
  /* Set the font colour to be a light grey. */
  color: #444;
}
/* The styles for the element with id "footer" */
#footer {
  /* Set the font size to 11 pixels high. */
  font-size: 11px;
  /* Set the font colour to be grey. */
  color: #999;
  /* Set the text to be centred. */
  text-align: center;
  /* Set the bottom margin to be 4em thick. */
  margin: 0 0 4em;
}
/* The styles for the element with id "result" */
#result {
  /* Set the text to be centred. */
  text-align: center;
}

task1.js

// Declare the function "roll", which is called by the button being pressed.
function roll() {
// Set the the shouldAppend variable to equal whether or not the checkbox is ticked. This will be a boolean(true or false) value.
  var shouldAppend = document.getElementById("append").checked;
// Set the dice variable to equal the selected dice value.
  var dice = document.getElementById("chooser").value;
// Declare the function "writeText" - This function writes the dice information text, taking into account whether or not the checkbox is checked.
  function writeText(result) {
// The variable message is set to a string, using the values of variables dice and result.
    var message = "You chose a " + dice + "-sided dice. It has a score of " + result + ".";
// If variable shouldAppend is true...
    if (shouldAppend) {
// Then prepend the message before the existing, content of the div with id "result".
      document.getElementById("result").innerHTML = message + "<br />" + document.getElementById("result").innerHTML;
    } else {
// Else...
// Set the div with id "result", to contain the message.
      document.getElementById("result").innerHTML = message;
// End if
    }
// End function
  };

// Start function doRandom
  function doRandom(top, bottom) {
// Return a random integer between the integer values top and bottom, inclusive.
// This works by using a random decimal number, multiplied by the top Number, with lower number added to it.
// This is then returned to the function or variable that utilised the function.
    return Math.floor((Math.random() * top) + bottom);
// End function
  };
// Start a switch statement, using the value of dice as the varied value.
  switch (dice) {
// If the selected dice is four-sided
    case "four":
// Generate a random number between one and four inclusive,
// then write a message to the "result" div with the dice info.
      writeText(doRandom(4, 1).toString());
// If the selected dice is six-sided
    case "six":
// Generate a random number between one and six inclusive,
// then write a message to the "result" div with the dice 
      writeText(doRandom(6, 1).toString());
// If the selected dice is twelve-sided
    case "twelve":
// Generate a random number between one and twelve inclusive,
// then write a message to the "result" div with the dice 
      writeText(doRandom(12, 1).toString());
// If no dice is selected...
    default:
// Write information to the div informing the user that no dice was selected.
      document.getElementById("result").innerHTML = "An error occured. No dice was selected.";
// End switch statement
  }
// End function
};

task2.css

/* Set the body style to be... */
body {
  /* Set background to be grey */
  background: #f5f5f5;
  /* Set the main font to be Helvetica, and to fall back to sans-serif. */
  font-family: Helvetica, sans-serif;
  /* Set the top padding to be 0px, and the padding on the right to be 5%. */
  padding: 0 5%;
}
/* Start style for the element with id "message" */
#message {
/* Set the background of the element to be white. */
  background: white;
/* Set the largest possible width for element to be 600px */
  max-width: 600px;
/* Centre all the text in the element. */
  text-align: center;
/* Set the top padding to be 1.5ems wide. */
/* The em unit is the width of one "m" as according the computer system settings. */
  padding: 1.5em;
/* Set the margin to be 3ems at the top, automatic at the right, and 1em at the bottom. */
  margin: 3em auto 1em;
  /* Set the top border to be a solid 5 pixel thick light grey broder. */
  border-top: 5px solid #ccc;
}
/* The styles for the h1 element inside of the element with id "message" */
#message h1 {
  /* Set the font colour to be dark grey */
  color: #666;
  /* Set the font to be not of a normal thickness. */
  font-weight: normal;
  /* Set only the bottom side of the element to have  */
  margin: 0 0 0.25em;
}
/* The styles for the paragraph element inside of the element with id "message" */
#message p {
  /* Set the top side to have a margin of 0. */
  margin: 0;
  /* Set the font colour to be a light grey. */
  color: #444;
}
/* The styles for the element with id "footer" */
#footer {
  /* Set the font size to 11 pixels high. */
  font-size: 11px;
  /* Set the font colour to be grey. */
  color: #999;
  /* Set the text to be centred. */
  text-align: center;
  /* Set the bottom margin to be 4em thick. */
  margin: 0 0 4em;
}
/* The styles for the element with id "result" */
#result {
  /* Set the text to be centred. */
  text-align: center;
}

task2.js

// Set the recentData variable to be an empty string.
var recentData = "";
// Start the function run()
function run () {
  var shouldAppend = document.getElementById("append").checked;
  // Start the doRandom() function.
  function doRandom(top, bottom) {
  // Return a random integer between the integer values top and bottom, inclusive.
  // This works by using a random decimal number, multiplied by the top Number, with lower number added to it.
  // This is then returned to the function or variable that utilised the function.
    return Math.floor((Math.random() * top) + bottom);
  // End function
  }
  //Start the generateAttributes() function
  function generateAttributes() {
    // Set the initial strength value to 10
    initialStrength = 10;
    // Set the initial skill value to 10
    initialSkill = 10;
    // Set strength value to be initialStrength plus a number is derived from a random number between 1 and 12 inclusive being divided by a random number between 1 and 4 inclusive, with the result being rounded down.
    strength = initialStrength + Math.floor(doRandom(12, 1) / doRandom(4, 1));
    // Set skill value to be initialSkill plus a number is derived from a random number between 1 and 12 inclusive being divided by a random number between 1 and 4 inclusive, with the result being rounded down.
   skill = initialSkill + Math.floor(doRandom(12, 1) / doRandom(4, 1));
   // Return an array with both the strength and skill values.
   return [strength, skill];
   // End function.
 };
 // Start the write() function. 
    function write(message) {
       // If variable shouldAppend is true...
       if (shouldAppend) {
       // Then prepend the message before the existing, content of the div with id "result".
      document.getElementById("result").innerHTML = message + "<br />" + document.getElementById("result").innerHTML;
    } else {
// Else...
// Set the div with id "result", to contain the message.
      document.getElementById("result").innerHTML = message;
// End if
    }
// End function
  };
/* Start character message generation function. */
        function character(p) {
        /* Return custom message with player name and attributes. */
          return "Player " + p.name + " has strength of " + p.attributes[0] + " and skill is " + p.attributes[1] + ".";
        /* End function */
        };
        // Start randomName1 function
        function randomName1(){
        // Show an array of names.
          names = ["Michale","Guillermo","Emory","Sal","Wilfredo","Arturo","Fred","Augustus","Wilbert"];
        // Randomly select and return a name from the array.
          return names[Math.floor(Math.random() * names.length)];
          // End function
        }
        // Start function randomName2
        function randomName2(){
        // Another array of names, different to the first set.
          names = ["Drew","Daron","Darryl","Timmy","Timothy","Carlton","Nickolas","Emmanuel","Ellis"];
          // Randomly select and return a name from the array.
          return names[Math.floor(Math.random() * names.length)];
          // End function
        }
        // Declare object char1.
        // This contains all the information for the first character, sourced by calling relevant functions.
        var char1 = {
          name: randomName1(),
          attributes: generateAttributes()
        };
        // Declare object char2.
        // This contains all the information for the second character, sourced by calling relevant functions.
        var char2 = {
          name: randomName2(),
          attributes: generateAttributes()
        };
        // Set the recentData variable to contain a plaintext information set about the character set.
        recentData = character(char1) + "\r\n" + character(char2);
        // Write out to the result div the information about the two characters, taking into account whether or not the user wishes to keep the old data.
        return write(character(char1) + "<br />" + character(char2) + "<hr />");
        // End function.
      };
      // Start the downloadData function.
      function downloadData(){
        // If there is no recently generated character set...
        if(recentData==""){
          // Tell the user to generate a character set.
          alert("Click 'generate', then you can download something.")
          // Else...
        } else {
          // Create a new blob data set with all of the plaintext recentData variable.
          var blob = new Blob([recentData], {type: "text/plain;charset=utf-8"});
          Use the saveAs library to download the plaintext blob files to the user.
          saveAs(blob, "task2-players.txt"); 
          // End if 
        }
        // End function
      }