これはプロジェクトのソリューションです。ODINプロジェクトのサインアップフォームです。 Odin Projectは、完全にオンラインで撮影できる無料のオープンソースコーディングカリキュラムを提供します。
プロジェクト:電卓は、中級HTMLおよびCSSコースの2つのプロジェクトの1つです。コースセクションの中間HTMLコンセプト、中間CSS概念、およびフォームでカバーされたコンテンツを練習する機会を提供します。

このソリューションの3つのことは、以前にプロジェクトで使用していなかったことです。
コースセクションの中間HTMLコンセプト、中間CSSの概念、およびフォームについてカバーされたその他の機能、および私がソリューションで使用したものは次のとおりです。
私のソリューションでは、このプロジェクトまでのフルスタックJavaScript学習パスのカリキュラムでカバーされたHTMLおよびCSS機能のみを使用しました。
CSSグリッドは、このプロジェクトの後の次のセクションで説明します。このプロジェクトの設計ファイルのレイアウトは、レイアウトファーストデザインとCSSグリッドの優れた候補になります。
レスポンシブデザインは、カリキュラムのずっと後までカバーされません。 CSS FlexBoxを使用して、メディアクエリは使用しないように、利用可能なツールでできる限りレスポンシブにソリューションを作成しました。
Webのアクセシビリティは、カリキュラムのずっと後半にもカバーされています。 Frontend Mentorの課題に取り組んでいる間、アクセシビリティについて学んだことを使用しました。
パスワードフィールドが互いに一致することを検証するには、JavaScriptが必要です。フォーム検証にJavaScriptを使用することは、将来のレッスンで説明されています。私のソリューションでは、メールアドレスのクライアントサイト検証のみを使用します。設計ファイルには示されていないため、必要なフォームフィールドはありません。
フォームにはバックエンドがなく、提出されたデータはどこにも送信されません。
私をオンラインで見つけてください:
システムフォントスタックに加えて、このソリューションはJoëlCarrouchéによるフォントノルセボールドを使用しています。フォントは個人的および商業用に無料であり、Unicodeサポートを備えた完全なルーン語のアルファベットが含まれています。
このソリューションでは、Josh ComeauのCSSリセットとほぼ白黒の配色も使用します。