-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patha_to_z_ul_llm_prompts.html
66 lines (66 loc) · 3.06 KB
/
a_to_z_ul_llm_prompts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CL-web-components</title>
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="index.html">README</a></li>
<li><a href="LICENSE">LICENSE</a></li>
<li><a href="user_manual.html">User Manual</a></li>
<li><a href="about.html">About</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
</ul>
</nav>
<section>
<p>Write an A to Z web component call <code>a-to-z-ul</code> who’s
innerHTML contains HTML5 UL list. That list will be used to structure
our links between our A to Z menu and the contents of the list.</p>
<p>The web component will be in a file called “a_to_z_ul.js”. Three
example HTML files will demonstate the web component. The first example
HTML with a short UL list. The second example HTML file with a long UL
list demonostrating how the optional “back to the menu” anchor will
work. The third HTML file that include two separate
<code>a-to-z-ul</code> lists on the same page. One will be short and one
will be long. The goal is to demonstrate that each A to Z UL list
functions independently.</p>
<p>The A to Z index should use a “menu” element for UL list navigate.
Each menu’s LI elements should contain anchors element representing the
alphabetical starting letters found in the UL list. That menu’s li’s
anchor will link into the UL list to the where the list’s items start
with the same alphabetical character.</p>
<p>The A to Z web component use all the same attributes supported by
HTML5 UL elements. In addition there is an optional attribute called
“long”. If “long” is true then an anchor element iss added after the UL
list that will take you back to the menu.</p>
<p>The web component should use HTML templates for structure and
CSS.</p>
<p>The UL items should be taken form the <code>a-to-z-ul</code>
innerHTML. The <code>a-to-z-ul</code> web component will need to detect
when the alphabetical starting letters changes. For each new letter it
needs to insert a new li that has a heading and identifying the
alphabetical section it is starting. The heading should contain an
anchor that links back to the menu.</p>
<p>The <code>a-to-z-ul</code> menu’s items should not contain bullets.
The Letter section headings don’t need bullets. The UL list’s menu items
should inherit the bullets from the page.</p>
<p>The <code>a-to-z-ul</code> web component may exist multiple times on
a page.</p>
<p>The <code>a-to-z-ul</code> web component should be implemented as an
ES6 module.</p>
<p>–</p>
<p>NOTE: The following is prompts added after the initial prompt
generated code.</p>
<p>When you click on the letter in the menu the browser should center
the virtial scroll so that section of the list is visible.</p>
<p>The innerHTML of <code>a-to-z-ul</code> is a UL list not a list of
text one per line.</p>
<p>Update the HTML examples to use innerHTML UL elements</p>
<p>The back to menu link should scroll the menu into view.</p>
</section>
</body>
</html>