These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Jan 2017
Tyler Moeller
@TylerMoeller
Jan 24 2017 00:03
@mrs-coder What you're looking for is called Scroll Spy. Here are the instructions: http://getbootstrap.com/javascript/#scrollspy
John Nunns
@johnnunns
Jan 24 2017 00:06
hey guys just need a little help here:
function getCount(str) {
  var vowelsCount = 0;

  str.split(' ')
  switch (str){
    case "a": vowelsCount + 1;
    break;
    case "e": vowelsCount + 1;
    break;
    case "i": vowelsCount + 1;
    break;
    case "o": vowelsCount + 1;
    break;
    case "u": vowelsCount + 1;
    break;
    };

  return vowelsCount;
}
just need to return the vowel count in a given string
probably not using the split property correctly though
c0d0er
@c0d0er
Jan 24 2017 00:19
could anybody help for the following 2 questions?
var arr = [              
    [0,0,0]
];
var x=[...arr, [1,1,1,]]
console.log(x)//[ [ 0, 0, 0 ], [ 1, 1, 1 ] ]
x[0][0]=1;
console.log(x)//[ [ 1, 0, 0 ], [ 1, 1, 1 ] ]
console.log(arr)//[ [ 1, 0, 0 ] ]---> why use spread operator, the arr element is still changed?
var arr = [              
    [0,0,0]
];
var x=arr.concat([[1,1,1]]);
console.log(x)//[ [ 0, 0, 0 ], [ 1, 1, 1 ] ]
x[0][0]=1;
console.log(x)//[ [ 1, 0, 0 ], [ 1, 1, 1 ] ]
console.log(arr)//[ [ 1, 0, 0 ] ]---> why use concat, the arr element is still changed?
Tyler Moeller
@TylerMoeller
Jan 24 2017 00:40
@johnnunns Correct, .split(' ') will separate your string by spaces rather than characters. Use str.split('') instead. You could then to a str.split('').map to loop through the string and evaluate each character.
@c0d0er Not sure how to answer that question - I'd have to know the context.
c0d0er
@c0d0er
Jan 24 2017 00:43
@TylerMoeller there is no other contexts, you can just run, it will comes the result
Tyler Moeller
@TylerMoeller
Jan 24 2017 00:44
Are you asking which is better to use?
.concat() vs. spread operator for a case like that, I mean
@c0d0er Or are you asking why the original arr changes when you're only updating x?
c0d0er
@c0d0er
Jan 24 2017 00:48
@TylerMoeller yes
@TylerMoeller i am asking why the original arr changes when you're only updating x?
Tyler Moeller
@TylerMoeller
Jan 24 2017 00:49
In JavaScript arrays are objects and variables are references to objects. When you update the variable, you are also updating the object. To prevent it, you need to clone the array first.
@c0d0er
Ben Mayer Davis
@benmayerdavis
Jan 24 2017 00:51
has anybody else run into problems with adding icons to your document? I'm trying to use Font Awesome but the icons just won't show up in my document
c0d0er
@c0d0er
Jan 24 2017 00:52
@TylerMoeller thanks! how to clone? could you give me a simple pseudo code?
CamperBot
@camperbot
Jan 24 2017 00:52
:star2: 1388 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 24 2017 00:54
For a shallow copy, you can just do: var copyOfMyArray = myArray.slice(0);
John Nunns
@johnnunns
Jan 24 2017 00:57
without going into high level functions yet @TylerMoeller could you tell me where I'm going wrong here?
function getCount(str) {
var sum=0
var i = str.split(");
switch (i){
case 'a': sum + 1;
break;
case 'e': sum +1;
break;
case 'i': sum + 1;
break;
case 'o': sum + 1;
break;
case 'u': sum + 1;
break;
};

return sum

}
c0d0er
@c0d0er
Jan 24 2017 00:58
@TylerMoeller this is a really good one! thanks!
CamperBot
@camperbot
Jan 24 2017 00:58
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave tylermoeller points
John Nunns
@johnnunns
Jan 24 2017 01:00
It's something wrong in my switch statement it looks to me
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:00
@johnnunns str.split('') needs to be two apostrophes, not a double quote, for starters :)
John Nunns
@johnnunns
Jan 24 2017 01:00
I changed it back to str.split('') forgot to change before i copy pasted
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:00
But yes, your switch statement runs once against the array
John Nunns
@johnnunns
Jan 24 2017 01:00
yeah ^ :)
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:01
For example, say str='hello world';
You are doing:
  switch (['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']){
  case 'a': sum + 1;
  break;
  case 'e': sum + 1;
  break;
  case 'i': sum + 1;
  break;
  case 'o': sum + 1;
  break;
  case 'u': sum + 1;
  break;
};
If you don't want to use higher order functions, you can use a simple for() loop and evaluate each element returned from str.split('')
John Nunns
@johnnunns
Jan 24 2017 01:03
right
because case 'a' doesn't equal hello world split up
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:04
Long story short - don't use a switch
There are lots of options though and you could make it work with a switch statement if you have to, I just think it would be cleaner with a simple if it's a vowel, add 1 statement.
John Nunns
@johnnunns
Jan 24 2017 01:05
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=i; x<str.length; x++){


return sum

}
I'm just not sure how to say if one of those vowels inside the string equals a vowel
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:06
Start by trying to console.log each letter individually
Your for() loop needs to start at 0, then go to index 1, 2, 3 etc.
John Nunns
@johnnunns
Jan 24 2017 01:08
how will I tie it into the split then if i don't set something equal to i?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:08
You'll start at 0 and end when it's less than str.split('').length
Don't know how much of a hint you're looking for here ^^ that may be too much
John Nunns
@johnnunns
Jan 24 2017 01:10
right, so then I can just put i.length
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:10
Correct
John Nunns
@johnnunns
Jan 24 2017 01:11
now nest an if statement inside the for?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:11
Yes, test if it's a vowel, if so, add 1 to sum
John Nunns
@johnnunns
Jan 24 2017 01:12
still seems I'll run into the same problem as my switch
Salomon
@zarruk
Jan 24 2017 01:12
Does anybody know how to put the transcurrido div justified in the center (instead of starting all the way from the center to the left)? I mean, if not with justify-content: center, then how? http://codepen.io/zarruk/pen/VPWrWL?editors=1100
John Nunns
@johnnunns
Jan 24 2017 01:12
actually. let me try
Salomon
@zarruk
Jan 24 2017 01:13
Also, why is my stop button on top of the start one? Does anybody know how to put the transcurrido div justified in the center (instead of starting all the way from the center to the left)? I mean, if not with justify-content: center, then how? http://codepen.io/zarruk/pen/VPWrWL?editors=1100
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:13
Try to get it to console.log() each letter in the string first.
brb
John Nunns
@johnnunns
Jan 24 2017 01:15
like a console.log(i[0])?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:16
Yes
That's just my approach though - make sure the for loop is working as intended before adding logic
John Nunns
@johnnunns
Jan 24 2017 01:17
for loop is working good right now
where I'm running a blank though
I could write a lot of code right now but I'll ask before it doesn't work
an if statement like
if(i = "a") sum+1 ..... etc
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:18
A regular expression would be a little cleaner looking
John Nunns
@johnnunns
Jan 24 2017 01:18
I'll show you what I have
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i === 'a' || 'e' || 'i' || 'o' || 'u'){
return sum + 1;
};
};

return sum

}
I'm sure you see what I'm trying to do, I see why it's only returning 1 because the loop is completed
I'm just not sure how to rework it
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:21
In your for() loop, what does i equal?
John Nunns
@johnnunns
Jan 24 2017 01:23
str.split
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:23
Right, you want to compare against i[0], i1, i[2], etc..
Also, you will have to do if (i === 'a' || i === 'e' || etc...
John Nunns
@johnnunns
Jan 24 2017 01:24
seems like an absolute ton of code :)
because I'm not using higher level function I'm presuming
but ok
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:25
The next problem is that return will stop the for loop - so you just want to add, not return inside the loop
Yes, and not using a regex :)
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:25
Good evening. I am desperately seeking ideas as to why my Tweet This Quote button won't capture or tweet a quote from my Random Quote Machine. I have read the Twitter docs at length. I have tried Stack Overflow. I have asked at a Meetup. I'm out of ideas to try to get it to work. http://codepen.io/Mmgfrog/pen/egOxwq?editors=1010#0
John Nunns
@johnnunns
Jan 24 2017 01:25
so there's no way to make it so that it can naturally go from I[0] to the end of i
if I'm not doing a higher lvl function
like if( i[0]-i[end of i] === a | e | i | o | u) sum + 1
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:27
I'm not sure, their may be other methods out there, but a higher order function would definitely make it cleaner
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:27
What is happening is that I can generate a quote from my array, no problem. But once that's done, my Twitter button is un-clickable.
John Nunns
@johnnunns
Jan 24 2017 01:27
gotch
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:27
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:28
Or, on page refresh/load, I can get a Twitter window to open, but no quote inside.
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:29
@Mmgfrog Most people create a button with the same style as your twitter button and make it a hyperlink rather than using the Twitter widget code. The documentation can be confusing
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:30
@TylerMoeller Would that strategy still capture the quote? Thanks for your input
CamperBot
@camperbot
Jan 24 2017 01:30
mmgfrog sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1389 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ronit
@rfried99
Jan 24 2017 01:31
Hello campers! I could really use your help. I can't seem to get a background image to rend. Here is the code: http://codepen.io/rfried99/pen/QGYyXy
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:31
@Mmgfrog Yes, it should - you are getting the quote text from the page, so there isn't a scope issue to worry about.
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:32
@TylerMoeller OK I will redo that part without the widget. I appreciate it!
John Nunns
@johnnunns
Jan 24 2017 01:33
@TylerMoeller semi cheating here, because I know the word is 'abracadabra' but to save time i wrote this
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[0] === 'a'){
sum + 1;
} else if (i[3] === 'a'){
sum+1;
} else if (i[5] === 'a') {
sum + 1;
} else if (i[7] === 'a') {
sum + 1;
} else if (i[10] === 'a') { 
sum + 1;

};

};

return sum;

}
still returning zero though
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:34
@Mmgfrog Good luck - also, you will need to update your URL to use the web intent without the widget code:
https://twitter.com/intent/tweet?text=The text you want to tweet
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:34
@rfried99 Is the image you're trying to render in your header? Or is it supposed to be in some other part of the page?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:35
@johnnunns You'll need to add 1 to the existing sum variable: sum++ or sum = sum + 1
Melissa Guerrero
@Mmgfrog
Jan 24 2017 01:35
@TylerMoeller OK. That line looks familiar. Pretty sure I read through that in the docs. LOL
John Nunns
@johnnunns
Jan 24 2017 01:36
did the sum += 1
returned 11 :)
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:37
:)
Now to clean it up
At least you're adding to the original now
John Nunns
@johnnunns
Jan 24 2017 01:38
Well shoot, it's not only testing me on abracadabra haha
first lets clean it up though, why would it return 11?
Ronit
@rfried99
Jan 24 2017 01:40
@Mmgfrog thank you! It's supposed to be in the main
CamperBot
@camperbot
Jan 24 2017 01:40
rfried99 sends brownie points to @mmgfrog :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @mmgfrog |http://www.freecodecamp.com/mmgfrog
Matt Kieffer
@luna9
Jan 24 2017 01:41
Ronit// take a look at your CSS / main / you are linking to a local asset. Try pushing it up and use http
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:42
@johnnunns it gives 11 because it's looping through the array once for each letter in abracadabra and adding 1 every time because if (i[0] === 'a') is true every time
John Nunns
@johnnunns
Jan 24 2017 01:44
how do we stop that?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:44
You were closer before with your previous if(), but you need to be using i[x] instead: if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u') {
I could have been clearer here: :point_up: January 23, 2017 5:23 PM
Ronit
@rfried99
Jan 24 2017 01:45
@luna9 I feel silly for asking this, but what do you mean by "pushing it up"
John Nunns
@johnnunns
Jan 24 2017 01:46
haha you don't want to see what I've just coded. The worst code ever I typed if ( i[0] === a i[0] === e etc all the way to i[10] so far
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:46
lol, yeah, no need for that when you have x incrementing for you
Keep in mind though, that's only looking at lower-case vowels
Matt Kieffer
@luna9
Jan 24 2017 01:47
Look at the source for the CSS / header - you are linking to a hosted image, http. Not look at the image you are linking to in the CSS / main. It does not have http it has file / bla / bla .
John Nunns
@johnnunns
Jan 24 2017 01:47

@TylerMoeller function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};

};

return sum;

}

function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};

};

return sum;

}
that worked
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:48
:+1:
For lower-case vowels :)
John Nunns
@johnnunns
Jan 24 2017 01:48
could have have put str.tolowercase()?
could I*
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:48
yes, that works
Much better than more IFs
John Nunns
@johnnunns
Jan 24 2017 01:48
haha yes
is that the correct syntax?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:49
str.toLowerCase()
John Nunns
@johnnunns
Jan 24 2017 01:49
str.toLowerCase()
ok, just making sure nothing inside ()
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:49
Correct
John Nunns
@johnnunns
Jan 24 2017 01:50
function getCount(str) {
  return (str.match(/[aeiou]/ig)||[]).length;
}
that was the highest rated one btw
do you know what the ig mean?
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:51

This was my version:

function getCount(str) {
  var vowelCount = 0;
  str.split('').map(val => {if (val.match(/[aeiou]/i)) vowelCount++});
  return vowelCount;
}

I like the one you gave better

Matt Kieffer
@luna9
Jan 24 2017 01:51
@ronit looks like you just added http in from of that image link. That will not work. For testing, copy the same image URL that you are using in CSS / header and paste it in the CSS / main. This was you can see the image work. Then upload the image you want and link it.
Tyler Moeller
@TylerMoeller
Jan 24 2017 01:52
@johnnunns the ig means ignore case and evaluate all characters in the string (g = global)
Ronit
@rfried99
Jan 24 2017 01:55
@luna9 thx!
CamperBot
@camperbot
Jan 24 2017 01:55
rfried99 sends brownie points to @luna9 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @luna9 |http://www.freecodecamp.com/luna9
Salomon
@zarruk
Jan 24 2017 02:12
Can somebody help me here please? How do I do for the transcurrido div to be in the center of the circle? http://codepen.io/zarruk/pen/VPWrWL?editors=1010
John Nunns
@johnnunns
Jan 24 2017 02:25
@TylerMoeller still on?
JD Tadlock
@jdtdesigns
Jan 24 2017 02:48
@johnnunns need some help?
John Nunns
@johnnunns
Jan 24 2017 02:50
Yeah man! @jdtdesigns
You've already solved it though haha
sounds fun I'm sure! :)
but with the knowledge gained from the recent codewars problem I just did, I was hoping for some direction
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};

};

return sum;

}
so I just wrote this function in order to count the vowels
it works well, it could be condensed I saw from the other answers, but it works
Now, back to that prep course challenge, I'm hoping to apply this knowledge to it
JD Tadlock
@jdtdesigns
Jan 24 2017 02:52
@zarruk All the very high margins are screwing with your layout. I cleaned up some of the html and changed some css http://codepen.io/jdtadlock/pen/wgeyeB?editors=0100
John Nunns
@johnnunns
Jan 24 2017 02:53
Instructions from your teacher:
Write a function called "countAllCharacters".

Given a string, "countAllCharacters" returns an object where each key is a character in the given string. The value of each key should be how many times each character appeared in the given string.

Notes:
* If given an empty string, countAllCharacters should return an empty object.

var output = countAllCharacters('banana');
console.log(output); // --> {b: 1, a: 3, n: 2}

Starter Code :
function countAllCharacters(str) {
  // your code here
}
JD Tadlock
@jdtdesigns
Jan 24 2017 02:53
lol
still doesn't work i see
do you have a link to the challenge?
@johnnunns
John Nunns
@johnnunns
Jan 24 2017 02:54
so the code I just posted above was the answer to a codewars problem
different but similar
that one works to count vowels
but after doing that I thought why not give a go at the prep course one, which I have not written code for as yet
Coding Machine
@EphremL
Jan 24 2017 02:55
Hello, I am recruiting people to work a project with the skills of HTML and CSS also Javascript. If you think your the right canidate, join : https://gitter.im/Project-Awesome-1/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link
JD Tadlock
@jdtdesigns
Jan 24 2017 02:55
@johnnunns My answer is still failing or are you wanting to solve it yourself? @johnnunns
John Nunns
@johnnunns
Jan 24 2017 02:55
well when i looked at your answer, I realized I was pretty far from solving it myself
I may be a little closer now
I believed you used regex correct?
JD Tadlock
@jdtdesigns
Jan 24 2017 02:57
@johnnunns Yep
and .reduce()
and .map() i believe
John Nunns
@johnnunns
Jan 24 2017 02:58
you know what, let me rewatch those higher level function vids you showed me. and then also watch one on regex
JD Tadlock
@jdtdesigns
Jan 24 2017 02:59
for regex, you'll just google 'match blah blah' most of the time
John Nunns
@johnnunns
Jan 24 2017 03:00
is match and regex the same method?
JD Tadlock
@jdtdesigns
Jan 24 2017 03:00
i google regex all the time cause i'm not going to spend time figuring out the expression myself if i know it's been done 1000 times
.match() uses regex to 'match' a certain pattern in a string
Johnny
@JohnnyBizzel
Jan 24 2017 03:01
@zarruk I had a go at your code too: http://codepen.io/JohnnyBizzel/pen/qRjxWp
alexbuster
@alexbuster
Jan 24 2017 03:05
How can I import a picture from facebook can anybody help me please.
John Nunns
@johnnunns
Jan 24 2017 03:27
@jdtdesigns alright jd
gonna need some clarification :)
so I'm trying to apply map to my function
function countAllCharacters(str){
    var i = str.split('')
    var x = i.map(function(str){

    })
    return i
}

countAllCharacters('banana')
I'm really not sure if this is even close
alex can you save your facebook picture in facebook and then use that to make it your profile picture here @alexbuster
JD Tadlock
@jdtdesigns
Jan 24 2017 03:30
@johnnunns the argument in the .map() callback refers to the current value in the array as the map iterates through it
John Nunns
@johnnunns
Jan 24 2017 03:32
.map(countAllCharacters(str)?
is that what I should set it to
I think I'm confused on how to put map inside of a function
J.S.
@jspeda
Jan 24 2017 03:39
you wouldn't use map in this situation
map is for when you have an array, and you want to perform some type of transformation on that array
good video^
John Nunns
@johnnunns
Jan 24 2017 03:41
just watched it haha @jspeda
which higher order function would you use to solve the problem then?
J.S.
@jspeda
Jan 24 2017 03:42
you can just call .length on the string
and call it a day
or wait
John Nunns
@johnnunns
Jan 24 2017 03:43
nah it's way more complicated unfortunately :)
J.S.
@jspeda
Jan 24 2017 03:43
what are you trying to do exactly
John Nunns
@johnnunns
Jan 24 2017 03:44
count each character and separate them - example 'banana' becomes b - 1 a - 3 n - 2
var output = countAllCharacters('banana');
console.log(output); // --> {b: 1, a: 3, n: 2}
J.S.
@jspeda
Jan 24 2017 03:45
ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
JD Tadlock
@jdtdesigns
Jan 24 2017 03:45
@jspeda You can use .map() on an object or array
@johnnunns I used .reduce() and .map()
you have my code lol
John Nunns
@johnnunns
Jan 24 2017 03:46
man unfortunately I do not! closed out of chrome that day before bed and lost it :(
J.S.
@jspeda
Jan 24 2017 03:47
sorry to lead you astray, I should have asked what you were doing more specifically!
John Nunns
@johnnunns
Jan 24 2017 03:47
sorry bud @jdtdesigns
Ve Vanderpool
@VanAmoVe
Jan 24 2017 03:50
hey everyone! I am working on my tribute page and I am stuck! I cant figure out how to change the opacity of my background image without changing everything. Help! This is my code
body
{
background-image:url("https://static-wp.lonewolfmag.com/140717134225-frida-kahlo-photo-horizontal-large-gallery.jpg");
background-attachment:fixed;
background-size: cover;
background-repeat: no-repeat;
}
sorry didnt know it was going to post that way
JD Tadlock
@jdtdesigns
Jan 24 2017 03:53
@VanAmoVe You can just set the background on a pseudo element and then lower the opacity
Sunny Wong
@swong194
Jan 24 2017 03:53
@VanAmoVe try making a class and setting a opacity?
JD Tadlock
@jdtdesigns
Jan 24 2017 03:53
it won't affect the text then
Ve Vanderpool
@VanAmoVe
Jan 24 2017 03:53
@jdtdesigns what do you mean by a pseudo element?
i did try making a class and it just made the image go into the div and not the background
John Nunns
@johnnunns
Jan 24 2017 03:56
@jdtdesigns I took out the part of the code that changes '.' and '?' and the lower case replaces
Just so I can grasp it a bit more without overcomplicating
var string = 'banana';

function countAllCharacters(str) {

    str.split('')
    str.reduce(function(result, letter) {
      var regex = new RegExp('[^' + letter + ']', 'g');
      result[letter] = string.replace(regex, '').length;

      return result;
  }, {})
}

countAllCharacters(string)
var string = 'banana';

function countAllCharacters(str) {

    return str.split('')
    .reduce(function(result, letter) {
      var regex = new RegExp('[^' + letter + ']', 'g');
      result[letter] = string.replace(regex, '').length;

      return result;
  }, {})
}

countAllCharacters(string)
ok figured out it needs to look like this
the regexp looks a bit confusing did you say I should just look up match() and replace it with that?
@johnnunns It depends on the way you're coding it
John Nunns
@johnnunns
Jan 24 2017 04:02
what's the '[^' @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 04:04
The ^ matches everything except that character
Ve Vanderpool
@VanAmoVe
Jan 24 2017 04:04
@jdtdesigns thank you, I think I see what your are saying brb
CamperBot
@camperbot
Jan 24 2017 04:04
vanamove sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 04:04
@johnnunns
John Nunns
@johnnunns
Jan 24 2017 04:05
someone in the js help spot just solved it before you logged in. While your code passes 2/3 tests, this code passes all. @jdtdesigns
function countAllCharacters(str) {
  // your code here
    var array = str.split("")
  var object = {};

  if(str.length === 0) return object;
  else{
  for(var i = 0; i < array.length; i++){
    if(object[array[i]]) object[array[i]]++;
    else object[array[i]] = 1;
  }
  return object;
  }

}

var output = countAllCharacters('banana');
console.log(output);
can you spot a difference?
JD Tadlock
@jdtdesigns
Jan 24 2017 04:08
@johnnunns It's counting spaces lol
John Nunns
@johnnunns
Jan 24 2017 04:09
your code is? @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 04:11
nope
i removed all non word charactes
characters*
John Nunns
@johnnunns
Jan 24 2017 04:12
yeap works
JD Tadlock
@jdtdesigns
Jan 24 2017 04:12
John Nunns
@johnnunns
Jan 24 2017 04:13
doesn't run html
:) haha didn't see it's on the other side
oops
only completes 1 of 3 tests @jdtdesigns
well the third one should be an easy fix it returns and empty object if it's an empty string
Chadd Williams
@chaddd980
Jan 24 2017 04:16
hey, so i am trying to learn react, and i am making a tic tac toe game. anyway, this is the piece of code that i have for trying to check if there is a winner. when i test it, it hits my debugger when there is 3 in a row, so i know the function is running properly. but the alert will never appear. and when i type in this.checkForWinner in the console, it gives me undefined. I'm pretty lost and don't know what the issue is, or what to do
  checkForWinner() {
    var combos = [[0,1,2], [0,3,6], [0,4,8], [1,4,7], [2,5,8], [2,4,6], [3,4,5], [6,7,8]]
    combos.find(function(combo) {
      if(this.state.board[combo[0]] !== "" && this.state.board[combo[0]] === this.state.board[combo[1]] && this.state.board[combo[1]] === this.state.board[combo[2]]) {
debugger
        return this.state.board[combo[0]]
      } else {
        return false
      }
    }.bind(this))
  }

  componentDidUpdate() {
    if (this.checkForWinner()) {
      debugger
      alert("winner!!")
    }
  }
JD Tadlock
@jdtdesigns
Jan 24 2017 04:17
@johnnunns put this inside the function on the challenge :
return string.replace(/(.)(?=.*\1)/g, '')
    .split('')
    .reduce(function(result, letter) {
      var regex = new RegExp('[^' + letter + ']', 'g');
      result[letter] = string.replace(regex, '').length;

      return result;
  }, {})
i looked over the other person's code and they're not removing capital copies or non word characters
i over-complicated it basically :P
John Nunns
@johnnunns
Jan 24 2017 04:20
that's the one! :)
do you mind explaining it?
string.replace
you're replacing everying inside / /
why the parentheses?
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 04:21
all you need to know is this expression '/(.)(?=.*\1)/g' replaces any duplicate copies of characters in the string
so i'm creating a string that has no duplicates, then iterating through each character and getting the amount of duplicates from the original string using string.replace(regex, '').length
a simple regex to match everything except a single character is [^a] where 'a' is the character to leave out
the '/g' at the end just means to match as many as it can find in the entire string
without the 'g' it would just find the first then stop
JD Tadlock
@jdtdesigns
Jan 24 2017 04:28
make sense at all @johnnunns ?
John Nunns
@johnnunns
Jan 24 2017 04:29
that top expression is just a known one to do that? and I can find that where when I need to look it up?
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 04:29
any regex can be found pretty quickly with google :P
John Nunns
@johnnunns
Jan 24 2017 04:29
what would I type into google to find that?
JD Tadlock
@jdtdesigns
Jan 24 2017 04:29
search 'replace duplicates regex'
John Nunns
@johnnunns
Jan 24 2017 04:30
gotcha
JD Tadlock
@jdtdesigns
Jan 24 2017 04:30
like i said before, i'm not a master regex'er
i google a lot myself when the need rises
John Nunns
@johnnunns
Jan 24 2017 04:30
right on
ok cool so duplicate copies of characters
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 04:31
Hello guys, Any suggestion on how I can improve my tribute page ? https://codepen.io/aymohamed/pen/egWgmQ
John Nunns
@johnnunns
Jan 24 2017 04:31
don't we need those duplicates thought o count those?
to*
instead of replacing them?
I guess what I'm not seeing is the need for the replace code
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 04:32
Hello guys, Any suggestion on how I can improve my tribute page ? https://codepen.io/aymohamed/pen/egWgmQ
JD Tadlock
@jdtdesigns
Jan 24 2017 04:32
@johnnunns I basically through that in to thwart any potential errors and didn't even try it without it. It actually works without the replacement :P
John Nunns
@johnnunns
Jan 24 2017 04:33
yeah just tried it too :)
ok we just shortened our code! you're right though may not be error proof now :)
Chadd Williams
@chaddd980
Jan 24 2017 04:34
@aymohamed the picture of mandela isn't centered. thats one thing i'd fix
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 04:34
Ok. @chaddd980 , let me try
John Nunns
@johnnunns
Jan 24 2017 04:35
function countAllCharacters(string){

return string.split('')
    .reduce(function(result, letter) {
      var regex = new RegExp('[^' + letter + ']', 'g');
      result[letter] = string.replace(regex, '').length;

      return result;
  }, {})
}

countAllCharacters('banana')
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 04:37
@chaddd980 , how about this now? https://codepen.io/aymohamed/pen/egWgmQ
John Nunns
@johnnunns
Jan 24 2017 04:44
@jdtdesigns alright, since you pretty much walked me through that, I should be able to complete this one still maybe with a bit of help
thanks for everything so far though @jdtdesigns
CamperBot
@camperbot
Jan 24 2017 04:44
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 878 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
John Nunns
@johnnunns
Jan 24 2017 04:44
ok the next one - very similar
Instructions from your teacher:
Write a function called "countWords".

Given a string, "countWords" returns an object where each key is a word in the given string, with its value being how many times that word appeared in th given  string. 

Notes:
* If given an empty string, it should return an empty object.

var output = countWords('ask a bunch get a bunch'); 
console.log(output); // --> {ask: 1, a: 2, bunch: 2, get: 1}

Starter Code : 
function countWords(str) {
  // your code here
}
I'm going to not look at the code you just gave me and lets see if I can figure this out
JD Tadlock
@jdtdesigns
Jan 24 2017 04:45
@johnnunns lol, good luck ;)
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 04:51
Any hint on how I can link my html code with the CSS
?
John Nunns
@johnnunns
Jan 24 2017 04:51
function countWords(str) {
    str.split(' ')
    .reduce()
}
@jdtdesigns and that's how far I got. hows that for retention :) hahaha @jdtdesigns
reduce(function(sum, words)?
JD Tadlock
@jdtdesigns
Jan 24 2017 04:56
the first arg is the result or thing you'll be creating after the reduce is finished
so in your case an object
John Nunns
@johnnunns
Jan 24 2017 04:57
and not to go to far ahead, but the {}) at the end of the reduce is to pass it into those brackets correct?
JD Tadlock
@jdtdesigns
Jan 24 2017 04:57
words would be word because you're splitting the str into words and the second arg will refer to each 'word' in the split array
the {} at the end refers to the result arg
.reduce(result, word)
where result is {}
so the result starts as an empty object and you add to it in the function
John Nunns
@johnnunns
Jan 24 2017 04:58
gotcha, that's why with a sum reduce you can make the sum start at 0
JD Tadlock
@jdtdesigns
Jan 24 2017 04:59
correct
you can use this site to test your regex https://regex101.com/
John Nunns
@johnnunns
Jan 24 2017 05:00
ok I get to this point and now I'm thinking I need a regex method. What would I search?
or do I need to do any matching at all?
yeah I will actually I see it's going to pass a string that has the same word multiple times
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 05:03
you need to match words, but probably remove special characters like commas, question marks and such
John Nunns
@johnnunns
Jan 24 2017 05:04
I think once again they're going more basic than that
all lower case string sentences
JD Tadlock
@jdtdesigns
Jan 24 2017 05:04
they might not have any special characters
i'm just thinking of what fcc usually does lol
they do a ton of test cases
John Nunns
@johnnunns
Jan 24 2017 05:05
not here lol we're still "basic"
John Nunns
@johnnunns
Jan 24 2017 05:14
@jdtdesigns yikes man trying to find the regex match words in mdn and not finding anything only character matches
JD Tadlock
@jdtdesigns
Jan 24 2017 05:25
@johnnunns It's very easy to match words
/(myWord)/g would be the regex
John Nunns
@johnnunns
Jan 24 2017 05:26
haha why isn't that the first thing I see after searching regex match words?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:26
this is a good one for .match()
i just typed 'match a word regex' to test and it's the first response lol
@johnnunns
John Nunns
@johnnunns
Jan 24 2017 05:27
no way!
haha
google?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:28
yep
John Nunns
@johnnunns
Jan 24 2017 05:30
/\b($word)\b/i
does that one work?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:32
/(word)/g
easy
John Nunns
@johnnunns
Jan 24 2017 05:34
function countWords(str) {
    str.split(' ')
    .reduce(function(result, word){
        var regex = new Regexp(/word/g)

    },{})
    return result
how are we looking? @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 05:35
@johnnunns That won't work because the regex will only match the word 'word' ;)
you need to create the expression using a string and concat the word into it
new RegExp('expression', 'options')
options would just be 'g' for this one
John Nunns
@johnnunns
Jan 24 2017 05:36
g is global?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:36
and you don't need the two '/' in the expression string
yes
John Nunns
@johnnunns
Jan 24 2017 05:37
I'm really not sure JD I only put /word/g in there because you said haha
JD Tadlock
@jdtdesigns
Jan 24 2017 05:37
/(word)/g is the expression to match 'word'
Darth Skywalker
@adityaparab
Jan 24 2017 05:37

@johnnunns

g is global?

g is global as in it will match all occurances. Otherwise, Reg Ex only matches first occurance.

John Nunns
@johnnunns
Jan 24 2017 05:37
so that would only match one word
and we need it to match all the words
JD Tadlock
@jdtdesigns
Jan 24 2017 05:38
/(pickles)/g will match all the 'pickles'
Darth Skywalker
@adityaparab
Jan 24 2017 05:38

@johnnunns

so that would only match one word

No. That will only match a string word

it won't match anything else.
John Nunns
@johnnunns
Jan 24 2017 05:38
right sorry that's what I mean
so what regexp matches all the words together that match?
Darth Skywalker
@adityaparab
Jan 24 2017 05:39
the right regex for that is \w or [A-Za-z]
the w in \w should be small
capital W like \W will match nonword characters
John Nunns
@johnnunns
Jan 24 2017 05:40
var regex = new Regexp(\w, 'g')
JD Tadlock
@jdtdesigns
Jan 24 2017 05:40
so to create an expression using the RegExp object, you would do it like this
var regex = new RegExp('(' + word + ')', 'g')
John Nunns
@johnnunns
Jan 24 2017 05:41
aha...
JD Tadlock
@jdtdesigns
Jan 24 2017 05:41
which outputs /(myword)/g
John Nunns
@johnnunns
Jan 24 2017 05:41
what's the reason for ' ' around ()?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:43
you can't place the argument into the expression without string concatenation
otherwise it will just match the exact word you put in
that's the only reason you need to use the RegExp object
otherwise you could just use straight regex
John Nunns
@johnnunns
Jan 24 2017 05:45
function countWords(str) {
    str.split(' ')
    .reduce(function(result, word){
        var regex = new Regexp( '(' + word + ')', 'g')

    },{})
    return result
}
fair enough!
JD Tadlock
@jdtdesigns
Jan 24 2017 05:45
lookin good
but
John Nunns
@johnnunns
Jan 24 2017 05:45
ok so now we need to set the counter
JD Tadlock
@jdtdesigns
Jan 24 2017 05:45
result needs to be inide the callback
inside*
John Nunns
@johnnunns
Jan 24 2017 05:46
so I don't need to return result outside?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:46
result refers to object you are building inside the callback
it needs to be returned inside
John Nunns
@johnnunns
Jan 24 2017 05:47
I thought it automatically did that in reduce I guess..
alright so the counter. result[word] = regex something something something
JD Tadlock
@jdtdesigns
Jan 24 2017 05:48
result[word] = ....
;)
you're building result lol
result starts as {}
and inside the callback you build it with each value in the array passed to it
so you split the string and reduce is iterating over each word
each word is passed to the callback
and you do something with the word and add it to the result object
John Nunns
@johnnunns
Jan 24 2017 05:53
so the values that we want to put inside it is the regex amounts
regex.length?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:53
that's where .match() comes into play
you can use the regex you created to match the amount of those words ;)
John Nunns
@johnnunns
Jan 24 2017 05:54
haha I thought we matched them already?
JD Tadlock
@jdtdesigns
Jan 24 2017 05:54
the regex is just regex lol
it needs to be used somehow
John Nunns
@johnnunns
Jan 24 2017 05:55
ok fair enough. so how about result[word] = str.match(regex)?
.length
h1tag
@h1tag
Jan 24 2017 05:56
How do you create html elements using jquery? I found multiple ways on google, not sure which one is right.
John Nunns
@johnnunns
Jan 24 2017 05:57
it's definitely wrong after submitting haha, but a good try right
?
man I hope my learning curve is at least on par with everyone else, this stuff is hard... @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 05:57
@johnnunns str.match(regex).length should work ;)
John Nunns
@johnnunns
Jan 24 2017 05:57
ok let me show you the whole thing then maybe error is somewhere else
JD Tadlock
@jdtdesigns
Jan 24 2017 05:58
you need to return result below the .match
John Nunns
@johnnunns
Jan 24 2017 05:58
function countWords(str) {
    str.split(' ')
    .reduce(function(result, word){
        var regex = new Regexp( '(' + word + ')', 'g');
        result[word] = str.match(regex).length
      return result;
    },{})

}

countWords("hey whta updsls a dgfg s")
JD Tadlock
@jdtdesigns
Jan 24 2017 05:58
return str.split(' ').....
John Nunns
@johnnunns
Jan 24 2017 05:58
ohh
right
Ritvars
@RitvarsZ
Jan 24 2017 05:58
@fortMaximus I think that there is no wrong way. Use .append or .html or whatever fits your needs
John Nunns
@johnnunns
Jan 24 2017 05:59
Regexp is not defined
JD Tadlock
@jdtdesigns
Jan 24 2017 05:59
@fortMaximus var link = $('</ li>');
it's RegExp not Regexp
@johnnunns
John Nunns
@johnnunns
Jan 24 2017 06:00
passing 1 of 3!
pretty good! :) haha
h1tag
@h1tag
Jan 24 2017 06:01
@jdtdesigns then how do I add it to html file/code?
John Nunns
@johnnunns
Jan 24 2017 06:01
weird though man it's working just fine. But I'm failing at :
should_return_an_object_where_each_property_gives_a_word_in_the_string_with_its_number_of_appearances
should_return_an_object_empty_object_ifpassed
JD Tadlock
@jdtdesigns
Jan 24 2017 06:01
@fortMaximus sorry, that's 2.1
in version 3 just use $('h1');
@fortMaximus what are you trying to do?
@johnnunns Show me some test cases they are passing to your function
John Nunns
@johnnunns
Jan 24 2017 06:03
found the error not sure how to fix
'ask a bunch get a bunch' returns - { ask: 1, a: 3, bunch: 2, get: 1 }
so it's returning 'a' 3 times
JD Tadlock
@jdtdesigns
Jan 24 2017 06:04
correct
cause a is a word
and it's in there 3 times :D
o wait
2 times
h1tag
@h1tag
Jan 24 2017 06:04
@jdtdesigns I'm on the Wiki Viewer project, and I want add the links I get from the response (links to wiki pages) from the API to the html file as paragraphs or list elements
John Nunns
@johnnunns
Jan 24 2017 06:07
yeah weird right? @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 24 2017 06:12
@johnnunns Here's a way to overcome that bug
var regex = new RegExp('(' + word + ')', 'g'),
  amount = str.match(regex).length,
  output = amount < 2 ? amount : 
    word.length < 2 ? amount - 1 : amount;
John Nunns
@johnnunns
Jan 24 2017 06:12
how'd you go about figuring that out?
JD Tadlock
@jdtdesigns
Jan 24 2017 06:13
coded it out just now :D
John Nunns
@johnnunns
Jan 24 2017 06:13
I want to know the thought process behind it
JD Tadlock
@jdtdesigns
Jan 24 2017 06:13
did it work?
that's the first question lol
John Nunns
@johnnunns
Jan 24 2017 06:14
amount is not defined
JD Tadlock
@jdtdesigns
Jan 24 2017 06:15
result[word] = output;
John Nunns
@johnnunns
Jan 24 2017 06:17
function countWords(str) {
    if(str.length===0){
        return {};
    }
    return str.split(' ')
    .reduce(function(result, word){
        var regex = new RegExp( '(' + word + ')', 'g');
        output = amount < 2 ? amount : 
        word.length < 2 ? amount - 1 : amount;
        result[word] = output

      return result;
    },{})

}

countWords("ask a bunch get a bunch")
still says amount is not defined
JD Tadlock
@jdtdesigns
Jan 24 2017 06:18
@fortMaximus this is a typical way of first clearing the old results then adding the new:
var output = $('.output');

output.empty();

output.append(
  '<a href="wiki link">' +
    '<h3>' + data.title + '</h3>' +
    '<p>' + data.content + '</p>' +
  '</a>'
);
the append would be in the data iteration of course
you would loop through the returned object and append each link
@johnnunns You left this line out that goes above output = amount....
 amount = str.match(regex).length,
you don't need the if (str.length.....) line
the reduce will return an empty object if the string is empty automagically
John Nunns
@johnnunns
Jan 24 2017 06:23
that one works!
yeah added it just so I could pass one of the tests it wasnt passing
yeah still it actually doesnt work without if statement
{ '': 1 }
it's counting
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 06:24
Any hint on how I can better show "my copyright " and link my tribute page to an external website
JD Tadlock
@jdtdesigns
Jan 24 2017 06:25
have you looked up ternaries yet? @johnnunns
John Nunns
@johnnunns
Jan 24 2017 06:25
nope I will though
JD Tadlock
@jdtdesigns
Jan 24 2017 06:26
that's what i'm using to do that ? blah : something
those are called ternary expressions
it's just a shortcut way of doing if/else
condition ? true : false
that's how it works
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 06:28
Any hint on how I can better show "my copyright " and link my tribute page to an external website : https://codepen.io/aymohamed/pen/egWgmQ
JD Tadlock
@jdtdesigns
Jan 24 2017 06:28
lol @aymohamed
You can add padding and background to the copyright
and just add a hyperlink
<a href="https://google.com" target="_blank">Google</a>
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 06:29
does that mean I use a div class ?
JD Tadlock
@jdtdesigns
Jan 24 2017 06:30
just add a class to the div wrapping the copyright
and use that class in the css
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 06:30
Ok. Let me try that and I will get back to you. @ JD Tadlock. Thanks
@jdtdesigns, can the wrapper class have any name or just "container" etc?
JD Tadlock
@jdtdesigns
Jan 24 2017 06:34
it can be any name @aymohamed
they need to be space separated
<div class="my-class row another-class one-more"></div>
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 06:37
Ok. Thanks @jdtdesigns .I am doing that now
CamperBot
@camperbot
Jan 24 2017 06:37
aymohamed sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
h1tag
@h1tag
Jan 24 2017 06:38
@jdtdesigns Thank you for help and spending the time writing the code :smile: Although I didn't ask about the "clearing" part but you knew I'm gonna' ask about later, right? ;) :p
CamperBot
@camperbot
Jan 24 2017 06:38
fortmaximus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 880 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
h1tag
@h1tag
Jan 24 2017 06:39
and thanks @RitvarsZ
CamperBot
@camperbot
Jan 24 2017 06:39
fortmaximus sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
JD Tadlock
@jdtdesigns
Jan 24 2017 06:39
@fortMaximus right ;)
@johnnunns To fix the result outputting an object with a space, you can just return this inside the reduce callback instead
return str ? result : {}
whats wrong with my weather app
it was working f9 till yesterday
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 07:03
Please let me know what y'all think of this : https://codepen.io/aymohamed/pen/egWgmQ
Constructive criticism is welcomed
Suggestions for what I can add or subtract is highly appreciated
abhijith shenoy
@shenoyabhijith
Jan 24 2017 07:10
@aymohamed u could use some bullet points !
just my opinion
defc0de
@defc0de
Jan 24 2017 07:20
anybody around?
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:21
@defc0de !
defc0de
@defc0de
Jan 24 2017 07:21
oh hi there!
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:21
hey
defc0de
@defc0de
Jan 24 2017 07:21
do you guys experience crashing with the gitter app?
im on ubuntu 14 and it crashes most of the time
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:21
hmm no, ubuntu 16
defc0de
@defc0de
Jan 24 2017 07:22
hmm weird. ok thanks for letting me know!
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:23
welcome
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 07:25
@shenoyabhijith , Please take a look now after I added the bullet list
abhijith shenoy
@shenoyabhijith
Jan 24 2017 07:26
:+1:
@aymohamed
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:26
@aymohamed type="circle" ???
remove it
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 07:27
@VasileBotnaru , what should I replace with lol
there is no type "bullet"
Also @shenoyabhijith , there are some spaces that the circle/bullet appears and there is no content that I put. Is it possible to specify only for lines of the list that have content/
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:29
you could use an <ul>, but I'm talking about the type="circle" showing on the page
@aymohamed
right below the Timeline
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 07:30
I mean, @VasileBotnaru , do you think it looks better with no type "circle"
as in type = "none"?
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:32
@aymohamed It looks ok the way it is right now, you're the one who has to like it
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:32
Hey guys!
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:32
@katsuya245126 hi
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 07:32
lool
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:32
What's the basic template for a website? Like html>header>body>container, etc
I'm trying to use bootstrap grids but I don't know how to start
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:33
@katsuya245126 codepen or not?
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:33
codepen
trying to make a portfolio
made good progress but decided to start over
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:34
you don't have to add the html and head/body tags
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:34
oh yeah I know that
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:34
start with the div class container
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:34
just as an example
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:36
<html>
<head>
</head>
<body>

<div class="container">
...
</div>

</body>
</html>
@katsuya245126
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:38
so the container is everything you see on the page right?
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:39
the body is what you see on the page
Khang Duy
@KD158
Jan 24 2017 07:39
<body></body> is everything you see on page
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 07:39
but the container is in the body
@katsuya245126
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:50
why do you need a container?
Sung Guk Lee
@katsuya245126
Jan 24 2017 07:56
I just don't know what other containers I should make after <div class="container-fluid">
Joel Santos
@St3ps
Jan 24 2017 08:46

Hello everyone! Anyone out there could give a rather broad insight on how to approach building a website, a sort of landing page, in this manner?
http://www.buildinamsterdam.com/

The main features i'm intending to capture are the style of the page transitions.
I was refered I could approach this with Angular UI, but i'm looking for a second opinion

Kushagra Gour
@chinchang
Jan 24 2017 08:56
Since all of us are here to learn web development, I think this can prove super useful for everyone to tryout and experiment things as you learn them -> https://kushagragour.in/lab/web-maker
Its a web playground that even works offline!
Kasmin Fernandes
@Kasmin23
Jan 24 2017 09:07
hello everyone. Is this group particularly for a challenge or the whole programme?
8i meant this room
*i meant this room
Joel Santos
@St3ps
Jan 24 2017 09:09
@Kasmin23 I feel you can always ask things in a general way, even if it's not strictly related to what the room is about, but the content of concern in his room is the frontend part of the programme
so, css, html
js i guess although theres a room for that
Coy Sanders
@coymeetsworld
Jan 24 2017 09:23
heres a list of rooms with their general purpose @Kasmin23 https://forum.freecodecamp.com/t/free-code-camp-official-chat-rooms/19390
this chatroom is generally for FrontEnd project help, but you can ask other questions here it's just they may be better suited in other rooms.
Chris Cullen
@123xylem
Jan 24 2017 09:43

GET file://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css net::ERR_FILE_NOT_FOUND

Jquery%20Bootstrap%20JS%20CDNs.html:5 GET file://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css net::ERR_FILE_NOT_FOUND

Im getting these errors when I try to put a fontawesome icon in my website.. However I added the cdns provided in the head secton lie they tell me to.. How do i fix?

My code

<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>Gallery</title>
</head>
Sorin Ruse
@sorinr
Jan 24 2017 09:50
@123xylem look into this https://www.bootstrapcdn.com/ for linking bootstrap
@123xylem and to this https://www.bootstrapcdn.com/fontawesome/ for fontawesome
Chris Cullen
@123xylem
Jan 24 2017 09:52
@sorinr thanks.. i was usng an old fontawesome cdn
CamperBot
@camperbot
Jan 24 2017 09:52
:star2: 1133 | @sorinr |http://www.freecodecamp.com/sorinr
123xylem sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 24 2017 09:52
@123xylem and load first bootstrap and after fa
Chris Cullen
@123xylem
Jan 24 2017 09:52
@sorinr i have it loaded up now but they still wont show
Sorin Ruse
@sorinr
Jan 24 2017 09:53
are u on codepen?
or u develop locally on your pc? @123xylem
Chris Cullen
@123xylem
Jan 24 2017 09:58
@sorinr pc
@sorinr when i inspect the fontawesome it shows its there but doesnt really say anything
top 3 things under my font awesome inspection
element.style {
}
  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    user agent stylesheet
    i, cite, em, var, address, dfn {
    font-style: italic;
    }
Sorin Ruse
@sorinr
Jan 24 2017 10:01
@123xylem in order to see the fa working is to put an <i class="fa fa-icon name u want"></i> on the page
Chris Cullen
@123xylem
Jan 24 2017 10:02
@sorinr yeai have that
<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i> Image Gallery</h1>
it shows on the page when i inspect
but doesnt do anyting
Sorin Ruse
@sorinr
Jan 24 2017 10:03
@123xylem don't u see the fa-camera-retro icon?
Chris Cullen
@123xylem
Jan 24 2017 10:04
@sorinr no
the code is there
when i inspect it shows aswell
but the code does nothing
Sorin Ruse
@sorinr
Jan 24 2017 10:05
@123xylem go to devtools.->sources and look for the libs if they have been loaded
Chris Cullen
@123xylem
Jan 24 2017 10:16
reading them im not sure
unsplash is there
cant see fontawesome
Sorin Ruse
@sorinr
Jan 24 2017 10:18
@123xylem its hard to help you without seeing whats happening
Chris Cullen
@123xylem
Jan 24 2017 10:21
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Gallery</title>
</head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >


<style>
.fa fa-camera-retro{
    width:30px;
height:20px;}
    .standard{width: 100%;
        height:200px;}
        body{padding: 70px;}
        .jumbotron{
            background-color:#ccc;
            color:#2c3e50;
        }
        .navbar-inverse{
                        background:#2c3e50;

        }    
            .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
                        background:#2c3e50;
}
}
                .navbar-inverse .navbar-brand {
    color: white;
}
.navbar-inverse .navbar-nav>li>a {
    color: white;
}


</style>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-picture"></span> Images</a> 

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Contact</a></li>




      </ul> 
      <ul class="nav navbar-nav  navbar-right active">   <li ><a href="#">Login </a></li>
</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
<div class="jumbotron">

<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i>
  Image Gallery</h1>

 </div>


 <script   src="https://code.jquery.com/jquery-3.1.1.min.js" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr
That is my site
rap/3.3.7/js/bootstrap.min.js"</script>
</body>
</html>
@sorinr
With that at the end
alpox
@alpox
Jan 24 2017 10:22
Your link and style tags are outside of head.
You close it before
@123xylem
Move the </head> down to right before <body>
Chris Cullen
@123xylem
Jan 24 2017 10:23
@alpox thanks but no worky
CamperBot
@camperbot
Jan 24 2017 10:23
123xylem sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @alpox |http://www.freecodecamp.com/alpox
Sorin Ruse
@sorinr
Jan 24 2017 10:24
@123xylem this is wrong <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
alpox
@alpox
Jan 24 2017 10:24
Also your link to fontawesome is wrong: <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Try <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Sorin Ruse
@sorinr
Jan 24 2017 10:24
@123xylem and load it after bootstrap
Chris Cullen
@123xylem
Jan 24 2017 10:25
@sorinr @alpox YES
@sorinr @alpox thanks
CamperBot
@camperbot
Jan 24 2017 10:25
123xylem sends brownie points to @sorinr and @alpox :sparkles: :thumbsup: :sparkles:
:warning: 123xylem already gave alpox points
:warning: 123xylem already gave sorinr points
Chris Cullen
@123xylem
Jan 24 2017 10:25
I used the cdn that fontawesome had on their site i htink

Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Check out the examples to start using Font Awesome!
THATS WHAT I COPIED

not sure why it didnt work
or why there href is like that
alpox
@alpox
Jan 24 2017 10:26
@123xylem Well look at the path. They just wanted to tell you that you have to link to your own copy of the css on your disk
If you downloaded it
Riccardo M. Pesce
@RiccardoMPesce
Jan 24 2017 10:28
Guys I have a doubt.
When I select say img[src] in css, it will only select all the imgs which has the src attribute, right?
And not img without src
alpox
@alpox
Jan 24 2017 10:30
@RiccardoMPesce Yes
Riccardo M. Pesce
@RiccardoMPesce
Jan 24 2017 10:30
Thanks @alpox
CamperBot
@camperbot
Jan 24 2017 10:30
riccardompesce sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 747 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 24 2017 10:30
@RiccardoMPesce You can read more here: http://www.w3schools.com/css/css_attribute_selectors.asp
Riccardo M. Pesce
@RiccardoMPesce
Jan 24 2017 10:31
I better advise mdn over shay howe and w3schools
MDN is very coincisive
alpox
@alpox
Jan 24 2017 10:32
@RiccardoMPesce Right, i prefer MDN too. Because its specific and defining.
I heard here a lot though that people didn't understand MDN because they didn't have the terminology knowledge yet so it was too complicated.
So i sometimes show w3schools here :-)
Riccardo M. Pesce
@RiccardoMPesce
Jan 24 2017 10:33
@alpox I think mdn covers less topics. But it does cover them completely
alpox
@alpox
Jan 24 2017 10:33
@RiccardoMPesce MDN just covers the exact web API whereas w3schools etc. also define some other stuff around web
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:36
how much did it take you to finish your portfolio?
alpox
@alpox
Jan 24 2017 10:36
@VasileBotnaru I can only refer to what i heard here already, but its usually a lot :-) people invest a load and quite some days into their portfolio
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:37
@alpox what about you?
it feeld daunting
alpox
@alpox
Jan 24 2017 10:38
@VasileBotnaru I'm not of importance in a comparison since i did web dev for quite some time already and don't actually need ffc. I'm here to help only :-)
I did the portfolio though.
But i didn't take long time for details in styling etc. :D
@VasileBotnaru I know that development sometimes or even often can feel daunting. You'll have to get your head around that and not think too much about it. Just try to go on and find your resources, and when something doesn't work out, ask here :-)
Its even usual that it can happen that you're stuck with one single problem for some days when it works out badly
I think every programmer experiences that
I remember times when i went to work and changed only 1 line of code by the end of the day because i was just looking for the issue - changing code - rollback. change code - rollback.
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:42
@alpox The thing is I don't know how to approach the task, do I have to know how to do it and then start doing, do I have to do while I see others code, do I have to understand that code well from the beggining, or I can go on without thinking too much about it, that's my problem.
alpox
@alpox
Jan 24 2017 10:43
@VasileBotnaru Last one :-)
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:43
you mean i can borrow code, without understanding it?
just so i can perform the task?
@alpox
alpox
@alpox
Jan 24 2017 10:44
@VasileBotnaru Best thing, as i stated earlier, is that you just have to get going. Usually just learning doesn't help you that much because in development you ALWAYS have special cases. This means that you are always learning while coding.
Best and easiest to learn programming / web dev, is to just jump into something you want to do and do it, no matter you have no idea about the matter
@VasileBotnaru No, not borrowing code without understanding it. Rewrite code you find yourself (No copy), try to change the code in some ways and see the result. That makes you understand what it does
While doing so, just try to bend the code you find somewhere to do something else/similar. For that you can also look into other sources.
This is the way i'm always going when learning something new
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:47
@alpox I see, thank you
CamperBot
@camperbot
Jan 24 2017 10:47
vasilebotnaru sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 748 | @alpox |http://www.freecodecamp.com/alpox
@alpox what do you think about it?
alpox
@alpox
Jan 24 2017 10:49
@VasileBotnaru hmm hint: remove all the html, body, head tags from the html and put everything what was in head in the settings under stuff for head
It was right like this, but that's a codepen speciality that it doesn't like to have these tags in the html part because it creates them itself
@VasileBotnaru Its good so far :-) you can try to put the links more centered and sticking to the right
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:50
@alpox padding 10px?
alpox
@alpox
Jan 24 2017 10:51
@VasileBotnaru Hmm actually i think that its your title picture which makes the nav bar grow too much
The bootstrap navbar usually takes an exact height
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:52
@alpox wait I don't get it, you mean centered vertically?
alpox
@alpox
Jan 24 2017 10:53
@VasileBotnaru yes

What i see it that you mix quite some bootstrap and your own css @VasileBotnaru

If you want to go with bootstrap, you should probably stick to their exact rules and elements which work together. (It doesn't like mixes)
If you want to go with your own css (Makes your page more unique), you should better take out bootstrap and don't use their elements

Thats because bootstrap works best with its own elements.
The navbar they define, needs a setup like shown here:
http://getbootstrap.com/components/#navbar
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:56
so that would be the general rule - don't use your own css alongside with bootstrap?
alpox
@alpox
Jan 24 2017 10:56
@VasileBotnaru You can use it - if you know what you're doing.
I see lots of people having a hard time because of this here ^^
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:56
but since I'm a beginner - i don't - so don't
alpox
@alpox
Jan 24 2017 10:57
There are certain unspoken rules in bootstrap - like if you use an element with a class row - The next inner element should always be a col-x-x (Some column)
Otherwise you get some artifacts like unwanted padding/margins
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 10:58
well yeah they teach you this in the courses
i mean fcc
alpox
@alpox
Jan 24 2017 10:58
@VasileBotnaru I don't think i can tell you exactly what you'd better use. Its hard to make a page with all your own css as a beginner. But its also hard to stick to all rules bootstrap set you up.
@VasileBotnaru Well, they don't teach you everything about it there. Like they don't show you what exact structure a navbar needs
And where own css doesn't mess it up
Maybe someone else here could tell what's easier as a beginner here :-) i cannot tell much
Anyone? :-)
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:00
:D
alpox
@alpox
Jan 24 2017 11:00
Well, i think i would prefer own css... takes longer to create it but you learn much more
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:00
who's an expert but understand the point of view of a beginner?
:D
alpox
@alpox
Jan 24 2017 11:00
Yea thats always the thing ;-)
I'm not sure i can still see through the eyes of a beginner much
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:03
@alpox can you make a nav bar on your own, without help?
alpox
@alpox
Jan 24 2017 11:03
@VasileBotnaru Yup
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:03
@alpox cool
so you always have to use ul for it?
<ul>
alpox
@alpox
Jan 24 2017 11:04
Have to? No... You can do things in a lot of different ways usually
But for the navigation links, this is a good choice
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:04
I see
alpox
@alpox
Jan 24 2017 11:04
But usually, an ul defines an unordered list with bullet points
So without bootstrap or anything you have to care yourself about getting rid of the bullet points and make the elements show up horizontally instead of vertically
thats like
ul li {
   list-style-type: none; // No bullet points
   display: inline-block; // Show horizontally
}
As example
Usually there is also some margin or padding defined on the left side which one can get rid of etc.
You have to do such tweaks until you get there, but it teaches you some things on the way
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 11:07
@alpox thank you
CamperBot
@camperbot
Jan 24 2017 11:07
vasilebotnaru sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: vasilebotnaru already gave alpox points
alpox
@alpox
Jan 24 2017 11:07
So, i think i'll be afk for some time
@VasileBotnaru No problem :-)
David Griffin
@dgriffin123
Jan 24 2017 11:51
Anyone willing to help me with an issue that's driving me insane?
Sorin Ruse
@sorinr
Jan 24 2017 11:54
@dgriffin123 whats the issue?
David Griffin
@dgriffin123
Jan 24 2017 11:54
Should I give a link to my codepen so I can explain my problem easier?
@sorinr
Sorin Ruse
@sorinr
Jan 24 2017 11:55
@dgriffin123 better. this way i can see the behaviour
that's the project. I know its ugly as hell, but my images aren't lining up right. Several aren't even working on mobile either but just fixing the alignment of them would be awesome.
Sorin Ruse
@sorinr
Jan 24 2017 11:56
@dgriffin123 what is the problem?
David Griffin
@dgriffin123
Jan 24 2017 11:56
I looked up fixes for the alignment but they involved things much more advanced than what I've learned yet, using javascript etc
Muhammad Hasham
@MohammadHasham
Jan 24 2017 11:57
how can i execute a function on key press from keyboard without jquery using simple JS.
@sorinr
alpox
@alpox
Jan 24 2017 11:59
@MohammadHasham
someDOMObject.addEventListener("keypress", function() { ... });
Muhammad Hasham
@MohammadHasham
Jan 24 2017 11:59
@alpox so how can i get that which key is pressed?
alpox
@alpox
Jan 24 2017 12:03
@MohammadHasham
someDOMObject.addEventListener("keypress", function(keyEvent) { 
    if(keyEvent.key === 'a') {
        // Key a is pressed
    }
 });
Muhammad Hasham
@MohammadHasham
Jan 24 2017 12:04
@alpox Thanks
CamperBot
@camperbot
Jan 24 2017 12:04
mohammadhasham sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 749 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 24 2017 12:04
@MohammadHasham See this example:
https://codepen.io/pen/?editors=1010
Muhammad Hasham
@MohammadHasham
Jan 24 2017 12:04
@alpox Thanks
CamperBot
@camperbot
Jan 24 2017 12:04
mohammadhasham sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave alpox points
alpox
@alpox
Jan 24 2017 12:04
@MohammadHasham Np :-)
Sorin Ruse
@sorinr
Jan 24 2017 12:04
@dgriffin123 take a look at the example . this is what u want?
David Griffin
@dgriffin123
Jan 24 2017 12:07
Yeah that seems to be what I wanted. They're all the same height.
img {
padding: 15px;
max-height: 216px;
margin: 0 auto;
}
is this the only change that had to be made?
Sorin Ruse
@sorinr
Jan 24 2017 12:10
@dgriffin123 yes. because the last image was smaller height then the othersi put max-height: 216px as the last one. you can also add class="img-responsive" to each of your img tags so they scale well on lower screens
David Griffin
@dgriffin123
Jan 24 2017 12:11
hmm. Well I really appreciate your help with that. I feel like I get stuck on the dumbest things.
Sorin Ruse
@sorinr
Jan 24 2017 12:12
@dgriffin123 its quite ok for the beginning
Milos Ratkovic
@Shadow032
Jan 24 2017 12:19
guys anyone knows a good weather API, I made a weather app like a week ago , and now i got an email from OpenWeather that my API got blocked.
Sorin Ruse
@sorinr
Jan 24 2017 12:21
@Shadow032 there is also apixu.com, wunderground and some others. as soon as i remember i'll tell you
Milos Ratkovic
@Shadow032
Jan 24 2017 12:22
@sorinr thanks, i'll google it out.
CamperBot
@camperbot
Jan 24 2017 12:22
shadow032 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1134 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 24 2017 12:22
@Shadow032 welcome
David Griffin
@dgriffin123
Jan 24 2017 12:23
@sorin I hate to bother you, but I can't seem to figure out how to fix these issues. Your solution fixed the height, but there are a couple that have different widths. I tried messing with max-width but I can't figure out why it isn't getting the effect I want.
It's very frustrating
Sorin Ruse
@sorinr
Jan 24 2017 12:27
@dgriffin123 no need for max-width because you have the imgs placed into <div class="col-xs-6"> so they take the full width of of this col-xs-6 div. to mee they seem to have same width and height
David Griffin
@dgriffin123
Jan 24 2017 12:29
the only one with a different width was the Dark Souls pic, it is slightly wider than the one under it
Maybe that's just my display or something
Jarvis1247
@Jarvis1247
Jan 24 2017 12:31
m getting this: CORS header ‘Access-Control-Allow-Origin’ missing
What to do?
Sorin Ruse
@sorinr
Jan 24 2017 12:32
@dgriffin123 no no. u r right. the breaking bad is less wider then all the others. let me think
David Griffin
@dgriffin123
Jan 24 2017 12:32
Honestly though @sorin I think I need to just move past it lol. I've been obsessing over those damn pictures not being exactly 100% the same I haven't moved on in like 2 days lol
Jarvis1247
@Jarvis1247
Jan 24 2017 12:33
any solution to my prob??
Sorin Ruse
@sorinr
Jan 24 2017 12:34
@dgriffin123 no. just add width: 100%; in css to img selector
@Jarvis1247 can u share the pen link to see what causing it?
David Griffin
@dgriffin123
Jan 24 2017 12:36
@sorinr Such an easy fix, can't believe I didn't think of that. Thank you again
CamperBot
@camperbot
Jan 24 2017 12:36
dgriffin123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1135 | @sorinr |http://www.freecodecamp.com/sorinr
Jarvis1247
@Jarvis1247
Jan 24 2017 12:36
i am working on my text editor @dgriffin123
Sorin Ruse
@sorinr
Jan 24 2017 12:37
@dgriffin123 yes but now you have the same problem of height with dexter img. try to find another one bigger then that
David Griffin
@dgriffin123
Jan 24 2017 12:38
@sorin I actually decided to change it to 2 rows instead of 3, and all the images seem to look good
Muhammad Hasham
@MohammadHasham
Jan 24 2017 12:39
which one is better document.getElementById('') or document.quereySelector()
@sorinr
Sorin Ruse
@sorinr
Jan 24 2017 12:40
@dgriffin123 nope . they are all same width but on 2nd row the first and the last are shorter in height
@MohammadHasham getbyid if the tag has an id.
David Griffin
@dgriffin123
Jan 24 2017 12:42
jeez. you're right. How do you avoid these problems? Should I crop images before I even use them?
Sorin Ruse
@sorinr
Jan 24 2017 12:43
@dgriffin123 yep. better to have them same dimensions
David Griffin
@dgriffin123
Jan 24 2017 12:44
@sorinr I see. 'll have to do that, this is too much of a hassle. Thank you so much for the help and for being patient.
CamperBot
@camperbot
Jan 24 2017 12:44
dgriffin123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: dgriffin123 already gave sorinr points
Sorin Ruse
@sorinr
Jan 24 2017 12:45
@dgriffin123 np
Muhammad Hasham
@MohammadHasham
Jan 24 2017 12:58
<p onclick = "name()" id="para">
Hello
</p>
$(document).ready(function(){
 function name(){
  document.getElementById("para").innerHTML = "wow";
  }
});
why is it not working?
@sorinr
Sander Berntsen
@sbxn14
Jan 24 2017 13:01
I know this is cheating but can someone answer something for me? I got super lost on what to do so I took a look at the example but in the example it refers to data alot in the js/angular. I dont see Data defined anywhere? what is it referring to? http://codepen.io/freeCodeCamp/pen/bELRjV
Sorin Ruse
@sorinr
Jan 24 2017 13:03
@MohammadHasham you don't need the doc.ready just function name(){}
Muhammad Hasham
@MohammadHasham
Jan 24 2017 13:03
@sorinr Thanks
CamperBot
@camperbot
Jan 24 2017 13:03
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @sorinr |http://www.freecodecamp.com/sorinr
Sander Berntsen
@sbxn14
Jan 24 2017 13:03
as I now know how to actually refer to my ip api and my weather api I still dont know what its doing exactly, and I'd like to know that so I can learn from it
Sorin Ruse
@sorinr
Jan 24 2017 13:06
@sbxn14 the ip api callreturns you the city that you are using later in constructing the url for the weather api to retrieve thge weather for that city
Sander Berntsen
@sbxn14
Jan 24 2017 13:07
so the $scope.data refers to the api's?
Sorin Ruse
@sorinr
Jan 24 2017 13:12
@sbxn14 the $scope.data its like defining local variables available only for ng-app. this is the way you refer variables in an angular app
Sander Berntsen
@sbxn14
Jan 24 2017 13:14
yea I knew that but I was just wondering as it referred to data.something and I didnt see data defined anywhere
Sorin Ruse
@sorinr
Jan 24 2017 13:16
@sbxn14 with this $scope.Data = {}; its like var myvarr = {}; then you add keys and values to it like myvarr.city = responsefromapi.city and so on
Sander Berntsen
@sbxn14
Jan 24 2017 13:17
thanks @sorinr
CamperBot
@camperbot
Jan 24 2017 13:17
:star2: 1137 | @sorinr |http://www.freecodecamp.com/sorinr
sbxn14 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sander Berntsen
@sbxn14
Jan 24 2017 13:17
oo im dumb
Sorin Ruse
@sorinr
Jan 24 2017 13:18
@sbxn14 welcome
Bikal Khawas
@bikalkhawas
Jan 24 2017 13:30
Hello, I'am working in local weather app and in calling weather API I found both min and max temperature the same, here is my codepen link http://codepen.io/bikal/pen/OWmJMj?editors=1010 Any help will be appreciated, thank you.
bwongcodes
@bwongcodes
Jan 24 2017 13:41
Hello, just wondering if anyone knew how i could make my text non transparent
https://codepen.io/bwongcodes/pen/egROdR
appreciate the help, thankyou!
Sorin Ruse
@sorinr
Jan 24 2017 13:42
@bikalkhawas if you console.table(apiData) you will see they are slightly different but because of the mathround function you see same values
Bikal Khawas
@bikalkhawas
Jan 24 2017 13:54
@sorinr on calling API directly in browser also raw data looks the same.Looks like there is no need to mention min and max temperature.
Sorin Ruse
@sorinr
Jan 24 2017 13:55
@bikalkhawas for me there is only 0.6 degree of difference
Bikal Khawas
@bikalkhawas
Jan 24 2017 13:56
:smile:
Sorin Ruse
@sorinr
Jan 24 2017 13:58
@bwongcodes use background: rgba(0,0,0,.5); instead of opacity: 0.5
bwongcodes
@bwongcodes
Jan 24 2017 13:59
Thankyou @sorinr
CamperBot
@camperbot
Jan 24 2017 13:59
:star2: 1138 | @sorinr |http://www.freecodecamp.com/sorinr
bwongcodes sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 24 2017 14:01
@bwongcodes welcome
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:15
var key = document.querySelector("audio[data-key=${x}]");
why is this not working my html is
<audio data-key="65" src="E:\Web Development\Javascript 30\Drumkit Challenge\boom.wav"></audio>
@sorinr
anyone there?
Clyde Lobo
@oppiniated
Jan 24 2017 14:20
@MohammadHasham is x a variable?
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:20
yeah
from a function
/** Javascript File **/
document.addEventListener("keydown",function(x){
var key = document.querySelector("audio[data-key=x]");
console.log(key);
});
@oppiniated
Clyde Lobo
@oppiniated
Jan 24 2017 14:21
ok then replace the " with the `
Philipp Scholz
@philipp32
Jan 24 2017 14:21
Hey, my function doesn't get triggered when I press the enter key? Why is that?
$('#search-bar').bind("enterKey",function(e){
  $('#random-button').fadeOut("slow");
  $( '#search-bar').animate({
    top: "-200px"    
  }, 1000, function() {
   // Animation complete.
 });

});
$('#search-bar').keyup(function(e){
  // if enter is pressed
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }

});
Clyde Lobo
@oppiniated
Jan 24 2017 14:21
Since you are doing a string interpolation and need to use instead of"` for it
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:22
it is returning me a null
@oppiniated
This message was deleted
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:24
i am still struggling
Clyde Lobo
@oppiniated
Jan 24 2017 14:24
var key = document.querySelector(`audio[data-key=${x}]`);
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:24
can you tell me where am i doing it wrong
var key = document.querySelector("audio[data-key='${x}']");
@oppiniated
Clyde Lobo
@oppiniated
Jan 24 2017 14:25
@MohammadHasham check my previous chat
Sorin Ruse
@sorinr
Jan 24 2017 14:25
@MohammadHasham what do you want to get into the key var?
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:25
i have written that provided by you but it says that it is not a valid queryselector
@sorinr i want to get the keycode and use that further.
Sorin Ruse
@sorinr
Jan 24 2017 14:26
@MohammadHasham a valid selector is like "audio[data-key]"
Muhammad Hasham
@MohammadHasham
Jan 24 2017 14:27
actually i have set some data-keys in audio in html so i want to get the desired keypress to make it equal to data-key
@sorinr
i figured that out!
@oppiniated @sorinr Thanks
CamperBot
@camperbot
Jan 24 2017 14:29
mohammadhasham sends brownie points to @oppiniated and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 520 | @oppiniated |http://www.freecodecamp.com/oppiniated
:star2: 1139 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 24 2017 14:33
@MohammadHasham and if you wanted the value of data-key you needed key.dataset.key
Nathan
@Nathandim
Jan 24 2017 14:37
Can someone help me with something about the weather app?
https://codepen.io/nathandim/pen/JENvXE is there a way to get the values of latitude and longitude outside of the callback function?
Sorin Ruse
@sorinr
Jan 24 2017 14:46
@Nathandim you can do it like example
Jianhao Tan
@jaanhio
Jan 24 2017 14:48
Dear all, i am attempting the "Build a personal portfolio webpage" challenge. may i know if it is actually possible to build that with html/css/bootstrap alone?
Nathan
@Nathandim
Jan 24 2017 14:48
ohh nice idea
that makes the code a lot more cleaner
thank you @jaanhio
CamperBot
@camperbot
Jan 24 2017 14:49
nathandim sends brownie points to @jaanhio :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @jaanhio |http://www.freecodecamp.com/jaanhio
Jianhao Tan
@jaanhio
Jan 24 2017 14:51
@Nathandim what are you thanking me for? haha
Nathan
@Nathandim
Jan 24 2017 14:52
lol dude
thank you @sorinr
CamperBot
@camperbot
Jan 24 2017 14:52
nathandim sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1140 | @sorinr |http://www.freecodecamp.com/sorinr
Nathan
@Nathandim
Jan 24 2017 14:53
I suck at multitasking
if only my family could understand :D
J.S.
@jspeda
Jan 24 2017 14:56
@jaanhio yes you don't need javascript
Vasile Botnaru
@VasileBotnaru
Jan 24 2017 15:04
@jaanhio you're still here?
Sander Berntsen
@sbxn14
Jan 24 2017 15:07
http://codepen.io/sbxn14/pen/apmJJQ implemented the most important features of my weather app but how do I connect icons to it? I inserted a CSS file that adds weather icons but I got no clue on how to use them
also is bootstrap a must?
Hello911
@Hello911
Jan 24 2017 15:14

// Setup
var testString = "There are 3 cats but 4 dogs.";

// Only change code below this line.

var expression = /\d+/g;  // Change this line

// Only change code above this line

// This code counts the matches of expression in testString
var digitCount = testString.match(expression).length;
Why is the test returning 2? Does /\d+/g count the # of numbers in testString?
Moisés Man
@moigithub
Jan 24 2017 15:21
u should start learning about regex www.regexone.com
then regex methods mdn.io/match
and finally length property mdn.io/array.length
@Hello911
Hello911
@Hello911
Jan 24 2017 15:22
@moigithub I know how to use array.length.
Moisés Man
@moigithub
Jan 24 2017 15:23
...then 1 less thing to check :)
Hello911
@Hello911
Jan 24 2017 15:24
But thankk you for the links
Joshua Steele
@joshuapsteele
Jan 24 2017 15:35
@TylerMoeller Thanks for the <main> tip. How do I keep it centered?
CamperBot
@camperbot
Jan 24 2017 15:35
joshuapsteele sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Joshua Steele
@joshuapsteele
Jan 24 2017 15:36
@TylerMoeller nvm. I figured it out. Still had my col-md-8 div in place. I removed it and it fixed the problem.
Unknown
@Unknownhezipaz
Jan 24 2017 15:37
echo "<p><b>".strtoupper($thearrayprod['prodName'])."</b></center>";
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
CamperBot
@camperbot
Jan 24 2017 15:37
@majedmahmood27 said: echo "<p><b>".strtoupper($thearrayprod['prodName'])."</b></center>";
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
Tyler Moeller
@TylerMoeller
Jan 24 2017 15:40
@majedmahmood27 We don't learn PHP at Free Code Camp
Sorin Ruse
@sorinr
Jan 24 2017 15:43
@sbxn14 weater icons support the openweather api and have special mapping for that. here some info:https://erikflowers.github.io/weather-icons/api-list.html
Sander Berntsen
@sbxn14
Jan 24 2017 15:45
@sorinr alright sweet but how the hell do iuse that
as I just tried sth on my own http://codepen.io/sbxn14/pen/apmJJQ and it doesnt work at all
Tyler Moeller
@TylerMoeller
Jan 24 2017 15:48

@joshuapsteele Happy to help! Good luck :+1:
I find this to be a good outline for the portfolio:

<header>
  <nav></nav>
</header>
<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

The nav can also go above the <header> if you want it fixed to the top of your page.

Sorin Ruse
@sorinr
Jan 24 2017 15:48
@sbxn14 simple. <i class="wi wi-owm-"+json.condition code you get from the api response></i>
Sander Berntsen
@sbxn14
Jan 24 2017 15:52
uhm
Nathan
@Nathandim
Jan 24 2017 15:52
@TylerMoeller Are you using sections for things like projects and bio?
Sander Berntsen
@sbxn14
Jan 24 2017 15:52
do i have to do that for every single one? for every single code?
cant i make a function that does that automatically?
Adel
@AdelMahjoub
Jan 24 2017 15:53
....
Nathan
@Nathandim
Jan 24 2017 15:53
to append classes in i elements? I don't see why not
Tyler Moeller
@TylerMoeller
Jan 24 2017 15:53
@Nathandim Yes, for me at least, it helps organize the content in the page.
Nathan
@Nathandim
Jan 24 2017 15:53
@TylerMoeller Cool, will check it out :)
Sorin Ruse
@sorinr
Jan 24 2017 15:54
@sbxn14 not for single one the i tag will be composed automathically when the api call is made. you just render on page the composed i tag
Sander Berntsen
@sbxn14
Jan 24 2017 15:55
i get what you're saying but i got 0 clue on how to do to it lmao
Tyler Moeller
@TylerMoeller
Jan 24 2017 15:55
@johnnunns Sorry, stepped away. I think you solved it already, but this is my approach for comparison:
function countAllCharacters(string) {
  var charCount = {};
  string.split('').map(val => {
    charCount[val] = (charCount[val] || 0) + 1;
  });

  return charCount;
}
Adel
@AdelMahjoub
Jan 24 2017 15:56
you are using angular and don't know how to do that ?
Sander Berntsen
@sbxn14
Jan 24 2017 15:57
im using angular just cause I know its handy to place things in the html that auto generate
Tyler Moeller
@TylerMoeller
Jan 24 2017 15:57
@johnnunns By the way, there's another room for codewars. Some of us are over there too: https://gitter.im/Codewars/codewars.com
Sander Berntsen
@sbxn14
Jan 24 2017 15:57
but im far from experienced on it xd
with the {{}} tags n all
yoni chanowitz
@yonichanowitz
Jan 24 2017 16:08
anyone did "Build a random Quote Machine" ? where is he getting the quotes from? there is no way he manually wrote those in
Tyler Moeller
@TylerMoeller
Jan 24 2017 16:08
@yonichanowitz They are from an API that provides quotes for you.
Nathan
@Nathandim
Jan 24 2017 16:11
@yonichanowitz Some people just copy-paste quotes in an array but I would advise against it. I feel like the goal for that exercise is to get our feet wet in API calls. The most commonly used one is the one found at http://forismatic.com/en
yoni chanowitz
@yonichanowitz
Jan 24 2017 16:25
WTF, i was working on this for months and it says nothing about using API's!!!
where do i get these apis?
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 24 2017 16:28
@yonichanowitz Lots of them out there to choose from: https://www.google.com/search?q=random+quotes+api
I'd recommend choosing one that works with HTTPS. You can also just build your own array of quotes - not a requirement to use an API.
Joshua Steele
@joshuapsteele
Jan 24 2017 16:29
For the Personal Portfolio, what's the easiest way to go about adding basic social media buttons?
Tyler Moeller
@TylerMoeller
Jan 24 2017 16:30
@joshuapsteele Most people use Font Awesome: http://fontawesome.io/icons/
yoni chanowitz
@yonichanowitz
Jan 24 2017 16:31
it says i need AJax @TylerMoeller . any good places to learn that?
Tyler Moeller
@TylerMoeller
Jan 24 2017 16:33
@yonichanowitz $.getJSON is a simplified way to use Ajax, we get a basic introduction here: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
A more detailed description is here: https://api.jquery.com/jQuery.getJSON/
There are lots of youtube tutorials out there too
I learned it through trial and error after reading through the jQuery documentation, so don't really have any recommendations aside from the above :/
JD Tadlock
@jdtdesigns
Jan 24 2017 16:38
Sorin Ruse
@sorinr
Jan 24 2017 16:57
@sbxn14 here your icon showing solution
Kevin Robertson
@kevnbot
Jan 24 2017 17:26
Hello everyone, Im on the "build a random quote machine" challenge and am having trouble figuring out how the tweet button will tweet the quote that is showing. Can someone point me in the right direction?
J.S.
@jspeda
Jan 24 2017 17:33
have you checked the twitter docs?
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:33
thanks @TylerMoeller
CamperBot
@camperbot
Jan 24 2017 17:33
yonichanowitz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1393 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:33
thanks @jdtdesigns . my firewall is blocking it, but i assume its an informative video
CamperBot
@camperbot
Jan 24 2017 17:33
yonichanowitz sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 881 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Kevin Robertson
@kevnbot
Jan 24 2017 17:35
Yes @jspeda I have added the Tweet button and can do basic things, but im unsure how to tweet the current quote that is being shown.
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:37
@kevnbot , according to what @TylerMoeller just told me, if you have a JSON object, you can write a function to change the quote into text when a user clicks a link, that will put it out as a tweet. .. i think
Kevin Robertson
@kevnbot
Jan 24 2017 17:37
hmm ok. ill explore that @TylerMoeller
sorry, @yonichanowitz
J.S.
@jspeda
Jan 24 2017 17:38
i don't remember exactly how that api works but you'll need to save the quote into a variable and probably concatenate it into the URL string that is triggered when you click the share button @kevnbot
Kevin Robertson
@kevnbot
Jan 24 2017 17:39
Ok thats making sense, Ill try that
JD Tadlock
@jdtdesigns
Jan 24 2017 17:45
@kevnbot It may take you some time to figure out how to retrieve the data and use it in your project, but that's what the challenge is all about. The normal person can take quite a lot of time to learn each new thing you're challenged with. It's just the reality of web dev. ;)
Kevin Robertson
@kevnbot
Jan 24 2017 17:48
Yea ive been chipping away at this project. this is the last hurdle for me. almost there!
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:51

@kevnbot , i'm just thinking here, maybe

https://dev.twitter.com/web/tweet-button/parameters
the parameter data-text= followed by a variable that you assign as the current quote with some javascript? i don't know , im up to where you are

JD Tadlock
@jdtdesigns
Jan 24 2017 17:51
@kevnbot Hate to inform you, but im 8 years in and i still hit hurdles every day lol.
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:52
@jdtdesigns how do you keep on going? i would have commited suicide by now
JD Tadlock
@jdtdesigns
Jan 24 2017 17:54
@yonichanowitz You have to have a passion for this stuff. If you dont love it, you'll burn out quick
yoni chanowitz
@yonichanowitz
Jan 24 2017 17:57

@jdtdesigns like everything in life.

i'm burnt out already, but i keep on pushing because i have to make more money, and i have a family to feed.

Ghulam Shabir
@ghulamshabir
Jan 24 2017 17:59

hello dear campers, can any one tell me why even padding-top: 1px causes overlapping in dynamically generated divs. I am .article class in them like this

.article {
  background-color: #bcc6cc;
  padding-left: 15px;
  padding-bottom: 5px;
  /*padding-top: 1px;*/
  padding-right: 15px;
}

and here is my pen https://codepen.io/ghulamshabir/pen/vXELwL?editors=0000

JD Tadlock
@jdtdesigns
Jan 24 2017 17:59
Its the mountain that will never plateaus. The higher you get in skill, the more challenging the next step will be. It's the way of the world for devs.You love it or hate. I'm either/or on any give day lol.
@yonichanowitz
I wouldnt rely on web dev to bring in much your first 2 to 3 years of learning
yoni chanowitz
@yonichanowitz
Jan 24 2017 18:03
@jdtdesigns anything is better than nothing
@ghulamshabir where is the article element?
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:04
@yonichanowitz it's in js section
@yonichanowitz I am creating the elements dynamically
yoni chanowitz
@yonichanowitz
Jan 24 2017 18:06
@ghulamshabir i may be an idiot, but i don't see it
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:09
@yonichanowitz sorry might be codepen save issue, I have enabled autosave so I suppose codepen saves my work
Sander Berntsen
@sbxn14
Jan 24 2017 18:10
http://codepen.io/sbxn14/pen/apmJJQ?editors=1010 what did I do wrong? my icon aint working
Adel
@AdelMahjoub
Jan 24 2017 18:12
@jdtdesigns do you complete freeCodeCamp ziplines
kirbyedy
@kirbyedy
Jan 24 2017 18:13
@sbxn14 data.weather[0].id;
Sander Berntsen
@sbxn14
Jan 24 2017 18:14
oo
sweet thanks! @kirbyedy
CamperBot
@camperbot
Jan 24 2017 18:15
sbxn14 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1702 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
JD Tadlock
@jdtdesigns
Jan 24 2017 18:15
@AdelMahjoub I stopped at like 900 points. Just had more important things to do. I go on codewars and similar sites to keep my brain tweeked though. ;)
Adel
@AdelMahjoub
Jan 24 2017 18:16
@jdtdesigns if you have done the roguelike game zipline can you post a link
Sander Berntsen
@sbxn14
Jan 24 2017 18:16
woohoo its almost done
JD Tadlock
@jdtdesigns
Jan 24 2017 18:16
@AdelMahjoub didn't do the game
sorry :/
Adel
@AdelMahjoub
Jan 24 2017 18:17
@jdtdesigns np, I'm using rot.js random map generator, wanted to check others, since there are not a lot written in javascript
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:17
@ghulamshabir there is no .article CSS in your pen or any dynamically generated HTML ;)
I see one form element get created when clicking on the icon
JD Tadlock
@jdtdesigns
Jan 24 2017 18:19
@AdelMahjoub you may want to see if @TylerMoeller did the game challenge
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:21
Never did the dungeon crawler either
Adel
@AdelMahjoub
Jan 24 2017 18:23
I found this dungeon generator, but it is written in perl http://donjon.bin.sh/5e/dungeon/
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:23
@TylerMoeller yes I realized that, it's codepen which does not have my current work i don't know why, I even changed to manual saving the work but save button is not displayed
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:25
.sh = saint helena? That's a new one for me :)
Adel
@AdelMahjoub
Jan 24 2017 18:25
this is what I did so far, but I think I'll just use rot.js map generator, and use a different render https://codepen.io/SultanCodeCamper/full/NdjyWq/
it moves and console the current target
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:30
@TylerMoeller @yonichanowitz I think this link should have my current work https://codepen.io/anon/pen/bgrNjO?editors=1111
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:33
@ghulamshabir The padding-top works for me in your CSS with that pen
Nevermind... misunderstood - let me take a closer look
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:36
@TylerMoeller I want to have top padding as well as margins between every divs vertically but having top padding causes the background to overlap other divs for some reason
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:47
@ghulamshabir I think what you're hitting here is a case of collapsing margins: https://www.w3.org/TR/CSS21/box.html#collapsing-margins
The fix is to use margins in addition to the padding properties you want.
One of many fixes, anyway
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:50
@TylerMoeller thanks alot, I really appreciate your help, you helped me before and this time again. :clap: thank you I will follow the link you gave me.
CamperBot
@camperbot
Jan 24 2017 18:50
ghulamshabir sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1395 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
JD Tadlock
@jdtdesigns
Jan 24 2017 18:50
@ghulamshabir Seems as simple as adding
.article {
  margin-bottom: 10px;
}
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:51
This is also a great read for lots more detail on the topic: https://www.sitepoint.com/web-foundations/collapsing-margins/
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:52
@jdtdesigns I have tried that but it causes overlapping of background colors of div so it appears as if I have put all my paragraph into only one div
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:54

@ghulamshabir Also, this line:

$('#wiki').append($('<div class="article"><h2>'+pages[i].title+"</h2><p>"+pages[i].extract+"</p>"));

doesn't need the $( in it and it's missing a closing </div>

JD Tadlock
@jdtdesigns
Jan 24 2017 18:54
@ghulamshabir Not following you. It works fine in google and firefox.
Ghulam Shabir
@ghulamshabir
Jan 24 2017 18:55
@jdtdesigns I am using chrome
@TylerMoeller yeah I used $( to try if that may help I will remove it
Tyler Moeller
@TylerMoeller
Jan 24 2017 18:56
I see, just out of curiosity, have you tried using template literals yet? Makes it a little easier for dynamic HTML, IMO:
          $('#wiki').append(
            `<div class="article">
              <h2>${pages[i].title}</h2>
              <p>${pages[i].extract}</p>
            </div>`
          );
Just started using it more and seems to help, at least for me
Ghulam Shabir
@ghulamshabir
Jan 24 2017 19:00
no I haven't, I have just read about it on the internet but could not understand what is it but your code snippet made it clear :smile: thanks again
Sorin Ruse
@sorinr
Jan 24 2017 19:12
@sbxn14 :point_up: January 24, 2017 6:57 PM
JD Tadlock
@jdtdesigns
Jan 24 2017 19:15
@ghulamshabir Here's an example of a simple approach to creating spacing http://jsbin.com/raneyi/edit?css,js,output
Brandon Armstrong
@calmcoolcollected
Jan 24 2017 19:15
Could someone help me with my pomodoro clock? Right now the problem is that when the clock switches to the break time ("Relax"), I can't seem to pause the clock (done by clicking the big button) and then clicking it again makes it go faster. There's something wrong with the break interval but I can't seem to figure it out. Possibly a scope problem or things being out of order? http://codepen.io/brandon327/pen/mREZaN/?editors=0010
Ghulam Shabir
@ghulamshabir
Jan 24 2017 19:16
@jdtdesigns thanks for helping me I will definitely look into it :smile: thanks alot
CamperBot
@camperbot
Jan 24 2017 19:16
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 882 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ghulam Shabir
@ghulamshabir
Jan 24 2017 19:20
@jdtdesigns it looks like you have typed all that just for me to solve my problem because I am seeing most of code similar to mine :smile: thank you
CamperBot
@camperbot
Jan 24 2017 19:20
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ghulamshabir already gave jdtdesigns points
clydrampage
@clydrampage
Jan 24 2017 19:20
how should I start building my personal portofolio webpage?
I forgot almost everything i learned in tutorials
JD Tadlock
@jdtdesigns
Jan 24 2017 19:21
@ghulamshabir Tried to make it as understandable as possible
Ghulam Shabir
@ghulamshabir
Jan 24 2017 19:21
@jdtdesigns it's neat and clean code I am loving it
clydrampage
@clydrampage
Jan 24 2017 19:22
any recommendation?
Ghulam Shabir
@ghulamshabir
Jan 24 2017 19:23
@jdtdesigns oh it means you did it for me :smile: millions of thanks to you
CamperBot
@camperbot
Jan 24 2017 19:23
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ghulamshabir already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 24 2017 19:27
@clydrampage Look up tutorials on html, css. There's plenty on youtube
You can also take free interactive courses like codecademy.com
Patrick Black
@Mortiferr
Jan 24 2017 19:59
Say I am GETing a JSON API. I get this as part of my response.
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
How do access the object (icon for example) to get the correct return value? I am currently using weatherData.weather.icon. Why doesn't this work?
Ivan Ngundela
@ingundela
Jan 24 2017 20:07
Hello everyone, I hope you all doing well... I'm starting a project.. I want to build a web page... I need to have some contacts in horizontal and the keeps on displaying vertical why... my code is
div id="menu">

  <ul>
    <li>Solucoes</li>
    <li>Internet</li>
   <li>Voz</li> 
   <li>Suporte</li>
   <li>Loja</li> 
  </ul>

</div>
````
<!DOCTYPE html>

<html>
    <head>

    <title>EBU PAGE</title>

    </head>

<body>

<div id="menu">

  <ul>
    <li>Solucoes</li>
    <li>Internet</li>
   <li>Voz</li> 
   <li>Suporte</li>
   <li>Loja</li> 
  </ul>

</div>

</body>

</html>
help... this is not displaying the content in horizontal way.. why?
CamperBot
@camperbot
Jan 24 2017 20:09
no wiki entry for: this is not displaying the content in horizontal way why
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:09
@Mortiferr weather is an array - as a hint, how do you access the first element of an array?
Patrick Black
@Mortiferr
Jan 24 2017 20:09
weatherData.weather[0].icon
thanks @TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:09
:)
CamperBot
@camperbot
Jan 24 2017 20:09
mortiferr sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Patrick Black
@Mortiferr
Jan 24 2017 20:10
http://codepen.io/Mortiferr/pen/oBZJzp?editors=1011
I have a document.write in my HTML and and if-then statement that writes a different character based on a variable. Why isn't it printing to the page?
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:11
@Mortiferr You can also right-click the output in your browser's console and select copy property path
Patrick Black
@Mortiferr
Jan 24 2017 20:11
oh okay, thank you
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:12
blob
Patrick Black
@Mortiferr
Jan 24 2017 20:13
very helpful
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:14
@Mortiferr your script in your html is likely running before you get the data back from the API
Also, 'units' is undefined in that chunk of code
Patrick Black
@Mortiferr
Jan 24 2017 20:14
Are you sure? I have units globally defined I thought
But yeah you're probably right I need to specify
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:15
Even if 'units' and 'imperial' are both globally defined, they don't have a value until you get some data back from the API - that takes some time to visit the API URL and then come back
In the browser console, I see this error when running your codepen:
index.html:20 Uncaught ReferenceError: units is not defined
    at index.html:20
@ingundela That's how lists work by default, they list items vertically
Joe Green
@JGreenusff
Jan 24 2017 20:18
I have no clue how to make a nav bar for my portfolio webpage
Ivan Ngundela
@ingundela
Jan 24 2017 20:20
@TylerMoeller ok.. but I want it to be horizontal
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 20:23
Hey guys.
what do you think of my tribute page : https://codepen.io/aymohamed/pen/egWgmQ
Any suggestion before I submit ?
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:26
@ingundela <li> is a block element, so to make it horizontal, you can use display: inline. I'm not sure that's the look you want to achieve though - if you can be more specific, I might be able to give a better answer
@JGreenusff Are you running into errors with what you have tried or having problems searching for how to build a navbar?
Adrian Warholm
@adrianwarholm
Jan 24 2017 20:28
Hey, anyone online?
Ivan Ngundela
@ingundela
Jan 24 2017 20:29
@TylerMoeller is it fine if I show my code like this.. to have it horizontally?

<div id="menu">

  <ul>
    Solucoes
    Internet
    Voz
    Suporte
    Loja 
  </ul>
@TylerMoeller I want to have in the top right of my page Solucoes Internet Voz Suporte Loja
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:30
@aymohamed It looks nice, good job. It would be nice to make the image responsive. http://getbootstrap.com/css/#images
Adrian Warholm
@adrianwarholm
Jan 24 2017 20:31
Is anyone familiar with the MERN stack?
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:32
@ingundela I believe <ul> needs to have <li> inside. Why not use <div> or <p>?
@adrianwarholm You may want to try https://gitter.im/FreeCodeCamp/HelpBackEnd, this room is for front-end
Adrian Warholm
@adrianwarholm
Jan 24 2017 20:33
Oh, thanks! But I thought front-end was with html and css?
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:33
@adrianwarholm Also, this is a good resource: https://hashnode.com/n/mern
@adrianwarholm Yeah, no mongo or node.js here :)
Adrian Warholm
@adrianwarholm
Jan 24 2017 20:34
@TylerMoeller I was actually just confused more on implementing my html and css files with the stack? Should I go to the back-end chatroom for methods of implementation or ask it here?
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:35
@adrianwarholm If it's specific to HTML, CSS, JavaScript, jQuery, maybe we can help
This room is for help with the Free Code Camp Front-end Development Certification assignments though: https://www.freecodecamp.com/map
The back-end chatroom is for help with the back-end certification projects
Adrian Warholm
@adrianwarholm
Jan 24 2017 20:38
@TylerMoeller Thanks! But it's just a personal project I'm on that freecodecamp got me interested with. Since MERN is isomorphic, I think that may be the issue. I just want my application to display my HTML and CSS files. I don't know how to get them to show on the screen though other than MERN's default template.
CamperBot
@camperbot
Jan 24 2017 20:38
adrianwarholm sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1397 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ivan Ngundela
@ingundela
Jan 24 2017 20:38
@TylerMoeller is it find if I show my code like this to have it horizontal
<div id=" menu ">
Solucoes
Internet
Voz 
Suporte
Loja   

</div>
@TylerMoeller let me know the options
please
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:40
@ingundela I'm not sure I understand the question. It is fine, yes, but it looks like this:
Solucoes Internet Voz Suporte Loja
Abdijabar Yussuf Mohamed
@aymohamed
Jan 24 2017 20:40
Appreciated @TylerMoeller . I did that now. Thanks.
CamperBot
@camperbot
Jan 24 2017 20:40
aymohamed sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1398 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:41
@aymohamed :+1: Nice work
@ingundela Maybe you are looking for something like this? https://getbootstrap.com/examples/navbar/
A navbar, for listing links at the top of your page.
cas_dd
@casdidier
Jan 24 2017 20:42
Hello guys ,
I m having issue with reading my json format from API ... I try to display that data into a div
Ivan Ngundela
@ingundela
Jan 24 2017 20:42
@TylerMoeller yes, that's want I want it to look
Josie
@Josie-N
Jan 24 2017 20:43

So since I don't really understand the basic CSS grid/ layout system, I decided to try and build a simple header-main-sidebar-footer type of layout.
So I tried following this: http://vanseodesign.com/css/2-column-layout-code/

And of course after copy pasting the html-css in Codepen, it doesn't work.

I tried building it again by myself this time, and this is for far I got:
https://codepen.io/CMYK/pen/zNdvwM?editors=1100
Why in the world does my main section overlap like that over the header section?

Tyler Moeller
@TylerMoeller
Jan 24 2017 20:43
@ingundela Okay, good :) hope that helps. the blue button on that page links to the documentation and has some sample code you can try
@casdidier In your HTML, the ID should not have a # in it. Also, your button ID does not match the ID used in your jQuery. Fix those issues, and your quotes should work.
Ivan Ngundela
@ingundela
Jan 24 2017 20:45
@TylerMoeller how do I check in a page the code that was written for a specific thing?
cas_dd
@casdidier
Jan 24 2017 20:47
@TylerMoeller thanks... !! Forgot those basics on HTML naming , good refreshing !
CamperBot
@camperbot
Jan 24 2017 20:47
casdidier sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1399 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Toffanelly
@Toffanelly
Jan 24 2017 20:48
``
oooops
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:48

@Josie-N One small typo here:

   <div id="header">
     <div id="nav"></nav>
   </div>

Take note of the opening/closing tags

@ingundela I don't understand the question :/ I'm sorry
Right-click -> Inspect Element?
Toffanelly
@Toffanelly
Jan 24 2017 20:50
```

$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#latlon").html(position.coords.latitude + " " + position.coords.longitude);
});

}

```

I'm doing the weather challenge on codepen but even this code doesnt output anything, what am I doing wrong?

Fuck im bad at this
$(document).ready(function() {
//  var lat;
//  var lon;
  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
   //lat = position.coords.latitude;
   //lon = position.coords.longitude;
   $("#latlon").html(position.coords.latitude + " " + position.coords.longitude);
  });

  }
Austin Kiekintveld
@akiekintveld
Jan 24 2017 20:51
I'm currently working on the Wikipedia Viewer project. Can anyone take a look at my ajax/JSONP request and see why my callback function isn't executing? https://codepen.io/akiekintveld/pen/apybYx
Tyler Moeller
@TylerMoeller
Jan 24 2017 20:52
@Toffanelly If you're using Chrome, you need to load your page over HTTPS. Check your browser's console for errors/warnings
Toffanelly
@Toffanelly
Jan 24 2017 20:54
@TylerMoeller So there is like an option to do so? Or should i just work in another browser?
Tyler Moeller
@TylerMoeller
Jan 24 2017 21:00
@Toffanelly navigator.geolocation only supports HTTPS, so you can still use it but need a fallback to an ip-based location method if users visit your page over HTTP. This issue may give some background: FreeCodeCamp/FreeCodeCamp#7853
This pen may help you with figuring out how to fall back: http://s.codepen.io/TylerMoeller/pen/ZBBEGq
Toffanelly
@Toffanelly
Jan 24 2017 21:01
@TylerMoeller I figured out i just needed to add https:// before the ULR, thanks a lot
CamperBot
@camperbot
Jan 24 2017 21:01
toffanelly sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1400 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
djemellow
@djemellow
Jan 24 2017 21:08
Hey if you go <div id="container"> is that the same as <div class="container">? i cant find the answer...
ohh wait i found the answer lol
Nicholas Liu
@jumpship91
Jan 24 2017 21:09
can anyone go through my code? Can't get my beginning script to work. It's supposed to change "The message" to "Testing!!!". http://codepen.io/Jumpship91/pen/GrvJOL/
Tyler Moeller
@TylerMoeller
Jan 24 2017 21:15
@akiekintveld When you have an input in a form and submit the data, it refreshes the page. Do this to prevent that from happening:
  $("#search").submit(function(e) {
  e.preventDefault();
@jumpship91 It looks like you need to add jQuery to your project
Nicholas Liu
@jumpship91
Jan 24 2017 21:16
@TylerMoeller oh man, of course..
@TylerMoeller thanks Tyler!
CamperBot
@camperbot
Jan 24 2017 21:16
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1401 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 24 2017 21:17
no problem :+1: :)
hernanfinucci
@hernanfinucci
Jan 24 2017 21:18
hii guys how can i have more fonts like Lato or Open Sans??
Nicholas Liu
@jumpship91
Jan 24 2017 21:18
@TylerMoeller spoke too soon..still doesn't work? Is there anything else I need to add?
Nicholas Liu
@jumpship91
Jan 24 2017 21:23
@JohnnyBizzel is there a reason it doesn't work inline the HTML?
Tyler Moeller
@TylerMoeller
Jan 24 2017 21:23
@jumpship91 If you add jQuery to the codepen settings, you'll need to use the JavaScript panel to hold your code. Otherwise, add a <script> tag with the link to jQuery in your HTML and put all your <script> tags at the end of your HTML.
Nicholas Liu
@jumpship91
Jan 24 2017 21:23
@JohnnyBizzel Thanks Johnny!
CamperBot
@camperbot
Jan 24 2017 21:23
jumpship91 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Jan 24 2017 21:24
@jumpship91 Not sure what the problem was. You don't need body or html tags on codepen.
Nicholas Liu
@jumpship91
Jan 24 2017 21:25
@TylerMoeller gotcha, thanks for that explanation!
CamperBot
@camperbot
Jan 24 2017 21:25
:warning: jumpship91 already gave tylermoeller points
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 24 2017 21:27
@jumpship91 No problem, I have to head out, but this is a working fork of your codepen for comparison if you run into any problems: http://s.codepen.io/TylerMoeller/pen/KavzrN
Johnny's pen is a good approach too - it's a bit easier to work with the JavaScript, IMO, when it's not in your HTML
Josie
@Josie-N
Jan 24 2017 21:30
@TylerMoeller THANK YOU SO MUCH 😁💐
CamperBot
@camperbot
Jan 24 2017 21:30
:star2: 1402 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
josie-n sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Toffanelly
@Toffanelly
Jan 24 2017 21:39
navigator.geolocation.getCurrentPosition(function(position) {
   lat = position.coords.latitude;
   lon = position.coords.longitude;
   var latInteger = Math.round(lat);
   var lonInteger = Math.round(lon);
   $("#latlon").html(lat + " " + lon);
   var address = "api.openweathermap.org/data/2.5/weather?lat=" + latInteger + "&lon=" + lonInteger + "&APPID=a75682a6c2b68e86092711fc2e591d34";
   $("#address").html(address);
   $.getJSON(address, function (json) {
            $("#json").html(JSON.stringify(json));





            });  
   });
I'm here again. Basically instead of getting the json object printed on screen i get nothing. The console outputs error 404 (in particular "Failed to load resource: the server responded with a status of 404 ()"). The address of the api is working because if i open it in another tab i get the object i need. Im clueless really
Moisés Man
@moigithub
Jan 24 2017 21:40
add http:// to ur url
else it will be taken as relative address.... @Toffanelly
Toffanelly
@Toffanelly
Jan 24 2017 21:45
i tried that, still doesnt work
Nikki L.R.
@nikkilr88
Jan 24 2017 21:46
Hello! Could anyone help me out? I am working on "Responsive Design with Bootstrap", and I just have one question.
Vincent B
@vberrios
Jan 24 2017 21:53
I need some help with getting Font Awesome to work. This is what i have
<head src ="https://use.fontawesome.com/3b619cadbf.js">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>
Nikki L.R.
@nikkilr88
Jan 24 2017 21:53
They said that we can use bootstrap by inserting a link and that they have already done it for us. Where exactly is the link?
Vincent B
@vberrios
Jan 24 2017 21:53
<div class="btnList text-center">
<a class="btn btn-default" href= "https://www.linkedin.com/in/vincent-berrios-88b12a133"><i class="fa fa-Linkedin-square fa-lg" id="Linkedinicon" aria-hidden="True"></i> LinkedIn</a>
Tom
@moT01
Jan 24 2017 21:58
@nikkilr88 codepen?
or what challenge
@vberrios the font should work if you apply it to something, ...with some style tags or css font-family: lobster;
Vincent B
@vberrios
Jan 24 2017 22:04

so like this

<head><style src ="https://use.fontawesome.com/3b619cadbf.js"><style> ?

@moT01 I'm using Codepen it has bootsrap I don't think it needs style tags
Tom
@moT01
Jan 24 2017 22:09
maybe im not sure how to use what your after, but you should just need the <link> with the font in it like you have it
thats a js file, i dont think you need that at all
so keep your <link> as is, then you should be able to use the font on whatever you want, in your css you could use it like so...
body {
      font-family: lobster; }
Nikki L.R.
@nikkilr88
Jan 24 2017 22:19
@nikkilr88 codepen? I am just starting the section. It was talking about how to use bootstrap in your project.
Tom
@moT01
Jan 24 2017 22:21
codepen.io its a place to make some projects or practice or whatever, ...there should be a link in the challenge description somewhere, if i remember, that you can just copy and paste
Ve Vanderpool
@VanAmoVe
Jan 24 2017 23:04
hey everyone, I am almost done with my tribute page. If you have time to take a look and let me know your thoughts, I would gladly appreciate it!
aRtoo
@artoodeeto
Jan 24 2017 23:20
guys quick question. if you want to do a webpage using bootstrap so you wonot need the media quiries right?? thanks
Jessi L Wasell
@JessiW
Jan 24 2017 23:46
@artoodeeto - If you don't want to use them you don't have to. It really depends on how you want to build it but you don't need them to use bootstrap or if you use bootstrap.