These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Apr 2017
Ming Zhu
@chocobrownie
Apr 14 2017 00:10
Hi I have finished my personal porfolio project and is looking at the source code of the example. The syntax is totally different from I previously learned from tutorial. Is there anything delusional about the tutorial? And why is he using different syntax?
header#banner.navbar.navbar-default.navbar-fixed-top
  .container
    a.scrollable(href='#top')
      img(src='http://qlip.in/images/qlip.png', alt='qlip | UI/UX Design and Development', title='qlip | UI/UX Design and Development')
    button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false')
      span.sr-only Toggle navigation
      span.icon-bar
      span.icon-bar
      span.icon-bar
    nav#navbar.collapse.navbar-collapse(role='navigation')
      ul.nav.navbar-nav.navbar-right
        li
          a.scrollable(href='#top') About
        li
          a.scrollable(href='#portfolio') Portfolio
        li
          a.scrollable(href='#contact') Contact
// end header
Andrew Charlebois
@andrewchar
Apr 14 2017 00:20
@chocobrownie thats jade i believe
well, used to be called jade, now its called pug
Roxroy
@roxroy
Apr 14 2017 00:39
@chocobrownie , the markup gets changed to standard html by a preprocessor so that it can be rendered by the browser. Pug is just a succinct way to write html code.
Ming Zhu
@chocobrownie
Apr 14 2017 00:39
@andrewchar I searched it up a little bit, looks like pug is an API for Java Script. And it needs a converter between itself and html? Then why would people abandon the html syntax for pug?
@roxroy So it is like a script language like Matlab for C?
Abraham
@AbrahamLN
Apr 14 2017 00:43
@anfusion Hey thanks for the help anyways. Do you think it looks good though?
CamperBot
@camperbot
Apr 14 2017 00:43
abrahamln sends brownie points to @anfusion :sparkles: :thumbsup: :sparkles:
:cookie: 256 | @anfusion |http://www.freecodecamp.com/anfusion
Roxroy
@roxroy
Apr 14 2017 00:44
@chocobrownie , not familiar with Matlab, but you could look at it a like a shorthand language and does have some builtin scripting feature. It is a language on it own, so you can think of it as scripting language.
Gulsvi
@gulsvi
Apr 14 2017 00:46
@derhallim That search icon isn't clickable because of pointer-events: none in the form-control-feedback class you have on it:
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}
aRtoo
@artoodeeto
Apr 14 2017 00:52
hi guys . i have a quick question. how did i get this right. title of the problem is "Return Early Pattern for Functions" or problem 206

// Setup
function abTest(a, b) {
  // Only change code below this line

  if (a < 0 || b < 0){
   return  c;
  }


  // Only change code above this line

  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// Change values below to test your code
abTest(-2,2);
Ming Zhu
@chocobrownie
Apr 14 2017 00:53
@roxroy Sounds pretty cool! I am so glad you explained it to me. I believe front end engineers all get into script language somehow at some point
Roxroy
@roxroy
Apr 14 2017 00:55
@chocobrownie , no worries their are a lot of moving parts and technology. Its hard to know then all. FCC will introduce many of them as you work through the course.
iso
@iso1048
Apr 14 2017 00:59
how can I make a button reusable in jquery?
Gulsvi
@gulsvi
Apr 14 2017 01:02
@gothamknight What do you mean by reusable?
$('button').on('click', doSomething);

function doSomething() {
  // write the code you want to run here when the button is clicked
}
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:03
What happened to shop?
Gulsvi
@gulsvi
Apr 14 2017 01:05
Pagnito
@Pagnito
Apr 14 2017 01:05
@SkyCoder01 hey i used this
$(window).resize(function() {
on attr change and it doesnt seem to wrok
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:05
Eh
Pagnito
@Pagnito
Apr 14 2017 01:05
im tryin to change ids
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:05
Thought the stickers cost $5 lol
Pagnito
@Pagnito
Apr 14 2017 01:05
@Pagnito it works on document ready but not on resize for some reason
Ming Zhu
@chocobrownie
Apr 14 2017 01:06
@roxroy Awesome, thanks Roxroy
CamperBot
@camperbot
Apr 14 2017 01:06
chocobrownie sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 649 | @roxroy |http://www.freecodecamp.com/roxroy
Gulsvi
@gulsvi
Apr 14 2017 01:06
@Pagnito How are you selecting it inside your resize?
I'm guessing the ID changes on document.ready, and you're using the new ID
Pagnito
@Pagnito
Apr 14 2017 01:07
@SkyCoder01 hold i did think about that yesterday and i think it still didnt work, but lemme check again
Mohamed Derhalli
@derhallim
Apr 14 2017 01:07
@SkyCoder01 but what's the point in having a search icon in a textbox if it's not going to be clickable?
Pagnito
@Pagnito
Apr 14 2017 01:08
@SkyCoder01 yea it still doesnt work
Gulsvi
@gulsvi
Apr 14 2017 01:08
@derhallim It tells the user it's a search box - bootstrap likes to use buttons for search next to the search box
check out lines 86
@Pagnito run it above 576px and go minimize
Mohamed Derhalli
@derhallim
Apr 14 2017 01:10
@SkyCoder01 but would look weird, if u have search icon in the textbox, THEN have a button beside the textbox for search ....
Pagnito
@Pagnito
Apr 14 2017 01:10
the online offline and all links supposed to change ids so i can manipulate them diffirently in smaller screen
iso
@iso1048
Apr 14 2017 01:11
@SkyCoder01 im doing the quote machine project. when i click the button to change quote the first time, it works. but not any timesafter that.
Mohamed Derhalli
@derhallim
Apr 14 2017 01:11
they don't make sense with that
Gulsvi
@gulsvi
Apr 14 2017 01:12
:)
image.png
Looking now @Pagnito
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:12
lol
Pagnito
@Pagnito
Apr 14 2017 01:12
@SkyCoder01 k
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:12
@Pagnito Nice project
But what are + and - buttons for?
Gulsvi
@gulsvi
Apr 14 2017 01:14
Nevermind - @Pagnito It works fine. The ID of the "Online" button changes from id="online" to id="on"
Pagnito
@Pagnito
Apr 14 2017 01:14
plus adds new members, if u click on and type in a user, it calls ajax for that one user and adds it in the list
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:14
and -?
Pagnito
@Pagnito
Apr 14 2017 01:14
it works if i load in in small screen
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:14
To remove?
Gulsvi
@gulsvi
Apr 14 2017 01:15
image.png
before ^^
image.png
after ^^
Ty N.
@mynameislink
Apr 14 2017 01:15
Can someone help me out with with why this doesn't work in vanilla js?
var div = document.createElement('div');
div.id = 'container';
div.style.border = '2px solid black';
div.style.padding = '10px';
div.style.display = 'inline-block';
document.body.appendChild(div);
I have tried it with sublime editor, codepen, jsfiddle, and jsbin and nothing works
Pagnito
@Pagnito
Apr 14 2017 01:16
hmmm thats weird
Gulsvi
@gulsvi
Apr 14 2017 01:16
@gothamknight I can't think of why it would only work once... like the code I wrote above, it will run that function every time you click on the button.
Pagnito
@Pagnito
Apr 14 2017 01:19
@SkyCoder01 how did u pull that up in the sources, i cant find which divs thats in
i mean elements
Why cant I get my location..
Is it me? or is something wrong with my code?
Roxroy
@roxroy
Apr 14 2017 01:22
@MathematicsCoding , got the same error, but it works with https, https://codepen.io/MathematicsCoding/pen/rmNdrg
Pagnito
@Pagnito
Apr 14 2017 01:22
@SkyCoder01 found it nvm
@SkyCoder01 actually i dont think i found the right one
Saboor Malik
@MathematicsCoding
Apr 14 2017 01:25
Thanks @roxroy
CamperBot
@camperbot
Apr 14 2017 01:25
mathematicscoding sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 652 | @roxroy |http://www.freecodecamp.com/roxroy
Roxroy
@roxroy
Apr 14 2017 01:25
@MathematicsCoding , np. Any time.
Gulsvi
@gulsvi
Apr 14 2017 01:26
@Pagnito I right-clicked the "Online" button
right-click -> inspect
Pagnito
@Pagnito
Apr 14 2017 01:26
@SkyCoder01 thanks
CamperBot
@camperbot
Apr 14 2017 01:26
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1034 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Pagnito
@Pagnito
Apr 14 2017 01:28
@SkyCoder01 thats really weird even tho the id is changin it still performs as if it has the previous id
Gulsvi
@gulsvi
Apr 14 2017 01:51
@Pagnito I didnt see your comment, sorry... It's expected. your $('#on.... click function is running before you change the ID to "On", so it doesn't have any element to hook up to.
You can fix it by wrapping the .click function in a function and calling that function on window resize.
Pagnito
@Pagnito
Apr 14 2017 01:52
@SkyCoder01 hold, not understanding
@Pagnito so if i run it from 576+
and my id is online
@Pagnito i resize down
my id changes but my online click function would still be running
Gulsvi
@gulsvi
Apr 14 2017 01:54
When you do $('element').on('click', function() {}) it attaches a click event handler to that element so it knows to run a function when it is clicked
If that code runs before the element exists, then there's nothing to attach to
Pagnito
@Pagnito
Apr 14 2017 01:55
@SkyCoder01 if i change it to click() would that solve it
Gulsvi
@gulsvi
Apr 14 2017 01:55
No, there would still be nothing to attach to
.click() and .on('click' are the same
Pagnito
@Pagnito
Apr 14 2017 01:56
i see
@SkyCoder01 thanks i dont think i would have figured that one for a whiile
CamperBot
@camperbot
Apr 14 2017 01:56
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: pagnito already gave skycoder01 points
Gulsvi
@gulsvi
Apr 14 2017 01:57
I have a function in my Twitch API app called "registerEventHandlers()" and it gets called after I create all the HTML
Pagnito
@Pagnito
Apr 14 2017 01:58
what does it do
Gulsvi
@gulsvi
Apr 14 2017 01:58
It has all my click and hover functions
Pagnito
@Pagnito
Apr 14 2017 01:59
still dont get it, so it fires everytime a certain event happens and toggles w/e u need?
Gulsvi
@gulsvi
Apr 14 2017 01:59
Hmmm, let me see if I can make a pen to explain it better.
Pagnito
@Pagnito
Apr 14 2017 02:00
sweet thnx
@Pagnito
All four of those functions run, but only two of the elements get click handlers attached to them, so two functions work and two don't
Pagnito
@Pagnito
Apr 14 2017 02:12
@SkyCoder01 nothin happens tho, when i click on the boxes
Gulsvi
@gulsvi
Apr 14 2017 02:13
@Pagnito Lol, try again, forgot to add jQuery...
Pagnito
@Pagnito
Apr 14 2017 02:13
nvm i was clickin on the wrong thing
Gulsvi
@gulsvi
Apr 14 2017 02:13
no, I just fixed it lol
Pagnito
@Pagnito
Apr 14 2017 02:13
ooh lol
Gulsvi
@gulsvi
Apr 14 2017 02:14
See how it's all the same code, but only works one way because elements with ID #green and #yellow don't exist yet.
Pagnito
@Pagnito
Apr 14 2017 02:15
how come they dont exist?
the inspect shows it changes, why doesnt it exist O.o
Gulsvi
@gulsvi
Apr 14 2017 02:16
The code all runs when you first load the web page
Only two elements exist when you first load the web page
err. only two IDs exist
Blue and Red
Pagnito
@Pagnito
Apr 14 2017 02:17
ok but then u change them, im still confused
Gulsvi
@gulsvi
Apr 14 2017 02:17
so, $('#green').on('click', function() { and $('#yellow').on('click', function() { silently fail
I change them, and add them, but your javascript only runs once
it doesn't reload your entire JS file again
Pagnito
@Pagnito
Apr 14 2017 02:18
thats weird how come resize works for positioning and sizing elements
Gulsvi
@gulsvi
Apr 14 2017 02:18
if you attach that resize handler to an element before it exists, it won't work
The code only runs once, when it runs, there is no $('#yellow') or $('#green'). To fix it:http://codepen.io/skycoder/pen/wdBgOp?editors=0010
Pagnito
@Pagnito
Apr 14 2017 02:21
how does wrapping in a function that has no command make it work O.o
Gulsvi
@gulsvi
Apr 14 2017 02:22
It runs the code again
registers those .click()s
Pagnito
@Pagnito
Apr 14 2017 02:23
ill be honest i still have no idea how it works lol
Gulsvi
@gulsvi
Apr 14 2017 02:23
I don't know how else to explain it lol
Pagnito
@Pagnito
Apr 14 2017 02:23
i feel u lol
Gulsvi
@gulsvi
Apr 14 2017 02:24
a click is registered on an element, if that element doesn't exist, there's nothing there
Pagnito
@Pagnito
Apr 14 2017 02:24
ok
Gulsvi
@gulsvi
Apr 14 2017 02:24
I guess it's about knowing when the code runs
and what the DOM looks like when it runs
Pagnito
@Pagnito
Apr 14 2017 02:24
lemme think for a bit lol
Gulsvi
@gulsvi
Apr 14 2017 02:25
lol, take your time :)
Pagnito
@Pagnito
Apr 14 2017 02:25
ok so the dom loads and i got the ids
Gulsvi
@gulsvi
Apr 14 2017 02:25
#online, #offline, in the DOM, yes. #on and #off are not yet
aRtoo
@artoodeeto
Apr 14 2017 02:26
need help sir. im on the problem "Counting Card" i think i figured out the solution but theres a specific value that return the wrong ans. need help please.

var count = 0; 
var shit;


function cc(card) {
  // Only change code below this line


    switch (card){
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
        count ++;
        break;

      case 10:
      case 'J':
      case 'Q':
      case 'K':
      case 'A':
        count --;
        break;



    }

  if( count > 1){
   shit = count + " " + "Bet";
  }

  else if (count < 1){
    shit = count + " " + "Hold";
  }



  return shit;
  // Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc('J'); cc(9); cc(2); cc(7);  //this is the value that returning the wrong ans. help!!
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:26
why shit?
Pagnito
@Pagnito
Apr 14 2017 02:26
ok so once i resize and the event happens, my ids change but because the dom is alread loaded...
it doesnt really change?
Gulsvi
@gulsvi
Apr 14 2017 02:26
And why as many line breaks as code?
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:26
lol
Gulsvi
@gulsvi
Apr 14 2017 02:26
@Pagnito Yeah, that's how to think about it
Pagnito
@Pagnito
Apr 14 2017 02:27
so how does registerevent handler make it work?
Gulsvi
@gulsvi
Apr 14 2017 02:28
When that function is called, it looks at the DOM again and sees #green and #yellow, so those click functions work
Pagnito
@Pagnito
Apr 14 2017 02:30
wait so the ids to change, but the interperter doesnt see them because its already loaded?
do change*
Gulsvi
@gulsvi
Apr 14 2017 02:31
The ids change but the interpreter already looked at the HTML and only 2 of the 4 ids were there
Pagnito
@Pagnito
Apr 14 2017 02:31
i see
Gulsvi
@gulsvi
Apr 14 2017 02:31
So you have to tell it to look at the HTML again when you add new stuff
Pagnito
@Pagnito
Apr 14 2017 02:32
so everytime u call a function it looks at the html again but a self invoking function cant do that?
Gulsvi
@gulsvi
Apr 14 2017 02:32
We aren't using self invoking functions
Pagnito
@Pagnito
Apr 14 2017 02:33
isnt click.(fnction a self invoking fnction
Gulsvi
@gulsvi
Apr 14 2017 02:33
But yeah, every time you use $('element').on
it uses a copy of the DOM that it got when it first ran
In your case, it's using an old copy, because you changed IDs
Pagnito
@Pagnito
Apr 14 2017 02:35
i see
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:37
You see what?
Bird?!
Gulsvi
@gulsvi
Apr 14 2017 02:38
I never did counting cards... hmmm
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:39
@SkyCoder01 Really?
So you didnt do basic JS?
Gulsvi
@gulsvi
Apr 14 2017 02:39
No, I skipped a lot of them lol
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:39
lol
Gulsvi
@gulsvi
Apr 14 2017 02:39
I just figured it out though and I didn't use a switch
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:39
Where did you learn JS?
Gulsvi
@gulsvi
Apr 14 2017 02:40
Here in free code camp, but I just didn't do all of the challenges
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:40
oh
hm...
Gulsvi
@gulsvi
Apr 14 2017 02:40
I did all the basic algorithms and a bunch of the other JS
read that eloquent javascript book and went through MDN, but jQuery/front-end taught me most of it
Pagnito
@Pagnito
Apr 14 2017 02:44
@SkyCoder01 have u ever done soloLearn?
Gulsvi
@gulsvi
Apr 14 2017 02:45

@artoodeeto

The function will then return a string with the current count and the string "Bet" if the count is positive, or "Hold" if the count is zero or negative.
What about 1 and 0 with this code?

  if( count > 1){
   shit = count + " " + "Bet";
  }  else if (count < 1){
    shit = count + " " + "Hold";
  }
if it's 0 it isn't negative and you don't account for cases where it is equal to 1
Just greater than or less than 1
@Pagnito No, I haven't heard of that before
I will check it out, been meaning to look at SQL
aRtoo
@artoodeeto
Apr 14 2017 02:47
@SkyCoder01 sorry didnt understand. what do you mean??
Gulsvi
@gulsvi
Apr 14 2017 02:47
@artoodeeto If a number is positive, what is it greater than?
(go along with me on this one, trying not to give away the answer)
aRtoo
@artoodeeto
Apr 14 2017 02:48
its greater 1? or greater than 0?
Pagnito
@Pagnito
Apr 14 2017 02:48
@SkyCoder01 its a app that basically has most languages and it has stages u go thru and learn about them and answer questions. eventually u can basically do these code challenges against other people, i gotta say, i think the little doll from saw is coming up with these challenges, shit seems ridiculous at my level, i can def solve them but within the the 20 or something seconds they give its crazy sometimes
aRtoo
@artoodeeto
Apr 14 2017 02:48
@SkyCoder01 its greater 1? or greater than 0?
Gulsvi
@gulsvi
Apr 14 2017 02:48
@artoodeeto 1 is positive, right?
aRtoo
@artoodeeto
Apr 14 2017 02:48
@SkyCoder01 yes.
Gulsvi
@gulsvi
Apr 14 2017 02:49
so, you're checking if count is greater than 1 or less than 1. What happens if count === 1?
It's still positive, but you're not telling anyone to bet
aRtoo
@artoodeeto
Apr 14 2017 02:49
@SkyCoder01 ohhhh. isee you!! yea.
Gulsvi
@gulsvi
Apr 14 2017 02:49
I think that's the issue
aRtoo
@artoodeeto
Apr 14 2017 02:49
@SkyCoder01 thats why i changed it to count > 0 or count >=1
@SkyCoder01 yea. i figured it out too after 30mins.
hhaha
Gulsvi
@gulsvi
Apr 14 2017 02:50
oh lol
at least you got your shit figured out
aRtoo
@artoodeeto
Apr 14 2017 02:50
@SkyCoder01 im so noob
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:50
lol
aRtoo
@artoodeeto
Apr 14 2017 02:50
@SkyCoder01 yea! hahah
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:50
noob is also shit
Gulsvi
@gulsvi
Apr 14 2017 02:50
(pun intended)
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:50
:shipit:
aRtoo
@artoodeeto
Apr 14 2017 02:51
@MathematicsCoding ouch!
@MathematicsCoding God coder
Gulsvi
@gulsvi
Apr 14 2017 02:51
@Pagnito I'm going to give it a try :)
Pagnito
@Pagnito
Apr 14 2017 02:52
@SkyCoder01 ya its nice way to introduce new languages when when waiting in lines in public and stuff like that
Gulsvi
@gulsvi
Apr 14 2017 02:52

@artoodeeto To simplify it, you might do something like:

var count = 0;

function cc(card) {
  // Only change code below this line

  if (card >= 2 && card < 7) {
    count++;
  } else if (card >= 7 && card <= 9) {
    count += 0;
  } else {
    count--;
  }

  return count > 0 ? count + " Bet": count + " Hold";
  // Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');

But not sure if that's the best way...it's just how I did it.

I always avoid switches
Saboor Malik
@MathematicsCoding
Apr 14 2017 02:55
@SkyCoder01 I think that challenge requires switch statements?
Gulsvi
@gulsvi
Apr 14 2017 02:56
I don't see it anywhere on the challenge page, but this is pretty hacky now that I think about it:
 } else if (card >= 7 && card <= 9) {
    count += 0;

Could just do this:

  if (card >= 2 && card < 7) {
    count++;
  } else if (card >= 7 && card <= 9) {
    // do nothing
  } else {
    count--;
  }

Which is also ugly

Saboor Malik
@MathematicsCoding
Apr 14 2017 02:58
ok..
Whats the link for font awesome?
I mean i need it to add some font awesome to html elements
Gulsvi
@gulsvi
Apr 14 2017 02:59
just type in font-awe.... in that CSS box in codepen settings
it will search and find it
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:03
Cant find it
Joke aside
What do you think?
Gulsvi
@gulsvi
Apr 14 2017 03:04
You're getting there
It looks better than yesterday :)
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:04
Thanks
:)
I want some cursive font..
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:10
How do I get that font..
:(
image.png
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:12
Yeah
I chose spirax font
But its font is not changing after I added link and font-style
Am I supposed to add that link to html setting?
Gulsvi
@gulsvi
Apr 14 2017 03:15
I haven't ever used it before, but it looks like if you click "select" this font, there are instructions
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:16
Yeah
I did follow them..
Gulsvi
@gulsvi
Apr 14 2017 03:16
@import or a <link>
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:16
I used @import
I guess I will do something about it later..
Well thanks for that link @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 03:20
mathematicscoding sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1036 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Saboor Malik
@MathematicsCoding
Apr 14 2017 03:23
Eh I have enough time... I got 4 days off so I can finish it before school start
I guess it is fun talking to myself :)
Gulsvi
@gulsvi
Apr 14 2017 03:34
:) lol, sorry had a phone call. Have to go now.... good luck finishing it up. Probably see you tomorrow
Tanushree Samanta
@TSamanta
Apr 14 2017 04:11
@TSamanta
hey could please help me in this pen. The searchbox doesn't show full shadow what to do
http://codepen.io/T_Samanta/pen/wJVYmd
Sam Griffen
@ssgriffen
Apr 14 2017 04:37
Will someone see if my embedded pens work for you on safari on an iphone >= 6 ...its currently not working on my 5s safari, I know chrome works.. http://codepen.io/ssgriffen/full/yJKRxj/
Tyler Moeller
@TylerMoeller
Apr 14 2017 04:38
@TSamanta Click Settings in your Codepen and add the autoprefixer to your CSS settings. <input> elements often behave differently across different browsers and this should help fix your box-shadow. It fixed it in my browser anyway.
iso
@iso1048
Apr 14 2017 04:39
Coulld someone help please. for the button which allows you to tweet the quote (random quote machine), how do I find the link to but in the href=""?
Tyler Moeller
@TylerMoeller
Apr 14 2017 04:42
@gothamknight The URL for sending a tweet is documented here: https://dev.twitter.com/web/tweet-button/web-intent
iso
@iso1048
Apr 14 2017 04:46
@TylerMoeller thanks ill check it out.
CamperBot
@camperbot
Apr 14 2017 04:46
gothamknight sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1517 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Peter Brereton
@balbazarthetroll
Apr 14 2017 04:47
if anyone needs a quote API for the random quote machine, use this: http://www.quotzzy.co/api/quote It 's free!
iso
@iso1048
Apr 14 2017 04:56
@TylerMoeller how do I pre-select text to tweet using jquery?
Tyler Moeller
@TylerMoeller
Apr 14 2017 05:04
@gothamknight Assuming you have defined a variable for the quote you write to the page, you can use that same variable to generate the link for your tweet.
iso
@iso1048
Apr 14 2017 05:09
@TylerMoeller could you please tell me what format the code is in?
Tanushree Samanta
@TSamanta
Apr 14 2017 05:09
@TylerMoeller thank you
CamperBot
@camperbot
Apr 14 2017 05:09
tsamanta sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1518 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Apr 14 2017 05:12
@gothamknight The tweet text needs to be in UTF-8 format.
iso
@iso1048
Apr 14 2017 05:23
@TylerMoeller so i have to convert my string into this UTF-8 format? (I'm still a beginner at his stuff)
Ba Ba K
@cyclops24
Apr 14 2017 05:24
Hi guys,
I want to contribute to an open source project but it's my first time and I have some question. Can anyone have time to help me?
If you have we can talk about it in private messaging.
Tanushree Samanta
@TSamanta
Apr 14 2017 05:38
I want to make all the button,inbox and select of the same color as thebackground like it but I have a hamburger menu too where all these elements slip in and the block has a different color what should I do?
this is my pen
image.png
this is the kind of button I want (like the share and comments buttons are)
and this is my pen
any suggestions?
@TSamanta
Tanushree Samanta
@TSamanta
Apr 14 2017 06:29
@jtan3 yes yes.thank you so much
CamperBot
@camperbot
Apr 14 2017 06:29
tsamanta sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @jtan3 |http://www.freecodecamp.com/jtan3
Matt
@Misaiah
Apr 14 2017 07:48
Hello all! can someone here explain arrays and for loops?

'''

<script>

var arr = [];

for(var x=0;x<10;x++){ if ((x%2)==0) { arr.push(x); } } function tester(){ document.getElementById("startingNum").value = arr[0]; document.getElementById("endingNum").value = arr[arr.length-1]; document.getElementById("stepNum").value = arr.length; } </script>

'''

CamperBot
@camperbot
Apr 14 2017 07:48
:bulb: to format code use backticks! ``` more info
Matt
@Misaiah
Apr 14 2017 07:49

'''

<script>

        var arr = [];

        for(var x=0;x<10;x++){
            if ((x%2)==0) {
                arr.push(x);
            }
        }

    function tester(){
        document.getElementById("startingNum").value = arr[0];

        document.getElementById("endingNum").value = arr[arr.length-1];

        document.getElementById("stepNum").value = arr.length;
    }

    </script>

'''

CamperBot
@camperbot
Apr 14 2017 07:49
:bulb: to format code use backticks! ``` more info
Matt
@Misaiah
Apr 14 2017 07:49
can someone help me understand this?
for example, for the endingNum, what does the "arr[arr,length-1];" mean?
what is the significance of the -1?
iso
@iso1048
Apr 14 2017 07:55
arr.length gives you the length of the array. the length of the array-1 is the last item of the array since arrays have 0 based indexes. i think
Dmytro Holysh
@dmk1111
Apr 14 2017 07:56
@Misaiah if we have array with 3 items, it's length will be equal to 3, so length-1 is equal to 2
Linus
@nusli
Apr 14 2017 08:12
$.getJSON("api.openweathermap.org/data/2.5/weather?appid=79c2c1c5545fdec42ce4deecc0b2ce56&units=metric&lat=53.6126505&lon=12.429595299999999"  
,   function(data){
     console.log(data);
});
what's wrong with this code?
the api-link is correct but i dont get any data back
Sandeep Chary
@dsandeepchary
Apr 14 2017 08:16

Anyone?

How do i customize/style the default popup which asks for notification permissions
?
like the one this website shows
AK
@akcode47
Apr 14 2017 08:21
@akcode47
Hi can some one help me solve this - I am trying to add a link to each social media icon but its not working. Here is the codepen I am trying to edit.
This just for learning so an explanation if possible or any guidance
https://codepen.io/ak47code/project/editor/XRYWbZ/
Ryan Steel
@rsteel1
Apr 14 2017 08:29
@akcode47 From what I can see, you haven't closed out your <a> tag
AK
@akcode47
Apr 14 2017 08:33
@rsteel1 thanks for taking a look - even when closing i can get all of them to link to "currentURL/targetURL" but not each to their individual links
CamperBot
@camperbot
Apr 14 2017 08:33
:cookie: 2 | @rsteel1 |http://www.freecodecamp.com/rsteel1
akcode47 sends brownie points to @rsteel1 :sparkles: :thumbsup: :sparkles:
Alvin Odhiambo
@Alvin2410
Apr 14 2017 08:38
hello guys whats up with my button for my local weather?
they are not showing the required details
Veronica Tobias
@vekatobias
Apr 14 2017 08:40
http://codepen.io/vekatobias/pen/GmgvYG Hi guys this is my tribute page, I would like to get some feedback. Thanks
Galo
@Gaaloexequiel
Apr 14 2017 08:43
Nice website, it seems like a blog!
Linus
@nusli
Apr 14 2017 08:46
@Alvin2410 your API isnt correct you have to include the coordinates and your app-id
search for "coding train 8.5 working with APIs" on youtube. this video helped me a lot
Alvin Odhiambo
@Alvin2410
Apr 14 2017 08:47
@nusli thanks lemme check it out
CamperBot
@camperbot
Apr 14 2017 08:47
alvin2410 sends brownie points to @nusli :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @nusli |http://www.freecodecamp.com/nusli
anfusion
@anfusion
Apr 14 2017 09:39
Hey all, anyone know a good way to scatter these icons for a random effect?
https://anfusion.github.io/
Tanushree Samanta
@TSamanta
Apr 14 2017 09:46
hi! I am not able to position the search box because if I do it becomes non responsive if you reduce the screen size you will see hamburger menu
Tanushree Samanta
@TSamanta
Apr 14 2017 10:22
could you please review this
heroiczero
@heroiczero
Apr 14 2017 10:23
@TSamanta When I was typing in the bar it elongated in Firefox
Tanushree Samanta
@TSamanta
Apr 14 2017 10:24
it is supposed to
does it look weird ?
because there are very long keywords too so I did the elongating thing
heroiczero
@heroiczero
Apr 14 2017 10:38
@TSamanta maybe it could be centered
Gabriel Rodriguez
@grodriguez330
Apr 14 2017 10:54
can someone help me with getting my nav-pills to align to the right and the brand to the left? everything ive tried doesnt make any adjustments to the nav
Tanushree Samanta
@TSamanta
Apr 14 2017 11:17
i am not able to
def
@defregga
Apr 14 2017 11:30
So if I define an anonymous function as the argument of another function call, why is it possible that variables declared in the outside scope can be accessed, but not updated?
Explicitly, I am trying to save the latitude and longitude of a navigator.geolocation.getCurrentPosition(extractLatLong) in the function passed as an argument (extractLatLong), so I can use them further.
According to this: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition neither .getCurrentPosition nor the success function can return an object.
def
@defregga
Apr 14 2017 11:39
@grodriguez330 HTML line 16: Add ml-auto as a class. Also line 13, the class is navbar-brand, not brand.
Gabriel Rodriguez
@grodriguez330
Apr 14 2017 11:41
@defregga wow you're a genius! thanks so much man!! I was pulling my hair out trying to figure it out
CamperBot
@camperbot
Apr 14 2017 11:41
grodriguez330 sends brownie points to @defregga :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @defregga |http://www.freecodecamp.com/defregga
def
@defregga
Apr 14 2017 11:41
Welcome :)
Mohamed Derhalli
@derhallim
Apr 14 2017 12:26
@TSamanta remove the button, make the search on enter click or choosing option
work on the alignment of the header and search to be always in the middle
give the dropdown some padding, the text is too close to the borders
give a background to the results, as the white is hard to read on that light background
and ur good to go :P
Pengfei He
@umpengfei
Apr 14 2017 12:30
无标题.png
Could anyone help me why no matter what I write within the function in the JS segment, it just doesn't work?
Mohamed Derhalli
@derhallim
Apr 14 2017 12:32
@umpengfei can u send the link to the pen?
u should use double quotes ""
they look weird in ur code
in both HTML and JS
Pengfei He
@umpengfei
Apr 14 2017 12:34
sure, please have a look
@derhallim
It's just like no matter which function I write in JS, it doesn't work
Mohamed Derhalli
@derhallim
Apr 14 2017 12:36
u missed jQuery
add jQuery as a reference
Pengfei He
@umpengfei
Apr 14 2017 12:37
so I should add
<script type="text/javascript" src="jquery.js"></script>
this?
Mohamed Derhalli
@derhallim
Apr 14 2017 12:39
no
click on the icon on the left of the HTML
u will see a pop up, click on JavaScript tab, and there's a dropdown to reference jQuery
Pengfei He
@umpengfei
Apr 14 2017 12:40
Okay, get it!
Mohamed Derhalli
@derhallim
Apr 14 2017 12:40
cool
Pengfei He
@umpengfei
Apr 14 2017 12:40
Thank you so much @derhallim
CamperBot
@camperbot
Apr 14 2017 12:40
umpengfei sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 190 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 14 2017 12:41
use this way for CSS too ;)
u can add the link manual if u want as well
Pengfei He
@umpengfei
Apr 14 2017 12:41
yes, this confuses me a lot....
Mohamed Derhalli
@derhallim
Apr 14 2017 12:41
yea, in codepen don't reference things in the HTML
reference things in the settings instead
Pengfei He
@umpengfei
Apr 14 2017 12:42
yes, finally I know how it works, hahaha
thank you so much!
Mohamed Derhalli
@derhallim
Apr 14 2017 12:43
ur welcome!
Tomas Onofre
@TomasOnofre15
Apr 14 2017 12:58
Hi guys I'm just starting my portfolio wevbpage and im not sure how to start it? I want it to be different from the example. Can anyone help?
Craig Morrison
@frogmorton
Apr 14 2017 13:07
Hey guys, anyone familiar with this icon webfont? http://fizzed.com/oss/font-mfizz
For some reason, Only some of the icons show up on my profile page, although I'm coding them correctly (99.9% sure)
Gulsvi
@gulsvi
Apr 14 2017 13:12
@TomasOnofre15 Maybe try going to http://codepen.io and search for "Portfolio" to get an idea of what other people are building? That might give you some inspiration to make it different from the example. You can always skip it and move to other challenges, then go back to the portfolio later.
Gulsvi
@gulsvi
Apr 14 2017 13:45
@frogmorton Do you have the latest version by chance? With font libraries, they're adding new icons all the time... maybe the one you want is only in the latest version? https://cdnjs.cloudflare.com/ajax/libs/font-mfizz/2.4.1/font-mfizz.css
Feel free to share your codepen though, maybe a second pair of eyes can help spot an error
Mohamed Derhalli
@derhallim
Apr 14 2017 13:45
@SkyCoder01 good morning :v:
Craig Morrison
@frogmorton
Apr 14 2017 13:45
@SkyCoder01 That might be true, the react icon is new...I'll try that cdn link
Gulsvi
@gulsvi
Apr 14 2017 13:46
Hello @derhallim morning :sunrise:
Mohamed Derhalli
@derhallim
Apr 14 2017 13:46
no work today?
Craig Morrison
@frogmorton
Apr 14 2017 13:46
@SkyCoder01 NICE!
that was the issue! Thanks @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 13:47
frogmorton sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1037 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 13:47
Good news :)
Just some classes this afternoon @derhallim
Craig Morrison
@frogmorton
Apr 14 2017 13:47
The css is an absolute mess, I'd like to rewrite the whole thing with flexbox and some simpler modular css
The icons in the languages & technologies section are kind of running together
Gulsvi
@gulsvi
Apr 14 2017 13:49
@frogmorton If you had 6 icons, they would work nicely with a bootstrap grid - it would separate them out evenly in that blue square. CSS for big projects like this can get messy, but I'm not sure flexbox will help with that lol :)
Bootstrap uses flexbox anyway
Tanushree Samanta
@TSamanta
Apr 14 2017 13:50
@derhallim I will do that . Thank you so much for the suggestion!
CamperBot
@camperbot
Apr 14 2017 13:50
tsamanta sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 193 | @derhallim |http://www.freecodecamp.com/derhallim
Craig Morrison
@frogmorton
Apr 14 2017 13:50
in the portfolio section, something is wrong with how the box is positioned for my quotes machine thumbnail
Tanushree Samanta
@TSamanta
Apr 14 2017 13:51
I was planning to translate the searchword being entered in the language which then gets attached to the url
Gulsvi
@gulsvi
Apr 14 2017 13:51
It's because it's a different height than the rest of the thumbnails - make them all the same max-height and it should fix it
Tanushree Samanta
@TSamanta
Apr 14 2017 13:51
so I should use the google api?
is it difficult to do that?
Gulsvi
@gulsvi
Apr 14 2017 13:52
That sounds like a fun project @TSamanta I like how you've considered other languages in your Wikipedia project
I've worked with the Google Maps JavaScript API and it was very advanced compared to the quotes and weather APIs... I'm guessing if they have a translation API, it will also be advanced
Tanushree Samanta
@TSamanta
Apr 14 2017 13:54
Thank you! @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 13:54
tsamanta sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1038 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Tanushree Samanta
@TSamanta
Apr 14 2017 13:54
the reason why
Gulsvi
@gulsvi
Apr 14 2017 13:54
They don't let you do a simple getJSON request - you have to attach a key to a script, embed that in your page, and then create service Objects to access the data
Tanushree Samanta
@TSamanta
Apr 14 2017 13:55
I was planning to do the translation is because suppose if I type bread and search for it's content in suppose hindi
Gulsvi
@gulsvi
Apr 14 2017 13:55
Maybe that isn't "advanced" but it was a different approach than what we learned here at FCC, so it was a new concept for me
Tanushree Samanta
@TSamanta
Apr 14 2017 13:55
it shows error
so bread can be translated to hindi an then searched for itand will give us the appropriate page
Gulsvi
@gulsvi
Apr 14 2017 13:56
I wonder if wikipedia can figure it out instead. I know if I search for "bread" it will show me links to that page in other languages
Tanushree Samanta
@TSamanta
Apr 14 2017 13:56
yeah getting the key and stuff makes this seem difficult and it might be I dunno
but i can always give it a try
wikipedia couldn't
only proper nouns
is all what it can detect
Gulsvi
@gulsvi
Apr 14 2017 13:57
Maybe google translate can detect the language rather than translate, then you just have to change the language part of the URL?
I don't know how accurate that is
"pan" is bread in like 5 languages :)
Japanese, Portuguese, Spanish, Italian, maybe more
Okay, I guess it's pane and pao, but anyway, some words can be spelled the same and be different languages
Craig Morrison
@frogmorton
Apr 14 2017 14:13
@SkyCoder01 is my code too convoluted to figure out why the profile items are not lining up properly?
Gulsvi
@gulsvi
Apr 14 2017 14:16
@frogmorton It's what happens when you have more than 12 columns inside a row - if any of those columns are taller/shorter, then they don't always line up correctly. You'll need to make sure each column is the exact same height
Craig Morrison
@frogmorton
Apr 14 2017 14:17
height? width?
Gulsvi
@gulsvi
Apr 14 2017 14:17
height
Bootstrap takes care of the width for you - if your CSS is adjusting the width of bootstrap columns, that will also cause problems
The easiest way to address it is to be happy with two thumbnails per row :)
use col-sm-6 instead of sol-sm-6 col-md-4
Craig Morrison
@frogmorton
Apr 14 2017 14:18
I hate how bootstrap bloats my HTML
Gulsvi
@gulsvi
Apr 14 2017 14:18
and make sure you close the row after every two thumbnails
Bootstrap can bloat HTML, but it will certainly help prevent your CSS from getting bloated
lots of utility classes built in so you only need minimal CSS
Tanushree Samanta
@TSamanta
Apr 14 2017 14:20
yeah let me see what can I do about it @SkyCoder01
Craig Morrison
@frogmorton
Apr 14 2017 14:24
my CSS on this particular project is a hot mess LOL
Mohamed Derhalli
@derhallim
Apr 14 2017 14:37
@SkyCoder01 i have a question for u
i don't know where to start :jack_o_lantern:
Gulsvi
@gulsvi
Apr 14 2017 14:37
I can try to answer :)
Mohamed Derhalli
@derhallim
Apr 14 2017 14:38
look at this:
i am trying to loop through the buttons, and bind an event to them, passing the indexer
but I am not understanding what's going on
people on forums say it's closures, but my understanding of closures is different
Gulsvi
@gulsvi
Apr 14 2017 14:41
I think it's going to be easiest to have one function - rather than dynamically generating function names
Mohamed Derhalli
@derhallim
Apr 14 2017 14:42

i tried to follow this solution:

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;

        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

didn't work out

Gulsvi
@gulsvi
Apr 14 2017 14:43
@derhallim I don't know how to do it :( but I'll play around with it and see
Mohamed Derhalli
@derhallim
Apr 14 2017 14:44
if @SkyCoder01 dunno how to do it offhand, then am not stupid :joy:
@SkyCoder01 u don't have to try much with it, am just learning random stuff, not using it in a project or anything
Gulsvi
@gulsvi
Apr 14 2017 14:45
I think one of the issues - at least when I play around with it is that document.getELementsByTagName doesn't return an iterable item, but I could be wrong...
I use jQuery too much...
Mohamed Derhalli
@derhallim
Apr 14 2017 14:47
@SkyCoder01 u can iterate through it using for loop, but not forEach
Gulsvi
@gulsvi
Apr 14 2017 14:47
@derhallim If I do it this way, I can get each button to give an alert:
const btns = Array.from(document.getElementsByTagName('input'));
const myFunc = () => alert('clicked');
btns.filter(element => element.addEventListener('click', myFunc));
what you can do at that point, is build out myFunc() to have whatever code you need based on what was clicked
Mohamed Derhalli
@derhallim
Apr 14 2017 14:48
but how do u pass the indexer? for example, if u have an array of other elements and u need to use that array by passing the i to it for the current button
Gulsvi
@gulsvi
Apr 14 2017 14:49
Just a sec, I'll show an example
Have to play around with it, bc I don't know offhand lol
@derhallim It would look like this:
const btns = Array.from(document.getElementsByTagName('input'));

const myFunc = (e) => {
  if (e.target.value === 0) runSomeFunctionForButton0();
}

btns.filter(element => element.addEventListener('click', myFunc));
myFunc() checks the ID, Value, Class Name, or whatever of the element and then runs the appropriate code based on what was clicked
Mohamed Derhalli
@derhallim
Apr 14 2017 14:53
ummm
i'll have to stare at that code for a while to get it, but thanks @SkyCoder01 :joy:
CamperBot
@camperbot
Apr 14 2017 14:53
derhallim sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1040 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 14:53
@derhallim Maybe this makes more sense:
const btns = Array.from(document.getElementsByTagName('input'));
const myFunc = (e) => alert(e.target.value + ' was just clicked!')
btns.filter(element => element.addEventListener('click', myFunc));
Mohamed Derhalli
@derhallim
Apr 14 2017 14:54
got it
why did u use array.from?
to use filter on it?
won't work without it?
Gulsvi
@gulsvi
Apr 14 2017 14:54
That just makes it so I don't have to use a for loop, yeah to use filter
Yeah, filter() only works on arrays
Mohamed Derhalli
@derhallim
Apr 14 2017 14:55
how do u check the "Exact" type of btns
if i do typeof it returns object
Gulsvi
@gulsvi
Apr 14 2017 14:55
I think it would be e.target.type
Mohamed Derhalli
@derhallim
Apr 14 2017 14:55
isn't there a way to return the underlying type?
so btns.target.type?
Gulsvi
@gulsvi
Apr 14 2017 14:55
Replace alert(e.target.value + ' was just clicked!') with console.log(e) and then browse it in your browser's console - it's like a big json object
e.target then has a bunch of properties you can look up, like innerHTML, outerHTML, value, type, etc..
Mohamed Derhalli
@derhallim
Apr 14 2017 14:57
but how do u get the type of the collection itself
not the e?
Gulsvi
@gulsvi
Apr 14 2017 14:57
The collection could have multiple types
<input> can be lots of types
So, you can only look up individual types of each input, if that makes sense
Mohamed Derhalli
@derhallim
Apr 14 2017 14:59
umm
alright
Gulsvi
@gulsvi
Apr 14 2017 14:59
by "type", do you mean type="button"?
Mohamed Derhalli
@derhallim
Apr 14 2017 14:59
no
i mean
Gulsvi
@gulsvi
Apr 14 2017 14:59
oh... lol
Mohamed Derhalli
@derhallim
Apr 14 2017 14:59
typeof 5 == number
typeof "hi" == string
typeof btns == object.. but it's an array, how can I look at the exact type
Gulsvi
@gulsvi
Apr 14 2017 15:00
Where is that number or string? In the value of the <input>?
Mohamed Derhalli
@derhallim
Apr 14 2017 15:00
noooooo
:joy:
i mean, don't we get collection of btns?
using document.getElementsByTagName ?
Gulsvi
@gulsvi
Apr 14 2017 15:00
Yes, a HTML Collection
Mohamed Derhalli
@derhallim
Apr 14 2017 15:01
when u do typeof btns, it will show "object"
but in fact it might be "array" or nodelist
or anything
Gulsvi
@gulsvi
Apr 14 2017 15:01
that makes sense, yeah
Mohamed Derhalli
@derhallim
Apr 14 2017 15:01
i wanna see what's the exact type
Gulsvi
@gulsvi
Apr 14 2017 15:02
hnmm, I have no idea, it should be somewhere in that e variable
if(NodeList.prototype.isPrototypeOf(document.getElementsByTagName('input'))) {
  // it's a nodeList
} else {
  // it's a HTML Collection
}
Mohamed Derhalli
@derhallim
Apr 14 2017 15:05
i read somewhere
that typeof would show nodelist
but can't remember the exact operator
it wasn't typeof, but something similar
Mohamed Derhalli
@derhallim
Apr 14 2017 15:14
@SkyCoder01
var btns = document.getElementsByTagName('input');
console.log(Object.prototype.toString.call(btns));
:D
that was it
Gulsvi
@gulsvi
Apr 14 2017 15:15
I think you can do this too:
const btns = document.getElementsByTagName('input');
console.log(typeof btns); // object for both collection and NodeList
console.log(typeof btns.length); // number for both collection and NodeList
console.log(typeof btns.item); // function if HTML Collection, undefined if NodeList
so just check .item since that isn't a valid property of a nodelist
Mohamed Derhalli
@derhallim
Apr 14 2017 15:16
but typeof will return object
for anything that's not number/string .. general types
Gulsvi
@gulsvi
Apr 14 2017 15:16
typeof btns.length returns "number"
Mohamed Derhalli
@derhallim
Apr 14 2017 15:16
but Object.protoype will give u the EXACT type
Gulsvi
@gulsvi
Apr 14 2017 15:16
typeof btns.item returns "function"
Mohamed Derhalli
@derhallim
Apr 14 2017 15:16
yep
Gulsvi
@gulsvi
Apr 14 2017 15:16
ahh, I see
Mohamed Derhalli
@derhallim
Apr 14 2017 15:16
these are the basic types
but if u wanna know the underlying type
go for Object.prototype
that's how I got the result of "Nodelist"
Gulsvi
@gulsvi
Apr 14 2017 15:17
Interesting, I just don't know when I would use this lol. Maybe for creating something like react?
Mohamed Derhalli
@derhallim
Apr 14 2017 15:19
i don't know when either :joy: just wanted to figure out what's that "object"
why some collections can be handled with loops, and others not
Gulsvi
@gulsvi
Apr 14 2017 15:20
I think you have a back-end programmer mindset lol, I never would have thought to research that stuff
Mohamed Derhalli
@derhallim
Apr 14 2017 15:20
if it's an array, it can be looped, but nodelist, htmlcollection, not
Gulsvi
@gulsvi
Apr 14 2017 15:20
I'm thinking the whole time....but how do you get it to display a nice picture on the page?
Mohamed Derhalli
@derhallim
Apr 14 2017 15:20
yea but iw anted to know when do we use Array.from
Gulsvi
@gulsvi
Apr 14 2017 15:21
I learned Array.from in the JS challenges, I think it was seek and destroy where we have to use the arguments object
makes it so you can iterate through it with .map/.filter
Mohamed Derhalli
@derhallim
Apr 14 2017 15:21
yea
but WHEN do u convert the collection to array?
how do u know that the returned var is array or nodelist?
if u check with typeof it will bring back an object always
even for arrays
so u can check with Object.prototype, and see if it's an array, if not do Array.from
Gulsvi
@gulsvi
Apr 14 2017 15:23
You could also just do isArray() I think
Mohamed Derhalli
@derhallim
Apr 14 2017 15:24
yea
i missed that
:joy:
Mohamed Derhalli
@derhallim
Apr 14 2017 15:35

is there a css selector that would get the first occurrence of element, but it's not a child? let's say this html:

<div id="container"
  <div class="row">
<input .... >
</div>
<div class="row">
<input .... >
</div>
<div class="row">
<input .... >
</div>
<div class="row">
<input .... >
</div>
</div>

so i wanna get the second input or first input inside #container, any idea?

alpox
@alpox
Apr 14 2017 16:15
#container row:nth-child(1) input
@derhallim
You can exchange 1 with whatever number
Sry it should be .row
Mohamed Derhalli
@derhallim
Apr 14 2017 16:17
ahaaa
what if the parent is not consistent?
like one is container1, the other container2
so u can't select row:nth-child(2)
isn't there a selector for the nth descendant?
alpox
@alpox
Apr 14 2017 16:18
No only nth child
Dave
@Manlyphall
Apr 14 2017 16:18
Hey my fellow coders. I'm on my first independent project with freecodecamp, build a tribute page, and I'm totally lost. I was just copying code but that felt whack, so I'm reaching out to y'all in desperation. Does anyone have any tips on how to get started or general things to keep in mind?
Thanks!
alpox
@alpox
Apr 14 2017 16:18
But i never saw the need for nth descendant
@derhallim if you have multiple containers, use a common class for tjem
Mohamed Derhalli
@derhallim
Apr 14 2017 16:19
ummmm
CamperBot
@camperbot
Apr 14 2017 16:19
derhallim sends brownie points to @naveenlb :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @naveenlb |http://www.freecodecamp.com/naveenlb
Mohamed Derhalli
@derhallim
Apr 14 2017 16:20
ty @alpox
CamperBot
@camperbot
Apr 14 2017 16:20
derhallim sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 939 | @alpox |http://www.freecodecamp.com/alpox
Mohamed Derhalli
@derhallim
Apr 14 2017 16:20
who's naveen :joy:
Dosunmu Olawale
@dosunmuwale
Apr 14 2017 16:24
Hi everyone, I have an issue with codepen.io display window. It displays nav title without spacing. eg websiteAboutUsPortfolio etc. What's is the solution
@derhallim Hi, please I have an issue with codepen.io display window. It displays nav title without spacing. eg websiteAboutUsPortfolio etc. What's is the solution
Mohamed Derhalli
@derhallim
Apr 14 2017 16:27
can u share a screenshot? i don't understand what ur referring to @dosunmuwale
Amadou Dieye Leye
@ginfemeth
Apr 14 2017 16:30
hi! can someone explain to me why my offset did not work in my div class. for exemple <div class="col-md-8 col-md-offset-4">
Gulsvi
@gulsvi
Apr 14 2017 16:33
@ginfemeth If you are using codepen, you may have added Bootstrap 4, that's the default that codepen gives you with the quick add. They use different class names for offsets.
<div class="col-md-8 offset-md-4">
Amadou Dieye Leye
@ginfemeth
Apr 14 2017 16:37
@SkyCoder01 thank u so much
CamperBot
@camperbot
Apr 14 2017 16:37
ginfemeth sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1042 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Dosunmu Olawale
@dosunmuwale
Apr 14 2017 16:38

@derhallim This is the code: <header>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
</header>

<div class= "container-fluid">
<ul class="nav nav-pills">
<li>
<a href="#">WEBSITE </a>
</li>
<li> WEBSITE</li>
<li> WEBSITE</li>
</ul>
</div>

@derhallim the result is WEBSITEWEBSITEWEBSITE without spacing
You are missing classes on your <li> elements
and your <a> elements
Dosunmu Olawale
@dosunmuwale
Apr 14 2017 16:41
@SkyCoder01 Thanks. What classes am I missing in my <li> element
CamperBot
@camperbot
Apr 14 2017 16:41
dosunmuwale sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1043 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 16:41
@dosunmuwale Please see the code sample here: https://v4-alpha.getbootstrap.com/components/navs/#pills
def
@defregga
Apr 14 2017 16:56
How do I use a .getJSON() with an API address that doesn't support https in CodePen?
Gulsvi
@gulsvi
Apr 14 2017 16:57
@defregga The only way is to make sure that the address in your browser's address bar starts with http://codepen.io instead of https://codepen.io
def
@defregga
Apr 14 2017 16:58
But then he won't take some of the other includes anymore, no?
etCurrentPosition() and watchPosition() no longer work on insecure origins.
Gulsvi
@gulsvi
Apr 14 2017 16:58
Right, navigator.geolocation requires HTTPS, so you can't use an API that doesn't support HTTPS.
You could use a less accurate location API, like https://ipinfo.io/json
This might help explain what's going on @defregga http://codepen.io/skycoder/post/apisandlocation
def
@defregga
Apr 14 2017 17:00
Cool. Thanks @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 17:00
defregga sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1044 | @skycoder01 |http://www.freecodecamp.com/skycoder01
def
@defregga
Apr 14 2017 17:05
So Keep in mind that codepen will enforce HTTPS in June! means most people's solutions won't work anymore come June?
Priyansh
@priyanshAgarwal
Apr 14 2017 17:10
Hi
Does't this "build-a-personal-portfolio-webpage" project include Javascript
It is before JavaScript Tutorials
Roxroy
@roxroy
Apr 14 2017 17:11
@priyanshAgarwal , the focus on html and css. You can include js if you want
Priyansh
@priyanshAgarwal
Apr 14 2017 17:12
@roxroy I looked into codepen and they included JS
Which is taught after this project?
So do we learn JS before doing portfolio project
Roxroy
@roxroy
Apr 14 2017 17:13
@priyanshAgarwal , it is optional for the portfolio page. Feel to as javascript if you want.
Priyansh
@priyanshAgarwal
Apr 14 2017 17:16
@roxroy should I do JS courses first
Roxroy
@roxroy
Apr 14 2017 17:17
@priyanshAgarwal , no the portfolio is where you get your feet wet. The focus in getting to know css, bootstrap (if you are so inclined) and html.
Priyansh
@priyanshAgarwal
Apr 14 2017 17:18
So we should make this again with JS
Roxroy
@roxroy
Apr 14 2017 17:20
@priyanshAgarwal , it is up to you. See my previous comments and decide for yourself.
Priyansh
@priyanshAgarwal
Apr 14 2017 17:21
@roxroy Thanks
CamperBot
@camperbot
Apr 14 2017 17:21
:cookie: 657 | @roxroy |http://www.freecodecamp.com/roxroy
priyanshagarwal sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
Dosunmu Olawale
@dosunmuwale
Apr 14 2017 17:21
@SkyCoder01 thanks
CamperBot
@camperbot
Apr 14 2017 17:21
dosunmuwale sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: dosunmuwale already gave skycoder01 points
def
@defregga
Apr 14 2017 17:24
Hmm, even if I go in via http instead of https, if (navigator.geolocation) seems to return true
Jorge
@OrangeKulture
Apr 14 2017 17:24
hey guys!
Gulsvi
@gulsvi
Apr 14 2017 17:28
@OrangeKulture Hey! Happy Friday
:volcano: Are you doing okay?
def
@defregga
Apr 14 2017 17:29
Hello, hope all is well.
Jorge
@OrangeKulture
Apr 14 2017 17:30
@SkyCoder01 thanks a lot! .. yeah I am .. crazy stuff huh? volcanoes going off a lot here. This is not the first, we've had ashes through the city for the past 3 or 4 months from another volcano
CamperBot
@camperbot
Apr 14 2017 17:30
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1045 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
Apr 14 2017 17:31
I think the end is near guys .. make peace with your inner selves :smile: :smile:
def
@defregga
Apr 14 2017 17:32
No way, that guy is a douche. ;-p
Gulsvi
@gulsvi
Apr 14 2017 17:33
lol
Well, glad all is okay - saw the news today
Jorge
@OrangeKulture
Apr 14 2017 17:35
the weird thing is tho, the volcano that erupted today is one of the less active ones ... i seriously think there is some core planet movement what we may be unaware of , just saying ..
if anyone is close to yellowstone id definitely consider some vacation time haha :S
def
@defregga
Apr 14 2017 17:39
Let me quess, it isn't possible to make another .getJSON() call inside a function that was provided by the first .getJSON() call?
Moisés Man
@moigithub
Apr 14 2017 17:40
why not ? @defregga u can nest all commands u want if follow correct syntax
def
@defregga
Apr 14 2017 17:40
Because he simply doesn't do it.
def
@defregga
Apr 14 2017 17:42
.getJSON() call in getLocation() calls getWeather(). In that, there is another .getJSON() that doesn't seem to get called.
Gulsvi
@gulsvi
Apr 14 2017 17:51
@defregga That last function doesn't get called because the Weather API has this on the end: callback=JSON_CALLBACK
Which basically is telling getJSON to call a function function JSON_CALLBACK() when it gets the data back.
I don't think you need any callback on the end of that URL for openweathermap - you could also just replace JSON_CALLBACK with a ? and it will call updateWeather as requested
def
@defregga
Apr 14 2017 17:54
Ah, thanks.
Guess at one point it will pay off to actually have some theory behind these API queries and not just learning and replicating some syntax.
Jorge
@OrangeKulture
Apr 14 2017 18:11
Does it ever happen to you guys that you have this awesome ideas floating around, like a really big product/project you think would be amazing, but just thinking about all the work that needs to be done, and you are basically just you (not a group of coders), just seems impossible ?
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:12
Everything is possible :)
@defregga
Jorge
@OrangeKulture
Apr 14 2017 18:15
well yeah, but it would take people to actually want to do it .. like a startup but with sort of "unknown"(how well do we know each other) collaborators and no pay, it's a lot of dedication and i guess it would be hard for people to be on board and make a commitment, sort of like " ill help you, and I won't try to steal your idea and run it by some investors" kinda thing
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:15
Your profile pic is nice... At first I looked at it I thought it was a light bulb lol
I see
You can just ask for help just for a part not entire code You know? Not telling them about your idea
Like "Hey how do I make a background red?" without telling them your idea
"Hey what are you working on?"
"Stuff"
Right? :(
Parvesh garg
@parveshgarg24
Apr 14 2017 18:21
hey pls help me about twitch api
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:21
@parveshgarg24 Well Im working on weather API
Can you recommend any temperature API?
Parvesh garg
@parveshgarg24
Apr 14 2017 18:21
anyone else
Tomasz
@Tgralak
Apr 14 2017 18:23
var APIkey = "3f51d1d2c9d47eaaf295403cd5a555e0",
    lat,
    lon;


$(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

      lat = position.coords.latitude;
      $("#latitude").text("Latitude: " + lat);

      lon = position.coords.longitude;
      $("#longitude").text("Longitude: " + lon);
    });
  };
});

var APIcall = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=" + APIkey;
Can anyone tell me, why my variables "lat" and "lon" are undefined? i define them inside a function!
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:23
Because they are not var
You need to add var to it
var lat = ...;
Tomasz
@Tgralak
Apr 14 2017 18:24
u mean inside funtion?
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:24
Oh never mind I thought they are separated by that single variable
Parvesh garg
@parveshgarg24
Apr 14 2017 18:24
@Tgralak call json inside function
Jorge
@OrangeKulture
Apr 14 2017 18:25
the lat and long variables are being used outside the scope of the function, u need to make the call inside
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:25
$(".geo").html("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
Dont you need position.coords.lat or long?
Jorge
@OrangeKulture
Apr 14 2017 18:26
also, user var lat; var long; and use semicolon
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:26
@OrangeKulture
var APIkey = "url or something", lat, lon;
That what he did
Andrew Nahon
@AndrewNahon
Apr 14 2017 18:27
Hi, I'm stuck on the random quote generator project. I'm using codepen. The getJSON function does not return any data. I don't know how to debug, where to start. Any hints would be greatly appreciated!
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:29
@SkyCoder01 you on?
Jorge
@OrangeKulture
Apr 14 2017 18:29
oh right ...
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:29
lol
Jorge
@OrangeKulture
Apr 14 2017 18:29
id use var keyword tho
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:29
yea
Jorge
@OrangeKulture
Apr 14 2017 18:29
@AndrewNahon let's see your api call ?
Tomasz
@Tgralak
Apr 14 2017 18:29
@OrangeKulture but I just want to change their value
Andrew Nahon
@AndrewNahon
Apr 14 2017 18:30
Thanks @OrangeKulture
CamperBot
@camperbot
Apr 14 2017 18:30
andrewnahon sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @orangekulture |http://www.freecodecamp.com/orangekulture
Andrew Nahon
@AndrewNahon
Apr 14 2017 18:30

$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json").done(function(data){
console.log(data);

}).catch(function(error) {console.error(error)});
})

Moisés Man
@moigithub
Apr 14 2017 18:30
@Tgralak cuz getCurrPos is asynchronous method (it executes later)
soo when code reachvar APIcall = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&A
lon and lat dont have any values yet
Tomasz
@Tgralak
Apr 14 2017 18:31
@moigithub Thanks a lot
CamperBot
@camperbot
Apr 14 2017 18:31
tgralak sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3092 | @moigithub |http://www.freecodecamp.com/moigithub
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:31
@moigithub
I dont know what is wrong with my code
Parvesh garg
@parveshgarg24
Apr 14 2017 18:31
@AndrewNahon first check your api url in browser if returning json
Jorge
@OrangeKulture
Apr 14 2017 18:31
@AndrewNahon the api call does return a json string, it's good
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:31
Console says Latitude is not defined
Jorge
@OrangeKulture
Apr 14 2017 18:32
@AndrewNahon i think the problem might be with codepen and the fact that you are receiving a response through HTTP, codepen likes HTTPS
Parvesh garg
@parveshgarg24
Apr 14 2017 18:32
anyone pls help about twitch api
Moisés Man
@moigithub
Apr 14 2017 18:33
+ <br>lon +
i think thats a string ? so need quotes
@MathematicsCoding
Andrew Nahon
@AndrewNahon
Apr 14 2017 18:33
@OrangeKulture oh okay. is there anyway to get around this?
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:33
@moigithub look at var lon
var lon = Longitude
Tomasz
@Tgralak
Apr 14 2017 18:33
To get the geolocating working u need to be sure u are ar https://codepen.io instead of codepen.io
Moisés Man
@moigithub
Apr 14 2017 18:34
@MathematicsCoding
+ ' <br>lon' + <-- quotes
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:34
hm..
Jorge
@OrangeKulture
Apr 14 2017 18:34
@AndrewNahon several .. use an API which supports HTTPS ... wrap the call in a proxy call, HTTPS heroku, might work .. umm
Moisés Man
@moigithub
Apr 14 2017 18:34
@MathematicsCoding <br> is an html string
or should be like + '<br>' + lon +
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:34
Well yeah
Its fine I removed it
Tomasz
@Tgralak
Apr 14 2017 18:35
@moigithub is there any way I can update global variable value inside asynchronous function?
Moisés Man
@moigithub
Apr 14 2017 18:36
@Tgralak that global will be updated.. but problem is u dont know when exactly
only place for sure u will have data available is inside the callback
Andrew Nahon
@AndrewNahon
Apr 14 2017 18:36
Okay thanks I'll search around. Cheers!
Tomasz
@Tgralak
Apr 14 2017 18:37
@moigithub thank you
CamperBot
@camperbot
Apr 14 2017 18:37
tgralak sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:warning: tgralak already gave moigithub points
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:37
@moigithub Check my JS code again
Moisés Man
@moigithub
Apr 14 2017 18:38
@MathematicsCoding position is the callback function argument... soo outside that callback is not defined
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:38
So can I just change position to something?
Moisés Man
@moigithub
Apr 14 2017 18:39
move those 2 lines inside the callbackfunction
......... , funciton(position){
    var latLocation = position.coords.latitude;
    var lonLocation = position.coords.longitude;
      /// more code
}
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:39
I thought same thing..
Well thanks @moigithub
CamperBot
@camperbot
Apr 14 2017 18:40
:star2: 3093 | @moigithub |http://www.freecodecamp.com/moigithub
mathematicscoding sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:42
Is it ok to have two buttons on page to change F into temperature and another button for celsius into temperature
Jorge
@OrangeKulture
Apr 14 2017 18:42
@MathematicsCoding yeah sure .. that's how i did it
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:42
@OrangeKulture Can I see your?
I dont need to see how you did it I just want to know what your page looks like
Jorge
@OrangeKulture
Apr 14 2017 18:43
@MathematicsCoding you can see both, not a problem Weather APP
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:44
Okay thanks
Jorge
@OrangeKulture
Apr 14 2017 18:44
@MathematicsCoding sure thing :thumbsup:
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:50
@OrangeKulture how do you write degree symbol?
Jorge
@OrangeKulture
Apr 14 2017 18:51
i just do it as part of the string
°
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:52
°
hm
'
"
I will just copy that symbol then paste it lol
Jorge
@OrangeKulture
Apr 14 2017 18:55
ohh yeah sorry, thought u meant how did i incorporate it to the page ..
yeah the ALT code is .. umm
0176
ALT + 0176
Saboor Malik
@MathematicsCoding
Apr 14 2017 18:57
Yeah
Tomasz
@Tgralak
Apr 14 2017 19:07
Hey, why while I try to make an AJAX call, the URL I'm tryin to connect with is not the one I put there, its https://s.codepen.io/boomerang/iFrameKey-7c805d91-125a-314f-99dc-2b0c2d5882f1/api.openweathermap.org/data/2.5/weather?lat=51.11943060000001&lon=15.9064982&APPID=3f51d1d2c9d47eaaf295403cd5a555e0 instead of api.openweathermap.org/data/2.5/weather?lat=51.11943060000001&lon=15.9064982&APPID=3f51d1d2c9d47eaaf295403cd5a555e0'
Jonas Reimer Christensen
@Jonas0803
Apr 14 2017 19:16
can someone help me get .well working in my tribute page project?
https://codepen.io/Jonas0803/pen/XRJaGj
Tomasz
@Tgralak
Apr 14 2017 19:18
@Jonas0803 hey, what do u need to know?
Jonas Reimer Christensen
@Jonas0803
Apr 14 2017 19:18
@Tgralak look at the code, i have a div with the class "well", but it wont show on the page.
(bootstrap)
plz bois
i need help
Tomasz
@Tgralak
Apr 14 2017 19:23
I'm trying to figure it out lo
l
Jonas Reimer Christensen
@Jonas0803
Apr 14 2017 19:23
:smile: thx
maybe its because im using bootstrap 4?
Kayvon Shahir
@k-von
Apr 14 2017 19:25
Hey guys, anyone can help me with the 'No repeats please' project?
Tomasz
@Tgralak
Apr 14 2017 19:26
It's because wells have to be in one "container" div I think, like this:
<div class="container">
  <div class="well">aa</div>
  <div class="well">aa</div>
  <div class="well">aa</div>
</div>
try it out
@Jonas0803
Amit Patel
@AmitP88
Apr 14 2017 19:33
hey guys, I'm polishing up a website i'm working on and I need some help. Demo: https://amitp88.github.io/Khmer-Family-Cafe/ Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages For some reason, when I initially load the page (cleared cache 'n all), the carousel for the Daily Specials appear cut-off from the bottom. I have to resize the browser window or zoom-in and zoom back out just to get the full height of the carousel to show. How do I fix this? (I'm thinking it might be an optimization problem, but I'm not sure). Any help will be greatly appreciated :)
Mooli
@Mooli88
Apr 14 2017 19:40
@AmitP88 my guess is it because the rest of the page being load before the carousel
Amit Patel
@AmitP88
Apr 14 2017 19:41
@Mooli88 ah I see. So I would have to make the carousel code asynchronous?
Mooli
@Mooli88
Apr 14 2017 19:41
@AmitP88 i'd give it a shot yes
Amit Patel
@AmitP88
Apr 14 2017 19:44
@Mooli88 hmm, it didn't work. I tried adding async to the html tag with class="carousel-cell"
@AmitP88 resize: false ?
Amit Patel
@AmitP88
Apr 14 2017 19:51
@Mooli88 I don't think I want to set the resize to false since I want to keep the carousel size responsive
Gulsvi
@gulsvi
Apr 14 2017 19:52
@Jonas0803 You're correct, it's because you are using Bootstrap 4 and they got rid of the well class in that version. This is where you can get Bootstrap 3, or you can use Bootstrap 4 cards instead: https://v4-alpha.getbootstrap.com/components/card/
@MathematicsCoding I'm back now, but looks like you are all set :)
Amit Patel
@AmitP88
Apr 14 2017 19:53
@Mooli88 hmm, the lazy load feature of flickity didn't seem to work either
Gulsvi
@gulsvi
Apr 14 2017 19:56
@Tgralak You need the http:// in front of your open weather map URL or it won't work. A problem you're going to hit though is that Open Weather Map only supports HTTP and navigator.geolocation requires HTTPS. Best to use a different Weather API, a different Location API, or both.
Anthony
@jawaka72
Apr 14 2017 19:59
Hey, can someone check out my weather app? It's not finished yet, but I just want to make sure it's function properly http://codepen.io/Jawaka72/pen/wdBvod
Mooli
@Mooli88
Apr 14 2017 20:02
@AmitP88 metafizzy/flickity#318
Mohamed Derhalli
@derhallim
Apr 14 2017 20:04
@jawaka72 working well
Ramesh
@rnallu
Apr 14 2017 20:04
Hi, I have done the Twitch TV project, but the outputs reflects different streaming statuses at each refresh. Don't know, what went wrong. Please Review and Give me feedback. Hope remaining everything is fine.
Here is the pen: https://codepen.io/rnallu/full/yMZdxp/1
Anthony
@jawaka72
Apr 14 2017 20:04
Thank you @derhallim
CamperBot
@camperbot
Apr 14 2017 20:04
jawaka72 sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 196 | @derhallim |http://www.freecodecamp.com/derhallim
Gulsvi
@gulsvi
Apr 14 2017 20:05
@jawaka72 It works fine over HTTP, but does not work over HTTPS and codepen will soon enforce HTTPS, so your app will be broken when that happens.
Anthony
@jawaka72
Apr 14 2017 20:06
but I used the https://cors-anywhere.herokuapp.com/ link before the api link. I thought that was one method of getting around that.
Gulsvi
@gulsvi
Apr 14 2017 20:07
@rnallu It's expected to get results back in different order with the way you have it coded - all the results come back when the twitch api gives them to you, not necessarily in the order you request them.
@jawaka72 Your location API only works over HTTP, so you'd have to use that proxy in front of the location API as well.
Ramesh
@rnallu
Apr 14 2017 20:08
@SkyCoder01 Nope, please check once again, i'm not talking about the order. i'm talking about the status change, its reflect the wrong status.
Gulsvi
@gulsvi
Apr 14 2017 20:08
But honestly, it's a bad practice to send everyone's location and your API keys to an unknown proxy on some random heroku server :p
@rnallu I didn't notice the different status too! I'll take a closer look.
Anthony
@jawaka72
Apr 14 2017 20:10
What would be the best way to fix this?
Ramesh
@rnallu
Apr 14 2017 20:10
@SkyCoder01 just try to refresh more than one time and observe
Gulsvi
@gulsvi
Apr 14 2017 20:11
@jawaka72 The "best way" is to use a location API and a weather API that support both HTTP and HTTPS. Perhaps a combination of https://ipinfo.io/json and Weather Underground / Apixu / Dark Sky Weather APIs. You have things working fine over HTTP and you've completed the user stories, so maybe something for the longer term.
@rnallu The issue is that you're making getJSON calls in parallel - they need to be serialized.
You can put your call to the /streams/ endpoint inside the getJSON function(data) of your /channels/ endpoint call to fix this
Anthony
@jawaka72
Apr 14 2017 20:13
Okay. I'll take a note of that and try again in the future. Thank you @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 20:13
jawaka72 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1047 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ramesh
@rnallu
Apr 14 2017 20:19
@SkyCoder01 then all statuses are getting undefined
Tomasz
@Tgralak
Apr 14 2017 20:19
@SkyCoder01 How do i check if some API supports HTTP or HTTPS?
Gulsvi
@gulsvi
Apr 14 2017 20:20
@Tgralak If you can load it in your browser over HTTPS, then it supports both HTTP/HTTPS. Otherwise, it will only work over HTTP.
@rnallu I'll take another look
Ramesh
@rnallu
Apr 14 2017 20:20
@SkyCoder01 thats great
Amit Patel
@AmitP88
Apr 14 2017 20:20
@Mooli88 hey, thanks for the resource. However, when I applied the solution posted, it broke the carousel
CamperBot
@camperbot
Apr 14 2017 20:20
:cookie: 265 | @mooli88 |http://www.freecodecamp.com/mooli88
amitp88 sends brownie points to @mooli88 :sparkles: :thumbsup: :sparkles:
Amit Patel
@AmitP88
Apr 14 2017 20:21
error.png
Gulsvi
@gulsvi
Apr 14 2017 20:22
@rnallu Unfortunately, since getJSON is asynchronous, you can't return a value from it like that. You have to actually nest the getJSONs, like:
$.getJSON(url1, url1Data => {
  $.getJSON(url2, url2Data => {

  // now url1Data and url2Data can be used below

    if (/* test if not existent or closed */) {
      // process non-existent / closed channels
    } else if (/* test if offline */) {
      // process offline channels
    } else {
      // process online channels
    }

  }).fail(errorHandler);
}).fail(errorHandler);
So, in your case, replace url1 and url2 with the /channels/ and /streams/ URLs, and then replace url1Data with data and url2Data with stat
Mohamed Derhalli
@derhallim
Apr 14 2017 20:28
@SkyCoder01 do u understand how bootstrap stuff are made?
or u just use it as it is
Gulsvi
@gulsvi
Apr 14 2017 20:28
maybe 80-90% sure I could do what bootstrap does without using it
I'd still have to google a lot though...
Don't have it all memorized
Especially their JavaScript components - just referring to the CSS with floats and % based widths
sarabesh
@sarabesh
Apr 14 2017 20:35
hello world! noob here too
Mohamed Derhalli
@derhallim
Apr 14 2017 20:37
aha got u
welcome @sarabesh
Ramesh
@rnallu
Apr 14 2017 20:39
@SkyCoder01 Tried, its failed again. If you dont mind, can you pls look into it again. Am i done what you said or not?
Gulsvi
@gulsvi
Apr 14 2017 20:43
@rnallu Now you're hitting this problem - it's common with for loops: http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
One reason that it's usually not good to call asynchronous functions inside a for loop
The fix is to change var to let in your loop - or use a forEach
willfree108
@willfree108
Apr 14 2017 20:49

Hi guys, could u lend me some help ? I'm trying to upload an image with vue js on a API rest which use multer. But unfortunately multer doesn't recognize and so set as undefined.
client side

sendImage () {
      var data = new FormData()
      const config = { headers: { 'Content-Type': 'multipart/form-data' } }

      data.append('image', this.image) // this.image got a data-URI format 
      axios.post('image/' + this.$store.getters.GET_ID, data, config)
        .then(function (res) {
          console.log('res', res)
        })
        .catch(function (err) {
          console.log('err', err)
        })
    }

server side

.post('/:id', upload.single('image'), function(req, res) {
  console.log(req.file) // undefined
  console.log(req.body) // got the image in his data-URI format
  User.imgUp(req.file, req.params.id, function(err, data){
                if (err) console.log(err)
        if (data === true) res.send("The picture has been added")
        if (data === "size") res.send("The size of the file must be between 100Kb and 5Mb")
        if (data === "mimetype") res.send("The type of the file is incorrect")
        if (data === false) res.send('An error occurred.')
  })
})

I'm out of solution :confounded: . Ty a lot in advance.

Gulsvi
@gulsvi
Apr 14 2017 20:49
@willfree108 Have you tried the Vue channel by chance? https://gitter.im/vuejs/vue
We don't learn Vue at Free Code Camp
willfree108
@willfree108
Apr 14 2017 20:51
yeah I tried, but since it's more a request format issue than a Vue's issue I thought I could get some help here :<
and I'm really out of solution :confounded: Or is there a more suitable channel on FCC for this kind of issue ?
Tomasz
@Tgralak
Apr 14 2017 20:55
@SkyCoder01 Hey, now I can get my geolocation (via HTTP) using ip-api.com, but AJAX request for OpenWeatherMap keeps trying to get data for strange link s.codepen.io/boomerang/iFrameKey-fecb9095-67c0-30a2-8d88-8279e4000bab/api.o…org/data/2.5/weather?q=Wroc%C5%82aw&APPID=3f51d1d2c9d47eaaf295403cd5a555e0. Does it mean, that OpenWeatherMap does not support HTTP?
Gulsvi
@gulsvi
Apr 14 2017 20:55
@willfree108 All of these channels are for help toward FCC certification, maybe some people are familiar with what you're trying to do, but it's going to be a bit of a longshot unless it's a common scenario with one of the projects required for certification.
@Tgralak Does your URL to openweathermap start with http:// or just api.openweathermap?
willfree108
@willfree108
Apr 14 2017 20:56
Oh I see, ty @SkyCoder01
CamperBot
@camperbot
Apr 14 2017 20:56
willfree108 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1048 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Tomasz
@Tgralak
Apr 14 2017 20:56
@SkyCoder01 just api.openweathermap
Gulsvi
@gulsvi
Apr 14 2017 20:57
Okay, put http:// in front of api.openweathermap that should fix it @Tgralak
Ramesh
@rnallu
Apr 14 2017 20:57
@SkyCoder01 That worked. Awesome. Really gone nuts to fix this. Thank You So Much Man.
CamperBot
@camperbot
Apr 14 2017 20:57
rnallu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1049 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 20:58
@rnallu Happy to help, congrats :)
Tomasz
@Tgralak
Apr 14 2017 20:58
@SkyCoder01 Thank you very much!!!!!!!!!
CamperBot
@camperbot
Apr 14 2017 20:58
tgralak sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1050 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 20:58
:)
Ramesh
@rnallu
Apr 14 2017 21:00
@SkyCoder01 And one more thing, referring let wrt var in mozilla documentation. Couldnt understand fully, can you simplify that
Gulsvi
@gulsvi
Apr 14 2017 21:04
@rnallu hmmm, hard for me to explain, to be honest. What I've learned is to stop using var. Use const everywhere possible instead - and if you ever need to update the value of a variable, use let
a variable declared with const can't be re-declared again. variables declared with let can be re-declared (like the i in your for loop that gets updated from 0 to 1, 2, 3, 4, etc)
willfree108
@willfree108
Apr 14 2017 21:08
it's about scope
for(var i = 0;;){}
// i exist
for(let i = 0;;){}
// i is undefined
Ramesh
@rnallu
Apr 14 2017 21:08
@SkyCoder01 Hmm. ok
willfree108
@willfree108
Apr 14 2017 21:09
more exactly block-scoped
Ramesh
@rnallu
Apr 14 2017 21:12
@willfree108 Yeah, That i understood from documentation, thing is I dont understand from my code point of view.
willfree108
@willfree108
Apr 14 2017 21:12
could u show me ur code ?
rosswilk96
@rosswilk96
Apr 14 2017 21:14
Hi, for the tribute page do you have to use bootstrap to style it? I'd personally rather do it using CSS myself.
Ramesh
@rnallu
Apr 14 2017 21:15
@rosswilk96 You can do as your wish.
Its just for applying your knowledge to reach the targetted page user stories.
rosswilk96
@rosswilk96
Apr 14 2017 21:16
Ah okay thanks.
I presume if you do use bootstrap it's permitted to look up a list of bootstrap classes considering there's a few that haven't been covered beforehand?
Ramesh
@rnallu
Apr 14 2017 21:22
@rosswilk96 Yes, you can
willfree108
@willfree108
Apr 14 2017 21:26
re, well true in your code it's doesnt change anything, but it's a good practise if u dont want any surprise with some var u had already defined or redifined. U need to think less about where this variable come from and so less error @rnallu
willfree108
@willfree108
Apr 14 2017 21:32
It's also important for people coming from an another programming language since in most of them variable have the same behavior than let, block scoped.
Ramesh
@rnallu
Apr 14 2017 21:32
@willfree108 it had already given a surprise error. finally changed to let
Gulsvi
@gulsvi
Apr 14 2017 21:34
@rnallu I think you can see the same issue you were getting here:
for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);  // logs 10 over and over
  })
}
willfree108
@willfree108
Apr 14 2017 21:34
a masterpiece
Gulsvi
@gulsvi
Apr 14 2017 21:34
Change that var to let and you successfully get 0 -> 9 counted up because let rebinds the value of i on every loop
Ramesh
@rnallu
Apr 14 2017 21:38
@SkyCoder01 Hmm
got it
Chris
@bestintown23
Apr 14 2017 21:40
how to make my whole footer fit the page? http://codepen.io/bestintown23/pen/ybyOqb
willfree108
@willfree108
Apr 14 2017 21:41
great exemple @SkyCoder01
before let we needed to create a scope in order to achieve that
for (var i = 0; i < 10; i++) {
  (function(i){
    setTimeout(function() {
      console.log(i);  // logs 0,1,2,3  ...
    })
  })(i)
}
Gulsvi
@gulsvi
Apr 14 2017 21:42
Oh yeah, IIFE :) I haven't had to use those yet, but keep hearing about them.
Alan Saber
@Alan95
Apr 14 2017 21:44

hey guys, what is wrong with my code? "Missing letters"

}

how do i put my code in here
function fearNotLetter(str) {

  str = str.split("");
  var first = str[0];
  var last = str[str.length-1];

  first = first.charCodeAt();
  last = last.charCodeAt();
  for(var x = first; first <= first + str.length; x++) {
    for(var y = 0; y < str.length; y++) {
    var numb = String.fromCharCode(x);

      if(numb !== str[y]) {
       var adder = String.fromCharCode(x-1);
       str.splice(y, 0, adder);
       }
   }
    }
  str = str.join();
   return str;
  }
willfree108
@willfree108
Apr 14 2017 21:46
yeah, it was a tricky tips to create scope, it's a good thing we need less thanks to how great become js with es5/6 and fp
Bharat
@BharatKalluri
Apr 14 2017 21:46
hello! small help, why does the smallest common multiple of 1 and 5 become 60 instead of 5?
Gulsvi
@gulsvi
Apr 14 2017 21:48
@BharatKalluri It's because they want the smallest common multiple of 1,2,3,4, and 5. Not just 1 and 5.
Bharat
@BharatKalluri
Apr 14 2017 21:49
@SkyCoder01 , now i get it :-), thanks
CamperBot
@camperbot
Apr 14 2017 21:49
bharatkalluri sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1051 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 21:49
Good luck! I hated that one lol :p
Learned a lot though to be honest
Bharat
@BharatKalluri
Apr 14 2017 21:49
any suggestions??
Alan Saber
@Alan95
Apr 14 2017 21:50
sky u got an idea why i am getting the warning that i have an infiniteloop
Gulsvi
@gulsvi
Apr 14 2017 21:50
@BharatKalluri The Euclidean Algorithm is one way to get there
Calculate lowest common multiple by finding the Greatest Common Divisor
@Alan95 Sorry, I didn't see your code I'll take a look

I don't see why it is an infinite loop, but this is incorrect:

  first = first.charCodeAt();
  last = last.charCodeAt();

there should be a number in those parentheses

Maybe it is 0 automatically if you don't add a number
Tomas Onofre
@TomasOnofre15
Apr 14 2017 21:56
Hello, can anyone help me find out why the background image of my portfolio is repeating? http://codepen.io/TomasOnofre15/pen/bWNKEP
Alan Saber
@Alan95
Apr 14 2017 21:57
i return it for example and it gaves me a number @SkyCoder01
Gulsvi
@gulsvi
Apr 14 2017 21:57
@TomasOnofre15 use the background-repeat property to control that, for example: background-repeat: no-repeat;
@Alan95 I will try to debug it in codepen - I'm not so good at those :) but trying to get better lol
Tomas Onofre
@TomasOnofre15
Apr 14 2017 21:58
@SkyCoder01 I did and still seems not to be working?
Gulsvi
@gulsvi
Apr 14 2017 21:59
@TomasOnofre15 oh, I see it... use commas to separate classes .bgimg-1, .bgimg-2, .bgimg-3 {
Alan Saber
@Alan95
Apr 14 2017 21:59
ye dont worry @SkyCoder01 a few challenges are a real pain^^
Tomas Onofre
@TomasOnofre15
Apr 14 2017 22:00
@SkyCoder01 Thanks now it's working properly
CamperBot
@camperbot
Apr 14 2017 22:00
tomasonofre15 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1052 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 14 2017 22:01
@Alan95 Your .splice() code is making the string longer and longer
Alan Saber
@Alan95
Apr 14 2017 22:01
i tried to find a way to add the missing letter with slice
okay i just realized i only need to return the missing letter and not the full array
Alan Saber
@Alan95
Apr 14 2017 22:07

function fearNotLetter(str) {

  str = str.split("");
  var first = str[0];
  var last = str[str.length-1];

  first = first.charCodeAt(0);
  last = last.charCodeAt(0);

  for(var x = first; first <= first + str.length; x++) {
    for(var y = 0; y < str.length; y++) {
    var letter = String.fromCharCode(x);

   if(letter !== str[y]) {
       var adder = String.fromCharCode(x-1);
       return adder;
       }

   }
    }
 }

fearNotLetter("abce");
i dont know why the first letter ("a") is getting into the if-block even letter and str[y] are have the same value (a)
gulptech
@gulptech
Apr 14 2017 22:08
@Alan95 when do you modify first ?
Alan Saber
@Alan95
Apr 14 2017 22:08
@gulptech what do you mean by that
gulptech
@gulptech
Apr 14 2017 22:09
should this (first <= first + str.length) be x <= first + str.length
u test for first but add to x
Alan Saber
@Alan95
Apr 14 2017 22:09
oh
yea i didnt see that thanks @gulptech
CamperBot
@camperbot
Apr 14 2017 22:09
alan95 sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @gulptech |http://www.freecodecamp.com/gulptech
Alan Saber
@Alan95
Apr 14 2017 22:10
but why is the first letter getting into the first block even letter=a and str[y) = a?
gulptech
@gulptech
Apr 14 2017 22:13
looking now...be back in a few
rosswilk96
@rosswilk96
Apr 14 2017 22:14
Can an img-thumbnail not also be img-responsive? Or also why does an img-responsive nested inside an img-thumbnail div not work?
Alan Saber
@Alan95
Apr 14 2017 22:23
i did it. without a for loo pthough
Kiliffin James
@kiliffinjames
Apr 14 2017 22:35
Hello, some assistance. I want to add background image to my project from external source. Like a website or google search in Bootstrap. Please ow do I do that?
Marlon
@mblmarlon
Apr 14 2017 22:35
hey guys can someone help me? my image won't pop up
Jorge
@OrangeKulture
Apr 14 2017 22:36
@kiliffinjames use the src atribute and link it to the URL where the image is hosted
@mblmarlon your div .page1 doesnt have a closing tag, also, there is no content, so It won't display unless the div takes up some space
Marlon
@mblmarlon
Apr 14 2017 22:38
@OrangeKulture Thank you i'll do my best
CamperBot
@camperbot
Apr 14 2017 22:38
:cookie: 303 | @orangekulture |http://www.freecodecamp.com/orangekulture
mblmarlon sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
Jorge
@OrangeKulture
Apr 14 2017 22:39
sure thing, welcome
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:40
@OrangeKulture hey
Can you help me with temperature API?
Jorge
@OrangeKulture
Apr 14 2017 22:41
@MathematicsCoding sure .. whats up
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:41
Well this is what I have right now
I just want the word "Temperature" turn into either Celsius or fahrenheit from either of these button
So for temperature API can I use geolocation included?
Since they need to know where..
Kiliffin James
@kiliffinjames
Apr 14 2017 22:44
@OrangeKulture Thanks will try that. But can you please give specific example? will appreciate that greatly.
CamperBot
@camperbot
Apr 14 2017 22:44
kiliffinjames sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 14 2017 22:44
@kiliffinjames do you have your pen?
@MathematicsCoding checking..
Kiliffin James
@kiliffinjames
Apr 14 2017 22:45
@OrangeKulture yes here is the link https://codepen.io/kiliffinjames/pen/WjbzWz
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:46
@kiliffinjames do you want background image?
Kiliffin James
@kiliffinjames
Apr 14 2017 22:47
@MathematicsCoding Yes, want add it to the header area
Jorge
@OrangeKulture
Apr 14 2017 22:47
@MathematicsCoding what you can do is grab the lat and long from the geolocation(which you already have) and pass that into the API url by concatenation
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:47
body {background-image: url('...');
@OrangeKulture Yeah.
But then? Do I need to find some random weather link?
Jorge
@OrangeKulture
Apr 14 2017 22:48
you have to use an API call, then parse the JSON
kinda like they did in the challenges
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:49
@kiliffinjames You can also create a class then add it to div element
Jorge
@OrangeKulture
Apr 14 2017 22:49
i would include all of your code inside the document.ready function
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:49
okay
Kiliffin James
@kiliffinjames
Apr 14 2017 22:49
@MathematicsCoding Ok great. where i got confuse is picking the image from google image search
Jorge
@OrangeKulture
Apr 14 2017 22:50
then do the geolocation, just as you did .. and inside that very same function, call the API, either with the getJSON method or doing a XMLHttp call
it's best if you use an API that supports HTTPS .. Dark Sky is one
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:50
@kiliffinjames pick any image in google image search click "Full image" then copy the url
Then add it to url('url')...
@OrangeKulture I will use dark sky API
So "Forest request"?
forecast*
Jorge
@OrangeKulture
Apr 14 2017 22:53
@MathematicsCoding yeah the APIs usually give you the url you have to use to make the request to their server ..
something like this
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:54
So in forecast request I just have to copy that code?
Jorge
@OrangeKulture
Apr 14 2017 22:54
https://api.darksky.net/forecast/8bfe73adbee0a652190e6c8drd1e1d21/37.8267,-122.4233
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:54
oh i get it
Jorge
@OrangeKulture
Apr 14 2017 22:54
inside the $getJSON method, yeah .. you have to pass in some arguments, one of them is the URL for the request
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:55
so instead [lat],[lon]
Where would I add that link? inside document function?
Jorge
@OrangeKulture
Apr 14 2017 22:56
u have to call a getJSON method .. you can review the challenge called get JSON with jquery getJSON method
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:57
Will do that..
Jorge
@OrangeKulture
Apr 14 2017 22:57
basically it's something like this:
$.getJSON(url, function(json) {
 //some function
});
Saboor Malik
@MathematicsCoding
Apr 14 2017 22:57
ok!
Jorge
@OrangeKulture
Apr 14 2017 22:58
altho! now that I remember, i think Dark Sky has to be called with the get JSONP
cross domain AJAX request and what not
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:00
$.getJSON('https://api.darksky.net/forecast/8bfe73adbee0a652190e6c8drd1e1d21/[latLocation],[lonLocation]', function(json) {
  //
});
They have to be inside document function right?
Jorge
@OrangeKulture
Apr 14 2017 23:00
@MathematicsCoding yes and also inside the geolocation function
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:00
ok
Jorge
@OrangeKulture
Apr 14 2017 23:01
@MathematicsCoding i dont think thatll work tho, because u need to do a JSONP .. it's similar, although the syntax is a little different, you might want to google it
c0d0er
@c0d0er
Apr 14 2017 23:02
@toianw thanks
CamperBot
@camperbot
Apr 14 2017 23:02
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 498 | @toianw |http://www.freecodecamp.com/toianw
FlashHero
@FlashHero
Apr 14 2017 23:07
hi guys I'm trying to put text over an image and I got it to work by making the image positioned relative and paragraph absolute but when I set margin to 0 the paragraph moves to the top of the page which means that its relative to the window and I don't know how to make it to be relative to the image please help
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:07
@OrangeKulture ok Check JS code again
Nick Danvers
@Ravenor222
Apr 14 2017 23:09
hey guys! im trying to write some code in a doc and open it in chrome to see what it would look like, but I just see all the HTML i've written, I've been using codepen so I'm a noob when it comes to anything else =)
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:09
I forgot # so I added it
Nick Danvers
@Ravenor222
Apr 14 2017 23:12
I've answered my own question +)
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:13
lol
@SkyCoder01 You on?
Jorge
@OrangeKulture
Apr 14 2017 23:13
@MathematicsCoding the syntax is a little off on the API url, u have to concatenate with the '+' sign .. also, what u wanna do is something like this:
$(document).ready(function(){
  //geolocation function here(){
     // api call here and assign variables lat and long to the geolocation info(){
         //on click to something like:
         $('the element you will use to display the temperature').text(variable for C or F);
      }
  }
});
@FlashHero you have a pen we can take a look at? or code ?
Saboor Malik
@MathematicsCoding
Apr 14 2017 23:16
@OrangeKulture I already have var lat and lon for something else not the location
latLocation and lonLocation
Jorge
@OrangeKulture
Apr 14 2017 23:17
ummm .. ok ? i just meant lat and long are empty, you get the geoloaction info and store that info into the lat and long variables
yeah i saw that, it's basically a string .. there's not a lot use to that, altho it's not wrong
FlashHero
@FlashHero
Apr 14 2017 23:17
@OrangeKulture
<img src="https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg" id="theimg">
    <p>hello bro </p>
Pimtroja
@jukjik8
Apr 14 2017 23:18
I am working on my Tribute page project. Does anyone know to layer images on top of another in Bootstrap? BY far, I've tried position and z-index, the images are layered but they are not responsive. Anyone?
FlashHero
@FlashHero
Apr 14 2017 23:20

@OrangeKulture

#theimg {
    height: 600px;
    width: 700px;
    position: relative;
    margin: 0 auto;
    display: block;
    top: 10px;
}

p {
    position: absolute;
    top: 0px;
    margin-left: 0px;
}

this is the css