Part 4, Client Project

shyamp1-byte · Nov 30, 2024 · b42f463 · b42f463
1 parent a10908f
commit b42f463
Show file tree

Hide file tree

Showing 15 changed files with 173 additions and 137 deletions.
diff --git a/itis3135/byo_intro.html b/itis3135/byo_intro.html
@@ -6,7 +6,7 @@
     <title>BYO Intro</title>
     <link rel="stylesheet" href="styles/default.css">
     <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
-    <script src="Scripts/survey.js" defer></script>
+    <script src="scripts/survey.js" defer></script>
 </head>
 <body>
     <header>
@@ -16,7 +16,7 @@
     <main>
         <h2>BYO Intro</h2>
         <h3>Time to BYO Intro page, please fill out the form below so we can create your own page.</h3>
-        <form id="introForm">
+        <form id="intro-form">
             <label for="name">Name:</label>
             <input type="text" id="name" value="Your Name" required>
 
@@ -26,35 +26,35 @@ <h3>Time to BYO Intro page, please fill out the form below so we can create your
             <label for="image">Image:</label>
             <input type="file" id="image" accept=".png, .jpg" required>
 
-            <label for="imageCaption">Image Caption:</label>
-            <input type="text" id="imageCaption" value="Your Caption" required>
+            <label for="image-caption">Image Caption:</label>
+            <input type="text" id="image-caption" value="Your Caption" required>
 
-            <label for="personalBackground">Personal Background:</label>
-            <textarea id="personalBackground" required>Your Background</textarea>
+            <label for="personal-background">Personal Background:</label>
+            <textarea id="personal-background" required>Your Background</textarea>
 
-            <label for="professionalBackground">Professional Background:</label>
-            <textarea id="professionalBackground" required>Your Professional Background</textarea>
+            <label for="professional-background">Professional Background:</label>
+            <textarea id="professional-background" required>Your Professional Background</textarea>
 
-            <label for="academicBackground">Academic Background:</label>
-            <textarea id="academicBackground" required>Your Academic Background</textarea>
+            <label for="academic-background">Academic Background:</label>
+            <textarea id="academic-background" required>Your Academic Background</textarea>
 
-            <label for="webDevelopment">Background in Web Development:</label>
-            <textarea id="webDevelopment" required>Your Background</textarea>
+            <label for="web-development">Background in Web Development:</label>
+            <textarea id="web-development" required>Your Background</textarea>
 
-            <label for="computerPlatform">Primary Computer Platform:</label>
-            <input type="text" id="computerPlatform" required>Your Platform
+            <label for="computer-platform">Primary Computer Platform:</label>
+            <input type="text" id="computer-platform" required>Your Platform
 
-            <div id="coursesContainer">
+            <div id="courses-container">
                 <label>Courses Currently Taking:</label>
                 <input type="text" class="course" placeholder="Enter course name">
-                <button type="button" onclick="addCourse()">Add Course</button>
+                <div id="result" class="hidden"></div>
             </div>
 
-            <label for="funnyThing">Funny Thing:</label>
-            <textarea id="funnyThing"></textarea>
+            <label for="funny-thing">Funny Thing:</label>
+            <textarea id="funny-thing"></textarea>
 
-            <label for="anythingElse">Anything Else?</label>
-            <textarea id="anythingElse"></textarea>
+            <label for="anything-else">Anything Else?</label>
+            <textarea id="anything-else"></textarea>
 
             <input type="checkbox" id="agreement" required>
             <label for="agreement">I understand that what is on this page is not password protected and I will not put anything here that I don’t want publicly available.</label>
@@ -63,8 +63,8 @@ <h3>Time to BYO Intro page, please fill out the form below so we can create your
             <input type="reset" value="Reset">
         </form>
 
-        <div id="result" style="display:none;"></div>
-        <a href="#" id="resetLink" style="display:none;">Reset</a>
+        <div class="result hidden"></div>
+        <a href="#" id="reset-link" class="hidden">Reset</a>
     </main>
 
     <footer>

diff --git a/itis3135/clientProject/about.html b/itis3135/clientProject/about.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../styles/default.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
+
 </head>
 <body>
     <header>
@@ -45,14 +47,16 @@ <h2 class="accordion">Our Team</h2>
 
         document.querySelectorAll('[data-include]').forEach(function(el) {
             fetch(el.getAttribute('data-include'))
-                .then(response => response.text())
-                .then(data => {
-                    el.innerHTML = data;
-                })
-                .catch(err => {
-                    console.error('Failed to include HTML:', err);
-                });
+            .then((response) => response.text())
+            .then((data) => {
+                el.innerHTML = data;
+            })
+            .catch((err) => {
+                console.error('Failed to include HTML:', err);
+            });
         });
+
+
 
         $(document).ready(function() {
             $(".accordion").click(function() {

diff --git a/itis3135/clientProject/components2/footer2.html b/itis3135/clientProject/components2/footer2.html
@@ -8,7 +8,7 @@
     <a href="https://www.codecademy.com/profiles/shyamPedibhotla0475886770" target="_blank">Codeacademy</a>
     <a href="https://www.linkedin.com/in/shyam-pedibhotla-154a67180/" target="_blank">LinkedIn</a>
 
-<p><a href="pedibhotlaincorporated.co">Pedibhotla Incorporated</a> &copy;2024</p>
+    <p><a href="pedibhotlaincorporated.co">Pedibhotla Incorporated</a> &copy;2024, <a href="https://www.freecodecamp.org/certification/shyamPedibhotla/responsive-web-design" target="_blank"><em>Certified in Responsive Web Design</em></a>, <a href="https://www.freecodecamp.org/certification/shyamPedibhotla/javascript-algorithms-and-data-structures-v8" target="_blank"><em>Certified in JS</em></a> </p>
     <ul>
         <li><a href="https://validator.w3.org/" target="_blank">HTML Validation</a></li>
         <li><a href="https://jigsaw.w3.org/css-validator/" target="_blank">CSS Validation</a></li>

diff --git a/itis3135/clientProject/components2/header2.html b/itis3135/clientProject/components2/header2.html
@@ -11,8 +11,8 @@ <h1>Kriya Kitchen || Home</h1>
         </nav>
 
         <nav>
-            <ul style="list-style-type: none; padding: 0; text-align: center; font-family: Comic Sans MS;">
-                <li style="display: inline-block;">
+            <ul class="no-style">
+                <li class="inline-block">
                 </li>
-            </ul>
+            </ul>            
         </nav>
diff --git a/itis3135/clientProject/contact.html b/itis3135/clientProject/contact.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../styles/default.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
+
 </head>
 <body>
     <header>
@@ -44,13 +46,13 @@ <h1>Contact Us</h1>
 
         document.querySelectorAll('[data-include]').forEach(function(el) {
             fetch(el.getAttribute('data-include'))
-                .then(response => response.text())
-                .then(data => {
-                    el.innerHTML = data;
-                })
-                .catch(err => {
-                    console.error('Failed to include HTML:', err);
-                });
+            .then((response) => response.text())
+            .then((data) => {
+                el.innerHTML = data;
+            })
+            .catch((err) => {
+                console.error('Failed to include HTML:', err);
+            });
         });
 
         document.getElementById('theme-toggle').addEventListener('click', function() {

diff --git a/itis3135/clientProject/events.html b/itis3135/clientProject/events.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../styles/default.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
+
 </head>
 <body>
     <header>
@@ -37,13 +39,13 @@ <h1>Upcoming Events</h1>
 
         document.querySelectorAll('[data-include]').forEach(function(el) {
             fetch(el.getAttribute('data-include'))
-                .then(response => response.text())
-                .then(data => {
-                    el.innerHTML = data;
-                })
-                .catch(err => {
-                    console.error('Failed to include HTML:', err);
-                });
+            .then((response) => response.text())
+            .then((data) => {
+                el.innerHTML = data;
+            })
+            .catch((err) => {
+                console.error('Failed to include HTML:', err);
+            });
         });
 
         document.getElementById('theme-toggle').addEventListener('click', function() {

diff --git a/itis3135/clientProject/index.html b/itis3135/clientProject/index.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../styles/default.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
+
 </head>
 <body>
     <header>
@@ -39,13 +41,13 @@ <h2>Our Mission</h2>
 
         document.querySelectorAll('[data-include]').forEach(function(el) {
             fetch(el.getAttribute('data-include'))
-                .then(response => response.text())
-                .then(data => {
-                    el.innerHTML = data;
-                })
-                .catch(err => {
-                    console.error('Failed to include HTML:', err);
-                });
+            .then((response) => response.text())
+            .then((data) => {
+                el.innerHTML = data;
+            })
+            .catch((err) => {
+                console.error('Failed to include HTML:', err);
+            });
         });
 
         document.getElementById('theme-toggle').addEventListener('click', function() {

diff --git a/itis3135/clientProject/menu.html b/itis3135/clientProject/menu.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../styles/default.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
+
     <style>
         #menu-list img {
             width: 300px;
@@ -31,7 +33,11 @@
             max-width: 90%;
             max-height: 90%;
         }
-        .lightbox.close {
+        .lightbox {
+            display: block;
+        }
+
+        .is-closed .lightbox {
             display: none;
         }
     </style>
@@ -71,11 +77,13 @@ <h1>Our Menu</h1>
 
         document.querySelectorAll('[data-include]').forEach(function(el) {
             fetch(el.getAttribute('data-include'))
-                .then(response => response.text())
-                .then(data => {
-                    el.innerHTML = data;
-                })
-                .catch(err => console.error('Failed to include HTML:', err));
+            .then((response) => response.text())
+            .then((data) => {
+                el.innerHTML = data;
+            })
+            .catch((err) => {
+                console.error('Failed to include HTML:', err);
+            });
         });
 
         document.getElementById('theme-toggle').addEventListener('click', function() {

diff --git a/itis3135/clientProject/project_overview.html b/itis3135/clientProject/project_overview.html
@@ -100,11 +100,15 @@ <h2>Page Designs</h2>
 
         <section id="dynamic-functionality">
             <h2> Dynamic Functionality</h2>
-            <h3>Desired Dynamic</h3>
-            <p>I plan to add an <strong>Interactive Image Carousel</strong> that lets users look through multiple food events. The carousel will include navigation controls, so users can scroll through the images either automatically or by clicking "next" and "previous" buttons.</p>
+            <h3>Light to Dark Mode Toggle</h3>
+            <p>Users will be able to switch between light and dark themes on the website</p>
 
-            <h3>Purpose</h3>
-            <p>The purpose of the <strong>Image Carousel</strong> is to display various photos, like the restaurant's dishes, in an easy-to-use way. This feature gives users a chance to see more images without taking up too much space on the page, making the website more interactive for users.</p>
+            <h3>About Us Accordion and Lightbox</h3>
+            <p>The About Us section will include an accordion feature, and a lightbox will display images when clicked</p>
+
+            <h3>Menu Enlarge Feature</h3>
+            <p>Users can enlarge menu images by hovering over them, creating an interactive experience</p>
+
         </section>
 
     </main>

diff --git a/itis3135/components/header.html b/itis3135/components/header.html
@@ -25,8 +25,8 @@ <h1>Shyam Pedibhotla's Speedy Panther || ITIS 3135</h1>
         </nav>
 
         <nav>
-            <ul style="list-style-type: none; padding: 0; text-align: center; font-family: Comic Sans MS;">
-                <li style="display: inline-block;">
-                </li>
+            <ul class="comic-list">
+                <li></li>
             </ul>
+
         </nav>
diff --git a/itis3135/introduction.html b/itis3135/introduction.html
@@ -16,7 +16,7 @@
     <main>
         <h2>About Me</h2>
 
-        <img src="images/IMG_0657.jpg" alt="Picture of Shyam Pedibhotla" style="width: 400px; height: auto;">
+        <img src="images/IMG_0657.jpg" alt="Picture of Shyam Pedibhotla" class="image-style">
         <section>
             <h3>Personal Background</h3>
             <p>Hello, my name is Shyam Pedibhotla. I was born in Columbus, Ohio; however, I moved to Cary, North Carolina when I was 1 year old. In my spare time, I enjoy playing soccer and tennis.</p>
@@ -38,7 +38,7 @@ <h3>Primary Computer Platform</h3>
         </section>
 
         <section>
-            <h3>Courses I’m Taking, & Why</h3>
+            <h3>Courses I'm Taking and Why</h3>
             <ul>
                 <li>ITSC 2181 (Introduction to Computer Systems) - Required</li>
                 <li>ITIS 3135 (Web App Design and Development) - Required</li>

diff --git a/itis3135/review1.html b/itis3135/review1.html
@@ -15,7 +15,7 @@
     <main>
         <h2>Peer Review for: Deguzman, Matthew</h2>
         <figure>
-            <img src="images/Matt_Site.png" style="width: 50%;">
+            <img src="images/Matt_Site.png" alt="Matthew's Website">
             <figcaption><a href="https://webpages.charlotte.edu/mdeguzm2/itis3135/clientproject/" target="_blank">Evaluated Website</a></figcaption>
         </figure>
         <section>

diff --git a/itis3135/review2.html b/itis3135/review2.html
@@ -15,7 +15,7 @@
     <main>
         <h2>Peer Review for: Garces Barona, Pablo</h2>
         <figure>
-            <img src="images/Pablo_Site.png" style="width: 50%;">
+            <img src="images/Pablo_Site.png" alt="Pablo's Website">
             <figcaption><a href="https://webpages.charlotte.edu/pgarces/itis3135/bussiness/index.html" target="_blank">Evaluated Website</a></figcaption>
         </figure>
         <section>