KEMBAR78
Assignment 12 | PDF | Software | Cyberspace
Scribd
Upload
13 views5 pages

Assignment 12

The document outlines an assignment to create a web application that displays details of a key pressed by the user using HTML, CSS, and JavaScript. It specifies the requirements for the webpage layout, styling, and functionality, including real-time updates of key details. The provided code snippets demonstrate the structure of the HTML, styling in CSS, and the JavaScript event listener for keypress detection.

Uploaded by

thakurajay8865
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views5 pages

Assignment 12

The document outlines an assignment to create a web application that displays details of a key pressed by the user using HTML, CSS, and JavaScript. It specifies the requirements for the webpage layout, styling, and functionality, including real-time updates of key details. The provided code snippets demonstrate the structure of the HTML, styling in CSS, and the JavaScript event listener for keypress detection.

Uploaded by

thakurajay8865
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Name:-Satyam Kumar Kashyap

Sub-Web Designing Workshop

Sec-3A

Assignment 12
Objective:
Develop a project using HTML, CSS, and JavaScript that dynamically displays
details of a key pressed by the user. The application will detect keypress events
and show the corresponding key on the screen in real-time.

Requirements:
1. HTML:
o Create a webpage with a simple heading prompting the user to
press any key.
o Include a section to dynamically display the key details.
2. CSS:
o Style the webpage to ensure a clean, user-friendly design.
o Center the content both vertically and horizontally on the screen.
3. JavaScript:
o Detect keypress events using keydown or similar event listeners.
o Display the name of the key pressed (event.key) on the webpage.
4. Functionality:
o The app should respond immediately when a key is pressed.
o Clear any previous key details and show the latest key press.

HTML:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Key Press Event Logger</title>

<link rel="stylesheet" href="styles.css">


</head>

<body>

<h1>Press any key to see its details!</h1>

<div class="container">

<div class="box">

<p class="label">event.key</p>

<p id="key" class="value">-</p>

</div>

<div class="box">

<p class="label">event.keyCode</p>

<p id="keyCode" class="value">-</p>

</div>

<div class="box">

<p class="label">event.code</p>

<p id="code" class="value">-</p>

</div>

</div>

<script src="scripts.js"></script>

</body>

</html>

CSS
body {

font-family: Arial, sans-serif;

text-align: center;
background-color: #87e08c;

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

h1 {

margin-bottom: 20px;

color: #333;

.container {

display: flex;

justify-content: center;

gap: 20px;

.box {

background: #fff;

border: 2px solid #ddd;

border-radius: 8px;

padding: 20px;
width: 120px;

text-align: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.label {

font-weight: bold;

color: #555;

margin-bottom: 10px;

.value {

font-size: 24px;

color: #222;

JAVASCRIPT

document.addEventListener('keydown', (event) => {

document.getElementById('key').textContent = event.key;

document.getElementById('keyCode').textContent = event.keyCode;

document.getElementById('code').textContent = event.code;

});

OUTPUT

You might also like