A silly little countdown until ski season starts!
A Pen by Sam Dennon on CodePen.
Created
February 12, 2025 19:57
-
-
Save SamEureka/f9b7b28a1744818e65112044952ada66 to your computer and use it in GitHub Desktop.
If we make it!!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #yes |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment