- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test: Virtual keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="visually-hidden">Virtual keyboard</h1>
<section class="computer">
<div class="display-wrapper">
<div class="display"></div>
</div>
<button class="button clear" type="button">Clear</button>
</section>
<section class="keyboard">
<div class="keyboard-line">
<button class="button key" type="button" data-index="0">q</button>
<button class="button key" type="button" data-index="1">w</button>
<button class="button key" type="button" data-index="2">e</button>
<button class="button key" type="button" data-index="3">r</button>
<button class="button key" type="button" data-index="4">t</button>
<button class="button key" type="button" data-index="5">y</button>
<button class="button key" type="button" data-index="6">u</button>
<button class="button key" type="button" data-index="7">i</button>
<button class="button key" type="button" data-index="8">o</button>
<button class="button key" type="button" data-index="9">p</button>
<button class="button key" type="button" data-index="10">[</button>
<button class="button key" type="button" data-index="11">]</button>
</div>
<div class="keyboard-line">
<button class="button key" type="button" data-index="12">a</button>
<button class="button key" type="button" data-index="13">s</button>
<button class="button key" type="button" data-index="14">d</button>
<button class="button key" type="button" data-index="15">f</button>
<button class="button key" type="button" data-index="16">g</button>
<button class="button key" type="button" data-index="17">h</button>
<button class="button key" type="button" data-index="18">j</button>
<button class="button key" type="button" data-index="19">k</button>
<button class="button key" type="button" data-index="20">l</button>
<button class="button key" type="button" data-index="21">;</button>
<button class="button key" type="button" data-index="22">'</button>
<button class="button key" type="button" data-index="23">\</button>
</div>
<div class="keyboard-line">
<button class="button key" type="button" data-index="24">z</button>
<button class="button key" type="button" data-index="25">x</button>
<button class="button key" type="button" data-index="26">c</button>
<button class="button key" type="button" data-index="27">v</button>
<button class="button key" type="button" data-index="28">b</button>
<button class="button key" type="button" data-index="29">n</button>
<button class="button key" type="button" data-index="30">m</button>
<button class="button key" type="button" data-index="31">,</button>
<button class="button key" type="button" data-index="32">.</button>
</div>
<div class="keyboard-line">
<button class="button key space" type="button" data-index="33"> </button>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS
body {
box-sizing: border-box;
margin: 0;
font-family: "Courier New", "Courier", monospace;
font-size: 18px;
line-height: 24px;
color: #fce6ef;
background-color: #2b3755;
}
.visually-hidden:not(:focus):not(:active) {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.computer {
display: flex;
flex-direction: column;
position: relative;
height: 240px;
padding: 16px 10px;
}
.computer::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 244px;
background-color: #3c4d77;
border-bottom: 1px solid #222c44;
}
.computer::after {
content: "";
position: absolute;
top: 202px;
left: 10px;
width: 162px;
height: 23px;
background-image: url("img/details.svg");
}
.display-wrapper {
border-radius: 6px;
margin-bottom: 12px;
padding: 4px;
background-image: linear-gradient(to bottom, #1a2133, #4d6398);
}
.display {
position: relative;
height: 134px;
overflow: auto;
padding: 8px 28px 16px;
word-wrap: break-word;
border-radius: 4px;
background-color: #2b3755;
}
.display::before {
content: "";
position: absolute;
top: 14px;
left: 8px;
width: 8px;
height: 12px;
background-image: url("img/string-arrow.svg");
}
.keyboard {
padding-right: 5px;
padding-left: 10px;
}
.keyboard-line {
display: flex;
justify-content: center;
flex-shrink: 1;
}
.keyboard-line:nth-child(3) {
margin-left: 12.5%;
margin-right: 12.5%;
}
.button {
position: relative;
padding-top: 7px;
padding-bottom: 7px;
font: inherit;
color: inherit;
border: none;
border-radius: 4px;
background-image: linear-gradient(to bottom, #4d6398, #334266);
}
.button::before {
content: "";
position: absolute;
z-index: -1;
padding: 1px;
width: 100%;
height: 100%;
top: -1px;
left: -1px;
border-radius: 5px;
background-image: linear-gradient(to bottom, #1a2133, #222c44);
}
.button.clear {
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.key {
margin-right: 5px;
margin-bottom: 5px;
padding-left: 0;
padding-right: 0;
flex-grow: 1;
font-size: 24px;
line-height: 26px;
}
.space {
height: 40px;
}
.space::after {
content: "";
position: absolute;
top: 16px;
left: calc(50% - 20px);
width: 40px;
height: 6px;
background-image: url("img/icon-space.svg");
}
.button:focus {
outline: 3px solid rgba(252, 230, 239, 0.3);
outline-offset: 1px;
}
.button:hover {
background-image: linear-gradient(to bottom, #677cb2, #455887);
}
.button:active {
background-image: none;
background-color: #334266;
}
JavaScript
/*
Buttons with letters and “space bar” have the key class, and the display has the display class.
When you click on a button with a letter or the space bar, the text content of this button should be added to the text content of the display.
When you click on the clear button, all of the text inside the display should be deleted. To accomplish this, you need to write an empty line to the text content of the display.
*/
Click inside the mini browser to put the focus in this window.
Console
var display = document.querySelector('.display');
var clear = document.querySelector('.clear');
var keys = Array.from(document.querySelectorAll('.key'));
clear.onclick = function () {
display.textContent = '';
};
keys.forEach(function (key) {
key.onclick = function () {
display.textContent += key.textContent;
};
});