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 image folder and write JavaScript to make the background image reflect user input based on the Technical Requirements below.
Student: ____
Project URL: ____
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
2
Store user input in var city
2
Use $.on(submit) or $.click to figure out when the user clicks the "submit" button
2
Create if / else if / else conditionals to control the flow of your application
2
Write at least six different lines of pseudocode and display them inline as JavaScript comments
2
Prevent a form submission using the event.preventDefault() function
2
Use the $.ready() handler to delay your code from executing until all DOM assets have been loaded
0
Change the img with any implementation
2
Use the || operator in your conditionals to allow for multiple string values to execute if/else if statement code
2
If a user submits "New York" or "New York City" or "NYC" make the background of the page nyc.jpg
2
If a user submits "San Francisco" or "SF" or "Bay Area" make the background of the page sf.jpg
2
If a user submits "Los Angeles" or "LA" or "LAX" make the background of the page la.jpg
2
If a user submits "Austin" or "ATX" make the background of the page austin.jpg
2
If a user submits "Sydney" or "SYD" make the background of the page sydney.jpg
FEWD Week #5 Project: 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 image folder and write JavaScript to make the background image reflect user input based on the Technical Requirements below.
Student: ____
Project URL: ____
$.val()on inputs to get the string value of your user's inputvar city$.clickto figure out when the user clicks the "submit" buttonif / else if / elseconditionals to control the flow of your applicationevent.preventDefault()function$.ready()handler to delay your code from executing until all DOM assets have been loaded||operator in your conditionals to allow for multiple string values to executeif/else ifstatement code