Join-quiz-UI

[RaoJordan]

UI Images :

UI for Join-Quiz Interface using react and tailwind

[RaoJordan]

Code :
import React, { useState } from 'react';

const Login = () => {
const [joinCode, setJoinCode] = useState('');

const handleJoinCodeChange = (event) => {
setJoinCode(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();

console.log('Join Code:', joinCode);

// Clear the input field after submission 
setJoinCode('');

};

return (

Mentimeter

    <div className="text-center text-sm text-gray-400 mb-4">
      It's on the screen in front of you
    </div>

    <form className="text-center" onSubmit={handleSubmit}>
      <div className="mb-4">
        <label htmlFor="code" className="block text-md font-medium text-gray-600">
          Enter the code to join
        </label>
        <input
          type="text"
          id="code"
          name="code"
          value={joinCode}
          onChange={handleJoinCodeChange}
          className="mt-1 p-2 w-full border rounded-md"
          placeholder="Enter code"
        />
      </div>
      <button
        type="submit"
        className="w-1/2 bg-zinc-800 text-white p-2 rounded-full hover:bg-zinc-600"
      >
        Join
      </button>
    </form>
  </div>
</div>

);
};

export default Login;

TypeScript:
import React, { useState, ChangeEvent, FormEvent } from 'react';

interface LoginProps {}

const Login: React.FC = () => {
const [joinCode, setJoinCode] = useState('');

const handleJoinCodeChange = (event: ChangeEvent) => {
setJoinCode(event.target.value);
};

const handleSubmit = (event: FormEvent) => {
event.preventDefault();

console.log('Join Code:', joinCode);

// Clear the input field after submission
setJoinCode('');

};

return (

Mentimeter

    <div className="text-center text-sm text-gray-400 mb-4">
      It's on the screen in front of you
    </div>

    <form className="text-center" onSubmit={handleSubmit}>
      <div className="mb-4">
        <label htmlFor="code" className="block text-md font-medium text-gray-600">
          Enter the code to join
        </label>
        <input
          type="text"
          id="code"
          name="code"
          value={joinCode}
          onChange={handleJoinCodeChange}
          className="mt-1 p-2 w-full border rounded-md"
          placeholder="Enter code"
        />
      </div>
      <button
        type="submit"
        className="w-1/2 bg-zinc-800 text-white p-2 rounded-full hover:bg-zinc-600"
      >
        Join
      </button>
    </form>
  </div>
</div>

);
};

export default Login;