Scribd
Upload
7 views3 pages

Hci 5th Practical

Uploaded by

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

Hci 5th Practical

Uploaded by

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

PRACTICAL NO:-05

NAME:- SHUBHAM CHAVAN


ROLL NO:- 06
CLASS:- TE AI&DS
BRANCH:- AI&DS

PROGRAM:-

INDEX.HTML:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Interface</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Data Entry Form</h2>
<form id="dataForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control" id="age" placeholder="Enter your age" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter your phone number"
required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<hr>
<h3>Visualization</h3>
<div id="visualization" class="mt-4">
<!-- Visualization will be rendered here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

SCRIPT.JS:-

document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('dataForm');
const visualization = document.getElementById('visualization');
const nameInput = document.getElementById('name');
const ageInput = document.getElementById('age');
const emailInput = document.getElementById('email');
const phoneInput = document.getElementById('phone');

function updateVisualization(name, age, email, phone) {


visualization.innerHTML = '';

const content = `
<h4>Submitted Data:</h4>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone Number:</strong> ${phone}</p>
`;

visualization.innerHTML = content;
}

form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission

// Get form values


const name = nameInput.value;
const age = parseInt(ageInput.value, 10);
const email = emailInput.value;
const phone = phoneInput.value;

updateVisualization(name, age, email, phone);


});

function handleBlur() {
const name = nameInput.value;
const age = parseInt(ageInput.value, 10);
const email = emailInput.value;
const phone = phoneInput.value;

updateVisualization(name, age, email, phone);


}
nameInput.addEventListener('blur', handleBlur);
ageInput.addEventListener('blur', handleBlur);
emailInput.addEventListener('blur', handleBlur);
phoneInput.addEventListener('blur', handleBlur);
});

OUTPUT:-

You might also like