These are chat archives for FreeCodeCamp/HelpFrontEnd

31st
Jan 2018
christopher clarke
@chrisdclarke
Jan 31 2018 00:05
hey everyone,, i cant seem to get any javascript to work on codepen... console.log("doesent work") i even try a blank document.alert("doesnt work"); is this just my problem, or should i abandon codepen?
Brad
@bradtaniguchi
Jan 31 2018 00:06
@chrisdclarke Are you trying to program on codepen? I usually do my work on a real editor, and environment and just transfer everything to codepen for later.
christopher clarke
@chrisdclarke
Jan 31 2018 00:11
yeah... thats probably the way to go... i cant get anthing to work on Codepen ever.... what editor do you use?
Helin
@Hkuuskla
Jan 31 2018 00:12
console.log works in my codepen, i did just console.log(test); and browser developer tools printed test
your browser developer tool didn't show anything?
Brad
@bradtaniguchi
Jan 31 2018 00:12
as @Hkuuskla said it should work, but I wouldn't use it as a dev editor haha
If I have access to my development laptop, and I'm working on a full project Id go with VS Code, its the main editor nowadays.
Helin
@Hkuuskla
Jan 31 2018 00:13
I use Sublime text or VS Code
Brad
@bradtaniguchi
Jan 31 2018 00:14
If Im on my chromebook, or don't have any local tools, Id use cloud9
christopher clarke
@chrisdclarke
Jan 31 2018 00:15
ok... thanks all....
Brad
@bradtaniguchi
Jan 31 2018 00:15
@chrisdclarke np :)
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:31
Cloud9 isn't free anymore, NB.
Check out postverta or StackBlitz.
Brad
@bradtaniguchi
Jan 31 2018 01:39
Aw man, I haven't tried since they deployed their AWS changes
@HeinousTugboat Actually I think it is, you just need (and always needed) a credit card to sign up
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:42
I scored an account just before they announced the switch.
Brad
@bradtaniguchi
Jan 31 2018 01:46
Everywhere I see it says "if you use an EC2 instance for cloud9" you pay for the EC2 isntance
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:46
The alternative's hosting it yourself, I believe.
Brad
@bradtaniguchi
Jan 31 2018 01:47
It also seems like there's two versions? the new one is AWS Cloud9, I think the old one still exists
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:47
If you had an account before they announced AWS, you're grandfathered in. I don't think you can get new accounts on the old one.
c9.io redirects to AWS now if you aren't signed in.
Brad
@bradtaniguchi
Jan 31 2018 01:49
Ah I see, Well there's always codeanywhere, I might start using that instead just so I don't get cut off. (even tho I don't use cloud9 anymore)
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:50
If you're doing front-end stuff, Stackblitz is amazing.
They stuffed Monaco into the browser, and used a service worker to cache NPM packages.
Does everything in the browser.
Brad
@bradtaniguchi
Jan 31 2018 01:53
I like the idea of a full IDE, and server. I've tried stackblitz its nice, but most of the time I was using cloud9 I was doing full-stack stuff
Alexander Jarman
@HeinousTugboat
Jan 31 2018 01:54
Yeah, that's why I've been using it lately.
lawlercoppter
@lawlercoppter
Jan 31 2018 02:56

quick question about this bit of code:
var array = [1,2,3,4,5];

array = array.map(function(val){
return val + 3;
});

why is val being passed in and why is there a double function call?

Alexander Jarman
@HeinousTugboat
Jan 31 2018 02:58
Not entirely sure what you mean.
function(val){
    return val + 3;
}
This is a function declaration.
Lean Junio
@leanjunio
Jan 31 2018 02:58
anyone know if there's a platform that converts hybrid to native?
Alexander Jarman
@HeinousTugboat
Jan 31 2018 02:59
Array.prototype.map() takes one argument, a function, and it executes that function on each element in the array.
lawlercoppter
@lawlercoppter
Jan 31 2018 03:00
alright, I think I get it. Thanks @HeinousTugboat
CamperBot
@camperbot
Jan 31 2018 03:00
lawlercoppter sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
Alexander Jarman
@HeinousTugboat
Jan 31 2018 03:01
@lawlercoppter If it helps, this does the exact same thing:
var array = [1,2,3,4,5];
function addThree(val) {
    return val + 3;
}

array = array.map(addThree);
I think it can be hard to wrap your head around functions as first class objects, but it's super helpful.
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 03:49
Hey guys!
iso
@iso1048
Jan 31 2018 04:03
@germangamboa95 Hi
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 04:09
@user-ap ello! How are you?
Ken Haduch
@khaduch
Jan 31 2018 04:34
@germangamboa95 - hello
kartikv20
@kartikv20
Jan 31 2018 04:38
What's wrong with this code?
function getLocation(){
    if(navigator.geolocation()){
        navigator.geolocation.getCurrentPosition(function(position){
            lng = position.coords.longitude;
            latt = position.coords.latitude;
            myUrl = 'https://fcc-weather-api.glitch.me/api/current?lon=:' + lng + '&lat=:' + latt;
            console.log(myUrl);  
        })
Its not doing anything nor asking for my location
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 04:38
If you guys can please review my project for tonight. It is a simple tool I made to converting inventory units at work. I need to redo some parts of it as I started getting tired thus became a spaghetti cook. https://codepen.io/germangamboa95/pen/GQgLBP
@kartikv20 can I see your codepen?
kartikv20
@kartikv20
Jan 31 2018 04:41
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 04:47
@kartikv20 https://stackoverflow.com/questions/3594923/chrome-uncaught-syntaxerror-unexpected-end-of-input Here is a link to get started. I'll look into your specific problem now
@kartikv20 you didn't close your function with it's own } and same for the if statement. It is also missing the closing }
iso
@iso1048
Jan 31 2018 04:52
@germangamboa95 not too bad. Yourself?
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 04:53
@user-ap I'm alright. About to call it a night in a bit as the coffee is wearing out
iso
@iso1048
Jan 31 2018 04:55
good. Yeah man, get some rest
Ken Haduch
@khaduch
Jan 31 2018 04:56
@kartikv20 - it appears that you haven't completed that declaration of the function, at least that is the first problem that you have. just a couple more brackets and parentheses properly placed to do that. But the next thing is that once you have declared a function, you have to invoke the function. At the end of your code block, after properly completing the function definition, you have to put a line of code to invoke the function. In this case, once the function is defined, you would add a line after the function's closing curly bracket, getLocation(); That would cause the function to be invoked, and if it is working properly, you will see your output in the console. Or you should see it.
Ken Haduch
@khaduch
Jan 31 2018 05:02
@kartikv20 - and you should change your if (navigator.geolocation()) to if(navigator.geolocation) because the () at the end of geolocation() is trying to access it as though it is a function, and it isn't. So I found that by adding the closing curly brackets to your function, removing that () and adding a getLocation() at the end of the JS, it is reporting the URL as you are generating it in the console.
German Gamboa Gonzalez
@germangamboa95
Jan 31 2018 05:05
@khaduch wouldn't he also have to declare his variables so they don't become part of the global scope?
Ken Haduch
@khaduch
Jan 31 2018 05:08
@germangamboa95 - well, yes, but depending on how he structures the rest of his code, he might want them to be "global" so that other functions can access them. You are correct, though, that using either var or letsomewhere within the code would be more correct. But those variables, if declared within the function body, would only be visible within the function body. It might work, as I said, it depends on the way that the rest of the code is structured, if they need to be accessible to other functions.
shivendrarox
@shivendrarox
Jan 31 2018 05:15
Hi guys,my first fcc project is ready
Ken Haduch
@khaduch
Jan 31 2018 05:21
@shivendrarox - it looks like it's passing the tests, so that's good. It would be better to do a little more styling on the text at the bottom of the page because on a wide screen, it is hard to read the text that is spread from side to side. There are some guidelines for readability. I think that the target is something like 80 to 90 characters on a line? Those are the only comments I can offer - a little more styling for readability.
James Hwang
@Kiwilicious
Jan 31 2018 06:29
Can anyone good with React leave some comments on my Twitch viewer? https://codepen.io/Kiwilicious/pen/bLGmRq?editors=0110
William Watts
@Braillon7
Jan 31 2018 06:50
getting an error message when trying to run my while loop ' Cannot read property 'length' of undefined
at Object.init' need help getting it to run. https://codepen.io/Braillon7/pen/bLGdNg....error message goes away if i remove pokemonDB but function will not run
Claudio Restifo
@Marmiz
Jan 31 2018 07:44

@Kiwilicious couple of notes:

1- using ajax means you are pulling in JQuery, which is redundant with react.
probably better to use a vanilla httpRequest or a more lightweight alternative than pulling in JQuery .

2- using vanilla js to add/remove style is not bad per se, but you are missing all the potential that letting React handle this kind of stuff can have.

3- using context seems a bit of an overkill for a simple fetch data. But again not an error per se.

those are my 2c

vivekumarsinha
@vivekumarsinha
Jan 31 2018 07:55
what is standard objects
James Hwang
@Kiwilicious
Jan 31 2018 08:17
@Marmiz
1 - You're talking about using XMLHttpRequest correct? I tried using fetch but was running into cors issues but I'll try that instead.
2 - Are you talking about conditionally setting the className depending on the state like this.state.active === 'online' ? 'online' : ''?
3 - From what I remember, this was getting lost in the second ajax request. It might be because of arrow functions or whatnot. I'll take a look.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 08:19
@LeeConnelly12 oh ok
I have my first ever wed/software developer interview tomorrow, could anyone advise me how i can 'showcase my talents'? Really appreciate it :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 08:25
*web
Claudio Restifo
@Marmiz
Jan 31 2018 08:35

@Kiwilicious
1 - I often use axios because I'm used to it, there's also the Fetch API implemented in JS.

I mean, you are fine with Ajax as well since it's a study project.. but in a "real world" you want to avoid pulling in 250MB file just for an HTTP request :)

2 - Yep, you can let React knows which one is the active button and then dynamically add the class, in this case you probably won't have any additional benefit... but again in bigger apps maybe you do (animations, controls....)

3 - check the official docs about Context

Heathercoraje
@Heathercoraje
Jan 31 2018 09:03
Good afternoon friends
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 09:04
Morning here :)
Heathercoraje
@Heathercoraje
Jan 31 2018 09:04
I am playing with bootstrap for the first time. I had downloaded a zip and extracted it but It seems like font dir is missing. How is this possible?
or am I supposed to download font files from different src? confusssing
James Hwang
@Kiwilicious
Jan 31 2018 09:07
@Marmiz Thanks a lot! I've mostly been using axios to make calls which was why I wasn't too familiar with XML or fetch. I'll check the docs and make changes tomorrow :]
CamperBot
@camperbot
Jan 31 2018 09:07
kiwilicious sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1141 | @marmiz |http://www.freecodecamp.org/marmiz
Marianissimus
@Marianissimus
Jan 31 2018 09:09
@Heathercoraje the glyphicons have been dropped by Bootstrap in v4, so there is no font folder anymore;
Heathercoraje
@Heathercoraje
Jan 31 2018 09:11
@Marianissimus Does this mean no more Glyphicons?
:O
Marianissimus
@Marianissimus
Jan 31 2018 09:12
@Heathercoraje it would appear so: http://v4-alpha.getbootstrap.com/migration/#components Use font-awesome, if needed, or something else
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 09:13
There are glyphicons and every other possible icon in CSS though?
Marianissimus
@Marianissimus
Jan 31 2018 09:14
not "in CSS"; but you can get some through font-awesome or other external libraries;
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 09:15
oh yeah silly me lol
check out the w3schools link, wait ill get it for you
Marianissimus
@Marianissimus
Jan 31 2018 09:17
many developers use svg-s now instead of glyphicons: they can be embedded inline, so they don't depend on external libraries. plus they can be animated
Heathercoraje
@Heathercoraje
Jan 31 2018 09:27
It makes sense. I was watching tutorials from long ago. I thought it is a bit odd to have their own icon libraries anyways. @Marianissimus Thank you!
CamperBot
@camperbot
Jan 31 2018 09:27
heathercoraje sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @marianissimus |http://www.freecodecamp.org/marianissimus
Mel Macaluso
@MelMacaluso
Jan 31 2018 09:28
[Hiring]: Hi everyone, we are looking preferably for a Full-Stack Developer for a permanent role in our South London based office. (Front-end and Back-end developers are welcome too). If you are interested or even if you know someone that might be please do get in touch . 👍🏻
Marianissimus
@Marianissimus
Jan 31 2018 09:28
you're welcome
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 09:30
@MelMacaluso Take me on, but I'll need a couple of months to train up ;)
Mel Macaluso
@MelMacaluso
Jan 31 2018 09:30
@Muhammed-K Hi there, we are looking for a senior role unfortunately :cry:
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 09:31
I could become a senior in a couple of months!
South London... Can i message you privately by any chance?
Mel Macaluso
@MelMacaluso
Jan 31 2018 09:32
Yes feel free
Heathercoraje
@Heathercoraje
Jan 31 2018 10:58
A question :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 10:59
Another one? Oh gosh lmao
Heathercoraje
@Heathercoraje
Jan 31 2018 10:59
After retrieving JSON then stringify it, it seems like I can't access key-value as I would do to JSON.
{"mature":false,"partner":true,"status":"RERUN: Jaedong vs. StarDust - Group C - IEM Cologne - StarCraft 2","broadcaster_language":"en","display_name":"ESL_SC2","game":"StarCraft II","language":"pl","_id":30220059,"name":"esl_sc2","created_at":"2012-05-02T09:59:20Z","updated_at":"2018-01-31T09:29:18Z","delay":null,"logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg","banner":null,"video_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/232bf86e5268cf88-channel_offline_image-1920x1080.png","background":null,"profile_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg","profile_banner_background_color":"#050506","url":"https://www.twitch.tv/esl_sc2","views":69309030,"followers":201904,"_links":{"self":"https://api.twitch.tv/kraken/channels/esl_sc2","follows":"https://api.twitch.tv/kraken/channels/esl_sc2/follows","commercial":"https://api.twitch.tv/kraken/channels/esl_sc2/commercial","stream_key":"https://api.twitch.tv/kraken/channels/esl_sc2/stream_key","chat":"https://api.twitch.tv/kraken/chat/esl_sc2","features":"https://api.twitch.tv/kraken/channels/esl_sc2/features","subscriptions":"https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions","editors":"https://api.twitch.tv/kraken/channels/esl_sc2/editors","teams":"https://api.twitch.tv/kraken/channels/esl_sc2/teams","videos":"https://api.twitch.tv/kraken/channels/esl_sc2/videos"}}
Markus Kiili
@Masd925
Jan 31 2018 11:00
@Heathercoraje JSON is a string format, so you need to objectify (JSON.parse) it in order to access it.
Heathercoraje
@Heathercoraje
Jan 31 2018 11:00
so object.key wouldn't work.
Markus Kiili
@Masd925
Jan 31 2018 11:01
@Heathercoraje You can access it like any JS object, after parsing. Some methods like jquery getJSON do the parsing automatically.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 11:02
What language is this code? const output = [];
Markus Kiili
@Masd925
Jan 31 2018 11:02
@Muhammed-K That can be ES6 JS.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 11:03
Oh no
I'm trying to make a quiz with just HTML, CSS and JavaScript, is that possible?
Markus Kiili
@Masd925
Jan 31 2018 11:03
@Muhammed-K Yes.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 11:04
Could you guide me with it please?
Aditya
@ezioda004
Jan 31 2018 11:12
Is there a way I can have some interval b/w each iteration of a loop? Example
arr.forEach(function(val){
   if ( )  {  //do something
     }
else if ( ) {  //do something
    }
});   //after x seconds run next iteration
alpox
@alpox
Jan 31 2018 11:18
@ezioda004 Not in a loop. You need some recursion with setTimeout or setInterval (Don't forget to clear the interval when the work is done).
Aditya
@ezioda004
Jan 31 2018 11:24
@alpox Needed inside the loop but this works for now.
var array = [1, 2, 3, 4];
var interval = 1000;
array.forEach(function (val, i) {
  setTimeout(function () {
    console.log(val);
  }, i * interval);
});
alpox
@alpox
Jan 31 2018 11:28
@ezioda004 yeaa this kinda works too
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 11:31
How do you send the code in that format with the black background?
Stephen James
@sjames1958gm
Jan 31 2018 11:34
@Muhammed-K you use three backticks ` around the code (on their own line)
https://forum.freecodecamp.com/t/markdown-code-formatting/18391
abraham anak agung
@padunk
Jan 31 2018 11:34
Use
Triple backtiicks @Muhammed-K
Aditya
@ezioda004
Jan 31 2018 11:35
@Muhammed-K Press shift + crtl + m for markdown menu.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 11:36
onClick="showResults()"
Oh wow, thanks a lot guys :) @ezioda004 @padunk @sjames1958gm
CamperBot
@camperbot
Jan 31 2018 11:36
muhammed-k sends brownie points to @ezioda004 and @padunk and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 421 | @padunk |http://www.freecodecamp.org/padunk
:star2: 8919 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:cookie: 423 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Heathercoraje
@Heathercoraje
Jan 31 2018 11:44
@Masd925 Thanks!
CamperBot
@camperbot
Jan 31 2018 11:44
heathercoraje sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4681 | @masd925 |http://www.freecodecamp.org/masd925
Dmytro Holysh
@dmk1111
Jan 31 2018 12:36
image.png
@Heathercoraje
it works fine
Zerka1982
@Zerka1982
Jan 31 2018 13:03
hello guys
Can anybody help me with the CSS ?
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:04
I can try to help but I'm no expert :)
Zerka1982
@Zerka1982
Jan 31 2018 13:05
Thank you Muhammed
Could you please check this
I want to display the nav bar
from the right side it looks good, but I have a problem to display the whole yellow background color
Stephen James
@sjames1958gm
Jan 31 2018 13:09
@Zerka1982 Setting the z index to -1 on the ::after part makes the yellow cross the whole page
Zerka1982
@Zerka1982
Jan 31 2018 13:09
so ?
ah I see
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:10
Sorry i was trying to figure it out, @sjames1958gm beat me to it!
Zerka1982
@Zerka1982
Jan 31 2018 13:10
I can also
add z-index: 2
to the nav element ? isn't the same thing ?
:)
Stephen James
@sjames1958gm
Jan 31 2018 13:11
@Zerka1982 yes, just have the after z-index < the nav z-index
Zerka1982
@Zerka1982
Jan 31 2018 13:12
@sjames1958gm What I did is this, I simply added z-index: 2 to nav element
is it similar to the way u explained or would you suggest me to do it exactly as you said?!?!
Stephen James
@sjames1958gm
Jan 31 2018 13:13
@Zerka1982 Either way seems ok.
Zerka1982
@Zerka1982
Jan 31 2018 13:14
Good
@sjames1958gm thanks!
CamperBot
@camperbot
Jan 31 2018 13:15
zerka1982 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8920 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Zerka1982
@Zerka1982
Jan 31 2018 13:15
What about the h1 ? it does not display !?!?!
Stephen James
@sjames1958gm
Jan 31 2018 13:17
@Zerka1982 I don't see an h1, I see an <h> unless you changed it
Zerka1982
@Zerka1982
Jan 31 2018 13:17
I corrected it and still the same issue!
Stephen James
@sjames1958gm
Jan 31 2018 13:18
@Zerka1982 Hmm, where'd it go? It looks like it should display
Zerka1982
@Zerka1982
Jan 31 2018 13:18
to the center
of the pink background
I just added this CSS
color: black;
display: flex;
justify-content: center;
align-items: center;
and still not working!
Stephen James
@sjames1958gm
Jan 31 2018 13:24
@Zerka1982 the element is there, but the text is not showing - weird, I don't see why
Zerka1982
@Zerka1982
Jan 31 2018 13:24
haha :D
I found the text haha
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:30
Nice :) is this a project you are doing? @Zerka1982
Zerka1982
@Zerka1982
Jan 31 2018 13:30
yes ...
I was not asked to do it
However, I found the background style interesting ...Never tried it before
therefore, I decided to learn :)
This is what we call "Diagonal & Slanted Lines"
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:32
Nice :D
Zerka1982
@Zerka1982
Jan 31 2018 13:33
In IT everything is possible
you ll never expect what a designer is gong to suggest ... therefore, we must always be ready and update our self with the latest UI/UX
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:34
Cool
Zerka1982
@Zerka1982
Jan 31 2018 13:35
@MuhammedKarim thanks for your help :)
CamperBot
@camperbot
Jan 31 2018 13:35
zerka1982 sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 13:36
I didnt do anything but you're welcome :)
SzymonKwasek
@SzymonKwasek
Jan 31 2018 14:02
Hello, guys I have a problem. I have to createa table like the one on the picture I am about to send, right now I have this: https://codepen.io/Ejsit/pen/rJVmpJ
the point is to place those words on the right in the same line as the sentence on the left, and when we change size of the screen the sentence should collapse to "a very long sent...." but the word on the right should stay untouched. Does anyone have any ideas ?
250px.png
600px.png
Zerka1982
@Zerka1982
Jan 31 2018 14:08
good ?
SzymonKwasek
@SzymonKwasek
Jan 31 2018 14:15
@Zerka1982 unfortunately no, when you resize the browser width, the sentence doesnt collapse..
shivendrarox
@shivendrarox
Jan 31 2018 14:16
hi guys
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:17
@shivendrarox Hi :)
shivendrarox
@shivendrarox
Jan 31 2018 14:17
hi bruddas
i have a question
how u align radiobuttons with text
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:18
use the align property
display=inline
shivendrarox
@shivendrarox
Jan 31 2018 14:19
Wait a sec....
SzymonKwasek
@SzymonKwasek
Jan 31 2018 14:23
Guys can anybody answer me ?
shivendrarox
@shivendrarox
Jan 31 2018 14:23
Just like this form
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:23
I'm sorry I don't know how to @SzymonKwasek
SzymonKwasek
@SzymonKwasek
Jan 31 2018 14:23
@shivendrarox you can use labels
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:23
Send me your pen @shivendrarox
shivendrarox
@shivendrarox
Jan 31 2018 14:24
how u align radio buttons like this form http://codepen.io/freeCodeCamp/full/VPaoNP
mine has gotten ugly like hell
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:25
send it to me, lemme see what i can do
SzymonKwasek
@SzymonKwasek
Jan 31 2018 14:25
Or just div with display: inline-block
Above is a ugly firm,direct looking can cause harm to ur eye
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:27
;) dw we'll work on it
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 14:37
ive worked it out for you
shivendrarox
@shivendrarox
Jan 31 2018 14:48
ok will try resizing width
Aaron
@Ilovetaccos
Jan 31 2018 15:20
Hey I have a question about "understanding case sensitivity in variables"
like
with all of it....
Stephen James
@sjames1958gm
Jan 31 2018 15:22
@Ilovetaccos
iLoveTaccos - this would be your handle in camel case - uppercase first letter in each word (except the first)
edithe variable names to be camelCase - just change what is there - no new lines
Aaron
@Ilovetaccos
Jan 31 2018 15:22
ah thanks makes sense its been a month since i have been on lol
Stephen James
@sjames1958gm
Jan 31 2018 15:24
@Ilovetaccos :+1:
Aaron
@Ilovetaccos
Jan 31 2018 15:25
adding camelcase just to the seperate lines...
nevermind
got it
thanks i appreciate it
hey now i just feel bad... can you help with "Increment a Number with JavaScript
Marianissimus
@Marianissimus
Jan 31 2018 15:31
it's camelCase => look at it, does it remind you of a camel? camelCase, with a hump in the middle:)
Aaron
@Ilovetaccos
Jan 31 2018 15:32
lol yeah actually
okay
now i feel nooby
Marianissimus
@Marianissimus
Jan 31 2018 15:32
hey, come on, this is how we learn
all of us. we're all here to learn
Aaron
@Ilovetaccos
Jan 31 2018 15:33
heh thanks!
appreciate it
i am only 13
but I love coding
have forever
Marianissimus
@Marianissimus
Jan 31 2018 15:33
ooo... that's so good for you...
Aaron
@Ilovetaccos
Jan 31 2018 15:33
how so...
Marianissimus
@Marianissimus
Jan 31 2018 15:33
ok, now increment means to add something to a number, to increase it;
usually with one, but not necesarrily
Aaron
@Ilovetaccos
Jan 31 2018 15:33
ok
understandable
Marianissimus
@Marianissimus
Jan 31 2018 15:34
and you do it just by adding something to a number...
Aaron
@Ilovetaccos
Jan 31 2018 15:34
right
got it
thats somewhat easy ok
Marianissimus
@Marianissimus
Jan 31 2018 15:35
say you have x = 5; to increment it, just add one x = x+5; and now x = 6
Aaron
@Ilovetaccos
Jan 31 2018 15:35
k
gotcha
Marianissimus
@Marianissimus
Jan 31 2018 15:35
cool. now, there's a shortcut to write this, because programmers seem to be lazy;
:) actually, more shortcuts
Aaron
@Ilovetaccos
Jan 31 2018 15:36
lol
Marianissimus
@Marianissimus
Jan 31 2018 15:36
to make x = 6, you can write
Aaron
@Ilovetaccos
Jan 31 2018 15:36
i am lazy so good
im glad
Marianissimus
@Marianissimus
Jan 31 2018 15:36
x += 1;
Aaron
@Ilovetaccos
Jan 31 2018 15:36
ah
Marianissimus
@Marianissimus
Jan 31 2018 15:37
now x = 6;
Aaron
@Ilovetaccos
Jan 31 2018 15:37
so the more you add the more there are...
Marianissimus
@Marianissimus
Jan 31 2018 15:37
of course. and the last shortcut
x++;
Aaron
@Ilovetaccos
Jan 31 2018 15:37
yeah that I just saw
cool thanks
Marianissimus
@Marianissimus
Jan 31 2018 15:37
cool, that's it: increments;
Aaron
@Ilovetaccos
Jan 31 2018 15:38
nice
i am always looking for challenges. My friend wanted me to make him a site for his school project... now i didn't want to do it for him but I did it with him
he got an a+
well
i basically got it but whatever.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 15:39
GCSE?
Marianissimus
@Marianissimus
Jan 31 2018 15:39
well done
Aaron
@Ilovetaccos
Jan 31 2018 15:39
gcse?
oh
me? do i have one?
no...
you were asking about me right @MuhammedKarim
Heathercoraje
@Heathercoraje
Jan 31 2018 16:18
Hi :)
Can anyone take a look at my code
(function goGetThem() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var base = 'https://wind-bow.gomix.me/twitch-api/';
  var jsonp ='?callback=?';

  function makeUrl(type, user) { //type is either channels or streams
    return base + type + '/' + user + jsonp;
  }

  users.forEach(function (user) {
    var status, displayName, desc;
    $.getJSON(makeUrl('streams', user), function (data) {
      if (data.stream === null) {
        status = 'offline';
      } else { // if it is streaming
        status = 'online'
      }
      $.getJSON(makeUrl('channels', user), function (data) {
        $( '#all').append(`<div class="item">
        <div class='logo'>
        <img class='logoImage' src=${data.logo}></div>
        <div id="detail" class="datail">
        <p class='name'>${data.display_name}</p>
        <p id='desc' class="desc" style="display:none">${data.status}</p>
        </div>`);
        if (status === 'online') {
          console.log(user);
          $('#all #desc').css('display', 'block');
          $( '#online').append(`<div><img src=${data.logo}><p>${data.display_name}</p><p>${data.status}</p></div></div>`);
        }
        else { // status === 'offline'
        $( '#offline').append(`<div><img src=${data.logo}><p>${data.display_name}</p><p>${data.status}</p></div></div>`);
        }
      });
    });
  });
})();
I only want to give css('display','block') to streaming users.
Aaron
@Ilovetaccos
Jan 31 2018 16:20
what map section are you on
Heathercoraje
@Heathercoraje
Jan 31 2018 16:20
I have if/else to check their status.. when I console log(user), it gives only right users but it gives display:block value randomly.
@Ilovetaccos excuse me?
Stephen James
@sjames1958gm
Jan 31 2018 16:21
Use a class on your online values so that it has those attributes.
Heathercoraje
@Heathercoraje
Jan 31 2018 16:23
@sjames1958gm you mean, addClass?
Aaron
@Ilovetaccos
Jan 31 2018 16:24
yeh
Heathercoraje
@Heathercoraje
Jan 31 2018 16:25
instead of css()?
But I dont understand why it would add css() randomly because when console log the users, only streaming users are logged..
Aaron
@Ilovetaccos
Jan 31 2018 16:26
@sjames1958gm
Heathercoraje
@Heathercoraje
Jan 31 2018 16:32
It seems like if/else statement is not being applied to what I want to filter.
Stephen James
@sjames1958gm
Jan 31 2018 16:33
@Heathercoraje no I meant class="someclass" in your html that you are appending, as in <div class="someclass">
@Heathercoraje that line, will I believe only add it to the ones that have already been added, not the one you are about to append
Heathercoraje
@Heathercoraje
Jan 31 2018 16:36
@sjames1958gm Though their status is not online?
I am sorry I am not getting it..
<p id='desc' class="desc" style="display:none">${data.status}</p>
this already has a classname.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 16:44
@Ilovetaccos i asked if that was your friends GCSE work that you helped him with
Kirk Clemons
@kcclemo
Jan 31 2018 16:45
@Heathercoraje I think he means that instead of inlineing the display:none, you should add a separate class that applies the attributes you want. Inline styles override all other styles.
<p id='desc' class="desc" style="display:none">${data.status}</p>
Stephen James
@sjames1958gm
Jan 31 2018 16:46
@Heathercoraje
<p id='desc' class="desc" style="display:none">${data.status}</p>
move this line to your if / else and have a different css class for online/offline
Aaron
@Ilovetaccos
Jan 31 2018 16:47
oh yeah
@MuhammedKarim it was
why?
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 16:47
@Ilovetaccos I can tell ;)
Stephen James
@sjames1958gm
Jan 31 2018 16:47
@Heathercoraje $('#all #desc').css('display', 'block'); I think this is going to affect already added html
also, you should avoid more than one element with the same id (you will have multiple ids of desc)
Aaron
@Ilovetaccos
Jan 31 2018 16:47
is that a good thing...
like...
that i did it..
Heathercoraje
@Heathercoraje
Jan 31 2018 16:48
@kcclemo that by adding ```display:none ```` override all other attributes?
Aaron
@Ilovetaccos
Jan 31 2018 16:48
it was fun
hard but fun
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 16:49
@Ilovetaccos not really good but i dont know anyone who doesn't do that :P
Yup, i did mine myself, with no coding
Heathercoraje
@Heathercoraje
Jan 31 2018 16:49
@sjames1958gm I see. Trying out moving the target line under if/else
Kirk Clemons
@kcclemo
Jan 31 2018 16:51
@Heathercoraje Yes, inline styles take priority. It's usually a best practice to apply the display:none via a css class. It should work either way, but you may get into trouble in some cases.
Heathercoraje
@Heathercoraje
Jan 31 2018 16:52
indeed I am. @kcclemo :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 16:53
You claim to be a beginner smh look at you @Heathercoraje
Heathercoraje
@Heathercoraje
Jan 31 2018 16:54
@kcclemo @sjames1958gm This is the part that I am not getting
(function goGetThem() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var base = 'https://wind-bow.gomix.me/twitch-api/';
  var jsonp ='?callback=?';

  function makeUrl(type, user) { //type is either channels or streams
    return base + type + '/' + user + jsonp;
  }

  users.forEach(function (user) {
    var status, displayName;
    $.getJSON(makeUrl('streams', user), function (data) {
      if (data.stream === null) {
        status = 'offline';
      } else {
        status = 'online'
      }
      $.getJSON(makeUrl('channels', user), function (data) {
        $( '#all').append(`<div class="item">
        <div class='logo'>
        <img class='logoImage' src=${data.logo}></div>
        <div id="detail" class="datail">
        <p id="name" class='name'>${data. display_name}</p>
        </div>`);
        if (status === 'online') {
          console.log(user);
          $( '#detail').append(`<p id='desc' class="desc">${data.status}</p>`);
          $( '#online').append(`<div><img src=${data.logo}><p>${data.display_name}</p><p>${data.status}</p></div></div>`);
        }
        else { // status === 'offline'
        $( '#offline').append(`<div><img src=${data.logo}><p>${data.display_name}</p><p>${data.status}</p></div></div>`);
        }
      });
    });
  });
})();
Now I am appending it to #detail where I want to append this status to.
Then it appends status for each forEach iteration to the first div.
Because I expect it would append to its' each detail div.
Stephen James
@sjames1958gm
Jan 31 2018 17:00
@Heathercoraje Why not just build up a string of the whole thing and append only once
this code will have multiple #detail elements and jquery will append to a different one than you expect (likely).
Heathercoraje
@Heathercoraje
Jan 31 2018 17:02
That is what it is exactly doing..
I think I had plotted out logic in ineffective way because I am appending all the channels first and wanted to add status only if they are online
Sweet Coding :)
@SweetCodingInc
Jan 31 2018 17:03

@Heathercoraje Since this is async department, most of your issues will be solved if you just change

var status, displayName;

to

let status, displayName;
Heathercoraje
@Heathercoraje
Jan 31 2018 17:09
Thanks !
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 31 2018 17:16
why web worker does not work on google chrome ?
Heathercoraje
@Heathercoraje
Jan 31 2018 17:16
@sjames1958gm Thanks! I've got it. It is a bit frustrating that I still am not sure what was wrong with the if/else statement but it works now
CamperBot
@camperbot
Jan 31 2018 17:16
heathercoraje sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8922 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Aaron
@Ilovetaccos
Jan 31 2018 17:42
@MuhammedKarim heh ok lol
Ronique Ricketts
@RoniqueRicketts
Jan 31 2018 17:55
anyone knows if beta has certificates as yet?
LydaTech
@lydatech
Jan 31 2018 18:00
@RoniqueRicketts no not yet. Once its out of beta
Ronique Ricketts
@RoniqueRicketts
Jan 31 2018 18:01
ooo
Lee
@LeeConnelly12
Jan 31 2018 18:04
there are fewer things in this world tastier than cheesy twisted dough balls from dominos
Aaron
@Ilovetaccos
Jan 31 2018 18:18
very few
except pizza hut
and steak
Mel Macaluso
@MelMacaluso
Jan 31 2018 20:56
@Heathercoraje that's interesting, what are you building regarding twitch?
Seth
@sethdcd
Jan 31 2018 21:03
hey all! how can i get an onclick eventlistener to toggle back and forth between to functions? i'm working on the pomodoro clock, and i'm not sure how to get the onclick to use one function when first clicked i.e. start and then to pause if clicked on again, then resume if clicked a third time etc etc
glandon22
@glandon22
Jan 31 2018 21:04
you can use the modulo operator, for example
or keep a variable to store whether or not the clock is running
Seth
@sethdcd
Jan 31 2018 21:06
where would i use the modulo operator though?
glandon22
@glandon22
Jan 31 2018 21:06
you could keep track of the amount of clicks
so say your variable starts at 0
the first click would start your clock
and the second click would stop
Seth
@sethdcd
Jan 31 2018 21:07
for instance i'm trying to play around with the idea of an on/off switch see here:
var onSwitch = 1;
if (onSwitch === 1){
  submitBtn.onclick = function(){
    //countDown();
    onSwitch = 0;
    console.log(onSwitch);
  };
} else {
  submitBtn.onclick = function(){
    onSwitch = 1;
    console.log(onSwitch);    
  };
}
glandon22
@glandon22
Jan 31 2018 21:07
ie an odd click starts, an even click stops
if (onSwitch % 2 == 0) {....}
Seth
@sethdcd
Jan 31 2018 21:08
hmm, ok
glandon22
@glandon22
Jan 31 2018 21:08
thats just one way you could consider doing it
Seth
@sethdcd
Jan 31 2018 21:08
if that an efficient way?
i feel like my methodologies are so bad lol
glandon22
@glandon22
Jan 31 2018 21:08
haha i cant say for sure whats the best way
Seth
@sethdcd
Jan 31 2018 21:09
but i dont feel like i really learn until i make a mess of it so it's been slow
glandon22
@glandon22
Jan 31 2018 21:09
i think it might be easier to just have a variable storing whether or not the clock is currently running
Seth
@sethdcd
Jan 31 2018 21:09
yeah the % makes sense
i'll give that a go, thanks
glandon22
@glandon22
Jan 31 2018 21:09
hood luck
good luck*
Kris Baillargeon
@krisb1220
Jan 31 2018 21:36

var buttonState = true;

var changeButtonState = function() {

    buttonState === true ? buttonState = false : buttonState = true;

       return buttonState;

}

button.on("click", changeButtonState);
@sethdcd
You could even take it a step further and just use buttonState as the condition
CamperBot
@camperbot
Jan 31 2018 21:57
:bulb: to format code use backticks! ``` more info
Mark Kubik
@KUBIX90
Jan 31 2018 21:58
        $.get(twitchChannel + username, function(data){
                $("#twitch_channels").append('<article id = '${username}' class = "flex flex--aligned-center channel--margin">
                                            </article>'
                    /*"<article id = " + username + " class = 'flex flex--aligned-center channel--margin'>" +
                        "<img id = 'channel_icon'" + "src = '" + data.logo + "' alt = '" + data.display_name + "'/>" +
                        "<section id = 'channel_info'>" +
                            "<a id = 'channel_title'" + "href = " + data.url + " target = _blank " + "at = " + data.display + ">" + data.display_name + "</a>" +
                            "<p id = 'channel_description'>" + data.game + "</p>" +
                            "<p id = 'channel_followers'>" + "Followers " + data.followers + "</p>" +
                        "</section>" +
                        "<p></p>" +
                    "</article>"*/
                );
Hi I'm trying to use template literal at the top, but the string breaks every time i try to start a new line, anyone know why?
Mark Kubik
@KUBIX90
Jan 31 2018 22:03
Basically trying to replicate the commented out code using template literals, but can't get it working
Alexander Jarman
@HeinousTugboat
Jan 31 2018 22:13
@KUBIX90 Well.. you aren't actually using a template literal.
If you are, at least it isn't showing up correctly.
function makeString(username) {
    return `<article id="${username}" class="flex">

</article>`
}
This should work fine.
Template literals require backticks, though, not ' or ".
Mark Kubik
@KUBIX90
Jan 31 2018 22:20
@HeinousTugboat Thanks I've not been using backticks, think that's the issue, dumb error
CamperBot
@camperbot
Jan 31 2018 22:20
kubix90 sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
James Hwang
@Kiwilicious
Jan 31 2018 22:30
Having trouble with fetch and axios running into cors with get requests. jQuery works though; any suggestions?
Alexander Jarman
@HeinousTugboat
Jan 31 2018 23:11
@KUBIX90 You're welcome! Hope it works out for you! :-)
@Kiwilicious If where you're fetching from doesn't support CORS properly, you're pretty far up the creek without a paddle. There's services you can find to proxy CORS for you, though, so you might look into those.
It took me forever to deal with that stuff.
Ghost
@ghost~5a4a80acd73408ce4f859755
Jan 31 2018 23:41
can someone please tell me why im not getting a white background for the list?
James Hwang
@Kiwilicious
Jan 31 2018 23:51
@HeinousTugboat Yea.. It was more of me just wondering why doing the same thing with one library (jQuery) worked and not others.
Alexander Jarman
@HeinousTugboat
Jan 31 2018 23:53
@Kiwilicious Ah. Because jQuery doesn't use fetch, I think. Pretty sure it uses XMLHttpRequest.
James Hwang
@Kiwilicious
Jan 31 2018 23:54
@HeinousTugboat Ahh. So XMLHttpRequests don't need to deal with cors?
Alexander Jarman
@HeinousTugboat
Jan 31 2018 23:57
I think it does, there's just ways to get around it that aren't doable with fetch, and jQuery, well, does them.
I'm honestly not super familiar with all of it.
I just know once I learned what JSONP is I noped as far away from that shit as I could.