Skip to content

Commit

Permalink
week 13 v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fraju-pc
Fraju-pc committed Jun 27, 2023
1 parent 419ed41 commit 44feb23
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 19 deletions.
43 changes: 43 additions & 0 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/pages/about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<!--Navigation Bar-->
<header id="root">
<script type="module" src="/src/navins.jsx"></script>
</header>

<!--Main Content-->
<br><br>
<div id="wrapper">
<div id="content">
<h1>About the Author: </h1>

<h3>Patrick Corcoran</h3>
<p >Front End Web Development Student and all around guitar nerd</p>
<p >Feel free to check out my Github Repository and YouTube Channel</p><br><br>
</div>
<!--Table for Exterior Links-->
<div id="ctable">
<table>
<tr>
<th>Site</th>
<th>Link</th>
</tr>
<tr>
<td>GitHub Repository</td>
<td><a href="https://github.com/Fraju-pc" target="_blank">Visit My Github</a></td>
</tr>
<tr>
<td>YouTube Channel</td>
<td><a href="https://www.youtube.com/channel/UC5VxCk3XPxpuq1XyBEo3UcQ" target="_blank">Visit My YouTube</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
35 changes: 35 additions & 0 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/pages/contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>

</head>
<body>
<!--Navigation Bar-->
<header id="root">
<script type="module" src="/src/navins.jsx"></script>
</header>

<!--Main Content-->
<br><br>
<div id="wrapper">
<div id="content">
<h3>Contact Me</h3>
<br>
<br>
<p>Feel free to fill out the form below and I will get back to you via Email</p><br>
</div>
<!--Form-->
<div class="loginForm">
<form>
<input type="text" name="firstName" placeholder="Enter First Name"><br><br>
<input type="text" name="lastName" placeholder="Last Name"><br><br>
<input type="text" name="email" placeholder="Email Address"><br><br>
<button id="submit" type="submit" value="submit">Submit</button>
</form>
</div>
</div>
</body>
</html>
23 changes: 23 additions & 0 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/pages/landing.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
</head>
<body>
<!--Navigation Bar-->
<header id="root">
<script type="module" src="/src/navins.jsx"></script>
</header>

<!--Main Content-->
<br><br>
<div id="wrapper">
<div id="content">
<h1>Hey You Made It! </h1>
</div>

</div>
</body>
</html>
73 changes: 58 additions & 15 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/src/LoginForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,65 @@
import { useState } from "react"

export default function LoginForm(){
//States to pull from form
const [userName, setUserName] = useState("");
const [passWord, setPassWord] = useState("");

const handleLogin = (e) => {

e.preventDefault();

// console.log('Username:', username);
// console.log('Password:', password);

//default array of users, keeping it pretty simple here
const users = [
{ username: 'Admin', password: 'asdf', id: 1 },
{ username: 'User1', password: 'qwer', id: 2 },
{ username: 'User2', password: 'uiop', id: 3 },
];
//check for match
const matchedUser = users.find(
(user) => user.username === userName && user.password === passWord
);

if (matchedUser) {
// Redirect to the new webpage
window.location.href = '../pages/landing.html';
} else {
// alert for no match
alert('Invalid username or password');

}

};
//html form
return (
<div className="loginForm">
<form>
<label for="username">User Name:</label><br/>
<input type="text" id="username" placeholder="User Name"/>

<>
<br/>
<br/>
<div id="wrapper">
<h3>Log In</h3>
<br/>
<div className="loginForm">
<form onSubmit={handleLogin}>
<label for="username">User Name:</label><br/>
<input type="text" id="username" value={userName} placeholder="User Name"
onChange={(e) => setUserName(e.target.value)} />

<br/><br/>
<br/><br/>

<label for="password">Password:</label><br/>
<input type="password" class="form-control" id="password" placeholder="Password"/>
<label for="password">Password:</label><br/>
<input type="password" class="form-control" id="password" value={passWord} placeholder="Password"
onChange={(e) => setPassWord(e.target.value)} />


<br/><br/>
<button id="login" type="submit">Login</button>

</form>
</div>
<br/><br/>
<button id="login" type="submit">Login</button>
</form>
</div>
</div>
</>
)
}

{}
}
6 changes: 3 additions & 3 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/src/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ export default function NavBar(){
return(
<nav>
<ul>
<li>Home</li>
<li>Links</li>
<li>Contact</li>
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About</a></li>
<li><a href="../pages/contact.html">Contact</a></li>
</ul>
</nav>
)
Expand Down
42 changes: 41 additions & 1 deletion Week-13-Intro_to_React_Webpack_Components_and_JSX/src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ nav{
nav ul {
display: flex;
flex-direction: row;
justify-content: right;
justify-content: left;
}

nav ul li {
Expand All @@ -37,10 +37,50 @@ nav ul li:active {
background-color: chocolate;
}

#wrapper {
margin: auto;
max-width: 35vw;
text-align: center;
border: 4px solid darkolivegreen;
border-radius: 10px;
box-shadow: 10px 10px lightslategray;

}

.loginForm {
display: flex;
text-align: start;
justify-content: center;
background-color: beige;
padding: 1em;

}

/* Css for About Page */
#content {
text-align: center;
}

#ctable{
display: flex;
text-align: start;
justify-content: center;
background-color: beige;
padding: 1em;


}

#ctable table{
border: 1px solid black;
}
#ctable td{
border: 1px solid black;
margin: 1px;
padding: 1px;
}
#ctable th{
border: 1px solid black;
margin: 1px;
padding: 1px;
}
11 changes: 11 additions & 0 deletions Week-13-Intro_to_React_Webpack_Components_and_JSX/src/navins.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import NavBar from './NavBar.jsx'
import "../src/app.css"


ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<NavBar />
</React.StrictMode>,
)

0 comments on commit 44feb23

Please sign in to comment.