These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Aug 2018
Manan Shah
@mananshah51
Aug 22 2018 00:03
@newmoon Sounds good. Thank you so much for your help.
Morchid Chellali
@Morched23MJ
Aug 22 2018 00:23
How to make a request to get my Certificate in a specific path? - FCC
Ah. I got it. I found it in my Profile Settings. :)
abraham anak agung
@padunk
Aug 22 2018 01:02
@dbsimeonov what's your code?
Manan Shah
@mananshah51
Aug 22 2018 01:30
@dbsimeonov Send me your code, I can try help you out.
Emil
@aguyinmontreal
Aug 22 2018 02:05
Hi guys! someone here knows CORS rules?
Brad
@bradtaniguchi
Aug 22 2018 03:27
@aguyinmontreal I know the gist of things, main thing is don't have your client request stuff on a different domain.
Rogério Dalot
@Dalot
Aug 22 2018 15:42
Hello everyone, I am trying to listen for a mousemove but I only want to listen when my mouse is down and currently I have this https://codepen.io/Dalot/pen/ZMGGoy and is not working as expected.
it is listening indefinitely after a click/mousedown
Christopher McCormack
@cmccormack
Aug 22 2018 15:48
@Dalot you may want to add a mouseup event that removes the mousemove event
Rogério Dalot
@Dalot
Aug 22 2018 15:57
@cmccormack hum that did not work, or at least I was not able to properly code it
Rogério Dalot
@Dalot
Aug 22 2018 16:08
@cmccormack Ok just did. Thank you!
Christopher McCormack
@cmccormack
Aug 22 2018 16:09
@Dalot :thumbsup:
Stevie
@StevieBland
Aug 22 2018 16:56
would someone like to help me with my html?
AJ Brommy
@AJ-Brommy
Aug 22 2018 17:00
If you post it I am sure someone will try and help :)
Rogério Dalot
@Dalot
Aug 22 2018 17:22
@StevieBland me too
J. Guidry
@J-Guidry
Aug 22 2018 17:23
I have a simon game I've been making with Reactjs. For some reason, a boolean is not toggling and a player input count is not increasing when the 2nd turn happens and the second button is clicked. I have a glitch with the code and a gist with the steps/psueudocode. The problem is maybe somewhere in the colors component in the checkUserInput method also described in the gist. I have been working on this for a while. I appreciate any help.
https://gist.github.com/J-Guidry/55422112c2e62b0ef3b389d91b90681e
https://glitch.com/edit/#!/reactjs-simongame
Rogério Dalot
@Dalot
Aug 22 2018 17:30
Guys, does anyone know what is wrong with the mousemove bebhavior? There is something a little bit off
https://codepen.io/Dalot/pen/ZMGGoy
newmoon
@newmoon
Aug 22 2018 18:07

@Dalot Instead of a CSS transform:

$myCarousel.css({"transform" : `translateX(${pos}px)`});

Try it with offset():

$myCarousel.offset({left: -pos});
newmoon
@newmoon
Aug 22 2018 18:14
Draggable example, without using .drag() in jQuery UI: https://codepen.io/chriscoyier/pen/zdsty?editors=0010
niniyzni
@niniyzni
Aug 22 2018 18:47

hi,

i am trying to learn basic js
for a set timeout function when I use var I am getting undefined,
where as when I use let I dont get undefined.
can you let me know th reason.
providing my code snippet below


const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}
Rogério Dalot
@Dalot
Aug 22 2018 18:51
@newmoon That was perfect! Do you have any idea why the other elements are disappearing? https://codepen.io/Dalot/pen/ZMGGoy
@newmoon The dragging is working perfectly tho
niniyzni
@niniyzni
Aug 22 2018 19:24

hi,

when I use split method can you tell me why I am getting comma after the words


<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the array values after the split.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = "How are you doing today?";
    var res = str.split(" ");
    //.reverse().join("");
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>
Brad
@bradtaniguchi
Aug 22 2018 19:28
@niniyzni Your code doesn't add commas, or does reverse or join right now, since its commented out
niniyzni
@niniyzni
Aug 22 2018 19:29
@bradtaniguchi hey when I print res at this line var res = str.split(" ")
Brad
@bradtaniguchi
Aug 22 2018 19:30
Prolly cuse your printing an array of strings
niniyzni
@niniyzni
Aug 22 2018 19:43
@bradtaniguchi but why comma is coming?
Brad
@bradtaniguchi
Aug 22 2018 19:43
Prolly cuse your printing an array of strings
niniyzni
@niniyzni
Aug 22 2018 19:44
hi,
  • in js what type of datastructure do I need to display the below result.
  • I used array and iterated the value but still I am not able to print out desired results.
  • can you tell me how to fix it.
  • Providing my code below
    1   2   3
1   1    2   3

2   2    4   6

3    3   6   9

var Yarr = [1,2,3];
var Xarr = [1,2,3];

for(let i=0; i<Yarr.length; i++){
    for(let j=0; j<Xarr.length; j++){
        console.log(Yarr[i] * Xarr[i]);
    }
}
Christopher McCormack
@cmccormack
Aug 22 2018 20:01
@niniyzni logging will insert a newline character; instead, you can build each row as a string first then at the end if the inside loop print the string
Brad
@bradtaniguchi
Aug 22 2018 20:02
also I think the console.log is wrong, your using i twice, instead of using i and j
niniyzni
@niniyzni
Aug 22 2018 20:05
@cmccormack hey can you update the code, its confusing @bradtaniguchi
Brad
@bradtaniguchi
Aug 22 2018 20:07
console.log(Yarr[i] * Xarr[j]);
Christopher McCormack
@cmccormack
Aug 22 2018 20:07
I'm not updating anyones code haha
Brad
@bradtaniguchi
Aug 22 2018 20:07
as @cmccormack said tho, it wont work with the console since it adds newlines
Yea, I dont' wanna update the code anymore, since the issue I pointed it is an easy oversight bug.
but the rest seems kinda like a CS101 problem
newmoon
@newmoon
Aug 22 2018 20:46
@Dalot I'm not sure why they are disappearing - some artifact from having overflow-hidden on the carousel. Move overflow: hidden to the body element instead and everything works fine.
@niniyzni For your setTimeout issue, this explains it very well: https://stackoverflow.com/a/11488129/5253639
Rogério Dalot
@Dalot
Aug 22 2018 21:22
@newmoon Yeah, just fixed it! Thank you
Christopher
@bradley1492
Aug 22 2018 21:42

Good evening everyone,
in the fcc example below the text justification seems to be different than in my example. Am I looking for the text-justify property here, because it doesn't seem to change anything?

Also I'm using flexbox for the section content.
Is there a "special" way to format text with flexbox?

Here's my code:
https://codepen.io/bradley1492/pen/pZrXQz?editors=0100
FCC Example:
https://codepen.io/freeCodeCamp/full/NdrKKL

AJ Brommy
@AJ-Brommy
Aug 22 2018 21:47
I haven't reached this point yet. But I'm not seeing a justification problem.
I think it looks different more due to use of layout, padding, margin, letter-spacing, line-height, font-size, etc.
AJ Brommy
@AJ-Brommy
Aug 22 2018 21:54
One thing is your bullet points. You could try the "list-style-position" : "inside" or "outside". Or play with the margins and paddings with them. On the fcc they indent from the paragraph text where are you bullets are inline.
ok now it does appear as tho you are trying to use "justify" with your text, but Fcc has not. So that will change things a little.
@bradley1492
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:00
You won't really notice much between text-align: left; and text-align:justify; not without a lot of text over alot of lines in a paragraph. The difference will be most likely noticed down the right had side of the text. Justify tries to create a straight line down the right left hand side "AND" then right hand side.
trust me to say that wrong - correction : Justify tries to create a straight line down the left hand side "AND" then right hand side.

As for your section and text formatting question using flexbox, there's no real need, because it's css and you can already do formatting with it. So if you want to format your text bold, you'd use the same, font-weight: bold;.

i'm sorry if I have misunderstood the questions. I hope I have answered them.

I am a bit new to grid and flexbox myself. I'm not sure if you have used it correctly tho.

AJ Brommy
@AJ-Brommy
Aug 22 2018 22:09
my bad, just looked at the flex lesson again. everything looks ok to me there.
Christopher
@bradley1492
Aug 22 2018 22:12
@AJ-Brommy Thanks for the answer. I just changed justify, but now I am having the problem of an "edge case" again when I move the page from desktop to mobile, a part of the content flows outside the viewport...
@AJ-Brommy Ok yes I wasn't suspecting flexbox to be used wrong here, it certainly didn't feel like it :D
Christopher
@bradley1492
Aug 22 2018 22:17
@AJ-Brommy I'll look into my bulletpoints now
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:17
sorry i thought justify was supposed to go on each box, but i got confused between the two types lol
are you saying between 600 and 725px? is that part you are saying doesn't work properly?
Christopher
@bradley1492
Aug 22 2018 22:19
@AJ-Brommy Yeah exactly the text leaves my viewport
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:20
i'd imagine you need a media query in there. i think there is too much going on for that size of window
Christopher
@bradley1492
Aug 22 2018 22:21
you mean a second media query?
but how does another media query change things up?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:22
nah sorry - i should shut up before i look at the code properly lol
Christopher
@bradley1492
Aug 22 2018 22:22
hahahaha no problem
Concerning the text flowing out I had to make a tradeoff either that edge case problem or "blocky" text with the text-justification property turned on...
But I just have to solve the viewport thing
It looks too ugly the other way round
^^
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:24
by they way your list is set up backwards
Christopher
@bradley1492
Aug 22 2018 22:25
How do you mean?
list backwards?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:25
list item <li> then content <a>blah</a> then end list item </li>
br3ntor
@br3ntor
Aug 22 2018 22:25
In sublimetext I can put my cursor on a number and use the hotkeys Ctrl+up/down to increment/decrement the value, does anyone know how to do this in vscode?
Christopher
@bradley1492
Aug 22 2018 22:25
ahhhhhh yeah but I looked at the example and they do it the same
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:25
they do!?
Christopher
@bradley1492
Aug 22 2018 22:25
yes
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:25
damn
fair play lol
Christopher
@bradley1492
Aug 22 2018 22:26
because I changed it and then it crushed everything
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:26
Well that's interesting
I wonder the purposes for that. Maybe I'm backwards!
Christopher
@bradley1492
Aug 22 2018 22:26
ahaahha now I think I'm backwards and the exmaple
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:27
@br3ntor sorry I don't know vscode
nah well if it says you have to do it, you have to do it! might be worth a read of "get help button" incase it mentions it
@bradley1492 is your menu size based on the size of the header? "JS Documentation"?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:32
oh you are using both flex and grid!
Christopher
@bradley1492
Aug 22 2018 22:32
yes I am using grid for the overall top layout and flex for the section
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:32
i think the problem could be in grid-template-columns: 350px 3fr;
Christopher
@bradley1492
Aug 22 2018 22:32
and the menu
oh but why?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:33
3fr is 3 fractions or 3 thirds, hold on let me check the lesson again as i may be wrong.. again lol
but it doesn't make sense to me
try...
grid-template-columns: 350px auto;
Christopher
@bradley1492
Aug 22 2018 22:37
hmm na it still doesn't work
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:38
ah man!!
Christopher
@bradley1492
Aug 22 2018 22:39
what?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:39
I thought we'd solved it lol
Christopher
@bradley1492
Aug 22 2018 22:40
is there sort of a name for this problem, it must be a classic problem in web development
content flowing out the viewport
It's not body overflow is it?
horizontal overflow is what it is I think
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:47
I can't see anything wrong with the use of overflow
you are only using it on navbar anyway
Christopher
@bradley1492
Aug 22 2018 22:48
oh I'm wrong I thought the problem was called horizontal overflow
like what's the name of the problem we are dealing with
in general
Do you think an element in my section is reaching out of the viewport so to speak?
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:51
Nope. No idea what to call it. I'm wondering if it's the margin/paddings and font sizes making something too big to go any smaller. But I can't really see anything it could be. I don't know - i am stumped lol
Christopher
@bradley1492
Aug 22 2018 22:55
to be honest me too, I searched what I can search with my current knowledge, I'll leave it at that for now and maybe try to get some help here tomorrow. Thanks a ton for your time!!!
AJ Brommy
@AJ-Brommy
Aug 22 2018 22:57
I feel we could both learn something here. If we could solve it. However there could be a temporary solution. If you did use another media query for min-wdht 600 and maxiwdth 725px you could shrink the left hand menu a bit. But that's not a real solution.
No worries mate. Sorry I couldn't help more, I'll tag @newmoon as is usually pretty good, quick, and helpful. Maybe @newmoon will read this and find the problem for you when the one finds time :)
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:07
@bradley1492 just so you know, I just did a shrink of the web browser on FCC version and it changed to mobile view about 815px. Which changes yours to do the same does defeat the problem. Not that it helps us understand the real problem. But it could a solution.
Christopher
@bradley1492
Aug 22 2018 23:08
hm I think another media queri is a bit too hacky for me,
oh you mean set media query to 815px?
yeah
I'll try
yeah
I already did that sort of thing once
Originally the media query was 480px and I already bumped it up because of that Issue ^^
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:10
by the way
There is only supposed to be one <header>
<h1>to<h6> should be used
i think
Christopher
@bradley1492
Aug 22 2018 23:12
I think in theory there should be only one but if I switch I think the test will fail
I'll look into the example
yes they also use a bunch of headers
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:15
ah ok - yeah i was just looking, i could be wrong again. lead to believe one thing, but not got the whole truth. i am now unclear.
https://www.w3schools.com/html/html5_semantic_elements.asp says <header> Specifies a header for a document or section. you have 1 per section, so by that definition it is fine
ok
Christopher
@bradley1492
Aug 22 2018 23:15
ah ok
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:15
sorry i should have checked theirs to lol
Christopher
@bradley1492
Aug 22 2018 23:15
I think the whole sectioning thing is fairly new
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:15
yeah html5
Christopher
@bradley1492
Aug 22 2018 23:16
alright I'll be gone for now thanks for your help!! :)
newmoon
@newmoon
Aug 22 2018 23:18
@br3ntor The functionality is part of emmet, with VS Code by default. Go to preferences -> keyboard shortcuts and search for increment and decrement to map the commands to ctrl+ :arrow_up: / :arrow_down: https://github.com/Microsoft/vscode/issues/3776#issuecomment-372664006
newmoon
@newmoon
Aug 22 2018 23:26
image.png
If it's the issue with the scroll bar appearing, it's because of your <code> content not wrapping.
The word-break property on your <code> elements will fix it: https://www.w3schools.com/cssref/css3_pr_word-break.asp
@bradley1492 @AJ-Brommy :arrow_up: :arrow_up: :arrow_up:
To debug overflow issues, I do:
* {
  border: 1px solid black;
}
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:36
lol - I literally just found it!! I saw newmoon talking and stayed away as I wanted to solve it. Gutted we didn't solve it first haha. Well done newmoon I knew you would have the answer. I did check for such a thing earlier but must have missed it. I literally took out all the content putting it back in one tag at a time and then found it. Feels good that I found it tho.
Uncanny I do the same, but i use a red border #f00; :D
how do you include a pic like that?
you have to upload it somewhere first?
yeah i see now that because there is no spaces it makes it one long word and the default doesn't break words so it breaks out the box so to speak
I still haven't finished my tribute page lol.. I should finish up!
newmoon
@newmoon
Aug 22 2018 23:42
@AJ-Brommy I think :point_up: this comment got lost yesterday :)
To add the image, I use a screen clip tool - select a portion of your screen and it goes to your clipboard. Paste in chat after that
AJ Brommy
@AJ-Brommy
Aug 22 2018 23:45
Just paste :O wow
Opera Snapshot_2018-08-23_003725_codepen.io.png
I tried drag and drop instead - worked! coolness
Hahahahaha oh dear... you already solved yesterday!! Oh well - all good fun. I definitely learned!
I now need to go back and find the help you gave me!! lol
By the way @newmoon on the FCC version of that project they did <a><li></li></a> and apparently throws the test out if its <li><a></a></li>!!!!