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). Please name your gist a crometrics-application.md so that it's formatted correctly (not a .txt file)
Answer the following questions in the spaces provided
Send an email to [email protected], [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 and/or Twitter 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('Click!');
    };
  </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:

/* document.getElementsByClassName('#myDiv')[0]
        .addEventListener('click', function (event) {
        console.log('I am learning coding mid-career and am psyched!');
            // do something
        });
*/

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:

/* $(document).on('click', '#myDiv', function(){
    console.log('Trying to figure out JavaScript');
});
 */

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:

/* window.anotherString = function(time){
    var thrilled = '!'.repeat(Math.floor(time/50) % 10)
    $('#myDiv').text('I think Javascript could be cool' + thrilled);
    requestAnimationFrame(replaceString);
};

requestAnimationFrame(anotherString); */

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:

/* var regex_fu = /^(www.bacondelivery.com(?!\/$|\/about\/|\/contact-us\/)\/.+)/gm */

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:

/* https://jsfiddle.net/pamb/2gtar014/9/ */

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:

/* Use less JavaScript and focus on using HTML and CSS.  

  <div class="foo"><div id="bar">new text!</div></div>

  Move as much styling to asset CSS file.

  .foo #bar {
    color:red;
    border:1px solid blue;
  }

  Keep the click handler and the click call and chain them together.

  $('.foo #bar').click(function() {
                    $(this).attr('title', 'new title').width('100px');
                }).click();
*/

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:

/* String.prototype.prefix = function(string){
                    return string + this;
   } */

PamBWillenz/crometrics-application.md

CROmetrics Engineering Application

Handling Clicks

Modifying an element

Regex fu

Stylin'

jQueryin'

Brain Teasin