These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Apr 2017
Pagnito
@Pagnito
Apr 03 2017 00:02
i seem to have fixed the click menu disappearing to switching css display none from hide
nop nvm
how the fck does it disappear hal the time half time it doesnt
Pagnito
@Pagnito
Apr 03 2017 00:15
oh i think its because when i press enter too early the first function that writes suggestions doesnt finish so it finishes even after i press enter
hmm i dunno, doesnt seem to be the case on my phone
Gulsvi
@gulsvi
Apr 03 2017 00:19
@Pagnito I don't know what you're talking about lol
You have one chunk of code that runs on keyup and another function that runs when you press Enter. So, I'm guessing when you press Enter, two functions are called. The keyup function and getWiki()
Pagnito
@Pagnito
Apr 03 2017 00:21
@SkyCoder01 well i had two problems, one is that if you click on the suggest menu to see results, it would load it like 3 times causing like a blinking effect of the divs appearing and disappearing. i was being lazy so i was hoping calling getWiki would b ok but clearly just like u said it wasnt so, instead i just copied the inside code of getwiki into the click call. that solved the first problem. but now, whenever i do keydown for results, it doesnt always hide my suggestion menu
the menu seems to hide if i let the suggestion menu load before hitting enter, but on my phone it doesnt seem to close at all
Gulsvi
@gulsvi
Apr 03 2017 00:24
Maybe you can put your suggest menu hide() in your ajax call? So it hides when it's ready to show results
And put all that duplicate code inside a function :)
Pagnito
@Pagnito
Apr 03 2017 00:27
wmuahahahaha, SkyCoder, you are my savior
lol
@SkyCoder01 thank you
CamperBot
@camperbot
Apr 03 2017 00:27
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 835 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 03 2017 00:27
haha, just a guess, but glad it worked ;)
Pagnito
@Pagnito
Apr 03 2017 00:28
@SkyCoder01 shit, it def worked for my laptop, but still doesn seem to work on my phone :(
i put the hide in the ajax call
so what do u mean by putting the duplicate code inside a function
oh wait
hold on
i didnt save it
i need to check again
it worked!!
im done!!!!
Gulsvi
@gulsvi
Apr 03 2017 00:29
Congrats
Pagnito
@Pagnito
Apr 03 2017 00:29
thanks
Gulsvi
@gulsvi
Apr 03 2017 00:30
That animation kind of reminds me of Geometry Wars for some reason
Pagnito
@Pagnito
Apr 03 2017 00:30
i gotta say, i thought this was gonna be the most boring project, but turned out to be more fun than doing my portfolio
whats geometry wars?
Gulsvi
@gulsvi
Apr 03 2017 00:30
The portfolio is a chore :/
It's a game on xbox
Pagnito
@Pagnito
Apr 03 2017 00:31
@SkyCoder01 haha, i kinda enjoyed it, was a big motivator for me, was the first project i was proud of
ooh
oooh
yea i was trying to imitate like planet exploding, i know i def needed alot more animation, to make it really nice, but i think this is good for now
but im glad it reminded of something so cool looking
Gulsvi
@gulsvi
Apr 03 2017 00:32
lol, yeah these orbs show up and suck everything in and then explode
Pagnito
@Pagnito
Apr 03 2017 00:34
im looking it up on google, the design looks real dope
why is it called geometry wars?
Gulsvi
@gulsvi
Apr 03 2017 00:35
I'm not sure lol, I guess because different shapes do different things
It's a mini game on xbox live, probably $5
Pagnito
@Pagnito
Apr 03 2017 00:36
aah
ValiantBuaquen
@ValiantBuaquen
Apr 03 2017 01:26
Hello y’al, just finished first of four intermediate front end project. Hoping for some comments, hope you don’t mind including the browser you used. Thanks. http://codepen.io/ValiantBuaquen/details/Npovxy
Rikesh89
@Rikesh89
Apr 03 2017 01:31
Hi everyone, does anyone know how to shrink the font size?
tyl-er
@tyl-er
Apr 03 2017 01:41

@Rikesh89 In CSS you can use px or em

for example
element {
font-size:.5em; //or font-size:2px
}

badalsaibo
@heyDante
Apr 03 2017 01:47
@tyl-er both
Rikesh89
@Rikesh89
Apr 03 2017 01:50
@tyl-er so when i am on the codepen i can put that in the Css section and on my <Ul class="element">
is that how you apply it to a specific section?
tyl-er
@tyl-er
Apr 03 2017 01:52

@Rikesh89
Sorry no ul would be the 'element' you are styling. There's no need to add a class/

ul {
font-size:.5em;
}

Rikesh89
@Rikesh89
Apr 03 2017 01:53
oh okay
let me try that
@tyl-er thanks it works
CamperBot
@camperbot
Apr 03 2017 01:54
rikesh89 sends brownie points to @tyl-er :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @tyl-er |http://www.freecodecamp.com/tyl-er
tyl-er
@tyl-er
Apr 03 2017 01:54

If the class name was element because you only wanted to style that particular ul you would write

.element {
font-size:.5em;
}

No problem

Rikesh89
@Rikesh89
Apr 03 2017 01:56
Do you also know how to remove padding in a thumbnail?
I got an image and there is a big white space on the sides of it
tyl-er
@tyl-er
Apr 03 2017 01:58

padding:o;

codepen url?

i am doing the tribute page
tyl-er
@tyl-er
Apr 03 2017 02:00
So how do you want it to look?
Rikesh89
@Rikesh89
Apr 03 2017 02:00
When i look at it now it looks fine
tyl-er
@tyl-er
Apr 03 2017 02:00
ok
Rikesh89
@Rikesh89
Apr 03 2017 02:00
when i have it open on my full page the sides of the thumbnail are huge white spaces
cause right now the image is showing how i want it to. not sure why it looks right here and the full view it looks different
tyl-er
@tyl-er
Apr 03 2017 02:02
Do you have the code on one side of the screen or on top? Sorry keyboard issues lol
Rikesh89
@Rikesh89
Apr 03 2017 02:02
no what is that?
on the top
how do you put it to the side
Gulsvi
@gulsvi
Apr 03 2017 02:07

@Rikesh89 Your image is 670px wide, but your .thumbnail can get much wider when the screen is bigger. That's why you see white space on both sides in full view, but not in your edit view. You can choose a wider image or limit the width of the .thumbnail in your CSS.

.thumbnail {
  max-width: 680px;
  margin: 0 auto;
}

I chose 680px because your image is 670px and the thumbnail adds 4px of padding + 1px of border on each side.

Rikesh89
@Rikesh89
Apr 03 2017 02:08
@SkyCoder01 thanks that worked
CamperBot
@camperbot
Apr 03 2017 02:08
rikesh89 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 836 | @skycoder01 |http://www.freecodecamp.com/skycoder01
tyl-er
@tyl-er
Apr 03 2017 02:20

I need some help with for loops. I'm working on the Simon Game. I'm having trouble with the function that shows the pattern. I need to write a function that iterates through an array and waits a certain amount of time before before executing the code for each element in the array. I looked at a couple questions on stack overflow, but I haven't been able to put anything together. Here's my last attemp:

var play = function() {
//loops through each element and plays the pattern based on corresponding num
game.pattern=[1,2,4,3,2,2,1]
var i;
for (i = 0; i < game.pattern.length; i++) {
playPattern(i);
}
function playPattern(i){
setTimeout(function() {

            if (game.pattern[i] === 1) {
                blueOn();
            } else if (game.pattern[i] === 2) {
                redOn();
            } else if (game.pattern[i] === 3) {
                greenOn();
            } else if (game.pattern[i] === 4) {
                purpleOn();
            }
        }, 750);
    }

}

http://codepen.io/tyl-er/pen/PpBVyK?editors=0010

Luke LaValva
@LuLaValva
Apr 03 2017 02:34
Can anybody help me with the getJSON command? This code returns "undefined", and I don't know why.
function generateData(input) {
  var ret;
  var link = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+input+"&callback=JSON_CALLBACK";
  $.getJSON(link, function(result){
    console.log(result);
    ret = result;
  });
  return ret;
}
Gulsvi
@gulsvi
Apr 03 2017 02:40
@tyl-er I haven't gotten that far, but it looks like you're trying to run one function every 750 seconds in a for loop. A simplified version of the problem is a 5-second count in a for loop.
For example:
var numbers = [1,2,3,4,5];

for (var i = 0; i < numbers.length; i++) {
  playPattern(i);
}

function playPattern(i) {
  setTimeout(function() {
    console.log(i);
  }, 750);
}
That will wait 750 seconds and count from 0-4 all at once
To make it wait 750 seconds between each iteration, multiply 750 by i:
var numbers = [1,2,3,4,5];

for (var i = 0; i < numbers.length; i++) {
  playPattern(i);
}

function playPattern(i) {
  setTimeout(function() {
    console.log(i);
  }, 750 * i);
}
d wilder
@alhazen1
Apr 03 2017 02:40
I could use some feedback on the functionality of this search feature I'm trying to work in to Wikipedia Viewer project. Especially helpful would be feedback from campers that do not use English as first online language.
Should open in your browser's first language preference including the Wikipedia 'slogans'.
Should have all your browser preferred languages at top of select box
Should change slogan language when language selection changes
Any feedback on how it is working for others is appreciated. I know the code is a bit jacked. I'll clean that soon enough.
http://codepen.io/alhazen1/pen/EWrdOw
Gulsvi
@gulsvi
Apr 03 2017 02:42
So @tyl-er long story short, try multiplying 750 * i in your setTimeout
@LuLaValva With getJSON, it has to go out to the server (wikipedia in this case) and then come back with the data. Like visiting a website, it takes some time. So, your return ret runs before your getJSON finishes
You'll have to use ret inside your getJSON or pass it as an argument to another function inside your getJSON if you want to use it elsewhere in your code
tyl-er
@tyl-er
Apr 03 2017 02:57
@SkyCoder01 Wow thanks that was really helpful.
CamperBot
@camperbot
Apr 03 2017 02:57
tyl-er sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 838 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Luke LaValva
@LuLaValva
Apr 03 2017 02:57
I changed it so that it would work directly within the getJSON, but nothing is happening. Thank you for your input SkyCoder
function generateData(input) {
  var link = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+input+"&callback=JSON_CALLBACK";
  $.getJSON(link, function(result){
    document.getElementById("articleList").innerHTML = result;
  });
}
tyl-er
@tyl-er
Apr 03 2017 02:57
@SkyCoder01 I was about to completely rewrite the function.
Gulsvi
@gulsvi
Apr 03 2017 03:32
@LuLaValva You'll have to stringify() your JSON so it is text if you want to see it in your HTML. Or, just do console.log(result) so you can see it. From looking at your URL, you're probably also hitting a CORS issue. Add &origin=* to your URL to workaround it rather than the callback you have.
function generateData(input) {
  var link = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+input+"&origin=*";
  $.getJSON(link, function(result){
    document.getElementById("articleList").innerHTML = JSON.stringify(result);
  });
}
@tyl-er Hope it helped!
Winnie Wu
@WinnieFuller
Apr 03 2017 05:19
Hello, I'm kind of stuck at personal portfolio page. I feel the tutorial is not enough to build whole thing for finish off the challenge.
h1tag
@h1tag
Apr 03 2017 05:28
@WinnieFuller reverse engineer the example project and use what you've learned so far. The other parts you have to research
"read-search-ask"
Fauzia Rafa
@fauzia-rafa
Apr 03 2017 06:01
how to start new pen in codepen????
h1tag
@h1tag
Apr 03 2017 06:03
@fauzia-rafa there's a create button at the top right
buiphuking
@buiphuking
Apr 03 2017 06:29
plz someone explain me this,

top-menu>li:hover>a:after ??

Spyrantis Theodoros
@thodorisanta
Apr 03 2017 06:31
how can i make an object to have same padding top and bot in a row?
Elbert Cortez
@trip16661
Apr 03 2017 06:32
class Family {
    constructor(lastName) {
        this.lastName = lastName;
    }
}
class Person extends Family {
    constructor(name, lastName) {
        super(lastName);
        this.name = name;
    }
    speak() {
        console.log('Hello my name is ' + this.name + " " + this.lastName);
    }
} 
class Animal {
  constructor(race) {
    this.race = race;
  }
}
class Pet extends Animal{
  constructor(name, race) {
    super(race)
    this.name = name;
  }
}
const jhonPet = new Pet('Spike', 'dog')
const jhon = new Person('Jhon', 'Doe');

console.log(jhon.speak());
Like creating a new class called PetOwner
@thodorisanta you can do it like this padding: 1rem 0;
or padding: 1rem 0 1rem 0; always clockwise
Spyrantis Theodoros
@thodorisanta
Apr 03 2017 06:35
@trip16661 and that makes it have exactly the same amount of space right?
Elbert Cortez
@trip16661
Apr 03 2017 06:36
that gives the same amount of padding
now it depends
on what else do you have on the box
if it has other added paddings etc
Robert Arifin
@renkachan
Apr 03 2017 06:39
guys is there any hint to make cross sign for the wikipedia viewer task?
i just knew to use pseudo element, but struggle to make it
F22rapt
@F22rapt
Apr 03 2017 07:02
Javascrpit such a bother :(
so, if I'm understanding this..var speed and this.speed would be different because one is private and one is public..?
Mohamed Derhalli
@derhallim
Apr 03 2017 07:44
@F22rapt JS is awesome
anything u want to use when declaring ur object from outside, u stick it to this
F22rapt
@F22rapt
Apr 03 2017 07:44
im strugglin xDD taking me a lot of time to work thru the lessons properly, making sure i understand
Mohamed Derhalli
@derhallim
Apr 03 2017 07:47
so for example:
var actionControl = (function doSomething(action){
this.action1 = action; //this will be accessible from the outside
var action2 = 'shout'; //this won't be accessible, unless u use closures

function shoutMessage(){
console.log('Let us ' + action2); 
}

return {
shout: shoutMessage
}
})();

so now you can do something like

actionControl.shout();

and it will have access to action2

Tanisha Garg
@TanishaGarg
Apr 03 2017 07:51
What could be the possible reasons for my icon tag not working properly in this pen. Please, see the last of the code. https://codepen.io/thexplorer/pen/LWqzLe?editors=1100
Aman saxena
@neille2406
Apr 03 2017 07:54
how to use icons in the place holder ?anyone?
Mohamed Derhalli
@derhallim
Apr 03 2017 07:54
@TanishaGarg which icon
@neille2406 which placeholder?
Aman saxena
@neille2406
Apr 03 2017 07:55
any form input placeholder how to have icons in it
mrAitai
@mrAitai
Apr 03 2017 07:55
<i class="fa fa-twitter fa-3x icon-management2"> is that? @TanishaGarg
Tanisha Garg
@TanishaGarg
Apr 03 2017 07:56
Yes @mrAitai
Mohamed Derhalli
@derhallim
Apr 03 2017 07:57
are u referencing font awesome?
h1tag
@h1tag
Apr 03 2017 07:57
You have to add font awsome first
Mohamed Derhalli
@derhallim
Apr 03 2017 07:57
it's missing
Clyde Lobo
@oppiniated
Apr 03 2017 07:57
@TanishaGarg Using 9 webfonts will make your page load slower
Aman saxena
@neille2406
Apr 03 2017 07:57
i have added fontawesome but still it aint working
Tanisha Garg
@TanishaGarg
Apr 03 2017 07:58
@oppiniated Ok, i will remove some but i don't think that it is causing the problem.
mrAitai
@mrAitai
Apr 03 2017 07:58
@TanishaGarg i think u should add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> on your html
Mohamed Derhalli
@derhallim
Apr 03 2017 07:59
@neille2406 sorry I was referring to tanisha for the font awesome
Tanisha Garg
@TanishaGarg
Apr 03 2017 07:59
@mrAitai Ok, I will try it
Mohamed Derhalli
@derhallim
Apr 03 2017 07:59
@neille2406 can you share the code to see?
mrAitai
@mrAitai
Apr 03 2017 08:00
@TanishaGarg ah. and delete this "fa-3x icon-management2" , i guess
Tanisha Garg
@TanishaGarg
Apr 03 2017 08:00
Thanks a lot, @mrAitai and @derhallim . It worked.
CamperBot
@camperbot
Apr 03 2017 08:00
tanishagarg sends brownie points to @mraitai and @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @derhallim |http://www.freecodecamp.com/derhallim
:cookie: 119 | @mraitai |http://www.freecodecamp.com/mraitai
Mohamed Derhalli
@derhallim
Apr 03 2017 08:00
great, u should tweet about this achievment
F22rapt
@F22rapt
Apr 03 2017 08:00
i notice that using certain sizes with font awesome don't work or come out broken..
mrAitai
@mrAitai
Apr 03 2017 08:01
@TanishaGarg don't mention it. I'm doing that challenge, too
F22rapt
@F22rapt
Apr 03 2017 08:01
@derhallim don't pun, its 3am. can't handle it..grrr
Mohamed Derhalli
@derhallim
Apr 03 2017 08:02
@F22rapt haha
Aman saxena
@neille2406
Apr 03 2017 08:02
https://codepen.io/neille2406/pen/bqzZQq dont mind the responsiveness .Check in the form
Mohamed Derhalli
@derhallim
Apr 03 2017 08:03
@neille2406 ok what do u need to do? add icon in the form? where?
Aman saxena
@neille2406
Apr 03 2017 08:03
can u see the field with first name and last name i need a icon before tht @derhallim
Berk
@berkmutlu
Apr 03 2017 08:07
Hello guys , I wanna give opacity to only my image. But when I write opacity its effecting my TEXT not and img. How can fix this ? http://codepen.io/zombielord31/pen/GWzeGp
Mohamed Derhalli
@derhallim
Apr 03 2017 08:08

@neille2406 something like that?

https://codepen.io/Derhallim/pen/XMOGGx

Aman saxena
@neille2406
Apr 03 2017 08:09
ya exactly like tht thanks @derhallim
CamperBot
@camperbot
Apr 03 2017 08:09
neille2406 sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 84 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 03 2017 08:10
note how u can't really have the icon inside the input, so u have a div and add the icon on top of the input with css
Aman saxena
@neille2406
Apr 03 2017 08:10
ok cool @derhallim
F22rapt
@F22rapt
Apr 03 2017 08:11
whew, through JS, now into basic algorithm scipting..which..sounds..not..so..easy.
Mohamed Derhalli
@derhallim
Apr 03 2017 08:12
algorithms are fun
Johnny
@JohnnyBizzel
Apr 03 2017 08:17
@derhallim Try codewars.com for extra practice
Mohamed Derhalli
@derhallim
Apr 03 2017 08:18
@JohnnyBizzel always :P
Johnny
@JohnnyBizzel
Apr 03 2017 08:19
:+1:
F22rapt
@F22rapt
Apr 03 2017 08:20
@zombielord31 i broke my pen page, but move your background image into your Body in your CSS, background-image:URL()
Mohamed Derhalli
@derhallim
Apr 03 2017 08:21
@JohnnyBizzel are there some sites like these, for CSS stuff?
Johnny
@JohnnyBizzel
Apr 03 2017 08:21
@derhallim Not that I know about.
@derhallim Have you tried this quiz: http://davidshariff.com/quiz/
Mohamed Derhalli
@derhallim
Apr 03 2017 08:22
no
i'll try it out
F22rapt
@F22rapt
Apr 03 2017 08:23
i think this is a good stopping point...tomorow..algorishms...i forgot how to english, anyways g'nite
Mohamed Derhalli
@derhallim
Apr 03 2017 08:25
@F22rapt good night, seems like u calculated ur way out of here
:P
@JohnnyBizzel that css quiz seems tough haha
dont u just love bootstrap
:P
Johnny
@JohnnyBizzel
Apr 03 2017 08:26
@derhallim Sorry, did you want an easy quiz? :joy:
Mohamed Derhalli
@derhallim
Apr 03 2017 08:26
nooooooooo
if iw anted an easy quiz i would be asking myself questions
anyway, thanks @JohnnyBizzel
CamperBot
@camperbot
Apr 03 2017 08:27
derhallim sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1603 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Mohamed Derhalli
@derhallim
Apr 03 2017 08:27
me go now
Johnny
@JohnnyBizzel
Apr 03 2017 08:27
@derhallim ;)
Berk
@berkmutlu
Apr 03 2017 08:28
@F22rapt I tried that but its not working. Still its changing the opacity of text part. but background-image stays same :(
Shashank Kumar
@shashank893
Apr 03 2017 08:55
hi @JohnnyBizzel
can u please send me the link again for creating portfolios. I mistakenly lost it :|
Johnny
@JohnnyBizzel
Apr 03 2017 08:57
@shashank893 should be on the map.
Shashank Kumar
@shashank893
Apr 03 2017 09:00
no no I am actually asking for the portfolios which I can refer (U have given me some link containing portfolios of Tesla and all)not my portfolios
@JohnnyBizzel
Johnny
@JohnnyBizzel
Apr 03 2017 09:02
@shashank893 I made a collection on codepen. I guess that is what you mean: http://codepen.io/collection/nqawWO/
Shashank Kumar
@shashank893
Apr 03 2017 09:03
yes yes..thanks @JohnnyBizzel :)
CamperBot
@camperbot
Apr 03 2017 09:03
shashank893 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1606 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Spyrantis Theodoros
@thodorisanta
Apr 03 2017 09:13
im working on the twitch api project and i did everything except for making the buttons work. how am i suppose to do that :/
http://codepen.io/oshikurou/pen/YZrqBy?editors=0011
Dany Din
@danydin
Apr 03 2017 10:11
the buttons on top to affect the display?
Harsh Chandra
@HarshHC
Apr 03 2017 10:28
Hey guys I was making a project to practice whatever I learned in JS , however I need some help anyone who could ?
Rudy Hernandez
@rudolphh
Apr 03 2017 10:29
tell me more @HarshHC
Harsh Chandra
@HarshHC
Apr 03 2017 10:29
@rudolphh oh hey its u, remember by flight booking project I was making?
Rudy Hernandez
@rudolphh
Apr 03 2017 10:29
@thodorisanta yeah have to be more specific
yeah, i hated the fact that you used click on the submit lol, bugged me every time i pressed enter and it reloaded
what you up to?
Harsh Chandra
@HarshHC
Apr 03 2017 10:31

@rudolphh http://codepen.io/HarshHC/pen/zZePJM?editors=1010

I am trying to store all data in JS and add add it to my html using JS itself , for now I removed eveything from first flight info but unable to get data to html

Duraid
@shduraid
Apr 03 2017 10:32
Hi everyone, I'm building a landing page in Romanian and having some issues with IE 11, all Romanian letters appear bolded (letters like ă, ş, ţ, etc.) Any idea why this could be happening? Here's the link http://duraid.me/test/meister/
Could it be the custom font that I'm using, or does the user need to have Romanian language installed on their computer?
Harsh Chandra
@HarshHC
Apr 03 2017 10:33
@rudolphh I can explain more in detail :P if u didnt understand what I need help with
Rudy Hernandez
@rudolphh
Apr 03 2017 10:33
just running it i see no errors or logging of anything. like i always advise, break something. write code how you think it will work and go from there.
Harsh Chandra
@HarshHC
Apr 03 2017 10:33
telling me?
Rudy Hernandez
@rudolphh
Apr 03 2017 10:37
i'm kind of understanding but i would understand more if i saw something going wrong, it helps you and others figure out what you're really trying to do if that makes sense. when there is blank space and no errors or messages in the console, someone has to really go through your code from scratch like they just wrote it themselves.
Harsh Chandra
@HarshHC
Apr 03 2017 10:38
@rudolphh That might help understand what I want xD
Rudy Hernandez
@rudolphh
Apr 03 2017 10:40
yes it does thank you
Harsh Chandra
@HarshHC
Apr 03 2017 10:41
:)
Rudy Hernandez
@rudolphh
Apr 03 2017 10:43
just for starters, in your selector here:
$("h5.flightNo"+i+1+".srno").html(flsrno[i]);
what are you trying to accomplish as an example of a selection?
Harsh Chandra
@HarshHC
Apr 03 2017 10:45
select the h5 element which has class of flightNo at i+1 which will be 1 for the first iteration and add the text stored in array flsrno at postion i which should be 0 for the first iteration , to that place in html
makes sense? :)
Rudy Hernandez
@rudolphh
Apr 03 2017 10:46
it does just not sure the syntax is right
Harsh Chandra
@HarshHC
Apr 03 2017 10:47
I want to add the first number in that array to the h5 tag which has both classes flightNo1 and srno , both classes because srno exists in all flights however I want to add the first number in array only to the first flight , the second one to the second and so on
Yup may be wrong , what could be fixed...
maybe use .text instead of .html ?
still nothing changed
Harsh Chandra
@HarshHC
Apr 03 2017 10:52
@rudolphh ohhhhhh wait I GOT IT!
Rudy Hernandez
@rudolphh
Apr 03 2017 10:53
i figured you had a much better idea than me ;)
Harsh Chandra
@HarshHC
Apr 03 2017 10:53
umm ?
Rudy Hernandez
@rudolphh
Apr 03 2017 10:53
so what was it
Harsh Chandra
@HarshHC
Apr 03 2017 10:53
i just added brackets around i+1 lol
$(".flightNo"+(i+1)+".srno").text(flsrno[i]);
^ that was it lol
@rudolphh thanks tho for helping
CamperBot
@camperbot
Apr 03 2017 10:54
harshhc sends brownie points to @rudolphh :sparkles: :thumbsup: :sparkles:
:cookie: 144 | @rudolphh |http://www.freecodecamp.com/rudolphh
Rudy Hernandez
@rudolphh
Apr 03 2017 10:55
omg i seriously thought of that lol
np
Harsh Chandra
@HarshHC
Apr 03 2017 10:56
oh lol haha
Rudy Hernandez
@rudolphh
Apr 03 2017 10:57
is this really practice @HarshHC because that is one mess of spaghetti code, could use some refactoring
i knew you had a better idea than me of what was wrong though, just took a bit of time
Harsh Chandra
@HarshHC
Apr 03 2017 10:57
@rudolphh its for the first time im making something in JS :P
@rudolphh what do u exactly mean by refactoring
Rudy Hernandez
@rudolphh
Apr 03 2017 10:57
oh okay, awesome!!!
refactoring just means simplifying your code
mrAitai
@mrAitai
Apr 03 2017 10:58
Hi. I have a question.
i'm doing my portfolio page but my js code have problem.
I want <li> change color when i scroll.
Here my code.
http://codepen.io/Aitai/pen/zZeGbp
Harsh Chandra
@HarshHC
Apr 03 2017 10:58
but Im sure the final thing will work great!
Rudy Hernandez
@rudolphh
Apr 03 2017 10:58
less lines and instructions to do the same thing
yeah its looking really good
PedroCSilva
@PedroCSilva
Apr 03 2017 11:12
i'll try to help when I get home @HarshHC
Rudy Hernandez
@rudolphh
Apr 03 2017 11:24
no you won't @PedroCSilva or i won't vote for you
Scott Lieber
@lieberscott
Apr 03 2017 11:41

Hi everyone. I'm on the random quote generator challenge, and I'm having a problem I'm hoping you can help me understand and fix.

I'm using the following url to obtain JSON of a random quote:

http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en

But then I get the following error message when I run my code and press the "Get Quote" button:

Mixed Content: The page at 'https://codepen.io/lieberscott/pen/evxVjg' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en'. This request has been blocked; the content must be served over HTTPS.

Then I add https:
https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en

And I get this response:

GET https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en net::ERR_INSECURE_RESPONSE

Then I use a CORS (something I don't completely understand, but I read about after Googling around) at crossorigin.me: http://crossorigin.me/https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en

And I get this error:

Mixed Content: The page at 'https://codepen.io/lieberscott/pen/evxVjg' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://crossorigin/me/https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en'. This request has been blocked; the content must be served over HTTPS.

Can someone help me understand what is going on and how I should go about resolving it?? Thank you for any help you can offer.

oops, didn't mean for my pen to pop up in this window
Rudy Hernandez
@rudolphh
Apr 03 2017 11:44
@lieberscott your api request has to be over https and not http
it has to do with the cross-origin scripting policy of codepen and anyone else that would run code within a frame of a web page, which is what codepen essentially does
Scott Lieber
@lieberscott
Apr 03 2017 11:45
does that mean i shouldn't use the forismatic program for codepen since it's got some cross-compatability issues?
Rudy Hernandez
@rudolphh
Apr 03 2017 11:47
yeah you wan to use an api that allows https access. like quotesondesign which (i believe) was the one suggested
Scott Lieber
@lieberscott
Apr 03 2017 11:49
you know ... yeah,, ok, i just figured out something that i should've done first ... ok. thanks, appreciate your help my man
Andres Diaz-Pinto
@diazandr3s
Apr 03 2017 11:50
@lieberscott use this before the link to the API https://crossorigin.me/
Rudy Hernandez
@rudolphh
Apr 03 2017 11:50
thank you @rudolphh lol
CamperBot
@camperbot
Apr 03 2017 11:50
sorry rudolphh, you can't send brownie points to yourself! :sparkles: :sparkles:
Rudy Hernandez
@rudolphh
Apr 03 2017 11:50
that works too ty @diazandr3s
CamperBot
@camperbot
Apr 03 2017 11:50
rudolphh sends brownie points to @diazandr3s :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @diazandr3s |http://www.freecodecamp.com/diazandr3s
Ramesh
@rnallu
Apr 03 2017 11:51
Guys, I'm unable to understand the API documentation. What we need to focus in API, how to derive the URL ,etc.. Eg.https://github.com/justintv/Twitch-API, pls explain this.
Andres Diaz-Pinto
@diazandr3s
Apr 03 2017 11:52
Sorry this one https://wind-bow.glitch.me/ @rnallu
Rudy Hernandez
@rudolphh
Apr 03 2017 11:53
seems like he needs more than that, but good info @diazandr3s
Scott Lieber
@lieberscott
Apr 03 2017 11:54
@diasandr3s @rudolphh Thank you!
CamperBot
@camperbot
Apr 03 2017 11:54
lieberscott sends brownie points to @diasandr3s and @rudolphh :sparkles: :thumbsup: :sparkles:
:warning: @diasandr3s's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 145 | @rudolphh |http://www.freecodecamp.com/rudolphh
Andres Diaz-Pinto
@diazandr3s
Apr 03 2017 11:56
@lieberscott with z :) diazandr3s hahaha
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:00
Done with the wikipedia viewer. http://codepen.io/RafaelVD/pen/YZBXBB
Tanisha Garg
@TanishaGarg
Apr 03 2017 12:05
What am I doing wrong in this code. The headers in the navigation bar don't take the page to the place desired. https://codepen.io/thexplorer/pen/LWqzLe
Scott Lieber
@lieberscott
Apr 03 2017 12:07
@diazandr3s my bad! Thank you again!
CamperBot
@camperbot
Apr 03 2017 12:07
lieberscott sends brownie points to @diazandr3s :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @diazandr3s |http://www.freecodecamp.com/diazandr3s
Ramesh
@rnallu
Apr 03 2017 12:14
@diazandr3s where we can get required data for Twitch project?
Andres Diaz-Pinto
@diazandr3s
Apr 03 2017 12:15
Put this in your browser and you can see the json
Simo
@SimoOmis10
Apr 03 2017 12:23
hello ,
i used guideguide , but now i can't because GuideGuide doesn't work in photoshop cc 2017.
are there plugins similar the guideguide ?
the jumbotron class is not working
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:35
@Praveenmessi try putting container inside jumbotron
Praveen kumar
@Praveenmessi
Apr 03 2017 12:36
negative
Zach
@hirodashi
Apr 03 2017 12:38
Hi, everyone! I've referenced many examples of changes a url using jquery and I can't get my tweet button's link to change when a new quote is loaded. Can anyone tell me what I'm missing?
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:40
@Praveenmessi Is bootstrap included in your external css settings?
Praveen kumar
@Praveenmessi
Apr 03 2017 12:41
how to do that?
got it. In the css settings right?
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:42
click on the gear shape icon beside css, then under add external css quick add "bootstrap" then save.
Praveen kumar
@Praveenmessi
Apr 03 2017 12:43
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
you mean this link?
@rfvergeldedios
Praveen kumar
@Praveenmessi
Apr 03 2017 12:45
still not getting that.
i tried it in sublime
it is not working when i include that in a seperate css file and link it with html file
@rfvergeldedios
Ken Haduch
@khaduch
Apr 03 2017 12:49
@Praveenmessi - are you using Bootstrap V3 classes, or V4? You have two different things being loaded into your CodePen project at this point, in your external CSS settings, you have V4, and the <link that you have is loading v3. You need to select the correct one
and in CodePen, the external CSS settings is the right place to put it, not in the HTML panel.
If you are using V3, use this https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css in the External CSS.
Praveen kumar
@Praveenmessi
Apr 03 2017 12:51
i changed that. Actually, the problem is with the jumbotron.
@khaduch
its colour is not changing
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:53
@Praveenmessi add a class name for jumbotron then use that name instead of .jumbotron
mrAitai
@mrAitai
Apr 03 2017 12:54
Hi. I have a question.
i'm doing my portfolio page but my js code have problem.
I want <li> change color when i scroll.
Here my code.
http://codepen.io/Aitai/pen/zZeGbp
rfvergeldedios
@rfvergeldedios
Apr 03 2017 12:54
@Praveenmessi for example <div class="jumbotron gallerySpace">
Ken Haduch
@khaduch
Apr 03 2017 12:55
@Praveenmessi - in my copy of your project, I put the CSS that I listed above in the external CSS slot in the CSS config panel, and delete the link in your HTML panel. Use "Tidy HTML" in the HTML dropdown (on the top right of the HTML panel) It looks like you have two closing </nav> tags. After changing the CSS link, I am at least seeing the jumbotron.
then you probably want to use background-color for the CSS setting that you are trying to customize.
when I changed to that, it changed the background to a dark bluish color.
Praveen kumar
@Praveenmessi
Apr 03 2017 13:00
@khaduch thank you, sir. It changed.
CamperBot
@camperbot
Apr 03 2017 13:00
praveenmessi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2697 | @khaduch |http://www.freecodecamp.com/khaduch
mrAitai
@mrAitai
Apr 03 2017 13:04
Someone help me, pls!!
Ken Haduch
@khaduch
Apr 03 2017 13:04
@Praveenmessi - the problem with loading the CSS in the HTML panel as you had it is that after the head of the page was loaded, which is where your custom CSS code is loaded, it was then re-loading the bootstrap.css, which overwrote your settings that you were trying to put in place. You just have to follow CodePen's way of doing things to make it come out right!
@mrAitai - I'll take a look and see what you have...
Praveen kumar
@Praveenmessi
Apr 03 2017 13:08
@khaduch ok sir.
Zach
@hirodashi
Apr 03 2017 13:08
is anyone free to help me spot an issue in my jQuery?
shivam gupta
@shivamg11000
Apr 03 2017 13:08
@shivamg11000
hey guys how can I make the the two images stick together and make them horixontally centered.
In this
https://codepen.io/shivamg11000/full/EWrbMM/
Ken Haduch
@khaduch
Apr 03 2017 13:08
@hirodashi - post a link and we can see...
mrAitai
@mrAitai
Apr 03 2017 13:09
oh. i 've fixed that. Now it only have one problem. That is position of element.
http://codepen.io/Aitai/pen/zZeGbp
mrAitai
@mrAitai
Apr 03 2017 13:09
@khaduch
Ken Haduch
@khaduch
Apr 03 2017 13:09
@mrAitai - I'll reload and try it - what is the specific problem now?
Zach
@hirodashi
Apr 03 2017 13:10
@khaduch When a new quote is loaded, i need the url to be replaced. the .attr doesn't seem to be having effect
Ken Haduch
@khaduch
Apr 03 2017 13:10
@mrAitai - actually, your links change color once when scrolling down, but then it sticks on the "Contacts" section
mrAitai
@mrAitai
Apr 03 2017 13:10
@khaduch yep
i don't know how to describe that bug. But i think because this line "if (posElement >= posWindow)"
Ken Haduch
@khaduch
Apr 03 2017 13:15
@hirodashi - one thing to do - in your HTML code, you have id="#tweet-link" - take the # out of there, it should just be id="tweet-link". Not sure if that will fix everything, but having the octothorpe in there is not correct.
Zach
@hirodashi
Apr 03 2017 13:17
@khaduch Oh, damnit. That's just exhaustion setting in. Thank you I really needed the extra eyes.
CamperBot
@camperbot
Apr 03 2017 13:17
hirodashi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2698 | @khaduch |http://www.freecodecamp.com/khaduch
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:21
What am I doing wrong in this code. The headers in the navigation bar don't take the page to the place desired. https://codepen.io/thexplorer/pen/LWqzLe
mrAitai
@mrAitai
Apr 03 2017 13:25
@TanishaGarg you mean when click any content in navigation, your page always comeback to top?
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:25
@mrAitai yes
Zach
@hirodashi
Apr 03 2017 13:26
@TanishaGarg Your nav links and section ids seem okay. By the way, I think your style sheets should go into the box in the settings area
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:27
@hirodashi but that's not what's causing the problem right?
Zach
@hirodashi
Apr 03 2017 13:30
@TanishaGarg No, I don't think so.
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:31
@hirodashi Any other possible cause to problem you might be knowing about?
Clyde Lobo
@oppiniated
Apr 03 2017 13:38
@TanishaGarg It's because of your css. position: absolute everywhere :(
@oppiniated Delete your css and the header link works
relikt
@reliktus
Apr 03 2017 13:39
Hi there Im stuck in Wiki API connection
http://codepen.io/relikt/pen/NpoaaQ?editors=1010
it got something with cros platform - but cant figure it out
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:40
@oppiniated But if i will delete it, my whole page will get messed up. Position absolute makes sure that my images and text are at the precise location where i tell them to be
relikt
@reliktus
Apr 03 2017 13:40
as always : clear api address is fine, but after puting it in codepen.io I got error in console
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc…text&exsentences=1&exlimit=max&gsrsearch=fsdsa%20sc&callback=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:41
@oppiniated how can i make sure of that after i remove position absolute?
relikt
@reliktus
Apr 03 2017 13:42
@TanishaGarg You need to use position absolute with sens
try learning to build page more responsive
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:44
@reliktus ?
relikt
@reliktus
Apr 03 2017 13:44
read about bootstrap for example
position absolute in everyplace on the page is not the solution
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:45
@reliktus Can you be a bit more specific, please?
relikt
@reliktus
Apr 03 2017 13:45
its like makeing a page with tables
without using a div's
@TanishaGarg read about css positions
and try to use it only if necessary for example
Me11234
@Me11234
Apr 03 2017 13:46
@TanishaGarg
I just ran the code on dreamweaver
Everything seems fine now
Rerun and try again
mrAitai
@mrAitai
Apr 03 2017 13:47
@reliktus can u help me
relikt
@reliktus
Apr 03 2017 13:47
if You want to have facebook bar on the page allways on the right side of Your screen wich stays there even whene page scrolls down
thats should be postion: absolute
cant tell You more , you need to practise
drowningpool5
@drowningpool5
Apr 03 2017 13:48
Hi guys! Could someone tell me where can I get some information about what projects I can create with JavaScript. :) Ty
Alexander Domikov
@AlexanderDom
Apr 03 2017 13:48
even when page scrolls it's more for position: fixed for me
relikt
@reliktus
Apr 03 2017 13:48
@drowningpool5 google.com :smile:
@AlexanderDom yeap
that's was not the best example
but You catch the point
she should read about positioning
mrAitai
@mrAitai
Apr 03 2017 13:50
Pls! Somebody help me
relikt
@reliktus
Apr 03 2017 13:50
Anyone help with that console error:XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc…text&exsentences=1&exlimit=max&gsrsearch=fsdsa%20sc&callback=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Alexander Domikov
@AlexanderDom
Apr 03 2017 13:50
yes, css tricks for exemple have a mega article on positionnning
Ken Haduch
@khaduch
Apr 03 2017 13:51
@hirodashi - one other problem that I think you have is that when you are generating a new link for a new quote, you are not putting the status= string into your new URL.
relikt
@reliktus
Apr 03 2017 13:52
ok, maybe other time I will have more luck :worried:
Alexander Domikov
@AlexanderDom
Apr 03 2017 13:52
@mrAitai i look your problem
relikt
@reliktus
Apr 03 2017 13:53
cya
mrAitai
@mrAitai
Apr 03 2017 13:54
@AlexanderDom Thanks. Its my project.
http://codepen.io/Aitai/pen/zZeGbp
That is problem with jquery
CamperBot
@camperbot
Apr 03 2017 13:54
mraitai sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
nicolebarleta
@nicolebarleta
Apr 03 2017 13:56
hi guys does any of you know why i cant click my collapsed navbar in my iphone7?
I mean the a href is non clickable
Alexander Domikov
@AlexanderDom
Apr 03 2017 13:58
@mrAitai what is your problem exactly again plz ?
Tanisha Garg
@TanishaGarg
Apr 03 2017 13:59
@reliktus I removed Position absolute from a part of the page but it still isn't working
mrAitai
@mrAitai
Apr 03 2017 13:59
As you see, when you scroll the page to contact section, contact in navbar does not red.
@AlexanderDom
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:03
@mrAitai it's because of top position of contact page, if you reduce the height of your browser you gonna accomplish condition to change the color, otherwise with normal height your browser top position it's just bigger than contact page top position
h1tag
@h1tag
Apr 03 2017 14:03
@nicolebarleta make sure u added jQuery and Bootstrap js
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:04
@mrAitai you can see it here
Capture d’écran 2017-04-03 à 16.03.59.png
because of developper tools, height of page is bigger, so js thinks that top of contact is passed the condition
mrAitai
@mrAitai
Apr 03 2017 14:06
@AlexanderDom Oh. Thanks very much for your help.
CamperBot
@camperbot
Apr 03 2017 14:06
mraitai sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: mraitai already gave alexanderdom points
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:07
@mrAitai you can try to add something like .page { min-height: 100vh; }
so every page class blocks, gonna take ot aleast 100% of page height
so your condition gonna work
mrAitai
@mrAitai
Apr 03 2017 14:08
@AlexanderDom Uhm. Let me try. Anyway, thank u :+1:
CamperBot
@camperbot
Apr 03 2017 14:08
mraitai sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: mraitai already gave alexanderdom points
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:08
@mrAitai you're welcome
or or better i think you can just compare page top is bigger than 0 or not
because window top is too big
mrAitai
@mrAitai
Apr 03 2017 14:10
@AlexanderDom Yeah. I have done. Btw, what do u think about my portfolio page?
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:13
@mrAitai try to use css to create margins (with margin and padding) and not <br> i know that at start it's easier, but normally it's only for new line inside a paragraph <p> that you must use it :)
also you can add your font-awesome file inside css tab in codepen
when you precise display other than none at same time that float it don't gonna change anything, because your element is already floating
Ramesh
@rnallu
Apr 03 2017 14:17
@diazandr3s what is meant by output of this https://wind-bow.glitch.me/twitch-api/streams/freecodecamp
Is it mean Offline? Pls confirm
mrAitai
@mrAitai
Apr 03 2017 14:17
@AlexanderDom Okay. Get it. Thanks for your idea. :sparkles:
CamperBot
@camperbot
Apr 03 2017 14:17
mraitai sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: mraitai already gave alexanderdom points
Alexander Domikov
@AlexanderDom
Apr 03 2017 14:17
<div> elements have display: block by default everywhere, and one other point try to group same rules together, like text-align etc. But it's good portfolio to start, keep it going :)
mrAitai
@mrAitai
Apr 03 2017 14:18
@AlexanderDom Yup.
Andres Diaz-Pinto
@diazandr3s
Apr 03 2017 14:42
@rnallu Exactly. it means it's offline
@rnallu I first use streams to check if the channel is offline, then I obtained all the info using https://wind-bow.glitch.me/twitch-api/channels/freecodecamp
Just is case anyone is interested in the problem I had before. I couldnt access to a varibale that I created inside a for loop. That is because JavaScript's scopes is function-level, not block-level.
It means that the variable created inside a loop or if statement cannot be accessed outside of the loop or if statement
Ramesh
@rnallu
Apr 03 2017 14:48
@diazandr3s Thank you
CamperBot
@camperbot
Apr 03 2017 14:48
rnallu sends brownie points to @diazandr3s :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @diazandr3s |http://www.freecodecamp.com/diazandr3s
Will Foster
@Will5592
Apr 03 2017 15:10

Quick question to anyone who knows: If you have a basic page of images, but want to create the slideshow effect (where you click on a picture, it enlarges, centers in the screen and allows you to scroll through) like you find on almost every gallery (facebook, twitter etc.).

Is this done with HTML, CSS or Javascript? I am not sure which language you would use to achieve this (my guess is JS, but could be wrong)

Jim Tryon
@jimtryon
Apr 03 2017 15:12
@Will5592 It’s done with JavaScript. You can use one of the Bootstrap components for the slideshow.
@Will5592 A carousel would do the job
nicolebarleta
@nicolebarleta
Apr 03 2017 15:16
@fortMaximus hi thanks for responding, yeah I already have that in my
CamperBot
@camperbot
Apr 03 2017 15:16
nicolebarleta sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 03 2017 15:16
@nicolebarleta can you show me the pen?
WillGITCode
@WillGITCode
Apr 03 2017 15:17
@Will5592 Something a little like this.https://www.w3schools.com/howto/howto_js_slideshow.asp I found it while reading this. which looks faster and easier to incorporate into a CodePen:) https://www.w3schools.com/howto/howto_js_slideshow.asp Good luck
Will Foster
@Will5592
Apr 03 2017 15:20
@WillGITCode @jimtryon Thanks guys
CamperBot
@camperbot
Apr 03 2017 15:20
will5592 sends brownie points to @willgitcode and @jimtryon :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @willgitcode |http://www.freecodecamp.com/willgitcode
:cookie: 98 | @jimtryon |http://www.freecodecamp.com/jimtryon
Jim Tryon
@jimtryon
Apr 03 2017 15:20
That’d work @WillGITCode
RameezSheikh
@RameezSheikh
Apr 03 2017 15:20
I'm working on my second FCC chalange - where I need to build my portfolio. I tend to use Atom and my default Chrome browser to create my webpage. But when I paste my code in CodePen.io not everything is the same. Can someone help?
I added the bootstrap source to my CSS
nicolebarleta
@nicolebarleta
Apr 03 2017 15:21
Jim Tryon
@jimtryon
Apr 03 2017 15:22
@nicolebarleta Nice layout and use of fonts, color scheme is clashing with the design
h1tag
@h1tag
Apr 03 2017 15:22
@RameezSheikh make sure you added the same version of Bs you added in Atom
Jim Tryon
@jimtryon
Apr 03 2017 15:23
@nicolebarleta I’d change the dark orange to a softer color
h1tag
@h1tag
Apr 03 2017 15:26
@nicolebarleta I can click it on the phone
RameezSheikh
@RameezSheikh
Apr 03 2017 15:26
@fortMaximus That worked. Thanks.
CamperBot
@camperbot
Apr 03 2017 15:26
rameezsheikh sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
nicolebarleta
@nicolebarleta
Apr 03 2017 15:30
@jimtryon thanks for the feedback, I'll try to change the orange 🎃
CamperBot
@camperbot
Apr 03 2017 15:30
nicolebarleta sends brownie points to @jimtryon :sparkles: :thumbsup: :sparkles:
SaiChand Duppala
@saichandd
Apr 03 2017 15:31
can someone please help me, my "due" variable is not getting updated on function call of function getChange(change, due, cid, currency)

function checkCashRegister(price, cash, cid) {
  var change = [];
  var due = Number(Number(cash - price).toFixed(2));
  var cashLeft = Number(remainingMoney(cid));

  if(cashLeft < due){
      console.log("Insufficient Funds DAFAQ");
      return "Insufficient Funds";
  }

//number of significant digits is different so .. .. . ..
  if(cashLeft === due){
      console.log(due);
      return "Closed";
  }

  console.log(change, due);
  getChange(change, due, cid, 100.00);
  console.log(change, due);

  getChange(change, due, cid, 20.00);
  console.log(change, due);

  getChange(change, due, cid, 10.00);
  console.log(change, due);

  getChange(change, due, cid, 5.00);
  console.log(change, due);

 getChange(change, due, cid, 1.00);
  console.log(change, due);

 getChange(change, due, cid, 0.25);
  console.log(change, due);

  getChange(change, due, cid, 0.10);
  console.log(change, due);

  getChange(change, due, cid, 0.05);
  console.log(change, due);

  getChange(change, due, cid, 0.01);

  console.log(change , due);

  if(due === 0){
      return change;
  }
  return "Insufficient Funds"
}

function getChange(change, due, cid, currency){
    var key = getKey(currency);

    if(due >= currency && Object.values(cid[key])[1] >= currency){
        var counter = 0;
        while(due >= currency && Object.values(cid[key])[1] >= currency){
            due = Number(Number(due).toFixed(2)) - currency;
            cid[key][1] -= currency;
            console.log(Object.values(cid[key])[1],cid[key][1], due);
            counter++;
        }
        pushIt(counter, change, key);
    }
    return;
}

function getKey(currency){
    var key;
    if(currency === 100.00)
        key = 8;
    else if(currency === 20.00)
        key = 7;
    else if(currency === 10.00)
        key = 6;
    else if(currency === 5.00)
        key = 5;
    else if(currency === 1.00)
        key = 4;
    else if(currency === 0.25)
        key = 3;
    else if(currency === 0.10)
        key = 2;
    else if(currency === 0.05)
        key = 1;
    else if(currency === 0.01)
        key = 0;
    else
        return "something is wrong";

    return key;
}

function pushIt(counter, change, key){
    if(key === 8)
        change.push(["ONE HUNDRED", 100.00 * counter]);
    else if(key === 7)
        change.push(["TWENTY", 20.00 * counter]);
    else if(key === 6)
        change.push(["TEN", 10.00 * counter]);
    else if(key === 5)
        change.push(["FIVE", 5.00 * counter]);
    else if(key === 4)
        change.push(["ONE", 1.00 * counter]);
    else if(key === 3)
        change.push(["QUARTER", 0.25 * counter]);
    else if(key === 2)
        change.push(["DIME", 0.10 * counter]);
    else if(key === 1)
        change.push(["NICKEL", 0.05 * counter]);
    else if(key === 0)
        change.push(["PENNY", 0.01 * counter]);
    else
        return "something is wrong";
}


function remainingMoney(cid){
    var remaining = 0;
    for(var i = 0; i< cid.length; i++){
        remaining += Object.values(cid[i])[1];
    }
    return Number(remaining).toFixed(2);
}

checkCashRegister(3.26, 100.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);
CamperBot
@camperbot
Apr 03 2017 15:31
api offline
DmitriiVacula
@DmitriiVacula
Apr 03 2017 15:31
Can someone tell me please 1. why the text-align isn't working? and 2. why the col-md-4 isn't working? http://codepen.io/DmitriiVacula/pen/mWQQVV
h1tag
@h1tag
Apr 03 2017 15:35
@DmitriiVacula they're
caseym94
@caseym94
Apr 03 2017 15:36
hello
I'm having an issue
Tanisha Garg
@TanishaGarg
Apr 03 2017 15:36
How can i paste an image or text over other image using bootstrap?
caseym94
@caseym94
Apr 03 2017 15:36
when I type $("div ") it works without a jquery file loaded
DmitriiVacula
@DmitriiVacula
Apr 03 2017 15:36
@TanishaGarg i don't lnow
Tanisha Garg
@TanishaGarg
Apr 03 2017 15:37
@caseym94 What work is it doing?
caseym94
@caseym94
Apr 03 2017 15:37
returning a div element
Tanisha Garg
@TanishaGarg
Apr 03 2017 15:37
@caseym94 be a bit more specific
caseym94
@caseym94
Apr 03 2017 15:37
and it works in any tab
Tanisha Garg
@TanishaGarg
Apr 03 2017 15:38
@caseym94 Sorry, I am not getting you
caseym94
@caseym94
Apr 03 2017 15:39

$("div"); returns

<div class="spacing">... </div>\

and I don't even have a jquery file loaded
it doesn't work when I plce it inside the html file, just the console
append is a jquery function, but it's working in my html file?
without jquery
Keon Samuel
@keonsam
Apr 03 2017 15:51
what
the is not code
that
$("div");returns?
Moisés Man
@moigithub
Apr 03 2017 16:01
@caseym94 some FCC exercises already have jquery loaded ( so u no need to do that urself )
but.. if u gonna work on ur own environment (not on fcc) u need to load jquery urself else $("div") wont work as u said
caseym94
@caseym94
Apr 03 2017 16:02
@keonsam what do you mean lol
$("div");
returns a div on the page
in your console
Keon Samuel
@keonsam
Apr 03 2017 16:04
api.twitch.tv/kraken/users/storbeck?callback=foo&client_id=yue5dlie3v6kw6eivr4uil1313wpcb Failed to load resource: the server responded with a status of 404 ()
caseym94
@caseym94
Apr 03 2017 16:04
I just don't want any jquery in the console without me actually linking to it @moigithub
well I don't mind it being there aslong as I know it's not affecting anything
Keon Samuel
@keonsam
Apr 03 2017 16:05
@caseym94 what are you doing?
caseym94
@caseym94
Apr 03 2017 16:06
wandering why jquery functions work inside of chrome dev tool console lol
but I guess it's not on my end so it's not really an issue
Keon Samuel
@keonsam
Apr 03 2017 16:07
are you not trying to use Jquery?
caseym94
@caseym94
Apr 03 2017 16:09
I think it's funner to write in vanilla js
h1tag
@h1tag
Apr 03 2017 16:09
more fun* :p
Moisés Man
@moigithub
Apr 03 2017 16:10
thats part of devtools.. not jquery
caseym94
@caseym94
Apr 03 2017 16:10
  • I heard you shouldn't use jquery starting off, it's better to understand how to use vanilla javascript before using a framework
yeah someone linked that
look at my .getJSON
it isn't log anything.
logging*
DmitriiVacula
@DmitriiVacula
Apr 03 2017 16:20
Can somebody show me PLEASE how to make 3 circles ( I tried everything for 2 hours now) ?http://codepen.io/DmitriiVacula/pen/mWQQVV
Keon Samuel
@keonsam
Apr 03 2017 16:21
border-radius
Andres Tijera
@android094x
Apr 03 2017 16:21
border-radius: 50%;
Keon Samuel
@keonsam
Apr 03 2017 16:22
@moigithub
please
pretty please
Andres Tijera
@android094x
Apr 03 2017 16:26
@DmitriiVacula The border-radius: 50% you should wirte it in the div with the clases "firstcircle", "secondcircle", "thirdcircle" and if you want a circle the div should be a square
Keon Samuel
@keonsam
Apr 03 2017 16:28
@DmitriiVacula what you doing making games without JS?
Keon Samuel
@keonsam
Apr 03 2017 16:35
var twitchUsers= "https://api.twitch.tv/kraken/users/"+channels[i]+"?callback=foo&client_id=yue5dlie3v6kw6eivr4uil1313wpcb";
 var userName, userLogo, userLink;
  $.getJSON(twitchUsers, function (usersData) {
    console.log(usersData);
  });
  // end of the first getJSON

 // end of the for loop 
}
Ashan Mohammed
@AshanMohammed
Apr 03 2017 16:37
Hello! I am trying to build a random quote machine using an api. When i click the button i get only one quote and nothing when i clicked it again. Help
http://codepen.io/ashan_zeroxster/pen/oBYJXM
h1tag
@h1tag
Apr 03 2017 16:45
@AshanMohammed it works if you put &_jsonp=? instead of &callback=
Pagnito
@Pagnito
Apr 03 2017 16:48
damn why cant i use align-content on the container...
Keon Samuel
@keonsam
Apr 03 2017 16:49
@fortMaximus
help man
HazexD
@HazexD
Apr 03 2017 16:56
Hey Babes :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat:
Keon Samuel
@keonsam
Apr 03 2017 17:00
no one
h1tag
@h1tag
Apr 03 2017 17:09
@keonsam do you know what is callback=? for?
Keon Samuel
@keonsam
Apr 03 2017 17:11
not too sure
h1tag
@h1tag
Apr 03 2017 17:14
you're setting it to foo
it should be set to ?
h1tag
@h1tag
Apr 03 2017 17:19
callback=? here is used to treat the request as a JSONP request
Keon Samuel
@keonsam
Apr 03 2017 17:20
@fortMaximus thanks man that worked
CamperBot
@camperbot
Apr 03 2017 17:20
:cookie: 688 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
keonsam sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
h1tag
@h1tag
Apr 03 2017 17:20

JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.

also read more about JSONP and why it's used
Keon Samuel
@keonsam
Apr 03 2017 17:45
how did you guys get the link to the channels
all of them are api links
Simo
@SimoOmis10
Apr 03 2017 17:52
hello , i need free plugin ( extension ) for system grid in photoshop cc 2017
Keon Samuel
@keonsam
Apr 03 2017 17:52
ask google
unless you want someone to make it then you have to pay.
ZenZate
@ZenZate
Apr 03 2017 17:55
How do I go about starting my tic tac toe bot
I have no idea
Keon Samuel
@keonsam
Apr 03 2017 18:05
think first and then start coding.
that's how I do mines.
Gulsvi
@gulsvi
Apr 03 2017 18:10
@ZenZate It might help to go back and do more algorithms before starting Tic Tac Toe, like some of the advanced ones.
Nikki L.R.
@nikkilr88
Apr 03 2017 18:29
Is anyone available? I could use some help with the local weather project. :D
Gulsvi
@gulsvi
Apr 03 2017 18:29
@nikkilr88 Sure, what's your question?
Isan Bothra
@isanbothra
Apr 03 2017 18:30
is anyone available??
Gulsvi
@gulsvi
Apr 03 2017 18:30
@DmitriiVacula Add this to your .circle class to vertically align:
  display: flex;
  align-items: center;
  justify-content: center;
Don't ask to ask, folks, just ask :)
Nikki L.R.
@nikkilr88
Apr 03 2017 18:31
@SkyCoder01 Thanks! So, I am trying to redo the way the app converts between F and C. Before I rewrote everything inside of the click function. Now I am trying to assign the temp to a global variable. I just can't seem to get it it update outside of the click function.
CamperBot
@camperbot
Apr 03 2017 18:31
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 841 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Isan Bothra
@isanbothra
Apr 03 2017 18:32
my contents in the webpage are going over the nav-bar what to do??
when scrolling...
Gulsvi
@gulsvi
Apr 03 2017 18:32
@nikkilr88 One trick I did for converting was to store both the F and C values in the temperature element itself. You can use custom data attributes like data-celsius="0" and data-fahrenheit="32"
Then when you click, just grab the values of those attributes
@isanbothra Try adding a z-index to your navbar (hard to tell without seeing the code). Something like: z-index: 99 in your CSS
If you can show your code it will help to give a better suggestion
Nikki L.R.
@nikkilr88
Apr 03 2017 18:35

@SkyCoder01 My logic was this:

 var temp1 = '';
  var f = true;


  if(f) {

    temp1 = Math.round(data2.list[1].temp.max);

  } else {

    temp1 = Math.round((data2.list[1].temp.max - 32) * 5 / 9);  

  }

Then in the click function, I tried to change f from true to false.

$('.c').on('click', function() {

          f = !f;
          console.log(f);
                    $('.f').removeClass('act').addClass('notact');
 $('.c').removeClass('notact').addClass('act');

        });
Here is the project, line 285 ... This one is forked, and I was just working with that one box under the main temp. http://codepen.io/nikkilr88/pen/KWEMrX?
Gulsvi
@gulsvi
Apr 03 2017 18:37
@nikkilr88 Setting flags is one way to do it as well, I don't see where you are writing the temperature back to the page though
Nikki L.R.
@nikkilr88
Apr 03 2017 18:38
Hmmm.... how would I do that? I am kind of new at this... Haha... I thought I could just change the variable and that it would update.
@SkyCoder01
Gulsvi
@gulsvi
Apr 03 2017 18:39
@nikkilr88 jQuery has a .html() method for writing html to an element. I'm guessing you would have used that in your quote machine
Yeah, when you wrote a quote to the page in your quote machine, you did: $(".quotecontain").html(quotes[random]);
Nikki L.R.
@nikkilr88
Apr 03 2017 18:40
Oh, right.... Yeah, below I have this:
$('.morn').html('<section class="day">' + days[day1] + '</section>' + newIcon1 + '<section class="daytemp">' + temp1 + '<small class="sm2">°F</small></section>');
So, there it is supposed to show 'temp1'.
Which it does, it just doesn't change.
Gulsvi
@gulsvi
Apr 03 2017 18:41
@nikkilr88 But when you click the C, all you're doing is changing classes around. You aren't writing the HTML again:
        $('.c').on('click', function() {
          f = !f;
          console.log(f);
          $('.f').removeClass('act').addClass('notact');
          $('.c').removeClass('notact').addClass('act');
        });
The only code that runs when you click on the element with the class c is that .removeClass/.addClass code
Nikki L.R.
@nikkilr88
Apr 03 2017 18:42
That's what I originally did. I was hoping there was a way around that.
That's why I was just trying to create global variables and try to change those instead. Is that not possible?
Gulsvi
@gulsvi
Apr 03 2017 18:43
You can change the global variables, but the page won't automatically update - you have to write it back to the page
Something like $('.temp').html(temp1);
Nikki L.R.
@nikkilr88
Apr 03 2017 18:45
Oh well, that's pretty much what I had before. I guess I'll just keep it like that then. Thanks for your time! @SkyCoder01 !
CamperBot
@camperbot
Apr 03 2017 18:45
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 03 2017 18:45
@nikkilr88 Good luck!
Gulsvi
@gulsvi
Apr 03 2017 18:52
@isanbothra Hopefully that helped - if not, share a link to your codepen :)
let me take a break and come back.
Peter hp
@pshp
Apr 03 2017 18:58
Hey everyone. I am stuck on the wiki viewer app. I am sure I have done everything correctly but codepen seems to briefly display my results before deleting them. I would really appreciate if some one could have a look https://codepen.io/pshp/pen/evXdEx
Keon Samuel
@keonsam
Apr 03 2017 19:02
probably the empty function
Mohamed Derhalli
@derhallim
Apr 03 2017 19:03
@pshp u need to return false on the button
@pshp
$(document).ready(function() {

  $("#random").on("click",function(){ // Random article generator
    window.open("https://en.wikipedia.org/wiki/Special:Random");
  });

  $("#button").on("click",function(){ // Search button

    var search = $('#search').val();
    var api = "https://en.wikipedia.org//w/api.php?action=opensearch&search=" + search + "&format=json";

    $.ajax({
      url: api,
      dataType: "jsonp",
      async: false,
      success: function(data) {

        console.log(api);
        var header = data[1],
            summary = data[2],
            link = data[3],              
            len = header.length,
            html =  "";

        $("#output").empty();

        for (var i=0; i<len; i++) {

          html += "<div class='box'><p class='header'>" + header[i] + "</p><p class='summary'>" + summary[i] + "</p><a class='link' href= '" + link[i] + "'>Read more</a></p></div>";

        } // close for loop

        console.log(html);
        $("#output").html(html);

      }, //close success
      error: function() {
        alert("Error");
      }// close error
    }); // close ajax
  return false;
  }); // close search button
});
Nikki L.R.
@nikkilr88
Apr 03 2017 19:04
@nikkilr88 Good luck! @SkyCoder01 Thanks! I appreciate it!
CamperBot
@camperbot
Apr 03 2017 19:04
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 03 2017 19:05
@pshp The default behavior of a form is to refresh the page after submitting the data, add this to your code to prevent the default behavior:
  $('form').on('submit', function(e) {
    e.preventDefault();
  });
Mohamed Derhalli
@derhallim
Apr 03 2017 19:06
@SkyCoder01 which one is better, to prevent Default on the form, or return false on the button click?
Gulsvi
@gulsvi
Apr 03 2017 19:06
I don't know - I never heard of using return false;
Mohamed Derhalli
@derhallim
Apr 03 2017 19:07
he's binding the aciton to the button directly
$("button").on("click)
Peter hp
@pshp
Apr 03 2017 19:07
@derhallim thanks!
CamperBot
@camperbot
Apr 03 2017 19:07
pshp sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 85 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 03 2017 19:07
so in this case would go for return false to prevent refresh
Gulsvi
@gulsvi
Apr 03 2017 19:07
Does that work when you hit enter to search?
Peter hp
@pshp
Apr 03 2017 19:07
Thanks
@SkyCoder01 Thanks!
CamperBot
@camperbot
Apr 03 2017 19:07
pshp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 842 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Mohamed Derhalli
@derhallim
Apr 03 2017 19:08
when he hits enter, nothing happens on the form
because form submit is not implemented i guess
so u need to click the button
Gulsvi
@gulsvi
Apr 03 2017 19:08
<form> automatically submits on enter - the browser does the submit for you
Mohamed Derhalli
@derhallim
Apr 03 2017 19:08
otherwise, remove button code, and do everything in submit
yea, but if u don't have the code to do the submit?
Keon Samuel
@keonsam
Apr 03 2017 19:09
yes mines refreshes.
Gulsvi
@gulsvi
Apr 03 2017 19:09
Yeah, no need for button .click() at all
it's already in a <form>
Mohamed Derhalli
@derhallim
Apr 03 2017 19:09
yea
it doesn't refresh for me because i still have return false in the button code
ZenZate
@ZenZate
Apr 03 2017 19:09
http://codepen.io/ZenZate/pen/vxPygd WHY ISN'T THE IMAGE IN THE CENTER.
Peter hp
@pshp
Apr 03 2017 19:09
Ok I see
Mohamed Derhalli
@derhallim
Apr 03 2017 19:10
but @SkyCoder01 was is better
Keon Samuel
@keonsam
Apr 03 2017 19:10
so you do $("form).on("click")?
Gulsvi
@gulsvi
Apr 03 2017 19:10
They both work :p
ZenZate
@ZenZate
Apr 03 2017 19:10
margin: 0 auto dont workkk
I tried block-center
Mohamed Derhalli
@derhallim
Apr 03 2017 19:10
but i missed the point of clicking enter on keyboard
if u do, the button.click won't be fired
ZenZate
@ZenZate
Apr 03 2017 19:10
Nothing is working
Mohamed Derhalli
@derhallim
Apr 03 2017 19:10
unless u bind the action on the form
ZenZate
@ZenZate
Apr 03 2017 19:10
WHYYYY
Mohamed Derhalli
@derhallim
Apr 03 2017 19:10
like u said
Gulsvi
@gulsvi
Apr 03 2017 19:11
@pshp Here's a "tutorial" of sorts I made for using a search box in a form to search wikipedia - it might help you simplify your code a bit if you want. Otherwise, really no need. Good job on the Wikipedia viewer :) http://s.codepen.io/skycoder/pen/MpKpJj
@ZenZate I'LL LOOK AT YOUR PEN NOW
ZenZate
@ZenZate
Apr 03 2017 19:12
@SkyCoder01 Thanks
CamperBot
@camperbot
Apr 03 2017 19:12
zenzate sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 843 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 03 2017 19:12
@ZenZate :) Add display: block to your CSS for that image
ZenZate
@ZenZate
Apr 03 2017 19:12
Sorry for yelling im just pissed, I can't do something so basic
Mohamed Derhalli
@derhallim
Apr 03 2017 19:12
yep
Gulsvi
@gulsvi
Apr 03 2017 19:12
It's okay, sorry for yelling back :p
Mohamed Derhalli
@derhallim
Apr 03 2017 19:12
display: block; will do it
Gulsvi
@gulsvi
Apr 03 2017 19:13
I have my speakers off anyway
Mohamed Derhalli
@derhallim
Apr 03 2017 19:13
my cat woke up
say sorry
ZenZate
@ZenZate
Apr 03 2017 19:13
sowey 3.3
Peter hp
@pshp
Apr 03 2017 19:13
@SkyCoder01 thank you, that is really helpful. I was struggling with the form more than I should have
CamperBot
@camperbot
Apr 03 2017 19:13
pshp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: pshp already gave skycoder01 points
Gulsvi
@gulsvi
Apr 03 2017 19:14
No problem - <form> makes it real easy. Some people end up adding keypress event listeners and writing their own code for it when the browser already does all of that for you :)
Marco Mazzeo
@Doko85
Apr 03 2017 19:14
@ZenZate
<div class="container">
  <img class="img-responsive" src="http://jpmec.com/wp-includes/js/jpmec.tictactoe/board.png">
</div>
Mohamed Derhalli
@derhallim
Apr 03 2017 19:15
when doing sharepoint, ur not allowed to have 2 forms in the same page
Marco Mazzeo
@Doko85
Apr 03 2017 19:15
.container {
  text-align: center;
}
Mohamed Derhalli
@derhallim
Apr 03 2017 19:15
so u have to do that urself
Marco Mazzeo
@Doko85
Apr 03 2017 19:15
fixed
ZenZate
@ZenZate
Apr 03 2017 19:16
@derhallim Thanks, but I already fixed it
CamperBot
@camperbot
Apr 03 2017 19:16
zenzate sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
api offline
Mohamed Derhalli
@derhallim
Apr 03 2017 19:17
who hacked FCC
Keon Samuel
@keonsam
Apr 03 2017 19:17
meheeeeheheheeh
Gulsvi
@gulsvi
Apr 03 2017 19:18
@ZenZate I'll just say right now - it's going to be a pain figuring out how to get an X and an O on top of that image. You're probably better off using divs with borders.
Marco Mazzeo
@Doko85
Apr 03 2017 19:18
I hate CSS.
Gulsvi
@gulsvi
Apr 03 2017 19:18
Then you have to somehow get the coordinates of each X and O and figure out where each one is to determine win/loss. Seems like that will be a headache
Alright, time for me to go to class... later
Marco Mazzeo
@Doko85
Apr 03 2017 19:20
later
ZenZate
@ZenZate
Apr 03 2017 19:22
danm it
Keon Samuel
@keonsam
Apr 03 2017 19:30
uuuuurrh
lol
I wrote so good code just for it to fail.
ArnoldCSinko
@ArnoldCSinko
Apr 03 2017 19:32
FCC down for eveyone or just me?
Marco Mazzeo
@Doko85
Apr 03 2017 19:33
main site is down
beta is up
Keon Samuel
@keonsam
Apr 03 2017 19:33
nope
I am here
Mario Galindo
@mariogalindov
Apr 03 2017 19:34
@Doko85 I was going to ask that, thanks!
CamperBot
@camperbot
Apr 03 2017 19:34
mariogalindov sends brownie points to @doko85 :sparkles: :thumbsup: :sparkles:
api offline
Danish Gujjar
@Dani-0-7
Apr 03 2017 19:36
beta ?
Tainted3vil
@Tainted3vil
Apr 03 2017 19:41
Hey guys. Im trying to do a simple navbar at the top of my page that has a 'h1' on the left and a 'ul' to the right. problem i have is i cant get them to line up correctly. Any ideas as to the best way to achieve this?
Keon Samuel
@keonsam
Apr 03 2017 19:43
post your pen
Isan Bothra
@isanbothra
Apr 03 2017 19:43
@Tainted3vil use css grid property.
Tainted3vil
@Tainted3vil
Apr 03 2017 19:45
@isanbothra thanks. would you suggest a single row class and float h1 left or divide grid? When i tried to do this previously i had a col-lg-4 and a col-lg-8 but i found my 'ul' sat under the 'h1'
CamperBot
@camperbot
Apr 03 2017 19:45
tainted3vil sends brownie points to @isanbothra :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @isanbothra |http://www.freecodecamp.com/isanbothra
grantknaver
@grantknaver
Apr 03 2017 19:50
quick question guys
Im stumped when I try to have an item in a forloop setup in a timeout
it breaks my code
I am trying to have a function fire on an item in a array after a given amount of time
it will not work
here is the code
here is the snippet that is being a pain
function playBack(colorArray) {
  for (var i = 0; i < savedPattern.length; i++) {
    answer = colorArray[savedPattern[i]]; //Communication breakdown.... dont know how
    alert("answer playBack " + answer);
    setTimeout(function() {buttonEffects(answer)}, 2000);//This is the issue I am trying to get the button effect to happen one after another with some time to space them.
  }//for
} //playBack
Tom Flatters
@TomFlatters
Apr 03 2017 20:00
Hello, can anyone help me with the scrolling project as I am stuck with how to make to the header stay stationary as you scroll
Tainted3vil
@Tainted3vil
Apr 03 2017 20:01
@TomFlatters have you tried 'position:fixed' in CSS
Tom Flatters
@TomFlatters
Apr 03 2017 20:02
No I have not, thanks
Keon Samuel
@keonsam
Apr 03 2017 20:21
@SkyCoder01
Justin Cormier
@justincormier14
Apr 03 2017 20:24
Starting the build a personal portfolio page, and looking at the source for the sample (I know I know I know), I see a TON of JS HTML and CSS that were not discussed in the preceeding tutorials
alpox
@alpox
Apr 03 2017 20:25
@grantknaver Please initialize your variables before using them: answer = colorArray[savedPattern[i]]; --> let answer = colorArray[savedPattern[i]];
Keon Samuel
@keonsam
Apr 03 2017 20:26
@alpox how did you get the links to the twitch channels?
alpox
@alpox
Apr 03 2017 20:26
@keonsam Go on twitch, choose some you like or just any, use their names ;-)
Keon Samuel
@keonsam
Apr 03 2017 20:27
no the link in the api
alpox
@alpox
Apr 03 2017 20:27
@keonsam ah that one. well i did it in very old times
Keon Samuel
@keonsam
Apr 03 2017 20:27
all of them have https:api
alpox
@alpox
Apr 03 2017 20:27
There was the normal link
@keonsam Well you can use the https
grantknaver
@grantknaver
Apr 03 2017 20:27
@alpox ?
alpox
@alpox
Apr 03 2017 20:28
@keonsam Just access codepen as https://codepen.io....
grantknaver
@grantknaver
Apr 03 2017 20:29
I already did. Answer is global
alpox
@alpox
Apr 03 2017 20:37
@grantknaver Looks like working for me then, but you have a timeout of 500ms per index, which might be a bit fast. I tested with 2000 and it looks okay
@grantknaver Except that 2 effects run simultaniously because you put buttonEffects(answer); into buttonActivation at its bottom where it gets executed together with playBack in case of number > 1
@grantknaver Another problem is that because your answer is global, you use always only the value of answer which it has at the time of the execution of the timeout callback. This means that most likely it will always be only one color ;-)
@grantknaver Better use another, newly introduced variable for this
glandon22
@glandon22
Apr 03 2017 20:45
hi guys im working on making a simple quiz webpage, but when i go to set my function that checks to make sure all questions are answered and send an alert if you havent, the function doesnt work. looked through the code a million times and cant find the errror. any help?
https://codepen.io/glandon22/pen/wJOBMq
klae32
@klae32
Apr 03 2017 20:50
@glandon22 are you wanting to make each question have to have an answer to move forward?
glandon22
@glandon22
Apr 03 2017 20:51
@klae32 i dont care if you jump around but before u submit to answer every question. i just wanted to test it now to make sure all my variables and fucntions were wokring
grantknaver
@grantknaver
Apr 03 2017 20:54
ahhhhhhhhh
Moustapha
@moustaflo
Apr 03 2017 20:54
@SkyCoder01 could you please send me the link to that code pen article for weather API? I am back at it again :)
grantknaver
@grantknaver
Apr 03 2017 20:55
ok I am digest everything you have said
Kent Saeteurn
@sansae
Apr 03 2017 20:56

Hello. Can anyone help me figure out how to fix two bootstrap columns?

I have a basic layout for a blog that consists of a navbar, and three columns underneath it. I have the following setup:
"col-xs-3" + "col-xs-6" + "col-xs-3".

When I apply "position: fixed" to both col-xs-3's, all the columns (including col-xs-6) move over to the left side of the page, and the left-most col-xs-3 moves underneath the col-xs-6 while the right-most col-xs-3 moves on top; either way, my layout gets all screwed up. My understanding from what I've read is that when we apply position fixed to the columns, it takes these column elements out of the "normal flow" and so other elements don't know it's there. This explains why col-xs-6 moves over to the left and lays on top of the left-most col-xs-3.

An idea I came across was to use "col-xs-offset..." I tried using that for my current project but there was no effect. However, this worked when I created a dummy project to test the offset class.

Can anyone help?

klae32
@klae32
Apr 03 2017 20:58
@glandon22 I personally can't see what's wrong with that code. I will definitely keep looking though.
glandon22
@glandon22
Apr 03 2017 20:59
@klae32 thanks man. can you click it to see if it works correctly on your browser? maybe mine is being weird
CamperBot
@camperbot
Apr 03 2017 20:59
glandon22 sends brownie points to @klae32 :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @klae32 |http://www.freecodecamp.com/klae32
klae32
@klae32
Apr 03 2017 20:59
@sansae do you have those elements on a <div class="row"> tag?
klae32
@klae32
Apr 03 2017 21:01
@glandon22 if I answer the questions or not, it just takes me back to the page with no answers selected. Is that what you were experiencing?
Fahad Murtaza
@fahdi
Apr 03 2017 21:02
Have a question. I find codepen to be good for quick prototyping but hate it's interface for serious work. I enjoy working offline using regular editors like sublime easier and more productive. My question is, can I host my tribute page somewhere else ?
Keon Samuel
@keonsam
Apr 03 2017 21:04
what is wrong with my grid system?
Gulsvi
@gulsvi
Apr 03 2017 21:05
@fahdi You don't have to use codepen - As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.
@sansae If you're using codepen, the default bootstrap version is bootstrap 4 and they use different class names for col-xs-* and offsets. Happy to take a closer look if you can share your code
Keon Samuel
@keonsam
Apr 03 2017 21:07
@SkyCoder01 what is wrong with my grid system?
in the ul.
Kent Saeteurn
@sansae
Apr 03 2017 21:08
@klae32 Hey Klae, thanks for the response. I don't. I think I'll give that a try. I'll give the two sidebar columns a row class and apply fixed positioning for both and see how that goes.
CamperBot
@camperbot
Apr 03 2017 21:08
sansae sends brownie points to @klae32 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @klae32 |http://www.freecodecamp.com/klae32
klae32
@klae32
Apr 03 2017 21:10
@sansae no problem. Anytime. And I hope that works for you.
Kent Saeteurn
@sansae
Apr 03 2017 21:10
@SkyCoder01 Thanks for the response, Sky. I'm actually not using codepen. I'm doing this project using atom as my editor.
CamperBot
@camperbot
Apr 03 2017 21:10
sansae sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 844 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Kent Saeteurn
@sansae
Apr 03 2017 21:10
@SkyCoder01
thanks for the heads up
Keon Samuel
@keonsam
Apr 03 2017 21:11
nvm I got it.
Gulsvi
@gulsvi
Apr 03 2017 21:11
@sansae No problem, The other thing though - hopefully you removed position: fixed from those elements when using the offsets. Bootstrap grid columns won't work with that, they need to be in the document flow
@keonsam what was the fix? I couldn't tell right away
nvm, looks like you were missing a closing div
Keon Samuel
@keonsam
Apr 03 2017 21:12
I needed to close the row in the html.
Gulsvi
@gulsvi
Apr 03 2017 21:13
Moustapha
@moustaflo
Apr 03 2017 21:13
@SkyCoder01 thank you!
CamperBot
@camperbot
Apr 03 2017 21:13
moustaflo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 845 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Keon Samuel
@keonsam
Apr 03 2017 21:14
This can send people crazy.
AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:17
well i'm still stuck on trying to get a connection to the ip api ... can someone tell me why i'm not receiving a console.log
Gulsvi
@gulsvi
Apr 03 2017 21:18
@AbradolfLinclr Open your codepen with this link instead: http://codepen.io/Abradolf_Linclr/pen/NpobbZ?editors=1012
You can't open your web page over HTTPS and call an API over HTTP - or you'll get a security error
Keon Samuel
@keonsam
Apr 03 2017 21:19
I don't believe that is the way you do the .getJSON function
glandon22
@glandon22
Apr 03 2017 21:20
@klae32 yep. but i want that alert message to pop up
AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:20
@SkyCoder01 so what if i made the call to a secure ip-api?
Kent Saeteurn
@sansae
Apr 03 2017 21:20

@SkyCoder01

@sansae No problem, The other thing though - hopefully you removed position: fixed from those elements when using the offsets. Bootstrap grid columns won't work with that, they need to be in the document flow

This is interesting. I created a dummy project to test "position: fixed" with the same grid layout (i.e. col-xs-3 + col-xs-6 + col-xs-3) and it worked. I applied a fixed rule for both col-xs-3's and initially the same symptom appeared where all columns shifted to the left-most part of the page, etc, but then I was able to use col-xs-offsets for the middle column and the right column.

I think that, for my current project, perhaps I'm applying position: fixed to the wrong div.

AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:21
@SkyCoder01 would that work?
but thank you, I really didn't understand why it wasn't working
Gulsvi
@gulsvi
Apr 03 2017 21:21
@AbradolfLinclr ip-api.com doesn't work over HTTPS unfortunately. You could use a different service though, like https://ipinfo.io/json
From a secure address, like HTTPS, you can only talk to services over HTTPS. From HTTP, however, you can talk to either HTTP or HTTPS.
alpox
@alpox
Apr 03 2017 21:23
But then he cannot use openweatherapi except he switches to http:/
AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:23
very nice to know man! thank you!
alpox
@alpox
Apr 03 2017 21:24
But then again, codepen switches to https only... Maybe fcc has to go with darksky in the end
AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:24
@alpox using only https so i don't think ill have a problem anymore
Gulsvi
@gulsvi
Apr 03 2017 21:24
Yeah, no problem. Do keep an eye out for what @alpox said. You haven't added a weather API yet, but if you choose to use Open Weather Map, keep in mind, it doesn't support HTTPS unless you pay money
AbradolfLinclr
@AbradolfLinclr
Apr 03 2017 21:24
internet laws...
Gulsvi
@gulsvi
Apr 03 2017 21:25
Security is a good thing :)
Gulsvi
@gulsvi
Apr 03 2017 21:26
@alpox Is codepen going to enforce HTTPS only? Seems github does this for gh-pages
Keon Samuel
@keonsam
Apr 03 2017 21:26
@SkyCoder01 please man
Gulsvi
@gulsvi
Apr 03 2017 21:28
Oh wow - that's going to break so many freecodecamp projects
alpox
@alpox
Apr 03 2017 21:28
@SkyCoder01 Yup. My thought :D
They will struggle even more with the weather api
Gulsvi
@gulsvi
Apr 03 2017 21:28
Hope they get the beta done soon and maybe a module on Mixed Content
@keonsam Get rid of this line: var userName, userLogo, userLink;

Add var here:

    var userName= usersData.display_name;
    var userLogo= usersData.logo;
    var userLink= usersData._links.self;

And change your for loop to use let instead of var

Keon Samuel
@keonsam
Apr 03 2017 21:31
you are right
Gulsvi
@gulsvi
Apr 03 2017 21:31
for(let i=0;i<channels.length;i++){
Keon Samuel
@keonsam
Apr 03 2017 21:32
@SkyCoder01 thanks a bunch.
CamperBot
@camperbot
Apr 03 2017 21:32
keonsam sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 846 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Carly Coms
@carlybeefbarley
Apr 03 2017 21:36

Can someone help me to figure out how to make my header fixed while scrolling and to get my footer to show up in the appropriate place? I know I still need to get it to responsive too

http://codepen.io/carlyComs/pen/NpEdyY

Its still openweather :D
Gulsvi
@gulsvi
Apr 03 2017 21:37
Oh no... :p
Kent Saeteurn
@sansae
Apr 03 2017 21:42

@SkyCoder01 yeah, I was right; it turns out that I was just applying the fixed rule to the wrong divs. As you pointed out, using bootstrap's grid columns WITH position: fixed is not going to work (at least in my case it doesn't).

Here's my setup:
I have a div with class="col-xs-3". Initially, I applied a fixed position on this div. This was the issue.
Inside this div, I have another div, a row essentially, that contains the actual content for links, etc. Instead of applying fixed position on the div with class="col-xs-3", I applied it to the inner div containing the actual content. This was the solution. No offsets needed and all elements are within the "flow" of the dom. Now everything works, with exception to the slightly messed up widths of the sidebars, which somehow ended up being jacked up. But it's a simple fix.

Thanks again, Sky.

CamperBot
@camperbot
Apr 03 2017 21:42
sansae sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: sansae already gave skycoder01 points
Gulsvi
@gulsvi
Apr 03 2017 21:43
@sansae Ah, yes, that would work great - so it stays fixed relative to the grid. Glad you got it working!
@carlybeefbarley You have a lot of CSS causing some conflicts with making the navbar fixed. I tried moving things around, but it's probably best to start with your navbar, get it fixed the way you want, and then add in the rest of your content. One thing at a time. Here are some good instructions for creating a fixed top navbar without using bootstrap: https://mobiforge.com/design-development/mobile-friendliness-101-how-to-build-a-fixed-navigation-bar
If you want to use bootstrap - it's much simpler and already tested to work on all modern browsers: https://getbootstrap.com/components/#navbar
Alan Saber
@Alan95
Apr 03 2017 21:58
hey guys. how can i make the glyphicon and the input-searchbar at same height after i clicked on it? margin-top is moving both elements. http://codepen.io/BearCoding/pen/JWzEra
Fahad Murtaza
@fahdi
Apr 03 2017 21:58
@SkyCoder01 Thanks :)
CamperBot
@camperbot
Apr 03 2017 21:58
fahdi sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 847 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 03 2017 22:01
@Alan95 Add vertical-align: middle; to your icon's CSS
Alan Saber
@Alan95
Apr 03 2017 22:03
thank you!
thanks @SkyCoder01
CamperBot
@camperbot
Apr 03 2017 22:03
alan95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 848 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 03 2017 22:03
No problem :)
Jesus Carrillo
@91integ25
Apr 03 2017 22:05
can anyone here tell me why it is that I cant access the data from the second getQuotes function call?http://codepen.io/91integ25/pen/xqmNrP?editors=0010
Gulsvi
@gulsvi
Apr 03 2017 22:11
@91integ25 I think I'd have to get 40 quotes to test that :) but not 100% sure. You don't need that second getQuotes() call. You're trying to get 40 quotes and then choose a random one. Just add cache: false to your ajax call like in the second code example here: https://quotesondesign.com/api-v4-0/. Then you only need to request 1 quote and you'll get a different one every time you make an API call.
Keon Samuel
@keonsam
Apr 03 2017 22:15
lol
this thing
fix a problem one more pop up.
Jesus Carrillo
@91integ25
Apr 03 2017 22:29
@SkyCoder01 What I am trying to achieve by doing this is to only call the api when I am completely out of quotes to get a new set. That way the user gets to see all forty quotes before moving on to new ones.
and you can chage the parameter of 40 to whatever you'd like
Pagnito
@Pagnito
Apr 03 2017 22:31
im tryin to create a background effect kind of like zoom in all the way and zoom out like 20% but with fade effect on my background. but for some reason , animate resets the image instantly to 0 opacity and then animates it to 0.8 instead of animating it from 1 to 0.8. when i check the effect on w3. it does it the way i want it to but doesnt seem to do so on my code
alpox
@alpox
Apr 03 2017 22:41
@Pagnito Your background url gets set after the animation is done - so before there isn't even a picture..
Mojammel
@MojammelW
Apr 03 2017 22:41
https://codepen.io/MojammelW/pen/QpYdqg can someone help me decide what to do next im trying to make a portfolio page
alpox
@alpox
Apr 03 2017 22:42

@Pagnito

$('#background').css({
          'background-image':'url('+images[number]+')',
          'background-position':'fixed',
          'background-attachment':'fixed',
          'background-size': 'cover',
          'background-repeat': 'no-repeat',
          'background-position':'center',
          'min-height':'100%',
          'min-height':'100vh',
          'display':'flex',
          'align-items':'center',
          '-webkit-animation': 'fadein 1s ease-in', 
          '-moz-animation': 'fadein 1s ease-in', 
          '-ms-animation': 'fadein 1s ease-in', 
          '-o-animation': 'fadein 1s ease-in', 
            'animation': 'fadein 1s ease-in'
    });
   $("#background").animate({opacity:'0.8'},2000);

This does what you want. BUT: the background images are so big that it takes them sometimes up to 1-2 sec to load which messes up your animation

Pagnito
@Pagnito
Apr 03 2017 22:42
thats weird i tried that, but it did the same thing
yea i noticed, i figured for now its ok, once i work on my own project ill have to think about resizing and using proper formats
yea i tried it again and its doing the same thing
technically th syntax is the same
mine was kind of like using 'this'
chaining
Darlene Rodriguez
@dxrodriguez07
Apr 03 2017 22:45
Hey, i know this is random but is anyone here really good in C++ that can help me with an assignment ???
alpox
@alpox
Apr 03 2017 22:47
@Pagnito Right. But yes then its only the delay of loading the background
@dxrodriguez07 I'm not bad at it i guess but there is little time for me
Darlene Rodriguez
@dxrodriguez07
Apr 03 2017 22:49
@alpox if you could help me out i would greatly appreciate it. I can paste my code in here if you want
Pagnito
@Pagnito
Apr 03 2017 22:49
@alpox i dont really have delay on my end, except like 1 out of ten refreshes if even tho i feel what youre saying, i think its resetting opacity to 0 after the first css animation is done and then executes jquery animation
alpox
@alpox
Apr 03 2017 22:50
@dxrodriguez07 If its not all too urgent you can send me the code as PM and i'll look into it tomorrow morning. Its almost 1 in the morning here and i'll have to get up at 6:30 ;-)

@Pagnito Probably because you use your fadein keyframes:

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Which go from 0 to 1. Not sure though, i didn't look so much into it

Pagnito
@Pagnito
Apr 03 2017 22:53
what would the keyframesinterrupt
hmm weird it is te problem u right
Darlene Rodriguez
@dxrodriguez07
Apr 03 2017 22:55
Alright, ill see what I can do. It is due here in CA tonight at 1159 PM and its 4pm right now but catch some Zzz's if i don't figure it out tonight I will turn it in late , which isn't a big deal. Thank you ! @alpox
CamperBot
@camperbot
Apr 03 2017 22:55
dxrodriguez07 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 909 | @alpox |http://www.freecodecamp.com/alpox
Pagnito
@Pagnito
Apr 03 2017 22:55
hmm, it looks better now even tho the images pops in but then fades down a lil slowly, but i hate to compromise >:( in code lol
alpox
@alpox
Apr 03 2017 22:56
@Pagnito Maybe this can help (Not sure again) animation-fill-mode: forwards;
@dxrodriguez07 :thubsup: i feel with you there. sorry that i cannot help more, but i gotta get my sleep here :D (Early lessons at university.)
Darlene Rodriguez
@dxrodriguez07
Apr 03 2017 22:59
Have a goodnight man :D got to grind for that education ! @alpox
Pagnito
@Pagnito
Apr 03 2017 23:00
ooh hold on
forgot about tht
dang
it stays
Roxroy
@roxroy
Apr 03 2017 23:01
@MojammelW , you can just make stuff up for now. Later you can update it. The object is to get some practice in htlm and css. Check out this example
Keon Samuel
@keonsam
Apr 03 2017 23:08
how do you role back on codepen?
Keon Samuel
@keonsam
Apr 03 2017 23:14
var channels=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"];
for(var i=0;i<channels.length;i++) {
var twitchUsers= "https://api.twitch.tv/kraken/users/"+channels[i]+"?callback=?&client_id=yue5dlie3v6kw6eivr4uil1313wpcb"; 
  var
twitchUrl= "https://api.twitch.tv/kraken/streams/" + channels[i] + "?callback=?&client_id=yue5dlie3v6kw6eivr4uil1313wpcb";
  var userName, UserLogo, userLink
var p= new Promise (function(resolve, reject){
 $.getJSON(twitchUsers, function (usersData) {
    userName= usersData.display_name;
    userLogo= usersData.logo;
    userLink= usersData._links.self;
  });
  if (userName !=="") {
  resolve("Success! ")
}
  else {
    reject("Failure! ")
  }
});
  p.then(function(final){
  $.getJSON(twitchUrl, function(streamData){
    console.log(streamData)
    var streamResult= streamData.stream;
    if (streamResult==null) {
      var isStream;
      isStream= "Offline";
    }
    else {
      isStream= "Online";
    }
    var finalStr= '<li><a href="'+ userLink +'"><div class="row"><div class="col-1"><img src="'+ userLogo +'" class="smallerImage"></div><div class="col-4"><p>'+ userName +'</p></div><div class="col-7"><p>'+ isStream +'</div></div></li>';
    $("#output").append(finalStr);
  });
 });
}
new freecodecamp challenge solve the above ^.
Bazita
@bazita
Apr 03 2017 23:40
hello world
Keon Samuel
@keonsam
Apr 03 2017 23:43
@SkyCoder01 sky bro
var channels=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"];
$(document).ready(function(){
for(var i=0;i<channels.length;i++) {
var twitchUsers= "https://api.twitch.tv/kraken/users/"+channels[i]+"?callback=?&client_id=yue5dlie3v6kw6eivr4uil1313wpcb"; 
  var
twitchUrl= "https://api.twitch.tv/kraken/streams/"+ channels[i]+ "?callback=?&client_id=yue5dlie3v6kw6eivr4uil1313wpcb";
 $.getJSON(twitchUsers, function (usersData) {
    var userName= usersData.display_name;
    var userLogo= usersData.logo;
    var userLink= usersData._links.self;
  $.getJSON(twitchUrl, function(streamData){
    console.log(twitchUrl)
    var streamResult= streamData.stream;
    var isStream;
    if (streamResult==null) {

      isStream= "Offline";
    }
    else {
      isStream= "Online";
    }
    var finalStr= '<li><a href="'+ userLink +'"><div class="row"><div class="col-1"><img src="'+ userLogo +'" class="smallerImage"></div><div class="col-4"><p>'+ userName +'</p></div><div class="col-7"><p>'+ isStream +'</div></div></li>';
    $("#output").append(finalStr);
  });
 });
}
});
I can't get the second .getJSON works
check out my pen
Gulsvi
@gulsvi
Apr 03 2017 23:45
I don't see any code
Keon Samuel
@keonsam
Apr 03 2017 23:45
try again.
nothing works man, not even promises.
caseym94
@caseym94
Apr 03 2017 23:49
so is something that hasn't been declared lost or still stored in memory?
for instance if I made 1000 clones and removed them, would they still be in memory somewhere?
or are they completely removed?
would manipulating dom with adding and removing new clones cause any issues?
maybe I'm over thinking this
Gulsvi
@gulsvi
Apr 03 2017 23:53
@keonsam Instead of a for loop, use a .forEach() - it has a callback to better handle Async Data. That works for me - I get online and offline users after doing that.