Chronomètre

00
:
00

<div class="conteneurChrono">

    <div class="lineChrono">

        <div class="colChrono"> 

            <span id="mn">00</span> 
            <label>MINUTES</label>

        </div>

        <div class="colMiddleChrono">

            <span>:</span>

        </div>

        <div class="colChrono">

            <span id="s">00</span> 
            <label>SECONDES</label>

        </div>

    </div>

    <div class="lineChrono">  

        <button id="start">Start</button>
        <button id="pause">Pause</button>

    </div>

</div> 

.conteneurChrono{ 

    width: 240px;
    height: 200px; 
    text-align: center;
    background: #000618;
    padding-top: 10px;
    font-family: 'Bebas Neue';

    }
  
.colChrono{ 

    width: 100px;
    height: 130px;
    display: inline-block; 
    text-align: center;

    }
  
.colChrono span, .colMiddleChrono span{

    color: #41F6BE;
    font-size: 60px;
    display: block; 

    }
  
.colChrono label{ 

    color: white;
    font-size: 15px;
    display: block;

    }
  
.colMiddleChrono{

    color:#41F6BE;
    display: inline-block;
    vertical-align: top;
    font-size: 60px;

    }
  
  
.lineChrono #start{

    display:block;       
    margin-left: auto; 
    margin-right: auto; 
    background:none;
    color:white;
    width: 80px;
    border: solid 1px white;
    line-height: 3em;
    font-size: 15px;
    font-family: 'Bebas Neue';
    transition: all .3s ease-in-out; 
    cursor: pointer;

    }
  
.lineChrono #start:hover{

    color: #41F6BE;
    border: solid 1px #41F6BE;  

    }
  
.lineChrono #pause{

    display:none;   
    margin-left: auto;  
    margin-right: auto; 
    background:none;
    color: white;
    width: 80px;
    border: solid 1px white;
    line-height: 3em;
    font-size: 15px;
    font-family: 'Bebas Neue';
    cursor: pointer;     

    }
  
.lineChrono #pause:hover{

    color: #41F6BE;
    border: solid 1px #41F6BE;  

    }

let btnStart = document.getElementById("start");

/*Event Methode JS
En cliquant sur
le bouton "start":
le chronometre démarre*/ 

btnStart.addEventListener('click',start);

let btnPause = document.getElementById("pause");

/*Event Methode JS
En cliquant sur
le bouton "pause":
le chronometre s'arrete*/ 

btnPause.addEventListener('click',pause);

//Creation des variables temporelles 
let mn=0;
let s=0;
let t;
let seconde = document.getElementById("s");
let minute = document.getElementById("mn");

let compteurChrono=0;

function start(){ 

  compteurChrono++;

    /*setInterval:
    déclenche répétitivement 
    la même action 
    à intervalles réguliers.*/ 

    t = setInterval(()=>{

    /*on ajoute 1s
     toutes les secondes 
     à la span de la derniere colonne*/

          s++;
          seconde.innerHTML = s;

    /*Qd on atteind 59s
     on ajoute 1min 
     à la span 
     de la 1er colonne
     et on réinitialise 
     à 0s 
     la span 
     de la derniere colonne*/
  
    if(s==59){   

        mn++;
        s=0;
        minute.innerHTML = mn;
      }

    },1000);

    /*on clic 2 fois
    (nombre paire) 
    le bouton "pause" 
    disparait 
    pour laisser 
    sa place au bouton "start" */

    if (compteurChrono%2==0) {

      btnStart.style.display = "block";
      btnPause.style.display = "none";
    } 

    /*on clic 1 fois
    (nombre impaire)
    le bouton "start"
    disparait 
    pour laisser
    sa place au bouton "Pause" */

    else{ 

        btnStart.style.display = "none";
        btnPause.style.display = "block";
    }
}   
 
function pause(){ 

  compteurChrono ++;

     /*clearInterval 
     arrête l'exécution 
     de SetInterval.*/

    clearInterval(t)


    if (compteurChrono%2==0) {

      btnStart.style.display = "block";
      btnPause.style.display = "none";

    }else{ 


      btnStart.style.display = "none";
      btnPause.style.display = "block";
    }
}

Calculatrice


<div class="calculatrice"> 

<!--ecran de la calculatrice-->

<input class= "screen" type="text" 
value="" autocomplete="off" disabled>

<!--disabled
desactive le champs-->
<!--autocomplete="off": 
n'enregistre pas 
le resultat affiché à l'écran.-->

<div class="rowKeypadOperators">  

  <div class="keypad">

    <button value="7" onclick="button('7')">7</button>
    <button value="8" onclick="button('8')">8</button>
    <button value="9" onclick="button('9')">9</button>
    <button value="4" onclick="button('4')">4</button>
    <button value="5" onclick="button('5')">5</button>
    <button value="6" onclick="button('6')">6</button>
    <button value="1" onclick="button('1')">1</button>
    <button value="2" onclick="button('2')">2</button>
    <button value="3" onclick="button('3')">3</button>
    <button value="0" onclick="button('0')">0</button>
    <button value="." onclick="button('.')">.</button>
            
  </div>

  <div class="operators">

    <button value="/" onclick="button('/')">/</button>
    <button value="*" onclick="button('*')">x</button>
    <button value="-" onclick="button('-')">-</button>
    <button value="+" onclick="button('+')">+</button>

   </div>

</div>


<div class="rowAcSuppEgal">     

  <button value="c" onclick="ac()">AC</button>
  <button value="sup"onclick="suppr()">←</button>
  <button value="=" onclick="egal()">=</button>

</div>

.calculatrice button{  

width: 80px;
height: 80px;
font-family:'Bebas Neue';
font-size: 30px;
color:#41F6BE; 
outline: none;
background: none;
border: none;
transition: all .3s ease-in-out;

}

.calculatrice button:hover{

background:#41F6BE;
color:#000618; 

}

.calculatrice{

height: 520px;
width: 320px;

}

.screen{

width: 320px;
height: 120px;
background:#000618;
border:none; 
color:#41F6BE;
font-size: 30px;
text-align: center;
font-family:'Bebas Neue';

}

.rowKeypadOperators{

display:inline-flex;
width:320px;
height:320px;   

}

.keypad{ 

width:240px;
height:320px;
background:#0F1630;
display: flex;
flex-wrap: wrap;    
}


.keypad button{ 

border-right: solid 1px #41F6BE;

border-top: solid 1px #41F6BE; 

}

button[value="0"]{

width: 160px;
border-right: solid 1px #41F6BE;
border-top: solid 1px #41F6BE;         
}


.operators{

width:80px;
height:320px;
background: #000618;    

}

.operators button{

border-top: solid 1px #41F6BE;    

}

.rowAcSuppEgal{

width: 320px;
height: 80px;
display: inline-flex;
background: #000618;
border-top: solid 1px #41F6BE;

}


.rowAcSuppEgal button{

border-right: solid 1px #41F6BE;

}

button[value="="]{ 

width: 160px;
border:none;    

}

let result = document.getElementById("resultat")

function button(param){
    let valeur = result.value;
    result.value = valeur + param;
} 

function egal(){
    let valeur = result.value;
    let resultatFinal = eval(valeur);

    /*toutes les expression 
    arithmétique sont sous 
    forme de chaine de caractere,
    la fonction eval() 
    permet d'evaluer les expressions*/
    result.value = resultatFinal;

}
  
function ac(){
    result.value="";
    
}
  
function suppr(){
    let valeur = result.value;
    let longueur = valeur.length;
    valeur = valeur.substring(0,longueur - 1);

    /*substring
    supprime
    le dernier chiffre entré*/
    result.value = valeur;
  
}

lecteur
Video

00:00 / 00:00

<div class="video_player_box">

    <video id="my_video" 
        src="VIDEO/dataViz/adobeFormat.mp4" 
        poster="IMG/poster/formatsAdobe.svg">
    </video>

    <div class="video_controls_bar">

       <input id="seekslider" type="range"
       min="0" max="100" value="0" step="1">

        <div class="buttons">

            <button id="playpausebtn"></button>

            <div class="timeText">
                <span id="curtimetext">00:00</span> /
                 <span id="durtimetext">00:00</span>
            </div>

            <div class="sound">
                <button id="mutebtn"></button>
                <input id="volumeslider" type="range" 
                min="0" max="100" value="50" step="1">
            </div>	

            <button id="fullscreenbtn"></button>

        </div>
    </div>
</div>

#my_video{
    width: 100%;
}

#playpausebtn{
    background:url(../IMG/icones/playWhite.svg);
    
}
#mutebtn{
    background:url(../IMG/icones/muteWhite.svg);
    margin-right: 8px;
       
}

#fullscreenbtn{ 
    background:url(../IMG/icones/fullscreen.svg);
    
}

#seekslider {
    width: inherit;
    background-color: #fff;

}

.video_player_box{
    margin: 8px;
    width: 100%;
    max-width: 800px;
    position: relative;
    overflow: hidden;

}

.video_controls_bar {
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #000618 ;
    transform: translateY(100%) translateY(0);
    transition: all .3s;
}

.video_player_box:hover .video_controls_bar{
    transform: translateY(0);
}    

.buttons {
    margin: 0 auto;
    width: 90%;
    display: inherit;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-family: 'bebas_neueregular';
    
}

.sound{
    display: inherit;
}

.buttons button {
    width:24px;
    height:24px;
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;

}

/*input range GLOBAL*/
input[type=range]{
    outline: none;
    -webkit-appearance:none;
    height:16px;
    background:white;
    cursor: pointer;
}    


/*input range firefox EDGE*/
input[type=range]::-moz-range-thumb{
    border:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background: #000618;
    transition: all .3s ease-in-out;
    cursor: pointer;
    }

    input[type=range]::-moz-range-track{
     border:none;   
    padding:0; 
    height:16px;
    border-radius:50%;
    background:transparent;
}    
    
/*input range Chrome,Opera*/
input[type=range]::-webkit-slider-thumb{
    cursor: pointer;
    -webkit-appearance:none;    
    border:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#000618;
    transition: all .3s ease-in-out;

}

// Variables
let vid = document.getElementById("my_video");
let playbtn = document.getElementById("playpausebtn");
let seekslider = document.getElementById("seekslider");
let curtimetext = document.getElementById("curtimetext");
let durtimetext = document.getElementById("durtimetext");
let mutebtn = document.getElementById("mutebtn");
let volumeslider = document.getElementById("volumeslider");
let fullscreenbtn = document.getElementById("fullscreenbtn");

// Add event listeners
playbtn.addEventListener("click",playPause);
seekslider.addEventListener("change",vidSeek);
vid.addEventListener("timeupdate",seektimeupdate);
mutebtn.addEventListener("click",vidmute);
volumeslider.addEventListener("change",setvolume);
fullscreenbtn.addEventListener("click",toggleFullScreen);


// Functions
function playPause(){
	if(vid.paused){
		vid.play();
		playbtn.style.background = "url(IMG/icones/pauseWhite.svg)";
	} else {
		vid.pause();
		playbtn.style.background = "url(IMG/icones/playWhite.svg)";
	}
}

function vidSeek(){
	let seekto = vid.duration * (seekslider.value / 100);
	vid.currentTime = seekto;
}

function seektimeupdate(){
	let nt = vid.currentTime * (100 / vid.duration);
	seekslider.value = nt;
	let curmins = Math.floor(vid.currentTime / 60);
	let cursecs = Math.floor(vid.currentTime - curmins * 60);
	let durmins = Math.floor(vid.duration / 60);
	let dursecs = Math.floor(vid.duration - durmins * 60);
	if(cursecs < 10){ cursecs = "0"+cursecs; }
	if(dursecs < 10){ dursecs = "0"+dursecs; }
	if(curmins < 10){ curmins = "0"+curmins; }
	if(durmins < 10){ durmins = "0"+durmins; }
	curtimetext.innerHTML = curmins+":"+cursecs;
	durtimetext.innerHTML = durmins+":"+dursecs;
}

function vidmute(){
	if(vid.muted){
		vid.muted = false;
		mutebtn.style.background = "url(IMG/icones/muteWhite.svg)";
	} else {
		vid.muted = true;
		mutebtn.style.background = "url(IMG/icones/soundWhite.svg)";
	}
}

function setvolume(){
	vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
	if(vid.requestFullScreen){
        vid.requestFullScreen();
       
	} else if(vid.webkitRequestFullScreen){
		vid.webkitRequestFullScreen();
	} else if(vid.mozRequestFullScreen){
		vid.mozRequestFullScreen();
	}
}