These are chat archives for FreeCodeCamp/HelpJavaScript

27th
Feb 2018
jusgoose
@gusd773
Feb 27 00:08
@gulsvi so then ' $(id).attr("href" ..' changes my anchor tag attributes to add my link "href= urlSetUpforQuote" correct?
Gulsvi
@gulsvi
Feb 27 00:15
@gusd773 Yes, that's correct
jusgoose
@gusd773
Feb 27 00:22
@gulsvi cool well now my anchor tag link to a blank page but at least now I understand each line of my JS lol which is what I have been trying to do on here for like a week
give @gulsvi a whole brownie tray
Gulsvi
@gulsvi
Feb 27 00:26
@gusd773 Happy to help. I think the link isn't working as expected because the next challenge is removing the HTML from the quote
That API adds some HTML, so you'll need to use the .text() method to get that text out of the HTML
jusgoose
@gusd773
Feb 27 00:39

@gulsvi

that'd have to be within the same { $("#tweetQuote").attr("href", "url" } (not sure what those are called except for jQuery selectors) ?

never had to remove the HTML, I wouldn't even think to do so since I would assume they would be needed to change the HTML in my { $(".message").html() } thingy

Greg Duncan
@GregatGit
Feb 27 01:07

@jeffersonnnn

const options= ['Thing one', 'Thing two', 'Thing three']

handlePick = (arr) => {
  return arr.map(item => {
    return {[item]: item.length}
  })
}

const myObj = handlePick(options)

console.log('myObj', myObj)

try playing around with this

jusgoose
@gusd773
Feb 27 03:03
@FlashHero anybody wanan help me remove html from my api request? I have to use .text()
FlashHero
@FlashHero
Feb 27 03:53
@gusd773 let me see your code
FlashHero
@FlashHero
Feb 27 03:58
@gusd773 you can use remove function of jQuery to remove an element and everything inside it or if you want to remove a part of a text, then you should use the JavaScript slice or something similar to take out only part of a text
Tess0704
@Tess0704
Feb 27 06:59
@Tess0704
anyone who can help me? i'm building a small react project https://codepen.io/haishi0704/pen/bLmeKB why the display can't change as the input changes?
I used a function defined in parent component to deliver data from a child component , but seems not working
Claudio Restifo
@Marmiz
Feb 27 07:13
@Tess0704 You are not binding the context of this, so in every function and in each component has this has a different meaning.
In your case for example in the updateInput function this.props is undefined since this is not referring to the class component
You are gonna have the same problem with this.setState inside the update methods

You can bind this inside constructor:

constructor() {
// bla bla
this.myMethods = this.myMethods.bind(this)
}

Or use arrow function (that don't have their own this argument)

update = val => do something awesome with val
Tess0704
@Tess0704
Feb 27 07:21
@Marmiz you're genius
solved my problem
Claudio Restifo
@Marmiz
Feb 27 07:25
@Tess0704 :fire: :clap: :sparkles:
Tess0704
@Tess0704
Feb 27 07:30
this in react is really confusing
Sarobidy
@Sarobidy
Feb 27 08:10
Hello everyone, someone can send me a cloud9 invitation because I do not have a credit card, thank you in advance.Here is my email: nomenjanaharytonyo@gmail.com
Claudio Restifo
@Marmiz
Feb 27 08:16
@Tess0704 actually this is confusing in JS :scream:
with newer implementation (ES6) is finally easy to implement and understand, all you have to do is follow the latest coding standard an you'll be sound.
no more var that = this :cry:
Markus Kiili
@Masd925
Feb 27 08:25
@Marmiz Arrow functions are useful, but there is also a downside that code is less readable now. Earlier there was only one way to write a function and now there are several ways that look a bit different from each other.
You can see that I try to hang on to ES5 but my grip is slipping ;)
isaak-zmg
@isaak-zmg
Feb 27 08:31
Factorialize a Number
Markus Kiili
@Masd925
Feb 27 08:35
@isaak-zmg If you have a problem with it, post the relevant code and ask away.
Tess0704
@Tess0704
Feb 27 08:52
@Marmiz lol i'm learning new features of ES6 now
Claudio Restifo
@Marmiz
Feb 27 08:54

@Masd925 That's true, but they have their uses as well.
Perhaps in 3 years we will complain about the newer version and look back with nostalgia about fat arrows.

Back in my days decorators were lit

@Tess0704 that's great :)
Tess0704
@Tess0704
Feb 27 10:03
got another problem getUser = () =>{
$.get(apiRoot,function(data){
users = data[0]['username'];
// alert(users);
this.setState({
users:users
});
})
}
unable to get data from an url ,and assign it to this.state.users
Claudio Restifo
@Marmiz
Feb 27 10:25
@Tess0704 again this is undefined because your function is setting a new context:
$.get(apiRoot,function(data)
side note: are you pulling in JQuery just to make an API call?
(~ 250kb only to do a fetch seems a bit much)
Stephen James
@sjames1958gm
Feb 27 10:30
@Tess0704 If you open your devtools console you will see the error setState is not a function, because your this inside the $.get
callback is no longer the component
Tiago Correia
@tiagocorreiaalmeida
Feb 27 10:31
 getUser = () =>{
   $.get(apiRoot,((data)=>{
    this.setState(()=>({users: [...data]}))
  }))
}
I think this will works not sure
Claudio Restifo
@Marmiz
Feb 27 10:33
@Tess0704 also you cannot setState in willMount lifecycle` since the rendere is not called yet, (thus no state to update).
More on component lifecycle
and apparently I'm the only one that gets triggered by the Jquey thingy ^^
Stephen James
@sjames1958gm
Feb 27 10:36
Since this is a non-synchronous call, setState will work in component will mount.
Claudio Restifo
@Marmiz
Feb 27 10:37
@sjames1958gm yeh but it's unreliable
expecially if you have cached data
you can cause infinite rendering in sub-trees (been there, done that)
Stephen James
@sjames1958gm
Feb 27 10:38
Ah. ok did not know.
I have used componentDidMount, or redux
Claudio Restifo
@Marmiz
Feb 27 10:39
You are probably fine, but why when there's componentDidMount for that specific reason
Tess0704
@Tess0704
Feb 27 10:45
didn't realize I made so many mistakes,oh my god
dinesh
@1532j0004kg
Feb 27 10:48
let instructor = "Elie";
if (instructor === "Elie") {
    let anotherInstructor = "Tim";
}
anotherInstructor; // ReferenceError! This would not be true if we had used `var` instead of `let`.

for (let i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    },1000);
}
// try replacing let i = 0 by var i = 0 in the above. What happens... and why?
nee explanation in this let inside the forloop !
Stephen James
@sjames1958gm
Feb 27 10:49
@Marmiz thx for the insight
CamperBot
@camperbot
Feb 27 10:49
sjames1958gm sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1175 | @marmiz |http://www.freecodecamp.org/marmiz
Markus Kiili
@Masd925
Feb 27 10:49
@1532j0004kg With var, all those callback functions would see the same i variable with value 5, when they are executed.
dinesh
@1532j0004kg
Feb 27 10:50
how ?
@Masd925
Markus Kiili
@Masd925
Feb 27 10:52
@1532j0004kg With var, those callback functions run later after given time periods. At that point each function will log the value of variable i that is found on the global scope, and i is 5 when the loop runs out (first index value that returns false from i<5.
Tess0704
@Tess0704
Feb 27 10:53
@Marmiz but I still don't know how to fix my code, my purpose is to get data from url then fill it in a table row
dinesh
@1532j0004kg
Feb 27 10:54
@Masd925 so here let will not work inside the function ?
Markus Kiili
@Masd925
Feb 27 10:54
@1532j0004kg With let, each loop block will have its own variable with own value.
dinesh
@1532j0004kg
Feb 27 10:55
i need var explanation !!!
i got the let explanation !!!
Markus Kiili
@Masd925
Feb 27 10:56
@1532j0004kg When you use var, the variable will be global, because var only looks for function scopes. There is no function here.
So all those callbacks use the same variable.
You can also think that the var declarations are hoisted to the start of the function (or script like here):
var i;
//...
for (i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    },1000);
}
So there is only one global variable here.
Stephen James
@sjames1958gm
Feb 27 11:01
@1532j0004kg Also, the code in the setTimeout callback will run in the future after the for loop is complete and the global/shared I variable is 5
dinesh
@1532j0004kg
Feb 27 11:02
5 ?
here 4 is the value right ?
Stephen James
@sjames1958gm
Feb 27 11:04
No when I is 4 the loop happens one more time, only when I is 5 does the loop stop
dinesh
@1532j0004kg
Feb 27 11:04
like 0,1,2,3,4 is the loop value!'
Stephen James
@sjames1958gm
Feb 27 11:04
0,1,2,3,4 are in the loop and I = 5 exits the loop.
Claudio Restifo
@Marmiz
Feb 27 11:05
@sjames1958gm :wavy_dash: np
dinesh
@1532j0004kg
Feb 27 11:05
var only looks for functions ?
Markus Kiili
@Masd925
Feb 27 11:05
@1532j0004kg Loop stops when the condition is false for the first time, that is when i===5.
Claudio Restifo
@Marmiz
Feb 27 11:05
@Tess0704 as me and others have suggested start by fixing the context of this inside the get method.
(you should know how, we talked about it before)
Markus Kiili
@Masd925
Feb 27 11:06
@1532j0004kg Yes.
let and const live is block scopes, and var in function scopes.
dinesh
@1532j0004kg
Feb 27 11:08
got something thanks @sjames1958gm @Masd925
CamperBot
@camperbot
Feb 27 11:08
1532j0004kg sends brownie points to @sjames1958gm and @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 9032 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:star2: 4705 | @masd925 |http://www.freecodecamp.org/masd925
Tess0704
@Tess0704
Feb 27 11:09
@Marmiz I do delete the jquery API, and wrote this instead
function loadData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", apiRoot, true);
xhttp.send();
}
dinesh
@1532j0004kg
Feb 27 11:10
@Masd925 sry , last question . if(i==5) it is not moving into the loop then hoe it is logging as i=5 ;
since i = 4 is the answer we got it in the last loop right ?
Markus Kiili
@Masd925
Feb 27 11:12
@1532j0004kg At the end of i===4 loop block, i increments and then condition is tested.
dinesh
@1532j0004kg
Feb 27 11:13
inside the settimeout that is not a function(real)
Markus Kiili
@Masd925
Feb 27 11:14
That for loop is a shorthand for equivalent while loop:
dinesh
@1532j0004kg
Feb 27 11:14
@Masd925 how the condition tested , since the loop will not work right ?
Markus Kiili
@Masd925
Feb 27 11:14
i=0;
while(i<5){
  setTimeout(function(){
        console.log(i);
    },1000);
  i++;  
}
So i increments to 5 and then i<5 gives false.
dinesh
@1532j0004kg
Feb 27 11:15
so each time the value is 5.
!!!
right ?
Markus Kiili
@Masd925
Feb 27 11:15
Yes. Those callbacks execute after the script has finished, and then i is 5.
dinesh
@1532j0004kg
Feb 27 11:16
ok , last i=5 it will not moving to loop right .
ok i dont want to waste ur time thanks for ur help !!!
@Masd925
got it!!!!
Markus Kiili
@Masd925
Feb 27 11:18
@1532j0004kg Yes, the code exist the loop when first false condition is evaluated.
Stephen James
@sjames1958gm
Feb 27 11:32
@1532j0004kg :+1:
@Tess0704 I would use the fetch API which is available on most modern browsers
   fetch(apiRoot)
   .then(response => response.json())
   .then(json => // use son here);
rubber2018
@rubber2018
Feb 27 12:57
Hey guys! I am struggling with this code : var myStr = "I am a \"doubled quoted\" string inside\"double quotes \"."; You should use two double quotes (") and four escaped double quotes (\"). Which i did and it's corect and the other one says: Variable myStr should contain the string: I am a "double quoted" string inside "double quotes"....which i did that too... i don't get what am i doing wrong?
Ken Haduch
@khaduch
Feb 27 12:59
@rubber2018 - make sure that you have all of the spacing correct - it's important. Like after the word "inside" make sure you have a space, then the \
It might just be that you copied and pasted incorrectly above, but that is what it looks like to me.
oh, and no space after the "double quotes" and before the \
rubber2018
@rubber2018
Feb 27 13:02
Hmm...I did the spacing...like this: var myStr = "I am a \"doubled quoted \" string inside \"double quotes \"."; but still it says that.. var myStr should contain the string: I am a "double quoted" string inside "double quotes". ...it is not correct .?
Ken Haduch
@khaduch
Feb 27 13:04
@rubber2018 - it's hard to read the code as posted. But you have the word "doubled" in there, too - that should only be "double" in the "double quoted" part... It should end up looking like this: var myStr = "I am a \"double quoted\" string inside \"double quotes\".";
So I think it's probably that misspelling now?
I just didn't notice that the first time...
rubber2018
@rubber2018
Feb 27 13:08
Yes, indeed was a spelling problem. I did corrected: var myStr = "I am a \"double quoted \" string inside \"double quotes \"."; but still the code is wrong. and still says var myStr should contain the string: I am a "double quoted" string inside "double quotes" it is not correct. Sorry for bother...i am a rookie.
Ken Haduch
@khaduch
Feb 27 13:12
@rubber2018 - that's okay... It still looks like there is an extra space after your \"double quoted before the \" ? If you could post your exact code between two backticks so that it would show it without other formatting that would help to see more clearly what is going on. Using ` and then paste your code, and then another `
If I copy and paste the code you posted above: var myStr = "I am a \"double quoted \" string inside \"double quotes \".";
you have an extra space before the second \ and before the fourth \
Nazar
@IsaakNazar
Feb 27 13:15
anyone explain this regExp, what does the regexp say?
str.replace(/,([^,]*)$/, ' and' +'$1');
rubber2018
@rubber2018
Feb 27 13:15
Code.jpg
here it is.
Ken Haduch
@khaduch
Feb 27 13:16
@rubber2018 - if I paste your code on one line and my code on the next, you can see the difference, maybe...
var myStr = "I am a \"double quoted \" string inside \"double quotes \"."; - yours
var myStr = "I am a \"double quoted\" string inside \"double quotes\"."; - mine.
You need to make the spacing be the same.
rubber2018
@rubber2018
Feb 27 13:16
ok.
Yes. Was the spacing problem. Thnx a lot.
Quantomistro3178
@Quantomistro3178
Feb 27 13:20
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
What would the data on that look like as XML? I'm trying to use responseXML
Wait, how do I manipulate JSON with XMLHttpRequest?
nevermind
Ken Haduch
@khaduch
Feb 27 13:25
@IsaakNazar - it looks like it is trying to replace a comma, and what follows that comma with the string ' and' and the stuff that matched inside the parentheses. The parenthesis group an expression, and the string that matches that expression is "saved" and can be referred to with the $1 notation.
Markus Kiili
@Masd925
Feb 27 13:26
@Quantomistro3178 If the response text is json encoded, you can turn it into a JS object with JSON.parse(response).
Ken Haduch
@khaduch
Feb 27 13:26
Do you need more detail? it can be broken down more. the [^,] will match anything that is not a comma. and the * following it means to match 0 or more of the things that are not a comma. So it matches up to the next comma following the first one.
Nazar
@IsaakNazar
Feb 27 13:31
@khaduch thank you for detailed explanation :+1:
CamperBot
@camperbot
Feb 27 13:31
isaaknazar sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3761 | @khaduch |http://www.freecodecamp.org/khaduch
rubber2018
@rubber2018
Feb 27 13:35
Hey, me again. I did al the corect requests but after that, my code: var myStr ='FirstLine\n\SecondLine\\rThirsLine';// Change this line...and one assignment it says : myStr should have encoded text with the proper escape sequences and no spacing. This time i did not put space anywhere. What am I doing wrong?
Quantomistro3178
@Quantomistro3178
Feb 27 13:36
function getQuote() {
  $.get("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data, status) {
    JSON.parse(data);
    quote.innerHTML = data.content;
    quoteName.innerHTML = "- " + data.title.;
  });

}
@Masd925 Is this ok?
Ken Haduch
@khaduch
Feb 27 13:36
@IsaakNazar - you're welcome
Markus Kiili
@Masd925
Feb 27 13:36
@Quantomistro3178 You don't store the parsed object. So something like var obj = JSON.parse(data);
Quantomistro3178
@Quantomistro3178
Feb 27 13:37
@Masd925 oh, wait
Markus Kiili
@Masd925
Feb 27 13:38
The object seems to be an array.
@Quantomistro3178
Quantomistro3178
@Quantomistro3178
Feb 27 13:39
@Masd925 I can just use obj[0] right?
Markus Kiili
@Masd925
Feb 27 13:39
@Quantomistro3178 Yes. You can try to console.log(obj[0]).
Quantomistro3178
@Quantomistro3178
Feb 27 13:40
@Masd925 it says obj is not defined...?
Markus Kiili
@Masd925
Feb 27 13:40
@Quantomistro3178 Post the code again.
Quantomistro3178
@Quantomistro3178
Feb 27 13:41
function getQuote() {
  $.get("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data, status) {
    var obj = JSON.parse(data);
    quote.innerHTML = obj[0].content;
    quoteName.innerHTML = "- " + obj[0].title.;
  });

}
wait
here
Markus Kiili
@Masd925
Feb 27 13:44
@Quantomistro3178 I have to go, so perhaps someone else can help you.
Quantomistro3178
@Quantomistro3178
Feb 27 13:45
@Masd925 Ok, thanks a lot for your help!
CamperBot
@camperbot
Feb 27 13:45
quantomistro3178 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
rubber2018
@rubber2018
Feb 27 13:46
I did finished the 2 assignments from freecodecamp: what you think?https://codepen.io/whiterubber2/
alpox
@alpox
Feb 27 13:48
@Quantomistro3178 There is a syntax error in obj[0].title.; the last . is too much :)
Also, you do not yet use that method anywhere. You have to assign an eventlistener to the button which triggers this function.
Quantomistro3178
@Quantomistro3178
Feb 27 13:49
@alpox Yeah, i removed the dot, lol.
So obj is not defined because the function needs to be called first?
alpox
@alpox
Feb 27 13:50
@Quantomistro3178 I don't know where you get that error :D
Btw. your url should use https instead of http as codepen allows only https now
Tess0704
@Tess0704
Feb 27 13:52
@sjames1958gm @Marmiz thank you guys I finally solved my problem
CamperBot
@camperbot
Feb 27 13:52
tess0704 sends brownie points to @sjames1958gm and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 9034 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Quantomistro3178
@Quantomistro3178
Feb 27 13:52
@alpox Aw man. But I saw on the forum other people also used this API for this project...
Tess0704
@Tess0704
Feb 27 13:52

getUser = () =>{
let self = this;
$.get(apiRoot, data => self.setState({users: data[0]}) );
};

componentDidMount() {
this.getUser();
}

I guess I need to do research first before I write codes, no need to rush
alpox
@alpox
Feb 27 13:53
@Quantomistro3178 And the JSON.parse(obj) is not needed in .get as jquery notices the return MIME type of json and directly converts it
@Quantomistro3178 Yea you can use it, just add the s of https :D
@Tess0704 let self = this; is not needed when you define the function as an arrow function like you did
Quantomistro3178
@Quantomistro3178
Feb 27 13:54
@alpox whoa. thanks, mate!
CamperBot
@camperbot
Feb 27 13:54
quantomistro3178 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1562 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 27 13:55
@Quantomistro3178 np :)
Tess0704
@Tess0704
Feb 27 14:03
@alpox yes, exactly, it's more simple now
Quantomistro3178
@Quantomistro3178
Feb 27 14:12
@alpox just one more thing, is it supposed to work only once, and show the same quote even after running the code again?
alpox
@alpox
Feb 27 14:13
@Quantomistro3178 No it should show new ones
alpox
@alpox
Feb 27 14:19
@Quantomistro3178 You probably have to turn off caching of the request. You can do that by using an object which you pass to .get instead of single parameters:
$.get({
  url: ...,
  cache: false,
  success: function(...) {...}
});
Quantomistro3178
@Quantomistro3178
Feb 27 14:24
@alpox It works. Thanks a lot!
CamperBot
@camperbot
Feb 27 14:24
quantomistro3178 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Feb 27 14:25
@Quantomistro3178 np :)
Zunaid Aslam
@Zunaid-Aslam
Feb 27 14:29

Hey guys can you check if the weather app is working for you guys. And please avoid the code. It's very messy :D

https://codepen.io/Zunaid/full/YeOgJP/

Aditya
@ezioda004
Feb 27 14:34
@Zunaid-Aslam Works for me , I like the minimalist style :thumbsup:
Stephen James
@sjames1958gm
Feb 27 14:35
@Tess0704 :+1:
Zunaid Aslam
@Zunaid-Aslam
Feb 27 14:40
At the moment "minimalist" is taking a toll on me :P so couldn't even go complex.
Thanks @ezioda004
CamperBot
@camperbot
Feb 27 14:40
zunaid-aslam sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @ezioda004 |http://www.freecodecamp.org/ezioda004
alpox
@alpox
Feb 27 14:58
@Zunaid-Aslam The icon does not show up for me
@Zunaid-Aslam The weather type is Clouds for me - you don't seem to have an icon for that one
Zunaid Aslam
@Zunaid-Aslam
Feb 27 15:11
Oh i used index and cloudy
Let me put cloud instead. Be right back
Does it work now @alpox ?
alpox
@alpox
Feb 27 15:13
@Zunaid-Aslam No, doesn't work yet as of the case sensitivity.
You'd better lowercase weather before using .indexOf - and use only lower-case search strings
Zunaid Aslam
@Zunaid-Aslam
Feb 27 15:15
I guess I didn't think it through. Thank you @alpox
CamperBot
@camperbot
Feb 27 15:15
zunaid-aslam sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1563 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 27 15:17
@Zunaid-Aslam np :)
Zunaid Aslam
@Zunaid-Aslam
Feb 27 15:18
Made it lowercase
Can you please test again lol? @alpox Sorry for bugging you so many times.
I actually submitted the code to codecamp already ... :(
alpox
@alpox
Feb 27 15:20
@Zunaid-Aslam Works now :D
Zunaid Aslam
@Zunaid-Aslam
Feb 27 15:32
Thanks for the solution it would have caused issue for many people.
sabahatullah
@sabahatullah
Feb 27 15:45
hi guys, i was wondering if someone could help me with centrally align two adjacent divs . please see thescreenshot https://snag.gy/Ye0RrA.jpg
image.png
@sjames1958gm
h1tag
@h1tag
Feb 27 15:48
@sabahatullah maybe this guide could help you
sabahatullah
@sabahatullah
Feb 27 15:51
@h1tag this is css based. in my case It should be dynamic as the text might change on different pages "See similar Beauty Dresses" so it should be in Javascript I think
so essentially my query is "horzontally align two separate divs where the width of second div would not be static"
h1tag
@h1tag
Feb 27 15:56
@sabahatullah seems a bit complicated :smile:
sabahatullah
@sabahatullah
Feb 27 15:59
I am sure there is a way. I just having trouble with the calculations
h1tag
@h1tag
Feb 27 16:00
@sabahatullah I should've said it's complicated to me, since I don't have experience in this
can you share the code, if its hosted somewhere
Jason Luboff
@JLuboff
Feb 27 16:13
:wave:
sabahatullah
@sabahatullah
Feb 27 16:25
I am trying to do that here. if you wanna try please go ahead
h1tag
@h1tag
Feb 27 16:27

@sabahatullah I don't how exactly, but I think that's doable in CSS

"horzontally align two separate divs where the width of second div would not be static"

I mean if you put a CSS rule to center something, it will always be centered regardless of the width?

I'll take a look at the code now
Fabien SHAN
@X140hu4
Feb 27 16:29
@sabahatullah Can you use flexbox or grid?
sabahatullah
@sabahatullah
Feb 27 16:29
you are actually right if two divs have same parent, but the problem is the place where I want to apply this code doesn't contain both divs withinsame parent.
h1tag
@h1tag
Feb 27 16:29
I see
sabahatullah
@sabahatullah
Feb 27 16:29
@h1tag yes as long as they IE11 and plus supported
Fabien SHAN
@X140hu4
Feb 27 16:32
Do you mean that it has a structure where the divs are like:
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
If you want to align two things mathematically. You need to align their centers
sabahatullah
@sabahatullah
Feb 27 16:35
@X140hu4 please see the codepen link.
Fabien SHAN
@X140hu4
Feb 27 16:37
So you need to determine the centers of both elements, then align them. Here it would be something like
left: halfwidthofelement1 - halfwidthofelement2but then in this case you would also need to determine which is the largest element
I don't have a codepen link to provide. I am just giving some ideas
sabahatullah
@sabahatullah
Feb 27 16:39
@X140hu4 you are correct. thats what I want to do. I have created this codepen link for testing https://codepen.io/sabahat88/pen/MQzRdZ?editors=1111
Fabien SHAN
@X140hu4
Feb 27 16:40
I am doing something else so I cannot help you with a working code, you need to figure the technicalities :)
h1tag
@h1tag
Feb 27 16:43
It seems all the centering css examples out there use parents
Christopher McCormack
@cmccormack
Feb 27 16:48
@h1tag yup you need context to center, usually. One way around that is to use margin: auto;
Jason Luboff
@JLuboff
Feb 27 16:51
@cmccormack Yo'
Christopher McCormack
@cmccormack
Feb 27 16:54
@JLuboff whatup
h1tag
@h1tag
Feb 27 16:55
@cmccormack true
Jason Luboff
@JLuboff
Feb 27 16:55
@cmccormack coding coding coding
you
Tai Jones
@taiJones00
Feb 27 16:55
Can I have some help in the freeCodeCamp chat with a react question
h1tag
@h1tag
Feb 27 16:56
I tried that first, but it wasnt working because they're using position: relative
Christopher McCormack
@cmccormack
Feb 27 16:56
@taiJones00 yeah man
Love react questions - I usually walk away learning something as well
Tai Jones
@taiJones00
Feb 27 16:56
Awesome thank you @cmccormack
CamperBot
@camperbot
Feb 27 16:56
taijones00 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1343 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 27 16:56
@JLuboff working, but itching to get back to the voting app - almost done with it finally
Jason Luboff
@JLuboff
Feb 27 16:57
@cmccormack Nice! You'll be a fifth of the way to getting your cert :D
h1tag
@h1tag
Feb 27 16:57
@sabahatullah if you can remove position: relative, and use margin: 0 auto on the div selector, it would work
Christopher McCormack
@cmccormack
Feb 27 16:57
@JLuboff I think after this one the next several will be much easier
@JLuboff this was a big learning experience for Node/Express/MongoDB/Mongoose/React all together
Jason Luboff
@JLuboff
Feb 27 16:58
@cmccormack Yes and no.. lol Voting app is the hardest just for the sake of throwing you off the deep end (going from API projects to it) but each has their own challenge. I think the Book Trader (or in my case Game trader) was the hardest just for the sheer size of it
Tai Jones
@taiJones00
Feb 27 16:59
Yeah it looks like my problem was using Math.floor when trying to find a decimal number below 1.0. That's why > .5 never equaled true @cmccormack
h1tag
@h1tag
Feb 27 16:59
I quit at the voting app :smile:
Christopher McCormack
@cmccormack
Feb 27 16:59
@taiJones00 glad you got it :)
Jason Luboff
@JLuboff
Feb 27 17:00
@h1tag :D Its a challenge but once you get it done you can do anything! (...sort of)
Christopher McCormack
@cmccormack
Feb 27 17:00
@JLuboff yeah I do feel that way now that I'm on the downhill
sabahatullah
@sabahatullah
Feb 27 17:01
@h1tag the margin one won't work either because that is also relative to the body or parent width
h1tag
@h1tag
Feb 27 17:02
I quit 6 months ago and I said I will get back to it, and I hadn't till now @JLuboff
@JLuboff it was impossible to me
Christopher McCormack
@cmccormack
Feb 27 17:02
@h1tag just tell yourself "No 0 days"!
even 5 min on it can be enough to get your head back into it
that's been my mantra this year
Jason Luboff
@JLuboff
Feb 27 17:03
@h1tag I had to take a couple of uDemy courses to figure things out. And even then, there's quite a bit I did wrong or need to be fixed
h1tag
@h1tag
Feb 27 17:03
yea, that helps :) @cmccormack
Jason Luboff
@JLuboff
Feb 27 17:04
Speaking of 5 minutes.. I need to take a break from coding and do some SQL reading
Markus Kiili
@Masd925
Feb 27 17:04
:ear:
Christopher McCormack
@cmccormack
Feb 27 17:04
@JLuboff has "No 0 minutes"!
h1tag
@h1tag
Feb 27 17:04
@JLuboff :cry: :smile:
Markus Kiili
@Masd925
Feb 27 17:04
@JLuboff So Mongo is forgotten now?
Christopher McCormack
@cmccormack
Feb 27 17:05
Mongo is too easy to forget, especially with Mongoose!
Jason Luboff
@JLuboff
Feb 27 17:05
@Masd925 Oh no no, I love me some Mongo! But... I need SQL for work
h1tag
@h1tag
Feb 27 17:05
@sabahatullah so you have to use position: relative on the 2nd one?
Christopher McCormack
@cmccormack
Feb 27 17:05
... once you actually understand it
Jason Luboff
@JLuboff
Feb 27 17:05
And new app is being built with SQL
Which..is a pain in comparison to mongo..
h1tag
@h1tag
Feb 27 17:06
I don't remember sql being hard, except the relation and normalization stuff
Markus Kiili
@Masd925
Feb 27 17:07
@JLuboff Relational model is a beauty, sql not so much.
Christopher McCormack
@cmccormack
Feb 27 17:08
It's easier than Relational Algebra
Jason Luboff
@JLuboff
Feb 27 17:08
@Masd925 @cmccormack Also..if I can get both of your opinions.. I'm using a package node-sspi for Windows authentication. Depending on the browser...it does passthrough auth or a login screen pops up. I'm handling actual authorization on the backend. Do you think from a UI standpoint, the fact that authentication occurs via passthrough at times (or even after the first time it just keeps passing through) is good or bad? Should I use a different package that actually requires inputting username and password? This app is strictly internal
Christopher McCormack
@cmccormack
Feb 27 17:09
I'm not sure I 100% follow, but my suggestion is to check for valid auth any time the user is trying to do something that actually requires it
Jason Luboff
@JLuboff
Feb 27 17:09
The book I have (Querying Data with Transact-SQL Exam Ref 70-761 by Itzik Ben-Gan) went over the relational math model...it went in one eye and out the other :joy:
@cmccormack Correct, I'm using it as middleware
Christopher McCormack
@cmccormack
Feb 27 17:10
@JLuboff I had to learn it in college - it was beautiful in it's own way, but not something you would want to do every day
sabahatullah
@sabahatullah
Feb 27 17:11
Markus Kiili
@Masd925
Feb 27 17:12
@JLuboff Can't help you with that.
Christopher McCormack
@cmccormack
Feb 27 17:13
@JLuboff sounds good to me then - however I've never written anything for production and never worked with anyone that has :D
Jason Luboff
@JLuboff
Feb 27 17:14
@Masd925 I'm just asking from an User interaction perspective i guess. lol
@cmccormack @Masd925 Thanks either way
CamperBot
@camperbot
Feb 27 17:14
jluboff sends brownie points to @cmccormack and @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 1344 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 4708 | @masd925 |http://www.freecodecamp.org/masd925
h1tag
@h1tag
Feb 27 17:14
@sabahatullah oh! So you wanted to align them with each other only
I thought you needed them to be centered in the page too
Pieter Stokkink
@forkerino
Feb 27 17:21
@JLuboff it depends. If it is some super secret thing that people need to do, or has to do with sensitive information, putting in the user/pass again sounds like the way to go, but if it is something simpler, I wouldn't bother.
:wave:
Christopher McCormack
@cmccormack
Feb 27 17:21
@forkerino hi!
Agreed. I don't know much about SSO though - are you able to determine when a user first connects to the site if they have valid authentication without them using a username/password?
Jason Luboff
@JLuboff
Feb 27 17:22
@forkerino Hey! How's it going? Thanks for the input. It's not super secret so I'll probably stick with how it's setup currently.
CamperBot
@camperbot
Feb 27 17:22
jluboff sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 2982 | @forkerino |http://www.freecodecamp.org/forkerino
Jason Luboff
@JLuboff
Feb 27 17:23
@cmccormack Yes, it stores their domain username in req.connection.user
Christopher McCormack
@cmccormack
Feb 27 17:23
@JLuboff I don't follow - what does?
Pieter Stokkink
@forkerino
Feb 27 17:23
@JLuboff things are good here. Learning a lot about deploying & such.
some devops things
Jason Luboff
@JLuboff
Feb 27 17:24
Sorry, the node module (node-sspi). So when a user connects to a page that authentication is required, node-sspi will put the username info into the request under connection.user
Christopher McCormack
@cmccormack
Feb 27 17:25
@forkerino they make you read The Phoenix Project yet?
Jason Luboff
@JLuboff
Feb 27 17:25
@forkerino Awesome! I've been learning a little about deploying locally here...still a lot to learn
Pieter Stokkink
@forkerino
Feb 27 17:25
@cmccormack nah man, they stay practical.
Christopher McCormack
@cmccormack
Feb 27 17:25
@JLuboff how is node-sspi getting this information?
Pieter Stokkink
@forkerino
Feb 27 17:25
I'm working on creating our first e2e tests, which is awesome
Using cypress.io, which is wonderful
Jason Luboff
@JLuboff
Feb 27 17:26
@cmccormack Either a popup window requesting username/password, or it passes through. Seems to depend on the browser. IE and Chrome seem to passthrough (atleast on my test user on a RDP server) while Firefox requests the credentials
Christopher McCormack
@cmccormack
Feb 27 17:27
@JLuboff so first connection will always be a popup?
Jason Luboff
@JLuboff
Feb 27 17:27
@cmccormack From testing..no, not necessarily.
Christopher McCormack
@cmccormack
Feb 27 17:28
how would it authenticate initially then? Just logging into the machine?
Jason Luboff
@JLuboff
Feb 27 17:28
@forkerino I'm starting to look into testing with this app I'm building....I don't think I'm ready to learn all about how to do it haha
@cmccormack Yes, it's using the computer login credentials (sorry if I'm not being clear)
Christopher McCormack
@cmccormack
Feb 27 17:29
@JLuboff no worries, you don't have to be, I'm just curious :)
AbrisM
@AbrisM
Feb 27 17:29
@Marmiz Thanks, that explains it a bit better now
CamperBot
@camperbot
Feb 27 17:29
abrism sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1177 | @marmiz |http://www.freecodecamp.org/marmiz
Jason Luboff
@JLuboff
Feb 27 17:30
@cmccormack Ya, so req.connection.user would be something like contoso\jluboff
Christopher McCormack
@cmccormack
Feb 27 17:30
@JLuboff note Mac users, if you ever have them, will need to authenticate each time as I don't believe it supports SSO
Jason Luboff
@JLuboff
Feb 27 17:31
I can also get group membership and it automatically populates SIDs which I don't need
Pieter Stokkink
@forkerino
Feb 27 17:31
@JLuboff TDD is very useful, I like mocha/chai to do unit tests. It is not too hard to write tests, just setting it all up takes some reading
Jason Luboff
@JLuboff
Feb 27 17:31
@cmccormack No OSX users on the domain, the only user who had one never joined it to the domain either I don't believe
@forkerino Would you recomend sticking with the likes of mocha/chai over cypress?
Markus Kiili
@Masd925
Feb 27 17:36
@forkerino Don't know if I like TDD or not. Need more contact with it.
sabahatullah
@sabahatullah
Feb 27 18:39
could anyone help me please
I am trying to centrally align second red bar wrt to first red bar
so the middle of second red bar is always in the middle of the first red bar
there is no parent so text-align center is out of question
Christopher McCormack
@cmccormack
Feb 27 18:48
@sabahatullah why not add a parent?
@sabahatullah also it appears centered to me, what browser are you using?
Jason Luboff
@JLuboff
Feb 27 18:55
@cmccormack Not centered for me in FF
Oh sorry
second bar is center of first red line
But not centered on page
Pieter Stokkink
@forkerino
Feb 27 20:12
@JLuboff To get back to your question on testing: mocha/chai are for unit tests, so when you test a function to see if it does what you expect it to do, you use this. If you want to check if your app works when everything is put together, you can use end to end testing - also called functional testing - for which cypress is one solution. You basically programmatically open a browser and tell it to go to a certain page, click here, put text there, etc. and see if the behaviour is as expected. So both are complimentary.
TDD basically means: write the test first, and then write the implementation. This is quite radical, but works very well if you are disciplined about it. I must admit I don't always follow this approach, but am starting to more and more, as I see it saves a lot of time going back and forth from editor to browser to check something (you basically outsource this checking to the test and let it do the repetitive work). It also makes things easier to debug.
Christopher McCormack
@cmccormack
Feb 27 20:14
@forkerino That's pretty cool
Pieter Stokkink
@forkerino
Feb 27 20:15
If you want to learn TDD, I recommend this book: https://www.obeythetestinggoat.com/
It is using Python/Django to teach it (and only a little bit of JS), but the principles translate very well and if you code along, you pick up Django and some python too.
@cmccormack You're referring to cypress? I've only used it for a couple hours here and there, but I really like the way it does things and you can connect it to a dashboard, where you can see videos and debug failing tests, which is awesome.
Christopher McCormack
@cmccormack
Feb 27 20:17
@forkerino yeah - to have something doing the actual browser testing is pretty cool
testing is one of those things that you know would help in the long term but has just enough friction that you never want to start :)
Pieter Stokkink
@forkerino
Feb 27 20:18
The classic solution is using Selenium, but this is a lot more cumbersome.
Christopher McCormack
@cmccormack
Feb 27 20:18
Sort of like Redux for me :D
Pieter Stokkink
@forkerino
Feb 27 20:19
hahah
Redux is awesome too
But I'm starting to see its limitations too
Soooo much boilerplate
Christopher McCormack
@cmccormack
Feb 27 20:19
I just don't think Redux is as elegant as what could be
Pieter Stokkink
@forkerino
Feb 27 20:19
Have a look at MobX
Christopher McCormack
@cmccormack
Feb 27 20:19
I may play with some other state managers
Pieter Stokkink
@forkerino
Feb 27 20:19
it looks clena
clean
Christopher McCormack
@cmccormack
Feb 27 20:20
Yeah I was looking at a list of like 15 of them the other day
have you used both?
Pieter Stokkink
@forkerino
Feb 27 20:22
Haven't used MobX yet, but did do the egghead course.
I liked how simple it is compared to Redux
Christopher McCormack
@cmccormack
Feb 27 20:22
I'll have to check it out
Pieter Stokkink
@forkerino
Feb 27 20:24
We're using Redux at work, and I basically have a couple snippets to fill in a lot of the boilerplate, which saves a lot of time
But our app's state is getting quite complex
Which makes it harder to deal with. If you have to get information from 3 different stores a couple levels deep to do a simple api call, it is a bit much.
Up for refactor time!
jusgoose
@gusd773
Feb 27 20:28

Random Quote Generator:

can anybody help me strip the text from my API request? it's to tweet out a prepopulated tweet

Christopher McCormack
@cmccormack
Feb 27 20:29
@forkerino is it at least easier than passing state to children over and over?
@gusd773 if this is the same project from yesterday - here's my suggestion - populate your html with the quote, then read just the text from your quote display and concatenate that text to your tweet url
Pieter Stokkink
@forkerino
Feb 27 20:32
@cmccormack definitely easier. We do it sometimes, however, when we iterate over an array of objects that we need to use in our view, because it is easier than selecting everything based on index.
jusgoose
@gusd773
Feb 27 20:32
@cmccormack maybe something more explicit? that's like another language to me no offense
Christopher McCormack
@cmccormack
Feb 27 20:32
@gusd773 that was pretty explicit
jusgoose
@gusd773
Feb 27 20:33
@cmccormack diff levels
Christopher McCormack
@cmccormack
Feb 27 20:33
@gusd773 when you get your quote from the API, you are adding it to your html to display it, correct?
jusgoose
@gusd773
Feb 27 20:35
@cmccormack yes to the $(.message)html(parsed JSON) which is the random quote button
@cmccormack although I always thought it was moreso replacing something
Christopher McCormack
@cmccormack
Feb 27 20:37
@gusd773 so a trick you can use is to grab the textContent from that same html element after you have added it - I believe this will get the text without any of the formatting elements but I'd have to check
@gusd773 you could also use a regex for filtering it out
Pieter Stokkink
@forkerino
Feb 27 20:38
@gusd773 ^ those are two great approaches, but it would be helpful to see your code, so perhaps we can give you a nudge in the right direction.
Christopher McCormack
@cmccormack
Feb 27 20:41
@gusd773 so here's something you can do really easily with jQuery: $(quoteContent).text()
this will remove all elements from your quote
jusgoose
@gusd773
Feb 27 20:44

@cmccormack as opposed to the

 $("#tweetQuote")attr("href", 'https://twitter.com/intent/tweet/?text='+ quoteContent + "<p>— " + quoteAuthor + "</p>");

?

Christopher McCormack
@cmccormack
Feb 27 20:44
@gusd773 why would you add markup to your text like that?
Pieter Stokkink
@forkerino
Feb 27 20:45
yeah, twitter will just display text, not html, I believe
jusgoose
@gusd773
Feb 27 20:47
@forkerino that didn't work
Christopher McCormack
@cmccormack
Feb 27 20:47

@gusd773 you could try something like this:

        $("#tweetQuote").attr(
          "href",
          `https://twitter.com/intent/tweet/?text=${$(quoteContent).text()} --${quoteAuthor}`
        );

Although I'm not sure of the behavior if the quote doesn't have html elements in it

jusgoose
@gusd773
Feb 27 20:47
@cmccormack now that makes sense
Christopher McCormack
@cmccormack
Feb 27 20:48
When I tried to use ${$(quoteAuthor).text()} it didn't work though, so be wary
jusgoose
@gusd773
Feb 27 20:49
@cmccormack thank you sorry if I lost some patience the documentation is just overwhelming sometimes
CamperBot
@camperbot
Feb 27 20:49
gusd773 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1347 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 27 20:49
@gusd773 go slow, read carefully, it's the best way to learn
jusgoose
@gusd773
Feb 27 20:57
@cmccormack does ${$(quoteAuthor).text()} not work is that because if there is no author then it is undefined?
Christopher McCormack
@cmccormack
Feb 27 21:00
@gusd773 I think it may be that it doesn't have elements wrapping it
so it doesn't treat it as an element it can parse
Christopher McCormack
@cmccormack
Feb 27 21:08
@gusd773 if every quote comes back wrapped in a <p> tag, go ahead and use .text, but don't use it for the author ever
@gusd773 also check the api and see if there is a way to get the plain text version
Jason Luboff
@JLuboff
Feb 27 21:22
@forkerino Thanks for the further insight. I think End to End testing is what I want. Unit testing is not a bad idea, but still having a hard time factoring out how to implement (but then again, haven't focused too much on learning it thus far). I'll be showing a current version of the app tomorrow in its very unfinished state just to get feedback, after that I'll be further cleaning the current code and wanting to implement some testing
CamperBot
@camperbot
Feb 27 21:22
jluboff sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 2983 | @forkerino |http://www.freecodecamp.org/forkerino
jusgoose
@gusd773
Feb 27 21:23
@cmccormack is it possible to filter out the the HTML tags through the url twitter intent? there's no way to get the plain text from the api.
Gulsvi
@gulsvi
Feb 27 21:23
quoteHTML = quoteContent + "<p> — " + quoteAuthor + "</p>"
quoteText = $(quoteHTML).text();
@gusd773
Use quoteText for the twitter url
Brad
@bradtaniguchi
Feb 27 21:24
@JLuboff My experience with e2e is its really brittle. Unit testing is more reliable and easier, but you will need more of it. (I heard of the 10/20/70 rule, 10 e2e tests for 20 integration test, for 70 unit tests)
Jason Luboff
@JLuboff
Feb 27 21:26
@bradtaniguchi Thanks. My app is essentially forms on the front end and queries on the backend. Not necessarily a lot of logic per say, thats why I'm having a hard time wrapping my head around the type of unit testing I would implement. It probably doesn't help that I have limited experience with it too (only time I've used it was in a uDemy course which was ~year ago)
CamperBot
@camperbot
Feb 27 21:26
jluboff sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 27 21:27
@JLuboff I guess it depends on what your backend looks like, but if you have minimal business logic e2e is pretty good to make sure the app is working as intended.
Jason Luboff
@JLuboff
Feb 27 21:28
Ya.. thats why I'm thinking e2e is better but.. I'll have to read on each style more
Brad
@bradtaniguchi
Feb 27 21:30
Is your app mainly backend stuff? (not react or anything?) and what backend are you using?
Im curious is all :D
jusgoose
@gusd773
Feb 27 21:31

@gulsvi

var quoteContent = "someVal";
var quoteAuthor = "diffVal";

$(function() {
    $('#getQuote').click(function() {
        $.ajaxSetup({
            cache: false
        });
        $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
            quoteContent = quote[0].content;
            quoteAuthor = quote[0].title;
            quoteHTML = quoteContent + "<p>— " + quoteAuthor + "</p>";
            quoteText = $(quoteHTML).text();
            $(".message").html(quoteHTML)

            $("#tweetQuote").attr("href", 'https://twitter.com/intent/tweet/?text='
                quoteText)
        });


    });


});

what I have so far

Gulsvi
@gulsvi
Feb 27 21:31

That looks better, this is a little easier to read:

  $(".message").html(quote[0].content + "<p> — " + (quote[0].title || "Anonymous") + "</p>");
  $("#tweetQuote").attr("href", "https://twitter.com/intent/tweet/?text=" + $(".message").text());

@gusd773

Jason Luboff
@JLuboff
Feb 27 21:31
@bradtaniguchi Using NodeJS (Express) with Microsoft SQL as my database. For the front end just using Bulma CSS and Handlebars as my template engine
Gulsvi
@gulsvi
Feb 27 21:32
the || handles cases when there is no author specified
Brad
@bradtaniguchi
Feb 27 21:33
@JLuboff I think testing express is pretty similar to automating postman stuff, obviously you would also mock the backend so its all fake data coming back. But if your logic is mainly CRUD operations id def go e2e first haha
Jason Luboff
@JLuboff
Feb 27 21:35
@bradtaniguchi Ya it's mainly CRUD operations but using postman and creating some tests still probably isn't a bad idea
Brad
@bradtaniguchi
Feb 27 21:36
Yea, best to prevent regression :)
Jason Luboff
@JLuboff
Feb 27 21:38
@bradtaniguchi Looking at your github...looks like you dabble in a bit of everything, programming language wise
Brad
@bradtaniguchi
Feb 27 21:39
@JLuboff Yea I'm all over the place XD, lots of my public stuff on my github was for school tho.
jusgoose
@gusd773
Feb 27 21:39
@gulsvi yea stilll a no go, I agree tho that does make more sense
Jason Luboff
@JLuboff
Feb 27 21:41
@bradtaniguchi Ah.. Kind of wish I had gone to school for programming but oh well...
Brad
@bradtaniguchi
Feb 27 21:41
Ive been recently trying to get more testing in at my work, basically forcing it haha. I started with e2e but I ran into to many issues for too little gain :(
Jason Luboff
@JLuboff
Feb 27 21:42
I'm sort of forcing myself to use testing too.. Figure thats the proper- production worthy application method lol
Brad
@bradtaniguchi
Feb 27 21:42
@JLuboff I mean it was a nice experience, but they didn't teach much programming. Besides C for an operating system course and Java everything else was optional. They didn't offer any web development courses either :/
Yea same here, our application has a lot of bugs currently and is pretty big. I've been slowly integrating tests for critical parts of the code that are used in multiple places.
Gulsvi
@gulsvi
Feb 27 21:44
@gusd773 It seems to be working just fine for me - maybe I'm overlooking something. What's a no go right now?
Jason Luboff
@JLuboff
Feb 27 21:44
@bradtaniguchi Did you get a CS degree?
jusgoose
@gusd773
Feb 27 21:44
@gulsvi it's not popping up a window
Gulsvi
@gulsvi
Feb 27 21:44
It opens a new tab that lets you send a tweet @gusd773
If you want a modal pop-up window, you'll need to use the Twitter Widget code, which is a whole different ball game
Brad
@bradtaniguchi
Feb 27 21:45
@JLuboff yea, my school was meh tho, but it was the only one that accepted me with my meh grades
Jason Luboff
@JLuboff
Feb 27 21:45
Input meh, Output meh?
jusgoose
@gusd773
Feb 27 21:46
@gulsvi that's what I meant it's not opening a new tab sorry
Brad
@bradtaniguchi
Feb 27 21:47
@JLuboff idk what ya mean
jusgoose
@gusd773
Feb 27 21:47
lol I wanna stay in the minors for a bit @gulsvi
Gulsvi
@gulsvi
Feb 27 21:47
@gusd773 It opens a new tab for me - just tried in Firefox and Chrome on Windows
Christopher McCormack
@cmccormack
Feb 27 21:48
@gulsvi twitter widget is basically drop in place
Gulsvi
@gulsvi
Feb 27 21:48
@cmccormack Not really
Jason Luboff
@JLuboff
Feb 27 21:48
@bradtaniguchi Bad joke
Brad
@bradtaniguchi
Feb 27 21:48
Oh I see, I thought you were being serious haha
Gulsvi
@gulsvi
Feb 27 21:48
Factory functions and more async to deal with when using twitter widget
jusgoose
@gusd773
Feb 27 21:49
@gulsvi not sure why it doesn't work
Christopher McCormack
@cmccormack
Feb 27 21:49
@gulsvi you don't need any of that, you can drop it in place and just add the link, it parses it and give you the popup
@gusd773 look at your browser's developer console
Uncaught ReferenceError: quoteHTML is not defined
Gulsvi
@gulsvi
Feb 27 21:50
@cmccormack Huh, that's definitely not my experience
jusgoose
@gusd773
Feb 27 21:50
var quoteContent = "someVal";
var quoteAuthor = "diffVal";

$(function() {
    $('#getQuote').click(function() {
        $.ajaxSetup({
            cache: false
        });
        $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {

            quoteText = $(quoteHTML).text();
            $(".message").html(quote[0].content + "<p> — " + (quote[0].title || "Anonymous") + "</p>");

            $("#tweetQuote").attr("href", 'https://twitter.com/intent/tweet/?text=' + $(".message").text());
        });


    });


});
this is much better than what I had before thank you all for making sense of it
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:51
hello guys
Brad
@bradtaniguchi
Feb 27 21:51
hello
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:51
Has anyone here gone to any hackathon?
Jason Luboff
@JLuboff
Feb 27 21:51
Nope
Christopher McCormack
@cmccormack
Feb 27 21:52
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:52
damn. I would love to join one man
Christopher McCormack
@cmccormack
Feb 27 21:52
@RoniqueRicketts I setup the network for one my work sponsored but that's it :)
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:52
@cmccormack I wish I could have gone to it.
I want to experience it.
Gulsvi
@gulsvi
Feb 27 21:53
@cmccormack
Loading failed for the <script> with source “https://platform.twitter.com/widgets.js”.  index.html:7
The resource at “https://twitter.com/intent/tweet?text=What%27s%20up%20@gulsvi??” was blocked because tracking protection is enabled.[Learn More]
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:53
I wish they'd keep open Hackathons in my country
Christopher McCormack
@cmccormack
Feb 27 21:53
@RoniqueRicketts do some research, a lot of companies sponsor them as it provides exposure to their company/product
@gulsvi I think that may be you
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:53
@cmccormack they do it here in Jamaica but not much. And most of them are closed.
Christopher McCormack
@cmccormack
Feb 27 21:54
ah that may be a more niche audience, yeah
@gulsvi Firefox?
Ronique Ricketts
@RoniqueRicketts
Feb 27 21:55
Are there any hackathons onlin?
Gulsvi
@gulsvi
Feb 27 21:55
Yes @cmccormack
Christopher McCormack
@cmccormack
Feb 27 21:56
@gulsvi hmm I tried in FF and still no issue, running a tracking blocker of sorts?
Gulsvi
@gulsvi
Feb 27 21:57
Just the basic tracking protection that comes with Firefox. Adblock is disabled.
If I disable tracking protection, it works, but pops up a window on my third monitor
Maybe that would happen either way lol
Christopher McCormack
@cmccormack
Feb 27 21:57
not sure :)
Gulsvi
@gulsvi
Feb 27 21:58
I guess there's more to do if you want the official twitter button
Gulsvi
@gulsvi
Feb 27 22:03
Thank you either way for pointing that out @cmccormack
CamperBot
@camperbot
Feb 27 22:03
gulsvi sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1348 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 27 22:04
@gulsvi np. I know there are other examples that are far more complicated but simply adding the widget was enough for my needs :D
jusgoose
@gusd773
Feb 27 22:04
@gulsvi man idk it won't budge it doesn't want me to succeed
Christopher McCormack
@cmccormack
Feb 27 22:05
@gusd773 pen.js:10 Uncaught ReferenceError: quoteHTML is not defined...
@gusd773 use your developer console!
Gulsvi
@gulsvi
Feb 27 22:06
Yeah @gusd773 You deleted a line it seems. your quoteHTML variable isn't set up any more
This fails: quoteText = $(quoteHTML).text();
Jason Luboff
@JLuboff
Feb 27 22:07
F12 on your keyboard will open Developer Tools in most (if not all) browsers if using Windows
jusgoose
@gusd773
Feb 27 22:07
@gulsvi I though I didn't need those lines
Gulsvi
@gulsvi
Feb 27 22:07
Delete this: quoteText = $(quoteHTML).text();
You gotta delete them both though :)
jusgoose
@gusd773
Feb 27 22:08

       var quoteContent = "someVal";
       var quoteAuthor = "diffVal";

  $(function(){  
     $('#getQuote').click(function(){
        $.ajaxSetup({cache:false});
          $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {


  $(".message").html(quote[0].content + "<p> — " + (quote[0].title || "Anonymous") + "</p>");

  $("#tweetQuote").attr("href", 'https://twitter.com/intent/tweet/?text=' + $(".message").text());
});


                                   });


  });
that's what I have tho?
Gulsvi
@gulsvi
Feb 27 22:09
Now it works
Clean it up a bit now:
$(function() {
  $("#getQuote").click(function() {
    $.ajaxSetup({ cache: false });
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
      $(".message").html(quote[0].content + "<p> — " + (quote[0].title || "Anonymous") + "</p>");
      $("#tweetQuote").attr("href", "https://twitter.com/intent/tweet/?text=" + $(".message").text());
    });
  });
});

Or, a little more modular:

function showQuoteData(quote) {
  $(".message").html(quote[0].content + "<p> — " + (quote[0].title || "Anonymous") + "</p>");
  $("#tweetQuote").attr("href", "https://twitter.com/intent/tweet/?text=" + $(".message").text());
}

function getQuoteData() {
  $.ajaxSetup({ cache: false });
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", showQuoteData);
}

$(function() {
  $("#getQuote").on("click", getQuoteData);
});

@gusd773

Tiago Correia
@tiagocorreiaalmeida
Feb 27 22:20
anyone around has used mocha/chai or others to test node api's»
?
jusgoose
@gusd773
Feb 27 22:22
@gulsvi why would I want to do that when it looks cleaner as I have it?
but my code looks like it should work but won't open new tab
Jason Luboff
@JLuboff
Feb 27 22:25
@tiagocorreiaalmeida Only in a udemy course I did a year ago...and possible some testing soon..but..the real answer is, I can't help you lol
jusgoose
@gusd773
Feb 27 22:26
this is the most tedious thing I've ever done lol if I learn anything from this it's patience
FlashHero
@FlashHero
Feb 27 22:26
@gusd773 It's basically the same code, but with different functions it's easier to see which function does what
jusgoose
@gusd773
Feb 27 22:27
@FlashHero right but even in full page mode it won't open a new tab for me
FlashHero
@FlashHero
Feb 27 22:27
are you using codepen ?
Tiago Correia
@tiagocorreiaalmeida
Feb 27 22:28
@JLuboff yeah same here :D but thanks either way mate
CamperBot
@camperbot
Feb 27 22:28
tiagocorreiaalmeida sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2346 | @jluboff |http://www.freecodecamp.org/jluboff
FlashHero
@FlashHero
Feb 27 22:29
@gusd773 codepen will show you the result automatically if you autosave or else you have to save it yourself
jusgoose
@gusd773
Feb 27 22:30
@FlashHero ok that's what I figured but then idk what isn't letting it work then
FlashHero
@FlashHero
Feb 27 22:31
@gusd773 there's probably an error in your code then maybe check the browser console
jusgoose
@gusd773
Feb 27 22:32
@FlashHero it works in codepen debugger mode but now the editor view
thank you @gulsvi @cmccormack @FlashHero
CamperBot
@camperbot
Feb 27 22:32
gusd773 sends brownie points to @gulsvi and @cmccormack and @flashhero :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @flashhero |http://www.freecodecamp.org/flashhero
:star2: 2628 | @gulsvi |http://www.freecodecamp.org/gulsvi
:star2: 1349 | @cmccormack |http://www.freecodecamp.org/cmccormack
FlashHero
@FlashHero
Feb 27 22:39
@gusd773 so is it working ?
Gulsvi
@gulsvi
Feb 27 22:48
@gusd773 That sounds like a popup blocker or some extension that disables opening links in new tabs
FlashHero
@FlashHero
Feb 27 22:49
@gusd773 you have to say target="_blank" to open in a new tab
Christopher McCormack
@cmccormack
Feb 27 22:52
@gusd773 you can add this to the top of your html:
<head>
  <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
</head>
see if that works for you
image.png
@gusd773 also for convenience, codepen will clean your code up for you so it's more legible :grin:
:wave: see you all later
Jason Luboff
@JLuboff
Feb 27 22:55
See ya