These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Aug 2018
hey everyone anyone experiencing the above issue with Google Maps API or is it just me?
glitz20
@glitz20
Aug 14 2018 03:15
anybody who has used slate.js?
shivendrarox
@shivendrarox
Aug 14 2018 07:57
hi guys
i am stuck at my front end nanodegree
Jill Lee
@jill-lee
Aug 14 2018 08:01
Can anyone figure out how to remove the white space on my main page when view on mobile?
Aditya
@ezioda004
Aug 14 2018 08:16
@jill-lee Adding overflow-x: hidden; to body seems to fix it and you'll also need to move the dependencies from link and script element to respective sections. So your HTML section should start from <body> tag.
Heres the fixed fork.
Jill Lee
@jill-lee
Aug 14 2018 08:28
@ezioda004 Thanks! :D I was adding overflow to the wrong section thats why.
Aditya
@ezioda004
Aug 14 2018 08:31
:thumbsup: btw nice and clean portfolio.
Jill Lee
@jill-lee
Aug 14 2018 08:31
@ezioda004 Thank you :)
Jill Lee
@jill-lee
Aug 14 2018 08:38
@ezioda004 I have a problem when I use it on the body it seems stuck, I'm not sure if what you mean dependencies from link and script?
@ezioda004 sorry ignore my last message I think I need to sleep now lol
Aditya
@ezioda004
Aug 14 2018 08:45
@jill-lee By stuck you mean? And I meant you should only have body tag in HTML section, because codepen generates head tag itself, so its better to put the link to cdns in the CSS, JS sections by clicking the circle thingy before their heading.
Jill Lee
@jill-lee
Aug 14 2018 09:01
@ezioda004 ok I'll try that. Thanks
shivendrarox
@shivendrarox
Aug 14 2018 09:15
guys???!!!
anyone here
I am having a bit of problem here
Tiago Correia
@tiagocorreiaalmeida
Aug 14 2018 09:21
just ask @shivendrarox
someone will end up helping
shivendrarox
@shivendrarox
Aug 14 2018 09:21
I am working on a memory game
when i click on a card it shows its symbol, when i click it again it opens another card even if it's not opened and shows that they are matched by changing their back ground to green
Aditya
@ezioda004
Aug 14 2018 09:24
@shivendrarox Do you have an example (codepen) or something?
shivendrarox
@shivendrarox
Aug 14 2018 09:25
it's a udacity project
i am doing their FEND program
shivendrarox
@shivendrarox
Aug 14 2018 09:32
@ezioda004 you can safely ignore the commented code
Aditya
@ezioda004
Aug 14 2018 09:36
@shivendrarox Yes, I've completed the nanodegree. Anyway, since you're letting the card with open class being clicked it again, its adding the same class to the array openCards and since they both match, this code is run $(".fa."+openCards[i-2].slice(3)).parent().addClass("match");
shivendrarox
@shivendrarox
Aug 14 2018 09:37
so how to make a already open card unclickable??
Aditya
@ezioda004
Aug 14 2018 09:39
You can have a condition,
if (the cards doesnt have "open" class){
  run rest of the code
}
shivendrarox
@shivendrarox
Aug 14 2018 09:39
ok.. let me try this
Aditya
@ezioda004
Aug 14 2018 09:41
Hint: theres a method called includes() in array which will help you out, all you need to do is get the classes present on the clicked card.
shivendrarox
@shivendrarox
Aug 14 2018 09:45
hey @ezioda004 but the arrays i am using only stores card symbols for ex. "fa fa-cube", there is no array for the parent element
should i have to make one?
Aditya
@ezioda004
Aug 14 2018 09:47
@shivendrarox No, not that array. $(this) will return the clicked object, you can get its class by using $(this).attr("class"), this will return an array with all the classes on that element.
shivendrarox
@shivendrarox
Aug 14 2018 09:47
ok.... let me try this
shivendrarox
@shivendrarox
Aug 14 2018 09:57
@ezioda004 thanks man!!!!!!
its working as expected now, just a few changes then it's ready
Aditya
@ezioda004
Aug 14 2018 09:58
@shivendrarox :thumbsup: btw you're also from the scholarship program right?
shivendrarox
@shivendrarox
Aug 14 2018 09:59
yep!!
you can see me on slack
i am dave-D.fend
Aditya
@ezioda004
Aug 14 2018 09:59
Ohh, I think I've seen you there, but not so active there
shivendrarox
@shivendrarox
Aug 14 2018 10:00
yea i am not active
lot's stuff is going on and i have already missed this project's deadline
Aditya
@ezioda004
Aug 14 2018 10:02
Ah I see, the deadlines are soft deadlines, as long as you finish all the projects before the program ends, you should be fine. TBH theres a lot of content there which is useless, I skipped bunch of lessons :D
shivendrarox
@shivendrarox
Aug 14 2018 10:02
Yea i strongly agree with that
lots of content was either useless or not at all related to project
In the beginning I was scared as hell for this project
now I am atleast haflway through
Aditya
@ezioda004
Aug 14 2018 10:05
Yeah couple of projects are relatively very easy (feed reader, restaurant app) and couple of them are quite lengthy (React ones, arcade game and this one).
You might wanna try animate.css library for this one to animate card, its perfect for this project.
shivendrarox
@shivendrarox
Aug 14 2018 10:13
ok!! thanks a lot!
Yashwardhan Pauranik
@yashwp
Aug 14 2018 10:49
Can any one address this issue iamkun/dayjs#297
Dmytro Holysh
@dmk1111
Aug 14 2018 11:25
@yashwp as far as I see, method fromNow is not present in d.ts file, that's why TS shows that error
You could add type any to dayjs or relativeTime and check if it works after that
Or you could create realativeTime.d.ts file for that plugin and make PR
shivendrarox
@shivendrarox
Aug 14 2018 12:19
@ezioda004 u there man?
hey guys !
i have made a memory game, it's all fine but when i click the second card, it does not displays
https://codepen.io/shivendrarox/pen/LBvdZm
tundeiness
@tundeiness
Aug 14 2018 12:33
guys i'm back again...https://codepen.io/highness/pen/bjjzJj
the navbar height isn't taking the whole side of the screen. I tried adding height but it was not working. any hack around this?
Yashwardhan Pauranik
@yashwp
Aug 14 2018 12:40
@dmk1111 Thanks for your suggestion. But I dont know what .d.ts do or what does it contains. Can you brief me about it or share some resource, which make me understand
Dmytro Holysh
@dmk1111
Aug 14 2018 12:41
@yashwp .d.ts file has all interfaces for regular .js files in case library is written not in TypeScript but you want to use it in your project together with TS.
There are guys that create such files for popular libraries, they called DefinitelyTyped (http://definitelytyped.org/)
shivendrarox
@shivendrarox
Aug 14 2018 12:44
anyone here?
Dmytro Holysh
@dmk1111
Aug 14 2018 12:44
@shivendrarox there are a lot of people here, just ask your question, if you have any. If someone knows answer - he'll help

i have made a memory game, it's all fine but when i click the second card, it does not displays
https://codepen.io/shivendrarox/pen/LBvdZm

your second card doesn't have class show, that's why it bounces but doesn't turn

shivendrarox
@shivendrarox
Aug 14 2018 12:49
i didn't got it
shivendrarox
@shivendrarox
Aug 14 2018 12:56
whenever you click a card, it will get a class open show, but 2nd card is sort of not doing that
Dmytro Holysh
@dmk1111
Aug 14 2018 12:56
@shivendrarox yes, because class show gets removed right away
shivendrarox
@shivendrarox
Aug 14 2018 12:57
so it does gets the class but also gets removed instantly, am i right?
Dmytro Holysh
@dmk1111
Aug 14 2018 13:08
@shivendrarox I guess you have to debug it locally on your computer
As it shows in console that class was set
card open show
["fa fa-bolt"]
 card open show
 (2) ["fa fa-bolt", "fa fa-diamond"]
shivendrarox
@shivendrarox
Aug 14 2018 13:10
any method to slow the removal of class so at least the card is visible for a while
i tried jquery delay mthod but nothing happened
Tiago Correia
@tiagocorreiaalmeida
Aug 14 2018 13:11
you can define maby a fadeout class
that as an animation
that has a duration of N seconds
and you can add / remove the class depending on what you are trying to achieve
anyway other than delay
you can use setTimeout
newmoon
@newmoon
Aug 14 2018 16:00
@shivendrarox Move your removeClass functionality into the click function to fix the problem:
      if(!($(this).attr("class").includes("open show"))){
        $(".open.show").removeClass("open show"); // remove open + show class from existing cards first
        $(this).addClass("open show");
        console.log($(this).attr('class'));
        $(this).animateCss('bounce');
        $(this).one(animationEnd,addCardToList(this));
         //addCardToList(this);
      }
Remove all calls to .removeClass("open show") from your addCardToList() function.
To add/remove classes with jQuery using a delay, you might also want to look into the queue() method. Here's an example: https://s.codepen.io/anon/pen/NBmeva?editors=1011
zootechdrum
@zootechdrum
Aug 14 2018 16:09
hello I am having trouble understanding something from the react docs
its the tictactoe example
Christopher McCormack
@cmccormack
Aug 14 2018 16:09
@zootechdrum what are you having issue with?
zootechdrum
@zootechdrum
Aug 14 2018 16:10
this piece of code
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]; // Idont understand this part
    console.log(a,b)
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
is squares[a] and array or a single digit
i would think its an array
here is the link to the react codepen
newmoon
@newmoon
Aug 14 2018 16:26
Was going to let Chris answer, but he may have stepped away. @zootechdrum squares[a] would be squares[0] on the first loop, squares[3] on the next loop, then 6, 0, 1, 2, 0, 2.
This: const [a, b, c] = lines[i] is known as a destructuring assignment
Christopher McCormack
@cmccormack
Aug 14 2018 16:28
@newmoon thanks yeah had to step away
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 14 2018 16:30
im trying to put main tag in the middle and two aside tags on right and left side with flexbox but it's not working
could someone help me with this
i just don't get what is wrong
Moisés Man
@moigithub
Aug 14 2018 16:31
remove flex-wrap: wrap;
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 14 2018 16:31
thank you
flex wrap: wrap is only when you want to makeit responsive for other devices right?
tundeiness
@tundeiness
Aug 14 2018 16:51
guys I need my project to pass all the test. currently it's 15/16. for the last one I keep getting this error for this user story "13. When I click on a navbar element, the page should navigate to the corresponding section of the "main-doc" element (e.g. If I click on a "nav-link" element that contains the text "Hello world", the page navigates to a <section> element that has that id and contains the corresponding <header>."
I don't know where I am missing it but I sure need help. Here is the link to the project: https://codepen.io/highness/pen/bjjzJj
Moisés Man
@moigithub
Aug 14 2018 16:53
click all ur links.. that will take u to somewhere in ur page (with its corresponding id) @tundeiness
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 14 2018 16:55
if you allowed to use main tag once per page
what about complex websites?
when you look at their codes
you see only div tags like sandwich inside each other
but not semantic tags themselves
i mean like your choice for creating websites should not be that small
like putting all boxes inside main tag
especially with flexbox and grid system
which has different parts
tundeiness
@tundeiness
Aug 14 2018 16:59
@moigithub they all work..unless I am assuming though
newmoon
@newmoon
Aug 14 2018 17:20

@tundeiness This link:

<a href="#Getting_Started" class="nav-link"> <li>Getting Started</li></a>

Is supposed to go to this section:

<section class="main-section" id="Getting_started">

The error is referring to a problem with that link. Check the values closely to fix the issue:

AssertionError: Every .nav-link should have an href value that links it to its corresponding .main-section (e.g. href="#Introduction"). Check that these .main-section ids have corresponding href values : Getting_started : expected 1 to equal 0

Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:41
@newmoon hi there...so im going to takle putting a pen on my github account....can you walk me thru it now...??thnx
tackle
Christopher McCormack
@cmccormack
Aug 14 2018 18:41
github.io / github pages?
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:42
@cmccormack github.com
yep
Christopher McCormack
@cmccormack
Aug 14 2018 18:43
So you want to use git with github for versioning/etc correct?
Have you used git?
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:43
nope....newmoon mentioned to use the export button in codepen...
and then upload to gh-pages
newmoon
@newmoon
Aug 14 2018 18:44
Yeah, I can help out @flyfishingbarbara
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:44
@newmoon thnx...
@cmccormack thnx chris newmoon is avail...
newmoon
@newmoon
Aug 14 2018 18:45
I usually use gitlab, but it should be similar with github - let me try out in my own repo
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:45
@newmoon thnx
...so i hit the export button and then a pop up had a link to the pen... i clicked the link and see my files in gist.github.com
newmoon
@newmoon
Aug 14 2018 18:48
Export it to a .zip file instead, @flyfishingbarbara
We just want to upload the .css, .html, and .js files
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:50
ok so i see all the folders on my c drive...
newmoon
@newmoon
Aug 14 2018 18:50
Go to https://github.com/new
Enter a repository name
Mark the checkbox for "Initialize this repository with a readme"
Click Create Repository
Drag and drop the files and folders for your web page (that you exported from you .zip folder) onto the new repository. They'll get uploaded
Click "Commit changes" to finalize the upload
niniyzni
@niniyzni
Aug 14 2018 18:52
hi,
  • I am new to js.
  • trying to learn basics in js
  • can you tell me why its prints 3 for this line -'6'+9
  • can you tell me why its prints 5 for the below line
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

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

<script>
var cars = (
    2,
    3,
    5
);
var sub = (
   -'6'+9
);
document.getElementById("demo").innerHTML = cars;
document.getElementById("demo").innerHTML = sub;

</script>

</body>
</html>
newmoon
@newmoon
Aug 14 2018 18:55
@niniyzni The hyphen - is a unary operator, it will treat a string that looks like a number as a number
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:55
@newmoon so i just add or drag the 3 files...css, scss and js..?? i dont want index or license or readme...correct..??
newmoon
@newmoon
Aug 14 2018 18:55
@flyfishingbarbara You want index.html and the three folders. No need for license or readme.
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 18:56
k, sounds good....
newmoon
@newmoon
Aug 14 2018 18:56
Let me know when you're there :)
You can just drag and drop them - for example, if it's your blueshark repo, navigate to: https://github.com/flyfishingbarbara/blueshark, and then drag + drop your CSS, SCSS, JS folders, and the index.html file onto that page
If that doesn't work - just click "upload files" to do the same
niniyzni
@niniyzni
Aug 14 2018 18:59
@newmoon hey can you explain fir the cars scenario also?
newmoon
@newmoon
Aug 14 2018 19:02
@niniyzni In that case, the comma means a new definition for the cars variable. You are assigning 2, then 3, and then 5 to cars. It should output as 5.
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:03
@newmoon ...i have selected all 4 folders, drag and drop but not showing on screen... do i need to extract them or something since it's a zip file...??
newmoon
@newmoon
Aug 14 2018 19:04
@flyfishingbarbara Yes, need to extract them first
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:05
ok so i uploaded the whole zip file....arghhh...
my path is Pure CSS Imges if you wanna take a look...
trying to delete the whole zip file to try uploading again....
newmoon
@newmoon
Aug 14 2018 19:07
@flyfishingbarbara Okay, let me know how it goes :)
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:09
@newmoon thnx... i was doing that....just not used to scrolling down page to click "commit changes' button...haha thnx
@newmoon yahoo! so all 4 files are now in this repo...thnx!
newmoon
@newmoon
Aug 14 2018 19:13
@flyfishingbarbara Looks good! Now, click the "Branch: master" button and enter "gh-pages" in the text field. Press enter to create your new gh-pages branch
Once you do that, your web page will be available at: https://flyfishingbarbara.github.io/Pure-CSS-Images
(it may take a few minutes)
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:16
@newmoon k, did the 'gh-pages' instructions....
newmoon
@newmoon
Aug 14 2018 19:16
Looks like you got it all set up now
Nice penguin :)
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:17
aww he's soo cute huh?? thnks so much for your HELP!!
newmoon
@newmoon
Aug 14 2018 19:17
So, the quick instructions are: drag and drop the files you want, create a gh-pages branch, and visit your new website.
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:17
click on his left wing - he'll wave...
*wing-left
newmoon
@newmoon
Aug 14 2018 19:18
LOL, nice job :)
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:20
so i have more images....do i put them in this repo as well..?? ie is this Pure CSS Images a Folder?
@newmoon not sure how to phrase question....so i have more images....do i put them in this repo as well..?? ie is this Pure CSS Images a Folder?
newmoon
@newmoon
Aug 14 2018 19:23
@flyfishingbarbara This repo will automatically load your index.html file.
So, you can update your index.html file to link to multiple other html files if needed
Or, you can create a penguin repo, a shark repo, a dolphin repo, etc... up to you how you want to organize your code
When dealing with lots of files, it's helpful to set everything up locally and then use git or their desktop UI tools to sync up your local files with your github repository.
Git is very, very useful to learn, but it's going to take some time, trials, and errors
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:27
thanx for all the info...yah, ive watched net ninja's tutorials re git...i want to get some practice with these small projects ...
so if i make some changes with my penguin i just upload all 4 oft hose folders again...
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 19:46
@newmoon thnx again...!! so helpful i was even now able to rename my repo...learn something new everyday!! have a good one!
niniyzni
@niniyzni
Aug 14 2018 19:50
@newmoon can you explain more in detail, sorry I didnt understand
hey why its printing undefined in the below code snippet
             var myObject = {
        price: 20.99,
        getPrice: function(){
            return this.price;
        }

    };
    var customObject = Object.create(myObject);
    customObject.price = 19.99;

    delete customObject.price;
    console.log(customObject.getPrice());
newmoon
@newmoon
Aug 14 2018 19:51
@niniyzni Which part can I help explain better - the - sign or the cars variable?
niniyzni
@niniyzni
Aug 14 2018 19:51
@newmoon both
newmoon
@newmoon
Aug 14 2018 19:52
In javascript -'6' is treated as -6
the - tells JavaScript to look at the string and if it appears like a number, treat it as a number
Similarly, +'6' is treated as 6 not "6"
var x = (1,2,3,4,5);
console.log(x) // 5
Aditya
@ezioda004
Aug 14 2018 19:56
@niniyzni Whats printing undefined? The onlyundefined I see is from console.log()
newmoon
@newmoon
Aug 14 2018 19:56
I think they mean why isn't it printing undefined?
It's different if you use Obect.assign() to clone the object rather than Object.create() which just references it.
Aditya
@ezioda004
Aug 14 2018 19:59
It shouldnt print undefined anyway because Object.create sets the __proto__ to the passed argument. So if the method cant find price property, it delegates to the prototype and find it there.
Morchid Chellali
@Morched23MJ
Aug 14 2018 20:13
I'm making the Survey Form project. I have created multiple divs, and nested ones in others. Is that practical to align them properly? Or is there a way more proper approach? I'd like to know the other ways to do it. :)
niniyzni
@niniyzni
Aug 14 2018 20:14
@ezioda004 console.log(customObject.getPrice());
Aditya
@ezioda004
Aug 14 2018 20:16
@niniyzni It prints 20.99 and undefined but that undefined is because console.log() method doesnt explicitly returns anything therefore it returns undefined. Any function which doesnt explicitly return anything, implicitly returns undefined.
niniyzni
@niniyzni
Aug 14 2018 20:17
@ezioda004 hey it sconfusing...can you explain more in detail
Aditya
@ezioda004
Aug 14 2018 20:17
@niniyzni Which part?
niniyzni
@niniyzni
Aug 14 2018 20:20
@ezioda004 undefined part?
Aditya
@ezioda004
Aug 14 2018 20:24

@niniyzni
Function with no return keyword, therefore function returns undefined

function sum(a, b){
  console.log(a + b);
}
sum(1, 2);

//prints 3
//returns undefined

Function with return keyword, therefore doesnt return undefined

function sum(a, b){
  return a + b;
}
sum(1, 2);
//returns 3, no undefined this time
Barbara Pentoney
@flyfishingbarbara
Aug 14 2018 22:47
@Morched23MJ can you put the link to your pen...??
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 14 2018 22:51

@niniyzni it returns undefined because you are deleting the object before you print it.

delete customObject.price; 
console.log(customObject.getPrice());

what exactly are you trying to get it to do?

zootechdrum
@zootechdrum
Aug 14 2018 23:04
@newmoon Thank you for the detailed answer
Morchid Chellali
@Morched23MJ
Aug 14 2018 23:24