<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Print Optimal Viewing Distance Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }
    .container {
      max-width: 600px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
      text-align: left;
      margin-bottom: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    select {
      width: 100%;
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 10px;
      font-size: 18px;
      color: #fff;
      background-color: #007BFF;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .output {
      margin-top: 20px;
      padding: 15px;
      background-color: #e9e9e9;
      border-radius: 4px;
      font-size: 18px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Print Optimal Viewing Distance Calculator</h1>
    
    <!-- 1) Select Print Size -->
    <div class="form-group">
      <label for="printSize">Select Print Size</label>
      <select id="printSize">
        <optgroup label="4:3">
          <option value="6,8">6" x 8"</option>
          <option value="9,12">9" x 12"</option>
          <option value="12,16">12" x 16"</option>
          <option value="15,20">15" x 20"</option>
          <option value="18,24">18" x 24"</option>
          <option value="30,40">30" x 40"</option>
          <option value="36,48">36" x 48"</option>
          <option value="42,56">42" x 56"</option>
          <option value="45,60">45" x 60"</option>
        </optgroup>
        <optgroup label="3:2">
          <option value="4,6">4" x 6"</option>
          <option value="8,12">8" x 12"</option>
          <option value="10,15">10" x 15"</option>
          <option value="16,24">16" x 24"</option>
          <option value="20,30">20" x 30"</option>
          <option value="24,36">24" x 36"</option>
          <option value="30,45">30" x 45"</option>
          <option value="36,54">36" x 54"</option>
          <option value="40,60">40" x 60"</option>
          <option value="44,66">44" x 66"</option>
        </optgroup>
        <optgroup label="Square">
          <option value="4,4">4" x 4"</option>
          <option value="8,8">8" x 8"</option>
          <option value="10,10">10" x 10"</option>
          <option value="12,12">12" x 12"</option>
          <option value="15,15">15" x 15"</option>
          <option value="20,20">20" x 20"</option>
          <option value="25,25">25" x 25"</option>
          <option value="30,30">30" x 30"</option>
          <option value="40,40">40" x 40"</option>
          <option value="42,42">42" x 42"</option>
          <option value="44,44">44" x 44"</option>
        </optgroup>
      </select>
    </div>
    
    <!-- 2) Calculate Button -->
    <button id="calculate">Calculate</button>
    
    <!-- 3) Output Viewing Distance -->
    <div class="output" id="output">
      Optimal Viewing Distance:
    </div>
  </div>

  <script>
    // We'll use a simple rule of thumb: recommended viewing distance = 1.5 × diagonal.
    // Then round the result to the nearest 0.5 feet, and convert to meters.

    document.getElementById('calculate').addEventListener('click', function() {
      // Get the selected print size.
      var sizeValue = document.getElementById('printSize').value;
      var dimensions = sizeValue.split(',');
      
      // Parse width and height from the selection.
      var widthInches = parseFloat(dimensions[0]);
      var heightInches = parseFloat(dimensions[1]);
      
      // Calculate diagonal in inches.
      var diagonalInches = Math.sqrt(Math.pow(widthInches, 2) + Math.pow(heightInches, 2));
      
      // Recommended viewing distance in inches.
      var recommendedDistanceInches = 1.5 * diagonalInches;
      
      // Convert inches to feet.
      var distanceFeet = recommendedDistanceInches / 12;
      
      // Round feet to nearest 0.5.
      distanceFeet = Math.round(distanceFeet * 2) / 2;
      
      // Convert inches to meters.
      var distanceMeters = recommendedDistanceInches * 0.0254;
      // Round meters to two decimals for clarity.
      distanceMeters = Math.round(distanceMeters * 100) / 100;
      
      // Display the result.
      var outputText = 
        "Optimal Viewing Distance: " + distanceFeet + " ft (" + distanceMeters + " m)";
      document.getElementById('output').innerHTML = outputText;
    });
  </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.