adKMNb

adKMNb.markdown

adKMNb

Forked from Captain Anonymous's Pen QyMWax.

A Pen by Ben Damman on CodePen.

License.

index.html

<div id="app"></div>

script.js

function blank(value, reveal) {
  return reveal ? value : '_____';
}

function EmailAddress(props) {
  var names = ['jerry', 'olivia', 'brian', 'steve'];
  var user = names.map(function(n) { return n[0] }).join('');
  var address = blank(`${user}@${props.domain}`, true);
  
  return <em>{address}</em>;
}

function Subject(props) {
  return <em>{props.word || blank()}</em>;
}

var Container = React.createClass({
  getInitialState: function() {
    return {word: blank()};
  },
  
  componentDidMount: function() {
    var bugger = this.refs.bugger
    setTimeout(function() { bugger.click(); }, 1500);
  },
  
  unblankify: function(e) {
    this.setState({word: e.target.innerText});
  },
  
  render: function() {
    return (
      <div>
        <h3>Thanks for your interest in working at Real HQ!</h3>
        <p>
          To learn more or to apply, send an email to <EmailAddress domain="realhq.com" /> and include <Subject word={this.state.word} /> in the subject line. Also, let us know how you found this job posting. We won’t dictate the format of your application beyond that, so be thoughtful and creative. The application process will include several interviews, a remote pairing session or coding assignment, and a final, in-person interview (we’ll fly to you). Oh, and step one is modifying the code on this page (there may be <span ref="bugger" onClick={this.unblankify}>bugs</span>) to fill in the blanks above. ;-)
        </p>
        <p>
          Thanks for looking, and good luck!
        </p>
      </div>
    );
  }
});

ReactDOM.render(<Container />, document.getElementById('app'));

scripts

<script src="https://fb.me/react-0.14.6.min.js"></script>
<script src="https://fb.me/react-dom-0.14.6.min.js"></script>

style.css

em {
  text-decoration: underline;
  font-style: normal;
}