Microsoft Word - Rio Salado CIS166AA Javascript Lesson 9: Project Directions – Chapter XXXXXXXXXX Instructions View Glossary Each module will conclude with some type of programming project. For this...

1 answer below »
This is a bulk request for 5 assignments to be completed by July 14? What would the quote be?, and could I pay half now and remainder upon completion?


Microsoft Word - Rio Salado CIS166AA Javascript Lesson 9: Project Directions – Chapter 6 243-292 Instructions View Glossary Each module will conclude with some type of programming project. For this project, you're going to employ your creativity and create a number of events, along with the appropriate HTML and CSS. This project will require you to do some research on how various types of events work and how to make them work together. You should put a strong focus on pages 246-247 (Different Event Types) to understand how to deploy these various events. Project Preparation Copied! 1. Open the CIS166 folder you've already created. 2. Inside that folder, create a folder called lesson9_project. 3. Inside the new lesson9_project folder, create the following:  One folder called js. Within this folder, create a file called main.js.  One folder called css. Within this folder, create a file called styles.css.  Create a file called index.html at the root. 4. When you are done with your preparation, your folder structure should look like the following: Text alternative for the above graphic Project Instructions 1. Create a base index.html page using Emmet (! + tab key). 2. Create a base CSS stylesheet (be sure to include the reference in your index page). 3. Create a base JS page (be sure to include the reference in your index page). JavaScript The following project requires the use of event types you've learned throughout the lesson.  Identify 10 different event types (i.e.; a load event, a keydown event, a click event, a mouseup event, etc.).  After identifying 10 different types, program these 10 different events into your JS page.  Deploy to your HTML page so the events are interactive.  Please consider the examples you've seen throughout this lesson. Submit Your Work 1. Make sure all major areas of your project are commented properly. Refer to Comments if you need a refresher. 2. Save all files and upload your project to your account on Firebase. 3. In addition to uploading the project to Firebase, you will also be submitting the files to the Assignment submission box in RioLearn using the instructions on the assignment page. 4. Please ensure that all coding standards are followed. Refer to Coding Standards if you need a refresher. 100% Completed © 2020, Rio Salado College. All Rights Reserved. INTRODUCTION TO JAVASCRIPT Microsoft Word - Rio Salado CIS166AA Javascript Lesson 10: Project Directions – Chapter 13 – 567- 622 Instructions View Glossary Each module will conclude with some type of programming project. For this project, you're going to create a small form that takes in information but leaves the submit button disabled until all the fields are completed. This project will require you to do some research to complete all the requirements. Project Preparation 1. Open the CIS166 folder you've already created. 2. Inside that folder, create a folder called lesson10_project. 3. Inside the new lesson10_project folder, create the following:  One folder called js. Within this folder, create a file called main.js.  One folder called css. Within this folder, create a file called styles.css.  Create a file called index.html at the root. 4. When you are done with your preparation, your folder structure should look like the following: Text alternative for the above graphic Project Instructions 1. In your index.html file, create a basic HTML page using Emmet (! + tab key) 2. In your styles.css file, copy and paste in the styles from below CSS body { font-family: sans-serif; margin: 0; padding: 0; height: 100vh; } h1 { text-align: center; } form { display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; } form input { margin: 0.5em 0; padding: 0.5em; border-radius: 5px; } form input[type=submit]:active { background-color: darkblue; color: white; } HTML  At the top of your HTML page, create an h1 tag with a class of text-center. The content of that h1 should say Lesson 10 Project.  Create a form element with the following attributes: o name of myForm o id of myForm o empty action attribute  Inside the form element, create 5 inputs.  Please create inputs that account for the following: first name, address, address city, address state and zip code.  Create an input to submit your form. JavaScript The following project requires the use of skills you learned while building forms and administering form validation. The submit button of this form will be set to disabled until all the fields are filled.  Create a function that will validate form input.  Inside the function, create a variable to identify all the elements in the form.  Inside the function, create a variable called canSubmit, and set it to a boolean of true.  Inside the function, create a for loop that checks the value of each form field. If the form field is not completed, then canSubmit will be false.  In an event listener, add a method to prevent the default submission of the form.  Create an alert if the form is submitted that states a confirmation message.  Make sure this event listener contains code to reset the form. Feel free to copy/paste the JavaScript below into your main.js file //create a function that will validate form input //validate all the elements of the form //create a variable called canSubmit and set it to a boolean of true //write a for loop that checks the value of each form field. If the form field is not completed, then canSubmit will be false //in an event listener, add a method to prevent default submission of the form. //create an alert if form is submitted that states a confirmation message //make sure this event listener contains code to reset the form Your final output should look like this... Text alternative for the above graphic Submit Your Work 1. Make sure all major areas of your project are commented properly. Refer to Comments if you need a refresher. 2. Save all files and upload your project to your account on Firebase. 3. In addition to uploading the project to Firebase, you will also be submitting the files to the Assignment submission box in RioLearn using the instructions on the assignment page. 4. Please ensure that all coding standards are followed. Refer to Coding Standards if you need a refresher. 100% Completed © 2020, Rio Salado College. All Rights Reserved. Skip to main content Navigation  Instructions CIS166AA INTRODUCTION TO JAVASCRIPT Microsoft Word - Rio Salado CIS166AA Javascript Lesson 11: Project Directions – Chapter 7 293-366 Instructions View Glossary Each module will conclude with some type of programming project. For this project, you're going to create a small jQuery-based image slider. Once complete, you'll be able to use this in future projects. Project Preparation 1. Open the CIS166 folder you've already created. 2. Inside that folder, create a folder called lesson11_project. 3. Inside the new lesson11_project folder, create the following:  One folder called js. Within this folder, create a file called main.js.  One folder called css. Within this folder, create a file called styles.css.  Create a file called index.html at the root. 4. When you are done with your preparation, your folder structure should look like the following: Text alternative for the above graphic Project Instructions 1. In your index.html file, create a basic HTML page using Emmet (! + tab key). 2. Make sure that you include references to your stylesheet and a reference to the jQuery library. CSS 1. Add a body selector and set the following:  Set the font family to sans-serif. 2. Add a class called text-center and set it to align text to the center. 3. Create an id called slideshow:  Set the margin to 80px (up/down) and auto (left/right).  Set the position to relative.  Set the height and width to 240px.  Set the padding to 10px.  set the box shadow with the following: o height offset: 0 o vertical offset: 0 o blur: 20px o color: rgba color of black with an opacity of 0.4 4. Create another id of slideshow with a child of div:  Set the position to absolute.  Set the top, left, right, and bottom to 10px. HTML 1. At the top of your HTML page, create an h1 tag with a class of text-center. The content of that h1 tag should say Lesson 11 Project. 2. In the body of your HTML, create the following:  Create an id of slideshow.  Inside that id, create 3 div tags.  Inside each div tag, add an img tag.  Go to the web and find 3 images that are 240px by 240px.  In each image tag, add one of your found images. JavaScript 1. Using the jQuery selector, set your slideshow with a child of div to a gt selector of 0. 2. Apply the hide method to it. 3. Then create a setInterval method and
Answered 2 days AfterJul 07, 2021

Answer To: Microsoft Word - Rio Salado CIS166AA Javascript Lesson 9: Project Directions – Chapter XXXXXXXXXX...

Amit Kumar answered on Jul 10 2021
141 Votes
lesson-eleven/CIS166_Javascript_L11.pdf
Lesson 11: Project Directions – Chapter 7 293-366
Instructions
View Glossary
Each module will conclude with some type of programming project. For this project, you're going to
create a small jQuery-based image slider. Once complete, you'll be able to use this in future
projects.
Project Preparation
1. Open the CIS166 folder you've already created.
2. Inside that folder, create a folder called lesson11_project.
3. Inside the new lesson11_project folder, create the following:
 One folder called js. Within this folder, create a file called main.js.
 One folder called css. Within this folder, create a file called styles.css.
 Create a file called index.html at the root.
4. When you are done with your preparation, your folder structure should look like the following:
Text alternative for the above graphic
Project Instructions
1. In yo
ur index.html file, create a basic HTML page using Emmet (! + tab key).
2. Make sure that you include references to your stylesheet and a reference to the jQuery library.
CSS
1. Add a body selector and set the following:
 Set the font family to sans-serif.
2. Add a class called text-center and set it to align text to the center.
3. Create an id called slideshow:
 Set the margin to 80px (up/down) and auto (left/right).
 Set the position to relative.
 Set the height and width to 240px.
 Set the padding to 10px.
 set the box shadow with the following:
o height offset: 0
o vertical offset: 0
o blur: 20px
o color: rgba color of black with an opacity of 0.4
4. Create another id of slideshow with a child of div:
 Set the position to absolute.
 Set the top, left, right, and bottom to 10px.
HTML
1. At the top of your HTML page, create an h1 tag with a class of text-center. The content of that
h1 tag should say Lesson 11 Project.
2. In the body of your HTML, create the following:
 Create an id of slideshow.
 Inside that id, create 3 div tags.
 Inside each div tag, add an img tag.
 Go to the web and find 3 images that are 240px by 240px.
 In each image tag, add one of your found images.
JavaScript
1. Using the jQuery selector, set your slideshow with a child of div to a gt selector of 0.
2. Apply the hide method to it.
3. Then create a setInterval method and inside it, add an anonymous function.
4. Set the function to locate the id for slideshow and its children. Use the "first" pseudo class to
get the first one.
5. Apply the fadeOut method at 1000 ms.
6. Apply the next().
7. Apply the fadeIn method at 1000 ms.
8. Apply the end() method.
9. Apply the appendTo method with an id of slideshow.
10. Set the interval time to 3000.
Your final output should look like this...
Submit Your Work
1. Make sure all major areas of your project are commented properly. Refer to Comments if you
need a refresher.
2. Save all files and upload your project to your account on Firebase.
3. In addition to uploading the project to Firebase, you will also be submitting the files to the
Assignment submission box in RioLearn using the instructions on the assignment page.
4. Please ensure that all coding standards are followed. Refer to Coding Standards if you need
a refresher.
100% Completed
© 2020, Rio Salado College. All Rights Reserved.
Skip to main content
Navigation
 Instructions
CIS166AA
INTRODUCTION TO JAVASCRIPT






















lesson-eleven/css/style.css
body {
font-family: sans-serif;
}
.text-center {
text-align: center;
}
#slideshow {
margin: 80px auto;
position: relative;
height: 240px;
width: 240px;
padding: 10px;
box-shadow: 0 0 20px rgb(0 0 0 / 0.4);
}
#slideshow div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
lesson-eleven/images/03-animals-wildlife_1182593230.jpg
lesson-eleven/images/golder-retriever-puppy.jpeg
lesson-eleven/images/squirrel-animal-cute-rodents-47547.jpeg
lesson-eleven/index.html
Lesson 11 Project











lesson-eleven/js/main.js
// 1. Using the jQuery selector, set your slideshow with a child of div to a gt selector of 0.
// 2. Apply the hide method to it.
// 3. Then create a setInterval method and inside it, add an anonymous function.
// 4. Set the function to locate the id for slideshow and its children. Use the "first" pseudo class to get the first one.
// 5. Apply the fadeOut method at 1000 ms.
// 6. Apply the next().
// 7. Apply the fadeIn method at 1000 ms.
// 8. Apply the end() method.
// 9. Apply the appendTo method with an id of slideshow.
// 10.Set the interval time to 3000.
setInterval(function (){
$("#slideshow div:gt(0)").hide();
$("#slideshow div:first").fadeOut(1000).next().fadeIn(1000).end().appendTo("#slideshow");
},3000)
lesson-nine/CIS166_Javascript_L9.pdf
Lesson 9: Project Directions – Chapter 6 243-292
Instructions
View Glossary
Each module will conclude with some type of programming project. For this project, you're going to
employ your creativity and create a number of events, along with the appropriate HTML and CSS.
This project will require you to do some research on how various types of events work and how to
make them work together. You should put a strong focus on pages 246-247 (Different Event Types)
to understand how to deploy these various events.
Project Preparation Copied!
1. Open the CIS166 folder you've already created.
2. Inside that folder, create a folder called lesson9_project.
3. Inside the new lesson9_project folder, create the following:
 One folder called js. Within this folder, create a file called main.js.
 One folder called css. Within this folder, create a file called styles.css.
 Create a file called index.html at the root.
4. When you are done with your preparation, your folder structure should look like the following:
Text alternative for the above graphic
Project Instructions
1. Create a base index.html page using Emmet (! + tab key).
2. Create a base CSS stylesheet (be sure to include the reference in your index page).
3. Create a base JS page (be sure to include the reference in your index page).
JavaScript
The following project requires the use of event types you've learned throughout the lesson.
 Identify 10 different event types (i.e.; a load event, a keydown event, a click event, a
mouseup event, etc.).
 After identifying 10 different types, program these 10 different events into your JS page.
 Deploy to your HTML page so the events are interactive.
 Please consider the examples you've seen throughout this lesson.
Submit Your Work
1. Make sure all major areas of your project are commented properly. Refer to Comments if you
need a refresher.
2. Save all files and upload your project to your account on Firebase.
3. In addition to uploading the project to Firebase, you will also be submitting the files to the
Assignment submission box in RioLearn using the instructions on the assignment page.
4. Please ensure that all coding standards are followed. Refer to Coding Standards if you need
a refresher.
100% Completed
© 2020, Rio Salado College. All Rights Reserved.
INTRODUCTION TO JAVASCRIPT


























lesson-nine/css/style.css
.text-center {
text-align: center;
}
h2 {
background-color: blueviolet;
color: #ffffff;
padding: 1rem;
text-align: center;
}
.mouseMove {
width: 200px;
height: 100px;
border: 1px solid black;
}
img {
object-fit: cover;
}
lesson-nine/index.html
Lesson 9 Project
1.Unload Event
When page is loading.
2.Error event
Alert message will popup (The image could not be loaded.)

3.Keydown event
When You pressed a key inside the input field alert message will popup (You pressed a key inside the input field.)

4.Keyup event

A function is triggered when the user releases a key in the input field.
The function transforms the character to upper case.

Enter your name:
5. & 6.MouseDown and MouseUp events

Click the text! when the mouse button is pressed down over this paragraph,
Text color will red. when the mouse button is released, Text color will
green.

7.MouseMove event

When the mouse is moved over the div, the p element will display the
horizontal and vertical coordinates of your mouse pointer, whose values
are returned from the clientX and clientY properties on the MouseEvent
object.


Mouse over the rectangle above, and get the coordinates of your mouse
pointer.
8.MouseOver event

Image size will increase when the user moves the mouse pointer over the
image. Image size will normal when the mouse pointer is moved out of the
image.
9. Change event

When you...
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here