These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Dec 2017
Jean Marco Romero
@volkranium
Dec 26 2017 00:23
else if (num1 === NaN && num2 === NaN) is this condition correct?
Moisés Man
@moigithub
Dec 26 2017 01:47
NaN === NaN return false
u need to use functions/methods to check if NaN
Number.isNaN(NaN) --> true
Craig Morrison
@frogmorton
Dec 26 2017 02:24
Merry Christmas Free Code Campers! Question here regarding the quote machine project.
Anyone free to help?
I was using the quotes API from this site: http://www.quotes.net/quotes_api.php The trouble? Codepen has gone all https (as of June 1st, 2017) The quotes.net/ site doesn't seem to have a https version, so that api call breaks my project.
dinesh
@1532j0004kg
Dec 26 2017 03:18
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="well"></div>

<button>click</button>

  </body>

<script>

$(document).ready(function(){
 $("button").click(function(){
   $.getJSON('http://localhost:4000/api/ninjas',
    function(name){
        console.log(name.type);
        $(".well").html(name.type);
    }
  );
 });
});

</script>
</html>
when i clicking the button again and again , it will print only one output get
but i want to repeatly show the output one down to one !
http://localhost:4000/api/ninjas in this i have the object type : "get"
anyone help me to display the output one after anoher.
?
Ian
@toianw
Dec 26 2017 03:26
@1532j0004kg try .append rather than .html
http://api.jquery.com/append/
dinesh
@1532j0004kg
Dec 26 2017 03:27
one sec i will try
great its working!
but can u please tell y its not working when i am using html
Ian
@toianw
Dec 26 2017 03:29
because it overwrites the existing html with each call.
dinesh
@1532j0004kg
Dec 26 2017 03:30
ohhh okieee
thanks @toianw
CamperBot
@camperbot
Dec 26 2017 03:30
1532j0004kg sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 502 | @toianw |http://www.freecodecamp.org/toianw
Ian
@toianw
Dec 26 2017 03:31
no problem
primuscovenant
@primuscovenant
Dec 26 2017 05:09
@heroiczero thx
CamperBot
@camperbot
Dec 26 2017 05:09
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2117 | @heroiczero |http://www.freecodecamp.org/heroiczero
linkin-park
@linkin-park
Dec 26 2017 05:49
@AmitP88 hi
Amit Patel
@AmitP88
Dec 26 2017 06:15
@linkin-park hi
Joseph A. Sangine
@HTML-joe
Dec 26 2017 07:07
@sorinr not sure exactly what you mean but I simply put the value there because it is a ridiculously high number that wont occur.
Sorin Ruse
@sorinr
Dec 26 2017 07:09
@HTML-joe why do you need to test cel variable against that arbitrary value?
Joseph A. Sangine
@HTML-joe
Dec 26 2017 07:12
@sorinr the if else statement was the easiest way i could think of to convert the temp
Sorin Ruse
@sorinr
Dec 26 2017 07:15
@HTML-joe you can simply do:
function conversion(cel){

   return  ((cel * (9/5)) + 32);

}

let fh = conversion (2);
Joseph A. Sangine
@HTML-joe
Dec 26 2017 07:22
@sorinr hahaha very true thank you for that I believe I have overthinked it
CamperBot
@camperbot
Dec 26 2017 07:22
html-joe sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1379 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Dec 26 2017 07:24
@HTML-joe welcome.
Sweet Coding :)
@SweetCodingInc
Dec 26 2017 08:37
const conversion = cel => ((cel * (9/5)) + 32);

let fh = conversion(2);
Deepak Manjunath
@Deepak2322
Dec 26 2017 11:27
<button class="search-btn">[[textContent.findAbo]]</button>
 <button class="customize-btn" >[[textContent.findAbo]]</button>

<div class="auto-complete-view">
</div>

<div class="customize-view">
</div>
how to write a single function that shows and hides "auto-complete-view" and "customize-view"
Ghost
@ghost~56bd2077e610378809c105cd
Dec 26 2017 11:29
set an id to each of your div classes
<div class= "auto-complete-view" id= "view1>
</div>
Deepak Manjunath
@Deepak2322
Dec 26 2017 11:30
how to conditionally show/hide them by writing single function
and also toggle
Ghost
@ghost~56bd2077e610378809c105cd
Dec 26 2017 11:31
then use document.getElementById("view1").style.visibility= "hidden";
to show it again swap "hidden" for visible...
it depends how you want to do it.....you could add both commands into one function and use an if statement (condition) to choose the appropriate controller
Adole Samuel
@int-elligentSam
Dec 26 2017 11:34
I wonder why CSS is not that used for styling
Ghost
@ghost~56bd2077e610378809c105cd
Dec 26 2017 11:34
var controller= true;
if(controller === true) {
document.getElementById("view1").style.visibility= "hidden";
} else {
document.getElementById("view1").style.visibility= "visible";
}
you can use a boolean to toggle the controller.....then put the if statement(controller commands) inside a function...then call the function where you need to toggle your html id on and off
Deepak Manjunath
@Deepak2322
Dec 26 2017 11:58
should i set id to button as well and match id's ?
Tzahi
@Tzahile
Dec 26 2017 12:01
Hello all !
in FCC Beta, on ES6 chapter - "Use Destructuring Assignment to Assign Variables from Objects",
I can't figure out what to do..
can someone throw a hint please? :)
Ashish sb
@ashishsb95
Dec 26 2017 12:06
Guys , how do I make my website avoid web filter , due to the category showing unrated ?
Would appreciate any sort of help
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 12:06
hey @Tzahile can you send a me a link?
Ghost
@ghost~56bd2077e610378809c105cd
Dec 26 2017 12:15
youo should set tzhe id's to different values @Deepak2322
ie view1 and view2
each one will need a controller command
well..you could give them both the same id....that would work.
as long as its acceptable that they both toggle on an off with a single command.
Ghost
@ghost~56bd2077e610378809c105cd
Dec 26 2017 12:29
sorry @Tzahile i don't know about that.
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 12:30
const {tomorrow:{max:maxOfTomorrow}} = forecast;
@Tzahile
you start by desctructor "Into" the tomorrow proprety since the proprety itself its a nested object you destructor the inner one by using :{ on the inside I choose the max proprety and use : to set the variable name as I need to
Tzahi
@Tzahile
Dec 26 2017 12:43
@Rogue00 thanks anyway :)
@tiagocorreiaalmeida sorry man I gave the wrong link and after 2 minutes I changed it.. it's one challenge before the one with {tomorrow} :(
CamperBot
@camperbot
Dec 26 2017 12:43
tzahile sends brownie points to @rogue00 and @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
:cookie: 445 | @rogue00 |http://www.freecodecamp.org/rogue00
Tzahi
@Tzahile
Dec 26 2017 12:44
I mean, the corrected link is to This challenge, where string length is requested
Tzahi
@Tzahile
Dec 26 2017 12:55
ok, I solved it thanks to the second (nested-objects) challenge:
"use strict";
const greeting = 'itadakimasu';

// change code below this line
const {length : len} = greeting; // change this
// change code above this line

console.log(length); // should be using destructuring
but I have no idea how the object-destructuring know to take the .length property from greeting
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 13:20
Cause the string has props such as lenght if you consol.log a lengh of a string it will give you the size of it, im not sure if this is the correct way of saying it, but in js everything is an object or close to that
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 13:38
@Tzahile and you need to console.log then len and not length since you changed the default name
if you want to use only lenght dont change the default and keep it as const {length} = greeting;
Tony Brackins
@mrbrackins
Dec 26 2017 14:13
"use strict";
const greeting = 'itadakimasu';

// change code below this line
const {length : length} = greeting; // change this
// change code above this line

console.log(length);
@Tzahile
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 14:16
he has the code correct based on the challenge, the only thing is doing wrong is printing out length instead of len since he was asked to name it that way
Danny Chan
@chandanny
Dec 26 2017 15:04
``` var int i=0;
hello
hello
Daniel Romero
@Ranacode
Dec 26 2017 15:11
Hey, short question on React
How can I pass props on Redirect?
I have two routes: "/" and "/login" and when I do the login correctly I'll redirect to the home page but I want different state on my "/" component to render a different navbar
It's possible?
alpox
@alpox
Dec 26 2017 15:23
@Ranacode just use render instead of component in the route definition
Daniel Romero
@Ranacode
Dec 26 2017 15:24
aaaaa
thanks @alpox that's a good tip
CamperBot
@camperbot
Dec 26 2017 15:24
ranacode sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1513 | @alpox |http://www.freecodecamp.org/alpox
Ruben Abraham
@BuBBRBbr1
Dec 26 2017 15:28
image.png
I need help with this. When I try to adjust the margins, the page two on personal porftolio, is not changing to cover the screen.
Ken Haduch
@khaduch
Dec 26 2017 15:39
@BuBBRBbr1 - if you are developing this on CodePen, please share you URL so that we can see your code... if you aren't on Code Pen with this, can you put it there? So much easier to help you that way.
Ken Haduch
@khaduch
Dec 26 2017 15:43
@BuBBRBbr1 - one thing that you should have is that your <div class="row"> should be the parent of your <div class ="col-md-12 text-center "> - I haven't tried that to see if it fixes your problem, but that would be a start. And it looks like you might be missing closing </div> tags... that would also be a problem.
Ruben Abraham
@BuBBRBbr1
Dec 26 2017 15:48
OK. What about in CSS when I try to adjust the margin left or right sometimes there is no response?
Ken Haduch
@khaduch
Dec 26 2017 15:51
@BuBBRBbr1 - you can use the "Analyze HTML" option in the HTML panel. The first thing to do is make your HTML structure correct. Then you can try to apply CSS styling to it, it might work better... I don't even see an opening <div> tag --- oh, wait, I just saw it as a part of the <link href <div class="container-fluid"> - that is not correct. Work on your HTML first. And here is another helpful tip: on codepen, you don't want to have <link element in the HTML panel. Since you're linking to CSS stylesheets, put those in the CSS config panel as external libs.
@BuBBRBbr1 - you are also loading two different version of Bootstrap CSS - you should decide on one version and make sure that you read the docs (Version 4 has many changes as compared to Version 3). And I don't know if "foundation" and Boostrap go well together? I'm not sure if there are things that might conflict between the two? It could be fine, but it might also cause problems for you?
Ken Haduch
@khaduch
Dec 26 2017 15:58
@BuBBRBbr1 - and you have to load jquery.js befor you load jquery-ui - switch those around in the JS config panel.
@BuBBRBbr1 - fixed widths like your width: 6000px; for .pageOne is not going to be good, most likely. Fixed widths are generally bad for responsiveness, especially in units of px. Something that adjusts with screen / viewport sizes like vh or vw or percentages can work.
Ruben Abraham
@BuBBRBbr1
Dec 26 2017 16:05
But if I don't do 6000 the background image doesn't cover the whole page.
Ken Haduch
@khaduch
Dec 26 2017 16:08

If you use 6000 then you have big problems with the overall flow of the page. And then having to try settings like this:

.pageTwo{
  background:url(https://images.unsplash.com/photo-1482862549707-f63cb32c5fd9?auto=format&fit=crop&w=1189&q=80.png); 
  background-size: cover;
  height:800px;
  width:1000px;
  opacity:3;
  margin-top:45%;
  margin-bottom:-45%;
  margin-left:-32%;
  margin-right:40%;
  padding-top: 8%;
  padding-bottom: 10%;
}

to make other sections fit makes it a difficult situation to deal with. I'm willing to bet that you have had to play around with those numbers quite a bit?

Try to fix your HTML - you have no closing </div> for your page two, or any of the divs in page two. Every <div> should have a matching closing </div> on the page. It will make a big difference in how the page is rendered.

Chris
@bestintown23
Dec 26 2017 16:11
how can i get this soundcloud logo to show on the right hand side of the title XFineroX? https://codepen.io/bestintown23/pen/gogmVB
Ruben Abraham
@BuBBRBbr1
Dec 26 2017 16:16
OK
Ruben Abraham
@BuBBRBbr1
Dec 26 2017 16:35
@khaduch I have added divs and changed the settings. How do I now make the page cover the entire page without overly large pixels?
debracheprop
@debracheprop
Dec 26 2017 16:39
https://codepen.io/dchepkemoi/pen/jYymBb I tried "text-align:center;" to make the code go center but it isn't working.
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 16:40
@debracheprop paragraph isnt the same as .paragraph
:D
debracheprop
@debracheprop
Dec 26 2017 16:43
@tiagocorreiaalmeida Wow i feel dumb thanks
CamperBot
@camperbot
Dec 26 2017 16:43
debracheprop sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
api offline
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 16:43
@debracheprop I do the same msitakes dont worry we all do
debracheprop
@debracheprop
Dec 26 2017 16:51
@tiagocorreiaalmeida "msitakes" I like the irony.
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 16:51
:D
was a typo ahaha
@BuBBRBbr1 is there a codepen that contains the code you are talking about?
I think the soltuion could be quite easy
I want to do a negative margin-right for the first element, where I move the second element to the left as far as possible, but I can not work a negative margin-right over the first element width , why ,pleas ?
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 17:03
@ahmed-issa-mohd I dont think margins will be best solution here, can you tell me what0s the final idea?
ahmed-issa-mohd
@ahmed-issa-mohd
Dec 26 2017 17:07
There is no specific idea, I train, and I want to learn what the relationship between Margin and floating and why not work
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 17:09
I would say that at the current point is a good idea to run from floats with some many tools to use :DE
last time i used float was one year ago or more, but I can give it a look, you wanna push the second element to the end?
this?
image.png
Toni Shortsleeve
@KoniKodes
Dec 26 2017 17:09
@tiagocorreiaalmeida @ahmed-issa-mohd What size do you want the parent to be? Then you'll want to float to the side of the parent div for each element. Your margin shows how much space to the side of the element before it hits another element, in this case I may suggest a right margin for your left-float element or a left-margin for your right-float element.
Kevin
@AnaRobynn
Dec 26 2017 17:11
Anyone here familiar with Unit Testing and Dependency Injection in Javascript?
Nick Karnik
@theoutlander
Dec 26 2017 17:12
@AnaRobynn what do you need?
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 17:12
@BuBBRBbr1 I would do something similiar to this in all of them
  background-size: cover;
  background-position:center;
  background-attachment:fixed;
  width:100%;
  padding:100px 0;
plus you should take care with the html nesting you have there its not a good one, <i> tags with content nested inside
ahmed-issa-mohd
@ahmed-issa-mohd
Dec 26 2017 17:15
@tiagocorreiaalmeida In the left direction
alpox
@alpox
Dec 26 2017 17:20
@ahmed-issa-mohd float: right;
Tiago Correia
@tiagocorreiaalmeida
Dec 26 2017 17:20
I dont think he wants that I need that above aaa, and hi @alpox :D
Kevin
@AnaRobynn
Dec 26 2017 17:21
//token-utils.js
export const makeHasValidToken = (cookies, name) => () => {
  const token = cookies.get(name, true);
  return !!token && token.includes('Bearer');
};

// token.js
import Cookies from 'someLibrary'
import makeHasValidToken from 'token-utils'

const cookie = new Cookies();
const hasValidToken = makeHasValidToken(cookie, 'someString');

As you can see I wanted to make makeHasValidToken testable, without the need of external dep, since they are all passed in the function. I do this, because I want to be able to mock the cookies in the test, without the application to worry about setting up any cookie related code. The main app would call hasValidToken() without any arguments.

I was wondering if I should test makeHasValidToken for the case if there goes something wrong with new Cookie() and potentially have an object inside makeHasValid which does not have a get method. Let's say I wrote the following: `const hasValidToken = makeHasValidToken(null, 'someString');

alpox
@alpox
Dec 26 2017 17:22
@tiagocorreiaalmeida hii :) i didnt get that sentence much :D
Kevin
@AnaRobynn
Dec 26 2017 17:22
As soon as I would call hasValidToken() in that case it would crash. @theoutlander
Nick Karnik
@theoutlander
Dec 26 2017 17:24
that’s right … what is somelibrary ?
why is cookie imported from it
where does it crash
Kevin
@AnaRobynn
Dec 26 2017 17:24
Just some cookie Library
Nick Karnik
@theoutlander
Dec 26 2017 17:24
Ok, let’s back up a bit
what is the original function you want to test ?
Which testing lib are you using ?
Kevin
@AnaRobynn
Dec 26 2017 17:25
I'm just asking if I should create a test case for the fact when cookies doesn't have a get method.
Testing lib is besides the point
Nick Karnik
@theoutlander
Dec 26 2017 17:25
i wouldn’t discard that question …
you don’t need to test .get
if you’re using built in cookies
you can test incorrect values
missing values
etc
Kevin
@AnaRobynn
Dec 26 2017 17:28
I'm not saying I'm testing cookies. I'm saying if I should test for cases where I accidentally call that function with the wrong argument.
For example const hasValidToken = makeHasValidToken(null, 'someString');
Or this const hasValidToken = makeHasValidToken({}, 'someString');
I'm not testing the cookies class of the library, I'm wondering if I should test IF something goes wrong with that cookies library, can my function handle it.
Nick Karnik
@theoutlander
Dec 26 2017 17:37
yes you should
it doesn’t cost you much and handles a corner case
Kevin
@AnaRobynn
Dec 26 2017 17:41
Do we also agree it's still a unit test?
@theoutlander
Nick Karnik
@theoutlander
Dec 26 2017 17:43
yes
as long as you don’t need your server running
or other components integrated …
it’s an atomic unit
Kevin
@AnaRobynn
Dec 26 2017 17:46
So in my case testing how my function works with the real cookie library is already an integration test?
Or is that still a unit test?
Chris Rutherford
@cjrutherford
Dec 26 2017 17:52
hey would anyone mind looking at the start of my portfolio? (This is a revamp after a year)
Nick Karnik
@theoutlander
Dec 26 2017 17:53
Ideally, you need to use mocks …
@cjrutherford doesn’t load
Chris Rutherford
@cjrutherford
Dec 26 2017 17:54
sorry you'd think I could spell my own name! lol http://christopherrutherford.net
CherryPlaysRoblox
@CherryPlaysRoblox1
Dec 26 2017 17:57
Oh lol
@cjrutherford I take it that you're working on the links too?
Chris Rutherford
@cjrutherford
Dec 26 2017 17:58
trying to decide if I should have them link to sections, or the actual profiles for those services
Also working on the bio section in blue. Not write sure what to say there either
Tom
@moT01
Dec 26 2017 18:02
i would talk more about specific things you've done
sure that section shows some projects - what are the projects - what did you do on them
Chris Rutherford
@cjrutherford
Dec 26 2017 18:14
yep, just started this yesterday, so it's really just getting started. and Yes! that's going to be a great start to it
andcoding
@andcoding
Dec 26 2017 19:04
Hi, i need some help in getting to add content to my website host in Plesk
Every time i try to access the website address, it return into the http 404 error .
shilpi verma
@shilpiverma509
Dec 26 2017 19:18
Hi guys, I am new to React and trying to practice alongside a udemy course. I am trying to set a background Image to a Header Component . How can I add an image in Header.js component and add the respective styles to it in .scc file
.scss*
Harut
@harut-g
Dec 26 2017 19:23
Who is familiar with WebRTC?
Nick Karnik
@theoutlander
Dec 26 2017 19:57
You can use scss directly to load the base64 img
or you can import an img file (use the image-loader / asset-loader ….or whatever that is called in webpack if you’re using webpack)
shilpi verma
@shilpiverma509
Dec 26 2017 21:00
great. Thankyou
David Belmares
@DavidBelmares
Dec 26 2017 21:29
image.png
I'm stuck on the palindrome challenge of the JS section and I still can't figure out what I've done wrong. What about my code is wrong
image.png
I even tried planning it out before coding it
Sorin Ruse
@sorinr
Dec 26 2017 21:42
@DavidBelmares what do you expect by: return reverseStr == strWhitoutSpecial; ?
David Belmares
@DavidBelmares
Dec 26 2017 21:43
It is supposed to check if the reversed string (without special characters) is the same as the original string (without special characters)
and if it is then it returns true
Sorin Ruse
@sorinr
Dec 26 2017 21:45
nope. thats the problem its not returning a boolean as the challange request
David Belmares
@DavidBelmares
Dec 26 2017 21:45
oh
The following won't work either:
image.png
Sorin Ruse
@sorinr
Dec 26 2017 21:49
it should but as you pointed out even if using a conditional statement dosn't work it means somenthing wrong in the logic code above it :)
David Belmares
@DavidBelmares
Dec 26 2017 21:49
I kind of suspected it was an issue in the logic of the code, that's what I was asking about
Steve Carroll
@SteveCarroll
Dec 26 2017 21:52
Is this the right place to ask a javascript related question (though, not necessarily related to a FCC challenge or project)?
David Belmares
@DavidBelmares
Dec 26 2017 21:53
It's the palindrome challenge on FCC
Oh, you were asking about your own code? No, I think this is just for FCC challenges
Sorin Ruse
@sorinr
Dec 26 2017 21:58
@DavidBelmares i would first clean up using regex then the rest
David Belmares
@DavidBelmares
Dec 26 2017 21:58
regex is where I'm most confused, I'll have to reteach myself how to do that part
Sorin Ruse
@sorinr
Dec 26 2017 21:59
@DavidBelmares :+1:
@DavidBelmares try it and console.log after each step for debugging to see if u get what you want
David Belmares
@DavidBelmares
Dec 26 2017 22:01
alright thank you for the tip
Sorin Ruse
@sorinr
Dec 26 2017 22:01
welcome
Steve Carroll
@SteveCarroll
Dec 26 2017 22:02
Does anyone have an idea where I can go to get a javascript question answered that isn't based on a FCC project or challenge?
David Belmares
@DavidBelmares
Dec 26 2017 22:02
Stack Overflow is a popular place for that, though I haven't had good experiences there personally. You could try though
Sorin Ruse
@sorinr
Dec 26 2017 22:02
you can ask it even here
Steve Carroll
@SteveCarroll
Dec 26 2017 22:03
Yeah, David B, I haven't, either ;)
David Belmares
@DavidBelmares
Dec 26 2017 22:03
lol
Steve Carroll
@SteveCarroll
Dec 26 2017 22:03
Sorin, this would involve looking at a live example.
Sorin Ruse
@sorinr
Dec 26 2017 22:05
stack overflow may be sometimes a little intimidating but if you put the right question and provide some code you already have you will get a lot of answers(good and bad) :)
Joseph A. Sangine
@HTML-joe
Dec 26 2017 22:05
can someone help me with why this wont display the api? or at least point me in the right direction?
Sorin Ruse
@sorinr
Dec 26 2017 22:08
@SteveCarroll so, whats the problem? you should get used to read a lot, see a lot of tuts but first start thinking yourself on a solution. then get out there and ask for support
Steve Carroll
@SteveCarroll
Dec 26 2017 22:08
The example is located here: http://radvadnation.com/dnd-test/

Sorin (or anyone interested) - What is supposed to happen:
The user clicks a table element and it ‘appears’ to be editable; in fact, a sole ‘floating’ input, which is positioned right over the selected element, is what’s editable. That input is initially invisible until the event (clicking the table) is triggered, then is becomes visible and it gets its value from the element that was clicked, providing the illusion that you are ‘live editing’ the table.
What does happen:
The very first time it works fine but subsequent attempts do something odd, the value does get changed in the new element but so does the previous element’s value. Worse, it continues to change all the values for all previously clicked elements into the last value entered. The thing is acting like the elements are being added to an array and I’m giving them all the same value. I cant figure it out.

Note: You may have to grab this example (it’s all on one html page, but there is a small JSON file for data) and run it locally as the link I point to sometimes won’t load the data reliably (another issue I need to figure out… a timing issue, perhaps).

Sorin Ruse
@sorinr
Dec 26 2017 22:15
@SteveCarroll not for me on chrome. when i click on field it shows the input prefilled with the right text. i don't know how can i reproduce the behavior you encounter
Steve Carroll
@SteveCarroll
Dec 26 2017 22:16
Sorin, the input in question shows up when you click on a <td> element
Provided the data loaded... it doesn't reliably
It sounds like it's not loading the data for you.
Sorin Ruse
@sorinr
Dec 26 2017 22:18
Capture2.PNG
here what i see. and it works for me
Steve Carroll
@SteveCarroll
Dec 26 2017 22:20
OK, so the data loaded, now click a table element <td>
It only works once... after that it's screwy in the way I described above
Sorin Ruse
@sorinr
Dec 26 2017 22:23
Capture3.PNG
did it and works every time as it should
Steve Carroll
@SteveCarroll
Dec 26 2017 22:24
You're kidding? It doesn;t work here
I'm not usually able to get the data to even load ;)
Sorin Ruse
@sorinr
Dec 26 2017 22:25
no kidding. don't get data table messed up
when sellecting any td on table. lemme try on other browsers then chrome
Steve Carroll
@SteveCarroll
Dec 26 2017 22:26
You can do a number of elements, one after the other, and they all change properly?
Sorin Ruse
@sorinr
Dec 26 2017 22:30
yep. tested it in opera in it work. firefox dosn't load data when pressing load data btn but the header works
Steve Carroll
@SteveCarroll
Dec 26 2017 22:31
Look at the video I just posted, it shows what I'm talking about.
Sorin Ruse
@sorinr
Dec 26 2017 22:32
@SteveCarroll hold on. i haven't tried to change the values in the fields just focusedthem to see it changes to an input with same value
Steve Carroll
@SteveCarroll
Dec 26 2017 22:33
OK, I was really gonna flip if it was working for you ;)
David Belmares
@DavidBelmares
Dec 26 2017 22:34
Still stuck on the palindrome challenge :worried: Is my regexp properly set up to detect all non alphanumeric characters?
image.png
Steve Carroll
@SteveCarroll
Dec 26 2017 22:37
Sorin, you have to hit the return key to trigger the function
@DavidBelmares , it's been awhile since I've done that but don't you want caps, too?
Sorin Ruse
@sorinr
Dec 26 2017 22:39
yep. now i see what you meant. it changes some of your td values with the same value you entered in a certain td. check if your td have unique ids coz if you copy pasted them you probably forget to change them to be unique or the selector in your js trigger more td fields then the current one (this)
Jacob Colborn
@jcolborn-dropdeadgames
Dec 26 2017 22:39
@DavidBelmares The ^ symbol matches negatives, so it will match anything that isnt a-z or 0-9. Try it without the ^ in front, otherwise it looks good.
David Belmares
@DavidBelmares
Dec 26 2017 22:39
image.png
@SteveCarroll Well it says this in the instructions
@jcolborn-dropdeadgames I want it to detect any non alphanumeric characters and remove them
Steve Carroll
@SteveCarroll
Dec 26 2017 22:40
@sorinr , I'm not using id, just e.target
And as far as I know, each event is separated from other events
I thought it might be a 'this' issue but wasn't sure how to check
Sorin Ruse
@sorinr
Dec 26 2017 22:42
@SteveCarroll console log e.target for diffrent tds and see what it is
Steve Carroll
@SteveCarroll
Dec 26 2017 22:42
I have, it seems like it's doing what it's supposed to...
Sorin Ruse
@sorinr
Dec 26 2017 22:43
@SteveCarroll e.target may be same selectror for multiple tds
Steve Carroll
@SteveCarroll
Dec 26 2017 22:43
Maybe I should give an id and then yank it when done?
@sorinr, RE: "e.target may be same selectror for multiple tds". Are you sure?
Sorin Ruse
@sorinr
Dec 26 2017 22:47
@SteveCarroll yes as long as you can't identify them individually. e.target will probably be #tbody1>tr>td for all or something like that
Steve Carroll
@SteveCarroll
Dec 26 2017 22:49
@sorinr, So maybe I should add and remove id. Seems like that should fix it.
Sorin Ruse
@sorinr
Dec 26 2017 22:49
@SteveCarroll are u using the id of id="floating-input" on multiple td elements?
Steve Carroll
@SteveCarroll
Dec 26 2017 22:49
Yes
Sorin Ruse
@sorinr
Dec 26 2017 22:49
thats it
Steve Carroll
@SteveCarroll
Dec 26 2017 22:50
Duh! What a dummy I am ;)
Sorin Ruse
@sorinr
Dec 26 2017 22:50
ids must be unique
Steve Carroll
@SteveCarroll
Dec 26 2017 22:50
LOL
I know... they have to be unique
Jacob Colborn
@jcolborn-dropdeadgames
Dec 26 2017 22:50
@DavidBelmares I understand now I apologize. Putting the two types in seperate brackets ignores the numbers part, I believe. Try to set it to [^a-z0-9]
Steve Carroll
@SteveCarroll
Dec 26 2017 22:52
@sorinr, thanks!
CamperBot
@camperbot
Dec 26 2017 22:52
stevecarroll sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1380 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Dec 26 2017 22:52
@SteveCarroll welcome. :+1:
Steve Carroll
@SteveCarroll
Dec 26 2017 22:55
@sorinr, I still don't understand the behavior I was getting, though. It acts like I sent them to an array.
@DavidBelmares, what about using the 'not word' character class, \W ?
Sorin Ruse
@sorinr
Dec 26 2017 23:02
@SteveCarroll when you update the value to a td having the id="floating-input" you actually are updating all tds having that id of floating-input. in this case the id acts more like a class
Steve Carroll
@SteveCarroll
Dec 26 2017 23:06
But none of the td's themselves ever have an id, only the floating input has it.
The particular td in question is only ever referenced as 'e.target', and as far as I can tell, it's always the right one.
Weird, no?
Sorin Ruse
@sorinr
Dec 26 2017 23:19
@SteveCarroll can you put your code on codepen to look at it? its kinda hard to debug this way
@SteveCarroll but if no hurry i'll look at it tomorrow morning.
Steve Carroll
@SteveCarroll
Dec 26 2017 23:21
I'm trying... don't know where to put the json
Sorin Ruse
@sorinr
Dec 26 2017 23:21
@SteveCarroll into a var in js part :)
@SteveCarroll and simulate the ajax call loading the data from the var
Steve Carroll
@SteveCarroll
Dec 26 2017 23:31
Spooky stuff happening today, look at this: https://codepen.io/fretwizz/project/editor/APqJwb
Look at the data in the json file there... and look at what is showing up (some stuff I was doing earlier)
Sorin Ruse
@sorinr
Dec 26 2017 23:38
@SteveCarroll i'm seeing same as you. as i said i'll take a look in the morning. its 1:38 here. time to go to bed for now
Steve Carroll
@SteveCarroll
Dec 26 2017 23:39
Hey, thanks for all your effort!
Sorin Ruse
@sorinr
Dec 26 2017 23:39
np
Steve Carroll
@SteveCarroll
Dec 26 2017 23:39
It's one of those days ;)
David Belmares
@DavidBelmares
Dec 26 2017 23:45
Is the following correct syntax for finding all characters that are NOT a-z AND are NOT 0-9?
image.png