Skip to content

Commit 7d42576

Browse files
committed
numbering
1 parent 9ce7300 commit 7d42576

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ Let's play with grabbing some data from an API and displaying it on a website. W
1313

1414
1. Open the `index.html` file in your browser and you should see a basic badge with the CodeYourFuture Codewars rank. The badge is a web component that is defined in the `codewars-badge.js` file.
1515

16-
Find the js module in the `index.html` file that links `codewars-badge.js`. This module defines a new HTML element called `<codewars-badge>`, which you can now use _just like any other HTML element_. (This is basically how all HTML elements are defined, it's just that the browser defines the default ones for us.)
16+
2. Find the js module in the `index.html` file that links `codewars-badge.js`. This module defines a new HTML element called `<codewars-badge>`, which you can now use _just like any other HTML element_. (This is basically how all HTML elements are defined, it's just that the browser defines the default ones for us.)
1717

18-
2. Open the `codewars-badge.js` file. The badge is defined as a class that extends the `HTMLElement` class. The `connectedCallback` method is called when the element is added to the DOM. In this case it runs when the page loads. This callback is where we (a) make the request to the Codewars API and then (b) render the data we get back.
18+
3. Open the `codewars-badge.js` file. The badge is defined as a class that extends the `HTMLElement` class. The `connectedCallback` method is called when the element is added to the DOM. In this case it runs when the page loads. This callback is where we (a) make the request to the Codewars API and then (b) render the data we get back.
1919

20-
3. Change the `username` variable in the `codewars-badge.js` file to your own Codewars username. Save the file and refresh the page to see your own badge.
20+
4. Change the `username` variable in the `codewars-badge.js` file to your own Codewars username. Save the file and refresh the page to see your own badge.
2121

22-
4. [Look at this API directly](https://www.codewars.com/api/v1/users/CodeYourFuture) in your browser. It's just a URL - you can look at it. (Install a [JSON viewer extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) for your browser if you don't have one already. This will make it easier to read the data.)
22+
5. [Look at this API directly](https://www.codewars.com/api/v1/users/CodeYourFuture) in your browser. It's just a URL - you can look at it. (Install a [JSON viewer extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) for your browser if you don't have one already. This will make it easier to read the data.)
2323

24-
5. Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
24+
6. Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
2525

26-
6. Now try creating a _new_ web component that displays some data from a Codewars API. There are several documented Codewars APIs you can play with. Use the `codewars-badge.js` file as a template for how to define a web component. You can use the `index.html` file to test your new component.
26+
7. Now try creating a _new_ web component that displays some data from a Codewars API. There are several documented Codewars APIs you can play with. Use the `codewars-badge.js` file as a template for how to define a web component. You can use the `index.html` file to test your new component.
2727

2828
#### Remember: keep it simple!
2929

0 commit comments

Comments
 (0)