JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div id="app">
  <h1>Blow Molding Machine Datasheet</h1>
  <div id="machine-info"></div>
  <button onclick="exportData('json')">Export JSON</button>
  <button onclick="exportData('txt')">Export TXT</button>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  padding: 20px;
}
#app {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.data-row {
  margin-bottom: 10px;
}
button {
  margin-right: 10px;
  padding: 8px 16px;
  font-size: 14px;
}

JavaScript

class MachineDataRenderer {
  constructor(containerId, jsonData) {
    this.container = document.getElementById(containerId);
    this.data = jsonData;
    this.render();
  }

  render() {
    this.container.innerHTML = '';
    for (let [key, value] of Object.entries(this.data)) {
      const div = document.createElement('div');
      div.className = 'data-row';
      div.innerHTML = `<strong>${this.formatKey(key)}:</strong> ${this.formatValue(value)}`;
      this.container.appendChild(div);
    }
  }

  formatKey(key) {
    return key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  }

  formatValue(value) {
    return typeof value === 'object'
      ? `<pre>${JSON.stringify(value, null, 2)}</pre>`
      : value;
  }

  getData() {
    return this.data;
  }
}

// Sample JSON
const sampleData = {
  machine_id: "BM-3000X",
  model: "2025-Alpha",
  pressure_range: "2-10 bar",
  temperature: "220°C",
  cycle_time: "12s",
  material_type: "PET",
  regulations: {
    eu_directive: "2006/42/EC",
    iso_standard: "ISO 9001"
  }
};

// Initialize renderer
const renderer = new MachineDataRenderer('machine-info', sampleData);

// Export logic
function exportData(type) {
  const data = renderer.getData();
  const blob = new Blob(
    [type === 'json' ? JSON.stringify(data, null, 2) : plainText(data)],
    { type: 'text/plain;charset=utf-8' }
  );
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `machine_data.${type}`;
  a.click();
  URL.revokeObjectURL(url);
}

function plainText(data) {
  let output = '';
  for (let [key, value] of Object.entries(data)) {
    if (typeof value === 'object') {
      output += `${key}:\n`;
      for (let [k, v] of Object.entries(value)) {
        output += `  ${k}: ${v}\n`;
      }
    } else {
      output += `${key}: ${value}\n`;
    }
  }
  return output;
}