「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > HTML、CSS、および JavaScript プロジェクト

HTML、CSS、および JavaScript プロジェクト

2024 年 11 月 3 日に公開
ブラウズ:957

HTML, CSS, and JavaScript Projects

私の HTML、CSS、JavaScript プロジェクトのコレクションへようこそ!このブログ投稿では、私が作成したさまざまなプロジェクトの包括的な概要を提供し、Web 開発のさまざまな側面を紹介します。各プロジェクトは独自のリポジトリで利用でき、探索して学習する必要があるすべてのコードが含まれています。

目次

  • 導入
  • プロジェクト概要
  • はじめる
  • 貢献
  • 著者

導入

Web 開発者として、私は HTML、CSS、JavaScript のスキルを磨くのに役立つさまざまなプロジェクトに楽しく取り組んでいます。単純な計算機からより複雑なアプリケーションまで、これらのプロジェクトは Web 開発におけるさまざまなテクニックとベスト プラクティスを示しています。以下に、厳選されたプロジェクトのリストがあり、各プロジェクトにはそれぞれの GitHub リポジトリへのリンクが含まれています。

プロジェクト概要

私がこれまでに取り組んできたプロジェクトの概要は次のとおりです:

  1. アビキニュース

    • 最新のヘッドラインを集約して表示するニュースアプリ。
    • コードを表示
  2. アドバイスジェネレーター

    • ユーザーに役立つヒントを提供するランダムなアドバイスを生成します。
    • コードを表示
  3. 年齢計算機

    • 生年月日入力から年齢を計算するツール。
    • コードを表示
  4. アナログ時計

    • JavaScriptを使用して機能するアナログ時計を表示します。
    • コードを表示
  5. 記事カード

    • 記事を紹介するための様式化されたカード コンポーネント。
    • コードを表示
  6. BMI 計算機

    • ユーザー入力に基づいてBody Mass Indexを計算します。
    • コードを表示
  7. カウントダウンタイマー

    • 指定した日時にカウントダウンするタイマー。
    • コードを表示
  8. ダイスロールシミュレーター

    • 乱数発生器を使用してサイコロを振るのをシミュレートします。
    • コードを表示
  9. ドラムキット

    • さまざまなドラムサウンドを演奏できる仮想ドラムキット。
    • コードを表示
  10. よくある質問 アコーディオン

    • Web サイト用のアコーディオン スタイルの FAQ セクション。
    • コードを表示
  11. コインを投げる

    • シンプルなコイン投げシミュレーション。
    • コードを表示
  12. その日に集中

    • 焦点を絞った UI により、ユーザーは日常のタスクに集中できるようになります。
    • コードを表示
  13. フーディーハンバーガー

    • 食関連サイト向けのスタイリッシュなハンバーガーメニュー
    • コードを表示
  14. ローン計算機

    • ユーザー入力に基づいてローン返済額を計算します。
    • コードを表示
  15. ログインフォーム

    • フォーム検証を備えた基本的なログイン フォーム。
    • コードを表示
  16. 月間カレンダー

    • 指定した月のカレンダーを表示します。
    • コードを表示
  17. 住宅ローン計算機

    • さまざまな入力に基づいて住宅ローンの支払いを計算します。
    • コードを表示
  18. ニュースホームページ

    • ニュース ウェブサイトのホームページ レイアウト。
    • コードを表示
  19. ニュースレター登録フォーム

    • ユーザーがニュースレターを購読するためのフォーム。
    • コードを表示
  20. パスワードジェネレータ

    • カスタマイズ可能なオプションを使用して安全なパスワードを生成します。
    • コードを表示
  21. ポモドーロタイマー

    • ポモドーロ テクニックを使用して生産性を高めるタイマー。
    • コードを表示
  22. プロフィールカード

    • ユーザープロフィールを表示するカードコンポーネント。
    • コードを表示
  23. QR コードジェネレーター

    • ユーザー入力に基づいて QR コードを生成します。
    • コードを表示
  24. じゃんけん

    • JavaScript で実装されたじゃんけんゲーム。
    • コードを表示
  25. 簡単な計算機

    • 算術演算を実行するための基本的な計算機。
    • コードを表示
  26. スニーカーの e コマース

    • 商品リストを含むスニーカーの e コマース ページ。
    • コードを表示
  27. 温度コンバータ

    • 摂氏、華氏、ケルビンの間で温度を変換します。
    • コードを表示
  28. お客様の声スライダー

    • ユーザーの声を表示するためのスライダー コンポーネント。
    • コードを表示
  29. テキスト読み上げジェネレーター

    • Web Speech API を使用してテキスト入力を音声に変換します。
    • コードを表示
  30. 三目並べ

    • JavaScript で実装された古典的な三目並べゲーム。
    • コードを表示
  31. チップ計算機

    • 請求額とチップの割合に基づいてチップの金額を計算します。
    • コードを表示

32

Todo リスト
- タスクを管理するシンプルなToDoリストアプリ
- コードを表示

  1. 体重コンバータ
    • 異なる単位間で重みを変換します。
    • コードを表示

はじめる

これらのプロジェクトのクローンを作成してローカルで実行するには、次の手順に従います:

  1. リポジトリのクローンを作成します:
   git clone https://github.com/abhishekgurjar-in/html-css-javascript-projects.git
  1. プロジェクト ディレクトリに移動します:
   cd 
  1. ブラウザでプロジェクトを開く: ブラウザでindex.htmlファイルを開いて、プロジェクトの動作を確認します。

貢献する

これらのプロジェクトに貢献したい場合は、次のガイドラインに従ってください:

  1. リポジトリをフォークします。
  2. 変更内容に応じて新しいブランチを作成します。
  3. 変更をコミットし、フォークされたリポジトリにプッシュします。
  4. 変更の説明を含むプル リクエストを作成します。

著者

アビシェク・グルジャル

リリースステートメント この記事は次の場所に転載されています: https://dev.to/abhishekgurjar/html-css-and-javascript-projects-3b6e?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3