Treehouse Courses

TeamTreehouse_JS.md

JavaScript Loops, Arrays and Objects

---

The ReFactor Challenge

/* Improve an already existing JavaScript program by using loops and applying "DRY" programming principles.

var html = '';
//red = Math.floor(Math.random() * 256 ); Original Code
//green = Math.floor(Math.random() * 256 ); Original Code
//blue = Math.floor(Math.random() * 256 ); Original Code
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; // Original code
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';
//
//red = Math.floor(Math.random() * 256 );
//green = Math.floor(Math.random() * 256 );
//blue = Math.floor(Math.random() * 256 );
//rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
//html += '<div style="background-color:' + rgbColor + '"></div>';

document.write(html);
*/

// Create an empty variable html for the base
var html = '';
var rgbColor;

// Create a FUNCTION for the random value
function randomRGB(){
  return Math.floor(Math.random() * 256);
}

// Create a FUNCTION that product random RGB( value, value, value) so we can always re-use it anywhere
function randomColor(){

  // Create a SCOPE variable inside the FUNCTION with the CSS rule of RGB()
  var color = "rgb(";
  
  // Add the value from the FUNCTION randomRGB
  // Translate into color = color + randomRGB() + ",";
  // OR rgb( + randomRGB() + ,
  // This is first value for the RGB CSS rule
  color += randomRGB() + ',';
  // Add second value
  color += randomRGB() + ',';
  // Add third value and close the RGB CSS rule
  color += randomRGB() + ')';
  // Return the value
  return color;

}


// Create a FOR loop
for(var i = 0; i <=10; i++){
  // Call the GLOBAL variable of rgbColor and add in the FUNCTION randomColor
  rgbColor = randomColor();
  // Add in HTML value for the empty variable html
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

// Create a FUNCTION print
function print(message){

  document.write(message);

}

print(html);

Build a Quiz challenge

/* Use loops and an array to create a quiz application, that tracks the number of quiz questions answered correctly. */

// Create a variable ARRAY with questions
var qs = [
['2+2 ?' , 4], 
['colour of the sky?', 'blue']
];

// Create a base variable for counting the right answer
var correctA = 0;
var question;
var response;

// Create 2 empty array to store the answer
var correct = [];
var wrong = [];

for(var i = 0; i < qs.length; i++){
  question = qs[i][0];
  answer = qs[i][1];
  response = prompt(question);

  // Use IF statement to capture the correct number of answers
  
  if( response === answer){
    correct.push(question);
    correctA ++;
  
  } else {
  
    wrong.push(question);
  
  }
}

The Build an Object Challenge

// Use your knowledge of JavaScript objects to create an array of student data. Each student's information is represented by an object.
var students = [ 
  { 
    name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: '175',
    points: '16375'
  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    achievements: '55',
    points: '2025'
  },
  {
    name: 'John',
    track: 'Learn WordPress',
    achievements: '40',
    points: '1950'
  },
  {
    name: 'Trish',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

// Create an empty variable of message will hold a string of HTML that will build up in a loop
var message = " ";
// We will use the student variable in the loop to hold a studen object each time the loop runs
var studentData;

// Create a function to print to HTML
function print(message){

  var outPut = document.getElementById("output");
  outPut.innerHTML = message;
  
}


for (var i = 0; i < students.length; i++) {

  studentData = students[i];
  
  message += "<h2>Student: " + studentData.name + "</h2>";
  message += "<p>Track: " + studentData.track + "</p>";
  message += "<p>Achievements: " + studentData.achievements + "</p>";
  message += "<p>Points: " + studentData.points + "</p>";
  
}

The Student Record Search Challenge

/* Use your knowledge of arrays, objects and loops to create a program that searches a database of students for information on a individual student. */


var message = '';
var student;
var search;
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}


function getStudentReport (student) {
    var report = '<h2>Student: ' + student.name + '</h2>';
    report += '<p>Track: ' + student.track + '</p>';
    report += '<p>Points: ' + student.points + '</p>';
    report += '<p>Achievements: ' + student.achievements + '</p>';
    return report;
}

while(true) {

  search = prompt("Search student records: type a name or type quit to end");
  
  if(search === null || search.toLowerCase() === "quit"){
    break;
  }
  
  for (var i = 0; i < students.length; i += 1) {
    student = students[i];
    
    if( student.name === search ){
      message = getStudentReport(student);
      print(message);
    }
    

  }
  
}