Let's play with grabbing some data from an API and displaying it on a website. We will be using the the Fetch API to make requests to the Codewars API and the Web Components API to display the data we get back. Let's go!
- Explain how components are used in web development
- Adapt an existing web component to show your own data
- Extend this web component to present more data from the Codewars API
- Create a new web component that presents data from the Codewars API
-
Open the
index.htmlfile 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 thecodewars-badge.jsfile. -
Find the js module in the
index.htmlfile that linkscodewars-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.) -
Open the
codewars-badge.jsfile. The badge is defined as a class that extends theHTMLElementclass. TheconnectedCallbackmethod 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. -
Change the
usernamevariable in thecodewars-badge.jsfile to your own Codewars username. Save the file and refresh the page to see your own badge. -
Look at this API directly in your browser. It's just a URL - you can look at it. (Install a JSON viewer extension for your browser if you don't have one already. This will make it easier to read the data.)
-
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 to help you.
-
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.jsfile as a template for how to define a web component. You can use theindex.htmlfile to test your new component.
You don't need to make a full web app. Just make a web component that displays some data from the Codewars API. Explore and get creative. If your component gets complicated, break it down into smaller components and compose them on the page, just as you would do with any other HTML elements.
- I have adapted an existing web component to show my own data
- I have extended this web component to present more data from the Codewars API
- I have created a new web component that presents data from the Codewars API in my own way
- I have tested my page with Lighthouse and my Accessibility score is 100
- I have opened a pull request with my changes to this repo
- I have explained how components are used in web development, in my own words, in my pull request message
Fetch API
Fetch API is a way for computer programs (like websites) to talk to each other and share information.Think of Fetch as your new puppy. Send fetch to an API and tell it to fetch you some data. Fetch! Then await your response. Fetch will dash back to you, panting, with the data you requested, or an error if something went wrong. This is your response. Stuff that response into a variable and do whatever you want with it.
=> https://developer.mozilla.org/en-US/docs/Web/API/fetch
This is how your Codewars progress is tracked automatically by CYF. We use the Fetch API to make requests to the Codewars API and then we record your points in the trainee tracker. You could make your own tracker if you wanted to!
Web Component
If you want HTML to do something that it doesn't do by default, you can write your own custom HTML element. This is called a web component.
A component is a reusable, self-contained piece of code. Components are like lego blocks you can build websites with. Most websites are made by "composing" components in this way.
Nope! React components are written with React, Twig components are written with Twig, etc. Components are not a specific technology, they are a concept. Everywhere in programming we look to break down our code into small, reusable pieces. Web components are a way to do this with HTML.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent