MHV Assignment : Create a Measurement Configurator in JavaScript
HTMl code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Measurement Configurator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interactive Measurement Configurator</h1>
</header>
<main>
<div id="configurator-container">
<div id="diagram" class="diagram">
<div id="line1" class="line draggable"></div>
<div id="line2" class="line draggable"></div>
</div>
<div id="measurement-panel">
<h2>Current Distance</h2>
<p id="distance-display"><span id="distance">0</span>px</p>
<div id="slider-controls">
<input type="range" id="distance-slider" min="0" max="400" value="100">
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
CSS Code:
:root {
--line-color: #3498db;
--background-color: #ecf0f1;
--highlight-color: #2ecc71;
--shadow-color: rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2,violet,purple,indigo);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
h1 {
color: var(--line-color);
margin: 20px 0;
text-shadow: 1px 1px 5px var(--shadow-color);
#configurator-container {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
width: 80%;
max-width: 900px;
box-shadow: 0 4px 15px var(--shadow-color);
border-radius: 8px;
overflow: hidden;
.diagram {
position: relative;
height: 400px;
background: linear-gradient(180deg, #ffffff, #e0e0e0);
border: 3px solid #bdc3c7;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.05);
.line {
position: absolute;
width: 100%;
height: 4px;
background: linear-gradient(to right, #3498db, #2980b9);
box-shadow: 0 2px 5px var(--shadow-color);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
#line1 { top: 100px; }
#line2 { top: 200px; }
.line:hover {
background: linear-gradient(to right, #2ecc71, #27ae60);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
#measurement-panel {
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
#distance-display {
font-size: 2em;
color: var(--line-color);
margin: 10px 0;
text-shadow: 1px 1px 5px var(--shadow-color);
#slider-controls input[type="range"] {
width: 100%;
cursor: pointer;
@media (max-width: 768px) {
#configurator-container {
grid-template-columns: 1fr;
}
Javascript Code:
document.addEventListener('DOMContentLoaded', function() {
const line1 = document.getElementById('line1');
const line2 = document.getElementById('line2');
const distanceDisplay = document.getElementById('distance');
const distanceSlider = document.getElementById('distance-slider');
let isDragging = false;
let activeLine = null;
function calculateDistance() {
const line1Top = line1.offsetTop;
const line2Top = line2.offsetTop;
return Math.abs(line1Top - line2Top);
function updateDistance() {
const distance = calculateDistance();
distanceDisplay.textContent = distance;
distanceSlider.value = distance;
function dragStart(e) {
isDragging = true;
activeLine = e.target;
activeLine.style.transition = 'none'; // Disable transition during dragging
function dragEnd() {
isDragging = false;
activeLine = null;
function dragLine(e) {
if (!isDragging) return;
const container = document.querySelector('.diagram');
const containerTop = container.offsetTop;
const newTop = e.clientY - containerTop;
// Restrict movement within boundaries
if (newTop >= 0 && newTop <= container.offsetHeight - activeLine.offsetHeight) {
activeLine.style.top = `${newTop}px`;
updateDistance();
function sliderChange(e) {
const newDistance = e.target.value;
const line1Top = line1.offsetTop;
const line2NewTop = line1Top + parseInt(newDistance);
if (line2NewTop <= document.querySelector('.diagram').offsetHeight) {
line2.style.top = `${line2NewTop}px`;
updateDistance();
// Event listeners for drag and slider
line1.addEventListener('mousedown', dragStart);
line2.addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', dragLine);
document.addEventListener('mouseup', dragEnd);
distanceSlider.addEventListener('input', sliderChange);
// Initial distance calculation
updateDistance();
});
