JS API használatának gyakorlása – F1 adatok

Készítsünk weboldalt, ami a https://ergast.com/api/f1/2000.json AP-t használja! Az api egy adott év futamainak adatait jeleníti meg. Egy konkrét futam eredményeit a https://ergast.com/api/f1/2000/1/results.json címen érhetjük el.

Készítsünk egy futamok.html oldalt, ahol csúszka segítségével tudunk évszámot választani 1950-2024 között! A futamok dátumára készítünk egy hivatkozást, ami tartalmazni fogja az évszámot (season) és a kiválsztott futamot (round). Így fog kinézni a link:
<a href=”eredmenyek.html?season=${data.MRData.RaceTable.season}&round=${race.round}” target=”_blank”>

Készítsünk egy eredmenyek.html oldalt, ami egy konkrét futam eredményeit jeleníti meg! Az url-ből ki tudjuk nyerni az évszámot, és a futamot, ennek alapján pedig meg tudjuk hívni a második api-t.

Az ergast.com/api/f1/2000.json felépítése:

futamok.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>F1 futamok</title>    
</head>
<body>
    <h1>F1 futamok</h1>
    
    <!-- Csúszka az évszám kiválasztásához -->
    <label for="seasonSlider">Válassz egy évet: <span id="selectedYear">2024</span></label>
    <input type="range" id="seasonSlider" min="1950" max="2024" value="2024">

    <div id="raceContainer" class="race-list">
        <!-- A futmaok adatai ide kerülnek -->
    </div>

    <script>
        const seasonSlider = document.getElementById("seasonSlider");
        const selectedYearDisplay = document.getElementById("selectedYear");
        const raceContainer = document.getElementById("raceContainer");

        // Frissíti az aktuális évszám kijelzését
        seasonSlider.addEventListener("input", () => {
            selectedYearDisplay.textContent = seasonSlider.value;
        });

        // Az F1 szezon versenyeinek lekérdezése az adott évre
        const fetchF1Races = async (year) => {
            const url = `https://ergast.com/api/f1/${year}.json`;
            
            try {
                const response = await fetch(url);

                if (!response.ok) {
                    throw new Error(`Hiba történt: ${response.status}`);
                }

                const data = await response.json();
                const races = data.MRData.RaceTable.Races;

                // Adatok hozzáadása a HTML-hez
                raceContainer.innerHTML = races.map(race => `
                    <div class="race-item">
                        <strong>${race.round}. ${race.raceName}</strong>
                        <div>
                            <div>${race.Circuit.Location.country}: ${race.Circuit.circuitName}</div>
                            <a href="eredmenyek.html?season=${data.MRData.RaceTable.season}&round=${race.round}" target="_blank">
                                ${race.date}
                            </a>
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                raceContainer.innerHTML = `<p>Hiba történt az adatok lekérdezése során: ${error.message}</p>`;
            }
        };

        // Csúszka értékének változásakor újra lekérdezi az adatokat
        seasonSlider.addEventListener("change", () => {
            const selectedYear = seasonSlider.value;
            fetchF1Races(selectedYear);
        });

        // Alapértelmezett év betöltése (aktuális csúszka értékkel)
        fetchF1Races(seasonSlider.value);
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>F1 futamok</title>

</head>

<body>

<h1>F1 futamok</h1>

<label for="seasonSlider">Válassz egy évet: <span id="selectedYear">2024</span></label>

</div>

const seasonSlider = document.getElementById("seasonSlider");

const selectedYearDisplay = document.getElementById("selectedYear");

const raceContainer = document.getElementById("raceContainer");

// Frissíti az aktuális évszám kijelzését

seasonSlider.addEventListener("input", () => {

selectedYearDisplay.textContent = seasonSlider.value;

});

// Az F1 szezon versenyeinek lekérdezése az adott évre

const fetchF1Races = async (year) => {

const url = `https://ergast.com/api/f1/${year}.json`;

try {

const response = await fetch(url);

if (!response.ok) {

throw new Error(`Hiba történt: ${response.status}`);

}

const data = await response.json();

const races = data.MRData.RaceTable.Races;

// Adatok hozzáadása a HTML-hez

raceContainer.innerHTML = races.map(race => `

<strong>${race.round}. ${race.raceName}</strong>

<div>

<div>${race.Circuit.Location.country}: ${race.Circuit.circuitName}</div>

${race.date}

</a>

</div>

`).join('');

} catch (error) {

raceContainer.innerHTML = `<p>Hiba történt az adatok lekérdezése során: ${error.message}</p>`;

}

};

// Csúszka értékének változásakor újra lekérdezi az adatokat

seasonSlider.addEventListener("change", () => {

const selectedYear = seasonSlider.value;

fetchF1Races(selectedYear);

});

// Alapértelmezett év betöltése (aktuális csúszka értékkel)

fetchF1Races(seasonSlider.value);

</script>

</body>

</html>

Egy konkrét futam eredményei:

eredmenyek.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eredmények</title>   
</head>
<body>
    <h1>Eredmények</h1>
    <div id="resultsContainer" class="results-list">
        <!-- Eredmények -->
    </div>

    <script>
        // URL-ből a paraméterek kiolvasása
        const params = new URLSearchParams(window.location.search);
        const season = params.get("season");
        const round = params.get("round");
        const url = `https://ergast.com/api/f1/${season}/${round}/results.json`;
        const resultsContainer = document.getElementById("resultsContainer");

        const fetchRaceResults = async () => {
            try {
                const response = await fetch(url);

                if (!response.ok) {
                    throw new Error(`Hiba történt: ${response.status}`);
                }

                const data = await response.json();
                const results = data.MRData.RaceTable.Races[0]?.Results;

                if (!results || results.length === 0) {
                    resultsContainer.innerHTML = `<p>Nem találhatóak eredmények ehhez a futamhoz.</p>`;
                    return;
                }

                // Eredmények hozzáadása a HTML-hez
                resultsContainer.innerHTML = results.map(result => `
                    <div class="result-item">
                        <span class="position">Helyezés: ${result.position}</span>
                        <div>Pilóta: ${result.Driver.givenName} ${result.Driver.familyName}</div>
                        <div>Csapat: ${result.Constructor.name} </div>
                        <div>Csapat ország: ${result.Constructor.nationality}</div>
                        <div>Nemzet: ${result.Driver.nationality}</div>
                        <div>Idő: ${result.Time?.time || "N/A"}</div>
                    </div>
                `).join('');
            } catch (error) {
                resultsContainer.innerHTML = `<p>Hiba történt az adatok lekérdezése során: ${error.message}</p>`;
            }
        };

        // Lekérdezés futtatása
        fetchRaceResults();
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Eredmények</title>

</head>

<body>

<h1>Eredmények</h1>

</div>

// URL-ből a paraméterek kiolvasása

const params = new URLSearchParams(window.location.search);

const season = params.get("season");

const round = params.get("round");

const url = `https://ergast.com/api/f1/${season}/${round}/results.json`;

const resultsContainer = document.getElementById("resultsContainer");

const fetchRaceResults = async () => {

try {

const response = await fetch(url);

if (!response.ok) {

throw new Error(`Hiba történt: ${response.status}`);

}

const data = await response.json();

const results = data.MRData.RaceTable.Races[0]?.Results;

if (!results || results.length === 0) {

resultsContainer.innerHTML = `<p>Nem találhatóak eredmények ehhez a futamhoz.</p>`;

return;

}

// Eredmények hozzáadása a HTML-hez

resultsContainer.innerHTML = results.map(result => `

<span class="position">Helyezés: ${result.position}</span>

<div>Pilóta: ${result.Driver.givenName} ${result.Driver.familyName}</div>

<div>Csapat: ${result.Constructor.name} </div>

<div>Csapat ország: ${result.Constructor.nationality}</div>

<div>Nemzet: ${result.Driver.nationality}</div>

<div>Idő: ${result.Time?.time || "N/A"}</div>

</div>

`).join('');

} catch (error) {

resultsContainer.innerHTML = `<p>Hiba történt az adatok lekérdezése során: ${error.message}</p>`;

}

};

// Lekérdezés futtatása

fetchRaceResults();

</script>

</body>

</html>

JS API használatának gyakorlása – F1 adatok

Kategóriák

Friss bejegyzések

React Outlet

React NavLink, UseNavigate