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

# --description--

**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/dNVazZ/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/dNVazZ/</a>.

以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。

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

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

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

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

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

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

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

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

You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.

# --solutions--

```js
// solution required
```
