If we make it!!!

if-we-make-it.markdown

If we make it!!!

A silly little countdown until ski season starts!

A Pen by Sam Dennon on CodePen.

License.

index.pug

#yes

script.babel

const Component = React.Component;

class Awesome extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clock: ''
    };
    this.now = this.now.bind(this);
  }

  now() {
    const time = moment().format('h:mm:ss');
    return this.setState({
      clock: time
    });
  }

  componentDidMount() {
    this.timer = setInterval(this.now, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  componentDidUpdate() {
    componentHandler.upgradeDom();
  }
  
  // Want to count down a different date? Change string variable in Date method
  getDiff(r) {
    const happy = new Date('01-20-2028'.replace(/-/g, "/"));
    const now = new Date();
    const boom = moment.range(now, happy);   
    return boom.diff(r);
  }

  render() {
    return (<div>
        <div className="card-wide mdl-card mdl-shadow--2dp">
          <div className="mdl-card__title">
            <h4 className="mdl-card__title-text">Today is {moment().format('MMMM Do, YYYY h:mm:ss a')}</h4>
        </div>
        <div className="mdl-card__supporting-text"><div>There are  roughly {' '}{this.getDiff('weeks')} {' '}
          {this.getDiff('weeks') < 2 ? "week " : "weeks "}, {' '}</div>
        <div>
          close to {this.getDiff('days')} {' '} 
          days or, {' '}
        </div>
        <div>{this.getDiff('hours')} {' '} 
        hours or, {' '}</div>
        <div>{this.getDiff('minutes')} {' '} 
        minutes or, {' '}</div>
        <div>exactly {this.getDiff('seconds')} {' '} 
          seconds until... <hr/><div className="smile">🤞 + 🗳️ = 🏆 </div></div></div>
 
  </div>
</div>);
  }
}

ReactDOM.render(
  <Awesome />,
  document.getElementById('yes')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.0/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/2.1.0/moment-range.min.js"></script>

style.css

/*  
  Available Google fonts: 
  Source Code/Sans/Serif Pro,
  Roboto
*/


body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #CDF;
}

/* Material Mods
========================*/
.card-wide.mdl-card {
  width: 512px;
}

@media (max-width: 524px) {
  .card-wide.mdl-card {
  width: 90vw;
}
}

.card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/White_House%2C_Blue_Sky.jpg') center / cover;
}

.mdl-card__title-text {
  font-family: 'Roboto';
  font-size: 2.4rem;
  text-shadow: 1px 2px 3px #444;
}

.card-wide > .mdl-card__menu {
  color: #fff;
}

.mdl-card__supporting-text {
  font-size: 1.5rem;
  line-height: 1.6rem;
}

.smile {
  font-size: 4rem;
  line-height: 5rem;
  text-align: center;
  cursor: default;
}

styles

<link href="https://code.getmdl.io/1.1.3/material.grey-indigo.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />