私の最初のHacktoberfest貢献

はじめに
「Hacktoberfest」とラベルをつけられた問題を捜すために若干の時間を費やした後に、私は面白いプロジェクトを見つけましたMy Productivity . プロジェクトはAngular12 , タイプスクリプトとSCSS 人々が生産性を追跡できるウェブサイトを作成する.

2 .問題
ウェブサイトのダッシュボードにアクセスするには、ユーザーが最初に署名する必要があります.しかし、サインインフォームはまだ作成されていないので、Maireike -プロジェクトの所有者がファイルしているthis issue . これは私の角度の知識をリフレッシュするための良い機会ですので、私はMaireikeに私にこのタスクを割り当てるように求めた.彼女は非常に迅速に同意した.

解決策
つの良いことは、Maireikeは私に特定のデザインに従う必要はありませんが、いくつかの検証がある限り、私に自由を与えてください.そして、すべての仕事はsignin component を作成します.
インsignin.component.html , 私はいくつかの見出し、ユーザー名とパスワードのために使用される2つの入力フィールドで単純な形を見出しました.
The signin.component.scss 全ファイルscss どのようにページの記号のようにスタイルをスタイルに使用するコード.
検証のためにrequired , pattern アタリビュートngModel and *ngIf 入力を検証し、ユーザーに警告を表示するディレクティブ.

<input class="inputField" type="email" name="username" 
id="username" placeholder="Type your email" ngModel 
pattern="[a-zA-Z0-9]*@gmail.com$" required/>

<p class="alert" 
*ngIf="form.controls.username?.errors?.required">
*Email is required!
</p>

<p class="alert" *ngIf="form.controls.username?.errors">
*Invalid email address!
</p>

これが私が作ったものです.
フォームをテストした後、変更をコミットしてPR を返します.幸いにも、Maireikeは私の仕事に完全に満足して、修正を求めませんでした.PRはすぐに合併した.

全体
このプロセスは素晴らしいです!最初に、私はそれができる方法がないと思いました.驚いたことに、すべてが順調にいった.私は今、オープンソースコミュニティに参加するより自信と興奮を得る.リトル・ワン・ワン
ハッピーコーディング!