a4-Ben-Tyler

App.css

@@ -0,0 +1,116 @@
+body {
+  background: black;
+  color: white;
+  font-family: "Roboto", sans-serif;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.App {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#counter {
+  font-size: 36px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.pulsate {
+  animation: pulse 0.5s ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+#timer.red {
+  color: red;
+}
+
+button {
+  background-color: #00ff00;
+  color: black;
+  border: none;
+  padding: 15px 30px;
+  font-size: 18px;
+  cursor: pointer;
+  margin: 20px auto;
+  width: 200px;
+  text-align: center;
+  border-radius: 5px;
+  display: block;
+}
+
+button:hover {
+  background-color: #009900;
+}
+
+.clickable-area {
+  margin: 20px;
+  padding: 60px;
+  background-color: #61dafb;
+  cursor: pointer;
+  border-radius: 10px;
+  font-size: 36px;
+  color: black;
+}
+
+table {
+  width: 80%;
+  margin: 20px auto;
+  border-collapse: collapse;
+  color: white;
+}
+
+th,
+td {
+  border: 1px solid #00ff00;
+  padding: 10px;
+  text-align: center;
+}
+
+thead {
+  background-color: #009900;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #333;
+}
+
+input {
+  padding: 5px;
+  margin: 5px;
+  border: 1px solid #00ff00;
+  background: black;
+  color: white;
+  border-radius: 3px;
+}
+
+button[type="submit"] {
+  background-color: #00ff00;
+  border: none;
+  padding: 10px 20px;
+  color: black;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+
+button[type="submit"]:hover {
+  background-color: #009900;
+}

App.js

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+
+function App() {
+  const [clicks, setClicks] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(5);
+  const [isGameActive, setIsGameActive] = useState(false);
+  const [name, setName] = useState('');
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [showInput, setShowInput] = useState(false);
+
+  useEffect(() => {
+    let timer;
+    if (isGameActive && timeLeft > 0) {
+      timer = setInterval(() => {
+        setTimeLeft(timeLeft - 1);
+      }, 1000);
+    } else if (timeLeft === 0) {
+      endGame();
+    }
+    return () => clearInterval(timer);
+  }, [isGameActive, timeLeft]);
+
+  const handleClick = () => {
+    if (isGameActive) {
+      setClicks(clicks + 1);
+    }
+  };
+
+  const startGame = () => {
+    setClicks(0);
+    setTimeLeft(5);
+    setIsGameActive(true);
+    setShowInput(false);
+  };
+
+  const endGame = () => {
+    setIsGameActive(false);
+    setShowInput(true);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const date = new Date().toLocaleDateString();
+    const newScore = { name, clicks, date };
+    const updatedLeaderboard = [...leaderboard, newScore];
+
+    // Sort leaderboard by highest clicks first
+    updatedLeaderboard.sort((a, b) => b.clicks - a.clicks);
+
+    setLeaderboard(updatedLeaderboard);
+    setName('');
+    setShowInput(false);
+  };
+
+  return (
+    <div className="App">
+      <h1>Clicker Game</h1>
+      <p>Click as many times as you can in 5 seconds!</p>
+      <p>Time Left: {timeLeft}s</p>
+      <p>Clicks: {clicks}</p>
+      {!isGameActive && !showInput && (
+        <button onClick={startGame}>Start Game</button>
+      )}
+      {isGameActive && (
+        <div onClick={handleClick} className="clickable-area">
+          Click here!
+        </div>
+      )}
+      {showInput && (
+        <form onSubmit={handleSubmit}>
+          <label>
+            Your Name:
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+            />
+          </label>
+          <button type="submit">Submit Score</button>
+        </form>
+      )}
+      <h2>Leaderboard</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Clicks</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {leaderboard.map((entry, index) => (
+            <tr key={index}>
+              <td>{entry.name}</td>
+              <td>{entry.clicks}</td>
+              <td>{entry.date}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

README.md

@@ -1,33 +1,7 @@
-Assignment 4 - Components
-===
 
-Due: September 30th, by 11:59 AM.
 
-For this assignment you will re-implement the client side portion of *either* A2 or A3 using either React or Svelte components. If you choose A3 you only need to use components for the data display / updating; you can leave your login UI as is.
+## Clicker Game on React
 
-[Svelte Tutorial](https://github.com/cs-4241-2024/cs-4241-2024.github.io/blob/main/using.svelte.md)  
-[React Tutorial](https://github.com/cs-4241-2024/cs-4241-2024.github.io/blob/main/using.react.md)  
+https://d5bf26ce-cef5-473e-abf6-f7e81ccafde6-00-132i4gv6cuvx3.riker.replit.dev
 
-This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3–4 sentences) answer the following question: did the new technology improve or hinder the development experience?
-
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
+I ended up changing assignment 2 because I couldn't figure out how to get my MongoDB server working on react. Learning to use react was difficult and instead of transfering the project I just built a new one from the ground up. The react app seems to load much quicker but other than that I do not notice many differences. 

index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

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"
+}