Week 6: Implement Dynamic Site Content Using JavaScript

Continue to develop content for the site.

Use the knowledge gained in this week's lecture and Lab to implement dynamic content to a page in your site. Use JavaScript features to perform such things as basic calculations, image rollovers, user prompts, and alerts.

Upon completion of this step, zip up all of the files for the site into one single file and submit the file.

the code pages i have are :

home.html with gallery(slideshow) < !DOCTYPE html> < html> < head> < link rel = "stylesheet" type = "text/css" href = "style.css" /> < /head> < body> < header>

Online Veterinarian Hospital and Rescue

< /header> < div class="container"> < div class="gallery-container" style="width:100%;"> < img class="myslides" src="../img/img1.jpg" style="width:100%"> < img class="myslides" src="../img/img2.jpg" style="width:100%"> < img class="myslides" src="../img/img3.jpg" style="width:100%"> < div class="gal-center gal-container gal-section gal-large gal-text-white gal-display-bottommiddle" style="width:96%">

❮

❯

< /div> < /div> < nav> < ul>

Home

Admission

Staff Details

Contact us

< /ul> < /nav> < article> < p> Online veterinarian is a based website and we are providing free shelter to those animals in need of a family that are looking to save a life. It is established in September of 2017. < /p> < p> Your website content here... < /p> < /article> < footer> your © website name < /div> < script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; var x = document.getElementsByClassName("myslides"); var dots = document.getElementsByClassName("gallerySlide"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; }

x[slideIndex-1].style.display = "block"; } < /script> < /body> < /html>

admission.html < !DOCTYPE html> < html> < head> < link rel = "stylesheet" type = "text/css" href = "style.css" /> < /head> < body> < header>

Online Veterinarian Hospital and Rescue

< /header> < div class="container"> < nav> < ul>

Home

Admission

Staff Details

Contact us

< /ul> < /nav> < article> Admission < p> We are to hire the professional vet doctors and animal rescue teams that will be on the lookout. If the animals are hurt or in need of help we will take care of them and heal them back to health. We save about 500 animals a month. We also take visits to the animal shelter so you can come pick out the animal you would like to save. < /p>

We are to hire the professional vet doctors and animal rescue teams that will be on the lookout. If the animals are hurt or in need of help we will take care of them and heal them back to health. We save about 500 animals a month. We also take visits to the animal shelter so you can come pick out the animal you would like to save. < /p>

Donation < p> Anyone that can help the veterinarian care. Approximate cost of an animal is $100 and that food, medication and shelter. Donation helps us lead to get all the care for the animals in need. Your one Donation can help many animals in need. So, this part needs the most attention. You can become a member and help donate every other month to help us < /p> < table border="1" cellpadding="2" cellspacing="0"> < tr> You can pay for one-year fee worth of< /td> $150 < /tr> < tr> You can pay for the food cost that is $15.99 < /tr> < tr> You can pay for medication $100 < /tr> < /table> < /article> < footer> your © website name < /div> < /body> < /html>

staff.html < !DOCTYPE html> < html> < head> < link rel = "stylesheet" type = "text/css" href = "style.css" /> < /head> < body> < header>

Online Veterinarian Hospital and Rescue

< /header> < div class="container"> < nav> < ul>

Home

Admission

Staff Details

Contact us

< /ul> < /nav> < article> < p> Our staff consists of skilled and well veterinarian doctors
Our staff details, < /p> < table border="1" cellpadding="2" cellspacing="0"> < tr> Name Type < /tr> < tr> Harry Cooper Veterinarian < /tr> < tr> Debbye Turner Veterinarian < /tr> < tr> Lester Crawford Veterinarian < /tr> < tr> Dr. Chris Brown Veterinarian < /tr>

< /article> < footer> your © website name < /div> < /body> < /html>

contact.html < !DOCTYPE html> < html> < head> < link rel = "stylesheet" type = "text/css" href = "style.css" /> < /head> < body> < header>

Online Veterinarian Hospital and Rescue

< /header> < div class="container"> < nav> < ul>

Home

Admission

Staff Details

Contact us

< /ul> < /nav> < article> Contact Us < p> Any problem, please contact us at problem@vetandrescue.com
Any complaint, please contact us at complaint@vetandrescue.com
Any question, please contact us at question@vetandrescue.com

Will get a call back in a one business day and cant wait to hear from you. < /p> < /article> < footer> your © website name < /div> < /body> < /html>

style.css div.container { width: 100%; border: 1px solid gray; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; }

nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; width: 60%; } table { font-family: arial, sans-serif; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; text-align: center; } th { background-color: #dddddd; } .myImg{ cursor:pointer; } header, footer { padding: 1em; color: white; background-color: chocolate; clear: left; text-align: center; } #item_details{ margin-top:12px; } .myslides {display:none} .gal-left, .gal-right, .gal-badge {cursor:pointer} .gal-badge {height:13px;width:13px;padding:0} .gal-center{ text-align : center; } .gal-section, .gal-code{ margin-top: 16px!important; margin-bottom: 16px!important; } .gal-large { font-size: 18px!important; } .gal-container, .gal-panel { padding: 0.01em 16px; } .gal-display-bottommiddle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%); } .gallery-container{ margin:auto; position: relative; margin-top:12px; } .gal-left{ float:left; color: #fff!important; background-color: #000!important; top: 50%; left: 0%; } .gal-right{ color: #fff!important; background-color: #000!important; float:right; }

feedback.html < !DOCTYPE html> < html> < head> < link rel = "stylesheet" type = "text/css" href = "style.css" /> < /head> < body> < header> < h1>Client Feedback Form < /header> < div class="container"> < nav> < ul> < li>Home < li>Admission < li>Staff Details < li>Contact us < li>Feedback < /ul> < /nav> < article> < strong>Feedback < p> Send us your feedback regarding your experience with us.We'd love to hear from you and improve your time with us. < /p> < form action = "thanks.html" method = "post"> < !--

--> < label>First Name: < label>Last Name: < label>Email Address: < label>Client Type New Client < input type="radio" name = "Client Type" value="Existing Client"/> Existing Client < div>How would you rate your experience with our us

< div> < label> < input type= "radio" name = "rate" value = "1"/> < input type= "radio" name = "rate" value = "2"/> 2 < input type= "radio" name = "rate" value = "3"/> 3 < input type= "radio" name = "rate" value = "4"/> 4 < input type= "radio" name = "rate" value = "5"/> 5 < /label> < input type="Submit" onClick = "thanks.html" value = "Submit"> < input type="reset"> < /form> < /article> < footer> your © website name < /div> < /body> < /html>

you can change what ever you want to make it look better