diff --git a/docs/App.css b/docs/App.css new file mode 100644 index 0000000..79831ae --- /dev/null +++ b/docs/App.css @@ -0,0 +1,49 @@ +.App { + text-align: center; + margin-top: 2rem; + font-family: sans-serif; +} + +input[type='number'] { + padding: 0.5rem; + font-size: 1rem; + margin-right: 1rem; + border-radius: 4px; + border: 1px solid #ccc; +} + +select { + padding: 0.5rem; + font-size: 1rem; + margin-right: 1rem; + border-radius: 4px; + border: 1px solid #ccc; +} + +button { + padding: 0.5rem 1rem; + font-size: 1rem; + background-color: #4caf50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #45a049; +} + +p { + margin-top: 1rem; + font-size: 1.2rem; +} + +@media (max-width: 600px) { + input[type='number'], + select, + button { + margin-bottom: 0.5rem; + } +} \ No newline at end of file diff --git a/docs/App.test.tsx b/docs/App.test.tsx new file mode 100644 index 0000000..2a68616 --- /dev/null +++ b/docs/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/docs/App.tsx b/docs/App.tsx new file mode 100644 index 0000000..e1db178 --- /dev/null +++ b/docs/App.tsx @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import './App.css'; + +function App() { + const [inputValue, setInputValue] = useState(0); + const [displayValue, setDisplayValue] = useState(0); + const [unit, setUnit] = useState('東京ドーム'); + const [localUnit, setLocalUnit] = useState('地元の図書館'); + + const handleInputChange = (e: React.ChangeEvent) => { + const value = parseFloat(e.target.value); + setInputValue(value); + }; + + const handleUnitChange = (e: React.ChangeEvent) => { + setUnit(e.target.value); + }; + + const handleLocalUnitChange = (e: React.ChangeEvent) => { + setLocalUnit(e.target.value); + }; + + const handleButtonClick = () => { + let convertedValue = inputValue; + switch (unit) { + case '東京ドーム': + convertedValue = inputValue * 46755; // 東京ドームの面積を46755m^2に設定 + break; + default: + break; + } + + let localUnitValue = 0; + switch (localUnit) { + case '地元の図書館': + localUnitValue = 500; // 地元の図書館の面積を500m^2と仮定 + break; + case '地元の公園': + localUnitValue = 10000; // 地元の公園の面積を10000m^2と仮定 + break; + default: + break; + } + + const result = convertedValue / localUnitValue; + setDisplayValue(result); + }; + + return ( +
+

東京ドームから地元の建物への変換アプリ

+ + + + +

入力値: {inputValue} {unit}

+

表示値: {displayValue.toFixed(2)} {localUnit}個分

+
+ ); +} + +export default App; \ No newline at end of file diff --git a/docs/favicon.ico b/docs/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/docs/favicon.ico differ diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/docs/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/docs/index.tsx b/docs/index.tsx new file mode 100644 index 0000000..032464f --- /dev/null +++ b/docs/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/docs/logo.svg b/docs/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/docs/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/react-app-env.d.ts b/docs/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/docs/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/docs/reportWebVitals.ts b/docs/reportWebVitals.ts new file mode 100644 index 0000000..49a2a16 --- /dev/null +++ b/docs/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/docs/setupTests.ts b/docs/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/docs/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';