31Ke-ctrl/graph-wizard-deluxe

1document.addEventListener('DOMContentLoaded', function() {2    // Get DOM elements3    const xInput = document.getElementById('x-coordinate');4    const yInput = document.getElementById('y-coordinate');5    const plotBtn = document.getElementById('plot-btn');6    const clearBtn = document.getElementById('clear-btn');7    const canvas = document.getElementById('coordinate-grid');8    const ctx = canvas.getContext('2d');9    const pointDisplay = document.getElementById('point-display');10    const currentPointSpan = document.getElementById('current-point');11    const pointsTable = document.getElementById('points-table');12    // Global variables13    let gridResolution = 40; // pixels per unit14    const resolutionSlider = document.getElementById('grid-resolution');15    const resolutionValue = document.getElementById('resolution-value');16    17    // Set canvas dimensions18    function resizeCanvas() {19        const container = document.getElementById('grid-container');20        canvas.width = container.clientWidth;21        canvas.height = container.clientHeight;22        drawGrid();23    }24    25    // Update grid resolution26    resolutionSlider.addEventListener('input', function() {27        gridResolution = parseInt(this.value);28        resolutionValue.textContent = `${gridResolution}px`;29        drawGrid();30    });31// Initial setup32    resizeCanvas();33    window.addEventListener('resize', resizeCanvas);34    35    // Draw the coordinate grid36    function drawGrid() {37        ctx.clearRect(0, 0, canvas.width, canvas.height);38        39        const centerX = canvas.width / 2;40        const centerY = canvas.height / 2;41        42        // Draw grid lines43        ctx.strokeStyle = '#e2e8f0';44        ctx.lineWidth = 1;45        // Vertical lines46        for (let x = 0; x < canvas.width; x += gridResolution) {47            ctx.beginPath();48            ctx.moveTo(x, 0);49            ctx.lineTo(x, canvas.height);50            ctx.stroke();51        }52        53        // Horizontal lines54        for (let y = 0; y < canvas.height; y += gridResolution) {55            ctx.beginPath();56            ctx.moveTo(0, y);57            ctx.lineTo(canvas.width, y);58            ctx.stroke();59        }60// Draw axes61        ctx.strokeStyle = '#334155';62        ctx.lineWidth = 2;63        64        // X-axis65        ctx.beginPath();66        ctx.moveTo(0, centerY);67        ctx.lineTo(canvas.width, centerY);68        ctx.stroke();69        70        // Y-axis71        ctx.beginPath();72        ctx.moveTo(centerX, 0);73        ctx.lineTo(centerX, canvas.height);74        ctx.stroke();75        76        // Draw axis labels77        ctx.fillStyle = '#334155';78        ctx.font = '12px Arial';79        ctx.textAlign = 'center';80        81        // X-axis labels82        // Calculate visible range based on current resolution83        const xRange = Math.floor(canvas.width / gridResolution / 2);84        const yRange = Math.floor(canvas.height / gridResolution / 2);85        86        // X-axis labels87        for (let x = -xRange; x <= xRange; x++) {88            if (x === 0) continue;89            const pixelX = centerX + (x * gridResolution);90            ctx.fillText(x.toString(), pixelX, centerY + 15);91        }92        93        // Y-axis labels94        for (let y = -yRange; y <= yRange; y++) {95            if (y === 0) continue;96            const pixelY = centerY - (y * gridResolution);97            ctx.fillText(y.toString(), centerX - 15, pixelY + 4);98        }99// Origin label100        ctx.fillText('0', centerX - 15, centerY + 15);101    }102    103    // Plot a point on the grid104    function plotPoint(x, y) {105        const centerX = canvas.width / 2;106        const centerY = canvas.height / 2;107        const pixelX = centerX + (x * gridResolution);108        const pixelY = centerY - (y * gridResolution);109// Clear previous point110        ctx.clearRect(0, 0, canvas.width, canvas.height);111        drawGrid();112        113        // Draw new point114        ctx.fillStyle = '#6366f1';115        ctx.beginPath();116        ctx.arc(pixelX, pixelY, 6, 0, Math.PI * 2);117        ctx.fill();118        119        // Update point display120        currentPointSpan.textContent = `(${x}, ${y})`;121        pointDisplay.classList.remove('hidden');122        123        // Add to history124        addToHistory(x, y);125    }126    127    // Add point to history table128    function addToHistory(x, y) {129        const row = document.createElement('tr');130        131        const xCell = document.createElement('td');132        xCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';133        xCell.textContent = x;134        135        const yCell = document.createElement('td');136        yCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';137        yCell.textContent = y;138        139        const quadrantCell = document.createElement('td');140        quadrantCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';141        142        let quadrant;143        if (x > 0 && y > 0) quadrant = 'I';144        else if (x < 0 && y > 0) quadrant = 'II';145        else if (x < 0 && y < 0) quadrant = 'III';146        else if (x > 0 && y < 0) quadrant = 'IV';147        else if (x === 0 && y !== 0) quadrant = 'Y-axis';148        else if (y === 0 && x !== 0) quadrant = 'X-axis';149        else quadrant = 'Origin';150        151        quadrantCell.textContent = quadrant;152        153        row.appendChild(xCell);154        row.appendChild(yCell);155        row.appendChild(quadrantCell);156        157        pointsTable.prepend(row);158    }159    160    // Event listeners161    plotBtn.addEventListener('click', function() {162        const x = parseFloat(xInput.value) || 0;163        const y = parseFloat(yInput.value) || 0;164        // Calculate max visible values based on current resolution165        const maxX = Math.floor(canvas.width / gridResolution / 2);166        const maxY = Math.floor(canvas.height / gridResolution / 2);167        168        if (Math.abs(x) > maxX || Math.abs(y) > maxY) {169            alert(`Please enter values between -${maxX} and ${maxX} for X, and -${maxY} and ${maxY} for Y`);170            return;171        }172plotPoint(x, y);173    });174    175    clearBtn.addEventListener('click', function() {176        xInput.value = '';177        yInput.value = '';178        ctx.clearRect(0, 0, canvas.width, canvas.height);179        drawGrid();180        pointDisplay.classList.add('hidden');181    });182    // Allow plotting with Enter key183    document.addEventListener('keypress', function(e) {184        if (e.key === 'Enter') {185            plotBtn.click();186        }187    });188 189    // Function to handle HTTP POST190    async function postPointData(x, y) {191        try {192            const response = await fetch('https://jsonplaceholder.typicode.com/posts', {193                method: 'POST',194                body: JSON.stringify({195                    x: x,196                    y: y,197                    timestamp: new Date().toISOString()198                }),199                headers: {200                    'Content-type': 'application/json; charset=UTF-8',201                }202            });203            204            const data = await response.json();205            console.log('Point data posted successfully:', data);206        } catch (error) {207            console.error('Error posting point data:', error);208        }209    }210 211    // Modify plotPoint function to include HTTP POST212    async function plotPoint(x, y) {213        const centerX = canvas.width / 2;214        const centerY = canvas.height / 2;215        216        const pixelX = centerX + (x * gridResolution);217        const pixelY = centerY - (y * gridResolution);218        219        // Clear previous point220        ctx.clearRect(0, 0, canvas.width, canvas.height);221        drawGrid();222        223        // Draw new point224        ctx.fillStyle = '#6366f1';225        ctx.beginPath();226        ctx.arc(pixelX, pixelY, 6, 0, Math.PI * 2);227        ctx.fill();228        229        // Update point display230        currentPointSpan.textContent = `(${x}, ${y})`;231        pointDisplay.classList.remove('hidden');232        233        // Add to history234        addToHistory(x, y);235 236        // Send data via HTTP POST237        await postPointData(x, y);238    }239});