diff --git a/Notebook.md b/Notebook.md index ca6d547..ac0ca77 100644 --- a/Notebook.md +++ b/Notebook.md @@ -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 ;) --- \ No newline at end of file diff --git a/form.html b/form.html new file mode 100644 index 0000000..bc578b6 --- /dev/null +++ b/form.html @@ -0,0 +1,72 @@ + + + + + + + Form + + + + +
+

Website Under Construction :(

+
+

Sign Up Form

+

Fill in the form below.

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Preferred Pronouns + +
+ +
+ +
+ +
+ +
+ + +
+
+
+ + \ No newline at end of file diff --git a/form.js b/form.js new file mode 100644 index 0000000..6a9b268 --- /dev/null +++ b/form.js @@ -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(); + } + }); + }); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5ed05c2 --- /dev/null +++ b/styles.css @@ -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); + } */ \ No newline at end of file