-
- WorldWide Frames - See A Better World
-
Items on Sale
-Deals of the Day
- - - -Sunglasses
- - + + return ( +
+
+ WorldWide Frames - See A Better World
+
Items on Sale
+
+
-
+
+ Deals of the Day
+ + + +
+
Sunglasses
+ + +
-
+
- 
-
+
+
+
+ );
}
export default Home;
\ No newline at end of file
diff --git a/src/Pages/LoginPage/LoginPage.css b/src/Pages/LoginPage/LoginPage.css
deleted file mode 100644
index 489d561..0000000
--- a/src/Pages/LoginPage/LoginPage.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.information {
- display: flex;
- flex-direction: column;
- width: 100%;
- justify-content: center;
- align-items: center;
- background-color:aqua;
- }
-
- input {
- width: 250px;
- height: 50px;
- font-size: 20px;
- padding-left: 10px;
- margin: 5px;
-
- }
-
- button {
- width: 320px;
- height: 50px;
- margin-top: 15px;
- }
-
- button:hover {
- cursor: pointer;
- }
-
- .employees {
- display: flex;
- align-items: center;
- flex-direction: column;
- width: 100%;
- }
-
- .employee {
- width: 700px;
- height: auto;
- border: 1px solid black;
- margin: 10px;
- display: flex;
- padding: 10px;
- font-family: 'Courier New', Courier, monospace;
- }
-
- .employee h3 {
- margin: 20px;
- }
\ No newline at end of file
diff --git a/src/Pages/LoginPage/LoginPage.js b/src/Pages/LoginPage/LoginPage.js
deleted file mode 100644
index 40d45ef..0000000
--- a/src/Pages/LoginPage/LoginPage.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useState } from "react";
-import "./LoginPage.css"
-import Axios from "axios";
-
-function Registration() {
- const [username, setUsername] = useState("");
- const [email, setEmail] = useState("");
- const [address, setAddress] = useState("");
- const [password, setPassword] = useState("");
- const [firstname, setFirstname] = useState("");
- const [lastname, setLastname] = useState(0);
- const [phone, setPhone] = useState("");
-
- const addEmployee = () => {
- Axios.post("/create", {
- username: username,
- email: email,
- address: address,
- password: password,
- firstname: firstname,
- lastname: lastname,
- phone: phone,
- }).then((response) =>{
- if (response.data.message) {
- console.log(response.data.message)
- }
- });
- };
-
- return (
-
+
-
-
+
- 
-
+
+
-
- );
+
+
-
- {
- setUsername(event.target.value);
- }}
- />
-
- {
- setPassword(event.target.value);
- }}
- />
-
- {
- setEmail(event.target.value);
- }}
- />
-
- {
- setAddress(event.target.value);
- }}
- />
-
- {
- setFirstname(event.target.value);
- }}
- />
-
- {
- setLastname(event.target.value);
- }}
- />
-
- {
- setPhone(event.target.value);
- }}
- />
-
-
-
- );
-}
-
-export default Registration;
diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
new file mode 100644
index 0000000..40599c3
--- /dev/null
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -0,0 +1,46 @@
+.App1 {
+ min-height: 100vh;
+ background-color: rgb(211, 254, 255);
+ font-family: 'Times New Roman', Times, serif;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+
+.panel1 {
+ height: 500px;
+ font-family: 'Times New Roman', Times, serif;
+ margin: 0;
+ padding: 0;
+}
+
+.header1 {
+ min-height: 10vh;
+ background-color: aqua;
+ font-family: 'Times New Roman', Times, serif;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+
+/*
+* percentage's are used to scale items according to browser resizing
+* can possibly use flex containers for buttons
+*/
+.header2 {
+ position: relative;
+ left: 55%;
+ height: 500px;
+ width: 40%;
+ background-color: rgb(189, 207, 209);
+ font-family: 'Times New Roman', Times, serif;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+}
+
+.panel1 button {
+ position: relative;
+ left: 25%;
+ width: 15%;
+}
\ No newline at end of file
diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
new file mode 100644
index 0000000..55b28b6
--- /dev/null
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -0,0 +1,24 @@
+import "./ProductPage.css"
+
+function Product() {
+ return (
+
+
+ );
+}
+
+export default Product;
\ No newline at end of file
diff --git a/src/Pages/RegistrationPage/RegistrationPage.css b/src/Pages/RegistrationPage/RegistrationPage.css
new file mode 100644
index 0000000..d1a52e6
--- /dev/null
+++ b/src/Pages/RegistrationPage/RegistrationPage.css
@@ -0,0 +1,24 @@
+.information {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: aqua;
+}
+
+.information input {
+ width: 250px;
+ height: 50px;
+ font-size: 20px;
+ padding-left: 10px;
+ margin: 5px;
+}
+
+.information button {
+ height: 30px;
+ width: 250px;
+ font-size: 20px;
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js
new file mode 100644
index 0000000..d845f8e
--- /dev/null
+++ b/src/Pages/RegistrationPage/RegistrationPage.js
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import "./RegistrationPage.css"
+import Axios from "axios";
+import { useHistory } from "react-router-dom";
+
+function Registration() {
+ const [username, setUsername] = useState("");
+ const [email, setEmail] = useState("");
+ const [address, setAddress] = useState("");
+ const [password, setPassword] = useState("");
+ const [firstname, setFirstname] = useState("");
+ const [lastname, setLastname] = useState(0);
+ const [phone, setPhone] = useState("");
+
+ let history = useHistory();
+
+ const registerUser = () => {
+ const data = {
+ username: username,
+ password: password,
+ email: email,
+ address: address,
+ firstname: firstname,
+ lastname: lastname,
+ phone: phone
+ };
+ Axios.post("http://localhost:5000/register", data).then((response) => {
+ if (response.data.error) {
+ alert(response.data.error);
+ console.log("error!");
+ } else {
+ console.log(response);
+ /*history.push("/");*/
+ }
+ });
+ };
+
+ return (
+
+
+
+ WorldWide Frames - See A Better World
+
+ {/* create an overall panel, with header 2, the image, and the button inside of it */}
+
+
+
+
+
+ Name:
+Manufacturer:
+Cost:
+
+
+ {
+ setUsername(event.target.value);
+ }}
+ />
+
+ {
+ setPassword(event.target.value);
+ }}
+ />
+
+ {
+ setEmail(event.target.value);
+ }}
+ />
+
+ {
+ setAddress(event.target.value);
+ }}
+ />
+
+ {
+ setFirstname(event.target.value);
+ }}
+ />
+
+ {
+ setLastname(event.target.value);
+ }}
+ />
+
+ {
+ setPhone(event.target.value);
+ }}
+ />
+
+
+ );
+}
+
+export default Registration;