Front-End Interview

First solve the exercises. Then, answer the questions about the code samples at the bottom of the JS pane.

by kpulkit29

HTML

<div class="container">
    <h2>Problem 1:</h2>
    <div class="problem-set">
      <span id="greeting">Hello, World!</span>
      <ul id="list">
          <li>First</li>
          <li class="comment">Second</li>
          <li>Third</li>
          <li>Fourth</li>
      </ul>
      <span class="comment">No comment.</span>
    </div>
    
    <h2>Problem 2:</h2>
    <div class="problem-set">
      <span id="foo"></span>
    </div>
    
    <h2>Problem 3:</h2>
    <div class="problem-set">
      <span id="do_something_1"></span>
      <br /><br />
      <span id="do_something_2"></span>
    </div>
    
</div>

CSS

/* Don't use CSS to complete these */
body { background-color: #eee; }
h2 { margin: 20px 0; }
.problem-set {
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #fafafa;
  padding: 20px;
  margin: 0 20px;
}

JavaScript

// Use Javascript to complete these exercises.
// The jQuery library is available, by try to use vanilla javascript if you're able.

// Problem 1:
// Change the text within the element with the id "greeting" to show "Goodbye, World!".

// Change the text color of the list item with the class "comment" to red.

// Change the text color of the last list item to blue.


/*******************/
document.getElementById('greeting').innerText =  'Goodbye, World!';

// Problem 2:
// Change this to set foo to true
var foo = false;
function define(x) {
	foo = true;
}
define(foo);
document.getElementById('foo').innerHTML = "'foo' is equal to '" + foo +"'.";


/*******************/


// Problem 3:
function DoSomething() {
	var x = false;
  this.x = x;
  // Write a method of DoSomething, called get_x, to return the value of x.
  
  
  // Write a method of DoSomething, called set_x, to set the value of x.
  // If you're able, allow the method to be chained so you can immediately use `get_x()`, like:
  // do_something.set_x(true).get_x();
  
}
DoSomething.prototype.set_x = function(val) {
	this.x = val;
  return this;
}

DoSomething.prototype.get_x = function() {
	return this.x;
}


var do_something = new DoSomething();

// Retrieve the value of x using `get_x()`
var old_x = do_something.get_x();

// Use `do_something.set_x()` to set x to true, 
// then use `do_something.get_x()` to retrieve the new value of x.
var new_x = do_something.set_x(17).get_x();





// Don't change these
document.getElementById('foo').innerHTML = "'foo' is equal to '" + foo +"'.";
document.getElementById('do_something_1').innerHTML = "'x' is equal to '" + old_x + "'";
document.getElementById('do_something_2').innerHTML = "Now, 'x' is equal to '" + new_x + "'";