Skip to content

Commit 4db8c4e

Browse files
author
R. S. Doiel
committed
copyedits
1 parent e3a3de0 commit 4db8c4e

10 files changed

+98
-17
lines changed

‎htdocs/clock.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en-US">
33
<head>
4-
<title>Hello Clock</title>
4+
<title>Hello Clock Example</title>
55
<link rel="style" href="css/style.css">
66
<script type="module" src="modules/hello-clock.js"></script>
77
</head>

‎pagefind/fragment/en-US_1b81015.pf_fragment‎

5.23 KB
Binary file not shown.

‎pagefind/fragment/en-US_f8923fd.pf_fragment‎

5.17 KB
Binary file not shown.

‎pagefind/index/en-US_28bc947.pf_index‎

15 KB
Binary file not shown.

‎pagefind/index/en-US_d448e0d.pf_index‎

15.1 KB
Binary file not shown.

‎pagefind/pagefind-entry.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_63578d531d2ed","wasm":"en-US","page_count":5}}}
1+
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_a753b8ad5fea3","wasm":"en-US","page_count":5}}}

‎pagefind/pagefind.en-US_a753b8ad5fea3.pf_meta‎

126 Bytes
Binary file not shown.

‎pagefind/pagefind.en-US_b7e0af3c2ae6a.pf_meta‎

122 Bytes
Binary file not shown.

‎presentation2.html‎

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,8 @@ <h1>Part 2.1: The “Hello Clock” Web Component</h1>
241241
<div id="part-2.1-hello-clock.js-defines-the-web-component"
242242
class="slide section level1">
243243
<h1>Part 2.1: “hello-clock.js” defines the web component</h1>
244+
<p>Create <a
245+
href="https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/modules/hello-clock.js">htdocs/modules/hello-clock.js</a></p>
244246
<div class="sourceCode" id="cb2"><pre
245247
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" tabindex="-1"></a><span class="co">// Define our new element as a class</span></span>
246248
<span id="cb2-2"><a href="#cb2-2" tabindex="-1"></a><span class="kw">class</span> HelloClock <span class="kw">extends</span> <span class="bu">HTMLElement</span> {</span>
@@ -255,9 +257,38 @@ <h1>Part 2.1: “hello-clock.js” defines the web component</h1>
255257
<span id="cb2-11"><a href="#cb2-11" tabindex="-1"></a><span class="co">// This is how the browsers learns to use the new HTML element.</span></span>
256258
<span id="cb2-12"><a href="#cb2-12" tabindex="-1"></a>customElements<span class="op">.</span><span class="fu">define</span>( <span class="st">&#39;hello-clock&#39;</span><span class="op">,</span> HelloClock )<span class="op">;</span></span></code></pre></div>
257259
</div>
260+
<div id="part-2.1-now-lets-create-an-html-page-using-hello-clock"
261+
class="slide section level1">
262+
<h1>Part 2.1: Now lets create an HTML Page using “Hello Clock”</h1>
263+
<ul>
264+
<li><a
265+
href="https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/clock.html">htdocs/clock.html</a></li>
266+
</ul>
267+
<div class="sourceCode" id="cb3"><pre
268+
class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="#cb3-1" tabindex="-1"></a><span class="dt">&lt;!DOCTYPE</span> html<span class="dt">&gt;</span></span>
269+
<span id="cb3-2"><a href="#cb3-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="ot"> lang</span><span class="op">=</span><span class="st">&quot;en-US&quot;</span><span class="dt">&gt;</span></span>
270+
<span id="cb3-3"><a href="#cb3-3" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">head</span><span class="dt">&gt;</span></span>
271+
<span id="cb3-4"><a href="#cb3-4" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">title</span><span class="dt">&gt;</span>Hello Clock Example<span class="dt">&lt;/</span><span class="kw">title</span><span class="dt">&gt;</span></span>
272+
<span id="cb3-5"><a href="#cb3-5" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">link</span><span class="ot"> rel</span><span class="op">=</span><span class="st">&quot;style&quot;</span><span class="ot"> href</span><span class="op">=</span><span class="st">&quot;css/style.css&quot;</span><span class="dt">&gt;</span></span>
273+
<span id="cb3-6"><a href="#cb3-6" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">script</span><span class="ot"> type=</span><span class="st">&quot;module&quot;</span><span class="ot"> src</span><span class="op">=</span><span class="st">&quot;modules/hello-clock.js&quot;</span><span class="dt">&gt;&lt;/</span><span class="kw">script</span><span class="dt">&gt;</span></span>
274+
<span id="cb3-7"><a href="#cb3-7" tabindex="-1"></a> <span class="dt">&lt;/</span><span class="kw">head</span><span class="dt">&gt;</span></span>
275+
<span id="cb3-8"><a href="#cb3-8" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
276+
<span id="cb3-9"><a href="#cb3-9" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>Hello Clock Example<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
277+
<span id="cb3-10"><a href="#cb3-10" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">hello-clock</span><span class="dt">&gt;</span>Hi there!<span class="dt">&lt;/</span><span class="kw">hello-clock</span><span class="dt">&gt;</span></span>
278+
<span id="cb3-11"><a href="#cb3-11" tabindex="-1"></a> <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
279+
<span id="cb3-12"><a href="#cb3-12" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
280+
</div>
258281
<div id="part-2.1-fire-up-our-web-service-and-test-hello-clock"
259282
class="slide section level1">
260283
<h1>Part 2.1: Fire up our web service and test “Hello Clock”</h1>
284+
<pre class="shell"><code>dataset -debug recipes_api.yaml</code></pre>
285+
<p>Point your web browser at <a href="http://localhost:8001/clock.html"
286+
class="uri">http://localhost:8001/clock.html</a></p>
287+
</div>
288+
<div id="part-2.1-congradulations" class="slide section level1">
289+
<h1>Part 2.1: Congradulations</h1>
290+
<h2 id="youve-built-your-first-web-component">You’ve built your first
291+
Web Component!!!!</h2>
261292
</div>
262293
<div id="part-2.2-recipes-version-2" class="slide section level1">
263294
<h1>Part 2.2: Recipes version 2</h1>
@@ -339,13 +370,13 @@ <h1>Part 2.2: Fixing web form submission</h1>
339370
<h1>Part 2.2: Update the HTML for edit_recipe.html</h1>
340371
<p>Add the following at the bottom of the page before the
341372
<code>&lt;/body&gt;</code>.</p>
342-
<div class="sourceCode" id="cb6"><pre
343-
class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a href="#cb6-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">script</span><span class="ot"> type=</span><span class="st">&quot;module&quot;</span><span class="dt">&gt;</span></span>
344-
<span id="cb6-2"><a href="#cb6-2" tabindex="-1"></a> <span class="im">import</span> { saveRecipe } <span class="im">from</span> <span class="st">&#39;./modules/utils.js&#39;</span><span class="op">;</span></span>
345-
<span id="cb6-3"><a href="#cb6-3" tabindex="-1"></a> <span class="bu">document</span><span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">&#39;DOMContentLoaded&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
346-
<span id="cb6-4"><a href="#cb6-4" tabindex="-1"></a> <span class="kw">const</span> form <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">&#39;submit&#39;</span><span class="op">,</span> saveRecipe)<span class="op">;</span></span>
347-
<span id="cb6-5"><a href="#cb6-5" tabindex="-1"></a> })<span class="op">;</span></span>
348-
<span id="cb6-6"><a href="#cb6-6" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">script</span><span class="dt">&gt;</span></span></code></pre></div>
373+
<div class="sourceCode" id="cb8"><pre
374+
class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a href="#cb8-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">script</span><span class="ot"> type=</span><span class="st">&quot;module&quot;</span><span class="dt">&gt;</span></span>
375+
<span id="cb8-2"><a href="#cb8-2" tabindex="-1"></a> <span class="im">import</span> { saveRecipe } <span class="im">from</span> <span class="st">&#39;./modules/utils.js&#39;</span><span class="op">;</span></span>
376+
<span id="cb8-3"><a href="#cb8-3" tabindex="-1"></a> <span class="bu">document</span><span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">&#39;DOMContentLoaded&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
377+
<span id="cb8-4"><a href="#cb8-4" tabindex="-1"></a> <span class="kw">const</span> form <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">&#39;submit&#39;</span><span class="op">,</span> saveRecipe)<span class="op">;</span></span>
378+
<span id="cb8-5"><a href="#cb8-5" tabindex="-1"></a> })<span class="op">;</span></span>
379+
<span id="cb8-6"><a href="#cb8-6" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">script</span><span class="dt">&gt;</span></span></code></pre></div>
349380
</div>
350381
<div id="part-2.2-restart-datasetd-and-test"
351382
class="slide section level1">
@@ -432,15 +463,15 @@ <h1>Part 2.2: Getting the table populated, update
432463
<p>CSVTextarea has the ability to be updated from CSV text. Let’s do
433464
that.</p>
434465
<p>In <code>edit_recipe.js</code> you need to find this.</p>
435-
<div class="sourceCode" id="cb10"><pre
436-
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb10-1"><a href="#cb10-1" tabindex="-1"></a><span class="cf">if</span> (data[<span class="st">&quot;ingredients&quot;</span>] <span class="op">!==</span> <span class="kw">undefined</span>) {</span>
437-
<span id="cb10-2"><a href="#cb10-2" tabindex="-1"></a> ingredientsTextarea<span class="op">.</span><span class="at">innerHTML</span> <span class="op">=</span> data[<span class="st">&quot;ingredients&quot;</span>]<span class="op">;</span></span>
438-
<span id="cb10-3"><a href="#cb10-3" tabindex="-1"></a>}</span></code></pre></div>
466+
<div class="sourceCode" id="cb12"><pre
467+
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb12-1"><a href="#cb12-1" tabindex="-1"></a><span class="cf">if</span> (data[<span class="st">&quot;ingredients&quot;</span>] <span class="op">!==</span> <span class="kw">undefined</span>) {</span>
468+
<span id="cb12-2"><a href="#cb12-2" tabindex="-1"></a> ingredientsTextarea<span class="op">.</span><span class="at">innerHTML</span> <span class="op">=</span> data[<span class="st">&quot;ingredients&quot;</span>]<span class="op">;</span></span>
469+
<span id="cb12-3"><a href="#cb12-3" tabindex="-1"></a>}</span></code></pre></div>
439470
<p>And replace it with something like this.</p>
440-
<div class="sourceCode" id="cb11"><pre
441-
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb11-1"><a href="#cb11-1" tabindex="-1"></a><span class="cf">if</span> (data[<span class="st">&quot;ingredients&quot;</span>] <span class="op">!==</span> <span class="kw">undefined</span>) {</span>
442-
<span id="cb11-2"><a href="#cb11-2" tabindex="-1"></a> ingredientsTextarea<span class="op">.</span><span class="fu">fromCSV</span>(data[<span class="st">&#39;ingredients&#39;</span>])<span class="op">;</span></span>
443-
<span id="cb11-3"><a href="#cb11-3" tabindex="-1"></a>}</span></code></pre></div>
471+
<div class="sourceCode" id="cb13"><pre
472+
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb13-1"><a href="#cb13-1" tabindex="-1"></a><span class="cf">if</span> (data[<span class="st">&quot;ingredients&quot;</span>] <span class="op">!==</span> <span class="kw">undefined</span>) {</span>
473+
<span id="cb13-2"><a href="#cb13-2" tabindex="-1"></a> ingredientsTextarea<span class="op">.</span><span class="fu">fromCSV</span>(data[<span class="st">&#39;ingredients&#39;</span>])<span class="op">;</span></span>
474+
<span id="cb13-3"><a href="#cb13-3" tabindex="-1"></a>}</span></code></pre></div>
444475
</div>
445476
<div id="part-2.2-test-and-debug" class="slide section level1">
446477
<h1>Part 2.2: Test and debug</h1>
@@ -572,6 +603,20 @@ <h1>Reference: CL-web-components</h1>
572603
class="uri">https://github.com/caltechlibrary/CL-web-components/issues</a>.</li>
573604
</ul>
574605
</div>
606+
<div id="reference-web-components" class="slide section level1">
607+
<h1>Reference: Web Components</h1>
608+
<ul>
609+
<li><a href="https://github.com/mdn/web-components-examples">MDN
610+
Examples on GitHub</a></li>
611+
<li><a
612+
href="https://github.com/scottaohara/accessible_components">Examples of
613+
Accessible Components</a></li>
614+
<li><a
615+
href="https://github.com/davatron5000/awesome-standalones">Awesome
616+
Standalones</a></li>
617+
<li><a href="https://design-system.w3.org/">W3C Design System</a></li>
618+
</ul>
619+
</div>
575620
<div id="reference-programming-languages" class="slide section level1">
576621
<h1>Reference: Programming Languages</h1>
577622
<ul>

‎presentation2.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ This will display something like, "Hi There! 09:27:23 GMT-0700 (Pacific Daylight
103103

104104
# Part 2.1: "hello-clock.js" defines the web component
105105

106+
Create [htdocs/modules/hello-clock.js](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/modules/hello-clock.js)
107+
106108
~~~javascript
107109
// Define our new element as a class
108110
class HelloClock extends HTMLElement {
@@ -118,9 +120,36 @@ class HelloClock extends HTMLElement {
118120
customElements.define( 'hello-clock', HelloClock );
119121
~~~
120122

123+
# Part 2.1: Now lets create an HTML Page using "Hello Clock"
124+
125+
- [htdocs/clock.html](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/clock.html)
126+
127+
~~~html
128+
<!DOCTYPE html>
129+
<html lang="en-US">
130+
<head>
131+
<title>Hello Clock Example</title>
132+
<link rel="style" href="css/style.css">
133+
<script type="module" src="modules/hello-clock.js"></script>
134+
</head>
135+
<body>
136+
<h1>Hello Clock Example</h1>
137+
<hello-clock>Hi there!</hello-clock>
138+
</body>
139+
</html>
140+
~~~
141+
121142
# Part 2.1: Fire up our web service and test "Hello Clock"
122143

144+
~~~shell
145+
dataset -debug recipes_api.yaml
146+
~~~
147+
148+
Point your web browser at <http://localhost:8001/clock.html>
123149

150+
# Part 2.1: Congradulations
151+
152+
## You've built your first Web Component!!!!
124153

125154
# Part 2.2: Recipes version 2
126155

@@ -345,6 +374,13 @@ if (data["ingredients"] !== undefined) {
345374

346375
- Getting help with CL-web-components, <https://github.com/caltechlibrary/CL-web-components/issues>.
347376

377+
# Reference: Web Components
378+
379+
- [MDN Examples on GitHub](https://github.com/mdn/web-components-examples)
380+
- [Examples of Accessible Components](https://github.com/scottaohara/accessible_components)
381+
- [Awesome Standalones](https://github.com/davatron5000/awesome-standalones)
382+
- [W3C Design System](https://design-system.w3.org/)
383+
348384
# Reference: Programming Languages
349385

350386
- [HTML5](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content), structured content

0 commit comments

Comments
 (0)