Day 6 | Demo Detect Pressed Key

Sử dụng HTML , CSS, JS thiết kế các chức năng khi bắt sự kiện với Keydown

				
					  <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 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *