Systéme de classement en HTML CSS JS
|
| 👋Bonjour lecteurs, Aujourd'hui, dans ce blog, vous apprendrez à créer un système de classement par étoiles (Widget) en utilisant HTML CSS et JavaScript. |
Informations
Une évaluation par étoiles est une question d'évaluation qui donne aux gens une note de produit ou de service avec plusieurs étoiles. Le nombre d'étoiles peut aller de 5 à 10 étoiles. Une question d'évaluation par étoiles est un type de question d'évaluation qui permet aux utilisateurs de classer les attributs sur une échelle représentée par des étoiles, au lieu de boutons radio ou de cases à cocher.
Fonctionnement
Dans ce programme (Systemes de classemnt) au début, il n'y a que cinq étoiles sans boîte de description. Et lorsque vous cliquez sur l'étoile particulière, le texte de révision (un texte avec emoji) et une boîte de description seront visibles. Le texte de l'avis est affiché dans l'image car "C'est génial avec emoji" est un texte dynamique qui signifie que ce texte changera en fonction de votre note ou de votre avis.
Et lorsque vous donnez une note et écrivez une description et cliquez sur le bouton de publication… le conteneur du système de notation sera masqué et un texte fixe apparaîtra comme "Merci de nous avoir noté!" avec le bouton d'édition dans le coin supérieur droit. Et lorsque vous cliquez sur ce bouton de modification, il vous redirigera vers les étapes précédentes où vous pourrez modifier votre note et votre message.
Vous pouvez utiliser ce système sur votre site Web et vos projets. Si vous êtes débutant et que vous connaissez HTML et CSS, vous pouvez également créer ce type de système de notation. Si vous aimez ce programme et souhaitez obtenir les codes sources. Vous pouvez facilement obtenir les codes sources de ce programme. Pour obtenir les codes sources, il vous suffit de faire défiler vers le bas.
Apercu du projet
Cliquer sur ce bouton pour voir le projet et de tester sa responsivité...
Code Sources
Pour créer ce programme. Tout d'abord, vous devez créer deux fichiers, un fichier HTML et un autre fichier CSS. Tout d'abord, créez un fichier HTML avec le nom de index.html et collez les codes donnés dans votre fichier HTML. N'oubliez pas que vous devez créer un fichier avec l'extension .htmlCode HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Systéme de classemnt</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="post">
<div class="text">Merci de nous évaluer!</div>
<div class="edit">EDITER</div>
</div>
<div class="star-widget">
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
<form action="#">
<header></header>
<div class="textarea">
<textarea cols="30" placeholder="Décrivez votre expérience..."></textarea>
</div>
<div class="btn">
<button type="submit">Poster</button>
</div>
</form>
</div>
</div>
<script>
const btn = document.querySelector("button");
const post = document.querySelector(".post");
const widget = document.querySelector(".star-widget");
const editBtn = document.querySelector(".edit");
btn.onclick = ()=>{
widget.style.display = "none";
post.style.display = "block";
editBtn.onclick = ()=>{
widget.style.display = "block";
post.style.display = "none";
}
return false;
}
</script>
</body>
</html>
Code CSS
Deuxièmement, créez un fichier CSS avec le nom de style.css et collez les codes donnés dans votre fichier CSS. N'oubliez pas que vous devez créer un fichier avec l'extension .css.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: #000;
}
.container{
position: relative;
width: 400px;
background: #111;
padding: 20px 30px;
border: 1px solid #444;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container .post{
display: none;
}
.container .text{
font-size: 25px;
color: #666;
font-weight: 500;
}
.container .edit{
position: absolute;
right: 10px;
top: 5px;
font-size: 16px;
color: #666;
font-weight: 500;
cursor: pointer;
}
.container .edit:hover{
text-decoration: underline;
}
.container .star-widget input{
display: none;
}
.star-widget label{
font-size: 40px;
color: #444;
padding: 10px;
float: right;
transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
color: #fd4;
}
input:checked ~ label{
color: #fd4;
}
input#rate-5:checked ~ label{
color: #fe7;
text-shadow: 0 0 20px #952;
}
#rate-1:checked ~ form header:before{
content: "Je déteste ça ";
}
#rate-2:checked ~ form header:before{
content: "J'aima pas ça ";
}
#rate-3:checked ~ form header:before{
content: "C'est génial ";
}
#rate-4:checked ~ form header:before{
content: "J'aime juste ça ";
}
#rate-5:checked ~ form header:before{
content: "J'adore ";
}
.container form{
display: none;
}
input:checked ~ form{
display: block;
}
form header{
width: 100%;
font-size: 25px;
color: #fe7;
font-weight: 500;
margin: 5px 0 20px 0;
text-align: center;
transition: all 0.2s ease;
}
form .textarea{
height: 100px;
width: 100%;
overflow: hidden;
}
form .textarea textarea{
height: 100%;
width: 100%;
outline: none;
color: #eee;
border: 1px solid #333;
background: #222;
padding: 10px;
font-size: 17px;
resize: none;
}
.textarea textarea:focus{
border-color: #444;
}
form .btn{
height: 45px;
width: 100%;
margin: 15px 0;
}
form .btn button{
height: 100%;
width: 100%;
border: 1px solid #444;
outline: none;
background: #222;
color: #999;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
}
form .btn button:hover{
background: #1b1b1b;
}
Télecharger
Astuces
Une fois le code télechargée ouvrer le dossier nommée dist
C'est tout, vous avez maintenant créé avec succès un système de classement par étoiles en HTML CSS et JavaScript. Si votre code ne fonctionne pas ou si vous avez rencontré une erreur/un problème, veuillez commenter
5 commentaires