olygood olygood

npm init -y
install module du packages.json
webpack.config.js babel.config.json create src folder // index.html // index.js
dans le package json créer "webpak" : "serve" :

	const setBg = () => {
	const square = document.querySelector('.items');
	const randomColor = Math.floor(Math.random()*16777215).toString(16);

	console.log(square);
	square.style.background = "#" + randomColor;
	// console.log(square);
	}
	setInterval(setBg,1000);

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emmet</title>
	</head>
	<body>
	<!-- -->

	// install babel
	// npm i @babel/core @babel/cli @babel/preset-env
	//preset/env c est lui qui traduit l es6
	module.exports = {
	presets: [["@babel/preset-env"]]
	}
	//package.json
	// -o = output file le code traduction de es6 => javascript normal sort dans un autre fichier es6after.js
	// ou --out-file
	"babel": "babel es6.js -o es6after.js"

	{
	"sync.gist": "fc99bd18f5e19914c135375d46e4e8bc",
	"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
	"workbench.colorTheme": "Dracula",
	"explorer.confirmDragAndDrop": false,
	"explorer.compactFolders": false,
	"editor.fontSize": 16,
	"editor.wordWrap": "on",
	"emmet.syntaxProfiles":{
	"javascript":"jsx"

	{
	"extends": "next",
	"rules": {
	"react/no-unescaped-entities": "off",
	"@next/next/no-page-custom-font": "off"
	}
	}

	// terminal : install webpack : npm i webpack-cli webpack-dev-server babel-loader
	// puis npm i html-webpack-plugin

	Upgrade your account for access to GitLens+ features on both public and private repos.
	//ne gère que le html css scss images webpack-dev-server
	const HtmlWebpackPlugin = require("html-webpack-plugin");
	const MiniCssExtractPlugin = require("mini-css-extract-plugin");
	const path = require("path");

	module.exports = {

	{
	"Absolute-Center":{
	"prefix": "absolute-center",
	"body":[
	"position:absolute;\rtop:50%;\rleft:50%;\rtransform:translate(-50%,-50%);"
	],
	"description": "center an absolute position element."
	},
	"flex-Center":{
	"prefix": "flex-center",


	const canva = document.getElementById('canva');
	let ctx = canva.getContext('2d');

	load();
	let interval = setInterval(run,1000/60);

	function run()
	{
	update();

	// game loop setInterval sur 1000 => 1/60 ou 1000/60 conseillé
	init()
	let interval = setInterval(run,1000);
	function run()
	{
	update();
	draw();

	}