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.
|
||||
- Revision 1 will be developed from 11/24/2024 to 12/11/2024.
|
||||
Note: *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.
|
||||
|
||||
@@ -16,7 +21,36 @@ To check the boxes around concepts learned in WebDev this site should be built u
|
||||
- HTML
|
||||
- CSS
|
||||
- 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