ProfileCard/index.html at master · ezechiaskumbu77/ProfileCard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title> Design with Bootstrap</title>
    <!-- MDB icon -->
    <link rel="icon" href="" type="image/x-icon" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/style.css"/>
    <style></style>
  </head>
  <body>
    <!-- Start your project here-->
    <div style="height: 100vh; text-align: center; margin-top: 150px;" class="container">
      <div class="container"></div>
                <script>
                    fetch('people.json')
                        .then(function (response){
                            return response.json();
                        })
                        .then(function(data){
                            appendData(data);
                        })
                        .catch(function(err){
                            console.log('error: ' + err);
                        });

                    function appendData(data){
                        var mainContainer = document.getElementById("myData");
                        for (var i = 0; i <data.length; i++){

                            var div = document.createElement("div");
                            div.innerHTML = '<br /><br />Nom : ' + data[i].nom + '<br />Numero : ' + data[i].numero + '<br />cle : ' + data[i].cle + '<br />    liste - ';
                            mainContainer.appendChild(div);

                            for(var j = 0; j <data[i].liste.length; j++){
                                var div = document.createElement("div");
                                div.innerHTML = 'date : ' + data[i].liste[j].date + ' Heure : ' + data[i].liste[j].date + ' Coût : ' + data[i].liste[j].cout + ' Clé : ' + data[i].liste[j].cle + ' Valeur : ' + data[i].liste[j].valeur + '<br />    Remarque --<br />';
                                mainContainer.appendChild(div);

                                for(var k = 0; k <data[i].liste[j].remarque.length; k++){
                                    var div = document.createElement("div");
                                    div.innerHTML = 'date : ' + data[i].liste[j].remarque[k].date + ' Heure : ' + data[i].liste[j].remarque[k].heure + ' Coût : ' + data[i].liste[j].remarque[k].cout + ' Clé : ' + data[i].liste[j].remarque[k].cle + ' Valeur : ' + data[i].liste[j].remarque[k].valeur;
                                    mainContainer.appendChild(div);
                                }
                            }
                        }
                    }
                </script>
    </div>
    <!-- End your project here-->
  </body>

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript" src="js/main.js"></script>
</html>