Mastermind

• Lier le JS / CSS avec l'HTML
• flexbox
• grid
• var

---

LIER HTML & CSS

Connecter la feuille de style CSS et le script JS avec la page HTML

<link rel="stylesheet" href="__style.css" />

<script src="__script.js" defer></script>

CSS

RESET

Reinitialisation des propriétés CSS par défaut

html,
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  box-sizing: border-box;
  margin: 0;
}

IDENTIFIER UN ÉLÉMENT

ID / CLASSE / ATTRIBUT

Identifier un élément grâce à son ID ou à sa classe ou à son attribut

<!-- HTML -->
<div id="value"></div>
<div class="value"></div>
<div data-color="value"></div>

/* CSS */

/* CLASS */
.value {
}

/* ID */
#value {
}

/* ATTRIBUT */
[data-color="value"] {
}

TAILLES

Utiliser des tailles relatives

html {  
  /* valeur par défaut pour 1rem */
  font-size: 16px;
}

.class-name {
  /* Prend la taille par défaut (16px) */
  font-size: 1rem;
}

Valeur relative au parent

.class-name {
  font-size: 1em;
}

Valeur absolue

.class-name {
  font-size: 16px;
}

Valeur relative à l'écran

.class-name {
  font-size: 1vw;
}

Valeur relative à l'élément parent

.class-name {
  font-size: 100%;
}

VARIABLES CSS

:root {
  --black: #334155;
  --blue: #3b82f6;
}

.class-name {
  color: var(--blue);
  background: var(--dark);
}

GRID & FLEXBOX

.flex-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.grid-container {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  gap: 0.25rem;
}

JS

CONSOLE LOG

Afficher un message dans la console

console.log(value)

VARIABLE JS

DECLARATION

Définir une variable assignable

let myVar;

Définir une variable constante

const myConst;

TYPE

Une variable peut avoir plusieurs types

let number = 1000;
let string = "Hello";
let boolean = false;
let empty = null;

ASSEMBLER DES DONNÉES

Combiner des variables

const color = 'rouge';
const colorPosition = 1;

const concat = 'Ma couleur est ' + color + ' à la position ' + colorPosition;

console.log(concat);
// return :Ma couleur est rouge à la position 1,

TABLEAU

Créer un tableau

const userName = "Rémi Fernandez";
const userAge = 24;
const userIsTall = false;

let userArray = [userName, userAge, userIsTall];

console.log(userArray);
// return : ["Rémi Fernandez", 24, false]

OBJET

Créer un objet

let userObject = {
    age: userAge,
    name: userName,
    isTall: userIsTall,
}

IDENTIFIER UN ÉLÉMENT HTML

Récupère l’élément HTML d’une balise en fonction d’un ID ou d’une classe. Possibilité de récupérer plusieurs éléments qui ont la même classe

// récupérer le premier élément par sa class
const elementID = document.querySelector('.element')

// récupérer plusieurs éléments par leurs class
elementClass = document.querySelectorAll('.element')

// récupérer un élément par son ID
const elementID = document.querySelector('#element')

DÉTECTER UN CLICK

Détecter un click sur un élément

element.addEventListener("click", () => {
    console.log("clicked")
})