These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Feb 2018
wikijavabrain
@wikijavabrain
Feb 26 2018 01:42
can someone provide me a functional pogramming style of this code :
function isEven(number) {
    if (number < 0) {
        return isEven(-number);
    } else if (number === 1) {
        return false;
    } else if  (number === 0) {
        return true;
    } else {
        return isEven(number - 2);
    }
}

isEven(100)
Tom
@moT01
Feb 26 2018 01:44
function isEven(number) {
    number % 2 === 0 ? return true : return false; 
}
not sure what you mean by functional
wikijavabrain
@wikijavabrain
Feb 26 2018 01:46
@moT01 thanks !!
CamperBot
@camperbot
Feb 26 2018 01:46
wikijavabrain sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1022 | @mot01 |http://www.freecodecamp.org/mot01
Christopher McCormack
@cmccormack
Feb 26 2018 02:01

@wikijavabrain @moT01 you would want the return outside the ternary, not inside. Inside should be an expression:

function isEven(number) {
    return number % 2 === 0 ? true : false;
}

You could also simplify it by just returning the modulus comparison:

const isEven = num => num % 2 === 0
Gulsvi
@gulsvi
Feb 26 2018 02:13
Or complicate it with fewer characters :)
const isEven = n => n & 1; // 0 true, 1 false
Tom
@moT01
Feb 26 2018 02:15
@cmccormack yup - my bad, something didn't look quite right
Christopher McCormack
@cmccormack
Feb 26 2018 02:16
@gulsvi :thumbsup: :)
Tom
@moT01
Feb 26 2018 02:16
you sure that wouldnt work?
Christopher McCormack
@cmccormack
Feb 26 2018 02:16
@moT01 it will probably work but you'll get errors with some linters
Tom
@moT01
Feb 26 2018 02:17
ahh those linters
Gulsvi
@gulsvi
Feb 26 2018 02:17
It's an anti-pattern
wikijavabrain
@wikijavabrain
Feb 26 2018 02:19
@gulsvi @cmccormack thanks !! i appreciate
CamperBot
@camperbot
Feb 26 2018 02:19
wikijavabrain sends brownie points to @gulsvi and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 2624 | @gulsvi |http://www.freecodecamp.org/gulsvi
:star2: 1335 | @cmccormack |http://www.freecodecamp.org/cmccormack
Liam Docherty
@ldocherty1
Feb 26 2018 02:44
Why when I added my navbar the background image got pushed down? How can I have my nav bar but have my background image be 100% in height not more?https://github.com/ldocherty1/Unit28_Assignment1
Tom
@moT01
Feb 26 2018 02:50
i see a background image on the .masthead - the navbar probly pushed that element down?
Liam Docherty
@ldocherty1
Feb 26 2018 02:51
@Mot01 Yes, how can I make it not pushed down?
Tom
@moT01
Feb 26 2018 03:16
change the position to absolute
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:43
Hello everyone, nice to meet you guys.
I've been programming since 96 with HTML
I have to update my skills to HTML5
Tom
@moT01
Feb 26 2018 03:46
@geniusFunk :wave:
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:47
@moT01 Hello how are you?
Tom
@moT01
Feb 26 2018 03:48
im fine
how are you
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:48
I'm good, just browsing the internet.
Just found freeCodeCamp and joined today.
Tom
@moT01
Feb 26 2018 03:49
awesome
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:49
Yea it's an awesome web site. I decided to skip the coding challenges because I know most of that stuff.
I guess I'll have to get points some other way.
Tom
@moT01
Feb 26 2018 03:50
it makes for a good review - and if you know it you should be able to fly through it
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:50
Yea true, maybe I'll do 10 a day.
Tom
@moT01
Feb 26 2018 03:53
i did like 200 in 3 days back around then
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:54
Niiice, you must know your code
Tom
@moT01
Feb 26 2018 03:54
maybe more like 150
a lot of them are just really short and quick
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:55
ooohhh, had me going for a min there didn't you
Tom
@moT01
Feb 26 2018 03:56
i did
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:57
haha! it's all good, no harm done. so what project are you working on these days?
Tom
@moT01
Feb 26 2018 03:57
just trying to encourage you to go do them
https://www.freecodecamp.org/mot01 scroll down to the challenges - the first 3 days i did a ton
Abraham Andres Luna
@geniusFunk
Feb 26 2018 03:58
oh ok, let me check
yea that's a lot of challenges completed
I decided to follow you on gitHub
Tom
@moT01
Feb 26 2018 04:01
cool
Abraham Andres Luna
@geniusFunk
Feb 26 2018 04:02
I am trying to make my first android app. But I'm having trouble using Xamarin.Forms
Tom
@moT01
Feb 26 2018 04:02
yea
Abraham Andres Luna
@geniusFunk
Feb 26 2018 04:03
Yea I'm running into errors when I tried to build the project because the Xamarin.Forms components are filled with bugs.
Tom
@moT01
Feb 26 2018 04:04
did you try some bug spray?
Abraham Andres Luna
@geniusFunk
Feb 26 2018 04:05
haha! I wish it was that easy
Tom
@moT01
Feb 26 2018 04:07
what is your app gonna do
Abraham Andres Luna
@geniusFunk
Feb 26 2018 04:12
@moT01 Oh, my app is going to be a card game you play with other people online.
Tom
@moT01
Feb 26 2018 04:16
cool, ill be around here if you wanna chat tomorrow or somethin
Abraham Andres Luna
@geniusFunk
Feb 26 2018 04:16
Yea I'm just browsing the Guide right now
Darren
@DarrenfJ
Feb 26 2018 05:08
@coderNewby got your PM, sorry, was afk all day :D
coderNewby
@coderNewby
Feb 26 2018 05:10
@DarrenfJ thanks, was also away today a lot
CamperBot
@camperbot
Feb 26 2018 05:10
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2405 | @darrenfj |http://www.freecodecamp.org/darrenfj
Lallo Vigil
@lalov1
Feb 26 2018 05:32
@cmccormack Thank you! I think I got it now.
CamperBot
@camperbot
Feb 26 2018 05:32
lalov1 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1337 | @cmccormack |http://www.freecodecamp.org/cmccormack
Greg Gordon
@greggordoncode_twitter
Feb 26 2018 06:06
https://codepen.io/papageg/pen/NyYGzm so my nav bar has to much background how do i reduce the size of it.
Claudio Restifo
@Marmiz
Feb 26 2018 06:14

@greggordoncode_twitter the height is given by both the size of the image (200x200) and the padding around the li.

Try reducing both

Greg Gordon
@greggordoncode_twitter
Feb 26 2018 06:20
I had tried it is only changing where the text is and then also changing size of image i want the black background to not be as large.
Vladislav Ivanov
@developer4eto
Feb 26 2018 06:24
@greggordoncode_twitter Then reduce the width of your navbar
and height
Joshua Swift
@joshuaswift
Feb 26 2018 07:35
Morning everyone, I still haven't managed to center the buttons on my pomodoro timer. I'm so close but they just won't budge and I don't want to have to resort to messing around with the margins.
  getButton() {
    if (this.props.timerState === timerStates.NOT_SET)
      return (
        <div className="container">
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">
              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startShortBreak}
              >
                Short Break
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">
              <button className="btn btn-success btn-block center-block" onClick={this.props.startTimer}>
                Start
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">

              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startLongBreak}
              >
                Long Break
            </button>
            </div>
          </div>
        </div>
      );

  render() {
    return <div className="row">{this.getButton()}</div>;
  }
}
export default TimerButton;
screenshot-localhost-3000-2018.02.26-07-31-15.png
screenshot below is how they appear, with outlines of the divs.
abraham anak agung
@padunk
Feb 26 2018 07:46
@joshuaswift try use offset in your col class
Anas Abdennaim
@Aka-Dev
Feb 26 2018 10:25
@joshuaswift force float to none with float-none class
NikolaNbgd
@NikolaNbgd
Feb 26 2018 11:11
Hello, guys, can somebody help me about horizontal sections scroll? Without scroll navbar and sections must appears on normal scroll. I would appreciate any kind of help!
NikolaNbgd
@NikolaNbgd
Feb 26 2018 11:17
@Aka-Dev Does it scroll if user scroll vertically, or horizontally?
@Aka-Dev Just checked on codepen, this is not my solution, here you literally have to scroll horizontally
Anas Abdennaim
@Aka-Dev
Feb 26 2018 11:19
@NikolaNbgd can you share your solution ?
NikolaNbgd
@NikolaNbgd
Feb 26 2018 11:21
@Aka-Dev https://panoply.io/ scroll down and you will see what I mean
Anas Abdennaim
@Aka-Dev
Feb 26 2018 11:29
@NikolaNbgd sorry i don't have any idea how to do that
NikolaNbgd
@NikolaNbgd
Feb 26 2018 11:31
@Aka-Dev I don't blame you, me neither
Jefferson
@jeffersonnnn
Feb 26 2018 11:43
@alpox i just saw your reply to my question about selecting a random value from an component state-type array. Thank you!
CamperBot
@camperbot
Feb 26 2018 11:43
jeffersonnnn sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1558 | @alpox |http://www.freecodecamp.org/alpox
Jefferson
@jeffersonnnn
Feb 26 2018 11:44
argh, still not out of the woodwork then.
santhoshbalaguru001
@santhoshbalaguru001
Feb 26 2018 12:13
@santhoshbalaguru001
http://jsfiddle.net/d3975/401/
Pls kindly check it
after entering data placeholder is not working
@jeffersonnnn
anyone is there?
Jefferson
@jeffersonnnn
Feb 26 2018 12:17
@santhoshbalaguru001 i am right here
santhoshbalaguru001
@santhoshbalaguru001
Feb 26 2018 12:17
can you help me
@jeffersonnnn
Jefferson
@jeffersonnnn
Feb 26 2018 12:17
@santhoshbalaguru001 what would you like to do?
santhoshbalaguru001
@santhoshbalaguru001
Feb 26 2018 12:17
http://jsfiddle.net/d3975/401/
Pls kindly check it
after entering data placeholder is not working
@jeffersonnnn
Jefferson
@jeffersonnnn
Feb 26 2018 12:21
your placeholder is right there, and when text is inputted, it leaves. That is, i assume, how placeholders work. @santhoshbalaguru001
santhoshbalaguru001
@santhoshbalaguru001
Feb 26 2018 12:26
not get it bro
Jefferson
@jeffersonnnn
Feb 26 2018 12:35
the generic purpose of a placeholder is to tell the user the sort of input need. Once there is input, there is no need for it anymore. Or maybe i don't understand what you need?
Jefferson
@jeffersonnnn
Feb 26 2018 12:54
@santhoshbalaguru001 are you there?
Stephen James
@sjames1958gm
Feb 26 2018 13:04
@jeffersonnnn What is still your issue with random selection?
santhoshbalaguru001
@santhoshbalaguru001
Feb 26 2018 13:05
@jeffersonnnn yes
resolved bro
thank you
@jeffersonnnn thank uu
CamperBot
@camperbot
Feb 26 2018 13:06
santhoshbalaguru001 sends brownie points to @jeffersonnnn :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @jeffersonnnn |http://www.freecodecamp.org/jeffersonnnn
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:40
i want to see my certificate i completed my certificate challenge
Tom
@moT01
Feb 26 2018 13:40
:thumbsup: @mukeshReddyB
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:40
it said my certificate is added to portfolio page can u please name me where is it
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:42
where is it
Tom
@moT01
Feb 26 2018 13:42
view my front end development certification
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:43
i dont see my name
where is it
Tom
@moT01
Feb 26 2018 13:45
here's how i did it
should say update my settings on your page
i clicked that and then clicked update my profile from github
that will bring in whatever settings you have on github
so you will need to go there and add your name to github first
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:47
ok thanq soo much
Tom
@moT01
Feb 26 2018 13:47
really
you copied all the projects
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:48
yes i do
Tom
@moT01
Feb 26 2018 13:48
well, your certificate will be taken from you
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:49
what
Tom
@moT01
Feb 26 2018 13:50
your not supposed to just copy and paste all the projects
your supposed to come up with your own
build it yourself
and follow the directions
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:51
ok
Tom
@moT01
Feb 26 2018 13:52
unless there's something wrong with that page and that's just what it's showing me
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:53
without a name
??
Tom
@moT01
Feb 26 2018 13:54
what
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:54
i updated my profile
Michael Grienauer
@mgrienauer
Feb 26 2018 13:55
I'm working on my personal portfolio project using CSS grid and have hit a snag... on my portfolio section for some reason my project images are spilling out of the containing div...does anyone have any ideas why?
it seems to work ok in mobile view but also has huge gaps in between
mukeshReddyB
@mukeshReddyB
Feb 26 2018 13:55
but i didnt get a name on my certificate
Puneeth N
@puneethnviraat
Feb 26 2018 14:06
hi friends..i am struck with a problem,,
  1. when user clicko on the form submitt button, save the contact form data in browser local storage. 2. retrive local storage data and show in new page. ..how to show it on new page..please help me..
Tom
@moT01
Feb 26 2018 14:08
@mgrienauer not sure what's going on - but if you put a max-width and max-height around 70% they stay within the box
Michael Grienauer
@mgrienauer
Feb 26 2018 14:17
@moT01 i tried that but at the bottom of my portfolio section the photos still leak over the bottom
Tai Jones
@taiJones00
Feb 26 2018 14:26
Are all class components stateful?
mukeshReddyB
@mukeshReddyB
Feb 26 2018 14:33
how to download my certificate
mstellaluna
@mstellaluna
Feb 26 2018 14:36
hey what's going on?
Tom
@moT01
Feb 26 2018 14:40
@mukeshReddyB first you need to go and do all the projects - then you can get your certificate
mstellaluna
@mstellaluna
Feb 26 2018 14:46
@mukeshReddyB Hello, If you have having issues with your certificates please send an email to team@freecodecamp.org
please include your FCC user ID, your FCC profile URL, your codepen profile URL and a description of your issue.
Ken Haduch
@khaduch
Feb 26 2018 14:59
@mgrienauer - I loaded your project - at this point there were a few CSS errors (you can find them by using the "Analyze CSS" tool in the CSS panel's dropdown.) They don't seem to have fixed the problem but I thought I would post that so I don't lose it later on...
Ken Haduch
@khaduch
Feb 26 2018 15:04
@mgrienauer - it looks like if you take the grid-auto-rows: 250px; out of the .portfolio selector's CSS properties, then things line up - the red borders are now surrounding the images? At least that is what I saw when I disabled that setting using the Opera browser on windows, via the devtools...
Emil
@aguyinmontreal
Feb 26 2018 15:08
Hi guys! What is the best script to recursively iterate through multiple levels of objects and arrays? I need an easy way to replace all " " strings in the tree with "".
Tom
@moT01
Feb 26 2018 15:12
whats the structure look like
Michael Grienauer
@mgrienauer
Feb 26 2018 15:17
@khaduch hey ken I figured it out, yea it was a problem with my auto-rows
i was wondering though, my <h1> in the portfolio section isnt aligning itself to center like it want.. when i use devtools to look at the grid its aligning to the end of the row...any ideas?
@khaduch also, thanks
Emil
@aguyinmontreal
Feb 26 2018 15:22
@moT01 you're talking to me? :D
Tom
@moT01
Feb 26 2018 15:22
yes
Michael Grienauer
@mgrienauer
Feb 26 2018 15:25
ah nvm, it was the height of the first row
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:29
I have to check box , when I check on the first I need to change style for the second check box ?
can you help me please ?
h1tag
@h1tag
Feb 26 2018 15:32
@ahmed-issa-mohd onclick
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:32
with out java script
html & css
Emil
@aguyinmontreal
Feb 26 2018 15:35
@moT01 The structure is unpredictable. It's an object that includes arrays and/or objects nested on multiple levels.
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:39
@h1tag does not work
Tom
@moT01
Feb 26 2018 15:39
@aguyinmontreal completely unpredictable? it must be predictable to a certain extent no?
so you say it will always be an object to start anyway right?
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:42
thank you
Emil
@aguyinmontreal
Feb 26 2018 15:42
@moT01 yes it's an object to start, then it depends it can be sub-objects and/or sub-arrays on multiple levels
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:43
can I have Can I ask another question @h1tag
h1tag
@h1tag
Feb 26 2018 15:44
sure
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 26 2018 15:45
how I can access for the style of the second check box when the first is checked ?
h1tag
@h1tag
Feb 26 2018 15:50
@ahmed-issa-mohd have u tried applying the css rules from the link? Or doing something similar?
Emil
@aguyinmontreal
Feb 26 2018 15:51
@moT01 is it possible?, you think?
Tom
@moT01
Feb 26 2018 15:51
@aguyinmontreal im sure there's a way - i just read your last message - i stepped away for a second
do you have any examples of what it might look like
and where might these strings you want to replace be? - anywhere? are they in object keys?
what do you mean by replace " " with ""
all of them - everywhere
what if you did json.stringify on your object and replaced them all - and then parsed it
like 4 lines of code
but that would remove all spaces - probly wouldnt work
Emil
@aguyinmontreal
Feb 26 2018 16:06
@moT01 JSON.stringify is not an option, because some objects have some special non-enumerable propreties I need to keep :D
@moT01 I really need to recursively iterate through them
what do you mean by replace " " with "" ===>>> I mean that I have some strings that are one space long (" "), I need to replace them by empty strings (""), all of them everywhere
@moT01 but it doesn't have to be front-end, I can also do it back-end on NodeJS
so it can be ES6
Ken Haduch
@khaduch
Feb 26 2018 16:10
@mgrienauer - you're welcome... It looks like you have made changes... I'm just trying to see the current status of your page, and noticed something in the HTML - the target="#_blank" in your anchor elements is usually written as target="_blank"- that is, without the #. And it looks like the images are not loading right now? Or did you turn off the display? Perhaps there is a problem with the grid-column CSS property - the devtools is showing an invalid property value error?
Tom
@moT01
Feb 26 2018 16:19
@aguyinmontreal so would this be a good example?
obj = {
   stuff: "string string",
   moreStuff: ["string string"]
   stuff3: {
     a: "string string",
     b: ["string string", "not a string"]
   }
Kingsley
@Kingwindie
Feb 26 2018 16:21
document.getElementById("button").addEventListener("click" , convert,false); can someone help me understand what the boolean "false" is doing in this event listener,usually when i see event listeners it's the event that triggers it and the function it's calling.What is the purpose of the false?
h1tag
@h1tag
Feb 26 2018 16:26
@Kingwindie check the documentation for it
Emil
@aguyinmontreal
Feb 26 2018 16:26
let's try like this: :D
@moT01
obj = {
stuff: "string string",
moreStuff: ["string string"]
stuff3: {
a: "string string",
b: ["string string", {a: "string string", b: {a: ["string string","string string"]}]
}
Kingsley
@Kingwindie
Feb 26 2018 16:27
@h1tag what do you mean documentation?
this is the offical documentation for addEventListener :https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
this the w3schools tutorial for it (simpler one): https://www.w3schools.com/jsref/met_element_addeventlistener.asp
@Kingwindie
Tom
@moT01
Feb 26 2018 16:32
@aguyinmontreal i dont have anything that i can tell you that will point you in the right direction at the moment - but i think i could maybe come up with something - ill give it a little try and see if i get anywhere
Neil
@NNeil1
Feb 26 2018 16:34

Hey guys. I know how to use Margin and Padding, and understand what they do, but could someone explain what one they would use in this example:

You have 2 <h1> Tags and the elements appear at the top of your page. If you wanted both h1 directly centre in the middle of the page, would you use margin-top or padding-top?

Kingsley
@Kingwindie
Feb 26 2018 16:35
@h1tag thanks
CamperBot
@camperbot
Feb 26 2018 16:35
:cookie: 921 | @h1tag |http://www.freecodecamp.org/h1tag
kingwindie sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
Neil
@NNeil1
Feb 26 2018 16:35
I understand both would work, but I think there would be problems later on with one rather than the other, looking for someone to explain why they'd use margin/padding to position
h1tag
@h1tag
Feb 26 2018 16:36
@NNeil1 margin, cause padding will be limited to moving the element within its borders
margin will move it within the page
Neil
@NNeil1
Feb 26 2018 16:37
So, would margin position it in the centre when the page moves?
Up to now, I've been using padding, and can see where i've gone wrong
h1tag
@h1tag
Feb 26 2018 16:39
yes, but eventually it will go out of view if you have enough content to scroll down the page, if I understand what you're asking about correctly @NNeil1
Emil
@aguyinmontreal
Feb 26 2018 16:39
@moT01 is this a good solution for me? https://stackoverflow.com/a/8986883/6814172
Neil
@NNeil1
Feb 26 2018 16:40
Okay, I think I just gotta make it responsive to make it stay in the middle - but I am doing the design first. Thanks for answering my question @h1tag
CamperBot
@camperbot
Feb 26 2018 16:40
nneil1 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @h1tag |http://www.freecodecamp.org/h1tag
Neil
@NNeil1
Feb 26 2018 16:41
One last question: Other than the default fixed, static, absolute positions, what else can I learn for positioning?
h1tag
@h1tag
Feb 26 2018 16:41
@NNeil1 right :+1: I misunderstood your previous question, but you got the idea
@NNeil1 check the documentation for position
Ken Haduch
@khaduch
Feb 26 2018 16:44
@NNeil1 - another good place to go for all things CSS and interesting articles about it is https://css-tricks.com/, if you don't know about that site, you should check it out!
Neil
@NNeil1
Feb 26 2018 16:50
tbh the positioning kinda gets me lost
h1tag
@h1tag
Feb 26 2018 16:54
me too, I havn't delved much into them (other than basic tutorials), but I should read more about them
the docs and css tricks are both good for that or search for some tutorials online to help you understand them
Donnie
@Donnie-D
Feb 26 2018 16:59

hi. probably a petty issue for guys here. On repl.it the following code returns { foo: 'bar', hello: 'world' } as one expects

var foo = { foo: "bar", hello: "world" };
console.log( foo );

but following code returns { 0: { foo: 'bar', hello: 'world' }, length: 1 }

let $ = require('jquery');
var foo = { foo: "bar", hello: "world" };
// Pass it to the jQuery function
var $foo = $( foo );
console.log( $foo );

why doesn't it return the same object?

Tom
@moT01
Feb 26 2018 17:00
@aguyinmontreal it might be - yea, there's probly a solution out there i suppose - i was going to try and make one myself but i probly dont need to
Ken Haduch
@khaduch
Feb 26 2018 17:02
@NNeil1 - https://css-tricks.com/almanac/properties/p/position/ - this is the CSS-tricks page for positioning... it has descriptions of everything, and other links on the page that you can get more info.
@Donnie-D - I think that the jquery functions probably return a collection of jquery objects, instead of just the object. That's my initial thought on that.
Neil
@NNeil1
Feb 26 2018 17:03
Thanks @khaduch, reading on CSS tricks now
CamperBot
@camperbot
Feb 26 2018 17:03
nneil1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3760 | @khaduch |http://www.freecodecamp.org/khaduch
Donnie
@Donnie-D
Feb 26 2018 17:04
hmm thanks i guess lol
Emil
@aguyinmontreal
Feb 26 2018 17:06
@moT01 but will the for...in work with arrays?
and typeof(o[i])=="object" applies to arrays?
Tom
@moT01
Feb 26 2018 17:07
no - that's not the right solution
might be close
h1tag
@h1tag
Feb 26 2018 17:07
@Donnie-D I think thats the jQuery object wrapped around the object foo
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 26 2018 17:10
@moT01 Hey I need some help with p5.js again, same project because i just got the feedback. Can you come to https://gitter.im/FreeCodeCamp/FreeCodeCamp please?
Tom
@moT01
Feb 26 2018 17:11
maybe in a little bit - im looking at something else right now - @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 26 2018 17:12
Ok no problem @moT01 thanks
CamperBot
@camperbot
Feb 26 2018 17:12
muhammedkarim sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1023 | @mot01 |http://www.freecodecamp.org/mot01
Donnie
@Donnie-D
Feb 26 2018 17:12
lol here i was thinking that jQuery is as easy as $(selector).event(function). Turns out to be a rabbit hole this 'query' lol
h1tag
@h1tag
Feb 26 2018 17:13
I never came across this before
Donnie
@Donnie-D
Feb 26 2018 17:17
how much of jQuery does one need to know generally. I mean how much is it generally used in web development projects/professionally? I thought basically $(selector).action() is all what its about.
Tom
@moT01
Feb 26 2018 17:19
@aguyinmontreal here's some pseudo code i worked on that might work - i am going to try and build it a little further and test it out
function traverse(object) {
  //if string 
     remove space;
  //else if object
    object.values.forEach(value => {
      if(value is object or array) {
        traverse(value);
      } else {
        remove space;
      }
    }

  //else if array
  array.forEach(value => {
    if(value is object or array) {
      traverse(value);
    } else {
      remove space;
    }                        
  });
}
Ken Haduch
@khaduch
Feb 26 2018 17:19
@Donnie-D - I just ran though the jquery code in the devtools debugger. After a lot of analysis that takes place within the jquery code to determine what was passed into it, it ends up just making an array and pushing the object that was passed into it onto that array and returning it. I don't know how to explain why it does that, nor where you would find a description of it in the jquery documentation, but that's the functionality of the jquery code for that particular operation that you set up.
h1tag
@h1tag
Feb 26 2018 17:21
@Donnie-D in freecodecamp like projects, I don't think you'll need that, but professionaly idk. Most of jQuery I used so far was like$(selector).action()
Donnie
@Donnie-D
Feb 26 2018 17:23
thank ken and thank you h1 too. Do you recommend going through the whole jQuery documentation to learn it or is there any suitable place where one can feel the confidence that they are on par with the wold out there lol
not to mention its my 4th day on this documentation already with little success lol
Ken Haduch
@khaduch
Feb 26 2018 17:26
@Donnie-D - re: :point_up: February 26, 2018 12:17 PM - https://api.jquery.com/jQuery/ - look at this page and it will show you how various selector values are handled. "Working With Plain Objects" - that's what you are passing in. The documentation there doesn't describe exactly what happens with it, but shows how you can access the returned object with other jquery functions. (To me this doesn't look like a very useful thing to do?) I'm going to guess that this works this way just to have a predictable way to handle any type of argument (selector value) passed to the jquery function itself?
h1tag
@h1tag
Feb 26 2018 17:28
I'd say go through the doc when you don't understand something specific about some methods behavior or want to learn more, other than that search online for some stackoverflow answer
Or if you don't understand the docs, search for another alternative to help you understand the problem/subject
Donnie
@Donnie-D
Feb 26 2018 17:34

seriously that sounds rather encouraging to me because I so want to NOT keep reading this documentation because it doesn't seem worth it. Just the other day I came across this following snippet

var script = $("<script />", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);

$("head").append(script);

Now i couldn't understand this code and someone on here found a jQuery link for me to read and understand whats going on in the code above as the contexts are being used which I haven't come across before in jQuery. I thought why not go through the whole jQuery documentation once just to get myself familiar with it but after 4 days I am kinda feeling gutted now lol

alpox
@alpox
Feb 26 2018 17:35
@Donnie-D When you just go through a whole documentation and try to remember it, you will forget it in few days and only get headaches
Donnie
@Donnie-D
Feb 26 2018 17:36
tell me about it lol
alpox
@alpox
Feb 26 2018 17:36
Its better to go look for something you need when you need it
Emil
@aguyinmontreal
Feb 26 2018 17:40
thanks @moT01
CamperBot
@camperbot
Feb 26 2018 17:40
aguyinmontreal sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1024 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 26 2018 17:46
@aguyinmontreal i think im getting close https://s.codepen.io/moT01/pen/BYqbRy?editors=0012
looks like the iteration is working
Tom
@moT01
Feb 26 2018 18:00
any thought on this anyone? how to set new values
h1tag
@h1tag
Feb 26 2018 18:07
@moT01 what do you mean by set new values?
Tom
@moT01
Feb 26 2018 18:08
see how i go through and print each string
*log each string
i want to change each string
h1tag
@h1tag
Feb 26 2018 18:10
aren't you already doing that on line 23?
Tom
@moT01
Feb 26 2018 18:11
im trying
it doesnt work
h1tag
@h1tag
Feb 26 2018 18:13
oh, I thought that the full object with the values being printed to the console was printed by traverse
it should give you a clearer picture of what's going on
Tom
@moT01
Feb 26 2018 18:21
yea, how so
h1tag
@h1tag
Feb 26 2018 18:22
it shows that you're getting a typeerror on line 26
Tom
@moT01
Feb 26 2018 18:23
yea, but that's wrong
object.values is not a function?
h1tag
@h1tag
Feb 26 2018 18:25

yea, but that's wrong

I think you're right, I searched and it appears this problem is caused by the method not being supported on all browsers

idk what's causing it on pythontutor site, becasue the error should show on codepen page dev console too, if that's the case
Raziur Rahman
@instrumaniak
Feb 26 2018 18:37

Hello! Can anyone please help me find the bug with this.. It's a freecodecamp project: Camper leader board. There is a bug in my code but I can't find it: it's not updating the UI with recent data when clicked (In the UI it's 'Recent' or 'All time' ) first time but when clicked second time it updates! No clue what's causing it! Although it appears to be ok, but careful observation on the data table reveals that there is some bug...it's using previously loaded data..on the first click..don't know why.

...Using React and axios to fetch json data from one out of two endpoints, then mapping those data to render the table. User can click on 'recent' Or 'all time' to fetch relevant data. Thanks.

code: https://codepen.io/instrumaniak/pen/ddgoZd/

Abdullah-Al-Zubair
@a2-zubair
Feb 26 2018 18:41
@alpox thanks man
CamperBot
@camperbot
Feb 26 2018 18:41
a2-zubair sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1560 | @alpox |http://www.freecodecamp.org/alpox
Christopher McCormack
@cmccormack
Feb 26 2018 18:56
@instrumaniak can you specify your exact sequence of presses and what you see that's different?
Christopher McCormack
@cmccormack
Feb 26 2018 19:03
@instrumaniak Ah I thin I see your issue.
Raziur Rahman
@instrumaniak
Feb 26 2018 19:03
@cmccormack Ok sure. Once the page is loaded, I clicked on the 'Recent'. Now looking at the data table: at #4. I see user: 'khaduch' but I expect to see 'Smootimus'. Which I see if I click on the 'Recent' second time. And thanks for taking the time to look at it!
CamperBot
@camperbot
Feb 26 2018 19:03
instrumaniak sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1338 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 26 2018 19:03

@instrumaniak in your setMode:

  setMode(mode) {
    this.setState({
      mode: mode,
      data: []
    });
    this.getData();

you forgot that setState is asynchronous.
Try this:

  setMode(mode) {
    this.setState({
      mode: mode,
      data: []
    }, () =>  { this.getData() };
   );
i didn't test that, but setState supports a callback after it has updated state and that's probably where you want to call your getData
@instrumaniak or just get rid of setMode altogether
@instrumaniak btw your app looks great! Nice job
Raziur Rahman
@instrumaniak
Feb 26 2018 19:06
@cmccormack Thanks a lot! It worked!
CamperBot
@camperbot
Feb 26 2018 19:06
instrumaniak sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
Christopher McCormack
@cmccormack
Feb 26 2018 19:06
@instrumaniak np
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 19:12
Hey guys, I need some help with my Recipe Box. In the RecipeIngredients Component I modified the code such that if I click on the pencil icon, all other icon change form and functionality. But it doesn't work. Is my logic wrong here?
Christopher McCormack
@cmccormack
Feb 26 2018 19:21
@MukeshAngrish what is converting your i element into svgs? I wonder if that's causing problems with your click handler
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 19:22
@cmccormack what is svgs?
h1tag
@h1tag
Feb 26 2018 19:23
@moT01 I'm not sure if this is true, but it seems that traverse is editing a copy of the object not the object it self
I think that what a function does in js when you pass it a value, it makes a copy of it, iirc
h1tag
@h1tag
Feb 26 2018 19:37
not the object, but the property (json) in this case*
Christopher McCormack
@cmccormack
Feb 26 2018 19:40
@MukeshAngrish so you're using the javascript for fontawesome, and it looks like it's replacing your i elements with SVGs and that's breaking your onClick handler. Try using the CSS instead and removing the JS - https://use.fontawesome.com/releases/v5.0.6/css/all.css
@MukeshAngrish here is an example: https://codepen.io/cmccormack/pen/PQxYQy?editors=0110
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 19:51
@cmccormack Thanks a lot! It worked. Can you alse suggest a way to make the RecipeIngredients collapse into RecipeHead when I click on RecipeHead.
CamperBot
@camperbot
Feb 26 2018 19:51
mukeshangrish sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1339 | @cmccormack |http://www.freecodecamp.org/cmccormack
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 19:51
also*
Christopher McCormack
@cmccormack
Feb 26 2018 19:54
@MukeshAngrish you can probably do that using css selectors and CSS - change it from display: block to display: none and add a transition
Emil
@aguyinmontreal
Feb 26 2018 20:59
@moT01 did you get to something? :)
Tom
@moT01
Feb 26 2018 21:12
@aguyinmontreal i never quite finished - i may take another look in a bit - just need to figure out how to change the values
Emil
@aguyinmontreal
Feb 26 2018 21:15
@moT01 let me take a look at it
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 21:51
Hey everyone, can anyone help me with the Recipe Box. The icons (I'm using them as buttons) are not performing any functionality. I have been searching for the solution for an hour now. I'm relatively new to React, so I might have made some silly mistake.
Tom
@moT01
Feb 26 2018 22:02
@aguyinmontreal any luck
@MukeshAngrish whats the problem
Ian Lee
@asparism
Feb 26 2018 22:44
@MukeshAngrish which buttons are troubling you?
@MukeshAngrish i did notice that the for loop for case 'addIngredient' says var recipe in recipeBox, but in is meant for objects, use of for lists. i'm not sure how far you've gotten tho
change that and you'll be able to add an ingr but i can't seem to enter the text yet
Mukesh Kumar Angrish
@MukeshAngrish
Feb 26 2018 22:57
@asparism Yeah I did some modifications and now 2 buttons are working, only the delete ingredients button and editing text is left
shilpi verma
@shilpiverma509
Feb 26 2018 22:58

hey guys I am new to React. I am setting react in a new project I am making . I get a "Cannot get/" error while running npm run dev-server. This is my webpack.config.js file. Looking for help in setting up this file correctly.
`const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
output:{
filename:'bundle.js',
path: path.join(__dirname, 'public', 'dist'),
// publicPath:'/'

},

module:{ 
    rules:[{
        loader:'babel-loader',
        test:/\.js$/,
        exclude:/node_modules/
    }

]
},
devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true,
    publicPath: '/dist/'
  }

};`

Ian Lee
@asparism
Feb 26 2018 23:00
@MukeshAngrish editing text programming looks great
but how can i click to edit the ingr if the ingr has no text to click? perhaps init the ingr with something like 'new ingr'
Mark Kubik
@KUBIX90
Feb 26 2018 23:02
Hi
Ho do i put an image on a linear gradient background, its driving me insane
**how do I
Ian Lee
@asparism
Feb 26 2018 23:05
the image is supposed to look like it's placed on top of hte linear gradient background?
Gulsvi
@gulsvi
Feb 26 2018 23:09
@KUBIX90 A linear gradient background is a backround image of sorts, so you need another div to house your other background image. Kind of like: https://s.codepen.io/anon/pen/NyExmz
Mark Kubik
@KUBIX90
Feb 26 2018 23:17
@gulsvi Thanks but im still having trouble
CamperBot
@camperbot
Feb 26 2018 23:17
kubix90 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2626 | @gulsvi |http://www.freecodecamp.org/gulsvi
I can't put anything on top of it without it appearing like a block
Gulsvi
@gulsvi
Feb 26 2018 23:20
@KUBIX90 I'm not sure I understand. I don't see any other images you're trying to put on your linear gradient background (the orange sidebar)
If you don't want a white background for your text dsodjio, use background-color: transparent for that text.
Mark Kubik
@KUBIX90
Feb 26 2018 23:21
So the p tags i put in are just appearing like a white box for some reason
Ah right I'll give it a try thanks
Gulsvi
@gulsvi
Feb 26 2018 23:22
@KUBIX90 Everything will have that color background unless you override it because of this CSS:
* {
  margin: 0;
  box-sizing: border-box;
  background-color: rgb(235, 235, 225);
}
* means everything in CSS
Mark Kubik
@KUBIX90
Feb 26 2018 23:23
Ah OK thanks, I know what that does, but didn't realise that might be causing the issue