Hello, I could use some help modifying and adding code in JavaScript. I have att
ID: 3741869 • Letter: H
Question
Hello, I could use some help modifying and adding code in JavaScript. I have attached the code that I have so far. If you could please comment on what you changed or added that would be great. Thank you!
Grading Criteria =======================================================
Index.html ==================================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html" class="active">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="bannerImages">
Banner Images<br/>
<img src="images/banner1.jpg" alt="Banner"/>
<img src="images/banner2.jpg" alt="Banner"/>
<img src="images/banner3.jpg" alt="Banner"/>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Gallery.html ======================================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html" class="active">Gallery</a>
</li>
<li><a href="registration.html">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="gallery">
<div class="gallery">
<a target="_blank" href="images/firefighter.jpg">
<img src="images/firefighter.jpg" alt="firefighter" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/work.jpg">
<img src="images/work.jpg" alt="work" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/silhouette.jpg">
<img src="images/silhouette.jpg" alt="silhouette" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/event.jpg">
<img src="images/event.jpg" alt="event" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Main.css ======================================================================
Invitation_script.js =======================================================================
Overvievw Most Web sites have images. There are many different features and functionality that can be used to work with images via the use of JavaScript. These include preloading, rollovers, and cycling banner ads. In this assessment, you will be working with JavaScript, images, and events, and you will be manipulating the DOM to create an interactive image gallery. Hint: Preloading your images will only work on a hosting server and not your local drive as there's no load time for your images locally. Once you have preloaded those images, you may want to Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that we can apply to multiple situations. For example, rather than specifying an element name or id, we can use a variable that is passed into the function. Directions Use the gallery.html and index.html files that you downloaded in the Zip file in Assessment 1. Create functionality using JavaScript on the following pages: index.html Preload the images (banner1.jpg, banner2.jpg and banner3.jpg found in the images folder) for the banner at the top of the page. Create a cycling two state banner that cycles every three seconds gallery.html Preload the gallery images. Create rollover functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder. Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery Make sure to do the following . Create an onpageload function to preload all of your images. - Create a modularized function to cycle the homepage banner . Create a modularized rollover function for gallery images. Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error- free using the appropriate browser-specific development tool found in the Resources. Take a screen capture of each of your validation results and save it for submission. Note: "Modularized" refers to creating components that can be re purposed without significant changes to coding. Modularized components have no "hard coding of image names, urls, et cetera, in the functions. There is an example JavaScript modularized and non-modularized JavaScript found in the Suggested Resources in the file called "Example Code."Explanation / Answer
============
Please check the scripts being inserted in head element on both pages. I have put preloading logic as well as banner movement. i dont understand what you want to do on rollover on gallery page, hence i have created a function for that and you can fill that as per your need.
Please comment if you need some help on this. I have changed the images src url to demo things, but you can change them back as per your need.
Thanks!
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.