From 08ddb54db31a69c770f04e89bbc89dcd2eec9d73 Mon Sep 17 00:00:00 2001
From: unknown <aherold5@huskers.unl.edu>
Date: Mon, 7 Sep 2020 16:23:40 -0500
Subject: [PATCH] Checkpoint 4. Added CSS
---
catch-rate-calc/src/app.js | 2 +-
.../features/catchRateCalc/catchRateCalc.css | 34 +++++++++++++
.../features/catchRateCalc/catchRateCalc.js | 51 ++++++++++---------
3 files changed, 63 insertions(+), 24 deletions(-)
create mode 100644 catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
diff --git a/catch-rate-calc/src/app.js b/catch-rate-calc/src/app.js
index 6526f88..52bf330 100644
--- a/catch-rate-calc/src/app.js
+++ b/catch-rate-calc/src/app.js
@@ -7,7 +7,7 @@ export function App() {
return (
<>
<Route exact path={'/'}>
- <CatchRateCalc label={'Taps'} />
+ <CatchRateCalc label={'RateCalc'} />
</Route>
</>
);
diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
new file mode 100644
index 0000000..6b00171
--- /dev/null
+++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css
@@ -0,0 +1,34 @@
+body {
+ background-color: powderblue;
+}
+h2 {
+ text-align: center;
+ display: block;
+}
+.rate {
+ margin: auto;
+ width: 85%;
+ border: 3px solid green;
+ padding: 25px;
+}
+.stats {
+ margin: auto;
+ width: 75%;
+ border: 3px solid green;
+ padding: 10px;
+}
+.ball {
+ margin: auto;
+ width: 75%;
+ border: 3px solid red;
+ padding: 10px;
+}
+.status {
+ margin: auto;
+ width: 75%;
+ border: 3px solid blue;
+ padding: 10px;
+}
+p {
+ color: red;
+}
diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
index d7d928f..4e158d1 100644
--- a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
+++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js
@@ -1,15 +1,38 @@
import React from 'react';
+import styles from './catchRateCalc.css';
export function CatchRateCalc() {
return (
<main>
- <div class="level">
- <label id="level">Enter the Pokemon's Level:</label>
- <input type="number" id="level" name="level"></input>
+
+ <h2>Gen6 Pokemon Catch Rate Calculator</h2>
+
+ <div class="rate">
+ <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
+ <input type="number" size= "3" id="rate" name="rate"></input>
+ </div>
+
+ <div class="stats">
+ <div class="level">
+ <label for="level">Enter the Pokemon's Level:</label>
+ <input type="number" size="3" name="level" id="level" value="35"></input>
+ </div>
+
+ <div class="hp">
+ <label for="hp">HP Approximation (1% to 100%)</label>
+ <div class="slidecontainer">
+ <input type="range" min="1" max="100" value="50" class="slider" id="myRange"></input>
+ </div>
+ </div>
+
+ <div class="falseSwipe">
+ <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
+ <input type="checkbox" id="falseSwipe" value="1"></input>
+ </div>
</div>
<div class="ball">
- <label id="ball">Ball:</label>
+ <label for="ball">Ball:</label>
<select name="ball">
<option value="1">Poke Ball</option>
@@ -21,27 +44,10 @@ export function CatchRateCalc() {
</select>
</div>
- <div class="rate">
- <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
- <input type="number" id="rate" name="rate"></input>
- </div>
-
- <div class="hp">
- <label for="hp">HP Approximation (1% to 100%)</label>
- <div class="slidecontainer">
- <input type="range" min="1" max="100" value="50" class="slider" id="myRange"></input>
- </div>
- </div>
-
- <div class="falseSwipe">
- <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
- <input type="checkbox" id="falseSwipe" value="1"></input>
- </div>
-
<div class="status">
<label for="status">Status:</label>
- <select name="ball">
+ <select name="status">
<option value="1">None</option>
<option value="1.5">Poisoned</option>
<option value="1.5">Burned</option>
@@ -51,7 +57,6 @@ export function CatchRateCalc() {
</select>
</div>
-
</main >
);
}
\ No newline at end of file
--
GitLab