InteractivePriceComponent

This is an Interactive pricing component challenge on Frontend Mentor.

これは フロントエンド メンター のインタラクティブな価格設定コンポーネントのチャレンジです。

Overview | 概要

The challenge, users are able to:

• View the optimal layout for the app depending on the device's screen size.
• Use a slider to see prices for different page view numbers.
• Use the toggle to switch monthly billing or yearly billing, the yearly billing will have a 25% discount on the price.

チャレンジ、ユーザーは次のことができます。

• デバイスの画面サイズに応じて、アプリの最適なレイアウトを表示します。
• スライダーを使用して、さまざまなページ ビュー数の価格を確認します。
• トグルを使用して、月次請求または年次請求を切り替えます。年次請求では、価格が 25% 割引になります。

App Screenshot

Desktop・デスクトップ

Mobile・モバイル

App Link

• Live Site URL: InteractivePriceComponent

Useage | 用途

• Install all modules listed as dependencies in package.json.

npm i

• Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

npm start

Tech Stacks | 技術スタック

• Semantic HTML5 markup
• CSS custom properties
• TypeScript
• ReactJS
• ESLint
• Prettier
• eslint-config-prettier