Toggle function vanilla javascript

Question

I would like to toggle between degree's and fahrenheit when the temperature is clicked.

I have managed to do this when it is clicked on degree's it is changed to fahrenheit, but now how do i change it back to degree's when clicked on fahrenheit?

    temp.addEventListener('click', degreeToF);

    function degreeToF() {
     const f = manchester.current.temp_c * 1.8 + 32;
     temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>';
    }

Here is my codepen: https://codepen.io/o-sewell/pen/mRyEyW

Lukas Liesis · Accepted Answer · 2017-01-05 14:48:12Z

3

var showing = 'F';
temp.addEventListener('click', degreeToF);

function degreeToF() {
 if(showing === 'F'){
   // convert to C
   showing = 'C';
   const f = (manchester.current.temp_c - 32 ) * 5/9;
   temp.innerHTML = f.toFixed(0) + '<span class="degrees"> c </span>';
 } else {
   // convert to 
   showing = 'F';
   const f = manchester.current.temp_c * 1.8 + 32;
   temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>';

 }
}

answered Jan 5, 2017 at 14:48

Lukas Liesis

26.6k12 gold badges123 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oliver Sewell Over a year ago

Thank you this helped me understand :-)

kind user · Accepted Answer · 2017-01-05 16:16:41Z

Here you go. Used simple boolean value to tell the function which part of code to execute.

CodePen link

const weather = 'https://api.apixu.com/v1/current.json?key=cd93499e97644fcc873154715163112&q=Manchester';
const baseColors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
const tintColors = ["#F8DDDE", "#FEDBB4", "white", "#0193D9", "#009245", "#E7E6F9"];

let manchester = [];

fetch(weather)
  .then((blob) => blob.json())
  .then((data) => manchester = data)
  .then((data) => displayWeather(data));

let iconWeather = document.querySelector('#weather');
let temp = document.querySelector('#temp');
let textLocation = document.querySelector('#text-location');
let textWeather = document.querySelector('#text-weather');


function displayWeather() {
  iconWeather.src = manchester.current.condition.icon;
  temp.innerHTML = manchester.current.temp_c + '<span class="degrees"> c </span>';
  textLocation.innerHTML = manchester.location.name;
  textWeather.innerHTML = manchester.current.condition.text;
};

const background = document.querySelector('.weather');

window.addEventListener('load', changeBackground);

function changeBackground() {
  let random = Math.floor(Math.random() * baseColors.length);
  let randomBaseColor = baseColors[random];
  let randomTintColor = tintColors[random];
  background.style.background = 'linear-gradient(0deg,' + randomBaseColor + ',' + randomTintColor + ')';
  background.style.transition = 'background , 2s, ease';
}

setInterval(changeBackground, 2500);


temp.addEventListener('click', degreeToF);

var x = true;

function degreeToF() {

  if (x) {
    const f = manchester.current.temp_c * 1.8 + 32;
    temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>';
    x = !x;
  } else {
    const f = manchester.current.temp_c;
    temp.innerHTML = f.toFixed(0) + '<span class="degrees"> c </span>';
    x = !x;
  }

}

* {
  box-sizing: border-box;
}
.wrapper {
  margin: 50px;
}
.weather {
  max-width: 90%;
  margin: 0 auto;
  background: pink;
  padding: 20px;
  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
@media (min-width: 800px) {
  .weather {
    max-width: 40%;
  }
}
.weather__temperature {
  margin-top: 50px;
  text-align: center;
}
.weather__temperature--temp {
  font-size: 80px;
  cursor: pointer;
}
.weather__text {
  text-align: center;
}
.weather__text--description {
  color: black;
  font-size: 18px;
}
.weather__icon {
  margin-top: 5px;
}
.weather__icon--image {
  display: block;
  margin: 0 auto;
  padding: 5px 0;
  width: 150px;
  height: auto;
}
.weather__location {
  text-align: center;
}
.weather__location--text {
  letter-spacing: 5px;
  font-size: 22px;
  margin-bottom: 50px;
}
.degrees {
  color: red;
  font-size: 20px;
}

<div class="wrapper">
  <div class="weather">

    <div class="weather__temperature" />
    <p class="weather__temperature weather__temperature--temp" id="temp"></p>
  </div>

  <div class="weather__text">
    <p class="weather__text weather__text--description" id="text-weather"></p>
  </div>

  <div class="weather__icon">
    <img class="weather__icon weather__icon--image" id="weather" src="" />
  </div>


  <div class="weather__location">
    <p class="weather__location--text" id="text-location"></p>
  </div>

</div>
</div>

Thank you K. Daniek :-) i like how you used the boolean value

Collectives™ on Stack Overflow

Toggle function vanilla javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related