diff --git a/README.md b/README.md
index b3dd1de6d..89b278ae3 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,68 @@
-# Testing II
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-In this project, you will demonstrate proficiency by writing unit tests and production code to satisfy the _Minimum Viable Product_ described below.
+## Available Scripts
-Some of the topics covered were:
+In the project directory, you can run:
-- introduction to testing a React application.
-- using the `react-testing-library` testing framework.
-- writing unit tests for React components.
+### `yarn start`
-## Instructions
+Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-**Read these requirements carefully. Understand exactly what is expected _before_ starting.**
+The page will reload if you make edits.
+You will also see any lint errors in the console.
-You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the _twenty-minute rule_ and post questions to your cohort's help channel before seeking support from your PM and Instructor.
+### `yarn test`
-## Commits
+Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-Please push your code often and use descriptive commit messages, this helps you and your project manager.
+### `yarn build`
-## Project Description
+Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance.
-In this project, you will **write unit tests and the implementation code** for a React application for _Baseball Stadium_ personnel. The application helps them enter information about the game and have that information shown in the _Score Board Display_ for fans to see.
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
-The requirements are listed under the _Minimum Viable Product_ section below.
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-## Project Set Up
+### `yarn eject`
-Follow these steps to setup your git _fork_ and _branch_.
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-- [ ] Fork this repository.
-- [ ] Use GitHub's website to add your project manager as collaborator on **your fork**.
-- [ ] **Clone your forked version** of the repository (**Not Lambda's**!).
-- [ ] Create a new branch: `git checkout -b `.
-- [ ] Commit changes to your `` branch.
-- [ ] Push often to your branch: `git push origin `.
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-Follow these steps for completing your project.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-- [ ] Submit a Pull-Request to merge the `` branch into the master branch on your fork. **Please don't merge your own pull request**
-- [ ] Use GitHub's website to add your project manager as a reviewer on the pull-request.
-- [ ] Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-## Minimum Viable Product
+## Learn More
-After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-Your job is to design and build a React application that includes at least two components: `Display` and `Dashboard`. **For the MVP you only need to record information about a player's _"at bat"_**.
+To learn React, check out the [React documentation](https://reactjs.org/).
-The specifications are listed below.
+### Code Splitting
-### Count Rules
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-- balls and strikes reset to 0 when a player reaches 3 strikes or 4 balls.
-- balls and strikes reset to 0 when a `hit` is recorded.
-- a `foul` increases strikes up to 2. With no strikes, a foul makes it 1 strike. With 1 strike, a foul makes it 2 strikes. With two strikes a foul has no effect, count stays at 2 strikes.
+### Analyzing the Bundle Size
-### Display
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-- display the count of `balls` and `strikes` for the at-bat.
-- should be updated when the user records activity on the `Dashboard` component.
+### Making a Progressive Web App
-### Dashboard
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-- provide a button that the person in charge can press every time there is a `strike`, `ball`, `foul` or `hit`.
-- there is **NO** need to specify the type of hit (single, double, etc).
-- changes recorded on this component should update the information shown by the `Display` component.
+### Advanced Configuration
-Feel free add other components and organize and name your components any way you want to satisfy the requirements. **Make it up and make it happen developer!**.
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-## Stretch Problem
+### Deployment
-This section is **optional** and not counted towards MVP. Start working on it after you're done with the main assignment.
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-- Expand the solution to keep track of all the activity of a single inning. Include the number of outs and track them.
-- Expand the solution to keep track of the number of runs and errors in the inning.
-- Expand the solution to keep track of which bases are occupied and to record hits, doubles, triples and home runs.
-- Expand the solution to keep track of all activity across all innings. Display the current inning.
-- Work on [this repository for extra practice testing a legacy React application](https://github.com/LambdaSchool/React-Testing).
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
diff --git a/README.old.md b/README.old.md
new file mode 100644
index 000000000..b3dd1de6d
--- /dev/null
+++ b/README.old.md
@@ -0,0 +1,79 @@
+# Testing II
+
+In this project, you will demonstrate proficiency by writing unit tests and production code to satisfy the _Minimum Viable Product_ described below.
+
+Some of the topics covered were:
+
+- introduction to testing a React application.
+- using the `react-testing-library` testing framework.
+- writing unit tests for React components.
+
+## Instructions
+
+**Read these requirements carefully. Understand exactly what is expected _before_ starting.**
+
+You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the _twenty-minute rule_ and post questions to your cohort's help channel before seeking support from your PM and Instructor.
+
+## Commits
+
+Please push your code often and use descriptive commit messages, this helps you and your project manager.
+
+## Project Description
+
+In this project, you will **write unit tests and the implementation code** for a React application for _Baseball Stadium_ personnel. The application helps them enter information about the game and have that information shown in the _Score Board Display_ for fans to see.
+
+The requirements are listed under the _Minimum Viable Product_ section below.
+
+## Project Set Up
+
+Follow these steps to setup your git _fork_ and _branch_.
+
+- [ ] Fork this repository.
+- [ ] Use GitHub's website to add your project manager as collaborator on **your fork**.
+- [ ] **Clone your forked version** of the repository (**Not Lambda's**!).
+- [ ] Create a new branch: `git checkout -b `.
+- [ ] Commit changes to your `` branch.
+- [ ] Push often to your branch: `git push origin `.
+
+Follow these steps for completing your project.
+
+- [ ] Submit a Pull-Request to merge the `` branch into the master branch on your fork. **Please don't merge your own pull request**
+- [ ] Use GitHub's website to add your project manager as a reviewer on the pull-request.
+- [ ] Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
+
+## Minimum Viable Product
+
+After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
+
+Your job is to design and build a React application that includes at least two components: `Display` and `Dashboard`. **For the MVP you only need to record information about a player's _"at bat"_**.
+
+The specifications are listed below.
+
+### Count Rules
+
+- balls and strikes reset to 0 when a player reaches 3 strikes or 4 balls.
+- balls and strikes reset to 0 when a `hit` is recorded.
+- a `foul` increases strikes up to 2. With no strikes, a foul makes it 1 strike. With 1 strike, a foul makes it 2 strikes. With two strikes a foul has no effect, count stays at 2 strikes.
+
+### Display
+
+- display the count of `balls` and `strikes` for the at-bat.
+- should be updated when the user records activity on the `Dashboard` component.
+
+### Dashboard
+
+- provide a button that the person in charge can press every time there is a `strike`, `ball`, `foul` or `hit`.
+- there is **NO** need to specify the type of hit (single, double, etc).
+- changes recorded on this component should update the information shown by the `Display` component.
+
+Feel free add other components and organize and name your components any way you want to satisfy the requirements. **Make it up and make it happen developer!**.
+
+## Stretch Problem
+
+This section is **optional** and not counted towards MVP. Start working on it after you're done with the main assignment.
+
+- Expand the solution to keep track of all the activity of a single inning. Include the number of outs and track them.
+- Expand the solution to keep track of the number of runs and errors in the inning.
+- Expand the solution to keep track of which bases are occupied and to record hits, doubles, triples and home runs.
+- Expand the solution to keep track of all activity across all innings. Display the current inning.
+- Work on [this repository for extra practice testing a legacy React application](https://github.com/LambdaSchool/React-Testing).
diff --git a/gitignore b/gitignore
new file mode 100644
index 000000000..4d29575de
--- /dev/null
+++ b/gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..43b8f317b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "web-application-testing",
+ "version": "1.0.0",
+ "private": true,
+ "main": "index.js",
+ "repository": "https://github.com/aanderson9313/Web-Application-Testing.git",
+ "author": "alexis-anderson ",
+ "license": "MIT",
+ "dependencies": {
+ "@testing-library/jest-dom": "^4.2.4",
+ "@testing-library/react": "^9.4.0",
+ "@testing-library/user-event": "^7.1.2",
+ "babel": "^6.23.0",
+ "babel-jest": "^24.9.0",
+ "jest": "^24.9.0",
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
+ "react-scripts": "3.3.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": "react-app"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "react-test-renderer": "^16.12.0"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 000000000..a11777cc4
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 000000000..aa069f27c
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ React App
+
+
+
+
+
+
+
diff --git a/public/logo192.png b/public/logo192.png
new file mode 100644
index 000000000..fc44b0a37
Binary files /dev/null and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 000000000..a4e47a654
Binary files /dev/null and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 000000000..080d6c77a
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 000000000..01b0f9a10
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 000000000..cf0e4cda5
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,51 @@
+import React, {useState} from 'react';
+import './App.css';
+
+import Display from './components/display.js';
+import Dashboard from './components/dashboard.js';
+
+function App() {
+
+ const [ homeHits, setHomeHits] = useState(0);
+ const [ awayHits, setAwayHits] = useState(0);
+ const [ balls, setBalls] = useState(0);
+ const [ strikes, setStrikes] = useState(0);
+ const [ outs, setOuts] = useState(0);
+ const [ whosUp, setWhosUp] = useState('Home'); //determines if home(1) or away(2) is up;
+ const [ innings, setInnings] = useState(1);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
new file mode 100644
index 000000000..07a4fbc7c
--- /dev/null
+++ b/src/App.test.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+import * as rtl from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Display from './components/display';
+import Dashboard, {addBall, addStrike} from './components/dashboard';
+
+test('renders display component', () => {
+ const { getByText } = render();
+ const displayElement = getByText(/home/i);
+ expect(displayElement).toBeInTheDocument();
+});
+
+test('renders dashboard component', () => {
+ const { getByText } = render();
+ const dashboardElement = getByText(/ball/i);
+ expect(dashboardElement).toBeInTheDocument();
+});
+
+
+describe('balls and strikes reset to 0 when you hit 3 strikes or 4 balls', () =>{
+ it('balls resets properly to 0', () =>{
+
+
+ const expected = 0;
+ const ballcount = 3;
+ const actual = addBall(ballcount);
+
+ expect(actual).toBe(expected); //this should be true that 0 will be returned;
+ });
+
+ it('strikes resets properly to 0', () =>{
+
+ const expected = 0;
+ const strikecount = 2;
+ const actual = addStrike(strikecount, 0);
+
+ expect(actual[0]).toBe(expected);
+ })
+
+
+
+});
\ No newline at end of file
diff --git a/src/components/dashboard.css b/src/components/dashboard.css
new file mode 100644
index 000000000..a537178dd
--- /dev/null
+++ b/src/components/dashboard.css
@@ -0,0 +1,32 @@
+.dashboard-container {
+ border: 4px solid black;
+ border-top: none;
+ border-radius: px;
+ background-color: green;
+}
+
+
+.home-buttons, .away-buttons {
+ display: flex;
+ align-content: center;
+ justify-content: space-around;
+ background-color: green;
+ box-shadow:inset 0px 1px 0px 0px #cf866c;
+ background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
+ background-color:#d0451b;
+ border-radius:3px;
+ border:1px solid #942911;
+ cursor:pointer;
+ color:#ffffff;
+ font-family:Arial;
+ font-size:13px;
+ padding:6px 24px;
+ text-decoration:none;
+ text-shadow:0px 1px 0px #854629;
+
+}
+
+.home-buttons:active, .away-buttons:active {
+ position:relative;
+ top:1px;
+}
\ No newline at end of file
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
new file mode 100644
index 000000000..2884c0dc1
--- /dev/null
+++ b/src/components/dashboard.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import '../components/dashboard.css';
+
+const Dashboard = (props) => {
+
+ return(
+