Microsoft Word - Rio Salado CIS166AA Javascript Lesson 14: At-Home Final Exam Final Project Requirements View Glossary Your final project is ultimately a website. This should be a simple website that...

1 answer below »
I need the 4 pages of HTML / CSS and Javascript completed with the basic functions listed in the attachment. I will provide the folder with the pages setup and basic interaction needed using the javascript language.


Microsoft Word - Rio Salado CIS166AA Javascript Lesson 14: At-Home Final Exam Final Project Requirements View Glossary Your final project is ultimately a website. This should be a simple website that is going to be more about the functionality you build in with various JS features than anything else.  Select a topic for your site. The site should be related to something you enjoy personally (your major, a personal business idea, a fake product, etc.)  Your site will have 5 pages, plus one page that discusses the JS you used throughout the site.  All pages should have a single common layout and navigation.  The code must be commented throughout, but not over-commented.  A responsive layout should be used. Assistance on this will be provided, and your grade will not be dependent on this, however, since responsive sites are critical in web development these days, it's not something that can be overlooked. | How to...  The layout should be done with your own HTML/CSS/JS.  No front-end or back-end frameworks please (Bootstrap, Bulma, Wordpress, Drupal, etc.)  All styles should be in an external stylesheet.  The homepage should be index.html, then create your page structure.  One of the links in your navigation should be labeled "My Projects" (or something along those lines). o That page will have 5 different paragraphs. Each paragraph will give a 3-5 sentence description of something you did in JS. At the end of the paragraph, you'll put a link to the page on your site. o Below is an example:  On the Services page, I created a simple random character generator that creates a coupon code. The user can use the code at checkout for discounts from our online store. You can view the page at the following link: LINK TO PAGE. To promote your weekly use of JavaScript, you'll complete regular exercises related to the following:  Lesson 1: JavaScript Basics  Lesson 2: Operators & Data Types  Lesson 3: Variables & Arrays  Lesson 4: Functions  Lesson 5: Objects, Properties & Methods  Lesson 6: If, Else & Switch Statements  Lesson 7: Loops  Lesson 8: Document Object Model (DOM)  Lesson 9: Events  Lesson 10: Forms & Form Validation  Lesson 11: jQuery  Lesson 12: AJAX, JSON & APIs  Lesson 13: Debugging & Error Handling You should choose 5 of the items above to include in your final project website. «Focusing Your Learning Final Project Rubric» 100% Completed Website Structure & Layout Final project site contains at least 5 completed pages including:  A home page saved as index.html  At least 4 other HTML pages  Consistent working navigation on all pages  Consistent layout used on all pages, including color scheme, navbar placement, etc. 5 Site Pages: 5 pts/page Consistent Layout: 5 pts/page (50 pts possible) © 202 Website is Responsive Final project site is responsive, meaning that the site appears to fit as a balanced User Interface (UI) on a phone, tablet, and desktop.  At least 3 media queries are present (portrait phone, portrait tablet, or landscape tablet)  Media queries must function based on CSS in the query One Media Query: 5 pts Two Media Queries: 5 pts Three Media Queries: 10 pts 0, Rio Salado College. All Rights Reserved. Code Comments Code comments are present within HTML, CSS, and JS.  All JS Deliverables must include comments that clearly state what each function does, what type of data is contained in each array, what each if/else statement does, etc. HTML Comments: 5 pts CSS Comments: 5 pts JS Comments: 15 pts
Answered 1 days AfterJul 30, 2021

Answer To: Microsoft Word - Rio Salado CIS166AA Javascript Lesson 14: At-Home Final Exam Final Project...

Kshitij answered on Aug 01 2021
130 Votes
final-project/css/form.css
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #9b59b6;
font-family: "Open Sans", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background
-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 400px;
max-width: 100%;
}
.header {
border-bottom: 1px solid #f0f0f0;
background-color: #f7f7f7;
padding: 20px 40px;
}
.header h2 {
margin: 0;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-color: #8e44ad;
border: 2px solid #8e44ad;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}
/* SOCIAL PANEL CSS */
.social-panel-container {
position: fixed;
right: 0;
bottom: 80px;
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
}
.social-panel-container.visible {
transform: translateX(-10px);
}
.social-panel {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
border: 5px solid #001f61;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Muli";
position: relative;
height: 169px;
width: 370px;
max-width: calc(100% - 10px);
}
.social-panel button.close-btn {
border: 0;
color: #97a5ce;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}
.social-panel button.close-btn:focus {
outline: none;
}
.social-panel p {
background-color: #001f61;
border-radius: 0 0 10px 10px;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 2px 17px 6px;
position: absolute;
top: 0;
left: 50%;
margin: 0;
transform: translateX(-50%);
text-align: center;
width: 235px;
}
.social-panel p i {
margin: 0 5px;
}
.social-panel p a {
color: #ff7500;
text-decoration: none;
}
.social-panel h4 {
margin: 20px 0;
color: #97a5ce;
font-family: "Muli";
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
}
.social-panel ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.social-panel ul li {
margin: 0 10px;
}
.social-panel ul li a {
border: 1px solid #dce1f2;
border-radius: 50%;
color: #001f61;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
text-decoration: none;
}
.social-panel ul li a:hover {
border-color: #ff6a00;
box-shadow: 0 9px 12px -9px #ff6a00;
}
.floating-btn {
border-radius: 26.5px;
background-color: #001f61;
border: 1px solid #001f61;
box-shadow: 0 16px 22px -17px #03153b;
color: #fff;
cursor: pointer;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.floating-btn:hover {
background-color: #ffffff;
color: #001f61;
}
.floating-btn:focus {
outline: none;
}
.floating-text {
background-color: #001f61;
border-radius: 10px 10px 0 0;
...
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here