Développement front et intégration (R312) – Exercices de TD

Liste d'exercices à faire pendant les séances de TD.

TD #1

Exercice 1

Dans cet exercice nous allons faire une première mise en page avec Bootstrap. Pour cela, faites une grille avec trois lignes :

  • La ligne 1 contient trois colonnes de largeur 4, 5 et 3 respectivement.
  • La ligne 2 contient deux colonnes de largeur 2 et 10.
  • La ligne 3 contient cinq colonnes de largeur pareille, sauf pour la colonne centrale, qui s'adapte à son contenu.

Pour voir correctement votre mise en page, ajoutez du texte dans chaque colonne. Aussi, utilisez la règle CSS 

div {
  border: 1px solid black;
}

pour bien distinguer les colonnes.

Exercice 2

Dans cet exercice nous faisons une mise en page responsive, qui s'adapte à la largeur de l'écran. Nous avons deux lignes, avec deux colonnes chacune. Les instructions pour chaque colonnes sont :

  • Ligne 1, colonne 1 : largeur 6 par défaut, et 4 pour un écran xl
  • Ligne 1, colonne 2 : largeur 6 par défaut, et 8 pour un écran xl
  • Ligne 2, colonne 1 : largeur 4 par défaut, 7 pour les écrans lg et 6 pour les écrans xl
  • Ligne 2, colonne 2 : largeur 8 par défaut, 5 pour les écrans lg et 6 pour les écrans xl

Exercice 3

Modifiez l'exercice 1 pour avoir une ligne normale, une ligne incomplète et une ligne débordante.

Exercice 4

Nous allons pratiquer comment faire une mise en page avec différents alignements horizontaux et verticaux. Pour cela, faites une grille (statique) avec 2 × 2 colonnes telle que :

  • les colonnes de la première ligne sont collées en haut et centrées horizontalement.
  • les colonnes de la deuxième ligne sont centrés verticalement mais collées à droite.

Vous pouvez utiliser le modèle suivant, qui contient des colonnes avec des hauteurs différentes : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>R312</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  <style>
    div { border: 1px solid black; }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tortor nisi. Proin eget consectetur neque, at tristique lorem.
      </div>
      <div class="col-4">
        Sed ut volutpat felis, eget accumsan lorem
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Suspendisse sollicitudin tellus urna, nec facilisis dolor consequat vitae. Praesent ultrices mi fermentum, vehicula enim sit amet, maximus magna. Nunc eleifend augue tortor, quis porta mauris sagittis vitae.
      </div>
      <div class="col-4">
        Quisque et augue finibus, pulvinar metus id, lobortis purus. Cras vulputate tortor a risus interdum feugiat.
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>

Exercice 5

Nous allons mettre en pratique les classes de Bootstrap pour ajouter des espaces horizontaux entre les colonnes d'une même ligne. Dans cet exercice, faites une mise en page responsive qui utilise au moins les classes offset-3, offset-5, offset-lg-3 et offset-lg-5.

Vous pouvez utiliser le code HTML fourni dans l'exercice précédent pour aller plus vite.

Exercice 6

Faites une grille avec 1 ligne et 3 colonnes telle que :

  • Pour un petit écran, les colonnes contiennent A, B, et C
  • Pour un écran moyen, les colonnes contiennent B, C, et A
  • Pour un écran très grand, les colonnes contiennent C, A et B

TD #2

Exercice 1

Adaptez le code HTML suivant pour utiliser un popover au lieu de ce script. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>R312</title>
  <meta charset="utf-8">
</head>
<body>
  <form method="post" action="signup.php">
    <label for="_email">Adresse e-mail</label>
    <input type="email" name="user_mail" id="_email">
    <button type="button" onclick="aide_email()">?</button>
    <p id="aide"></p>
    <input type="submit" value="Valider">
  </form>
<script>
  function aide_email() {
    document.querySelector('#aide').innerHTML = "Écrivez votre adresse e-mail universitaire : prenom.nom@etu.univ-amu.fr"
  }
</script>
</body>
</html>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 2

Adaptez le code HTML suivant pour faire un modal avec Bootstrap. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>R312</title>
  <meta charset="utf-8">
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
    }

    .contenu {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    }

    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }

    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }

    .fermer {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .fermer:hover,
    .fermer:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .entete {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
    }

    .corps {
      padding: 2px 16px;
    }
  </style>
</head>
<body>
  <p>
    Proin nec dui non leo rhoncus mollis eu et tortor. Etiam tincidunt nisi commodo risus fringilla varius. Ut fermentum, lectus vitae posuere ultrices, leo nibh accumsan ipsum, eu ultricies risus leo at dui. Curabitur quis tortor non erat lobortis pharetra. 
    <button id="leBouton">Plus de détails</button>
  </p>

  <div id="leModal" class="modal">
    <div class="contenu">
      <div class="entete">
        <span class="fermer">&times;</span>
        <h2>Détails</h2>
      </div>
      <div class="corps">
        <p>
         Phasellus ultricies quam quis diam mattis hendrerit. Donec vel lacus condimentum magna vestibulum cursus eleifend non purus. Integer lorem nibh, tempor in dictum id, faucibus nec risus. Sed et leo diam. Morbi vitae convallis magna, non sodales risus. Sed eget dictum elit. Integer placerat nec enim at consectetur. Vestibulum libero velit, aliquet venenatis mauris ac, gravida vestibulum justo. Nullam laoreet eu ligula eu lobortis. Vivamus pellentesque, orci vel accumsan consequat, augue metus dignissim tellus, at eleifend velit ante eleifend nibh. Etiam facilisis bibendum leo.
       </p>
       <ol>
        <li>
         Morbi id arcu mauris. 
       </li>
       <li>
        Curabitur et luctus magna, sit amet malesuada dolor. In venenatis eget nibh ac interdum. 
      </li>
      <li>
        Vestibulum mollis ullamcorper aliquet. 
      </li>
      <li>
        Etiam tincidunt, ipsum non sodales rhoncus, quam urna placerat leo, eget egestas nibh libero ac tellus. 
      </li>
      <li>
        Vestibulum sagittis diam neque, ut hendrerit ligula sodales vel.
      </li>
    </ol>
  </div>
</div>

</div>

<script>
  const modal = document.querySelector('#leModal')
  const btn = document.querySelector('#leBouton')
  const span = document.querySelector('.fermer')

  btn.onclick = function() {
    modal.style.display = "block"
  }

  span.onclick = function() {
    modal.style.display = "none"
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none"
    }
  }
</script>

</body>
</html>

Vous pouvez consulter la documentation ici si vous en avez besoin.

TD #3

Exercice 1

Reprenez le code du cours et faites les modifications suivantes :

  • Changez les données pour avoir plus de tomates.
  • Adaptez le code du cours pour utiliser une graphique de type bar chart (diagramme à barres). Il suffit de changer google.visualization.PieChart par google.visualization.BarChart.

Exercice 3

Ajoutez les données dans le code. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R312</title>
</head>
<body>
  <div id="chart"></div>

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load("current", { "packages": ["corechart"], "language": "fr" })
    google.charts.setOnLoadCallback(drawChart)

    function drawChart() {
      let data = new google.visualization.DataTable()
      // remplir ici

      let options = {
        width: 500,
        height: 500,
        title: 'Performances des départements',
        hAxis: { title: 'Départements', titleTextStyle: { color: '#333' } },
        vAxis: { minValue: 0 }
      }

      let chart = new google.visualization.AreaChart(document.getElementById('chart'))
      chart.draw(data, options)
    }
  </script>
</body>
</html>
Département ; Ventes; Dépenses
Coworking   ; 1000  ; 400
Vidéo       ; 1170  ; 460
Photo       ; 660   ; 1120
Print       ; 1030  ; 540