les meilleurs de la programmation avec Sen Dev Tech
Fiche de TP Algo Langage C: écrire un programme qui permet de déterminer la table de multiplication donné par l’utilisateur
#include <stdio.h>
//ecrire un programme qui permet de determiner la table de multiplication donné par l'utilisateur
int main(){
int i, n;
printf("donner un entier");
scanf("%d", &n);
for(i=1; i<=10; i++)
printf("%d * %d = %d \n", n, i, n*i);
}
Dans ce tutoriel je vous apprends à créer un Dashboard Admin tout responsive avec du HTML et CSS uniquement.
En effet vous allez découvrir dans cet article des notions solide pour créer une interface admin adaptée à votre besoin et vous allez aussi apprendre en profondeur HTML et CSS sur les animations, les grid, flex-box, comment créer un sidebar, un menu…
Dans un premier temps vous devez télécharger Fontawesome pour les icons ou bien utilisé le lien cdn cliquez ici , si vous avez de la connexion bien évidement.
Apres avoir télécharger les outils nécessaire nous allons maintenant créer notre Sidebar en premier :
<div class="sidebar">
<div class="sidebar-brand">
<h2><span class="fa fa-user-o"> </span> Learn Programming</h2>
</div>
<div class="sidebar-menu">
<ul>
<li><a href="#" class="active"><span class="fa fa-home"></span><span>Accueil</span></a></li>
<li><a href="#"><span class="fa fa-tasks"></span><span>Taches</span></a></li>
<li><a href="#"><span class="fa fa-th-large"></span><span>Blog</span></a></li>
<li><a href="#"><span class="fa fa-line-chart"></span><span>Statistiques</span></a></li>
<li><a href="#"><span class="fa fa-address-book"></span><span>A-propos</span></a></li>
<li><a href="#"><span class="fa fa-clipboard"></span><span>Projets</span></a></li>
<li><a href="#"><span class="fa fa-money"></span><span>Bilans</span></a></li>
<li><a href="#"><span class="fa fa-registered"></span><span>Enregistrement</span></a></li>
<li><a href="#"><span class="fa fa-user"></span><span>Contact</span></a></li>
</ul>
</div>
</div>
le code CSS de notre Sidebar:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: 'verdana';
}
.sidebar{
width: 300px;
position: fixed;
left: 0;
top: 0;
height: 100vh;
background: #008ea1;
z-index: 100;
transition: width 300ms;
}
.sidebar-brand{
height: 90px;
padding: 1rem 0rem 1rem 2rem;
color: #fff;
}
.sidebar-brand span{
display: inline-block;
margin-right: 1rem;
}
.sidebar-menu{
margin-top: 1rem;
}
.sidebar-menu a{
padding-left: 1rem;
display: block;
color: #fff;
font-size: 1.1rem;
}
.sidebar-menu li{
width: 100%;
margin-bottom: 2rem;
padding-left: 10%;
}
.sidebar-menu a span:first-child{
padding-left: 1rem;
font-size: 1.5rem;
}
.sidebar-menu a.active{
background: #fff;
padding-top: 1rem;
padding-bottom: 1rem;
color: #008ea1;
border-radius: 30px 0px 0px 0px;
}
.content{
transition: margin-left 300ms;
margin-left: 22%;
}
NB: Apres la creation de notre sidebar, nous avons crée une div avec la classe content qui va englober notre contenu mais ce dernier est aussi accompagné d’une balise main. donc cela veut dire que tout le reste de notre code se trouve entre ces deux.
Pour plus de compréhension, vous pouvez aussi suivre la vidéo sur YouTube en cliquant ici
Creation de notre navbaar:
<div class="content">
<header>
<p><label for="menu"><span class="fa fa-bars"></span></label><span class="accueil">Accueil</span></p>
<div class="search-wrapp">
<span class="fa fa-search"></span>
<input type="search" name="" placeholder="recherche">
</div>
<div id="dropdown" class="user-wrapp">
<div>
<h4>Alassane</h4>
<small>Admin</small>
</div>
<img decoding="async" src="images/pp.jpg" width="30" height="30" class="logo-admin">
<div class="dropdown-content">
<p>Profil</p>
<p>Deconnexion</p>
</div>
</div>
</header>
Remarque: si vous constatez bien le code, j’ai crée la div mais je ne les pas fermé; c’est à la fin du code global que vous allez le fermé.
Code CSS du navbar :
header{
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 1rem;
box-shadow: 2px 5px 15px 2px rgb(0 0 0 / 10%);
position: fixed;
left: 22%;
width: calc(100% - 22%);
top: 0;
z-index: 100;
transition: left 300ms;
}
.accueil{
font-size: 1.5rem;
padding-right: 1rem;
margin-left: 15px;
color: #008ea1;
}
.search-wrapp{
border: 1px solid #008ea1;
border-radius: 20px;
height: 38px;
display: flex;
align-items: center;
overflow-x: hidden;
}
.search-wrapp input{
height: 100%;
padding: .5rem;
border: none;
outline: none;
}
.search-wrapp span{
display: inline-block;
padding: 0rem 1rem;
font-size: 1.5rem;
color: #008ea1;
}
.user-wrapp{
display: flex;
align-items: center;
}
.user-wrapp img{
border-radius: 50%;
margin-right: 5rem;
}
.user-wrapp small{
color: #ccc;
display: inline-block;
}
.logo-admin{
cursor: pointer;
}
#dropdown{
position: relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
height: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 5px;
z-index: 1;
}
#dropdown:hover .dropdown-content{
display: block;
cursor: pointer;
}
.dropdown-content p{
padding: .5rem;
}
Ainsi je vais maintenant crée la balise main qui lui aussi va se fermé à la fin du code.
<main>
<div class="cards">
<div class="card-single">
<div>
<h2>2.000.000</h2>
<small>Ventes</small>
</div>
<div>
<span class="fa fa-shopping-cart"></span>
</div>
</div>
<div class="card-single">
<div>
<h2>+30</h2>
<small>Stock</small>
</div>
<div>
<span class="fa fa-newspaper-o"></span>
</div>
</div>
<div class="card-single">
<div>
<h2>58</h2>
<small>Fournisseur</small>
</div>
<div>
<span class="fa fa-outdent"></span>
</div>
</div>
<div class="card-single">
<div>
<h2>20k</h2>
<small>Communauté</small>
</div>
<div>
<span class="fa fa-group"></span>
</div>
</div>
</div>
code CSS des cards:
main{
margin-top: 80px;
background-color: #ebf6ff;
padding: 2rem 1.5rem;
min-height: calc(100vh);
}
.cards{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
margin-top: 1rem;
}
.card-single{
display: flex;
background-color: #fff;
justify-content: space-between;
padding: 2rem;
border-radius: 10px;
box-shadow: 2px 5px 10px 2px rgb(0 0 0 / 10%);
}
.card-single span:first-child{
color: #f8e80c;
}
.card-single span:last-child{
font-size: 2rem;
}
.card-single small{
color: grey;
}
.card-single:hover{
background-color: #008ea1;
color: #fff;
}
Nb: vous devez aussi savoir que le code est une continuité.
Code des deux tableaux et les statistiques :
<div class="composant">
<div class="ventes">
<div class="case">
<div class="header-case">
<h2>Listes produits</h2>
<button class="button">voir plus <span class="fa fa-arrow-right"></span></button>
</div>
<div class="body-case">
<div class="tableau">
<table width="100%">
<thead>
<tr>
<td>modou</td>
<td>pathe</td>
<td>demba</td>
</tr>
</thead>
<tbody>
<tr>
<td>modou</td>
<td>dmeba</td>
<td><span class="status-produit color-one"></span>mass</td>
</tr>
<tr>
<td>modou</td>
<td>dmeba</td>
<td><span class="status-produit color-two"></span>mass</td>
</tr>
<tr>
<td>modou</td>
<td>dmeba</td>
<td><span class="status-produit color-three"></span>mass</td>
</tr>
<tr>
<td>modou</td>
<td>dmeba</td>
<td><span class="status-produit color-four"></span>mass</td>
</tr>
<tr>
<td>modou</td>
<td>dmeba</td>
<td><span class="status-produit color-five"></span>mass</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="stock">
<div class="case">
<div class="header-case">
<h2>Clients fideles</h2>
</div>
<div class="body-case">
<div class="all-users">
<div class="infos">
<img decoding="async" src="images/pp.jpg" width="30" height="30">
<div>
<h4>Omar</h4>
<small>Embulant</small>
</div>
</div>
<div class="user-contact">
<span class="fa fa-facebook"></span>
<span class="fa fa-whatsapp"></span>
<span class="fa fa-phone"></span>
</div>
</div>
<div class="all-users">
<div class="infos">
<img decoding="async" src="images/pp.jpg" width="30" height="30">
<div>
<h4>Omar</h4>
<small>Embulant</small>
</div>
</div>
<div class="user-contact">
<span class="fa fa-facebook"></span>
<span class="fa fa-whatsapp"></span>
<span class="fa fa-phone"></span>
</div>
</div>
<div class="all-users">
<div class="infos">
<img decoding="async" src="images/pp.jpg" width="30" height="30">
<div>
<h4>Omar</h4>
<small>Embulant</small>
</div>
</div>
<div class="user-contact">
<span class="fa fa-facebook"></span>
<span class="fa fa-whatsapp"></span>
<span class="fa fa-phone"></span>
</div>
</div>
<div class="all-users">
<div class="infos">
<img decoding="async" src="images/pp.jpg" width="30" height="30">
<div>
<h4>Omar</h4>
<small>Embulant</small>
</div>
</div>
<div class="user-contact">
<span class="fa fa-facebook"></span>
<span class="fa fa-whatsapp"></span>
<span class="fa fa-phone"></span>
</div>
</div>
<div class="all-users">
<div class="infos">
<img decoding="async" src="images/pp.jpg" width="30" height="30">
<div>
<h4>Omar</h4>
<small>Embulant</small>
</div>
</div>
<div class="user-contact">
<span class="fa fa-facebook"></span>
<span class="fa fa-whatsapp"></span>
<span class="fa fa-phone"></span>
</div>
</div>
</div>
<button class="btn">voir plus <span class="fa fa-arrow-right"></span></button>
</div>
</div>
<div class="statistiques">
<div class="statistique-barre bar1"></div>
<div class="statistique-barre bar2"></div>
<div class="statistique-barre bar3"></div>
<div class="statistique-barre bar4"></div>
<div class="statistique-barre bar5"></div>
<div class="statistique-barre bar6"></div>
<div class="statistique-barre bar4"></div>
<div class="statistique-barre bar5"></div>
<div class="statistique-barre bar6"></div>
<div class="statistique-barre bar4"></div>
<div class="statistique-barre bar5"></div>
<div class="statistique-barre bar6"></div>
</div>
<div class="legende">
<h4>Legende</h4>
<table>
<tr>
<td><span class="evolution color-one"></span>Riz</td>
</tr>
<tr>
<td><span class="evolution color-two"></span>Mil</td>
</tr>
</table>
<div class="txt-deco">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
</div>
</div>
code CSS.
.composant{
margin-top: 3.5rem;
display: grid;
grid-gap: 2rem;
grid-template-columns: 69% auto;
}
.case{
background-color: #fff;
border-radius: 10px;
}
.header-case, .body-case{
padding: .5rem
}
.header-case{
display: flex;
justify-content: space-between;
align-items: center;
}
.header-case button{
background-color: #008ea1;
border-radius: 10px;
color: #fff;
font-size: .8rem;
padding: .5rem 1rem;
border: none;
cursor: pointer;
}
.btn{
background-color: #008ea1;
border-radius: 10px;
color: #fff;
font-size: .8rem;
padding: .5rem 1rem;
border: none;
cursor: pointer;
margin-bottom: 1rem;
margin-left: 5px;
}
table{
border-collapse: collapse;
}
thead tr{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
thead td{
font-weight: 700;
}
td{
padding: .5rem 1rem;
}
td .status-produit{
display: inline-block;
height: 15px;
width: 15px;
margin-right: 1rem;
border-radius: 50%;
}
.status-produit.color-one{
background-color: #ec1c24;
}
.status-produit.color-two{
background-color: #fff200;
}
.status-produit.color-three{
background-color: #b83dba;
}
.status-produit.color-four{
background-color: #00a8f3;
}
.status-produit.color-five{
background-color: #b83dba;
}
tr td:last-child{
display: flex;
align-items: center;
}
.tableau{
overflow-x: auto;
width: 100%;
}
.all-users{
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem .7rem;
}
.infos{
display: flex;
align-items: center;
}
.infos img{
border-radius: 50%;
margin-right: 1rem;
}
.user-contact span{
font-size: 1.2rem;
display: inline-block;
margin-left: .5rem;
}
.fa-facebook{
color: #4267B2;
cursor: pointer;
}
.fa-whatsapp{
color: #128C7E;
cursor: pointer;
}
.fa-phone{
color: #1DB954;
cursor: pointer;
}
.fa-bars{
cursor: pointer;
}
.statistiques{
background-color: #fff;
display: flex;
height: 300px;
align-items: flex-end;
}
.statistique-barre{
flex-grow: 1;
border: 1px solid #ccc;
margin: 6px;
}
.bar1{
height: 95%;
background-color: #ec1c24;
}
.bar2{
height: 55%;
background-color: #00a8f3;
}
.bar3{
height: 45%;
background-color: #ec1c24;
}
.bar4{
height: 85%;
background-color: #00a8f3;
}
.bar5{
height: 35%;
background-color: #ec1c24;
}
.bar6{
height: 95%;
background-color: #00a8f3;
}
.legende{
background-color: #fff;
border-radius: 10px;
}
.legende h4{
padding: 1rem;
}
td .evolution{
display: inline-block;
height: 15px;
width: 15px;
margin-right: 1rem;
border-radius: 50%;
}
.evolution.color-one{
background-color: #ec1c24;
}
.evolution.color-two{
background-color: #00a8f3;
}
.txt-deco{
padding: 1rem;
font-weight: 500;
color: grey;
}
Vous savez quand on vous créez votre admin vous aurez forcément besoin d’un calendrier pour pourvoir dater vos évènements et autres. ainsi nous avons à ce que vous en aurez besoin.
alors voici le code du calendrier :
<div class="calendar">
<div class="mois-annee">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>Mai <br /> <span>2021</span></li>
</ul>
</div>
<ul class="mois">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="jours">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li><span class="active">18</span></li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</main>
</div>
Nb: vous avez tous remarqué que c’est à la fin que j’ai fermé la balise main ainsi que la div qui contient la class content.
code CSS du calendrier :
.calendar{
padding-top: 2rem;
}
.mois-annee{
padding: 70px 25px;
width: 100%;
background-color: #008ea1;
text-align: center;
}
.mois-annee ul{
margin: 0;
padding: 0;
}
.mois-annee ul li{
color: #fff;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.mois-annee .prev{
float: left;
padding-top: 10px;
}
.mois-annee .next{
float: right;
padding-top: 10px;
}
.mois{
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.mois li{
display: inline-block;
width: 13%;
color: #666;
text-align: center;
}
.jours{
padding: 10px 0;
background-color: #eee;
margin: 0;
}
.jours li{
display: inline-block;
width: 13%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #777;
}
.jours li .active{
padding: 5px;
background-color: #008ea1;
color: #fff !important;
}
code de notre toggle barre, c’est à dire les trois barre à coté. Nb: vous devez le mettre en haut de votre code après la balise body :
<input type="checkbox" name="" id="menu">
code css :
#menu:checked ~ .sidebar{
width: 60px;
}
#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
#menu:checked ~ .sidebar li a span:last-child{
display: none;
}
#menu:checked ~ .content{
margin-left: 60px;
}
#menu:checked ~ .content header{
width: calc(100% - 60px);
left: 60px;
}
code pour gérer la responsivité avec les média queries :
@media only screen and (max-width: 960px){
.cards{
grid-template-columns: repeat(3, 1fr);
}
.recent-grid{
grid-template-columns: 60% 40%;
}
}
@media only screen and (max-width: 768px){
.cards{
grid-template-columns: 100%;
}
.composant{
grid-template-columns: repeat(1, 1fr);
}
.search-wrapp{
display: none;
}
.sidebar{
left: -100% !important;
}
header p{
display: flex;
align-items: center;
}
header p label{
display: flex;
padding-right: 0rem;
margin-right: 1rem;
height: 40px;
width: 40px;
border-radius: 50%;
color: #fff;
align-items: center;
justify-content: center !important;
background-color: #008ea1;
}
header p span{
text-align: center;
padding-right: 0rem;
}
.content{
width: 100%;
margin-left: 0rem !important;
}
header{
width: 100% !important;
left: 0 !important;
}
#menu:checked ~ .sidebar {
left: 0 !important;
z-index: 100;
width: 45%;
}
#menu:checked ~ .sidebar li a{
padding-left: 1rem;
}
#menu:checked ~ .sidebar .sidebar-brand,
#menu:checked ~ .sidebar li{
padding-left: 2rem;
text-align: left;
}
#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
#menu:checked ~ .sidebar li a span:last-child{
display: inline;
}
#menu:checked ~ .content{
margin-left: 0rem !important;
}
}
@media only screen and (max-width: 560px){
.cards{
grid-template-columns: 100%;
}
}
@media only screen and (max-width: 1200px){
.sidebar{
width: 60px;
}
.sidebar .sidebar-brand, h2 span:last-child,
.sidebar li a span:last-child{
display: none;
}
.content{
margin-left: 60px;
}
.content header{
width: calc(100% - 60px);
left: 60px;
}
}
Salut les amis, aujourd’hui, dans ce blog, vous apprendrez à créer des icones des réseaux sociaux en HTML et CSS puis de créer des animations avec la propriété hover, rotation …
Vous pouvez aussi regarder la vidéo complète disponible sur ma chaine YouTube :
Tout d’abord, créez une page qui aura pour extension .html puis copiez le code et collez le :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>animate icon css</title>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-whatsapp"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-bell"></i></li>
</ul>
</div>
</div>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));
(function () {
var PenciLazy = new LazyLoad({
elements_selector: '.penci-lazy',
data_bg: 'bgset',
class_loading: 'lazyloading',
class_entered: 'lazyloaded',
class_loaded: 'pcloaded',
unobserve_entered: true
});
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
PenciLazy.update();
});
observer.observe(document, {
subtree: true,
attributes: true
});
})();
</script>
</body>
</html>
Maintenant nous allons créer notre fichier CSS qui nous permettra de faire les animations avec differentes propiete CSS.
copiez le code et collez le dans le fichier CSS que vous allez créer et n’oubliez pas aussi de le linker avec le fichier HTML si non ça ne marchera pas.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
user-select: none;
}
body{
background-color: lightgray;
margin: 10%;
margin-left: 35%;
}
.icons{
position: relative;
right: 1em;
}
.icons ul li{
position: relative;
display: inline-block;
font-size: 35px;
margin: 0 12px;
}
.icons ul li .fa{
padding: 10px;
color: #fff;
background: #0f056b;
border-radius: 50%;
transition: .3s;
}
.icons ul li .fa:hover{
transform: scale(1.2) rotate(360deg);
color: orange;
background: transparent;
}
Bonjour les amies aujourd’hui nous allons voir comment valider un formulaire html en javascript. alors ce post est destiné aux débutants ainsi qu’aux intermédiaires.
En effet lors de la saisie dans un formulaire, vous avez toujours besoin de contrôler les champs de saisie pour que l’utilisateur ne met pas de mauvaises données. c’est ainsi que vous devez mettre en place des règles de sécurité pour empêcher les malveillants à compromettre votre application ou votre site internet.
Dans ce cas vous aurez besoin de contrôler est ce que les données saisies par l’utilisateur sont bonne, est ce que l’utilisateur a rempli tous les champs ? ensuite les données seront envoyées au serveur qui va faire le traitement. ce qui permet au server de ne pas avoir à travailler trop et d’augmenter les performances de l’application.
C’est pour cela que nous avons pensé qu’il serait utile de faire un post sur la validation de formulaire en Javascript. vous pouvez suivre la video entiere disponible sur ma chaine Youtube :
Comme vous le voyez au niveau de l’image sur la vidéo, tant que les champs ne sont pas valide le formulaire envoie une erreur. et c’est tout à fait normal.
Pour créer ce magnifique formulaire et de procéder à la validation, vous aurez besoin de créer trois fichiers. Un fichier de type HTML pour mettre le code html, un fichier de type CSS pour mettre du style au niveau du formulaire et un fichier Javascript qui va nous permettre de contrôler le formulaire.
Premièrement Créez un fichier avec le nom index.html , copiez et collez les codes donnés dans votre fichier html. N’oubliez pas que vous devez créer un fichier avec une extension .html
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="form">
<div>
<label for="username">User Name</label>
<i class="fas fa-user"></i>
<input type="text" name="username" id="username" placeholder="Identifiant" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<div>
<label for="email">Email</label>
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="email" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<div>
<label for="password">Password</label>
<i class="fas fa-lock"></i>
<input type="password" name="password" id="password" placeholder="mot de passe" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<button type="submit" id="submit">Submit</button>
</form>
</div>
<script src="form.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));
(function () {
var PenciLazy = new LazyLoad({
elements_selector: '.penci-lazy',
data_bg: 'bgset',
class_loading: 'lazyloading',
class_entered: 'lazyloaded',
class_loaded: 'pcloaded',
unobserve_entered: true
});
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
PenciLazy.update();
});
observer.observe(document, {
subtree: true,
attributes: true
});
})();
</script>
</body>
</html>
Ensuite Créez un fichier avec le nom style.css , copiez et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-family: 'Poppins';
background: #9ba0f6;
}
.container {
display: flex;
flex-direction: row;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
width: 45%;
margin: 0 auto;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
padding: 50px;
background-color: #fff;
margin-top: 2rem;
border-radius: 10px;
}
.title {
font-size: 25px;
font-weight: bold;
margin-bottom: 20px;
}
form div input {
width: 100%;
height: 8vh;
border-radius: 8px;
outline: none;
border: 2px solid #c4c4c4;
padding: 0 30px;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
}
form div {
position: relative;
margin-bottom: 15px;
}
input:focus {
border: 2px solid #f2796e;
}
.question {
font-size: 15px;
}
span {
color: #f2796e;
cursor: pointer;
}
form div i {
position: absolute;
padding: 13px;
}
.success-icon,
.failure-icon {
right: 0;
opacity: 0;
}
.failure-icon,
.error {
color: red;
}
.success-icon {
color: green;
}
.error {
font-size: 14.5px;
margin-top: 5px;
}
button {
margin-top: 15px;
width: 100%;
height: 45px;
background-color: #9ba0f6;
border: none;
border-radius: 8px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.1s ease;
}
button:hover {
opacity: 0.8;
}
/**
* ! Media Queries are here
**/
@media (max-width: 900px) {
.container {
flex-direction: column;
margin: 2rem;
}
form,
.content {
width: 100%;
}
}
@media (max-width: 425px) {
form {
padding: 20px;
}
}
En fin Créez un fichier avec le nom form.js , copiez et collez les codes donnés dans votre fichier javascript. N’oubliez pas que vous devez créer un fichier avec une extension .js
Nb: assurez vous que ce fichier est linké avec le fichier HTML. et si vous remarquez bien le code HTML, j’ai déjà lié les deux fichiers. Attention au nom des fichiers.
let id = (id) => document.getElementById(id);
let formClass = (formClass) => document.getElementsByClassName(formClass);
let username = id("username"),
email = id("email"),
password = id("password"),
form = id("form"),
errorMsg = formClass("error"),
successIcon = formClass("success-icon"),
failureIcon = formClass("failure-icon");
form.addEventListener("submit", (e) => {
e.preventDefault();
invalForm(username, 0, "le champ ne doit pas etre vide");
invalForm(email, 1, "le champ ne doit pas etre vide");
invalForm(password, 2, "le champ ne doit pas etre vide");
});
let invalForm = (id, serial, message) => {
if (id.value.trim() === "") {
errorMsg[serial].innerHTML = message;
id.style.border = "2px solid red";
// icons
failureIcon[serial].style.opacity = "1";
successIcon[serial].style.opacity = "0";
} else {
errorMsg[serial].innerHTML = "";
id.style.border = "2px solid green";
// icons
failureIcon[serial].style.opacity = "0";
successIcon[serial].style.opacity = "1";
}
};