Added high level plan and some starter files (forms from HW3)
This commit is contained in:
jme9
+39
-5
@@ -1,11 +1,16 @@
|
|||||||
## Jesse M. Ellis - Development notebook for my personal website.
|
# Jesse M. Ellis - Development notebook for my personal website.
|
||||||
|
|
||||||
- Notebook entries are organized with the most recent at top.
|
Note: *Revision 1 will be developed from 11/24/2024 to 12/11/2024.*
|
||||||
- Revision 1 will be developed from 11/24/2024 to 12/11/2024.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 11/24/2024 - First things first
|
### Table of Contents
|
||||||
|
|
||||||
|
- [11/24/2024 - First things first](#11/24/2024---First-things-first)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11/24/2024 - First things first
|
||||||
|
|
||||||
The point of this website is to build a personal website that highlight's personal projects using concepts we've learned in Caterina Paun's Intro to WebDev at PSU. I am going to attempt to create something that is more oriented toward my personal game development endeavours by theme-ing the website with elements from LunaLight. I will highlight some of the milestones in that project as well as other projects I have done.
|
The point of this website is to build a personal website that highlight's personal projects using concepts we've learned in Caterina Paun's Intro to WebDev at PSU. I am going to attempt to create something that is more oriented toward my personal game development endeavours by theme-ing the website with elements from LunaLight. I will highlight some of the milestones in that project as well as other projects I have done.
|
||||||
|
|
||||||
@@ -16,7 +21,36 @@ To check the boxes around concepts learned in WebDev this site should be built u
|
|||||||
- HTML
|
- HTML
|
||||||
- CSS
|
- CSS
|
||||||
- JavaScript
|
- JavaScript
|
||||||
|
- GitHub pages for deployment
|
||||||
|
|
||||||
Intitial deployment of the site will use GitHub pages.
|
### High Level Implementation Plan
|
||||||
|
|
||||||
|
**Concept**: *This will be a single-page scrolling website with a fixed navigation bar that alows the user to jump to sections.*
|
||||||
|
|
||||||
|
1) Sketch a layout design for the following required sections:
|
||||||
|
|
||||||
|
- Navbar: Fixed at the top.
|
||||||
|
- About: Brief introduction and a professional photo.
|
||||||
|
- Previous Work: Resume highlights or course/skills section.
|
||||||
|
- Projects: Showcase 2-3 projects with links to GitHub/deployed sites.
|
||||||
|
- Contact: Form for user inquiries.
|
||||||
|
2) Build basic HTML structure to represent each section.
|
||||||
|
3) Style the website with CSS.
|
||||||
|
4) Implement website interactivity with Javascript.
|
||||||
|
|
||||||
|
- Scrolling
|
||||||
|
- Form validation
|
||||||
|
- Email contact
|
||||||
|
- Embedded YouTube Video
|
||||||
|
5) Test, Refine and Repeat (steps 3-5)
|
||||||
|
6) Deployment with GitHub pages *(we'll worry about this when we get there)*
|
||||||
|
|
||||||
|
### A starting point
|
||||||
|
|
||||||
|
Just to get things going I'm going to bring some initial files that create a form with user input functionality.
|
||||||
|
|
||||||
|
`form.html`, `form.js` and `styles.css`
|
||||||
|
|
||||||
|
These files create a simple form that gets user input and prints it to the console. We will build the entire website from here ;)
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<title>Form</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<script defer src="form.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h1>Website Under Construction :(</h1>
|
||||||
|
<form action="/submit" class="form-container">
|
||||||
|
<h2>Sign Up Form</h2>
|
||||||
|
<h3>Fill in the form below.</h3>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="uname">Username:</label>
|
||||||
|
<input type="text" id="uname" name="uname" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="email" id="email" name="email" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="pword">Password:</label>
|
||||||
|
<input type="password" id="pword" name="pword" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="dob">Date of birth:</label>
|
||||||
|
<input type="date" id="dob" name="dob" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset class="pronoun-group">
|
||||||
|
<legend>Preferred Pronouns</legend>
|
||||||
|
<label class="radio-label"
|
||||||
|
><input type="radio" name="pronouns" value="she-her" />
|
||||||
|
She/Her</label
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<label class="radio-label"
|
||||||
|
><input type="radio" name="pronouns" value="he-him" /> He/Him</label
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<label class="radio-label"
|
||||||
|
><input type="radio" name="pronouns" value="they-them" />
|
||||||
|
They/Them</label
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<label class="radio-label"
|
||||||
|
><input type="radio" name="pronouns" value="no-preference" /> I
|
||||||
|
prefer not to say</label
|
||||||
|
>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
<button type="reset">Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const form = document.querySelector(".form-container");
|
||||||
|
|
||||||
|
// handle form submission
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// gather form data
|
||||||
|
const formData = new FormData(form);
|
||||||
|
|
||||||
|
// Validate form for empty fields
|
||||||
|
let isValid = true;
|
||||||
|
formData.forEach((value, key) => {
|
||||||
|
if (!value.trim()) {
|
||||||
|
isValid = false;
|
||||||
|
alert(`Please fill out the ${key} field.`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
console.log("========= Form Submission ==========");
|
||||||
|
console.log(` Name: ${formData.get("name")}`);
|
||||||
|
console.log(` Username: ${formData.get("uname")}`);
|
||||||
|
console.log(` Email: ${formData.get("email")}`);
|
||||||
|
console.log(` Date of Birth: ${formData.get("dob")}`);
|
||||||
|
console.log(
|
||||||
|
` Preferred Pronouns: ${formData.get("pronouns") || "Not specified"}`
|
||||||
|
);
|
||||||
|
|
||||||
|
// It seems like we should reset the form after submitting
|
||||||
|
form.reset();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
+271
@@ -0,0 +1,271 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--black: #080808;
|
||||||
|
--white: #fefefe;
|
||||||
|
--gray: #565656;
|
||||||
|
--light-light-gray: rgba(120, 118, 118, 0.1);
|
||||||
|
--light-gray: rgba(120, 118, 118, 0.5);
|
||||||
|
|
||||||
|
--teal: #006060;
|
||||||
|
--violetred: #a2106d;
|
||||||
|
--orange: #ffa500;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--light-light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code for exercise 01-hello */
|
||||||
|
/* .container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background-color: var(--white);
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid var(--light-gray);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* Code for exercise 02-form */
|
||||||
|
form.form-container {
|
||||||
|
width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px auto;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container h2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container h3 {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container .form-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container label {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 150px;
|
||||||
|
text-align: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container fieldset {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container .pronoun-group legend {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container .radio-label {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.form-container input[type="text"],
|
||||||
|
form.form-container input[type="password"],
|
||||||
|
form.form-container input[type="date"] {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container .form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"],
|
||||||
|
.form-container button[type="reset"] {
|
||||||
|
padding: 12px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"] {
|
||||||
|
background-color: var(--black);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="reset"] {
|
||||||
|
background-color: var(--white);
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:hover {
|
||||||
|
background-color: var(--violetred);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="reset"]:hover {
|
||||||
|
background-color: var(--lightgrey);
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--black: #080808;
|
||||||
|
--white: #fefefe;
|
||||||
|
--gray: #565656;
|
||||||
|
--light-light-gray: rgba(120, 118, 118, 0.1);
|
||||||
|
--light-gray: rgba(120, 118, 118, 0.5);
|
||||||
|
--teal: #006060;
|
||||||
|
--violetred: #a2106d;
|
||||||
|
--orange: #ffa500;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--light-light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code for exercise 03-starships */
|
||||||
|
|
||||||
|
/* .btn-group {
|
||||||
|
margin: auto;
|
||||||
|
width: 400px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 80px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--black);
|
||||||
|
color: var(--white);
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--violetred);
|
||||||
|
}
|
||||||
|
|
||||||
|
#results {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-component {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
"title cost"
|
||||||
|
"manufacturer manufacturer"
|
||||||
|
"speed cargo"
|
||||||
|
"speed cargo";
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
grid-template-rows: auto auto 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
width: 500px;
|
||||||
|
height: 250px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--white);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-title {
|
||||||
|
grid-area: title;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-cost {
|
||||||
|
grid-area: cost;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-manufacturer {
|
||||||
|
grid-area: manufacturer;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-speed {
|
||||||
|
grid-area: speed;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px solid var(--light-gray);
|
||||||
|
padding-right: 10px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.starship-cargo {
|
||||||
|
grid-area: cargo;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-text {
|
||||||
|
background-color: var(--white);
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--black);
|
||||||
|
} */
|
||||||
Reference in New Issue
Block a user