---
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
```