Untitled

<!DOCTYPE>
<html>
<head>
<title> Ex 3 </title>
<style>

img{ width:300px;
height:300px;}

button{
width:300px;
border-radius:3px;

}

div{border-style:solid;
border-color:#D3D0C9;
border-height:3px;
border-width:3px;
margin:20px;
width: 300px;
background-color:#F6F3E7;
display:block;
}

</style>

</head>
<body>
<div>
<img style="display:none" src="rose.jpg" alt="Rose">
<img style="display:none" src="carnation.jpg" alt="Carnation">
<img style="display:none" src="tulip.jpg" alt="Tulip">
<img style="display:none" src="peony.jpg" alt="Peony">
<img style="display:none" src="orchid.jpg" alt="Orchid">


<br><br>
<span id="progres"></span>

<button onclick="pozaAnt()"> NEXT </button>
<button onclick="pozaUrm()"> PREV </button>
</div>
<script>
 	const imagini = document.getElementsByTagName('img');
 	const progres = document.getElementById('progres');
 	const total = imagini.length;
 	let i = 0;

 	//arata prima poza
 	arataPoza(i);

 	//arata urmatoarea poza
 	function pozaUrm(){
 		ascundePoza(i);
 		i = (i + 1) % total;
 		arataPoza(i);
 	}
 	//arata poza anterioara
 	function pozaAnt(){
 		ascundePoza(i);
 		i = (i-1)%(total);
 		if(i < 0){
 			i = total-1;
 		}
 		arataPoza(i);
 	}
 	function ascundePoza(i){
 		imagini[i].style.display = 'none';
 	}
 	function arataPoza(i){
 		imagini[i].style.display = 'block';
 		progres.textContent = `${(i+1)}/${total}`;
 	}
 </script>


</body>

</html>