Skip to content

Instantly share code, notes, and snippets.

@Knyazik01
Last active Aug 15, 2019
Embed
What would you like to do?
Rating Point Callculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ratig calc by V_Kn</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="js/script.js">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<p class="header_top">Designed by V_Kn</p>
</header>
<div class="calc_body">
<div class="inpleft">
<p class="inppar">Exam #1</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex1" value="0"></input>
<p class="inppar">Exam #2</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex2" value="0"></input>
<p class="inppar">Exam #3</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex3" value="0"></input>
<p class="inppar">Exam #4</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex4" value="0"></input>
<button class="but" id="clean">
<img src="pictures/clean.png" alt="clean.png"> Clean
</button>
</div>
<div class="inpright">
<p class="inppar">
Extra points
</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ep" value="0"></input>
<p class="inppar">
Number of exams
</p>
<input type="number" min="1" max="4" class="inptext" placeholder="100" id="noe" value="1"></input>
<div class="cal">
<p id="res" class="inppar">
Rusult:
</p>
<input type="text" class="result" placeholder="100" readonly id="resultat" value="0"></input>
<button class="but" id="button">
<img src="pictures/calc1.png" alt="Calc1.png"> Calculate
</button>
</div>
</div>
<!--Number of exams-->
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
</style>
<script src="js/script.js"></script>
</body>
<style>
body {
background-color: darkcyan;
text-shadow: 1px 1px 2px black
}
p.header_top {
display: flex;
justify-content: center;
color: firebrick;
font-size: 32px;
font-family: 'Dancing Script', cursive;
text-shadow: 0.5px 0.5px 2px black;
}
.calc_body {
font-family: 'Indie Flower', cursive;
font-size: 20px;
display: flex;
justify-content: center;
min-height: 50px;
width: 350px;
padding: 10px;
margin: auto;
border: 5px double black;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.inpleft {
text-align: center;
margin: 10px 0px 10px 0px;
/* top ridht down left */
/* position: absolute;*/
padding: 20px;
width: 150px;
/* float: left;*/
/* background-color: white;*/
}
.inpright {
text-align: center;
margin: 0px -10px 10px 0px;
/* top ridht down left */
padding: 30px 20px 20px 20px;
/* background-color: white;*/
width: 150px;
/* float: right;*/
}
.inppar {
text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
}
.inptext {
background-color: rgba(26, 40, 127, 0.7);
color: white;
font-size: 23px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
}
#res {
margin: 20px 0px 3px 0px;
}
.result {
background-color: rgba(26, 40, 127, 0.3);
color: rgb(234, 255, 50);
font-size: 25px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
margin-bottom: 10px;
}
img {
display: block;
margin: auto;
margin-bottom: 3px;
width: 30px;
}
.but {
/* text-transform: uppercase;*/
text-align: center;
font-size: 20px;
width: 100px;
color: #000;
display: block;
border: 1px solid black;
padding: 15px;
border-radius: 20px;
background: rgba(25, 10, 145, 0.7);
margin: 10px 10px -10px 20px;
/* top ridht down left */
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
font-family: 'Dancing Script', cursive;
}
</style>
<script>
function read() {
var N1 = document.getElementById('ex1').value; //N1 get value element with id = ex1
var N2 = document.getElementById('ex2').value;
var N3 = document.getElementById('ex3').value;
var N4 = document.getElementById('ex4').value;
var Np = document.getElementById('ep').value;
var S = document.getElementById('noe').value;
E1 = parseFloat(N1); // N1 => float number
E2 = parseFloat(N2);
E3 = parseFloat(N3);
E4 = parseFloat(N4);
Ep = parseFloat(Np);
Noe = parseFloat(S);
}
clean.onclick = function clean() {
document.getElementById('ex1').value = 0;
document.getElementById('ex2').value = 0;
document.getElementById('ex3').value = 0;
document.getElementById('ex4').value = 0;
document.getElementById('ep').value = 0;
document.getElementById('noe').value = 1;
document.getElementById('resultat').value = 0;
}
button.onclick = function calculating() { // when id = button clicked start function calculating
read(); //call function read
// console.log(typeof (S));
res = ((E1 + E2 + E3 + E4) / Noe) * 0.9 + Ep * 0.1; // calc res
//console.log(res); // send result to console
document.getElementById('resultat').value = res; // for element with id = resultat get value of element res
document.getElementById('resultat').value = +res.toFixed(3); // for element with id = resultat get value of element res
}
ex1.onfocus = function clean1() {
if (ex1.value == 0) {
ex1.value = '';
}
}
ex1.onblur = function unclean() {
if (ex1.value == '') {
ex1.value = 0;
}
}
ex2.onclick = function clean2() {
if (ex2.value == 0) {
ex2.value = '';
}
}
ex2.onblur = function unclean() {
if (ex2.value == '') {
ex2.value = 0;
}
}
ex3.onclick = function clean3() {
if (ex3.value == 0) {
ex3.value = '';
}
}
ex3.onblur = function unclean() {
if (ex3.value == '') {
ex3.value = 0;
}
}
ex4.onclick = function clean4() {
if (ex4.value == 0) {
ex4.value = '';
}
}
ex4.onblur = function unclean() {
if (ex4.value == '') {
ex4.value = 0;
}
}
ep.onclick = function cleanp() {
if (ep.value == 0) {
ep.value = '';
}
}
ep.onblur = function unclean() {
if (ep.value == '') {
ep.value = 0;
}
}
noe.onclick = function cleane() {
if (noe.value == 1) {
noe.value = '';
}
}
noe.onblur = function unclean() {
if (noe.value == '') {
noe.value = 1;
}
}
</script>
</html>
<!--Designed by V_Kn-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ratig calc by V_Kn</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="js/script.js">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<p class="header_top">Designed by V_Kn</p>
</header>
<div class="calc_body">
<div class="inpleft">
<p class="inppar">Exam #1</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex1" value="0"></input>
<p class="inppar">Exam #2</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex2" value="0"></input>
<p class="inppar">Exam #3</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex3" value="0"></input>
<p class="inppar">Exam #4</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex4" value="0"></input>
<button class="but" id="clean">
<img src="pictures/clean.png" alt="clean.png"> Clean
</button>
</div>
<div class="inpright">
<p class="inppar">
Extra points
</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ep" value="0"></input>
<p class="inppar">
Number of exams
</p>
<input type="number" min="1" max="4" class="inptext" placeholder="100" id="noe" value="1"></input>
<div class="cal">
<p id="res" class="inppar">
Rusult:
</p>
<input type="text" class="result" placeholder="100" readonly id="resultat" value="0"></input>
<button class="but" id="button">
<img src="pictures/calc1.png" alt="Calc1.png"> Calculate
</button>
</div>
</div>
<!--Number of exams-->
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
</style>
<script src="js/script.js"></script>
</body></html>
<!--Designed by V_Kn-->
body {
background-color: darkcyan;
text-shadow: 1px 1px 2px black
}
p.header_top {
display: flex;
justify-content: center;
color: firebrick;
font-size: 32px;
font-family: 'Dancing Script', cursive;
text-shadow: 0.5px 0.5px 2px black;
}
.calc_body {
font-family: 'Indie Flower', cursive;
font-size: 20px;
display: flex;
justify-content: center;
min-height: 50px;
width: 350px;
padding: 10px;
margin: auto;
border: 5px double black;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.inpleft {
text-align: center;
margin: 10px 0px 10px 0px;
/* top ridht down left */
/* position: absolute;*/
padding: 20px;
width: 150px;
/* float: left;*/
/* background-color: white;*/
}
.inpright {
text-align: center;
margin: 0px -10px 10px 0px;
/* top ridht down left */
padding: 30px 20px 20px 20px;
/* background-color: white;*/
width: 150px;
/* float: right;*/
}
.inppar {
text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
}
.inptext {
background-color: rgba(26, 40, 127, 0.7);
color: white;
font-size: 23px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
}
#res {
margin: 20px 0px 3px 0px;
}
.result {
background-color: rgba(26, 40, 127, 0.3);
color: rgb(234, 255, 50);
font-size: 25px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
margin-bottom: 10px;
}
img {
display: block;
margin: auto;
margin-bottom: 3px;
width: 30px;
}
.but {
/* text-transform: uppercase;*/
text-align: center;
font-size: 20px;
width: 100px;
color: #000;
display: block;
border: 1px solid black;
padding: 15px;
border-radius: 20px;
background: rgba(25, 10, 145, 0.7);
margin: 10px 10px -10px 20px;
/* top ridht down left */
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
font-family: 'Dancing Script', cursive;
}
/*Designed by V_Kn*/
function read() {
var N1 = document.getElementById('ex1').value; //N1 get value element with id = ex1
var N2 = document.getElementById('ex2').value;
var N3 = document.getElementById('ex3').value;
var N4 = document.getElementById('ex4').value;
var Np = document.getElementById('ep').value;
var S = document.getElementById('noe').value;
E1 = parseFloat(N1); // N1 => float number
E2 = parseFloat(N2);
E3 = parseFloat(N3);
E4 = parseFloat(N4);
Ep = parseFloat(Np);
Noe = parseFloat(S);
}
clean.onclick = function clean() {
document.getElementById('ex1').value = 0;
document.getElementById('ex2').value = 0;
document.getElementById('ex3').value = 0;
document.getElementById('ex4').value = 0;
document.getElementById('ep').value = 0;
document.getElementById('noe').value = 1;
document.getElementById('resultat').value = 0;
}
button.onclick = function calculating() { // when id = button clicked start function calculating
read(); //call function read
// console.log(typeof (S));
res = ((E1 + E2 + E3 + E4) / Noe) * 0.9 + Ep * 0.1; // calc res
//console.log(res); // send result to console
document.getElementById('resultat').value = res; // for element with id = resultat get value of element res
document.getElementById('resultat').value = +res.toFixed(3); // for element with id = resultat get value of element res
}
ex1.onfocus = function clean1() {
if (ex1.value == 0) {
ex1.value = '';
}
}
ex1.onblur = function unclean() {
if (ex1.value == '') {
ex1.value = 0;
}
}
ex2.onclick = function clean2() {
if (ex2.value == 0) {
ex2.value = '';
}
}
ex2.onblur = function unclean() {
if (ex2.value == '') {
ex2.value = 0;
}
}
ex3.onclick = function clean3() {
if (ex3.value == 0) {
ex3.value = '';
}
}
ex3.onblur = function unclean() {
if (ex3.value == '') {
ex3.value = 0;
}
}
ex4.onclick = function clean4() {
if (ex4.value == 0) {
ex4.value = '';
}
}
ex4.onblur = function unclean() {
if (ex4.value == '') {
ex4.value = 0;
}
}
ep.onclick = function cleanp() {
if (ep.value == 0) {
ep.value = '';
}
}
ep.onblur = function unclean() {
if (ep.value == '') {
ep.value = 0;
}
}
noe.onclick = function cleane() {
if (noe.value == 1) {
noe.value = '';
}
}
noe.onblur = function unclean() {
if (noe.value == '') {
noe.value = 1;
}
}
//ex1.onclick = function clean() {
// if (ex1.value == 0) {
// ex1.value = '';
// }
//}
//
//ex1.onblur = function unclean() {
// if (ex1.value == '') {
// ex1.value = 0;
// }
//}
//ex1.onfocus = function clean() {
// if (ex1.value == 0) {
// ex1.value = '';
// }
//}
// document.getElementById('ex1').onblur = "if (this.value == '') {this.value = ' 0';}"
//}
//<input type="text" value="Значение по умолчанию" onfocus="if (this.value == ' Значение по умолчанию') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}">
//
// onfocus – указываем, что скрипт будет работать при фокусе на поле.
//код ниже означает, что если значение value тега input равняется "Значение по умолчанию" – то ему присваивается пустое значение.
//if (this.value == ' Значение по умолчанию') {this.value = '';}
//
//А вот эта строка является проверяющей.
//
//onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}
//
//Т.е. когда пользователь сфокусировался – значение value становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.
//
//Если же посетитель ввел там какую то информацию и переключился на другое поле для заполнения, то данные, внесенные им останутся там без изменений
//all good
//Designed by V_Kn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ratig calc by V_Kn</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="js/script.js">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<p class="header_top">Designed by V_Kn</p>
</header>
<div class="calc_body">
<div class="inpleft">
<p class="inppar">Exam #1</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex1" value="0"></input>
<p class="inppar">Exam #2</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex2" value="0"></input>
<p class="inppar">Exam #3</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex3" value="0"></input>
<p class="inppar">Exam #4</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex4" value="0"></input>
<button class="but" id="clean">
<img src="pictures/clean.png" alt="clean.png"> Clean
</button>
</div>
<div class="inpright">
<p class="inppar">
Extra points
</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ep" value="0"></input>
<p class="inppar">
Number of exams
</p>
<input type="number" min="1" max="4" class="inptext" placeholder="100" id="noe" value="1"></input>
<div class="cal">
<p id="res" class="inppar">
Rusult:
</p>
<input type="text" class="result" placeholder="100" readonly id="resultat" value="0"></input>
<button class="but" id="button">
<img src="pictures/calc1.png" alt="Calc1.png"> Calculate
</button>
</div>
</div>
<!--Number of exams-->
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
</style>
<script src="js/script.js"></script>
</body>
<style>
body {
background-color: darkcyan;
text-shadow: 1px 1px 2px black
}
p.header_top {
display: flex;
justify-content: center;
color: firebrick;
font-size: 32px;
font-family: 'Dancing Script', cursive;
text-shadow: 0.5px 0.5px 2px black;
}
.calc_body {
font-family: 'Indie Flower', cursive;
font-size: 20px;
display: flex;
justify-content: center;
min-height: 50px;
width: 350px;
padding: 10px;
margin: auto;
border: 5px double black;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.inpleft {
text-align: center;
margin: 10px 0px 10px 0px;
/* top ridht down left */
/* position: absolute;*/
padding: 20px;
width: 150px;
/* float: left;*/
/* background-color: white;*/
}
.inpright {
text-align: center;
margin: 0px -10px 10px 0px;
/* top ridht down left */
padding: 30px 20px 20px 20px;
/* background-color: white;*/
width: 150px;
/* float: right;*/
}
.inppar {
text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
}
.inptext {
background-color: rgba(26, 40, 127, 0.7);
color: white;
font-size: 23px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
}
#res {
margin: 20px 0px 3px 0px;
}
.result {
background-color: rgba(26, 40, 127, 0.3);
color: rgb(234, 255, 50);
font-size: 25px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
margin-bottom: 10px;
}
img {
display: block;
margin: auto;
margin-bottom: 3px;
width: 30px;
}
.but {
/* text-transform: uppercase;*/
text-align: center;
font-size: 20px;
width: 100px;
color: #000;
display: block;
border: 1px solid black;
padding: 15px;
border-radius: 20px;
background: rgba(25, 10, 145, 0.7);
margin: 10px 10px -10px 20px;
/* top ridht down left */
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
font-family: 'Dancing Script', cursive;
}
</style>
<script>
function read() {
var N1 = document.getElementById('ex1').value; //N1 get value element with id = ex1
var N2 = document.getElementById('ex2').value;
var N3 = document.getElementById('ex3').value;
var N4 = document.getElementById('ex4').value;
var Np = document.getElementById('ep').value;
var S = document.getElementById('noe').value;
E1 = parseFloat(N1); // N1 => float number
E2 = parseFloat(N2);
E3 = parseFloat(N3);
E4 = parseFloat(N4);
Ep = parseFloat(Np);
Noe = parseFloat(S);
}
clean.onclick = function clean() {
document.getElementById('ex1').value = 0;
document.getElementById('ex2').value = 0;
document.getElementById('ex3').value = 0;
document.getElementById('ex4').value = 0;
document.getElementById('ep').value = 0;
document.getElementById('noe').value = 1;
document.getElementById('resultat').value = 0;
}
button.onclick = function calculating() { // when id = button clicked start function calculating
read(); //call function read
// console.log(typeof (S));
res = ((E1 + E2 + E3 + E4) / Noe) * 0.9 + Ep * 0.1; // calc res
//console.log(res); // send result to console
document.getElementById('resultat').value = res; // for element with id = resultat get value of element res
document.getElementById('resultat').value = +res.toFixed(3); // for element with id = resultat get value of element res
}
ex1.onfocus = function clean1() {
if (ex1.value == 0) {
ex1.value = '';
}
}
ex1.onblur = function unclean() {
if (ex1.value == '') {
ex1.value = 0;
}
}
ex2.onclick = function clean2() {
if (ex2.value == 0) {
ex2.value = '';
}
}
ex2.onblur = function unclean() {
if (ex2.value == '') {
ex2.value = 0;
}
}
ex3.onclick = function clean3() {
if (ex3.value == 0) {
ex3.value = '';
}
}
ex3.onblur = function unclean() {
if (ex3.value == '') {
ex3.value = 0;
}
}
ex4.onclick = function clean4() {
if (ex4.value == 0) {
ex4.value = '';
}
}
ex4.onblur = function unclean() {
if (ex4.value == '') {
ex4.value = 0;
}
}
ep.onclick = function cleanp() {
if (ep.value == 0) {
ep.value = '';
}
}
ep.onblur = function unclean() {
if (ep.value == '') {
ep.value = 0;
}
}
noe.onclick = function cleane() {
if (noe.value == 1) {
noe.value = '';
}
}
noe.onblur = function unclean() {
if (noe.value == '') {
noe.value = 1;
}
}
</script>
</html>
<!--Designed by V_Kn-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ratig calc by V_Kn</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="js/script.js">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<p class="header_top">Designed by V_Kn</p>
</header>
<div class="calc_body">
<div class="inpleft">
<p class="inppar">Exam #1</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex1" value="0"></input>
<p class="inppar">Exam #2</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex2" value="0"></input>
<p class="inppar">Exam #3</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex3" value="0"></input>
<p class="inppar">Exam #4</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ex4" value="0"></input>
<button class="but" id="clean">
<img src="pictures/clean.png" alt="clean.png"> Clean
</button>
</div>
<div class="inpright">
<p class="inppar">
Extra points
</p>
<input type="number" min="0" max="100" class="inptext" placeholder="100" id="ep" value="0"></input>
<p class="inppar">
Number of exams
</p>
<input type="number" min="1" max="4" class="inptext" placeholder="100" id="noe" value="1"></input>
<div class="cal">
<p id="res" class="inppar">
Rusult:
</p>
<input type="text" class="result" placeholder="100" readonly id="resultat" value="0"></input>
<button class="but" id="button">
<img src="pictures/calc1.png" alt="Calc1.png"> Calculate
</button>
</div>
</div>
<!--Number of exams-->
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
</style>
<script src="js/script.js"></script>
</body></html>
<!--Designed by V_Kn-->
function read() {
var N1 = document.getElementById('ex1').value; //N1 get value element with id = ex1
var N2 = document.getElementById('ex2').value;
var N3 = document.getElementById('ex3').value;
var N4 = document.getElementById('ex4').value;
var Np = document.getElementById('ep').value;
var S = document.getElementById('noe').value;
E1 = parseFloat(N1); // N1 => float number
E2 = parseFloat(N2);
E3 = parseFloat(N3);
E4 = parseFloat(N4);
Ep = parseFloat(Np);
Noe = parseFloat(S);
}
clean.onclick = function clean() {
document.getElementById('ex1').value = 0;
document.getElementById('ex2').value = 0;
document.getElementById('ex3').value = 0;
document.getElementById('ex4').value = 0;
document.getElementById('ep').value = 0;
document.getElementById('noe').value = 1;
document.getElementById('resultat').value = 0;
}
button.onclick = function calculating() { // when id = button clicked start function calculating
read(); //call function read
// console.log(typeof (S));
res = ((E1 + E2 + E3 + E4) / Noe) * 0.9 + Ep * 0.1; // calc res
//console.log(res); // send result to console
document.getElementById('resultat').value = res; // for element with id = resultat get value of element res
document.getElementById('resultat').value = +res.toFixed(3); // for element with id = resultat get value of element res
}
ex1.onfocus = function clean1() {
if (ex1.value == 0) {
ex1.value = '';
}
}
ex1.onblur = function unclean() {
if (ex1.value == '') {
ex1.value = 0;
}
}
ex2.onclick = function clean2() {
if (ex2.value == 0) {
ex2.value = '';
}
}
ex2.onblur = function unclean() {
if (ex2.value == '') {
ex2.value = 0;
}
}
ex3.onclick = function clean3() {
if (ex3.value == 0) {
ex3.value = '';
}
}
ex3.onblur = function unclean() {
if (ex3.value == '') {
ex3.value = 0;
}
}
ex4.onclick = function clean4() {
if (ex4.value == 0) {
ex4.value = '';
}
}
ex4.onblur = function unclean() {
if (ex4.value == '') {
ex4.value = 0;
}
}
ep.onclick = function cleanp() {
if (ep.value == 0) {
ep.value = '';
}
}
ep.onblur = function unclean() {
if (ep.value == '') {
ep.value = 0;
}
}
noe.onclick = function cleane() {
if (noe.value == 1) {
noe.value = '';
}
}
noe.onblur = function unclean() {
if (noe.value == '') {
noe.value = 1;
}
}
//ex1.onclick = function clean() {
// if (ex1.value == 0) {
// ex1.value = '';
// }
//}
//
//ex1.onblur = function unclean() {
// if (ex1.value == '') {
// ex1.value = 0;
// }
//}
//ex1.onfocus = function clean() {
// if (ex1.value == 0) {
// ex1.value = '';
// }
//}
// document.getElementById('ex1').onblur = "if (this.value == '') {this.value = ' 0';}"
//}
//<input type="text" value="Значение по умолчанию" onfocus="if (this.value == ' Значение по умолчанию') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}">
//
// onfocus – указываем, что скрипт будет работать при фокусе на поле.
//код ниже означает, что если значение value тега input равняется "Значение по умолчанию" – то ему присваивается пустое значение.
//if (this.value == ' Значение по умолчанию') {this.value = '';}
//
//А вот эта строка является проверяющей.
//
//onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}
//
//Т.е. когда пользователь сфокусировался – значение value становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.
//
//Если же посетитель ввел там какую то информацию и переключился на другое поле для заполнения, то данные, внесенные им останутся там без изменений
//all good
//Designed by V_Kn
body {
background-color: darkcyan;
text-shadow: 1px 1px 2px black
}
p.header_top {
display: flex;
justify-content: center;
color: firebrick;
font-size: 32px;
font-family: 'Dancing Script', cursive;
text-shadow: 0.5px 0.5px 2px black;
}
.calc_body {
font-family: 'Indie Flower', cursive;
font-size: 20px;
display: flex;
justify-content: center;
min-height: 50px;
width: 350px;
padding: 10px;
margin: auto;
border: 5px double black;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.inpleft {
text-align: center;
margin: 10px 0px 10px 0px;
/* top ridht down left */
/* position: absolute;*/
padding: 20px;
width: 150px;
/* float: left;*/
/* background-color: white;*/
}
.inpright {
text-align: center;
margin: 0px -10px 10px 0px;
/* top ridht down left */
padding: 30px 20px 20px 20px;
/* background-color: white;*/
width: 150px;
/* float: right;*/
}
.inppar {
text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
}
.inptext {
background-color: rgba(26, 40, 127, 0.7);
color: white;
font-size: 23px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
}
#res {
margin: 20px 0px 3px 0px;
}
.result {
background-color: rgba(26, 40, 127, 0.3);
color: rgb(234, 255, 50);
font-size: 25px;
text-align: center;
font-family: 'Dancing Script', cursive;
width: 100px;
margin-bottom: 10px;
}
img {
display: block;
margin: auto;
margin-bottom: 3px;
width: 30px;
}
.but {
/* text-transform: uppercase;*/
text-align: center;
font-size: 20px;
width: 100px;
color: #000;
display: block;
border: 1px solid black;
padding: 15px;
border-radius: 20px;
background: rgba(25, 10, 145, 0.7);
margin: 10px 10px -10px 20px;
/* top ridht down left */
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
font-family: 'Dancing Script', cursive;
}
/*Designed by V_Kn*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment