HTML i JS - Plan lekcji dostowanie tabelki do dnia tygodnia

pytanie zadane 10 maja 2020 w JavaScript przez Nerez Użytkownik (970 p.)

Cześć, robię swój plan lekcji w HTML'u, ale nie przemyslalem jednej rzeczy, mianowicie tabelke na kazdy dzien tygodnia mam jako osobny index.html, strona startowa tez osobno. Pomyslalem sobie, ze pewnie da sie jakos zrobic, zeby tabelka na stronie glownej po prostu zmieniala sie jak dni tygodnia, bez przekierowywania na osobne indexy, tylko w jednym pliku.Ma ktos plan jak to zrobic?

Kod na dni tygodnia:

               var d = new Date();
                var weekday = new Array(7);
                weekday[0] = "Niedziela";
                weekday[1] = "Poniedziałek";
                weekday[2] = "Wtorek";
                weekday[3] = "Środa";
                weekday[4] = "Czwartek";
                weekday[5] = "Piątek";
                weekday[6] = "Sobota";
    
                var n = weekday[d.getDay()];

1 odpowiedź

odpowiedź 10 maja 2020 przez DawidK Nałogowiec (37,910 p.)

Dosyć przyjemnie coś takiemo można zrobić z uzyciem mustache.js (łatwo zmienić póżniej kod html/css)

Poniżej jest przykład takiego planu:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Plan lekcji</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <select id='plan-select'>
        <option>-----</option>
        <option value='0'>poniedziałek</option>
        <option value='1'>wtorek</option>
        <option value='2'>środa</option>
        <option value='3'>czwartek</option>
        <option value='4'>piatek</option>
    </select>
    <div id='plan'>...</div>

    <script id='template' type='x-tmpl-mustache'>
        <p>{{ name }}</p>
        <ul>
            {{ #schoolSubjects }}
            <li>{{ . }}</li>
            {{ /schoolSubjects }}
        </ul>
    </script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js' integrity='sha256-MPgtcamIpCPKRRm1ppJHkvtNBAuE71xcOM+MmQytXi8=' crossorigin='anonymous'></script>
    <script>
    const planSelect = document.querySelector('#plan-select')

    const schoolPlan = {
        'days': [
            {
                'name' : 'poniedzialek',
                'schoolSubjects' : ['historia','przyroda','w-f','matematyka','polski']
            },
            {
                'name' : 'wtorek',
                'schoolSubjects' : ['angielski','polski','w-f','polski','plastyka','w-f']
            },
            {
                'name' : 'środa',
                'schoolSubjects' : ['historia','matematyka','w-f','muzyka','informatyka','przyroda','religia']
            },
            {
                'name' : 'czwartek',
                'schoolSubjects' : ['polski','angielski','technika','matematyka','w-f','lekcja wychowawcza','przyroda']
            },
            {
                'name' : 'piątek',
                'schoolSubjects' : ['polski','matematyka','przyroda','w-f','religia']
            }
         ]
    }

    render = (dayIndex) => {
        const template = document.querySelector('#template').innerHTML;
        const data = schoolPlan;
        const rendered = Mustache.render(template, data.days[dayIndex]);
        document.querySelector('#plan').innerHTML = rendered;
    }

    planSelect.addEventListener('change', (e) => render(e.target.value))

    </script>

</body>
</html>