Jquery problems

Jquery problems
0

#1

i want to toggle between Celsius and Fahrenheit when i press the switch button.This is the last step of my project.so anyone please help soon.


#2

What have you tried so far?


#3

Start by adding a button to your HTML. Create a JavaScript or JQuery selector to it. Add an Event handler, for example .onClick(). Add some code in the body of this function to toggle between F and C.

Code up at least this much and we can maybe give more pointers…


#4

i added the button.But i don’t know how to toggle.could you look at my code and then tell


#5

Well you are almost there. You have the button, and you have a reference to it in JavaScript. You’ve added an event handler.

The code to switch between C and F is straight forward to implement.

var celsius = true;  // assuming you start with C.  
var temp;

 $('#button').click(function(){
    if(celsius) {
       temp = (temp * 9 / 5) + 32;
    }
    else {
       temp = (temp - 32) * 5 / 9;
    }
    return temp;
}

Then update your HTML to display temperature and to let the viewer know if they are looking at C or F.


#6

Hi,Actually i converted celsius to fahrenheit and stored it a variable above.when adding html elements ,i can change one but i can’t go to previous one.


#7

I did notice that on your Codepen pen, under settings, you added bootstrap, but JQuery has not been added.


#8

no jquery is added.check under JS settings.
without jquery i couldn’t have used ajax.


#9

One of the issues is that you set Celsius to true even though you originally display the value in Fahrenheit. Then, regardless of whether or not the boolean celsius is true or not, you place the celsius value in the html. See my edited code below for an example of what you should be trying to do.


var celsius = false;
$('#button').click(function() {
	celsius = !celsius;
	if (celsius) {
	    $("#weather1").html("<p align='center' class='cel'>" + temp + 'C' + "</p>");
	} else {
	    $("#weather1").html("<p align='center' class='cel'>" + ftemp + 'F' + "</p>");
	}

});

FYI
It’s very difficult to debug code that is written in one massive function. It’s one of my pet peeves about FCC, that they kind of guide you towards the idea of coding in a single function. Wherever possible, you should be looking to break code down into smaller chunks. It makes it easier to digest.


#10

first i have in F.Then i did what u told me to.but it still isn’t changing.


#11

Look again at my answer, particularly the segment in the else block of the conditional. I noticed on your pen that you didn’t change that line. In your code, regardless of what is contained in the celcius boolean, you place the same value into the weather1 div.


#12

Thank you so much.
i [quote=“JavaTheNutt, post:9, topic:55961”]
It’s very difficult to debug code that is written in one massive function. It’s one of my pet peeves about FCC, that they kind of guide you towards the idea of coding in a single function. Wherever possible, you should be looking to break code down into smaller chunks. It makes it easier to digest.
[/quote]

can u tell how can i do that.It was very tough for me to debug.i didn’t understand what i had wriiten


#13

Sure. One of the main principals that you should try to stick to when writing code is that your code should be DRY (Don’t Repeat Yourself). If you find you are writing the the same line of code twice, with just slight differences, chances are that it can be broken down into functions to make it easier.

One such example from your weather viewer would be where you set the background image depending on the temperature. The way that you do it works, but your’re repeating yourself a lot. So if you come back and try to change something, you’re changing it several times. See below for an example of what you COULD do (there are many ways it could be done, this is only one and I haven’t tested it at all)

function checkBackgroundImage(ftemp) {
  if (ftemp > 90) {
    setBackgroundImage("https://lintvksnt.files.wordpress.com/2015/09/sunshine.jpg?w=650");
  } else if (ftemp > 65 && ftemp < 90) {
    setBackgroundImage("https://icons.wxug.com/data/wximagenew/p/Poobah/1305.jpg");
  } else {
    setBackgroundImage("https://newevolutiondesigns.com/images/freebies/winter-wallpaper-12.jpg");
  }
}

function setBackgroundImage(img) {
  $(body).css('backgroundSize', 'cover');
  $(body).css('backgroundImage', 'url(' + img + ')');
}

Then you would replace the below section:

if (ftemp > 90) {
	$('body').css('backgroundImage', 'url("https://lintvksnt.files.wordpress.com/2015/09/sunshine.jpg?w=650")');
	$('body').css('backgroundSize', 'cover');
} else if (ftemp > 65 && ftemp < 90) {
	$('body').css('backgroundImage', 'url("https://icons.wxug.com/data/wximagenew/p/Poobah/1305.jpg")');
	$('body').css('backgroundSize', 'cover');
} else {
	$('body').css('backgroundImage', 'url("https://newevolutiondesigns.com/images/freebies/winter-wallpaper-12.jpg")');
	$('body').css('backgroundSize', 'cover');
}

With:
checkBackgroundImage(ftemp)

I would also look at your AJAX calls. If you notice you’re getting into whats known as callback hell. This is where you have a chain of nested callbacks (for example, all of those nested callbacks when data is successfully retrieved). I would break all of those AJAX calls into their own separate functions to make it easier to understand.

Overall, it’s a good project. Don’t get disheartened, just keep practicing.


#14

Thank you.I’ll try to break it to functions from now on.I wrote AJAX like that because i didn’t know how to perform consecutive calls.So i put the next ajax call in success itself.Is there a easier way?


#15

Yes. It would take quite a bit of thought and redesign of your code, but it’s definitely doable. It’s difficult to refactor, but the way that I would probably do it is to create function which will act as a data store (it could be thought of as a class if you have any familiarity with languages like Java or C++). Then i would use this class to store the data that is required. It’s quite a difficult concept to grasp without seeing examples. I am currently working on this same challenge myself. Hopefully I’ll have it finished tonight and I’ll post a link to my pen when it’s there so that you can see it. This may not be best practice but it’s how I’m currently doing it.

In the meantime, here is a good book (which was pointed out to me yesterday by @JacksonBates) to help understand some of the subtle nuances of JavaScript.


#16

Thank you so much for the advice and book suggestion.


#17

So, I am having a similar issue. I want the conversion to happen when the button is clicked. I have the button all set up. My problem is, I’m not sure how to write the JS portion. I’ve been researching this for days now and the examples all use a form for the input but input is coming from an API so I don’t know how to have my conversion function use the temp var from the api. (I haven’t started with the images yet but I’m sure I can handle that on my own.) Here is mine: https://codepen.io/G1nger/pen/gWyvNp