These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Jan 2018
aRtoo
@artoodeeto
Jan 08 2018 00:27
hello fam. i have a progress bar but theres a white space on top of the progress bar. how to remove it? thanks.
https://codepen.io/artoo/full/mpdvxv/
Stephen James
@sjames1958gm
Jan 08 2018 01:26
@artoodeeto The white comes from the margin of the element above the progress bar. The boxTimer
aRtoo
@artoodeeto
Jan 08 2018 02:53
@sjames1958gm ill try it sir. thanks another saved.
CamperBot
@camperbot
Jan 08 2018 02:53
artoodeeto sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8827 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Zay
@incognitonerd
Jan 08 2018 03:08
hey hows it going campers
long time no speak
is anyone familiar with flex?
Claudio Restifo
@Marmiz
Jan 08 2018 03:16
You mean :muscle: at the gym, or flexbox?
:laughing:
Zay
@incognitonerd
Jan 08 2018 03:19
howToFixThisShit.png
that type of flex lol :muscle:
Claudio Restifo
@Marmiz
Jan 08 2018 03:38
@incognitonerd have you tried a simple flex:0 on B?
or flex: none
Zay
@incognitonerd
Jan 08 2018 03:39
i havent. im actually a backend java developer who got assigned this task
ill try it now
Claudio Restifo
@Marmiz
Jan 08 2018 03:42
backend to CSS? fun stuff :worried:
Zay
@incognitonerd
Jan 08 2018 03:42
nightmare bro @Marmiz
total nightmare
and this app takes 3 mins to load lol
Zay
@incognitonerd
Jan 08 2018 03:47
flex 0 didnt work. im goin to try flex none
Dostonbek Toirov
@Dostonbek1
Jan 08 2018 03:47
<h1>Hello, World!</h1>
Zay
@incognitonerd
Jan 08 2018 03:48
hey dostonbek
Dostonbek Toirov
@Dostonbek1
Jan 08 2018 03:49
How is everybody doing?
Zay
@incognitonerd
Jan 08 2018 03:49
just working over night..like most developers
Claudio Restifo
@Marmiz
Jan 08 2018 03:52

@incognitonerd anyway the parent in flexbox should automatically grow as its contents gets bigger.
The reason yours does not could be a combination of factors:

  • the B is not actually a flex element.
  • the container has overflow inherit somewhere?
  • maybe a fixed height inherit somewhere else?

those are the things i'd look into :+1:
CSS yay! :bamboo:

Zay
@incognitonerd
Jan 08 2018 03:53
ok thanks
Rada
@Radascript
Jan 08 2018 04:38
Is anyone here familiar with Vue.js?
VaseJS
@VaseJS
Jan 08 2018 04:39
try the freeCodeCamp room. there are active people there. these side rooms are dead. @Radascript or try the general Help room also, but that seems dead too
i don’t know vue otherwise i would help
Rada
@Radascript
Jan 08 2018 04:39
@VaseJS thanks Vase@
CamperBot
@camperbot
Jan 08 2018 04:39
radascript sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 425 | @vasejs |http://www.freecodecamp.org/vasejs
aRtoo
@artoodeeto
Jan 08 2018 05:19
is there anyone good here at center a division? lol
VaseJS
@VaseJS
Jan 08 2018 05:21
a div?
@artoodeeto
aRtoo
@artoodeeto
Jan 08 2018 05:21
@VaseJS yea bro. hold on im gonna post the pen
@VaseJS check the session and break time bro
VaseJS
@VaseJS
Jan 08 2018 05:33
@artoodeeto change your with to 50%
add margin-left: auto, margin-right: auto
you’re good
aRtoo
@artoodeeto
Jan 08 2018 05:35
@VaseJS thanks fam. going to check
CamperBot
@camperbot
Jan 08 2018 05:35
artoodeeto sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 426 | @vasejs |http://www.freecodecamp.org/vasejs
VaseJS
@VaseJS
Jan 08 2018 05:35
let me know. but i tested it already. should work.
oh yea, you have to uncomment the inner div. you have it commented out for some reason
it needs to be there to control the child divs so they both center correctly
@VaseJS any luck?
VaseJS
@VaseJS
Jan 08 2018 05:42
@artoodeeto if you go here, they will help also. i’m about to passout https://gitter.im/FreeCodeCamp/CodeReview
Zay
@incognitonerd
Jan 08 2018 07:04
hey i think i figured it outvase
@VaseJS the underlyin issue
say the container has 2 divs in it and the height is 300. if i add a 3rd div, the height becomes 320. i have to stop the height from changing because another div is added. i want the 3rd div to squeeze into the 300
Javier Pons
@JavierPons
Jan 08 2018 07:19
@hi there!
Zay
@incognitonerd
Jan 08 2018 07:22
hola
we have the same name
Javier Pons
@JavierPons
Jan 08 2018 07:23
hola
@incognitonerd do you have some knowledge in Js?
Zay
@incognitonerd
Jan 08 2018 07:31
i dont man. im a backend developer whos been lucky enough to be chosen to fix a front end problem
total sarcasm
Mohit Garg
@mohitgarg
Jan 08 2018 07:41
@JavierPons Can I help you with something?
DMsalati
@DMsalati
Jan 08 2018 07:48
can someone help me understand recursive functions?
ive been struggling for a week with one of the challenges and i just cant understand it

function chunkArrayInGroups(arr, size) {

var temp = [];
var result = [];

for (var a = 0; a < arr.length; a++) {
if (a % size !== size - 1)
temp.push(arr[a]);
else {
temp.push(arr[a]);
result.push(temp);
temp = [];
}
}

if (temp.length !== 0)
result.push(temp);
return result;
}

I understand everything except this part
if (a % size !== size - 1)
Markus Kiili
@Masd925
Jan 08 2018 08:00
@DMsalati It tests if the index is not at last element of new subarray. If the arr length is for example 10 and size is 3, then a%size will be 0,1,2,0,1,2,0,1,2,0 and a % size !== size - 1 being true means that index is not so that a%size is 2.
I think that there are clearer ways to do a one loop solution like that.
DMsalati
@DMsalati
Jan 08 2018 08:14
@Masd925 thank you, there are other solutions but i thought i should be able to understand that one easily since its the "basic code solution"
Markus Kiili
@Masd925
Jan 08 2018 08:20
@DMsalati That doesn't mean that the solution is simple or any good for that matter. I think that that solution is quite bad actually. I had to look at it for quite some time before figuring out what is happening.
DMsalati
@DMsalati
Jan 08 2018 08:25
@Masd925 Really? that actually mean so much to me because i actually began to considering to quit FCC cuz if i cant understand a basic solution i should probably quit
Markus Kiili
@Masd925
Jan 08 2018 08:29
@DMsalati I think that you should look at these solutions instead:
// Solution with simple for loop over arr elements:

function chunkArrayInGroups(arr, size) {
  var result = [];

  for (var i=0; i<arr.length; i++) {
    var subIndex = i%size;
    if (subIndex===0) result.push([]);
    var lastSubArray = result[result.length-1];
    lastSubArray.push(arr[i]);
  } 

  return result;
}

// Elegant solution with for loop and slice:

function chunkArrayInGroups(arr, size) {
  var result = [];
  for (var i=0; i<arr.length; i+=size) {
    result.push(arr.slice(i,i+size));
  }
  return result;
}

// Elegant while loop solution (that mutates arr):

function chunkArrayInGroups(arr, size) {
  var result = [];
  while (arr.length>0) result.push(arr.splice(0,size));
  return result;
}
Franki
@FrankiCatherine
Jan 08 2018 08:38
hi all - beginner here and this may seem a silly questions - I cant seem to auto populate my html boiler in Sublime. I have added the below text scope into auto_complete_selector under package settings - user, but it still wont work.
"auto_complete_selector": "text, meta.tag - punctuation.definition.tag.begin, source - comment - string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc",
DMsalati
@DMsalati
Jan 08 2018 08:39
@Masd925 i understand the second answer best im just not clear on "i+=size"
Skomorokhov
@Skomorokhov
Jan 08 2018 08:40
@FrankiCatherine Your emmet plugin doesn't work or ?
Franki
@FrankiCatherine
Jan 08 2018 08:43
@Skomorokhov no idea!? It literally worked once only when i put it into syntax settings for one particular project, but when i tried to save it in the package - user settings, nada.
and now sublime wont open at all :'(
Skomorokhov
@Skomorokhov
Jan 08 2018 08:47

@FrankiCatherine
How to install
With Package Control:

1.Run “Package Control: Install Package” command, find and install Emmet plugin.
2.Restart ST editor (if required)
Manually:

1.Clone or download git repo into your packages folder (in ST, find Browse Packages… menu item to open this folder)
2.
Restart ST editor (if required)

@FrankiCatherine
@FrankiCatherine
Maybe I didn't get your question, sorry :)
Danshil Mungur
@danshilm
Jan 08 2018 08:56
@FrankiCatherine if I remember correctly, the shortcut for boilerplate on Emmet is ! then hitting tab
hensn5250
@hensn5250
Jan 08 2018 09:03
hello
anyone?
Skomorokhov
@Skomorokhov
Jan 08 2018 09:05
@hensn5250
hey
Franki
@FrankiCatherine
Jan 08 2018 09:05
@Skomorokhov hi there installed emmet, but still not boilerplate. @danshilm alos tried ! and no lucj
hensn5250
@hensn5250
Jan 08 2018 09:06
hey @Skomorokhov
Danshil Mungur
@danshilm
Jan 08 2018 09:06
Hmm, that's weird.. Try searching for html in the Command Palette (Ctrl + Shift + P)
If you find nothing there, maybe there's something wrong with your Emmet installation
hensn5250
@hensn5250
Jan 08 2018 09:07
Anyone have experiance with CSS grid?
Skomorokhov
@Skomorokhov
Jan 08 2018 09:07
@FrankiCatherine
Try ctrl + E
@hensn5250
I am only going to study it
hensn5250
@hensn5250
Jan 08 2018 09:07
I'm having an issue with some images wrapping
Danshil Mungur
@danshilm
Jan 08 2018 09:08
@FrankiCatherine actually, it's snippet html that you should be searching for
hensn5250
@hensn5250
Jan 08 2018 09:09
@Skomorokhov if you are new to it this guy has a great tutorial on in https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
Skomorokhov
@Skomorokhov
Jan 08 2018 09:09
@hensn5250
thanks dude :smile:
CamperBot
@camperbot
Jan 08 2018 09:09
skomorokhov sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Jan 08 2018 09:09
:cookie: 284 | @hensn5250 |http://www.freecodecamp.org/hensn5250
hensn5250
@hensn5250
Jan 08 2018 09:10
no prob
That platform he uses,Scrimba, is awesome. It wish it could be utilized on a larger platform like FCC or even Youtube.
Franki
@FrankiCatherine
Jan 08 2018 09:11
@danshilm sorry can you elaborate, I've tried the above, such a silly issue as well.
what a noob :P
Danshil Mungur
@danshilm
Jan 08 2018 09:16
Alright, first we are gonna make sure you have Emmet all setup without any issues.
Open the Command Palette in Sublime Text and search for Emmet
If you get a bunch of options starting with Emmet: *some more stuff*, you should be good with that
hensn5250
@hensn5250
Jan 08 2018 09:25
I might as well follow my own advise and rewatch the tuts. In case anyone is very familiar with CSS grid and can help, the issue I am trying to solve is to hide content in the grid as the page width changes . I have a series of boxes positioned horizontally. They stretch the full width of the page. I want the boxes to wrap around when width of the page gets smaller, similar to flex-wrap. Then I want to hide the content that wrapped. This can be done using media queries but I was looking for a way to do it without using media queries or JS, if possible.
Franki
@FrankiCatherine
Jan 08 2018 09:26
I have installed emmet @danshilm
@danshilm the endless list of emmet: stuffs is there
Danshil Mungur
@danshilm
Jan 08 2018 09:29
Okay good, and if you search for snippet html in the Command Palette instead?
Franki
@FrankiCatherine
Jan 08 2018 09:33
image.png
nope only two options
@danshilm
Danshil Mungur
@danshilm
Jan 08 2018 09:38
Hmm, try writing html:5 in the editor then hitting tab
That's straight from the Emmet docs, if that doesn't work, then I'm bad lol
Franki
@FrankiCatherine
Jan 08 2018 09:44
nope
funny thing is that it actually did work once, but wouldn't save as default... thanks for the help though @danshilm
CamperBot
@camperbot
Jan 08 2018 09:46
:cookie: 272 | @danshilm |http://www.freecodecamp.org/danshilm
frankicatherine sends brownie points to @danshilm :sparkles: :thumbsup: :sparkles:
Danshil Mungur
@danshilm
Jan 08 2018 09:49
Alright then
Thing is I also use other plugins in Sublime Text, I use HTML5 and HTML Snippets
So I have access to different kinds of snippets for a boilerplate.
Maybe check those out
Markus Kiili
@Masd925
Jan 08 2018 09:53
@DMsalati i+=size is the same as i = i+size.
primuscovenant
@primuscovenant
Jan 08 2018 11:11
@heroiczero thx
CamperBot
@camperbot
Jan 08 2018 11:11
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2130 | @heroiczero |http://www.freecodecamp.org/heroiczero
Ankit Padia
@InsaneSkull
Jan 08 2018 11:15
I am trying make heat map of employee attendance and using github.com/frappe/charts for this purpose. I don't know format of data in heat map. Can anybody suggest a sample data. I have only dates of attendance.
It says timestamp value pairs. but didn't worked out with me.
1rjun
@1rjun
Jan 08 2018 12:37
https://codepen.io/1rjun/pen/rpwrdw?editors=0001 i am getting undefined value of lat and long variable
help
Markus Kiili
@Masd925
Jan 08 2018 12:39
@1rjun Those lat and long variables get values at some point later (after that script has finished executing) when the geolocation response comes and that callback function getLoc is executed.
1rjun
@1rjun
Jan 08 2018 12:40
but i have already written its code above
so it should be executed first
and assign the values to lat and long
Markus Kiili
@Masd925
Jan 08 2018 12:41
@1rjun You just declare the getLoc function and then navigator.geolocation.getCurrentPosition(getLoc); tells the browser to execute it later when the response comes.
You need to change the code structure so that it takes into account the async nature of that geolocation call. So do the dom manipulation inside the callback function and not at the end of script.
1rjun
@1rjun
Jan 08 2018 12:42
but it will look ugly
i alredy tried it inside the getLoc function
but i want to assign the lat and long value to the url outside the getLoc function,because getLoc is only to take the longitude and latitude values
Markus Kiili
@Masd925
Jan 08 2018 12:45
@1rjun Only inside the getLoc function you know that the response has come. You can use the response inside the callback function or for example call a function there and pass lat and long as arguments.
1rjun
@1rjun
Jan 08 2018 12:46
ohkk thats a good approach will try
Markus Kiili
@Masd925
Jan 08 2018 12:46
You cannot get around the fact that the callback function is run after the script has finished.
Vidžius
@sursider
Jan 08 2018 12:51
Hello there people. Maybe anyone know if I can create a simple link to open Viber and add someone to contacts or something? Or it's possible only with Public accouts created in viber?
1rjun
@1rjun
Jan 08 2018 12:55
@Masd925 bro everything is workiing good but when i try to use the variable globally then i am not able to acces its value
Markus Kiili
@Masd925
Jan 08 2018 12:56
@1rjun Using global variables is not the way to go here.
You just need to use the response inside the callback function.
1rjun
@1rjun
Jan 08 2018 12:58
so i have to make everything in this using callback function
Markus Kiili
@Masd925
Jan 08 2018 13:05
@1rjun Basically yes.
1rjun
@1rjun
Jan 08 2018 13:12
:)
1rjun
@1rjun
Jan 08 2018 13:21
hey fetch method will work in codepn??
codepen
Ivan Ngundela
@ingundela
Jan 08 2018 13:35
hello everyone, may some one please guide me on the best tutorial to know how to add SEO to my website…. also how can I search on google my name like Ivan Ngundela and than my website appear as the first search.. Thanks
pocahontas123
@pocahontas123
Jan 08 2018 13:38
Hello, some body here to help me with my website layout ?
Ivan Ngundela
@ingundela
Jan 08 2018 13:40
@pocahontas123 share with us
pocahontas123
@pocahontas123
Jan 08 2018 13:40
@ingundela Hello. Here is my code https://codepen.io/pocahontas123/pen/GyyOZW
I have issue with the body/html not really matching my main page width
And my sidebare doesn't take full width
Pardon me for the css. It's not well put
Ivan Ngundela
@ingundela
Jan 08 2018 13:42
@pocahontas123 ok… put everything inside a container and give it a max-width
@pocahontas123 eg. you can give your body a max-width
pocahontas123
@pocahontas123
Jan 08 2018 13:44
@ingundela About your ceo, i bought this course on udemy but had not the time to look at it (the guy is very good with java)
https://www.udemy.com/seo-2017-training-with-seo-expert-for-beginners
@ingundela Ok, what do you mean by everything ?
Ivan Ngundela
@ingundela
Jan 08 2018 13:44
@pocahontas123 thank, I’ll have a look
CamperBot
@camperbot
Jan 08 2018 13:44
ingundela sends brownie points to @pocahontas123 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @pocahontas123 |http://www.freecodecamp.org/pocahontas123
pocahontas123
@pocahontas123
Jan 08 2018 13:45
i have body, html and main-page
Which one will have my max-width ?
Ivan Ngundela
@ingundela
Jan 08 2018 13:46
@pocahontas123 I thing you should define max-width for every section of your website, it is much easier like that….
@pocahontas123 give your body a max-width: 1200px for example…..
@pocahontas123 maybe I’m not quite clear on what exatly you want ot achieve… all the content to take full website width?
pocahontas123
@pocahontas123
Jan 08 2018 13:49
@ingundela
<html>
    <head>
    </head>

    <body>
        <div id="main-page">
            <header>
            </header>
            <main>
                <div id="main-form">
                </div><!-- main form div-->
            </main>
            <footer>
            </footer>
        </div><!--main-page div-->
    </body>
</html>
If you look at the bottom left,bottom and right, there are spaces
Ahmed raza
@Raza403
Jan 08 2018 13:57
Bootstrap has two components navs and navbar. What is the difference between them. When each is used and should not be used
Ivan Ngundela
@ingundela
Jan 08 2018 14:14
@pocahontas123 ‘’'
footer {
overflow: hidden;
height: 150px;
background: orange;
line-height: 150px;
text-align: center;
}
pocahontas123
@pocahontas123
Jan 08 2018 14:20
@ingundela Will take a look
Vidžius
@sursider
Jan 08 2018 14:32
any bootstrap 4.7 pro?
pocahontas123
@pocahontas123
Jan 08 2018 14:44
My shit doesn't work and don't make sens for me
Ken Haduch
@khaduch
Jan 08 2018 15:03
@sursider - do you mean bootstrap 3.7? Because I don't think that there is, yet, a 4.7? Please post a question and we'll try to help...
Ken Haduch
@khaduch
Jan 08 2018 15:14
V3 or V4, we can try to help
pocahontas123
@pocahontas123
Jan 08 2018 15:22
Can some one help me out with my css page layout ?
Skomorokhov
@Skomorokhov
Jan 08 2018 15:26
@pocahontas123
sure, at least I can try to help
pocahontas123
@pocahontas123
Jan 08 2018 15:26
@Skomorokhov thx, just give me 1s
CamperBot
@camperbot
Jan 08 2018 15:26
pocahontas123 sends brownie points to @skomorokhov :sparkles: :thumbsup: :sparkles:
api offline
pocahontas123
@pocahontas123
Jan 08 2018 15:28
@Skomorokhov OK
Here is my codePen:
https://codepen.io/pocahontas123/pen/GyyOZW
Here is what i want:
http://hpics.li/764c7db
i come back in 5mn max
re
pocahontas123
@pocahontas123
Jan 08 2018 15:36
Do you have any idea @Skomorokhov
pocahontas123
@pocahontas123
Jan 08 2018 15:48
@Skomorokhov Are you still here?
Vidžius
@sursider
Jan 08 2018 15:49
@khaduch Naw, it's 4.0, dunno why I wrote it. Is it possible to make div collapsed by default only on xs and sm? I know on earlier it was possible, but can't find a way on Bootstrap 4
Kaz Baig
@kbaig
Jan 08 2018 15:53
@pocahontas123 I would use a combination of grid and flexbox for this
pocahontas123
@pocahontas123
Jan 08 2018 16:02
ok...
texirv0203
@texirv0203
Jan 08 2018 16:12
hi,
  • I am new to angular2.
  • I am getting the below error, can you tell me how to fix it
    app/app.routing.ts(5,1): error TS1206: Decorators are not valid here.
  • providing my code below
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
Ken Haduch
@khaduch
Jan 08 2018 16:24
@sursider - okay, I cannot believe that they would omit this, but so many things have changed that it's possible that it is a totally different way or perhaps it was eliminated... I found this documentation page, but since it is "alpha" - perhaps there are differences. https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ -- look for "hidden" on the page and you'll see a class .hidden-sm-down which, according to the documentation of that page, will hide the objects that have that class when the size is sm or xs. I might go try it in a sandbox project that I have on codepen and see...
Vidžius
@sursider
Jan 08 2018 16:26
@khaduch yeah I know there visible/hidden. They use some different code in beta
Now it's let's say .d-none .d-md-block will make invisible for xs and sm but visible for md and bigger
d-none is like d-xs-none, just the smallest don't use "xs" in this case.
Ken Haduch
@khaduch
Jan 08 2018 16:28
@sursider - I just tried the hidden-sm-down and it looks like that worked, at least in my quick test?
Vidžius
@sursider
Jan 08 2018 16:28
d-block d-lg-none will make the item visible to screens up to lg
1rjun
@1rjun
Jan 08 2018 16:29
i am having trouble using javascript promise
Vidžius
@sursider
Jan 08 2018 16:29
maybe you used alpha version?
dinesh
@1532j0004kg
Jan 08 2018 16:29
hi guys anybody worked on firebase?
@khaduch hi are u?
Vidžius
@sursider
Jan 08 2018 16:29
I will have to make 2 same divs now, just one for md+ and other for xs/sm :D
Ken Haduch
@khaduch
Jan 08 2018 16:31
@1532j0004kg - I don't know anything about firebase?
dinesh
@1532j0004kg
Jan 08 2018 16:31
then what ur using for backends?
Ken Haduch
@khaduch
Jan 08 2018 16:31
@sursider - perhaps - let me check my version that I have... https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css Not sure what's the latest since I'm not actively using V4, but see if I update to something newer?
dinesh
@1532j0004kg
Jan 08 2018 16:31
in ur pro.
Ken Haduch
@khaduch
Jan 08 2018 16:32
@1532j0004kg - I haven't gotten to the backend projects yet.
Vidžius
@sursider
Jan 08 2018 16:32
@khaduch i will give you other link
dinesh
@1532j0004kg
Jan 08 2018 16:32
ok @khaduch
i hope they will make it on their next update :worried:
Ken Haduch
@khaduch
Jan 08 2018 16:33
@sursider - I just updated to https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css on CodePen - that seems to be the latest they are referencing and the .hidden-sm-down no longer works.
Vidžius
@sursider
Jan 08 2018 16:35
yeah, it's now the one I told earlier. I will have to make some extra lines then :D
Ken Haduch
@khaduch
Jan 08 2018 16:46
@sursider - okay, I found this documentation http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements through a stackoverflow post. So it looks like you just have to use more classes to do things. I'm sure that there is a good reason for that... :)
ehutchllew
@ehutchllew
Jan 08 2018 18:38
Is anyone here familiar with React Native?
texirv0203
@texirv0203
Jan 08 2018 18:58

hi,

  • I am trying to include the appdyanmics in my app.
  • so I used the below example
    https://github.com/derrekyoung/appd-sampleapp-angular2
  • when I include this line. I am getting the below error.
    Unhandled Promise rejection: error.json is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: error.json is not a function

  • can you tell me how to fix it.

  • providing my code below

import './rxjs-extensions';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppComponent }         from './app.component';

import {Base} from './components/base/base';
import {AdminUser} from './components/admin/user';
import {Admin} from './components/admin/admin';


import { routing }              from './app.routing';

import { AppRoutingModule }              from './app.routing';

import { sportsService }          from './services/sports.service';


import {
    Routes,
    RouterModule,
    Router,
    ActivatedRoute,

    CanActivateChild,
    CanDeactivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
} from "@angular/router";
import { titleService } from './components/title/titleService';


@NgModule({
  imports: [
    BrowserModule,

    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    MultiselectDropdownModule,
    AccordionModule
  ],
  declarations: [
    AppRoutingModule,
    AppComponent,
    Base
  ],
  providers: [
  sportsService,],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:15
hello anyone here?
Kaz Baig
@kbaig
Jan 08 2018 19:15
:wave:
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:16
@kbaig hi are you experienced with react?
glandon22
@glandon22
Jan 08 2018 19:16
hello
Kaz Baig
@kbaig
Jan 08 2018 19:16
@Radlerz1 You can def ask your question
@texirv0203 adding which line throws the error?
Mihai Ionuț Verniceanu
@ferdyonline
Jan 08 2018 19:18
Hello everyone. I am trying to develop a React application and fetch data from last.fm's API. How can I use this library for instance - https://github.com/feross/last-fm
Kaz Baig
@kbaig
Jan 08 2018 19:18
@ferdyonline what part are you struggling with exactly
Mihai Ionuț Verniceanu
@ferdyonline
Jan 08 2018 19:18
I've already installed it through npm, but I can't figure out how to use it. If someone could help me, that would be great.
glandon22
@glandon22
Jan 08 2018 19:19
did u register an app with last fm yet?
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:19

Alright well I've been stuck on this for awhile.

Okay so I have a register form component and I am trying to add error messages depending on what input field the user forgot to fill out etc.. So I have this working but for whatever reason when I try to clear the last error message setstate doesn't work. the last error message should clear after the user hits register

Mihai Ionuț Verniceanu
@ferdyonline
Jan 08 2018 19:19
glandon22, I have an API key, if that's what you're asking.
glandon22
@glandon22
Jan 08 2018 19:19
yes
ok
show us some code, might help
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:19
handleSubmit(e) {
    e.preventDefault();
    const error = this.state.error;
    const formValues = this.state.formValues;
    const validate = validateFormInputs(formValues);

    this.clearError();

    if (validate) {
        error[validate.field] = validate.msg;
        this.setState({ error });
    }
    else {
        this.sendData(formValues);
    }
}

sendData(data) {
    axios.post('/register/user', {
        data
    }).then(response => {
        this.clearForm();
        return response.statusText;
    }).catch(err => {
        return err;
    })
}

clearError() {
    this.setState({ error: { username: '', email: '', password: '', confirm_password: '', birthday: '' } });
}
this.clearError doesn't do anything
constructor(props) {
    super(props);

    this.state = {
        formValues: { username: '', email: '', password: '', confirm_password: '', birthday: '' },
        error: { username: '', email: '', password: '', confirm_password: '', birthday: '' }
    }
}
Mihai Ionuț Verniceanu
@ferdyonline
Jan 08 2018 19:21
I've installed React through create-react-app and I want to display info from last.fm
Kaz Baig
@kbaig
Jan 08 2018 19:21
@ferdyonline still not clear what you want help with. What does your code look like? What errors are you seeing?
Mihai Ionuț Verniceanu
@ferdyonline
Jan 08 2018 19:22
I don't see any errors @kbaig - I would like some help figuring out how to use that library, so I can display last.fm data in my React app. How do you use custom 3rd party scripts in React?
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:23

also this is the function im using to check input fields
const validate_register_form = (data) => {
if (!data.username) {
return { field: 'username', msg: 'Please choose a username' };
}
else if (!data.email) {
return { field: 'email', msg: 'Please fill in your email' }
}
else if (!data.password) {
return { field: 'password', msg: 'Please choose a password' }
}
else if (!data.confirm_password) {
return { field: 'confirm_password', msg: 'Please confirm your password' }
}
else if (!data.birthday) {
return { field: 'birthday', msg: 'Please fill out your birth date' }
}
else if (checkIfValidEmail(data.email) === false) {
return { field: 'email', msg: 'Does\'t look like a valid email' }
}
else if (data.password !== data.confirm_password){
return { field: 'confirm_password', msg: 'Passwords do not match' }
}
}

module.exports = validate_register_form;

texirv0203
@texirv0203
Jan 08 2018 19:25
@kbaig hey adding this line throws error --> AppRoutingModule,
@kbaig actually that is a class in my app.routing.ts file
export class AppRoutingModule {
  vpView: any;

  // Subscribe to the Router URL changes.
  constructor(public router:Router) {
      this.router.events.subscribe((event:Event) => {
              if (event instanceof NavigationEnd) {
                console.debug('NavigationEnd: '+event.url);

                this.vpView.markViewChangeEnd();
                this.vpView.markViewDOMLoaded();
                this.vpView.markXhrRequestsCompleted();
                this.vpView.markViewResourcesLoaded();
                this.vpView.end();
                ADRUM.report(this.vpView);

              } else if (event instanceof NavigationStart) {
                console.debug('NavigationStart: '+event.url);

                this.vpView = new ADRUM.events.VPageView();
                this.vpView.start();
                this.vpView.markViewChangeStart();
              }
          });
  }
}
Kaz Baig
@kbaig
Jan 08 2018 19:31
@Radlerz1 wait did you bind this to handleSubmit or no
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:31
yeah I did
here
render() {
    let formValues = this.state.formValues;
    let error = this.state.error;

    return (
        <div className='container'>    
    <h1>Register</h1>
    <form onSubmit={this.handleSubmit.bind(this)}>
    <div className='form-group'>
    <label htmlFor='username' className='col-md-4 col-form-label'>Username</label>
    <div className='col-md-4'>
    <input onChange={(e) => this.onChange(e)} type='text' className='form-control' name='username' placeholder='choose a username' value={formValues['username']}/>
    { error.username ? <p>{error.username}</p> : '' }
    </div>
    </div>

    <div className='form-group'>
    <label htmlFor='email' className='col-md-4 col-form-label'>Email</label>
    <div className='col-md-4'>
    <input onChange={(e) => this.onChange(e)} type='text' className='form-control' name='email' placeholder='fill in your email' value={formValues['email']}/>
    { error.email ? <p>{error.email}</p> : '' }
    </div>
    </div>
 </form>
)
}
little bit of my render method the rest of the form follows the same structure
Kaz Baig
@kbaig
Jan 08 2018 19:33

@Radlerz1 there's your issue. You need to pass functions into the event. You need to add the following to your constructor

this.onSubmit = this.onSubmit.bind(this);

and then replace your form tag with

<form onSubmit={this.handleSubmit}>
Hopefully that works
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:34
isn't that the exact same as put this.func.bind(this)?
Kaz Baig
@kbaig
Jan 08 2018 19:34
No, you're just calling bind there
You need to pass in the reference to your method, not perform an operation of some sort
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:36
how do I pass in the event object doing that?
bind(this, event)?
Kaz Baig
@kbaig
Jan 08 2018 19:36
no just make the 2 changes I suggested above
I believe this.handleSubmit is not firing at all as it currently stands
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:37
still works the same
and sorry I went this.onSubmit()
Kaz Baig
@kbaig
Jan 08 2018 19:37
do you have a repo
Brandon Blackwell
@Radlerz1
Jan 08 2018 19:38
the errors show or if It succeeds it goes to my server fine. I just can't delete the errors
and no

this.clearError doesn't do a thing I have even went
this.setState({ error: { username: '' } }, () => { console.log(this.state.error) })

and this.state.error stays the same

Kaz Baig
@kbaig
Jan 08 2018 19:40
Hmm not sure what the error could be without code to play with
@ferdyonline just initiate your last fm object when the relevant component mounts and pass the obtained responses around lower level components
santhoshbalaguru001
@santhoshbalaguru001
Jan 08 2018 20:03
Hi all, currently iam learning componentdidmount in react , in that function im getting one json file and stored in data, for example i need only email means by using map function , im getting all email detials suppose i need first 10 email id from json file means i used if condition to show detials first 10 mails my problem is that its not showing first 10 mailids and not fetching a data from json if i give condition can anyone resolve my problem..

import React, { Component } from 'react';
import $ from 'jquery';

class ComponentDidMount extends Component{
state = {
name :"santh",
age: 20,
data:[]
}

componentDidMount(){
$.get("https://jsonplaceholder.typicode.com/comments", (res) =>{
this.setState({data:res})
})
}
render(){
return(

<div>
  {this.state.data.map((e,i)=>
    {
    for(x=10;x>=i;){
      return
    }


{

    <li>{e.email}</li>
}

  }
  )}
</div>
  )

}
}

export default ComponentDidMount;

whether this condition is correct?
Stephen James
@sjames1958gm
Jan 08 2018 20:20
@santhoshbalaguru001 Why not just store only the first 10
this.setState({ data: res.slice(0, 10)});
@santhoshbalaguru001 Otherwise you could do this.
<div>
  {this.state.data.map((e,i)=>
    {
      if ( i >= 10) return "";
      return <li key={i}>{e.email}</li>
  }}
</div>
texirv0203
@texirv0203
Jan 08 2018 20:26
@kbaig hi...any idea about the error
Kaz Baig
@kbaig
Jan 08 2018 20:38
@texirv0203 no clue, not an angular person sorry
Anthony Albertorio
@tesla809
Jan 08 2018 23:34
Hey all
Can I use es6 on the code challenges?
Alex Cooper
@JSmurf
Jan 08 2018 23:35
I’m pretty sure you can.