These are chat archives for FreeCodeCamp/HelpJavaScript

29th
Aug 2018
Aditya
@ezioda004
Aug 29 2018 00:03
@JLuboff Ah thanks :D its quite old, I've been meaning to update it but procrastinating.
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:21
In what area of the web or some other field, JS is strongly recommended and powerful? (Apart from DOM abilities)
Brad
@bradtaniguchi
Aug 29 2018 00:22
@Morched23MJ backend for web-servers is probably the next best place for JS
Aditya
@ezioda004
Aug 29 2018 00:24
Yep, backend. Though JS is making its way through desktop, mobile apps.
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:24
Ehm. This question popped up, due to these ES6 features.. Impressing. I almost feel like I'm coding in Python. :D Things are getting better and better..
@ezioda004, could you give some good examples of desktop apps made with JS?
Brad
@bradtaniguchi
Aug 29 2018 00:25
@Morched23MJ gitter's desktop app :P
Aditya
@ezioda004
Aug 29 2018 00:25
Spotify, Visual Studio Code, Slack, Discord, Hyper, Atom to name few
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:26
Woah, really
Brad
@bradtaniguchi
Aug 29 2018 00:26
all electron apps
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:26
Are they all made through Electron?
Aditya
@ezioda004
Aug 29 2018 00:26
Yeah, they all are great (visually) but damn do they like taking up huge RAM
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:26
Ehm. :l
Aditya
@ezioda004
Aug 29 2018 00:27
Yeah all of them are made with Electron.js
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:27
So there will be no equivalent to Adobe products any time soon..
I was thinking of JS Image processing software.. :D
Aditya
@ezioda004
Aug 29 2018 00:28
Isnt Photoshop also made with JS? I think I heard that few months ago
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:28
I doubt that. Perhaps just a part of it? C++ could be mostly used there..
Aditya
@ezioda004
Aug 29 2018 00:29
That'd make more sense
Brad
@bradtaniguchi
Aug 29 2018 00:36
JS isn't very good for certain tasks tho, since it's not really designer for multi-processor situations, which are multi-threaded and CPU intensive
Morchid Chellali
@Morched23MJ
Aug 29 2018 00:37
I see
newmoon
@newmoon
Aug 29 2018 00:41
That's all on the horizon soon: https://github.com/tc39/ecmascript_sharedmem
Morchid Chellali
@Morched23MJ
Aug 29 2018 01:00
Shouldn't the ES6 challenges be placed at the end of the JavaScript Certificate, since some lessons include concepts that are not taught 'yet' to the camper? :O
Like OOP for instance
Jody LeCompte
@jodylecompte
Aug 29 2018 01:07
Get on that Rust mayne @bradtaniguchi
Brad
@bradtaniguchi
Aug 29 2018 01:08
@jodylecompte I'm to crappy for rust, I'll stick with learning Go (after not reading about go for a few months :P)
Jody LeCompte
@jodylecompte
Aug 29 2018 01:08
I really like Rust, I just don't really know what to do with it
Never done any system programming
Philip Durbin
@pdurbin
Aug 29 2018 01:15
You could make a web brower with Rust. That's what Mozilla is doing. :)
Jody LeCompte
@jodylecompte
Aug 29 2018 01:16
Mozilla has a little more manpower :laughing:
abraham anak agung
@padunk
Aug 29 2018 01:28
@bradtaniguchi hah, i also learning Go right now :smile: kind of confusing for me
Brad
@bradtaniguchi
Aug 29 2018 01:29
@padunk I haven't had the time to continue learning Go tho, been working on server-side JS/TS tho.
Pagnito
@Pagnito
Aug 29 2018 01:51
is anyone good with react transition groups?
Nate Mallison
@NJM8
Aug 29 2018 01:56
I'm good with Vue transition groups. 😉😉😉
abraham anak agung
@padunk
Aug 29 2018 02:02
@Pagnito just use it last month for my side project, still learning tho
Pagnito
@Pagnito
Aug 29 2018 02:03
i dunn if its me but its such a fuckin pain
abraham anak agung
@padunk
Aug 29 2018 02:03
yeah it is :laughing:
Pagnito
@Pagnito
Aug 29 2018 02:04
it kinda makes me dispise react for it, but i know once i learn itll be ok lol
abraham anak agung
@padunk
Aug 29 2018 02:04
what are you trying to use it for?
Pagnito
@Pagnito
Aug 29 2018 02:06
im tryin to animate my profile component
the thing is this was my first full stack app i started building and my structure isnt the best lol
and i have if conditionals in my app file
to render logged in or logged out ontent
Jody LeCompte
@jodylecompte
Aug 29 2018 02:08
What are you animating specifically?
It's possible you could just utilize CSS and not have to require the overhead transition groups
Pagnito
@Pagnito
Aug 29 2018 02:08
idealy i want to animate every component
abraham anak agung
@padunk
Aug 29 2018 02:08
can't you do it with just CSS ? or maybe other library?
Pagnito
@Pagnito
Aug 29 2018 02:08
nah
the thing is it cant on unmount
children is easy
but the parent component
the routes
im having a rly difficult time with
abraham anak agung
@padunk
Aug 29 2018 02:09
you want to animate when the route changing?
Pagnito
@Pagnito
Aug 29 2018 02:10
yea
i tried wrapping my routes in transitiongroup and csstransition
and switch
abraham anak agung
@padunk
Aug 29 2018 02:11
this is what i do when changing route and animate
<div className="app">
        <TransitionGroup className='app__transGroup'>
          <CSSTransition
            key={this.props.location.key}
            classNames='fade'
            timeout={{enter: 650, exit: 350}}
            appear={true}
            in={true}
            mountOnEnter={true}
            unmountOnExit={true}
          >
            <Switch location={this.props.location}>
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
Pagnito
@Pagnito
Aug 29 2018 02:11
but i couldnt wrap my app file in withrouter to get a location key
abraham anak agung
@padunk
Aug 29 2018 02:11
you need to read the react router docs for that
Pagnito
@Pagnito
Aug 29 2018 02:14
thnx
abraham anak agung
@padunk
Aug 29 2018 02:16
np, you remind me that i need to finish that side project tho. lol
Pagnito
@Pagnito
Aug 29 2018 02:16
lol
i dont get it tho, why doesnt that example even have a return statement
abraham anak agung
@padunk
Aug 29 2018 02:22
what return statement?
Pagnito
@Pagnito
Aug 29 2018 02:23
oh nvm the video example has it
like return <div></div>
inside render()
its not letting me wrap everything insde of a route UGHHHHHH LOL
abraham anak agung
@padunk
Aug 29 2018 02:31
well it's not possible not return something inside render. If it stateless component, you could use fat arrow for implicit return.
const RGB = () => (<div>...</div>)
Pagnito
@Pagnito
Aug 29 2018 02:35
i think i got it to work T.T
tears of joy
its kinda weird tho
its kinda jerky
loh wait
i think its timings are diffrent
Pagnito
@Pagnito
Aug 29 2018 02:42
weird
its working but the exit is instant when the backgrounds are the same
abraham anak agung
@padunk
Aug 29 2018 02:45
you can always play with the timing in css and CSS transition timeout prop
Pagnito
@Pagnito
Aug 29 2018 02:45
oh i think its because they actuall both animate the same time
the exit and the enter
not one after the other
ill have to redo my structure a bit
abraham anak agung
@padunk
Aug 29 2018 02:47
the only pain using react transition is define the css, they have like fade-enter fade-enter-active fade-enter-done etc...
Pagnito
@Pagnito
Aug 29 2018 02:50
yea forreal
right now my exits arent working for shit which is the only reason im using this shitl ol
i changed to scale animation
the opactiy exit worked
but ths scale isnt
thats wierd the exit works when i switch to a component with no content
but if i switch to a component with content then there is no exit animation
Pagnito
@Pagnito
Aug 29 2018 02:57
oh apperntly its working
but the the thing is that the new page gets pushed on top
so the the previous page animation is happening below...off screen
abraham anak agung
@padunk
Aug 29 2018 02:59
hahaha... yeah that's annoying. it took me half day to solve it.
Pagnito
@Pagnito
Aug 29 2018 03:00
how did u solve it?
abraham anak agung
@padunk
Aug 29 2018 03:01
well, i'm not good with css so try and error :smile:
i only use four class for it fade-enter fade-enter-active fade-enter-done and fade-exit-active
slowing down your time, so you can figure out how it exactly moving tho
Pagnito
@Pagnito
Aug 29 2018 03:03
this is what my classes look like now
.fade-enter {
  transform: scale(0);
}

.fade-enter.fade-enter-active {
  transform: scale(1);
  transition: all 1000ms ease-in;
}

.fade-exit {
  transform: scale(1);
}

.fade-exit.fade-exit-active {
  transform: scale(0);
  transition: all 1000ms ease-out;
}
what do u write for a=fade exit done
i mean fade enter done
abraham anak agung
@padunk
Aug 29 2018 03:12
fade-enter-done { animation-play-state: paused; } i put my animation in a keyframes.
so you can have much option with it, like delay, fill mode, etc
Pagnito
@Pagnito
Aug 29 2018 03:16
can u show me how ur classes look
@Pagnito sorry i gtg, good luck mate
Pagnito
@Pagnito
Aug 29 2018 03:27
thnx man
np
Maktub Zeng
@Leon-OS
Aug 29 2018 04:08
how use reg for Validate US Telephone Numbers
it's diffcult for new man
jusgoose
@gusd773
Aug 29 2018 04:27
I have a front end test for a company anybody know what I should expect?
*Front-end Web Dev + Core Skills - 2019 Test
JJ Megma
@megma_jj_twitter
Aug 29 2018 04:35
@gusd773 Probably ask you basic interview questions and some white boarding
Also probably going to ask you questions about different things like, what is a http request
or Whats the difference between functional programming and OOP
What is the dom
Whats the difference between let, const, an var
all questions I have got in interviews
jusgoose
@gusd773
Aug 29 2018 04:41
it's an actual link to a test powered by hackerrank
I tried doing the practice tests and was left speechless lol
but thank you @megma_jj_twitter I'm gonna make sure I know those questions
2199088044
@2199088044
Aug 29 2018 07:36

// 请在这里定义变量
var myGlobal = 10;

function fun1() {
// 请在这里把 5 赋值给 oopsGlobal
oopsGlobal = 5;
}

// 请只修改这条注释以上的代码
function fun2() {
var output = "";
if (typeof myGlobal != "undefined") {
output += "myGlobal: " + myGlobal;
}
if (typeof oopsGlobal != "undefined") {
output += " oopsGlobal: " + oopsGlobal;
}
console.log(output);
}

why oopsGlobal can be used in fun2()
abraham anak agung
@padunk
Aug 29 2018 07:38
@2199088044 because you declare it without var, let or const so it become global variable
2199088044
@2199088044
Aug 29 2018 07:41
oh,thank you @padunk
Tiago Correia
@tiagocorreiaalmeida
Aug 29 2018 09:04
has anyone experienced slow webpack reloads/rebuilds
something like 15 to 30 seconds
Yashwardhan Pauranik
@yashwp
Aug 29 2018 09:18
My code is throwing error when I want to delete item from index in this this.brief.pictures.splice(index, 1); .
Error is TypeError: Cannot delete property '0' of [object Array] at Array.splice. What wrong in the code?
  deleteImage(id: number) {
    this.apolloService.mutateWithRefetch(DeleteImageMutation, {attachment_id: id}, [this.refetchBrief])
      .subscribe((res: any) => {
          const index = this.brief.pictures.findIndex((i: any) => res.attachmentDestroy.id === i.id);
          if (index > -1) {
             this.brief.pictures.splice(index, 1);  //  TypeError: Cannot delete property '0' of [object Array]  at Array.splice
          }
        },
        (err: any) => {
          this.errorService.showErrorModal(err.networkError);
        });
  }
Kelechi Chinaka
@ke1echi
Aug 29 2018 09:45
what's this.brief.pictures @yashwp
謝育能(Harry Xie)
@a90100
Aug 29 2018 10:20
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence/
function titleCase(str) {
  // 请把你的代码写在这里
  var wordStr=str.split(" ");
  //for 為每個元素的第一個字母轉大寫
  for(var i=0;i<str.length;i++){
    var charStr=wordStr[i].split("");//將每個元素再拆一次,傳入一個arr
    charStr[0]=charStr[0].toUpperCase();
    wordStr[i]=charStr.join("");//將分解的字母合併成一個單字
  }
  str=wordStr.join(" ");
  return str;
  //每分解一次就給string不同名稱,怕搞混
}

titleCase("I'm a little tea pot");
Why I always get error "cannot read property 'split' of undefined"?
abraham anak agung
@padunk
Aug 29 2018 10:29
@a90100 change you for loops statement. var i = 0; i < wordStr.length because wordStr length is different compare to str length
Jefferson
@jeffersonnnn
Aug 29 2018 11:57
hi guys, i can't seem to get my code to pass testcases. The idea is to remove the duplicates in an array and then go ahead to return the length of the new array, and here is my ocde
var removeDuplicates = function(nums) {
      var backpage = [...new Set(nums)];
      return backpage.length;
};
Niraj Nandish
@Nirajn2311
Aug 29 2018 12:15
@jeffersonnnn try using a nested for loop and remove the duplicates
Stephen James
@sjames1958gm
Aug 29 2018 12:23
@jeffersonnnn Do you have example test case? It seems to work to me.
Nitin
@thenm
Aug 29 2018 12:41
[
    {
        createdby: "sanket@abc.com",
        status: "Allocated",
        count: 1
    },
    {
        createdby: "nikhil@abc.com",
        status: "Closed",
        count: 2
    },
    {
        createdby: "sanket@abc.com",
        status: "Closed",
        count": 2
    },
    {
        createdby: "nikhil@abc.com",
        status: "Spam",
        count: 1
    }
]
I have the array in above format and want to find the data according to createdby in the following way. How can I do that.
[
   {
      createdby: "nikhil@abc.com",
      Spam: 1,
      Closed: 2
    },
    {
      createdby: "sanket@abc.com",
      Allocated: 1,
      Closed: 2
    }
]
Stephen James
@sjames1958gm
Aug 29 2018 12:57
@thenm I would use reduce to build an object keyed on createdBy - then convert that to array after
   input.reduce((acc, cur) => {
       let cb = cur[createdBy];
       if (!acc[cb]) {
          acc[cb] = {};
       }

       switch (cur.status) {
       case "Allocated":
          acc[cb].Allocated = acc[cb].Allocated ? acc[cb].Allocated + cur.count : cur.count;
       break;
       // other cases
      }
  }, {});
Nitin
@thenm
Aug 29 2018 13:19

@sjames1958gm

arr1.reduce((acc,cur) => {
//  let cb = cur[createdby];
  console.log(cur[createdby]);
});

getting cur[createdby] is undefined

Anyways got cur.createdby. Trying on jsbin may be its jsbin
Aditya
@ezioda004
Aug 29 2018 13:21
@thenm Every iteration acc needs to be returned, if nothing is returned then due to implicit return undefined is assigned to acc
Nitin
@thenm
Aug 29 2018 13:36
@ezioda004 @sjames1958gm Not getting it. :(
Stephen James
@sjames1958gm
Aug 29 2018 13:37
cur["createdBy"]; or cur.createdBy;
@thenm After the case statement you would return the modified acc as @ezioda004 said
if you did that with
let collection = input.reduce(...); // reduce from above
// to convert to array
Object.keys(collection).map(key => ({ ...collection[key], createdby: key }))
Nitin
@thenm
Aug 29 2018 14:07
Thanks @sjames1958gm @ezioda004
tundeiness
@tundeiness
Aug 29 2018 15:04
hi guys can someone help with Destructuring assignment in ES6? the explanation in FCC is not intuitive enough...Thanks.
tundeiness
@tundeiness
Aug 29 2018 15:09
@RoniqueRicketts bro it's easy for me to get this link, but it's beyond posting the link please.. reading what is here looks okay but for what I have with me, it's not working. But thanks for the efforts anyways.
Jason Luboff
@JLuboff
Aug 29 2018 15:12
@tundeiness Which challenge is it, and what code do you have?
tundeiness
@tundeiness
Aug 29 2018 15:13
@JLuboff Use Destructuring Assignment to Assign Variables from Objects
@JLuboff kinda looks confusing the way FCC wants me to complete the challenge
Jason Luboff
@JLuboff
Aug 29 2018 15:15
@tundeiness Oh...that assignment is rather..eh hem... stupid
You're expected to know that you can use the length method on a string within your destructuring
tundeiness
@tundeiness
Aug 29 2018 15:15
@JLuboff sigh...I thought I was the only one...
Aditya
@ezioda004
Aug 29 2018 15:16
Nah, that challenge is probably the most asked question here :joy:
Jason Luboff
@JLuboff
Aug 29 2018 15:17
@tundeiness So lets start first with destructuring str to get length, how would that look?
tundeiness
@tundeiness
Aug 29 2018 15:17
@JLuboff so this is what I did
const length = {x : str.length}
Jason Luboff
@JLuboff
Aug 29 2018 15:18
You're not destructuring there, you are assigning an object to length
tundeiness
@tundeiness
Aug 29 2018 15:19
@JLuboff okay...but that is the way to get the length of the argument supplied in the function...
Jason Luboff
@JLuboff
Aug 29 2018 15:20
Think of str as an object with a property length
tundeiness
@tundeiness
Aug 29 2018 15:20
@JLuboff then I am to assign that answer to another variable called "len" using destructuring
Jason Luboff
@JLuboff
Aug 29 2018 15:20
It'll all be in a single line
Aditya
@ezioda004
Aug 29 2018 15:20
Destructuring happens on the LHS of assignment operator.
Jason Luboff
@JLuboff
Aug 29 2018 15:20
but lets start with getting the length of str
tundeiness
@tundeiness
Aug 29 2018 15:21
@ezioda004 okay....
@JLuboff yes...that was why I posted the first response
@JLuboff or it should be this:
var length = str.length
Jason Luboff
@JLuboff
Aug 29 2018 15:23

Let me give an example.

const myObj = {potato : 1, onion: 2};

Lets say I want to destructure to just get potato I would do

const { potato } = myObj;
So, now thinking about str as an object, with length as a key, how would that look?
tundeiness
@tundeiness
Aug 29 2018 15:26
@JLuboff just a moment please
@JLuboff const {len} = length;
@JLuboff wrong answer
Jason Luboff
@JLuboff
Aug 29 2018 15:27
Don't worry about using len at this point, we'll get to that
Think of str as
const str = {length : 25, someOtherProp: 3}
tundeiness
@tundeiness
Aug 29 2018 15:28
@JLuboff okay....
Jason Luboff
@JLuboff
Aug 29 2018 15:29
So based on the above, how would you destructure to get just length from str?
tundeiness
@tundeiness
Aug 29 2018 15:29
const{length} = str
Jason Luboff
@JLuboff
Aug 29 2018 15:29
Yes! (You're missing a space, but all good)
Ok great!
tundeiness
@tundeiness
Aug 29 2018 15:30
@JLuboff wide grin
Jason Luboff
@JLuboff
Aug 29 2018 15:31

So now, if you want to assign a different variable name we do : newName
So from my prior example

const { potato : myBasket } = myObj;

In the above, I'm destructuring myObj to get the potato property and giving it a new name of myBasket

so in your case, you need to destructure str to get length (which you have done) and need to give it a new name of len
tundeiness
@tundeiness
Aug 29 2018 15:32
@JLuboff okay
Morchid Chellali
@Morched23MJ
Aug 29 2018 15:35
@JLuboff, everyone gets confusion when it comes to destructuring :P
tundeiness
@tundeiness
Aug 29 2018 15:36
@JLuboff well I did this:
function getLength(str) {
  "use strict";

  const length = {x : str.length} 

  return const {x : len} = length 


}
Morchid Chellali
@Morched23MJ
Aug 29 2018 15:37
@korzo , has been a long time! I hope you doin' fine. :)
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:43
@tundeiness wouldn't len be undefined and why declare a variable in a return?
korzo
@korzo
Aug 29 2018 15:43

Anybody knows how to import JSON in Typescript?
So far I tried

declare module "*.json" {
    const value: any;
    export default value;
}

but then I can't use type hinting.

Then I tried resolveJsonModule:true in tsconfig.json, but because I don't use outDir I got error
TS5055: Cannot write file 'data.json' because it would overwrite input file.

Right now I use .js file to import/export json data, but I believe there has to be a better way

alpox
@alpox
Aug 29 2018 15:43
@tundeiness you cannot define variables (const) in a return expression
tundeiness
@tundeiness
Aug 29 2018 15:44
@megma_jj_twitter well I was doing it the way FCC posted it...I thought it was wrong as well , and I had other ideas but I just thought I should put it out there for all to see @alpox
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:45
@tundeiness where'd u see bcc do this?
bcc*
Jason Luboff
@JLuboff
Aug 29 2018 15:45
@tundeiness Look closer at my example above
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:45
wow FCC can't be typed in all lowercase here
weird
@tundeiness Where did You see this on FCC?
tundeiness
@tundeiness
Aug 29 2018 15:45
@megma_jj_twitter lmao....
alpox
@alpox
Aug 29 2018 15:46
@korzo you can use typehinting when you cast the data to an interface definition matching the json data
tundeiness
@tundeiness
Aug 29 2018 15:46
@megma_jj_twitter the destructuring challenge
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:46
yea
link?
tundeiness
@tundeiness
Aug 29 2018 15:46
@JLuboff still looking closer
korzo
@korzo
Aug 29 2018 15:46
@Morched23MJ Hi, I had a lot of work and hadn't time for FCC :(
*closely
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:48
@tundeiness They aren't showing you to return const len etc...
korzo
@korzo
Aug 29 2018 15:48
@alpox but as data are already defined as <any> in module declaration, you can't cast them to an interface later.
tundeiness
@tundeiness
Aug 29 2018 15:50
@megma_jj_twitter but it was this >return len right?
alpox
@alpox
Aug 29 2018 15:50
@korzo well you can use an interface there instead of any
Jason Luboff
@JLuboff
Aug 29 2018 15:51

@tundeiness Remember this: const { length } = strThis is very close to the correct answer, you just need to give it a new name of len like I did for potato below

const { potato : myBasket } = myObj;

In the above, I'm destructuring myObj to get the potato property and giving it a new name of myBasket

JJ Megma
@megma_jj_twitter
Aug 29 2018 15:51
restructuring is very hard to explain with out giving the answer
descructuring
I can't type today
I give up
tundeiness
@tundeiness
Aug 29 2018 15:51
@megma_jj_twitter loooool...sorry about that
JJ Megma
@megma_jj_twitter
Aug 29 2018 15:52
@tundeiness check out what @JLuboff said
^^^
alpox
@alpox
Aug 29 2018 15:53
@korzo you can probably use the interface instead of any and instead of the wildcard use the effrctive name of the json file such that you assign a type declaration directly to your json data
tundeiness
@tundeiness
Aug 29 2018 15:53
@megma_jj_twitter of course he's been lecturing me and I have been learning so far
alpox
@alpox
Aug 29 2018 15:53
@JLuboff how is your calendar going? :)
Christopher McCormack
@cmccormack
Aug 29 2018 15:54
That guy @JLuboff is one great guy
tundeiness
@tundeiness
Aug 29 2018 15:55
@JLuboff maybe I am a bit rigid and not exploring the outside the box option though. What i will normally do is to get the length of the string passed into the function and then assign it as an object in const length and so on till it get's to const len
@cmccormack I agree!!!
korzo
@korzo
Aug 29 2018 15:55
@alpox problem is I have several json files with different signatures and you can't use relative path in ambient modules.
alpox
@alpox
Aug 29 2018 15:57
@korzo that is indeed more problematic. In this case I would rather use js files :D
Otherwise you have no place to put type definitions
@korzo the other option is to go one level deeper in the json and always get out that one property maybe named value which you can then cast after importing :D thats not so nice tho
This is not an option?
korzo
@korzo
Aug 29 2018 16:04
@alpox yeah, that's what I do right now, use js file as proxy to import json. But I can't believe something so trivial is impossible in Typescript.
I could place json data in string, but as I update them and generate interfaces daily, I need them in separate files.
I could also inline type hinting, but it's annoying to always write (<Interface>json).q.keyword = 'foo'
Not an option. I got error TS5055: Cannot write file 'data.json' because it would overwrite input file because I don't use outDir compiler option
tundeiness
@tundeiness
Aug 29 2018 16:07
@JLuboff still stuck...
your example is fine and I understand it but FCC code is doing my head in..
Christopher McCormack
@cmccormack
Aug 29 2018 16:10
@tundeiness what do you have now?
tundeiness
@tundeiness
Aug 29 2018 16:11
@cmccormack nothing is working the way I figured it out
Christopher McCormack
@cmccormack
Aug 29 2018 16:12
@tundeiness can you share any code you have questions on?
tundeiness
@tundeiness
Aug 29 2018 16:12
@cmccormack my idea is to first get the length of the string and then do this:
const length = {x : str.length}
@cmccormack but the last part which is the destructuring is the issue
Christopher McCormack
@cmccormack
Aug 29 2018 16:13
that isn't destructring though
that's just assigning an object to length
tundeiness
@tundeiness
Aug 29 2018 16:13
@cmccormack no it is not
Christopher McCormack
@cmccormack
Aug 29 2018 16:13
an object that looks like { x: Number}
if I remmeber the exercise correctly you don't have to setup anything, everything can be done in a single line
tundeiness
@tundeiness
Aug 29 2018 16:14
@cmccormack so you mean I should have done this:
var length = str.length
@cmccormack that is not coming to my head right now...or..
Christopher McCormack
@cmccormack
Aug 29 2018 16:15
remember -destructuring just lets you break an object into smaller pieces. str is an object, with a property length.
pretend str looked like { text: 'blah', length: 4 }
if you wanted the text from that you could do const { text } = str
because str has str.text and str.length
and if you want a custom variable name instead, you can use the : notation: const { text: myCustomText } = str
tundeiness
@tundeiness
Aug 29 2018 16:18
@cmccormack the string supplied here is this : "FreeCodeCamp"...and my guess is I should get the length of that string?
Christopher McCormack
@cmccormack
Aug 29 2018 16:18
Here is a real example from my node repl:
> const str = { text: 'apples', length: 'apples'.length }
> str
{ text: 'apples', length: 6 }
> const { text: myText } = str
> myText
'apples'
@tundeiness str is technically an object with properties, like length
that's why you can do str.length to get the value
Jason Luboff
@JLuboff
Aug 29 2018 16:20
@alpox I was lying in bed last night..I finally realized what was wrong with my query. Still need to write up the proper one. And then I'll be able to finish testing to make sure none of that wierdness is occuring :)
@cmccormack Morning :wave:
Christopher McCormack
@cmccormack
Aug 29 2018 16:20
@tundeiness to answer your question, yes you are getting the length of that string or any other string passed to the function
@JLuboff heya
Jason Luboff
@JLuboff
Aug 29 2018 16:20
@tundeiness Got pulled away, but looks like we have some other great minds to fill in :)
Christopher McCormack
@cmccormack
Aug 29 2018 16:21
you making fun of the size of my head? It's like high school all over again...
tundeiness
@tundeiness
Aug 29 2018 16:21
@cmccormack @JLuboff that is why I was approach it from that POV.
*approaching
Jason Luboff
@JLuboff
Aug 29 2018 16:21
@cmccormack At least you don't have people going "Hey Lube...Off!!!" still...to this day...
Christopher McCormack
@cmccormack
Aug 29 2018 16:22
@tundeiness I don't really understnd why you are trying to do it differently. The goal is to use destructuring, not other ways
there are other ways sure
tundeiness
@tundeiness
Aug 29 2018 16:23
@cmccormack i'm not trying to do it differently...whatever code setup FCC had is confusing me
Christopher McCormack
@cmccormack
Aug 29 2018 16:23
@JLuboff oh man I didn't understand what you meant at first and that that was really weird haha
Jason Luboff
@JLuboff
Aug 29 2018 16:23
haha
Christopher McCormack
@cmccormack
Aug 29 2018 16:23
@tundeiness not sure why you say that, it's a fairly straight forward example
the only part that may be confusing is that String literal can be treated like an object
tundeiness
@tundeiness
Aug 29 2018 16:24
@cmccormack
now imagine this is what I get to start with
function getLength(str) {
  "use strict";

  // change code below this line
  const length = 0; // change this
  // change code above this line

  return len; // you must assign length to len in line

}
Christopher McCormack
@cmccormack
Aug 29 2018 16:24
hint: you only need to change that single line to solve this one
tundeiness
@tundeiness
Aug 29 2018 16:25
@cmccormack it's actually simple but there are code line i'd like to remove from the above code
Christopher McCormack
@cmccormack
Aug 29 2018 16:25
like what?
tundeiness
@tundeiness
Aug 29 2018 16:26
@cmccormack "return len"
Christopher McCormack
@cmccormack
Aug 29 2018 16:26
return len is part of the exercise
they want you to destructure the length of the string into a variable named len
Use destructuring to obtain the length of the input string str, and assign the length to len in line.
tundeiness
@tundeiness
Aug 29 2018 16:27
@cmccormack that's fine. That is the way I understood it to be..
@cmccormack maybe I need a break...simple issues like this tend to look like it's one big deal but it isn't.
Christopher McCormack
@cmccormack
Aug 29 2018 16:29
Have you solved the problem yet?
passed the test?
newmoon
@newmoon
Aug 29 2018 16:32

@tundeiness It is confusing. The key to that problem is this example:

const voxel = {x: 3.6, y: 7.4, z: 6.54 };
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

They are reassigning the x property to the variable a. You will need to reassign the length property to the variable len
Edit: added voxel values for clarity

tundeiness
@tundeiness
Aug 29 2018 16:33
@cmccormack no...sigh
@newmoon i did so previously but it was not passing
Christopher McCormack
@cmccormack
Aug 29 2018 16:34
@tundeiness share what you got
maybe it's something little
newmoon
@newmoon
Aug 29 2018 16:35
the string "apples" technically looks something like:
const str = { 0: "a", 1: "p", 2: "p", 3: "l", 4: "e", 5: "s", length: 6 };
tundeiness
@tundeiness
Aug 29 2018 16:35
@cmccormack seriously, i am still thinking of how to go about it. I will post it once I get something.
Christopher McCormack
@cmccormack
Aug 29 2018 16:36
you can basically copy the example, paste it over the line that it says to change, and replace variable names as needed
that's a start at least
tundeiness
@tundeiness
Aug 29 2018 16:37
@newmoon const length( str.length ) no?
Christopher McCormack
@cmccormack
Aug 29 2018 16:37
@newmoon technically it doesn't because I didn't destructure a string, I destructured an object I put a text property in :)
tundeiness
@tundeiness
Aug 29 2018 16:37
@cmccormack okay...
Christopher McCormack
@cmccormack
Aug 29 2018 16:38
@tundeiness destructuring uses the curly brace
check the examples above
tundeiness
@tundeiness
Aug 29 2018 16:38
@cmccormack yeah...sorry about that
newmoon
@newmoon
Aug 29 2018 16:39
I was trying to show what the String object would look like for a string like "apples". Similar to what we would see with Object.entries(str)
tundeiness
@tundeiness
Aug 29 2018 16:39
@newmoon const length = { str.length }...but this is wrong as well
newmoon
@newmoon
Aug 29 2018 16:39
@tundeiness Look at this example here and see how they assigned a to the value 3.6:
const voxel = {x: 3.6, y: 7.4, z: 6.54 };
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54
Jason Luboff
@JLuboff
Aug 29 2018 16:40
@tundeiness remember that const { length } = str; this is extremely close
newmoon
@newmoon
Aug 29 2018 16:40
now we can access the value 3.6 with voxel.x or a. You want to access the value for the length of the string with len
tundeiness
@tundeiness
Aug 29 2018 16:40
@newmoon yes I saw it...I even ran it on my IDE..the result i'm getting is confusing as well
newmoon
@newmoon
Aug 29 2018 16:41
what if we wanted len to be equal to 3.6? How would we change that code above?
tundeiness
@tundeiness
Aug 29 2018 16:42
@newmoon { x : len } = voxel ?
newmoon
@newmoon
Aug 29 2018 16:42
Yes, exactly.
const voxel = {x: 3.6, y: 7.4, z: 6.54 };
const { x : len } = voxel
console.log(len) // 3.6
tundeiness
@tundeiness
Aug 29 2018 16:43
@newmoon I have done this previously..
newmoon
@newmoon
Aug 29 2018 16:43
now imagine the string looking like this - what do we use for the ? mark?
const str = { 0: "a", 1: "p", 2: "p", 3: "l", 4: "e", 5: "s", length: 6 };
const { ???? : len } = str
console.log(len)
tundeiness
@tundeiness
Aug 29 2018 16:44
@newmoon my idea:
const length = { str: str.length}
Christopher McCormack
@cmccormack
Aug 29 2018 16:44
but that isn't destructuring
newmoon
@newmoon
Aug 29 2018 16:44
It would be similar to this: const { x : len } = voxel
Christopher McCormack
@cmccormack
Aug 29 2018 16:44
this is where we started :point_up: August 29, 2018 9:12 AM
tundeiness
@tundeiness
Aug 29 2018 16:44
@cmccormack sigh
@newmoon const {str : str.length} = length ?
newmoon
@newmoon
Aug 29 2018 16:45
You just need to replace the question marks: const { ???? : len } = str
tundeiness
@tundeiness
Aug 29 2018 16:45
@newmoon length?
newmoon
@newmoon
Aug 29 2018 16:46
Just like how we did it here: const { x : len } = voxel
tundeiness
@tundeiness
Aug 29 2018 16:47
const { length : len} = length
Jason Luboff
@JLuboff
Aug 29 2018 16:47
You want length of str not length of length
tundeiness
@tundeiness
Aug 29 2018 16:48
@JLuboff const {str.length : len} = length
Jason Luboff
@JLuboff
Aug 29 2018 16:49
No, the object goes on the right hand side of the assignment
This part: const { length : len} is correct
tundeiness
@tundeiness
Aug 29 2018 16:50
@JLuboff const { length : len} = len ??
Jason Luboff
@JLuboff
Aug 29 2018 16:51
You want length of str not length of length or len
neither length nor len should be on the right hand side
tundeiness
@tundeiness
Aug 29 2018 16:52
@JLuboff str??
Jason Luboff
@JLuboff
Aug 29 2018 16:52
Yup
tundeiness
@tundeiness
Aug 29 2018 16:52
@JLuboff it's confusing why str should be there
Jason Luboff
@JLuboff
Aug 29 2018 16:53
You have to think of str as an object
which has a property length that you want to get
Then assign that to a variable name of len
tundeiness
@tundeiness
Aug 29 2018 16:54
@JLuboff if you take a look at the code set up by FCC you have "const length" declared unless you want me to ignore that line..
Jason Luboff
@JLuboff
Aug 29 2018 16:54
You need to change that line
tundeiness
@tundeiness
Aug 29 2018 16:56
@JLuboff that was the issue for me ...I told @cmccormack that there is something I need to remove from that setup..
Christopher McCormack
@cmccormack
Aug 29 2018 16:57
@tundeiness :point_up: August 29, 2018 9:24 AM
tundeiness
@tundeiness
Aug 29 2018 16:59

@cmccormack yeah...I can't just figure out why I should have something like this:

const { length : len} = str

here i am trying to get the length of str via str.length. For it to come to the RHS is a bit out of my head

Christopher McCormack
@cmccormack
Aug 29 2018 17:00
destructuring is extracting properties from an object into a variable
so str is the object, length is the property, that line extracts length from str then assigns it to len
const is used because you're declaring a variable within the destructuring assignment
const { length : len} = str is similar to const len = str.length, but destructuring lets you do many at a time, so maybe this isn't the best example, an example with multiple properties may be better
To be fair though the example on that exercise itself is better and shows multiple variable declaration
tundeiness
@tundeiness
Aug 29 2018 17:04
@cmccormack this task is not intuitive at all.. but thanks guys @JLuboff @newmoon
newmoon
@newmoon
Aug 29 2018 17:05
I agree, destructuring is really confusing at first. At least it was for me. Keep playing around with it, and it will eventually "click"
tundeiness
@tundeiness
Aug 29 2018 17:05

@cmccormack see the instruction:

Use destructuring to obtain the length of the input string str, and assign the length to len in line.

Brad
@bradtaniguchi
Aug 29 2018 17:06
I think I went come yesterday and people were talking about that same challenge...
Christopher McCormack
@cmccormack
Aug 29 2018 17:06
yup
that's what you did and thats what the example shows you how to do
tundeiness
@tundeiness
Aug 29 2018 17:06
@cmccormack no mention of "str" being an object...
Christopher McCormack
@cmccormack
Aug 29 2018 17:06
@tundeiness yeah that's why I stressed it several times above
but it could be better explained, sure
Jason Luboff
@JLuboff
Aug 29 2018 17:07
@bradtaniguchi Yes, that was yesterday afternoon
tundeiness
@tundeiness
Aug 29 2018 17:07
@cmccormack i think that's where I missed it
Christopher McCormack
@cmccormack
Aug 29 2018 17:07
no worries, hopefully all the research will help solidify it for the future
destructuring is awesome when doing certiain tasks
newmoon
@newmoon
Aug 29 2018 17:07
I think pretty much every variable in JavaScript is considered an object
Brad
@bradtaniguchi
Aug 29 2018 17:07
dejavu
tundeiness
@tundeiness
Aug 29 2018 17:08
@cmccormack I wasn't thinking of it being an object...though you stressed it but the instructions from FCC was stuck on my head that it was a string
@newmoon that's a new one for me...
Aditya
@ezioda004
Aug 29 2018 17:10
Primitives are not objects, however JS adds object wrapper around them during runtime.
let str = "hello world";
str instanceof String //false
str.toUpperCase(); //works like an object
tundeiness
@tundeiness
Aug 29 2018 17:13
@ezioda004 okay
Brad
@bradtaniguchi
Aug 29 2018 17:40
anyone here a docker pro?
or hell even a docker hobbiest XD
Chris
@crokita
Aug 29 2018 17:41
ye
Brad
@bradtaniguchi
Aug 29 2018 17:42
@crokita you have any advice on developing/running tests in docker? I've been reading and struggling with doing such since almost all tutorials show you the same usual setup (oh you can run your app in a container yay, the end)
Chris
@crokita
Aug 29 2018 17:47
ah. I haven't done testing in Docker myself. I'm guessing you mean running tests for an application that is running in a docker container? Is it just a single container or are there multiple ones?
newmoon
@newmoon
Aug 29 2018 17:55
@bradtaniguchi Maybe ask the Docker community? https://gitter.im/docker/docker
Or, maybe a community for the test code you're running (Mocha, has a big one here on gitter)
Brad
@bradtaniguchi
Aug 29 2018 18:10
@newmoon Yea I was thinking about it, the room is kinda slow tho.
@crokita Well I wanted to run end to end tests in a docker setting, so each "run" is clean, since its a totally new environment
Philip Durbin
@pdurbin
Aug 29 2018 18:16
Brad
@bradtaniguchi
Aug 29 2018 18:16
@pdurbin thanks, the repo seems like over the head for me tho, and is java focused, where I'm using node right now
Philip Durbin
@pdurbin
Aug 29 2018 18:18
Ok. That's the repo for my day job so it came to mind. No worries.
Brad
@bradtaniguchi
Aug 29 2018 18:22
@pdurbin is it normal to have a lot of bash scripts around todo aux stuff for Docker? I'd rather not dig deep with shell scripts if possible
Philip Durbin
@pdurbin
Aug 29 2018 18:22
I don't know. We just hacked together something that worked.
Chris
@crokita
Aug 29 2018 18:26
@bradtaniguchi sorry, had a meeting. you mentioned end-to-end tests. does this mean you have multiple programs that need to run to ensure the tests are passing?
just wondering whether you're gonna put all the programs in one container or make a container for each separate process
Jason Luboff
@JLuboff
Aug 29 2018 18:42
Well...this is frustrating...mongo query works in the shell but not in my app.. grr
Ronique Ricketts
@RoniqueRicketts
Aug 29 2018 19:05
So what’s the error
Brad
@bradtaniguchi
Aug 29 2018 19:30
@crokita Right now its just 1 "real" program that would run in the container, but id use docker to have a clean mongodb instance for each run. I could load up the front-end, but that seems beyond the scope of the current goals, so for now were just testing "half" the stack and calling it e2e :P
Chris
@crokita
Aug 29 2018 19:35
@bradtaniguchi Is the issue automating the process of testing?
Brad
@bradtaniguchi
Aug 29 2018 19:36
@crokita My main issues were setting up docker and docker-compose to test the code faster, right now I litterally copy the code into a docker container (no npm install, or other stuff), just so it can connect to the mongodb instance, with some env variables set to connect. But I feel like its overkill to even use docker for the code itself, if docker doesn't abstract much away
I'm not worried about deploying in docker right now either, (all those tuts goes over that 5 times over)
Chris
@crokita
Aug 29 2018 19:39
ah, yeah it does seem like a bit of work. so if you're just worrying about having a fresh database on every test then you only need to "dockerize" your database and then run your app normally, right? @bradtaniguchi
Brad
@bradtaniguchi
Aug 29 2018 19:40
@crokita yea, that's what I'm thinking, there shouldn't be any issues with doing such right?
Chris
@crokita
Aug 29 2018 19:42
that sounds like the best way to do it at the moment, yeah, as long as your app runs the same way every time it starts up
alpox
@alpox
Aug 29 2018 19:50
@bradtaniguchi im not sure if mongodb supports transactions but in general you can run all tests in a transaction context and roll them back instead of commit them. Like that you never change the database really
Ronique Ricketts
@RoniqueRicketts
Aug 29 2018 20:03
Anyone knows where to find the app secret on facebooks login api?
Brad
@bradtaniguchi
Aug 29 2018 20:07
@pdurbin I've heard of that, but I think that would mean changing the code itself to use transactions
Philip Durbin
@pdurbin
Aug 29 2018 20:08
Sorry, heard of what?
Brad
@bradtaniguchi
Aug 29 2018 20:37
@pdurbin sorry I ment to tag @alpox
Philip Durbin
@pdurbin
Aug 29 2018 20:38
no worries
Jason Luboff
@JLuboff
Aug 29 2018 20:39
Anybody know of a way to see the exact query thats sent to MongoDb? I can't for the life of me understand why my query works fine in the CLI but isn't working in my app
Nevermind...think I found something
Except that doesn't work for windows... errr
Jason Luboff
@JLuboff
Aug 29 2018 20:48
Holy hell am I stupid. damn casing got me
Brad
@bradtaniguchi
Aug 29 2018 20:53
hehehe
Jason Luboff
@JLuboff
Aug 29 2018 20:53
Dude...that was driving me insane
Brad
@bradtaniguchi
Aug 29 2018 20:54
I assume it wasn't a copy pasta job then?
Jason Luboff
@JLuboff
Aug 29 2018 20:54
I wrote the query myself if thats what you're asking?
But... I kept copying into the CLI to test...and it worked. Very confusing..
Brad
@bradtaniguchi
Aug 29 2018 20:55
idk, when it comes to issues like that I just appreciate it wasn't some deep problem, like platform issues or something
Tiago Correia
@tiagocorreiaalmeida
Aug 29 2018 20:56
anyone around who got mdbootstrap into webpack working?
Pagnito
@Pagnito
Aug 29 2018 21:05
how the hell do i have a react favicon on all my projects
even when im not using react
i think it happend after i installed create-react-app globally
but i still dont understand why its doing that if thats whats doing it
Pagnito
@Pagnito
Aug 29 2018 21:12
ooh its the cache from port 3000
Brad
@bradtaniguchi
Aug 29 2018 21:14
always turn off the cache.... its evil
Jason Luboff
@JLuboff
Aug 29 2018 21:15
Guh... my query still doesn't work all the way...but.. fuck it.. its close enough lol
Pagnito
@Pagnito
Aug 29 2018 21:17
how do i turn it off? @bradtaniguchi im guessing in webpack config?
Brad
@bradtaniguchi
Aug 29 2018 21:18
@Pagnito if your browser is caching, then go into your dev-tools settings and turn off caching when dev-tools are open
Pagnito
@Pagnito
Aug 29 2018 21:24
ah
Pagnito
@Pagnito
Aug 29 2018 21:31
hey im tryin to learn how to serve javascript files in node without express
anyone know how to do that
i did the html but im haivng a hard time finding code for javscript files
Javier Carrion
@JavaVista
Aug 29 2018 21:31
HI I need a little help on how create a counter for an event handler
anyone will to see my git hub?
Brad
@bradtaniguchi
Aug 29 2018 21:36
@Pagnito how are you serving the html files right now?
And how are you planning on serving them when you deploy?
Pagnito
@Pagnito
Aug 29 2018 21:36
let app = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/html" });
  var myHTML = fs.createReadStream(__dirname + "/static/d3.html", "utf8");
  myHTML.pipe(res);
});
im not gonna deploy
this is just for d3 exercises
but i thought id also learn a bit more about node in the process
i know i could jus install express and move on but i rly want to know node in and out
Brad
@bradtaniguchi
Aug 29 2018 21:37
if your just messing around locally I'd use the npm package live-server so you get a live-reload server going super fast
Aditya
@ezioda004
Aug 29 2018 21:52
@JavaVista The first 3 backticks needs to be in new line
Javier Carrion
@JavaVista
Aug 29 2018 21:53
thanks
first time here
Aditya
@ezioda004
Aug 29 2018 21:53
No problem
Javier Carrion
@JavaVista
Aug 29 2018 21:54

const kitties = [
  {
    name: 'Reveal',
    image: 'assets/img/animal-3118722_640.jpg',
    counter: 0,
    id: 1
  },
  {
    name: 'Comfy',
    image: 'assets/img/cat-197175_640.jpg',
    counter: 0,
    id: 2
  }
];
finally
Aditya
@ezioda004
Aug 29 2018 21:54
:tada:
Javier Carrion
@JavaVista
Aug 29 2018 21:54
lol
anyways I got that array
Aditya
@ezioda004
Aug 29 2018 21:55
What about it?
Jason Luboff
@JLuboff
Aug 29 2018 21:56
Yup, thats an array alright
Brad
@bradtaniguchi
Aug 29 2018 21:56
hmm idk, seems like an object to me :trollface:
Javier Carrion
@JavaVista
Aug 29 2018 21:56
I want to be able to use my event handler to increase the count of each cat I am clicking

// selected kitty
let index = 0;

// select page elements
let kittyCount = document.querySelectorAll('.count');
let kittyName = document.querySelectorAll('h2');
let element = document.querySelector('.content');

// Setup click handler
function handler() {
  addKitties();
  document
    .querySelectorAll('.kitty-image')
    .forEach(kittyImage =>
      kittyImage.addEventListener('click', incrementCat, false)
    );
}

// iterate thru the array
function addKitties() {
  let adding = '';
  kitties.forEach(cat => {
    adding += `<h2>${cat.name}</h2>
        <div class="kitty-name"></div>
        <div id=${cat.id} class="count">CUTIE COUNT: ${cat.counter}</div>
        <img id=${cat.id} class="kitty-image" src=${
      cat.image
    } alt="Here Kitty Kitty">`;
  });
  element.innerHTML = adding;
}

// each cat increment function
function incrementCat(e) {
  if (e.target === e.currentTarget) {
    let clicked = e.target.id;
    let count1 = kitties.counter++;
    kittyCount.innerHTML = `CUTIE COUNT: ${count1}`;
    console.log(clicked, kittyCount);
  }
  e.stopPropagation();
}

window.onload = () => {
  handler();
};
how do I create the proper counter for each individual cat
Brad
@bradtaniguchi
Aug 29 2018 21:57
definantly a use-case where having a code-pen would help debug the issue
Javier Carrion
@JavaVista
Aug 29 2018 21:58
you right I got a repo in github for now
Brad
@bradtaniguchi
Aug 29 2018 22:04
can you throw it into a codepen? idk if anyone wants to out of their way to setup a dev environment to debug your issue
Aditya
@ezioda004
Aug 29 2018 22:07
I'm trying to open my c9 account but its taking too much time to wake up from "hibernation", codepen would be more convenient to debug.
Javier Carrion
@JavaVista
Aug 29 2018 22:11
You guys you are right I will do it later and get back with you guys.
Aditya
@ezioda004
Aug 29 2018 22:31

@JavaVista I updated the increment function a bit to make it work

function incrementCat(e) {
  if (e.target === e.currentTarget) {
    let clicked = e.target.id;
    for (let obj of kitties){
      if (obj.id == clicked){
         let count1 = obj.counter++;
        e.target.previousSibling.previousSibling.innerHTML = `CUTIE COUNT: ${count1}`;
      }
    }
  }
  e.stopPropagation();
}

Basically first matching the correct object to the clicked image and then updating the count of the clicked node.

Pagnito
@Pagnito
Aug 29 2018 23:22
I cant use import or require statements on the front end without babel?
Brad
@bradtaniguchi
Aug 29 2018 23:29
@Pagnito nope
Pagnito
@Pagnito
Aug 29 2018 23:30
ugh what a pain
i can use babel without webpack tho right thru npm scripts?
i kinda want to use module d3 over the cdn link but i dont wanna start getting webpack and all this config shit going lol
just to practice d3
Aditya
@ezioda004
Aug 29 2018 23:33
@Pagnito import is usable in JS as long as in the script tag you have type = "module"
Pagnito
@Pagnito
Aug 29 2018 23:33
yea i did that but it still isnt working
import * as d3 from "../node_modules/d3/index.js";
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Brad
@bradtaniguchi
Aug 29 2018 23:35
why does that import path look kinda supicious
Pagnito
@Pagnito
Aug 29 2018 23:35
<script type="module" type="text/javascript" src="/d3Project.js"></script>
cuz before i did that u asked me for the path in the console
Failed to resolve module specifier "d3". Relative references must start with either "/", "./", or "../".
Jason Luboff
@JLuboff
Aug 29 2018 23:37
@bradtaniguchi Probably becuase its hitting the backend path?
Aditya
@ezioda004
Aug 29 2018 23:37
Oh right...
@Pagnito Need a server running to use it
Pagnito
@Pagnito
Aug 29 2018 23:37
i do have a server
Brad
@bradtaniguchi
Aug 29 2018 23:37
what folder are you serving? when compared to the node_modules folder?
Pagnito
@Pagnito
Aug 29 2018 23:38
Screen Shot 2018-08-29 at 7.38.12 PM.png
Brad
@bradtaniguchi
Aug 29 2018 23:42
can you go to localhost:8080/package.json?
in your browser that is
@Pagnito
Pagnito
@Pagnito
Aug 29 2018 23:43
yea
it opens up my page
Brad
@bradtaniguchi
Aug 29 2018 23:43
if you go to package.json it opens the html file?
Pagnito
@Pagnito
Aug 29 2018 23:43
yea
Brad
@bradtaniguchi
Aug 29 2018 23:44
you must be serving your static folder, but your trying to get something outside of it (node_modules), which won't work since its no available
you will need to serve your root folder, or move what you want out of node_modules into your static folder
id suggest to move it out of node_modules, so less "security-risk" issues, and less to serve since your not serving the entire huge node_modules folder
Pagnito
@Pagnito
Aug 29 2018 23:45
app.use(express.static(path.resolve(__dirname)));

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "d3.html"));
});
app.use(express.static(path.resolve(__dirname, "static")));

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "static", "d3.html"));
});
so the first one?
Brad
@bradtaniguchi
Aug 29 2018 23:45
again, you'll be serving the entire node_modules, your server might cray
cry*
Pagnito
@Pagnito
Aug 29 2018 23:46
ah
Brad
@bradtaniguchi
Aug 29 2018 23:46
id really look into live-server, it would auto-reload on file change
Pagnito
@Pagnito
Aug 29 2018 23:46
but arent i jumping back a folder for the specifically
import * as d3 from "../node_modules/d3/index.js";
korzo
@korzo
Aug 29 2018 23:47
@Pagnito You can't jump back from the root folder
Pagnito
@Pagnito
Aug 29 2018 23:47
no thats from the static folder
korzo
@korzo
Aug 29 2018 23:50
app.use(express.static(path.resolve(__dirname, "static")));
static is root folder for web server
Pagnito
@Pagnito
Aug 29 2018 23:51
@korzo aahhh
korzo
@korzo
Aug 29 2018 23:53
@Pagnito why not
<script src="https://d3js.org/d3.v5.min.js"></script>
and you don't have to set up webpack
or try https://parceljs.org/
It's zero config bundler
Pagnito
@Pagnito
Aug 29 2018 23:58
oh what i never heard of this parceljs
it looks pretty awesome
y dont ppl use over webpack?