Clean up documentation. Add webapp gif. Minor accessibility fix in fo…

…oter.

README.md

@@ -1,14 +1,20 @@
 # Cards Against Containers
 
-You can deploy your own microservices to return a random question or a random answer from the [Cards Against Containers](
-https://github.com/cardsagainstcontainers/deck) deck of cards!
+You can now get a random question and a random answer from [Cards Against Containers](https://github.com/cardsagainstcontainers/deck) deck of cards!
 
 ## REST API Server
 
-The rest_api/ directory contains the instruction, the code and the configuration files to test, build and deploy the server.  The currently supported endpoints are documented there as well.
+The [rest_api/](rest_api/) directory contains the code and the configuration files to test, build and deploy the REST API server the Google Cloud Platform.
 
-The currently supported enpoints are the following:
-* GET `/api/v1/question`
-* GET `/api/v1/answer`
+The currently supported enpoints are the following. As of v1, the endpoints return a random question and a random answer.
 
-## Web App (Todo!)
+- GET `/api/v1/question`
+- GET `/api/v1/answer`
+
+## Web Application
+
+The [ui/](ui/) directory contains the web application code and the configuration files to accompany the REST API server. The web application displays a random question and a random answer from Cards Against Containers.
+
+![Alt Text](ui/src/images/webapp.gif)
+
+See the deplolyed web application here: https://cards-against-containers.web.app/.

rest-api/README.md

@@ -1,6 +1,6 @@
 # REST API Server for Cards Against Containers
 
-This directory contains the source files for the REST API server and the configuration files associated with it.
+This directory contains the source files for the REST API server and the configuration files for deploying the server to Google Cloud Platform.
 
 ## 🚀 Quick Start
 

rest-api/question/question.go

@@ -131,6 +131,6 @@ func GetRandomQuestionV1(w http.ResponseWriter, r *http.Request) {
 	randomQuestion := question[questionIndex]
 	numAnswer := int(math.Max(float64(strings.Count(randomQuestion, "________")), 1.0))
 	response := ResponseQuestion{Index: questionIndex, Question: randomQuestion, NumAnswer: numAnswer}
-	log.Printf("Index = %d. Random question: %s, Number of answers: %d", response.Index, response.Question, response.NumAnswer)
+	log.Printf("Index = %d. Random question: \"%s\" Number of answers: %d.", response.Index, response.Question, response.NumAnswer)
 	json.NewEncoder(w).Encode(response)
 }

ui/README.md

@@ -1,5 +1,7 @@
 # Web Application for Cards Against Containers
 
+This directory contains the source files for the UI displaying a random question card and a random answer card.
+
 ## 🚀 Quick Start
 
 ### Run webapp locally
@@ -10,7 +12,11 @@ Node.js should be installed and configured.
 2. `npm install`
 3. `npm run develop` (or `gatsby develop`)
 
-## Deploy
+### Testing
+
+(Todo!)
+
+### Deploy
 
 Firebase project has been created and Firebase CLI should be installed. Please see [Google Firebase Documentation](https://firebase.google.com/docs/web/setup) for details.
 

ui/src/components/footer.js

@@ -9,6 +9,17 @@ const useStyles = makeStyles({
   footer: {
     padding: "5px",
   },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap" /* added line */,
+    border: "0",
+  },
 })
 
 const Footer = ({ author, homepageLink, githubLink }) => {
@@ -20,11 +31,13 @@ const Footer = ({ author, homepageLink, githubLink }) => {
         <p>
           Made with{" "}
           <span role="img" aria-label="heart">
-            💖{" "}
+            <span className={classes.srOnly}>Love</span>
+            ❤️{" "}
           </span>{" "}
           by <a href={homepageLink}>{author}</a> © {new Date().getFullYear()}.{" "}
           <a href={githubLink}>
-            <GitHubIcon />
+            <span className={classes.srOnly}>Github Repo</span>
+            <GitHubIcon aria-label="github" />
           </a>
         </p>
       </footer>