Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="rate"><!-- Vote -->
    <section><html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Systeme Vote</title>
</head>

<body>
  <div class="rate"><!-- Vote -->
    <section>
      <input type="radio" id="star5" name="rate" value="5" />
      <label for="star5" title="text">5 stars : </label>
      <!-- Avis 5 point -->
      </br>
     </section></br>
     <!-- Fin Avis 5 point -->
    
    <section><!-- Avis 4 point -->
      <input type="radio" id="star4" name="rate" value="4" />
      <label for="star4" title="text">4 stars : </label>   
      </br>

    </section>
    </br><!--Fin Avis 4 point -->
   
    <section>
      <input type="radio" id="star3" name="rate" value="3" />
      <label for="star3" title="text">3 stars : </label>
      <!-- Avis 3 point -->
      </br>
     </section></br>
     <!-- Fin Avis 3 point -->
    
    <section>
      <input type="radio" id="star2" name="rate" value="2" />
      <label for="star2" title="text">2 stars : </label>
      <!-- Avis 2 point -->
 
     </section></br>
     <!-- Fin Avis 2 point -->      
    </section>
    
     <section>
      <input type="radio" id="star1" name="rate" value="1" />
      <label for="star1" title="text">1 star : </label>
      <!-- Avis 1 point -->
     </section>
     <!-- Fin Avis 1 point -->       
  </div><!-- Fin Vote -->
  <br><hr>
<p>Validation</p>
<button onclick="validVote()" id="btnValid1" disabled>Valider le vote</button>
<br><hr>

  <div class="resultat">
    <section class="point">
      <p>Total des points : </p>
      <p id="totalPoints">0</p>
      <hr>
      <p>Moyenne des points : </p>
      <p id='moyennePoints'>0</p>
      <hr>
      <p>Nombre total de vote : </p>
      <p id="totalVoteCount">0</p>
      <p>Nombre de commentaires : </p>
      <p id="commentCount">0</p>
      <p>Nombre de vote 1 etoile : </p>
      <p id="starCount1">0</p>
      <p>Nombre de vote 2 etoile : </p>
      <p id="starCount2">0</p>
      <p>Nombre de vote 3 etoile : </p>
      <p id="starCount3">0</p>
      <p>Nombre de vote 4 etoile : </p>
      <p id="starCount4">0</p>
      <p>Nombre de vote 5 etoile : </p>
      <p id="starCount5">0</p>
      <hr>
    </section><!-- Fin Point -->
    
    <section class="commentaire">
      <p>commentaire 5 étoile</p>
      <p id="result5"></p>
      <hr>
      <p>commentaire 4 étoile</p>      
      <p id="result4"></p>
      <hr>
      <p>commentaire 3 étoile</p>      
      <p id="result3"></p>
      <hr>
      <p>commentaire 2 étoile</p>
      <p id="result2"></p>
      <hr>
      <p>commentaire 1 étoile</p>
      <p id="result1"></p>
      <hr>
    </section><!-- Fin Commentaire -->

  </div><!-- Fin Resultat -->
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                /* Boutton Radio */
var star5 = document.getElementById('star5');
var star4 = document.getElementById('star4');
var star3 = document.getElementById('star3');
var star2 = document.getElementById('star2');
var star1 = document.getElementById('star1');

/**********************************************************************************
Compteur du nombre total de vote au clique sur le boutton -valider le vote-
*********************************************************************************/
/*On récupere le boutton valider le vote*/
let btnValidVote = document.getElementById('btnValid1');

/*On récupere le nombre de clique sur le compteur "totalVoteCount" */
let currentTotalVoteCount = parseInt(document.getElementById('totalVoteCount').innerHTML);

/*Au click sur le boutton valid vote on incremente le compteur de 1*/
btnValidVote.addEventListener('click', function(event) {
currentTotalVoteCount += 1;  
/*On met a jour la valeur de totalVote*/
document.getElementById('totalVoteCount').innerHTML = currentTotalVoteCount;
});

/*****************************************************************************
Fin compteur du nombre de vote
*****************************************************************************/
/*-------------------------------------------------------------------------------------------*/
/**********************************************************************************************
Compteur nombre de commentaire au clique sur le boutton valider le vote + ok
***********************************************************************************************/

function validVote(){
  var userVal = confirm("Voulez vous laissez un commentaire ?");
 
  if (userVal==true){
    /*On récupere le nombre de clique sur le compteur "commentCount" */
    let totalCommentCount = parseInt(document.getElementById('commentCount').innerHTML);
    
    /*On incrémente de 1 */
    totalCommentCount +=1;
    
    /*On met a jour la valeur de totalCommentCount*/
    document.getElementById('commentCount').innerHTML = totalCommentCount;
     
  } else{
    //Ne rien Faire
  }
}
/**********************************************************************************************
Fin Compteur nombre de commentaire au clique sur le boutton valider le vote + ok
***********************************************************************************************/
/*-----------------------------------------------------------------------------------------*/
/**********************************************************************************************
-----------Activer le boutton valider si une radio est cocher.------------------
***********************************************************************************************/

function enableButton()
{
  if(star1.checked || star2.checked || star3.checked || star4.checked || star5.checked ) {
    document.getElementById('btnValid1').disabled = false
  } else {
      document.getElementById('btnValid1').disabled = true
  }
}
 
star1.addEventListener('click', enableButton);
star2.addEventListener('click', enableButton);
star3.addEventListener('click', enableButton);
star4.addEventListener('click', enableButton);
star5.addEventListener('click', enableButton);

/**********************************************************************************************
----------- Fin Activer le boutton valider si une radio est cocher.------------------
***********************************************************************************************/
/*--------------------------------------------------------------------------------------------*/

/**********************************************************************************************
----------- Compter le nombre d'étoile ----------------------
***********************************************************************************************/
/******** Radio 5 ***********/
function Radio5(){
  if ( document.getElementById('star5').checked == true ) {
    /* Compteur 5 star*/
    let starCount5 = parseInt(document.getElementById('starCount5').innerHTML);
    starCount5 += 1;
    document.getElementById('starCount5').innerHTML = starCount5;
    
    /* Compteur de point*/
    let totalPoints = parseInt(document.getElementById('totalPoints').innerHTML);
    totalPoints += 5;
    document.getElementById('totalPoints').innerHTML = totalPoints;
  }
  else {
    /*nothing*/
  }
}
btnValidVote.addEventListener('click', Radio5);
/*----- Fin Radio 5 *******/

/******** Radio 4 ***********/
function Radio4(){
  if ( document.getElementById('star4').checked == true ) {
    /* Compteur 5 star*/
    let starCount4 = parseInt(document.getElementById('starCount4').innerHTML);
    starCount4 += 1;
    document.getElementById('starCount4').innerHTML = starCount4;
    
    /* Compteur de point*/
    let totalPoints = parseInt(document.getElementById('totalPoints').innerHTML);
    totalPoints += 4;
    document.getElementById('totalPoints').innerHTML = totalPoints;
  }
  else {
    /*nothing*/
  }
}
btnValidVote.addEventListener('click', Radio4);
/*----- Fin Radio 4 *******/

/******** Radio 3 ***********/
function Radio3(){
  if ( document.getElementById('star3').checked == true ) {
    /* Compteur 3 star*/
    let starCount3 = parseInt(document.getElementById('starCount3').innerHTML);
    starCount3 += 1;
    document.getElementById('starCount3').innerHTML = starCount3;
    
    /* Compteur de point*/
    let totalPoints = parseInt(document.getElementById('totalPoints').innerHTML);
    totalPoints += 3;
    document.getElementById('totalPoints').innerHTML = totalPoints;
  }
  else {
    /*nothing*/
  }
}
btnValidVote.addEventListener('click', Radio3);
/*----- Fin Radio 3 *******/

/******** Radio 2 ***********/
function Radio2(){
  if ( document.getElementById('star2').checked == true ) {
    /* Compteur 2 star*/
    let starCount2 = parseInt(document.getElementById('starCount2').innerHTML);
    starCount2 += 1;
    document.getElementById('starCount2').innerHTML = starCount2;
    
    /* Compteur de point*/
    let totalPoints = parseInt(document.getElementById('totalPoints').innerHTML);
    totalPoints += 2;
    document.getElementById('totalPoints').innerHTML = totalPoints;
  }
  else {
    /*nothing*/
  }
}
btnValidVote.addEventListener('click', Radio2);
/*----- Fin Radio 2 *******/
/*------------------------*/
/******** Radio 1 ***********/
function Radio1(){
  if ( document.getElementById('star1').checked == true ) {
    /* Compteur 1 star*/
    let starCount1 = parseInt(document.getElementById('starCount1').innerHTML);
    starCount1 += 1;
    document.getElementById('starCount1').innerHTML = starCount1;
    
    /* Compteur de point*/
    let totalPoints = parseInt(document.getElementById('totalPoints').innerHTML);
    totalPoints += 1;
    document.getElementById('totalPoints').innerHTML = totalPoints;
  }
  else {
    /*nothing*/
  }
}
btnValidVote.addEventListener('click', Radio1);
/*----- Fin Radio 1 *******/

/**********************************************************************************************
----------- Fin nombre d'étoile ----------------------
***********************************************************************************************/

/**********************************************************************************
Compte de la moyenne des point 
*********************************************************************************/
btnValidVote.addEventListener('click', function(event){
  let inttotalPoints = parseInt( totalPoints.innerHTML ); // le nom de la variable était le même que le nom du champ ....
  let nombreVote = parseInt( totalVoteCount.innerHTML );
  
  console.log( "nombreVote",nombreVote );
  console.log( "totalPoints",inttotalPoints );
  
  currentMoyenne = inttotalPoints / nombreVote ;
   console.log( "currentMoyenne ",currentMoyenne );

  document.getElementById('moyennePoints').innerHTML = currentMoyenne;

});

/*

btnValidVote.addEventListener('click', function(event){
  //currentMoyenne += 1;
 
  console.log( currentMoyenne  )
  console.log( totalPoints )
  console.log( currentTotalVoteCount )
  currentMoyenne = totalPoints / currentTotalVoteCount ;
 
   
  document.getElementById('moyennePoints').innerHTML = currentMoyenne;
});

*/

/**********************************************************************************************
----------- Fin Compteur de la moyenne des point ----------------------
***********************************************************************************************/

/**********************************************************************************
------------- Autoriser Commentaire ----------------------------
*********************************************************************************/
/*
function enabledComment5(){
  
  var userVal = confirm("Voulez vous laissez un commentaire ?");
  
   if ((star5.checked) && (userVal==true ) && (document.getElementById('btnValid1').clicked == true)){
    document.getElementById('button5').disabled = false;
     
  } else{
        document.getElementById('button5').disabled = true;
  }
  
}
star5.addEventListener('click', enabledComment5);
*/

/*****************************************************************************************/
/****************                    Commentaire                   ***********************/
/*****************************************************************************************/

/* Cas Pratique 
Créer un systeme de vote avec avis façon amazon
*/

/* Algorhytme 
----
l'utilisateur sélectionne une note entre 1 et 5
l'utilisateur valide 
L'utilisateur répond à la question voulez vous laissez un avis ? 
// Si oui  : 
L'utilisateur laisse un commentaire 
L'utilisateur valide son commentaire 
// Si non : on passe directement a l'étape suivante

JavaScript calcule : 

Le nombre total de point,
Le nombre total de vote,
La moyenne des points.

JavaScript affiche les donnée dans les emplacement prévu pour. 
---
*/

/* Définitions des différentes etapes du projets. 

Etape 1 Création du squelette HTML
Etape 2 Afficher les donnée et les récuperer 
Etape 3 Styliser le tout avec des étoiles et des pop up
Etape 4 Sécuriser le projet pour une utilisation en ligne
*/

/* Question pour avancer ... 
Est ce qu'il vaut mieux un boutton sur le formulaire qui devine si il y a un commentaire ou non et face le tri directement. Entre les vote avec et sans commentaire.
Ou est ce qu'il vaut mieux un boutton envoyer qui propose ensuite voulez vous laissez un commentaire oui/non
Que pensez vous du squelette HTML est ok pour partir sur ce projet de systeme (vote/Commentaire) ?
*/

/* To Do explication de l'étape 1 
J'ai créer le squelette html avec plusieur textarea dans le but de classer les votes par notes,
 griser les bouttons d'envoi afin de procédé par étapes ....
*/
              
            
!
999px

Console