Skip to content

Commit 6320c14

Browse files
pierreSALMIpierreSALMI
committed
oui
1 parent 858b28f commit 6320c14

File tree

4 files changed

+107
-39
lines changed

4 files changed

+107
-39
lines changed

‎lesson2/bouton/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<button id="js-btn"> Click me§</button>
11+
12+
<button style="background-color: gray;" id="js-gray-btn">Gray button</button>
13+
<script src='script.js'></script>
14+
</body>
15+
</html>

‎lesson2/bouton/scripts.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use strict';
2+
3+
const myBtn = document.querySelector('#js-btn');
4+
myBtn.addEventListener('click', (event) => {
5+
console.log('Clicked',event)
6+
});
7+
8+
constmyGrayBtn = document.querySelector('#js-gray-btn');
9+
myGrayBtn.addEventListener('click', () => {
10+
myGrayBtn.style.backgroundColor = 'green';
11+
});

‎lesson2/index.html

+15-1
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,27 @@
1919
</div>
2020
<p class="secondary-paragraph">Paragraph 3</p>
2121
<span id="js-unique-el"></span> -->
22-
22+
<!--
2323
2424
<p class="first-p"></p>
2525
<p class="second-p"></p>
2626
<img src="http://lorempixel.com/10/10/" width="10" height="10">
2727
<div><p>I'm inside of a div</p></div>
2828
29+
-->
30+
31+
<div>
32+
<h2>Navigator</h2>
33+
</div>
34+
<div>
35+
<h2>Screen</h2>
36+
</div>
37+
<div>
38+
<h2>Window</h2>
39+
</div>
40+
<div>
41+
<h2>Location</h2>
42+
</div>
2943
<script src='script.js'></script>
3044
</body>
3145
</html>

‎lesson2/script.js

+66-38
Original file line numberDiff line numberDiff line change
@@ -24,41 +24,69 @@
2424

2525
//Modifier une node
2626

27-
// Ajoutez le texte 'I am the first paragraph' au premier paragraphe du document.
28-
const firstP = document.querySelector('.first-p');
29-
firstP.innerText = 'I am the first paragraph';
30-
console.log('firstP > text', firstP.innerText);
31-
32-
// Ajoutez le HTML <span>Hello</span> au deuxième paragraphe du document.
33-
const secondP = document.querySelector('.second-p');
34-
secondP.innerHTML = '<span>Hello</span>';
35-
console.log('secondP html', secondP.innerHTML);
36-
37-
// Modifiez les attributs width à 50% et height à 'auto' de l'image.
38-
const myImg = document.querySelector('img');
39-
myImg.setAttribute('width','50%');
40-
myImg.setAttribute('height','50%');
41-
42-
// Ajoutez un attribut alt non vide à l'image.
43-
myImg.setAttribute('alt', 'Random image');
44-
45-
// Donnez la couleur 'blue' au premier paragraphe du div et la taille de police '1.5rem'.
46-
firstP.style.color = 'blue';
47-
firstP.style.fontSize = '1.5rem';
48-
49-
// Ajoutez la classe img à l'image.
50-
//myImg.setAttribute('class','img');
51-
myImg.className = 'my-class';
52-
myImg.classList.add('my-class');
53-
myImg.classList.remove('some-class');
54-
55-
const myBody = document.querySelector('body');
56-
const newEl = document.createElement('p');
57-
newEl.innerText = 'Hello';
58-
newEl.style.color = 'red';
59-
60-
//dernier enfant
61-
myBody.appendChild(newEl)
62-
63-
//premier enfant
64-
myBody.prepend(newEl);
27+
// // Ajoutez le texte 'I am the first paragraph' au premier paragraphe du document.
28+
// const firstP = document.querySelector('.first-p');
29+
// firstP.innerText = 'I am the first paragraph';
30+
// console.log('firstP > text', firstP.innerText);
31+
32+
// // Ajoutez le HTML <span>Hello</span> au deuxième paragraphe du document.
33+
// const secondP = document.querySelector('.second-p');
34+
// secondP.innerHTML = '<span>Hello</span>';
35+
// console.log('secondP html', secondP.innerHTML);
36+
37+
// // Modifiez les attributs width à 50% et height à 'auto' de l'image.
38+
// const myImg = document.querySelector('img');
39+
// myImg.setAttribute('width','50%');
40+
// myImg.setAttribute('height','50%');
41+
42+
// // Ajoutez un attribut alt non vide à l'image.
43+
// myImg.setAttribute('alt', 'Random image');
44+
45+
// // Donnez la couleur 'blue' au premier paragraphe du div et la taille de police '1.5rem'.
46+
// firstP.style.color = 'blue';
47+
// firstP.style.fontSize = '1.5rem';
48+
49+
// // Ajoutez la classe img à l'image.
50+
// //myImg.setAttribute('class','img');
51+
// myImg.className = 'my-class';
52+
// myImg.classList.add('my-class');
53+
// myImg.classList.remove('some-class');
54+
55+
// const myBody = document.querySelector('body');
56+
// const newEl = document.createElement('p');
57+
// newEl.innerText = 'Hello';
58+
// newEl.style.color = 'red';
59+
60+
// //dernier enfant
61+
// myBody.appendChild(newEl)
62+
63+
// //premier enfant
64+
// myBody.prepend(newEl);
65+
66+
// myBody.removeChild(newEl);
67+
68+
console.log(window)
69+
const allDiv = document.querySelectorAll('div')
70+
71+
//navigator
72+
allDiv[0].innerHTML += `<p>Nom du navigateur: ${window.navigator.appCodeName}</p>`;
73+
allDiv[0].innerHTML += `<p>Language principal: ${window.navigator.language}</p>`;
74+
allDiv[0].innerHTML += `<p>Plateforme de mon ordinateur: ${window.navigator.platform}</p>`;
75+
allDiv[0].innerHTML += `<p>Cookies activé: ${window.navigator.cookieEnabled}</p>`;
76+
77+
//Screen
78+
allDiv[1].innerHTML += `<p>Largeur de l'écran: ${window.screen.width}</p>`;
79+
allDiv[1].innerHTML += `<p>Hauteur de l'écran: ${window.screen.height}</p>`;
80+
allDiv[1].innerHTML += `<p>Orientation de l'écran: ${window.screen.orientation.type}</p>`;
81+
82+
//Window
83+
allDiv[2].innerHTML += `<p>Largeur de la fenêtre: ${window.innerWidth}</p>`;
84+
allDiv[2].innerHTML += `<p>Hauteur de la fenêtre: ${window.innerHeight}</p>`;
85+
allDiv[2].innerHTML += `<p>Largeur du navigateur: ${window.outerWidth}</p>`;
86+
allDiv[2].innerHTML += `<p>Hauteur du navigateur: ${window.outerHeight}</p>`;
87+
88+
//Location
89+
90+
allDiv[3].innerHTML += `<p>URL: ${window.location.href}</p>`;
91+
allDiv[3].innerHTML += `<p>nom de l'hôter: ${window.location.pathname}</p>`;
92+
allDiv[3].innerHTML += `<p>Nom du protocole: ${window.location.protocol}</p>`;

0 commit comments

Comments
 (0)