Kalenteri JavaScriptillä
Tässä osiossa toteutamme kalenterin. Yksinkertaisuuden vuoksi teemme niin, että kalenteri näyttää kuluvan kuukauden. Mutta siten, että sitä voidaan myöhemmin laajentaa niin, että kuukautta ja vuotta voi muuttaa. Tässä on malli siitä, minkä pitäisi saada aikaiseksi:
Tässä on HTML-rakenteet, joita voit käyttää tehtävän ratkaisemisessa:
<div id="parent">
<div id="calendar">
<table>
<thead>
<tr>
<th>ma</th>
<th>ti</th>
<th>ke</th>
<th>to</th>
<th>pe</th>
<th>la</th>
<th>su</th>
</tr>
</thead>
<tbody class="body"></tbody>
</table>
</div>
</div>
#parent {
text-align: center;
}
#calendar {
display: inline-block;
}
#calendar td, #calendar th {
padding: 5px 12px;
border: 1px solid black;
text-align: center;
}
Hae heti kaikki tarvittavat elementit muuttujiin, ja tallenna nykyinen kuukausi ja vuosi:
let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
Kopioi itsellesi esittämäni koodipohjat.