These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Aug 2016
encount
@encount
Aug 25 2016 00:02
think I got this sorted - im glad all my hours of coding kept the kids amused for all of 30 seconds! http://codepen.io/encount/full/ZONgqQ/
RandomlyRandom
@RandomlyRandom
Aug 25 2016 00:40
omg I'm pulling my hair out over html/css layouts. Just when I think I have a good understanding things are not lining up like I want them to. Can someone take a look at my code pen and tell me why my header and my button group are not showing up on the same line? http://codepen.io/RandomlyRandom/pen/PzAWxm
encount
@encount
Aug 25 2016 00:45
@RandomlyRandom technically they are - you need to move your h2 AFTER the last closing span (cause of the float element) then adjust the h2 margin

@RandomlyRandom ```

<style>
body {
background-color: #9ccadb;
}

.btn-group {
float:right;
}
h2 {

margin:0px;

}
</style>

<div class="container-fluid">
<div id="menu" class="panel col-xs-8 col-xs-offset-2">
<div class="row">

<span class="btn-group" data-toggle="buttons">
<label class="btn btn-success my_data_flag active" id="all">
<input name="options" type="radio" checked>All</input>
</label>
<label class="btn btn-success my_data_flag" id="online">
<input name="options" type="radio">Online</input>
</label>
<label class="btn btn-success my_data_flag" id="offline">
<input name="options" type="radio">Offline</input>
</label>
</span>

<h2 class="text-center">
Twitch Streamers
</h2>
</div>
</div>
</div>

RandomlyRandom
@RandomlyRandom
Aug 25 2016 00:48
@encount thanks man.
CamperBot
@camperbot
Aug 25 2016 00:48
randomlyrandom sends brownie points to @encount :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @encount |http://www.freecodecamp.com/encount
Greg Duncan
@GregatGit
Aug 25 2016 00:51
@encount great Tic Tac Toe - the design is very creative - the only problems I found were after a game is finished it is slow to start and bit unclear what is happening. And one time the computer beat me and it put a line through the wrong boxes. Overall I would rate it as impressive.
encount
@encount
Aug 25 2016 00:53
@GregatGit thanks - i will take a look was mucking around with mobile - might have screwed up the line through - do you remember what line through was wrong I thought I tried them all
CamperBot
@camperbot
Aug 25 2016 00:53
encount sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 745 | @gregatgit |http://www.freecodecamp.com/gregatgit
encount
@encount
Aug 25 2016 00:58
@GregatGit actually it just screwed up for me - oh well time to bug hunt!!
Greg Duncan
@GregatGit
Aug 25 2016 00:59
@encount it went though the top line when it should of gone through the middle (across)
Nicholas Vorraso
@nickeyvee
Aug 25 2016 00:59
Hey guys, I am stuck trying to populate me tweets with the text from my current quote inside of my quote machine
Greg Duncan
@GregatGit
Aug 25 2016 01:00
@nickeyvee i found this website helped me to get it workinghttp://gpiot.com/blog/elegant-twitter-share-button-and-dialog-with-jquery/
Nicholas Vorraso
@nickeyvee
Aug 25 2016 01:03
@GregatGit thanks man
CamperBot
@camperbot
Aug 25 2016 01:03
nickeyvee sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @gregatgit |http://www.freecodecamp.com/gregatgit
Chris Cullen
@123xylem
Aug 25 2016 01:11

@123xylem
http://codepen.io/123xylem/pen/JKqYZY?editors=0010
Im getting lost in this code..
I have 2 Questions: WHy has My USER X stopped Inputting X onto the BOARD?
How Can I get My CPU CLICK To Happen after every User Click?

var user;
$(document).ready(function(){
  user=  prompt("Choose X or O","Make sure its Caps!");
});

if (user=="X") {
   userX=1 ; 
  $(".box").on('click', function act(){
  var id = $(this).attr('id'); //logs clicked box ID and pushes into array
  switch(id){  //TAken OUT SWITCHES FOR BREVITY 

};   console.log(answer);   
 cpu();
     });  //NEED CPU CLICK TO TRIGGER AFTER EVERY/ALL PLAYER CLICKs
}
  else {
    userO=1;
        $(".box").on('click', function act(){
  var id = $(this).attr('id');
  switch(id){  //TAKEN OUT SWITCHES FOR BREVITY
  }    console.log(answer);
    cpu();    });
            }



function cpu(){ //CPU move chosen from random choice var
  if(userX<1){
  $("#"+choice+"").text("X");
  }
   else {
  $("#"+choice+"").text("O");}
}

$(".box").click(function (){ //box click text based on user val
  if (userX>0){
    $(this).text("X");    
     }
  else { 
    $(this).text("O");
 }
});

User X used to work onclick
and I tried recalling act() and move() after if user x==1 but it doesnt recur

Adam Dipinto
@atom888
Aug 25 2016 01:25
Hey Everyone, I just recently completed my Tribute Page and would appreciate any feedback. (http://codepen.io/AdamDipinto/pen/AXPbvQ) Feel free to message me here or in private. Thanks
Stephen James
@sjames1958gm
Aug 25 2016 01:33
@123xylem Make sure you initialize all variables.
NeekPizza
@NeekPizza
Aug 25 2016 01:45
How to add description of image in the BORDER of an image???
so the border drops down below the bottom of the image, and then theres text there
Chris Cullen
@123xylem
Aug 25 2016 01:56
@sjames1958gm hmm let me check what u meean
I see
user and userX Y are different ><
Stephen James
@sjames1958gm
Aug 25 2016 01:58
@123xylem Not sure if that is your problem, but it is a problem.
Chris Cullen
@123xylem
Aug 25 2016 02:03
@sjames1958gm ive got the board to show X again when clicked but the CPU doesnt seem to recognise that its user X or user O as it just prints X regardless
Chris Cullen
@123xylem
Aug 25 2016 02:11
This message was deleted
Ken Haduch
@khaduch
Aug 25 2016 02:12
@ReadyDoMe - does this http://www.loriswebs.com/css-border-images.html help you? It doesn't exactly put the text in the border, but as a caption that looks kind of like it is in the border?
Chris Cullen
@123xylem
Aug 25 2016 02:12

@sjames1958gm

$(document).ready(function(){
  user=  prompt("Choose X or O","Make sure its Caps!");
});
if (user=="X") {
   userX=1 ; console.log(userX);

User and USERX seem to be undefined

Is my prompt assigning a value to user?
Joel Santos
@St3ps
Aug 25 2016 02:13
@123xylem just console.log(user) after the prompt...
Chris Cullen
@123xylem
Aug 25 2016 02:13
@St3ps it says undefined
@St3ps i thought that was working from the start
Joel Santos
@St3ps
Aug 25 2016 02:14
@123xylem hmm hold on
Chris Cullen
@123xylem
Aug 25 2016 02:15
var answer=[];
var userX=0;
var userO=0;

var user;
$(document).ready(function(){
  user=  prompt("Choose X or O","Make sure its Caps!");
});console.log(user);
if (user=="X") {
   userX=1 ; console.log(userX);
The vars are created before this globally
Stephen James
@sjames1958gm
Aug 25 2016 02:16
@123xylem Use booleans not numbers for values that are true/false. If userX is true, then you know userY is false, so you only need one variable.
@123xylem Move all that code inside .ready function or it will run too early
@123xylem user = prompt runs later than console.log(user)
Joel Santos
@St3ps
Aug 25 2016 02:18

@123xylem
http://codepen.io/Steps/pen/kXKyLk

Ignore the css and html. The code you have given me works.

place the console.log inside the $(document).ready code block...
Chris Cullen
@123xylem
Aug 25 2016 02:24
wow really lol it logs before prompt,, thats weird @sjames1958gm
Stephen James
@sjames1958gm
Aug 25 2016 02:25
$(document).ready(function(){}) this is a callback just like getJSON - it assigns a handler function for ready and moves on so
console.log and all the rest of that code executes before the ready state and the prompt function
Chris Cullen
@123xylem
Aug 25 2016 02:29
so its the callback for the whole page
Stephen James
@sjames1958gm
Aug 25 2016 02:30
@123xylem Basically. Its code you want to execute only after the page as loaded.
Chris Cullen
@123xylem
Aug 25 2016 02:30
i see.. THis code is fairly simple but if I select userO it inputs an X.. And it only runs one time
Am i missing something obvious>
Stephen James
@sjames1958gm
Aug 25 2016 02:32
@123xylem Do you have a link?
Stephen James
@sjames1958gm
Aug 25 2016 02:34
@123xylem You need to recalculate your CPU choice each time - you only do it once, so the computer moves to the same place
Daniel Lu
@danielplu
Aug 25 2016 02:39
To use the styling for buttons in bootstrap, you must include the .btn class in your css sheet?
nvm answered alreadyu
Chris Cullen
@123xylem
Aug 25 2016 02:42
@sjames1958gm yes... And also My user O wont let me input O even when user O is true
I think my page needs to be bigger because it scrolls slower to get to portfolio and faster to get to contact info and about sections. I am not sure. Maybe I'm wrong. When you get the chance, would you mind looking over it and seeing what I could do to fix it and/or make more suggestions?
Aaron
@apalm1341
Aug 25 2016 02:56
I also want to be able to put in some cool tech backgrounds/images to divide up the different parts of my page. What do you think is the best way to go about that for my case?
Chris Cullen
@123xylem
Aug 25 2016 02:58
help tictactoe
CamperBot
@camperbot
Aug 25 2016 02:58
no wiki entry for: tictactoe
Aaron
@apalm1341
Aug 25 2016 03:02
How do I go about this maintaining some sort of consistency with buttons, whether that be with styling etc... if that's what I should be doing?
Chris Cullen
@123xylem
Aug 25 2016 03:08
@apalm1341 get their class styled the same eg <button class="blah"> then in css .class{color: blah height: blah width: blah }
Rada
@Radascript
Aug 25 2016 03:09

@apalm1341 work with classes rather than IDs, and have some common features for all your buttons. For instance, something like

button{
border-radius: 4px;
}

is a small touch that will add consistency

Aaron
@apalm1341
Aug 25 2016 03:25
Okay cool. What about adding background/images to the page to separating my different sections? How do u think I should go about that?
Dennis Domingo
@DenzDomingo
Aug 25 2016 03:26
This message was deleted
Chris Cullen
@123xylem
Aug 25 2016 03:33
@sjames1958gm How do i keep resetting choice value? Ive kind of messed it up, ugh
Chris Cullen
@123xylem
Aug 25 2016 03:42
var choices=["a","b","c","d","e","f","g","h","i"];

function removeChoice(){
  var val = choices[index];

    choices.splice(index, 1);
                 return choices };

choice =choices[Math.floor(Math.random()*choices.length)]; 

 var answer=[];
var userX=false;
var userO=false;

var user;
$(document).ready(function(){
  user=  prompt("Choose X or O","Make sure its Caps!");

if (user=="X") {
   userX=true ; 
  console.log(userX+"X"); console.log(userO +"o");
  $(".box").on('click', function act(){
  var id = $(this).attr('id'); //logs clicked box ID and pushes into array
  switch(id){ 
   //REMOVED SWITCHES FOR BREVITY
 cpu(); removeChoice();
     });
So we have choices array.. choice picks one element randomly... cpu uses that random choice one time...
QUESTION:::: why does CPU only work once??? IF its because Choice Is only 1 number and doesnt change WHY doesn my REMOVECHOICE Function Change it as its called after cpu(); which should reset choice??
Bhushan Patil
@mrpatil007
Aug 25 2016 03:48
@shailza just pass there lat and lon to the openweatherapi link
James Bond
@Dman89
Aug 25 2016 04:16

if you guys could help me with this, that;d be great (office space voice)
i am logging right now but could use your help.... YES YOU!

http://stackoverflow.com/questions/39136578/angular-bootstrap-modal-wont-call-twice-typeerror-v2-deletemodalproject-is-not

Juwdohr
@Juwdohr
Aug 25 2016 04:37
Is there a way to have a PDF show up in the browser versus them downloading it?
Kantra
@removed~kantrakantra
Aug 25 2016 04:57

Hey guys, I have a really basic question. I can't seem to figure out how to truly center the div elements in the center of this page regardless of browser width. margin: 0 auto; isn't doing the trick for some reason.

http://codepen.io/tylerprosper/pen/kXyVoB

nvm
I figured it out thx
caseym94
@caseym94
Aug 25 2016 05:04
@caseym94
yo
anyone mind helping me?
been at this for a few hours
https://codepen.io/caseym/pen/WxqEGg
I can't close the red gaps between the nav buttons
and also the sidebar sticks in the middle of the page when I minimize screen if anyone knows about how to fix that
Issac Tomatotan
@issactomatotan
Aug 25 2016 05:07
so about the first question, you may try change the li style with display:block & float:left
it should remove the gap
NixonRichard
@NixonRichard
Aug 25 2016 05:09
what s up
caseym94
@caseym94
Aug 25 2016 05:17
@issactomatotan still red showing up
Dami
@JustDami
Aug 25 2016 05:20
How do I centre an image? Without using pixels?
Issac Tomatotan
@issactomatotan
Aug 25 2016 05:28
@caseym94 u would like to remove the red gap?
caseym94
@caseym94
Aug 25 2016 05:32
@issactomatotan yes
this is anightmare lol
Dami
@JustDami
Aug 25 2016 05:34
@caseym94 Check your padding isnt to big
caseym94
@caseym94
Aug 25 2016 05:44
omfg
I finally found a fix

.headerone nav ul li a {
color: #7D70A1;
padding: inherit;
font-size: 15px;
background-color: #2c2930;
margin-left: -20px;
margin-right: -20px;

}

its over
the battle is over
Dami
@JustDami
Aug 25 2016 05:54
@caseym94 What was your problem?
caseym94
@caseym94
Aug 25 2016 05:55
I got it
Kantra
@removed~kantrakantra
Aug 25 2016 06:21

Hey guys, I'm having trouble figuring out how to get the quote I've appended to the html to disappear so that the next time the button is pressed the quotes don't end up stacking on top of each other. Is there a way to do this?

http://codepen.io/kantrakantra/pen/PzAKXd

greg
@wearenotgroot
Aug 25 2016 06:25
@kantrakantra use .html instead of append, .append will append what you pass in as arguments while .html will change what currently is in the selected element
Kantra
@removed~kantrakantra
Aug 25 2016 06:26
@wearenotgroot Ok. Would I literally write that like $(".thequote").html('<p class="appendp fadeIn3">You got it, Gads!</p>');
@wearenotgroot As opposed to $(".thequote").append('<p class="appendp fadeIn3">You got it, Gads!</p>');
greg
@wearenotgroot
Aug 25 2016 06:27
@kantrakantra yes
Kantra
@removed~kantrakantra
Aug 25 2016 06:28
@wearenotgroot Nvm. Just got it. Thx!
CamperBot
@camperbot
Aug 25 2016 06:28
kantrakantra sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1455 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Aug 25 2016 06:28
@kantrakantra when in doubt always check the documentation!
Dami
@JustDami
Aug 25 2016 06:52
How do I center a link? style="text-align:center" Doesnt seem to be working
Dami
@JustDami
Aug 25 2016 07:00
I got it :P
Dami
@JustDami
Aug 25 2016 07:11
http://codepen.io/JustDami/full/XKLNpR/ - Check out my first Pen!
Michiel
@MichielHuijse
Aug 25 2016 07:16

Goodmorning all, I am working for a long time to get my scroll spy going. to make an animated one pager. By clicking on a navbar link the page scrolls in an animated way down to the link on the page. Like it is working in my code pen: http://codepen.io/michiel-huijse/pen/JKzvzB

Now I have exported the code pen and imported it to github pages. And I am trying to get it work. However I do not understand why it is not working. I have tried several thinks to get the JS work. I know which piece of code it is to get it executed however somehow I can not set the scripts correctly I am using bootstrap and jquery. Here (https://github.com/MichielHuijse/MichielHuijse.github.io/blob/master/index.html) is the link to my index.html file on git. Can someone please help me and explain what I am doing wrong? Thanks you very much in advance

greg
@wearenotgroot
Aug 25 2016 07:23
@MichielHuijse try to add jquery first before anything else
Michiel
@MichielHuijse
Aug 25 2016 07:26
@greg I did so but it doesn't make a change...
greg
@wearenotgroot
Aug 25 2016 07:26
@MichielHuijse well it's working here
Michiel
@MichielHuijse
Aug 25 2016 07:27
you meen this script on top:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> ?
greg
@wearenotgroot
Aug 25 2016 07:28
@MichielHuijse yes on the js setting of your codepen that goes first, then the ui and then bootstrap min js(jquery need to load first as it is required by others, bootstrap min js as example)
Michiel
@MichielHuijse
Aug 25 2016 07:30
aah, ok right I see
@wearenotgroot you meen like this?
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> // first it loads jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<script type="text/javascript">
         $('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

</script>
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 07:39
Hi everyone! need some help with my random quote machine
i initially had an array in JS, but was advised to use json and now not sure what to do next
greg
@wearenotgroot
Aug 25 2016 07:42
@MichielHuijse yes something along those line
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> // first it loads jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

@lidiawisniewska it should be since data is the one that contains the response from the api

data[randomNumber] //<-------data contains the response from the api

instead of

quotes[randomNumber];

since what you get is an array with Object as elements
so this

data[randomNumber] //<---------will give you the element in a random index which is an object

now to access the quote you just use .(dot) notation

randomQuote = data[randomNumber].quote; //<----will give you a the quote
Michiel
@MichielHuijse
Aug 25 2016 08:04

@wearenotgroot but I have to include this* code somewhere which is responsible for the animation. Where do I put it? in the html file? Or in the scrypt.js file? And how do I make it work? ```

     $('a').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;

});
```

Coy Sanders
@coymeetsworld
Aug 25 2016 08:05
@lidiawisniewska array is fine, no reason specifically that you need to use JSON
I used an array in my project, if it worked for you then keep it that way
greg
@wearenotgroot
Aug 25 2016 08:06
@MichielHuijse add it as you normally would.
Michiel
@MichielHuijse
Aug 25 2016 08:07
@wearenotgroot well I don't know how to.. this is the problem.........
I tried all options, linking it to an external file. Running the code in the header. It does not work
Darth Skywalker
@adityaparab
Aug 25 2016 08:09
@MichielHuijse : Have you put all your code inside your
$(document).on('ready', function(){
    // your code goes here
});
Michiel
@MichielHuijse
Aug 25 2016 08:11
@adityaparab this is what I have now:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

<script type="text/javascript">
$(document).on('ready', function(){
     $('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

</script>
Darth Skywalker
@adityaparab
Aug 25 2016 08:13
@MichielHuijse : And your html please.
kirbyedy
@kirbyedy
Aug 25 2016 08:13
I normally use: $(document).ready(function()
kirbyedy
@kirbyedy
Aug 25 2016 08:13
not $(document).on('ready', function()
might be correct dough I dont know
Michiel
@MichielHuijse
Aug 25 2016 08:15
Aaah it works!
@adityaparab you were right I had to add this line
@kirbyedy so yes it works this way aswell
thanks @adityaparab @wearenotgroot @kirbyedy
CamperBot
@camperbot
Aug 25 2016 08:16
michielhuijse sends brownie points to @adityaparab and @wearenotgroot and @kirbyedy :sparkles: :thumbsup: :sparkles:
:cookie: 626 | @adityaparab |http://www.freecodecamp.com/adityaparab
:star2: 1459 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
:star2: 1327 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Darth Skywalker
@adityaparab
Aug 25 2016 08:16

@kirbyedy : ready is an event defined by jquery. And just like any other event, it can be added an event handler to using .on function. It's all same.

$('button').click() is equivalent to $('button').on('click',... )

kirbyedy
@kirbyedy
Aug 25 2016 08:21
:ok_hand:
Alexander Domikov
@AlexanderDom
Aug 25 2016 08:30
hello all !
Stephen James
@sjames1958gm
Aug 25 2016 09:20
@AlexanderDom Hello!
somesh-rai
@somesh-rai
Aug 25 2016 10:06
hello world!
CamperBot
@camperbot
Aug 25 2016 10:06

welcome to FreeCodeCamp @somesh-rai!

Stephen James
@sjames1958gm
Aug 25 2016 10:06
Hello
somesh-rai
@somesh-rai
Aug 25 2016 10:06
how is eveeryone doing?
Stephen James
@sjames1958gm
Aug 25 2016 10:06
Just getting started
5am here
somesh-rai
@somesh-rai
Aug 25 2016 10:07
oh i gotcha
Dmitriy
@nahkar
Aug 25 2016 10:54
Hello everyone.
Plamen Neshkov
@PlamenNeshkov
Aug 25 2016 11:19
Hey, I'm doing the local weather challenge and noticed a problem. The OpenWeatherMap API is served over http, but Chrome does not allow requesting user location without https. Any ideas on how to overcome this?
kirbyedy
@kirbyedy
Aug 25 2016 11:27
@PlamenNeshkov you can cheat with https://crossorigin.me/ in front of the url
or use ip-location instead of the geolocation
John Doe
@codingisfun11
Aug 25 2016 11:45
Counting Cards java script how to start problem.
blob
how to start this problem?
Alexander Domikov
@AlexanderDom
Aug 25 2016 11:51
@codingisfun11 hello, you have 3 conditions that can change the final result of your function, so
an if() seems to be a good start
Plamen Neshkov
@PlamenNeshkov
Aug 25 2016 12:04
@kirbyedy Thanks!
CamperBot
@camperbot
Aug 25 2016 12:04
plamenneshkov sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1332 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
webierweb
@webierweb
Aug 25 2016 12:11
Working on the Build a Tribute Page challenge. I am trying to apply the box elements like in the code pen example but the only way that I know how to do it is via CSS. The challenge says to do it all in html. What am I missing.
?
and I don't want to look at the editor just yet.
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:11
hello,i need a little bit help,can any1 help me with jquery?
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:11
@webierweb you can use css of course :)
@n0Entity tell us
webierweb
@webierweb
Aug 25 2016 12:12
Challenge is to do it without CSS and curious how that would work before I move on to my own solution. Figure that they have me doing it in html for a reason, not looking for shortcuts.
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:13
@AlexanderDom i got 2 html pages,2 js files(1 contest my objects with data,2nd is jquery script,that i can’t make work).SO on my page1.html i got link images,and all i need to do so when i press button on page1 so it change value of h3 on page2
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:13
@webierweb as you wish, where did you see don't use css ?
In the video
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:14
@webierweb isn't a shortcut it works with html, jquery is a shortcut for javascript, bootstrap a shortcut for css but even all the 2 are accepted
webierweb
@webierweb
Aug 25 2016 12:15
go to 2:53 in the video. Only CSS is for margin padding. Listen to it.
3:29 "there is absolutely no CSS, only html"
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:16
all of it is in bootstrap thumbnail at 0:52
he used bootstrap for that
he used bootstrap no custom css
webierweb
@webierweb
Aug 25 2016 12:17
i am not looking to get into an argument over it, watch the video, all html and bootstrap code is inserted in code pen.
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:17
bootstrap is a css library
webierweb
@webierweb
Aug 25 2016 12:17
just looking to code in the html editor and to add that boxed element
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:18
@n0Entity you need to show you code :)
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:18
@AlexanderDom here is the main code that doesn;’t works

$(‘.submit1’).click(function() {
$(‘.firstheader’).html(burger.name);

});

Alexander Domikov
@AlexanderDom
Aug 25 2016 12:19
so @webierweb you need to use just boostrap classes if you want, "there's no css" look he has a css for body { margin-top: 60px }
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:19
submit1 is a href class on page2
firstheader is header class on page1*
webierweb
@webierweb
Aug 25 2016 12:20
put bootstrap code in html editor column?
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:20
burger is object
webierweb
@webierweb
Aug 25 2016 12:20
he ack that he used that single css entry
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:20
@AlexanderDom here u fo
go*
lackodan
@lackodan
Aug 25 2016 12:20
Hi everyone. I'm becoming really frustrated by the Random Quote Machine challenge and I hope you can help. First things first, one of the user's stories is "I can press a button to tweet out a quote." Two questions about that. From Twitter's horrible documentation (I can't believe they've managed to not include a working example on any of the pages I've read) I THINK I need a Twitter Web Intent: https://dev.twitter.com/web/tweet-button/web-intent
How to I use the query parameters? I've tried it like this: <a href="https://twitter.com/intent/tweet?text=testing%20this%button">Tweet</a>, but that doesn't do anything.
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:21
@webierweb you can add css, it's not a rule for this exercice, he said just he don't use it (but yes he use bootstrap css), you need to go to css column option and quick-add bootstrap
i gonna add a screen img
lackodan
@lackodan
Aug 25 2016 12:22
If I just use "https://twitter.com/intent/tweet" as the url it does work, but of course I want to send a custom tweet, so I need the text.
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:22
@webierweb
Capture d’écran 2016-08-25 à 14.22.26.png
@n0Entity try this
$('.submit1').click(function(event) {
event.preventDefault();
 $('.firstheader').html(burger.name);

});
@n0Entity it's that it doesn't work it just it's a <a href>element event followed by event.preventDefault() remove or prevent if you want default behavior of your link element
which is go to hrefpage/file etc.
webierweb
@webierweb
Aug 25 2016 12:26
That is what I have right now.
Basic gross looking html, don't want to use css column any further.
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:26
so without it when you click you basicly reload your page with value of # @n0Entity
@webierweb as you wish go look at bootstrap documentation for further changes so
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:31
@AlexanderDom still doesn’t works
mb i have to remove href?
@AlexanderDom i simply scared if i can’t split 2 different pages this way
webierweb
@webierweb
Aug 25 2016 12:32
cool. i will look at that link. i made it to this point in the code camp. funny how they just send you off to explore and research to get the challenge done. hence why it is a challenge.
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:32
@n0Entity no try to put a console.log('Hey its clicking !') inside of your click script
to see that it's actually clicking
@webierweb before this challenge you used some classes of bootstrap to center text/elements and others, so basicly its a challenge for see what did you learned in css html, use of bootstrap
webierweb
@webierweb
Aug 25 2016 12:34
thanks @AlexanderDom
CamperBot
@camperbot
Aug 25 2016 12:34
webierweb sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:35
@webierweb you're welcome
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:35
@AlexanderDom where i can see the console then?
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:35
@n0Entity what browser did you use ?
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:35
chrome
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:36
right click in your page, inspect element, then push escape or go to console tab
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:36
okay
no results then
it’s clear
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:37
so it's often your selector that is mistyped
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:38
but it;s okay
and doesn’t works
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:39
@n0Entity try to use your selector in your console
to see what it return
Capture d’écran 2016-08-25 à 14.40.22.png
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:42
it’s exists
<a href=“#” class=“submit1”> </a>
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:47
so i don't know i need to see all html and js, can you create a codepen page ?
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:47
ye
first page
Joseph Harskamp
@jharskamp
Aug 25 2016 12:51
http://codepen.io/jharskamp/pen/dXBdPJ can anyone tell me why the image isn't responding to anything I do to i?
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:53
@n0Entity for first one it's ok http://codepen.io/AlexanderDom/pen/yJdvWb
@n0Entity actually you want to change the text on the other page ?! ><
so need to use ajax...
or localStorage
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:56
What is better and easier to impl
Implement
Y,i wanna change text of the other page ;(
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:57
localstorage it's ok
Ilya Kostichenko
@n0Entity
Aug 25 2016 12:58
And all i need to do then just instead $(selector).html(localStorageVariable) ? Or something else
Alexander Domikov
@AlexanderDom
Aug 25 2016 12:59
sessionStorage.setItem("textToSave",$(selector).text()) //or text variable
//then on other page 
$('h3').text(sessionStorage.getItem("textToSave"));
John Doe
@codingisfun11
Aug 25 2016 13:00
Accessing Objects Properties with the Dot Operator
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:00
John Doe
@codingisfun11
Aug 25 2016 13:01
Java.
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:01
@AlexanderDom thanks a lot)
CamperBot
@camperbot
Aug 25 2016 13:01
n0entity sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:02
@n0Entity you're welcome :)
@n0Entity last advice if you want to test that you saved your variable, again you can try in console first like sessionStorage.setItem("textToSave","text") then go to ressources tab and look for session storage Storage
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:06
@AlexanderDom ^_^ thanks)
CamperBot
@camperbot
Aug 25 2016 13:06
n0entity sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: n0entity already gave alexanderdom points
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:06
=) enjoy
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 13:07
Does anyone know how to override bootstrap's btn-custom color on :active and :focus?
For some reason my button defaults to a dark shade of gray when focused even though I've specified that its color should be white. I've even attempted using "!important".
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:08
@AlexanderDom can u suggest some stuff about backend also?
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:09
@n0Entity sorry i'm newbie in it for now :( i know that mongoDb is used with nowadays but i don't know nothing about it sorry :(
@Todai88 wait for it
/*.btn-custom:active:focus, just for outline not for color actually :p */
.btn-custom:active,
.btn-custom:focus { color: rebeccapurple; }
part :active:focus it's not from me it's bootstrap rule
never seen before
an element at same time focused and active
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:15
sorry just .btn-custom:focus is enough for focus, double don't needed
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:16
@AlexanderDom also wanted to ask if u know where i can practice jade and sass,js
miriam-z
@miriam-z
Aug 25 2016 13:17
best way to approach a two level responsive navbar in bootstrap? By two level I mean one on top of the other
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:17
@n0Entity codepen, jade in html tab you can choose html preprocessor jade, sass in css tab
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:18
@AlexanderDom
Btw r u from russia?)
Alexander Domikov
@AlexanderDom
Aug 25 2016 13:19
@n0Entity natively but i live in France :)
Ilya Kostichenko
@n0Entity
Aug 25 2016 13:20
@AlexanderDom wow)
Chris Cullen
@123xylem
Aug 25 2016 13:43

http://codepen.io/123xylem/pen/JKqYZY?editors=0011
OK When I run this I click a square and CPU clicks one depending on randomly generated CHOICE var. THis is console.logged also....
However THe CHOICE doesnt seem to be the same as the Square ID...

function cpu() { //CPU move chosen from random choice var
  if (userX == true) {
    $("#" + choice + "").text("O");
  } else {
    $("#" + choice + "").text("X");
  }
}

IE choice comes up as i which would be bottom right ... but the square that changes is top left...
Can you help with this part of my code?

John Doe
@codingisfun11
Aug 25 2016 14:01
blob
whats wrong with my code
Alexander Domikov
@AlexanderDom
Aug 25 2016 14:12
@codingisfun11 did you defined myObj? otherwise use testObj
John Doe
@codingisfun11
Aug 25 2016 14:14
wow finshed thanks
Alexander Domikov
@AlexanderDom
Aug 25 2016 14:15
you're welcome
Mateo Joya
@Batectazo
Aug 25 2016 14:48
Hello everybody, i have a question. Currently im developing my personal portfolio page, but i have no idea how can i make the top part (i dont know then name but its the bar in which you put the buttons to navigate in the page)
John Doe
@codingisfun11
Aug 25 2016 14:48
// Setup
var testObj = {
  "an entree": "hamburger",
  "my side": "veggies",
  "the drink": "water"
};

// Only change code below this line

var entreeValue = ["testObj"] hamburger;   // Change this line
var drinkValue = ['testObj'] water;    // Change this line
Accessing Objects Properties with Bracket Notation java
Stephen James
@sjames1958gm
Aug 25 2016 14:49
@codingisfun11 The brackets go around the property not the object variable.
Bhushan Patil
@mrpatil007
Aug 25 2016 14:50
@Batectazo hey you can use navbar to top it's a personal opinion
John Doe
@codingisfun11
Aug 25 2016 14:52
@sjames1958gm var entreeValue = testObj[hamburger]; // Change this line
var drinkValue = testObj[water];
???
Stephen James
@sjames1958gm
Aug 25 2016 14:52
@codingisfun11 When in brackets a literal property name has to have "" testObj["hamburger"] which is the same as testObj.hamburger
Mateo Joya
@Batectazo
Aug 25 2016 14:53
@mrpatil007 thank you!
CamperBot
@camperbot
Aug 25 2016 14:53
batectazo sends brownie points to @mrpatil007 :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @mrpatil007 |http://www.freecodecamp.com/mrpatil007
Stephen James
@sjames1958gm
Aug 25 2016 14:54
@123xylem Your user move is splicing the array assuming that the entries are in a specific place, but they aren't once you start splicing.
maybe choice.splice(choice.indexOf(move), 1)
Bhushan Patil
@mrpatil007
Aug 25 2016 14:54
@Batectazo np welcome
John Doe
@codingisfun11
Aug 25 2016 14:54
@sjames1958gm var entreeValue = testObj["hamburger"]; // Change this line
var drinkValue = testObj['water'];
var entreeValue = testObj["hamburger"]; // Change this line
var drinkValue = testObj['water'];
Chris Cullen
@123xylem
Aug 25 2016 14:56
@sjames1958gm are you reffering to cpu move or user move? I just added a .splice bit at teh bottom onclick.. but didnt think The user Click was splicing anything before that
Stephen James
@sjames1958gm
Aug 25 2016 14:56
@codingisfun11 Oops you are using the property value (the right side of the : ) you need the left side "an entree"
@123xylem There are splices in the switch statement
Chris Cullen
@123xylem
Aug 25 2016 14:57
@sjames1958gm o yea my bad .. stopped looking at that
Stephen James
@sjames1958gm
Aug 25 2016 14:58
@123xylem :P
Chris Cullen
@123xylem
Aug 25 2016 14:58
would choices.splice($(this).attr('id'),1); work the same as move?
or var move = choices.splice($(this).attr('id'),1);
i mean move = $(this).attr('id'),1);
Stephen James
@sjames1958gm
Aug 25 2016 14:58
@123xylem I didn't know what the move value was stored in that was only a sample.
Chris Cullen
@123xylem
Aug 25 2016 14:58
Yea i havent stored move yet as far as i know
Stephen James
@sjames1958gm
Aug 25 2016 14:59
@123xylem isn't id the same as the value in choices?
John Doe
@codingisfun11
Aug 25 2016 14:59
Accessing Objects Properties with Bracket Notation
java
@sjames1958gm @123xylem
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 15:00
working on local weather - could someone help? not sure why the api call not working
Chris Cullen
@123xylem
Aug 25 2016 15:02
@sjames1958gm yes
@sjames1958gm but the code is slightly bugged i believe.. I dont really know how it works yet.. Ive got the cPU to move 3 times after user clicks which is an improvement on 1 but I have no idea why its limited to 3 moves or why it now moves more than once
Stephen James
@sjames1958gm
Aug 25 2016 15:05
@codingisfun11 var entreeValue = testObj["an entree"]
my bad for not noticing you were using property value rather than property name
@lidiawisniewska It is $.get - + you will have to have real values for lat / lon
John Doe
@codingisfun11
Aug 25 2016 15:06
@sjames1958gm figured it out
Stephen James
@sjames1958gm
Aug 25 2016 15:07
@codingisfun11 :+1:
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 15:08
@sjames1958gm so get geo-location first?
Jason Luboff
@JLuboff
Aug 25 2016 15:10
@sjames1958gm Good morning, wondering if you can offer a little advice on the "Wherefore art thou" algorithm? I've been playing around with .hasOwnProperty trying to test collection to source (i.e collection[i].hasOwnProperty(source)) but this never seems to be true...and played with Object.keys but wasn't really getting anywhere :-1:
@lidiawisniewska Yes you'll want to get geo-location and assign the lat/long to variables that can be passed to your URL
Stephen James
@sjames1958gm
Aug 25 2016 15:11
@lidiawisniewska Yes.
Wesley Schulte
@WesSchulte
Aug 25 2016 15:11
im about ready to submit my tribute page, could somebody look at my code and help me clean up my bullet points? i want them to be a little more centered
and my image wont resize itself when i post it in here
Stephen James
@sjames1958gm
Aug 25 2016 15:13
@JLuboff I would use filter for the collection (as you are trying to filter out values) then you can use Object.keys to get an array of keys on source.
A loop inside of the filter to validate the keys and values (.hasOwnProperty + values being equal). (consider looking at .every array functoion)
Jason Luboff
@JLuboff
Aug 25 2016 15:13
@WesSchulte Technically your bullet points are centered. You div is the entire page wide, so if you only want them to take up the middle portion of the page with blank areas on either side, you may want to adjust your container size. I.e change from col-xs-12 to col-xs-8 col-xs-offset-2
The offset will move the content two columns over, and then be only 8 wide, leaving 2 additonal columns on the right blank
Wesley Schulte
@WesSchulte
Aug 25 2016 15:14
@JLuboff thanks mate ill get to it!
CamperBot
@camperbot
Aug 25 2016 15:14
wesschulte sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Aug 25 2016 15:14
@sjames1958gm Thanks! I'll see what I can do. I'm not having the best of luck with these intermediate algorithms :(
CamperBot
@camperbot
Aug 25 2016 15:14
jluboff sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2850 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 15:14
Does anyone have Facebook's status update URL handy? Similar this Twitter URL: //https://twitter.com/intent/tweet?text=<mytext>
Chris Cullen
@123xylem
Aug 25 2016 15:17
@sjames1958gm Stephen Ive console logged the hell out of my algo... After making 3 choices choices array returns undefined.. SO THATS WHY cpu isnt moving more.. Not sure why its undefined though.. But You think you could take a look at the console of the algo. its setup for Player X at the mo
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 15:21
@JLuboff @sjames1958gm like this?
var lat, lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
John Doe
@codingisfun11
Aug 25 2016 15:22
blob
Jason Luboff
@JLuboff
Aug 25 2016 15:22
I defined my variables within my geolocation function, but as long as theyare able to be defined, then ya
Stephen James
@sjames1958gm
Aug 25 2016 15:24
@123xylem Try defining a function that removes the choice and one that gets a new choice. Your splice("a", 1) is definitely wrong.
function removeChoice(v) {
  choices.splice(choices.indexOf(v), 1);
};

function newChoice() {
  choice = choices[Math.floor(Math.random() * choices.length)];
  console.log(choice+" cpu next choice");
}
@codingisfun11 playerNumber is supposed to be assigned 16 - then use playerNumber variable in the lookup
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 15:25
Could someone here have a look at my pen and tell me why the bootstrap scaffolding isn't making my solution responsive when using smaller devices?
http://codepen.io/Todai/full/mEkOQk/
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 15:25
@JLuboff thanks :)
CamperBot
@camperbot
Aug 25 2016 15:25
lidiawisniewska sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @jluboff |http://www.freecodecamp.com/jluboff
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:28
@Todai88 for meta you can set it in html tab options, and you don't need to set head and body, code your html like you're in body already
Chris Cullen
@123xylem
Aug 25 2016 15:28
@sjames1958gm how comemy splice doesnt work? If it removes the correct element isnt that ok, or is it leaving a gap or something?
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:28
css in css tab @Todai88 "add external css"
Lidia Wisniewska
@lidiawisniewska
Aug 25 2016 15:29
@JLuboff it doesnt look like the rest is working though
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:29
for font-awesome for exemple
Stephen James
@sjames1958gm
Aug 25 2016 15:29
@123xylem The first parameter to splice is an index and you are giving it "a"
Chris Cullen
@123xylem
Aug 25 2016 15:29
@sjames1958gm o >< i see
Stephen James
@sjames1958gm
Aug 25 2016 15:30
@123xylem After clicking in the center and the computer move in the lower left.
c,d,e,f,g,h,i choices array after cpumove
I would have thought a, b, c, d, f, h, i
Chris Cullen
@123xylem
Aug 25 2016 15:31
@sjames1958gm yea it lags a bit
and obviously isnt right.
Ive also got a splice at the bottom that splices via the atrr.id() :(
Stephen James
@sjames1958gm
Aug 25 2016 15:32
@123xylem :P
Jason Luboff
@JLuboff
Aug 25 2016 15:35
@lidiawisniewska a couple of things...you'll need to add http:// to the beginning of your api url and you currently are not calling to your variables in your url
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 15:35
@AlexanderDom Added the link and meta in the html tags, but didn't do anything for the scaffolding / making it responsive
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:37
@Todai88 <body> need to be removed too :)
what you mean by scaffolding ?
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 15:39
@AlexanderDom Bootstrap's columns / rows are usually referred to as scaffolding. I was under the assumption that they would make your design responsive
Chris Cullen
@123xylem
Aug 25 2016 15:39
@sjames1958gm if i use function removeChoice(v) {
choices.splice(choices.indexOf(v), 1);
};
do i call it with remove choice (a) or ("a")?
Stephen James
@sjames1958gm
Aug 25 2016 15:40
@123xylem The string value in the array that you want to remove.
Chris Cullen
@123xylem
Aug 25 2016 15:40
@sjames1958gm yea... but do i have to put the callback instrings.. i dont think i do
Stephen James
@sjames1958gm
Aug 25 2016 15:40
"a" because the array has strings.
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:41
@Todai88 it's with class col-xs you added 'col-xs-4' so your block gonna take one third of a page on small screen
@Todai88 it's explained in details Here
r2d2
@UsamaHameed
Aug 25 2016 15:43
Anyone familiar with flex box?
Alexander Domikov
@AlexanderDom
Aug 25 2016 15:43
@UsamaHameed yes
Chris Cullen
@123xylem
Aug 25 2016 15:44
@sjames1958gm o ok
thanks @sjames1958gm btw I think this is getting me somehweer now!
CamperBot
@camperbot
Aug 25 2016 15:44
123xylem sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2851 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
r2d2
@UsamaHameed
Aug 25 2016 15:45

I have this div wrapping all my code @AlexanderDom

.flex-container {

  flex-direction: column;
  justify-content: center;

}

I want to apply a border on it but that border stretches all the way to the sides. I tried applying a width property but that upset flexbox somehow. How do I adjust the width automatically so that the border would be around the content?

Alexander Domikov
@AlexanderDom
Aug 25 2016 15:49
@UsamaHameed
.flex-container {
  border: 2px solid red;
  flex-direction: column;
  justify-content: center;
margin-left: auto;
  margin-right: auto;
  width: 400px;
}
Shailza
@shailza
Aug 25 2016 15:50
how to use open weather api in the code?
Jason Luboff
@JLuboff
Aug 25 2016 15:53
@shailza Start by looking at the documentation http://openweathermap.org/api
Stephen James
@sjames1958gm
Aug 25 2016 16:00
@123xylem Try also to keep your code indentation consistent - it easier to read. There is a tidy js option in codepen
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:04
where can i learn about api extracting data from websites..... so that i can get the idea of how those extracting of data works
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:05
mdn perhaps
Shailza
@shailza
Aug 25 2016 16:06
@JLuboff I read it. But i dont know how to start with js part for this challenge
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:06
mdn ??
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:07
mozilla developer network
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:07
ohhhh........... thnx mate....... as always..... (y)
Shailza
@shailza
Aug 25 2016 16:07
@xxholyChalicexx Mozilla Developer Network
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:07
This message was deleted
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:07
;) you're welcome
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:08
@AlexanderDom (y)
Joel Santos
@St3ps
Aug 25 2016 16:08

Question about bootstrap.
Let's say i have something like the following code.

<div class="collapse navbar-collapse" id="bs-nav-collapse">
                <ul class="nav nav-justified"> 
                    <li class="active"></li>
                    <li><a href="#abc">Portfolio</a></li>
                    <li><a href="#abc">Contact</a></li>
                 </ul>
            </div>

I checked the class 'nav-justified' in the browser tools and all i see is "width: 100%" in it's CSS. I tried replacing it with a random class "someclass", and added it to the respective element and in my own css gave it the same property value.
But the result was different.
Is there something going behind the scenes?

Darth Skywalker
@adityaparab
Aug 25 2016 16:09
@xxholyChalicexx : (y) won't work here. You're gonna have to do :+1:
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:09
@shailza thnx to u too
CamperBot
@camperbot
Aug 25 2016 16:09
xxholychalicexx sends brownie points to @shailza :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @shailza |http://www.freecodecamp.com/shailza
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:09
@St3ps so i don't see all your html but, <ul> it's a block element, it means that by default his width is 100% of his parent
so div, h1-6, p, ol, ul, li and others has width:100% by default
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:11
Hi guys,
How would I go about vertically centering a div? Not sure where my error is, but I've been looking around on Google for a while now. This is my pen (I want to vertically center the box):
http://codepen.io/Todai/pen/mEkKVG
Mohit Sharma
@xxholyChalicexx
Aug 25 2016 16:11
@AlexanderDom :+1:
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:11
^^ thank's
@Todai88 me again :)
Joel Santos
@St3ps
Aug 25 2016 16:12
@AlexanderDom that's odd....why would the nav-justified have it's property as width: 100%? Perhaps if i place the whole code online it'll help, i'll set up a pen, hold on
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:13
@Todai88
.quote-box{
  top: 50%;
  transform: translateY(-50%);
}
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:14
I fudging tried that
Joel Santos
@St3ps
Aug 25 2016 16:14
@AlexanderDom http://codepen.io/Steps/pen/rLEKYr here it is, it's just html, i'm guessing maybe something is going "behind the scenes"?
vincentwue
@vincentwue
Aug 25 2016 16:14
hey guys
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:14
I missed the position:absoulte;
fml
@AlexanderDom Thanks
CamperBot
@camperbot
Aug 25 2016 16:14
todai88 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
vincentwue
@vincentwue
Aug 25 2016 16:15
why are buttons with fixed size bigger with content than without?
Joel Santos
@St3ps
Aug 25 2016 16:17
You can see it for yourself , if you remove the nav-justified it will...well, it will no longer justify the content in the navbar :p , if you replace it, the result will be as of nothing was done...
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:17
@St3ps it's because of display: block -> block element
@VincentWue it depends on button :)
Darth Skywalker
@adityaparab
Aug 25 2016 16:19
@Todai88 : If you're really serious about improving your understanding of CSS, may I recommend refraining from using position:absolute;
Shailza
@shailza
Aug 25 2016 16:20
i know my code has lots of issues please helphttps://codepen.io/shlza/pen/YWbRWP
Joel Santos
@St3ps
Aug 25 2016 16:20
@AlexanderDom By default, to my understanding, the ul element is a block element. But something else is redefining it as a block. Is that it?
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:21
@St3ps
Capture d’écran 2016-08-25 à 18.20.46.png
user agent means browser
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:21
@adityaparab Problem is that if I take that away from the code, it flies up and stays above the body almost. Do you have any suggestions?
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:21
@Todai88, there are plenty
Darth Skywalker
@adityaparab
Aug 25 2016 16:21
@Todai88 : use CSS flexbox!
@shailza : You never called showWeather
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:22
but carefull with it too :)
@Todai88 enjoy
Aniruddh Goteti
@aniruddhgoteti
Aug 25 2016 16:23
Where can I find Tribute Page projects of other users?
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:23
you can search on codepen with tribute page
but it's like looking at exemple code basicly ;)
Jason Luboff
@JLuboff
Aug 25 2016 16:26
@shailza You need to run codepen with http (meaning, http://codepen.io/shlza/... instead of https://codepen...) for the API to function. It appears you are also using a fixed location for the weather instead of getting a user's location information
Joel Santos
@St3ps
Aug 25 2016 16:27
@AlexanderDom :p I can't see the 'user agent' bits of the css, how do you find them?
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:28
@AlexanderDom Doesn't flex-box require static height + width to work properly?
Joel Santos
@St3ps
Aug 25 2016 16:29
@AlexanderDom oh i just googled it you have to activate it in settings right
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:29
@AlexanderDom Looking at the example they set the properties of the parent (wrapping white bg). I've attempted adding a wrapping div with 100% width and setting the child as it's set in the example. Doesn't seem to work as intended.
Darth Skywalker
@adityaparab
Aug 25 2016 16:29
@Todai88 : No, Flexbox doesn't require explicit height and width specification
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:30
@adityaparab
.flex { <-- wrapper (div class="row flex")
  height: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto; 
}
.quote-box {  
  resize: vertical;
  background-color: white;   
  height: auto;
  box-shadow: 5px 5px 5px black; 
}
Shailza
@shailza
Aug 25 2016 16:31
@JLuboff using codepen with http worked
Darth Skywalker
@adityaparab
Aug 25 2016 16:31
@Todai88 : Right, for that to work, you're gonna have to get rid of bootstrap grid classes.
because they set widths explicitly.
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:31
@adityaparab Even if I'm not concerned with the horizontal align?
I only wish for the box to be centered vertically. It's already set fine horizontally.
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:31
It depends sometimes you need to add height to container
@St3ps yes
Joel Santos
@St3ps
Aug 25 2016 16:33
@AlexanderDom very interesting, i didn't know you could see the browser settings. BUT... this still doesn't answer my question. What is happening with the .nav-justified class...why can't i just replace it with any other class with hte same properties to get the same effect?
It's not a "critical" question though, i'm just curious and it would help me have a better understanding of what's going on
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:34
@St3ps you want text to be justified ?
Darth Skywalker
@adityaparab
Aug 25 2016 16:34
@Todai88 : Here is a minimalistic example of how you can do it
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:35
@adityaparab see you put height on flex parent ;)
Darth Skywalker
@adityaparab
Aug 25 2016 16:36
@AlexanderDom : That's necessary to ensure cross browser compatibility
Some browsers default to 100% some don't
so you need to do that just once.
Joel Santos
@St3ps
Aug 25 2016 16:36
@AlexanderDom nop, the <li> items of that <ul> are 'justified' throughout the navbar, which is good, this is what i want, i'm trying to understand why this only can happen IF i add the nav-justified class to the <ul> and not when I just place any other class with the same property changes. Try it yourself. The nav-justified, all it does( to my knowledge?) is make the width: 100%. if i go like "potato-justified" it just won't apply it the same way
Darth Skywalker
@adityaparab
Aug 25 2016 16:36
unless you want your elements not to be flexy
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:36
Not really otherwise it don't gonna take all the height
That's why I said it depends
Darth Skywalker
@adityaparab
Aug 25 2016 16:37
@AlexanderDom : 6 of one half a dozen of the other :D
vincentwue
@vincentwue
Aug 25 2016 16:38
did you guys build a smart tic tac toe bot or a plain random one ? :D
Joel Santos
@St3ps
Aug 25 2016 16:38
@VincentWue half-half
Alexander Domikov
@AlexanderDom
Aug 25 2016 16:38
@St3ps it must add other stuff I'm on mobile so I can't debug :)
Joel Santos
@St3ps
Aug 25 2016 16:38
I REALLY tried the damn minmax algorithm
vincentwue
@vincentwue
Aug 25 2016 16:39
haha :D
Joel Santos
@St3ps
Aug 25 2016 16:39
@AlexanderDom Ah, thanks anyway man ;p
CamperBot
@camperbot
Aug 25 2016 16:39
st3ps sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
vincentwue
@vincentwue
Aug 25 2016 16:39
did you study the fcc solution?
Joel Santos
@St3ps
Aug 25 2016 16:40
@VincentWue the one you find in google?
vincentwue
@vincentwue
Aug 25 2016 16:40
@St3ps ?
Joel Santos
@St3ps
Aug 25 2016 16:40
i mean
like
the zipline ?
Look, I looked at everything
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 16:40
@adityaparab Yeah, I see what you did there. But strangely enough it still won't vertically align my box.
I'm assuming this basically confirms my suspicion that I can't have bootstrap scaffolding if I wish to use a flex-box to center vertically?
Even though the bootstrap scaffolding shouldn't (horiztonal align) mess with veritcal align
Joel Santos
@St3ps
Aug 25 2016 16:40
I looked at code in ruby, c++, java, javascript
this one
@St3ps show me yours :D
Joel Santos
@St3ps
Aug 25 2016 16:44
@VincentWue Hadn't seen it! and considering the epic sized js file not sure i'd like to!
Sure man, but let me tell you, it's not very well commented lol
EB Diallo
@EBDiallo
Aug 25 2016 16:45
Hello! Does anyone know how to center an image in HTML?
vincentwue
@vincentwue
Aug 25 2016 16:45
yeah i just used it to see how to organize a bigger file @St3ps .
did you finished front end already?
here is my buddy one:
http://codepen.io/vinceeent/pen/rLEpEV
Joel Santos
@St3ps
Aug 25 2016 16:46
the AI is in the player.js, game manager concerts itself with checking victory conditions, rules and what not , the board (also in the game_manager.js file) is where the grid, and grid like things happen
vincentwue
@vincentwue
Aug 25 2016 16:46
@St3ps *buggy :D
okay i will look over it now
EB Diallo
@EBDiallo
Aug 25 2016 16:47
Does anyone know how to center an image in HTML?
google
EB Diallo
@EBDiallo
Aug 25 2016 16:48
@VincentWue Thanks!
CamperBot
@camperbot
Aug 25 2016 16:48
ebdiallo sends brownie points to @vincentwue :sparkles: :thumbsup: :sparkles:
:cookie: 199 | @vincentwue |http://www.freecodecamp.com/vincentwue
the second one shows you basic layout stuff
Joel Santos
@St3ps
Aug 25 2016 16:51
@VincentWue animations seem nice, need to apply those to my ttt ;p
vincentwue
@vincentwue
Aug 25 2016 16:53
@St3ps haha, im always lazy with animation stuff and design, but i start to like css
usually it should start automatically to mirror the html structure to a css structure, why is this not already a feature?
@St3ps you got a lot of code dude
Arlind
@ArlindXh
Aug 25 2016 16:57
guys can someone help me about a background image thats not shown fully in codepen.io...
Vassil Kurktchiev
@kurkweb
Aug 25 2016 17:07
What's up around
Joel Santos
@St3ps
Aug 25 2016 17:07
@VincentWue Yes, i'm sure there's ways to have it better optimized, but as you can understand i was a whole week looking at the damn thing and as soon as i achieved some degree of satisfaction, i just had to move on ... I also adapt a sort of object-like approach, splitting objects in constructors and their prototypes...feel free to look at it, I can definitely recommend you one thing... there's a python tic tac toe somewhere around ... it's really easy to understand, it was thanks to that project i was able to move on.
CamperBot
@camperbot
Aug 25 2016 17:07
st3ps sends brownie points to @vincentwue :sparkles: :thumbsup: :sparkles:
Vassil Kurktchiev
@kurkweb
Aug 25 2016 17:07
Arlind
CamperBot
@camperbot
Aug 25 2016 17:07
:cookie: 201 | @vincentwue |http://www.freecodecamp.com/vincentwue
Joakim Bajoul Kakaei
@Todai88
Aug 25 2016 17:14
Need some more help. Just attempted migrating my code to my webhosting but ended up with it looking like this: http://portfolio.kimput.com/quotes/random.html
This is how the pen looks:
http://codepen.io/Todai/pen/mEkKVG
I've already added the necessary links (I think) and added the <!DOCTYPE html>
Rodolfo
@cryptshell
Aug 25 2016 17:17

Hey guys, here's my 'Tribute Page' project. Could any of you give me any feedback please? I'd appreciate any comments 😁

http://codepen.io/cryptshell/pen/pbXRKV
@irishrose

r2d2
@UsamaHameed
Aug 25 2016 17:17
@AlexanderDom thanks it worked
CamperBot
@camperbot
Aug 25 2016 17:17
usamahameed sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Aug 25 2016 17:18
You are welcome @UsamaHameed
Dale
@dwhale84
Aug 25 2016 17:19
Hi everyone. I'm in the early stages of my Wikipedia Viewer, and I'm trying to get my API call to work. I've read the bug reports for this challenge, which indicate that you need to use jsonp and a callback function for it to work, but I must be implementing them wrong. Can someone help me?
r2d2
@UsamaHameed
Aug 25 2016 17:24
@AlexanderDom how do I vertically center it? http://codepen.io/UsamaHameed/pen/dXEqkz
Alexander Domikov
@AlexanderDom
Aug 25 2016 17:32
I am on mobile phone @UsamaHameed sorry
r2d2
@UsamaHameed
Aug 25 2016 17:32
ok
vincentwue
@vincentwue
Aug 25 2016 17:32
do somebody know how to build the coloured buttons of the simon game? i just have no clue
Alexander Domikov
@AlexanderDom
Aug 25 2016 17:35
@UsamaHameed try margin: auto on child of flex container
r2d2
@UsamaHameed
Aug 25 2016 17:39
@AlexanderDom did not work
align-items: center does not work either
Ahmed
@HosTilezZz
Aug 25 2016 17:42
can someone please tell me why i'm not able to change the color of <a> elements using a:link a:visited a:hover a:active
https://codepen.io/HosTilez/full/oLRRYy/
Alexander Domikov
@AlexanderDom
Aug 25 2016 17:43
Hard to debug on mobile :(
r2d2
@UsamaHameed
Aug 25 2016 17:44
No problem.
Jason Luboff
@JLuboff
Aug 25 2016 17:48
@HosTilezZz You may have to use the !important to override to default bootstrap
olgi3rd
@olgi3rd
Aug 25 2016 17:48
@HosTilezZz I dunno rgb but you need to add one point?
rgb(n1, n2, n3)
@HosTilezZz Add point n3 into your rgb function.
NeekPizza
@NeekPizza
Aug 25 2016 18:01
hello need help with my portfolio page
looking for info on making a nav bar, and making it so when i click links on nav bar it goes to a spot on the website
olgi3rd
@olgi3rd
Aug 25 2016 18:02
@ReadyDoMe Talk to us
NeekPizza
@NeekPizza
Aug 25 2016 18:02
ive seen nav bar examples on wc3schools.com
looking to make a nav bar that is top-fixed
olgi3rd
@olgi3rd
Aug 25 2016 18:03
yes
NeekPizza
@NeekPizza
Aug 25 2016 18:03
but not sure how to make it so when i click one of the options it goes to the "about me" or something
or "my projects"
so what would i do to make it so instead of going to a different page, the nav bar links to a certain spot on my webpsage
/pagew
for example
any idea?
olgi3rd
@olgi3rd
Aug 25 2016 18:05
What is that mean the spot?
NeekPizza
@NeekPizza
Aug 25 2016 18:05
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
Try it Yourself »
ok see that?
see how it says href=#home
how do i make it so if i were to click that
olgi3rd
@olgi3rd
Aug 25 2016 18:06
ah
Dylan
@dhcodes
Aug 25 2016 18:06
@ReadyDoMe anchor tag
NeekPizza
@NeekPizza
Aug 25 2016 18:06
it would direct you to a class="well"
i know it is
ok so on my page
Mostafa Syam
@pro-mos
Aug 25 2016 18:06
@ReadyDoMe just give the href attribute the id of the element like href=#stuff
NeekPizza
@NeekPizza
Aug 25 2016 18:06
here
im going to put a nav bar
Dylan
@dhcodes
Aug 25 2016 18:06
@ReadyDoMe go to where you want it to go and do something like h1 name=#stuff
NeekPizza
@NeekPizza
Aug 25 2016 18:06
i want it to direct you to about me
Dylan
@dhcodes
Aug 25 2016 18:06
or div name = "#about"
NeekPizza
@NeekPizza
Aug 25 2016 18:06
oh
the doer
@ewathedoer
Aug 25 2016 18:06
What do I do wrong that the content is not in the center while I hit 1000px? http://codepen.io/thedoer/pen/OXZyvp?editors=1100
NeekPizza
@NeekPizza
Aug 25 2016 18:06
i see ok cool thanks!
michthunder
@michthunder
Aug 25 2016 18:07
Can someone please help me with CSS problem, I'm trying to make an image circular but it keeps taking an strange form, I don't know why
Dylan
@dhcodes
Aug 25 2016 18:07
wait @ReadyDoMe i think it may just be name = "about"
let me go look
the doer
@ewathedoer
Aug 25 2016 18:07
@michthunder send the link
Dylan
@dhcodes
Aug 25 2016 18:07
olgi3rd
@olgi3rd
Aug 25 2016 18:08
@ewathedoer what is that man hit 1000px
michthunder
@michthunder
Aug 25 2016 18:08
the doer
@ewathedoer
Aug 25 2016 18:08
@olgierd-on-fire I mean th emedia queries there, have a look at the end of css
NeekPizza
@NeekPizza
Aug 25 2016 18:09
@dhcodes ok well do! thanks man!
CamperBot
@camperbot
Aug 25 2016 18:09
readydome sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1363 | @dhcodes |http://www.freecodecamp.com/dhcodes
olgi3rd
@olgi3rd
Aug 25 2016 18:09
that is max-width @ewathedoer
the doer
@ewathedoer
Aug 25 2016 18:09
@olgierd-on-fire yes
Mostafa Syam
@pro-mos
Aug 25 2016 18:09
@michthunder it's because the image height is not the same as the width
olgi3rd
@olgi3rd
Aug 25 2016 18:09
no height
michthunder
@michthunder
Aug 25 2016 18:09
@ewathedoer

@ewathedoer

.about-image {
padding-top: 75px;
margin-left: 20%;
margin-right: 20%;
border-radius: 50%;
}

Dylan
@dhcodes
Aug 25 2016 18:10
@michthunder change padding-top
to margin-top
michthunder
@michthunder
Aug 25 2016 18:11
@pro-mos the image is an exact square, and I haven't modified the height or the width
olgi3rd
@olgi3rd
Aug 25 2016 18:11
@ewathedoer You can use margin-top or absolute positioning or javascript.
Dylan
@dhcodes
Aug 25 2016 18:11
padding is within the border, margin is outside
Rodolfo
@cryptshell
Aug 25 2016 18:11
Any feedback on tribute page project?
http://codepen.io/cryptshell/pen/pbXRKV
Mostafa Syam
@pro-mos
Aug 25 2016 18:12
padding changes add to the width, unless you use box-sizing, or margin instead as dylan said
michthunder
@michthunder
Aug 25 2016 18:12
@dhcodes tried it, but the image is still nor round
Dylan
@dhcodes
Aug 25 2016 18:12
uh... it should be
the doer
@ewathedoer
Aug 25 2016 18:12
@olgierd-on-fire so what can I change now to center it with flex box when the width is lower than 1000px? What did I miss?
Dylan
@dhcodes
Aug 25 2016 18:13
@michthunder it's round on my end
Rodolfo
@cryptshell
Aug 25 2016 18:13
@michthunder I think bootstrap has a class called img-circle...try <img class="img-circle">
Dylan
@dhcodes
Aug 25 2016 18:14
soooooooooooooooooooooo round
michthunder
@michthunder
Aug 25 2016 18:14
@dhcodes Yes thank you, I re tried it and it work
CamperBot
@camperbot
Aug 25 2016 18:14
michthunder sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1364 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Aug 25 2016 18:14
;)
the doer
@ewathedoer
Aug 25 2016 18:14
@michthunder when I work on it in a browser and reduce the top padding to 0 and set exactly the same width and height (eg 500px) of an image it gets perfectly rounded
the doer
@ewathedoer
Aug 25 2016 18:15
aa ok you got it the other way, great
michthunder
@michthunder
Aug 25 2016 18:16
@ewathedoer yes, thank you any way
CamperBot
@camperbot
Aug 25 2016 18:16
michthunder sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
the doer
@ewathedoer
Aug 25 2016 18:23
@cryptshell nice font. Users stories met. You may want to check it on mobile smaller than 600px in width.
Rodolfo
@cryptshell
Aug 25 2016 18:25
@ewathedoer Thank you! I'll do that :D
CamperBot
@camperbot
Aug 25 2016 18:25
cryptshell sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
checkmate-bitch
@checkmate-bitch
Aug 25 2016 18:26
Hey! I just completed (not really, few tweaks remain) the Random Code Generator. Could you people please review it? http://codepen.io/flash_code/full/KrjBAo/
olgi3rd
@olgi3rd
Aug 25 2016 18:32
@checkmate-bitch random quote is not working
khayati-oussama
@khayati-oussama
Aug 25 2016 18:32
Nesting For Loops help please!
Justin
@jhadams82
Aug 25 2016 18:33
I've been working on the Twitch API project for weeks now. I've been trying to get flexbox to work but somethings broke. if anybody has time, please take a look and leave me a message with a hint. thanks in advance! =D
https://codepen.io/jhadams82/pen/akYmmy/
i've got a practice pen showing what I want it to do. need that status holder to expand and the other ones stay small and move all the way out.
https://codepen.io/jhadams82/pen/XKwVgX
checkmate-bitch
@checkmate-bitch
Aug 25 2016 18:34
@olgierd-on-fire yeah, that's because the API I used does not give me access to their random quotes endpoint. That's private like apply for key and stuff. Did not want to get into that yet!
Justin
@jhadams82
Aug 25 2016 18:35
Sorry it's not responsive yet. looks like crap if you open it here in chat
olgi3rd
@olgi3rd
Aug 25 2016 18:36
@checkmate-bitch I don't haha
Philip Eckert
@pae4557
Aug 25 2016 18:37
@jhadams82 I have no help, but I do want to say that it looks like its going to be really nice when finished!
alienelvis
@alienelvis
Aug 25 2016 18:45
Con I get some help with the Weather Project?
greg
@wearenotgroot
Aug 25 2016 18:46
@checkmate-bitch you can try and use other api such as http://api.forismatic.com for the random quote
@alienelvis what is your question? or what are you having trouble with?
alienelvis
@alienelvis
Aug 25 2016 18:52
two things right now, is there a guide somewhere for me to interpret the info the weather API returns? Like, do I just subtract 200 from the temp to get Farenheit?
greg
@wearenotgroot
Aug 25 2016 18:53
@alienelvis on openweather api you can specify what units the return data from the call you made
@alienelvis you can append to the api url '&units=metric' then it will be in metrice (temp in celsius)
@alienelvis if no units are specified then it will be in Standard units of measurement. the temperature will be in Kevlin
@alienelvis now you can make your own conversion function if you like.(you need to between metric and imperial measurements)
@alienelvis if you check the documentation there are some info there
openweather api docs
alienelvis
@alienelvis
Aug 25 2016 18:56
ok, I see. Going cross eyed trying to understand the API stuff. the lessons for all this was so weak.
greg
@wearenotgroot
Aug 25 2016 18:57
@alienelvis well these project require more research on your own part and that was the point
@alienelvis remember api's are not built the same so it is a matter of reading the documentation that is provided
the doer
@ewathedoer
Aug 25 2016 19:02
I need help with flex box, anybody?
not sure why the content does not center when the width is smaller than 1000px, I tried justifying it with align content
greg
@wearenotgroot
Aug 25 2016 19:06
@ewathedoer sorry cant help havent tried flex box :worried:
the doer
@ewathedoer
Aug 25 2016 19:07
sure, maybe there’s sb here who knows :)
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:07
@ewathedoer you need text-align: center on li and its justify-center on ul not align-center
the doer
@ewathedoer
Aug 25 2016 19:07
let me try
hmm justify-center? @vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:11
@ewathedoer yes
.flex-nav ul {
      justify-content: center;
   }
   .flex-nav li {
      text-align: center
   }
@ewathedoer try & see if this is what you need
the doer
@ewathedoer
Aug 25 2016 19:12

nope, it doesn’t work

/* media queries */
@media screen and (max-width:1000px) {
   .flex-nav ul {
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
   }
   .flex-nav li {
      flex: 1 1 33.33
      text-align: center;
   }
   .flex-nav .social {
      flex: 1 1 33.33%
   }
}

@vinaypuppal

vínαч puppαl
@vinaypuppal
Aug 25 2016 19:13
u missed ; before text-align see @ewathedoer
the doer
@ewathedoer
Aug 25 2016 19:14

even with it it doesn’t work
now I have

@media screen and (max-width:1000px) {
   .flex-nav ul {
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
   }
   .flex-nav li {
      flex: 1 1 33.33
      text-align: center;
   }
   .flex-nav .social {
      flex: 1 1 33.33%;
   }
}

@vinaypuppal

have a look now at the pen
karocann
@karocann
Aug 25 2016 19:15
How do I access the CodeCamp html page to begin writing the code for the "Build a Tribute Page"?. All I see is a page with a video on it but no way to begin creating a new page/project.
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:15
@ewathedoer okay let me check again
the doer
@ewathedoer
Aug 25 2016 19:15
@karocann the thing is to write it on your own from scratch
greg
@wearenotgroot
Aug 25 2016 19:15
@karocann umm on the MAP ?
karocann
@karocann
Aug 25 2016 19:15
Using notepad or the equivalent?
the doer
@ewathedoer
Aug 25 2016 19:16
eg codepen
@karocann
greg
@wearenotgroot
Aug 25 2016 19:16
@karocann oh you can use codepen or fiddle
karocann
@karocann
Aug 25 2016 19:17
So i sign up on codepen and use their blank page to begin writing?
greg
@wearenotgroot
Aug 25 2016 19:17
@karocann yes, you can use your github to sign up/in
the doer
@ewathedoer
Aug 25 2016 19:17
yes
karocann
@karocann
Aug 25 2016 19:17
thanks. I have an old copy of Dreamweaver. Will that work?
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:18

@ewathedoer u missed % it shld be like this , codepen shld warn u??
yours

.flex-nav li {
      flex: 1 1 33.33 //<- see
      text-align: center;
   }

shld be like this

.flex-nav li {
      flex: 1 1 33.33%;
      text-align: center;
   }
greg
@wearenotgroot
Aug 25 2016 19:18
@karocann it's better to write the html, css and js yourself. You'll learn more
the doer
@ewathedoer
Aug 25 2016 19:18
@vinaypuppal have a look now, it does not help
the doer
@ewathedoer
Aug 25 2016 19:19
shit it works on yours, thanks @vinaypuppal
CamperBot
@camperbot
Aug 25 2016 19:19
ewathedoer sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 461 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
greg
@wearenotgroot
Aug 25 2016 19:20
anyways dinner time, GL and Happy Coding everyone!
the doer
@ewathedoer
Aug 25 2016 19:20
maybe I got cache or sth if it was just ; let me compare it @vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:21
@ewathedoer okay i only update the CSS i told u above
the doer
@ewathedoer
Aug 25 2016 19:21
loving your patience, thanks once again @vinaypuppal
CamperBot
@camperbot
Aug 25 2016 19:21
:warning: ewathedoer already gave vinaypuppal points
ewathedoer sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
the doer
@ewathedoer
Aug 25 2016 19:21
let’s call it a day then
vínαч puppαl
@vinaypuppal
Aug 25 2016 19:22
@ewathedoer :smile:
Armaan Roshani
@armaanhammer
Aug 25 2016 19:24
Hey guys, I'm having trouble with a section near the end of the Javascript section.
I think I'm either having trouble creating an empty array, or having trouble pushing to an array
Here's my relevant code:
  } else if (prop == "tracks" && value !== "") {
    console.log("second if");
    if (!collection[id].hasOwnProperty(prop)) { //no tracks yet
      console.log("nested second if");
      collection[id][prop] = []; //create array
      console.log(collection[id][prop]);
    }
    collection[id][prop].push([value]); //add value
The console.logs are for debugging
NeekPizza
@NeekPizza
Aug 25 2016 19:29
hello
wondering how to add thumbnails to a well
also my github graphic is cut in half for an unknown reason
here is my portfolio assignment so far
just need to add some thumbnail place holders and ill be done
just noticed some of my links were going to the wrong places here i fixed
but yeah. any good resources on how to add thumbnails inside of a well?
Moisés Man
@moigithub
Aug 25 2016 19:33
@armaanhammer remove the brackets collection[id][prop].push([value]); //add value
cuz brackets mean its an array ..
soo u pushing an array inside tracks which is an array too
Armaan Roshani
@armaanhammer
Aug 25 2016 19:35
Thanks! I forgot those were still in there. I added the brackets because I was confused about something else earlier and forgot to remove them. It's working now!
@moigithub Thanks! (for karma)
CamperBot
@camperbot
Aug 25 2016 19:35
armaanhammer sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2002 | @moigithub |http://www.freecodecamp.com/moigithub
alienelvis
@alienelvis
Aug 25 2016 19:36
ok, on the Weather App, I am having trouble getting the lat & long.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
});
}
Moisés Man
@moigithub
Aug 25 2016 19:37
@alienelvis open ur browser devtools (F12 on most browsers)
and check on ur console tab
if u have any error
alienelvis
@alienelvis
Aug 25 2016 19:41
@moigithub thanks, looks like .getCurrentPosition() doesn't work unless you use https.
CamperBot
@camperbot
Aug 25 2016 19:41
alienelvis sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2003 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Aug 25 2016 19:41
yep :)
alienelvis
@alienelvis
Aug 25 2016 19:45
ugh, still not getting the lat and long, but I have no errors in dev tools about it.
Muhammad Hasham
@MohammadHasham
Aug 25 2016 19:47

function updateInventory(arr1, arr2) {

  var invent = arr1.concat(arr2);
  var inventory = invent.reduce(function(acc,next){

    if (acc[next[1]]) //if exists and is not undefined
      {
        acc[next[0]] +=next[0];
      }
    else
      {
        acc[next[1]] = next[0]; //if undefined
      }
    return acc;
   },{});
  return inventory;
}
Why is this not working????
@moigithub
Moisés Man
@moigithub
Aug 25 2016 19:59
cant think without values.. whats values have invent after u concantenated arr1 and arr2 ?? @MohammadHasham
Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:00

function updateInventory(arr1, arr2) {

  var invent = arr1.concat(arr2);
  var inventory = invent.reduce(function(acc,next){

    if (acc[next[1]]) //if exists and is not undefined
      {
        acc[next[0]] +=next[0];
      }
    else
      {
        acc[next[1]] = next[0]; //if undefined
      }
    return acc;
   },[]);
  return inventory;
}


// Example inventory lists
var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
];

var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
];

updateInventory(curInv, newInv);
@moigithub
Here is the complete code
Moisés Man
@moigithub
Aug 25 2016 20:00
@alienelvis soo r u using https ??
try add console.log(position); and check on console. if u get something
Moisés Man
@moigithub
Aug 25 2016 20:06

soo after concatenating both..

invent will be =   [
 [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"],
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
];

i was asking u to show that.. try to execute on ur mind the code... n guess what result it could be
@MohammadHasham
soo if u understand what each instruction does.. u can debug ur own code that way

Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:07
@moigithub but the problem is that the first element is being added
but the name is being changed i dont know why?
Moisés Man
@moigithub
Aug 25 2016 20:08
ur first code.. posted have
},{});
and ur second post
},[]);
which one is valid ??
Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:08
sorry ! actually the first one
@moigithub
alienelvis
@alienelvis
Aug 25 2016 20:08
@moigithub Yeah, using https for codepen now. I got the "Allow location" popup. I even set the browser to always allow location for codepen.
Moisés Man
@moigithub
Aug 25 2016 20:09
@alienelvis did u add console.log ? show anything on console ?
(after u click yes on the popup)
alienelvis
@alienelvis
Aug 25 2016 20:11
yeah, I did console.log(position.coords) and I get the lat and long in the console.
Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:12
@moigithub any idea? what's wrong in there?
alienelvis
@alienelvis
Aug 25 2016 20:14
I have variables initialized to save the latitude and longitude to build the api call. they are both initialized as 0. My apiCall is built with 0's instead of the actual lat and long. It seems to not be saving the coordinates to my variables.
Stephen James
@sjames1958gm
Aug 25 2016 20:15
@alienelvis getCurrentPosition is asynchronous, it will return from the function before the call back is executed allowing code further on
to execute before lat and long are set. Put you weather API call in a function and call it from the getCurrenPosition callback passing lat /long
Moisés Man
@moigithub
Aug 25 2016 20:20
@MohammadHasham ok found .. took a while :)
acc[next[0]] +=next[0]; << this is ur error
ur key on the object is the name.. so
it should be
acc[next[1]] +=next[0];
Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:20
@moigithub Thanks but can you explain me why?
CamperBot
@camperbot
Aug 25 2016 20:20
mohammadhasham sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2004 | @moigithub |http://www.freecodecamp.com/moigithub
Muhammad Hasham
@MohammadHasham
Aug 25 2016 20:21
@moigithub my bad!
Lane Goodman
@LanesGood
Aug 25 2016 21:22
Question for anyone on vertical centering
Ryan Francis Bailey
@ryanbailey123
Aug 25 2016 21:23
Type question @LanesGood
Lane Goodman
@LanesGood
Aug 25 2016 21:24
Ok, so I'm trying to have a "Team Profile" section with a circle image centered, and first name and last name on either side of the image, also centered
So, like this: -0-
encount
@encount
Aug 25 2016 21:37
can anyone please tell me if the images are not showing up for this game - it works fine on my computer but another camper said there were no images on his linux setup http://codepen.io/encount/full/ZONgqQ/
Jason Luboff
@JLuboff
Aug 25 2016 21:41
@encount The images are broken
If I try and go directly to the image url, it gives me an error
encount
@encount
Aug 25 2016 21:44
@JLuboff yep thats what the other guy said yet when i go there they are there - not really sure why - maybe its a setting in cloudinary
Jason Luboff
@JLuboff
Aug 25 2016 21:44
They might be cached for you?
encount
@encount
Aug 25 2016 21:44
@JLuboff i tried that as well
Jason Luboff
@JLuboff
Aug 25 2016 21:45
you might want to host them elsewhere....photobucket has been working well for me
encount
@encount
Aug 25 2016 21:46
@JLuboff yep i will take a look thanks for your help - i just started using this host
CamperBot
@camperbot
Aug 25 2016 21:46
:cookie: 320 | @jluboff |http://www.freecodecamp.com/jluboff
encount sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Aug 25 2016 21:56
@LanesGood - I don't know if this will work for you: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align. Otherwise, perhaps flexbox will work?
Alexander Domikov
@AlexanderDom
Aug 25 2016 21:59
@LanesGood take a look here
encount
@encount
Aug 25 2016 22:02
@JLuboff hey would you mind taking a look now - i have changed the links
Jason Luboff
@JLuboff
Aug 25 2016 22:07
@encount works now :+1:
caseym94
@caseym94
Aug 25 2016 22:07
hey, I'm having trouble making my nav active buttons work
encount
@encount
Aug 25 2016 22:08
@JLuboff thanks
CamperBot
@camperbot
Aug 25 2016 22:08
encount sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:warning: encount already gave jluboff points
Stacey
@anastasi5
Aug 25 2016 22:10
I'm just trying to get a working navigation bar... this is a pen of that component... how do I get the buttons to align right? and how do I increase the bar height?
Evan Davis
@davisec52
Aug 25 2016 22:17

@anastasi5 Hi. Here are a couple of links that explain the css
float property. This is one way of positioning
elements to either the right or left.

https://developer.mozilla.org/en-US/docs/Web/CSS/float
http://www.w3schools.com/cssref/pr_class_float.asp

Esteban Marquez
@estebanmarquez
Aug 25 2016 22:20
Hello good afternoon, looking for this ebook Vodnik, S. 2016. HTML5 and CSS3, illustrated, if someone knows or has the file please tell me where to download asap many thanks.
Aaron
@apalm1341
Aug 25 2016 22:26
Do any of you guys know how to make background image that you are using from another site to make it so that you get the whole entire image to show up for a certain section of your page?
So you can make your page bigger to fit it in
I can't get whole image to show up for my one section of my page
Stacey
@anastasi5
Aug 25 2016 22:27
@davisec52 I'm trying to just float the buttons but not my logo. I got the look I was going for using the Bootstrap grid in this pen https://codepen.io/anastasi55/pen/vKQbVZ, but the Navbar isn't fixed the way the bootstrap navbar CSS would work... I'm trying to merge both items somehow... I think FCC is really throwing us into the deep end...
KnoX
@knox97
Aug 25 2016 22:36
This message was deleted
Jason Luboff
@JLuboff
Aug 25 2016 22:46
@knox97 Spam...how nice..
Toni Shortsleeve
@KoniKodes
Aug 25 2016 22:47
@encount Looks good to me, but the computer plays as soon as I choose. Maybe a few seconds timeout would be nice.
KnoX
@knox97
Aug 25 2016 22:47
@JLuboff I apologize if I made any harm to you
encount
@encount
Aug 25 2016 22:50
@KoniKodes yep i thought that as well - but decided to leave it as it highlights how quick the computer thinks
Toni Shortsleeve
@KoniKodes
Aug 25 2016 22:50
@encount :-)
caseym94
@caseym94
Aug 25 2016 23:11
yo having trouble with sidebar staying in in place when I minimize the tab
.sidebar2 {
padding: 90px;
background-color: #2C2840;
border-radius: 5px;
position: absolute;
float: right;
top: 92px;
right: 27px;
}
<div class="sidebar2">
<article>
<h2>
SideBar1
</h2>
<p> Sidebar Information
</p>
</article>
</div>
Evan Davis
@davisec52
Aug 25 2016 23:22
@anastasi5 If you are using Bootstrap--and I see you have it running on your pen--your navbar should look like this.
Note that in the top line for <nav> the class is set to navbar-fixed-top.
That will fix the navbar to the top as it is in the model. Also, the code below is
available on the Bootstrap site.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle - code from bootstrap docs -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://freecodecamp/davisec52">WordEffx</a>
    </div>

    <!-- target of data-toggle -->
    <div class="collapse navbar-collapse items" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right nav-items">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
hey guys, there is some bullshit with the window interval... someone here who knows stuff about this and could have a look?
its not much code
thanks
Adesh Kumar
@adeskmr
Aug 25 2016 23:54
This message was deleted