Another boggle project with react
UCF University of Central Florida CIS 4004 Web Based Information Technology Page 2 of 2 Assignment 4 Due, Thursday, August 4 2022 for 100% credit Friday, August 5, 2022 for 90% credit Saturday, August 6, 2022 for 80% credit Assignment scope This assignment is focused on writing ReactJS and will create an electronic version of a dice game Boggle. This project will require students to generate a Boggle board. The player will have three minutes to find as many words as possible. Words are created with three letters or more. Words are formed from adjoining letters. Letters must join in the proper sequence to spell a word. Letters may join horizontally, vertically, or diagonally, to the left, right, up or down. No letter cube may be used more than once in a single word. Installation resources and steps Node.js and ReactJS 1. Download and install Node.js a. https://nodejs.org/en/download/ 2. Using the command prompt, install the serve static server a. npm install serve -g 3. Using the command prompt, install Babel and its React companion a. npm install babel-cli@6 babel-preset-react-app@3 -g 4. Using the command prompt, install Create React App toolchain a. npm install -g create-react-app 5. Using the command prompt, create a React application in desired workspace a. create-react-app boggle 6. Using the command prompt, test the default React app a. npm start b. The web browser should display 7. Browse to the src folder of the boggle app directory a. Create folder named components b. Move to the components folder i. Create empty file Boggle.js ii. Create empty file Boggle.css Four files have been provided as templates or resources for this assignment 1. logo.png 2. index.html 3. style.css 4. Boggle_temp.js Assignment submission Compress the React app boggle folder and submit the compressed file (e.g. .zip) Tasks Activity logo.png 1. Copy file in app directory boggle/src 2. Copy file in app directory boggle/src/components App.css 3. Comment out or delete the logo spin code @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } App.js 1. Change the logo import a. from: import logo from './logo.svg'; b. to: import logo from './logo.png'; index.js 1. Change root.render a. from:
b. to:
Boggle.css 1. Copy the contents of style.css to Boggle.css Boggle.js 1. Copy the contents of Boggle_temp.js to Boggle.js 2. In method render return {} copy the code from index.html in the … element as JSX in the {} of the return 3. Modify any ‘class = ‘classname’ so that class is className to convert to JSX 4. Modify the
![]()
to convert to JSX a. from:
b. to:
5. Update the JSX so that the Boggle board looks like Figure 1 6. Update the JSX so that the CurrentWord looks like Figure 2 7. Update the JSX so that the Words Found looks like Figure 3 Test Cases Test Case 1 Rendered ReactJS Boggle app looks similar to Figure 4 Figure 1 Boggle board Figure 2 Current Word Figure 3 Words Found Figure 4 ReactJS Boggle app