twalk4821/CROmetrics.apply

## CROmetrics.apply
# 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:

- www.bacondelivery.com/weekly-bacon-delivery/
- www.bacondelivery.com/daily-bacon-delivery/
- www.bacondelivery.com/bacon-of-the-month-club/

Write a regular expression that will match the above URLs _and any similar pages_, but which _does not match_ the following:

- www.bacondelivery.com/ (the home page)
- www.bacondelivery.com/about/
- www.bacondelivery.com/contact-us/

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](http://uploads.crometrics.com/7P8x/4F9VmEDq.gif)

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)
 }
	# 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:

	- www.bacondelivery.com/weekly-bacon-delivery/
	- www.bacondelivery.com/daily-bacon-delivery/
	- www.bacondelivery.com/bacon-of-the-month-club/

	Write a regular expression that will match the above URLs _and any similar pages_, but which _does not match_ the following:

	- www.bacondelivery.com/ (the home page)
	- www.bacondelivery.com/about/
	- www.bacondelivery.com/contact-us/

	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](http://uploads.crometrics.com/7P8x/4F9VmEDq.gif)

	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)
	}