valentin.dupont/club_info_yeahhh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit :D

Browse Source
This commit is contained in:
valentin.dupont
2025-11-14 18:35:30 +01:00
commit 6e346ac2c3
9 changed files with 567 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base_JS/index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>
base_JS/script.js
+197
View File
@@ -0,0 +1,197 @@
console.log('Salut :)');
// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables
// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);
console.log(a + letritredemacomptine);
// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);
// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);
// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;
// Array (tableau)
let malistedecourses = [
"beurre",
"salade",
"glace",
10,
true
];
console.log("malistedecourses", malistedecourses[0]);
// Object (objet)
let malistedecourseencoremieux = {
"biocoop": "l'adresse de biocoop",
"intermarcher": 99,
"salut": false
}
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);
// nested (imbriquer)
let objectarraynested = {
"biocoop":[
{'beurre':1},
{'yahourt':10}
],
'leclerc':[
{'essence':10}
]
}
console.log("objectarraynested", objectarraynested);
// comment afficher des trucs
// créer un element html virtuel
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
let cube = document.createElement('div');
cube.classList.add('cube');
//cube.style.color = `hsl(${index*3.6} 50 50)`;
//cube.style.top = 200+ Math.random()*400+"px";
//cubestyle.left = 200 + Math.random()*400+"px";
body.append(cube);
// Les boucles
let boules = [];
for (let index = 0; index < 100; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
//boules[index].style.backgroundColor = 'rgb(255,0,255)';
// HSL Hue Saturation Luminosity
// boules[index].style.backgroundColor = 'hsl(180 50 50)';
// boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
// boules[index].style.backgroundColor = `hsl(180 50 ${index})`;
// boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;
boules[index].style.top = Math.random()*1200+"px";
boules[index].style.left = Math.random()*2500+"px";
let rayon = 20 + Math.random()*50;
boules[index].style.width = rayon+"px";
boules[index].style.height = rayon+"px";
boules[index].style.borderRadius = (rayon/2)+"px";
//boules[index].style.mixBlendMode = "screen";
//boules[index].style.backgroundBlendMode = "screen"
body.append(boules[index]);boules;
}
// version carré mo
let carré = [];
for (let index = 0; index < 50; index=index+1) {
carré[index] = document.createElement('div');
carré[index].classList.add('carré');
carré[index].style.backgroundColor = `hsl(${index*2.0} 50 50)`;
carré[index].style.top = 200+ Math.random()*400+"px";
carré[index].style.left = 200 + Math.random()*400+"px";
carré[index].style.width = Math.random()*200+"px";
carré[index].style.height = Math.random()*200+"px";
carré[index].style.mixBlendMode = "screen";
carré[index].style.opacity = Math.random()*100+"%";
//carré[index].style.backgroundBlendMode = "screen"
body.append(carré[index]);
}
console.log('carré', carré);
// une fonction
// function unefunctiontest(){
// }
// c'est pareille que :
// let unefunctiontest = function() {
// }
// la version moderne
let unefunctiontest = (test, unautre) => {
// entre les deux accolades : le block de code executer a chaque fois que la function est appelée
console.log('test: ',test);
console.log('unautre: ',unautre);
};
// on appele la function avec des arguments
unefunctiontest(45, 'babar');
// let fonctionpourchaqueboule = (boule) => {
// }
// boules.forEach(fonctionpourchaqueboule);
let monanime = () => {
// console.log('frame');
let i = 0;
boules.forEach((boule) => {
// console.log('boule',boule);
let impair = i%2;
let vitesse_x;
let vitesse_y;
let haut;
if (impair) {
//vitesse_x = vitesse_y = 1 + Math.random()*i;
vitesse_x = vitesse_y = 1;
//boules.style.mixBlendMode = "screen";
} else {
//vitesse_x = vitesse_y = -1 - Math.random()*-i;
vitesse_x = vitesse_y = -1;
//boules.style.mixBlendMode = "lunminosity";
}
boule.style.left = (boule.offsetLeft+vitesse_x)+"px";
boule.style.top = (boule.offsetTop+vitesse_y)+"px";
i++;
});
window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
window.requestAnimationFrame(monanime);
base_JS/styles.css
+42
View File
@@ -0,0 +1,42 @@
body{
background-color: rgb(255, 255, 255);
}
h1{
font-weight: 900;
font-size: 240px;
}
div.balle{
width: 20px;
height:20px;
border-radius: 10px;
background-color: black;
}
div.boule{
position: absolute;
width: 10px;
height:10px;
border-radius: 10px;
background-color: red;
background-blend-mode:screen;
}
div.carré{
position: absolute;
height: 1400px;
width: 50px;
border-radius: 5px;
background-color: rgb(149, 155, 212);
}
div.cube{
position: absolute;
height: 1400px;
width: 500px;
border-radius: 0px;
background-color: rgb(0, 0, 0);
opacity: 100%;
background-blend-mode:luminosity;
}