<!-- Ajoutez votre commentaire ici -->

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<table class="jdb-table-all">
  <tr>
    <th>En-tête</th>
    <th>En-tête</th>
  </tr>
  <tr>
    <td>Valeur</td>
    <td>Valeur</td>
  </tr>
</table>

<img class="jdb-img" height="auto" width="100%" src="lib/img/code.exemple.jpg"/>

<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>

<ul class="jdb-ul">
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

<form action="/" method="POST">
  <label for="first-name">Prénom</label><br/>
  <input id="first-name" type="text" name="firstname"><br/>
  <label for="last-name">Nom</label><br/>
  <input id="last-name" type="text" name="lastname"><br/>
  <label for="message">Message</label><br/>
  <textarea id="message" placeholder="Texte"></textarea><br/>
  <input type="submit" value="Envoyer">
</form>

<script src="lib/js/script.js" type="text/javascript"></script>

<link href="lib/css/style.css" rel="stylesheet" type="text/css"/>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Votre navigateur ne prend pas en charge la balise audio.
</audio>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.0.1/mustache.min.js"></script>

<div class="mus-template" style="display:none">
  <h1>{{header}}</h1>
  {{#bug}} {{/bug}}

  {{#items}}
    {{#first}}
      <li><strong>{{name}}</strong></li>
    {{/first}}
    {{#link}}
      <li><a href="{{url}}">{{name}}</a></li>
    {{/link}}
  {{/items}}

  {{#empty}}
    <p>The list is empty.</p>
  {{/empty}}
</div>
<div class="mus-json" style="display:none">
  {
    "header": "Couleurs",
    "items": [
      {"name": "Rouge", "first": true, "url": "#Rouge"},
      {"name": "Vert", "link": true, "url": "#Vert"},
      {"name": "Bleu", "link": true, "url": "#Bleu"}
    ],
    "empty": false
  }
</div>
<div class="render-mus-template"></div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    var e, html, json, emplate;
    try {
      template = document.querySelector(".mus-template").innerHTML;
      json = JSON.parse(document.querySelector(".mus-json").innerHTML);
      html = Mustache.render(template, json).replace(/^\s*/mg, "");
    } catch (e) {
      html = e.toString();
    }
    document.querySelector(".render-mus-template").innerHTML = html;
    });
</script>

<style type="text/css">
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/8IQbF0IK-f4" frameborder="0" allowfullscreen></iframe>
</div>

/* Ajoutez votre commentaire ici */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* L’élément auquel appliquer l’animation */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Le code de l’animation */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Style de base */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Visités */
a:visited {
  color: Orchid;
}

/* Actifs */
a:active {
  color: OrangeRed;
}

/* Survolés */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Règles appliquées lorsque la largeur de l’écran est supérieure à 320 px */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Règles appliquées lorsque la largeur de l’écran est entre 321 px et 768 px */
}

@media screen and (min-width: 769px) {
  /* Règles appliquées lorsque la largeur de l’écran est supérieure à 768 px */
}

@font-face {
  font-family: mapolice;
  src: url(sensation.woff);
  font-weight: bold;
}

/* Ajoute une flèche avant chaque élément doté de class="arrow" */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Ajoutez votre commentaire ici
/* ou encore ici pour
 * faire plusieurs lignes
 */

function sayHello (name) {
  console.log("Bonjour, " + name);
}

sayHello("David");

var names = [
  { id: 5796, name: "David" },
  { id: 9835, name: "Jean" },
  { id: 2957, name: "Catherine" }
];

console.table(names);

var person = {
  name: "Jean",
  skills: ["JS", "HTML"]
};

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var text = "<ul>";

for (var i = 0; i < fruits.length; i++) {
  text += "<li>" + fruits[i] + "</li>";
}

text += "</ul>";
document.write(text);

var i, meta_info = {
  "short_name": "JdBEdit",
  "start_url": "https://code.wetrafa.xyz",
  "icons": [
    { "src": "icon_16.png",  "type": "image/png", "sizes": "16x16" },
    { "src": "icon_128.png", "type": "image/png", "sizes": "128x128" },
    { "src": "icon_144.png", "type": "image/png", "sizes": "144x144" },
    { "src": "icon_192.png", "type": "image/png", "sizes": "192x192" }
  ],
  "theme_color": "#557baa"
};

console.log("Name: " + meta_info.short_name);

for (i = 0; i < meta_info.icons.length; i++) {
  console.log("link: " + meta_info.icons[i].src
    + " / size: " + meta_info.icons[i].sizes
    + " / type: " + meta_info.icons[i].type)
}

var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}

var name = "Jean";

if (name === "Jean") {
  console.log("Bonjour, " + name);
} else if (name === "Catherine") {
  console.log("Bonjour, " + name);
} else {
  console.log("Bonjour, inconnue");
}

var name = "Jean";

switch (name) {
  case "Jean":
    console.log("Bonjour, " + name);
    break;
  case "Catherine":
    console.log("Bonjour, " + name);
    break;
  default:
    /* Faire quelque chose si aucune condition n’est satisfaite */
    console.log("Bonjour, inconnue");
}

/* Sélectionne l’élément avec l’identifiant id="button" */
var element = document.querySelector("#button");

element.addEventListener("click", function() {
  console.log("Click!");
});

/* Sélectionne l’élément avec id="alert" */
var element = document.querySelector("#alert");

element.style.background = "OrangeRed";