ミリオンアプリ: Webアプリ全自動爆速作成

ミリオンアプリ

Webアプリを数十秒でAIが作ってくれます！

どんなアプリを作ってみますか？

以下のコードにある支出の金額の値からと子供１人のグラフを表示し、支出の金額の値から子供２人のグラフを表示するように変更してください。
{% load static %}
<!doctype html>
<html lang="ja">

<!DOCTYPE html>
<html>
<head>
  <title>ライフプランシミュレータ</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h1>ライフプランシミュレータ</h1>
  <form id="inputForm">

<label for="spouse">配偶者の有無:</label>
    <input type="checkbox" id="spouse">
    <label for="spouse">いる</label>
    <div id="spouse-income" style="display: none;">
      <label for="spouse-income">配偶者の年収（万円）:</label>
      <input type="number" id="spouse-income-value">
    </div>
    <br>

<label>毎月の支出:</label>
    <input type="number" id="expenseInput" required><br>

document.getElementById("inputForm").addEventListener("submit", function(event) {
      event.preventDefault();

// 入力値を取得
      var age = parseInt(document.getElementById("ageInput").value);
      var income = parseInt(document.getElementById("incomeInput").value);
      var hasSpouse = document.getElementById("spouse").checked;
      var spouseIncome = hasSpouse ? parseInt(document.getElementById("spouse-income-value").value) : 0;
      var expense = parseInt(document.getElementById("expenseInput").value);

// チャートのデータを作成
      var labels = [];
      for (var i = age; i <= age + 40; i++) {
        labels.push(i);
      }

var data = {
        labels: labels,
        datasets: [{
          label: "年収",
          data: calculateIncome(income, spouseIncome),
          borderColor: "blue",
          fill: false,
          tension: 0.1
        }]
      };

data.datasets.push({
        label: "支出",
        data: calculateExpenses(expense),
        borderColor: "red",
        fill: false,
        tension: 0.1
      });

data.datasets.push({
        label: "子供 (1人)",
        data: [93, 87, 94, 104, 119, 115, 121, 111, 105, 113, 115, 123, 126, 152, 153, 161, 177, 177, 177, 207, 207, 207, 207, 0],
        borderColor: "yellow",
        fill: false,
        tension: 0.1
      });

data.datasets.push({
        label: "子供 (2人)",
        data: [186, 174, 188, 208, 238, 230, 242, 222, 210, 226, 230, 246, 252, 304, 306, 322, 354, 354, 354, 414, 414, 414, 414, 0],
        borderColor: "orange",
        fill: false,
        tension: 0.1
      });

// チャートを描画
      var ctx = document.getElementById("chart").getContext("2d");
      new Chart(ctx, {
        type: "line",
        data: data,
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });

// 配偶者の年収入力欄の有効/無効を切り替え
      document.getElementById("spouse-income-value").disabled = !hasSpouse;

// ジョーク
      console.log("シミュレーションの結果、豪遊することができます！")
    });

function calculateIncome(income, spouseIncome) {
      var incomeData = [];

for (var i = 0; i <= 40; i++) {
        incomeData.push((income + spouseIncome) * Math.pow(1.036, i));
      }

return incomeData;
    }

function calculateExpenses(initialExpense) {
      var expenseData = [];

for (var i = 0; i <= 40; i++) {
        expenseData.push(initialExpense * 12);
      }

return expenseData;
    }
  </script>
</body>
</html>

ミリオンアプリ

おすすめアプリ