cricketzone

Inspiration

busy lifestyle but I'm cricket fan who wanna know what's going on on the field

What it does

its a chrome extension which gives live score updates on currently going on matches

How we built it

The HTML document sets up a webpage titled "CricketZone" with a heading, an empty list for match data, and includes external files for styling (styles.css) and functionality (script.js).

The manifest file is for a Chrome extension. It includes the following details: name: The name of the extension ("CricketZone"). version: The version of the extension ("1.0.0"). description: A brief description of the extension ("How's the josh-o-meter today"). manifest_version: The version of the manifest file format being used (3). author: The author of the extension ("chanchal sharma"). action: Defines the default popup and title for the extension when its icon is clicked in the Chrome toolbar. The popup file is "index.html", and the title is "my chrome extension".

The JavaScript function, getMatchData, asynchronously fetches current cricket match data from an API. It processes the response by checking the status and extracting the match data. For each match, it formats the name, status, and score into HTML strings. If the match data is available, it updates the HTML of an element with the ID matches to display these details in a list. If an error occurs, it logs the error to the console. The function is then called to execute this process.

The CSS code styles the webpage by setting the font, background color, and basic layout for the body. It customizes an unordered list with the ID matches to have no list styles, padding, a centered layout, and a maximum width. Each list item within matches is given a background color, margins, padding, rounded borders, and a smooth transition effect for background and shadow changes on hover. Odd-numbered list items are styled with a slightly different background color for visual differentiation. Additionally, spans within list items are made bold and colored differently to stand out.

Challenges we ran into

I faced some issues with fetching the data using API but now i just fixed that issue.

What we learned

1.build a browser extension

1. new styling options in css
2. how to use my browser extension in my own browser ## What's next for cricketzone

Built With

• cricketdata.org
• css
• html
• javascript
• replit