FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

CamperBot

@camperbot

andrewchar sends brownie points to @mynameissal :sparkles: :thumbsup: :sparkles:

:star: 285 | @mynameissal | http://www.freecodecamp.com/mynameissal

Kevin Elser

@CoffeeCodeKevin

Anyone know of any way to keep animations from all happening at once in a for loop?

I have it set up so it'll animate one of 4 divs depending on a value I got from i in for loop like this: for(i=0;i<arr.length;i++)

Problem is it just animates all 4 at once.

Or whichever ones the value corresponds with for the entire loop

Eran Finkle

@finklez

@keccakec don't do animation this way, CSS has 2 ways of animating, using transition and animation

you set a class with animation, you can set duration and delay, and even loops, then you can add/remove the class

Kevin Elser

@CoffeeCodeKevin

@finklez Thanks, jQuery animation is just easier syntax-wise for what I want to do, but that does seem like it would work a lot better.

CamperBot

@camperbot

keccakec sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:

:star: 473 | @finklez | http://www.freecodecamp.com/finklez

Eran Finkle

@finklez

@keccakec you can also do it with jQuery, but for loop is a bad way for applying animations, if i'm not mistaken animation are applied async which means you'll have to use closures for it to work, but anyways it's a bad way, you can still use jQuery using delays for each div

Kevin Elser

@CoffeeCodeKevin

@finklez Yeah, I'm now using it to make sure the animations have about a 100ms delay between them. Unfortunately changing my animation functions to be css animations somehow broke my code? Either that, or codepen doesn't like me. Everything in my JS is now undefined.

I'm beyond confused considering I only changed the animation functions.

Even global variables are undefined

I forgot a semicolon.. fml.

Eran Finkle

@finklez

i guess it's ok then

css animation are much better, smoother, faster, even tho recent jQuery animation are prob using css animations as well, instead of the old position style

Mark Lawrence

@ninja-ml

i'm working on my weather app and and the icons provided by OpenWeather seem really small... i've found better icons online that use font awesome but it says I have to put them in a Font folder... how would I do that in CodePen?

Jonathan Coleman

@jondcoleman

@ninja-ml you won't be able to put them into a folder on codepen. You'll have to store the images on an online service. Some people use imgur. I put them in my public dropbox folder and use the urls for them from there

Mark Lawrence

@ninja-ml

@jondcoleman thanks, that's what I thought, but I wasn't sure... I've used my public dropbox folder for images for other projects. I"m looking into using the Dark Sky API instead of OpenWeather API

CamperBot

@camperbot

ninja-ml sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:

:star: 513 | @jondcoleman | http://www.freecodecamp.com/jondcoleman

Jonathan Coleman

@jondcoleman

cool, let us know how you like Dark Sky

Amir Ghafouri

@amirghafouri

@mutantspore (or anyone else) Am I on the right path?

function decTime() {
  //fill the circle
  filler(countDown);
  // display the current count down
  showCount();
  // decrement the counter if it's not at zero
  if (countDown > 0) {
    countDown--;
  } else {
    countDown = breakSeconds;
    if (countDown > 0) {
      countDown--;
    } else {
      // stop the timer
      clearInterval(intervalID);     
    }
  }

Bruce Young

@mutantspore

@ninja-ml what are the icons called. There is another way to actually use icons on codePen.

@ninja-ml dark sky ..(forecast.ioi) is a great weather service (very accurate) but you may have more trouble using it.

Bruce Young

@mutantspore

@ninja-ml where they called Climacons?

Juwdohr

@Juwdohr

Where can I get an API for the Random Quote Machine?

Bruce Young

@mutantspore

lol yes, ty… just post your pen with a question. (if you have a pen)

ooo I see ok

well you don’t actually need one fo rthis exercise

you haven’t done API’s in the course yet

just an array will do

but if you want to try this is the one that FCC used to give as a choice.
http://forismatic.com/en/api/

I did mine before they changed the user stories and added a seperate API section. I used one from this API provider
https://www.mashape.com/

andruxnet-random-famous-quotes

Bruce Young

@mutantspore

You wil get plenty of chance to use API’s later in the second set of ZIplines

Maciej Bembenista

@macbem

What API should I use to tweet a quote?

The rest will be a breeze, I guess

Bruce Young

@mutantspore

try https://dev.twitter.com/web/intents
don’t get involved with twitter’s little icon and it’s iframe… that way lies death. The solution is just one or two lines. Use your own icon.

Maciej Bembenista

@macbem

thanks a bunch, @mutantspore

CamperBot

@camperbot

noczesc sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:

Maciej Bembenista

@macbem

i'll probably use font awesome as I always did

CamperBot

@camperbot

:star: 1104 | @mutantspore | http://www.freecodecamp.com/mutantspore

Bruce Young

@mutantspore

yes I did

basically you just need an icon with this in it href="https://twitter.com/intent/tweet?text=Hello%20world” and you use JS to change the text data

Bruce Young

@mutantspore

@amirghafouri how’s your issue going? is there a pen to look at?

Amir Ghafouri

@amirghafouri

@mutantspore http://codepen.io/amirghafouri/pen/MKPvRa?editors=0010

I messed around with the fill effect (width instead of height), and it was working.

Started messing around with the decTime function to change session types and it stopped working

Where communities thrive

People

Repo info

Activity