dupontL3: septembre 2022

Mise en place de la calculette

Plan

LE DOM

Faites le TD : DOM

Help

Test Grid

Test : Grid

Fork : https://github.com/dupontdenis/simulateur

Git/GitHub

Calculette !

Interface

Le code de l'interface

Fonctionnalité

How to !

Clonez le code de l'interface

data-set

	document.addEventListener('click', function(event) {
	let id = event.target.dataset.toggleId;
	console.log(id)
	if (!id) return;

	let elem = document.querySelector(`#${id}`);

	console.dir(elem);

	elem.hidden = !elem.hidden;
	elem.insertAdjacentText("afterbegin", `${new Date().toLocaleString()}`)
	});

view raw event.js hosted with ❤ by GitHub

	<!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>data-set</title>
	<script src="event.js" defer></script>
	</head>
	<body>
	<button data-toggle-id="date">
	Show the date
	</button>

	<form id="date" hidden>
	</form>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Projet Grid : Help

grid est partout : calendrier

dense : adaptation à l'écran

nomage des lignes : affecter des éléments à une colonne

Flow column : Astuce du chef

Tout en un : en résumé

JS tout en un

Js rapide

Cours DOM

Test

play with scrool !

Projet

Suite à vos remarques et niveaux, j'annule le projet "drapeaux" pour le nouveau projet "calculator".

Pour ce projet (https://dupontcss.blogspot.com/2022/09/projet.html) définir les deux fichiers HTML et CSS.

Contrainte : CSS-grid

Grid : Etude de cas

https://output.jsbin.com/yopuko

CSS- grid

https://output.jsbin.com/yopuko/2

Projet

Algo

lecture

vidéos :

https://sites.google.com/view/dupontrvisionsl2/grid?authuser=0

https://sites.google.com/view/dupontgrid/algorithmes?authuser=0

dense :

https://dupontcss.blogspot.com/2018/09/grid-dense.html

Test

VS code

Grid

https://docs.google.com/document/d/11JhHnvi-wOximJEaml-ReGShtwRRb0M09dxfYH9UKKo/edit?usp=sharing

Vidéo VScode git

Git : https://sites.google.com/view/duponthtml/git?authuser=0

VScode

code : https://github.com/ornelladotcom/resume-website-workshop

publishing from a branch

https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#about-publishing-sources

Projet

https://codepen.io/dupontcodepen/pen/RwMwaqO

Transfomez le code pour ranger par colonnes les drapeaux par continents (Asie, Europe, Afrique, ...)

Le code sera déployé via github.io : https://<name>.github.io/grid