Question

In: Computer Science

I struggle with javascript but for this assingment, I was supposed to create a website with...

I struggle with javascript but for this assingment, I was supposed to create a website with at least 10 HTML files, of course with javascript included. I may be confused but not sure what is the difference between HTML Files and tags. I know what tags are but may have misunderstood the assignment with HTML files.

Your final project is to develop a web site of your choice. It is entirely up to you on what type of web site you want to develop. In the past, I saw students developed their personal web site, a site they developed for their work, family, church, or a site that promoted a friend's business, etc. The choice is yours. Your site must have the following features:

  • Contains at least 10 different HTML files
  • Use of Style Sheet
  • Use of JavaScript
  • Use of images
  • Contain at least one form

Some functionality of your web site can be only a prototype, but not fully functioning. For example, you might have a "Contact Us" page that allows users to send an email to your company. The page will have several input fields, such as Name, Subject, Message, and a Send button. However, when clicking on the Send button, no email is actually sent out. Similarly, you might create a payment processing page that allows the user to enter payment information, such as credit card number, expiration date, etc. But no payment is processed after the user clicks on the submit button.

Solutions

Expert Solution

Note: You can navigate from one html file to another. So 10 or more html files (or pages) can be easily made and you only need to specify href link where you need to navigate to that corresponding page.

You should put all pages in separate files. First of all create a html file and name it as home.html and copy below code of home.html. Later create another file and copy contents in delivery_address.html and so on. Images also I am attaching here. Since many pages are there it is better to save CSS style in separate external file.

---------------

style.css


body {
background-color: #7ebd3666;
font: 200 1.36em/1.4 "Lato", sans-serif;
color: #324e12;
}
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h1{
text-align: center;
margin: .6rem 0 2rem;
}

nav {
   margin: 39px 0;
   background-color: #0b7b0a;
}

nav ul {
   list-style: none;
   position: relative;
   }
  
nav ul li {
   display:inline-block;
   background-color: #0b7b0a;
   }

nav a {
   display:block;
   padding:0 5px;  
   color:#fff;
   font-size:17px;
   line-height: 48px;
   text-decoration:none;
}

nav a:hover {
   background-color: #7ebd3666;
}

.naturescart_product {
box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.3);
max-width: 250px;
margin: auto;
text-align: center;
font-family: arial;
display: inline-block;
}

.cost_product {
color: black;
font-size: 20px;
}

.row_hor {
width: 100%;
text-align: center;
}


* {
box-sizing: border-box;
}

.button {
background-color: #4CAF50; /* Green */ border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}


input[type=text],input[type=number],input[type=email],input[type=tel] {
width: 40%;
padding: 6px;
margin: 2px 0 0px 0;
border: none;
background: #f1f1f1;
}


hr {
border: 1px solid grey;
margin-bottom: 21px;
}

-------------------

home.html

<html>
<head>
<link rel="stylesheet" href="style.css">
<nav>
<ul>

<li><a href="home.html">Home&nbsp;|</a></li>
<li><a href="about_us.html">About Nature Cart&nbsp;|</a>
<li><a href="history.html">History&nbsp;|</a></li>
<li><a href="return_policy.html">Return policy&nbsp;|</a></li>
<li><a href="delivery.html">Delivery&nbsp;|</a></li>
<li><a href="top_sellers.html">Top sellers&nbsp;|</a></li>
<li><a href="contact_us.html">Contact Us&nbsp;|</a></li>
<li><a href="careers.html">Careers&nbsp;|</a></li>


</ul>
</nav>
</head>

<body>

<h1>Nature Cart</h1>
<hr>
<div id="products_showing">
<h2>Nature Cart's Products</h2>
<br>
<div class="row_hor">
   <div class="naturescart_product">
   <input id="pro1" type="checkbox" name="pro1">
   <br>
   <img src="essential_oil.jpg" height="183px" width="250px"/>
   Essential Oil
   <p class="cost_product">$9.85</p>
   Quantity: <input type="number" id="prod1_qty" value="0">
   </div>

   <div class="naturescart_product">
   <input id="pro2" type="checkbox" name="pro2">
   <br>
   <img src="marigold_soap.jpg" height="183px" width="250px"/>
   Marigold Soap
   <p class="cost_product">$5.02</p>
   Quantity: <input type="number" id="prod2_qty" value="0">
   </div>
  
   <div class="naturescart_product">
   <input id="pro3" type="checkbox" name="pro3">
   <br>
   <img src="dried_apricot.jpg" height="183px" width="250px"/>
   Dried Apricot
   <p class="cost_product">$20.39</p>
   Quantity: <input type="number" id="prod3_qty" value="0">
   </div>
</div>
<br><br>
<div class="row_hor">
   <div class="naturescart_product">
   <input id="pro4" type="checkbox" name="pro4">
   <br>
   <img src="SeaBuckthornJuice.jpg" height="183px" width="250px"/>
   Sea Buckthorn Juice
   <p class="cost_product">$12.25</p>
   Quantity: <input type="number" id="prod4_qty" value="0">
   </div>

   <div class="naturescart_product">
   <input id="pro5" type="checkbox" name="pro5">
   <br>
   <img src="CarrotSalad.jpg" height="183px" width="250px"/>
   Carrot Salad
   <p class="cost_product">$6.28</p>
   Quantity: <input type="number" id="prod5_qty" value="0">
   </div>
  
   <div class="naturescart_product">
   <input id="pro6" type="checkbox" name="pro6">
   <br>
   <img src="orangeRose.jpg" height="183px" width="250px"/>
   Orange Rose
   <p class="cost_product">$16.97</p>
   Quantity: <input type="number" id="prod6_qty" value="0">
   </div>
</div>
<h1><button class="button" id="make_order" onclick="make_order()">Purchase Now</button></h1>
</div>

<h1>Buying Details</h1>
Cart Value:<input type="text" id="cart_value" value="0" disabled>
<br>
Shipping Charge:<input type="text" id="shipping_charge" value="0" disabled>
<br>
Amount to Pay:<input type="text" id="amount_to_pay" value="0" disabled>
<br>
<button class="button" onclick="location.href = 'delivery_address.html';">Proceed</button>

</body>

</html>

<script>

function make_order() {
//alert("The Purchae Now button clicked.");
//getElementById() used to retrieve value by id
   var prod1_qty=0;
   var prod2_qty=0;
   var prod3_qty=0;
   var prod4_qty=0;
   var prod5_qty=0;
  
   //check whether product1 is selected
   var p1= document.getElementById("pro1").checked;
   if(p1==true)
   {
   //retrieve quantity
   prod1_qty=$("#prod1_qty").val();
   if(prod1_qty==0){alert("Enter number > 0");}
   //alert(prod1_qty);
   }
  
   //check whether product2 is selected
   var p2= document.getElementById("pro2").checked;
   if(p2==true)
   {
   //retrieve quantity
   prod2_qty=$("#prod2_qty").val();
   if(prod2_qty==0){alert("Enter number > 0");}
   //alert(prod2_qty);
   }
  
   //check whether product3 is selected
   var p3= document.getElementById("pro3").checked;
   if(p3==true)
   {
   //retrieve quantity
   prod3_qty=$("#prod3_qty").val();
   if(prod3_qty==0){alert("Enter number > 0");}
   //alert(prod3_qty);
   }
  
   //check whether product4 is selected
   var p4= document.getElementById("pro4").checked;
   if(p4==true)
   {
   //retrieve quantity
   prod4_qty=$("#prod4_qty").val();
   if(prod4_qty==0){alert("Enter number > 0");}
   //alert(prod4_qty);
   }
  
   //check whether product5 is selected
   var p5= document.getElementById("pro5").checked;
   if(p5==true)
   {
   //retrieve quantity
   prod5_qty=$("#prod5_qty").val();
   if(prod5_qty==0){alert("Enter number > 0");}
   //alert(prod5_qty);
   }
  
   //check whether product6 is selected
   var p6= document.getElementById("pro6").checked;
   if(p6==true)
   {
   //retrieve quantity
   prod6_qty=$("#prod6_qty").val();
   if(prod6_qty==0){alert("Enter number > 0");}
  
   }
  
   if(p1 ==false && p2 ==false && p3 ==false && p4 ==false && p5 ==false && p6 ==false)//if no product selected
   {
   alert("select atleast one product to continue");
  
   }
  
  
   //calculating cost of items
  
   //Calculate the total price for each product ordered.
   var price1=9.85;
   var price2=5.02;
   var price3=20.39;
   var price4=12.25;
   var price5=6.28;
   var price6=16.97;
  
   var total_price_p1=prod1_qty*price1;
   var total_price_p2=prod2_qty*price2;
   var total_price_p3=prod3_qty*price3;
   var total_price_p4=prod4_qty*price4;
   var total_price_p5=prod5_qty*price5;
   var total_price_p6=prod6_qty*price5;
  
   //Calculate the sub total of the entire order.
   var cart_value = total_price_p1+total_price_p2+total_price_p3+total_price_p4+total_price_p5;
   document.getElementById('cart_value').value = cart_value; //copy to cart_value field
   var shipping_charge=0;
   if(cart_value<50)
   {
   shipping_charge=5.25;
   document.getElementById('shipping_charge').value = shipping_charge; //copy to shipping_charge field

   }
   var amount_to_pay=cart_value+shipping_charge;
   document.getElementById('amount_to_pay').value = amount_to_pay; //copy to amount_to_pay field
  
}
</script>

--------------------------------------

delivery_address.html

<html>
<link rel="stylesheet" href="style.css">
<head>
<nav>
<ul>

<li><a href="home.html">Home&nbsp;|</a></li>
</ul>
</nav>
</head>

<body>

<h1>Nature Cart</h1>
<hr>
<div id="delivery_address">
<h2>Delivery Address</h2>
<br>
<form action="payment.html" >
<div class="details">


<label for="name" class="label">Name&nbsp;&nbsp;&nbsp;:</label>

<input name="Cname" type="text" id="Cname" size="36">

<label for="email" class="label">Email:</label>

<input name="Cemail" type="email" id="Cemail" size="36">


<br><br>


<label for="address" class="label">Address: </label>

<input name="Caddress" type="text" id="Caddress" size="20">

<label for="city" class="label">City:&nbsp;&nbsp; </label>

<input name="Ccity" type="text" id="Ccity" size="30">

<br><br>

<label for="state"class="label">State&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>

<select name="Cstate" id="Cstate">

<option value="AUS">Austria</option>
<option value="NW">Newyork</option>
<option value="TNR">Turin</option>
<option value="PND">Piemont</option>

</select>

<label for="zip" class="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</label>
<label for="zip" class="label">Zip: </label>

<input name="Czip" type="number" id="Czip" size="10">

<br>


<label for="phone" class="label">Phone &nbsp;&nbsp;: </label>

<input name="Cphone" type="tel" id="Cphone" size="15" requireds>


</div>
<h1><button class="button" type="submit">Order Now</button></h1>

</form>

</body>

</html>

---------

payment.html


<html>
<link rel="stylesheet" href="style.css">
<head>
<nav>
<ul>

<li><a href="home.html">Home&nbsp;|</a></li>
</ul>
</nav>
</head>

<body>

<h1>Nature Cart</h1>
<hr>
<div id="delivery_address">
<h2>Payment Details</h2>
<br>
<form action="home.html" >
<div class="details">


<label for="name" class="label">Name&nbsp;&nbsp;&nbsp;:</label>
<input name="Cname" type="text" id="Cname" size="36">
<br>
<label for="card" class="label">Card Details:</label>
<input name="Ccard" type="text" id="Ccard" size="16">

<br>

</div>
<h1><button class="button" type="submit">Pay Now</button></h1>

</form>

</body>

</html>

------

similarly create static html pages for about_us.html, history.html, return_policy.html etc.

Output of home page, home.html is given below:

venereology answered 1 hour ago
Next > < Previous

Related Solutions

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
I need to create a web page(JAVASCRIPT) that allows the user to reverse a string. For...
I need to create a web page(JAVASCRIPT) that allows the user to reverse a string. For Example, if the user types Mirror Image, after the button is clicked, the text will say egamI rorriM.You have to implement each button by using a while, do while and for loop. here is a default code <html> <head>    <title>Mirror</title> </head> <body>    <p id="label1">Original Text: <h1 id="text1">Some text goes here!!!</h1></p>    <p id="label2">Mirror Text: <h1 id="text2">!!!ereh seog txet emoS</h1>    <input type="button"...
I need to have someone design a website using Code one JavaScript server application using Node.js...
I need to have someone design a website using Code one JavaScript server application using Node.js for routing, Express.jsfor framework and Handlebars.js for templating Necessary npm modules are: express, express-handlebars, path and body-parser - it willl have a drop down box with 5 names of titles of a picture. - highlite 1 name in dropdown box and there is a select button to make web site go to that picture stored on server.. this is my third question on this...
I'm supposed to create a c++ program which is supposed to take a sentence as an...
I'm supposed to create a c++ program which is supposed to take a sentence as an input and then output a sorted list of the occurrence of each letter. ex. Enter a phrase: It's a hard knock life A2 I2 K2 C1 D1 E1 F1 H1 L1 N1 O1 R1 S1 T1 I was also given a recommended code to use as a bubble sort procedure bubbleSort( A : list of sortable items ) n = length(A) repeat swapped =...
-JavaScript task,  just need the layout, I will fill out the citations and details and aparagraphs. Create...
-JavaScript task,  just need the layout, I will fill out the citations and details and aparagraphs. Create a webpage that is a based on your research on The Pros and Cons of Internet Voting. Research the Pros and Cons of Internet Voting and create an informative webpage. Be sure to include: Use at least three references One of the references must be Joshua Conway, an internet voting expert from UJSC. Your sources are to be cited in a list of references...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g, freshman,junior). Place the optional survey question in a details element that the user can expand to see the question.
i have attached my code here and we are supposed to create two classes. one is...
i have attached my code here and we are supposed to create two classes. one is date the other switches accounts for bank and then displays the bank account,type,name,date(pulled from first class and then prints out. i am having issues getting my code to pull from the first class and dont know how to make it read the data from date class if someone can look at my code and tell me how to fix this i would greatly appreciate...
Javascript. Consider the following code fragment, that is supposed to compute the pixel value let c...
Javascript. Consider the following code fragment, that is supposed to compute the pixel value let c = image.getPixel(x, y); const m1 = (c[0] + c[1] + c[2]) / 3; c = image.getPixel(x + 1, y); const m2 = (c[0] + c[1] + c[2]) / 3; image.setPixel(x, y, [m1 - m2, m1 - m2, m1 - m2]); Give three pairs of pixel values (x, y) = [?, ?, ?] and (x+1, y) = [?, ?, ?] in the input image, for...
I will create a website that sells shirts to people, holidays, events, or school students Categorize...
I will create a website that sells shirts to people, holidays, events, or school students Categorize marketing and advertising strategy and method. Explain the online, offline and social media marketing strategies you will use to bring people to your website? And why? Explain your business e-commerce process Explain in detail all the steps from the time a visit is recorded until the final user buys a product. Conclude your report.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT