From 5579a6d1b3d1835b49c5dbbf21a904831d7bf418 Mon Sep 17 00:00:00 2001 From: Dan Marquis Date: Mon, 2 Mar 2020 23:06:54 -0500 Subject: [PATCH] Class updates --- about.html | 10 ++++++++++ dom.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ form.css | 18 ++++++++++++++++++ index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 117 insertions(+) create mode 100644 about.html create mode 100644 dom.js create mode 100644 form.css create mode 100644 index.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..485c855 --- /dev/null +++ b/about.html @@ -0,0 +1,10 @@ + + + + + About + + + + + \ No newline at end of file diff --git a/dom.js b/dom.js new file mode 100644 index 0000000..058f53d --- /dev/null +++ b/dom.js @@ -0,0 +1,44 @@ +function submitForm(event) { + event.preventDefault(); + var formData = document.forms[0].elements; + + var contactData = { + firstName: formData.firstName.value, + lastName: formData.lastName.value, + email: formData.email.value, + termsAccepted: formData.terms.value, + submittedDate: new Date() + }; + + console.log(contactData); + documentMethods(); +} + +function documentMethods() { + var firstNameInput = document.getElementById('first-name'); + var inputTags = document.getElementsByTagName('input'); + var inputGroups = document.getElementsByClassName('input-group'); + + //attributes + firstNameInput.name = 'newName'; + firstNameInput.hidden = true; + + //modify styles + inputTags[1].style.border = "2px solid red"; + inputTags[2].style.margin = "30px"; +} + +function showAbout() { + document.getElementById('home').hidden = true; + document.getElementById('about').hidden = false; + document.getElementsByTagName('button')[0].setAttribute('class', 'submit-btn'); +} + +function showHome() { + document.getElementById('home').hidden = false; + document.getElementById('about').hidden = true; + + //document.createTextNode + document.createElement("h1").innerText = "NAVIGATED HOME"; + document.appendChild(); +} \ No newline at end of file diff --git a/form.css b/form.css new file mode 100644 index 0000000..de6cf71 --- /dev/null +++ b/form.css @@ -0,0 +1,18 @@ +.submit-btn { + padding: 10px; + color: white; + background-color: blue; + border-radius: 5px; +} + +.submit-btn:hover { + opacity: 0.8; +} + +.input-group { + margin: 10px 0 10px 0; +} + +.contact-form { + max-width: 500px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..00c908a --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + Document Object Model + + +
+ +

Forms and Capturing Data

+ +
+
+ Contact Us +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+ + + + + + \ No newline at end of file