diff --git a/itis3135/scripts/survey.js b/itis3135/scripts/survey.js
index 19a6ed8..852cba2 100644
--- a/itis3135/scripts/survey.js
+++ b/itis3135/scripts/survey.js
@@ -1,14 +1,9 @@
-document.getElementById('introForm').addEventListener('submit', function(event) {
- event.preventDefault(); // Prevent form submission
- if (validateForm()) {
- displayResults();
- }
-});
-
function validateForm() {
- const fields = ['name', 'mascot', 'image', 'imageCaption', 'personalBackground',
- 'professionalBackground', 'academicBackground',
- 'webDevelopment', 'computerPlatform', 'agreement'];
+ const fields = [
+ 'name', 'mascot', 'image', 'imageCaption', 'personalBackground',
+ 'professionalBackground', 'academicBackground', 'webDevelopment',
+ 'computerPlatform', 'agreement'
+ ];
for (let field of fields) {
if (!document.getElementById(field).value) {
alert(`${field.charAt(0).toUpperCase() + field.slice(1)} is required.`);
@@ -19,8 +14,8 @@ function validateForm() {
}
function displayResults() {
- const resultDiv = document.getElementById('result');
- resultDiv.style.display = 'block';
+ const resultDiv = document.querySelector('.result');
+ resultDiv.classList.remove('hidden');
resultDiv.innerHTML = `
Your Introduction Page
Name: ${document.getElementById('name').value}
@@ -32,34 +27,44 @@ function displayResults() {
Academic Background: ${document.getElementById('academicBackground').value}
Background in Web Development: ${document.getElementById('webDevelopment').value}
Primary Computer Platform: ${document.getElementById('computerPlatform').value}
- Courses: ${Array.from(document.getElementsByClassName('course')).map(c => c.value).join(', ')}
+ Courses: ${Array.from(document.getElementsByClassName('course')).map((c) => c.value).join(', ')}
Funny Thing: ${document.getElementById('funnyThing').value}
Anything Else?: ${document.getElementById('anythingElse').value}
`;
document.getElementById('resetLink').style.display = 'block';
}
-document.getElementById('resetLink').addEventListener('click', function() {
+document.getElementById('resetLink').addEventListener('click', function () {
document.getElementById('introForm').reset();
- document.getElementById('result').style.display = 'none';
+ const resultDiv = document.querySelector('.result');
+ resultDiv.classList.add('hidden');
this.style.display = 'none';
});
+
+document.getElementById('introForm').addEventListener('submit', function (event) {
+ event.preventDefault();
+ if (validateForm()) {
+ displayResults();
+ }
+});
+
function addCourse() {
const coursesContainer = document.getElementById('coursesContainer');
const newCourseInput = document.createElement('input');
newCourseInput.type = 'text';
newCourseInput.className = 'course';
newCourseInput.placeholder = 'Enter course name';
-
+
const deleteButton = document.createElement('button');
deleteButton.type = 'button';
deleteButton.innerText = 'Delete';
- deleteButton.onclick = function() {
+ deleteButton.onclick = function () {
coursesContainer.removeChild(newCourseInput);
coursesContainer.removeChild(deleteButton);
};
-
coursesContainer.appendChild(newCourseInput);
coursesContainer.appendChild(deleteButton);
}
+
+document.getElementById('addCourseBtn').addEventListener('click', addCourse);
diff --git a/itis3135/styles/default.css b/itis3135/styles/default.css
index 7b1c0b3..d368df4 100644
--- a/itis3135/styles/default.css
+++ b/itis3135/styles/default.css
@@ -16,8 +16,11 @@ header {
h1 {
margin: 0;
- font-size: 2.5em;
color: hsla(40, 76%, 46%, 0.692);
+ text-align: center;
+ font-size: 2.5rem;
+ color: #ac6b11;
+ margin-bottom: 30px;
}
header p {
@@ -292,8 +295,6 @@ nav ul li {
}
#menu-list img {
- width: 2000px;
- height: auto;
margin: 20px;
border: 10px solid #f5f5f5;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
@@ -306,25 +307,6 @@ nav ul li {
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3);
}
-.accordion {
- background-color: #f1f1f1;
- color: #333;
- cursor: pointer;
- padding: 10px;
- width: 100%;
- border: none;
- text-align: left;
- outline: none;
- font-size: 18px;
- transition: background-color 0.3s, transform 0.3s;
- border-radius: 8px;
-}
-
-.accordion:hover {
- background-color: #ddd;
- transform: scale(1.05);
-}
-
.accordion-content {
padding: 0 18px;
display: none;
@@ -347,13 +329,6 @@ nav ul li {
transform: scale(1.05);
}
-h1 {
- text-align: center;
- font-size: 2.5rem;
- color: #ac6b11;
- margin-bottom: 30px;
-}
-
#about-info {
text-align: center;
max-width: 1000px;
@@ -394,7 +369,7 @@ main.dark-mode {
}
button.theme-button {
- background-color: #fff;
+ background-color: #d1b490;
color: #333;
border: 2px solid #333;
padding: 10px 20px;
@@ -404,53 +379,62 @@ button.theme-button {
}
button.theme-button:hover {
- background-color: #f1f1f1;
+ background-color: #ba4848;
+ color: #fff;
}
-button.theme-button.dark-mode {
+body.dark-mode button.theme-button {
background-color: #333;
color: #fff;
border: 2px solid #fff;
}
-button.theme-button.dark-mode:hover {
+body.dark-mode button.theme-button:hover {
background-color: #444;
}
+
.accordion {
background-color: #f1f1f1;
color: #333;
+ cursor: pointer;
padding: 10px;
+ border: none;
text-align: left;
- border: 1px solid #ddd;
- cursor: pointer;
- transition: background-color 0.3s, color 0.3s;
- width: 100%;
+ font-size: 18px;
+ transition: background-color 0.3s, transform 0.3s;
+ border-radius: 8px;
}
-.accordion-content {
- padding: 10px;
- display: none;
- background-color: #fff;
- color: #333;
- transition: background-color 0.3s, color 0.3s;
+
+.accordion:focus {
+ box-shadow: 0 0 0 3px #007bff;
}
-.accordion.active {
+.accordion:hover {
+ background-color: #ddd;
+}
+
+.accordion:active {
background-color: #ccc;
}
-.accordion.dark-mode {
+
+.dark-mode .accordion {
background-color: #444;
color: #fff;
}
-.accordion-content.dark-mode {
+.dark-mode .accordion-content {
background-color: #555;
color: #fff;
}
-.lightbox.dark-mode {
+.lightbox {
+ background-color: rgba(0, 0, 0, 0.9);
+}
+
+.dark-mode .lightbox {
background-color: rgba(0, 0, 0, 0.9);
}
@@ -467,10 +451,15 @@ button.theme-button.dark-mode:hover {
color: inherit;
}
-#mission-statement h2, p {
+#mission-statement {
+ color: inherit;
+}
+
+#mission-statement p {
color: inherit;
}
+
#contact-form form, label, input {
color: inherit;
}
@@ -519,3 +508,23 @@ body.dark-mode input[type="email"]:focus,
body.dark-mode textarea:focus {
border-color: #d1b490;
}
+
+.image-style {
+ width: 400px;
+ height: auto;
+}
+
+.comic-list {
+ list-style-type: none;
+ padding: 0;
+ text-align: center;
+ font-family: 'Comic Sans MS', cursive;
+}
+
+.comic-list li {
+ display: inline-block;
+}
+
+.hidden {
+ display: none;
+}