CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NicoleZ
NicoleZ

Reputation: 5

Changing the background on a user submit?

New to jQuery. I am trying to change the background when a user types in the respective city (just started with NYC and SF to test). So far this seems to not be working. I tried a few things and have had no luck. I have preventDefault in there so I don't think it's a page refresh issue (pardon my newbie lingo).

Looking at the console, it says that "york" is not defined, however, do I need to set all the possible user answers? I have only done with numbers in the past so any help will be appreciated. Many thanks in advance.

Here's the code:

HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <link type="text/css" rel="stylesheet" href="css/reset.css">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <meta charset="utf-8">
        <meta name="description" content="Citipix Website">
        <meta name="keywords" content="citipix, images, changes">
        <meta name="author" content="Chantel Zapata"/>
        <title>City Background</title>
        <script src='http://code.jquery.com/jquery-latest.min.js'></script>
        </head>

<body>
    <header>
        <div class="title">
            <h1>CitiPix</h1>
            <p>Your Cities, Your Pix</p>
        </div>
    </header>
        <div class="container">
            <form class="entry">
                <input type="text" id="city-type" placeholder="Enter a city name...">
                <input type="submit" value="Update" id="submit-btn">
            </form>
        </div>
     <script src="js/index.js"></script>
    </body>
</html>

CSS:

/*
Project Name: Blank Template
Client: Your Client
Author: Your Name
Developer @GA in NYC
*/


/******************************************
/* SETUP
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
    clear: both;
}

.alignright {
    float: right;
    padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
    float: left;
    padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
  color: #000;
  font-size: 12px;
  line-height: 1.4;
  font-family: Helvetica, Arial, sans-serif;
  background: url(../images/citipix_skyline.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/******************************************
/* LAYOUT
/*******************************************/

/* Center the container */
.container {
    width: 720px;
    margin: auto;
  padding-top: 40px;
}

header {
  background: rgba(0,0,0, .5);
  padding: 20px 0;
}

.title {
  text-align: center;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

.title p {
  font-size: 17px;
  font-weight:lighter;
  letter-spacing: 0;
}

#city-type {
  color: #6b6b6c;
  font-size: 32px;
  background: #fff;
  border: 1px solid #111;
  padding: 0px 30px;
  display: inline-block;
  width: 450px;
  font-family: helvetica, arial, sans-serif;
  height: 72px;
  line-height: 72px;
  vertical-align: middle;
  font-weight: lighter;
}
#submit-btn {
  background: #000;
  color: #fff;
  letter-spacing: 1px;
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #111;
  text-align: center;
  display: inline-block;
  width: 250px;
  height: 72px;
  line-height: 68px;
  vertical-align: middle;
  font-family: helvetica, arial, sans-serif;
  cursor: pointer;
}
#submit-btn:hover {
  background: #333;
}



.nyc {
  background-image: url(../images/nyc.jpg)
}
.sf {
  background-image: url(../images/sf.jpg)
}
.la {
  background-image: url(../images/la.jpg)
}
.austin {
  background-image: url(../images/austin.jpg)
}
.sydney {
  background-image: url(../images/sydney.jpg)
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

jQuery:

 $('.entry').on('submit', function(event){
  e.preventDefault();
  showCity();
})

function showCity () {
    var userEntry = $('#city-type').val();

    var newYork = ["New York", "New York City", "NYC"];
    var sanFran = ["San Francisco", "SF", "Bay Area"];
    var losAngeles = ["Los Angeles", "LA", "LAX"];
    var austin = ["Austin", "ATX"];
    var sydney = ["Sydney", "SYD"];

    //console.log(userEntry);

    if(userEntry === newYork[0]; || userEntry === newYork[1]; || userEntry === newYork[2]; ) {
        $('body').css('background','url(../images/nyc.jpg)').fadeIn(700);
     } else if(userEntry === sanFran[0]; || userEntry === sanFran[1]; || userEntry === sanFran[2];) {
        $('body').css('background','url(../images/sf.jpg)').fadeIn(700);
     } else if(userEntry === losAngeles[0]; || userEntry === losAngeles[1]; || userEntry === losAngeles[2];) {
        $('body').css('background','url(../images/la.jpg)').fadeIn(700);
     } else if(userEntry === austin[0]; || userEntry === austin[1]; ) {
        $('body').css('background','url(../austin.jpg)').fadeIn(700);
     } else if(userEntry === sydney[0]; || userEntry === sydney[1];) {
        $('body').css('background','url(../images/sydney.jpg)').fadeIn(700);
     }
     $('userEntry').val('');
};


$('#submit-btn').on('submit', showCity);

Upvotes: 0

Views: 196

Answers (2)

daveliew
daveliew

Reputation: 75

Rather than creating all cities as individual variables, consider using an array to control these:

var city = ['NYC', 'SF', 'LA', 'ATX', 'SYD']

Also, instead of using multiple if-else tests, you can consider using Switch statements and $.attr to change the background accordingly via your CSS classes.

switch (cityPic) {
  case 'NYC':
    $('body').attr('class','nyc');
    break;
  case 'SF':
    $('body').attr('class','sf');
    break;
  case 'LA':
    $('body').attr('class','la');
    break;
  case 'ATX':
    $('body').attr('class','austin');
    break;
  case 'SYD':
    $('body').attr('class','sydney');
    break;
  default:
}

Upvotes: 1

MortenMoulder
MortenMoulder

Reputation: 6646

= sets a value while == (or === if you need to check for type (string or integer for instance)) checks if a condition is true or not.

I have not tested your code, but you always do if(value == "some value"). Doing = will set value to some value.

Also, you need to set up multiple checks inside your if-statement. if(value == "some value" || value == "some other value") for instance.

Your code would look something like this then:

if(userEntry == 'New York'|| userEntry == 'New York City' || userEntry == 'NYC') {
    $('body').css('background','url(../images/nyc.jpg)').fadeIn(700);
} else if(userEntry == 'San Francisco' || userEntry == 'SF' || userEntry == 'Bay Area') {
    $('body').css('background','url(../images/sf.jpg)').fadeIn(700);
}

Upvotes: 0

Related Questions