These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Oct 2016
it will give you the code you need
c0d0er
@c0d0er
Oct 01 2016 00:02
@KoniKodes i tried earlier, either put code before or after input code, doesnt work, since the search icon will be both out of input box, one is left another is right
@VaseJS i didnt find it, any more detailed info?
VaseJS
@VaseJS
Oct 01 2016 00:04
@c0d0er <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
Eddie Cornelious
@EddieCornelious
Oct 01 2016 00:05
I have a backend quesition
Toni Shortsleeve
@KoniKodes
Oct 01 2016 00:05
@c0d0er I had an input for the search, then immediately after I created a button with the icon. I didn't use a form.
VaseJS
@VaseJS
Oct 01 2016 00:05
@c0d0er take out what you don’t need but the structue will get it
@c0d0er Hint: form-control-feedback is important
c0d0er
@c0d0er
Oct 01 2016 00:29
@KoniKodes @VaseJS thanks for all your help
CamperBot
@camperbot
Oct 01 2016 00:29
c0d0er sends brownie points to @konikodes and @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @konikodes |http://www.freecodecamp.com/konikodes
:cookie: 277 | @vasejs |http://www.freecodecamp.com/vasejs
c0d0er
@c0d0er
Oct 01 2016 00:31
@VaseJS is there any good article about this form-control-feedback?
megancoyle1
@megancoyle1
Oct 01 2016 01:16
Hey guys! Can someone help me with my button problem? Sometimes the button is unclickable when directly under the navbar that stays at the top of the screen. I cant figure out how to make the buttons not interfere with eachother https://codepen.io/Sinestra/full/zKdWkV/
Rachel Reinheimer
@glgirl28
Oct 01 2016 01:19
@jmlucien Very thorough information and clean look. I encourage you to move the styling to the CSS section of code pen and keep the HTML section for just the elements. Great job!
megancoyle1
@megancoyle1
Oct 01 2016 01:22
How do i make it so the navbar doesnt get in the way of the bottom buttons? the linkedin and fb get in the way of about and contact
Greg Duncan
@GregatGit
Oct 01 2016 01:27
@megancoyle1 when your using codepen - you use the settings to add bootstrap - you would add it in the css and you also need jQuery.js and bootstrap.js for it to work properly
Evan W
@Dirtier
Oct 01 2016 01:28
Anyone wanna help me figure out why my form submit isn't working? I'm trying to use it as a search for my WikiViewer project
It was working before I tweaked it to make it better, but only intermittently, and not on mobile devices..
I think it has something to do with the way I'm getting the text from the form and passing it to the wiki API. But I'm not sure how else to do this without using an actual 'Submit' button. I want it to just go when you press enter in the Search box
Greg Duncan
@GregatGit
Oct 01 2016 01:30
@megancoyle1 here is a template to compare your nav bar with http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
megancoyle1
@megancoyle1
Oct 01 2016 01:30
Thank you!
Evan W
@Dirtier
Oct 01 2016 01:32
Anyone have any idea? Any help would be appreciated
d wilder
@alhazen1
Oct 01 2016 01:33
@Dirtier I think that for submit to work you need a form and a submit button. But you can use any element and any event on that element to fire your code
Evan W
@Dirtier
Oct 01 2016 01:34
@alhazen1 Thats how I got it to work before, but without the form it doesn't work on mobile devices
Bc with mobile device keyboards you can only just hit return or w/e if it recognizes a 'form'
AliFox15
@AliFox15
Oct 01 2016 01:34
Can anyone tell me how to center the img?I kinda of forgot
I tyied to use margin:0,auto,0;and It doesn't work
Evan W
@Dirtier
Oct 01 2016 01:35
@alhazen1 Unless I can figure out how to make a key event for the return key on mobile devices, I tried looking it up and I can't find any documentation on that
@AliFox15 center it in what?
Evan W
@Dirtier
Oct 01 2016 01:36
@alhazen1 You see what I'm talking about?
d wilder
@alhazen1
Oct 01 2016 01:36
@Dirtier I have seen at least one that searches with every key event kind of in the way google search make search suggestions. It was a bit much
Evan W
@Dirtier
Oct 01 2016 01:37
@alhazen1 Haha that would be awesome, but yea all I really care about is that they're able to search whether theyre on a phone or not and without a submit button
I mean if theres some other way to do it I'm all ears
d wilder
@alhazen1
Oct 01 2016 01:37
@alhazen1 I would put some type of search button or icon as it is more intuitive and would work on any device
Evan W
@Dirtier
Oct 01 2016 01:38
Hmm ok. Is there anyway I can just make hitting enter trigger that button?
use a .bind or something
Thats what I did before, I just hit the button element so they wouldnt see it anyway
Greg Duncan
@GregatGit
Oct 01 2016 01:38
@Dirtier you shouldn't name your functions or varibles 'ready' -
Evan W
@Dirtier
Oct 01 2016 01:38
But then yet again, I didn't know the key id on mobiles
@GregatGit It is the ready function
Thats why its named that. I know
Greg Duncan
@GregatGit
Oct 01 2016 01:39
??
Evan W
@Dirtier
Oct 01 2016 01:39
@GregatGit Scroll all the way down, you'll see what I'm talking about
@GregatGit const ready = () => { IS the ready function, the it's called at the very bottom.
then*
Greg Duncan
@GregatGit
Oct 01 2016 01:40
so what does your ready function do?
Evan W
@Dirtier
Oct 01 2016 01:40
?
d wilder
@alhazen1
Oct 01 2016 01:40
@Dirtier capture enter key event and have that fire off your 'submit' code. But that still leaves you with nothing on a phone / tablet
Evan W
@Dirtier
Oct 01 2016 01:40
you dont know what $(document).ready() is?
@alhazen1 Yea thats what I was doing before. Blahhhhh.
AliFox15
@AliFox15
Oct 01 2016 01:41
It's jQuery startup..I think
Evan W
@Dirtier
Oct 01 2016 01:42
@GregatGit my ready function is another way of encapsulating the entire thing in $(document).ready(function(){ })
d wilder
@alhazen1
Oct 01 2016 01:42
@Dirtier You could have button / icon button that is hidden at large screen but shown at tablet- sizes
AliFox15
@AliFox15
Oct 01 2016 01:42
I added the class,and writed the .picture-center,why the picture does not align center
Evan W
@Dirtier
Oct 01 2016 01:43
so at the bottom of the screen it says $(document).ready(ready) ---> works the exact same way, but much easier to read.
@alhazen1 Ooooo true, true. I would still rather have them just be able to hit enter like you do when searching anywhere else.
But I guess I'll just do what you said until I find out how to do that
@alhazen1 thanks for the help
CamperBot
@camperbot
Oct 01 2016 01:44
dirtier sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @alhazen1 |http://www.freecodecamp.com/alhazen1
d wilder
@alhazen1
Oct 01 2016 01:44
@AliFox15 Maybe you didn't save yet. All I see is an empty html skeleton
Greg Duncan
@GregatGit
Oct 01 2016 01:44
@Dirtier sorry - I was giving you a tip (my opinion really) give your functions very distinct names and that make it clear what they are doing
AliFox15
@AliFox15
Oct 01 2016 01:44
Sorry@alhazen1 ,Now it's saved
@alhazen1
d wilder
@alhazen1
Oct 01 2016 01:45
@GregatGit I agree that having functions with same name could lead to some serious conflicts
Evan W
@Dirtier
Oct 01 2016 01:45
@GregatGit Haha yea I feel you. Most people who do it this way name it ready though, bc that really is the clearest description there is I think lol
I mean what do you think of when you read a function named ready lol
There really is an advantage to doing it like that, it cuts load times down by a ton by only putting essential stuff inside the ready function, and having it call functions outside of it that are can be loaded as they are needed
AliFox15
@AliFox15
Oct 01 2016 01:47
Is it in the center of the page now?
d wilder
@alhazen1
Oct 01 2016 01:47
@AliFox15 If you use text-center you will need to apply it to every div you want centered. Put that class in the div wrapping the image
<div class="text-center"><img class="picture-center" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"/></div>
Evan W
@Dirtier
Oct 01 2016 01:50
@alhazen1 Here's my working version, but again, it only works on computers.
And sometimes when you hit enter it doesn't even show the wiki, other times it does. No idea why. I'm not getting any console errors from the API or anything
The enter key wont even register when you use it inside this little window in the chat room =S
There has to be an easier way to do this
Is there anyway to make a form submit action just pass along the value of the text input to a function?
I cant think of a way to write that in html
AliFox15
@AliFox15
Oct 01 2016 01:54
@Dirtier Center it in body element
Evan W
@Dirtier
Oct 01 2016 01:54
huh
AliFox15
@AliFox15
Oct 01 2016 01:56
wow,just firgured it out
I need to add center-block to my img element
d wilder
@alhazen1
Oct 01 2016 01:57
This message was deleted
Evan W
@Dirtier
Oct 01 2016 01:58
@AliFox15 are you using bootstrap?
@AliFox15 centering in bootstrap is as easy as making all the columns add up to 12 lol
if I want something to be centered I can make it <div class='col-xs-4'> and then surround that div with two other divs just like it with class='col-xs-4'>
4 + (centered 4) + 4
= 12
Don't set any static widths in your css and bam you have a responsive, centered div
Just put the image inside it
d wilder
@alhazen1
Oct 01 2016 02:00
@AliFox15 Yes, your best bet is to use Bootstrap. In addition to ease of layout it will give you responsive layout that will look good on smaller screens like smart phone
Evan W
@Dirtier
Oct 01 2016 02:02
I thought he said he was using bootstrap earlier
idk maybe not
Ravishasthri
@ravi6112
Oct 01 2016 02:07
@ravi6112
guys i have done my portfolio page plz give me some review i know i have to crct something plz advise me
https://codepen.io/ravishasthri/pen/YGVdzj
AliFox15
@AliFox15
Oct 01 2016 02:09
Hi guys,just come into a new problem,I can use center text to move the text to the center of page,but when it comes to ul li,the dot is not following.
Can I fix it?
Evan W
@Dirtier
Oct 01 2016 02:10
@AliFox15 you can't center lists with text-align
It will center the text, but not the actual <li> element
Wrap the list in a div, center the div.
@ravi6112 Your links don't appear to be working in your navbar, and the pics aren't loading for me
Also the navbar seems to be always open or something
@ravi6112 In that project you want the links to link down to some other part of the page. So make your navbar links like this href='#nameofdivwhereyouwantlinktogo'
like href='#portfolio' if the are where you have your portfolio is in a div with the id of 'portfolio'
area*
d wilder
@alhazen1
Oct 01 2016 02:15
@ravi6112 Looks like you well on your way to an awesome portfolio but I don't think the public has permissions on your images.
JD Tadlock
@jdtdesigns
Oct 01 2016 02:17
@Dirtier you can use offsets to center ;)
tommy
@tommygebru
Oct 01 2016 02:19
hey @jdtdesigns
JD Tadlock
@jdtdesigns
Oct 01 2016 02:21
sup @tommygebru
tommy
@tommygebru
Oct 01 2016 02:22
nothing much ... I am trying to prepare myself for these intermediates :smile:
how are you doing?
JD Tadlock
@jdtdesigns
Oct 01 2016 02:23
pretty good, you?
d wilder
@alhazen1
Oct 01 2016 02:27
@ravi6112 To make your internal links work you will need some anchors.
<li><a href="#contacts">Contact</a></li>
<a name="contacts"></a>
     <h2> Contact Me<h2>
AliFox15
@AliFox15
Oct 01 2016 02:30
ugh.. @Dirtier here's my code <ul><div class="text-center">
<li>.......</li></div></ul> ,And the dots won't follow.
tommy
@tommygebru
Oct 01 2016 02:39
I just submitted my wiki-viewer but forgot to get feedback first.... looks like Wiki-viewer 2.0 is going to be released soon @jdtdesigns
furofo
@furofo
Oct 01 2016 03:09
hey guys can anyone help me with a problem with my portfolio page im making
AliFox15
@AliFox15
Oct 01 2016 03:22
yes
VaseJS
@VaseJS
Oct 01 2016 03:29
@furofo no help yet?
Matthew Brown
@vledoc
Oct 01 2016 03:35
what is the problem @furofo?
AliFox15
@AliFox15
Oct 01 2016 03:39
hey,can you guys tell me why my page is not shrink as it should be..I set #main width to 50%,nothing changes
Ken Haduch
@khaduch
Oct 01 2016 03:40
@AliFox15 - you should have your id=#main as id="main" - not sure if that would make it work, but that's not correct as it is.
@AliFox15 - it does change it.
AliFox15
@AliFox15
Oct 01 2016 03:41
wow,thank you!It just worked!!!
It's alive,It's alive!!
Ken Haduch
@khaduch
Oct 01 2016 03:42
@AliFox15 - it's hard to read with the grey text on the black background, but it's coming along
AliFox15
@AliFox15
Oct 01 2016 03:43
yeah,I'm still coding
JD Tadlock
@jdtdesigns
Oct 01 2016 03:45
@AliFox15 You only put the html that goes in between <body></body> in the html panel
css goes in the css panel of course
and libraries frameworks you may use are added through Settings->CSS and Settings->JS
AliFox15
@AliFox15
Oct 01 2016 03:45
oh...
Ok,I will make sure of that.
JD Tadlock
@jdtdesigns
Oct 01 2016 03:47
;)
c0d0er
@c0d0er
Oct 01 2016 04:34
@alhazen1 my code in codepen shows perfectly, but why the search icon doesnt show in my local file?
Ravishasthri
@ravi6112
Oct 01 2016 04:41
thank you @alhazen1
CamperBot
@camperbot
Oct 01 2016 04:41
ravi6112 sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @alhazen1 |http://www.freecodecamp.com/alhazen1
c0d0er
@c0d0er
Oct 01 2016 04:41
does anybody know why my code in code pen works perfectly, why in my local file doesnt show the search icon?
Capture.PNG
Ravishasthri
@ravi6112
Oct 01 2016 04:42
thank you @Dirtier for your review
CamperBot
@camperbot
Oct 01 2016 04:42
ravi6112 sends brownie points to @dirtier :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @dirtier |http://www.freecodecamp.com/dirtier
c0d0er
@c0d0er
Oct 01 2016 04:45
this is my local html file
<!DOCTYPE html>
<html lang="en">
<head>
<style> 
</style>
    <meta charset="UTF-8">
    <title>Wikipedia Viewer</title>   

    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
      <link rel="stylesheet" href="wikiStyle.css">

</head>
<body>
<div class="container-fluid " >
        <div class="row text-center aligeneral">
   <div class="wiki-area"> 
     <br>
     <br>
         <h1>Wikipedia Viewer</h1> 
         <br>
         <br>
  <form id="form-container" onsubmit="return false">    

         <div class="input-group">
  <span  class="input-group-addon" >
        <i class="fa fa-search"></i>
    </span>
         <input class="form-control" type="search" id="wikiSearch" oninput="loadData()" value="" placeholder="Search..."> 

        </div>

         <br>
         <br>
         <br>
         <a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-primary" target="_black">Random Wikipedia</a>
      </form>

      <div id="wikiContent">

      </div>           
         </div>
        </div>
     </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
    <script src="jquery.min.js"></script>
    <script src="wikiScript.js"></script>
</body>
</html>
this is my local css file
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;}
body
{
  background-color:#008299;  
background-size: cover;  
}
#wikiDiv{
  width: 1150px;
background-color:lightgray;
margin-top: 40px;
margin-left: auto;
    margin-right: auto;
padding-top: 1px;
padding-left: 20px;
padding-right: 10px;
color:black;
padding-bottom: 5px;
border-radius: 10px;
text-align:left;
}
h1{
  font-size: 60px;
  font-weight: bold; 
  color: white;
}

#wikiTitle{
  color:darkcyan;
}
input[type=search]{
width: 10%;
border-radius: 4px;
    font-size: 20px; 
}

form {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}
Chris Cullen
@123xylem
Oct 01 2016 04:54
pSeq.push(turnSeq-1);
How do you push a last element of 1 array into another?
AliFox15
@AliFox15
Oct 01 2016 05:48
body{
margin-top:60px;
margin-left:20%;
margin-right:20%;
border:1px solid black;
}
I cannot figure it out,If I set bg-color inside the css,But it changes full page color,not just within the border.
If I want control the color within border.How should I do?
Henry Cabello
@hacu9
Oct 01 2016 05:53
http://codepen.io/cabello986/pen/VKWbEZ How can i make it so the Clock function calls the break function n so on when the timer hits 0 ?
vtarun
@vtarun
Oct 01 2016 06:07
Hi , i want to use angularjs for "Random Quote machine" , but when i am calling "http://api.forismatic.com/api/1.0/" api , it is giving Cross origin error. How to get around this cors?
Muhammad Hasham
@MohammadHasham
Oct 01 2016 06:18
How can i make the ul elements and p element is the same row at some distance from each other
http://codepen.io/Mohammad_Hasham/pen/kkogvd
AliFox15
@AliFox15
Oct 01 2016 06:44
@MohammadHasham <p>tag will force a break in line.You can try bootstarp col-xs-6
not col-6
Can anyone tell how to just change the color of body,not the whole page.I cannot figure it out
I want to just my content area to be silver,not the whole page
Any help is fine.
Henry Cabello
@hacu9
Oct 01 2016 06:51
wrap your content in a div
and add a background to it
@AliFox15 the first div add class="container" change the background color from body css to class .contaner{background-color:silver;}
Chris Cullen
@123xylem
Oct 01 2016 06:55
http://codepen.io/123xylem/pen/jrAKPN?editors=0011
If anyone has time please help me with my SIMON game... It may take 4 mins to understand but I am really stuck now and its hard to find help online when each question is so specific.
Anshul
@AnshulMalik
Oct 01 2016 07:03
What is it? SIMON @123xylem
Richard Smith
@r1chard5mith
Oct 01 2016 07:15
@123xylem what is your question about it? I can see it isn't working right - what are you trying to do right now?
Muhammad Hasham
@MohammadHasham
Oct 01 2016 07:19
@AliFox15 i am not using bootstrap
Greg Duncan
@GregatGit
Oct 01 2016 07:27
@123xylem you could start by using the 'Tidy JS' button - it will make your code easier to read
AliFox15
@AliFox15
Oct 01 2016 07:33
It worked @hacu9
Greg Duncan
@GregatGit
Oct 01 2016 07:36
@123xylem Your logic is very hard to follow. I recommend you change the names of your varibles and functions to give the outsider some clarity. So not "TL" or "tl" but "green" - "index" instead of "ind".
Henry Cabello
@hacu9
Oct 01 2016 07:47
@AliFox15 im glad c:
Darth Skywalker
@adityaparab
Oct 01 2016 07:47
ind sounds like short for India
Henry Cabello
@hacu9
Oct 01 2016 08:10
Chris Cullen
@123xylem
Oct 01 2016 08:16
@AnshulMalik yes simon game... @r1chard5mith Themain problem is I no longer know what my answers are doing... it inputs user answers to pSeq but it doesnt do so with the correct element sometimes and when i compare them in correct() it doesnt seem to compare them properly either... @GregatGit tidy is good and I do now and again but when i close up all the functions and press tidy it reopens them so i try not to too much.. point taken on names like cSeq pSeq btw
@hacu9 looks cool. nice animation.. 1 minor bug is when u stop clock and change break time it retains seconds in breaktime
maybe a bit more css on colors and border of time aswell maybe. bbut thats just aestetics
Richard Smith
@r1chard5mith
Oct 01 2016 08:22
@123xylem I think it's easier to generate the whole sequence once and then play the first note of it each time you restart
Chris Cullen
@123xylem
Oct 01 2016 08:25

$(".panel").on("click", function() {
  cpuTurn = 1;
  var panelId = $(this).attr("id");
  audioF[panelId.toLowerCase()].play(); //<-----use id as key
  $("#" + panelId).toggleClass('animate');
  //HOW DO i get this to activate and go back to default onclick?

  turnSeq.push(panelId);
  if (turnSeq.length >= pSeq.length) {
pSeq.push(turnSeq.pop());
  }; //Pushes only new moves into pSeq

 // if (turnSeq.length == cSeq.length) {
    //starts cpu only when user finished move or wrong
    // cpuTurn = 1;
    console.log("turn", turnSeq, turnSeq.length, "player", pSeq, pSeq.length, "cpu", cSeq, cSeq.length);
setInterval(correct(),200);
});








function correct(){if(cSeq.length==pSeq.length){
  for ( i = cSeq.length;  i--;) {

      if (cSeq[i] != pSeq[i]) {audioF['wrong'].play();

        console.log("wrong", cSeq, pSeq[i], pSeq);
    pSeq = [];  setInterval(lastSeq(), 4000); // Say wrong and replay last seq
        // cpuTurn = 0;};    
                              }

else { 
  pSeq=[];
     roundVal++;
    $("#round").html("Round: "+roundVal);
    setInterval(cpuSeq(), 1000);
    console.log(cpuTurn, "Round= ", roundVal);
     }
  }}}
So sometimes pSeq doesnt get pushed the correct element (the new element of turnSeq - prev pSeq elements)>>> Even when it does happen the correct() check doesnt always recognise a match
At this point I am confused whats going on and arent sure where to even coonsole.log things
to debug
Richard Smith
@r1chard5mith
Oct 01 2016 08:29
@123xylem your for statement in the 'correct' function is missing a conditional
Muhammad Hasham
@MohammadHasham
Oct 01 2016 08:47
i am really frustrated and stuck with this i want to move my h3 element and ul element in one row but i have been failed to do so can anyone please help me with this stuff
http://codepen.io/Mohammad_Hasham/pen/kkogvd
Ayush Agrawal
@ayush1810
Oct 01 2016 08:54
How do I learn Bootstrap ?
Chris Cullen
@123xylem
Oct 01 2016 08:56
@r1chard5mith yea when i add i>0it makes every answer incorrect
Richard Smith
@r1chard5mith
Oct 01 2016 09:03
@123xylem It's not a simple challenge - you may need to rethink the logic to make it simpler to reason about
@123xylem I say this knowing how much trouble I got into once I had to start cancelling and restarting the click handlers on the buttons
Rimi.
@Codevotee
Oct 01 2016 09:11
@ayush1810 You do the FreeCodeCamp courses that are on Bootstrap then you can check out http://www.w3schools.com/bootstrap/
Chris Cullen
@123xylem
Oct 01 2016 09:32
@r1chard5mith yeaa may have to redo it or somehing... any video links that might help?
Sorin Ruse
@sorinr
Oct 01 2016 11:55
@MohammadHasham here is the solution
AliFox15
@AliFox15
Oct 01 2016 12:07
@ayush1810 Follow FreeCodeCamp courses
Dark Vanity
@DarkVanity
Oct 01 2016 12:14
Hi guys, bit of a amateur question but how do you set a list of websites with a wikipedia url in the front neatly?
ADIL KARMOUZI
@mradil16
Oct 01 2016 12:50
hi guys, How to make navbar elements (h1/ul) in fixed position without moving , when resizing the browser ?
Muhammad Hasham
@MohammadHasham
Oct 01 2016 12:56
@sorinr Thanks.
CamperBot
@camperbot
Oct 01 2016 12:56
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 753 | @sorinr |http://www.freecodecamp.com/sorinr
Muhammad Hasham
@MohammadHasham
Oct 01 2016 12:57
@sorinr you have always been really helpful.Can you tell me how did that worked with centering and allowing 100% width
Sorin Ruse
@sorinr
Oct 01 2016 13:04
@MohammadHasham have made changes in css to: #rowz and .col-6. as you have the li floated right you should inverse the order of the li's in the html
Monesul Haque
@mones-cse
Oct 01 2016 13:13
hi everyone
i am stuck at tic tac toe game
there is no specific problem i got
i just couldn't figure it out how i am going to start
what could be the steps to complete the full project
should i use single array or 2d array to store the data of tic tac toe
should i just start for only human to human game ?
Stephen James
@sjames1958gm
Oct 01 2016 13:15
@mones-cse I used a single array because it was easier to work with.
You'll need a function that takes that array and determines if there is a winner or a draw.
Monesul Haque
@mones-cse
Oct 01 2016 13:17
@sjames1958gm thanks
CamperBot
@camperbot
Oct 01 2016 13:17
mones-cse sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3596 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 01 2016 13:19
@mones-cse Create a simple board (I used buttons) first and get the logic to work then style
Farhad
@fhdhsni
Oct 01 2016 13:33
So I don't actually need to send a request to twitch api? Could you guys explain what am I suppose to do with these informations? https://gist.github.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8
How am I suppose to know who's online? who's offline?
Stephen James
@sjames1958gm
Oct 01 2016 13:35
@fhdhsni If you request using the streams url the stream will be null for offline users.
Farhad
@fhdhsni
Oct 01 2016 13:38
As explained here it's suggested to hard code those informations without actually making a request.
@sjames1958gm
@sjames1958gm And there's no "stream": null. It means all of them are online. right?
I wish I could skip this project.
Artur Giniyatullin
@ArturGini96
Oct 01 2016 13:40
Hello guys. Now I'm in process of making Intermediate Front End projects. And I'm a beginner. Is it necessary now to make a good style of web-pages and styles etc. or understand the mechanism of how that works(eg. Quotes Machine) is more important? Because I've checked the same projects of another people and became sooo frustrated that I just scared and close ffc.
Seems like the whole world codes better than I do.
kirbyedy
@kirbyedy
Oct 01 2016 13:42
@ArturGIni96 no its normal
Farhad
@fhdhsni
Oct 01 2016 13:48
@ArturGIni96 I think understating what's going on under the hood is more important. But some people are more concerned about aesthetic aspect of their work. Some of us like CSS but other may like JS. And who cares about html :)
Stephen James
@sjames1958gm
Oct 01 2016 13:50
@fhdhsni If none have streams of null they are all online, yes
christocarr
@christocarr
Oct 01 2016 13:59
Hi!
Why would a css query not work? I'm testing my sites responsiveness but @media screen and (max-width:480px) and @media screen and (max-width: 767px) are not doing anything.
JD Tadlock
@jdtdesigns
Oct 01 2016 14:05
@christocarr can you post your codepen?
@fhdhsni if data.stream is true, the streamer is online. If data.stream is null/false, the streamer is offline. If the request sends back a 404, the streamer doesn't exist.
grantknaver
@grantknaver
Oct 01 2016 14:11
Hey everyone :) By chance does anyone out there know why the media querie using @media (min-width: @screen-sm-min) { ... } refuses to work
JD Tadlock
@jdtdesigns
Oct 01 2016 14:11
@grantknaver what processor are you using?
grantknaver
@grantknaver
Oct 01 2016 14:11
elaborate on processor
my using code pen
JD Tadlock
@jdtdesigns
Oct 01 2016 14:12
post your codepen
for the future what did you mean processor
christocarr
@christocarr
Oct 01 2016 14:14
JD Tadlock
@jdtdesigns
Oct 01 2016 14:15
@grantknaver You're putting @screen-sm-mn into the size. You need an actual css property and size(max-width: 545px).
Processor means a pre-processor like sass, less, stylus, ect.
grantknaver
@grantknaver
Oct 01 2016 14:16
ooo ok
@jdtdesigns here is the thing though I know it works with px, but the bootstrap website this should work?
JD Tadlock
@jdtdesigns
Oct 01 2016 14:18
@christocarr You only put what's in between <body></body> into the html panel on codepen. The <html><head><body> are all added for you automatically. You add css/js libraries/frameworks through Settings.
christocarr
@christocarr
Oct 01 2016 14:19
@jdtdesigns copy and pasted from brackets
grantknaver
@grantknaver
Oct 01 2016 14:21
I got this directly from the bootstrap page...

/ Extra small devices (phones, less than 768px) /
/ No media query since this is the default in Bootstrap /

/ Small devices (tablets, 768px and up) /
@media (min-width: @screen-sm-min) { ... }

/ Medium devices (desktops, 992px and up) /
@media (min-width: @screen-md-min) { ... }

/ Large devices (large desktops, 1200px and up) /
@media (min-width: @screen-lg-min) { ... }

JD Tadlock
@jdtdesigns
Oct 01 2016 14:21
@christocarr Codepen doesn't work the same as coding locally from a text editor
grantknaver
@grantknaver
Oct 01 2016 14:21
gotcha
JD Tadlock
@jdtdesigns
Oct 01 2016 14:22
@grantknaver That's referring to the sass/less version of bootstrap.
If you load up the sass/less version, that will work.
@screen-sm-min is a variable they created that has a size stored in it like 545px
grantknaver
@grantknaver
Oct 01 2016 14:23
ahh
JD Tadlock
@jdtdesigns
Oct 01 2016 14:23
then you can just call the variable and it will output the actual size stored to the browser when the sass is compiled
but you have to use a compiler
it's pretty tricky at first but once you use sass, you'll never want to go back to standard css
grantknaver
@grantknaver
Oct 01 2016 14:24
what is your fav compiler guys
JD Tadlock
@jdtdesigns
Oct 01 2016 14:24
for css, sass of course @grantknaver
christocarr
@christocarr
Oct 01 2016 14:26
@jdtdesigns I prefer to use brackets. Do you know why my css query is not working?
grantknaver
@grantknaver
Oct 01 2016 14:26
OK. Figured I would just get your opinions. Doesnt seem like you can add sass to codepen
JD Tadlock
@jdtdesigns
Oct 01 2016 14:26
@christocarr brackets isn't a pre-processor, it's a text editor
@grantknaver sass is easy to use with codepen
go to Settings->CSS->Preprocessor
grantknaver
@grantknaver
Oct 01 2016 14:27
Im looking for a way to add, but I dont see an option through settings
must of over looked
Yay!!!!!
JD Tadlock
@jdtdesigns
Oct 01 2016 14:29
@grantknaver the sass version of bootstrap is mainly used for local dev
grantknaver
@grantknaver
Oct 01 2016 14:31
Im about to finish my portfolio website. What would you suggest building the Port with, px or sass boot?
JD Tadlock
@jdtdesigns
Oct 01 2016 14:32
@grantknaver Unless you're wanting to dive into sass and learn it, i'd go with standard css.
In the future, if you continue to do web dev, you'll need to learn sass
it's required for 99% of all dev jobs
grantknaver
@grantknaver
Oct 01 2016 14:33
well I better learn it
Thanks
That media querie still isn
working @jdtdesigns
JD Tadlock
@jdtdesigns
Oct 01 2016 14:34
cause the sass file isn't loaded into your project @grantknaver
just do it with css
it'll be tricky on codepen
Ken Haduch
@khaduch
Oct 01 2016 14:37
@jdtdesigns - I have a question - there is a way to put sass into CodePen, right? I think that's an option, but one that I have yet to use? Is there a way to use the sass version of bootstrap there? Or would that be too complicated to try and do - as in, impossible?
grantknaver
@grantknaver
Oct 01 2016 14:37
already read up on how to add sass outside of code and it doesnt seem that difficult, but in codepen it seems to be a pain defiantly.
I went into setting and chose my processor as sass, but it doesnt seem like anything was added.
JD Tadlock
@jdtdesigns
Oct 01 2016 14:38
@khaduch There is a way, but you would need to load every file for the sass library into settings. There's like 30 files, so that would be a huge waste of time and not worth it imo. Another reason to start coding locally, if you're wanting to use sass.
@grantknaver That's not going to work. You would need to load the whole bootstrap sass library. A lot of files to link to and a huge hassle.
grantknaver
@grantknaver
Oct 01 2016 14:39
@jdtdesigns yep after this im back to coding in beans
Ken Haduch
@khaduch
Oct 01 2016 14:39
@jdtdesigns - thanks. I should definitely put it on my priority list to get familiar with and start using sass... I figured as much - you'd have to load all of the source files into your project.
CamperBot
@camperbot
Oct 01 2016 14:39
khaduch sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 628 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 01 2016 14:43
@khaduch @grantknaver You can use sass in codepen though, which can save you a lot of time compared to standard css. I've used it for most of my fcc apps.
I don't use bootstrap though. Once you learn css, you'll never really use bootstrap or any frameworks
grantknaver
@grantknaver
Oct 01 2016 14:44
Ya I am learning it for the course work.... I don't really like it at ALL
Not enough control
JD Tadlock
@jdtdesigns
Oct 01 2016 14:45
@grantknaver Bootstrap is what it is. It's a strict framework to quickly 'mock up' sites. For custom design, you should never really use BS.
If you're constantly overriding BS code, that's a 100% sign to not use it.
grantknaver
@grantknaver
Oct 01 2016 14:46
yep
christocarr
@christocarr
Oct 01 2016 14:49
Can anybody else help me?
Farhad
@fhdhsni
Oct 01 2016 14:53
@jdtdesigns thanks :+1:
CamperBot
@camperbot
Oct 01 2016 14:53
fhdhsni sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 629 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ken Haduch
@khaduch
Oct 01 2016 14:54
@christocarr - what do you want help with? Did I miss a post somewhere up there?
christocarr
@christocarr
Oct 01 2016 14:55
@khaduch CSS queries not working on 480 and 767.
Ken Haduch
@khaduch
Oct 01 2016 14:59
@christocarr - maybe you've already been through this - but you cannot use relative addressing to reference things on CodePen (unless you subscribe to the paid service, I believe?) For example, your Images/aboutMe.jpeg is not loading - oops, I see that I'm looking at the older URL - let me look at the one you just posted.
@christocarr - also, you cannot use imgur for images - they don't permit it, according to their terms of service, so the picture is not loading (for me - you might see it, if you're logged in to their site, etc.)
christocarr
@christocarr
Oct 01 2016 15:01
@khaduch Whats best for image hosting then?
Ken Haduch
@khaduch
Oct 01 2016 15:02
@christocarr - some sites exist that allow you to upload files, like postimg.org, and you can use dropbox if you get the proper URL. I used things from my flickr account by getting the hard link. There are probably other sites, if you google for them.
@christocarr - and "Portfolio" is not spelled correctly... in the header.
@khaduch but still does not solve my css queries.
Ken Haduch
@khaduch
Oct 01 2016 15:09
@christocarr - I'm not a media query expert - but it looks like you might have to re-order the values to put the narrowest one at the bottom, so that it takes priority over the wider settings? I could see in the devtools that the 767px setting for the h1 elements was overriding the 480px settings at the narrower width. When I moved the 480px settings lower in the CSS section, then it works. I don't know if there could be other conflicts... Maybe you can set a min and max width for things?
christocarr
@christocarr
Oct 01 2016 15:09
@khaduch let me try that
Ken Haduch
@khaduch
Oct 01 2016 15:12
@christocarr - it might not be the best site to look at for this, but looking at http://www.w3schools.com/css/css_rwd_mediaqueries.asp, they advise (probably correctly) to be "mobile first" - set up the CSS for the narrowest screen, and then add classes and settings for the wider screen widths? Maybe using min-width makes more sense? As I said, I haven't done this too much other than through using Bootstrap so I haven't really learned the media query techniques in detail...
christocarr
@christocarr
Oct 01 2016 15:13
@khaduch :sparkles: thanks
CamperBot
@camperbot
Oct 01 2016 15:13
christocarr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1744 | @khaduch |http://www.freecodecamp.com/khaduch
christocarr
@christocarr
Oct 01 2016 15:13
Works now.
Ken Haduch
@khaduch
Oct 01 2016 15:14
@christocarr - great!
Muhammad Hasham
@MohammadHasham
Oct 01 2016 15:38
how can i allow only a part of image to be displayed on screen i have tried oerflow:hidden but that is not working
@khaduch @christocarr
@fhdhsni
GehenFrei
@GehenFrei
Oct 01 2016 15:53
Can we submit projects in other programming languages such as Java ? For instance what if I wanted to make an Android app vs. a Code Pen website.
christocarr
@christocarr
Oct 01 2016 15:57
How would I check my responsiveness on my smartphone?
Eliza
@ElizaForCode
Oct 01 2016 15:59
hey guys! I am working on the portfolio challenge, and I'm trying to figure out how to get my form to actually send the input data to an e-mail... can anyone help me with this? I've done some research and I kind of got that I need to use php, but I am not familiar with that at all... Here is the codepen: http://codepen.io/ElizaForCode/pen/KgXrGA
hi @christocarr you can open your page in your browser and use devtools. if you have chrome for example it has the option to view your site in different device sizes(it's one of the little icons in the left corner), so you can see if it's responsive.
christocarr
@christocarr
Oct 01 2016 16:02
@ElizaForCode don't think you have to get your form to send anything now. It's not required for the user rules.
Eliza
@ElizaForCode
Oct 01 2016 16:03
@christocarr hmm, you've probably got a point there.. I was just also hoping to use this exercise to get a working portfolio for my hubby together! :D
christocarr
@christocarr
Oct 01 2016 16:04
@ElizaForCode I am familiar with the dev tools. So I can't open my index.html the same way on PC?
Eliza
@ElizaForCode
Oct 01 2016 16:04
@christocarr which browser do you use? I just chrome on windows and that works fine.
christocarr
@christocarr
Oct 01 2016 16:05
I meant I can't open the index with chrome on my phone the same way I can on PC.
Eliza
@ElizaForCode
Oct 01 2016 16:06
ah no, unless you have your page online already, I don't think you can see it on your phone.
grantknaver
@grantknaver
Oct 01 2016 16:06
You guys have any ideas why I cant float my .jumbotron img & #jumboTextContainer above 480px? https://codepen.io/GrantKnaver/pen/EgwkGx
christocarr
@christocarr
Oct 01 2016 16:08
@grantknaver I have no idea
Anyone know why my page opens on botto?
grantknaver
@grantknaver
Oct 01 2016 16:09
ya it just doesnt work
christocarr
@christocarr
Oct 01 2016 16:09
  • bottom
Sorin Ruse
@sorinr
Oct 01 2016 16:11
@grantknaver what do you mean by floating?
grantknaver
@grantknaver
Oct 01 2016 16:13
I am trying to both .jumbotron img & #jumboTextContainer in the jumbotron, but something is stopping it. Heck, I even tried an !important declaration, but nothing. I need them side by side.
*I am try to float both
hindraxxx
@hindraxxx
Oct 01 2016 16:16
i don't understandm do you want to put the img as your background in jumbotextcontainer? @grantknaver
Sorin Ruse
@sorinr
Oct 01 2016 16:16
@grantknaver try class="col-xs-6 col-sm-6" this is what you want?
JD Tadlock
@jdtdesigns
Oct 01 2016 16:17
@christocarr Yeah, just use column classes and you can achieve that kinda layout easy
hindraxxx
@hindraxxx
Oct 01 2016 16:19
oh yeah if u want them to side by side use the class above by @sorinr on both image and container
grantknaver
@grantknaver
Oct 01 2016 16:20
actually revisiting this did give me an idea I will add those classes when I click a button thanks
Tim Handy
@TimHandy
Oct 01 2016 16:25
Hi all, I have a question regarding css... I can't figure out why when I put my very basic portfolio into dev tools mobile view in chrome (attempting to do mobile first dev) and then resize the window narrower, the top h1 (my name) gets smaller, yet the h2 below the image and the text below that grows?! I've looked at the css for ages and can't work it out. codepen.io/timhandy/pen/bpzYNg
d wilder
@alhazen1
Oct 01 2016 16:33
This message was deleted
d wilder
@alhazen1
Oct 01 2016 16:41

@TimHandy What I'm seeing is that your header is fixed at 900px

#header {
    clear: both;
    width: 900px;
}

and that your project preview images get really thin at 80% width.

You can do responsive from scratch but I would suggest using a responsive framework like Bootstrap

Tim Handy
@TimHandy
Oct 01 2016 16:43
@alhazen1 where are you seeing fixed #header id of 900px? I don't have that as far as I can tell
@alhazen1 my header uses a .header with position: fixed and 92% width
@alhazen1 even if that were the case, that doesn't answer the question about the font increase/decrease in size. Are you seeing what i mean in the mobile view?
Atdhe Kurteshi
@atdheekurteshi
Oct 01 2016 16:50
d wilder
@alhazen1
Oct 01 2016 16:52
@TimHandy I'm not sure - I see it in dev tools (I copied that snippet from dev tools). Maybe you have a naming conflict with 'header'. I also don't see an h2 tag in your pen. Possibly I opened it before you had saved it? Just guessing.
Tim Handy
@TimHandy
Oct 01 2016 16:52
Ahh... @alhazen1 my bad
try now
grantknaver
@grantknaver
Oct 01 2016 16:59
im trying right now to offset the inputs at the end of my page but it wont allow me to. The inputs I am targeting have the class .contactFields
Baraka Mahili
@gbmahili
Oct 01 2016 17:03
I have a question about user experience. Can some one check my page and tell me what is the best user experience? http://codepen.io/GBMahili/full/xEXqKV/
Thanks
Tim Handy
@TimHandy
Oct 01 2016 17:05
@gbmahili I would like to see the button on the right end of the input field.. it looks massive below
grantknaver
@grantknaver
Oct 01 2016 17:06
@gbmahili hide it.
Baraka Mahili
@gbmahili
Oct 01 2016 17:06
Thanks @TimHandy I was afraid the amount of info in the button will make the input huge too...let me try that
CamperBot
@camperbot
Oct 01 2016 17:06
gbmahili sends brownie points to @timhandy :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @timhandy |http://www.freecodecamp.com/timhandy
Baraka Mahili
@gbmahili
Oct 01 2016 17:06
Thanks for the input @grantknaver
CamperBot
@camperbot
Oct 01 2016 17:06
gbmahili sends brownie points to @grantknaver :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for grantknaver
Tim Handy
@TimHandy
Oct 01 2016 17:07
@gbmahili You don't often see the text on a button change like that... Is it standard to do that or does it violate some rule of UX?
Baraka Mahili
@gbmahili
Oct 01 2016 17:09
@TimHandy I was making some payment on a website today, and when I scrolled down, the input field was hidden, so I had to scroll back up to see and confirm that I am paying the right amount...so I figured what if I just add the amount so that the user see what they are actually paying...so I coded it
but it is not usual to have more info on a submit button
Tim Handy
@TimHandy
Oct 01 2016 17:10
cool, why not then!
d wilder
@alhazen1
Oct 01 2016 17:15
@TimHandy OK - very different now. Are asking why your h2 runs width of the page but your name does not? I think that is because your title class is floated left
grantknaver
@grantknaver
Oct 01 2016 17:15
tnaks @jdtdesigns
Tim Handy
@TimHandy
Oct 01 2016 17:16
@alhazen1 Nope, I am not asking that. I can't figure out why when I put my very basic portfolio into dev tools mobile view in chrome (attempting to do mobile first dev) and then resize the window narrower, the top h1 (my name) gets smaller, yet the h2 below the image and the text below that grows?
@alhazen1 I don't understand why one gets bigger whilst the other gets smaller, nor do i understand why they change size at all!
grantknaver
@grantknaver
Oct 01 2016 17:17
im trying right now to offset the inputs at the end of my page but it wont allow me to. The inputs I am targeting have the class .contactFields
d wilder
@alhazen1
Oct 01 2016 17:21
@TimHandy Hmmm... I'm not seeing that. I've tried it with and without a refresh of the screen and your name and h2 both seem to be same size as on large screen
Tim Handy
@TimHandy
Oct 01 2016 17:21
@alhazen1 hmm, and you're on mobile view in dev tools?
and then you make the viewport window narrow?
d wilder
@alhazen1
Oct 01 2016 17:29
@TimHandy Yes. Not sure what to tell you but that is a head scratcher
Tim Handy
@TimHandy
Oct 01 2016 17:29
@alhazen1 OK, thanks for looking
CamperBot
@camperbot
Oct 01 2016 17:29
timhandy sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @alhazen1 |http://www.freecodecamp.com/alhazen1
d wilder
@alhazen1
Oct 01 2016 17:34
@TimHandy you're welcome. I looked in Firefox too and looked good there also. Just as a precaution maybe you should try restarting the browser - maybe??
Tim Handy
@TimHandy
Oct 01 2016 17:34
Yeah, I'll give that a go, and try it on another machine also. cheers
JD Tadlock
@jdtdesigns
Oct 01 2016 18:20
@TimHandy what are you trying to achieve? centering inputs and submit button?
Tim Handy
@TimHandy
Oct 01 2016 18:21
@jdtdesigns it was @grantknaver , not me :-)
JD Tadlock
@jdtdesigns
Oct 01 2016 18:22
ah, sorry :P
JD Tadlock
@jdtdesigns
Oct 01 2016 18:36
@grantknaver This is how you can center a group of inputs http://jsbin.com/juriziravu/edit?html,css,output
Ashish Acharya
@anarchyrucks
Oct 01 2016 18:45
var Leaderboard = React.createClass({
  getInitialState: function(){
    return{
      type: "recent"
    }
  },
  showAllTime:function(){
    this.setState({type: "alltime"})
  },
  render: function() {
    return(
      <div>
        <div id="title">Leaderboard</div>
        <div className="container">
          <table className="table table-responsive">
            <thead>
              <tr>
                <th>#</th>
                <th>Camper's Name</th>
                <th className="recent" onClick={this.showRecent}>Points in last 30 days</th>
                <th className="alltime" onClick={this.showAllTime}>All time points</th>
              </tr>
            </thead>
            <Table url={this.props.url + this.state.type}/>
          </table>
        </div>
      </div>
    )
  }
});
why doesn't it update the table ??
Stephen James
@sjames1958gm
Oct 01 2016 18:48
@anarchyrucks Are you getting an error that showRecent is not defined?
Ashish Acharya
@anarchyrucks
Oct 01 2016 18:48
no
i forgot to type that
var Table = React.createClass({
  getInitialState: function(){
    return{
      data: []
    }
  },
  componentDidMount: function(){
     $.ajax({
      url: this.props.url,
      dataType: 'json', 
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    return(
      <tbody className="table-striped">
        {
          this.state.data.map(function(value, index){
            return(
              <tr>
                <th>{index + 1}</th>
                <th><img src={value.img} />{value.username}</th>
                <th>{value.recent}</th>
                <th>{value.alltime}</th>
              </tr>
            )
          })
        }
      </tbody>
    )
  }
});

var Leaderboard = React.createClass({
  getInitialState: function(){
    return{
      type: "recent"
    }
  },
  showAllTime:function(){
    this.setState({type: "alltime"})
  },
  showRecent: function(){
    this.setState({type: "recent"})
  },
  render: function() {
    return(
      <div>
        <div id="title">Leaderboard</div>
        <div className="container">
          <table className="table table-responsive">
            <thead>
              <tr>
                <th>#</th>
                <th>Camper's Name</th>
                <th className="recent" onClick={this.showRecent}>Points in last 30 days</th>
                <th className="alltime" onClick={this.showAllTime}>All time points</th>
              </tr>
            </thead>
            <Table url={this.props.url + this.state.type}/>
          </table>
        </div>
      </div>
    )
  }
});
Ananay
@ananaymital
Oct 01 2016 18:50
does anybody know how can I test if my github code works or not locally?
Stephen James
@sjames1958gm
Oct 01 2016 18:51
@anarchyrucks I am not sure componentDidMount will get called if only props have changed?
Ashish Acharya
@anarchyrucks
Oct 01 2016 18:52
@sjames1958gm i just realised you are on the top of the leaderboard haha
Stephen James
@sjames1958gm
Oct 01 2016 18:52
@anarchyrucks :)
Ashish Acharya
@anarchyrucks
Oct 01 2016 18:52
@sjames1958gm i'll look into that and get back to you
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:00
@sjames1958gm please look into this
Stephen James
@sjames1958gm
Oct 01 2016 19:05
@anarchyrucks You could try this:
  componentDidMount: function() {
    this.getInfo(this.props.url);
  },
  componentWillReceiveProps: function(props) {
    this.getInfo(props.url)
  },
  getInfo: function(url){
    $.ajax({
      url: url,
Ananay
@ananaymital
Oct 01 2016 19:05
@sjames1958gm I just removed an error in a json file in atom from FCC repo but i want to check if it works or not. How can I do that?
nabinsademba
@nabinsademba
Oct 01 2016 19:06
hey guys help me with the escape sequences in strings challange
Stephen James
@sjames1958gm
Oct 01 2016 19:06
@Deadpool37 You cloned the repo?
@nabins13 What do you have?
Ananay
@ananaymital
Oct 01 2016 19:07
i don't know exactly. It shows on my github dashboard does that mean cloned
Stephen James
@sjames1958gm
Oct 01 2016 19:08
@Deadpool37 That probably means you forked the repo.
Ananay
@ananaymital
Oct 01 2016 19:08
I opened the code in atom
Stephen James
@sjames1958gm
Oct 01 2016 19:08
That created a version of the repo in your account.
Ananay
@ananaymital
Oct 01 2016 19:08
you mean having a FCC folder in github locally?
Stephen James
@sjames1958gm
Oct 01 2016 19:09
If you look in your repository list it will show that you forked the repo.
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:09
@sjames1958gm thanks it worked
CamperBot
@camperbot
Oct 01 2016 19:09
anarchyrucks sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3606 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 01 2016 19:09
You opened it in atom on your local machine? hmm
Ananay
@ananaymital
Oct 01 2016 19:09
how do i know if i cloned it or not
yup
Stephen James
@sjames1958gm
Oct 01 2016 19:10
@anarchyrucks :+1:
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:10
@sjames1958gm can you give a reference to that or explain?
Stephen James
@sjames1958gm
Oct 01 2016 19:11
@anarchyrucks This page described the lifecycle methods https://facebook.github.io/react/docs/component-specs.html
It said that certain ones only get called at certain times, I think will mount was only at start and will receive props when the props changed.
@Deadpool37 How did you open the github file in atom?
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:13

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

this sentence on componentDidMount confused me

@sjames1958gm
Ananay
@ananaymital
Oct 01 2016 19:14
@sjames1958gm oooh yeah i remember i cloned from the github application for windows
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:14
@sjames1958gm I thought it would be fine as long as it is AJAX call :D
Ananay
@ananaymital
Oct 01 2016 19:14
in the top right corner it said atom so it opened the repo in atom
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:15
@Deadpool37 there is a good tutorial on GitHub in codecademy you should consider checking it out
Stephen James
@sjames1958gm
Oct 01 2016 19:15
@anarchyrucks What you did was fine, only that you wanted to do another ajax call based on user action that meant that componentDidMount wouldn't work completely.
You could have loaded both lists at start and then switch between them. Or you could have loaded them in the parent component based on the click and passed to the
child.
Ananay
@ananaymital
Oct 01 2016 19:16
@anarchyrucks didn't find it there
Stephen James
@sjames1958gm
Oct 01 2016 19:17
@Deadpool37 You will have to have node loaded on your machine, and then probably have to npm install in the local directory - there is something to do
with seeding the database but I saw you asked on Contributers chat so they should give you help
Ananay
@ananaymital
Oct 01 2016 19:18
@sjames1958gm thanks
CamperBot
@camperbot
Oct 01 2016 19:18
deadpool37 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3607 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Cristopher Encarnacion
@chris0715
Oct 01 2016 19:18
anyone can provide me help with this
TypeError: db.getCollection is not a function
at /home/ubuntu/workspace/proyecto/server.js:16:12
at connectCallback (/home/ubuntu/workspace/proyecto/node_modules/mongodb/lib/mongo_client.js:315:5)
at /home/ubuntu/workspace/proyecto/node_modules/mongodb/lib/mongo_client.js:234:11
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:18
@sjames1958gm I get it. componentDidMount renders only once whatever the case
Stephen James
@sjames1958gm
Oct 01 2016 19:19
@anarchyrucks That is my understanding.
@chris0715 I believe it is just db.collection
@chris0715 db.collection("parrots")
Ashish Acharya
@anarchyrucks
Oct 01 2016 19:21
@sjames1958gm Now I need to double click to re-render but everything seems fine now
Cristopher Encarnacion
@chris0715
Oct 01 2016 19:22
@sjames1958gm I did that already same error
Stephen James
@sjames1958gm
Oct 01 2016 19:22
@anarchyrucks hmm, ok
Cristopher Encarnacion
@chris0715
Oct 01 2016 19:22
Somehow its not recognizing the method as existance... and I dont know why
I checked multiple times the mongodb documentation
Stephen James
@sjames1958gm
Oct 01 2016 19:22
Can you post more?
more of your code that is
IsaiahGz
@IsaiahGz
Oct 01 2016 19:27
http://codepen.io/IsaiahGz/pen/yayvrQ
Can someone tell me why this works in Internet Explorer but not Google Chrome? (Pay no attention to looks lol)
Ananay
@ananaymital
Oct 01 2016 19:29
@IsaiahGz comment out $("#messageDisplay").empty();
Cristopher Encarnacion
@chris0715
Oct 01 2016 19:29

@sjames1958gm var express = require("express")
var mongo = require("mongodb").MongoClient
var app = express()
var connectionUrl = 'mongodb://localhost:27017/proyectoDb'

app.get('/', function(req,res){

res.sendFile(__dirname+'/index.html')

mongo.connect(connectionUrl, function(err, db){

    if(err)
    console.log(err)

    db.getCollection('mata').insertOne({'matador': 'roberto'})


})

})

app.listen(8080)

and I also with only the Insert method
Stephen James
@sjames1958gm
Oct 01 2016 19:30
@chris0715 Are you getting the console.log(err) ? I am pretty sure it is .collection() not getCollection()
IsaiahGz
@IsaiahGz
Oct 01 2016 19:33
@Deadpool37 Okay, the same quote still appears
http://codepen.io/IsaiahGz/pen/yayvrQ
Cristopher Encarnacion
@chris0715
Oct 01 2016 19:34
@sjames1958gm this is the methond I am using from the documentation db.getCollection(name)
Stephen James
@sjames1958gm
Oct 01 2016 19:35
@chris0715 Ok. my bad - are you seeing an error logged from the if (err) ?
Cameron Burkholder
@Cameron-Burkholder
Oct 01 2016 19:35
Anyone finished with Pomodoro?
Ananay
@ananaymital
Oct 01 2016 19:53
@IsaiahGz in the url make callback=json
@IsaiahGz still working on the random thing

@IsaiahGz

$(document).ready(function() {
  $("#getMessage").click(function() {
    //$("#messageDisplay").empty();
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=json", function(a) {
      $("#messageDisplay").html(a[0].content + "<p>- " + a[0].title + "</p>");
    });
  });
});

control is stuck in html function

no idea why
IsaiahGz
@IsaiahGz
Oct 01 2016 19:57
@Deadpool37 I just don't understand why this works in Internet Explorer...
Ananay
@ananaymital
Oct 01 2016 19:57
it's working on chrome
IsaiahGz
@IsaiahGz
Oct 01 2016 19:57
Not the random part
The random part works on IE
Cameron Burkholder
@Cameron-Burkholder
Oct 01 2016 19:58
I have my pomodoro almost working, but something is getting hung up when I click on the start pomodoro.
JD Tadlock
@jdtdesigns
Oct 01 2016 20:06
@Cameron-Burkholder doesn't get hung up for me. Just starts counting in negatives
c0d0er
@c0d0er
Oct 01 2016 20:08
does anybody know why i type in letters in input field and hit enter, then all the search results disappear? i already used <form id="form-container" onsubmit="loadData()"> why still disappear? this is my code http://codepen.io/c0d0er/pen/WGkQvk?editors=1010
JD Tadlock
@jdtdesigns
Oct 01 2016 20:10
This message was deleted
megancoyle1
@megancoyle1
Oct 01 2016 20:12
hey guys! how would I make the buttons in the bottom link to something without screwing up its formatting?
Exclusiveyash
@Exclusiveyash
Oct 01 2016 20:15
@megancoyle1 Something? Please be more specific
megancoyle1
@megancoyle1
Oct 01 2016 20:15
link to fb, linked in, etc
when i made it<a> around the button the formatting got all screwed up and href wont work in button properties
i dont know how to get the button to link to a webpage
Exclusiveyash
@Exclusiveyash
Oct 01 2016 20:18
You need to add similarly to your html
<a href="http://linkedin.com">LinkedIn</a></button>
and your CSS has a property which is overriding your button style
so you need to make changes accordingly
and your CSS has "a" property which is overriding your "button" style *
megancoyle1
@megancoyle1
Oct 01 2016 20:20
oh i forgot about that!
thanks!
Exclusiveyash
@Exclusiveyash
Oct 01 2016 20:21
make a "a" more specific as "li a" so that it will not effect the footer @megancoyle1
Rimi.
@Codevotee
Oct 01 2016 20:23
@megancoyle1 dont forget <button> in front :sparkles:
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:24
@megancoyle1 try this
<div class="btn-group" role="group">
    <a href='#' class="btn btn-default bg">Github</a>
  </div>
.btn-group{
  margin-top: 71px;
}
.btn-group a{
  display: block;
}
@megancoyle1 try above only if you want btn-group styles from bootstrap otherwise create your own a tags as @Exclusiveyash suggested inside
ul -> li -> a tags and style with your own CSS
megancoyle1
@megancoyle1
Oct 01 2016 20:31
Thanks!
Islam Ibakaev
@dagman
Oct 01 2016 20:39
hey guys what does npm ERR! code 1 means?
Evan W
@Dirtier
Oct 01 2016 20:40
Anyone down to help me figure out how to create an iframe over my body content when you click a link? And then be able to close it out and 'clear' it from the content so the original stuff can show up
Right now when you click Feeling Lucky, it will show the wiki in an iframe, but when you close it, you can't use the normal wiki text search feature. I think it's bc it thinks the iframe is still there
Cameron Burkholder
@Cameron-Burkholder
Oct 01 2016 20:42

I've been working on the Pomodoro, and it works until I try to add any sort of code that makes the break happen.

https://codepen.io/CameronBurkholder/pen/jrrXzZ?editors=0010

Stephen
@stephepush
Oct 01 2016 20:45
I'm working on my portfolio site, and I tried adding a carousel but it isn't working. Here's the html:
<section id="projects">
  <div class="container">
    <div class="row">
      <div class="page-header col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h1>Projects</h1></div>
    </div>

    <div id="projects-carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#projects-carousel" data-slide-to="0"></li>
        <li data-target="#projects-carousel" data-slide-to="1"></li>
        <li data-target="#projects-carousel" data-slide-to="2" class="active"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item">
          <img src = "https://dl.dropboxusercontent.com/u/47710050/appScreenshots/carverTribute.jpg" alt="George Washinton Carver Tribute Page">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="https://dl.dropboxusercontent.com/u/47710050/appScreenshots/quoteGenerator.jpg" alt="Random Quote Generator">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item active">
          <img src="https://dl.dropboxusercontent.com/u/47710050/appScreenshots/weatherApp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <!--<div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>-->

      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#projects-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#projects-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</section>
heres the link to the whole thing:
http://codepen.io/stephepush/pen/EgwYqA?editors=1000
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:47
@stephepush Load bootstrap.jsalso i think you only loaded jquery.js thats why its not working some components in bootstrap depends on JS
Stephen
@stephepush
Oct 01 2016 20:50
oh so theres a separate bootstrap js library?
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:51
@stephepush yes you can add from
settings -> JavaScript Tab -> Quick-add -> Bootstrap
Stephen
@stephepush
Oct 01 2016 20:52
alright, now it's working. Now there's a new problem, the images aren't centered. Any suggestions, @vinaypuppal? Btw, thank you.
CamperBot
@camperbot
Oct 01 2016 20:52
stephepush sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 592 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:52
@stephepush oh okay let me check again
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:58

Now there's a new problem, the images aren't centered

@stephepush sorry i did not understand do you mean horizontally or vertically

Stephen
@stephepush
Oct 01 2016 20:59
@vinaypuppal that's cool. I'll use my google skills to see if I can find something.
vínαч puppαl
@vinaypuppal
Oct 01 2016 20:59
@stephepush i see images are clearly visible in carousel,
okay :+1:
Evan W
@Dirtier
Oct 01 2016 21:54
How are you even supposed to do the Twitch project anymore? The hardcode work-around FCC provided doesn't even more anymore
You still get Bad Request no Client Id
Igor Amidzic
@igoramidzic
Oct 01 2016 21:56
Anyone good with cPanel? Or godaddy hosting?
I have a php file that I want to be my main page when you type in the domain name, but it only works with a default.html file.
Anyway to make my php file work as the homepage?
http://utilitan.com and http://utilitan.com/default.php
CodeXXI
@CodeXXI
Oct 01 2016 22:02
@amidzicigor Your php file should named "index.php", not "default.php".
Let me know if changing the filename works?
Evan W
@Dirtier
Oct 01 2016 22:08
Anyone there? How are we supposed to do the twitch project without using a client ID? You have to use codepen for the project, and it specifically says not to include a client key. The workaround they posted as a $.getJSON using jsonp doesn't work anymore
Has anyone done it recently?
Islam Ibakaev
@dagman
Oct 01 2016 22:22
this from server rendering redux => http://redux.js.org/docs/recipes/ServerRendering.html
i am stuck on this part
When using Redux with server rendering, we must also send the state of our app along in our response, so the client can use it as the initial state. This is important because, if we preload any data before generating the HTML, we want the client to also have access to this data. Otherwise, the markup generated on the client won't match the server markup, and the client would have to load the data again.
Can you guys explaing this peace please if we preload any data before generating the HTML
Joseph Parkton
@hippybear
Oct 01 2016 22:30
@amidzicigor I can help
Igor Amidzic
@igoramidzic
Oct 01 2016 22:31
@CodeXXI LOVE YOU THANK YOU
CamperBot
@camperbot
Oct 01 2016 22:31
amidzicigor sends brownie points to @codexxi :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @codexxi |http://www.freecodecamp.com/codexxi
Joseph Parkton
@hippybear
Oct 01 2016 22:31
@Dirtier if you clone the codepen project does that work?
Igor Amidzic
@igoramidzic
Oct 01 2016 22:31
@hippybear codeXXI helped me, but thanks anyway :)
CamperBot
@camperbot
Oct 01 2016 22:31
amidzicigor sends brownie points to @hippybear :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @hippybear |http://www.freecodecamp.com/hippybear
CodeXXI
@CodeXXI
Oct 01 2016 22:31
@amidzicigor glad I could help :)
Joseph Parkton
@hippybear
Oct 01 2016 22:31
@Dirtier fork rather...
right on
Igor Amidzic
@igoramidzic
Oct 01 2016 22:33
@CodeXXI Actually I have another problem.
I have other files with header("Location: index.php");
What should I put in my location to bring me back to my domain?
If I do Location: utilitan.com, it brings me to utilitan.com/utilitan.com
Evan W
@Dirtier
Oct 01 2016 22:33
@hippybear wdu mean? Fork the codepen example they have in the project? I dont think that one is even working anymore, if you look at it it just lists every single one as offline
Joseph Parkton
@hippybear
Oct 01 2016 22:34
heh
Igor Amidzic
@igoramidzic
Oct 01 2016 22:35
@CodeXXI Never mind. I just did "Location: /"
CodeXXI
@CodeXXI
Oct 01 2016 22:35
all right
Joseph Parkton
@hippybear
Oct 01 2016 22:36
@Dirtier Id say skip it then
Evan W
@Dirtier
Oct 01 2016 22:36
@hippybear Yea I posted an issue on the github and something on the forums... If I don't get a clear answer soon I'm probably just gonna list it as completed lmao
I mean they knew Twitch was going to do this like a few weeks ago, idk why they dont just get rid of the project and make a new one or something
Joseph Parkton
@hippybear
Oct 01 2016 22:37
@Dirtier they are in the process of redoing the site in react with a lot of changes. This might be one
Evan W
@Dirtier
Oct 01 2016 22:38
@hippybear Really?!? Thank god I've been saying they need to update this site for awhile now. To me it looks like its from the 80s >.<
CamperBot
@camperbot
Oct 01 2016 22:38
dirtier sends brownie points to @hippybear :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @hippybear |http://www.freecodecamp.com/hippybear
Evan W
@Dirtier
Oct 01 2016 22:38
O.o
I guess you're god?
rofl
'Thank god' and it gives @hippybear brownie points
CamperBot
@camperbot
Oct 01 2016 22:39
dirtier sends brownie points to @hippybear :sparkles: :thumbsup: :sparkles:
:warning: dirtier already gave hippybear points
Joseph Parkton
@hippybear
Oct 01 2016 22:39
yurp
chas vshalom
lol
it has a few bugs so does camperbot
maybe fix it?
you can also fork the repo and redesign the site to make it more 90s
or shoot bring it up to 2014
Evan W
@Dirtier
Oct 01 2016 22:40
lol im excited to see what they do with React
Joseph Parkton
@hippybear
Oct 01 2016 22:40
pretty much just the same old site
Evan W
@Dirtier
Oct 01 2016 22:41
aww
Julia
@LittleTokio
Oct 01 2016 23:26
is this the room for the tribute page stuff on codepen?
Joseph Parkton
@hippybear
Oct 01 2016 23:40
its for stuff like that sure