These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Dec 2017
Brian
@BrianCodes33
Dec 01 2017 03:38
why isn’t this console logging
  $(".close a").click(function(e){
      e.preventDefault();
      console.log('click');
    });
Saboor Malik
@ProgrammingForFun01
Dec 01 2017 03:42
@BrianCodes33 This is working for me
I am not sure what you are trying to do but I tested in codepen and it does log "click" in the console
Are you working on a pen?
Sorry but I haven't programmed a while and don't know much about functions
I'm trying to create this
But my button does not appear
abraham anak agung
@padunk
Dec 01 2017 04:24
@Kamran14 you forgget = at for (var i = 0; i <= 6; i++){ your i will stop at 5
Ken Haduch
@khaduch
Dec 01 2017 05:18
@Kamran14 - and you have to create this totally with javascript?
Kamran Tayyab
@Kamran14
Dec 01 2017 05:40
Thats the aim
@khaduch Getting stuck on some parts...
Ken Haduch
@khaduch
Dec 01 2017 05:44
@Kamran14 - it might help if you make some functions to do some of the repetitive things, like create the input elements? Try to think of some ways to simplify the code - it looks like you're getting off to a good start getting the basic table set up? Anything in particular that you are stuck with?
Kamran Tayyab
@Kamran14
Dec 01 2017 05:45
@khaduch The 'undefined' was a button with the text 'One year passes'
But its no longer there and I'm trying to figure out what I'm doing wrong
And there is a button on the other column or some reason too
Ken Haduch
@khaduch
Dec 01 2017 05:48
@Kamran14 - you have to be careful how you are using the var test - each time you run that code, you are creating a variable that only has a block scope - so it will only be seen within a code block.
Kamran Tayyab
@Kamran14
Dec 01 2017 05:51
Fixed the button issue
Ken Haduch
@khaduch
Dec 01 2017 05:52
@Kamran14 - and you have to watch out for conflicts in what you are trying to create - if you keep using test for different elements, you have to make sure that it doesn't get clobbered later in the code.
Kamran Tayyab
@Kamran14
Dec 01 2017 05:55
@khaduch How would you go about doing the table?
Its frustrating because I'm just making a bunch of if statements
Ken Haduch
@khaduch
Dec 01 2017 06:00

@Kamran14 - that's good that you fixed the button issue. I'm going to have to log out - late here for me... good luck getting that to work!

I would try and make some functions that would do the repetitive tasks, like creating input elements. You could pass the values to it and have it return the created elements, for example. I might also think about separating the generation of each column, storing the contents that will go into the table td element in arrays, and at the end just output the table and append the contents from the arrays. It would clean up some of the confusion about what is going on in the loop. Functions would help to avoid replication of code, and having the table data contents generated into arrays would simplify the output of the table at the end - you would just be creating the appropriate number of table rows and table data elements, and append the generated contents in each one.

crpdomingues
@crpdomingues
Dec 01 2017 07:45
hi guys
anyone willing to help me with a question?
Markus Kiili
@Masd925
Dec 01 2017 07:50
@crpdomingues You can just post the question here. Usually someone answers.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 01 2017 08:22
@khaduch Just a note, var is not really bound to the block scope contrary to let. A little example:
09:21:21.973 if (true) {
   var test = 'Hello World';
}
console.log(test);   // Hello World
if (true) {
   let test_2 = 'Hello\nWorld';
}
console.log(test_2); // ReferenceError: test_2 is not defined
ADIL KARMOUZI
@mradil16
Dec 01 2017 08:49
What do you recommend guys for my portfolio .
Include HTML templates (.html) OR wordpress templates ?
Jake
@JakeDVirus
Dec 01 2017 10:13
This message was deleted

There is an error in the last line of the code stating :

Uncaught TypeError: Cannot read property 'removeClass' of undefined

why it is that there is no error in last-2nd and last-3rd line, but in the last-line?
What's going on here?

    var scrolling = {
        a : 9,
        b: 1,
        z: [0,1],
        $headerComponent : $(".header-wrapper"),

        funcInEvent1: function() {
            this.$headerComponent.removeClass("duringScroll-header");
            scrolling.$navButton.removeClass("duringScroll-hamburger");
        },
        rough: function(){
            var a = this.z; 
            console.log(a);
        }
    };

    $(window).on("scroll", function(){
        console.log(scrolling.$headerComponent); // <----- NO ERROR (object)
        scrolling.rough(); <----- NO ERROR ( [0,1] );
        window.setTimeout(scrolling.funcInEvent1, 300); <------ ERROR
    }
primuscovenant
@primuscovenant
Dec 01 2017 10:28
@heroiczero thx
CamperBot
@camperbot
Dec 01 2017 10:28
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2085 | @heroiczero |http://www.freecodecamp.org/heroiczero
Cristi Ciobanu
@c-ciobanu
Dec 01 2017 11:22
hey i can't get ahead of why the form is wider then the div it's inside https://codepen.io/c-ciobanu/pen/bYOwZm
someone can get a look?
when the screen width is less than 1060px
Dmytro Holysh
@dmk1111
Dec 01 2017 11:26
@c-ciobanu Why don't you use flexboxes?
Cristi Ciobanu
@c-ciobanu
Dec 01 2017 11:26
i wanted to do this with the floats
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 01 2017 11:41
@NeelDVirus Do you have a codepen with this code so it is easier to test for us?
Stephen James
@sjames1958gm
Dec 01 2017 11:50
@NeelDVirus scrolling.funcInEvent1 this is a function reference, but does not maintain any context to scrolling
So this is undefined when called by the window timeout.
You should do scrolling.funcInEvent1.bind(scrolling); to get a function reference with the correct this binding.
Markus Kiili
@Masd925
Dec 01 2017 11:51
@sjames1958gm This case was discussed extensively on https://gitter.im/FreeCodeCamp/HelpJavaScript
Stephen James
@sjames1958gm
Dec 01 2017 11:52
@Masd925 Ah, just waking up here :)
Brandon M.
@brandon6190
Dec 01 2017 12:30
Quick question...Is It wise to start applying for a junior front end position even though I've been learning for 3 months?
thomasdanner
@thmsdnnr
Dec 01 2017 12:59

@NeelDVirus @sjames1958gm Stephen's right-on :thumbsup: here's a good overview of the details of this and bind in this case (a tricky part of JS: https://stackoverflow.com/a/591343).

One other thing Neel: I don't know if you define the .$navButton property of scrolling elsewhere, but if this code is the only place you touch scrolling, you're referencing an undefined property, so it's not going to have a removeClass method.

Stephen James
@sjames1958gm
Dec 01 2017 13:00
@brandon6190 If you can handle the rejections and you are up front about yourself, I can't see why it would be a problem.
@brandon6190 I would make sure that I had viewable created content, say github, that you can reference.
Ekam Walia
@kelsier27
Dec 01 2017 13:05
Hey guys!
I am trying to make a clone of an e-commerce cite using node for backend and react as the frontend framework
But I can't find a good way to structure the project
Can someone point me to some good resources to set up the working environment in accordance with best developer practices?
Teo
@Teo03
Dec 01 2017 14:16
Can someone help me with Simon game? I'am trying to make a function to allow the user to click only after a random computer move was made. Here is a link: https://codepen.io/Teo03/pen/yPvbwY
Ken Haduch
@khaduch
Dec 01 2017 14:47
@Teo03 - after the computer makes its new move, you have to have the buttons enabled to get a click event, and that would be where you trigger the user's action. You cannot have your click handlers being assigned multiple times, as it seems you have in your function user(). The general idea would be to have the buttons disabled while the computer was moving or playing the sequence of moves that have already taken place, and then enable them for a user click, the click handler taking you to the next function that would check the sequence, and then re-invoke the computer operations. As it is now, within your function user() you are adding click handlers each time you call it. That will result in undesirable behavior because each click will then call the callback as many times as you've added handlers. In other words, you want to assign the click handlers to the buttons only once, and then use other means to control the action that takes place - enable/disable the click from being processed, or ignore clicks that should be ignored while the computer sequence is taking place, etc.
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 15:09
hi all, I am trying to make a calculator app, and I want to use SCSS for it.
I have a question, not really related to SCSS
here's my app
how do I make the space between the C and * at the bottom of the application?
I did that by adding an extra button, and set it to visibility hidden
is that right?
I tried using: float: right, on the last button, but it doesn't align well with the buttons above
Kaz Baig
@kbaig
Dec 01 2017 15:16
@brittanyrutherford you could wrap the space where the empty space and the * are in a div and use flexbox to align
or you could just use css grid for the whole calc
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 15:18
if I wanna do it with float right?
what else do I need to do to make it aligned the right way
Kaz Baig
@kbaig
Dec 01 2017 15:18
you could do it with float by wrapping a div yeah
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 15:23
@kbaig it doesn't work
the alignment is still not working
see
Kaz Baig
@kbaig
Dec 01 2017 15:25
You need to also set the div to the dimensions of the empty space + * button
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 15:36
i think my problem is with aligning the buttons in the middle
u see the red background i added now? how do I align the buttons in the middle of the red background?
Tom
@moT01
Dec 01 2017 15:53
@brittanyrutherford why dont you just put the = button in there and you dont need to worry about the space there
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 15:54
yeah, but I am thinking if I want to add more functions to it, and if I'll end up with this scenario of having to align it to the right
@moT01
Teo
@Teo03
Dec 01 2017 15:56
@khaduch Thanks a lot, I will try to do it
CamperBot
@camperbot
Dec 01 2017 15:56
teo03 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3550 | @khaduch |http://www.freecodecamp.org/khaduch
Tom
@moT01
Dec 01 2017 15:56
well, i hate floats
flexbox is good for centering things
or if you just want horizontal center you can just use text-center
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 16:12
@moT01 thanks, but why do we have 2 nested divs for that row? both with class flex?
CamperBot
@camperbot
Dec 01 2017 16:12
brittanyrutherford sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Dec 01 2017 16:14
so the flex i gave it there will spread its children out equally (space-between)
the inner div is 50% width
so those two will spread out in that 50%
i dunno
something like that
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 16:17
so why wasn't the * button aligned to the left? how was it pushed to the right like that?
Tom
@moT01
Dec 01 2017 16:19
the row is flex
and the space between property i gave it
spreads the items to the edges
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 16:20
ahaa
that's the trick
hmm
Tom
@moT01
Dec 01 2017 16:20
check out the picture in the link i sent
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 16:20
neat
i'll start using it then
so u use that instead of floats, like what am doing already?
Tom
@moT01
Dec 01 2017 16:21
well, i havent come across a spot where i've needed a float
im sure theres a place for them
probly just cause i dont know how to use them
this video was helpful for me https://www.youtube.com/watch?v=G7EIAgfkhmg
Brittany Rutherford
@brittanyrutherford
Dec 01 2017 16:44
thanks @moT01
CamperBot
@camperbot
Dec 01 2017 16:44
brittanyrutherford sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Deepak Manjunath
@Deepak2322
Dec 01 2017 16:55
i have an element, which is set to display none, but when i check for its visibilty using javascript. it return's me true. shouldn't it return me false ?
Kaz Baig
@kbaig
Dec 01 2017 16:56
@Deepak2322 you mean you're checking for the visibility style attr? that's a diff attr
Deepak Manjunath
@Deepak2322
Dec 01 2017 17:00
i have a tooltip which is set to display :none, i want hide it on click of document. so i have to check for its visibility.but on ready it return's me true. it should return true only if element is visible. that is when element has display:block
Kaz Baig
@kbaig
Dec 01 2017 17:01
Sharing code would help.
Deepak Manjunath
@Deepak2322
Dec 01 2017 17:04
isInViewport(element) { var rect = element.getBoundingClientRect(); var html = document.documentElement; return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || html.clientHeight) && rect.right <= (window.innerWidth || html.clientWidth) ); }
i use this function to check visibility
i am working on polymer app, dont know how to setup the dependencies and share
Kaz Baig
@kbaig
Dec 01 2017 17:11
pretty sure getBoundingClientRect will return dimensions even if it's set to display: none...
Why not check visibility through other means
like checking if display is none or block
AbrisM
@AbrisM
Dec 01 2017 17:39
api offline?
Linus Phan
@linusphan
Dec 01 2017 18:50
Has anyone solved this challenge before? https://www.freecodecamp.org/challenges/falsy-bouncer
I'm not catching the NaN.. this is my code so far :smile:

function bouncer(arr) {
  // Don't show a false ID to this bouncer.
  var newArr = arr.filter(function(val) {
    switch (val) {
      case false:
      case null:
      case 0:
      case "":
      case undefined:
      case NaN:
        return false;
      default:
        return true;
    }
  });
  return newArr;
}

bouncer([false, null, 0, NaN, undefined, ""]);
Linus Phan
@linusphan
Dec 01 2017 19:02
I came up with a solution. It might not have been the prettiest though
AbrisM
@AbrisM
Dec 01 2017 19:15
Hello all
Any suggestions of creating a game using only CSS/Javascript/HTML? No libraries can be used or external sites
Kaz Baig
@kbaig
Dec 01 2017 19:32
@AbrisM canvas is a decent option
AbrisM
@AbrisM
Dec 01 2017 19:49
Yes, I believe Canvas should be OK
Helder S Ribeiro
@hsribei
Dec 01 2017 19:56

Does anyone have an idea why this works

Array.prototype.concat([1], [2]);
// => [1, 2]

But not this

[[1], [2]].reduce(Array.prototype.concat, []);
// => Uncaught TypeError: Array.prototype.concat called on null or undefined

?

Kaz Baig
@kbaig
Dec 01 2017 19:59
@hsribei did you try replacing the callback with an anonymous function that returns concat and logging the parameters in reduce
Helder S Ribeiro
@hsribei
Dec 01 2017 20:04

@kbaig good suggestion. this seems even weirder to me:

[[1], [2]].reduce((a, b) => console.log(a, b));
// => [1], [2]
[[1], [2]].reduce((a, b) => Array.prototype.concat(a, b));
// => [1, 2]

Why does wrapping the concat function in an anonymous function work, but not using it directly as it has the same two parameters?

Kaz Baig
@kbaig
Dec 01 2017 20:07
@hsribei only thing we haven't tested now (I think) is initializing with [] in those reduce calls
what gets logged if you add the init param
Helder S Ribeiro
@hsribei
Dec 01 2017 20:09

@kbaig

[[1], [2]].reduce((a, b) => Array.prototype.concat(a, b), []);
// => [1, 2]

This works as expected, since reduce takes the first element if no initial value is passed.

Kaz Baig
@kbaig
Dec 01 2017 20:17
@hsribei I'm stumped then lol
Helder S Ribeiro
@hsribei
Dec 01 2017 20:18
@kbaig kkkk i guess i'll file this as js being js :D thanks for helping me isolate the problem though. the anon fn solution worked well ✌️
CamperBot
@camperbot
Dec 01 2017 20:18
hsribei sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Dec 01 2017 20:18
:+1:
juni
@junipberry
Dec 01 2017 20:18
hey guys, I’ve made my first kata but I’m having all sorts of problem with the testing part. Can someone take a look and offer advice. I
Feel stuck at this point.
Tom
@moT01
Dec 01 2017 20:20
@junipberry k, now whats your username and password
juni
@junipberry
Dec 01 2017 20:21
this is what I have of the test part.
Test.describe("Basic Tests", function(foods){
let vegetarian="";
for (let i=0; i<foods.length; i++){
let meats=("chicken", "beef", "lamb", "pork");
if(foods[i]=== meats){
vegetarian += meats.replace(/meats/g, "tofu");
  Test.assertEquals(vegetize('fennel'), 'fennel');
  Test.assertEquals(vegetize('chicken'), 'tofu');
  }
  });
full solution:
function vegetize(foods){
let vegetarian="";
let meats=("chicken", "beef", "lamb", "pork");
for (let i=0; i<foods.length; i++){
if(foods[i]=== meats){
vegetarian += meats.replace(/meats/g, "tofu");
} else {
return;
}
return vegetarian;
} 
}
Tom
@moT01
Dec 01 2017 20:24
@junipberry whats the problem - what are you supposed to do
juni
@junipberry
Dec 01 2017 20:25
Im replacing all meats with “tofu"
but unsure if my testing is doing what its supposed to do
Tom
@moT01
Dec 01 2017 20:27
im not very familiar with code wars - why are there two functions
or two areas
juni
@junipberry
Dec 01 2017 20:28
one is to run fixed tests, and the other is the full solution. The solution should pass the provided test cases.
Tom
@moT01
Dec 01 2017 20:30
well, im not sure ive seen a variable in parenthesis like meats
not sure what that does
juni
@junipberry
Dec 01 2017 20:30
But I’m probably not doing the test cases right. So I wanted some advice on fixing it
Tom
@moT01
Dec 01 2017 20:30
supposed be an array?
juni
@junipberry
Dec 01 2017 20:33
yes, you’re right. I’ve fixed that now
but tests are still a jumble
Tom
@moT01
Dec 01 2017 20:38
whats the description of what you're supposed to do
Jessie Cryer
@j-cryer
Dec 01 2017 20:41

hey whats up, can i get a little help with the Falsy Bouncer challenge? Here's my code:

function bouncer(arr) {

  return arr.filter(function(val) {
    return val !== false && val !== null && val !== 0 && 
      val !== "" && val !== undefined && isNaN(val) !== true;
  });
}

bouncer([7, "ate", "", false, 9]);

I'm having problems with the isNaN statement. I'm wondering if anyone knows something clever to get around the fact that isNaN(val) is going to return true for any string type. for example: "ate" is filtered from the array and that's not the behavior im looking for.

I've tried (isNaN(val) !== true && typeof(val) !== 'string') to no avail
Bartek Lewandowski
@Jabarlew
Dec 01 2017 20:44
thank you @moT01 again
CamperBot
@camperbot
Dec 01 2017 20:44
jabarlew sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 923 | @mot01 |http://www.freecodecamp.org/mot01
Jessie Cryer
@j-cryer
Dec 01 2017 20:49
I've easily formulated a solution but I can't help but feel there's something more elegant. Here's what I have.
function bouncer(arr) {

  return arr.filter(function(val) {
    if (typeof(val) === "number") {
      return val !== false && val !== null && val !== 0 && val !== "" && val !== undefined && isNaN(val) !== true;
    } else {
      return val !== false && val !== null && val !== 0 && val !== "" && val !== undefined;
    }
  });
}
Kaz Baig
@kbaig
Dec 01 2017 21:17
@hsribei oh interesting thanks for letting me know
CamperBot
@camperbot
Dec 01 2017 21:17
kbaig sends brownie points to @hsribei :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @hsribei |http://www.freecodecamp.org/hsribei
Linus Phan
@linusphan
Dec 01 2017 21:42
Does anyone here understand what the "in place" means in here: "The sort() method sorts the elements of an array in place and returns the array. The sort is not necessarily stable." ??
@j-cryer

function bouncer(arr) {
  // Don't show a false ID to this bouncer.
  var newArr = arr.filter(function(val) {
    if (Number.isNaN(val)) {
      return false;
    } 
    else {
      switch (val) {
        case false:
        case null:
        case 0:
        case "":
        case undefined:
          return false;
        default:
          return true;
      }
    }
  });
  return newArr;
}

bouncer([false, null, 0, NaN, undefined, ""]);
That was my solution
alpox
@alpox
Dec 01 2017 21:47
@hsribei There is some way you can use in a similar way though. Just not using reduce:
Array.prototype.concat.apply([], arr) does the same as you wanted to do with reduce there.
@linusphan in place means that the sort works on the array directly and the resulting sort will not be returned from the function.
So when you do arr.sort(), arr will be sorted afterwards. arr.sort() itself has no return value.
This is in opposite to a function which would work the way that arr.sort() would return the sorted array, but arr would not be itself affected by the sort.
@linusphan About your solution, And yours: @j-cryer : there is a much more elegant way - which was actually what they wanted you to learn with this exercise

@linusphan @j-cryer The thing is that this would already work:

return arr.filter(function(val) { return val; });

Or even just

return arr.filter(Boolean);
alpox
@alpox
Dec 01 2017 21:52
@linusphan @j-cryer The reason for this is that all values in javascript have a truthy/falsy meaning when used as/in a condition.
Linus Phan
@linusphan
Dec 01 2017 21:53
@alpox Thank you so much. And wow, I'm not sure how the Boolean callback function would work
CamperBot
@camperbot
Dec 01 2017 21:53
linusphan sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1475 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Dec 01 2017 21:53
So the values you had to test for: false, null, 0, NaN, undefined, "" are all FALSY in a context of a condition - so there is no need to test for either of them further for them to evaluate to falsy.
ALL other values are truthy by default.
@linusphan Boolean is a function which takes any javascript value and just returns true for truthy values and false for falsy values
Its so to say the "constructor" of a boolean
Linus Phan
@linusphan
Dec 01 2017 21:54
return arr.filter(Boolean);
Is the "Boolean" argument the callback function? So... each of the arr arguments are being tested by Boolean?
Kaz Baig
@kbaig
Dec 01 2017 21:54
@alpox coming in here to clear house like a CS madman
Linus Phan
@linusphan
Dec 01 2017 21:55
okay interesting, thanks
I'm not used to seeing that
alpox
@alpox
Dec 01 2017 21:55
@linusphan Yes exactly. You can see the function Boolean as defined through:
function Boolean(arg) {
    return !!arg;
}
@kbaig :wave: hio
Linus Phan
@linusphan
Dec 01 2017 21:56
Lol did you just double negate ?
alpox
@alpox
Dec 01 2017 21:56
@linusphan Be sure to see the !! as logical not not
Yes i did indeed
Linus Phan
@linusphan
Dec 01 2017 21:56
is that necessary?
And I just went back and changed my solution
holy moly xD
My sol'n was very inelegant
alpox
@alpox
Dec 01 2017 21:57
It just shows what actually happens - the not not is surely not necessary when using a condition, but it forces the value to evaluate to an actual boolean value (truth value)
So any truthy value would become the boolean true and any falsy value would become the boolean false
AbrisM
@AbrisM
Dec 01 2017 21:57
Does anyone know how to align text without using the <center> tags?
Linus Phan
@linusphan
Dec 01 2017 21:57
ohhhhhhhhhhhh
@alpox geez thank you so much
CamperBot
@camperbot
Dec 01 2017 21:58
linusphan sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
Linus Phan
@linusphan
Dec 01 2017 21:58
it's so cool to be learning
Kaz Baig
@kbaig
Dec 01 2017 21:58
@AbrisM css: text-align: center;
alpox
@alpox
Dec 01 2017 21:58
Because if you negate any value in javascript, it evaluates to a boolean. But its negated. So you can negate it again to become the actual boolean value it should represent @linusphan
Linus Phan
@linusphan
Dec 01 2017 21:58
@alpox I get it now :)
alpox
@alpox
Dec 01 2017 21:58
@linusphan Np :D good!
Kaz Baig
@kbaig
Dec 01 2017 21:58
center tag is not html5
Linus Phan
@linusphan
Dec 01 2017 21:59
Alright, today I'll probably be on here for a while
and ask questions because I have 2 more challenges to go
on the basic algorithm challlenges
AbrisM
@AbrisM
Dec 01 2017 21:59
Thanks
Linus Phan
@linusphan
Dec 01 2017 21:59
I want to get done with both and then hopefully finish teh next section
to move onto the intermediate challenges
alpox
@alpox
Dec 01 2017 21:59
@linusphan okay :D i may or may not answer but there are multiple people here which sure like to help
Linus Phan
@linusphan
Dec 01 2017 22:00
@alpox Thanks!!
CamperBot
@camperbot
Dec 01 2017 22:00
linusphan sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
AbrisM
@AbrisM
Dec 01 2017 22:00
for html? It's just for one section
alpox
@alpox
Dec 01 2017 22:00
@AbrisM The center tag does not exist in the html standard anymore and if it still works for certain browsers its only because of legacy compability
AbrisM
@AbrisM
Dec 01 2017 22:01
Lol yes
I found it
It's <h1 align="center">Placetexthere</h1>
Kaz Baig
@kbaig
Dec 01 2017 22:01
Still preferable to use text-align
AbrisM
@AbrisM
Dec 01 2017 22:01
<center> is obstelete
Kaz Baig
@kbaig
Dec 01 2017 22:02
yes
text-align is styling
not a tag or an html attribute
Amr Elsekilly
@amrsekilly
Dec 01 2017 22:03
@kbaig I guess the align property too is obsolete in HTML5, it’s better to use text-align in your stylesheets instead.
Kaz Baig
@kbaig
Dec 01 2017 22:04
Indeed
AbrisM
@AbrisM
Dec 01 2017 22:11
Anyone know how to display a banner-logo for an h1 tag in html?
I've tried <h1 style="background-image:url('Banner.png')"></h1> but it makes the banner disappear
Kaz Baig
@kbaig
Dec 01 2017 22:14
@AbrisM try removing apostrophes
AbrisM
@AbrisM
Dec 01 2017 22:15
got it
Now to stretch the image across the page without loosing resolution
Kaz Baig
@kbaig
Dec 01 2017 22:26
you don't
lol
not unless you're using an SVG
AbrisM
@AbrisM
Dec 01 2017 22:29
https://codepen.io/anon/pen/KyJKZW this is what i'm working on
@kbaig lol, I saw a site that had the banner extended though. So there isn't a way to do it?
Kaz Baig
@kbaig
Dec 01 2017 22:31
sure but of course when you stretch an image beyond its size, it's going to lose quality
AbrisM
@AbrisM
Dec 01 2017 22:32
Yes, that's what I'm afraid of hahaha
So I saved it in .png. It should reserve atleast some of the quality
Kaz Baig
@kbaig
Dec 01 2017 22:33
file format isn't really going to affect stretching
Jonathan Cunanan
@jcunanan05
Dec 01 2017 22:35
hello what did i do wrong i at centering vertically i was trying it my own and i copied and paste the code from the solution from stackoverflow
heres my codepen: https://codepen.io/jcunanan05/pen/gWmraE
here's what im referencing to: https://codepen.io/anon/pen/ZYprdb
Kaz Baig
@kbaig
Dec 01 2017 22:39
@jcunanan05 .content is the only thing within .container, so .container's size is dtermined by .content's size
so it is centered, it just won't show since it is 100% the size of its parent
Ryan Williams
@Ryanwfile
Dec 01 2017 22:42
What would be the best way to center the 3 carousel divs in this pen, maintaining the column just in the center of the page? https://codepen.io/Ryanwfile/pen/MOOMpO Thank you very much for any help.
Jonathan Cunanan
@jcunanan05
Dec 01 2017 22:48
thanks @kbaig i tried putting a min-height but when i try to copy the other codepen link i fail, but he did it haha :( :)
CamperBot
@camperbot
Dec 01 2017 22:48
jcunanan05 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @kbaig |http://www.freecodecamp.org/kbaig
AbrisM
@AbrisM
Dec 01 2017 23:05
https://codepen.io/anon/pen/KyJKZW Could someone tell me why the background image for the entire site is not showing?
It's for a local file too
Kaz Baig
@kbaig
Dec 01 2017 23:06
How we gonna see it if it's local tho
AbrisM
@AbrisM
Dec 01 2017 23:06
Is there an IDE that allows uploads?
Kaz Baig
@kbaig
Dec 01 2017 23:07
just upload your pic somewhere
AbrisM
@AbrisM
Dec 01 2017 23:07
alright
Kaz Baig
@kbaig
Dec 01 2017 23:12
why not use it in your pen
AbrisM
@AbrisM
Dec 01 2017 23:14
I'll try for the pen demostration, but it'll be a local file :)
i'm use to href, so I'm not sure if it would be different
Adel
@AdelMahjoub
Dec 01 2017 23:15
@AbrisM you can upload your images here and get a usable url for codepen https://imaguri.com/
AbrisM
@AbrisM
Dec 01 2017 23:18
Kaz Baig
@kbaig
Dec 01 2017 23:20
wait why've you got h1's and stuff in your head??
Ryan Williams
@Ryanwfile
Dec 01 2017 23:22

What would be the best way to center the 3 carousel divs in this pen, maintaining the column just in the center of the page? https://codepen.io/Ryanwfile/pen/MOOMpO
I currently use the css

padding-left:40%;

but that doesn't feel optimal, any help is greatly appreciated

AbrisM
@AbrisM
Dec 01 2017 23:32
Hmm? Oh because I wanted the page to load with the script. The first part <a href="https://imgbb.com/"><img src="https://image.ibb.co/dE1BZb/background_2.png" alt="background_2" border="0"></a><br /><a target='_blank' href='https://imgbb.com/'>upload my pic</a><br /> I'm wondering if I should just remove that and make another href link instead
Adel
@AdelMahjoub
Dec 01 2017 23:34
@Ryanwfile wrap each .slideContainer content in a div, remove .wrap and set .slideContainer to
.slideContainer{
  display: flex;
  justify-content: space-around;
}
Ryan Williams
@Ryanwfile
Dec 01 2017 23:34
@AdelMahjoub Awesome, thank you so much for the help
CamperBot
@camperbot
Dec 01 2017 23:34
ryanwfile sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 633 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Ryan Williams
@Ryanwfile
Dec 01 2017 23:41
@AdelMahjoub That worked perfectly, thank you again for the help
CamperBot
@camperbot
Dec 01 2017 23:41
ryanwfile sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
api offline
juni
@junipberry
Dec 01 2017 23:42
anyone see anything wrong with this:
function babyRepeat(babble){
let repeated=[];
repeated.map(function(){
return babble*2;
});
}
Kaz Baig
@kbaig
Dec 01 2017 23:52
@junipberry what you trying to do
you're mapping over an empty array
juni
@junipberry
Dec 01 2017 23:53
I’m making a kata for the first time, and I’m not sure how to set it up..
Kaz Baig
@kbaig
Dec 01 2017 23:53
I mean that function
What are you trying to do with that function
juni
@junipberry
Dec 01 2017 23:53
I want a function that repeats whatever is inputed in, twice
like
Test.describe("Tests", function(){

Test.assertEquals(babyRepeat('dada'), 'dada dada');
Test.assertEquals(babyRepeat('up'), 'up up');
Test.assertEquals(babyRepeat('no'), 'no no');
Test.assertEquals(babyRepeat('mama'), 'mama mama');
Test.assertEquals(babyRepeat('yes'), 'yes yes');
Test.assertEquals(babyRepeat('out'), 'out out');

});
Kaz Baig
@kbaig
Dec 01 2017 23:55
why not just return babble + ' ' + babble
Linus Phan
@linusphan
Dec 01 2017 23:58
Hey you guys,
```

function rot13(str) { // LBH QVQ VG!
  var arr = str.split(" ");
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
      arr[i][j] = arr[i][j].charCodeAt();
    }
  }
  return str;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");
How come arr[i][j] in my code is not being changed to the unicode?
they are remaining the same characters still
If you place this in JSFiddle, you can see what I'm talking about too:

function rot13(str) { // LBH QVQ VG!
  var arr = str.split(" ");
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
      console.log(arr[i][j]);
      arr[i][j] = arr[i][j].charCodeAt();
    }
  }
  console.log(arr);
  return str;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");