Skip to content

Instantly share code, notes, and snippets.

@tomfuertes
Forked from twalk4821/CROmetrics.apply
Last active July 18, 2017 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomfuertes/15087b8b1d677866f92c902bac5e1131 to your computer and use it in GitHub Desktop.
Save tomfuertes/15087b8b1d677866f92c902bac5e1131 to your computer and use it in GitHub Desktop.
Application for CROmetrics remote work

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 tom@crometrics.com and chris@crometrics.com 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 tom@crometrics.com. 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:

Boxes with hover animation

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)
 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment