<body>
<p class="alert">Press any key</p>
<div class="box hide">
<p class="result"></p>
<div class="detail">
<div class="card key">
<p>Key</p>
<p></p>
</div>
<div class="card location">
<p>Location</p>
<p></p>
</div>
<div class="card which">
<p>Which</p>
<p></p>
</div>
<div class="card code">
<p>Code</p>
<p></p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #17a2b8;
width: 100%;
height: 100vh;
}
.alert {
font-size: 40px;
color: #17a2b8;
font-weight: 500;
background-color: #fff;
padding: 10px 40px;
border-radius: 12px;
}
.result {
color: white;
font-size: 70px;
width: 250px;
height: 250px;
border: 7px solid white;
border-radius: 50%;
font-weight: 600;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60px;
}
.detail {
display: flex;
}
.detail .card {
background-color: #fff;
margin: 20px;
width: 300px;
text-align: center;
border-radius: 10px;
overflow: hidden;
}
.card p {
padding: 10px;
font-size: 20px;
}
.card p:first-child {
background-color: #78c0c9;
color: white;
}
.card p:last-child {
text-transform: capitalize;
}
.hide {
display: none;
}
const box = document.querySelector('.box')
const eKey = document.querySelector('.card.key p:last-child')
const eLocation = document.querySelector('.card.location p:last-child')
const eWhich = document.querySelector('.card.which p:last-child')
const eCode = document.querySelector('.card.code p:last-child')
document.addEventListener('keydown', (e) => {
let keyName = e.keyCode === 32 ? 'Space' : e.key
document.querySelector('.result').innerText = e.which
eKey.innerText = keyName
eLocation.innerText = e.location
eWhich.innerText = e.which
eCode.innerText = e.code
document.querySelector('.alert').classList.add('hide')
box.classList.remove('hide')
})
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
2 Responses