ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added 03_dom

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-13 10:38:22 +02:00
parent 6292cabfee
commit e0bd3930d9
134 changed files with 21947 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/dom_example.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DOM-Example</title>
<link
rel="stylesheet"
href="../../css/styles.css"
type="text/css"
media="screen"
/>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<article>
<h1></h1>
<p></p>
<img alt="" src="#" />
</article>
</main>
<footer>
<nav></nav>
</footer>
</body>
</html>

21
03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/news.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Headlines</title>
<link
rel="stylesheet"
href="../../css/styles.css"
type="text/css"
media="screen"
/>
</head>
<body>
<h2>Lorem ipsum dolor sit amet.</h2>
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
</body>
</html>

23
03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/selector_testing.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Selector Testing</title>
</head>
<body>
<ul id="ul1">
<li id="li11"><span>11</span></li>
<li id="li12">12</li>
<li id="li13">13</li>
<li id="li14">14</li>
</ul>
<ul id="ul2">
<li id="li21"><span>21</span></li>
<li id="li22">
<strong><span>22</span></strong>
</li>
<li id="li23">23</li>
</ul>
</body>
</html>

121
03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/010010000100111101010100.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>010010000100111101010100</title>
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
<link
rel="stylesheet"
href="../../css/styles.css"
type="text/css"
media="screen"
/>
<link
rel="shortcut icon"
href="../../img/favicon.ico"
type="image/x-icon"
/>
</head>
<body>
<header></header>
<main>
<h1 class="article">
Hot Binary Heat Changing Mug
<span class="keyword">"010010000100111101010100"</span>
</h1>
<img
alt="Hot Binary Heat Changing Mug"
src="../../img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
class="float_left"
id="product_img"
/>
<h2>Description</h2>
<p>
Numbers make up
<span class="special">everything</span> in our digital world. They flow
around us, invisible like the Force or the Matrix, controlling all our
many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>.
<span class="b i">Off and On</span>. Well, we can tell you this: when
there's no coffee in our cup, we're completely OFF our game. But when
our mug is full of hot coffee, we're totally ON. And now, with the
<span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug
that tells us which state our mug is in. In binary!
</p>
<p>
See, the
<span class="keyword">Hot Binary Heat Changing Mug</span>
looks like just a dark mug with binary numbers all over it. That's its
OFF or cold state. Add hot coffee (or any liquid) and a series of digits
will turn white. Read them continuously from left to right, and you'll
read:
<span class="keyword">010010000100111101010100</span>. That's
<span class="special">in binary</span>. Of course, your
<span class="keyword">Hot Binary Heat Changing Mug</span>
could just be paying you a compliment. Cheeky, mug.
</p>
<p>
<img
alt="010010000100111101010100"
src="../../img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg"
/>
</p>
<h2>Product Specifications</h2>
<ul id="product_specification">
<li class="keyword">Hot Binary Heat Changing Mug</li>
<li>
As you add hot liquids, the binary for "HOT" appears (read from left
to right in one line, not two: 010010000100111101010100)
</li>
<li>
A <span class="keyword">ThinkGeek</span> creation and exclusive!
</li>
<li>
Care Instructions:
<span class="i b"
>Hand wash only. Not microwave or dishwasher safe.</span
>
</li>
<li>Materials: Ceramic</li>
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
</ul>
<h3>You wanna buy it?</h3>
<p class="buy_info_text">
If you like to buy this brilliant mug, just do the following steps:
</p>
<ol class="model" data-model="LDV73C-X3">
<li>Select how many items do you want.</li>
<li>Press "buy".</li>
</ol>
<form id="buy_form">
<select>
<option>1 item</option>
<option>2 items</option>
<option>3 items</option>
<option>4 items</option>
</select>
<input type="button" value="buy" />
</form>
</main>
<footer>
(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von
ThinkGeek Inc.
</footer>
</body>
</html>

30
03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/quotes.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Famous Quotes</title>
<link
rel="stylesheet"
href="../../css/styles.css"
type="text/css"
media="screen"
/>
<link
rel="shortcut icon"
href="../../img/favicon.ico"
type="image/x-icon"
/>
</head>
<body>
<header></header>
<main>
<h1>Famous Quotes</h1>
<blockquote></blockquote>
</main>
</body>
</html>