Revenons à nos profils du sujet précédent !
Attention: il y a d'importants changements dans tous les fichiers. Il faut tous les reprendre...
Rappels pour recréer la structure, si vous avez perdu le répertoire « profils »:
- créez un répertoire « profils »
- rentrez dedans et tapez « npm init » puis « npm install express »
- ajoutez "type" : "module" dans package.json
- créez le répertoire « public »
Les fichiers
app.js
import express from 'express';
import * as fs from "node:fs/promises";
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Notre app « profils » écoute sur le port 3000')
});
app.get('/profil/:id', async (requete, reponse) => {
console.log('Requete GET /profil/:id reçue');
let id=requete.params.id;
let profilsTexte=await fs.readFile('profils.json','utf8');
let profils=JSON.parse(profilsTexte);
reponse.send(profils[id]);
})
profils.json
{
"p132": {"id": "p132", "nom": "Minou", "sexe": "homme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/chat2.svg", "messages": 54, "description": "Miaou ? 🐁 🐭 ? ", "likes": 132 },
"p125": {"id": "p125", "nom": "L. Neige", "sexe": "femme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/reindeer.png", "messages": 172, "description": "Je suis un peu timide.", "likes": 232 },
"p241": {"id": "p241", "nom": "Anonyme", "sexe": "femme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/et-masque.png", "messages": 2, "description": "J'ai beaucoup voyagé. Je cherche quelqu'un qui accepte les différences.", "likes": 5 },
"p112": {"id": "p112", "nom": "Père N.", "sexe": "homme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/santa.png", "messages": 1300482832, "description": "J'aime la nature et les paysages nordiques. Frileuses s'abstenir. Voyage d'affaires en période de fêtes.", "likes": 5103003013 }
}
public/index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Profils</title>
<script src="https://moodle.iutv.univ-paris13.fr/img/bjs2/bjs2-js-lib.js"></script>
<link rel="stylesheet" href="profils.css"/>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<ul id="liste">
<li data-id="p125">L. Neige</li>
<li data-id="p112">Père N.</li>
<li data-id="p132">Minou</li>
<li data-id="p241">Anonyme</li>
</ul>
<div id="profil-principal" class="profil">
<img class="portrait" src="" alt=""/>
<p class="nom"></p>
<p class="stats"><span class="messages">? messages</span> <span class="likes">? likes</span></p>
<p class="description"></p>
<span id="editer">[Éditer]</span>
</div>
<div id="formulaire">
<div id="formulaire-boite">
<span id="fermer">x</span>
<div id="ligne-nom" ><label for="edit-nom" >Nom: </label><input id="edit-nom" type="text"/> </div>
<div id="ligne-sexe" ><label for="edit-sexe" >Sexe: </label><!--
--><select id="edit-sexe">
<option value="femme">Femme</option>
<option value="homme">Homme</option>
<option value="autre">Autre</option>
</select>
</div>
<div id="ligne-messages" ><label for="edit-portrait" >Portrait: </label><input id="edit-portrait" type="text"/></div>
<div id="ligne-messages" ><label for="edit-messages" >Messages: </label><input id="edit-messages" type="number"/></div>
<div id="ligne-likes" ><label for="edit-likes" >Likes: </label><input id="edit-likes" type="number"/></div>
<div id="ligne-description"><label for="edit-description">Description:</label><textarea id="edit-description"></textarea> </div>
<input id="enregistrer" type="button" value="Enregistrer"/>
</div>
</div>
<script type="module" src="profils.js"></script>
</body>
</html>
public/profils.css
/* Inspiré de https://freefrontend.com/css-profile-cards/ */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");
body{
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(240,180,149,1) 100%);
background-repeat: no-repeat;
font-family: sans;
color: #444;
background-attachment: fixed;
}
/***********************************/
/* liste **/
/***********************************/
#liste{
display: flex;
list-style-type: none ;
}
#liste li{
margin: 1em;
background-color: #222831;
color: white;
padding: .7em;
border-radius: .3em;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#liste li{
margin: 1em;
background-color: #222831;
color: white;
padding: .7em;
border-radius: .3em;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#liste li:hover{
background-color: #522831;
}
/***********************************/
/* Profil **/
/***********************************/
#profil-principal{
margin-left: 7em;
}
.profil {
position: relative;
background-color: #222831;
color: white;
width: 17em;
text-align: center;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
font-family: 'Baloo Paaji 2', cursive;
padding: .5em;
}
.profil .portrait {
border-radius: 50%;
width: 160px;
height: 160px;
border: 5px solid #272133;
margin-top: 20px;
background-color: white;
}
.profil .portrait.homme {
box-shadow: 0 10px 50px rgba(25, 110, 235, .8);
}
.profil .portrait.femme {
box-shadow: 0 10px 50px rgba(235, 25, 110, .6);
}
.profil .stats {
font-size: 1.2em;
margin-top: .5em;
}
.profil .stats span {
margin: 1em;
}
.profil .nom{
margin-top: 15px;
margin-bottom: .5em;
font-size: 1.5em;
}
#editer{
cursor: pointer;
cursor: pointer;
}
#editer:hover{
color: #aa0;
}
.profil[data-id="p132"]::before{
content: '🐁';
position: absolute;
top: 200px;
right: -100px;
animation: 1s 1 normal souris;
animation-delay: 4000ms;
opacity: 0;
}
@keyframes souris {
from {
right: -100px;
opacity: 1;
}
to {
right: 300px;
opacity: 1;
}
}
.profil[data-id="p132"]::after{
content: '';
border-radius: 50%;
background-color: #444;
width: 5px;
height: 5px;
position: absolute;
top: 106px;
left: 133px;
animation: 1s 1 normal oeilg;
animation-delay: 4000ms;
z-index: 2;
opacity: 0;
}
.profil[data-id="p132"] .nom::before{
content: '';
border-radius: 50%;
background-color: #444;
width: 5px;
height: 5px;
position: absolute;
top: 107px;
left: 154px;
animation: 1s 1 normal oeild;
animation-delay: 4000ms;
z-index: 2;
opacity: 0;
}
@keyframes oeilg {
from {
opacity: 1;
left: 133px;
}
to {
opacity: 1;
left: 126px;
}
}
@keyframes oeild {
from {
opacity: 1;
left: 154px;
}
to {
opacity: 1;
left: 147px;
}
}
.profil[data-id="p132"] .nom::after{
content: '';
width: 14px;
height: 8px;
border-right: 8px solid white;
border-left: 7px solid white;
position: absolute;
top: 104px;
left: 129px;
animation: 1s 1 normal blanc;
animation-delay: 4000ms;
opacity: 0;
}
@keyframes blanc {
from {opacity: 1;}
to {opacity: 1;}
}
/***********************************/
/* Formulaire **/
/***********************************/
#formulaire{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
#formulaire-boite{
position: absolute;
top: 5em;
left: 5em;
width: 25em;
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(240,180,149,1) 100%);
border-radius: 5px;
padding: 1em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
#fermer{
position: absolute;
right: 0;
top: 0;
display: inline-block;
padding: .3em;
cursor: pointer;
}
#fermer:hover{
color: #aa0;
}
#formulaire-boite>div{
margin: .5em 0;
}
#formulaire label{
display: inline-block;
min-width: 7em;
vertical-align: top;
}
#formulaire-boite>div input,#formulaire textarea{
width: 240px;
box-sizing: content-box;
}
#formulaire textarea{
height: 7em;
}
public/profils.js
// vide pour l'instant
