Raffle Draw

Easy
0.0% Acceptance

In this lab, you'll create a simple yet interactive React application that allows users to enter names into a raffle draw and randomly selects a winner. This app will test your skills in handling user input, managing state, and dynamically updating the DOM with React.

Lab Overview

Your task is to build a React application with the following functionalities:

  1. Name Input: Users should be able to input names using a single text box.
  2. Display Names: The entered names should be displayed on the screen.
  3. Pick a Random Name: Implement functionality to randomly select a name from the entered names.
  4. Track Picked Names: Once a name is picked, it should be moved to a separate list indicating it has been selected.

Key Requirements

  • Name Input Field: Create an input element where users can enter names. This input should have an ID of #nameInput. When a user presses Enter after typing a name, this name should be added to a list.

  • Name Display Area: There should be a div with an ID of #nameList. Each time a name is entered, it should be displayed within this div in a span element with the class .name.

  • Random Name Selection: Include a button with the text "Pick a Name" and an ID of #pick. When clicked, this button should trigger the random selection of a name from the #nameList. The selected name should be displayed in a dialog modal with an ID of #nameDialog.

  • Picked Names List: Create a div with an ID of #pickedList. Each time a name is picked, move it from the #nameList to this #pickedList, displayed as a span element with the class .name.

Development Steps

  1. Create the Input Field: Implement the input field for name entry with the specified ID.
  2. Implement the Name List: Develop the functionality to display entered names as specified.
  3. Add Random Selection Feature: Create the button to pick a name randomly and display it in a modal.
  4. Manage the Picked Names: Ensure that picked names are moved to the specified list.

Challenges

Challenge 1: Implementing the Name Input Functionality

  • Objective: Create an input element to enter names, and ensure pressing Enter adds the name to a list.
  • Requirements:
    • The input element must have an ID of #nameInput.
    • Pressing the Enter key after typing a name should add the name to a list. This action should be detectable in the DOM.
    • The name added should be visible in the DOM as part of a list after the Enter key is pressed.

Challenge 2: Displaying Entered Names in a List

  • Objective: Display the names entered by the user in a list format.
  • Requirements:
    • Create a div element with an ID of #nameList.
    • Each new name entered should create and append a span element with the class .name to the #nameList div.
    • The span elements should be visible in the DOM and contain the respective names entered.

Challenge 3: Implementing the Random Name Selection

  • Objective: Add functionality to pick a random name from the entered names and display it in a dialog modal.
  • Requirements:
    • Include a button with the text "Pick a Name" and an ID of #pick.
    • Clicking this button should randomly select a name from the #nameList and display it in a dialog modal.
    • The dialog modal should have an ID of #nameDialog.
    • Ensure the dialog modal is properly displayed with the selected name and can be closed.

Challenge 4: Managing the Picked Names

  • Objective: Track and display names that have been picked.
  • Requirements:
    • Create a div with an ID of #pickedList.
    • When a name is picked, it should be moved from the #nameList to the #pickedList.
    • In the #pickedList, each picked name should be within a span element of class .name.
    • Ensure that the picked names are visible in the #pickedList and are no longer in the #nameList.

Remember, this lab is about implementing these features in a single React file. Focus on the functionality and pay attention to the IDs required for each element, as these are crucial for passing the automated tests. Good luck!