Skip to content
Commits on Source (2)
Show whitespace changes
Inline Side-by-side
assets/js/form.js 0 → 100644
View file @ 9d97eace
const form = document.getElementById("messageform");
const submitbtn = document.getElementById("submit");
form.addEventListener("submit", checkForm);
function checkForm (evt) {
let isFormOk = true;
let errorMessage = "";
// Récupération des champs à vérifier
const name = document.getElementsById("name");
const mail = document.getElementById("email");
const message = document.getElementById("message");
const phone = document.getElementById("telephone");
const social = document.getElementById("social");
if (checkChar(name, 2)) {
isFormOk = false;
errorMessage += "\nLe nom doit faire au moins deux caractères de long";
}
if(mail.validity.badInput) {
isFormOk = false;
errorMessage += "\nVeuillez renseigner un e-mail valide";
}
if(message.value == null) {
isFormOk = false;
errorMessage += "\nVeuillez rentrer un message";
}
if(typeof phone.value != "number") {
isFormOk = false;
errorMessage += "\nNuméro de téléphone invalide";
}
if(!isFormOk) {
alert(errorMessage);
evt.preventDefault();
}
};
function checkChar (elmt, minChar) {
let nbChar = elmt.value.length;
if (nbChar < minChar) {
return true;
}
else {
return false;
}
}
\ No newline at end of file
assets/styles/style.css
View file @ 9d97eace
......@@ -33,22 +33,19 @@ body {
font-size: 1rem;
}
/* header img {
/* border: 1px solid blue;
}
header nav {
border: 1px solid green;
}
*/
header nav ul {
font-size: 2rem;
color: var(--font-color);
list-style: none;
padding: 0;
}
header img {
height: 80%;
width: 15rem;
max-width: 240px;
}
main {
background: linear-gradient(180deg, var(--bg-color1), var(--bg-color2));
justify-content: space-around;
......@@ -69,26 +66,28 @@ main {
}
h1 {
white-space: nowrap;
font-family: "paradise";
color: var(--bg-color2);
text-shadow: 15px 2px 30px #0f2140;
background-color: var(--bg-color4);
padding: 1rem 5rem 0.5rem 5rem;
border-radius: 1em;
width: 50%;
max-height: 80%;
padding: 3rem 5rem 2rem 5rem;
margin: 0;
border-radius: 1.3em;
text-align: center;
font-size: 3rem;
font-size: 5rem;
}
/*
#ephemerides, #temperatures {
border: 1px solid yellow;
}
*/
#ephemerides>h2 {
h2 {
font-family: "paradise";
font-size: 4rem;
font-weight: lighter;
margin: 1rem 6rem 1.5rem 6rem;
width: 100%;
font-size: 2rem;
text-align: center;
margin: 0 0 1rem 0;
border-bottom: 4px dashed var(--bg-color4);
}
#ephemerides {
......@@ -97,16 +96,10 @@ h1 {
padding-top: 0;
}
/*
main>div {
/* border: 1px dashed purple;
}
*/
#ephemerides>div {
display: flex;
flex-direction: column;
justify-content: space-around;
/* border: 1px solid lightgreen; */
width: 50%;
}
......@@ -128,25 +121,40 @@ main>div {
}
#ephemerides>div:first-of-type>div:last-child {
/* border: solid 1px red; */
font-size: 4rem;
justify-content: center;
#ephemerides>div {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 2.5rem;
}
#ephemerides>div:nth-child(3)>div:nth-child(3) {
#ephemerides>div:nth-child(2)>div:nth-child(1) {
display: flex;
width: 100%;
justify-content: space-around;
}
#ephemerides>div:first-of-type>div:last-child {
/* border: solid 1px red; */
border-radius: 50%;
width: 2em;
height: 2em;
padding: 1em;
max-height: 3em;
max-width: 3em;
align-self: center;
background-color: #0f214086;
font-size: 5rem;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
/* border: 1px solid red; */
margin: 1rem 0;
}
#ephemerides>div:nth-child(3)>div:nth-child(3)>p {
width: 100%;
height: 1rem;
font-size: 1.5rem;
text-align: center;
}
......@@ -250,7 +258,6 @@ td>img {
#temperatures>h2 {
width: 100%;
font-size: 2rem;
text-align: center;
/* border: solid 1px red; */
}
......@@ -310,7 +317,7 @@ footer {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.5rem;
font-size: 1rem;
width: 100%;
/* border: 1px solid blue; */
}
......@@ -326,7 +333,69 @@ footer>div {
width: 100%;
}
#messageform {
display: flex;
justify-content: center;
align-items: flex-start;
}
#messageform>fieldset {
width: 80%;
background-color: #23355fc5;
display: flex;
flex-direction: column;
justify-content: space-between;
border: none;
border-radius: 10px;
}
#messageform>fieldset>div {
/* border: 1px solid green; */
display: flex;
justify-content: flex-end;
height: 2rem;
margin: 0.2rem 0.4rem;
}
#messageform>fieldset>div:nth-last-of-type(2) {
height: 10rem;
}
#messageform>fieldset>div:last-of-type {
display: flex;
justify-content: space-around;
/* border: 1px solid red; */
margin: 1rem 0 0.3rem 0;
}
#messageform>fieldset>div:nth-child(7)>input {
width: 45%;
border: none;
background-color: var(--bg-color4);
}
#messageform>fieldset>div>label {
display: flex;
justify-content: space-between;
width: 100%;
/* border: 1px solid yellow; */
}
#messageform>fieldset>div:nth-last-of-type(2)>label {
flex-direction: column;
}
#messageform>fieldset>div:nth-last-of-type(2)>label>textarea {
margin-top: 0.5rem;
}
input,
textarea {
border-radius: 5px;
border: none;
}
#ephemerides>div:nth-child(3)>div:nth-child(3)>a:nth-child(2) {
/* border: solid 1px blue; */
::placeholder {
padding: 0.5rem;
font-size: 0.7rem;
}
\ No newline at end of file
autre.html deleted 100644 → 0
View file @ aaaf23cc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Une autre page</title>
<style>
table, tr, td, th {
border: 1px solid white;
border-collapse: collapse;
text-align: center;
padding: 0.3em;
background-color: grey;
}
table {
border:2px solid black;
}
th {
font-size: 0.8em;
background-color: darkgrey;
}
#lunch {
background-color: darkgray;
border-color: darkgray;
border-right: 1px;
padding: 0.2em;
}
#lasttab {
text-align: left;
font-weight: bold;
padding-left: 1em;
background-color: lightgray;
}
</style>
</head>
<body>
<main>
<h1 id="coucou">Bonjour</h1>
<a href="./index.html">Menu Principal</a>
<h3>Tableau V1</h3>
<p></p>
<table>
<tr>
<th></th>
<th>8h - 9h</th>
<th>9h - 10h</th>
<th>10h - 11h</th>
<th>11h - 12h</th>
<th id="lunch"></th>
<th>14h - 15h</th>
<th>15h - 16h</th>
<th>16h - 17h</th>
</tr>
<tr>
<th>Lun.</th>
<td colspan="2">HTML</td>
<td colspan="2">CSS</td>
<td id="lunch"></td>
<td colspan="3">JS</td>
</tr>
<tr>
<th>Mar.</th>
<td colspan="4">Java</td>
<td id="lunch"></td>
<td colspan="3">Spring</td>
<tr>
<th>Jeu.</th>
<td>Anglais</td>
<td>RE</td>
<td>Anglais</td>
<td>JrR</td>
<td id="lunch"></td>
<td colspan="3">prépa satge</td>
</tr>
<tr>
<th>Ven.</th>
<td colspan="4">node</td>
<td id="lunch"></td>
<td colspan="3">React</td>
</tr>
<tr>
<td id="lasttab" colspan="9">Les horaires sont succeptible d'être modifiées</td>
</tr>
</table>
<h3>Tableau V2</h3>
<table>
<caption>Légende de la table</caption>
<tbody>
<tr>
<th></th>
<th>Lun.</th>
<th>Mar.</th>
<th>Jeu.</th>
<th>Ven.</th>
<td rowspan="9" id="lasttab">Les horaires sont succeptibles d'être modifiées</td>
</tr>
<tr>
<th>8-9h</th>
<td rowspan="2">HTML</td>
<td rowspan="4">Java</td>
<td>Anglais</td>
<td rowspan="4">node</td>
</tr>
<tr>
<th>9h-10h</th>
<td>RE</td>
</tr>
<tr>
<th>10h-11h</th>
<td rowspan="2">CSS</td>
<td>Angais</td>
</tr>
<tr>
<th>11h-12h</th>
<td>JdR</td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
<tr>
<th>14h-15h</th>
<td rowspan="3">JS</td>
<td rowspan="3">Spring</td>
<td rowspan="3">prépa stage</td>
<td rowspan="3">React</td>
</tr>
<tr>
<th>15h-16h</th>
</tr>
<tr>
<th>16h-17h</th>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</main>
</body>
</html>
\ No newline at end of file
form.html 0 → 100644
View file @ 9d97eace
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire d'inscription</title>
<link rel="shortcut icon" href="./assets/img/sunny.webp" type="image/x-icon">
<link rel="stylesheet" href="./assets/styles/style.css">
<script src="./assets/js/form.js" defer></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./index.html">Menu Principal</a></li>
</ul>
</nav>
<h1>Ma Station Météo</h1>
<img src="./assets/img/sunny.webp" alt="soleil">
</header>
<main>
<form action="" method="get" id="messageform">
<fieldset>
<legend>Contactez nous</legend>
<div><label for="name">Nom: <input type="text" id="name" name="email" size="30" placeholder="Saisissez votre nom de famille" required></label></div>
<div><label for="email">E-mail: <input type="email" id="email" name="email" size="30" placeholder="Saisissez votre e-mail" required></label></div>
<div><label for="telephone">Téléphone: <input type="tel" id="telephone" name="telephone" size="30" placeholder="Saisissez votre numéro de téléphone (facultatif)"></label></div>
<div><label for="social">Réseau social: <input type="url" id="social" name="social" size="30" placeholder="Saisissez votre réseau (facultatif)"></label></div>
<div><label for="mesage">Message: <textarea name="message" id="message" cols="30" rows="10" size="30" placeholder="Saisissez votre message" required></textarea></div>
<div>
<input type="submit" id="submit" value="Envoyer">
<input type="reset" id="reset" value="Annuler">
</div>
</fieldset>
</form>
</main>
<footer id="contact">
<div>© Moah</div>
<div>Page météo créée par Clément GROSSELLE</div>
<div>Le site a connaître: <a href="https://www.ldnr.fr/">LDNR</a></div>
<div>
<a href="https://github.com/clemgro" target="_blank">GitHub</a>
<a href="https://www.freecodecamp.org/Petalux" target="_blank">freeCodeCamp</a>
<a href="https://www.linkedin.com/in/cl%C3%A9ment-grosselle/" target="_blank">LinkedIn</a>
<a href="mailto:clementgrosselle@gmail.com" target="_blank">Send a mail</a>
</div>
</footer>
</body>
</html>
\ No newline at end of file
index.html
View file @ 9d97eace
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Météo LDNR</title>
<link rel="stylesheet" href="./assets/styles/style.css">
<link rel="shortcut icon" href="./assets/img/sunny.webp" type="image/x-icon">
<script src="./assets/js/index.js" defer></script>
</head>
......@@ -17,7 +18,7 @@
<li><a href="#ephemerides">Éphémérides</a></li>
<li><a href="#temperatures">Températures</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="./autre.html#coucou">Salut</a></li>
<li><a href="./form.html#coucou">Contactez nous</a></li>
</ul>
</nav>
<h1>Ma Station Météo</h1>
......@@ -96,7 +97,7 @@
</main>
<footer id="contact">
<div>© Moah</div>
<div>Oui ouai yo</div>
<div>Page météo créée par Clément GROSSELLE</div>
<div>Le site a connaître: <a href="https://www.ldnr.fr/">LDNR</a></div>
<div>
<a href="https://github.com/clemgro" target="_blank">GitHub</a>
......