From b87aa3654e9ab5fbb88f8dd108d67531d3a43bef Mon Sep 17 00:00:00 2001
From: Ibrahim Mkusa <ibrahimmkusa@gmail.com>
Date: Wed, 26 Apr 2023 19:57:58 -0400
Subject: ex1.11 use <table> <td> <tr> elements to neatly format our output

---
 part1/unicafe/src/App.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/part1/unicafe/src/App.js b/part1/unicafe/src/App.js
index d2ef92b..edc1e63 100644
--- a/part1/unicafe/src/App.js
+++ b/part1/unicafe/src/App.js
@@ -10,7 +10,9 @@ const Button = (props) => {
 
 const StatisticLine = (props) => {
   return (
-    <p>{props.text} {props.count}</p>
+    <tr>
+      <td>{props.text}</td><td>{props.count}</td>
+    </tr>
   )
 }
 
@@ -27,14 +29,14 @@ const Statistics = (props) => {
   const average = (good - bad) / 9.0
   const positive_percent = (good/total) * 100
   return (
-    <>
+    <table>
     <StatisticLine text="good" count={good} />
     <StatisticLine text="neutral" count={bad} />
     <StatisticLine text="bad" count={bad} />
     <StatisticLine text="all" count={total} />
     <StatisticLine text="average" count={average} />
     <StatisticLine text="positive(%)" count={positive_percent} />
-    </>
+    </table>
   )
 }
 
-- 
cgit v1.2.3