import './styles.css';

export default function App() {
  // Your code here:
  // 1. Create state for controlled input
  // 2. Create ref for uncontrolled input
  // 3. Implement click handler
  
  const onClickButton = (e) => {
    e.preventDefault();
    console.log("controlled: " /* insert value1 */);
    console.log("uncontrolled: " /* insert value2 */);
  };

  return (
    <div className="app">
      <h1>Controlled vs Uncontrolled</h1>
      <form>
        <input placeholder="controlled" />
        <input placeholder="uncontrolled" />
        <button onClick={onClickButton}>Log to Console</button>
      </form>
    </div>
  );
}