Scribd
Upload
43 views27 pages

Compte Rendu WEB - Compressed

Uploaded by

basmabns98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views27 pages

Compte Rendu WEB - Compressed

Uploaded by

basmabns98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Le compte rendu du module technologie de web

➢ Ce compte rendu technologie de web est réalisé par l’étudiante


Bensellam Basma du groupe 1filière SMI S3 .

[email protected]

Série 1

Exercice 1 :

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="1.css">
<title>Exercice1</title>
<h1>Titre h1</h1>
<img src="téléchargement.png" alt="img" width="100px
">

<h2>Sous titre</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime similique
tempora minus voluptas fugit ad, nihil eius in ipsum beatae omnis
exercitationem temporibus soluta, eveniet, obcaecati incidunt ullam animi
commodi?
<h2>Sous titre h2</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis earum
aspernatur blanditiis molestias harum, non vero repellat voluptate unde
dignissimos odit perspiciatis vitae ut asperiores veritatis omnis sint
cupiditate aperiam!

<img src="téléchargement.png" alt="img" width="100px">


Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum delectus
explicabo eos quidem illum doloribus ut officiis. Nulla eos itaque similique
magni magnam quam? Eum quasi repudiandae possimus quae obcaecati!

</head>
<body>

</body>
</html>

• Code css :
h1{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color:green;
font-weight: 100px;
}
img:first-of-type{

display:block;
width: 200px;

}
img:last-of-type{
width: 500px;
}
p:nth-child(odd){
color:red;
}

h2{
color: blue;}
Exercice 2 :

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 2</title>
<link rel="stylesheet" href="2.css">

</head>

<body>

<table>
<caption>Liste des inscrits</caption>
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Code</th>
<th>Filière</th>
</tr>
</thead>
<tbody>

<tr>
<td>Azizi</td>
<td>Mohamed</td>
<td>N123456</td>
<TD>SMI</TD>

</tr>
<tr>
<td>Kamili</td>
<td>Ahmed</td>
<td>N987654</td>
<td>SMI</td>
</tr>
<tr>
<td>Touzani</td>
<td>Rachid
</td>
<td>N67895</td>
<td>SMI</td>
</tr>

</tbody>

</table>

</body>
</html>

• Code css :
*{font-family:'Courier New', Courier, monospace;
background-image: linear-gradient();

table{
width: 100%;
text-align: center;

}
table,tr,td,th{
border: 1px solid black;
border-collapse: collapse;
}
caption{
font-weight:bold;
font-size: larger;
padding: 20px;
}
thead>tr{
background-color: aqua;
}
tr:nth-child(even){ background-color: greenyellow;}
tr:nth-child(odd):not(thead>tr){ background: orange;}
tr:hover:not(thead>tr){
background-color: red;
}
td,th{
padding: 5px 0px;
Exercice 3:

• Code html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Exercice 3</title>
<link rel="stylesheet" href="EX3.css" />
</head>

<body>
<main>
<h1>Formulaire d'inscription</h1>
<form action="page1.html" method="post">
<fieldset>
<legend>Vos coordonnée</legend>
<div class="content">
<div class="element">
<label for="nom">Nom complet: </label>
<input type="text" id="nom" placeholder="Votre nom" required />
</div>
<div class="element">
<label for="date">Date de naissance:</label>
<input type="date" id="date" />
</div>
<div class="element">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Votre mail" />
</div>
<div class="element">
<label for="url">Site de votre institution:</label>
<input type="url" id="url" placeholder="http://www" />
</div>
<div class="element">
<div id="genre">
<input type="radio" name="sexe" id="r1" />
<label for="r1">Homme</label>
<input type="radio" name="sexe" id="r2" checked />
<label for="r2">Femme</label>
</div>
</div>
<div class="element">
<select>
<option selected="false">Choisir votre pays</option>
<optgroup label="Amérique">
<option>USA</option>
<option>Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="france">France</option>
<option>espagne</option>
<option>Italie</option>
</optgroup>
</select>
</div>

• Code css :
h1{
text-align: center;
}
form{
width: 80%;
margin: 0 auto;
}
label{
width: 160px;
display: inline-block;
}
input:not(input[type="radio"]):not(input[type="checkbox"]):not(input[type="re
set"]):not(input[type="submit"]){

width :calc(100% - 172px);


}

.element{
margin-bottom: 15px;
}
html{
--couleur:deepskyblue;--bg:white;
}
fieldset{
border: 20px solid var(--couleur);
margin-bottom: 15px;
border-radius: 10px;
box-shadow : -1px -1px 10px 1px var(--couleur);
}
legend{
background-color: var(--couleur);
border-radius: 10px ;
box-shadow: -1px -1px 10px 1px var(--couleur);
font-size: large;
padding:10px;
color: var(--bg);
font-weight: bold;
}

select,textarea{
width: 100%;
}
input:not(input[type="radio"]):hover,input:not(input[type="checkbox"]):hover
,input
:not(input[type="reset"]):hover,input :not(input[type="submit"]):hover,select
:hover,textarea:hover{
box-shadow: -1px -1px 10px 1px var(--couleur);
border: 2px solid var(--couleur) ;
outline-width:0px ;
}
input[type="reset"],input[type="submit"]{
width:49%;
background-color: var(--bg);
color: var(--couleur);
border-radius: 10px;
border: 2px solid var(--couleur);
}
input[type="reset"]:hover,input[type="submit"]:hover{
background-color: var(--bg);color: var(--couleur);
cursor: pointer;}

Série2

Exercice 1 :

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex1</title>
<link rel="stylesheet" href="superposition.css">

</head>
<main>
<div id="carre1"> <span>carre1</span></div>

<div id="carre2"><span>carre2</span></div>

<div id="carre3"><span>carre3</span></div>

<div id="carre4"> <span>carre4</span></div>

</main>
<body>

</body>
</html>

• Code css :
1) Avec la position absolue :
#carre1{
background-color: aqua;
}
#carre2{
background-color: aquamarine;
}
#carre3{
background-color: blueviolet;
position: absolute;
top: 8px;
left: 250px;
}
#carre4{
background-color: brown;
position: absolute;
top: 258px;
left : 250px;
}

div{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
font-weight: bold;
}

2) Avec la position flottante :


main{
width: 500px;
}
#carre1{
background-color: aqua;
float: none;
}
#carre2{
background-color: aquamarine;

}
#carre3{
background-color: blueviolet;
margin-top: -500px;
float: right;

}
#carre4{
background-color: brown;
float: right;
margin-top: -250px;
}
div{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
font-weight: bold;

3) Avec la position relative :


#carre1{
background-color: aqua;
}
#carre2{
background-color: aquamarine;
}
#carre3{
background-color: blueviolet;
position: relative;
top: -500px;
left: 250px;
}
#carre4{
background-color: brown;
position: relative;
top: -500px;
left: 250px;
}
div{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
font-weight: bold;
}

4) La superposition des éléments :


#carre1{
background-color: aqua;
}
#carre2{
background-color: aquamarine;
position: relative;
top: -50px;
left: 200px;
}
#carre3{
background-color: blueviolet;
position: relative;
top: -100px;

}
#carre4{
background-color: brown;
position: relative;
top: -150px;
left: 200px;
}

div{
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
font-weight: bold
Exercice 2:

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex2</title>
<link rel="stylesheet" href="poster1.css"></head>
<body>
<div class="poster">
<img src="https://loremflickr.com/240/240" />
<ion-icon name="add-outline"></ion-icon>
<abbr >25 octobre 2023</abbr>

</div>

<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

• Code css :
div.poster{
background-color: rgb(135, 65, 65);
width: 200px ;
height: 200px;
position: relative;
border-radius:50px ;
}
div.poster img{
width: 200px;
border-radius: 50px;
position: absolute;
top: 0px;
left: 0px;
}
div.poster ion-icon{
font-size: 30px;
color: white;
position: absolute;
top: calc(100px - 15px);
left: calc(100px - 15px);
}
abbr{
position: absolute;
top: 50px;
left: 50px;
color: white;
z-index: 1;

Exercice 3:

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex3</title>
<link rel="stylesheet" href="MA VERSION EX3.css">
</head>

<body>
<div class="card">

<img src="https://loremflickr.com/320/240" />


<div class="bloc">
<div class="card-date">23 OCTOBRE 2023</div>
<div class="title">LoREM OPSUM</div>
<div class="card-detail">Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Sapiente, aperiam ipsam eaque exercitationem vel maxime ut reiciendis
earum perferendis labore facere unde repellat vero reprehenderit porro minus,
dolore sit. Ipsam?</div>
<button>Voir mon profil</button>
</div>
</div>
</body>
</html>

• Code css :
html{
--nb-card:5;
--couleur:steelblue;
--rayon:60px;
}
.card{
border: 1px solid var(--couleur);
width: calc(100% / var(--nb-card) );
background-color: var(--couleur);
height:380px;
position: relative;
margin-top:var(--rayon) ;
box-shadow: 0px 0px 10px 2px var(--couleur);
border-radius: 10px;
margin-right: 20px;
}
img{
width: calc(var(--rayon) * 2);
border-radius: 50%;
position: absolute;
top: calc(-1 * var(--rayon));
left:calc(50% - var(--rayon));
box-shadow: 0px 0px 10px 2px var(--couleur);
}
.bloc{
position: absolute;
top: calc(var(--rayon));
width: 80%;
text-align: center;
margin: 0px 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
button{
width: 80%;
height: 25px;
margin-top: 10px;
border-radius: 5px;
border: var(--couleur);
filter: blur(3px);
}
button:hover {
background-color: rgb(0, 139, 37);
border: 1px solid white;
color: white;
transition: background-color 1s;
filter: brightness();
}
img:hover{

width: 57%;
transition: 2s;
}
.title{
margin: 10px;
font-weight: bold;
}
.card-date{
font-size: small;
}

Série 3

Exercice 1:
• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex1tp3</title>

</head>

<body>
<form>
<input type="number" placeholder="donnez le nombre de ligne">
<input type="number" placeholder="Donnez le nombre">
<input type="button" value="afficher" onclick="affichage()">
<div id="div"></div>
</form>
<script src="ex1.js"></script>
</body>

</html>

• Code js :
function affichage(){
let nb = document.forms[0].elements[0].value;
let nbligne = document.forms[0].elements[1].value;
let ChaineHtml=`<html><head><link
rel="stylesheet"></head></html><table><caption>Table de
multiplication</caption><tbody>`
for (let i=1 ; i<= nbligne; i++){
ChaineHtml += `<tr>
<td>${i}</td>
<td>*</td>
<td>${nb}</td>
<td>=</td>
<td>${i *nb}</td>
</tr>`
}
ChaineHtml += "</tbody></table></head></html>";
let div = document.getElementById("div");
div.innerHTML = ChaineHtml;

// document.write(ChaineHtml);
}
/* let nb = prompt("donnez le nombre")
let ChaineHtml=`<html><head><link rel="stylesheet"
href="Pr.css"></head></html><table><caption>Table de
multiplication</caption><tbody>`
for (let i=1 ; i<= 16; i++){
ChaineHtml += `<tr>
<td>${i}</td>
<td>*</td>
<td>${nb}</td>
<td>=</td>
<td>${i *nb}</td>
</tr>`
}
ChaineHtml += "</tbody></table></head></html>";
document.write(ChaineHtml);
*/

Exercice 3:
• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>
<body>
<form>
<input type="number" name="nb">
<input type="radio" name="choix" id="c1" checked><label for="c1">fonction
iterative</label>
<input type="radio" name="choix" id="c2" ><label for="c2">fonction
recursive</label>

<input type="button" onclick="calculer()" value="Calculer la fonction de


Fibonacci">
</form>
<script src="ex3.js"></script>
</body>
</html>

Code js :
function calculer() {
let nb = document.forms[0].elements["nb"].value;
let choix = document.forms[0].elements[1].checked;
if(choix){
alert(`La fonction de fibonacci d'ordre ${nb} par la métode iterative est
${iterative(nb)}`)
}else
alert(`La fonction de fibonacci d'ordre ${nb} par la méthode recursive est
${recursive(nb)}`)
}
function recursive(nb) {
if (nb==0) return 0;
if (nb==1) return 1;
return recursive(nb-1)+recursive(nb-2);
}
function iterative(nb){
var f0=0;
var f1=1;
var f=0;
for(var i=2;i<=nb;i++){
f=f0+f1;
f0=f1;
f1=f;
}
return f;
Exercice 4 :
• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EX4</title>

</head>
<body>
<form>
<input type="text" name="chaine">
<input type="radio" name="choix" id="c1" checked><label for="c1">Boucle
iterative</label>
<input type="radio" name="choix" id="c2" ><label for="c2">Fonction
String</label>

<input type="button" onclick="inverser()" value="inverser">


</form>
<script src="ex4.js"></script>
</body>
</html>

• Code js :
function inverser() {
let chaine = document.forms[0].elements["chaine"].value;
let choix = document.forms[0].elements[1].checked;
if(choix){
alert(`L'inverse de la chaine ${chaine} par la methode iterative est
${iterative (chaine)}`);
}else{
alert(` L'inverse de la chaine ${chaine} par les fonctions String est
${StringFunction (chaine)}`);
}
}
function StringFunction (chaine){
return chaine.split("").reverse().join('');

}
function iterative(chaine) {
let chaine_inverse = "";
for (let i = chaine.length - 1; i >= 0; i--) {
chaine_inverse += chaine[i];
}
return chaine_inverse;
}
// function iterative (chaine){
// let tab_char = chaine.split("");
// let chaine_inverse = new Array();
// let j=0;
// for(let i= chaine.lenght - 1; i<j ; i--){
// chaine_inverse[j]= tab_char[i];
// j++;
// }
// return chaine_inverse.join("");
// }

Exercice 5 :
• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex5</title>
</head>
<body>
<form >
<input type="text" placeholder="donnez le separateur " name="separateur"
id="sep">
<input type="button" value="date " onclick="getDate()">
<input type="date" placeholder="donnez votre date de naissance " >
<input type="button" value="votre age " onclick="getAge()">
<input type="button" value="le mois " onclick="getMonth()">
</form>
<script src="ex5.js"></script>
</body>
</html>

• Code js :

function getDate(){
let sep = document.forms[0].elements[0].value;
let madate = new Date(); /*renvoie la date du systeme*/
let jour = madate.getDate(); /*renvoie le jour*/
if(jour < 10) jour ='0'+ jour;
let mois= madate.getMonth()+1;
if(mois < 10) mois ='0'+ mois;
alert(`${jour}${sep}${mois}${sep}${madate.getFullYear()}`);
}

// function getDate(sep){
// var d= new Date();
// let date= d.getDate()+sep+d.getMonth()+1 +sep+d.getFullYear();
// alert(`la date est :${date}`)
// }

function getMonth(){
let madate = new Date();
let mois= madate.getMonth() + 1;
let lemois = "";
switch (mois){

case 1 : lemois ="Janvier"; break;


case 2 : lemois ="Fevrier"; break;
case 3 : lemois ="Mars"; break;
case 4 : lemois ="Avril"; break;
case 5 : lemois ="Mai"; break; /*affectation du mois*/
case 6 : lemois ="Juin"; break;
case 7 : lemois ="Juillet"; break;
case 8 : lemois ="Aouat"; break;
case 9 : lemois ="Septembre"; break;
case 10 : lemois ="Octobre"; break;
case 11 : lemois ="Novembre"; break;
case 12 : lemois ="Decembre"; break;

console.log(lemois);
}

function getAge(){
let d = document.forms[0].elements[2].value; /*Récupérer input*/
let dn = new Date(d); /*la date de naissance transfomée en un objet
date*/
let act = new Date(); /*renvoie la date actuelle*/
console.log(` Vous avez ${act.getFullYear() - dn.getFullYear()} ans`)
/*getfullyear renvoie l'annee de la date */

série 4

Exercice 1 :

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="posters.css">
<title>EXERCICE1</title>

</head>
<body>
<main>
<form>
<input type="texte" name="cne" id="cne" placeholder="veuilllez saisir
votre CNE">
<input type="texte" name="nom" id="nom" placeholder="veuilllez saisir
votre nom">
<input type="radio" name="genre" id="m" checked><label
for="m">Masculin</label>
<input type="radio" name="genre" id="f"><label for="f"
>Feminin</label>
<input type="texte" name="formation" id="formation"
placeholder="veuilllez saisir votre formation">
<input type="button" id="b" value="Ajouter un etudiant">
</form>

<div id="content"></div>
</main>

<script src="ex1.js"></script>
</body>
</html>

• Code js :
let smi = new Filiere();
document.addEventListener("DOMContentLoaded",() =>{
let btn = document.getElementById("b");
btn.addEventListener ("click", () => {
let cne =document.querySelector("#cne").value;
let nom=document.querySelector("#nom").value ;
let genre =document.querySelector("#m").checked;
let formation =document.querySelector("#formation").value ;

let e = new Etudiant (nom,cne,genre,formation);


smi.ajouter(e);
smi.afficherletab();
}) ;
});
function Etudiant(nom,cne,genre,formation){
this.nom =nom;
this.cne = cne;
this.genre = genre;
this.formation = formation; /*fonction constructeur
etudiant*/
this.affiche =function () {
let image = " <img src='mas.png'>";
if (!this.genre) {
image = "<img src='femin.jpg'>";
}
let codehtml = `<div class="bloc">
<div class="card">
${image};
<div>CNE: ${this.cne}</div>
<div >Nom ${this.nom}</div>
<div>genre: ${this.genre}</div>
<div >formation: ${this.formation}</div>
</div>
</div>
`
return codehtml;
}
}
function Filiere (){
this.etudiants = new Array();

this.ajouter = function (etudiant) {


this.etudiants.push(etudiant);
}

this.afficherletab = function (){


let str = "";
this.etudiants.forEach((etudiant)=>{
str += etudiant.affiche();
})
document.getElementById("content").innerHTML = str ;}}
Exercice 2 :

• Code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="ex2.js"></script>
</head>
<body>
<div id="container">
<h2>Calcul polynomial</h2>
<input type="text" id="ordre" placeholder="Lordre du polynome">
<input type="text" id="Valeur" placeholder="Valeur">
<input type="button" id="btn_generer" value="Générer le polynome">
<div id="poly"></div>

</div>

</body>
</html>

• Code js :
document.addEventListener("DOMContentLoaded",() => {
btn_gen = document.querySelector("#btn_generer")
btn_gen.addEventListener("click",() => {
let ordre= document.getElementById("ordre").value ;
/* Methode 1
let codehtml="";
for(i= ordre;i>0;i--){
codehtml += `<input type="number" id="c${i}" placeholder=C${i}><label
for="c${i}">x^${i} +</label>`;
}

codehtml+=`<input type="number" id="c0" placeholder=C0><label


for="c0"/>x^0 </label>`;
codehtml+=`<input type="button" id="btn_calculer" value="calculer"/>`;

let poly = document.getElementById("poly");


poly.innerHTML = codehtml;
/* Methode 2 */
let poly
=document.getElementById("poly");
for ( let i = ordre ;i>0 ;i--){
let input = document.createElement("input");
let label = document.createElement("label");
let text = document.createTextNode("x^" + i + "+");
input.setAttribute("type","number");
input.setAttribute("placeholder","C"+i);
input.setAttribute("id","c"+ i);
input.setAttribute("class","coeff");
label.appendChild(text);
label.setAttribute("for","c"+i);
poly.appendChild(input);
poly.appendChild(label);

let input = document.createElement("input");


let label = document.createElement("label");
let text = document.createTextNode("x^0");
input.setAttribute("type","number");
input.setAttribute("placeholder","C0");
input.setAttribute("id","c0");
input.setAttribute("class","coeff");
label.appendChild(text);
label.setAttribute("for","c0");
poly.appendChild(input);
poly.appendChild(label);

let btn= document.createElement("input");


btn.setAttribute("type","button");
btn.setAttribute("id","calc");
btn.setAttribute("value","calculer");

let div=document.createElement("div");
div.setAttribute("id","resultat"); /*pour le resultat*/
poly.appendChild(btn);
poly.appendChild(div);

let btn_calc = document.getElementById("calc");


btn_calc.addEventListener("click",() => {
let val = document.getElementById("Valeur").value;
let resultat= 0;
for(i = 0;i<ordre ; i++){
let c = document.getElementById("c"+ i).value;
resultat += c * Math.pow(val,i);
}
// alert(`le resultat est ${resultat}`)
document.getElementById("resultat").innerHTML = `<p>${resultat}</p>`
})
})
})

Exercice 3 :

• Code html :
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEUXX</title>
<link rel="stylesheet" href="devine.css">

</head>
<body>
<main>
<input type="text" id="nom" placeholder="Nom du joueur">
<input type="number" id="nb_propose" placeholder="Nombre à proposer"
min="0" max="100">
<input type="button" id="start" value="commencer une partie">
<input type="button" id="devine" value="Deviner le nombre">
<input type="button" id="replay" value="rejouer">
<input type="button" value="afficher les 5 meilleurs scores"
id="bestscore">

<div id="displayscore"></div>
</main>
<script src="devine.js"></script>
</body>
</html>

• Code js :
let nb_rand=0;
let nb_tentative=0;
let players;
document.addEventListener("DOMContentLoaded",()=>{
let devine = document.getElementById("devine");
let start = document.getElementById("start");
let replay = document.getElementById("replay");
let nb_propose = document.getElementById("nb_propose");
let playername = document.getElementById("nom");
devine.style.display = "none";
replay.style.display = "none";
nb_propose.style.display = "none";

start.addEventListener('click',()=>{
players = new Array();
playername.setAttribute("disabled",true);
nb_propose.style.display = "inline-block"
devine.style.display = "inline-block"
replay.style.display = "inline-block"
start.style.display = "none"
jouer();
console.log(nb_rand);
})

function jouer(){
nb_tentative = 0;
nb_rand = nbAlea(0,100);
console.log(nb_rand);
replay.setAttribute("disabled",true);

devine.addEventListener('click',() =>{

playername.setAttribute("disabled",true);
if (nb_propose.value != "" && nb_propose.value >= 0 &&
nb_propose.value <= 100){
nb_tentative++;
let value_propose= nb_propose.value ;
if (value_propose > nb_rand){
alert(`Veuillez saisir un nombre plus petit que
${value_propose}`);
nb_propose.value = "";
nb_propose.focus();
} else if(value_propose < nb_rand){
alert(`Veuillez saisir un nombre plus grand que
${value_propose}`);
nb_propose.value = "";
nb_propose.focus();
}else{
alert (`Felicitations vous avez trouvé le nombre caché
dans ${nb_tentative}coups`);
replay.removeAttribute("disabled");
devine.setAttribute("disabled",true );
nb_propose.value = "";
nb_propose.setAttribute("disabled",true);
let player = new Player(playername.value,nb_tentative);
players.push(player);
console.log(players);
}
}
})

replay.addEventListener("click",()=>{
rejouer();
})
function rejouer(){
playername.removeAttribute("disabled");
nb_propose.removeAttribute("disabled");
devine.removeAttribute("disabled");
jouer();}})
function nbAlea(min,max){
var nb = min + (max-min+1)*Math.random();
return Math.floor(nb);
}
document.getElementById("bestscore").addEventListener("click",()=>{
alert('VOIILAA')
let sortedplayers = players.sort((a,b) => a.score - b.score);
let html = "<table border='1px' style='width:100%><caption>Meilleurs
scores</caption><thead><tr><th>Nom du
joueur</th><th>Score</th></tr></thead><tbody>"
sortedplayers.forEach( B => {
html+= `<tr><td>${B.nom}</td><td>${B.score}</td></tr>`;
});

html+="</tbody></table>";
basma=document.getElementById("displayscore")
basma.innerHTML = html;
})
function Player(nom, score) {
this.nom = nom;
this.score = score;
}
Fin .

You might also like