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

59
03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Chat</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"
/>
<script src="chat.js" defer></script>
</head>
<body>
<header></header>
<main>
<h1>Chat</h1>
<div id="chat">
<div id="chat_window">
<div id="chat_history">
<p>
<span class="chat_member chat_member1">Ladislaus:</span>
Anybody there?
</p>
<p>
<span class="chat_member chat_member2">Friedlinde</span>
Yes, me!
</p>
</div>
<div id="chat_text">
<input type="text" placeholder="...new message..." />
</div>
</div>
<ul id="chat_members">
<li class="admin">Heribert</li>
<li>Friedlinde</li>
<li>Tusnelda</li>
<li>Berthold</li>
<li>Oswine</li>
<li>Ladislaus</li>
</ul>
<div id="member_search">
<input type="text" placeholder="...Find a member..." />
</div>
</div>
</main>
</body>
</html>

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

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

125
03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/index.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Article Detail Page</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js" defer></script>
</head>
<body>
<main class="container">
<h1>Lorem ipsum</h1>
<section id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</main>
</body>
</html>

14
03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/script.js Normal file
View File

@@ -0,0 +1,14 @@
'use strict';
{
const articleSizeCssClass = (contentLength) => {
if (contentLength <= 3000) return 'coffee_break_article';
if (contentLength <= 9000) return 'normal_length_article';
return 'lone_weekend_article';
};
const $ = (qs) => document.querySelector(qs);
const contentLength = () => $('#content').innerHTML.length;
$('h1').classList.add(articleSizeCssClass(contentLength()));
}

31
03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/styles.css Normal file
View File

@@ -0,0 +1,31 @@
*, html {
box-sizing: border-box;
}
html, body {
font-family: 'Helvetica', 'Arial', sans-serif;
color: #444;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
padding: 0.5em;
}
.coffee_break_article {
background-color: BurlyWood;
}
.normal_length_article {
background-color: #cafe69;
}
.lone_weekend_article {
background-color: DarkTurquoise;
}
.container {
margin: 0 auto;
padding: 1rem;
max-width: 1140px;
}