Skip to content

Commit 62f229e

Browse files
author
Kate
authored
Feedback on try tutorial (#516)
1 parent e396ec3 commit 62f229e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+274
-509
lines changed

‎docs/_data/try.yml‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,15 @@ toc:
66
create:
77
title: 1. Create
88
url: /try/create
9-
import:
10-
title: 2. Import
11-
url: /try/import
129
properties:
13-
title: 3. Properties
10+
title: 2. Properties
1411
url: /try/properties
1512
logic:
16-
title: 4. Logic
13+
title: 3. Logic
1714
url: /try/logic
1815
events:
19-
title: 5. Events
16+
title: 4. Events
2017
url: /try/events
2118
style:
22-
title: 6. Style
19+
title: 5. Style
2320
url: /try/style
24-

‎docs/_includes/projects/try/create/after/index.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<!doctype html>
2+
<html>
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
74
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
85
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
9-
<title>lit-element code sample</title>
6+
<title>LitElement Example</title>
107
</head>
118
<body>
129
<my-element></my-element>

‎docs/_includes/projects/try/create/after/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"index.html",
55
"index.ts"
66
],
7-
"title": "lit-element code sample",
8-
"description": "lit-element code sample",
7+
"title": "LitElement Example",
8+
"description": "LitElement Example",
99
"template": "typescript",
1010
"dependencies": {
1111
"lit-element": "latest",

‎docs/_includes/projects/try/create/after/my-element.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
/**
2-
* Try LitElement https://lit-element.polymer-project.org/try
3-
* Completed code for 1. Create
4-
*/
5-
6-
/**
7-
* DONE: Import the LitElement base class and html helper function.
8-
*/
91
import { LitElement, html } from 'lit-element';
102

11-
/**
12-
* DONE: Create a class for your element that extends the LitElement
13-
* base class.
14-
*/
153
class MyElement extends LitElement {
164
render() {
175
return html`
@@ -20,7 +8,4 @@ class MyElement extends LitElement {
208
}
219
}
2210

23-
/**
24-
* DONE: Register the new element with the browser.
25-
*/
2611
customElements.define('my-element', MyElement);

‎docs/_includes/projects/try/create/before/index.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<!doctype html>
2+
<html>
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
74
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
85
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
9-
<title>lit-element code sample</title>
6+
<title>LitElement Example</title>
107
</head>
118
<body>
9+
<p>TODO: Implement <code>my-element</code>!</p>
1210
<my-element></my-element>
1311
</body>
1412
</html>

‎docs/_includes/projects/try/create/before/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"index.html",
55
"index.ts"
66
],
7-
"title": "lit-element code sample",
8-
"description": "lit-element code sample",
7+
"title": "LitElement Example",
8+
"description": "LitElement Example",
99
"template": "typescript",
1010
"dependencies": {
1111
"lit-element": "latest",

‎docs/_includes/projects/try/create/before/my-element.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* Try LitElement https://lit-element.polymer-project.org/try
3-
* Starting code for 1. Create
4-
*/
5-
61
/**
72
* TODO: Import the LitElement base class and html helper function.
83
*/

‎docs/_includes/projects/try/events/after/index.html‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<!doctype html>
2+
<html>
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
74
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
85
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
9-
<title>lit-element code sample</title>
10-
6+
<title>LitElement Example</title>
117
</head>
12-
138
<body>
149
<my-element></my-element>
1510
</body>
16-
1711
</html>

‎docs/_includes/projects/try/events/after/manifest.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"title": "lit-element code sample",
3-
"description": "lit-element code sample",
42
"files": [
53
"my-element.js",
64
"index.html",
75
"index.ts"
86
],
7+
"title": "LitElement Example",
8+
"description": "LitElement Example",
9+
"template": "typescript",
910
"dependencies": {
1011
"lit-element": "latest",
1112
"@webcomponents/webcomponentsjs": "latest"
12-
},
13-
"template": "typescript"
13+
}
1414
}

‎docs/_includes/projects/try/events/after/my-element.js‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* Try LitElement https://lit-element.polymer-project.org/try
3-
* Completed code for 5. Events
4-
*/
5-
61
import { LitElement, html } from 'lit-element';
72

83
class MyElement extends LitElement {
@@ -15,29 +10,20 @@ class MyElement extends LitElement {
1510
}
1611
constructor() {
1712
super();
18-
this.message='Hello world! From my-element';
13+
this.message = 'Hello world! From my-element';
1914
this.myArray = ['an','array','of','test','data'];
2015
this.myBool = true;
2116
}
22-
2317
render() {
2418
return html`
2519
<p>${this.message}</p>
26-
<ul>
27-
${this.myArray.map(item => html`<li>${item}</li>`)}
28-
</ul>
29-
${this.myBool?
30-
html`<p>Render some HTML if myBool is true</p>`:
20+
<ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
21+
${this.myBool ?
22+
html`<p>Render some HTML if myBool is true</p>` :
3123
html`<p>Render some other HTML if myBool is false</p>`}
32-
33-
<!-- DONE: Add an event listener. -->
34-
<button @click="${this.clickHandler}">Click</button>
24+
<button @click=${this.clickHandler}>Click</button>
3525
`;
3626
}
37-
38-
/**
39-
* DONE: Implement an event handler.
40-
*/
4127
clickHandler(event) {
4228
console.log(event.target);
4329
this.myBool = !this.myBool;

0 commit comments

Comments
 (0)