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

20
03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Font Size</title>
<script src="../../../lib/dom_helper.js" defer></script>
<script src="font_size.js" defer></script>
</head>
<body>
<button id="very_big">Very Large</button>
<button id="big">Large</button>
<button id="normal">Normal</button>
<button id="small">Small</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, error. Possimus in reiciendis quo numquam
assumenda, deleniti doloremque, facere alias odio animi est aliquam delectus corrupti ducimus fugiat ea commodi.
</p>
</body>
</html>

3
03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.js Normal file
View File

@@ -0,0 +1,3 @@
'use strict';
// Implement your code here

19
03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.css Normal file
View File

@@ -0,0 +1,19 @@
p {
font-size: 1.5em;
}
.keyword {
font-weight: bolder;
color: #225;
}
#tooltip {
width: 250px;
border: 2px solid #339;
padding: 5px;
background-color: #eef;
opacity: 0.9;
font-size: 1em;
text-align: justify;
}

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

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tooltips</title>
<script src="../../../lib/dom_helper.js" defer></script>
<script src="tooltips.js" defer></script>
<link rel="stylesheet" href="tooltips.css" />
</head>
<body>
<h1>Quantum Entanglement Mugs</h1>
<h3>DRINK IN SYNC.</h3>
<p>
In the realm of <span class="keyword">quantum mechanics</span>, particles
can be <span class="keyword">entangled</span> in such a way that the state
of one instantly influences the state of another, no matter the distance.
This phenomenon fascinates physicists and challenges our understanding of
reality. Imagine sipping your coffee from a mug that celebrates this
<span class="keyword">quantum</span> wonder. Just like entangled
particles, you and a friend can share a connection over any distance with
these mugs. Introducing the Quantum
<span class="keyword">Entanglement</span> Mugs.
</p>
<p>
Each set of Quantum <span class="keyword">Entanglement</span> Mugs
includes two ceramic mugs designed to reflect the concept of entanglement.
Share one with a friend, and no matter how far apart you are, you'll feel
connected. Use them at your next physics meetup, and your colleagues will
appreciate your thoughtful nod to quantum theory. Enjoy your coffee!
</p>
</body>
</html>

3
03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.js Normal file
View File

@@ -0,0 +1,3 @@
'use strict';
// Implement your code here

15
03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../../../lib/dom_helper.js" defer></script>
<script src="color_change.js" defer></script>
</head>
<body>
<button>Red</button>
<button>Green</button>
<button>Blue</button>
</body>
</html>

3
03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.js Normal file
View File

@@ -0,0 +1,3 @@
'use strict';
// Implement your code here

34
03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.css Normal file
View File

@@ -0,0 +1,34 @@
.tabs > nav ul {
margin: 0;
padding: 8px 0 0 5px;
list-style-type: none;
list-style: none;
height: 30px;
border: 1px solid #999999;
background-color: #b0b0b0;
}
.tabs > nav ul li {
display: block;
float: left;
padding: 0 10px;
margin: 0 2px 0 0;
height: 29px;
white-space: nowrap;
line-height: 30px;
border-color: #999999;
border-width: 1px;
border-style: solid solid none solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #d8d8d8;
background-image: linear-gradient(to bottom, #f9f9f9, #d8d8d8);
}
.tabs > nav ul li:hover {
background-color: #cacaca;
background-image: linear-gradient(to bottom, #eeeeee, #cacaca);
}
.tabs > nav ul li.active {
border-bottom: 2px solid #f9f9f9;
background-image: none;
background-color: #f9f9f9;
}

45
03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SEO Seminar: 2-tägige Schulung Suchmaschinenoptimierung</title>
<link href="tabs.css" media="all" rel="stylesheet" type="text/css" />
<script src="../../../lib/dom_helper.js" defer></script>
<script src="tabs.js" defer></script>
</head>
<body>
<div class="tabs">
<nav>
<ul>
<li>Overview</li>
<li>Topics</li>
<li>Learning Objectives</li>
<li>Date</li>
</ul>
</nav>
<article>
<h1>2-day SEO intensive seminar: with search engine optimization (SEO) to success on the web!</h1>
<p>&hellip;</p>
</article>
<article>
<h2>Topics</h2>
<p>&hellip;</p>
</article>
<article>
<h2>Learning Objectives</h2>
<p>&hellip;</p>
</article>
<article>
<h2>Date</h2>
<p>&hellip;</p>
</article>
</div>
</body>
</html>

3
03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.js Normal file
View File

@@ -0,0 +1,3 @@
'use strict';
// Implement your code here