diff --git a/src/pages/js/010-what-program-do.mdx b/src/pages/js/010-what-program-do.mdx
index 02bdc7b..f38940c 100644
--- a/src/pages/js/010-what-program-do.mdx
+++ b/src/pages/js/010-what-program-do.mdx
@@ -196,6 +196,51 @@
 余談ですが、`も`、`つ`、`に`と、それぞれの文字を`もつに`と1つにまとめるような書き方を採用しています。  
 これは文字を1列に並べていることから、**文字列**と呼ばれています。
 
+#### 文字列の結合
+
+文字列は`+`演算子を使って結合することができます。
+
+```js
+const firstName = "太郎";
+const lastName = "山田";
+
+const fullName = lastName + firstName;
+console.log(fullName); // => 山田太郎
+
+// 文字列と文字列の間にスペースを入れることもできる
+const greeting = "こんにちは、" + fullName + "さん";
+console.log(greeting); // => こんにちは、山田太郎さん
+```
+
+数字と文字列を`+`で繋ぐと、数字が文字列に変換されて結合されます。
+
+```js
+const age = 20;
+const message = "年齢は" + age + "歳です";
+console.log(message); // => 年齢は20歳です
+```
+
+#### テンプレート文字列
+
+文字列の結合は`+`でもできますが、バッククォート(`` ` ``)を使った**テンプレート文字列**を使うと、より読みやすく書くことができます。
+
+```js
+const name = "もつに";
+const age = 18;
+
+// +を使った書き方
+const message1 = "私の名前は" + name + "で、年齢は" + age + "歳です";
+
+// テンプレート文字列を使った書き方
+const message2 = `私の名前は${name}で、年齢は${age}歳です`;
+
+console.log(message1); // => 私の名前はもつにで、年齢は18歳です
+console.log(message2); // => 私の名前はもつにで、年齢は18歳です
+```
+
+`${}`の中に変数名や式を書くことで、その値が文字列の中に埋め込まれます。  
+複数の値を埋め込む場合は、テンプレート文字列を使うと格段に読みやすくなります。
+
 ### 構造 (Object型)
 
 なにかを管理しようとしたときに、人の目にはある程度まとまりがあったほうが便利です。  
diff --git a/src/pages/js/070-get-value-from-html.mdx b/src/pages/js/070-get-value-from-html.mdx
new file mode 100644
index 0000000..f1f57f3
--- /dev/null
+++ b/src/pages/js/070-get-value-from-html.mdx
@@ -0,0 +1,175 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
+
+export const title = "HTMLから値を読み込む";
+
+# {title}
+
+## TOC
+
+これまでは、ボタンをクリックしたときに決まった動作をするプログラムを作ってきました。  
+しかし実際のWebページでは、**ユーザーが入力した値**を使って処理を行うことが多いです。
+
+ここでは、HTMLの`<input>`タグなどから値を取得する方法を学びます。
+
+## input要素から値を取得する
+
+まずは、テキストボックスに入力された文字を取得してみましょう。
+
+```html file=src/sample/js/input-basic.html
+src/sample/js/input-basic.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/input-basic.html" />
+
+<br />
+
+テキストボックスに何か入力してボタンを押すと、入力した内容がそのまま表示されます。
+
+重要なのは以下の部分です。
+
+```html file=src/sample/js/input-basic.html {9}
+src/sample/js/input-basic.html
+内容を取得できませんでした
+```
+
+`input`要素の`value`プロパティを使うことで、**ユーザーが入力した値**を取得できます。
+
+### input要素のtype属性
+
+`<input>`タグには、`type`属性を指定することで様々な種類の入力欄を作ることができます。
+
+```html
+<!-- テキスト入力 -->
+<input type="text" id="name">
+
+<!-- 数値入力 -->
+<input type="number" id="age">
+
+<!-- メールアドレス入力 -->
+<input type="email" id="email">
+
+<!-- パスワード入力 (入力内容が隠される) -->
+<input type="password" id="password">
+
+<!-- 日付入力 -->
+<input type="date" id="birthday">
+```
+
+どのタイプでも、基本的には`value`プロパティで値を取得できます。
+
+## 数値として扱う
+
+`type="number"`を指定していても、JavaScriptで取得した値は**文字列**として扱われます。  
+計算に使いたい場合は、`Number()`を使って数値に変換する必要があります。
+
+```html file=src/sample/js/input-number.html
+src/sample/js/input-number.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/input-number.html" />
+
+<br />
+
+重要なのは以下の部分です。
+
+```html file=src/sample/js/input-number.html {14-15}
+src/sample/js/input-number.html
+内容を取得できませんでした
+```
+
+`Number()`で囲むことで、文字列を数値に変換しています。  
+これをしないと、`"10" + "20"` が `"1020"` という文字列になってしまいます。
+
+## チェックボックスの値を取得する
+
+チェックボックスの場合は、`value`ではなく`checked`プロパティを使います。  
+これは`true`(チェックされている)または`false`(チェックされていない)のBoolean型の値です。
+
+```html file=src/sample/js/input-checkbox.html
+src/sample/js/input-checkbox.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/input-checkbox.html" />
+
+<br />
+
+```html file=src/sample/js/input-checkbox.html {9-15}
+src/sample/js/input-checkbox.html
+内容を取得できませんでした
+```
+
+`checkbox.checked`が`true`ならチェックされている、`false`ならチェックされていないという意味です。
+
+## 属性から値を取得する
+
+HTML要素には、`id`、`class`、`data-*`などの様々な属性があります。  
+これらの値を取得するには、`getAttribute()`メソッドを使います。
+
+```html file=src/sample/js/get-attribute.html
+src/sample/js/get-attribute.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/get-attribute.html" />
+
+<br />
+
+```html file=src/sample/js/get-attribute.html {11-13}
+src/sample/js/get-attribute.html
+内容を取得できませんでした
+```
+
+`getAttribute("属性名")`で、指定した属性の値を取得できます。
+
+`data-*`属性は、HTMLに独自のデータを持たせたいときに便利です。  
+例えば、商品の価格や商品IDなどを埋め込んでおき、JavaScriptから取得して使うことができます。
+
+### dataset を使った取得方法
+
+`data-*`属性は、`dataset`プロパティを使って取得することもできます。
+
+```js
+const button = document.querySelector("#myButton");
+
+// getAttribute を使う方法
+const userId1 = button.getAttribute("data-user-id");
+
+// dataset を使う方法 (より簡潔)
+const userId2 = button.dataset.userId;  // data-user-id → userId
+```
+
+`dataset`を使う場合、属性名の`data-`部分は省略し、ハイフンの後ろは大文字にします(キャメルケース)。
+
+## 複数の入力値を組み合わせる
+
+実際のWebページでは、複数の入力値を組み合わせて処理することが多いです。
+
+```html file=src/sample/js/input-multiple.html
+src/sample/js/input-multiple.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/input-multiple.html" />
+
+<br />
+
+このように、複数の`<input>`から値を取得して、それらを組み合わせて処理することができます。
+
+## まとめ
+
+HTMLから値を取得する方法を学びました。
+
+1. `<input>`の値は`value`プロパティで取得する
+2. 数値として扱いたい場合は`Number()`で変換する
+3. チェックボックスは`checked`プロパティで取得する
+4. 属性の値は`getAttribute()`または`dataset`で取得する
+
+これらを使うことで、ユーザーの入力に応じた動的なWebページを作ることができます。
diff --git a/src/pages/js/090-work.mdx b/src/pages/js/090-work.mdx
index f48d60d..c7d5c78 100644
--- a/src/pages/js/090-work.mdx
+++ b/src/pages/js/090-work.mdx
@@ -9,5 +9,151 @@
 
 # {title}
 
+このワークは、以下の内容を含みます。
+
+- [プログラミングで扱うもの](./010-what-program-do)
+- [if文で条件分岐する](./020-if)
+- [まとめて処理する (配列)](./030-array)
+- [ボタンをクリックしたら処理する](./050-js-with-html)
+- [JavaScriptでHTMLを操作する](./060-edit-html-from-js)
+- [HTMLから値を読み込む](./070-get-value-from-html)
+
+これまで学んだ知識を使って、実際にJavaScriptを書いてみましょう。
+
 ## TOC
 
+## 演習1: 年齢判定プログラムを作ろう
+
+`src/playground/js/`フォルダに`age-checker.html`を作成して、年齢によってメッセージを表示するプログラムを作成してください。
+
+### 要件
+
+- `<input type="number">`を使って年齢を入力できるようにする
+- ボタンをクリックしたら、入力された年齢を判定する処理を実行する
+- 20歳以上なら「成人です」、20歳未満なら「未成年です」と表示する
+- `if`文を使って条件分岐する
+- 入力された値は`Number()`で数値に変換する
+- 結果は`textContent`を使ってHTML要素に表示する
+
+<details>
+<summary>ヒント</summary>
+
+```js
+const ageInput = document.querySelector("#age");
+const age = Number(ageInput.value);
+
+if (age >= 20) {
+  // 成人の場合の処理
+} else {
+  // 未成年の場合の処理
+}
+```
+
+`input`要素から`value`で値を取得し、`Number()`で数値に変換してから判定しましょう。
+
+</details>
+
+### 完成例
+
+<RenderFile path="src/sample/js/work/age-checker.html" />
+
+---
+
+## 演習2: 商品の合計金額を計算しよう
+
+`src/playground/js/`フォルダに`price-calculator.html`を作成して、複数の商品の合計金額を計算するプログラムを作成してください。
+
+### 要件
+
+- 以下の商品リストを配列として定義する
+  - りんご: 120円
+  - バナナ: 80円
+  - みかん: 100円
+- ボタンをクリックしたら合計金額を計算する
+- `for`文または`forEach`を使って配列を処理する
+- 結果をHTML要素に表示する
+
+<details>
+<summary>ヒント</summary>
+
+```js
+const prices = [120, 80, 100];
+
+let total = 0;
+for (const price of prices) {
+  total = total + price;
+}
+```
+
+合計金額を計算したら、`textContent`で表示しましょう。
+
+</details>
+
+### 完成例
+
+<RenderFile path="src/sample/js/work/price-calculator.html" />
+
+---
+
+## 演習3: カウンターアプリを作ろう
+
+`src/playground/js/`フォルダに`counter.html`を作成して、数字を増減できるカウンターアプリを作成してください。
+
+### 要件
+
+- 「+1」ボタンと「-1」ボタンの2つを作る
+- 現在の数字を表示する要素を作る
+- 「+1」ボタンをクリックしたら数字が1増える
+- 「-1」ボタンをクリックしたら数字が1減る
+- ボタンをクリックするたびに、表示が更新される
+
+<details>
+<summary>ヒント</summary>
+
+```js
+let count = 0;
+
+button.addEventListener("click", () => {
+  count = count + 1;
+  // 表示を更新する
+});
+```
+
+変数`count`で現在の値を管理し、ボタンをクリックするたびに更新しましょう。
+
+</details>
+
+### 完成例
+
+<RenderFile path="src/sample/js/work/counter.html" />
+
+---
+
+## 演習4: テキストの色を変えるアプリを作ろう
+
+`src/playground/js/`フォルダに`color-changer.html`を作成して、ボタンをクリックするとテキストの色が変わるプログラムを作成してください。
+
+### 要件
+
+- 「赤」「青」「緑」の3つのボタンを作る
+- テキストを表示する要素を作る
+- 各ボタンをクリックしたら、テキストの色がそれぞれの色に変わる
+- `style.color`またはclassListを使って色を変更する
+
+<details>
+<summary>ヒント</summary>
+
+```js
+redButton.addEventListener("click", () => {
+  text.style.color = "red";
+});
+```
+
+複数のボタンにそれぞれイベントリスナーを設定しましょう。
+
+</details>
+
+### 完成例
+
+<RenderFile path="src/sample/js/work/color-changer.html" />
+
diff --git a/src/sample/js/get-attribute.html b/src/sample/js/get-attribute.html
new file mode 100644
index 0000000..7846145
--- /dev/null
+++ b/src/sample/js/get-attribute.html
@@ -0,0 +1,26 @@
+<h1>属性から値を取得する</h1>
+<button 
+  id="myButton" 
+  data-user-id="12345" 
+  data-user-name="もつに"
+  data-role="admin">
+  ユーザー情報を表示
+</button>
+<div id="result"></div>
+
+<script>
+  const button = document.querySelector("#myButton");
+  const result = document.querySelector("#result");
+
+  button.addEventListener("click", () => {
+    const userId = button.getAttribute("data-user-id");
+    const userName = button.getAttribute("data-user-name");
+    const role = button.getAttribute("data-role");
+
+    result.innerHTML = `
+      <div>ユーザーID: ${userId}</div>
+      <div>ユーザー名: ${userName}</div>
+      <div>権限: ${role}</div>
+    `;
+  });
+</script>
diff --git a/src/sample/js/input-basic.html b/src/sample/js/input-basic.html
new file mode 100644
index 0000000..b113175
--- /dev/null
+++ b/src/sample/js/input-basic.html
@@ -0,0 +1,15 @@
+<h1>入力された値を取得する</h1>
+<input type="text" id="nameInput" placeholder="名前を入力してください">
+<button id="submitButton">送信</button>
+<div id="result"></div>
+
+<script>
+  const nameInput = document.querySelector("#nameInput");
+  const submitButton = document.querySelector("#submitButton");
+  const result = document.querySelector("#result");
+
+  submitButton.addEventListener("click", () => {
+    const name = nameInput.value;
+    result.textContent = `こんにちは、${name}さん！`;
+  });
+</script>
diff --git a/src/sample/js/input-checkbox.html b/src/sample/js/input-checkbox.html
new file mode 100644
index 0000000..0cb7a71
--- /dev/null
+++ b/src/sample/js/input-checkbox.html
@@ -0,0 +1,22 @@
+<h1>チェックボックスの値を取得</h1>
+<label>
+  <input type="checkbox" id="agreeCheckbox">
+  利用規約に同意する
+</label>
+<br>
+<button id="submitButton">確認する</button>
+<div id="result"></div>
+
+<script>
+  const checkbox = document.querySelector("#agreeCheckbox");
+  const submitButton = document.querySelector("#submitButton");
+  const result = document.querySelector("#result");
+
+  submitButton.addEventListener("click", () => {
+    if (checkbox.checked) {
+      result.textContent = "✓ 利用規約に同意されました";
+    } else {
+      result.textContent = "✗ 利用規約への同意が必要です";
+    }
+  });
+</script>
diff --git a/src/sample/js/input-multiple.html b/src/sample/js/input-multiple.html
new file mode 100644
index 0000000..2fb04fa
--- /dev/null
+++ b/src/sample/js/input-multiple.html
@@ -0,0 +1,53 @@
+<h1>ユーザー登録フォーム</h1>
+
+<div>
+  <label for="name">名前:</label>
+  <input type="text" id="name" placeholder="山田太郎">
+</div>
+
+<div>
+  <label for="age">年齢:</label>
+  <input type="number" id="age" min="0" max="150" value="20">
+</div>
+
+<div>
+  <label for="email">メールアドレス:</label>
+  <input type="email" id="email" placeholder="example@example.com">
+</div>
+
+<div>
+  <label>
+    <input type="checkbox" id="newsletter">
+    メールマガジンを受け取る
+  </label>
+</div>
+
+<button id="registerButton">登録する</button>
+
+<div id="result"></div>
+
+<script>
+  const nameInput = document.querySelector("#name");
+  const ageInput = document.querySelector("#age");
+  const emailInput = document.querySelector("#email");
+  const newsletterCheckbox = document.querySelector("#newsletter");
+  const registerButton = document.querySelector("#registerButton");
+  const result = document.querySelector("#result");
+
+  registerButton.addEventListener("click", () => {
+    const name = nameInput.value;
+    const age = Number(ageInput.value);
+    const email = emailInput.value;
+    const newsletter = newsletterCheckbox.checked;
+
+    const newsletterText = newsletter ? "受け取る" : "受け取らない";
+
+    result.innerHTML = `
+      <h3>登録内容の確認</h3>
+      <div>名前: ${name}</div>
+      <div>年齢: ${age}歳</div>
+      <div>メールアドレス: ${email}</div>
+      <div>メールマガジン: ${newsletterText}</div>
+    `;
+  });
+</script>
diff --git a/src/sample/js/input-number.html b/src/sample/js/input-number.html
new file mode 100644
index 0000000..bedd26e
--- /dev/null
+++ b/src/sample/js/input-number.html
@@ -0,0 +1,26 @@
+<h1>数値を計算する</h1>
+<div>
+  <label for="num1">数値1:</label>
+  <input type="number" id="num1" value="10">
+</div>
+<div>
+  <label for="num2">数値2:</label>
+  <input type="number" id="num2" value="20">
+</div>
+<button id="calculateButton">計算する</button>
+<div id="result"></div>
+
+<script>
+  const num1Input = document.querySelector("#num1");
+  const num2Input = document.querySelector("#num2");
+  const calculateButton = document.querySelector("#calculateButton");
+  const result = document.querySelector("#result");
+
+  calculateButton.addEventListener("click", () => {
+    const num1 = Number(num1Input.value);
+    const num2 = Number(num2Input.value);
+    const sum = num1 + num2;
+    
+    result.textContent = `${num1} + ${num2} = ${sum}`;
+  });
+</script>
diff --git a/src/sample/js/work/age-checker.html b/src/sample/js/work/age-checker.html
new file mode 100644
index 0000000..0621536
--- /dev/null
+++ b/src/sample/js/work/age-checker.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>年齢判定プログラム</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 20px;
+    }
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+    .form-group {
+      margin-bottom: 15px;
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: bold;
+    }
+    input {
+      width: 100%;
+      padding: 8px;
+      font-size: 16px;
+      border: 2px solid #ddd;
+      border-radius: 4px;
+    }
+    button {
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      margin-top: 10px;
+    }
+    button:hover {
+      background-color: #45a049;
+    }
+    #result {
+      margin-top: 20px;
+      padding: 15px;
+      border-radius: 4px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .adult {
+      background-color: #d4edda;
+      color: #155724;
+    }
+    .minor {
+      background-color: #fff3cd;
+      color: #856404;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>年齢判定プログラム</h1>
+    <div class="form-group">
+      <label for="age">年齢を入力してください:</label>
+      <input type="number" id="age" min="0" max="150" value="18">
+    </div>
+    <button id="checkButton">判定する</button>
+    <div id="result"></div>
+  </div>
+
+  <script>
+    const ageInput = document.querySelector("#age");
+    const checkButton = document.querySelector("#checkButton");
+    const result = document.querySelector("#result");
+
+    checkButton.addEventListener("click", () => {
+      const age = Number(ageInput.value);
+
+      if (age >= 20) {
+        result.textContent = "成人です";
+        result.className = "adult";
+      } else {
+        result.textContent = "未成年です";
+        result.className = "minor";
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/src/sample/js/work/color-changer.html b/src/sample/js/work/color-changer.html
new file mode 100644
index 0000000..8ff8345
--- /dev/null
+++ b/src/sample/js/work/color-changer.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>テキストの色を変えるアプリ</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 20px;
+    }
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+      text-align: center;
+    }
+    #text {
+      font-size: 48px;
+      font-weight: bold;
+      margin: 30px 0;
+      padding: 20px;
+      border: 2px solid #ddd;
+      border-radius: 4px;
+    }
+    .buttons {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+    }
+    button {
+      padding: 15px 30px;
+      font-size: 18px;
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      color: white;
+      font-weight: bold;
+    }
+    #redButton {
+      background-color: #f44336;
+    }
+    #redButton:hover {
+      background-color: #da190b;
+    }
+    #blueButton {
+      background-color: #2196F3;
+    }
+    #blueButton:hover {
+      background-color: #0b7dda;
+    }
+    #greenButton {
+      background-color: #4CAF50;
+    }
+    #greenButton:hover {
+      background-color: #45a049;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>テキストの色を変えるアプリ</h1>
+    <div id="text">こんにちは！</div>
+    <div class="buttons">
+      <button id="redButton">赤</button>
+      <button id="blueButton">青</button>
+      <button id="greenButton">緑</button>
+    </div>
+  </div>
+
+  <script>
+    const redButton = document.querySelector("#redButton");
+    const blueButton = document.querySelector("#blueButton");
+    const greenButton = document.querySelector("#greenButton");
+    const text = document.querySelector("#text");
+
+    redButton.addEventListener("click", () => {
+      text.style.color = "red";
+    });
+
+    blueButton.addEventListener("click", () => {
+      text.style.color = "blue";
+    });
+
+    greenButton.addEventListener("click", () => {
+      text.style.color = "green";
+    });
+  </script>
+</body>
+</html>
diff --git a/src/sample/js/work/counter.html b/src/sample/js/work/counter.html
new file mode 100644
index 0000000..334bb15
--- /dev/null
+++ b/src/sample/js/work/counter.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>カウンターアプリ</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 20px;
+    }
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+      text-align: center;
+    }
+    #count {
+      font-size: 72px;
+      font-weight: bold;
+      color: #333;
+      margin: 30px 0;
+    }
+    .buttons {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+    }
+    button {
+      padding: 15px 30px;
+      font-size: 24px;
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      transition: all 0.2s;
+    }
+    #incrementButton {
+      background-color: #4CAF50;
+      color: white;
+    }
+    #incrementButton:hover {
+      background-color: #45a049;
+    }
+    #decrementButton {
+      background-color: #f44336;
+      color: white;
+    }
+    #decrementButton:hover {
+      background-color: #da190b;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>カウンターアプリ</h1>
+    <div id="count">0</div>
+    <div class="buttons">
+      <button id="decrementButton">-1</button>
+      <button id="incrementButton">+1</button>
+    </div>
+  </div>
+
+  <script>
+    const incrementButton = document.querySelector("#incrementButton");
+    const decrementButton = document.querySelector("#decrementButton");
+    const countElement = document.querySelector("#count");
+
+    let count = 0;
+
+    incrementButton.addEventListener("click", () => {
+      count = count + 1;
+      countElement.textContent = count;
+    });
+
+    decrementButton.addEventListener("click", () => {
+      count = count - 1;
+      countElement.textContent = count;
+    });
+  </script>
+</body>
+</html>
diff --git a/src/sample/js/work/price-calculator.html b/src/sample/js/work/price-calculator.html
new file mode 100644
index 0000000..074d74e
--- /dev/null
+++ b/src/sample/js/work/price-calculator.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>商品の合計金額計算</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 20px;
+    }
+    .container {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+    .item-list {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 4px;
+      margin: 15px 0;
+    }
+    .item {
+      padding: 5px 0;
+    }
+    button {
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      background-color: #2196F3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      margin-top: 10px;
+    }
+    button:hover {
+      background-color: #0b7dda;
+    }
+    #result {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #e7f3ff;
+      border-left: 4px solid #2196F3;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>商品の合計金額計算</h1>
+    <div class="item-list">
+      <div class="item">りんご: 120円</div>
+      <div class="item">バナナ: 80円</div>
+      <div class="item">みかん: 100円</div>
+    </div>
+    <button id="calculateButton">合計を計算する</button>
+    <div id="result"></div>
+  </div>
+
+  <script>
+    const calculateButton = document.querySelector("#calculateButton");
+    const result = document.querySelector("#result");
+
+    calculateButton.addEventListener("click", () => {
+      const prices = [120, 80, 100];
+      
+      let total = 0;
+      for (const price of prices) {
+        total = total + price;
+      }
+
+      result.textContent = `合計金額: ${total}円`;
+    });
+  </script>
+</body>
+</html>