JavaScript課題：日めくりカレンダー風

日めくりカレンダー風の表示をするサイトを作ってみてください。

仕様

今日の月、日、曜日が日めくりカレンダーっぽく表示される
レイアウトや見た目は全てCSSを使う

イメージ画像では、土曜日の日付が青い文字になっていますが、そこまでしなくても大丈夫です。

解答例をみる

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>himekuri</title>
</head>
<body>
    <div id="wrapper">
        <div id="border"></div>
        <div id="month"></div>
        <div id="date"></div>
        <div id="day"></div>
    </div>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 16pt;
    font-family: Helvetica, sans-serif;
}

#wrapper{   /* 日めくりカレンダー全体 */
    background-color: #eee;
    margin: 1em auto;
    width: 360px;
    box-shadow: 7px 7px 10px #555;
}

#border{    /* 上の枠線部分 */
    background-color: orange;
    width: 100%;
    height: 72px;
}

#month{     /* 月 */
    padding: 0.2em 0.5em 0 0.5em;
    font-size: 40pt;
    text-align: right;
    color: #777;
}

#date{      /* 日 */
    font-size: 152pt;
    font-weight: 900;
    text-align: center;
    color: #333;
}

#day{       /* 曜日 */
    padding: 0 0 0.2em 0;
    font-size: 48pt;
    font-weight: 900;
    text-align: center;
    color: #777;
}

日めくりカレンダー全体は#wrapperとして常に中央表示（margin: 1em auto; の部分）されるようにしています。枠に影（text-shadow）をつけてそれっぽくしました。

main.js

// main.js: 日めくりカレンダーっぽく表示する

window.addEventListener("load", ()=>{
    // 月、日、曜日表示部分
    let month = document.getElementById("month");
    let date = document.getElementById("date");
    let day = document.getElementById("day");
    
    // 今日の月・日・曜日を設定
    let today = new Date();
    const youbi = ["日", "月", "火", "水", "木", "金", "土"];
    const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

    // 表示
    month.textContent = myMonth + "月";
    date.textContent = myDate;
    day.textContent = myDay + "曜";
});

曜日を表す文字列は配列定数とし、Dateオブジェクトの getDate()メソッドで得られる値（0～6）と配列添え字が対応するようにしました。（youbi[today.getDay()] の部分）

複数の変数や定数に代入する分割代入が最新のESMA Scriptにはあります。

const [a, b, c] = [1, 2, 3];

今回はこれを使って月、日、曜日をそれぞれ myMonth, myDate, myDay に代入しています。

const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

実際のイメージをみる

解答例をみる（土日を色分け表示）

次のように土曜日を青、日曜日を赤で日付表示するには、曜日に応じてstyle属性のcolorを変更すればOKです。

index.html と style.css

前述の解答例と同じ

main.js

// main.js: 日めくりカレンダーっぽく表示する

window.addEventListener("load", ()=>{
    // 月、日、曜日表示部分
    let month = document.getElementById("month");
    let date = document.getElementById("date");
    let day = document.getElementById("day");
    
    // 今日の月・日・曜日を設定
    let today = new Date();
    const youbi = ["日", "月", "火", "水", "木", "金", "土"];
    const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];

    // 表示
    month.textContent = myMonth + "月";

    // 土曜と日曜は日付の文字色変更
    if(myDay === "日") date.style.color = "red";
    else if(myDay === "土") date.style.color = "blue";
    
    date.textContent = myDate;
    day.textContent = myDay + "曜";
});

実際のイメージをみる（今日が土日でないと分かりません！）