<body>
  <h1>Measure Distance</h1>

  <div id="container"></div>

  <h3>Results</h3>

  <div id="results">

    <div id="current-result"></div>

    <div id="total-result"></div>

  </div>

  <button id="reset" type="button">Reset</button>
</body>
html {
 font-family: sans-serif;
 font-size: 62.5%;
}

@media(max-width: 75em) {
 html {
  font-size: 60%;
 }
}

@media(max-width: 61.25em) {
 html {
  font-size: 58%;
 }
}

@media(max-width: 28.75em) {
 html {
  font-size: 55%;
 }
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background: AntiqueWhite;
}

h1 {
 font-size: 2rem;
 text-align: center;
 margin: 0.625rem 0;
 color: #333/*BlueViolet*/;
 text-shadow: 2px 2px 4px BlueViolet;
}

h3 {
 text-align: center;
 padding: 0.625rem;
 margin: 0.625rem;
 font-size: 1.6rem;
 color: #000;
}

#container {
 width: 500px;
 height: 400px;
 border: 2px solid BurlyWood;
 
 background-image: url(https://images.unsplash.com/photo-1629898145005-5f0ff3ee4eed?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTk5NzM3MQ&ixlib=rb-1.2.1&q=85); 
 background-position: center; 
 background-repeat: no-repeat; 
 background-size: cover; 
}


.points {
 position: absolute;
 border: 2px solid red;
 border-radius: 50%;
 opacity: 1;
}

.lines {
 position: absolute;
 border: 1px solid white;
 height: 0;
 opacity: 1;
}

#results {
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 align-items: flex-start;
 width: 400px;
 height: 100px;
 border: 2px solid BurlyWood;
 background: Beige;
 line-height: 1.4;
 padding: 0.625rem;
 margin: 0.625rem;
 font-size: 1.5rem;
 overflow-y: auto;
}

#reset {
 padding: 0.625rem 3rem;
 margin: 0.625rem;
 font-size: 1.5rem;
 font-weight: bold;
 background: black;
 color: white;
 text-shadow: 2px 2px 4px #000000;
 border: ridge 3px white;
 border-radius: 10px;
}
let container = document.querySelector("#container");

let results = document.querySelector("#results");
let currentResult = document.querySelector("#current-result");
let totalResult = document.querySelector("#total-result");

let coordinates = {
  coordX: [],
  coordY: []
};

let points = [];
let lines = [];

let lineCounter = 0;
let totalDistance = 0;

let currentPath = "";
let totalPath = "";

container.addEventListener("click", (e) => {
  coordinates.coordX.push(e.x);
  coordinates.coordY.push(e.y);

  createPoints(e.x, e.y);

  let prevX = coordinates.coordX[coordinates.coordX.length - 2];

  let prevY = coordinates.coordY[coordinates.coordY.length - 2];

  if (coordinates.coordX.length > 1) {
    createLines(prevX, prevY, e.x, e.y);
  }
});

function createPoints(posX, posY) {
  for (let i = 0; i < coordinates.coordX.length; i++) {
    points[i] = document.createElement("div");
    points[i].className = "points";
    points[i].style.left = `${coordinates.coordX[i]}px`;
    points[i].style.top = `${coordinates.coordY[i]}px`;

    container.appendChild(points[i]);
  }
}

function createLines(x1, y1, x2, y2) {
  let distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

  let midX = (x1 + x2) / 2;
  let midY = (y1 + y2) / 2;

  let inclinationInRadian = Math.atan2(y1 - y2, x1 - x2);
  let inclinationInDegree = (inclinationInRadian * 180) / Math.PI;

  for (let i = 0; i < coordinates.coordX.length; i++) {
    lines[i] = document.createElement("div");
    lines[i].className = "lines";

    lines[i].style.width = `${distance}px`;
    lines[i].style.left = `${midX - distance / 2}px`;
    lines[i].style.top = `${midY}px`;
    lines[i].style.transform = "rotate(" + inclinationInDegree + "deg)";

    container.appendChild(lines[i]);
  }

  currentResult.innerHTML = `<strong>Current Result:-</strong> <br>`;

  totalResult.innerHTML = `<strong>Total Result:-</strong> <br>`;

  getDistance(distance);
}

function getDistance(distance) {
  let pixelToCm = distance * 0.0264583333;
  pixelToCm = Number(pixelToCm.toFixed(2));

  totalDistance += pixelToCm;
  totalDistance = Number(totalDistance.toFixed(2));

  currentPath += `Line ${++lineCounter}:- ${pixelToCm}cm<br>`;

  totalPath += `${totalDistance}cm<br>`;

  currentResult.innerHTML += currentPath;

  totalResult.innerHTML += totalPath;

  results.scrollTop = results.scrollHeight;
}

document.querySelector("#reset").addEventListener("click", () => {
  location.reload();
  console.log("refreshed");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.