140 lines
5.2 KiB
HTML
140 lines
5.2 KiB
HTML
<!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="assets/css/styles.css" type="text/css" media="screen" />
|
|
<link rel="shortcut icon" href="assets/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="assets/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="assets/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 – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
|
|
|
<script>
|
|
'use strict';
|
|
{
|
|
const $ = (qs) => document.querySelector(qs);
|
|
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
|
|
|
// Übung 17: — Teil 9
|
|
// Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript.
|
|
|
|
// Füge noch einmal den folgenden Listenpunkt zur Liste der Product Specifications hinzu:
|
|
|
|
// Capacity: 11 oz.
|
|
|
|
// Füge den Listenpunkt aber dieses Mal nicht am Ende der Liste ein, sondern vor dem Eintrag Materials: Ceramic.
|
|
const list = $('#product_specification');
|
|
const item5 = $$('#product_specification li')[4];
|
|
// const listItem5 = $('#product_specification li:nth-child(5)');
|
|
// const listItem5 = $('#product_specification').lastElementChild.previousElementSibling; // DOM Traversal
|
|
|
|
console.log(item5);
|
|
|
|
const newList = document.createElement('li');
|
|
newList.textContent = 'Capacity: 11 oz.';
|
|
|
|
list.insertBefore(newList, item5);
|
|
|
|
// ======================
|
|
|
|
const prodSpecEl = $('#product_specification');
|
|
const prodSpecLiEls = $$('#product_specification li');
|
|
|
|
// einzufügenden Listenpunkt erstellen
|
|
const liCapacity = document.createElement('li');
|
|
liCapacity.textContent = 'Capacity: 11 oz.';
|
|
|
|
// Nu suchen an welcher Stelle - also den listenpunkt mit dem text Materials: Ceramic
|
|
const refLi = prodSpecLiEls.find((el) => {
|
|
return el.textContent === 'Materials: Ceramic';
|
|
});
|
|
|
|
// und einfügen
|
|
prodSpecEl.insertBefore(liCapacity, refLi);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|