JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beckhoff Network Setup</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        /* ... (Previous CSS styles) ... */
        #localNetworkInfo, #deviceInfo {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Beckhoff PLC Network Setup</h1>

    <div class="form-group">
        <label for="plcIp">PLC IP Address:</label>
        <input type="text" id="plcIp" placeholder="e.g., 192.168.1.10">
    </div>
    <button id="applyButton">Apply Configuration</button>
    <div id="result"></div>

    <div id="localNetworkInfo">
        <h2>Local Network Information</h2>
        <table id="localNetworkTable">
            <tr><th>Property</th><th>Value</th></tr>
        </table>
    </div>

    <div id="deviceInfo">
        <h2>Connected Devices</h2>
        <table id="deviceTable">
            <tr><th>IP Address</th><th>Status</th></tr>
        </table>
    </div>

    <script>
        // ... (Previous JavaScript functions) ...

        function displayLocalNetworkInfo() {
            // This is very limited in the browser. A backend is needed.
            // This example shows how to get the user's IP.
            fetch('https://api.ipify.org?format=json')
            .then(response => response.json())
            .then(data => {
                const table = document.getElementById('localNetworkTable');
                table.innerHTML = "<tr><th>Property</th><th>Value</th></tr>"; //Clear table content.
                const row = table.insertRow();
                const...