matthieu/stagiaire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added JavaScript Stuff

Browse Source
This commit is contained in:
Melissa
2026-06-19 11:50:50 +02:00
parent ddfd17f9af
commit 69eff4006a
3 changed files with 54 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contact.js
+46 -4
View File
@@ -1,10 +1,52 @@
const zoneMessage = document.getElementById("contacter");
const compteur = document.getElementById("restant");
const motCaractere = document.getElementById("mot");
const boutonEffacer = document.getElementById("effacer");
const formulaire = document.querySelector("form");
const badge = document.getElementById("statut_horaires");
const heure = new Date().getHours();
const MAX = 500;
zoneMessage.addEventListener("input", function () {
const dejaTape = zoneMessage.value.length;
compteur.textContent = MAX - dejaTape;
compteur.style.color = MAX - dejaTape < 50 ? "red" : "black";
if (heure >= 9 && heure < 18) {
badge.textContent = "✅ Nous sommes ouverts (9h–18h)";
badge.style.color = "green";
} else {
badge.textContent = "🔴 Fermé — écrivez-nous, on répond dès l'ouverture !";
badge.style.color = "red";
}
function rafraichirCompteur() {
const restant = MAX - zoneMessage.value.length;
compteur.textContent = restant;
compteur.style.color = restant < 50 ? "red" : "black";
motCaractere.textContent = restant <= 1 ? "caractère" : "caractères";
}
zoneMessage.addEventListener("input", rafraichirCompteur);
boutonEffacer.addEventListener("click", function () {
zoneMessage.value = "";
rafraichirCompteur();
});
formulaire.addEventListener("submit", function (evenement) {
if (zoneMessage.value.trim() === "") {
evenement.preventDefault();
alert("Merci d'écrire un message avant d'envoyer !");
}
});
function creerNavbar() {
return `
<div id="nav_barre" class="shadow">
<h1>FleetZen</h1>
<div id="buttons">
<button class="instyled">contact</button>
<a href="services.html"><button class="styled">services</button></a>
<a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
</div>
</div>`;
}
document.body.insertAdjacentHTML("afterbegin", creerNavbar());
pages/contact.css
+4 -1
View File
@@ -130,7 +130,7 @@ td {
.form {
display: flex;
width: 570px;
height: 320px;
height: 380px;
border: 3px solid green;
align-items: center;
flex-direction: column;
@@ -164,3 +164,6 @@ textarea {
bottom: 0;
width: 100%;
}
#statut_horaires {
font-size: 15px;
}
pages/contact.html
+4 -12
View File
@@ -8,16 +8,6 @@
<html lang="fr">
</head>
<body>
<div id="nav_barre" class="shadow">
<h1>FleetZen</h1>
<div id="buttons">
<button class="instyled">contact</button>
<a href="services.html"><button class="styled">services</button></a>
<a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
</div>
</div>
<p id= titre_tableau>
<b>Les développeurs de ce site</b>
</p>
@@ -43,6 +33,7 @@
<div class="form">
<p><b>Nous contacter</b></p>
<p id="statut_horaires"></p>
<form method="get" action="">
<p>
<label for="prenom">Votre prénom :</label>
@@ -50,15 +41,16 @@
</p>
<p>
<label for="e_mail">Votre e-mail:</label>
<input type="e_mail" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
<input type="email" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
</p>
<div>
<label for="contacter">Des questions a nous poser?</label><br>
<textarea name="contacter" id="contacter" rows="6" cols="40" maxlength="500"></textarea>
<p class=small>Il vous reste <span id="restant">500</span> caractères.</p>
<p class=small>Il vous reste <span id="restant">500</span> <span id="mot">caractères</span>.</p>
</div>
<p>
<button>Envoyer</button>
<button type="button" id="effacer">Effacer</button>
</p>
</form>