Skip to content

Commit c4c5f0a

Browse files
SallyMcGrathSallyMcGrath
committed
stub basic project
- example custom html element - index file display - readme with project exploring defining a custom element and interacting with a simple public API
1 parent 26b534f commit c4c5f0a

4 files changed

Lines changed: 140 additions & 104 deletions

File tree

‎.gitignore‎

Lines changed: 5 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,6 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
1+
# DS Store
2+
**/.DS_Store
83

9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
52-
53-
# Optional eslint cache
54-
.eslintcache
55-
56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
61-
62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
4+
#VsCode
5+
.vscode
6+
**/.vscode

‎README.md‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,68 @@
11
# Codewars-Integration
2-
Building integrations with the Codewars API
2+
3+
Let's play with grabbing some data from an API and displaying it on a website. We will be using the the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to make requests to the [Codewars API](https://dev.codewars.com/#get-user) and the [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components) to display the data we get back. Let's go!
4+
5+
## Learning Objectives
6+
7+
- Explain how components are used in web development
8+
- Adapt an existing web component to show your own data
9+
- Extend this web component to present more data from the Codewars API
10+
- Create a new web component that presents data from the Codewars API
11+
12+
## Requirements, Steps, and Acceptance Criteria
13+
14+
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.
15+
16+
The badge is imported as a js module in the `index.html` file. This module defines a new HTML element called `<codewars-badge>`, which can be used 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.)
17+
18+
2. Open the `codewars-badge.js` file. The badge is defined as a class that extends the `HTMLElement` class. This is how web components are defined. The `connectedCallback` method is called when the element is added to the DOM. This is where we (a) make the request to the Codewars API and then (b) render the data we get back.
19+
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.
21+
22+
4. Look at this API directly in your browser: https://www.codewars.com/api/v1/users/CodeYourFuture. (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.)
23+
24+
5. There's lots of other possible data we could display in the badge. Now try adding some more data to the badge. You can find the documentation for the Codewars API here: https://dev.codewars.com/#get-user
25+
26+
6. Now try creating a new web component that displays some data from a Codewars API. There are several documented APIs you can try out. 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.
27+
28+
#### Remember: keep it simple!
29+
30+
You don't need to make a full web app. Just make a web component that displays some data from the Codewars API. 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 element.
31+
32+
## Acceptance Criteria
33+
34+
- [ ] I have explained how components are used in web development in my own words
35+
- [ ] I have adapted an existing web component to show my own data
36+
- [ ] I have extended this web component to present more data from the Codewars API
37+
- [ ] I have created a new web component that presents data from the Codewars API in my own way
38+
- [ ] I have run Lighthouse on my components and my Accessibility score is 100
39+
40+
## Resources
41+
42+
<details>
43+
<summary>Fetch API</summary>
44+
Fetch API is a way for computer programs (like websites) to talk to each other and share information.
45+
46+
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.
47+
48+
=> https://developer.mozilla.org/en-US/docs/Web/API/fetch
49+
50+
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!
51+
52+
</details>
53+
<details>
54+
<summary>Web Component</summary>
55+
56+
### What is a web component?
57+
58+
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](https://www.webcomponents.org/introduction).
59+
60+
### ...What is a component?
61+
62+
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.
63+
64+
### Are all websites built with web components?
65+
66+
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.
67+
68+
</details>

‎codewars-badge.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// This native web component fetches data from the Codewars API and renders it as a badge
2+
// Here is some information about web component https://developer.mozilla.org/en-US/docs/Web/Web_Components
3+
// Here is the link to the Codewars API Docs: https://dev.codewars.com/#get-user
4+
5+
class CodeWarsBadge extends HTMLElement {
6+
constructor() {
7+
super();
8+
this.attachShadow({ mode: "open" });
9+
this.userName = "CodeYourFuture";
10+
this.userData = [];
11+
}
12+
13+
connectedCallback() {
14+
this.fetchActivity()
15+
.then(() => {
16+
this.render();
17+
})
18+
.catch((error) => {
19+
console.error(error);
20+
});
21+
}
22+
23+
// fetch the data from the Codewars API
24+
async fetchActivity() {
25+
const response = await fetch(
26+
`https://www.codewars.com/api/v1/users/${this.userName}`
27+
);
28+
const data = await response.json();
29+
this.userData = data; // set the userData property with the fetched data
30+
}
31+
32+
render() {
33+
this.shadowRoot.innerHTML = `
34+
<style>
35+
:host {
36+
--rank: ${this.userData.ranks.overall.color};
37+
font: 600 100%/1 system-ui, sans-serif;
38+
}
39+
data {
40+
color: var(--rank);
41+
border: 3px solid;
42+
padding: .25em .5em;
43+
}
44+
</style>
45+
<data value="${this.userData.ranks.overall.score}">
46+
${this.userData.ranks.overall.name}
47+
</data>`;
48+
}
49+
}
50+
51+
customElements.define("codewars-badge", CodeWarsBadge);

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en-gb">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>Codewars Badge</title>
7+
<meta
8+
name="description"
9+
content="Extending HTML to create a new component"
10+
/>
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
12+
</head>
13+
<body>
14+
<codewars-badge></codewars-badge>
15+
<script async defer type="module" src="./codewars-badge.js"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)