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'tCreate 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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!