Skip to main content

あなたへのおすすめを表示

目標#

ランダムでおすすめコンテンツを表示しよう！

サンプルコード#

1.HTMLのコードを、Glitchの index.html に追加しよう！#

<div class="recommend">    <p>ボタンを押したらおすすめの音楽が出てくるよ！</p>    <a class="btn animoButtonOverlay" id="recommend_music">Check!!</a>    <div id="recommend_contents">        <p>おすすめは...</p>        <h2 id="recommend_music_txt"></h2>        <img id="recommend_music_img" />    </div></div>

2.CSSのコードを、Glitchの style.css に追加しよう！#

.btn {    display: inline-block;    padding: 10px 15px;    line-height: 20px;    cursor: pointer;    border-radius: 4px;    text-decoration: none;}
.recommend {    text-align: center;}#recommend_contents {    display: none;}
#recommend_contents h2 {    margin-top: 10px;    color: orangered;    font-weight: bold;}
#recommend_contents p {    margin-top: 30px;    color: orangered;    font-weight: bold;}.recommend img {    width: 400px;    height: 300px;}

3.画像のURLをゲットしよう！#

こちらのサイトを参考にして、画像のURLをゲットしよう！

4.JavaScriptのコードを、Glitchの script.js に追加しよう！#


function tellRecommend() {    let fortune_num = Math.floor(Math.random() * 4)
    let resultText, resultImg    // (TRY) もし、fortune_num が 0なら...    if (fortune_num === 0) {        resultText = "Happy Birthday"        resultImg = "./imgs/party.jpg"    } else if (fortune_num === 1) {        resultText = "Make you happy"        resultImg = "./imgs/party2.jpg"    } else if (fortune_num === 2) {        resultText = "Chopstick"        resultImg = "./imgs/chopstick.jpg"    } else {        resultText = "Take a picture"        resultImg = "./imgs/takeapicture.jpg"    }
    document        .getElementById("recommend_music_img")        .setAttribute("src", resultImg)    document.getElementById("recommend_music_txt").textContent = resultText}
let recommend_btn = document.getElementById("recommend_music")recommend_btn.onclick = () => {    tellRecommend()    document.getElementById("recommend_contents").style.display = "block"}

表示したい内容が、画像のみの場合はresultImgのみ、文章だけの場合はresultTextのみ使えばOKs

5. (TRY!) と書いてある箇所を書き換えて、コードを完成させよう！#

チャレンジ#

今回は、ランダムでおすすめを表示しましたが、条件を変えればいろんなことに使うことができます！ 例えば、ボタンを押した時の時間が、午前中だったら〇〇を表示、午後だったら△△を表示、みたいに！

腕試しにやってみましょう！HTML, CSSはすでにあるもので大丈夫。ヒントは、前半の授業でやった「時間の取得」のところです！

ヒント#

  • 時間の取得は、以下のコードでできます。変数 time が、 0以上12未満のとき 〇〇 を表示、 12以上のとき △△ を表示、となるように条件を指定すれば良さそうですね！
let today = new Date()let time = today.getHours()
  • こちらのサイトの 「日付のフォーマットを設定できるメソッド一覧」と書かれた章の表を参考にすると、時間以外も条件式に入れることができます。挑戦してみてください！