School-LP-IOTIA/LP22-Developpement-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js

Browse Source
This commit is contained in:
OMGiTzPomPom
2022-11-10 13:46:32 +01:00
parent 3b072036d6
commit c389030972
27 changed files with 358 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
tp2/tp2.0/1.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Super Hero Squad</title>
</head>
<body>
<header class="container">
<div class="row">
<div id="header" class="col">
<h1>Super Hero Squad</h1>
<p>Hometown : Metro City</p>
</div>
</div>
</header>
<div id ="content" class="container">
<div class="row">
<article class="col-4">
<h2>Molecule Man</h2>
<p>Secret Identity : Dan Jukes</p>
<p>Age : 29</p>
<p>Superpowers : </p>
<ul>
<li>Radiation Resistance</li>
<li>Turning Tiny</li>
<li>Radiation Blast</li>
</ul>
</article>
<article class="col-4">
<h2>Madame Uppercut</h2>
<p>Secret Identity : Jane Wilson</p>
<p>Age : 39</p>
<p>Superpowers : </p>
<ul>
<li>Million Tone punch</li>
<li>Damage resistance</li>
<li>Superhuman reflexes</li>
</ul>
</article>
<article class="col-4">
<h2>Eternal Flame</h2>
<p>Secret Identity : Unknown</p>
<p>Age : 100000</p>
<p>Superpowers : </p>
<ul>
<li>Immortality</li>
<li>Heat Immunity</li>
<li>Inferno</li>
<li>Teleportation</li>
<li>Interdimensional travel</li>
</ul>
</article>
</div>
</div>
</body>
</html>

25
tp2/tp2.0/2.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Super Hero Squad</title>
</head>
<body>
<header class="container">
<div class="row">
<div id="header" class="col">
</div>
</div>
</header>
<div class="container">
<div id ="content" class="row">
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

40
tp2/tp2.0/data.json Normal file
View File

@@ -0,0 +1,40 @@
{
"SquadName" : "Super Hero Squad",
"HomeTown" : "Metro City",
"formed" : 2022,
"members" : [
{
"name" : "Molecule Man",
"age" : "29",
"secretIdentity" : "Dan Jukes",
"powers" : [
"Radiation Resistance",
"Turning Tiny",
"Radiation Blast"
]
},
{
"name" : "Madame Uppercut",
"age" : "39",
"secretIdentity" : "Jane Wilson",
"powers" : [
"Million Tone punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name" : "Eternal Flame",
"age" : "100000",
"secretIdentity" : "Unknown",
"powers" : [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}

56
tp2/tp2.0/script.js Normal file
View File

@@ -0,0 +1,56 @@
let requestURL = './data.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
let superHeroes = request.response;
console.log(superHeroes);
const headerAnchor = document.getElementById('header');
var headerH1 = document.createElement('h1');
var headerP = document.createElement('p');
headerH1.textContent = superHeroes["SquadName"];
headerP.textContent = "Hometown : " + superHeroes["HomeTown"];
headerAnchor.appendChild(headerH1);
headerAnchor.appendChild(headerP);
const contentAnchor = document.getElementById('content');
for (let i = 0; i < 3; ++i) {
let article = document.createElement('article');
let h2 = document.createElement('h2');
let p = document.createElement('p');
let p2 = document.createElement('p');
let p3 = document.createElement('p');
let ul = document.createElement('ul');
article.classList.add('col-4');
h2.textContent = superHeroes["members"][i]["name"];
p.textContent = "Secret Identity : " + superHeroes["members"][i]["secretIdentity"];
p2.textContent = "Age : " + superHeroes["members"][i]["age"];
p3.textContent = "Powers :";
contentAnchor.appendChild(article);
article.appendChild(h2);
article.appendChild(p);
article.appendChild(p2);
article.appendChild(p3);
article.appendChild(ul);
superHeroes["members"][i]["powers"].forEach(power => {
let li = document.createElement('li');
li.textContent = power;
ul.appendChild(li);
});
}
}

8
tp2/tp2.0/style.css Normal file
View File

@@ -0,0 +1,8 @@
body {
border: 1px solid #000000;
width: 75%;
margin: 20px auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}