Typer1

...

by Vlad Buryachek

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Typer</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	</head>
	<body id="body">
		<div id="wrap"></div>
		<div id="alertWindow">
			<div id="alertWindowText">Неправильная раскладка!</div>
			<div id="alertWindowButtons"><a href="#" id="button24" onclick="modalClose()">Продолжить</a></div>
		</div>
		<div id="main"><b><div id="mistakes"></div></b><div id="alertText"></div><div id="field"><span id="text"></span></div>

		<div id="container">
    <ul id="keyboard">
        <li class="symbol"><span class="off"><b>`</b></span><span class="on">~</span></li>
        <li class="symbol"><span class="off"><b>1</b></span><span class="on">!</span></li>
        <li class="symbol"><span class="off"><b>2</b></span><span class="on">@</span></li>
        <li class="symbol"><span class="off"><b>3</b></span><span class="on">#</span></li>
        <li class="symbol"><span class="off"><b>4</b></span><span class="on">$</span></li>
        <li class="symbol"><span class="off"><b>5</b></span><span class="on">%</span></li>
        <li class="symbol"><span class="off"><b>6</b></span><span class="on">^</span></li>
        <li class="symbol"><span class="off"><b>7</b></span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off"><b>8</b></span><span class="on">*</span></li>
        <li class="symbol"><span class="off"><b>9</b></span><span class="on">(</span></li>
        <li class="symbol"><span class="off"><b>0</b></span><span class="on">)</span></li>
        <li class="symbol"><span class="off"><b>-</b></span><span class="on">_</span></li>
        <li class="symbol"><span class="off"><b>=</b></span><span...

CSS

body {
	margin: 0px;
	background-color: #4BABE7;
}

#alertText {
	color: red;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 19pt;
	
}


#alertWindowText {
	width: 450px;
	height: 70px;
	background-color: #fff;
	opacity: 1;
	border-radius: 15px 15px 0 0;
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 22pt;
	padding-top: 30px;

}

#alertWindowButtons {
	width: 450px;
	height: 70px;
	background-color: #F4F4F4;
	border-radius: 0 0 15px 15px;
	text-align: center;
	padding-top: 20px;
}

#button24 {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .7em 4em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
  font-family: 'Source Sans Pro', sans-serif;
} 
#button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
#button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }

#wrap {
	height: 100%;
	width: 100%;
	opacity: 0.7;
	background-color: black;
	position: absolute;
	z-index: 1;
	display: none;
}

#alertWindow {
	transform: translate(450px, 30px);
	display: none;
	position: absolute;
	z-index: 1;
}

#main {
	width: 1366px;
	height: 510px;
	background-color: #4BABE7;
}

#field {
	background-color: white;
	margin-left: 150px;
	margin-right: 150px;
	border-radius: 20px;
	transform: translate(0, 110px);
	padding-top: 30px;
	padding-bottom: 30px;
	padding-right: 40px;
	padding-left: 40px;
}
#text {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18pt;
}

#mistakes {
	font-family: 'PT Sans Narrow', sans-serif;
	text-decoration: underline;
	color: white;
	font-size: 13pt;
	transform: translate(170px, 105px); 
}

}
#container {
margin: 100px auto;
width: 688px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
transform: translate(227px, 134px);
}
    #keyboard li {
    float: left;
    margin: 0 7px 7px 0;
 ...

JavaScript

//Функция которая получает keypress
// event.type должен быть keypress

function getChar(event) {
  if (event.which == null) { // IE
    if (event.keyCode < 32) return null; // спец. символ
    return String.fromCharCode(event.keyCode)
  }

  if (event.which != 0 && event.charCode != 0) { // все кроме IE
    if (event.which < 32) return null; // спец. символ
    return String.fromCharCode(event.which); // остальные
  }

  return null; // спец. символ
}

function isCyrillic(text) { //функция, которая проверяет на кириллицу
    return /[а-я]/i.test(text);
}

function modalCloseWithEnter () { //закрытие модального окна по нажатию ентер
	if (event.keyCode == 13 && event.type == "keydown") {
		document.getElementById("wrap").style.display = "none";
		document.getElementById("alertWindow").style.display = "none";
		document.addEventListener("keypress", checkKeyEvent);
		document.removeEventListener("keydown", modalCloseWithEnter);
	}
}

function modalClose() { //Закрытие модального окна по клику на кнопку
	document.getElementById("wrap").style.display = "none";
	document.getElementById("alertWindow").style.display = "none";
	document.addEventListener("keypress", checkKeyEvent);
}
var capsLockEnabled;
document.addEventListener('keydown', function(event) {
  	var caps = event.getModifierState && event.getModifierState('CapsLock');
  	capsLockEnabled = caps;
});

//Main function. Does everything you want
var counterLetters = 0;
var levelText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere tellus et leo mollis, vel".toLowerCase();
text.innerHTML = levelText;
let mistakesCounter = 0; //Счетчик ошибок
mistakes.innerHTML = ("Кол-во ошибок: " + mistakesCounter);
function checkKeyEvent() {
  	var keyName = getChar(event);
  	if (isCyrillic(keyName)) { //вывод сообщения о не правильной раскладке
  		var modalWindowCaps = document.getElementById("alertWindowText");
  		modalWindowCaps.innerHTML = ("Неправильная раскладка!");
 ...