HTML Developing project built upon on a previous one
Assignment #3 Create three new web pages and JSON data for your website. One web page will be a “Product” page, one will be a “Contact Us” page, and one will be an “About Us” page. You’ll create one hard-coded JSON file that will contain the product information to display in the product page. You’ll also create JSON data dynamically, based on the user’s product selections, and store it locally with the web page. Details for the product page, contact us page, about us page, and the data files are listed below. Product Page – Name this page product_abc.htm (where abc represents your initials). You will need to include the company name at the top with the logo image to the right of the company name (consistent with the other pages). The colors, font styles, etc. should match those used in your previous lab assignments and should be handled with external CSS. Only minimal inline styling is acceptable and only when necessary to override styling from the external CSS file. Name : product_sk.html At a minimum, you must meet the following requirements: • H2 heading – to display “Our Products” • Sort options above the product information to allow the user to sort the products by: o Product ID – Ascending o Product ID – Descending o Product Name – Ascending o Product Name – Descending o Product Price – Ascending o Product Price _Descending • All products must be put in a table and should be sorted by Product ID in ascending order when the page loads. Pull the product information for the products (you need at least 10) from the data source file, which you will create yourself. You will need to show an image for each product (no sort option will exist for the image column), a product ID, product name, description, and price. You will also provide an input element for each product in which the user may specify a Quantity to purchase (allow only whole numbers greater than or equal to 0). PLEASE USE THE FOLLOWING INFO FOR THE PRODUCTS Product Product ID Name 101 Jasmine Tea (500g) Images Description Price Fragrant and aromatic jasmine flowers layered with tea leaves to make our subtly sweet Jasmine Tea $14.99 102 Black Tea (500g) Our bold aromatic black tea with robust flavors with earthy aroma $11.99 103 Peppermint Tea (500g) This has a crisp mint taste that aids in digestion and soothes your mind and body $13.99 104 Green Tea Matcha (250g) Our traditional Japanese tea Finely ground $19.99 green tea leaves 105 Oolong Tea (500g) Earthy flavor between black and green tea with rich honey flavoring that supports heart health and digestion $13.99 106 Tea Infuser (1 count) This is a stainless-steel tool that help you infuse loose leaf tea in hot water to best extract its flavor and aroma $21.99 107 Clay Teapot (1 Count) This clay teapot is handmade with great skill and craftsmanship. The clay can help enhance the flavor with earthiness that absorbs flavor with time and use. $60.00 108 Glass Tea Cup (4 Count) This clear and transparent teacup will help you enjoy the color and richness of the tea. This is durable and reliable. $20.99 109 Ceramic Tea Cups (2 Count) Beautiful handmade ceramic tea cups that enhance your tea drinking ritual $25 110 Milk Pot Ceramic • Ceramic milk pot that can be used to froth or heat milk to add to your tea Submit and Cancel buttons at the bottom of the page o Submit – Confirms with the message, “Are you sure you want to order the following: ” (each item with a quantity > 0 should be listed in a separate line in the confirmation dialog box). If confirmed, create the JSON data file containing the product ID and quantity for each product that has a quantity > 0, then display an alert to thank and inform the user that their order has been placed. If the user does not confirm, no action is necessary. o Reset – confirms with the message, “Are you sure you want to cancel your selections?” If confirmed, clear the selected quantities. If the user does not confirm, no action is necessary. Contact Us Page – Name this page contact_abc.htm (where abc represents your initials). You will need to include the company name at the top with the logo image to the right of the company name (consistent with the Survey and Contact Us pages). You will also need to include the following information under the company name (also to the left of the image): Name for Contact Us Page: contact_sk.html • H2 heading – to display “Contact Us” • Div with the following contact information: o company name o full physical address o phone number o fax number o customer service email address $21 PLEASE USE THIS FOR ABOVE CRITERIA Himalayan Tea Group 13030 Preston Rd STE 100, Frisco, TX 75035 Phone Number: 555-1717-4444 Fax Number: 1433-201-0417 Customer Service Email Address: [email protected] • Google map with driving directions (the map may appear to the right or below the other page content (wherever you deem appropriate, as long as it’s near the address and large enough to show clearly on the page). This should be “embedded” into your page from Google Maps. About Us Page – Name this page about_abc.htm (where abc represents your initials). You will need to include the company name at the top with the logo image to the right of the company name (consistent with the Survey and Contact Us pages). You will also need to include the following information under the company name (also to the left of the image): About us Page name: about_sk.html • H2 heading – to display “About Us” • Brief company history (at least one paragraph) • Mission Statement (one paragraph) • Info about key people in the organization, neatly arranged in a table (you should have at least 3 people listed): o Name, Title o Picture o Brief Bio • PLEASE USE THIS FOR ABOVE CRITERIA About Us Our founder Ms. Shree Smith was sick of the bland and bitter tasting tea bags filled with artificial flavoring and aroma. She took a big risk with risking her saving and left her job to do learn and research about tea leaves in the Himalayas. She also studied Ayurveda and how natural teas can help your mind and body holistically. She started this company with all the knowledge and passion to share her love for tea with the community. We here at Himalayan Tea Group are committed to bring the authentic flavors of natural teal with no artificial flavorings and additives and perfume into the homes of our customers straight from the tea hills into your homes. We aim to sustainably farm and harvest tea leaves without compromising in flavor and quality. KEY PEOPLE Name Shree Smith Title Founder and CEO Picture Bio Our Founder risked her saving and gave up her successful corporate job to start this company. Sawyer Jackson CFO and Marketing Our CFO started working in the hospitality industry and joined our team to help our team to be better for our customers. Natalie Matthews Head of Sales She is responsible for all the sales to all over the US and other vendors to grow our company and customer base. Product Data File – You will need to create a JSON data file containing all product information (must use Chrome Server or similar for this to work). All products should be related to your product theme. Include an image name, product ID, product name, description, price for each product. This will be used to populate the product information on your “product” page. For uniformity, product data must be entered into a table and each image must have the same dimensions (you should crop your images if necessary). Menu – You will need to create a uniform menu that appears on all of your pages (home page, product page, contact us, and about us page). The menu needs to allow navigation between these four pages. Make sure your home page (index.html) opens when the website is launched. Page Headings – Page headings must be consistent across all pages, including those from Projects 1 and 2. Navigation – The user should be able to navigate between the Home, Product, Contact Us, and About Us pages using the menu, but they will navigate to the Survey page (from Lab Assignment 1) only if they are selected to participate in the survey (via the randomly-generated number criteria from Assignment 2). If selected, display a “confirm” dialog box to inform them they have been selected and to ask them if they would like to participate (this “confirm” window will replace the current “alert” window from Project 2). If the user confirms, display the survey. If not, do nothing. Your grade will be based on your adherence to the requirements, overall appearance and design, and ease-of-use. Submission Instructions All files (.htm, .css, .js, .json, and image files) must be saved in a single folder named “Lab3_sk”). Zip the folder Product Page Example: *** NOTE: This is just to give you an idea of how the product page should look, but it doesn’t meet all the requirements. For example, the company name and logo do not appear as required, and the menu doesn’t allow for navigation to the About Us page. Please see the instructions above for the specific requirements. *** Contact Us Page Example: *** NOTE: This is just to give you an idea of how the product page should look, but it doesn’t meet all the requirements. For example, the company name and logo do not appear as required, and the menu doesn’t allow for navigation to the About Us page. Please see the instructions above for the specific requirements. ***
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
