- Fork the repository
https://github.com/meet-projects/y2s18-intro-js-2
. - Change directory on your Desktop using the following command:
$ cd ~/Desktop
- Clone the repository
y2s18-intro-js-2
into a local directory, replacing<username>
with your Github username in the following command:$ git clone https://github.com/<username>/y2s18-intro-js-2
.
- For this lab, you'll be working in the
~/Desktop/intro-js-2/separation
directory. Make sure you are in the right directory. - In
separation.html
, include the JavaScript filecode.js
using a<script>
tag with asrc
attribute. - In
code.js
, add analert
that pops up with your name. - Open
separation.html
in Google Chrome. If you see a popup alert, you did it! - Raise your hand and get a checkoff from a TA or Instructor. Nice work!
- For this lab, you'll be working in the
~/Desktop/intro-js-2/object-literals
directory. Make sure you are in the right directory. Make sure that you are adding your HTML and JavaScript to the correct files - don't add HTML to your.js
file! - Create an object literal called
me
inobject-literals.js
that represents yourself. The object should contain the following properties:firstName
(type: String) Your first namelastName
(type: String): Your last namefavoriteFoods
(type: Array): An array of your favorite foodsage
(type: Number): Your agepicture
(type: String): A URL to a picture you like.
- Convert your object literal
me
into a JSON String that can be shared on different computers, and display it on the HTML page usingdocument.write
. - Open
object-literals.html
in Chromium Web Browser. - Go to https://api.meet.sh/json/ and submit your JSON string from step 2. If everything works, you just successfully transmitted data from your computer (the client) to
https://api.meet.sh
(the server), without needing to do much work. - Raise your hand and get a checkoff from a TA or Instructor. Nice work!
- For this lab, you'll be working in the
~/Desktop/intro-js-2/html-events
directory. Make sure you are in the right directory. Make sure that you are adding your HTML and JavaScript to the correct files - don't add HTML to your.js
file! - There is a button in
html-events.html
. The button should do two things when it is clicked:- It should prompt the user for a color.
- After getting an answer, the background color of the web site should change to that color. In order to do this, you need to select the
body
element of the website.
- Raise your hand and get a checkoff from a TA or Instructor. Nice work!
- For this lab, you'll be working in the
~/Desktop/intro-js-2/event-listeners
directory. Make sure you are in the right directory. Make sure that you are adding your HTML and JavaScript to the correct files - don't add HTML to your.js
file! - Lets create a simple slideshow! Go on Google and download 5 pictures that you like. If you need some help finding images, Unsplash has some pretty photos. Save them into the
~/Desktop/intro-js-2/imgs
directory. - Create an image in
event-listeners.html
using a<img>
tag. - In
event-listeners.js
, create an array calledpictures
of the file names of the images that you downloaded. One of the elements in the array should be'./imgs/dog.jpg'
. - Attach a
click
event listener to the image you created in step 2. The event listener should call theshowNextPicture
function. - Finish the
showNextPicture
function inevent-listeners.js
. Have the image change itssrc
attribute when the image is clicked. The value of thesrc
attribute should be based oncurrentIndex
. - Raise your hand and get a checkoff from a TA or Instructor. Nice work!
- For this lab, you'll be working in the
~/Desktop/intro-js-2/form-validation
directory. Make sure you are in the right directory. Make sure that you are adding your HTML and JavaScript to the correct files - don't add HTML to your.js
file! - Change the
rating
input field in the rating form (ratingForm
) so that it only allows users to enter numbers. - Add a
onsubmit
event listener to the form, and have it checkvalidateForm()
in order to make sure the form has valid values in both theusername
andrating
input fields. - Finish the function
validateForm()
so that ratings cannot be less than 0 or greater than 5. Make sure that usernames have length greater than 0 as well. - Raise your hand and get a checkoff from a TA or Instructor. Nice work!
- For this extra lab, you'll be working in the
object-constructors
directory. Make sure you are in the right directory. Make sure that you are adding your HTML and JavaScript to the correct files - don't add HTML to your.js
file! - Write an object constructor an item a restaurant would sell, called a MenuItem. The object should have the following properties:
name
(type: String): The name of the MenuItem.price
(type: Number): The price of the MenuItem.restaurant
(type: String): The name of the restaurant that sells this MenuItem.getInfo()
(type: Function): Calling this function should return a sentence containing the name of the MenuItem, its price, and the name of the restaurant where it can be purchased.
- Create at least three different MenuItem's from restaurants that you've seen before.
- Display, using
document.write
, thegetInfo()
sentence of each MenuItem.
- Let's create a counter. In
html-events.html
, display the value 0 in a<h1>
tag. - Create a new button in
html-events.html
that, when clicked, increments the value inside the<h1>
tag. - Create a final button in
html-events.html
that, when clicked, resets the value inside the<h1>
tag back to 0.
- Create a button that in
html-events.html
that, when clicked, cycles the background color of the entire web page in the following order: red, yellow, green, blue, purple.
- Look up the modulus operator
%
. Use the modulus operator to turn
if (currentIndex >= pictures.length) {
currentIndex = 0;
}
into one line of code.
- Demonstrate that client-side form validation isn't enough by giving a user a rating that's greater than 5 (or less than 0).
Take the Tic-Tac-Toe game logic from the previous culminating challenge and build a frontend user interface. Don't prompt the players to type in their move anymore. Instead, the players should be able to click on the screen to make their move.
- JavaScript Events: https://www.w3schools.com/js/js_events.asp
- List of JavaScript Events: https://www.w3schools.com/jsref/dom_obj_event.asp
- JavaScript
addEventListener()
: https://www.w3schools.com/js/js_htmldom_eventlistener.asp - DOM Visualizer: http://bioub.github.io/d3.DOMVisualizer/