• – we do best price every day! Check out our Price Match Guarantee for more
  • FREE DELIVERY on orders over $49*

1800 THE KING

PRODUCT NAME

test

<@html>

Water Testing App

Test Results

Parameter Value Status
Temperature (°C)
Free Chlorine (mg/L)
Total Chlorine (mg/L)
Alkalinity (mg/L)
Cyanuric Acid (mg/L)
Calcium Hardness (mg/L)
Iron (mg/L)
Copper (mg/L)
TDS (mg/L)
Bromine (mg/L)
Phosphates (mg/L)
Salt (mg/L)
<@style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } h1 { text-align: center; color: #333; } form { display: flex; flex-direction: column; } label { margin-top: 10px; color: #555; } input { padding: 10px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 10px; margin-top: 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #218838; } #result { margin-top: 20px; font-size: 16px; color: #333; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 10px; border: 1px solid #ddd; text-align: center; } th { background-color: #f4f4f4; } <@neto_js> document.addEventListener('DOMContentLoaded', function() { document.getElementById('waterTestForm').addEventListener('submit', function(event) { event.preventDefault(); const temp = parseFloat(document.getElementById('temp').value); const fcl = parseFloat(document.getElementById('fcl').value); const tcl = parseFloat(document.getElementById('tcl').value); const alka = parseFloat(document.getElementById('alka').value); const cya = parseFloat(document.getElementById('cya').value); const cahd = parseFloat(document.getElementById('cahd').value); const iron = parseFloat(document.getElementById('iron').value); const cu = parseFloat(document.getElementById('cu').value); const tds = parseFloat(document.getElementById('tds').value); const brom = parseFloat(document.getElementById('brom').value); const phos = parseFloat(document.getElementById('phos').value); const salt = parseFloat(document.getElementById('salt').value); // Displaying results document.getElementById('resultTemp').textContent = temp; document.getElementById('resultFcl').textContent = fcl; document.getElementById('resultTcl').textContent = tcl; document.getElementById('resultAlka').textContent = alka; document.getElementById('resultCya').textContent = cya; document.getElementById('resultCahd').textContent = cahd; document.getElementById('resultIron').textContent = iron; document.getElementById('resultCu').textContent = cu; document.getElementById('resultTds').textContent = tds; document.getElementById('resultBrom').textContent = brom; document.getElementById('resultPhos').textContent = phos; document.getElementById('resultSalt').textContent = salt; // Setting status based on values (example thresholds, you can adjust these) const tempStatus = temp < 0 || temp > 50 ? 'Unsafe' : 'Safe'; const fclStatus = fcl < 1 || fcl > 3 ? 'Unsafe' : 'Safe'; const tclStatus = tcl < 1 || tcl > 3 ? 'Unsafe' : 'Safe'; const alkaStatus = alka < 80 || alka > 120 ? 'Unsafe' : 'Safe'; const cyaStatus = cya < 30 || cya > 50 ? 'Unsafe' : 'Safe'; const cahdStatus = cahd < 200 || cahd > 400 ? 'Unsafe' : 'Safe'; const ironStatus = iron > 0.3 ? 'Unsafe' : 'Safe'; const cuStatus = cu > 1.3 ? 'Unsafe' : 'Safe'; const tdsStatus = tds > 1000 ? 'Unsafe' : 'Safe'; const bromStatus = brom < 2 || brom > 4 ? 'Unsafe' : 'Safe'; const phosStatus = phos > 100 ? 'Unsafe' : 'Safe'; const saltStatus = salt > 3600 ? 'Unsafe' : 'Safe'; document.getElementById('statusTemp').textContent = tempStatus; document.getElementById('statusFcl').textContent = fclStatus; document.getElementById('statusTcl').textContent = tclStatus; document.getElementById('statusAlka').textContent = alkaStatus; document.getElementById('statusCya').textContent = cyaStatus; document.getElementById('statusCahd').textContent = cahdStatus; document.getElementById('statusIron').textContent = ironStatus; document.getElementById('statusCu').textContent = cuStatus; document.getElementById('statusTds').textContent = tdsStatus; document.getElementById('statusBrom').textContent = bromStatus; document.getElementById('statusPhos').textContent = phosStatus; document.getElementById('statusSalt').textContent = saltStatus; document.getElementById('statusTemp').style.color = tempStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusFcl').style.color = fclStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusTcl').style.color = tclStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusAlka').style.color = alkaStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusCya').style.color = cyaStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusCahd').style.color = cahdStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusIron').style.color = ironStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusCu').style.color = cuStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusTds').style.color = tdsStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusBrom').style.color = bromStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusPhos').style.color = phosStatus === 'Safe' ? 'green' : 'red'; document.getElementById('statusSalt').style.color = saltStatus === 'Safe' ? 'green' : 'red'; // Storing results in local storage const result = { temp, fcl, tcl, alka, cya, cahd, iron, cu, tds, brom, phos, salt, tempStatus, fclStatus, tclStatus, alkaStatus, cyaStatus, cahdStatus, ironStatus, cuStatus, tdsStatus, bromStatus, phosStatus, saltStatus, date: new Date().toLocaleString() }; let results = JSON.parse(localStorage.getItem('waterTestResults')) || []; results.push(result); localStorage.setItem('waterTestResults', JSON.stringify(results)); alert('Results stored successfully.'); }); // Generating PDF report document.getElementById('generatePdf').addEventListener('click', function() { const results = JSON.parse(localStorage.getItem('waterTestResults')) || []; if (results.length === 0) { alert('No results to generate a report.'); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(18); doc.text('Water Testing Report', 14, 22); results.forEach((result, index) => { const startY = 30 + (index * 50); // Adjust the vertical spacing as needed doc.setFontSize(12); doc.text(`Test ${index + 1}`, 14, startY); doc.text(`Date: ${result.date}`, 14, startY + 6); doc.text(`Temperature (°C): ${result.temp} (${result.tempStatus})`, 14, startY + 12); doc.text(`Free Chlorine (mg/L): ${result.fcl} (${result.fclStatus})`, 14, startY + 18); doc.text(`Total Chlorine (mg/L): ${result.tcl} (${result.tclStatus})`, 14, startY + 24); doc.text(`Alkalinity (mg/L): ${result.alka} (${result.alkaStatus})`, 14, startY + 30); doc.text(`Cyanuric Acid (mg/L): ${result.cya} (${result.cyaStatus})`, 14, startY + 36); doc.text(`Calcium Hardness (mg/L): ${result.cahd} (${result.cahdStatus})`, 14, startY + 42); doc.text(`Iron (mg/L): ${result.iron} (${result.ironStatus})`, 14, startY + 48); doc.text(`Copper (mg/L): ${result.cu} (${result.cuStatus})`, 14, startY + 54); doc.text(`TDS (mg/L): ${result.tds} (${result.tdsStatus})`, 14, startY + 60); doc.text(`Bromine (mg/L): ${result.brom} (${result.bromStatus})`, 14, startY + 66); doc.text(`Phosphates (mg/L): ${result.phos} (${result.phosStatus})`, 14, startY + 72); doc.text(`Salt (mg/L): ${result.salt} (${result.saltStatus})`, 14, startY + 78); }); doc.autoPrint(); // Add this line to open the print dialog doc.output('dataurlnewwindow'); // Open the PDF in a new window }); });