-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (124 loc) · 5.1 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Demonstration for counter-app">
<style>
:root, html, body {
margin: 0;
padding: 0;
background-color: var(--ddd-accent-1);
}
#demo {
margin: var(--ddd-spacing-2);
}
counter-app {
margin: var(--ddd-spacing-2);
border: var(--ddd-border-md);
border-radius: var(--ddd-radius-lg);
}
counter-app:hover {
box-shadow: var(--ddd-boxShadow-sm);
}
#example {
--counter-app-font-size: var(--ddd-font-size-l);
background-color: var(--ddd-accent-2);
color: var(--ddd-primary-17);
}
</style>
<title>counter-app</title>
</head>
<body>
<div id="demo">
<h1>counter-app</h1>
<!-- this is going to do whatever the tag's defaults are -->
<h2>Default</h2>
<counter-app counter="15"></counter-app>
<h2>Slot usage</h2>
<counter-app data-accent="2" data-primary="17"><div>Sample slot content</div></counter-app>
<h2>Property usage</h2>
<counter-app id="example" title="Sample property title"></counter-app>
</div>
<script type="module" src="./src/counter-app.js"></script>
<!-- Take HAX, the Web and you further down the rabbit hole -->
<style>
#follow-the-white-rabbit {
margin: var(--ddd-spacing-4) auto 64px 16px;
background-color: var(--ddd-accent-4);
}
#follow-the-white-rabbit[open] summary {
background-color: var(--ddd-accent-4) !important;
}
#follow-the-white-rabbit[open] .content {
padding: 0 var(--ddd-spacing-4);
}
#follow-the-white-rabbit ul,
#follow-the-white-rabbit li {
padding: 0;
margin: 0;
}
#follow-the-white-rabbit li {
font-size: var(--ddd-font-size-xs);
list-style: none;
}
#follow-the-white-rabbit li strong,
#follow-the-white-rabbit li a {
padding: var(--ddd-spacing-2) var(--ddd-spacing-4);
color: black;
display: block;
font-weight: bold;
}
#follow-the-white-rabbit li:focus-within a,
#follow-the-white-rabbit li:hover a {
background-color: black;
color: yellow;
}
</style>
<details id="follow-the-white-rabbit" open>
<summary>How to Develop</summary>
<div class="content">
<p>
<strong>Checkout project on github:</strong> <a href="https://github.com/izzabizz5/counter-app" target="_blank" rel="nofollow">izzabizz5/counter-app</a>
</p>
<p>
You can edit the current page by modifying <code>index.html</code><br />
To edit your <strong>counter-app</strong> tag, modify <code>src/counter-app.js</code>.
This file contains all the HTML, CSS and JavaScript used to render your elements above!
</p>
<p>
Web components are easy to follow once you get used to their pattern.
Below are links to help on your journey. Good luck, we need you!
</p>
<ul>
<li><a href="https://oer.hax.psu.edu/bto108/sites/haxcellence/documentation/ddd" target="_blank">🧑🎨 Learn DDD HAX Design system</a></li>
<li><a href="https://lit.dev/playground/" target="_blank" rel="nofollow">🔥 Learn Lit</a></li>
<li><a href="https://hax.psu.edu" target="_blank">🧙 HAX The Web @ Penn State</a></li>
</ul>
<h2>Join and Share HAX</h2>
<ul>
<li><a href="https://github.com/haxtheweb/issues/issues" target="_blank" rel="nofollow">🔮 Ideas to HAX Harder, Better, Faster, Stronger</a></li>
<li><a href="https://bit.ly/hax-the-linkedin" target="_blank" rel="nofollow">👔 Share on LinkedIn</a></li>
<li><a href="https://bit.ly/hax-the-x" target="_blank" rel="nofollow">🧵 Tweet on X</a></li>
<li><a href="https://bit.ly/hax-discord" target="_blank" rel="nofollow">💬 Join Community</a></li>
</ul>
<h2>Learn the languages and tools</h2>
<ul>
<li><a href="https://w3schools.com" target="_blank" rel="nofollow">🌐 Learn HTML</a></li>
<li><a href="https://web.dev/learn/css/" target="_blank" rel="nofollow">🎨 Learn CSS</a></li>
<li><a href="http://Javascript.info" target="_blank" rel="nofollow">💻 Learn JavaScript (JS)</a></li>
<li><a href="https://gitimmersion.com" target="_blank" rel="nofollow">🦺 Learn Git / Github</a></li>
<li><a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/" target="_blank" rel="nofollow">📦 Learn NPM</a></li>
<li><a href="http://learnux.io" target="_blank" rel="nofollow">📐 Learn UX / UI development</a></li>
</ul>
<h2>Find purpose and inspiration</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=eC7xzavzEKY" target="_blank" rel="nofollow">🐟 This is Water - David Foster Wallace</a></li>
<li><a href="https://www.youtube.com/watch?v=kYfNvmF0Bqw" target="_blank" rel="nofollow">🏗️ Secrets of Life - Steve Jobs</a></li>
<li><strong>💡 <em>Never. Stop. Innovating.</em></strong></li>
</ul>
</div>
</details>
</body>
</html>