コーディングスキルを磨くための初心者向けJavaScriptプロジェクトアイデア13選
理論はつまらない。
新しいスキルを学ぶことに関しては、私は実践的な部分が好きです。
新しい技術を学ぶとき、私は実践的な部分が好きです。
もちろん、実践の前には理論が必要です。 しかし、理論にばかり時間を費やして、また別の理論に時間を費やすのはやめましょう。 確実にすべてを忘れてしまいます。
以下に、学習プロセスを最大限に活用するための、初心者向けの13のJavaScriptプロジェクトのアイデアを紹介します。
私はいつもゲームを開発するとワクワクします。
ルールはご存知ですよね？ カードはボードの上に裏向きに置かれています。 2枚のカードをクリックして、一致していればそのまま、一致していなければ再び裏向きになります。 全てのカードを集めるまでプレイし続けます。
Popup
alert()やprompt()のようなポップアップには限界があります。 それらはシンプルです。
では、実際に作ってみましょう。
フォトギャラリー
。
すべてのEコマースサイトでは、商品詳細ページにフォトギャラリーを設置しています。 ズームや次の写真、前の写真の表示などの機能を備えたフォトギャラリーを構築することができます。
Calculator
これは、私がJavaScriptを学んだときに最初に実践したプロジェクトです。
JavaScript、HTML、CSSの扱い方をある程度理解するのに十分なシンプルさです。
足し算、引き算、掛け算、割り算など、いくつかの簡単な演算子から始めてみましょう。
足し算、引き算、掛け算、割り算などの簡単な演算子から始めて、複雑な機能を追加することで、よりプロフェッショナルな電卓を作ることができます。
Todoリスト
他のTodoリストアプリを使うのではなく、自分で作ってみませんか？ 自分で作ってみませんか？
Todoリストの基本的な機能は、項目の追加、削除、編集、チェックなどです。 さらに、完了した項目をゆっくり叩くなどのアニメーションを加えると、より楽しくなります。
フォームの検証
主にユーザー名、パスワード、ログインボタンの3つの要素で構成されたフォームが表示されます。 パスワード、そしてログインボタンです。
ユーザーは、ユーザー名とパスワードを入力して、ログインボタンをクリックする必要があります。 あなたの使命は、ボタンをクリックした後、ユーザー名とパスワードを検証することです。 データが有効であれば、ユーザーに次のステップへのアクセスを許可します。
時計
。
あなたはどんな時計が好きですか？ アナログですか、デジタルですか？ JavaScript、HTML、CSSを使えば、どちらも作ることができます。 クールに仕上げるには、滑らかなアニメーションを追加しましょう。
Motivational Quotes
です。
あなたがデスクに座るたびに。
あなたがデスクに座り、コンピュータの電源を入れ、ブラウザを開くたびに、1日の仕事にインスピレーションを与えてくれる、やる気を起こさせる言葉が表示されます。
このアプリケーションは、Chromeの拡張機能を構築することで作ることができます。
楽器
です。
音楽を演奏することが大好き。 自分で楽器を作ってみませんか？
キーボードの各キーをシミュレートして、作りたい楽器の音を出すことができます
信じてください。 非常に楽しいですよ。
プログレスバー
。
このプログレスバーは、ユーザーがデータの読み込みを待っているときに表示されます。
シンプルなアニメーションにすることも、色を変えるなどの素晴らしい効果を持つ複雑なものにすることもできます。
コンバータ
皆さんは何種類のコンバーターを使っていますか？
私の場合は、docからpdf、mp4からmp3、pngからjpeg、または単位変換などです。
さて、自分でコンバーターを作ってみましょう。
ノート
div
こちらはメモを取ったり、アイデアをできるだけ早く書き留めたりするためのものです。
シンプルなバージョンでは、ユーザーがノートを作成、編集、削除できるようにするだけです。
もっと面白くするために、テキストの色を変えたり、HTML/Markdown 形式を表示したりするなど、ノートをフォーマットする機能を追加しましょう。
クイズ
皆さんは「大富豪は誰だ？”という番組を。
ユーザーは、任意の分野に関するクイズを始めます。
ユーザーは、任意の分野に関するクイズを開始し、4つ（多くても少なくても）の選択肢がある問題を見て、その中から選択します。 1つを選択して送信すると、次の質問が表示されます。
結果画面では、何点に達したか、何問解けなかったかが表示されます。
結論
やはり、習うより慣れろです。
お役に立てれば幸いです。