import { useState } from 'react';
import './App.css';
function App() {
	const calc = () => {
		const num = document.querySelector('#num').value;
		let result = 0;
		for (let i = 0; i <= num; i++) {
			result += i;
		}
		const total = document.querySelector('#total');
		total.textContent = `合計：${result}`;
	};
	return (
		<div className='App'>
			<h1>React sample</h1>
			<header className="container">
				<div className="card">
					<h3>※合計を計算する</h3>
					<h4 id="total"></h4>
					<input type="number" id="num" />
					<button onClick={calc}>Count</button>
				</div>
			</header>
		</div>
	);
}
export default App;