These are chat archives for FreeCodeCamp/HelpJavaScript

26th
Feb 2018
DistinctWolf
@DistinctWolf
Feb 26 2018 00:16 UTC
I don't get any errors when using reactstrap but it doesn't work. Anyone knows why ?
I've installed all packages in their documentation and I don't get errors but it just doesn't work
import { Alert } from "reactstrap";
 return (
      <Alert color="primary">This is a primary alert </Alert>
    );
and I've included import "bootstrap/dist/css/bootstrap.css"; in my entry file
Christopher McCormack
@cmccormack
Feb 26 2018 00:21 UTC
@FlashHero what are you returning it from/to? is this a stateless functional component?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:21 UTC
@cmccormack yes, I think so
@cmccormack In their documentation it says to include import "bootstrap/dist/css/bootstrap.css"to the entry file and you can import like this import { Alert } from "reactstrap"; in other files and use it within react but it's not working
@cmccormack did you mean if my function is stateless ?
Christopher McCormack
@cmccormack
Feb 26 2018 00:27 UTC
@FlashHero you are returning in your code snippet but I can't see what you're returning it to. Also you installed reactstrap correct?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:29 UTC

@cmccormack

import "bootstrap/dist/css/bootstrap.css";
import ReactDOM from "react-dom";
import React from "react";
import { Alert } from "reactstrap";

class Example extends React.Component {
  render() {
    return (
      <Alert color="primary">This is a primary alert — check it out!</Alert>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

I think I've installed it correctly

Christopher McCormack
@cmccormack
Feb 26 2018 00:31 UTC
show the relevant part of your package.json
and just to be sure, you have a div with the id root in your index.html correct?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:33 UTC

@cmccormack

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "babel-loader": "^8.0.0-beta.0",
    "webpack": "^4.0.0"
  },
  "dependencies": {
    "@babel/preset-react": "^7.0.0-beta.40",
    "bootstrap": "^4.0.0",
    "css-loader": "^0.28.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-transition-group": "^2.2.1",
    "reactstrap": "^4.8.0",
    "webpack-cli": "^2.0.9",
    "webpack-dev-server": "^3.0.0"
  }

yes I do have a div named root normal react works but the reactstrap doesn't work

Christopher McCormack
@cmccormack
Feb 26 2018 00:35 UTC
is your .js file and your bootstrap dir that contains bootstrap.css in the same dir?
@FlashHero one thing you can do is install the React developer tools for your browser and check to see if the Alert object is being rendered, maybe it's rendering hidden
DistinctWolf
@DistinctWolf
Feb 26 2018 00:38 UTC
@cmccormack yes I have a src dir that has two other folder named components which has the react and server which has a file named entry.js
AbrisM
@AbrisM
Feb 26 2018 00:41 UTC
Hi does anyone know of some good sites that have adding binaries together?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:41 UTC
@cmccormack I have a error in the console it says Check the render method of `Alert`. and The above error occurred in the <Alert> component
Christopher McCormack
@cmccormack
Feb 26 2018 00:43 UTC
@FlashHero what was the error?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:45 UTC
@cmccormack
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports
Christopher McCormack
@cmccormack
Feb 26 2018 00:48 UTC
hmm weird looks like Alert's Export may not be working properly
DistinctWolf
@DistinctWolf
Feb 26 2018 00:51 UTC
@cmccormack I don't think it's got problem with exporting because nothing works even buttons don't work
Christopher McCormack
@cmccormack
Feb 26 2018 00:51 UTC
@FlashHero did you install it following their docs?
DistinctWolf
@DistinctWolf
Feb 26 2018 00:51 UTC
yes
Christopher McCormack
@cmccormack
Feb 26 2018 00:52 UTC
@FlashHero maybe try a different import - import Alert from 'reactstrap/Alert'
DistinctWolf
@DistinctWolf
Feb 26 2018 00:57 UTC
@cmccormack fails to compile
Christopher McCormack
@cmccormack
Feb 26 2018 00:57 UTC
i'm testing it locally, one sec
hmm I followed the guide exactly and I do see an alert
are you using create-react-app?
DistinctWolf
@DistinctWolf
Feb 26 2018 01:01 UTC
nope
what did you install
Christopher McCormack
@cmccormack
Feb 26 2018 01:01 UTC
just followed the guide here https://github.com/reactstrap/reactstrap
the reactstrap version is later though
  "dependencies": {
    "bootstrap": "^4.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "reactstrap": "^5.0.0-beta"
  },
DistinctWolf
@DistinctWolf
Feb 26 2018 01:04 UTC
@cmccormack maybe I need to update it
Christopher McCormack
@cmccormack
Feb 26 2018 01:04 UTC
it's possible - I'm not sure why you're getting an export issue from Alert
it could be a red herring though
See if you can get a regular html element to render first
DistinctWolf
@DistinctWolf
Feb 26 2018 01:05 UTC
yes regular html works
Christopher McCormack
@cmccormack
Feb 26 2018 01:05 UTC
did you copy the dependencies into your package.json or did you install them yourself?
try doing an npm i
DistinctWolf
@DistinctWolf
Feb 26 2018 01:06 UTC
some of them I copied but some of them I installed it myself but I'm re installing the reactstrap from the guide
Christopher McCormack
@cmccormack
Feb 26 2018 01:06 UTC
well try an npm i first
maybe you didn't actually install reactstrap
that could cause the error
DistinctWolf
@DistinctWolf
Feb 26 2018 01:30 UTC
@cmccormack it doesn't work
Christopher McCormack
@cmccormack
Feb 26 2018 01:46 UTC
@FlashHero you have reactstrap in your node_modules?
DistinctWolf
@DistinctWolf
Feb 26 2018 01:48 UTC
@cmccormack yes i did yarn install and I have reactstrap in node_modules
Christopher McCormack
@cmccormack
Feb 26 2018 01:50 UTC
@FlashHero hard to tell what it could be without access to source - do you have it on github?
DistinctWolf
@DistinctWolf
Feb 26 2018 01:51 UTC
@cmccormack let me push it to github
Christopher McCormack
@cmccormack
Feb 26 2018 01:51 UTC
@FlashHero ok
Amit Patel
@AmitP88
Feb 26 2018 01:53 UTC
hey guys, I'm kind of lost on how to do the JS Calculator project. Would it be so terrible if I were to look at a tutorial on how to do this? or should I try more to figure it out on my own?
Christopher McCormack
@cmccormack
Feb 26 2018 01:56 UTC
@AmitP88 Probably better for you to figure it out on your own. Write down an outline of what you want done and then fill in the gaps with how you might go about implementing it. Refine as you discover flaws or better ways
Amit Patel
@AmitP88
Feb 26 2018 01:57 UTC
@cmccormack yeah, that's what I was thinking. hmmm, ok, I'll try to pseudocode first. I figured this project would be easy, but when I think about how to code the calculations, it gets a little confusing
Christopher McCormack
@cmccormack
Feb 26 2018 02:02 UTC
@AmitP88 it's one of the more complicated, especially if you want to include additional features
Amit Patel
@AmitP88
Feb 26 2018 02:05 UTC
@cmccormack yeah, it's kind of deceiving isn't it? you'd think a simple calculator would be easy to build, but I guess it's not lol
Christopher McCormack
@cmccormack
Feb 26 2018 02:06 UTC
@AmitP88 yeah - I didn't want to chain commands like the example but instead treat mine more like a real calculator that showed the current total value when an operator is pressed, added a lot more complexity
Amit Patel
@AmitP88
Feb 26 2018 02:06 UTC
@cmccormack I see. lol you know what I was thinking before? trying to make it into a scientific calculator! haha
@cmccormack I think if I were to try that, it would officially break my brain
Christopher McCormack
@cmccormack
Feb 26 2018 02:07 UTC
might as well! The hurdles are good learning experiences
You should want to do harder things so you'll advance past your peers that didn't
AbrisM
@AbrisM
Feb 26 2018 02:08 UTC
@AbrisM
Hi everyone, isn't 8 bits atleast 1 byte of memory
If so, why would it be 8 bytes to store a name like Jonathan even though by adding, it comes up to 8 bits total
Wouldn't it be 1 byte to store the name instead of 8 bytes?
Christopher McCormack
@cmccormack
Feb 26 2018 02:10 UTC
@FlashHero how are you loading your app to test? Are you building or using webpack dev server?
@AbrisM a bit cannot represent more than 2 , 0 and 1
DistinctWolf
@DistinctWolf
Feb 26 2018 02:11 UTC
@cmccormack I'm using webpack dev server
Christopher McCormack
@cmccormack
Feb 26 2018 02:11 UTC
@AbrisM you will need several bits in order to store something like characters.
@AbrisM so if 8 bits are used for a single character, and a word/name is 8 characters, that would be 8 bytes or 64 bits
@AbrisM You would need at least 5 bits to represent just the lowercase alphabet characters (a-z, 26 characters, 2^5 === 32)
@FlashHero this isn't loading for me out of the box, you sure you uploaded a working version sans the reactstrap stuff? Maybe your .gitignore is blocking some files
DistinctWolf
@DistinctWolf
Feb 26 2018 02:17 UTC
@cmccormack I just added .gitignore to push it to github, even without it wasn't working
Christopher McCormack
@cmccormack
Feb 26 2018 02:18 UTC
Sure but I don't have your webpack config to test because of it
can you comment out your dist and webpack.config.js files in the .gitignore temporarily?
not sure why you would want your webpack config ignored - it would be much more difficult for you to test this later if you cloned your repo to another machine without it
DistinctWolf
@DistinctWolf
Feb 26 2018 02:25 UTC
@cmccormack webpack.config.js and dist are available now
Christopher McCormack
@cmccormack
Feb 26 2018 02:26 UTC
@FlashHero thanks
CamperBot
@camperbot
Feb 26 2018 02:26 UTC
cmccormack sends brownie points to @flashhero :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @flashhero |http://www.freecodecamp.org/flashhero
Christopher McCormack
@cmccormack
Feb 26 2018 02:31 UTC
@FlashHero this is loading for you when you run npm run serve?
All I'm getting is a directory listing
DistinctWolf
@DistinctWolf
Feb 26 2018 02:32 UTC
@cmccormack that's webpack dev server
and it works
you have to click in public
Christopher McCormack
@cmccormack
Feb 26 2018 02:33 UTC
.. you shouldn't have to do that
DistinctWolf
@DistinctWolf
Feb 26 2018 02:35 UTC
I don't know the directory list comes up and I click the public folder that's just how I do it maybe there's some right way of doing it
Claudio Restifo
@Marmiz
Feb 26 2018 02:39 UTC
@FlashHero means you are serving from the wrong path.
On the docs there are more examples of it
you are bundling in a dir called dist and serving from public
DistinctWolf
@DistinctWolf
Feb 26 2018 02:40 UTC
@Marmiz so where am I suppose to serve the file from
Claudio Restifo
@Marmiz
Feb 26 2018 02:41 UTC
@FlashHero you probably want to serve what's in public
but you have to tell it to wrbpack
DistinctWolf
@DistinctWolf
Feb 26 2018 02:41 UTC
ok
@Marmiz thanks
CamperBot
@camperbot
Feb 26 2018 02:42 UTC
flashhero sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1173 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Feb 26 2018 02:43 UTC
@FlashHero in the future, unless your idea was to play around with webpack, if you just want to get started with a react project use CRA
DistinctWolf
@DistinctWolf
Feb 26 2018 02:44 UTC
@Marmiz I'm trying to get reactstrap to with with react
Christopher McCormack
@cmccormack
Feb 26 2018 02:59 UTC
@FlashHero so reactstrap is loading but the problem most likely stems from your webpack configuration loading the bootstrap css file
DistinctWolf
@DistinctWolf
Feb 26 2018 03:01 UTC
@cmccormack is there a loader or something for bootstrap css files or maybe bootstrap uses sass or something and need to compile it to css
Christopher McCormack
@cmccormack
Feb 26 2018 03:02 UTC
@FlashHero not specifically for bootstrap css, no, there shouldn't need to be. however, bootstrap does have recommendations for webpack configurations, and yours is lacking in some key features. You need to look up webpack-dev-server and css as well, as I believe you need a different configuration for dev vs prod
DistinctWolf
@DistinctWolf
Feb 26 2018 03:04 UTC
@cmccormack ok well thank you so much for your time
CamperBot
@camperbot
Feb 26 2018 03:04 UTC
flashhero sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1336 | @cmccormack |http://www.freecodecamp.org/cmccormack
DistinctWolf
@DistinctWolf
Feb 26 2018 03:05 UTC
@cmccormack So webpack.config.js has problems right?
Christopher McCormack
@cmccormack
Feb 26 2018 03:06 UTC
@FlashHero I'm not 100% sure where the problem lies at the moment. You can try just using the CDN in your html head and see if that works for you
DistinctWolf
@DistinctWolf
Feb 26 2018 03:07 UTC
@cmccormack ok thanks
CamperBot
@camperbot
Feb 26 2018 03:07 UTC
api offline
flashhero sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
Christopher McCormack
@cmccormack
Feb 26 2018 03:25 UTC
@FlashHero think I figure out at least part of it
@FlashHero when using webpack dev server, you don't want to include style-loader in your css rule. Once I took that out I got it to render properly with CSS
@FlashHero what I do in my webpack config is create a dev and a production variable and pass a flag when I run the dev server so it knows which is which
@FlashHero you can use my latest webpack config as an example but note I am not using webpack dev server in my project as it's initially loaded with node https://github.com/cmccormack/voting-app/blob/master/webpack.config.js
DistinctWolf
@DistinctWolf
Feb 26 2018 03:40 UTC
@cmccormack ok thanks I'll take a look at that
CamperBot
@camperbot
Feb 26 2018 03:40 UTC
api offline
flashhero sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
AbrisM
@AbrisM
Feb 26 2018 04:01 UTC
@cmccormack Okay that makes sense. That's why its 8 bytes in total since 8 bits is every single character
Can anyone explain why x.charAt(x.length()-1); would bring the last character? I understand the x.charAt and the x.length part, but why -1?
Christopher McCormack
@cmccormack
Feb 26 2018 04:02 UTC
@AbrisM strings are 0 indexed.
@AbrisM so a 5 character word would have a length of 5, but indexed 0 to 4
AbrisM
@AbrisM
Feb 26 2018 05:01 UTC
@cmccormack Yes
But why the -1 after the parameter? Is this just the default way java finds the last character in a string?
Regardless of length of string. Say I have firstname of the string. By using the method above it will always display the 'e' at the end of the string
Claudio Restifo
@Marmiz
Feb 26 2018 05:58 UTC
@AbrisM that's because:
const str = 'test' // test length = 4

str[0] // t
str[1] // e
str[2] // s
str[3] // t

// thus to access the last letter you need `length -1` index.
dinesh
@1532j0004kg
Feb 26 2018 11:17 UTC
hi guys, I want to know which is the best comparing react vs angular .
then y we need to learn that ?
someone please tell !!!
Markus Kiili
@Masd925
Feb 26 2018 11:19 UTC
@1532j0004kg Those are two popular frameworks so it is a matter of taste.
dinesh
@1532j0004kg
Feb 26 2018 11:20 UTC
then y we need to learn that ?
what is the speciality ?
like jquery is used to simple the code right ! and easy to do ajax function
like that what is the main purpose of react / angular?
Markus Kiili
@Masd925
Feb 26 2018 11:36 UTC
@1532j0004kg I only know angular. Such a framework makes it easier to build web apps and especially one-page applications. You can more easily generate content from JS data (data binding) and the code can be more modular and easier to test and maintain.
Most firms use such frameworks.
dinesh
@1532j0004kg
Feb 26 2018 11:49 UTC
@Masd925 thanks
CamperBot
@camperbot
Feb 26 2018 11:49 UTC
1532j0004kg sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4703 | @masd925 |http://www.freecodecamp.org/masd925
Jefferson
@jeffersonnnn
Feb 26 2018 12:12 UTC
Any tips/help with integrating keys into a selection of values from an array in react? Nothing i am trying is getting my arrays selected
Yogender
@yb1997
Feb 26 2018 12:27 UTC
can anybody explain me why isNaN(1/0) evaluates to false ?
Greg Duncan
@GregatGit
Feb 26 2018 12:27 UTC
@jeffersonnnn check out lodash
Greg Duncan
@GregatGit
Feb 26 2018 12:32 UTC
@jeffersonnnn also try making your question specific, even if you have to give an example of what you are trying to do -
Jefferson
@jeffersonnnn
Feb 26 2018 12:36 UTC
@GregatGit thank you. Code coming up :D
CamperBot
@camperbot
Feb 26 2018 12:36 UTC
jeffersonnnn sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @gregatgit |http://www.freecodecamp.org/gregatgit
Jefferson
@jeffersonnnn
Feb 26 2018 12:37 UTC

Here is the arra, i am trying to select from

this.state = {
       options: ['Thing one', 'Thing two', 'Thing three']
    };
  }




  handlePick() {
    this.setState(() => {
      return {
        this.state.options.map((options) => {
          key={this.state.options}{this.state.options[Math.floor(Math.random()*this.state.options.length)]}
        })
      }; 
    });
  }

And the lower half is what i am trying to use sigh @gregatgit

Aditya
@ezioda004
Feb 26 2018 12:41 UTC
@yb1997 I guess because 1/0 returns infinity and its a number but we just dont know what number it is.
Daniel Romero
@Ranacode
Feb 26 2018 12:42 UTC
Problem with dangerouSetInnerHTML
props.dangerouslySetInnerHTML must be in the form {__html: ...}. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.
class Index extends React.Component {
    static async getInitialProps() {
        const resp = await butter.post.list({ page: 1, page_size: 10 });
        return { data: resp.data.data[0] };
    }

    render() {
        return (
            <section>
                <h1>Mi puto post</h1>
                <div dangerouslySetInnerHTML={{ _html: this.props.data.body }} />;
            </section>
        );
    }
}
This is my component, I'm using nextjs and the this.props.data.body is not null
I don't know why it throws me this error if I have the correct syntax
Yogender
@yb1997
Feb 26 2018 12:43 UTC
@ezioda004 uh ok sorry im weak in maths but how infinity is a number ?
1/0 is treated as infinity while 0/0 is treated as NaN
Aditya
@ezioda004
Feb 26 2018 12:46 UTC

@yb1997 From MDN

The global Infinity property is a numeric value representing infinity.

Its hard to explain but think of a really big number, and infinity is a number bigger than that. More info here

@yb1997 1/0 returns infinity because of how floating points work in JS. You could think of 1/0 as the limit of 1/x as x tends to zero. And 0/0 has no reasonable interpretation at all, hence NaN
Greg Duncan
@GregatGit
Feb 26 2018 12:49 UTC
@jeffersonnnn if this function worked what would your state look like?
Yogender
@yb1997
Feb 26 2018 12:51 UTC
@ezioda004 ok so any number divided by x where x tends to 0 will be interpreted as infinity, hmm thanks
CamperBot
@camperbot
Feb 26 2018 12:51 UTC
yb1997 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Jefferson
@jeffersonnnn
Feb 26 2018 12:53 UTC
@GregatGit i really don't know. The idea though is to select an option from the the state object.
Greg Duncan
@GregatGit
Feb 26 2018 12:55 UTC
@jeffersonnnn once you do this line this.state.options.map((options)it would be better written this.state.options.map((option) then after that you should stop accessing state when you have that part of state alreading in option
@jeffersonnnn but figure out what you want your state to look like eg
this.state = [
  {'Thing one': 23 },
  { 'Thing two': 76}, 
  {'Thing three': 102} 
]
Greg Duncan
@GregatGit
Feb 26 2018 13:03 UTC

@jeffersonnnn

this.state = {
       options: ['Thing one', 'Thing two', 'Thing three']
    };
  }




  handlePick() {
    this.setState(() => {
      return {
        this.state.options.map((option) => {
          option: Math.floor(Math.random() * option.length
        })
      }; 
    });
  }

I haven't tested this but something more like this

Jefferson
@jeffersonnnn
Feb 26 2018 13:09 UTC
@GregatGit testing...
Jefferson
@jeffersonnnn
Feb 26 2018 13:14 UTC
@GregatGit Thank you for this, but it doesn't work still.
CamperBot
@camperbot
Feb 26 2018 13:14 UTC
jeffersonnnn sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 26 2018 13:33 UTC
@jeffersonnnn What is your expectation of what the state object looks like after handlePick runs.
For example if the random selection was index 1?
Greg Duncan
@GregatGit
Feb 26 2018 13:48 UTC
@jeffersonnnn this isn't the answer but it's closer to the syntax you need to use
const options= ['Thing one', 'Thing two', 'Thing three']

handlePick = (arr) => {
  return arr.map(item => {
    return {item: item.length}
  })
}

const myObj = handlePick(options)
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 13:59 UTC
function firstNotRepeatingCharacter(s) {
    for(let i = 0; i < s.length - 1; i++){
        let regex = new RegExp(s[i],"gi");
        if(s.match(regex).length == 1) return s[i];
    }
    return "_";
}
any clue in making this one run faster?
Markus Kiili
@Masd925
Feb 26 2018 14:01 UTC
@tiagocorreiaalmeida What does it do?
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:01 UTC
timesout
on the hidden tests
probably some big input
Markus Kiili
@Masd925
Feb 26 2018 14:02 UTC
@tiagocorreiaalmeida I meant what is the function supposed to do.
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:02 UTC
wait seems that also there's some mistake
return the first non repeating character on a string @Masd925
function firstNotRepeatingCharacter(s) {
    if(s.length == 1) return s;
    for(let i = 0; i < s.length - 1; i++){
        let regex = new RegExp(s[i],"gi");
        if(s.match(regex).length == 1) return s[i];
    }
    return "_";
}
yeaqh times out, can't come with a faster one, strange part is that I allready did this one a few weeks back
Stephen James
@sjames1958gm
Feb 26 2018 14:06 UTC
@tiagocorreiaalmeida seems like indexOf using simple character would be faster?
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:07 UTC
guess im gonna change it for it and give it a few tests
Markus Kiili
@Masd925
Feb 26 2018 14:08 UTC
@tiagocorreiaalmeida I made a solution that counts the numbers of characters and then checks the first single one.
A loop solution.
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:09 UTC
@Masd925 smart one ;)
Markus Kiili
@Masd925
Feb 26 2018 14:10 UTC
@tiagocorreiaalmeida @sjames1958gm 's solution would be more compact but a bit less efficient.
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:10 UTC
@Masd925 how are you storing the count tough?
Stephen James
@sjames1958gm
Feb 26 2018 14:10 UTC
@Masd925 :+1:
@tiagocorreiaalmeida probably an object with the key of the character
Markus Kiili
@Masd925
Feb 26 2018 14:11 UTC
@tiagocorreiaalmeida In an object with keys corresponding to characters.
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:11 UTC
you would still forced to make another loop
on the object
doesnt it times out?
Markus Kiili
@Masd925
Feb 26 2018 14:11 UTC
@tiagocorreiaalmeida Yes, you need another loop.
@tiagocorreiaalmeida With JS, I think two loops is a good way to go. Some other language could also have a performant recursive solution.
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 14:15 UTC
yeah I allready made it work, tought it would time out but you are right my first solution would for to check for each itineration for matches, good one @Masd925
Stephen James
@sjames1958gm
Feb 26 2018 14:20 UTC
Here the secondary loop only eliminates earlier duplicates, if the earliest is found soon then only the single loop is required.
function firstNotRepeatingCharacter(s) {
  let arr = [];
  let obj = {};
  for (let i = 0; i < s.length; i++) {
    let c = s[i];
    if (obj[c]) {
      obj[c] += 1;
      if (arr[0] == c) {
        arr.shift();
        while (arr[0] && obj[arr[0]] > 1) {
          arr.shift();
        }
      }
    }
    else {
      obj[c] = 1;
      arr.push(c);
    }
  }
  return arr[0];
}
Markus Kiili
@Masd925
Feb 26 2018 14:33 UTC
@sjames1958gm Interesting.
Stephen James
@sjames1958gm
Feb 26 2018 14:33 UTC
:) it is more efficient when the the first non repeating is earlier
DistinctWolf
@DistinctWolf
Feb 26 2018 15:00 UTC
What's the difference between semantic ui react and bootstrap do semantic ui react provide responsive design for all screen?
alpox
@alpox
Feb 26 2018 15:02 UTC
@FlashHero bootstrap react and semantic ui react both provide responsive designs
Those are two different tools for about the same thing. Semantic UI provides more components for rich data applications though.
DistinctWolf
@DistinctWolf
Feb 26 2018 15:28 UTC
@alpox thanks is semantic ui better because it doesn't use jQuery like bootstrap does?
alpox
@alpox
Feb 26 2018 15:39 UTC
@FlashHero Semantic ui also uses jQuery
Jason Luboff
@JLuboff
Feb 26 2018 16:07 UTC
Morning :wave:
DistinctWolf
@DistinctWolf
Feb 26 2018 16:18 UTC
@JLuboff :wave:
Jason Luboff
@JLuboff
Feb 26 2018 16:19 UTC
How's it going?
DistinctWolf
@DistinctWolf
Feb 26 2018 16:21 UTC
Good you?
Jason Luboff
@JLuboff
Feb 26 2018 16:21 UTC
Not too bad.
DistinctWolf
@DistinctWolf
Feb 26 2018 16:22 UTC
:+1:
DistinctWolf
@DistinctWolf
Feb 26 2018 16:49 UTC
@alpox thanks
CamperBot
@camperbot
Feb 26 2018 16:49 UTC
:star2: 1559 | @alpox |http://www.freecodecamp.org/alpox
flashhero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
DistinctWolf
@DistinctWolf
Feb 26 2018 16:59 UTC
What's the difference between semantic ui css and semantic ui react and why do I need semantic ui css to use semantic ui react
alpox
@alpox
Feb 26 2018 17:21 UTC
@FlashHero Semantic ui react is semantic ui. It just gives you predefined react components for use for that you don't have to set all classes and apply jquery yourself
Muhammad Hasham
@MohammadHasham
Feb 26 2018 17:55 UTC
how can i redirect to same page from which the ajax request was made passport
Christopher McCormack
@cmccormack
Feb 26 2018 18:57 UTC
:wave:
Jason Luboff
@JLuboff
Feb 26 2018 19:06 UTC
@cmccormack Hey man
Christopher McCormack
@cmccormack
Feb 26 2018 19:06 UTC
@JLuboff what's happening?
Jason Luboff
@JLuboff
Feb 26 2018 19:07 UTC
@cmccormack Started looking into mocha this morning...and am very lost :( Not sure how I'll implement the tests but I haven't really read too much yet
You?
Christopher McCormack
@cmccormack
Feb 26 2018 19:08 UTC
Brushing up on advanced python for a ...thing
Jason Luboff
@JLuboff
Feb 26 2018 19:09 UTC
Sounds mysterious
Christopher McCormack
@cmccormack
Feb 26 2018 19:09 UTC
haha yeah
Jason Luboff
@JLuboff
Feb 26 2018 19:10 UTC
Work related?
Christopher McCormack
@cmccormack
Feb 26 2018 19:10 UTC

it is...
Mocha says it's:

simple and fun

So I'm not sure what the issue is :)

@JLuboff sort of
Jason Luboff
@JLuboff
Feb 26 2018 19:11 UTC
..simple..sure.. :worried: Its more so I don't know how to test my routes. Like am I just supposed to make up some fake date for the sql queries for instances?
Christopher McCormack
@cmccormack
Feb 26 2018 19:13 UTC
@JLuboff haha good luck man, I haven't bothered with using a testing library yet even if I should
let me know how it goes
Jason Luboff
@JLuboff
Feb 26 2018 19:14 UTC
Thanks. It probably won't go well.. haha
I want to implement that and some sort of validator (i.e express-validator) and I'm thinking I should be implementing now rather than later
Also decided I should set NODE_ENV as I haven't done that before
Christopher McCormack
@cmccormack
Feb 26 2018 19:19 UTC
probably a good idea
Jason Luboff
@JLuboff
Feb 26 2018 19:20 UTC
Man just so much info out there then you have to determine which is new or not.. ugh
alpox
@alpox
Feb 26 2018 19:26 UTC
@JLuboff you should minimize the tests which do actual IO. Testing the database access is a bit tricky and you'd need a special database instance to test or an in memory database. You'd have to use testdata and reset the states for specific queries. Its nasty.
@JLuboff best is to unit test (test modules in encapsulation) using mocks (abstract replacements of dependencies which do only what you specify for the tests)
Jason Luboff
@JLuboff
Feb 26 2018 19:29 UTC
@alpox To give you reference on my in-progress app. Its essentially a request app. User fills out a form, then managers will review, approve, etc. As it is right now, I have the request submit page (just a form) which in its route gets written to SQL DB and an email is sent out. There's no real "logic" besides the sql insert and the mailer. Then in the approval page, it is again a form that does an update/insert and a few other trival things but I guess no real logic.. how would I implement testing (or do I need it)?
alpox
@alpox
Feb 26 2018 19:34 UTC
@JLuboff You can test request/response with Supertest. Go sure to use a mock of your database interface which you can create through Sinon. With the mock you can test if the right sql queries were issued.
For the mailer you can also use a mock which tests if the mailer gets called with the right arguments.
You use mocks because you do not want to have real sideeffects when testing and testing has to go fast. Means you do not want a ton of emails in your mail account (At least not automated from unit-testing). The same is true for database access.
If you want to test the mailer itself, you can test it without making it send mails (Mock the dependency)
Jason Luboff
@JLuboff
Feb 26 2018 19:37 UTC
Got it ( I think :))
Right now I just test as best as I can by using the forms or what not but obiviousily not ideal
alpox
@alpox
Feb 26 2018 19:37 UTC
When you want to test if the mailer really sends the mail (Usually not needed as it is the work of the one who creates the dependency) you can do some integration test (Just triggering it normally) :D
But when the dependency gets called with the right arguments (Which you test by mocking), it should work anyways
As reference, i lately made a mailer (Upon dependencies) and used mock-testing:
Mailer
Tests
Mock
@JLuboff But I did it with Jest - not mocha. :)
Jason Luboff
@JLuboff
Feb 26 2018 19:40 UTC
@alpox I'm not hooked on mocha, just now its a popular one haha. And thanks for the links, I'm using nodemailer too so that'll help a lot!
CamperBot
@camperbot
Feb 26 2018 19:40 UTC
jluboff sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1561 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 26 2018 19:41 UTC
@JLuboff Great :)
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 20:18 UTC
so I was doing a blog and I got bored in the proccess does anyone have a project idea? just to make something different
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 20:21 UTC
I was thinking about killing a puppy tough
Nate Mallison
@NJM8
Feb 26 2018 20:21 UTC
:worried:
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 20:22 UTC
:D thanks @NJM8 allready knew post but I guess its time to pick one and stop running from bigger things :D
CamperBot
@camperbot
Feb 26 2018 20:22 UTC
tiagocorreiaalmeida sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @njm8 |http://www.freecodecamp.org/njm8
Christopher McCormack
@cmccormack
Feb 26 2018 20:30 UTC
@tiagocorreiaalmeida make something that you would want to actually use
Muhammad Hasham
@MohammadHasham
Feb 26 2018 20:30 UTC
has anyone done nightlife cordination?
project?
Tiago Correia
@tiagocorreiaalmeida
Feb 26 2018 20:31 UTC
@cmccormack that's my point eveything that I think of exists :\
alpox
@alpox
Feb 26 2018 20:31 UTC
@tiagocorreiaalmeida Thats the big problem in web
Kaz Baig
@kbaig
Feb 26 2018 20:55 UTC
@tiagocorreiaalmeida Coming from somewhat of an entrepreneurships education/background, I can tell you ideas are cheap and everyone's had pretty much all of them. Execution is what matters :)
Brad
@bradtaniguchi
Feb 26 2018 21:39 UTC
I read an article recently saying successful ideas aren't ones people haven't thought of, its the people who take the idea and do it better, and continuously do it better than everyone else, are successful. Pretty much what @kbaig said.
jusgoose
@gusd773
Feb 26 2018 21:43 UTC

RANDOM QUOTE GENERATOR WILL NOT TWEET OUT RANDOM QUOTE HELP


       var A = "someVal";
       var B = "diffVal";

  $(function(){  
     $('#getQuote').click(function(){
        $.ajaxSetup({cache:false});
          $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
      A= quote[0].content;
      B= quote[0].title;
  $(".message").html( A + "<p>— " + B + "</p>")
});
                                   });
        $('#tweetQuote').click(function(){


    $(this).attr("href",'https://twitter.com/intent/tweet/?text='+ A + "<p>— " + B + "</p>");

  });
});

ABOVE IS MY JQUERY CODE

CODEPEN LINK: https://codepen.io/gusd773/pen/PQwxRE

Kaz Baig
@kbaig
Feb 26 2018 21:43 UTC
calm
jusgoose
@gusd773
Feb 26 2018 21:43 UTC
down
Christopher McCormack
@cmccormack
Feb 26 2018 21:59 UTC
@gusd773 use your developer console to help troubleshoot. Notice what your href is after you get a quote and click the tweet button: href="https://twitter.com/intent/tweet/?text=someVal<p>— diffVal</p>"
jusgoose
@gusd773
Feb 26 2018 22:00 UTC
@cmccormack not sure what you mean I'm using codepen it doesn't give errors to troubleshoot
Christopher McCormack
@cmccormack
Feb 26 2018 22:00 UTC
it's not an error, look in the developer console at your elements
What you are trying to do will not work because you are assigning the href to the button outside of your asynchronous ajax call. Before the ajax call ever returns you've assigned someVal to A and diffVal to B
which are, btw, bad variable names
Jason Luboff
@JLuboff
Feb 26 2018 22:03 UTC
I agree. No description as to what they pertain to
and we like to start with lowercase letters
jusgoose
@gusd773
Feb 26 2018 22:24 UTC
@cmccormack @JLuboff I see apologies, but the tweet button won't even fire off to open a new window to tweet. I am trying to fix that first
Christopher McCormack
@cmccormack
Feb 26 2018 22:28 UTC
@gusd773 well one thing you may want to do is use an actual anchor tag around your button
@gusd773 and don't forget from your other FCC projects that codepen requires target="_blank" in your anchor element
Gulsvi
@gulsvi
Feb 26 2018 22:28 UTC
Doesn't look like your average Random Quote Generator, it's clearly a "RANDOM QUOTE GENERATOR" as titled in codepen :)
jusgoose
@gusd773
Feb 26 2018 22:29 UTC
@gulsvi I don't like average
Gulsvi
@gulsvi
Feb 26 2018 22:29 UTC
That's the spirit :)
jusgoose
@gusd773
Feb 26 2018 22:29 UTC
lol
Gulsvi
@gulsvi
Feb 26 2018 22:30 UTC
@gusd773 Like @cmccormack is saying, you're adding a href to a <button> but those only work with <a> tags.
You can style a <a> tag to look like a button with the same btn btn-default classes you're using. Bootstrap will take care of it for you.
You do not want to put an <a> tag inside a <button> or a <button> inside an <a> tag. It may work in most browsers, but technically, it's not allowed to have an interactive element nested inside another interactive element.
jusgoose
@gusd773
Feb 26 2018 22:35 UTC
@gulsvi ok so I swapped out my <button></button> for an anchor tag but now it just goes blank lol
Christopher McCormack
@cmccormack
Feb 26 2018 22:35 UTC
@gusd773 you keep using ref...
@gusd773 href="#"
@gusd773 and you'll still need target="_blank"
Gulsvi
@gulsvi
Feb 26 2018 22:36 UTC
@gusd773 Add target="_blank" to your link
sniped :)
jusgoose
@gusd773
Feb 26 2018 22:36 UTC
@cmccormack @gulsvi yea I just added it ! got it to pop up the tweet windown w the wrong prepopulated text but I'm going to try and fix that rn
thank you @cmccormack @gulsvi
CamperBot
@camperbot
Feb 26 2018 22:37 UTC
gusd773 sends brownie points to @cmccormack and @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 1341 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 2625 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 26 2018 22:42 UTC

@gusd773 Closer, but this HTML:

<a target ="_blank" ref=# id="tweetQuote" class= 'btn btn-default' class="twitter-share-button"> Tweet Out</a>

Should be:

<a target ="_blank" id="tweetQuote" class="btn btn-default"> Tweet Out</a>

We can't have two "class" attributes, and since you aren't using "twitter-share-button" in your CSS or using the Twitter Widget, it isn't needed. We also don't need a href in that HTML since you're adding it in the JS

jusgoose
@gusd773
Feb 26 2018 22:44 UTC
@gulsvi bet it was working even with all that extra stuff but good to know!
Gulsvi
@gulsvi
Feb 26 2018 22:44 UTC
@gusd773 When browsers detect invalid HTML, they try to guess what you want. Every browser can guess differently, so it's best to use valid HTML all the time so the browser doesn't have to guess and potentially give different results for different people.
Christopher McCormack
@cmccormack
Feb 26 2018 22:45 UTC
it's not working
jusgoose
@gusd773
Feb 26 2018 22:46 UTC
@gulsvi I am all for best practices
@cmccormack it's not tweeting out my quote merely the strings and variables I put in manaully
Adel
@AdelMahjoub
Feb 26 2018 22:48 UTC
I'm looking for some feedbacks for this mini html game Front Invaders Touch controls and buttons works on chrome android , with no fps drop, for some reason only some buttons works on ios safari and with a noticeable fps drop
No user data is saved on login with google or fb, just for updating the score leaderboard
Christopher McCormack
@cmccormack
Feb 26 2018 23:06 UTC
@AdelMahjoub Really nice job! fun to play, great sound and visuals! I would suggest maybe a bit more variation in the obstacles in the first few waves, maybe some weapon powerups (maybe I didn't get far enough) and maybe a short charging animation before enemies fire so you can anticipate a little
jusgoose
@gusd773
Feb 26 2018 23:07 UTC
@gulsvi @cmccormack should I just copy the JS code I used for the other getJSON request?
ok that didn't work lol
Adel
@AdelMahjoub
Feb 26 2018 23:08 UTC
@cmccormack thanks, yes fire rate boosts and weapon power ups are on the way, and some new AI for enemy ships
CamperBot
@camperbot
Feb 26 2018 23:08 UTC
adelmahjoub sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1342 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 26 2018 23:11 UTC
@gusd773 you have to remember that when you are building the URL in your click function, it only does that one time. Instead, why not build the URL and attach the new URL to the anchor href attribute from within your ajax response
@gusd773 you also need to remember to parse your quote to get rid of the html tags
jusgoose
@gusd773
Feb 26 2018 23:13 UTC
@cmccormack it's only showing html tags in the tweet button b/c it isn't pulling anything from any api
Christopher McCormack
@cmccormack
Feb 26 2018 23:13 UTC
@gusd773 multiple issues - walk through each of my responses first
@gusd773 oh and I just realized you're attaching the anchor href in your click handler, you should not be doing that. In fact, you don't need a click handler at all. do it all from your ajax callback function
@gusd773 you really need to examine the flow of your code though, and ask yourself what each line is doing and why you're doing it that way
I gotta run, ttyl
jusgoose
@gusd773
Feb 26 2018 23:28 UTC
@cmccormack I am trying man I really am don't think I'm fishing for answers I could've looked at previous examples a about two weeks ago when I started, I'm slowly getting it but this whole API stuff is extremely brand new
Gulsvi
@gulsvi
Feb 26 2018 23:31 UTC

@gusd773 When you click the button, you call getJSON
getJSON goes out to the server and brings back some JSON with your quote text and author
You parse that JSON to get the quote text and author, setting those to variables A and B
At this point, use those variables to write the quote to the page and create the HREF for your twitter link

He's saying there is no need to have a "click" event for your twitter link because it's a link - when you click on it, you'll be taken to twitter.com because it's a link. No need for javascript to run when you click on a link if the HTML is already in place

I noticed you're also using two versions of bootstrap - use either bootstrap 3 or bootstrap 4.
Use Containers => Rows => Columns with bootstrap
Use the text-center class with Bootstrap instead of style="text-align: center"
jusgoose
@gusd773
Feb 26 2018 23:32 UTC
@gulsvi so the click is needed for the getQuote button?
Gulsvi
@gulsvi
Feb 26 2018 23:32 UTC
The click is needed for the getQuote button, yes

Not sure if that makes sense. For example, if I have this HTML:

<a target="_blank" href="https://twitter.com/intent/tweet/?text=Do, or do not. There is no “try”.  — Yoda">Tweet Out</a>

I don't need any JavaScript. The browser knows to open that link when someone clicks on it. Your javascript just needs to add the link to the HTML.

You're doing that with $("#tweetQuote").attr("href", ..........
jusgoose
@gusd773
Feb 26 2018 23:38 UTC
@gulsvi you lost me "At this point,"; I understand how that is working and how parsing the JSON into the variables but what I don't get is how I am supposed to recall that into my prepulated tweet.
Gulsvi
@gulsvi
Feb 26 2018 23:42 UTC
@gusd773 How are you writing the quote to the page? (I know the answer, but helping you see what your code is doing)
jusgoose
@gusd773
Feb 26 2018 23:43 UTC
@gulsvi
  $(function(){  
     $('#getQuote').click(function(){
        $.ajaxSetup({cache:false});
          $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
      quoteContent= quote[0].content;
      quoteAuthor= quote[0].title;
  $(".message").html( quoteContent + "<p>— " + quoteAuthor + "</p>")
});
Gulsvi
@gulsvi
Feb 26 2018 23:44 UTC
Right, this line writes the quote to the page:
$(".message").html( quoteContent + "<p>— " + quoteAuthor + "</p>")

When the quote gets written to the page, your HTML changes from:

<div class="col-xs-12 well message">
  Quote Goes Here
</div>

To:

<div class="col-xs-12 well message">
  <p>The prerequisite of originality is the art of forgetting, at the proper moment, what we know.</p>
  <p>— Arthur Koestler</p>
</div>

When you do this in your JS:

$("#tweetQuote").attr("href", 'https://twitter.com/intent/tweet/?text='+ quoteContent + "<p>— " + quoteAuthor + "</p>");

Your <a> tag changes from:

<a target ="_blank" id="tweetQuote" class= 'btn btn-default'> Tweet Out</a>

to:

<a target ="_blank" id="tweetQuote" class= 'btn btn-default' href="The prerequisite of originality is the art of forgetting, at the proper moment, what we know. — Arthur Koestler"> Tweet Out</a>
jusgoose
@gusd773
Feb 26 2018 23:47 UTC
@gulsvi yes that I understood and makes sense for the getQuote
Gulsvi
@gulsvi
Feb 26 2018 23:48 UTC
^ Do all of that in your getJSON callback:
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
        quoteContent = quote[0].content;
        quoteAuthor = quote[0].title;
        // this is your callback function for getJSON, write the quote to the page and update the twitter link here
    });
jusgoose
@gusd773
Feb 26 2018 23:49 UTC
@gulsvi so is this all unneccessary
$('#tweetQuote')(function(){


    $(this).attr(
Gulsvi
@gulsvi
Feb 26 2018 23:49 UTC
Yes, that's unnecessary
jusgoose
@gusd773
Feb 26 2018 23:52 UTC

@gulsvi so then

$("#tweetQuote").attr("href", calls on the anchor tag? not sure since there's the "href" and also why not
' $("#tweetQuote").html("href " '

Gulsvi
@gulsvi
Feb 26 2018 23:53 UTC
@gusd773 .attr() is for modifying existing HTML code. Adding an attribute like href, class, id, etc.
.html() is for writing HTML from scratch
jusgoose
@gusd773
Feb 26 2018 23:53 UTC
thank you @gulsvi you've been beyond helpful
CamperBot
@camperbot
Feb 26 2018 23:53 UTC
gusd773 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2627 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 26 2018 23:54 UTC
So, you'd only use .html() if you're writing out the entire <a href="some url" class="btn btn-default" etc....>Tweet Out</a>
you use .attr() to add stuff to that HTML if it's already created