Site Builder

Editing: compare-size-rank.php

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Rankings</title>
    <style>
        #phone-rankings {
            max-width: 800px;
            margin: auto;
            text-align: center;
        }
        #phone-rankings select, #phone-rankings button {
            margin: 10px;
        }
        .phone {
            display: flex;
            align-items: center;
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }
        .phone img {
            max-width: 50px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="phone-rankings">
        <h1>Phone Rankings</h1>
        <div>
            <label for="unit-select">Select Unit:</label>
            <select id="unit-select">
                <option value="metric">mm</option>
                <option value="standard">in</option>
            </select>
        </div>
        <div>
            <label for="dimension-select">Select Dimension:</label>
            <select id="dimension-select">
                <option value="length">Length</option>
                <option value="width">Width</option>
                <option value="depth">Thickness</option>
            </select>
        </div>
        <button id="rank-phones">Rank Phones</button>
        <div id="ranking-results"></div>
    </div>

fetch('/cache/size_cache.json')
                    .then(response => response.json())
                    .then(phones => {
                        // Filter out phones with zero or missing values for the selected dimension
                        phones = phones.filter(phone => phone.parsed_dimensions[unit][dimension] > 0);

// Trim numbers to two decimal places
                        phones.forEach(phone => {
                            phone.parsed_dimensions[unit][dimension] = parseFloat(phone.parsed_dimensions[unit][dimension].toFixed(2));
                        });

// Determine the sorting order
                        const sortOrder = (dimension === 'depth') ? 1 : -1;

// Sort phones by the selected dimension and unit
                        phones.sort((a, b) => (a.parsed_dimensions[unit][dimension] - b.parsed_dimensions[unit][dimension]) * sortOrder);

// Assign ranks
                        let rank = 1;
                        let last_value = null;
                        let skipped_ranks = 0;
                        phones.forEach((phone, index) => {
                            const value = phone.parsed_dimensions[unit][dimension];
                            if (value !== last_value) {
                                rank = index + 1 + skipped_ranks;
                                last_value = value;
                            } else {
                                skipped_ranks++;
                            }
                            phone.rank = rank;
                            // Correct the skipped ranks count for future non-tied values
                            if (index > 0 && phones[index - 1].rank === rank) {
                                skipped_ranks++;
                            } else {
                                skipped_ranks = 0;
                            }
                        });

const resultsDiv = document.getElementById('ranking-results');
                        resultsDiv.innerHTML = '';

phones.forEach(phone => {
                            const phoneDiv = document.createElement('div');
                            phoneDiv.classList.add('phone');
                            phoneDiv.innerHTML = `
                                <img src="${phone.thumbnail_url}" alt="${phone.model}">
                                <div>
                                    <h3>${phone.brand} ${phone.model}</h3>
                                    <p>Rank: ${phone.rank}</p>
                                    <p>${dimension.charAt(0).toUpperCase() + dimension.slice(1)}: ${phone.parsed_dimensions[unit][dimension]} ${unit === 'metric' ? 'mm' : 'in'}</p>
                                </div>
                            `;
                            resultsDiv.appendChild(phoneDiv);
                        });
                    })
                    .catch(error => {
                        document.getElementById('ranking-results').innerHTML = '<p>Error fetching rankings.</p>';
                    });
            });
        });
    </script>
</body>
</html>

Site Builder

Editing: compare-size-rank.php

Site Builder