JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Checkbox</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!-- Change les id des liens de vidéos comme "Og2iXhOcE6Y", par ceux dont tu as besoin ! -->
		<!-- Ajoute les id de ton choix mais ils doivent être uniques. C'est pourquoi je te conseille de reprendre l'id de la vidéo. Mais tu peux mettre ce que tu veux comme "1", "2", "3" ou "0001", "0002", "0003"... -->
		<!-- Tu peux changer les "height" et "width". -->
		<!-- Là, avec ce code lorsque les utilisateurs cocheront une checkbox (que tu peux placer où tu veux par rapport à la vidéo, en CSS), cela la rend impossible à décocher et si elle n'existe pas dans le localStorage (stockage du navigateur pour un domaine), cela ajoute le couple "id"/"élement vide" (pour ne pas prendre trop de stockage). Au démarrage de la page, pour chaque id (de checkbox stockée dans le localStorage) qui existe, le JavaScript rend la case cochée et la rend impossible à décocher. -->
		<!-- Si les utilisateurs restent sur le même navigateur (hors navigation privée) et qu'ils cochent le case, elle le restera, même au redemarrage. -->
		<!-- Le seul moyen de supprimer ces données est d'entrer localStorage.clear() dans la console ou dans le code de la page ou, pour en supprimer qu'un, d'entrer localStorage.removeItem("le numéro d'id"). -->
		<!-- Tu peux supprimer ces commentaires, pour que les utilisateurs ne les lisent pas. -->
		<iframe src="https://www.youtube.com/embed/Og2iXhOcE6Y" height="350px" width="650px"></iframe> 
		<input type="checkbox" id="Og2iXhOcE6Y" >
		<iframe src="https://www.youtube.com/embed/rjYkcZGgnQE" height="350px" width="650px"></iframe>
		<input type="checkbox" id="rjYkcZGgnQE">
		<iframe src="https://www.youtube.com/embed/Q60T_2HTtHg" height="350px" width="650px"></iframe>
		<input type="checkbox" id="Q60T_2HTtHg">
		<iframe src="https://www.youtube.com/embed/3TKp7oujXkM" height="350px" width="650px"></iframe>
		<input type="checkbox"...