These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Mar 2018
Tom
@moT01
Mar 05 2018 00:24
@Benjmhart whats the problem - youre best to just say what the problem is
neovks
@neovks
Mar 05 2018 00:45
hey, I have an issue since last night can't figure this out... I'm on the portfolio project, and I've set up a clickable thumbnail to access a project but when I try to put it in a row the border suddenly get huge and I don't know why, if someone have an idea (it's the twitch thumbnail at the bottom)... thanks
Gulsvi
@gulsvi
Mar 05 2018 00:52
@neovks It's in a row currently and the border doesn't look huge - maybe I'm misunderstanding
neovks
@neovks
Mar 05 2018 00:55
aye it's in a row and the border isn't supposed to be that huge width wise, it's back to normal if I delete the row so that's weird
Gulsvi
@gulsvi
Mar 05 2018 00:59
@neovks I think you may have more luck using a bootstrap card:
      <div class="row">
        <div class="col-4">
          <a class="btn" href="https://twitch.tv" target="_blank">
            <div class="card bg-dark text-white p-1">
              <img class="card-img-top" src="https://is1-ssl.mzstatic.com/image/thumb/Purple118/v4/6f/49/45/6f494545-6815-ff9b-eaf4-22b0e843070a/TwitchAppIcon-1x_U007emarketing-85-220-0-6.png/246x0w.jpg">
              <h3 class="card-title mt-4">twitch</h3>
            </div>
          </a>
        </div>
      </div>
The reason why it's expanding out like that is because it's in a col-4 which is meant to be 33% the width of the row. You have some additional CSS making it 200px wide by default.
col is meant to get wide/narrow depending on the size of the screen
neovks
@neovks
Mar 05 2018 01:09
I see well I'll look into that then, thanks @gulsvi
CamperBot
@camperbot
Mar 05 2018 01:09
neovks sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2640 | @gulsvi |http://www.freecodecamp.org/gulsvi
Eric Hasegawa
@EricHasegawa
Mar 05 2018 01:58
Can anyone help me with the Simon Game project? Having trouble using the .focus() jQuery method
Ken Haduch
@khaduch
Mar 05 2018 01:59
@EricHasegawa - do you have a link to your project, we can take a look...
The issue is on line 71 of the js
Ken Haduch
@khaduch
Mar 05 2018 02:15
@EricHasegawa - I don't know what's wrong with .focus() - but there might be something about the way you are using it. Still looking. IN the meanwhile, changing from.focus() to .click() makes the handler fire.
Eric Hasegawa
@EricHasegawa
Mar 05 2018 02:16
@khaduch Yeah I'm working on it, I think I'm getting there
Ken Haduch
@khaduch
Mar 05 2018 02:21
@EricHasegawa - yeah, it seems to be working now - at least I uncommented the code and tried the .focus() again and it changes the color... did you have multiple handlers set up, perhaps?
@EricHasegawa - at least it is working once, then something seems to go awry...
Eric Hasegawa
@EricHasegawa
Mar 05 2018 02:31
@khaduch Thanks! using a different method
CamperBot
@camperbot
Mar 05 2018 02:31
erichasegawa sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3774 | @khaduch |http://www.freecodecamp.org/khaduch
Gulsvi
@gulsvi
Mar 05 2018 02:47
@EricHasegawa You may want to blur() the element after it has focus(), and jQuery has a delay() method you can use instead of setTimeout if preferred:
$("#red").focus(function() {
  $("#red")
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .queue(function() {
      $("#red").css("box-shadow", "none").blur();
    });
});
Ken Haduch
@khaduch
Mar 05 2018 02:53

@EricHasegawa - that sounds like a good idea that @gulsvi has. I find that if I use the .focus method, which I set up to alternate colors between red and black, that unless I get the red button "unfocused" (which would be blur) that it will not trigger the focus handler again.

Another good idea with jquery is to cache the various selectors that you are using, jquery goes through a lot of contortions to find things - so you could create variables like this:

var $red = $("#red");
var $blue = $("#blue");

// and use them like this:
$red.css("background-color", "black");

That would mean that instead of jquery going through gobs of code to find the element each time, you would only do that once and then just use the cached information to access it with the various jquery methods.

Gulsvi
@gulsvi
Mar 05 2018 02:58
^That's a great suggestion. If you don't expect to call $("#red") anywhere else, you could speed up that method above with:
$("#red").focus(function() {
  var $this = $(this);
  $this
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .queue(function() {
      $this.css("box-shadow", "none").blur();
    });
});
Ken Haduch
@khaduch
Mar 05 2018 03:00
@gulsvi - great tips - I haven't used jquery queue at all - I'll have to remember that, probably will come in handy sometimes - thanks!
CamperBot
@camperbot
Mar 05 2018 03:00
khaduch sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2641 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 05 2018 03:02
@khaduch Thank you too! A jQuery Promise also works :)
$("#red").focus(function() {
  var $this = $(this);
  $this
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .promise()
    .done(function() {
      $this.css("box-shadow", "none").blur();
    });
});
CamperBot
@camperbot
Mar 05 2018 03:02
gulsvi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3775 | @khaduch |http://www.freecodecamp.org/khaduch
Daniel
@DanJP2016
Mar 05 2018 03:13
working out the javascript for the tic tac toe challenge. I'm thinking the best approach would be to have a core function keep track of the game state and update the board instead of letting the player clicks fire everything off, but I am at a loss and open to suggestions.
Apollo
@enigmacipher
Mar 05 2018 03:14
in mdn's cascade and inheritance page, it says "The only way to win against an ID selector is to use !important", but we can win against ID selectors with inline styles o.O
Is there something I'm missing
Bin Gao
@gaobin1019
Mar 05 2018 03:16
"Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity."
Apollo
@enigmacipher
Mar 05 2018 03:22
Thanks @gaobin1019
CamperBot
@camperbot
Mar 05 2018 03:22
enigmacipher sends brownie points to @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
abraham anak agung
@padunk
Mar 05 2018 03:22
@enigmacipher !important will ignore any inline styles
Eric Weiss
@eweiss17
Mar 05 2018 03:28
!important is great
Ken Haduch
@khaduch
Mar 05 2018 03:31
@enigmacipher - they make a point when referring to inline style attributes: (such declarations don't have selectors, so their specificity is always simply 1000.) So, technically, there is no "selector" involved in an inline style, so they are talking about a "win against an ID selector" - and they are talking about other selectors (which, an inline style doesn't have) so there isn't any way to "beat" an ID selector with any other selector unless you use !important. I think that is the logic behind their statement.
Heathercoraje
@Heathercoraje
Mar 05 2018 03:33
Hello friends, consider this code
arr1.sort(function(a, b) {
        return a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0;
    });
}
I don't understand why returning 1,-1 or 0 would sort an array?
Bin Gao
@gaobin1019
Mar 05 2018 03:35
the function let you specify who is bigger, a or b. It serves as a parameter to the sort function.
Heathercoraje
@Heathercoraje
Mar 05 2018 03:36
but when return with 1, what happens?
Bin Gao
@gaobin1019
Mar 05 2018 03:37
-1 means a < b, 0 means a === b, 1 means a > b
Heathercoraje
@Heathercoraje
Mar 05 2018 03:38
then it just sorts based on that
brilliant.
Thanks! @gaobin1019
CamperBot
@camperbot
Mar 05 2018 03:39
heathercoraje sends brownie points to @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
check this example @Heathercoraje
Heathercoraje
@Heathercoraje
Mar 05 2018 03:43
@gaobin1019 precisely. I also found docs. it was silly one haha
Bin Gao
@gaobin1019
Mar 05 2018 03:43
:)
Baibhav Gautam
@baibhavx
Mar 05 2018 04:07

Hello friends, I am making a TicTacToe game using OOP JS and React. I am fairly new to React.
I have these classes for game logic(Not React classes)
Game
Board
Player
HumanPlayer extends Player
ComputerPlayer extends Player

A new game is instantiated like this:

   let GAME = null; //Global variable 
   ....  
   // some code
   ....  

   //When user chooses mark and level, 

   GAME = new Game(
    new BoardModel(),
    new HumanPlayer(this.state.humanName, this.state.humanMark),
    new ComputerPlayer('Computer', this.state.humanMark === 'X' ? 'O' : 'X'),
    level
  );

In React, App component is the parent component which displays BoardUI or InfoForm component based on state.

Now what is the best way to synchronize the game logic with the App component state.

Currently I am experimenting with something like this in App component

this.setState( {
  game: GAME
}) 


makeMove(mark, position) {
  GAME.board.makeMove(mark, position) 
  this.setState({
    game: GAME 
  })
}

I am not sure if this is an ideal approach. I know I should not mutate the state directly. So when I do GAME.board.makeMove('X', 0) this is in effect messing with the state because of this.setState({ game: GAME }) already.

I thought may be something like this.setState({ game: this.deepClone(GAME) }) would be more ideal, but still not feeling good about this appoach.

I'd appreciate any thoughts, suggestions to point me in the right direction.

Here is my Repo if that is helpful:
https://github.com/baibhavx/Tic-Tac-Toe-AI

habibaatify
@habibatify_twitter
Mar 05 2018 04:12
hello
i want to add a pic from my google drive to codepen when i pest the url it not show how can solve it?
Supra01
@Supra01
Mar 05 2018 04:19
Hello! I'm currently working on the Twitch API Project. In an effort to not have to write my GET request code more than once I used a few callbacks and I'm able to get back user logo images, channel names and online status. However, when you look at console in the devtools you can see that online status data comes in a different order than the images . Is there a way for me to get them in the same order or are my callback causing this problem?
Claudio Restifo
@Marmiz
Mar 05 2018 04:22

@baibhavx since you have decoupled the logic from the UI, I'd let React handle the UI changes via props and not state.

Make each react class a "dumb" component that receives everything via props, and implement the logic somewhere else... Kinda the same idea with SSR.

something along the line of:

<MyReactComponent board={board} onChange={myOnChangeMethods} onOtherAction={differentActionMethod} />

And make use of componentWillReceiveProps lifecycle to perform (if you want to) any check on incoming props.

Anyway, you sure like making things more difficult :)

Bin Gao
@gaobin1019
Mar 05 2018 04:22
@baibhavx react is all about rendering components, I feels like the game logic should be inside the React application it self. Since a TicTacToe game is all about how to render the current board based on current game state.
Claudio Restifo
@Marmiz
Mar 05 2018 04:34

@Supra01 what do you mean by

comes in a different order than the images

?

Supra01
@Supra01
Mar 05 2018 04:38
@Marmiz for example the name and image for user ESL_SC2 might be displayed first but that users online status might show up at a different time even though the array in in the same order
image.png
@Marmiz I'm sorry. I hope that makes some sense.
Baibhav Gautam
@baibhavx
Mar 05 2018 04:46
Thanks @Marmiz @gaobin1019
CamperBot
@camperbot
Mar 05 2018 04:46
baibhavx sends brownie points to @marmiz and @gaobin1019 :sparkles: :thumbsup: :sparkles:
:star2: 1180 | @marmiz |http://www.freecodecamp.org/marmiz
api offline
Claudio Restifo
@Marmiz
Mar 05 2018 04:50

@Supra01 that's because you are calling allUsers() before onlineChannels(), so it's likely that that information will come first.

But it's not guaranteed, that's the nature of async code, you have no control on how fast the server will reply with some info.
You have no guaranteed that what you request first, will came in first.

What you can do however is execute a callback function after all the promises have resolved with Promise.All

Pretty much just collecting all the data first, when all the requests are done execute the callback, instead of each request execute a callback when its request is completed.

Supra01
@Supra01
Mar 05 2018 04:56
@Marmiz Thank you for taking the time to answer my question! @DanJP2016 Thank you! I'll look into it.
CamperBot
@camperbot
Mar 05 2018 04:56
supra01 sends brownie points to @marmiz and @danjp2016 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @danjp2016 |http://www.freecodecamp.org/danjp2016
:star2: 1181 | @marmiz |http://www.freecodecamp.org/marmiz
mstellaluna
@mstellaluna
Mar 05 2018 04:59
Hello. Please be aware FreeCodeCamp.org is experiencing intermittent connectivity issues. This is due to issues at Digital Ocean. We are currently aware of the issue and actively monitoring it. Thanks ! Happy Coding !
Supra01
@Supra01
Mar 05 2018 05:19
@Marmiz sorry to bother again but if I didn't want to use a promise. How would I got about it? Would I just collect all the data first and then sort it somehow?
Bin Gao
@gaobin1019
Mar 05 2018 05:21
@Supra01 use callback then, anyway you need to handle it asynchronously
Supra01
@Supra01
Mar 05 2018 05:24
@gaobin1019 I'm sorry I don't think I follow. I thought I was handling it asynchronously and that's why I can't control the order of the data that I'm getting.
@gaobin1019 oh I think I see. You are telling me to use a promise anyway and then use
.then to chain together my get requests?
Bin Gao
@gaobin1019
Mar 05 2018 05:28
@Supra01 I didn't know what the exact problem is. I'm checking your code... Hope I can answer your question
Claudio Restifo
@Marmiz
Mar 05 2018 05:35

@Supra01

if I didn't want to use a promise. How would I got about it?

No way to control the async (actually be grateful about the existence of Promises, callback hell used to be a thing!), What you can do is find a way to gracefully insert data as they arrive in the page with some loader/animation

Bin Gao
@gaobin1019
Mar 05 2018 05:48
@Supra01 I think you will need to get both the image and the online status first before rendering the result to the DOM. If you do not want to use promise, use another callback inside your callback, which introduce "callback hell"
Supra01
@Supra01
Mar 05 2018 06:01
@gaobin1019 and @Marmiz thank you both! I'm ganna try the "Callback hell" first and then switch to promises.
CamperBot
@camperbot
Mar 05 2018 06:01
supra01 sends brownie points to @gaobin1019 and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @marmiz |http://www.freecodecamp.org/marmiz
api offline
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:04
Hey everyone. Could someone help me with my "Tic Tac Toe" project. Just need to figure out why the Min Max algorithm isn't working properly.
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:20
https://s.codepen.io/papageg/debug/yvGYQM/GnrnbVRPKRar#aboutpage why when you click on the about tab on nav bar does it take the about and hide it behind nav bar but not when you have the page loaded up.
Bin Gao
@gaobin1019
Mar 05 2018 06:26
c
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:46
Well look who is on
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:46
i got it to work thank you for the help :)
Fabien SHAN
@X140hu4
Mar 05 2018 06:46
@AndroidNinjaX Long time no see :)
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:46
is codecamp not loading for anyone else?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:46
@X140hu4 Right has been a while. How has is been?
@greggordoncode_twitter does not seem to be loading for me
Fabien SHAN
@X140hu4
Mar 05 2018 06:47
@greggordoncode_twitter They have some issue with their host I think
@AndroidNinjaX not too bad :) finished the front end cert a few days ago
what about you
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:48
any word on time for it to be up should i just go to bed?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:48
That would suck if I was trying to work on some challenges.
Fabien SHAN
@X140hu4
Mar 05 2018 06:48
@greggordoncode_twitter Where are you in the curriculum?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:49
@X140hu4
1. CONGRATS!!!!
2. I am so jelly
3. Not to bad trying to figure out why my dang Min Max Algorithm is not working on Tic Tac Toe. 
4. Wanna help with it :smile:
Fabien SHAN
@X140hu4
Mar 05 2018 06:49
haha
go ahead I had trouble with that too
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:50
just finishing up my personal portfolio
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:50
Literally the last part, the rest is done.
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:50
so not far at all
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:50
@greggordoncode_twitter that would really suck with the site being down then
@X140hu4 There is comments so should be easy to follow.
Greg Gordon
@greggordoncode_twitter
Mar 05 2018 06:51
sleepy time then. I will just go read crushing it!
TJ Hardin
@AndroidNinjaX
Mar 05 2018 06:51
Go down the YouTube rabbit hole with code lol
Fabien SHAN
@X140hu4
Mar 05 2018 07:03
@AndroidNinjaX can you isolate just the board with a game that has 3 moves left and the minmax algo?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:04
I guess I could. Want me to do that..... Oh and I just realized that I did not tell you how to make the Mix Max run haha
Fabien SHAN
@X140hu4
Mar 05 2018 07:05
@AndroidNinjaX I figured it out. I console logged the possible games but I forgot it is taking a long time haha
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:05
Ooooo ya thats why I dont have the "console.logs" in there lol. Way to much, it was always crashing it
Fabien SHAN
@X140hu4
Mar 05 2018 07:07
Working on a smaller game would make things easier.
I like how you organised your code. Mine look like a mess in comparison haha
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:08
Haha. Ya I tried to make it easy to follow. Give me one sec and I will edit it to make it smaller
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:15
Ok I have the board set up like this:
      ["x","o","x"],
      ["o","o"," "],
      ["x"," "," "]
wait thats bad. The computer can win 2 ways.... hold on
Ok like this
["x","o","x"],
[" ","o","x"],
[" "," ","o"]
Make sure to click "x" and "hard"
Then only click the bottom left square. What it does it put it in the middle left square, but it should try and go for the bottom middle
Fabien SHAN
@X140hu4
Mar 05 2018 07:23
What does your minmax returns when it is finished?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:30
I feel really stuipid, but trying to figure that out.
Fabien SHAN
@X140hu4
Mar 05 2018 07:33
It is hard haha
I think there is a problem with the scoring at the end of the minmax
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:35
Ya me to, I am slowly isolating it. I think it returns undefined.
but not sure yet
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:41
The index functions are always returning 0. But I do not think the function is stopping after it returns the maxScore
It just keeps going.
It gives me the best option which is [2, 1], that is correct. But then it keeps going on and gives me the min option.
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 07:52
how I can make like this form
image.png
and how to set tow placeholder
Fabien SHAN
@X140hu4
Mar 05 2018 07:58
@AndroidNinjaX the best option should be the computer's next move right?
TJ Hardin
@AndroidNinjaX
Mar 05 2018 07:58
@X140hu4 yup.
@X140hu4 I found one issue. In my maxIndex, and minIndex functions, when doing the if statement, I had if(arr[i] > maxIndex) . It should have been if(arr[i] > arr[maxIndex]) . I changed that.... no luck
Ehidin
@eabg
Mar 05 2018 08:06
soo Im wondering if anyone can help with this little issue I have. Building a very mini game for practice on javascript. Im having trouble having it to start on my. im thinking I have the start code all wrong...
Screen Shot 2018-03-05 at 12.06.11 AM.png
Screen Shot 2018-03-05 at 12.04.31 AM.png
trouble having it start for me**
any help will be greatly appericated
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:09
@eabg Scroll up and you will see my tic tac toe game. Not sure if it will help, but it starts.
Ehidin
@eabg
Mar 05 2018 08:12
@AndroidNinjaX kinda, but not really
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 08:13
image.png
can you help me please
how i ca make these field
Ehidin
@eabg
Mar 05 2018 08:14
I know I want to give the opition of the three. and return it to them. seems legit but tried to work it, nothing
@AndroidNinjaX
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:14
@eabg I know ill hit the same issue when I get to my next one. You could put a set a timer to execute a function when the game loads.
@eabg instead of a button like I have it
@eabg so like
setTimeout(function(){
callAI();
}, 1000});
Ehidin
@eabg
Mar 05 2018 08:17
so will this work as a replacement for a start game function
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:19
possibly. if you do a $(document).ready(function(){}, and then have that in there, it will run after so long. That $(document).ready(function(){} wont run until the page is done loading.
@eabg So could do like:
$(document).ready(function(){
     setTimeout(functon(){
          make move;
     }, 1000});
}
Ehidin
@eabg
Mar 05 2018 08:20
hmm, okay let me try it out
Anas Abdennaim
@Aka-Dev
Mar 05 2018 08:21
@ahmed-issa-mohd what field you want to make ? account name ??
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:21
@eabg Sorry pushed enter to early, had to edit that.
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 08:22
@Aka-Dev yes
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:22
@eabg The 1000 is the amount of mili-seconds, it takes before that function runs. 1000 is = to 1 second.
Ehidin
@eabg
Mar 05 2018 08:23
gotchaaaa
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 08:23
How he was given two plaseholder @Aka-Dev
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:23
@ahmed-issa-mohd Sorry I didnt help, I suck at forms lol
Anas Abdennaim
@Aka-Dev
Mar 05 2018 08:24
@ahmed-issa-mohd you must make two input one in english and the second in arabic
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:25
@X140hu4 found another issue. In my getScore function, I spelt 'winner' wrong...
Fabien SHAN
@X140hu4
Mar 05 2018 08:35
@AndroidNinjaX sorry I am at work so I cant really focus on helping you ^^;
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:36
@X140hu4 Its cool man. You still gave me good suggestions. I am slowly getting it solved.
Anas Abdennaim
@Aka-Dev
Mar 05 2018 08:37
@ahmed-issa-mohd look at this example https://codepen.io/Aka03/pen/NyVyrx?editors=0110
Fabien SHAN
@X140hu4
Mar 05 2018 08:38
@AndroidNinjaX I struggled a lot with the implementation of that algo
@AndroidNinjaX you'll get it eventually
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:40
@X140hu4 ya now that I can actually use some console.log's in the algorithm its a lot eaiser. Thanks for the suggestion on that. Actually I need to get food, probably will help also lol
CamperBot
@camperbot
Mar 05 2018 08:40
androidninjax sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Amit Patel
@AmitP88
Mar 05 2018 08:45
hey all, I'm finishing up my js calculator project, but I'm stuck on how to get the decimal button functionality right. I can add decimals to the input, but I can't figure out how to only add decimals at the appropriate places (only 1 decimal per number)
https://codepen.io/AmitP88/pen/Zrjbam?editors=0010
h1tag
@h1tag
Mar 05 2018 08:54
@AmitP88 I haven't checked the code, but cant you just check if there's a decimal point in the number, and not add one if there's already one
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:54
@X140hu4 HOLY CRAP THAT FIXED IT!!!! I didnt realize that I didnt increase the "totalMoves" when I made the mock game. So the Moves were 0, but I had 6 already. Woot Woot done with this project.
Amit Patel
@AmitP88
Mar 05 2018 08:54
@h1tag I'm trying to figure out exactly how to do that with my code
h1tag
@h1tag
Mar 05 2018 08:55
@AmitP88 you're using an array to store the input, right?
Amit Patel
@AmitP88
Mar 05 2018 08:55
yeah
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:56
@AmitP88 So what I did was I made a var decimalClick = false, then when I click the decimal I made it true. Every time I clicked it again, if it had already been clicked it would not do anything.
h1tag
@h1tag
Mar 05 2018 08:56
@AmitP88 ok, it's only a matter of searching the input array for a .
Amit Patel
@AmitP88
Mar 05 2018 08:57
@h1tag I was thinking that at first, but then what if I do 2.2 + 3.3 or something similar
h1tag
@h1tag
Mar 05 2018 08:57
@AmitP88 true, I forgot about that one
Amit Patel
@AmitP88
Mar 05 2018 08:58
@AndroidNinjaX that applies to your idea too.
TJ Hardin
@AndroidNinjaX
Mar 05 2018 08:59
@AmitP88 When you click an operator "+" or whatever, then it resets the var to "false"
@AmitP88 I also reset it when the "=" button is clicked, or a few other reasons.
Amit Patel
@AmitP88
Mar 05 2018 09:00
@AndroidNinjaX I mean but what if you have an expression like this? 2.34 + 5.67
Fabien SHAN
@X140hu4
Mar 05 2018 09:00
@AndroidNinjaX good job!
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:01
@AmitP88 Ya so "2" then "." (decimalCick = true), "34" then "+" (decimalClick = false), then "5" then "." (decimalClick = true).... and so on
h1tag
@h1tag
Mar 05 2018 09:01
@AmitP88 maybe not a solution, but a workaround:
You store the input in a var/arr, then when an operator is clicked, you reset that var and start adding the next number (if any) to that var
And you keep checking that var everytime you want to add a .
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:02
@X140hu4 thanks. literally spelling was the issue... coding headache's
CamperBot
@camperbot
Mar 05 2018 09:02
androidninjax sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
Amit Patel
@AmitP88
Mar 05 2018 09:03
@AndroidNinjaX @h1tag you both have interesting solutions. I'll look into these and see if I can implement in my code. thanks guys :)
CamperBot
@camperbot
Mar 05 2018 09:03
amitp88 sends brownie points to @androidninjax and @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 930 | @h1tag |http://www.freecodecamp.org/h1tag
:cookie: 304 | @androidninjax |http://www.freecodecamp.org/androidninjax
h1tag
@h1tag
Mar 05 2018 09:03
@AmitP88 you're welcome :+1:
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:04
@AmitP88 This is how mine works, wont show you the rest of the code for spoiler reasons.
$("#decimalBtn").click(function(){
    console.log("Decimal is clicked");
    console.log("---------------------------");
    operationClick = false;
    if(decimalClick == false){
      decimalClick = true;
      commonBtn(".");
    }
  });
@AmitP88 no problem. You got this!
Amit Patel
@AmitP88
Mar 05 2018 09:06
@AndroidNinjaX thanks Android! I was stuck on how to approach this project for a long time, but today I felt like I was able to complete 90% of it
CamperBot
@camperbot
Mar 05 2018 09:06
amitp88 sends brownie points to @androidninjax :sparkles: :thumbsup: :sparkles:
api offline
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:07
@AmitP88 That's awesome. I was just stuck on my "Tic Tac Toe" for the longest, but now I completed it. That one is a pain.
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 09:08
image.png
Amit Patel
@AmitP88
Mar 05 2018 09:08
@AndroidNinjaX I've heard about that one. I'm actually hoping to complete the adv projects by the end of this month. I'll finish up the rest of the algorithms on the first week of april
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 05 2018 09:08
how to make like
image.png
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:10
@AmitP88 I was planning on being done with my FrontEnd already, but life got in the way the past few months. Eh, 1 more to go!
Amit Patel
@AmitP88
Mar 05 2018 09:10
@AndroidNinjaX yeah, i've had that happen to me too. so you're on the Simon project then? How is that one?
please help
Why when I insert "My Posts" it suddenly appears a black line?
When i don't insert text, the black line won't appears.
Amit Patel
@AmitP88
Mar 05 2018 09:17
@AndroidNinjaX actually, I was looking at the required user stories for the JS calculator and it doesn't mention anything about using decimals. Do we still have to use them?
Nam V. Do
@fantasy2943
Mar 05 2018 09:17
@AmitP88 Can you help me, please?
Amit Patel
@AmitP88
Mar 05 2018 09:18
@fantasy2943 ok, one sec while I look at your code
Nam V. Do
@fantasy2943
Mar 05 2018 09:18
@AmitP88 Thanks.
CamperBot
@camperbot
Mar 05 2018 09:18
fantasy2943 sends brownie points to @amitp88 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @amitp88 |http://www.freecodecamp.org/amitp88
Marianissimus
@Marianissimus
Mar 05 2018 09:19
@fantasy2943 the line can be any color you want. it's the background of the body. change it like body {background-color:red};
Nam V. Do
@fantasy2943
Mar 05 2018 09:21
How can I delete that color? I don't want it to appear between two images. @Marianissimus
TJ Hardin
@AndroidNinjaX
Mar 05 2018 09:22
@AmitP88 Ya onto that one now. And no you technically do not, however would not be a good calculator if you could not use a decimal. Also get that experience, will some day come in handy.
Marianissimus
@Marianissimus
Mar 05 2018 09:22
it's not a line, remember this. what happens is that the browser will automatically add some padding / margins betweeen your elements
to get rid of them, you need to reset the behavior at the very beginning of the css. this way, all the browsers will behave the same.
you only need this for it to work right now: *{ margin: 0; padding: 0; }
Amit Patel
@AmitP88
Mar 05 2018 09:23
@AndroidNinjaX true. I mean, I'll be refactoring my projects after getting the front end certificate, but yeah, I'll definitely add in decimals. I kinda want to get through these last js projects so that I can meet my monthly goal :)
Marianissimus
@Marianissimus
Mar 05 2018 09:24
what this does is: 1. select all elements ( *) 2. make their margins and paddings equal to 0;
add that at the top of the css
does it work?
Nam V. Do
@fantasy2943
Mar 05 2018 09:25
@AmitP88 When I delete the text "My Posts" at the bottom of my HTML code, the black line doesn't appear.
Amit Patel
@AmitP88
Mar 05 2018 09:27
@fantasy2943 I think @Marianissimus has the right idea about the padding and margins. Also, I would consider refactoring your html so that you can see the structure of your code clearly
Nam V. Do
@fantasy2943
Mar 05 2018 09:30
It works, thanks @Marianissimus
CamperBot
@camperbot
Mar 05 2018 09:30
fantasy2943 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Mar 05 2018 09:32
you're welcome
TJ Hardin
@AndroidNinjaX
Mar 05 2018 10:09
@AmitP88 I keep saying I am going to go back, but ya that has not happened yet. And sorry was gone for a sec.
the fbi agent watching you
@krennical_twitter
Mar 05 2018 10:31

Is it possible to add a new property to a constructor function, like in this code? Or would you have to change the function? I know you can add a new property to variables you've already created (e.g. using car1.engines = 1 below instead of Car.engines = 1; ), but I can't figure out if the function itself can be edited so that the variable you create takes on the new property you're assigning the original function.

var Car = function(make, model, year){
this.make = make;
this.model = model;
this.year = year;
};

Car.engines = 1;
var car1 = new Car ('Honda', 'Civic', 2006);
console.log(car1)

Markus Kiili
@Masd925
Mar 05 2018 10:33
@krennical_twitter It can be edited. It resembles static properties in some other languages. Properties that don't belong to any particular object created by that constructor.
the fbi agent watching you
@krennical_twitter
Mar 05 2018 10:34
@Masd925 Thanks! Do you know what I would change in the code above in order to do that?
CamperBot
@camperbot
Mar 05 2018 10:34
krennical_twitter sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4713 | @masd925 |http://www.freecodecamp.org/masd925
TJ Hardin
@AndroidNinjaX
Mar 05 2018 10:34
@Masd925 Just wanted to say Hi
the fbi agent watching you
@krennical_twitter
Mar 05 2018 10:34
I'm not sure why car1 isn't displaying { make: 'Honda', model: 'Civic', year: 2006, engines: 1 } when I console.log it
Markus Kiili
@Masd925
Mar 05 2018 10:35
@krennical_twitter That code is fine. Maybe you mean Car.prototype.engines = 1; which could then be used by all cars along the prototype chain?
There are own properties and properties that can be used along the prototype chain. Properties are also enumerable and non-enumerable (usually built-in ones).
the fbi agent watching you
@krennical_twitter
Mar 05 2018 10:40
@Masd925 That might be what I'm looking for. Going to try some testing. Using Car.prototype.engines = 1; didn't seem to work but I feel like that's somewhere in the right direction
Markus Kiili
@Masd925
Mar 05 2018 10:41
@krennical_twitter You can then use it by myCar.engines
@Masd925 Thanks again, Markus! You helped me out a bunch with the prototype bit
CamperBot
@camperbot
Mar 05 2018 10:52
krennical_twitter sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Markus Kiili
@Masd925
Mar 05 2018 10:54
@krennical_twitter That link has somewhat incorrect information and terminology, so don't trust it.
Joshua Frias
@Juke-Magic
Mar 05 2018 11:58
Guys little help here
I want to get the data and log it in the console
but there seems to be a problem
Markus Kiili
@Masd925
Mar 05 2018 11:59
@Juke-Magic You have not correctly imported jQuery.
Joshua Frias
@Juke-Magic
Mar 05 2018 12:00
@Masd925 what do you mean?
Sweet Coding :)
@SweetCodingInc
Mar 05 2018 12:00
@Juke-Magic can you share editor link?
Markus Kiili
@Masd925
Mar 05 2018 12:00
@Juke-Magic There is an error on the browser developer tools console about $ not being defined.
Sweet Coding :)
@SweetCodingInc
Mar 05 2018 12:01
@Juke-Magic You need to include jquery
like you have included bootstrap and fonts
or you can go to js settings section and add jquery
Joshua Frias
@Juke-Magic
Mar 05 2018 12:02
ohhhhhhhhhhhhhh
Sweet Coding :)
@SweetCodingInc
Mar 05 2018 12:04
@Juke-Magic also use this url instead - https://wind-bow.gomix.me/twitch-api/channels/freecodecamp
to avoid potential CORS issues
Joshua Frias
@Juke-Magic
Mar 05 2018 12:05
@SweetCodingInc will it out put the same data as "https://api.twitch.tv/kraken/streams/freecodecamp?callback=?"
?
aye got it outputing
thanks guys @SweetCodingInc @Masd925
CamperBot
@camperbot
Mar 05 2018 12:06
juke-magic sends brownie points to @sweetcodinginc and @masd925 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 4714 | @masd925 |http://www.freecodecamp.org/masd925
Sweet Coding :)
@SweetCodingInc
Mar 05 2018 12:19
@Juke-Magic yes.. same data
Ugur Ozcelik
@ugurozcelik
Mar 05 2018 12:28
i am making the portfolio page but i couldnt figure out how to make all the content scrollable. I can manage the go between tabs but i like to know how to open a new tab when i scroll the end of the page https://codepen.io/ugurozcelik/pen/EQzxqK
i like to go to contact after portfolio when i scrolldown
Fabien SHAN
@X140hu4
Mar 05 2018 12:46
@ugurozcelik You mean having only one page? Have all your div displayed instead of hiding/showing them
@ugurozcelik and use anchor link to link a button to a section of your page http://www.echoecho.com/htmllinks08.htm
Ugur Ozcelik
@ugurozcelik
Mar 05 2018 13:13
thanks @X140hu4
CamperBot
@camperbot
Mar 05 2018 13:13
ugurozcelik sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Diego
@Difdoss
Mar 05 2018 13:27
Hello guys, I have a problem with my portafolio web-page that I've just made. The margin of the body is 0, although it has a margin on the right side of the whole page. Can someone help me out with this one? I can't figure that out yet... My portafolio page: https://codepen.io/Difdoss/pen/paBxxa
Marianissimus
@Marianissimus
Mar 05 2018 13:30
so what do you need to achieve?
anyway, remove the body {height:120%; }, you certainly override that
is it the overflow? try this:
html,body {
  margin:0;
  overflow-x: hidden;
}
Diego
@Difdoss
Mar 05 2018 13:37
@Marianissimus That worked!! Thank you very much!
CamperBot
@camperbot
Mar 05 2018 13:37
difdoss sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 475 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Mar 05 2018 13:38
you're welcome
mbsyaswanth
@mbsyaswanth
Mar 05 2018 13:52
https://codepen.io/mbs-yaswanth/pen/NyVezZ - someonewho have idea about flexbox, help me design this navbar. i want to align the list items to the bottom , but align-self:flex-end doesnt work!
Anas Abdennaim
@Aka-Dev
Mar 05 2018 13:59
@mbsyaswanth remove align-self: center; from your code
nav ul li{
align-self: flex-end;
padding:5px 5px 5px 5px;
flex-grow: 1;
text-align: center;
color:white;
cursor:pointer;
font-weight: 900;
align-self: center;
}
@mbsyaswanth you have two align-self in the top and bottom
align-self: flex-end; align-self: center;
mbsyaswanth
@mbsyaswanth
Mar 05 2018 14:27
hell yeah, i didnt see it @Aka-Dev thank you
CamperBot
@camperbot
Mar 05 2018 14:27
mbsyaswanth sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @aka-dev |http://www.freecodecamp.org/aka-dev
mustimuu
@mustimuu
Mar 05 2018 14:29
Any wordpress experts in here?
Anshul Adlakha
@anshuladlakha
Mar 05 2018 14:43
https://www.tumblr.com/
I'm trying to make a scroll system like the one used on this page. I'm trying to achieve something like when I'm on the first page and I click on the dot for the last page, in their case it jumps to the last page directly but in my case it goes through all the pages in between. Can anyone help me achieve this result.
mustimuu
@mustimuu
Mar 05 2018 14:45
Guys
any tutorials for good web design?
knight2
@knight2
Mar 05 2018 15:31
Does anyone know how to make css keyframe animation's to work with react rendering components?
I tried using ReactCSSTransitionGroup from react but it doesn't appear to be working anymore
Then I tried just using regular keyframes for animation, it only works on my first load, and not for subsequent changes of the react components
css for fadein animation
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.fadeIn {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
and in js for render I have
  render(){
    return(

      <div id="quote-box" className="container-fluid row">

        <div className="fadeIn" id="text">
          <p>{this.state.quote}</p>
        </div>

        <div className="fadeIn" id="author">
          <p>{this.state.author}</p>
        </div>

        <div className="buttons">
        <button className="button" onClick={this.getQuote} id="new-quote">New Quote!</button> <br />

        <a className="button" title="Tweet!" className="fa fa-twitter fa-lg" href="#" onClick={this.tweetQuote} id="tweet-quote"></a>
        </div>
      </div>
    );
  };
};
On first load, the webpage properly uses the keyframe animation, however if the user clicks the get new quote button, which changes the state of the component, and loads new text, the new text does NOT play the animation. I am not sure why this is the case?
What do I need to do to ensure all changes to the state of the component that are specified to play the animation on render?
h1tag
@h1tag
Mar 05 2018 15:41
@knight2 this is the room for React questions: https://gitter.im/FreeCodeCamp/HelpDataViz, though Im not sure if ur question fits better here or there
knight2
@knight2
Mar 05 2018 15:43
@h1tag I appreciate that, but I thought I could try here too, since keyframes and animation are CSS aka frontend, but i'll try there too!
h1tag
@h1tag
Mar 05 2018 15:44
@knight2 :+1:
knight2
@knight2
Mar 05 2018 15:44
and react is a front-end library not 100% dedicated to data visualization btw.
h1tag
@h1tag
Mar 05 2018 15:46
@knight2 but that's where the freecodecamp plan places it under
Kaz Baig
@kbaig
Mar 05 2018 15:46
@knight2 ReactCSSTransitionGroupisn't part of the react-transition-group package anymore. It's a bit confusing because the main React site still promotes the older version
knight2
@knight2
Mar 05 2018 15:47
@kbaig yeah that is what I gathered from trying it and from seeing other people saying it isn't really used
Maybe better to just use normal keyframes and just tag the sections of react with classes
Kaz Baig
@kbaig
Mar 05 2018 15:47
@knight2 I just used the Transition and TransitionGroup components
knight2
@knight2
Mar 05 2018 15:48
@kbaig so the transition group you linked to does work well?
just ReactCSSTransitionGroup doesn't work anymore, but transition and transition group works?
Kaz Baig
@kbaig
Mar 05 2018 15:48
@knight2 It does the job yeah. I'm still trying to get my search results to fade out when a new search is made
@knight2 The API is a bit different so better to check out the docs I linked
If you don't want to use the package to do it, you'd have to basically recreate it by wrapping your components in a Transition component that tracks their mounting/visibility states (which is what the package already does)
knight2
@knight2
Mar 05 2018 15:56
@kbaig So that is why simply adding a class to the div elements you want to be animated, when state changes, it doesn't do the animation again, only on first load?
Due to having to track their mounting states?
@kbaig the official example uses this

  $(".quote-text").animate(
    { opacity: 0 },
    500,
    function() {
      $(this).animate({ opacity: 1}, 500);
      $('#text').text(randomQuote.quote);
    }
  );

  $(".quote-author").animate(
    { opacity: 0 },
    500,
    function() {
      $(this).animate({ opacity: 1}, 500);
      $('#author').html(randomQuote.author);
    }
  );
not react though.
Kaz Baig
@kbaig
Mar 05 2018 16:04
@knight2 I'd need more info about what you're trying to do and also am not sure what context the 'official example' you're providing exists in. I just reviewed the code you provided initially and it's only going to do the animation when the component mounts (and therefore is added to the DOM) since it's a keyframe. You'd get a more desirable result if you added/removed a class on state change and used CSS transitions for the animation
Darren
@DarrenfJ
Mar 05 2018 16:13
morning fCC
@kbaig hey buddy :D
Kaz Baig
@kbaig
Mar 05 2018 16:14
@DarrenfJ :wave:
Bin Gao
@gaobin1019
Mar 05 2018 16:16
I
Good Monday
coderNewby
@coderNewby
Mar 05 2018 16:17
hi @DarrenfJ @kbaig @gaobin1019 :D
Darren
@DarrenfJ
Mar 05 2018 16:17
:wave: @gaobin1019 @coderNewby good Monday back atcha
knight2
@knight2
Mar 05 2018 16:46

@kbaig here is the link to the full code.

Just trying to load some text on page load, and then change text every time user clicks the button.

How would I go about doing what you said, adding/removing class on state change to use the css transition for animation?

Bin Gao
@gaobin1019
Mar 05 2018 17:17
@krennical_twitter I think you are just got mislead by javascript's bad part. Javascript is based on prototype inheritance not class! If you want to make your CAR more powerful, "CAR.prototype.engines = 1" is a good way. The reason that your car object does not print the engines is because console.log only prints object's fields, the "engines" field IS in your car object but hiding inside the delegation chain. If you console.dir(car), you will see engines inside the —— proto —— object. Prototype inheritance cares about what the object CAN DO, but not what it IS.
Aycreativ
@Aycreativ_twitter
Mar 05 2018 17:26
Hi, I am new here.
Christopher McCormack
@cmccormack
Mar 05 2018 17:27
@Aycreativ_twitter welcome
Stephen James
@sjames1958gm
Mar 05 2018 17:29
@Aycreativ_twitter hello
Raghav Mundra
@Raghav17
Mar 05 2018 17:45
Can anybody please tell me why are my buttons coming out of my container? Here is the codepen link:
https://codepen.io/raghav96/full/ddBbNg/
Christopher McCormack
@cmccormack
Mar 05 2018 17:46
@Raghav17 What do you mean out of your container? Where should they be?
Razvan Jackson
@RazvanJackson
Mar 05 2018 17:47
@Raghav17 Actually they are in the container
@Raghav17 Use DevTool
Christopher McCormack
@cmccormack
Mar 05 2018 17:47
@Raghav17 Ah I see your issue - that's usually because you didn't properly use your container/row/col
Raghav Mundra
@Raghav17
Mar 05 2018 17:48
It is appearing like this for me:
image.png
@cmccormack What do you suggest?
Christopher McCormack
@cmccormack
Mar 05 2018 17:51
@Raghav17 put your container in a wrapper and put your max-width on the wrapper, not the container
Raghav Mundra
@Raghav17
Mar 05 2018 17:52
@cmccormack Okay, I will try it. Thanks!
CamperBot
@camperbot
Mar 05 2018 17:52
raghav17 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1363 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Mar 05 2018 17:52
or maybe don't use max-width
@Raghav17 hmm actually it looks like the problem may be where you're applying your background - maybe wrap your h1 in a row/col and add a class to the row in which the background color is set
you're padding then applying the background to the top so it makes it look like the buttons are bigger than they are
Relevant for people here. Probably :)
Bin Gao
@gaobin1019
Mar 05 2018 17:59
@alpox thanks
CamperBot
@camperbot
Mar 05 2018 17:59
gaobin1019 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1568 | @alpox |http://www.freecodecamp.org/alpox
Christopher McCormack
@cmccormack
Mar 05 2018 18:03
@Raghav17 you're also using two versions of Bootstrap - remove one and make sure you follow the docs
Ian Lee
@asparism
Mar 05 2018 18:07
yeah, thanks @alpox
CamperBot
@camperbot
Mar 05 2018 18:07
asparism sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @alpox |http://www.freecodecamp.org/alpox
Christopher McCormack
@cmccormack
Mar 05 2018 18:13
@Raghav17 I took the liberty of fixing up a few things - look at how container/row/col were used as well as removing stuff like headers which add their own padding Fork
coderNewby
@coderNewby
Mar 05 2018 18:18
thanks @DarrenfJ
CamperBot
@camperbot
Mar 05 2018 18:18
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2414 | @darrenfj |http://www.freecodecamp.org/darrenfj
alpox
@alpox
Mar 05 2018 18:19
@gaobin1019 @asparism np :)
Christopher McCormack
@cmccormack
Mar 05 2018 18:19
@alpox I really like how they use hsl in that article, it's where I've been moving as well. Makes it easier to do colors programmatically. thanks for sharing
alpox
@alpox
Mar 05 2018 18:21
@cmccormack np :) yea rgb is a bit harder to handle
Christopher McCormack
@cmccormack
Mar 05 2018 18:22
I like to pick random colors that look similar and that would be almost impossible with rgb. hsl has it's own problems but at least it's easier to control certain variables
Anker
@ankerpeet
Mar 05 2018 18:44
I've made this animation, moon orbiting the earth, and the earth keeps going up and down which is not the desired effect. Any suggestions on how to fix this? https://codepen.io/ankerpeet/pen/zRXeBj?editors=1010
Christopher McCormack
@cmccormack
Mar 05 2018 18:51
@ankerpeet move your moon div into your earth div as a child, change position to absolute, and modify bottom to top: 300px or whatever ( you may need to adjust left and right as well )
matty001
@matty001
Mar 05 2018 18:51
anybody know what's wrong with this?

@font-face {
font-family: wreg;
src: url(fonts/watchword.regular) format("truetype");

}

Christopher McCormack
@cmccormack
Mar 05 2018 18:51
@ankerpeet what's happening is because they are siblings and relative the size change is affecting the position of earth
Gulsvi
@gulsvi
Mar 05 2018 18:55
@matty001 I don't think .regular is a valid font file extension, should be .eot, .woff, .otf etc..
matty001
@matty001
Mar 05 2018 18:56
@gulsvi it's the name of the file
Gulsvi
@gulsvi
Mar 05 2018 18:56
@matty001 If you download that font from here, they're all .otf files: https://www.dafont.com/watchword.font
matty001
@matty001
Mar 05 2018 18:58
it is an .otf file I checked properties and it's embeddability is installable
tried adding .otf now still won't work
Gulsvi
@gulsvi
Mar 05 2018 19:02
@matty001 Hmmm, maybe an issue with the path. It is working for me: https://s.codepen.io/anon/pen/yvdNOa?editors=1111
@font-face {
  font-family: wreg;
  src: url(https://gulsvi.github.io/fonts/watchword/Watchword_regular_demo.otf) format("opentype");
}
.watchword-font {
  font-family: wreg, serif;
  font-size: 48px;
}
matty001
@matty001
Mar 05 2018 19:04
@gulsvi huge thanks it works now :)
CamperBot
@camperbot
Mar 05 2018 19:04
matty001 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2642 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 05 2018 19:05
Glad you got it ;)
Nick
@rhozeta
Mar 05 2018 19:12

Anyone good with vue?
Stuck with an error, I can not connect to localhost:8081/main, here is my app.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')

const config = require('./config/config')

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

app.post('/register', (req, res) => {
  res.send({
    message: 'hi ' + req.body.email + ', you have been registered'
  })
})

app.get('/main', (req, res) => {
  res.send(
    [{
      title: 'Hello World!',
      body: 'Hi there! How are you?'
    }]
  )
})

//require('./routes')(app)


console.log(`server started on port ${config.port}`)

If I make a get request to /main it refuses connection
Here's my server app.js as well:

```

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')

const config = require('./config/config')

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

app.post('/register', (req, res) => {
res.send({
message: 'hi ' + req.body.email + ', you have been registered'
})
})

app.get('/main', (req, res) => {
res.send(
[{
title: 'Hello World!',
body: 'Hi there! How are you?'
}]
)
})

//require('./routes')(app)

console.log(server started on port ${config.port})
```

sorry,
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')

const config = require('./config/config')

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

app.post('/register', (req, res) => {
res.send({
message: 'hi ' + req.body.email + ', you have been registered'
})
})

app.get('/main', (req, res) => {
res.send(
[{
title: 'Hello World!',
body: 'Hi there! How are you?'
}]
)
})

//require('./routes')(app)

console.log(server started on port ${config.port})
alpox
@alpox
Mar 05 2018 19:13
@rhozeta Where do you start your server?
And set the port?
Nick
@rhozeta
Mar 05 2018 19:14
@alpox port is set in a separate file called "config"
alpox
@alpox
Mar 05 2018 19:15
@rhozeta You should have somewhere a line along this.
app.listen(config.port, () => console.log(`server started on port ${config.port}`))
@rhozeta Maybe replace your last line - the console.log with this :)
Nick
@rhozeta
Mar 05 2018 19:17
@alpox omg.... I am so tired I didn't even think that I would have forgotten something that obvious
@alpox thanks
CamperBot
@camperbot
Mar 05 2018 19:17
rhozeta sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1571 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Mar 05 2018 19:17
@rhozeta :) Its usual to not see through anymore when you're tired.
np
Brian
@BrianCodes33
Mar 05 2018 19:24
<style type='text/sass'>

  @mixin border-radius($radius) {
   border-radius: $radius;
   -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius:
  }

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>
Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.
Your code should include the general border-radius rule that uses the $radius parameter.
Gulsvi
@gulsvi
Mar 05 2018 19:31
@BrianCodes33 https://s.codepen.io/anon/pen/xYoGom?editors=1111
Did you have a question? It seems to work fine.
Brian
@BrianCodes33
Mar 05 2018 19:34
oh i just missed a syntax error on -ms-border-radius: $radius: should be a ; instead thanks @gulsvi
CamperBot
@camperbot
Mar 05 2018 19:34
briancodes33 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2643 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 05 2018 19:35
ahhh, lol, I did not see that. glad you got it
codepen must have corrected that automagically for me...
Ian Lee
@asparism
Mar 05 2018 19:53
automagically
that's good
Matej Bošnjak
@mbosnjak01
Mar 05 2018 20:02
^
matty001
@matty001
Mar 05 2018 20:10
@gulsvi I have the same problem with the font "league spartan"
i'm guessing i'll just have to get the url online instead of telling it to find it in my files, don't really know how to tho :worried:
Gulsvi
@gulsvi
Mar 05 2018 20:13
@matty001 yeah, the files need to be accessible. Put them in github like I did
You can drag and drop files into your github.io repo - no need to set up git or anything. It can all be done in the browser
matty001
@matty001
Mar 05 2018 20:26
Anker
@ankerpeet
Mar 05 2018 20:26
@cmccormack thanks!
CamperBot
@camperbot
Mar 05 2018 20:26
ankerpeet sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1364 | @cmccormack |http://www.freecodecamp.org/cmccormack
matty001
@matty001
Mar 05 2018 20:27
whoops wrong tab
kybernetika
@kybernetika
Mar 05 2018 21:09
Hey folks - quick questions:
  1. What version of Bootstrap are we being taught?
Aditya
@ezioda004
Mar 05 2018 21:10
In the live version? BS 3 I believe
Stephen James
@sjames1958gm
Mar 05 2018 21:10
@kybernetika 3 in the current version 4 in the beta
Amit Patel
@AmitP88
Mar 05 2018 21:10
@AndroidNinjaX no worries. I'll have a week off of work starting next month, so I plan on using that week for code refactoring and working on algorithms
kybernetika
@kybernetika
Mar 05 2018 21:10
  1. I'm trying to create a single well, similar to the tribute page example, but I can't get either container or container-fluid to change margins - can anyone point me to a resource that goes over that in more detail? One's I have found have not been a help.
@ @ezioda004 @sjames1958gm thank you!
CamperBot
@camperbot
Mar 05 2018 21:11
kybernetika sends brownie points to @ezioda004 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @ezioda004 |http://www.freecodecamp.org/ezioda004
:star2: 9059 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Zentriks
@Zentriks
Mar 05 2018 21:33
@Zentriks
Good Evening
I am making Movie Search Website that recommends you what Movie to watch. My question is do i need strong javascript and php to make it work good?
It's like movie search engine
LydaTech
@lydatech
Mar 05 2018 21:35
@sjames1958gm BS4 isnt in beta.
Gulsvi
@gulsvi
Mar 05 2018 21:35
@lydatech He's referring to the Free Code Camp Beta
(kind of confusing for those of us who dealt with BS4 beta for two years lol)
@kybernetika If you're using Bootstrap 4, the well class doesn't exist - they now use card
And they're fairly different than a well: https://getbootstrap.com/docs/4.0/components/card
@Zentriks Yes, you'll need strong JavaScript for that - not necessarily PHP though
I'm guessing you'll talk to an API, but if you want to have a server with recommendations stored for users who log in, for example, then you may need to know a backend language like PHP, Node.js, etc. depends on the features and functionality you want
kybernetika
@kybernetika
Mar 05 2018 21:39
@gulsvi thanks! I figured it out, was writing margin styles incorrectly.
CamperBot
@camperbot
Mar 05 2018 21:39
kybernetika sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2646 | @gulsvi |http://www.freecodecamp.org/gulsvi
matty001
@matty001
Mar 05 2018 21:44
@gulsvi after a break I decided to try to upload it as you said but it seems to not be working again
@font-face {
font-family: 'ls';
src: url(https://matty001.github.io/ls.otf) format("opentype");
}
Gulsvi
@gulsvi
Mar 05 2018 21:52
@matty001 That path doesn't exist, you need a repository named matty001.github.io
Before checking the syntax of your CSS to see if the font works, make sure you can access the file first
iaburaad97
@iaburaad97
Mar 05 2018 21:53
hello
I'm a junior programmer
Brad
@bradtaniguchi
Mar 05 2018 21:55
@iaburaad97 hello
iaburaad97
@iaburaad97
Mar 05 2018 21:58
Is this a beginner coder group ?
Gulsvi
@gulsvi
Mar 05 2018 22:00
@iaburaad97 This is a chat room for help with Free Code Camp front end development projects
Brad
@bradtaniguchi
Mar 05 2018 22:00
@iaburaad97 yes, freeCodeCamp is for beginners, but there are a lot of experienced developers aswell
iaburaad97
@iaburaad97
Mar 05 2018 22:00
Thanks
I hope that i will get a huge experience here
With your help experienced squad
Brad
@bradtaniguchi
Mar 05 2018 22:05
@iaburaad97 Haha, I would say the best way to get experience is spending time learning. We can only help so much :)
Zentriks
@Zentriks
Mar 05 2018 22:05
@gulsvi well it will be a search engine that recommends movies based on random quetes or words
i made home page and search bar and some info now i need to work on engine but i am beginner on JavaScript that's why i asked :)
ty for advice
maybe it's a biger and harder project for start but i wana do it
Brad
@bradtaniguchi
Mar 05 2018 22:12
@Zentriks It's nice to push yourself, you learn a lot more. I mean Id say if your not frustrated, your not actually learning haha
HerbiScript
@HerbiScript
Mar 05 2018 22:15
Any reason why this log wouldn't be returning anything to the console? Validated my link to make sure it's in JSON format.
```
$(document).ready(function(){
  var url = 
      "https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en";
  $.getJSON(url, function(data){
    console.log(data.quoteText);
    });
});
Zentriks
@Zentriks
Mar 05 2018 22:16
I know il post my work a couple of days. may i ask you a question?
HerbiScript
@HerbiScript
Mar 05 2018 22:16
f.y.i It won't return anything, not even a string.
Zentriks
@Zentriks
Mar 05 2018 22:16
can you recommend some basic tutorial or source for creating search engine?
Brad
@bradtaniguchi
Mar 05 2018 22:21
@HerbiScript Are you sure your not getting an error/ or the request isn't pending forever?
Check the browsers network tab
@Zentriks I wouldn't create a search engine. Unless your talking about searching your own data for your own app, then that's different. But say making google is super difficult
Zentriks
@Zentriks
Mar 05 2018 22:23
Not like gogle one
but one for movie site
Brad
@bradtaniguchi
Mar 05 2018 22:24
@Zentriks Most of the search would be backend related, so the resource to learn about this would be based on what backend your using (node/java/python/php etc(
HerbiScript
@HerbiScript
Mar 05 2018 22:24
@bradtaniguchi doesn't seem like anything is pending forever. longest time is 334ms for the api call to load.
Brad
@bradtaniguchi
Mar 05 2018 22:24
@HerbiScript What does the response look like when your check it out in the inspector console?
Zentriks
@Zentriks
Mar 05 2018 22:25
I was thinking about site with search engine and data base that recommends you movies when you type what you love to watch :)
then it gives you a list of movies that would be good for user to watch
HerbiScript
@HerbiScript
Mar 05 2018 22:27
@bradtaniguchi Ohh shit I didn't see all these errors. "Failed to load https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access." is what it gives back everytime I run it
Brad
@bradtaniguchi
Mar 05 2018 22:27
Sounds like a pretty big project, first thing is to figure out the requirements (what you WANT), then think about how you want to achieve it. Then you need to ask yourself what sort of architecture your going to use (what backend, front-end, design etc)
Zentriks
@Zentriks
Mar 05 2018 22:27
ty for advice don't wana spam here
Brad
@bradtaniguchi
Mar 05 2018 22:28
But if you don't really know where to start after figuring out the requirements, then you should maybe look into existing systems and doing your own research
@HerbiScript Yea it was CORS the whole time, you probably would of seen the error if you provided an error callback to your request aswell. But checking the inspector usually is the fastest check
HerbiScript
@HerbiScript
Mar 05 2018 22:30
Thanks @bradtaniguchi I'll be sure to check there next time. I was dumbfounded lol. Gonna go figure this out now
CamperBot
@camperbot
Mar 05 2018 22:30
herbiscript sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Mar 05 2018 22:31
@HerbiScript haha np, usually the easiest way to get around CORS issues is using JSONP instead of JSON. Its just a limitation/security thing so websites can't make requests to other websites
HerbiScript
@HerbiScript
Mar 05 2018 22:32
right, it even gives directions for using JSONP right in their api so should be a quick fix. thanks again, mate have a good one@bradtaniguchi
Brad
@bradtaniguchi
Mar 05 2018 22:33
@HerbiScript np :D
noahaguy
@noahaguy
Mar 05 2018 22:50
Hey I'm just getting into front development and I am currently creating a tribute page. My question is regarding codepen, why are the bullet points in my <ul> statements not lining up with my text. For reference here is my page: https://codepen.io/noahaguy/pen/Jpqvar thanks ; )
Brad
@bradtaniguchi
Mar 05 2018 22:53
@noahaguy I don't see any bullet points though, are you talking about the - character?
noahaguy
@noahaguy
Mar 05 2018 22:54
Well what I'm seeing is my bullet point isn't aligned with my text. It's floating on top of the text.
if you scroll down you should see it
Brad
@bradtaniguchi
Mar 05 2018 22:57
Interesting I don't see the bullet point on firefox
noahaguy
@noahaguy
Mar 05 2018 22:58
I'm using chrome
noahaguy
@noahaguy
Mar 05 2018 23:01
yeah I also added a <b> tag for the timeline. Do think the problem maybe that I used text-align: center in css
?
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:04
no bullets anywhere
oh there it is now
noahaguy
@noahaguy
Mar 05 2018 23:06
Really I just realized I messed up and put the <li> tag before the the <ul> tag. After changing that I saw the bullet point move to the far left of the page while the text was centered.
Hey I think I just fixed it I changed the text-align to left and increased the margin-left tag in the <li> css section.
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:10
but then it's not centered under the picture, and I assume you want it centered?
noahaguy
@noahaguy
Mar 05 2018 23:10
I decided to manually center it using the margin tag in css.
Not sure if thats the way to go around it
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:11
not really :|
noahaguy
@noahaguy
Mar 05 2018 23:12
Yeah I'm stumped on how to align the bullet point with my text without having to use margins
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:13
@noahaguy try this
body {

  width:80%;
  margin:0 auto;
  margin-top: 60px;
  text-align:center;
}
ul {
   padding-left:0;   
}
ul li {

  font-size: 16px;
list-style-position:inside

}
noahaguy
@noahaguy
Mar 05 2018 23:15
I see you added the list-style-position tag what's that do? Btw the way I think that did it.
I can look it up
np
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:15
@noahaguy holy damn i saved it ... my bad there, although I can just get it back the way it was
didn't mean to save
noahaguy
@noahaguy
Mar 05 2018 23:16
np dude
tyvm
Matej Bošnjak
@mbosnjak01
Mar 05 2018 23:16
oh wait
https://codepen.io/noahaguy/pen/Jpqvar this is yours ... when i did ctrl + S it copied it to my codepen
kek
so just try that little css i gave you, it'll help you out. don't forget to read about propertiesyou don't understand. gotta sleep now, work in 6 hours
noahaguy
@noahaguy
Mar 05 2018 23:18
thanks man will do
Manan Shah
@mananshah51
Mar 05 2018 23:21
Can anyone explain the difference between "Objects and Functions"? Please explain in a very simple way. I tried to look online but was not able to figure it out.
Gulsvi
@gulsvi
Mar 05 2018 23:21
@noahaguy A margin is required to move the bullet over to the right. When you center text, the text for the bullet will be in the center, but the bullet will remain on the left. Since you have added bootstrap to your project, put everything in a bootstrap container -> row -> column and use offsets to control how far it goes from the left side of the page. https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
It's a good idea to practice the Bootstrap grid for a few hours and get comfortable with it before diving in to create your first web page
Bin Gao
@gaobin1019
Mar 05 2018 23:22
@mananshah51 in javascript, function is object with some special properties
Gulsvi
@gulsvi
Mar 05 2018 23:23
The word object can mean a lot of things in JavaScript ^
Bin Gao
@gaobin1019
Mar 05 2018 23:24
@mananshah51 the difference is, function have "property" field. Another difference is function can be invoke, when been invoked, there will be "this" and "arguments" passed to it.
Manan Shah
@mananshah51
Mar 05 2018 23:33
@gaobin1019 Do not Objects have Properties ?
Bin Gao
@gaobin1019
Mar 05 2018 23:38
@mananshah51 non-function objects do not have "prototype" property, it is been used only as a constructor. https://jsbin.com/kopibut/1/edit?js,console, open the chrome console and see the difference.
Stephen James
@sjames1958gm
Mar 05 2018 23:54
@mananshah51 All functions are object, but not all objects are functions.
As @gaobin1019 said functions can be called (or invoked). None arrow functions have a this value and arguments.
An arrow function (ES6) will not have a separate this value or arguments object
Manan Shah
@mananshah51
Mar 05 2018 23:58
@sjames1958gm Thank you so much for your help , but things clear, but still trying to understand it myself. Thanks again.
CamperBot
@camperbot
Mar 05 2018 23:58
mananshah51 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9060 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Manan Shah
@mananshah51
Mar 05 2018 23:58
@gaobin1019 Thank you so much for the help.
@gulsvi Thank you so much for the help.
CamperBot
@camperbot
Mar 05 2018 23:58
mananshah51 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2647 | @gulsvi |http://www.freecodecamp.org/gulsvi
Bin Gao
@gaobin1019
Mar 05 2018 23:58
Glad I can help :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 05 2018 23:59
https://codepen.io/MuhammedK/pen/jZoXJP?editors=1100
How can i sort out the contact section at the bottom?