js
|
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 348 KiB After Width: | Height: | Size: 348 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
41
tp1/tp1.2/index.html
Normal file
@ -0,0 +1,41 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<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">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-start">Col 1/2</div>
|
||||
<div class="col align-self-start">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-center">Col 1/2</div>
|
||||
<div class="col align-self-center">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-end">Col 1/2</div>
|
||||
<div class="col align-self-end">Col 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line">
|
||||
<div class="col align-self-start">Col 1/3</div>
|
||||
<div class="col align-self-center">Col 2/3</div>
|
||||
<div class="col align-self-end">Col 3/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
9
tp1/tp1.2/style.css
Normal file
@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(60, 240, 160, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(60, 120, 160, 0.7);
|
||||
}
|
||||
57
tp1/tp1.3/index.html
Normal file
@ -0,0 +1,57 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<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">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row custom-line justify-content-start">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-center">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-end">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-around">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-around">
|
||||
<div class="col col-3">Justify Content 1/2</div>
|
||||
<div class="col col-3">Justify Content 2/3</div>
|
||||
<div class="col col-3">Justify Content 3/3</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-between">
|
||||
<div class="col col-4">Justify Content 1/2</div>
|
||||
<div class="col col-4">Justify Content 2/2</div>
|
||||
</div>
|
||||
|
||||
<div class="row custom-line justify-content-between">
|
||||
<div class="col col-3">Justify Content 1/2</div>
|
||||
<div class="col col-3">Justify Content 2/3</div>
|
||||
<div class="col col-3">Justify Content 3/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
9
tp1/tp1.3/style.css
Normal file
@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(0, 255, 140, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(0, 152, 253, 0.7);
|
||||
}
|
||||
41
tp1/tp1.4/index.html
Normal file
@ -0,0 +1,41 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- CSS only -->
|
||||
<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">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-last">Div</div>
|
||||
<div class="col bg-success order-fisrt">Div</div>
|
||||
<div class="col bg-info order-2">Div</div>
|
||||
<div class="col bg-danger order-1">Div</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-2">Div</div>
|
||||
<div class="col bg-success order-last">Div</div>
|
||||
<div class="col bg-info order-1">Div</div>
|
||||
<div class="col bg-danger order-first">Div</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col bg-warning order-3 order-md-last">Div</div>
|
||||
<div class="col bg-success order-last order-md-first order-lg-2">Div</div>
|
||||
<div class="col bg-info order-first order-md-5">Div</div>
|
||||
<div class="col bg-danger order-0">Div</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
9
tp1/tp1.4/style.css
Normal file
@ -0,0 +1,9 @@
|
||||
.custom-line {
|
||||
min-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: rgba(0, 255, 140, 0.7);
|
||||
}
|
||||
|
||||
.custom-line > .col {
|
||||
background-color: rgba(0, 152, 253, 0.7);
|
||||
}
|
||||
63
tp2/tp2.0/1.html
Normal 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
@ -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
@ -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
@ -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
@ -0,0 +1,8 @@
|
||||
body {
|
||||
border: 1px solid #000000;
|
||||
width: 75%;
|
||||
margin: 20px auto;
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||