---
id: bd7155d8c242eddfaeb5bd13
title: レシピボックスを作成する
challengeType: 3
forumTopicId: 302354
dashedName: build-a-recipe-box
---

# --description--

**目標:** [https://codepen.io/freeCodeCamp/full/dNVazZ](https://codepen.io/freeCodeCamp/full/dNVazZ/) と同じような機能を持つ、[CodePen.io](https://codepen.io) アプリを構築してください。

以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を実装してください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなたの独自のスタイルにしましょう。

**ユーザーストーリー:** 料理の名前と材料を載せたレシピを作成できます。

**ユーザーストーリー:** すべてのレシピの名前が表示される索引画面を見ることができます。

**ユーザーストーリー:** レシピをクリックすると、その内容を確認できます。

**ユーザーストーリー:** レシピの内容を編集できます。

**ユーザーストーリー:** レシピを削除できます。

**ユーザーストーリー:** 追加する新しいレシピは、すべてブラウザーのローカルストレージに保存されます。 ページを更新しても、これらのレシピはそのまま残ります。

**ヒント:** たとえば `_username_recipes` のようにして、CodePen 上でローカルストレージキーにプレフィックスを付ける必要があります。

完了したら、CodePen のプロジェクトへのリンクを入れて、「このチャレンジを完了しました」ボタンをクリックしてください。

[freeCodeCamp フォーラム](https://forum.freecodecamp.org/c/project-feedback/409)でプロジェクトを共有することにより、フィードバックを得ることができます。

# --solutions--

```js
// solution required
```