JSFiddle - React, Tailwind, and code Playground

by rainiscool

HTML

<div class="inner">
   <table>
     <caption>Список оценок</caption>
     <tr>
       <th>Фамилия</th>
       <th>Оценка</th>
     <tr/> 
     <tr><td>Иванов</td><td><select id="student1"><option>2</option><option>3</option><option>4</option><option>5</option></select></td></tr>
     <tr><td>Петров</td><td><select id="student2"><option>2</option><option>3</option><option>4</option><option>5</option></select></td></tr>
     <tr><td>Сидоров</td><td><select id="student3"><option>2</option><option>3</option><option>4</option><option>5</option></select></td></tr>
     <tr><td>Петрова</td><td><select id="student4"><option>2</option><option>3</option><option>4</option><option>5</option></select></td></tr>
     <tr><td>Иванова</td><td><select id="student5"><option>2</option><option>3</option><option>4</option><option>5</option></select></td></tr>
  </table>
  <button id="btn1">Рассчитать</button>
</div>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
.inner{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
  padding: 10px;
}
table caption{
  text-align:center;
  font-size:25px;
  padding: 5px;
}
body{
  background:black;
  color:white;
  font-family: 'Open Sans', sans-serif;
}
select{
  cursor:pointer;
  border:none;
  color:white;
  background:black;
}
table{
  text-align:center;
 }
 table tr{
   border:2px solid black;
 }
table tr:hover {
    background: white;
    transition: .2s linear;
    color:black;
}
table th{
   border:2px solid black;
   padding: 5px 40px;
   background:red;
 }
table td{
   border:2px solid black;
   padding: 3px;
 }
button{
   width 140px;
   height 140px;
 }

JavaScript

$('button').on('click', function() {
		var array = [];
    var mark1= $("#student1 :selected").val();
    array[0] = Number(mark1);
    var mark2 = $("#student2 :selected").val();
    array[1] = Number(mark2);
    var mark3 = $("#student3 :selected").val();
    array[2] = Number(mark3);
    var mark4=  $("#student4 :selected").val();
    array[3] = Number(mark4)
    var mark5 = $("#student5 :selected").val();
    array[4] = Number(mark5);
    
    //средний балл до
		var sum = 0,
				middle = 0;
		for(var i=0; i<5; i++) {
			sum += array[i];
    };
		middleBefore = sum/array.length;
    
    //замена двоек на тройки
		var count = 0;//счетчик 
		for(var i =0; i<array.length; i++) {
			if(array[i]==2) { 
				array[i]=3;
    		count++;
  		};
		};
    //средний балл после
		var sum = 0,
				middle = 0;
		for(var i=0; i<array.length; i++) {
			sum += array[i];
    };
		middleAfter = sum/array.length;
		$('.inner').append("<p>Средний балл до замены: " + middleBefore);
    $('.inner').append("<p>Двоек заменено: " + count);
    $('.inner').append("<p>Средний балл после замены: " + middleAfter);
});