Realtime cricket scoreboard generator built with HTML5, CSS and Vanilla JS.
View the live demo: CricBook
-
Add players to both teams. You can also drag and drop players between teams.👲
-
Select total overs from the range element. (Default is 4 overs)
-
Do the toss. There are 3 options for the toss. Choose any one from the following:
- Let Team A to bat first
🏏 Team A - Let Team B to bat first
🏏 Team B - Let the system decide
🏏 Toss
- Let Team A to bat first
-
Once the toss is selected, we move into the scoreboard page.
-
You can change the team name by clicking the default name.
-
Once the innings begin, The system will ask for the opening batsmen and bowler. Select them.
-
Striker, Non-Striker and current Bowler will be highlighted with green, yellow and red colors respectively.
-
For each bowl, update the outcome using the controls.
-
Batsmen will automatically rotate strike on odd runs and end of overs. You can also manually rotate the strike with the controls.
-
After each wicket, the system will ask for how many runs were made in that ball and which batsmen got out. Select the appropriate answers.
-
Similarly after end of each over, the system will ask for the next bowler. Choose the bowler.
-
Batting team's innings will automatically end in case of All-Out and End-of-Overs. Then the chase begins.
-
After the chasing team's innings ends, the winner will be decided automatically based on cricket rules.
-
Repeat the same process for subsequent matches.
Just run the index.html in your browser.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.