Question: Create Connect 4 in React JS Seperate code in Sections index.html style.css main.jsx Your board should look like the following image. We won't dock you

Create Connect 4 in React JS
Seperate code in Sections
index.html
style.css
main.jsx
Your board should look like the following image. We won't dock you for minor differences like exact color or padding values, but try to make your UI as close to the image as possible! One of the main roles of a full-stack engineer at Monthly is implementing designs in code, so we will be assessing your ability to implement a Ul that matches the one below. Don't worry about making the Ul responsive a fixed Width design is fine! Black's turn DROP DROP DROP DROP DROP DROP DROP . O O RESET Functionality: Track which player/color has the current move, and display that to the user. Pressing the "drop" button above a column drops a disc for the player whose turn it is. The dropped disc should display on the board. After dropping a disk, it is the other player's turn. If a column is full disable the "drop" button, and set its background to gray. Pressing the "reset" button should clear the board and start the game over. Important: for the sake of time, do not worry about implementing the "win condition" (ie determining if any color has 4 in a row). We just want you to implement the basic UI and interactions of the game. Tips: To use React framework functions and hooks, like useState and useEffect, access them from the root React library, ie React.useState(...) import { useState } from "react" does not work in this environment. All of your work should be in the main.jsx and style.scss files. You do not need to touch the index.html file, and you can't create new files. Sometimes the editor will fail to hot-reload the live preview. If you have this or any other issues, try refreshing the page. If you have persistent issues that prevent you from completing the assignment, please let us know! You do not need to write docstrings or lengthy comments, but we do care about good code style and organization. Feel free to Google any general knowledge you need, but do not search for React Connect 4 implementations. If you do use code or knowledge from an outside source, cite it in a comment. Your board should look like the following image. We won't dock you for minor differences like exact color or padding values, but try to make your UI as close to the image as possible! One of the main roles of a full-stack engineer at Monthly is implementing designs in code, so we will be assessing your ability to implement a Ul that matches the one below. Don't worry about making the Ul responsive a fixed Width design is fine! Black's turn DROP DROP DROP DROP DROP DROP DROP . O O RESET Functionality: Track which player/color has the current move, and display that to the user. Pressing the "drop" button above a column drops a disc for the player whose turn it is. The dropped disc should display on the board. After dropping a disk, it is the other player's turn. If a column is full disable the "drop" button, and set its background to gray. Pressing the "reset" button should clear the board and start the game over. Important: for the sake of time, do not worry about implementing the "win condition" (ie determining if any color has 4 in a row). We just want you to implement the basic UI and interactions of the game. Tips: To use React framework functions and hooks, like useState and useEffect, access them from the root React library, ie React.useState(...) import { useState } from "react" does not work in this environment. All of your work should be in the main.jsx and style.scss files. You do not need to touch the index.html file, and you can't create new files. Sometimes the editor will fail to hot-reload the live preview. If you have this or any other issues, try refreshing the page. If you have persistent issues that prevent you from completing the assignment, please let us know! You do not need to write docstrings or lengthy comments, but we do care about good code style and organization. Feel free to Google any general knowledge you need, but do not search for React Connect 4 implementations. If you do use code or knowledge from an outside source, cite it in a comment
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
