https://www.willtheyfit.com/js/calculate.js

1import { updateCanvas } from './main.js';
2
3
4function updateCalculations() {
5    // Create an empty FormData object
6    const formData = new FormData();
7    // select all the inputs
8    document.querySelectorAll('.floatInput').forEach(input => {
9        formData.append(input.id, input.value);
10    });
11
12    fetch('api/calculate_results.php', {
13        method: 'POST',
14        body: formData
15    })
16    .then(response => response.json())
17    .then(data => {
18        // loop over the data received
19        data.forEach(result => {
20            // find the element
21            const el = document.getElementById(result.id)
22
23            // based on what the result is marked to update, perform the correct update
24            if (result.update == 'innerText') {
25                el.innerText = result.value;
26                el.style.color = result.fgColour;
27            }
28            if (result.update == 'href') {
29                el.href = result.value;
30            }
31        });
32    });
33}
34
35
36
37function updateCSS() {
38    // get colours
39    const colour1 = document.getElementById('colour1').value;
40    const colour2 = document.getElementById('colour2').value;
41
42    // update current setup elements to colour1 and new setup elements to colour2
43    document.querySelectorAll('.current-bg').forEach(el => {
44        el.style.backgroundColor = colour1;
45    });
46    document.querySelectorAll('.new-bg').forEach(el => {
47        el.style.backgroundColor = colour2;
48    });
49}
50
51
52
53export function calculateThis() {
54    // update the canvas and calculations
55    updateCSS();
56    updateCanvas();
57    updateCalculations();
58
59    // if on mobile then scroll down to the correct position
60    if (window.matchMedia("(max-width: 768px)").matches) {
61        const element = document.getElementById('resultsTitle');
62        element.scrollIntoView({
63            behavior: 'smooth',
64            block: 'start'
65        });
66    }
67}
68window.calculateThis = calculateThis;
69
70
71
72document.addEventListener('DOMContentLoaded', function () {
73    // update the canvas and calculations
74    updateCanvas();
75    updateCalculations();
76})