These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Oct 2017
Rabin Shrestha
@jyapujuju
Oct 28 2017 04:53
ul li:after {
  content: "|"; }
ul li:last-child:after {
  content: ""; }
not working on bootstrap
any idea
mbpiner
@mbpiner
Oct 28 2017 06:03
Have you tried separating them with commas?
ul and li
Rabin Shrestha
@jyapujuju
Oct 28 2017 06:53
this is generate from sass
@mbpiner
ronald
@ronstarcool
Oct 28 2017 09:48
folks, how to render a comp in react router on all routes, but the home route? i know we can use regex in react router, but i cant get it to work some how
<div className="router" style={{ width: "100% !important" }}>
            <Header />
            <Route path="/" component={Nav} />
            <Route exact path="/" component={Home} />
            <Route path="/markets" component={Markets} />
            <Route path="/marketnew" component={MarketNew} />
          </div>
i wanna render the Nav only when nót on home
i tried this: "/.*"
so, a slash, and then anything
but no luck there
Pascal Clanget
@Gh05d
Oct 28 2017 10:01
Hi guys, I created an app with create-react-app, ejected because I want to use scss, copied the webpack.dev files for development and production from another project and when I start the app, I now get this error:
Module build failed: Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (57)
I took the old files from the trash and made the necessary modifies to use the sass loader, but it still doesn't work.
Also removed the node_modules and reinstalled
Dan Couper
@DanCouper
Oct 28 2017 10:12
I assume you're using Node 8.x.x? Older versions of node-sass are not supported on that runtime. you need to upgrade (npm install node-sass@latest or equivalent). I've this constantly since I upgraded node, every project I've touched in has a lockfile with a specific version on node-sass, so I get that error maybe a couple times a day for the last few weeks
As
Pascal Clanget
@Gh05d
Oct 28 2017 10:14
@DanCouper Nope, was just me being stupid. Forgot to install the sass-loader :worried:
Works now, obviously. Sorry for the inconvience
Dan Couper
@DanCouper
Oct 28 2017 10:15
Ah, makes sense!
Mostafa Hesham
@mhesham32
Oct 28 2017 10:15

Hello what is this ?

10^1 //11 i guess it should be 10
10^2 //8  i guess it should be 100

isn't that symbol (^)mean to the power of ?

Dan Couper
@DanCouper
Oct 28 2017 10:19
No, it's a biwise XOR
Bitwise, sorry
10 ** 1 would be power, ** is the exponentiation operator, not ^
Mostafa Hesham
@mhesham32
Oct 28 2017 10:20
i don't know about it what should i use to get the power of some number @DanCouper ?
oh thanks @DanCouper
CamperBot
@camperbot
Oct 28 2017 10:21
mhesham32 sends brownie points to @dancouper :sparkles: :thumbsup: :sparkles:
:cookie: 857 | @dancouper |http://www.freecodecamp.com/dancouper
Dan Couper
@DanCouper
Oct 28 2017 10:21
👍
Mostafa Hesham
@mhesham32
Oct 28 2017 10:23
Math.pow is the correct one
Dan Couper
@DanCouper
Oct 28 2017 11:12
It's not infix though, that's what ** is for, it's a direct translation of your first example, and can be used same as *, +,-, /, or %. Like i = 2; i **= 4;
Matej Bošnjak
@mbosnjak01
Oct 28 2017 12:18
Hi. Could anyone tell me how to do array.join('<br>') inside angular js controller? Since angular ingores html tags in this example, and I really need this, how could I do it?
Mostafa Hesham
@mhesham32
Oct 28 2017 13:16
hello guys I have a problem here idk why num!==number.value didn't override the if conditon? help please
function convertToRoman(num) {
    var numArr = (num + '').split ``.map(x => x / 1);
    console.log(numArr);
    var numericalValueArr = numArr.map((number, index, array) => {
        if (array.length == 1) {
            return number;
        }

        var slicedArr = array.slice(index, array.length - 1).length;

        var tenToThePowerOfX = Math.pow(10, slicedArr);

        return number * tenToThePowerOfX;
    });
    console.log(numericalValueArr);

    var romanNumerals = [{
            value: 1,
            symbol: "I"
        },
        {
            value: 5,
            symbol: "V"
        },
        {
            value: 10,
            symbol: "X"
        },
        {
            value: 50,
            symbol: "L"
        },
        {
            value: 100,
            symbol: "C"
        },
        {
            value: 500,
            symbol: "D"
        },
        {
            value: 1000,
            symbol: "M"
        }
    ];


    function converter() {
        var numericalValue = numericalValueArr.map((num) => {
            for (let [index, number] of romanNumerals.entries()) {

                if (num == number.value) {
                    return number.symbol;
                }

                if (num == 0) return null;


                if (num!==number.value&&num / number.value == 2) {//this is the problem
                    return number.symbol + number.symbol;
                }

                if (num!==number.value&&num / number.value == 3) {//this is the problem
                    return number.symbol + number.symbol + number.symbol;
                }


                for (let anotherNumber of romanNumerals) {
                    var subtract = num == number.value - anotherNumber.value;
                    //var adding=num==number.value+anotherNumber.value;

                    var remains = num - number.value;

                    if (subtract) {
                        return anotherNumber.symbol + number.symbol;
                    }

                    if (remains / anotherNumber.value == 2) {
                        return number.symbol + anotherNumber.symbol + anotherNumber.symbol;
                    }

                    if (remains / anotherNumber.value == 3) {
                        return number.symbol + anotherNumber.symbol + anotherNumber.symbol + anotherNumber.symbol;
                    }
                }

            }
        });
        return numericalValue.join('');
    }
   return converter();

}

convertToRoman(3999);
Lee
@LeeConnelly12
Oct 28 2017 14:02
morning everyone
Marc
@MWBauer
Oct 28 2017 14:17
HIya' Lee
Anyone have a minute?
Lee
@LeeConnelly12
Oct 28 2017 14:18
Sure what's up
I'm trying to understand why my JS keeps saying there's an Unexpected end of input
There's a list of images, they're enclosed in {} with a ; to finish.
why is it Unexpected?
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:25
Hey everyone.
Lee
@LeeConnelly12
Oct 28 2017 14:25
@MWBauer You're missing a curly brace for your displayWeather function
Marc
@MWBauer
Oct 28 2017 14:25
@Quantomistro3178 :wave:
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:26
I'm working on the portfolio project. I just need to add a navbar to finish it off.
Marc
@MWBauer
Oct 28 2017 14:26
Yeah.....that was it. Goodness. thank you.
@LeeConnelly12 thanks
CamperBot
@camperbot
Oct 28 2017 14:26
mwbauer sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 159 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
ronald
@ronstarcool
Oct 28 2017 14:26
anyone online yet to assist on the react router?
Marc
@MWBauer
Oct 28 2017 14:26
:cocktail:
@Quantomistro3178 that was a fun part
how do you think you'll do it?
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:27
I downloaded notepad++ to work on there cause the internet is bad here. but when I copied my code from codepen onto the text editor, the result wasnt the same when i ran it
the background-color of the body was messed up, and the cdn font links weren't working either....
@MWBauer I'm just thinking of a simple fixed bottom navbar. Last time I tried to add a navbar, I messed things up so wrong I almost scrapped the whole project.
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:33
say, does anyone know how I could increase the rows in my "Message" input?
ronald
@ronstarcool
Oct 28 2017 14:34
use text area?
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:36
@ronstarcool how?
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:36
like, how do i use it to increase the number of rows?
Marc
@MWBauer
Oct 28 2017 14:37
I ended up with a floating navbar.
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:37
any link other than W3C? I'm in china right now, and the website is blocked in china
ronald
@ronstarcool
Oct 28 2017 14:38
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
@Quantomistro3178
Quantomistro3178
@Quantomistro3178
Oct 28 2017 14:48
@ronstarcool thanks, mate!
CamperBot
@camperbot
Oct 28 2017 14:48
quantomistro3178 sends brownie points to @ronstarcool :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @ronstarcool |http://www.freecodecamp.com/ronstarcool
Marc
@MWBauer
Oct 28 2017 14:50
Now I need to get my buttons on the page. Will be back.
Xapuu
@Xapuu
Oct 28 2017 14:57
I need a React Hero :D, to help me with state management
nmoore14
@nmoore14
Oct 28 2017 14:59
Hello everyone!!!
ronald
@ronstarcool
Oct 28 2017 15:02
haha
im here this evening. if i can, ill do Quantico
Xapuu
@Xapuu
Oct 28 2017 15:04
what is Quantico btw :D
A_A
@Otto-AA
Oct 28 2017 15:24
@Xapuu I've just started with react some days ago, but maybe I can help :) Whats the problem?
Xapuu
@Xapuu
Oct 28 2017 15:24

https://pastebin.com/YWeRg6T2

This is the code that needs a fix, in the main component in the will mount component, i want to pass a function that changes the state of the component 'App' in the observer, after that (in the same block ) by accessing the observer, i want to trigger the function, that i had already passed and update the 'App' state @Otto-AA

A_A
@Otto-AA
Oct 28 2017 15:33
@Xapuu Just a guess...
this.setState(()=>({focus:param})) is (according to my narrow understanding of react) an asynchrounous function, therefore the console.log(this.state) directly afterwards shouldn't note a change. So maybe it is happening, but just after the console.log?
Romeo Gligorov
@noname-uncut
Oct 28 2017 15:40
hi all !! back after 6 month :-D and rdy to start and finish all now.
i have finished yesterday my "portfolio page" need some reviews. It´s not finally finished but on the way. i am working now on the mobile version. (www.rg-design.ch)
Pascal Clanget
@Gh05d
Oct 28 2017 15:54

Hi guys, I want to float the button next to the collapsible:

      <div>
        <Collapsible trigger={name} className="recipe" openedClassName="recipe">
          {showIngredients}
        </Collapsible>

        <button className="btn btn-danger">
          <i className="fa fa-minus-square" />
        </button>
      </div>

I tried float: right on the button which worked, but it floated under the Collapsible. How can I get it the float next to it?

Ashwin
@ashwins93
Oct 28 2017 16:01
@Gh05d set the button's position to absolute and then set the right property to 0
Pascal Clanget
@Gh05d
Oct 28 2017 16:04
image.png
@ashwins93 Worked kind of
Ashwin
@ashwins93
Oct 28 2017 16:05
You can fine tune it by adjusting top, right, down, left values
Pascal Clanget
@Gh05d
Oct 28 2017 16:06
Problem is that it is responsive, so when I adjust the "right" property and the screen gets smaller, it again doesn' t fit
Ashwin
@ashwins93
Oct 28 2017 16:08
Okay there are floating action buttons in materialize.css you could just use thst framework or if you don't want to use that whole framework you could just peek at their source code how they implement it
Pascal Clanget
@Gh05d
Oct 28 2017 16:20
ok
thx @ashwins93 :thumbsup:
Jessie Cryer
@j-cryer
Oct 28 2017 17:24
hows it going
Daniel Azmitia
@danazm
Oct 28 2017 18:05
Hey, quick question. Starting the "show the local weather" project, but for some reason it won't display anything in the referenced codepen.io app. It shows a black screen that only says "Free Code Camp
Weather App". Using a clean Chromium browser, no addons. Allowed the site to grab my location. Can't think of why it isn't working. Anyone run in to this before?
Moisés Man
@moigithub
Oct 28 2017 18:12
check on ur browser devtools for errors @danazm
ronald
@ronstarcool
Oct 28 2017 18:14
does anyone no how to create a navbar with material ui?? im really stuck here
Daniel Azmitia
@danazm
Oct 28 2017 18:16

yeah, it only mentioned this about a deprecating feature: "pen.js:9 [Deprecation] getCurrentPosition and watchPosition usage in cross-origin iframes is deprecated and will be disabled in M63, around December 2017. To continue to use this feature, it must be enabled by the embedding document using Feature Policy, e.g. <iframe allow="geolocation" ...>. See https://goo.gl/EuHzyv for more details."

but that shouldn't matter, AFAIK, since it would still work until that function gets turned off in some future build.

ronald
@ronstarcool
Oct 28 2017 18:18
yes, i have read that. its the first thing that pops up in google. using tabs is i think, not the correct way
Teo
@Teo03
Oct 28 2017 18:29
Can someone help with Tic Tac Toe?
Daniel Azmitia
@danazm
Oct 28 2017 18:31
alright, so on a whim, downloaded a new build of chromium and it worked. so guess the version that was installed was bugged is all
Teo
@Teo03
Oct 28 2017 18:33
can someone take a look here to see where I am wrong: https://codepen.io/Teo03/pen/NwWKVm
korzo
@korzo
Oct 28 2017 18:42
@Teo03 on line 37, move is undefined
board[move.i][move.j] = aiPlayer;
Teo
@Teo03
Oct 28 2017 18:43
@korzo but I think it
is defined in checkGameOVer function
korzo
@korzo
Oct 28 2017 18:43
@Teo03 the same on line 9
Check your console @Teo03
Teo
@Teo03
Oct 28 2017 18:44
@korzo I checked but I don't know why is undefined
korzo
@korzo
Oct 28 2017 18:47
@Teo03 well, it's not udefined, but call to callAi(); returns number (in my case -10)
var move = callAi();
Teo
@Teo03
Oct 28 2017 18:49
@korzo In my case when I call callAi() it says that callAi() is not defined
@korzo I don't know what to do
korzo
@korzo
Oct 28 2017 18:50
@Teo03 where do you call it?
Teo
@Teo03
Oct 28 2017 18:50
@korzo in the console
Jean-Paul Sauve
@jp-sauve
Oct 28 2017 18:51
can you add a property to an undefined variable? Maybe initialize move to an empty object
korzo
@korzo
Oct 28 2017 18:51
@Teo03 callAi() is not defined in global scope, but inside ready() function's callback
you can access it from console
Teo
@Teo03
Oct 28 2017 18:51
@jp-sauve like this var move = {}; ?
korzo
@korzo
Oct 28 2017 18:52
@Teo03 unless you assign it to window object
Jean-Paul Sauve
@jp-sauve
Oct 28 2017 18:52
yes, but I don't know if that's the issue.
Teo
@Teo03
Oct 28 2017 18:52
@korzo what should i type in console to call?
@jp-sauve I tried now it still doesen't work
korzo
@korzo
Oct 28 2017 18:53
@Teo03 you need to assign it to window object: window.callAi = callAi;
@Teo03 In the console window, there is dropdown on left top side. Select Codepen iframe there
@Teo03 as long as you use Chrome
Teo
@Teo03
Oct 28 2017 18:56
@korzo There is nothing on the top left
korzo
@korzo
Oct 28 2017 18:57
image.png
@Teo03
Teo
@Teo03
Oct 28 2017 19:00
@korzo it says GET https://www.google-analytics.com/analytics.js net::ERR_BLOCKED_BY_CLIENT
Alexander Domikov
@AlexanderDom
Oct 28 2017 19:02
if its blocked by client so it adblock or something like tihs :)
Teo
@Teo03
Oct 28 2017 19:03
I disable it but still doesen't run
Alexander Domikov
@AlexanderDom
Oct 28 2017 19:04
same js error ?
Teo
@Teo03
Oct 28 2017 19:04
yes
I fixed it now but now shows that callAi is not defined
Jean-Paul Sauve
@jp-sauve
Oct 28 2017 19:12
@Teo03 Ok, it looks like the if condition on line 48 is always true?
which means that nothing after the return ever gets evaluated
hmm...it looks like codepen is stopping an infinite loop by overwriting your logic.
Jean-Paul Sauve
@jp-sauve
Oct 28 2017 19:18

I get "unreachable code after return statement", at index.html 174:8 and when I click on the index.html link in the console, it brings me to that line of your code around 80-83, but shows the inside of your function as

        //check if there is empty place
        for (var i = 0; i < 3; i++) {if (window.CP.shouldStopExecution(6)){break;}
            for (var j = 0; j < 3; j++) {if (window.CP.shouldStopExecution(5)){break;}
                if (searchBoard[i][j] === ' ') {
                    return false;

@Teo03

Teo
@Teo03
Oct 28 2017 19:28
What should I do to fix this?
Jean-Paul Sauve
@jp-sauve
Oct 28 2017 19:51
I'm not sure, sorry. You could step through with a debugger. It's hard, not having written it, plus I don't have enough time right now. But that's at least one of the issues!
oh, and sorry, it's a bit farther down than 48. It's the bit around 80
yeah, I don't see the infinite loop there...
Spyrantis Theodoros
@thodorisanta
Oct 28 2017 20:45

whats the easist way to position everything in the inner circle perfectly? should i use bootstrap or something else?

https://codepen.io/oshikurou/pen/mBNVKM?editors=1100

Nkwazema Chidiebere Raphael
@KingCyrus
Oct 28 2017 22:02
Anyone free to help me am stuck with making a modal with react on the Recipe box react project https://codepen.io/SensePrompt/pen/EwzPKV?editors=0010
Ken Haduch
@khaduch
Oct 28 2017 23:58
@KingCyrus - are you familiar with the react-modal plugin? I don't know how easy it is to use on CodePen, but the udemy React course that I am going through used that to create a Modal element in the example project. It seemed to work nicely.