These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Apr 2018
Aditya
@ezioda004
Apr 06 2018 00:03
@tertiaryidentifier Are you getting any error in the console?
John
@tertiaryidentifier
Apr 06 2018 00:21
@ezioda004 I am now using the $.ajax function and the error in the console is a network error
trying http and https nothing works
Aditya
@ezioda004
Apr 06 2018 00:27
@tertiaryidentifier Couple of things, you dont want to make the async calls synchronous. Also, there is some mixed content so make sure everything is in HTTPS and add this &origin=* in the endpoint url request to resolve the CORS issue
John
@tertiaryidentifier
Apr 06 2018 00:36
okay now it's working but json.parse() isn't ...
unexpected token "/"
Brad
@bradtaniguchi
Apr 06 2018 00:38
@tertiaryidentifier Sounds like your getting back some data that isn't json, what does it printout in the console before it goes to parse?
Or you can check your network tab in your devtools
can someone look at this and tell me why it isn't console logging the json data please
Aditya
@ezioda004
Apr 06 2018 01:53
@JoEeeezy_twitter You have parentheses closed before the callback function.
$.getJSON("https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i]), function(json) {
            }
Should be
$.getJSON("https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i], function(json) {
        })
JoEezy
@JoEeeezy_twitter
Apr 06 2018 01:56
@ezioda004 wow... thank you ... i feel so dumb now because this is like the third time this happened to me in other projects too :anguished: lol
CamperBot
@camperbot
Apr 06 2018 01:56
joeeeezy_twitter sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 528 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Apr 06 2018 01:57
@JoEeeezy_twitter No worries, we've all been through that ;)
Amit Patel
@AmitP88
Apr 06 2018 01:59
hey guys, I know this is a basic problem but I've been puzzled onto how to do this (whatever I seem to do won't work), but how do I vertically center my twitter icon inside the button via css?
https://codepen.io/AmitP88/pen/YepOxg?editors=0010
Christopher McCormack
@cmccormack
Apr 06 2018 02:06
@AmitP88 easiest way is to change your line-height of the icon
that may mess up your other button though
Aditya
@ezioda004
Apr 06 2018 02:18

@AmitP88 Try

twitter::before {
    padding-left: 60px;
    position: relative;
    top: 10px;
}

Seems to fix it

Christopher McCormack
@cmccormack
Apr 06 2018 02:19
Yeah I was playing with that as well, but might also be easier to just make the twitter link a button instead
Amit Patel
@AmitP88
Apr 06 2018 02:20
@ezioda004 thanks Aditya, that did it :)
CamperBot
@camperbot
Apr 06 2018 02:20
amitp88 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Amit Patel
@AmitP88
Apr 06 2018 02:21
@cmccormack I think I tried to do that before, but it ended up messing up the twitter link (it wouldn't populate the twitter window with the generated joke)
Christopher McCormack
@cmccormack
Apr 06 2018 02:21
@AmitP88 did you add a click handler to the button?
Amit Patel
@AmitP88
Apr 06 2018 02:21
@cmccormack I can't remember, this was over a month ago I think
Christopher McCormack
@cmccormack
Apr 06 2018 02:22
I wouldn't even use an anchor tag if you are just going to use that element to make an ajax call though
Amit Patel
@AmitP88
Apr 06 2018 02:22
I've just barely come back to this project yesterday to clean up the design
@cmccormack hmmm, I'll see if I can remove it and apply the same styles to just the i tag
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:37
_finder.selectItemByValue(versionSelectorDom,"4.4"); selectField.dispatchEvent(changeEvent); //when change event fires, an POST XMLHttpRequest (async) is send //and it needs time to get the data back function addSomeDelay(){ addThisVersion("4.4"); } setTimeout(addSomeDelay,3500);
    _finder.selectItemByValue(versionSelectorDom,"4.4");
    selectField.dispatchEvent(changeEvent);
    //when change event fires, an POST XMLHttpRequest (async) is send
    //and it needs time to get the data back
    function addSomeDelay(){
        addThisVersion("4.4");
    }
    setTimeout(addSomeDelay,3500);
any ideas how can i force that event to be sync?
or at least not count on timeout(what if delay tooks longer?>)
Christopher McCormack
@cmccormack
Apr 06 2018 02:39
Try not to use sync but instead handle the code that depends on the response as part of your callback
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:40
the trick is that i cannot alter that event(the request too)
i cannot add callback to the eventlistener
i am writing utility function which is added trough console and manipulates site
i do not have direct access to the event handler
Christopher McCormack
@cmccormack
Apr 06 2018 02:45
I think you may need to provide more context
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:47
2018-04-06_05h46_55.png
this is an html page, there is table with checkboxes and dropDown.When you change one of the dropdowns, an POST request fires and fetches new table with content
i want to collect the data for all tables WITHOUT user interaction
Christopher McCormack
@cmccormack
Apr 06 2018 02:49
ok
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:49
just paste script and execute
but i cannot mess with the event listener for the onchange, because it's interconnected and covered in IIFE
Christopher McCormack
@cmccormack
Apr 06 2018 02:50
Notes
Unlike "native" events, which are fired by the DOM and invoke event handlers asynchronously via the event loop, dispatchEvent invokes event handlers synchronously. All applicable event handlers will execute and return before the code continues on after the call to dispatchEvent.
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:53
I am not sure that i understand this line
Christopher McCormack
@cmccormack
Apr 06 2018 02:54
Sounds like it's already synchronous
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:54
yes but
the code for the event is as follows
-
the event callback fires that request
and i have no control over it
Christopher McCormack
@cmccormack
Apr 06 2018 02:57
Have you considered overriding the existing functions with your own?
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:57
as a last resort measure only
Christopher McCormack
@cmccormack
Apr 06 2018 02:58
Also wrap your code with ``` on their own line to display it properly. You can edit previous posts
```
[code]
```
Bozhidar Dimitrov
@phiratio
Apr 06 2018 02:59
is there a line limit?
that code is ~300 lines long
Christopher McCormack
@cmccormack
Apr 06 2018 03:00
maybe don't paste it all then just the relevant code
Bozhidar Dimitrov
@phiratio
Apr 06 2018 03:04
(function(win){
    var doc = win.document,
        version_select   = doc.getElementById('user-selector-select-version'),
        exttable_body    = doc.getElementById('user-selector-extensions-table'),
        exttable_save    = doc.getElementById('user-selector-table-save'),
        exttable_default = doc.getElementById('user-selector-table-default'),
        sel_message      = doc.getElementById('selector-message'),
        infobox          = doc.getElementById('infobox').innerHTML;



    exttable_save.onclick = function(e){
        //irrelevant
    };

    exttable_default.onclick = function(e){
        //irrelevant
    };


version_select.onchange = function(e){
        var selected_version = stripVersion(version_select.options[version_select.selectedIndex].firstChild.nodeValue),
            request = new XMLHttpRequest(),
            request_data = {"version":selected_version,"action":"extlist"};
        if ( typeof(username) !== 'undefined' ) {
            request_data['username'] = username;
        }
        request.open("POST", uri); // uri defined in template
        request.onreadystatechange = function(){
            if ( request.readyState === 4 && request.status === 200 ) {
                var data = JSON.parse(request.responseText),
                    indexes = [];
            //more ifs that handle the response and populate the page

            }
        };
        request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
        request.send(encodeFormData(request_data));
    };
}(window));
that's basicly the function i am interested in
.onchange callback
can i override that type of IIFE function
Level32
@BENticLabs
Apr 06 2018 03:07

I embedded a video with an iframe tag from a third party. I'd like to remove the video's title.

Is it possible to hide, remove, or change a class element within an iframe's document using jQuery OnLoad Event?

Christopher McCormack
@cmccormack
Apr 06 2018 03:09
@phiratio why not just call the api yourself?
@BENticLabs is the title within the iframe?
Bozhidar Dimitrov
@phiratio
Apr 06 2018 03:16
@cmccormack thanks
CamperBot
@camperbot
Apr 06 2018 03:16
phiratio sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1394 | @cmccormack |http://www.freecodecamp.org/cmccormack
Bozhidar Dimitrov
@phiratio
Apr 06 2018 03:17
i'll do that but i'll have to read the documentation
Level32
@BENticLabs
Apr 06 2018 03:17
@cmccormack it's not on my end, it's on the third party's website
Bozhidar Dimitrov
@phiratio
Apr 06 2018 03:17
for the xml.. object
Christopher McCormack
@cmccormack
Apr 06 2018 03:17
@phiratio sure, might be easier than trying to usurp the pages event handlers
Bozhidar Dimitrov
@phiratio
Apr 06 2018 03:17
absolutely i do agree with you
Christopher McCormack
@cmccormack
Apr 06 2018 03:17
@BENticLabs not sure you'll be able to do that
Level32
@BENticLabs
Apr 06 2018 03:25
@cmccormack k thanks
CamperBot
@camperbot
Apr 06 2018 03:25
benticlabs sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1395 | @cmccormack |http://www.freecodecamp.org/cmccormack
coderNewby
@coderNewby
Apr 06 2018 06:01
@DarrenfJ thanks for the tips
CamperBot
@camperbot
Apr 06 2018 06:01
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2451 | @darrenfj |http://www.freecodecamp.org/darrenfj
dinesh
@1532j0004kg
Apr 06 2018 06:09
parralax effect?
Sujit Mohanty
@sujitmohanty
Apr 06 2018 06:12
yes
dinesh
@1532j0004kg
Apr 06 2018 06:12
it means ?
for this u just set whole page background and also for particular section background is enough may be
DarkxPunk
@DarkxPunk
Apr 06 2018 06:16
Does anyone know if a solution exists to make a grid layout display in ie11?
dinesh
@1532j0004kg
Apr 06 2018 06:17
give any example !
@DarkxPunk
Markus Kiili
@Masd925
Apr 06 2018 06:18
@DarkxPunk Are you asking what popular grid systems work in IE11?
DarkxPunk
@DarkxPunk
Apr 06 2018 06:18
@1532j0004kg Grid is not supported by ie11, so any example wont work. I am just curious if there is a like a JS hack that will add the functionality to IE11
I thought I ask before I jump to google XD
Markus Kiili
@Masd925
Apr 06 2018 06:20
@DarkxPunk Most likely not.
Ryan Williams
@Ryanwfile
Apr 06 2018 07:13
what is the best way to position elements so that all of the elements inside of a rectangle div stay in the same spot, currently I am creating a card and trying to place information on it but every time I adjust something it affects all of the other elements. Here is the pen, https://codepen.io/Ryanwfile/pen/BrqrPr here is the specific css
.rect{
  background-color:blue;
  height:300px;
  width:250px;
  text-align:center;
}

.cardName{
  position:relative;  
  top:50px;
  font-size:42px;
}

.cardCost{
  position:relative;  
  top:50px;
  font-size:42px;
}
@geniusFunk Thank you
CamperBot
@camperbot
Apr 06 2018 07:14
ryanwfile sends brownie points to @geniusfunk :sparkles: :thumbsup: :sparkles:
:cookie: 14 | @geniusfunk |http://www.freecodecamp.org/geniusfunk
alpox
@alpox
Apr 06 2018 08:03
@Ryanwfile Set the rect to position: relative and the elements inside to position absolute, then position them right with left/top/right/bottom
Ryan Williams
@Ryanwfile
Apr 06 2018 08:31
@alpox I will do that, thank you so much
CamperBot
@camperbot
Apr 06 2018 08:31
ryanwfile sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1598 | @alpox |http://www.freecodecamp.org/alpox
Deepak Gowda
@Deep2322_twitter
Apr 06 2018 08:43
how do i add a bunch of properties to a existing object ?
Justin
@Syncthetic
Apr 06 2018 08:47
in JavaScript?
Deepak Gowda
@Deep2322_twitter
Apr 06 2018 08:47
yes @Syncthetic in javscript
Justin
@Syncthetic
Apr 06 2018 08:48
You can use dot notation
if the object is named car and you want to add a tire_count property, you could do something like car.tire_count = 4
You could also use bracket notation and do the same, as car[tire_count] = 4
Markus Kiili
@Masd925
Apr 06 2018 08:49
@Deep2322_twitter Dot or bracket notation. If you wan't to control property attributes of the property (enumerable, writable, configurable), you can use Object.defineProperty().
Deepak Gowda
@Deep2322_twitter
Apr 06 2018 08:49
what if i have a number of properties ?
Justin
@Syncthetic
Apr 06 2018 08:49
same thing applies...
what do you mean
Just do that for each property
Deepak Gowda
@Deep2322_twitter
Apr 06 2018 08:50
ok thank you @Syncthetic :-)
CamperBot
@camperbot
Apr 06 2018 08:50
deep2322_twitter sends brownie points to @syncthetic :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @syncthetic |http://www.freecodecamp.org/syncthetic
Justin
@Syncthetic
Apr 06 2018 08:50
if you have 5 properties you want to add to the object, you can loop over them with bracket notation and set their values
Markus Kiili
@Masd925
Apr 06 2018 08:52
@Syncthetic In your example, it needs to be like car["tire_count"] = 4. Without quotes it looks for a variable tire_count.
Justin
@Syncthetic
Apr 06 2018 08:54
Ahh, yea, ty
Deepak Gowda
@Deep2322_twitter
Apr 06 2018 08:54
thanks @Masd925
CamperBot
@camperbot
Apr 06 2018 08:54
deep2322_twitter sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4763 | @masd925 |http://www.freecodecamp.org/masd925
Sharmin
@SharminR
Apr 06 2018 09:46
https://gitter.im/FreeCodeCamp/FreeCodeCamp can't find this so I have joined this room! Is it only me??
Markus Kiili
@Masd925
Apr 06 2018 09:49
@SharminR The main room was shut down yesterday.
Permanently.
Sharmin
@SharminR
Apr 06 2018 09:50
:'(
alpox
@alpox
Apr 06 2018 09:50
@SharminR Many people moved to the discord channel -> https://discord.gg/EHueREz
You find most of the people from the main channel now there
Markus Kiili
@Masd925
Apr 06 2018 09:51
That is an unofficial channel.
alpox
@alpox
Apr 06 2018 09:51
Yup
Sharmin
@SharminR
Apr 06 2018 09:51
ohh
I needed to check something that I saw yesterday in the main channel
alpox
@alpox
Apr 06 2018 09:54
Guess that is gone now :/
Sharmin
@SharminR
Apr 06 2018 09:54
:(

let fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(function(fruit) {
console.log("I want to eat a " + fruit);
});

can someone separate the function part and show me how it is written?
Fabien SHAN
@X140hu4
Apr 06 2018 09:58
@SharminR What do you mean?
alpox
@alpox
Apr 06 2018 09:59
So what is it that you're asking?
Stephen James
@sjames1958gm
Apr 06 2018 09:59
fruits.forEach(fruitList);
Sharmin
@SharminR
Apr 06 2018 10:00

let fruits = ['mango', 'papaya', 'pineapple', 'apple'];

function fruitList (fruit) {
console.log("I want to eat a " + fruit);
}
var sth = fruitList(fruits);
fruits.forEach(sth);

alpox
@alpox
Apr 06 2018 10:00
@SharminR --> @sjames1958gm
Stephen James
@sjames1958gm
Apr 06 2018 10:00
No, you just pass the function "name" to forEach. The fruitList is a function reference which is what forEach is expecting
@SharminR var sth = fruitList(fruits); this will call the function and sth will be undefined (because fruitList doesn't have a return or expect an array)
Sharmin
@SharminR
Apr 06 2018 10:02
So there is no way to write separately?
alpox
@alpox
Apr 06 2018 10:02

There is.

let fruits = ['mango', 'papaya', 'pineapple', 'apple'];

function fruitList (fruit) {
  console.log("I want to eat a " + fruit);
};

fruits.forEach(fruitList);

As @sjames1958gm said

Stephen James
@sjames1958gm
Apr 06 2018 10:03
@alpox :+1:
Sharmin
@SharminR
Apr 06 2018 10:05
Thanks @sjames1958gm @alpox
CamperBot
@camperbot
Apr 06 2018 10:05
sharminr sends brownie points to @sjames1958gm and @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1599 | @alpox |http://www.freecodecamp.org/alpox
:star2: 9168 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 06 2018 10:06
@SharminR :+1:
Joshua Frias
@Juke-Magic
Apr 06 2018 10:32
guys
how can I center my data
??
kerafyrm02
@kerafyrm02
Apr 06 2018 10:39
center which part
Bozhidar Dimitrov
@phiratio
Apr 06 2018 10:39
Hello guys, trying to wrap my head around promises but i cannot understand where i am wrong :(
        (function sendPostToGetExtentionsForSpecificVer(ver) {
        var promise = new Promise(function (resolve, reject) {
            let request = new XMLHttpRequest(),
                request_data = {"version": ver, "action": "extlist"};

            request.open("POST", uri); // uri defined in template
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    console.log(`Request finished, here comes the data`);
                    return promise.resolve(JSON.parse(request.responseText));
                }
            };
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.send(encodeFormData(request_data));
        });
        promise.then( 
            result => console.log(result),
            error => alert(error)
        );
    })("4.4");
it says promise.resolve is not a function
oh... its not promise.resolve(data) but resolve(data)
alpox
@alpox
Apr 06 2018 10:40
@phiratio You got the resolve function of your promise as parameter
yep, resolve(data) thats right :D
kerafyrm02
@kerafyrm02
Apr 06 2018 10:41
I rarely use them. Seem kinda pointless to me.
Bozhidar Dimitrov
@phiratio
Apr 06 2018 10:41
now i have to figure out how to make this function works with array.map
they are really confusing, trying to wrap my head around them for the past 6 hours
kerafyrm02
@kerafyrm02
Apr 06 2018 10:42
What are you trying to do?
alpox
@alpox
Apr 06 2018 10:42
Btw. there is also a Promise.resolve(...) (not the same)
It creates a new promise which instantaneously resolves with the given value
Federico Dente
@fez994
Apr 06 2018 10:42
Hi guys i need help with jquery, can anyone help?
kerafyrm02
@kerafyrm02
Apr 06 2018 10:42
i can dente
alpox
@alpox
Apr 06 2018 10:42
@kerafyrm02 They are surely not pointless ;) you'll get to it maybe
Bozhidar Dimitrov
@phiratio
Apr 06 2018 10:42
fire N post requests, when all are done i should have array with returned promises > do something with that array
kerafyrm02
@kerafyrm02
Apr 06 2018 10:43
Name a situation in which i need on alpox
bc of all the sites ive made ive never needed one
alpox
@alpox
Apr 06 2018 10:43
@kerafyrm02 There is never the direct need as you can always solve it other ways
But as soon as you run into callback-hell you will want them
kerafyrm02
@kerafyrm02
Apr 06 2018 10:43
exactly. lol.
alpox
@alpox
Apr 06 2018 10:43
They are made to keep your structure flat and make the async dataflow better visible
Alexandar B
@ace1122sp
Apr 06 2018 10:44
@alpox they are usefull if you are using node for the backend
kerafyrm02
@kerafyrm02
Apr 06 2018 10:44
i use php
so thats probably why
Alexandar B
@ace1122sp
Apr 06 2018 10:44
yeah
alpox
@alpox
Apr 06 2018 10:44
So its not for need, but for readability and ease of work
kerafyrm02
@kerafyrm02
Apr 06 2018 10:44
the closest i get to a promise is ajax .success
alpox
@alpox
Apr 06 2018 10:45
@ace1122sp Not only there, also in frontend. Everytime you need to work with asynchronous code
kerafyrm02
@kerafyrm02
Apr 06 2018 10:45
not everytime
alpox
@alpox
Apr 06 2018 10:45
@kerafyrm02 Promises also pay out a lot when it comes to async/await which is awesome at times
Alexandar B
@ace1122sp
Apr 06 2018 10:45
@alpox yeah, you're right..
kerafyrm02
@kerafyrm02
Apr 06 2018 10:45
i use iframes for async things too
alpox
@alpox
Apr 06 2018 10:45
iframes? o.O
kerafyrm02
@kerafyrm02
Apr 06 2018 10:45
yes
alpox
@alpox
Apr 06 2018 10:45
Why that
kerafyrm02
@kerafyrm02
Apr 06 2018 10:46
it can handle async jobs without affecting render of page
Alexandar B
@ace1122sp
Apr 06 2018 10:46
any of you guys working on backend course at fcc?
alpox
@alpox
Apr 06 2018 10:46
@kerafyrm02 There are webworkers made for that
kerafyrm02
@kerafyrm02
Apr 06 2018 10:47
yeah im not familiar with webworkers. i guess i kinda do that manually then
Joshua Frias
@Juke-Magic
Apr 06 2018 10:47
@kerafyrm02 the pics and the data
how do I center it?
kerafyrm02
@kerafyrm02
Apr 06 2018 10:48
josh are you talking about the boxes?
alpox
@alpox
Apr 06 2018 10:50

@Juke-Magic

.container {
  margin-top: 50px;
    margin-bottom: 200px;
    margin-left: 550px;
}

-->

.container {
    margin-top: 50px;
    margin-bottom: 200px;
}
dryyyyy
@dryyyyy
Apr 06 2018 10:50
Hi all! Could someone look into my code (https://jsfiddle.net/senufp8a/21/) and tell me why the array is undefined in for loop?
kerafyrm02
@kerafyrm02
Apr 06 2018 10:50
.container {
     margin: auto;
}
imo
Joshua Frias
@Juke-Magic
Apr 06 2018 10:50
@kerafyrm02 I want to center the content inside the boxes
is that it?
kerafyrm02
@kerafyrm02
Apr 06 2018 10:51
oh the text
Joshua Frias
@Juke-Magic
Apr 06 2018 10:51
yep
kerafyrm02
@kerafyrm02
Apr 06 2018 10:51
.paddy {
    display: flex;
}
Joshua Frias
@Juke-Magic
Apr 06 2018 10:51
and the logo
Tiago Correia
@tiagocorreiaalmeida
Apr 06 2018 10:52
kerafyrm02
@kerafyrm02
Apr 06 2018 10:52
and do align-items: center as well
inside that paddy
alpox
@alpox
Apr 06 2018 10:53
@dryyyyyfoundEmail = foundEmail[i].toString().split(':')[1]; Here you set the array in the first iteration to reg@movavi.com. So in the next iteration, the variable foundEmail does not hold an array anymore, but the string reg@movavi.com.
kerafyrm02
@kerafyrm02
Apr 06 2018 10:54
it needs to go on
dryyyyy
@dryyyyy
Apr 06 2018 10:54
@tiagocorreiaalmeida the string has to be as it is
kerafyrm02
@kerafyrm02
Apr 06 2018 10:54
#display .paddy {
    display: flex;
    align-items: center;
}
Bozhidar Dimitrov
@phiratio
Apr 06 2018 10:55
        function sendPostToGetExtentionsForSpecificVer(ver) {
        var promise = new Promise(function (resolve, reject) {
            let request = new XMLHttpRequest(),
                request_data = {"version": ver, "action": "extlist"};

            request.open("POST", uri); // uri defined in template
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    console.log(`Request finished, here comes the data`);
                    return resolve(JSON.parse(request.responseText));
                }
            };
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.send(encodeFormData(request_data));
        });
        promise.then(
            result => console.log(result),
            error => alert(error)
        );
    }

var promises = ["5.5","5.6","7.0"].map( singleArrayItem =>{
    sendPostToGetExtentionsForSpecificVer(singleArrayItem);
});
        Promise.all(promises).then( results =>{
           console.log(`All requests finished \n ${results}`);
        });
anyone who have more experience to tell me when i'm not doing it correctly?
Joshua Frias
@Juke-Magic
Apr 06 2018 10:55
@kerafyrm02 why is there so much space beside status?
online and offline
alpox
@alpox
Apr 06 2018 10:55
@phiratio You don't return the promise from sendPostToGetExtentionsForSpecificVer
Bozhidar Dimitrov
@phiratio
Apr 06 2018 10:56
isnt that the return? return resolve(JSON.parse(request.responseText));
or i should return the variable promise
alpox
@alpox
Apr 06 2018 10:57
@phiratio That returns from the inner function (Which is actually not needed unless you want to stop the function at some point). But that does not return from sendPostToGetExtentionsForSpecificVer.
You need a return promise;
@phiratio Yep, return that variable promise
kerafyrm02
@kerafyrm02
Apr 06 2018 10:57
josh can you resend me your codepen
Joshua Frias
@Juke-Magic
Apr 06 2018 10:58
@kerafyrm02 here
kerafyrm02
@kerafyrm02
Apr 06 2018 10:58
#display .paddy {
    display: flex;
    align-items: center;
    justify-content: center;
}
#display {
    margin: auto;
}
Bozhidar Dimitrov
@phiratio
Apr 06 2018 11:00
@alpox a little help with that return? i am not sure where i should return it
alpox
@alpox
Apr 06 2018 11:00
@phiratio At the end of the function before the }
@phiratio
function sendPostToGetExtentionsForSpecificVer(ver) {
    var promise = new Promise(function(resolve, reject) {
        let request = new XMLHttpRequest(),
            request_data = { version: ver, action: "extlist" };

        request.open("POST", uri); // uri defined in template
        request.onreadystatechange = function() {
            if (request.readyState === 4 && request.status === 200) {
                console.log(`Request finished, here comes the data`);
                return resolve(JSON.parse(request.responseText));
            }
        };
        request.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
        );
        request.send(encodeFormData(request_data));
    });
    promise.then(result => console.log(result), error => alert(error));

    return promise;
}
I believe encodeFormData is defined elsewhere before? :)
Tiago Correia
@tiagocorreiaalmeida
Apr 06 2018 11:02
oh well @dryyyyy
kerafyrm02
@kerafyrm02
Apr 06 2018 11:02
yuk
Tiago Correia
@tiagocorreiaalmeida
Apr 06 2018 11:02
dont change the array you are looping trough
kerafyrm02
@kerafyrm02
Apr 06 2018 11:03
anyone else need help
Bozhidar Dimitrov
@phiratio
Apr 06 2018 11:03
yes, encodeFormData is defined above
but i still get this
2018-04-06_14h03_58.png
alpox
@alpox
Apr 06 2018 11:04
I could use an npm module which does CSV/JSON to JSON-LD transforms through RML mapping >.< i just don't find any
alpox
@alpox
Apr 06 2018 11:05

@phiratio Sry, didn't see before:

var promises = ["5.5","5.6","7.0"].map( singleArrayItem =>{
    sendPostToGetExtentionsForSpecificVer(singleArrayItem);
});

Here you also need a return

Or remove the {}
var promises = ["5.5","5.6","7.0"].map(sendPostToGetExtentionsForSpecificVer);
kerafyrm02
@kerafyrm02
Apr 06 2018 11:06
i just prefer ajax and recursion.
alpox
@alpox
Apr 06 2018 11:07
Well you use promises together with ajax
And recursion too if you wanna :D
kerafyrm02
@kerafyrm02
Apr 06 2018 11:07
yeah.. .success is about it
nothing like .promises or new promises
alpox
@alpox
Apr 06 2018 11:08
jQuery ajax returns a promise interface too. .then is about the same as .success
kerafyrm02
@kerafyrm02
Apr 06 2018 11:08
yeah it is.
alpox
@alpox
Apr 06 2018 11:08
Don't know why you dislike promises :D
Bozhidar Dimitrov
@phiratio
Apr 06 2018 11:09
@alpox thank you
CamperBot
@camperbot
Apr 06 2018 11:09
phiratio sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1600 | @alpox |http://www.freecodecamp.org/alpox
kerafyrm02
@kerafyrm02
Apr 06 2018 11:09
bc i feel like sometimes ppl try to overcomplicate a simple task
Bozhidar Dimitrov
@phiratio
Apr 06 2018 11:09
you just increased my understanding of promices for 5 mins way better than the past 5 hours reading tutorials
alpox
@alpox
Apr 06 2018 11:09
Simple tasks, yes. but Promises make exactly cases where the other way is complicated easier
Bozhidar Dimitrov
@phiratio
Apr 06 2018 11:10
it is so cool wehen there is someone who can quickly point you what is wrong in your code
kerafyrm02
@kerafyrm02
Apr 06 2018 11:10
$.ajax({
   url: url_here,
    method: //post/get,
    data: { json object},
    .success: function(){},
});
like super easy
alpox
@alpox
Apr 06 2018 11:12
You do that same thing with promises
const promise = $.ajax({...}); as it returns a promise interface
And you can use it in a promise chain or whatever
If you need only the response value, success totally does the job ofc.
kerafyrm02
@kerafyrm02
Apr 06 2018 11:14
i dont really get the idea of introducing something new that already works :P
kinda like arrow functions
Ali Bulut
@ali27001
Apr 06 2018 11:14
There are too many nested arrays in json. How do I make a search
alpox
@alpox
Apr 06 2018 11:14
promises are nice when it comes to this as example:
            user.verification_key = await this.generateMailVerificationKey(
                email,
            );

            user.password = await this.encryptString(
                user.password,
                HASH_PASSWORD_SALT,
                HASH_ITERATIONS,
                HASH_PASSWORD_LENGTH,
            );

            // Try to send a mail to the user.
            // the registration will not be completed when we don't
            // get a successful send!
            await this.mailer.sendMailTemplate(
                "registration",
                {
                    emailVerificationRoute,
                },
                user,
            );

            // Set the type of the email which we store
            user.email.type = "main";

            // Finally save to database
            await this.User.query().insertGraph(user);
See how easily chained asynchronous functions are here
@ali27001 A search over everything? Or do you already know the path to a certain object?
kerafyrm02
@kerafyrm02
Apr 06 2018 11:15
i wouldnt do password verfication on server side though
alpox
@alpox
Apr 06 2018 11:15
@kerafyrm02 Ah well, the new stuff has its right
kerafyrm02
@kerafyrm02
Apr 06 2018 11:15
err *client side
alpox
@alpox
Apr 06 2018 11:15
@kerafyrm02 that is serverside
kerafyrm02
@kerafyrm02
Apr 06 2018 11:16
node js?
alpox
@alpox
Apr 06 2018 11:16
yep. Koajs framework
kerafyrm02
@kerafyrm02
Apr 06 2018 11:16
figures lol
yeah i use php
seems like it more relevant for node.js users
alpox
@alpox
Apr 06 2018 11:16
Sure, doesn't matter much what to use there
Not only node.js. Also frontend devs
Ali Bulut
@ali27001
Apr 06 2018 11:17
@alpox will search for the specific object but will only list the title
alpox
@alpox
Apr 06 2018 11:17
As long as you do only jquery stuff you don't need much of the more sophisticated stuff of JS of course.
kerafyrm02
@kerafyrm02
Apr 06 2018 11:17
use recurrsion ali
Ali Bulut
@ali27001
Apr 06 2018 11:18
image.png
kerafyrm02
@kerafyrm02
Apr 06 2018 11:18
that's if you don't know the depth
alpox
@alpox
Apr 06 2018 11:19
@ali27001 you want to search text in the titles?
kerafyrm02
@kerafyrm02
Apr 06 2018 11:20
if it doesn't change then it's
bioplarx[0]['datalar'][1]['sorular']
Ali Bulut
@ali27001
Apr 06 2018 11:21
image.png
such a character search
kerafyrm02
@kerafyrm02
Apr 06 2018 11:22
oh
alpox
@alpox
Apr 06 2018 11:22
@ali27001
bipolarx.datalar
    .filter(item =>
        item.sorular.some(titleObject => titleObject.includes(searchString))
    )
    .map(item => item.soru_alt_baslik);
Ali Bulut
@ali27001
Apr 06 2018 11:23
I will need a linkte for paging
alpox
@alpox
Apr 06 2018 11:23
linkte?
Ali Bulut
@ali27001
Apr 06 2018 11:24
soru_alt_baslik + link
kerafyrm02
@kerafyrm02
Apr 06 2018 11:24
$("#input_id_here").on("input", function(){
      var pressed_key = $(this).val();
      //then use regex to match against titles
});
alpox
@alpox
Apr 06 2018 11:25

@ali27001

bipolarx.datalar
    .filter(item =>
        item.sorular.some(titleObject => titleObject.includes(searchString))
    )
    .map(item => ({ soru_alt_baslik: item.soru_alt_baslik, link: item.link }));

Either this, or just leave away the .map part and get the whole object

kerafyrm02
@kerafyrm02
Apr 06 2018 11:26
how come you use arrow functions alpox
alpox
@alpox
Apr 06 2018 11:26
Why not
kerafyrm02
@kerafyrm02
Apr 06 2018 11:26
not supported on ie11
alpox
@alpox
Apr 06 2018 11:26
Its easier to read, less bloated
In like almost all cases of frontend nowadays you use the babel transpiler and it makes no difference
kerafyrm02
@kerafyrm02
Apr 06 2018 11:27
yeah but think about all those window users who use ie 11
it would break
alpox
@alpox
Apr 06 2018 11:27
Nope
It would not
As i said, we use babel
That transpiles ES6 to ES5 on the go
No care given about IE11. Will work
kerafyrm02
@kerafyrm02
Apr 06 2018 11:28
so even slower than es5
alpox
@alpox
Apr 06 2018 11:28
Nope, its es5
kerafyrm02
@kerafyrm02
Apr 06 2018 11:28
es6 -> convert to es5 -> = slower
vs es5 ->
alpox
@alpox
Apr 06 2018 11:28
Nope because the conversion is not done during runtime
Its a compilation step
kerafyrm02
@kerafyrm02
Apr 06 2018 11:28
it's still extra steps over straight from es5 though, no?
alpox
@alpox
Apr 06 2018 11:29
You present the website fully with ES5 code
During runtime there is about no overhead
I'd say there is none
As you just deliver es5 and the browser reads es5
kerafyrm02
@kerafyrm02
Apr 06 2018 11:30
so if babel stops supporting updates your site breaks?
alpox
@alpox
Apr 06 2018 11:31
no as you can still use the existing versions of it
And babel is backed so much that this can hardly ever happen
Its backed by about all major companies
kerafyrm02
@kerafyrm02
Apr 06 2018 11:31
so what about debugging
alpox
@alpox
Apr 06 2018 11:31
Sourcemaps allow that easily
kerafyrm02
@kerafyrm02
Apr 06 2018 11:31
can you still use debugger;
and watch steps
alpox
@alpox
Apr 06 2018 11:32
Yup
No problem
Just add the sourcemaps option and you debug as ever
kerafyrm02
@kerafyrm02
Apr 06 2018 11:33
it transpiles to es3 like typescript does?
alpox
@alpox
Apr 06 2018 11:34
No it does not. I would not know why you would want that
I'd not even consider supporting anything from IE10 downwards
kerafyrm02
@kerafyrm02
Apr 06 2018 11:35
i was just curious.
i dont mess with anything pre ie11
alpox
@alpox
Apr 06 2018 11:36
:D I sometime would like to just put there a big text for IE10- users sayin: "Upgrade your damn browser!"
kerafyrm02
@kerafyrm02
Apr 06 2018 11:36
haha
alpox
@alpox
Apr 06 2018 11:38
But yea with babel you can use all ESNextNextNext stuff without hesitation and it transpiles down to ES5
Which is neat
kerafyrm02
@kerafyrm02
Apr 06 2018 11:38
pita to setup?
alpox
@alpox
Apr 06 2018 11:38
Pita?
Isn't that some bread? :D
kerafyrm02
@kerafyrm02
Apr 06 2018 11:39
pain in the a**
alpox
@alpox
Apr 06 2018 11:39
If you mean if its hard to setup, depends a bit. Usually you use it with webpack which is an awesome tool but sometimes its configuration is seen as hard (But it got better)
The good thing about it is, it allows you to write your javascript over many different files, modules etc. and you can use everything from the npm registry.
kerafyrm02
@kerafyrm02
Apr 06 2018 11:41
well ill just wait until ie catches up
lol
are they supported on mobile devices?
alpox
@alpox
Apr 06 2018 11:42
I'd not wait for that :) mostly because with webpack you can write in different files and use npm which is the biggest plus you find
People will still write like this even if IE catches up because of these advantages
Those things are sure supported on mobile devices because the tools don't make their way to the browser/mobile device at all
Those tools are local development tools
They mostly just take your bunch of JS files, transpile them and put them together into one (or more) bundle.js files (can be named differently)
There is more to them too ofc. like asset management etc.
kerafyrm02
@kerafyrm02
Apr 06 2018 11:47
k
yeah-- there's a lot more legacy code of es5-- so unless we start hiring new people im pretty sure everyone on our team will stick to es5
alpox
@alpox
Apr 06 2018 11:51
Yea if thats kinda built into the company like that :D but the web has moved on much further already
I mean, normal es5 in huge js files is ok as long as you don't need it all too much
Like for static sites
Where you mix in some dynamics
I'd still suggest your company to take a look at these tools if you once want to go a more dynamic frontend route
Means for new projects
kerafyrm02
@kerafyrm02
Apr 06 2018 11:59
well with compression they're not really that big
alpox
@alpox
Apr 06 2018 11:59
Hmm when did we start talking about the size :D
Ah i see now
kerafyrm02
@kerafyrm02
Apr 06 2018 12:00
btw i was overlooking your function earlier
aren't you missing the array
alpox
@alpox
Apr 06 2018 12:00
Yea with compression not, i just meant there is lots of scrolling involved to find the necessary parts unless you split your js into multiple files anyway and import them all in the html
kerafyrm02
@kerafyrm02
Apr 06 2018 12:00
bipolarx.datalar
    .filter(item =>
        item.sorular.some(titleObject => titleObject.includes(searchString))
    )
    .map(item => item.soru_alt_baslik);
isn't that missing the array
alpox
@alpox
Apr 06 2018 12:01
Which array?
kerafyrm02
@kerafyrm02
Apr 06 2018 12:01
bipolarx
alpox
@alpox
Apr 06 2018 12:01
Oups thats an array too. Good eye
yea kinda :D didn't see that
kerafyrm02
@kerafyrm02
Apr 06 2018 12:01
:D
so that's a loop within a loop
log n squared?
alpox
@alpox
Apr 06 2018 12:08
Well doesn't go much better as you have nested arrays
its more like n^2, no log :D
Or rather n*r
kerafyrm02
@kerafyrm02
Apr 06 2018 12:16
isnt recurison faster than two nested loops?
alpox
@alpox
Apr 06 2018 12:20
No, recursion is the same as fast and blows the stack more
Also, recursion is not applicable in this situation as the location of the data is well known
kerafyrm02
@kerafyrm02
Apr 06 2018 12:24
makes sense
well im off good discussion
Xapuu
@Xapuu
Apr 06 2018 13:02
Hey guys can someone tell me where to find article about using sass in react, i tries few tutorials but it seems that they dosent work :(
Abraham Andres Luna
@geniusFunk
Apr 06 2018 14:23
@Xapuu Have you tried searching CodeProject.com? Here is an article I found: https://www.codeproject.com/Articles/459943/Why-Should-I-Use-SASS
Hoang Duc Quan
@BlazingRockStorm
Apr 06 2018 15:14
guys, I really need your help. My Recipe Box does not appear anything on CodePen but it runs well if I do on my PC https://codepen.io/Rocker_Gryphon/pen/PRaPEL
Moisés Man
@moigithub
Apr 06 2018 15:22
@BlazingRockStorm open ur browser devtools and check on console for errors
(NOT codepen console)
Hoang Duc Quan
@BlazingRockStorm
Apr 06 2018 15:26
@moigithub thanks, I've found it
CamperBot
@camperbot
Apr 06 2018 15:26
blazingrockstorm sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3736 | @moigithub |http://www.freecodecamp.org/moigithub
Hoang Duc Quan
@BlazingRockStorm
Apr 06 2018 15:26
image.png
but now it is CORS problem :(
Moisés Man
@moigithub
Apr 06 2018 15:27
ncaught ReferenceError: Component is not defined
class App extends Component { <---
Hoang Duc Quan
@BlazingRockStorm
Apr 06 2018 15:28
oh damn. thanks again @moigithub
CamperBot
@camperbot
Apr 06 2018 15:28
blazingrockstorm sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
api offline
Hoang Duc Quan
@BlazingRockStorm
Apr 06 2018 15:28
I copy it from file index.js from the project in my lap
forgot to check the react component
Moisés Man
@moigithub
Apr 06 2018 15:30
codepen dont allow imports/require , soo need to "fix" the references
u can try with https://codesandbox.io or https://stackblitz.com
Brad
@bradtaniguchi
Apr 06 2018 17:22
+1 for stackblitz
Daniel
@dbsimeonov
Apr 06 2018 17:48
Guys do you know how I can get the speed of the cursor when its moving with js? I saw few examples but they were really old..
Bozhidar Dimitrov
@phiratio
Apr 06 2018 17:49
hi guys, quick promises question for you
        Promise.all(fireRequestForEachVerExtns).then( results =>{
            console.log(results); ///empty array results is a promise
           _logger.logInfo(`All requests finished`);
           return _finder.processReturnedJson(results); ///not working
        });
how can i rewrite the function so that argument passed to _finder.processReturnedJson is returned promises
data
Christopher McCormack
@cmccormack
Apr 06 2018 17:52
@phiratio isn't results already an array of the promise results for each promise called in Promise.all?
Bozhidar Dimitrov
@phiratio
Apr 06 2018 17:53
typeoff(results) returns object
Brad
@bradtaniguchi
Apr 06 2018 17:55
yes
the typeof array is object
but its still an array
Quilty Kim
@zebralight
Apr 06 2018 17:56
hello. I was wondering if there's a best practice for vertically centering text in an element. the only way that I know how is to center child elements relative to their parent element using flexbox: https://jsfiddle.net/ny79qb4s/
Bozhidar Dimitrov
@phiratio
Apr 06 2018 17:57
hm
Christopher McCormack
@cmccormack
Apr 06 2018 17:59
Right you would use isArray to see if it's an Array object
Daniel
@dbsimeonov
Apr 06 2018 18:00
@zebralight you can do it with flexbox, align-items to center
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:00
hm
it's an empty array
Christopher McCormack
@cmccormack
Apr 06 2018 18:01
@zebralight
#wrapper {
  display: flex;
  align-items: center;
}
Quilty Kim
@zebralight
Apr 06 2018 18:01
I was wondering if there's another way rather than wrapping the text in an element for vertical centering
Brad
@bradtaniguchi
Apr 06 2018 18:02
@phiratio What is? fireRequestForEachVerExtns this should be an iterable of promises
Christopher McCormack
@cmccormack
Apr 06 2018 18:02
@zebralight you can also use line-height but it may have side effects
Quilty Kim
@zebralight
Apr 06 2018 18:02
it seems as if the answer is no from the responses I'm getting
Christopher McCormack
@cmccormack
Apr 06 2018 18:03
why do you not want to use flex?
Daniel
@dbsimeonov
Apr 06 2018 18:03
@cmccormack I think it can be done with display: block and margin: auto ?
Lucci Paula
@luccipaula
Apr 06 2018 18:03
Am I allowed to ask for help here with anything other than freeCodeCamp projects? :)
Daniel
@dbsimeonov
Apr 06 2018 18:03
@paulacaixeta Of course
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:03
@bradtaniguchi its somethink related to each returned promise
var promises = ["5.5","5.6","7.0"].map( singleArrayItem =>{
    return sendPostToGetExtentionsForSpecificVer(singleArrayItem);
});
with that type of return all works, but when i try
Christopher McCormack
@cmccormack
Apr 06 2018 18:04
@dbsimeonov I believe that's for horizontal only isn't it?
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:04
var promises = ["5.5","5.6","7.0"].map( singleArrayItem =>{
    return [singleArrayItem,sendPostToGetExtentionsForSpecificVer(singleArrayItem)];
});
it returns emty object
*array
Brad
@bradtaniguchi
Apr 06 2018 18:05
So promises is an empty array?
Or the final call when your using promise.all
Lucci Paula
@luccipaula
Apr 06 2018 18:05
@dbsimeonov Sweet! Well I'm having some trouble with a supposedly fixed background being all jittery on mobile view (it's a Wordpress site, looks fine on desktop). And I don't know how to fix it :/ https://christieaudio.com
Quilty Kim
@zebralight
Apr 06 2018 18:06
@cmccormack it's not so much that I'm trying not to use flexbox but to avoid adding another set of wrappers if I want to achieve vertical centering. For my example, the change is trivial, but in the event that I have 10+ elements that I'd like to center, I feel like it would be a total pain
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:06
I'm investigating
Brad
@bradtaniguchi
Apr 06 2018 18:06
Looking at your promise variable, it looks like its returning an array of arrays, which isn't what promise.all expects
Christopher McCormack
@cmccormack
Apr 06 2018 18:06
@zebralight Maybe you can implement it differently? what would the final result look like?
Daniel
@dbsimeonov
Apr 06 2018 18:07
@zebralight you can try with absolute positioning as well
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:07
yes, correct
Daniel
@dbsimeonov
Apr 06 2018 18:08
@paulacaixeta the website looks really nice, I like the effects. What's wrong you are saying? Which background
Gulsvi
@gulsvi
Apr 06 2018 18:08
@zebralight This is a great guide that shows all the ways to center
Lucci Paula
@luccipaula
Apr 06 2018 18:08
@dbsimeonov Thank you! I've been working hard on tweaking it, hehe. The background scrolls up on mobile instead of staying put.
CamperBot
@camperbot
Apr 06 2018 18:08
paulacaixeta sends brownie points to @dbsimeonov :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @dbsimeonov |http://www.freecodecamp.org/dbsimeonov
Christopher McCormack
@cmccormack
Apr 06 2018 18:09
@gulsvi :thumbsup:
Gulsvi
@gulsvi
Apr 06 2018 18:09
It's amazing how hard it is to center stuff - so many factors at play...
Lucci Paula
@luccipaula
Apr 06 2018 18:09
Tested it in Chrome on Android and iOS and it's all jittery
Daniel
@dbsimeonov
Apr 06 2018 18:10
@paulacaixeta hmmm can you create a screenshot of whats moving because on my chrome the bg on all media queries looks fixed
Lucci Paula
@luccipaula
Apr 06 2018 18:11
@dbsimeonov I'll try and catch it
@dbsimeonov Are you viewing on your phone?
Daniel
@dbsimeonov
Apr 06 2018 18:12
on Chrome
Let me try on phone
Lucci Paula
@luccipaula
Apr 06 2018 18:12
Yeah it's only a problem on my phone
Desktop is fine
Daniel
@dbsimeonov
Apr 06 2018 18:14
I mean Chrome has the tool to view it to all devices, I see only one kind of bug when the menu is closing, the background is kind of zooming but its not that I guess
Lucci Paula
@luccipaula
Apr 06 2018 18:16
@dbsimeonov What phone do you have?
I think it's because when you scroll down, the address bar goes away
and the background image scrolls up to compensate but then leaves a white space at the bottom
Quilty Kim
@zebralight
Apr 06 2018 18:18
the tricky part of my use case is that the elements whose text I want to be vertically centered are inline elements with different sized fonts, which I think makes the options available to me very limited, unless I go with the flexbox path
Daniel
@dbsimeonov
Apr 06 2018 18:18
@paulacaixeta can you try to catch it with screenshot?
Quilty Kim
@zebralight
Apr 06 2018 18:19
the li elements themselves are centered just fine. it's just the text that's off
Lucci Paula
@luccipaula
Apr 06 2018 18:21
@dbsimeonov Nah it adjusts too quickly, but I think I found a possible solution on Stack Overflow so I'm gonna try it and let you know
Daniel
@dbsimeonov
Apr 06 2018 18:22
If you play around with background-position tip from me that you can adjust it with % which makes a difference. I've faced some problems when used cover/contain on them as well.
Lucci Paula
@luccipaula
Apr 06 2018 18:24
@dbsimeonov You mean like background-position: 100% ?
Daniel
@dbsimeonov
Apr 06 2018 18:25
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
Lucci Paula
@luccipaula
Apr 06 2018 18:25
Oooh never knew that!
I got a screenshot
LydaTech
@lydatech
Apr 06 2018 18:32
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; 
}
Lucci Paula
@luccipaula
Apr 06 2018 18:36
@dbsimeonov I fixed it (with the solution on SO)!
Daniel
@dbsimeonov
Apr 06 2018 18:36
@paulacaixeta hah great, can you share what was the problem?
Lucci Paula
@luccipaula
Apr 06 2018 18:37
Lemme format it properly
div.main.custom-background {
    display: block;
    background-position: bottom left; 
    /*For my instance this is how I have built my bg image. Indexes off the 
bottom left for consistency*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -10;  
}
The other guy wrote that comment, not me
rk
@rajkumart08_twitter
Apr 06 2018 18:39
hi,
  • I am new to jquery.
  • I have check box in sixth column.
  • when I unselect the checkbox I need to add an image in the second column for that particular row.
  • using the below code I am able to add the image to the next column but I need to target second column when I make changes in sixth column.
  • can you tell me how to fix it.
  • providing my code below.
http://jsfiddle.net/htbpye9b/


```

 $(document).on('change', '#checkIDGridName1', function() {

  alert("I am inside change");
  if (this.checked) {
    $(this).closest('td').next('td').addClass("timeGrad1");
    var returnVal = confirm("Are you sure?");
    $(this).prop("checked", returnVal);
  } else {
    $(this).closest('td').next('td').removeClass("timeGrad1");
  }

});


    {
        field: "name1",
        title: "name1",
        template: "# if ('new' =='new') { # <input id = 'checkIDGridName1' type='checkbox' checked=true class=''> # }else{# <span class='oldEventArrow'></span> #} #"

      },

```
Daniel
@dbsimeonov
Apr 06 2018 18:40
@paulacaixeta so you didn't set the top, left on the position fixed ?
or when you select all of them it spreads all over the container..
Lucci Paula
@luccipaula
Apr 06 2018 18:42
@dbsimeonov top and left were set to 0, the other ones weren't
Bozhidar Dimitrov
@phiratio
Apr 06 2018 18:42
@dbsimeonov zdravei bratle
wanna pair?
Lucci Paula
@luccipaula
Apr 06 2018 18:43
@dbsimeonov It still moves a tiny bit, but not as badly as before, phew!
@dbsimeonov Cheers for the help! :)
Daniel
@dbsimeonov
Apr 06 2018 18:43
@paulacaixeta Yes, i thought so. As I said had some difficulties as well on the contain/cover values. Good to know you can use all of them to spread the background.
Lucci Paula
@luccipaula
Apr 06 2018 18:46
Actually now the space is appearing at the top lol
facepalm
Still less noticeable though
Lucci Paula
@luccipaula
Apr 06 2018 18:52
@dbsimeonov Okay so I made
body {
   background-color: #000;
}
And it seems to disguise it well enough because the navbar turns black when you scroll
Makeshift solution yay!
Daniel
@dbsimeonov
Apr 06 2018 18:53
@paulacaixeta You either had somewhere margin or background set on the other section but that will fix it yea. Good thinking
Lucci Paula
@luccipaula
Apr 06 2018 18:54
@dbsimeonov 😎👍
Tiago Correia
@tiagocorreiaalmeida
Apr 06 2018 19:57
@paulacaixeta dont know if it is supposed to, but the home link keeps active all the time even if you scroll for others sections
Liam Docherty
@liamdocherty
Apr 06 2018 20:37
@dbsimeonov Hey, how is everything going with your projects?
rk
@rajkumart08_twitter
Apr 06 2018 20:51

hi,

  • I am trying to learn js basics.
  • I tried analysing the string count code but I am not sure about certain statements.
  • can you guys tell me why its behaving in such a way.
  • this will help to understand better and in future I can fix the issues by myself.
  • providing code below

String.prototype.count=function(c) { 
  var result = 0;
  var i = 0;
  console.log("this--->" + this); // how come this prints strings here, since we dont pass stings here
  console.log("this.length--->" + this.length);
  for(i;i<this.length;i++)
      {
        console.log("this[i]--->" + this[i]); // here we did not declare this an array anywhere right then how come its taking this[i] as s and stings also we did not put in any array
      console.log("c--->" + c);
        if(this[i]==c)
          {
            result++;
          console.log("inside if result++ ---->" + result++);
          // here it prints 1 and 3 but only two times s is present so it should print 1 and 2 right
        }
     }
    console.log("out of for loop result--->" + result);
    // how its printing 4 but s is present only two times 
  return result;
  //console.log("out of for loop result--->" + result);
};


console.log("strings".count("s")); //2

output-------------->

this--->strings
  this.length--->7
  this[i]--->s
  c--->s
  inside if result++ ---->1
  this[i]--->t
  c--->s
  this[i]--->r
  c--->s
  this[i]--->i
  c--->s
  this[i]--->n
  c--->s
  this[i]--->g
  c--->s
  this[i]--->s
  c--->s
  inside if result++ ---->3
  out of for loop result--->4
  4
tundeiness
@tundeiness
Apr 06 2018 21:08

@tundeiness
hi all what is the base url to check for Twitchtv Streams? I have this

https://wind-bow.glitch.me/twitch-api/streams/ freecodecamp

but I keep getting errors
the correct base URL please

Stephen James
@sjames1958gm
Apr 06 2018 21:15
@tundeiness That URL works (assuming that space is just a typo her)
@rajkumart08_twitter
  1. "strings" is the object that you call the function on, so that becomes "this" inside the function
  2. strings also have the index syntax so "strings"[1] is "t"
  3. result++ adds one to result each time so when you console.log(result++) you are adding an extra 1
  4. The same reason you get 1 and 3 you get 4 (result++ adds one after printing it out) so it prints out 3 then makes result 4
Stephen James
@sjames1958gm
Apr 06 2018 21:21
@tundeiness I entered that URL into my browser address bar (without the space before freecodecamp)
{
   "stream": null,
   "_links": {
      "self": "https://api.twitch.tv/kraken/streams/freecodecamp",
      "channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
   }
}
tundeiness
@tundeiness
Apr 06 2018 21:23
@sjames1958gm yeah it works... my bad.
Aditya
@ezioda004
Apr 06 2018 21:25

@rajkumart08_twitter Something to remember, that string literals (primitives) ie var str = "someString" are automatically converted to String objects which allows us to use various string methods on these literals. Such as .charCodeAt(), .concat() etc.
So since its converted to objects, this in that context refers to the current object.

for(i;i<this.length;i++)

this is object with key values of {0: "s", 1: "t", 2: "r", 3 : "i", 4 : "n", 5 : "g", 6 : "s"} so we can access these values using objects bracket notation, since property is a number and therefore we cannot use dot notation.
Now your final doubt about

console.log("inside if result++ ---->" + result++);

That's because result++ is post increment operator. So expression is evaluated before its incremented.
Simple example

var x = 0;
console.log(x++); //0
console.log(x); //1

Its a subtle difference between preincrement and postincrement.

Markus Kiili
@Masd925
Apr 06 2018 21:35
@rajkumart08_twitter To be precise, all property keys in JS are strings, and here dot notation doesn't work because property keys "0" and "1" etc are not valid JS identifiers. Dot notation only works if they are.
zootechdrum
@zootechdrum
Apr 06 2018 21:49
Shit Im stuck again
Can anyone help lol
Here is the code

function destroyer(arr) {
  var dontInc =[];
  var array = Array.prototype.slice.call(arguments[0]);
  for(var i = 1;i<arguments.length;i++){
   dontInc.push(arguments[i]);
  }
    return array.filter(function(el) {
      return el.indexOf(dontInc) > -1;
    });

}


destroyer([1, 9, 3, 1, 2, 3], 2, 3);
why do i get el.indexOf is not a function
Markus Kiili
@Masd925
Apr 06 2018 21:51
@zootechdrum No need for this Array.prototype.slice.call(arguments[0]) because you can just use arr.
zootechdrum
@zootechdrum
Apr 06 2018 21:52
I used because i can use arguments[0] as a regular array
I thought that would fix my issue
Markus Kiili
@Masd925
Apr 06 2018 21:53
@zootechdrum Inside filter, return dontInc.indexOf(el)===-1
@zootechdrum arr holds a regular array.
zootechdrum
@zootechdrum
Apr 06 2018 21:55
I understand you answer
Here was my logic. Because arguments[0] can not be used as a regular array. For example arguments
For example, it does not have the pop method
so i thought that was affecting the filter function
isnt "el" the same thing as my array variable?
Markus Kiili
@Masd925
Apr 06 2018 21:58
@zootechdrum If there was no parameter arr there, you would need to slice call arguments[0].
el holds the array element being iterated by filter.
zootechdrum
@zootechdrum
Apr 06 2018 22:01
Dosent the last statement make sense though----- Its saying if "el" does not have the index of whatever is inside of dontInc.then return it
however is shows el.indexOf(dontInc) is not a function
why?
am I reading it wrong
Moisés Man
@moigithub
Apr 06 2018 22:03
indexOf must be applied on an array...
or.. left side of the dot must be an array
Markus Kiili
@Masd925
Apr 06 2018 22:04
@zootechdrum el holds a number.
zootechdrum
@zootechdrum
Apr 06 2018 22:04
@moigithub you r the man
@Masd925 thanks
CamperBot
@camperbot
Apr 06 2018 22:04
zootechdrum sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4766 | @masd925 |http://www.freecodecamp.org/masd925
zootechdrum
@zootechdrum
Apr 06 2018 22:04
YOu
Now I understand!!
Moisés Man
@moigithub
Apr 06 2018 22:04
full filter method parameters are
someArray.filter ( function ( element, index, array) { .... } )
http://mdn.io/array.filter
zootechdrum
@zootechdrum
Apr 06 2018 22:05
Yeah I am on the page now
I was trying to copy this example
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
I tried to put into my own method from MDN
They used el.indexOf() in their filterItems funciton
Moisés Man
@moigithub
Apr 06 2018 22:08
on ur code.. if u write el.indexOf(... )
based on values filter pass from the array...
el will be a number
and.. numbers DONT have indexOf method
only strings and arrays have
zootechdrum
@zootechdrum
Apr 06 2018 22:10
@moigithub OOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!!!!!!!!!!!!!!!!!!!
THANKS MAN THAT CLEARS UP A LOT
storbeck
@storbeck
Apr 06 2018 22:10
anyone know what happened to the main freecodecamp room? i can't find it
zootechdrum
@zootechdrum
Apr 06 2018 22:10
@storbeck GOOD QUESTION
mstellaluna
@mstellaluna
Apr 06 2018 22:14
@storbeck :wave:
storbeck
@storbeck
Apr 06 2018 22:14
:wave:
was i banned or something
mstellaluna
@mstellaluna
Apr 06 2018 22:15
no
the main room was deleted 2 days ago
it no longer exists
storbeck
@storbeck
Apr 06 2018 22:15
:^o
why
mstellaluna
@mstellaluna
Apr 06 2018 22:15
After months of consideration, we’ve decided to retire some of the Gitter rooms. Quincy posted this message into some of these rooms:
We’re retired the general chatroom on April 4.
We encourage you to instead join us all at https://forum.freeCodeCamp.org
freeCodeCamp’s forum software was built by the creator of Stack Overflow, and applies many of the lessons learned from running the Stack Overflow community.
Here are some advantages of the forum:
The forum can help you find similar discussions, often saving you the trouble of asking a question that’s been answered before.
You can get help faster and more reliably on the forum. Most questions get answered in less than one hour.
The forum is better for in-depth discussion about tools and getting detailed feedback on your projects.
See you on the forum!
some of the regulars are over on the unofficial discord channel, others are spread out among these channels or went to forum
storbeck
@storbeck
Apr 06 2018 22:17
oo what's the discord
mstellaluna
@mstellaluna
Apr 06 2018 22:17
i don't have the link
storbeck
@storbeck
Apr 06 2018 22:17
:(
mstellaluna
@mstellaluna
Apr 06 2018 22:17
search google for "freecodecamp discord" a forum article should come up
storbeck
@storbeck
Apr 06 2018 22:18
found it
yeah
mstellaluna
@mstellaluna
Apr 06 2018 22:18
:)
Barbara Pentoney
@flyfishingbarbara
Apr 06 2018 22:42
hi all-here's my weather app....is my geolocation working properly...??https://codepen.io/flyfishingbarbara/pen/XZoKyz?editors=0011 thanks!
thanks for your help
Christopher McCormack
@cmccormack
Apr 06 2018 22:45
@flyfishingbarbara I don't see an element with the id #data so you aren't writing the position anywhere. You're also using hardcoded lat lon in your url
@flyfishingbarbara you would want to call your functions that depend on your lat lon data you get back from the navigator API from the navigator callback as well, as this api is asynchronous
Barbara Pentoney
@flyfishingbarbara
Apr 06 2018 22:49
@cmccormack okay i will take a look and see if i can figure that out...thanks
CamperBot
@camperbot
Apr 06 2018 22:49
flyfishingbarbara sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Apr 06 2018 22:49
@flyfishingbarbara np