From 36c8653ee17b813609e824bf6b5ca0cb8d40f9fb Mon Sep 17 00:00:00 2001
From: "sigonasr2, Sig, Sigo" <sigonasr2@gmail.com>
Date: Tue, 14 Dec 2021 16:35:11 +0000
Subject: [PATCH] Look and feel included.

---
 equations/src/App.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/equations/src/App.js b/equations/src/App.js
index c4bc1ae..987358b 100644
--- a/equations/src/App.js
+++ b/equations/src/App.js
@@ -15,7 +15,13 @@ function EquationGroup(p) {
 	
 	return <>
 	<span style={{fontSize:"24px"}}>(</span>
-	{arr.map((eq,i)=>Array.isArray(eq)?<EquationGroup equation={myArr} setEquation={setMyArr} data={data} arr={eq} key={i} id={i}/>:eq==="×"||eq==="-"||eq==="+"||eq==="÷"?<EquationOperator equation={myArr} setEquation={setMyArr} data={data} operator={eq} key={i} id={i}/>:<EquationValue equation={myArr} setEquation={setMyArr} data={data} val={eq} key={i} id={i}/>)}
+		<div style={{display:"inline-block",border:"3px solid green"}}>
+			<button style={{backgroundColor:"blue",color:"white"}}>Add Value</button>
+			<button style={{backgroundColor:"green",color:"white"}}>Add Group</button>
+			<button style={{backgroundColor:"beige",color:"black"}}>Add Operator</button>
+			<br/>
+			{arr.map((eq,i)=>Array.isArray(eq)?<EquationGroup equation={myArr} setEquation={setMyArr} data={data} arr={eq} key={i} id={i}/>:eq==="×"||eq==="-"||eq==="+"||eq==="÷"?<EquationOperator equation={myArr} setEquation={setMyArr} data={data} operator={eq} key={i} id={i}/>:<EquationValue equation={myArr} setEquation={setMyArr} data={data} val={eq} key={i} id={i}/>)}
+		</div>
 	<span style={{fontSize:"24px"}}>)</span>
 	</>
 }
@@ -31,9 +37,9 @@ function EquationOperator(p) {
 		setEquation(eqArr)
 	},[op])
 	
-	return <>
-	{operator}
-	</>
+	return <select value={op} defaultValue={operator} onChange={(ev)=>{setOp(ev.currentTarget.value)}}>
+		{["+","-","×","÷"].map((sign)=><option key={sign} value={sign}>{sign}</option>)}
+	</select>
 }
 
 function EquationValue(p) {
@@ -48,7 +54,9 @@ function EquationValue(p) {
 	},[item])
 	
 	return <div style={{display:"inline-block",border:"1px solid black"}}>
-	{val}
+	<select value={item} defaultValue={val} onChange={(ev)=>{setItem(ev.currentTarget.value)}}>
+		{Object.keys(data).map((key)=><option key={key} value={key}>{key}</option>)}
+	</select>
 	<br/>
 	{data[val]}
 	</div>