Week 6: Implement Dynamic Site Content Using JavaScript Continue to develop cont

ID: 3587870 • Letter: W

Question

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>
   <h1>Online Veterinarian Hospital and Rescue</h1>
< /header>
< div class="container">
< div class="gallery-container">
< img class="myslides" src="../img/img1.jpg"> 
< img class="myslides" src="../img/img2.jpg">
< img class="myslides" src="../img/img3.jpg">
< div class="gal-center gal-container gal-section gal-large gal-text-white gal-display-bottommiddle">
    <div class="gal-left gal-hover-text-khaki">❮</div>
    <div class="gal-right gal-hover-text-khaki">❯</div>
< /div>
< /div>
< nav>
< ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
< /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</footer>
< /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>
   <h1>Online Veterinarian Hospital and Rescue</h1>
< /header>
< div class="container">
< nav>
< ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
< /ul>
< /nav>
< article>
   <strong>Admission</strong>
< 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>
   <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>

<strong>Donation</strong>
< 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>
   <td>You can pay for one-year fee worth of< /td>
   <td>$150</td>
< /tr>
< tr>
   <td>You can pay for the food cost that is</td>
   <td>$15.99</td>
< /tr>
< tr>
   <td>You can pay for medication</td>
   <td>$100</td>
< /tr>
< /table>
< /article>
< footer> your © website name</footer>
< /div>
< /body>
< /html>

staff.html
< !DOCTYPE html>
< html>
< head>
< link rel = "stylesheet" type = "text/css" href="style.css" />
< /head>
< body>
< header>
   <h1>Online Veterinarian Hospital and Rescue</h1>
< /header>
< div class="container">
< nav>
< ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
< /ul>
< /nav>
< article>
< p>
   Our staff consists of skilled and well veterinarian doctors<br/>
   Our staff details,
< /p>
< table border="1" cellpadding="2" cellspacing="0">
< tr>
   <th>Name</th>
   <th>Type</th>
< /tr>
< tr>
   <td>Harry Cooper</td>
   <td>Veterinarian</td>
< /tr>
< tr>
   <td>Debbye Turner</td>
   <td>Veterinarian</td>
< /tr>
< tr>
   <td>Lester Crawford</td>
   <td>Veterinarian</td>
< /tr>
< tr>
   <td>Dr. Chris Brown</td>
   <td>Veterinarian</td>
< /tr>

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

contact.html
< !DOCTYPE html>
< html>
< head>
< link rel = "stylesheet" type = "text/css" href="style.css" />
< /head>
< body>
< header>
   <h1>Online Veterinarian Hospital and Rescue</h1>
< /header>
< div class="container">
< nav>
< ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
< /ul>
< /nav>
< article>
   <strong>Contact Us</strong>
< p>
   Any problem, please contact us at problem@vetandrescue.com <br/>
   Any complaint, please contact us at complaint@vetandrescue.com <br/>
   Any question, please contact us at question@vetandrescue.com <br/> <br/>
   Will get a call back in a one business day and can’t wait to hear from you.
< /p>
< /article>
< footer> your © website name</footer>
< /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</h1>
< /header>
< div class="container">
< nav>
< ul>
< li><a href="home.html">Home</a></li>
< li><a href="admission.html">Admission</a></li>
< li><a href="staff.html">Staff Details</a></li>
< li><a href="contact.html">Contact us</a></li>
< li><a href="feedback.html">Feedback</a></li>
< /ul>
< /nav>
< article>
< strong>Feedback</strong>
< 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">
< !--<div class="container">-->

< label>First Name:</label><input type = "text" name="firstname" value = ""/><br>
< label>Last Name:</label><input type = "text" name= "lastname" value = ""/><br>
< label>Email Address:</label><input type = "email" name = "email" value = ""/><br>
< label>Client Type<input type="radio" name = "Client Type" value="New Client"/>
New Client
< input type="radio" name = "Client Type" value="Existing Client"/>
Existing Client</label>

< div>How would you rate your experience with our us</div>
< 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><br>

< input type="Submit" value = "Submit">
< input type="reset">
< /form>
< /article>

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

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

Explanation / Answer

Solution===============

Added:

Few CSS enhanchments

Javascript: Fade in for slideshow and donate button

Code================================

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;
}

.gal-left:hover{
background-color: chocolate;

}
.gal-right{
   color: #fff!important;
   background-color: #000;
   float:right;
    width:40px;
}

.gal-right:hover{
background-color: chocolate;

}

.donation tr:hover{
background-color: chocolate;
}

.navigation{
    list-style-type: none;
    margin: -16px;
    padding: 0;
   overflow: hidden;
   background-color: #dddddd;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

.navigation li a {
    display: block;
    color: #000;
    padding: 8px 80px;
    text-decoration: none;
   padding-left: 10px
}

/* Change the link color on hover */
.navigation li a:hover {
background-color: chocolate;
color: white;
}

Home.html======================

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;
}

.gal-left:hover{
background-color: chocolate;

}
.gal-right{
   color: #fff!important;
   background-color: #000;
   float:right;
    width:40px;
}

.gal-right:hover{
background-color: chocolate;

}

.donation tr:hover{
background-color: chocolate;
}

.navigation{
    list-style-type: none;
    margin: -16px;
    padding: 0;
   overflow: hidden;
   background-color: #dddddd;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

.navigation li a {
    display: block;
    color: #000;
    padding: 8px 80px;
    text-decoration: none;
   padding-left: 10px
}

/* Change the link color on hover */
.navigation li a:hover {
background-color: chocolate;
color: white;
}

admissions.html=================

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="style.css" />
<script>
function donate(amt) {
x=confirm("Do you want to donate $"+amt+" to Online Veterinarian Hospital and Rescue");

if(x!=null){
alert("Thank you for donating $"+amt+" to Online Veterinarian Hospital and Rescue");
}

}
</script>
</head>
<body>
<header>
   <h1>Online Veterinarian Hospital and Rescue</h1>
</header>
<div class="container">
<nav>
<ul class ="navigation">
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
</ul>
</nav>
<article>
   <strong>Admission</strong>
<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>
   <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>

<strong>Donation</strong>
<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" class="donation">
<tr>
   <td>You can pay for one-year fee worth of</td>
   <td>$150</td><td><button type="button">Donate</button></td>
</tr>
<tr>
   <td>You can pay for the food cost that is</td>
   <td>$15.99</td><td><button type="button">Donate</button></td>
</tr>
<tr>
   <td>You can pay for medication</td>
   <td>$100</td><td><button type="button">Donate</button></td>
</tr>
</table>
</article>
<footer> your © website name</footer>
</div>
</body>
</html>

staff.html======================

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="style.css" />
</head>
<body>
<header>
   <h1>Online Veterinarian Hospital and Rescue</h1>
</header>
<div class="container">
<nav>
<ul class ="navigation">
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
</ul>
</nav>
<article>
<p>
   Our staff consists of skilled and well veterinarian doctors<br/>
   Our staff details,
</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
   <th>Name</th>
   <th>Type</th>
</tr>
<tr>
   <td>Harry Cooper</td>
   <td>Veterinarian</td>
</tr>
<tr>
   <td>Debbye Turner</td>
   <td>Veterinarian</td>
</tr>
<tr>
   <td>Lester Crawford</td>
   <td>Veterinarian</td>
</tr>
<tr>
   <td>Dr. Chris Brown</td>
   <td>Veterinarian</td>
</tr>

contact.html===============

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="style.css" />
</head>
<body>
<header>
   <h1>Online Veterinarian Hospital and Rescue</h1>
</header>
<div class="container">
<nav>
<ul class ="navigation">
    <li><a href="home.html">Home</a></li>
    <li><a href="admission.html">Admission</a></li>
    <li><a href="staff.html">Staff Details</a></li>
   <li><a href="contact.html">Contact us</a></li>
</ul>
</nav>
<article>
   <strong>Contact Us</strong>
<p>
   Any problem, please contact us at problem@vetandrescue.com <br/>
   Any complaint, please contact us at complaint@vetandrescue.com <br/>
   Any question, please contact us at question@vetandrescue.com <br/> <br/>
   Will get a call back in a one business day and can’t wait to hear from you.
</p>
</article>
<footer> your © website name</footer>
</div>
</body>
</html>

feedback.html=========================

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="style.css" />
</head>
<body>
<header>
<h1>Client Feedback Form</h1>
</header>
<div class="container">
<nav>
<ul class ="navigation">
<li><a href="home.html">Home</a></li>
<li><a href="admission.html">Admission</a></li>
<li><a href="staff.html">Staff Details</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
</nav>
<article>
<strong>Feedback</strong>
<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><input type = "text" name="firstname" value = ""/><br>
<label>Last Name:</label><input type = "text" name= "lastname" value = ""/><br>
<label>Email Address:</label><input type = "email" name = "email" value = ""/><br>
<label>Client Type<input type="radio" name = "Client Type" value="New Client"/>
New Client
<input type="radio" name = "Client Type" value="Existing Client"/>
Existing Client</label>

<div>How would you rate your experience with our us</div>
<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><br>

Navigate

Week 6: 13, 16, 17, 31, 36 and 39 Epilopoulos ch 15, 33 Ch 13 1. Discuss the fol

Week 7 12/4 Can someone help me with this question below, in your own words what

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Week 6: Implement Dynamic Site Content Using JavaScript Continue to develop cont

Question

Explanation / Answer

Related Questions

Navigate