CROmetrics Engineering Application

Thanks for your interest in working with us! To apply:

Create a "new gist" (link in github header once you're logged in) with the Raw Text of this .md file (do not fork this gist)
Answer the following questions in the spaces provided
Send an email to [email protected] and [email protected] that includes:
- A paragraph that tells us a little about yourself and why you are interested in this job
- A link to your Gist
- Your desired hourly rate and general availability
- A link to your LinkedIn/Twitter/whatever profile so we get a little more context
Once we receive your email and all looks well, we’ll reach out for next steps.
If you have any questions / concerns about the process please reach out to [email protected]. We're happy to address anything via phone before you apply.

Handling Clicks

Consider the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Custom click handler -->
  <script>
    window.myHandler = function() {
      console.log('I wrote a calculator program when I was 6');
    };
  </script>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    /* YOUR CODE HERE */
    
  </script>
</head>
<body>
  <script src="https://slow.com/takes-2-seconds-to-load.js"></script>
  <div id="myDiv">OMG Click me!</div>
  <script>
    $('#myDiv').click(myHandler);      
  </script>
</body>
</html>

Question 1:

What would you write in the YOUR CODE HERE section to add a click handler to the #myDiv element?

The handler should use console.log() to tell us something interesting about your development background, for example:

console.log('I know FORTRAN lol long story');.

Your response:

/* Question 1 Response Here */
select the div element, then add the handler
var $div = document.querySelector('#myDiv');
    $div.addEventListener('click', function() {
      console.log('I wrote a calculator program when I was 6')
      });

Question 2:

Rewrite your solution to Question 1. Make sure your console.log() executes every time a visitor clicks #myDiv, but do not add another handler.

Your response:

/* Question 2 Response Here */

The HTML and Javascript above is already set up to console log every time someone clicks the div.

Modifying an element

Question 3:

Write code in YOUR CODE HERE that replaces 'OMG Click me!' with another string of your choosing. Use requestAnimationFrame.

Your response:

/* Question 3 Response Here */

var $div = document.querySelector('#myDiv')
$div.innerHTML = "I enjoy writing Javascript."

Regex fu

Question 4:

Our client, bacondelivery.com, is launching a test on all product pages -- for example:

Write a regular expression that will match the above URLs and any similar pages, but which does not match the following:

Be sure that home page traffic containing query parameters is also excluded.

Your response:

/* Question 4 Regex Here */

new RegExp("www.bacondelivery.com/.bacon.")

Stylin'

Question 5:

Share a link to an original CodePen/JSFiddle that implements this:

Don't worry about pixel perfection; just eyeball it.

Your response:

/* Question 5 Link Here */

https://gist.github.com/twalk4821/9695e1257191f85583d5227365c8728f
https://codepen.io/twalk4821/pen/QgRKQy?editors=1111

jQueryin'

Question 6:

How could you improve the following code?

$(document).ready(function() {
  $('.foo #bar').css('color', 'red');
  $('.foo #bar').css('border', '1px solid blue');
  $('.foo #bar').text('new text!');
  $('.foo #bar').click(function() {
    $(this).attr('title', 'new title');
    $(this).width('100px');
  });

  $('.foo #bar').click();
});

Your response:

/* Question 6 Code/Comments Here */
The selectors for id do not require the descendant selectors, #bar is sufficient
Factor out the css and html into seperate files.

Brain Teasin

Question 7:

What code could run before the following statement that would make it evaluate to true?


'bc'.prefix('a') === 'abc';

Your response:

/* Question 7 Code/Comments Here */

String.prototype.prefix = function(string) {
  return string.concat(this)
 }

tomfuertes/CROmetrics.md

CROmetrics Engineering Application

Handling Clicks

Modifying an element

Regex fu

new RegExp("www.bacondelivery.com/.bacon.")

Stylin'

jQueryin'

Brain Teasin