<!doctype html>
<html>
  <head>
    <script type="module" src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
    <title>My React App</title>
  </head>
  <body>
    <div id="root">loading</div>
  </body>
</html>

index.html

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App"

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);

index.jsx

import React from "react";
import ScoreKeeper from "./ScoreKeeper";
import "./App.css";

const App = () => {
  return <ScoreKeeper />;
};

export default App;


App.jsx

body {
  background-color: lightcyan;
  font-family: Arial, sans-serif;
  color: darkslategray;
  text-align: center;
}

App.css

import React from "react";
import "./ScoreView.css";

const ScoreView = (props) => {
  return (
    <div className={`score-view-wrapper-leading-${props.leading}`}>
      <h2>
        {props.teamName}: {props.score}
      </h2>
    </div>
  );
};

export default ScoreView;


ScoreView.jsx

.score-view-wrapper-leading-true {
  color: white;
  background-color: teal;
  border-radius: 5px;
}

ScoreView.css

import React, { useState } from "react";
import ScoreView from "./ScoreView";
import "./ScoreKeeper.css";

const ScoreKeeper = () => {
  const [teamOneScore, setTeamOneScore] = useState(0);
  const [teamTwoScore, setTeamTwoScore] = useState(0);

  return (
    <div className="score-keeper-container">
      <h1 className="score-keeper-heading">Score Keeper</h1>
      <ScoreView teamName="Team One" score={teamOneScore} leading={teamOneScore > teamTwoScore} />
      <button className="score-keeper-button" onClick={() => setTeamOneScore(teamOneScore + 1)}>
        +1 Team One
      </button>

      <ScoreView teamName="Team Two" score={teamTwoScore} leading={teamTwoScore > teamOneScore} />
      <button className="score-keeper-button" onClick={() => setTeamTwoScore(teamTwoScore + 1)}>
        +1 Team Two
      </button>
    </div>
  );
};

export default ScoreKeeper;


ScoreKeeper.jsx

.score-keeper-container {
  text-align: center;
  margin: 20px auto;
  width: 80%;
  max-width: 640px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.score-keeper-heading {
  color: teal;
  font-size: 2.5em;
  margin-bottom: 20px;
}

.score-keeper-button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: teal;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.score-keeper-button:hover {
  background-color: darkslategray;
}