These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Aug 2017
CallMeOrange
@EgnaroDev
Aug 16 2017 00:00
2 root 8, 2^2*8 = 32, root 32
Gulsvi
@gulsvi
Aug 16 2017 00:00
5 - 1 = 4
7 - 3 = 4
The hypotenuse of an isoceles right triangle is root 2 * the length of one side
@jojacino You may be able to find people from Arkansas here: https://forum.freecodecamp.org/t/freecodecamp-city-based-local-groups/19574
CallMeOrange
@EgnaroDev
Aug 16 2017 00:02
so it is root 32 but I did it wrong..
actually, 2 root 8 is not completed?
@SkyC0der You are right, it is 4 root 2
I didn't realize that I have to do more farther
Gulsvi
@gulsvi
Aug 16 2017 00:04
4^2 + 4^2 = c^2
CallMeOrange
@EgnaroDev
Aug 16 2017 00:04
what's c?
Gulsvi
@gulsvi
Aug 16 2017 00:04
pythagorean theorem
a^2 + b^2 = c^2
CallMeOrange
@EgnaroDev
Aug 16 2017 00:05
2 root 8, 2 root 4*2,
4 would be 2 and 2*2 = 4
I'm not sure how to do this with pythagorean theorem yet
Gulsvi
@gulsvi
Aug 16 2017 00:06
You will learn it soon I think
CallMeOrange
@EgnaroDev
Aug 16 2017 00:06
Yeah probably soon
Interesting
2 root 8 => 2 root 4*2 => 2 root 2*``2*2 => 4 root 2
What a mess...
Alright, @SkyC0der thanks for that link
CamperBot
@camperbot
Aug 16 2017 00:08
egnarodev sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2405 | @skyc0der |http://www.freecodecamp.com/skyc0der
CallMeOrange
@EgnaroDev
Aug 16 2017 00:08
I'm going to review
:wave:
Gulsvi
@gulsvi
Aug 16 2017 00:08
I did sqrt(32) = sqrt(4 * 4 * 2) = 4 * sqrt(2)
CallMeOrange
@EgnaroDev
Aug 16 2017 00:09
in JS huh...
Gulsvi
@gulsvi
Aug 16 2017 00:09
no, just can't figure out how to enter that square root symbol lol
CallMeOrange
@EgnaroDev
Aug 16 2017 00:09
oh lol
Gulsvi
@gulsvi
Aug 16 2017 00:09
I think js is Math.sqrt() though
CallMeOrange
@EgnaroDev
Aug 16 2017 00:09
Yeah
See you soon
:runner:
Gulsvi
@gulsvi
Aug 16 2017 00:09
Good luck
RonSwan
@RonSwan
Aug 16 2017 00:23
Hello Every one I am hoping you can give me a quick reveiw of https://codepen.io/ronswan/pen/Ojpbxa and let me know if it is passable so I can move forward to the next lesson
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:30
hey guys, is it possible to loop through multiple argument arrays like in the below for example?
function uniteUnique(arr) {
  var args = Array.prototype.slice.call(arguments);





  return arr;
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
basically i want to separate each argument array and store each one in something i can call
can i use a for loop?
Gulsvi
@gulsvi
Aug 16 2017 00:32
@BrianWilliams28 Yes it's possible to use a for loop - try looping through your args variable
korzo
@korzo
Aug 16 2017 00:32
@BrianWilliams28 You already got answer in other chatroom.
you need 2 loops. First for elements of args
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:33
two for loops right?
korzo
@korzo
Aug 16 2017 00:33
and second for elements of every array inside arguments object
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:33
right
korzo
@korzo
Aug 16 2017 00:34
@BrianWilliams28
for(var i = 0; i < args.length; i++) {
    for(var j = 0; j < args[i].length; j++) {
    }
}
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:35
right i understand that thank you @korzo
CamperBot
@camperbot
Aug 16 2017 00:35
brianwilliams28 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @korzo |http://www.freecodecamp.com/korzo
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:35
i think i can solve this problem without two for loops though
by using map() on args[i]
or idk yet
but thank you
korzo
@korzo
Aug 16 2017 00:37
@BrianWilliams28 of course, you can use reduce for this
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:38
reduce confuses me
i has like 4 parameters lol
but in the MDN example it only uses two
var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
why is there a zero before the bracket
korzo
@korzo
Aug 16 2017 00:41
@BrianWilliams28 zero is initial value for the first call
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:42
and what do sum and value represent
korzo
@korzo
Aug 16 2017 00:43
sum is value returned from previous call
Value is current element
@BrianWilliams28 reduce will return sum from last function call
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:46
so what are the 4 paramters
korzo
@korzo
Aug 16 2017 00:46
So it's ideal when you need reduce array to single value, for example smallest, sum ...etc
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:46
accumulator
currentValue
currentIndex
array
?
korzo
@korzo
Aug 16 2017 00:47
  1. is index of current element in array
Last is whole array
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:48
i would need to see this thing used in a better example
this one isn't doing it for me
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:54
so after the string is split...what do (a, c, i) represent?
korzo
@korzo
Aug 16 2017 00:54
a is accumulator - value returned from previous function call
c is current element of array
i is index of current element
BrianWilliams28
@BrianWilliams28
Aug 16 2017 00:55
so reduce iterates through an array on it's own? like a for loop?
korzo
@korzo
Aug 16 2017 00:56
Yes, it pass every element of array to provided function
Long Nguyen
@longnt80
Aug 16 2017 00:57
@BrianWilliams28 you can use console.log to see how it works: https://repl.it/KItm/4
korzo
@korzo
Aug 16 2017 00:57
['a', 'b', 'c'].reduce(function(a, c) {
    console.log(a, c);
   return a + c.toUpperCase();
}, '');
Long Nguyen
@longnt80
Aug 16 2017 01:00
@BrianWilliams28 here, I changed the array value so it easier to understand: https://repl.it/KItm/6
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:02
@longnt80 thanks that is helpful
CamperBot
@camperbot
Aug 16 2017 01:02
brianwilliams28 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Aug 16 2017 01:03
@BrianWilliams28 I just put one more example in there, you can refresh to see it
one is with initial value, and one doesn't have initial value
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:05
by initial value you mean ' ' ?
Long Nguyen
@longnt80
Aug 16 2017 01:05
yes
it's an empty string
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:06
do you have to give it an initial value?
Long Nguyen
@longnt80
Aug 16 2017 01:06
no
it's optional
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:06
so how does it change this example
Long Nguyen
@longnt80
Aug 16 2017 01:06
if you leave it out, it will take the first value as initial value
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:06
ok
thats what i thought..
Long Nguyen
@longnt80
Aug 16 2017 01:07
initialValue
[Optional] Value to use as the first argument to the first call of the callback. If no initial value is supplied, the first element in the array will be used. Calling reduce on an empty array without an initial value is an error.
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:08
ty
now i just have to figure out what to write in the reduce function to make this work
Long Nguyen
@longnt80
Aug 16 2017 01:12
@BrianWilliams28 for your challenge, use an empty array as initial value
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:13
i have an empty array stored as a variable that i was planning to push stuff to later?
function uniteUnique(arr) {
  var args = Array.prototype.slice.call(arguments);
  var newArr = [];

for (var i = 0; i < args.length; i++) {
  args[i].reduce(function(a, c, i) {

  })
}


  return arr;
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
or possibly just join the reduced arrays together...im not sure yet
korzo
@korzo
Aug 16 2017 01:14
@BrianWilliams28 What's the name of challenge?
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:14
Sorted Union
intermediate algorithm
Long Nguyen
@longnt80
Aug 16 2017 01:15
@BrianWilliams28 not sure about joining
but what I think is to loop through each array and push each item to an empty array
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:15
thats what i was initially going to do
Long Nguyen
@longnt80
Aug 16 2017 01:15
with the condition that the value is not already in there
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:15
but korzo and the hints said it can be done with reduce() which ive never used before
so i wanted to try
Long Nguyen
@longnt80
Aug 16 2017 01:16
yeah, I was talking about reduce too
korzo
@korzo
Aug 16 2017 01:16
For this challenge you can use nested reduce instead of 2 loops
Long Nguyen
@longnt80
Aug 16 2017 01:16
loop inside reduce
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:17
so
1 for loop
nested inside a reduce?
is how i wrote it not going to work? i figured all 3 arrays (or arguments) would need to be reduced right?
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:25
crickets
Gulsvi
@gulsvi
Aug 16 2017 01:27
@BrianWilliams28 Use .reduce() to combine the arrays into one. Then .filter() that array to remove duplicates. No for loops needed unless you want to use them instead of .reduce() and .filter()
You can also do two .reduce() calls if preferred, but either way, no need for any for loops if you choose to use higher order functions
Long Nguyen
@longnt80
Aug 16 2017 01:29
@SkyC0der but for loop is the best
:D
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:30
i like the idea of using reduce instead of for loops, i rely too much on for loops i want to try and learn other functions
@SkyC0der thank you
CamperBot
@camperbot
Aug 16 2017 01:30
brianwilliams28 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2406 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 01:30
Yes :) for loop will always give the best performance if we look at the CPU
gulsvi @SkyC0der checks out Long's answer
Long Nguyen
@longnt80
Aug 16 2017 01:31
@SkyC0der how do you write that purple sentence?
Gulsvi
@gulsvi
Aug 16 2017 01:31
lol, you didn't use a for loop!
/me
korzo
@korzo
Aug 16 2017 01:31
@SkyC0der I think concat is better than reduce if you want to combine arrays
Long Nguyen
@longnt80
Aug 16 2017 01:31
@SkyC0der thanks :D
CamperBot
@camperbot
Aug 16 2017 01:31
longnt80 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2407 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 01:32
@korzo I used reduce with a concat inside hmmmm, I should go back to some of my older exercises and re-solve them
It was basically a combination of steamroller and diff two arrays if I remember right
Long Nguyen
@longnt80
Aug 16 2017 01:33
all my challenges are reset, they're all gone
Gulsvi
@gulsvi
Aug 16 2017 01:34
I see your challenges still @longnt80
Long Nguyen
@longnt80
Aug 16 2017 01:34
I used 2 reduce for sorted union too
@SkyC0der oh yeah, I just figured it out too :D
Gulsvi
@gulsvi
Aug 16 2017 01:34
reduce with concat, like I did
korzo
@korzo
Aug 16 2017 01:38
@SkyC0der You can concat arguments with one-liner
Array.prototype.concat.apply([], Array.prototype.slice.call(arguments))
Gulsvi
@gulsvi
Aug 16 2017 01:39
I'll play around with that - thanks @korzo :)
thanks @korzo
CamperBot
@camperbot
Aug 16 2017 01:39
skyc0der sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @korzo |http://www.freecodecamp.com/korzo
Gulsvi
@gulsvi
Aug 16 2017 01:39
there we go
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:40
lol
funny how everyone is talking about this now
Gulsvi
@gulsvi
Aug 16 2017 01:44
ES6: [].concat(...arguments)
BrianWilliams28
@BrianWilliams28
Aug 16 2017 01:46
how would i test for duplicates in an array
Aaron Bell
@awb715
Aug 16 2017 01:46
does anyone know if you can access jquery within handlebars templates?
Gulsvi
@gulsvi
Aug 16 2017 01:47
@BrianWilliams28 That's where I chose to use .filter() with .indexOf(). Lots of approaches though
korzo
@korzo
Aug 16 2017 01:48
@SkyC0der anyway, thanks for idea with filter. Now i solved it with one-liner
return Array.prototype.concat.apply([], arguments).filter((e, i, arr) => arr.indexOf(e) === i );
CamperBot
@camperbot
Aug 16 2017 01:48
korzo sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2408 | @skyc0der |http://www.freecodecamp.com/skyc0der
Long Nguyen
@longnt80
Aug 16 2017 01:49

@SkyC0der

ES6: [].concat(...arguments)

do you need the arguments object? Maybe [].concat(...arr)

?
Gulsvi
@gulsvi
Aug 16 2017 01:49
I did it almost the same @korzo (re-did it, I should say)
return [].concat(...arguments).filter((e,i,arr) => arr.indexOf(e) === i);
@longnt80 That doesn't seem to work
arr only gives us the first array
Long Nguyen
@longnt80
Aug 16 2017 01:52
I tried some thing the other day with ES6 and the arguments object and the console said it doesn't recognize the arguments
Gulsvi
@gulsvi
Aug 16 2017 01:52
If you define the function with const it won't work
Long Nguyen
@longnt80
Aug 16 2017 01:52
ah I see
korzo
@korzo
Aug 16 2017 01:53
@longnt80 Maybe it was arrow function
Gulsvi
@gulsvi
Aug 16 2017 01:53
I think the arguments object can't be accessed in strict mode either... not sure aboout that
at least the callee property can't
korzo
@korzo
Aug 16 2017 01:54
@SkyC0der you can use arguments also in strict
Gulsvi
@gulsvi
Aug 16 2017 01:54
I might just be confusing that with arrow functions :p
Long Nguyen
@longnt80
Aug 16 2017 01:54
yeah I think you can use strict in ES5
so must be const or arrow function
Got it down to 18 lines of (poorly formatted) code, but I'm sure there's more to simplify
BrianWilliams28
@BrianWilliams28
Aug 16 2017 02:05
guys, here's what I came up with, doesnt seem to work though. any suggestions?
function uniteUnique(arr) {
  var args = Array.prototype.slice.call(arguments);
  var newArr = [];

 args.reduce(function(a, b, i) {
   var mergedArr = a.concat(b);

   mergedArr.filter(function(num) {
     if (mergedArr.indexOf(num) > i) {
       return newArr.push(num);
     }
   });
 });


}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
paulsda
@paulsda
Aug 16 2017 02:06
hello
Gulsvi
@gulsvi
Aug 16 2017 02:07
@BrianWilliams28 Your .filter() should be outside of .reduce() - finish merging the array first, then filter the final fully merged array
hello @paulsda
paulsda
@paulsda
Aug 16 2017 02:07
whats the difference between an id and a class?
and why would somebody style with an id vs a class
korzo
@korzo
Aug 16 2017 02:08
@paulsda id is unique for page
Gulsvi
@gulsvi
Aug 16 2017 02:08
You can only have one ID per element and that ID can't be used anywhere else. With a class, you can have as many as you want on an element and throughout the HTML
paulsda
@paulsda
Aug 16 2017 02:09
i see, thank you @korzo @SkyC0der
CamperBot
@camperbot
Aug 16 2017 02:09
paulsda sends brownie points to @korzo and @skyc0der :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @korzo |http://www.freecodecamp.com/korzo
:star2: 2409 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 02:09
I think an ID has higher priority in CSS - that's one reason to style with an ID. Usually, it's best to use a class though - the code will be more reusable
paulsda
@paulsda
Aug 16 2017 02:09
i see, thank you
korzo
@korzo
Aug 16 2017 02:11
@paulsda Also id has 256* higher specificity, so css with id selector will overide css with class selector
paulsda
@paulsda
Aug 16 2017 02:11
got it. and i understand that i should use class > id generally but when do i know to use an id over a class
does it have any specific applications?
Gulsvi
@gulsvi
Aug 16 2017 02:12
I tend to use IDs in CSS because I'm lazy, or building something small where I won't need to use the code again.
korzo
@korzo
Aug 16 2017 02:13
@paulsda I usually use ID for main parts of layout or for javascript purpose
paulsda
@paulsda
Aug 16 2017 02:15
is it used more prevalently in jquery or html/css
korzo
@korzo
Aug 16 2017 02:15
But in css only in case I have to override some style
paulsda
@paulsda
Aug 16 2017 02:16
im about to finish the html 5/css 3 unit right now and im not sure if i should make sure i understand id vs class
i see
thank you @korzo
CamperBot
@camperbot
Aug 16 2017 02:16
paulsda sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:warning: paulsda already gave korzo points
BrianWilliams28
@BrianWilliams28
Aug 16 2017 02:17
@SkyC0der
function uniteUnique(arr) {
  var args = Array.prototype.slice.call(arguments);
  var newArr = [];
  var mergedArr = args.reduce(function(a, b) {
   return a.concat(b);
 });

   mergedArr.filter(function(num) {
     if (mergedArr.indexOf(num) > mergedArr.findIndex(num)) {
       return newArr.push(num);
     }
   });
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
this gives me some error in fcc that 1 is not a function =S
actually that test is wrong i think
it only kicks in if there's a duplicate
so it wouldnt save the 4 or 5
my brain is melting lol
Gulsvi
@gulsvi
Aug 16 2017 02:31
@BrianWilliams28 Sorry, stepped away. You are really close, only line that needs attention is if (mergedArr.indexOf(num) > mergedArr.findIndex(num))
Christopher McCormack
@cmccormack
Aug 16 2017 02:32
@BrianWilliams28 also you aren't returning anything in the end
filter should return a boolean, otherwise I'm not sure why you're using filter over just forEach or something simliar.
iso
@iso1048
Aug 16 2017 02:37
@BrianWilliams28 does .filter create a new array or modify the existing array?
korzo
@korzo
Aug 16 2017 02:42
@gothamknight new array
iso
@iso1048
Aug 16 2017 02:42
so @BrianWilliams28 would have to do mergedArr = mergedArr.filter() then...
BrianWilliams28
@BrianWilliams28
Aug 16 2017 02:43
i dont think so, because im pushing the result to newArr anyways
CallMeOrange
@EgnaroDev
Aug 16 2017 02:44
Don't you need to return mergedArr.filter(function(num) { if (mergedArr.indexOf(num) > mergedArr.findIndex(num)) { return newArr.push(num); } });?
@BrianWilliams28 also you aren't returning anything in the end
BrianWilliams28
@BrianWilliams28
Aug 16 2017 02:44
im returning newArr
i didnt write it in
CallMeOrange
@EgnaroDev
Aug 16 2017 02:44
You have to return .filter()
iso
@iso1048
Aug 16 2017 02:45
@BrianWilliams28 true
fdemaa
@fdemaa
Aug 16 2017 02:46
hey guys any feedback on my weather page ? https://codepen.io/fdemaa/pen/WEjNVR
CallMeOrange
@EgnaroDev
Aug 16 2017 02:46
@fdemaa Good job
Since you have country and city, do you still need lat and lon?
fdemaa
@fdemaa
Aug 16 2017 02:48
@EgnaroDev Thanks man! yeah i never stop and think why i add it :) haha
CamperBot
@camperbot
Aug 16 2017 02:48
fdemaa sends brownie points to @egnarodev :sparkles: :thumbsup: :sparkles:
:cookie: 552 | @egnarodev |http://www.freecodecamp.com/egnarodev
CallMeOrange
@EgnaroDev
Aug 16 2017 02:49
Looks good enough to pass the challenge but if you want, you should add wallpaper depending on temperatures, add some border maybe? or border radius to that box
fdemaa
@fdemaa
Aug 16 2017 02:50
@EgnaroDev yes thats a good idea, but i think i will try to came back in the future and try to add a background image of the current city
I dont feel im capable of doing that now
CallMeOrange
@EgnaroDev
Aug 16 2017 02:50
Don't worry, we all improve
iso
@iso1048
Aug 16 2017 02:50
@fdemaa when you click "Convert Temperature to Farenheit", the text should change to "Convert Temperature to Celsius."
CallMeOrange
@EgnaroDev
Aug 16 2017 02:51
oh yeah, missed that
fdemaa
@fdemaa
Aug 16 2017 02:51
i never think about that one! thanks @gothamknight
iso
@iso1048
Aug 16 2017 02:51
@fdemaa looks good anyway
fdemaa
@fdemaa
Aug 16 2017 02:52
@gothamknight thanks man !
CamperBot
@camperbot
Aug 16 2017 02:52
fdemaa sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @gothamknight |http://www.freecodecamp.com/gothamknight
CallMeOrange
@EgnaroDev
Aug 16 2017 02:52
I think I have three weather apps
Long Nguyen
@longnt80
Aug 16 2017 02:54
@korzo @SkyC0der @cmccormack @EgnaroDev
how can I keep the green div at that position when I scroll down (no js), green div should be positioned relative to .container
https://codepen.io/longnt80/pen/Evbwmp?editors=1100
korzo
@korzo
Aug 16 2017 02:55
@longnt80 position: fixed
CallMeOrange
@EgnaroDev
Aug 16 2017 02:55
I think there is some property called attachment, don't remember
well position: fixed obviously
Long Nguyen
@longnt80
Aug 16 2017 02:56
no, position fixed will make it relative to the viewport
Long Nguyen
@longnt80
Aug 16 2017 02:56
I need to position it relative to the container
CallMeOrange
@EgnaroDev
Aug 16 2017 02:57
Oh I see
Weird, green box goes into black box
Long Nguyen
@longnt80
Aug 16 2017 02:57
I can do it with position: sticky but it is not well supported
CallMeOrange
@EgnaroDev
Aug 16 2017 02:58
I forgot this property.. Let me check it out
dang thought background-attachment: fixed; would work
Long Nguyen
@longnt80
Aug 16 2017 03:00
yeah, it's not a background, so
Gulsvi
@gulsvi
Aug 16 2017 03:00
position: sticky and a polyfill?
CallMeOrange
@EgnaroDev
Aug 16 2017 03:01
Yeah, I thought green box would be a background...
Long Nguyen
@longnt80
Aug 16 2017 03:01
what's the polyfill for position:sticky?
Gulsvi
@gulsvi
Aug 16 2017 03:02
There are a few - I haven't tried any of them though
If you don't want a polyfill, this JS may work :trollface:
if(!window.chrome) alert('Please use Google Chrome to view this website.');
Long Nguyen
@longnt80
Aug 16 2017 03:03
:D
so no non-js solution
korzo
@korzo
Aug 16 2017 03:04
@SkyC0der Lol , it's 1999 again
Gulsvi
@gulsvi
Aug 16 2017 03:05
haha
This website works best with Netscape Navigator 2.0. Download it here!
just boring
Gulsvi
@gulsvi
Aug 16 2017 03:06
@longnt80 No non-js solution I'm afraid, but there must be a way to position it the way you want without an entire polyfill
korzo
@korzo
Aug 16 2017 03:06
@SkyC0der or Internet Explorer 5
Gulsvi
@gulsvi
Aug 16 2017 03:06
Kind of like what they do with the affix plugin in bootstrap 3?
Long Nguyen
@longnt80
Aug 16 2017 03:06
@EgnaroDev nice try! but the .container should be centered
:D
CallMeOrange
@EgnaroDev
Aug 16 2017 03:07
I was just playing around :trollface:
Gulsvi
@gulsvi
Aug 16 2017 03:07
Wow, IE 5 released in 1998 :)
Long Nguyen
@longnt80
Aug 16 2017 03:07
@SkyC0der I just want to make sure that I didn't miss out a css solution
Gulsvi
@gulsvi
Aug 16 2017 03:08
@korzo Here's a "retro" website lol http://www.dinostomatopie.com/
Saw that on Reddit
visitor counters, animated gifs everywhere
Long Nguyen
@longnt80
Aug 16 2017 03:09
looks like MySpace
Gulsvi
@gulsvi
Aug 16 2017 03:09
mapquest :p
CallMeOrange
@EgnaroDev
Aug 16 2017 03:09
wow lol
How the hell is that fan made?
korzo
@korzo
Aug 16 2017 03:10
@SkyC0der sweet memories. I miss my GeoCities page.
Long Nguyen
@longnt80
Aug 16 2017 03:10
they should've made it all with only table!
CallMeOrange
@EgnaroDev
Aug 16 2017 03:10
^ would be cool
I think Pagnito's page is much better than this lol
Gulsvi
@gulsvi
Aug 16 2017 03:11
korzo
@korzo
Aug 16 2017 03:12
That's what I call web development. Tables, frames and animated gifs
Long Nguyen
@longnt80
Aug 16 2017 03:13

Or the Space Jams Movie website

this is proper

Daniel
@DanJP2016
Aug 16 2017 03:14
wow, can't believe that site is still active lol
Long Nguyen
@longnt80
Aug 16 2017 03:16
@DanJP2016 so it must be good product (the website)
Gulsvi
@gulsvi
Aug 16 2017 03:17
Ahhh, time for dinner. Talk to you all later :fork_and_knife: :yum: :beers:
CallMeOrange
@EgnaroDev
Aug 16 2017 03:17
:wave:
Daniel
@DanJP2016
Aug 16 2017 03:19
@longnt80 yeah lol
DJ Nixon
@tGxcoder
Aug 16 2017 03:19
```
CallMeOrange
@EgnaroDev
Aug 16 2017 03:20
what up?
Daniel
@DanJP2016
Aug 16 2017 03:21
i'm messing around with hover effects, and im getting a weird effect with the last div where a black line appears. it's only happening in codepen though.
https://codepen.io/bones211/full/MvOQgp/
DJ Nixon
@tGxcoder
Aug 16 2017 03:21
<li><div id="FCC" class="tabcontent">
<button id="b2" class="btn" onclick="window.location.href='https://www.freecodecamp.org/tgxcoder'" target="_blank">Free Code Camp</button></div></li>
please help codepen send this to blank page.
korzo
@korzo
Aug 16 2017 03:24
@tGxcoder Why to use button instead of link?
I think blank page is related to Content Security policy of codepen
DJ Nixon
@tGxcoder
Aug 16 2017 03:25
I was going for a top menu
per codepen target="blank" is supposed to open in a different window though
and i also used a different playground to test aswell
korzo
@korzo
Aug 16 2017 03:26
on link, not on button
DJ Nixon
@tGxcoder
Aug 16 2017 03:26
<link> ?
CallMeOrange
@EgnaroDev
Aug 16 2017 03:27
korzo
@korzo
Aug 16 2017 03:27
<a href="http://..."></a>
CallMeOrange
@EgnaroDev
Aug 16 2017 03:27
:walking: ...
DJ Nixon
@tGxcoder
Aug 16 2017 03:27
oh... that white paged me too
korzo
@korzo
Aug 16 2017 03:27
also with target="_blank" ?
DJ Nixon
@tGxcoder
Aug 16 2017 03:28
ill try again bc i dont remember if i had target blank in there then
Daniel
@DanJP2016
Aug 16 2017 03:28
if your going to use a button you need to use window.open(//the url) and set an eventlistener on the button
korzo
@korzo
Aug 16 2017 03:30
Using buttons for links should be banable offense
Daniel
@DanJP2016
Aug 16 2017 03:31
lol
CallMeOrange
@EgnaroDev
Aug 16 2017 03:32
really?
EgnaroDev @EgnaroDev left to codepen
DJ Nixon
@tGxcoder
Aug 16 2017 03:32
thanks @korzo target blank worked with it
CamperBot
@camperbot
Aug 16 2017 03:32
tgxcoder sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @korzo |http://www.freecodecamp.com/korzo
CallMeOrange
@EgnaroDev
Aug 16 2017 03:33
target="_blank" => blank page :gun: target
DJ Nixon
@tGxcoder
Aug 16 2017 03:33
@DanJP2016 eventlistener?
CallMeOrange
@EgnaroDev
Aug 16 2017 03:34
Thats what I think of lol
DJ Nixon
@tGxcoder
Aug 16 2017 03:35
target="blank" was supposed to force open a new page or atleast thats what the blog was saying. never got it to work soooo....
Daniel
@DanJP2016
Aug 16 2017 03:35
yeah something like, ele.addEventListener('click', event => { //something to do when event happens })
DJ Nixon
@tGxcoder
Aug 16 2017 03:35
oh in the JS
Daniel
@DanJP2016
Aug 16 2017 03:35
yeah, if you were going to use a button instead of a link you would have to do it that away
the target="_blank" works with links
DJ Nixon
@tGxcoder
Aug 16 2017 03:37
i had one from codepens blog about sandboxing for saftey. that from the way it read i though was suppposed to work for all.
$(".content").on('click','a',function(){
  var theSource = $(this).attr('href');
  window.open(theSource , '_blank');
});
ohhhh if i had changed to 'a' to 'button' would that have worked?
aisnotb
@aisnotb
Aug 16 2017 03:40
hi guys, i have 1 line of text on a div, i wanna let the div disappear but text remains there. How can i do it?
CallMeOrange
@EgnaroDev
Aug 16 2017 03:40
is that text within a div?
DJ Nixon
@tGxcoder
Aug 16 2017 03:41
nope it didnt work thanks again for the help
CallMeOrange
@EgnaroDev
Aug 16 2017 03:41
@aisnotb Are you working on it in codepen? if so could you share it?
aisnotb
@aisnotb
Aug 16 2017 03:42
give me a sec
DJ Nixon
@tGxcoder
Aug 16 2017 03:42
fadeOut maybe. i kind of remember something like that
aisnotb
@aisnotb
Aug 16 2017 03:48
@EgnaroDev hello, this is my code, i just wanna use pure css to do this https://codepen.io/afkortroll/pen/jLaZzL
CallMeOrange
@EgnaroDev
Aug 16 2017 03:49
@aisnotb So what do you want to do? just a black box with text vanish?
aisnotb
@aisnotb
Aug 16 2017 03:50
@EgnaroDev i wanna the div disappear but the text still there
CallMeOrange
@EgnaroDev
Aug 16 2017 03:50
by div, do you mean black box?
aisnotb
@aisnotb
Aug 16 2017 03:51
yes
CallMeOrange
@EgnaroDev
Aug 16 2017 03:51
So how would you want text to disappear? text same color as box or...
aisnotb
@aisnotb
Aug 16 2017 03:52
The black box should vanish and text still can be seen
of course you can change the text color
CallMeOrange
@EgnaroDev
Aug 16 2017 03:53
Oh ok, I understand
Can you use opacity property?
aisnotb
@aisnotb
Aug 16 2017 03:53
yes
CallMeOrange
@EgnaroDev
Aug 16 2017 03:53
You want black box just to vanish? no animated?
aisnotb
@aisnotb
Aug 16 2017 03:53
you can do that
Christopher McCormack
@cmccormack
Aug 16 2017 03:53
if the text is in the div opacity would also reduce the text opacity
CallMeOrange
@EgnaroDev
Aug 16 2017 03:54
true
Christopher McCormack
@cmccormack
Aug 16 2017 03:54
you could make the div background the same color as the background
CallMeOrange
@EgnaroDev
Aug 16 2017 03:54
Perhaps ^
Christopher McCormack
@cmccormack
Aug 16 2017 03:54
careful with fadout as I believe it will make the display:none which will also hide the text
CallMeOrange
@EgnaroDev
Aug 16 2017 03:55
ah.. because of div.
Christopher McCormack
@cmccormack
Aug 16 2017 03:56
yup. You could possibly set the text outside the div but the position overlapping the div
aisnotb
@aisnotb
Aug 16 2017 03:57
Good suggestions , i am trying to solve it using animation first
is z-index gonna help?
heroiczero
@heroiczero
Aug 16 2017 04:14
z-index is when you want to overlap
aisnotb
@aisnotb
Aug 16 2017 04:15
still trying ...
Christopher McCormack
@cmccormack
Aug 16 2017 04:24
@aisnotb you can set the background-color to the default of background-color: transparent;
@aisnotb and don't forget your text is white so it will disappear.
@keyframes test{
  from{background-color: black;}
  to {background-color: transparent};
}
Long Nguyen
@longnt80
Aug 16 2017 05:07
@SkyC0der @EgnaroDev I found a way to set the green box at fixed position without using position: sticky or polyfill. Had to change the html structure a bit though: https://codepen.io/longnt80/pen/Evbwmp?editors=1100
aisnotb
@aisnotb
Aug 16 2017 08:40
@cmccormack Thanks a lot!
CamperBot
@camperbot
Aug 16 2017 08:40
aisnotb sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1144 | @cmccormack |http://www.freecodecamp.com/cmccormack
Hasham Babar
@hash004
Aug 16 2017 10:27
Hi everyone, I have an issue with my twitch viewer project. when I try to loop through the online array it doesn’t work. I tried putting a break point on line 38 and it says the array is empty. I don’t understand how because when I check it in the console when the page is run it’s populated. I would really appreciate the help https://codepen.io/hash004/pen/gxXKRb
Rabin Shrestha
@jyapujuju
Aug 16 2017 11:27
i want to add the space just before the matched regex letter. how can i do that?
Hasham Babar
@hash004
Aug 16 2017 11:59
I think I’m getting somewhere finally. I think it’s to do with synchronous and asynchronous code
Clyde Lobo
@oppiniated
Aug 16 2017 12:17
@hash004 Read more about ajax and callbacks
Hasham Babar
@hash004
Aug 16 2017 12:20
CamperBot
@camperbot
Aug 16 2017 12:20
hash004 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 622 | @oppiniated |http://www.freecodecamp.com/oppiniated
Ken Haduch
@khaduch
Aug 16 2017 13:02
@jyapujuju - did you find an answer to your question? :point_up: August 16, 2017 7:27 AM
Ken Haduch
@khaduch
Aug 16 2017 13:13
@jyapujuju - if you didn't find an answer, using a regular expression capture group is the way to do it. For example, if you have a string with capital letters and you want to insert a space in front of each one: newstr = newstr.replace( /([A-Z])/g, ' $1' ); The parentheses establishes a "capture group" that matches whatever letter is there. The replacement $1 adds a space in front of the matched letter so it replaces the matched letter with a combination of the space followed by the letter.
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:40
Hi guys. I'm building a currency exchange app and I need historical data from an API. I've been trying to obtain the data using this jQuery's .ajax() method to no avail. Here's the code
$.ajax({
  type: "GET",
  url:
    "http://currencies.apps.grandtrunk.net/getrange/1999-01-01/2000-01-01/eur/usd?jsonp=callback=?",
  success: function(xhr) {
    console.log(xhr);
  },
  dataType: "jsonp",
  error: function() {
    console.log("Error!");
  }
});
When this runs, I get something about Unexpected syntax: Unexpected number
the data is plain text
the parser stops at the first floating point value after the date
Thanks for any help you provide
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:44
@azdravkovski you are parsing the data as JSONP. try parsing it as plain text instead.
dataType: "jsonp", // the problem is here
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:45
Tried it. It gives me the cross-domain issue
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:45
@azdravkovski do you have a web server?
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:45
No
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:46
when you get that stupid cross domain issue, you have to find a web server and proxy the connection
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:46
This API is poorly documented so I'm not sure what to do. I have no backend knowledge so I don't really know how to set that up.
When I use 'jsonp' as the dataType, the .ajax() call actually works but it doesn't parse the data right
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:48

it doesn't parse the data right

your code doesn't parse the JSONP data.

Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:48
@khanh2003 Right. So how do I parse it?
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:52
  • your code do parse JSON, text, XML, ... but not JSONP. the JS engine parse JSONP, it is allowed to read everything. your code is only allowed to read response from the same domain and sites that support CORS. to circumvent the restriction, you have to use a proxy and host your application on the same domain as the proxy. @azdravkovski
  • there was a very easy to use public proxy called crossorigin.me, but it's gone :worried:
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:54
@khanh2003 I see. Well, that sounds like a royal pain in the neck. Why does it say 'Unexpected syntax: Unexpected number' when I put JSONP as the dataType, though?
hby
@AIWWJ
Aug 16 2017 13:55
I used $.ajax() to loading the data, when scroll the window ,the page is automatically back to the top,anybody can help me!
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:55
@azdravkovski because that's JS engine error. try copy and paste everything here: http://currencies.apps.grandtrunk.net/getrange/1999-01-01/2017-08-16/eur/usd?jsonp=callback=? into a <script> tag in your page and you'll get the same error.
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:56
@khanh2003 OK. Thanks for the clarification.
CamperBot
@camperbot
Aug 16 2017 13:56
azdravkovski sends brownie points to @khanh2003 :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @khanh2003 |http://www.freecodecamp.com/khanh2003
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:57
@azdravkovski don't worry, i'll set up another API endpoint for you. give me 10 min
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 13:58
@khanh2003 You'd be saving me a whole lot of googling, bro. I need to get this app done by Friday. I need the historical exchange rates to populate a dynamic Rickshaw.js chart
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 13:59
@azdravkovski OK, new API endpoint is: https://gist.githubusercontent.com/khanh2003/17aaf6a1893ee7da5c33cd7bf1e81736/raw/8877e9611ecc7cff2ac8a5f9f9c209daf2b64ba9/API%2520endpoint.
Caveat: The data will never change.
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 14:00
@khanh2003 yeah, too bad. I need to modify the URL dynamically and get up-to-date data
Rabin Shrestha
@jyapujuju
Aug 16 2017 14:00
@khaduch thanks
CamperBot
@camperbot
Aug 16 2017 14:00
jyapujuju sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3208 | @khaduch |http://www.freecodecamp.com/khaduch
Huỳnh Trần Khanh
@khanh2003
Aug 16 2017 14:02
@azdravkovski if you want up to date data, set up a project on Glitch and create a HTTP proxy there. It should take you an hour.
Glitch is a free Nodejs hosting
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 14:02
@khanh2003 OK. WIll look into it.
Tanisha Garg
@TanishaGarg
Aug 16 2017 14:33
How can I add a link to another page such that it opens a particular part on that other page?
dinesh
@1532j0004kg
Aug 16 2017 14:53
try it with the link,,,
<a href="url"> link text </a>
Give the header or something of that part of your page an id, then use that id in the location
www.example.com/#theSecondHalf
Tanisha Garg
@TanishaGarg
Aug 16 2017 14:55
@Redmega Ok, Thanks
CamperBot
@camperbot
Aug 16 2017 14:55
tanishagarg sends brownie points to @redmega :sparkles: :thumbsup: :sparkles:
:cookie: 158 | @redmega |http://www.freecodecamp.com/redmega
Daniel Feldman
@Feldbot
Aug 16 2017 16:12
I'm working through the basic algorithms, and am on the Palindrome exercise. I have a couple questions:
  1. I've figured out how to create variables for the words forwards and backwards, but I don't understand how to loop through to check for equivalence. Can anyone offer a basic hint about what this might involve? I wish the hints went a little deeper on the algorithm methods.
  2. When is a good time to ask for help on the challenges? The Read/Search/Ask method doesn't get too in-depth in explaining the methodology. For example, if I search on "Javascript Palidromes" I get all kinds of articles explaining how to solve this type of algorithm, many which provide coded solutions. I don't mind reading to understand the answers, but I feel like I am cheating if I just see solutions as a part of the search. So basically, I'm just curious if anyone has found a good strategy for getting the right level of help when they need it.
Candelario Eguia
@CDEguia
Aug 16 2017 16:15
My two cents would be to ask specific questions like your #1 "looping through veriables"
To answer #1 try a for loop
Daniel Feldman
@Feldbot
Aug 16 2017 16:23
@CDEguia I agree about the loop, but the problem seems pretty complex in that it needs to compare equivalency at the beginning and end of strings, and then they aren't necessarily symmetrical. So what happens if it is checking for equivalency in a palindrome like "mom"? The "o" seems to be an anomaly in that logic. I just don't see the basic premise of how the logic should be constructed.
Kyle Janka
@EverythingEpi
Aug 16 2017 16:34
Hello! I am currently trying to figure out how to shrink my img on larger screens, without making it to small on mobile. https://codepen.io/Everything_Epi/pen/eEeyRz
any ideas on where I can tweak my code?
Jon Marshall
@jmars125
Aug 16 2017 16:36
@EverythingEpi you can do that using media queries for max or min screen width
Kyle Janka
@EverythingEpi
Aug 16 2017 16:37
Is there a good resource I can go and learn media queries? I'd rather not just look up the code haha.
Ah never mind I answered my own question.
Thank you @jmars125
CamperBot
@camperbot
Aug 16 2017 16:39
everythingepi sends brownie points to @jmars125 :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @jmars125 |http://www.freecodecamp.com/jmars125
Jon Marshall
@jmars125
Aug 16 2017 16:39
@EverythingEpi no problem
Kyle Janka
@EverythingEpi
Aug 16 2017 16:48
hmm can't seem to get it to work properly @media screen and (max-width: 600px) {
width: 40%;
}
shouldn't that work?
Jon Marshall
@jmars125
Aug 16 2017 16:51
@media(max-width:600px) {}
Kyle Janka
@EverythingEpi
Aug 16 2017 16:52
Ah thank you!
Jon Marshall
@jmars125
Aug 16 2017 16:52
no problem
Kyle Janka
@EverythingEpi
Aug 16 2017 16:57
hmm, still doesn't want to change it on the mobile side.
Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 17:08
Hi guys. I was wondering if you could help me with something. I have a multidimensional array like so:
var arr = [ ['a', 'b'], ['c', 'd'], ['e', 'f'] ];
What I want to do is write a function that takes in this array and returns an array of objects that follow this pattern:
var newArr = [
  { x: 'a',
    y: 'b'},
  { x: 'c',
    y: 'd'},
...
]
How should I go about this?
Thanks
Also, I wanted it to work for any number of elements in the passed array
Gulsvi
@gulsvi
Aug 16 2017 17:22

@azdravkovski For the example above, you could do:

var arr = [["a", "b"], ["c", "d"], ["e", "f"]];

var newArr = arr.map(function(subArray) {
  return { x: subArray[0], y: subArray[1] };
});

That will handle any number of subarrays as long as the subarrays only have 2 elements. If the subarrays have varying lengths, it's going to get more complicated (what comes after x, y, z?)

Aleksandar Zdravkovski
@azdravkovski
Aug 16 2017 17:26
@SkyC0der that did it, bro. Thanks!
CamperBot
@camperbot
Aug 16 2017 17:26
azdravkovski sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2410 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 17:26

@EverythingEpi You have to declare the class you want to apply the width to inside the media query, for example:

@media (max-width:600px) {
  .img-face {
    width: 200px;
  }
}

^^ That will make your image with class="img-face" 200px wide when the screen is narrower than 600px

@azdravkovski Glad I could help!
Daniel Feldman
@Feldbot
Aug 16 2017 17:40
What role do the brackets play on this regex?
/[\W_]/g;
Gulsvi
@gulsvi
Aug 16 2017 17:44
@Feldbot It means any one of those items in the brackets. In that case, it's the same \W or _
Daniel Feldman
@Feldbot
Aug 16 2017 17:45
@SkyC0der I noticed /\W_/g didn't return the same results. Are the brackets needed because there are more than one criterium it is searching against?
Gulsvi
@gulsvi
Aug 16 2017 17:46
@Feldbot That specifies a \W followed by _, to use it without brackets use a vertical bar for or: /\W|_/g
Daniel Feldman
@Feldbot
Aug 16 2017 17:47
@SkyC0der Aha! Right! Thanks :-)
CamperBot
@camperbot
Aug 16 2017 17:47
feldbot sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2411 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 17:47
No problem :)
Daniel Feldman
@Feldbot
Aug 16 2017 17:48
@SkyC0der So the brackets signify that anything inside is a match, regardless of order?
Gulsvi
@gulsvi
Aug 16 2017 17:49
@Feldbot Yes, that's correct
This is a great tool for testing these things out - and there's a cheat sheet on the right-hand side: http://www.regexpal.com/
Daniel Feldman
@Feldbot
Aug 16 2017 17:56
@SkyC0der That is a great resource—bookmarking that one! I've often marveled at how complex and hard to read regexps are. That might help me wrap my head around them easier.
@SkyC0der That is super cool how he built out his personal dev toolset too in one place, what a great idea!
Hemakshi Sachdev
@hemakshis
Aug 16 2017 18:00
Hey Everyone!
I am really stuck in this thing for like days I need your help now.
My name in the Home page goes down when I click on the toggle button for my nav bar..
actually I want my nav bar above my photo.. nd when I click the toggle button it's content should come above my pic and not push my pic down (not my name also).. please help..... Here's the link
https://codepen.io/hemakshis/pen/jLGQPp?editors=1100
Gulsvi
@gulsvi
Aug 16 2017 18:00
@Feldbot It's a great site! Glad it helped. There are some other similar ones out there too - they're all pretty useful. Like: http://regexr.com/
Gulsvi
@gulsvi
Aug 16 2017 18:11
@hemakshis If you want to use a fixed-top navbar, this problem will go away, but your navbar will always be visible.
You can do that by adding navbar-fixed-top as a class to your initial <nav>

If you don't want a fixed-top navbar, you'll need to make it fixed when at the top of your page. Bootstrap's affix feature is useful for this.
Change your HTML for your nav to:

<nav class="navbar navbar-inverse" data-spy="affix" data-offset="50">

And then add this to your CSS:

.navbar.affix-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar.affix {
  position: relative;
}

Some more info on affix: https://getbootstrap.com/docs/3.3/javascript/#affix

Hemakshi Sachdev
@hemakshis
Aug 16 2017 18:16
@SkyC0der Yes it worked! Thankyou :)
CamperBot
@camperbot
Aug 16 2017 18:16
hemakshis sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2413 | @skyc0der |http://www.freecodecamp.com/skyc0der
BrianWilliams28
@BrianWilliams28
Aug 16 2017 18:26
what's a good way to filter an array of numbers to return 1 of every type of number in the order they appear
Moisés Man
@moigithub
Aug 16 2017 18:28
can u write some input --> output example ? @BrianWilliams28
BrianWilliams28
@BrianWilliams28
Aug 16 2017 18:29
// [1, 3, 2, 5, 2, 1, 4, 2, 1] must equal [1, 3, 2, 5, 4]
Moisés Man
@moigithub
Aug 16 2017 18:31
ok. filter uniques
[...new Set([1, 3, 2, 5, 2, 1, 4, 2, 1])]
BrianWilliams28
@BrianWilliams28
Aug 16 2017 18:32
correct, filtering uniques
in the order they appear]
Moisés Man
@moigithub
Aug 16 2017 18:33
the long version would be.. start with an empty array.. pick 1 number and check if its on the "result"
if not .. then add it
result = [];
[1, 3, 2, 5, 2, 1, 4, 2, 1].forEach(num=>{
       if(! result.includes(num) ) result.push(num)
})
BrianWilliams28
@BrianWilliams28
Aug 16 2017 18:39
um
why is there a => after num?
and an ! before the result.includes(num)) command?
BrianWilliams28
@BrianWilliams28
Aug 16 2017 18:44
is this another way of writting an if statement?
@moigithub it worked but i'm just trying to understand for the future
@moigithub thank you
CamperBot
@camperbot
Aug 16 2017 18:46
brianwilliams28 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3593 | @moigithub |http://www.freecodecamp.com/moigithub
Gulsvi
@gulsvi
Aug 16 2017 18:51

@BrianWilliams28 Closer to the approach you were attempting with Sorted Union:

var arr = [1, 3, 2, 5, 2, 1, 4, 2, 1];
var filtered = arr.filter(function(element, index) {
  return arr.indexOf(element) === index;
});
console.log(filtered); // [1, 3, 2, 5, 4]

More options: https://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array

This is the same with arrow functions:
var arr = [1, 3, 2, 5, 2, 1, 4, 2, 1];
var filtered = arr.filter((element, index) => arr.indexOf(element) === index);
console.log(filtered); // [1, 3, 2, 5, 4]
Christian
@Neralizer
Aug 16 2017 19:07
can anyone give me a hand on my personal portfolio? https://codepen.io/cneral21/pen/qXEQKJ?editors=1000
trying to make three separate div boxes with shadow under skills, not one big box. can anyone tell me why they're all blending together like this?
Gulsvi
@gulsvi
Aug 16 2017 19:11
@Neralizer remove the width settings for your skillBox class - the bootstrap columns are responsive and take care of the width for you. After that CSS change, modify your HTML like this:
    <div class="col-md-4">
      <div class="skillBox"></div>
    </div>
    <div class="col-md-4">
      <div class="skillBox"></div>
    </div>
    <div class="col-md-4">
      <div class="skillBox"></div>
    </div>
Stephen Passero
@stephenpassero
Aug 16 2017 19:12
image.png
Everybody, I'm getting this error. What does it mean?
Christian
@Neralizer
Aug 16 2017 19:14
love it, perfect. thanks @SkyC0der !
CamperBot
@camperbot
Aug 16 2017 19:14
neralizer sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2414 | @skyc0der |http://www.freecodecamp.com/skyc0der
BrianWilliams28
@BrianWilliams28
Aug 16 2017 19:16
@SkyC0der the return line here is returning the index of the element if its equal to the index?
Trommelochse
@Trommelochse
Aug 16 2017 19:18
@stephenpassero seems like you have an infinite loop
check your function checkIfAllButtonsClicked
Gulsvi
@gulsvi
Aug 16 2017 19:19
@BrianWilliams28 Yes, that's correct. It leaves out the ones that don't match the first index of that number
For example, there are three instances of the number 2 in that array. [1, 3, 2, 5, 2, 1, 4, 2, 1] - at index 2, 4, and 7. When you do .indexOf(2) on that array, it will only return the first index that matches (2). The second and third instance of 2 do not have that index, so they are not included in the filtered array.
Stephen Passero
@stephenpassero
Aug 16 2017 19:20
@Trommelochse so that's what it means?
Trommelochse
@Trommelochse
Aug 16 2017 19:20
@stephenpassero it is likely that you have some flaw in your logic in the mentioned function
which causes an infinite loop
Stephen Passero
@stephenpassero
Aug 16 2017 19:20
Ok...
Trommelochse
@Trommelochse
Aug 16 2017 19:27
for furture information on the topic
alpox
@alpox
Aug 16 2017 19:32
@stephenpassero your function just calls itself infinitely. This means that it is caught in always calling itself over and over again which causes a stackoverflow
Luis Jaquez
@LuisJaquez
Aug 16 2017 19:37
This is not related to an FCC but can you help me? I need to make an effect that when I click on a card once I accept a class and the other cards if they have that class are removed and vice versa.
jQuery('document').ready(function() {

  //SCROLLING NAV EFFECT
  jQuery(window).scroll(function() {

    if(jQuery(this).scrollTop() > 0) {
      jQuery('nav').addClass('scrolled');
    } else {
      jQuery('nav').removeClass('scrolled');
    }
  });

  //CARDS CLICK EFFECT
  $('.plan-card').click(function () {

    $('.plan-card').each (function(){
      if ($(this).hasClass('active-card')){
        $('.plan-card').removeClass('active-card');
      }
    });
  });
});
Trommelochse
@Trommelochse
Aug 16 2017 19:38
$('.plan-card').click(function () {
    $('.plan-card').removeClass('active-card');
    $(this).addClass('active-card');
    });
  });
@LuisJaquez
removes the class active-card from all plan-cards
then adds the class to the clicked card
BrianWilliams28
@BrianWilliams28
Aug 16 2017 19:43
@SkyC0der i get it now, it makes sense
@BrianWilliams28 thanks again for all your help
CamperBot
@camperbot
Aug 16 2017 19:43
sorry brianwilliams28, you can't send brownie points to yourself! :sparkles: :sparkles:
BrianWilliams28
@BrianWilliams28
Aug 16 2017 19:43
@SkyC0der thanks*
CamperBot
@camperbot
Aug 16 2017 19:43
brianwilliams28 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2415 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 19:44
No problem!
Luis Jaquez
@LuisJaquez
Aug 16 2017 19:55
@Trommelochse Thank you. Many thanks!! I have spent some time in solving this problem.
CamperBot
@camperbot
Aug 16 2017 19:55
:cookie: 317 | @trommelochse |http://www.freecodecamp.com/trommelochse
luisjaquez sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
Trommelochse
@Trommelochse
Aug 16 2017 19:56
np, my man
the point: there is no need for checking if an element has the class or not. Just grab all of the elements and remove the class collectively. Elements that don't have the class will just remain the same. @LuisJaquez
Luis Jaquez
@LuisJaquez
Aug 16 2017 20:07
@Trommelochse I have two cards but I have to add two more and now I will not have to worry about adding more code.
iso
@iso1048
Aug 16 2017 20:12
@SkyC0der vibrant new profile picture
Gulsvi
@gulsvi
Aug 16 2017 20:26
lol, yeah @gothamknight yellow hair and all
aRtoo
@artoodeeto
Aug 16 2017 20:56
@SkyC0der how you doin master??
Gulsvi
@gulsvi
Aug 16 2017 20:58
@artoodeeto Tito! Doing okay. You?
aRtoo
@artoodeeto
Aug 16 2017 21:01
@SkyC0der lol haha. tito? you filipino bro??
Gulsvi
@gulsvi
Aug 16 2017 21:01
@artoodeeto No, but I saw you speaking Tagalog the other day, pepe :)
aRtoo
@artoodeeto
Aug 16 2017 21:03
@SkyC0der bro. i have a quickie question on algorithm to convert HTML entities.
i have this code. do i need to create a switch case statement? just to convert this &, <, >, " (double quote), and ' ??
function convertHTML(str) {

  var reg = /&/g;

  return str.replace(reg,'&amp;');
}

convertHTML("&");
Gulsvi
@gulsvi
Aug 16 2017 21:04
just use .replace().replace() and keep chaining it all together
that's what I did
aRtoo
@artoodeeto
Aug 16 2017 21:04
@SkyC0der ohh. you understand tagalog. dont call us pepe. thats mexican. call us totoy for males. inday for females. haha
Gulsvi
@gulsvi
Aug 16 2017 21:05
Oh, I thought pepe was short for rafael
aRtoo
@artoodeeto
Aug 16 2017 21:05

@SkyC0der

return str.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

like this?? lool?? this is cheating right?

Gulsvi
@gulsvi
Aug 16 2017 21:05
Yep like that ^ not cheating :)
aRtoo
@artoodeeto
Aug 16 2017 21:06
@SkyC0der haha. no no no. if youre talking to a filipino male and you dont know the name call them totoy. for female inday. hahah
Gulsvi
@gulsvi
Aug 16 2017 21:06
okay, lol
aRtoo
@artoodeeto
Aug 16 2017 21:07
@SkyC0der aight. kinda easy solution but i like it. just one line. lol
Gulsvi
@gulsvi
Aug 16 2017 21:07
Yep, on to the next one @artoodeeto lol
aRtoo
@artoodeeto
Aug 16 2017 21:09
@SkyC0der yep. thanks bro. thanks totoy
CamperBot
@camperbot
Aug 16 2017 21:09
artoodeeto sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2416 | @skyc0der |http://www.freecodecamp.com/skyc0der
Elias Cygnus
@eliascygnus
Aug 16 2017 21:12
sup guys
what grid are u using? i tested neat and it's using float, i was like- wtf?
Gulsvi
@gulsvi
Aug 16 2017 21:15
@eeeeeek We learn bootstrap 3 here at Free Code Camp, but many have moved to Bootstrap 4's flexbox grid. Floats still needed for older browsers I believe.
Travis Boss
@travisboss
Aug 16 2017 21:15
i want to get more in to neat, we use bootstrap 3 at work but they are open to other options.
Elias Cygnus
@eliascygnus
Aug 16 2017 21:19
bootstrap is a shit
i just was wondering why neat is a think but it's using damn floats
if i want to scaffold fast mock up from upwork etc. i don't need bootstrap
Chris
@bestintown23
Aug 16 2017 21:23
Good Afternoon, can anyone help with my slideshow, the slides are not showing in the correct timing and i cannot figure out why. https://codepen.io/bestintown23/pen/wqrPvy
Travis Boss
@travisboss
Aug 16 2017 21:27
@bestintown23 start by analyzing your code from the right dropdown on codepen and see the errors and work from there. i think a slideshow would be best through some jquery.
Caleb Brenner
@cwborion
Aug 16 2017 21:28

any chance someone could tell me why my <h1> element isn’t showing up?

https://codepen.io/Calebwill91/pen/MvryOE

Chris
@bestintown23
Aug 16 2017 21:31
@travisboss thanks
CamperBot
@camperbot
Aug 16 2017 21:31
bestintown23 sends brownie points to @travisboss :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @travisboss |http://www.freecodecamp.com/travisboss
aRtoo
@artoodeeto
Aug 16 2017 21:32
@SkyC0der yow bro!! help again. how do you put multiple regular exp.
lets say you need white space and underscore? white space this \s and underscore [_]
for my code i have this.
both doesnt work. i tried putting , in between s and [

function spinalCase(str) {

  var reg = /\s[_]/gi;

  return str.replace(reg,'-');
}

//spinalCase("This Is Spinal Tap");//should return "this-is-spinal-tap".
//spinalCase("thisIsSpinalTap"); //should return "this-is-spinal-tap".
spinalCase("The_Andy_Griffith_Show"); //should return "the-andy-griffith-show".
Gulsvi
@gulsvi
Aug 16 2017 21:33
@cwborion Add padding-top: 75px; to your body element
body {
  background-color: #eaf0f2;
  font-family: 'Oswald', sans-serif;
  margin: 0px;
  padding-top: 75px;
}
Your fixed top navbar is hiding your title: <h1>Welcome to the News</h1>
Caleb Brenner
@cwborion
Aug 16 2017 21:36
@SkyC0der thank you!
CamperBot
@camperbot
Aug 16 2017 21:36
cwborion sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2417 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 21:36
@cwborion no problem! If you change the height of your navbar, change that padding to match :)
aRtoo
@artoodeeto
Aug 16 2017 21:54
@SkyC0der bro how about the capital letters after? i have this. var reg = /[\s_^A-Z]/gi; it will change everything to `------- though
Luke Miller
@dalumiller
Aug 16 2017 22:07
Hey, just finished the Pomodoro Clock; any feedback would be great! https://codepen.io/dalumiller/full/OjOvLp/
Sue
@coding-sue-true
Aug 16 2017 22:14
Hi everyone... I need some help with bootstrap!
Gulsvi
@gulsvi
Aug 16 2017 22:16
@artoodeeto This is a good website to help you figure that regex out: http://www.regexpal.com/
@coding-sue-true What's the question?
Sue
@coding-sue-true
Aug 16 2017 22:18
I'm currently doing an assignment for coursera
I need to do something like this
image.png
and I have this
image.png
I have three questions
1- How can I center the card? I tried mx-auto, tried some other css code, tried inline style.. and I just simply cannot center it!
2- In order for the radio icons be equally distributed how it's supposed to, what do I have to do? maybe apply a class and use padding?
3- I've been spending the last couple of days to try to make my date and time options like the one of the example.. but I don't know how to do it. I give up!
Gulsvi
@gulsvi
Aug 16 2017 22:21
@coding-sue-true I'm guessing the assignment wants you to consider some specific features of bootstrap. Is it bootstrap 4 or 3?
Sue
@coding-sue-true
Aug 16 2017 22:21
4
Gulsvi
@gulsvi
Aug 16 2017 22:21
Either way - you can center the card with column offsets, but if you need to avoid those, I need to see how you set up the surrounding code to give other options
Sue
@coding-sue-true
Aug 16 2017 22:22
@SkyC0der yes, I know that's what they want...
let me send you my code
    <div class="row row-content">
        <div class="col-8">
            <div class="card">
                <h3 class="card-header text-white">Reserve a Table</h3>
                <div class="card-block">
                    <dl class="row">
                        <dt class="col-md-2">Number of Guests</dt>
                        <dd class="col-md-10">
                            <label class="radio-inline"><input type="radio" name="optradio">1</label>
                            <label class="radio-inline"><input type="radio" name="optradio">2</label>
                            <label class="radio-inline"><input type="radio" name="optradio">3</label>
                            <label class="radio-inline"><input type="radio" name="optradio">4</label>
                            <label class="radio-inline"><input type="radio" name="optradio">5</label>
                            <label class="radio-inline"><input type="radio" name="optradio">6</label>
                        </dd>

                        <dt class="col-md-2">Date and Time</dt>
                        <dd class="col-md-5">
                            <div class="display-inline">
                                <div class="input-group-addon col-md-4"><i class="fa fa-calendar"></i></div><input class="form-control col-md-8" id="areacode" name="date" placeholder="Date">
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
Gulsvi
@gulsvi
Aug 16 2017 22:23
@coding-sue-true Change <div class="col-8"> to <div class="col-8 offset-2">
Sue
@coding-sue-true
Aug 16 2017 22:25
wohoooow, it's centered! @SkyC0der thank you for this simple thing
CamperBot
@camperbot
Aug 16 2017 22:25
coding-sue-true sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2418 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 16 2017 22:25
Glad that helped
Sue
@coding-sue-true
Aug 16 2017 22:25
now my biggest challenge is really the date
Alexandro Pequeno
@Argestis
Aug 16 2017 22:26
Hi everyone.
Gulsvi
@gulsvi
Aug 16 2017 22:26
I haven't worked with date pickers before :/
Sue
@coding-sue-true
Aug 16 2017 22:26
but it's not really to pick
I just want to put the font-awesome icon on the same line as the placeholder 'date'
but once I have to use the class="input-group-addon" I cannot workout how to put everything on the same line like they ask me to
Alexandro Pequeno
@Argestis
Aug 16 2017 22:28
Do you guys know how to target content inside a Div. I'm trying to change multiple tags and content inside an specific div, but that div has the same name as other divisions as the content is dynamic. I'm trying to target that 'div' and then be able to change what's inside. Any ideas?
Sue
@coding-sue-true
Aug 16 2017 22:29
hi @Argestis
I'm very new at this, but what comes to my mind is
1- you can just simply give it a class and then call that class on your css code and change it
2- you can try to do inline style but that's not very friendly in the future and is always something to avoid
3- on your css code, since you have a lot of divs with the same name, if your code is well structured you can do something like
(on your css)
give different classes and then call them -> .class1 .class2 .class3 { background-color: red;}
Sue
@coding-sue-true
Aug 16 2017 22:34
that is like calling your third div and only change its background color
Ed Sztukowski
@Burgustu
Aug 16 2017 22:35
@Argestis Do you have an example?
Something is probably specific about the content in that div, right?
Alexandro Pequeno
@Argestis
Aug 16 2017 22:37
One sec guys! Throw my water all over the desk D:
brb
aRtoo
@artoodeeto
Aug 16 2017 22:49
is my fibonaci correct?

function sumFibs(num) {

  var frst = 0;
  var scnd = 1;
  var res = 0;

  for(var i=0; i<num; i++){
    res = frst + scnd;
    frst = scnd;
    scnd = res;
  }


  return res;
}

sumFibs(4);
Elizabeth Paul
@Kowalatam
Aug 16 2017 22:59
@artoodeeto so urs doesnt sum only odd ?
aRtoo
@artoodeeto
Aug 16 2017 23:13
@Kowalatam no bro this is just for me bro to practice
Elizabeth Paul
@Kowalatam
Aug 16 2017 23:16
@artoodeeto okay.. but what is your goal then
aRtoo
@artoodeeto
Aug 16 2017 23:26
@Kowalatam nothing just testing if im right or not. because i saw this calculator is different from my answer