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 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 XXXXXXXXXXDifferent 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
ody {
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 XXXXXXXXXX
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 li
ary.
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
ight).
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