Skip to content

Commit 1c37d89

Browse files
CodingBDXCodingBDX
committed
add some style to insee
1 parent 79da2ba commit 1c37d89

2 files changed

Lines changed: 84 additions & 8 deletions

File tree

‎prototype/api-insee/index.html‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,26 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>entreprises</title>
8-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9-
8+
<link rel="stylesheet" href="style.css">
109

1110
</head>
1211
<body>
1312
<h1>entreprises</h1>
1413

14+
<section id="grid">
15+
<div class="show">
16+
<div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est expedita beatae magni animi nisi iusto repellendus nihil aperiam tempore, omnis ullam.</div>
17+
<div class="element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, repudiandae?</div>
18+
19+
<div class="element">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate incidunt nisi, aliquam modi tempore?</div>
20+
21+
<div class="element">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis nihil odio eos excepturi sequi!</div>
22+
23+
24+
</div>
25+
26+
</section>
27+
1528
<table class="table">
1629
<thead>
1730
<tr>
@@ -23,9 +36,9 @@ <h1>entreprises</h1>
2336
</thead>
2437
<tbody>
2538

26-
<th scope="row">2</th>
39+
<th scope="row" class="numero"></th>
2740

28-
<td id="entreprise_numero" class="display:inline-block;color:red"></td>
41+
<td id="entreprise_numero"></td>
2942

3043
<td id="entreprise_nom"></td>
3144
<td id="entreprise_adresse"></td>
@@ -40,7 +53,7 @@ <h1>entreprises</h1>
4053
// function pour recuperer des donnees de l'api insee, on reduit les functions ou url dans des variables pour faciliter la lecture
4154

4255
const ul = document.getElementById('entreprises');
43-
const url = 'https://entreprise.data.gouv.fr/api/sirene/v1/full_text/montpellier';
56+
const url = 'https://entreprise.data.gouv.fr/api/sirene/v1/full_text/bordeaux';
4457

4558

4659

@@ -49,15 +62,23 @@ <h1>entreprises</h1>
4962
// c'est ici que la magie opère, puisque cela recupere la data de l url en json
5063
fetch(url).then((resp) => resp.json()).then(function (data) {
5164
let entreprises = data.etablissement;
65+
let chiffre = 0;
66+
5267
// comme on a plusieurs resultats, il faut les recuperers individuellements
5368
return entreprises.map(function (entreprise) {
5469

5570
let td = document.createElement('td');
56-
document.querySelector('#entreprise_nom').innerHTML += `<p class="display:inline-block">${entreprise.l1_normalisee}</p>`;
71+
document.querySelector('.numero').innerHTML += `<p class="display:inline-block;color: #38D8DA">${chiffre ++}</p>`;
72+
73+
74+
document.querySelector('#entreprise_nom').innerHTML += `<p class="display:inline-block;color: #38D8DA">${entreprise.l1_normalisee}</p>`;
75+
76+
77+
document.querySelector('#entreprise_adresse').innerHTML += `<p class="display:inline-block;color: #38D8DA">${entreprise.l4_normalisee}</p>`;
78+
5779

58-
document.querySelector('#entreprise_adresse').innerHTML += `<p class="display:inline-block">${entreprise.l4_normalisee}</p>`;
80+
document.querySelector('#entreprise_numero').innerHTML += `<p class="display:inline-block;color: #38D8DA">${entreprise.id}</p>`;
5981

60-
document.querySelector('#entreprise_numero').innerHTML += `<p class="display:inline-block">${entreprise.id}</p>`;
6182

6283

6384

‎prototype/api-insee/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
2+
3+
body {
4+
background-color: #0A192F;
5+
color: #38D8DA;
6+
7+
}
8+
9+
table, thead, tbody {
10+
padding-top: 1em;
11+
text-align: center;
12+
color: #38D8DA;
13+
margin: 0 auto;
14+
width: 100%;
15+
}
16+
17+
h1 {
18+
font-family: 'Koulen',
19+
cursive;
20+
font-size: 4em;
21+
22+
font-weight: bold;
23+
text-transform: uppercase;
24+
color: blueviolet;
25+
display: flex;
26+
27+
28+
justify-content: center;
29+
}
30+
31+
#grid {
32+
display:flex;
33+
justify-content: space-between;
34+
background-color: gainsboro;
35+
height: 30vh;
36+
width:100%;
37+
}
38+
39+
.show {
40+
display: grid;
41+
grid-template-columns: repeat(4, 1fr);
42+
background-color: aliceblue;
43+
gap: 1.2em;
44+
}
45+
46+
.element {
47+
display: flex;
48+
height: auto;
49+
margin: 1em;
50+
padding: 1em;
51+
background-color: #112240;
52+
flex-direction: row;
53+
overflow: hidden;
54+
color: aliceblue;
55+
}

0 commit comments

Comments
 (0)