legion20 / lab-cricpro-scoreboard

ProGrad Lab | CricPro ScoreBoard

A Quick Introduction

Most Indians are madly in love with cricket. Remember? We all loved that moment when India lifted the world cup after 28 years. Even now, if you close your eyes and think of it, you can feel the adrenaline rushing through our veins.

Yes, that moment when MS Dhoni was on strike. Nuwan Kulasekara was the bowler. It was the second ball of the 49th over. India required four runs from 11. Kulasekara bowls a full ball and Dhoni winds up to deposit the ball into the stands at long on. At that very moment, a billion Indian fans cheered and celebrated. History was made. After 28 years, on April 2, 2011, India had finally won the World Cup after defeating Sri Lanka by six wickets in the finals.

Woah! what an exciting finale! A cricket fan would cherish that moment.

As a tribute to the Indian Cricket team, we at ProGrad wanted to build a ScoreBoard for our CricPro webiste. And we thought, who can do it better than our ProGrads?

What should you do

Fork this repo
Clone this repo
Practice JavaScript basics - operators, conditions, loops

How To Submit

Upon completion, run the following commands:

git add .
git commit -m "ProGrad ID"
git push origin master

And finally, create a pull request so your ProGrad Mentor (PM) can review your work.

Instructions

The starter-code contains all the files, images, and text content needed to create the scoreboard. The text is in the index.html, and a css file is created in main.css. Font to be used should be Nunito Sans. Remember to follow the best practices.

Progression 1: Set the mood

Use the background image and CricPro logo to recreate the atmosphere

Progression 2: Tabulate the scores

Now, using the data in the below expected output, tabulate the scores of our players.

Progression 3: Let the details Pop up

Once you have tabulated the scores, create a pop up which opens up on clicking a player's name.

Expected Output

Here is a screenshot of the expected output.

Happy Coding ❤️