1. Форма кредитной карты
スムーズで楽しいマイクロインタラクションを備えたクールなクレジット カードの形状。 番号のフォーマット、検証、カード タイプの自動検出が含まれます。 Vue.js 上に構築されており、完全に応答性も優れています。 (ご覧のとおり .)
学べる内容:
- フォームの処理と検証
- イベントの処理 (フィールド変更時など)
- ページ上の要素、特にフォームの上部に表示されるクレジット カード情報を表示および配置する方法を理解する
この記事は EDISON Software のサポートを受けて翻訳されました。 と .
2. Гистограмма
ヒストグラムは、表す値に比例した高さまたは長さの長方形の棒でカテゴリデータを表すチャートまたはグラフです。
垂直方向または水平方向に適用できます。 縦棒グラフは折れ線グラフと呼ばれることもあります。
学べる内容:
- 構造化されたわかりやすい方法でデータを表示する
- さらに: 要素の使用方法を学習します。
canvasそしてそれを使って要素を描画する方法
世界の人口データを見つけることができます。 年ごとに並べてあります。
3. Анимация сердечка Twitter
2016 年に、Twitter はこの素晴らしいアニメーションをツイートに導入しました。 2019年現在でもこのパーツは残っているので、自分で作ってみてはいかがでしょうか？
学べる内容:
- CSS 属性を操作する
keyframes - HTML要素の操作とアニメーション化
- JavaScript、HTML、CSSを組み合わせる
4. Репозитории GitHub с функцией поиска
ここには特別なことは何もありません。GitHub リポジトリは単なる美化されたリストです。
目的は、リポジトリを表示し、ユーザーがリポジトリをフィルタリングできるようにすることです。 使用 各ユーザーのリポジトリを取得します。
GitHub プロフィール ページ -
学べる内容:
- APIからデータを受け取る
- APIから取得したデータを表示します
- 検索ごとに関連データをフィルタリングして表示する
- オプション: 挑戦する気持ちがある場合は、次を使用します。 、GraphQLを使用して構築されました。 .
5. Чаты в стиле Reddit
チャットは、そのシンプルさと使いやすさにより、人気のあるコミュニケーション方法です。 しかし、現代のチャット ルームを本当に活性化しているものは何でしょうか? ウェブソケット！
学べる内容:
- WebSocket、リアルタイム通信、データ更新の使用
- ユーザーのアクセス レベルを操作します (たとえば、チャット チャネルの所有者には次の役割があります)
admin、そして部屋にいる他の人たち -user) - フォームを処理して検証します - メッセージを送信するためのチャット ウィンドウは
input - さまざまなチャットを作成して参加する
- 個人的なメッセージを扱います。 ユーザーは他のユーザーとプライベートにチャットできます。 基本的に、XNUMX 人のユーザー間に WebSocket 接続を確立します。
6. Навигация в стиле Stripe
このナビゲーションのユニークな点は、ポップオーバー コンテナがコンテンツに合わせて変形することです。 新しいポップオーバーを開いたり閉じたりする従来の動作と比較すると、この移行には優雅さがあります。
学べる内容:
- CSSアニメーションとトランジションを組み合わせる
- コンテンツを暗くし、アクティブなクラスをフローティング要素に適用します
Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим .
出所： habr.com