Add comments

lulunac27a · lulunac27a · commit 51e6936dbea3 · 2024-07-17T18:59:31.000-05:00
diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!--render root content-->
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,10 +1,12 @@
 .App {
-  text-align: center;
+  /*app content*/
+  text-align: center; /*center text for whole app*/
 }
 
 .App-header {
+  /*app header*/
   background-color: #208040;
-  min-height: 10vh;
+  min-height: 10vh; /*set height to 10% of viewpoint height*/
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,9 +16,9 @@
 }
 
 #points-display {
-  font-weight: bold;
+  font-weight: bold; /*bold the numeric values*/
 }
 
 p {
-  line-height: 120%;
+  line-height: 120%; /*add some line spacing between paragraphs*/
 }
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,14 @@
-import './App.css';
-import { useState } from 'react';
+import "./App.css";
+import { useState } from "react";
 function App() {
-  const [points, setPoints] = useState(0);
+  //app compoment
+  const [points, setPoints] = useState(0); //set initial points to 0
   function addPointsFromClick() {
-    setPoints(points + 1);
+    //add points from clicking a button
+    setPoints(points + 1); //increase points by 1
   }
   return (
+    //dynamic app HTML output
     <div className="App">
       <header className="App-header">Endless Simple Idle Game</header>
       <p>Click the button to add points!</p>
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,14 @@
 body {
+  /*body styles*/
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  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;
+  font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New",
+    monospace; /*set font for code block to monospaced font*/
 }

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,12 @@`
`1`	`1`	`.App {`
`2`		`- text-align: center;`
	`2`	`+ /app content/`
	`3`	`+ text-align: center; /center text for whole app/`
`3`	`4`	`}`
`4`	`5`
`5`	`6`	`.App-header {`
	`7`	`+ /app header/`
`6`	`8`	`background-color: #208040;`
`7`		`- min-height: 10vh;`
	`9`	`+ min-height: 10vh; /set height to 10% of viewpoint height/`
`8`	`10`	`display: flex;`
`9`	`11`	`flex-direction: column;`
`10`	`12`	`align-items: center;`
`@@ -14,9 +16,9 @@`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`#points-display {`
`17`		`- font-weight: bold;`
	`19`	`+ font-weight: bold; /bold the numeric values/`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`p {`
`21`		`- line-height: 120%;`
	`23`	`+ line-height: 120%; /add some line spacing between paragraphs/`
`22`	`24`	`}`