Skip to content

Commit 0d6a9b4

Browse files
bgatesbgates
committed
initial commit
0 parents  commit 0d6a9b4

8 files changed

+344
-0
lines changed

‎01-hello-world.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>See this in the browser tab</title>
6+
</head>
7+
<body>
8+
<h1>Hello World!</h1>
9+
</body>
10+
</html>

‎02-basic-style.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Stylish!</title>
6+
<style>
7+
h1 {
8+
color: hsl(49, 100%, 83%);
9+
background: hsl(222, 24%, 57%);
10+
border: 3px solid hsl(222, 81%, 12%);
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<h1>Hello Colors!</h1>
16+
</body>
17+
</html>

‎03-hsl-playground.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Play with Colors</title>
6+
<style>
7+
h1 {
8+
color: hsl(49, 100%, 83%);
9+
background: hsl(222, 24%, 57%);
10+
border: 3px solid hsl(222, 81%, 12%);
11+
}
12+
div {
13+
height: 500px;
14+
width: 500px;
15+
border: 1px solid black;
16+
}
17+
label {
18+
display: block;
19+
}
20+
span {
21+
display: inline-block;
22+
width: 1.5rem;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div></div>
28+
<label>
29+
Hue: <span id="hueValue">0</span>
30+
<input type="range" id="hue" value=0 max=360 />
31+
</label>
32+
<label>
33+
Saturation: <span id="satValue">0</span>
34+
<input type="range" id="saturation" value=0 />
35+
</label>
36+
<label>
37+
Lightness: <span id="lightValue">100</span>
38+
<input type="range" id="lightness" value=100 />
39+
</label>
40+
<script src="./colorConversions.js" type="text/javascript"></script>
41+
<script>
42+
function changeColor () {
43+
let normalizedHue = hue.value / 360
44+
let normalizedSat = sat.value / 100
45+
let normalizedLight = light.value / 100
46+
let [r, g, b]= hslToRgb(normalizedHue, normalizedSat, normalizedLight)
47+
div.style.setProperty('background-color', `rgb(${r}, ${g}, ${b})`)
48+
49+
document.querySelector("#hueValue").innerText = hue.value
50+
document.querySelector("#satValue").innerText = sat.value
51+
document.querySelector("#lightValue").innerText = light.value
52+
}
53+
54+
let hue = document.querySelector("#hue")
55+
let sat = document.querySelector("#saturation")
56+
let light = document.querySelector("#lightness")
57+
let div = document.querySelector("div")
58+
59+
hue.addEventListener('input', changeColor)
60+
sat.addEventListener('input', changeColor)
61+
light.addEventListener('input', changeColor)
62+
63+
</script>
64+
</body>
65+
</html>

‎04-elements.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Some Elements</title>
6+
<style>
7+
* {
8+
border: 1px solid black;
9+
background: rgba(100, 100, 240, 0.2);
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>Nested Elements</h1>
15+
<p>This sentence is enclosed in a paragraph tag.</p>
16+
<p>This sentence is also enclosed in a paragraph tag, but <em>some</em> words have <strong>extra weight.</strong></p>
17+
<p>Sometimes nesting doesn't work. <p>Like here.</p></p>
18+
<h2>A List</h2>
19+
<ul>
20+
<li>HTML</li>
21+
<li>CSS</li>
22+
<li>JavaScript</li>
23+
</ul>
24+
</body>
25+
</html>

‎05-box-model.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model</title>
6+
<style>
7+
* {
8+
border: 1px solid black;
9+
background: rgba(100, 100, 240, 0.2);
10+
padding: 20px;
11+
margin: 30px;
12+
}
13+
/*em {
14+
border: 0;
15+
padding: 0;
16+
margin: 0;
17+
}*/
18+
</style>
19+
</head>
20+
<body>
21+
<h1>The Box Model</h1>
22+
<p>HTML elements are rendered by a browser as a set of boxes.</p>
23+
<h2>Content Box</h2>
24+
<p>The innermost box is known as the <em>content box.</em> That's the part that actually contains content, like text.</p>
25+
<h2>Padding</h2>
26+
<p>The content box is surrounded by <em>padding.</em> Any background styling applied to an element is applied to both the content box and the padding around it.</p>
27+
<h2>Border</h2>
28+
<p>The <em>border</em> is a shape (usually rectangular and thin) around an element's padding (or around the content box if the element has no padding).</p>
29+
<h2>Margin</h2>
30+
<p>An element's <em>margin</em> is the box that separates the element from other elements.</p>
31+
<h3>Side&ndash;Specific Values</h3>
32+
<p>Each of the three box model properties (padding, border, and margin) can be set to have a consistent value on every side of the box, or they can be set one side at a time. For example:</p>
33+
<ul>
34+
<li><code>margin-top</code></li>
35+
<li><code>padding-left</code></li>
36+
<li><code>border-bottom</code></li>
37+
</ul>
38+
<h3>Shortcuts</h3>
39+
<p>While using the side&ndash;specific values allows a developer to set each side individually, they are verbose. It is common to use shortcuts to specify values for each side. If multiple values are associated with a single box model property, the first value is for the top, then the right, bottom, and left. If only two values are specified, the first will be applied to the top and bottom, and the second to the right and left.</p>
40+
</body>
41+
</html>

‎06-attributes.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Attributes</title>
6+
<style>
7+
.emphasized {
8+
background: #000;
9+
color: #fff;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>Attributes</h1>
15+
<p>Some elements have <em title="Actually, every element *can* have attributes, but some elements don't need them.">attributes.</em></p>
16+
<h2>Links</h3>
17+
<a href="https://https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Here is a link to the Mozilla Developer Network site.</a>
18+
<h2>Images</h2>
19+
<p>Below is a picture of Bill Murray.</p>
20+
<img src="http://fillmurray.com/400/400" />
21+
<h3>Etc</h3>
22+
<p class="emphasized">This is a paragraph tag, but it has been styled differently than the other paragraph tags on the page because it has a <em>class</em> attribute.</p>
23+
</body>
24+
</html>

‎07-sectioning.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sectioning</title>
6+
</head>
7+
<body>
8+
<header>
9+
<p>Previous versions of HTML offered very few elements for grouping content together. HTML5 has much richer options, so use them!</p>
10+
</header>
11+
<main>
12+
<section>
13+
<h1>Sectioning and Semantics</h1>
14+
<p>This page illustrates some of the new elements available for grouping content in HTML5, in particular <code>header</code>, <code>section</code>, <code>aside</code>, and <code>footer</code>. </p>
15+
</section>
16+
<section>
17+
<h2>What Sectioning Elements Look Like</h2>
18+
<p>By default, the sectioning elements don't have any special styles applied to them, so the end user can't tell they're being used. These elements are to communicate to other developers (and, eventually, to computers parsing sites).</p>
19+
</section>
20+
</main>
21+
<footer>This has been a brief introduction to sectioning in HTML5.</footer>
22+
</body>
23+
</html>

‎colorConversions.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* from https://gist.github.com/mjackson/5311256 */
2+
/**
3+
* Converts an RGB color value to HSL. Conversion formula
4+
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
5+
* Assumes r, g, and b are contained in the set [0, 255] and
6+
* returns h, s, and l in the set [0, 1].
7+
*
8+
* @param Number r The red color value
9+
* @param Number g The green color value
10+
* @param Number b The blue color value
11+
* @return Array The HSL representation
12+
*/
13+
function rgbToHsl(r, g, b) {
14+
r /= 255, g /= 255, b /= 255;
15+
16+
var max = Math.max(r, g, b), min = Math.min(r, g, b);
17+
var h, s, l = (max + min) / 2;
18+
19+
if (max == min) {
20+
h = s = 0; // achromatic
21+
} else {
22+
var d = max - min;
23+
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
24+
25+
switch (max) {
26+
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
27+
case g: h = (b - r) / d + 2; break;
28+
case b: h = (r - g) / d + 4; break;
29+
}
30+
31+
h /= 6;
32+
}
33+
34+
return [ h, s, l ];
35+
}
36+
37+
/**
38+
* Converts an HSL color value to RGB. Conversion formula
39+
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
40+
* Assumes h, s, and l are contained in the set [0, 1] and
41+
* returns r, g, and b in the set [0, 255].
42+
*
43+
* @param Number h The hue
44+
* @param Number s The saturation
45+
* @param Number l The lightness
46+
* @return Array The RGB representation
47+
*/
48+
function hslToRgb(h, s, l) {
49+
var r, g, b;
50+
51+
if (s == 0) {
52+
r = g = b = l; // achromatic
53+
} else {
54+
function hue2rgb(p, q, t) {
55+
if (t < 0) t += 1;
56+
if (t > 1) t -= 1;
57+
if (t < 1/6) return p + (q - p) * 6 * t;
58+
if (t < 1/2) return q;
59+
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
60+
return p;
61+
}
62+
63+
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
64+
var p = 2 * l - q;
65+
66+
r = hue2rgb(p, q, h + 1/3);
67+
g = hue2rgb(p, q, h);
68+
b = hue2rgb(p, q, h - 1/3);
69+
}
70+
71+
return [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
72+
}
73+
74+
/**
75+
* Converts an RGB color value to HSV. Conversion formula
76+
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
77+
* Assumes r, g, and b are contained in the set [0, 255] and
78+
* returns h, s, and v in the set [0, 1].
79+
*
80+
* @param Number r The red color value
81+
* @param Number g The green color value
82+
* @param Number b The blue color value
83+
* @return Array The HSV representation
84+
*/
85+
function rgbToHsv(r, g, b) {
86+
r /= 255, g /= 255, b /= 255;
87+
88+
var max = Math.max(r, g, b), min = Math.min(r, g, b);
89+
var h, s, v = max;
90+
91+
var d = max - min;
92+
s = max == 0 ? 0 : d / max;
93+
94+
if (max == min) {
95+
h = 0; // achromatic
96+
} else {
97+
switch (max) {
98+
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
99+
case g: h = (b - r) / d + 2; break;
100+
case b: h = (r - g) / d + 4; break;
101+
}
102+
103+
h /= 6;
104+
}
105+
106+
return [ h, s, v ];
107+
}
108+
109+
/**
110+
* Converts an HSV color value to RGB. Conversion formula
111+
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
112+
* Assumes h, s, and v are contained in the set [0, 1] and
113+
* returns r, g, and b in the set [0, 255].
114+
*
115+
* @param Number h The hue
116+
* @param Number s The saturation
117+
* @param Number v The value
118+
* @return Array The RGB representation
119+
*/
120+
function hsvToRgb(h, s, v) {
121+
var r, g, b;
122+
123+
var i = Math.floor(h * 6);
124+
var f = h * 6 - i;
125+
var p = v * (1 - s);
126+
var q = v * (1 - f * s);
127+
var t = v * (1 - (1 - f) * s);
128+
129+
switch (i % 6) {
130+
case 0: r = v, g = t, b = p; break;
131+
case 1: r = q, g = v, b = p; break;
132+
case 2: r = p, g = v, b = t; break;
133+
case 3: r = p, g = q, b = v; break;
134+
case 4: r = t, g = p, b = v; break;
135+
case 5: r = v, g = p, b = q; break;
136+
}
137+
138+
return [ r * 255, g * 255, b * 255 ];
139+
}

0 commit comments

Comments
 (0)