cours d'aujourd hui

dom/index.html

@@ -0,0 +1,19 @@
+ <!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+
+<ul>
+    <li id="un">un</li>
+    <li id="deux">deux</li>
+    <li id="trois">trois</li>
+</ul>
+
+</body>
+</html>

mithril-example/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script type="module" src="main.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div id="example-1"></div>
+
+<div id="example-2"></div>
+
+<div id="example-3"></div>
+
+</body>
+</html>

mithril-example/main.js

@@ -0,0 +1,28 @@
+import m from "https://esm.sh/mithril@2.2.2"
+
+function example1(){
+    let div1 = m("b", {style: "font-family: monospace;"}, "didier");
+    let div2 = m("div", "bonjour monde");
+
+    return m("div", {style: "color:red;"}, "bonjour", " ", div1);
+}
+
+m.render(document.getElementById("example-1"), example1());
+
+
+function example2(){
+    let chien = m("li", "un chien");
+    let chat = m("li", ["un ", m("a", {href: "https://example.com/chat"}, "chat")]);
+    return m("ul", [chien, chat]);
+}
+
+m.render(document.getElementById("example-2"), example2());
+
+
+function example3(){
+    let rougeEtGros = m("div.red.big", "Rouge & Gros");
+    let blueEtPetit = m("div.blue.small", "Bleu & Petit");
+    return m("div", [rougeEtGros, blueEtPetit]);
+}
+
+m.render(document.getElementById("example-3"), example3());

mithril-example/style.css

@@ -0,0 +1,15 @@
+.blue{
+    color: blue;
+}
+
+.red{
+    color: red;
+}
+
+.big{
+    font-size: 1.8em;
+}
+
+.small{
+    font-size: 0.7em;
+}

svg/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+
+<svg width="100" height="100">
+    <rect x="10" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2" />
+    <rect x="30" y="10" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
+    <rect x="30" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
+    <rect x="50" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
+</svg>
+
+
+</body>
+</html>