brittnwest/homework-citipix

#FEWD Week #5: More JavaScript

---

###Description

JavaScript is powerful: we're able to take user interaction and information and use it to update the page without requiring a refresh. This week, a new startup in your city, CitiPix, is looking to create a personalized picture app that allows users to store pictures they've taken around the world and quickly access them by typing in keywords or tags associated with each photo; they have asked for your help to start building the front-end prototype. You will begin by building a web-app that will take a user's input and update the background image of the page based on that input. Once again, you have been given the starter code that includes the HTML and the CSS. Use the images in the images folder and write JavaScript to make the background image reflect user input based on the Technical Requirements below.

---

###Real-World Applications

• Write pseudocode before coding to demonstrate understanding of interactive programming theory and focus on the logic without being distracted by details of syntax
• Write JavaScript code that will update a web-page based on user interaction
• Store user-submitted information in variables to be used throughout an application
• Change DOM elements on the page based on user input
• Specify the order in which your application runs using control flow
• Revisit applications and code you've written to find solutions to problems you've already solved

---

###Technical Requirements

• Call $.val() on inputs to get the string value of your user's input

• Store user input in var city

• Use $("form selector").on("submit") or $("selector").click() to figure out when the user clicks the "submit" button

• Create if / else if / else conditionals to control the flow of your application

• Write at least six different lines of pseudocode and display them inline as JavaScript comments

• Prevent a form submission using the event.preventDefault() function

• Use the $.ready() handler to delay your code from executing until all DOM assets have been loaded

• Get the first element from an attribute name using $.attr()

• Use the || operator in your conditionals to allow for multiple string values to execute if/else if statement code

• If a user submits:

  • "New York" or "New York City" or "NYC" make the background of the page nyc.jpg
  • "San Francisco" or "SF" or "Bay Area" make the background of the page sf.jpg
  • "Los Angeles" or "LA" or "LAX" make the background of the page la.jpg
  • "Austin" or "ATX" make the background of the page austin.jpg
  • "Sydney" or "SYD" make the background of the page sydney.jpg

Take a look at what your final product should look like before and after:

After entering "NYC" and submitting:

---

###Resources

• Starter Code and Assets
• JavaScript docs on comparison operators
• JavaScript docs on variables

---

###Evaluation / Submission

Students should start by using the starter code and focus on adding the proper JavaScript to update the background of the page. Students will create a new repository on GitHub called "homework-city" and push their code to it when they are ready to submit. I will provide a numeric grade on a scale for each technical requirement: does not meet expectations (0); meets expectations (1); exceeds expectations (2).

Bonus Challenges

• Remove extra spaces or new lines that users or the browser might add before or after their input

• Display the correct image regardless of the case the user uses. For example, 'nEw York cIty' or 'New york city' will still work.

• Reset the user input field after it is submitted

• If a user types in an invalid city show citypix_skyline.jpg image and display the message "We currently don't have images for this city. Check back later!"

  ​

###Final Project Milestone 1

By 1/23/17, you should have submitted a proposal and wireframes for your final project. Next up, you'll be writing pseudo code for the interactivity you would like to add. For this week, you should begin writing psuedo code and a draft of the HTML/CSS for your application - this should be turned into your instructor by 2/6/17

homework-citipix's Issues

Grade 2

Technical Requirements	Does Not Meet Expectations (0)	Meets Expectations (1)	Exceeds Expectations (2)
Create an array with the following values: "NYC", "SF", "LA", "ATX", "SYD"; use afor loop in JavaScript to loop through them		1
Use $.append() in your loop (from above) to populate the <select>drop-down menu		1
When the user changes the input of the drop-down, update the background image based on what they selected		1
Use the $.attr() function to update html classes		1
Get the value of user input using $.val()		1
Use the $.change event handler to capture user actions		1
Use if/else if/else conditionals to control the flow of your application		1
Display your pseudocode as Javascript comments		1
TOTAL: 8/16

Grade

Technical Requirements	Does Not Meet Expectations (0)	Meets Expectations (1)	Exceeds Expectations (2)
Call $.val() on inputs to get the string value of your user's input		1
Store user input in var city			2
Use $.on(submit) or $.click to figure out when the user clicks the "submit" button		1
Create if / else if / else conditionals to control the flow of your application		1
Write at least six different lines of pseudocode and display them inline as JavaScript comments		1
Prevent a form submission using the event.preventDefault() function		1
Use the $.ready() handler to delay your code from executing until all DOM assets have been loaded		1
Get the first element from an attribute name using $.attr()		1
Use the || operator in your conditionals to allow for multiple string values to execute if/else if statement code		1
If a user submits "New York" or "New York City" or "NYC" make the background of the page nyc.jpg		1
If a user submits "San Francisco" or "SF" or "Bay Area" make the background of the page sf.jpg		1
If a user submits "Los Angeles" or "LA" or "LAX" make the background of the page la.jpg		1
If a user submits "Austin" or "ATX" make the background of the page austin.jpg		1
If a user submits "Sydney" or "SYD" make the background of the page sydney.jpg		1
TOTAL: 15/28