🕯️
バカ話ジェネレーター

2023/05/07に公開
MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）

を参考に勉強するように注意が入ったので、ここを教本にしていきます。

その為、抜粋しながら進めたいと思います。
今回はこちらです。
今回もブラウザーの開発者ツールを使用します。

 準備HTMLファイル
テキストページ

 完成完成プログラム

 最初に日本語訳バージョン「result() 関数の作成」を見てみると
ii. weight 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして ' stone' (ストーン) を Math.round() の結果に対して、その後ろに結合します。

iii. temperature 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには ' centigrade' (摂氏～度) という文字を Math.round() の結果に対して、後ろに結合します。
という文章になってます。
ポンドとストーン

ストーンは体重測定にの際に使われる単位らしいですよ。

「1ストーン（stone）＝14ポンド(pound)＝6.35029kg」
華氏と摂氏

華氏は°F（Fahrenheit）、摂氏は℃（centigrade）つまり、温度です。

私たちが普段使っているのは℃の摂氏です。



摂氏温度
華氏温度



約-17.8度
0度

氷点
0度
32度

沸点
100度
212度

さぁ、それを頭にいれた上で進めて行きます。

 完成させるステップステップはこちらを見てください
ポンドからストーンへ変換する公式st(ストーン) =lb(ポンド) * 0.071429
華氏から摂氏へ変換する公式(°F - 32) × 5 ÷ 9 = °C

 私の完成品「'customname'」だとタイポ間違いというエラーが出てしまうので「'custom-name'」に変更しています。
html（一部抜粋）
<body>
<div>
    <label for="custom-name">カスタム名を入力してください:</label>
    <input id="custom-name" type="text" placeholder="">
</div>
<div>
    <label for="us">US</label><input id="us" type="radio" name="us" value="us" checked>
    <label for="uk">UK</label><input id="uk" type="radio" name="jp" value="uk">
</div>
<div>
    <button class="randomize">ランダムなストーリーを生成</button>
</div>
<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
<p class="story"></p>
<script src="main.js"></script>
</body>
main.js
const customName = document.getElementById('custom-name');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

let storyText = '外は華氏 94 度だったので、:insertX: は散歩に出かけました。彼らが :insertY: にたどり着いたとき、彼らはしばらく恐怖で見つめ、それから :insertZ: を見つめました。ボブはすべてを見ましたが、驚きませんでした — :insertX: 体重は 300 ポンドで、暑い日でした。'
let insertX　= ['ゴブリンのウィリー ','ビッグ・ダディ',' サンタクロース'];
let insertY = ['スープキッチン','ディズニーランド','ホワイトハウス'];
let insertZ = ['自然発火','歩道の水たまりに溶けた','ナメクジになって這い去った'];


function randomValueFromArray(array){
    const random = Math.floor(Math.random()*array.length);
    return array[random];
}

randomize.addEventListener('click', result);

function result() {
    let newStory = storyText;
    let xItem = randomValueFromArray(insertX)
    let yItem = randomValueFromArray(insertY)
    let zItem = randomValueFromArray(insertZ)

//replaceAllは全ての一致を置き換える,replaceは最初に一致したもの
    newStory = newStory.replaceAll(':insertX:', xItem);
    newStory = newStory.replaceAll(':insertY:', yItem);
    newStory = newStory.replaceAll(':insertZ:', zItem);

    if(customName.value !== '') {
        const name = customName.value;
        newStory = newStory.replace('Bob',name);
    }

    if (document.getElementById("uk").checked) {
        //st(ストーン) =lb(ポンド) * 0.071429
        const weight = `${Math.round(300 * 0.071429)}ストーン`;
        //(°F - 32) × 5 ÷ 9 = °C
        const temperature = `摂氏 ${Math.round((94 - 32) * 5 / 9)}`;
        newStory = newStory.replaceAll('華氏 94', temperature);
        newStory = newStory.replaceAll('300 ポンド', weight);
    }

    story.textContent = newStory;
    story.style.visibility = 'visible';
}
こっちのコードがいいよー！などあれば教えてくださると幸いです。

 文献MDN (バカ話ジェネレーター)

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator （2023/05/07閲覧）
HTMLファイル (github)

mdn/learning-area「learning-area/javascript/introduction-to-js-1/assessment-start/index.html」

https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/assessment-start/index.html　（2023/05/02閲覧）
テキストページ (github)

mdn/learning-area 「learning-area/javascript/introduction-to-js-1/assessment-start/raw-text.txt」

https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/assessment-start/raw-text.txt (2023/05/02閲覧)
完成プログラム

https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/ (2023/05/07閲覧)
準備

完成

最初に

完成させるステップ

私の完成品

文献

Discussion
