PlaygroundでViewのプレビューを表示する

Swift

2022年5月6日

PlaygroundでViewのプレビューを表示する方法です。 PlaygroundPage.current.liveView に表示したいViewを設定することでプレビューを表示できます。

Preview

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BMI</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <h1>BMI計算機</h1>

  <p>身長(cm)</p>
  <input id="hight" type="text">

  <p>体重(kg)</p>
  <input id="weight" type="text">

  <input type="button" value="計算する" onclick="calc();"/>
</body>
</html>

script.js

function calc() {
    const hight = document.getElementById("hight").value;
    console.log(hight);

    const weight = document.getElementById("weight").value;
    console.log(weight);

    const bmi = weight / ((hight / 100) * (hight / 100));
    console.log(bmi);

    const result = 'BMIは' + bmi + 'です';
    alert(result);
}