Barre de completion JS

****Bonjour,

Il va falloir que tu gères un clic sur ta div (barre de progression) à l'aide de l'event listener: https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Ensuite tu devrais pouvoir récupérer la position grâce à event.target.getBoundingClientRect()

A partir de là tu auras plus qu'à modifier la taille de ta barre en faisant un:

const width = /* ta width en % */
document.querySelector('.bar-progression').style.width = `${width}%`

Le code suivant n'est pas du tout testé, mais devrait donner un axe à suivre:

const barEl = document.querySelector('.bar-progression')

barEl.addEventListener('click', e => {
      const rect = e.target.getBoundingClientRect();
      const x = e.clientX - rect.left; //x position within the element.
      const barTotalWidth = rect.width
      const percent = 100 * (x / barTotalWidth)

      barEl.style.width = `${percent}%`
})

Bonjour, Et merci Pandazaur (mangeur de panda ? !)

Alors j'ai bien avancé sur mon pb.
Voici le code que j'ai fait :

   resizeContentBarStart  : function(event){
        //console.log(event.currentTarget);
        progressBarContent = event.currentTarget

        // 1- trouver le point de départ en X de la content bar :
        //* getBoundingClientRect() est une fonction JS qui va nous permettre de retrouver les
        //* propriétés de notre élément (positionX, y, largeur, heuteur...)
        const progressBarContentPosition = progressBarContent.getBoundingClientRect();

        // 2- trouver la posistion de la souris: çà s'appelle event.x (ou event.clientX)

        // 3- trouver la barre de progression (bar-progress)
        progressBarElement = progressBarContent.querySelector('.bar-progression');

        // 4- Calculer la nouvelle longueur de la div (on fait juste un produit en croix qu'on arrondis en 0.5)
        const newProgression = Math.round((((event.x - progressBarContentPosition.x) / progressBarContentPosition.width) * 100) * 2)/2 ;    
        // 5- envoyer la nouvelle valeur à la progression-bar
        progressBarElement.style.width = newProgression + "%";
        //console.log(newProgression);
    },

Et donc celà fonctionne (et j'en suis ravi !) Il se lance sur un mousedown et c'est donc bien !
Je m'attaque au bonus et là, je coince encore un peu j'avoue :

Comment faire un event Listener qui, au mousedown traque la position X de la souris et redimentionne la progress-bar en fonction, même si la souris sort du event.target, et ce, tant qu'on a pas d'évenement mouseup ? faudrait faire un while(1) ? J'ai essayé çà marche moyen... Un mousemove ? Il ne fonctionnera pas hors du target...
J'avoue que je sèche un peu... Des pistes ?
Merci !

Tu peux essayer de faire un event listener sur le mousedown qui crée un event listener mousemove et supprimer cet event listener une fois que tu as un mouseup.

function onMouseMove(e) {
     // Ta logique de récupération de la position, etc ...
     console.log({ e }) // affiche l'event 
}

element.addEventListener('mousedown', (e) => {
     element.addEventListener('mousemove', onMouseMove)
})

element.addEventListener('mouseup', (e) => {
     element.removeEventListener('mousemove', onMouseMove)
})

Pas mal,
Je savais pas qu'on pouvais supprimer des eventListener !
Je vais essayer çà et je fais un retour.
Merci beaucoup !