日: 2018年8月4日

華氏度と摂氏度の換算

「Fahrenheit 451」のTシャツを買ったんだ。ブラッドベリの「華氏451度」。白。カッコイイ。

で、華氏451度って、摂氏でいうと何度なの？という当然の疑問が。まあ、ググればすぐにわかるんだけど、せっかくなのでそれで終わりにするんじゃなくて、華氏と摂氏の換算をするページを HTML と JavaScript で書いてみた。

　cf. 華氏度↔摂氏度の換算

ソースも載せておく。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Fahrenheit / Celsius converter</title>
    <script type="text/javascript">
      const convert = () => {
        const deg = document.getElementById("degree").value;
        const dest = document.getElementById("answer");
        const elements = document.getElementsByName("temperature");
        let a;
        for (let i = 0; i < elements.length; i++) {
          if (elements[i].checked) {
            a = elements[i].value;
            break;
          }
        }
        if (a === "fahrenheit") {
          dest.innerHTML = f2c(Number(deg));
        } else {
          dest.innerHTML = c2f(Number(deg));
        }
        
      }

      const f2c = (deg) => {
        return (deg - 32) * 5 / 9;
      }

      const c2f = (deg) => {
        return deg * 9 / 5 + 32;
      }

      const clearVals = () => {
        document.getElementById("degree").value = "";
        document.getElementById("answer").innerHTML = "";
      }

      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("convertButton").addEventListener("click", convert, false);
        document.getElementById("clearButton").addEventListener("click", clearVals, false);
      }, false);
    </script>
  </head>
  <body>
    <h1>Fahrenheit / Celsius converter</h1>
    <input type="radio" name="temperature" value="fahrenheit" checked />
      Fahrenheit into Celsius<br />
    <input type="radio" name="temperature" value="celsius" />
      Celsius into Fahrenheit<br />
    <input type="text" id="degree" />
    <button type="button" id="convertButton">convert</button><br />
    <output id="answer"></output><br />
    <button type="button" id="clearButton">clear</button>
  </body>
</html>

で、結局、華氏451度が摂氏何度なのかというと、四捨五入して約233度。