DidYouWatchTheGame.com

Category: HTML, CSS, SCSS, JavaScript

Last updated: 11 September, 2018

Overview

I created DidYouWatchTheGame.com as I wanted a place to get the latest hockey scores and tables, with the option of watching highlights without knowing the score.

The website uses the NHL API to get the data and is written entirely in vanilla JavaScript.

The site uses both CSS Grid and Flexbox for it's styling, along with CSS variables, which allows the dynamic change of website colours to match those of the different teams. Go ahead and try it out by selecting different teams via the dropdown, or check these examples: Washington Capitals and Arziona Coyotes

Features

  • Dynamic colours for each team
  • Scores available on hover, HD highlights on click
  • Live game status of 'Match Day', 'Match Live' and 'Pre Game', for matches occuring that day
  • Timezone and date unique to viewer
  • Hash URL for easy bookmarking of favourite team