Web Task – Athletics Carnival

Leave a Comment / CS - Challenges - Level 4 - 26 / By

Athletics Carnival

Create a Create a html file and add the following code

HTML / CSS / JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Year 10 Athletics Carnival Tracker</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background: #f0f2f5; display: flex; gap: 20px; flex-wrap: wrap; }
        .card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); flex: 1; min-width: 320px; border-top: 5px solid #3498db; }
        h2 { margin-top: 0; color: #2c3e50; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        
        .input-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 8px; }
        input, select { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
        button { padding: 10px; background: #3498db; color: white; border: none; cursor: pointer; border-radius: 6px; font-weight: bold; transition: 0.2s; }
        button:hover { background: darkblue; }
        button.delete { background: red; padding: 4px 8px; font-size: 0.75em; }
        
        table { width: 100%; border-collapse: collapse; margin-top: 10px; background: white; }
        th, td { border: 1px solid #eee; padding: 12px 8px; text-align: left; }
        th { background: #f8f9fa; color: #666; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }

        /* House Identity Colors */
        .house-oconnor { color: orange; font-weight: bold; } /* Yellow */
        .house-murdoch { color: blue; font-weight: bold; } /* Blue */
        .house-hackett { color: green; font-weight: bold; } /* Green */
        .house-forrest { color: red; font-weight: bold; } /* Red */
        
        .result-val { font-family: 'Courier New', Courier, monospace; font-weight: bold; color: #2c3e50; }
    </style>
</head>
<body>


<!-- Athletes Add / Delete  -->
<div class="card">
    <h2>Athletes (Year 10)</h2>
    <div class="input-group">
        <input type="text" id="athName" placeholder="New Athlete Name">
        <select id="athHouse">
            <option value="O'Connor">O'Connor</option>
            <option value="Murdoch">Murdoch</option>
            <option value="Hackett">Hackett</option>
            <option value="Forrest">Forrest</option>
        </select>
        <button onclick="addAthlete()">Add Athlete</button>
    </div>
    <table>
        <thead><tr><th>Name</th><th>House</th><th>Action</th></tr></thead>
        <tbody id="athBody"></tbody>
    </table>
</div>

<!-- Events Add / Delete  -->
<div class="card">
    <h2>Events (Year 10)</h2>
    <div class="input-group">
        <input type="text" id="evtName" placeholder="New Event Name">
        <button onclick="addEvent()">Add Event</button>
    </div>
    <table>
        <thead><tr><th>Event</th><th>Action</th></tr></thead>
        <tbody id="evtBody"></tbody>
    </table>
</div>

<!-- Results Add / Delete  -->
<div class="card" style="min-width: 450px;">
    <h2>Results Entry</h2>
    <div class="input-group">
        <label>Event:</label>
        <select id="resEvent"></select>
        <label>Athlete:</label>
        <select id="resAthlete"></select>
        <input type="text" id="resTime" placeholder="Result (e.g. 12.5s or 110dB)">
        <button onclick="addResult()">Record Result</button>
    </div>
    <table>
        <thead><tr><th>Event</th><th>Athlete</th><th>House</th><th>Result</th><th>Action</th></tr></thead>
        <tbody id="resBody"></tbody>
    </table>
</div>

<script>
    // --- PRE-LOADED DATA ---
    let athletes = [
        { id: 1, name: "Ebi", year: "10", house: "Murdoch" },
        { id: 2, name: "Jack", year: "10", house: "Forrest" },
        { id: 3, name: "Oscar", year: "10", house: "Hackett" },
        { id: 4, name: "Logan", year: "10", house: "O'Connor" },
        { id: 5, name: "Oliver", year: "10", house: "Hackett" },
        { id: 6, name: "Ishaan", year: "10", house: "Murdoch" },
        { id: 7, name: "Pranith", year: "10", house: "Forrest" },
        { id: 8, name: "Isaac", year: "10", house: "O'Connor" }
    ];

    let events = [
        { id: 101, name: "100m", year: "10" },
        { id: 102, name: "200m", year: "10" },
        { id: 103, name: "400m", year: "10" },
        { id: 104, name: "Shot Put", year: "10" },
        { id: 105, name: "High Jump", year: "10" },
        { id: 106, name: "Long Jump", year: "10" },
        { id: 107, name: "Loudest Scream", year: "10" }
    ];

    let results = [];

    // --- LOGIC ---

    function getHouseClass(houseName) {
        const classes = {
            "O'Connor": "house-oconnor",
            "Murdoch": "house-murdoch",
            "Hackett": "house-hackett",
            "Forrest": "house-forrest"
        };
        return classes[houseName] || "";
    }

    function addAthlete() {
        const name = document.getElementById('athName').value;
        const house = document.getElementById('athHouse').value;
        if(name) {
            athletes.push({ id: Date.now(), name: name, year: "10", house: house });
            document.getElementById('athName').value = '';
            renderAll();
        }
    }

    function addEvent() {
        const name = document.getElementById('evtName').value;
        if(name) {
            events.push({ id: Date.now(), name: name, year: "10" });
            document.getElementById('evtName').value = '';
            renderAll();
        }
    }

    function addResult() {
        const eventId = document.getElementById('resEvent').value;
        const athleteId = document.getElementById('resAthlete').value;
        const time = document.getElementById('resTime').value;
        if(eventId && athleteId && time) {
            results.push({ id: Date.now(), eventId, athleteId, time });
            document.getElementById('resTime').value = '';
            renderAll();
        }
    }

    function deleteItem(type, id) {
        if(type === 'athletes') athletes = athletes.filter(a => a.id != id);
        if(type === 'events') events = events.filter(e => e.id != id);
        if(type === 'results') results = results.filter(r => r.id != id);
        renderAll();
    }

    function renderAll() {
        // Render Athletes Table
        document.getElementById('athBody').innerHTML = athletes.map(a => `
            <tr>
                <td>${a.name}</td>
                <td class="${getHouseClass(a.house)}">${a.house}</td>
                <td><button class="delete" onclick="deleteItem('athletes', ${a.id})">Delete</button></td>
            </tr>`).join('');

        // Render Events Table
        document.getElementById('evtBody').innerHTML = events.map(e => `
            <tr>
                <td>${e.name}</td>
                <td><button class="delete" onclick="deleteItem('events', ${e.id})">Delete</button></td>
            </tr>`).join('');

        // Render Results Table
        document.getElementById('resBody').innerHTML = results.map(r => {
            const athlete = athletes.find(a => a.id == r.athleteId);
            const event = events.find(e => e.id == r.eventId);
            return `<tr>
                <td>${event ? event.name : 'Unknown'}</td>
                <td>${athlete ? athlete.name : 'Deleted'}</td>
                <td class="${athlete ? getHouseClass(athlete.house) : ''}">${athlete ? athlete.house : '-'}</td>
                <td class="result-val">${r.time}</td>
                <td><button class="delete" onclick="deleteItem('results', ${r.id})">Delete</button></td>
            </tr>`;
        }).reverse().join(''); // Reverse so newest results are at the top

        // Update Dropdowns
        document.getElementById('resEvent').innerHTML = events.map(e => 
            `<option value="${e.id}">${e.name}</option>`).join('');
        document.getElementById('resAthlete').innerHTML = athletes.map(a => 
            `<option value="${a.id}">${a.name} (${a.house})</option>`).join('');
    }

    // Run on startup
    renderAll();
</script>
</body>
</html>

Understanding Web Code

Download the following files:

studentDownload
WebCoding_MASTERDownload

Load the student file into your broswer.

Use that page to load the WebCoding_Master file

For each question provide a code sample from the html above.

Answer all questions

Download and Hand in Work

Submit the downloaded file on Connect

Modifications

  1. Change the Page Title to Athletics Carnival Tracker
  2. Change the Heading to Athletes Add / Delete
  3. In the Athletes Add/Delete section, change the column header from Name to First Name
  4. Change the background for the whole page to beige
  5. Make the shadow for the ‘cards’ to be darker
  6. Change the Button to remove athletes to say Remove
  7. Change the colour for the House O’Connor to be Orange
  8. Remove Long Jump and Add another Event
  9. Add Three Results for the new event.
  10. In the CSS use hover so that each table row <tr> is highlighted when the mouse moves over it.