These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Feb 2017
Christopher Earle
@chrise61793
Feb 23 2017 00:02
Hey, everyone. I am actively making my portfolio, but I have to make my buttons navigate to specific parts of the page. I've yet to learn this and can't seem to find the code. How do I manage? I can provide the link to my code pen if necessary.
achudoz
@achudoz
Feb 23 2017 00:06
@chrise61793 <a href="pageElementToWhichToNavigate">buttonText</a>
@chrise61793 and don't forget to use # or . to navigate to the proper Id/class
@chrise61793 to navigate to the top of the page use <a href="#">HomeOrSomethingLikeThat</a> (yes, just a hashtag)
Hippogriffy
@Hippogriffy
Feb 23 2017 00:16
@achudoz Don't use "target='_blank'"
But otherwise thanks
Mac
@itchick85
Feb 23 2017 00:17
Can someone test my portfolio page and tell my if you see my social media pages when you click on the buttons please? http://codepen.io/itchick85/pen/vgvrBX
Christopher Earle
@chrise61793
Feb 23 2017 00:22
Thanks for the code. I will attempt to figure out where to put it myself.
<a href="pageElementToWhichToNavigate" target="_blank">buttonText</a>
Adam
@GoingAllTheWayUp
Feb 23 2017 00:25

$(document).ready(function() {

  if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
     $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude, function(json) {
        $("#main").html("<h2>" + JSON.stringify(json.main) + "</h2>"); 
      }   )}); 
} 
});
I must be useing position.coords. wrong?
Johnny
@jtan3
Feb 23 2017 00:33
@itchick85 https://www.w3schools.com/tags/att_a_target.asp you have your target=_blank in the wrong place
Christopher Earle
@chrise61793
Feb 23 2017 00:34
Ah damn it's not working :(
achudoz
@achudoz
Feb 23 2017 00:52
Hi, can you please take a look and tell me, if upon clicking "request data", you get a lost of entries consisting each of a logo, channel name, "Streaming: (something)" and a link "visit channel"? And most importantly, if you can see either "offline" or "streaming: StarCraft II" (currently) next to the channel name?
http://codepen.io/achudoz/pen/VPoyEM?editors=1011
it is behaving strangely for me as sometimes it does display correctly and sometimes not so much, even though the code remains unchanged
Mac
@itchick85
Feb 23 2017 00:52
@jtan3 thanks
CamperBot
@camperbot
Feb 23 2017 00:52
itchick85 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Feb 23 2017 00:54
@achudoz looks like you called your info multiple times
achudoz
@achudoz
Feb 23 2017 00:54
@jtan3 what do you mean?
Johnny
@jtan3
Feb 23 2017 00:55
@achudoz i see the same accounts over and over
achudoz
@achudoz
Feb 23 2017 00:56
@jtan3 you mean all the entries are of the same channel? or that when you click the button repeatedly, it appends the same channels over and over?
@jtan3 if you press the button once, you should see 8 different chanels
Johnny
@jtan3
Feb 23 2017 00:57
@achudoz oh i guessed i clicked it a few times
achudoz
@achudoz
Feb 23 2017 00:58
@jtan3 yeah I will fix that (there won't be a button when finished but rather it will display upon page load). And can you see the offline/starcraftII indicator?
Johnny
@jtan3
Feb 23 2017 00:59
@achudoz yeah
achudoz
@achudoz
Feb 23 2017 01:00
@jtan3 ok, thanks for lookig! It is giving me a hard time as sometimes it doesn't load at all or sometimes one or two of the channels are missing the current status information.
CamperBot
@camperbot
Feb 23 2017 01:00
achudoz sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @jtan3 |http://www.freecodecamp.com/jtan3
Anthony Contreras
@AmazeCPK
Feb 23 2017 01:39
I'm having trouble creating a simple sidebar that takes up the entire height of the webpage, and doesn't move
Tom
@moT01
Feb 23 2017 01:40
@AmazeCPK fixed position with css
Anthony Contreras
@AmazeCPK
Feb 23 2017 01:42
@moT01 how about preventing elements from going under it, or on top of it? Do i need to create columns and offset each time?
Tom
@moT01
Feb 23 2017 01:45
im not sure on the first two if bootstrap has a solution for you or not, ...you could probly wrap all the content in something and offset it the width yea
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:45
hello guys how to upload an image in CodePen
actually I wanted to use WikiPedia Image on my page, how do I get that image?
Tom
@moT01
Feb 23 2017 01:45
@pshiwakoti1 costs money, use an alternative image hosting site
@pshiwakoti1 right click the image, ...go to image or something
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:46
ok
I did that
I tried to copy address, it didn't work
Tom
@moT01
Feb 23 2017 01:46
use the url of the image
needs to be an image url, ...ends in an image file
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:46
can u please give me url of Wikipedia image
Tom
@moT01
Feb 23 2017 01:46
.jpg
.gif
something like that
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:46
I couldn't get that
Tom
@moT01
Feb 23 2017 01:47
whats the url you're using
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:48
<a href="https://en.wikipedia.org/wiki/Special:Random."> <img src=""> </a> this is basically what Im trying to do
what would be my src
Johnny
@jtan3
Feb 23 2017 01:48
right click the image and click copy url address
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:48
i did
it didn't bring up
Tom
@moT01
Feb 23 2017 01:49
what image do you want there
Anthony Contreras
@AmazeCPK
Feb 23 2017 01:49
Alright.. The solution I came up with didn't work
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:49
I want that globe ball
Anthony Contreras
@AmazeCPK
Feb 23 2017 01:49
Items are still being rendered under my sidebar instead of next to it
Johnny
@jtan3
Feb 23 2017 01:49
you should have learn this before the wiki page?
Gulsvi
@gulsvi
Feb 23 2017 01:50
@pshiwakoti1 Go to a page with the image you want, right-click and select "view source" you will find your URL there.
Prakash Shiwakoti
@pshiwakoti1
Feb 23 2017 01:50
thanks @moT01
CamperBot
@camperbot
Feb 23 2017 01:50
pshiwakoti1 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 522 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 23 2017 01:50
@AmazeCPK got a pen?
if you offset it, it should work
Anthony Contreras
@AmazeCPK
Feb 23 2017 01:52
one second. Let me try to create one. I was trying to do so without offsetting
Tom
@moT01
Feb 23 2017 01:54
with css you could set a position and offset it that way, ...maybe some like...
position: absolute;
left: 100px;
Manuel Reyes
@Androbat
Feb 23 2017 02:09
Hi everydody
Someone could help me?
Cory Bowles
@cbconsulting
Feb 23 2017 02:10
What seems to be the issue
Manuel Reyes
@Androbat
Feb 23 2017 02:10
@truepalyer6 Could you help me with a problem?
Cory Bowles
@cbconsulting
Feb 23 2017 02:10
i will try
@Androbat So how can help
Manuel Reyes
@Androbat
Feb 23 2017 02:16
@truepalyer6 Thank you so much but I figured it out. Thank you so much bro.
CamperBot
@camperbot
Feb 23 2017 02:16
androbat sends brownie points to @truepalyer6 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @truepalyer6 |http://www.freecodecamp.com/truepalyer6
Cory Bowles
@cbconsulting
Feb 23 2017 02:20
Well what wwhere you intially having a issue with i am curious. HTML CSS JavaScipt C# F#
Anthony Contreras
@AmazeCPK
Feb 23 2017 02:21
Seriiously, nothing is working here
Can someone just point me to an example of a sidebar that works? Problem is most I find are rediculously complicated and use a ton of JS
Just want to create a sidebar like here: http://karltaylorportfolio.com/overview/
Diffrence being, that it is static
Cory Bowles
@cbconsulting
Feb 23 2017 02:22
@AmazeCPK click the inspect button and look at the code
Freelatech
@Freelatech
Feb 23 2017 02:23

how come this:

<div class="row">
<div class="col-md-6 offset-md-3" id="test">
<p>test</p>
</div>
</div>
make the column the right size but doesn't offset it?

Anthony Contreras
@AmazeCPK
Feb 23 2017 02:23
@truepalyer6 Looks like it was done with a WYSIWYG, or just with a CMS
acutally, looking at the sources, looks like it was created in SquareSpace. The source code isn't going to help much there
Tom
@moT01
Feb 23 2017 02:27
@Freelatech maybe check the offset syntax
not sure if its right or not
@AmazeCPK break it down
make things one at a time
Franco Javier Danussi
@francodanussi
Feb 23 2017 02:31

Hello campers, goodnight everybody. I'm doing the calculator challenge. https://codepen.io/francodanussi/pen/JEgVYo.

Now I'm facing the last part, I mean making the operators to function like they are supposed to. Do you have any advice or recomendation?

Tom
@moT01
Feb 23 2017 02:34
@francodanussi i think there's an eval() method in js that will take a math formula and give an answer
in the form of a string maybe
so you could make a formula variable
Cory Bowles
@cbconsulting
Feb 23 2017 02:35
@AmazeCPK yes you are right
Tom
@moT01
Feb 23 2017 02:35
give it the number(s) pushed, concat an operator, and then the second number on an equal push
Franco Javier Danussi
@francodanussi
Feb 23 2017 02:36
@moT01 that's a good idea, I was not aware of that method. Thanks
CamperBot
@camperbot
Feb 23 2017 02:36
francodanussi sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 523 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 23 2017 02:36
*i think
i didnt use it
Franco Javier Danussi
@francodanussi
Feb 23 2017 02:37
any further suggestions? Ok. Yes I figured out ways to do it, but before coding this part I thought it was a good idea to exchange some data..
Tom
@moT01
Feb 23 2017 02:38
watch out for errors in calculations
javascript struggles with floating point numbers or something
Chiu Yong
@chiuyong
Feb 23 2017 02:39
hello
I need help
Tom
@moT01
Feb 23 2017 02:39
meaning a .2 * .2 gives .18888888884
something goofy
@chiuyong whats up
Franco Javier Danussi
@francodanussi
Feb 23 2017 02:39
What's the best practice to avoid that bug?
Tom
@moT01
Feb 23 2017 02:39
im not sure
that method might handle it for you
which would be really nice
Chiu Yong
@chiuyong
Feb 23 2017 02:41
@moT01 are you experienced with html and css?
Tom
@moT01
Feb 23 2017 02:41
sure
Franco Javier Danussi
@francodanussi
Feb 23 2017 02:41
@moT01 Ok, thanks again, gonna take a look at that
CamperBot
@camperbot
Feb 23 2017 02:41
francodanussi sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: francodanussi already gave mot01 points
Anthony Contreras
@AmazeCPK
Feb 23 2017 03:16
@moT01 Here is my current pen http://codepen.io/amazecpk/pen/MpgRaB
When applying position:fixed; The problem of overlapping begins
Tom
@moT01
Feb 23 2017 03:17
col-offseet-2
?
whats that
Anthony Contreras
@AmazeCPK
Feb 23 2017 03:18
A mistake.
Tom
@moT01
Feb 23 2017 03:18
and
Anthony Contreras
@AmazeCPK
Feb 23 2017 03:18
that did it.
Tom
@moT01
Feb 23 2017 03:18
boom
Anthony Contreras
@AmazeCPK
Feb 23 2017 03:18
is-offseet to is-offset
thanks @moT01 !
CamperBot
@camperbot
Feb 23 2017 03:19
amazecpk sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 524 | @mot01 |http://www.freecodecamp.com/mot01
Alex
@IL1337ERATE
Feb 23 2017 03:35
hello everyone, I am finishing the random quote generator but I've encoutered an issue with the tweet button.
I have tried making it into an onclick function but that didn't work, now I'm using an anchor with the share URL but I can't figure out how to add the quote in the tweet, I'm trying to set data-text to my random Quote variable but html doesn't read it and only writes "data-text" in twitter instead of the var
https://codepen.io/IL1337ERATE/pen/ggVrgE
Tom
@moT01
Feb 23 2017 03:40
dont know how to just give a hint
i guess that's a jquery answer
Daniel
@DanJP2016
Feb 23 2017 03:42
anybody having problems with starting atom in windows 10? I keep getting a this app can't run on your computer error and can't seem to find a solution
Alex
@IL1337ERATE
Feb 23 2017 03:43
@moT01 I see what you have done, I've never worked with jQuery so it doesn't make much sense to me but I might be able to make a text string using +
Daniel
@DanJP2016
Feb 23 2017 03:45
i used vanilla js on my quote machine project, might be able to help you. http://codepen.io/bones211/pen/YpoWmK?editors=0010
Tom
@moT01
Feb 23 2017 03:46
@IL1337ERATE should be pretty similar
Alex
@IL1337ERATE
Feb 23 2017 03:50
yes, I think the tweet button works similarly to what I am trying to do, thanks @DanJP2016
Nice animation btw, a bit slow but it looks good
CamperBot
@camperbot
Feb 23 2017 03:50
il1337erate sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:warning: @danjp2016's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Daniel
@DanJP2016
Feb 23 2017 03:52
@IL1337ERATE your welcome and thanks for the feedback.
CamperBot
@camperbot
Feb 23 2017 03:52
danjp2016 sends brownie points to @il1337erate :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @il1337erate |http://www.freecodecamp.com/il1337erate
Anemnesea
@Anemnesea
Feb 23 2017 04:04
@DanJP2016 I am using Atom for Windows 10 with no problem. Make sure you have the correct Atom install (32bit vs 64bit). Try to play around with the compatibility settings if you must (right click -> properties)
@DanJP2016 and if all else fails. Uninstall. Reboot. Reinstall.
iso
@iso1048
Feb 23 2017 04:21
How do i horizontally centre an image within a div element?
Johnny
@jtan3
Feb 23 2017 04:22
text-align: center; ?
heroiczero
@heroiczero
Feb 23 2017 04:22
@gothamknight try
img{
display:block;
margin:auto;
}
Tom
@moT01
Feb 23 2017 04:22
@gothamknight you can use the text align center, i believe it needs to be on the parent though
or i usually use margin: 0 auto;
iso
@iso1048
Feb 23 2017 04:24
should I add the img class within the img element or div element within which the img element is nested in?
Anemnesea
@Anemnesea
Feb 23 2017 04:24
^^
<img class="img" src=""></img>
iso
@iso1048
Feb 23 2017 04:26
thanks a lot everyone. appreciate it.
alexbuster
@alexbuster
Feb 23 2017 04:29
Hello everyone, can someone tell me how do I add a pen for my portfolio challenge.
heroiczero
@heroiczero
Feb 23 2017 04:31
@alexbuster just add the link if you finished the challenge
alexbuster
@alexbuster
Feb 23 2017 04:32
but is there a website to visit so I can load a pen or is it in code pen itself.
Tom
@moT01
Feb 23 2017 04:33
there's an area on codepen that shows how to embed a pen
heroiczero
@heroiczero
Feb 23 2017 04:33
@alexbuster you have to make it on codepen then link it to your challenge
Tom
@moT01
Feb 23 2017 04:33
on the bottom right
you can put it on github
Daniel
@DanJP2016
Feb 23 2017 04:34
@Anemnesea think i got it worked out, somehow there were two versions on the pc and I guess it was trying to start the old version. very strange. thanks for the tips though.
CamperBot
@camperbot
Feb 23 2017 04:34
danjp2016 sends brownie points to @anemnesea :sparkles: :thumbsup: :sparkles:
:warning: @anemnesea's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Tom
@moT01
Feb 23 2017 04:34
and link it
alexbuster
@alexbuster
Feb 23 2017 04:35
Ok thanks
Josh
@joshfilippi
Feb 23 2017 04:47
could anyone help me center my tic-tac-toe board? I'm using bootstraps grid system and have explored al the options i know of. thanks
https://codepen.io/JoshFilippi/pen/EZBQvQ
heroiczero
@heroiczero
Feb 23 2017 04:55
@joshfilippi did you try using a offset column for bootstrap
Daniel
@DanJP2016
Feb 23 2017 05:05
@heroiczero is right, adding offset-2 to each col-xs-4 centers it
Josh
@joshfilippi
Feb 23 2017 05:06
@heroiczero Perfect. exactly what I was looking for. Thanks!
CamperBot
@camperbot
Feb 23 2017 05:06
joshfilippi sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 866 | @heroiczero |http://www.freecodecamp.com/heroiczero
Anyone know how to pass the color values to the img which is in svg format?
Aman saxena
@neille2406
Feb 23 2017 07:29
http://codepen.io/neille2406/pen/gmYVxW how to make the menu bar font size and dop down font size different
and also how to make it fixed?
Spyrantis Theodoros
@thodorisanta
Feb 23 2017 07:58

im working on the calculator project. And so far whats left to do is first "to be able to keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output." .second"make the CE button to erase JUST the current value". can i get some help with those? mostly with the first one :)

https://codepen.io/oshikurou/pen/jyKLyg?editors=0011

playingwithinfinity
@playingwithinfinity
Feb 23 2017 08:02
I just don't get the Minimax algorithm. I've read pretty much every link on it on the internet, but I don't get it!
sennator
@sennator2
Feb 23 2017 08:13
hi guys
what api should we use for twitch project
kirbyedy
@kirbyedy
Feb 23 2017 08:19
Paul DiLoreto
@paulmichaelxd
Feb 23 2017 08:43
Hey guys! Just finished Front End and starting Data Visualization. Just getting started with React and not sure why this isn’t rendering.
class textContainer extends React.Component {
  render() {
    return(
      <div className="col col-md-6 mx-auto form-group">
       <textarea className="form-control" id="markdown-box" rows="5">Test</textarea>
      </div>
    );
  }
}

ReactDOM.render(<textContainer />, document.getElementById("react-container"));
Is there anything wrong with my syntax? I compared with tutorials and not sure what’s going on. My codepen is here http://codepen.io/paulmichaelxd/pen/YZKVqe
sennator
@sennator2
Feb 23 2017 08:48
@kirbyedy thanks
CamperBot
@camperbot
Feb 23 2017 08:48
sennator2 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1835 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
sennator
@sennator2
Feb 23 2017 09:30
what format is this?
how to access display_name
Ayush Bahuguna
@relentless-coder
Feb 23 2017 09:41
Need help here my li items won't come in one line, I don't want them wrap to the next line
badalsaibo
@heyDante
Feb 23 2017 09:45
@relentless-coder you mean align horizontally?
sennator
@sennator2
Feb 23 2017 09:48
@relentless-coder display: flex for ul should work
kirbyedy
@kirbyedy
Feb 23 2017 09:49
@relentless-coder remove overflow: hidden; and make width: 100%;
but you might want to look at the flexbox
badalsaibo
@heyDante
Feb 23 2017 09:50
yeah flex box seems to be the easy way
kirbyedy
@kirbyedy
Feb 23 2017 09:51
display: flex on the parent should solve the problem
default flexbox direction is row
sennator
@sennator2
Feb 23 2017 09:57
@kirbyedy can you help me out
i get this as response to api call
how can i access display_name
i tried

  $.ajax({ 
    url: 'https://wind-bow.gomix.me/twitch-api/channels/cretetion?callback=?',
    success: function(data) {
      var name = data.mature;
      console.log(name);
    }
  })
display_name instead of mature
but it is undefined
kirbyedy
@kirbyedy
Feb 23 2017 10:02
hmmm havent worked with that one
can you link the pen
that's all basically :D
kirbyedy
@kirbyedy
Feb 23 2017 10:08
hmmm
well when you only log the data
its there
it logs properly
Ayush Bahuguna
@relentless-coder
Feb 23 2017 10:10
@kirbyedy @sennator2 @heyDante I am trying to build a carousel(kind of) so I want the items inline and of course the container is of certain width and overflow should be hidden
so when I click on a li item, I can manipulate the margin on the ul to shift the li items
sennator
@sennator2
Feb 23 2017 10:11
@kirbyedy yeah but i need to access properties like name and logo but i dont know how to do that
Ayush Bahuguna
@relentless-coder
Feb 23 2017 10:11
but they won't come under one line
sennator
@sennator2
Feb 23 2017 10:14

@relentless-coder
```

ul {
display: flex;
overflow: hidden;
width: 50%;

}

i dont know what carousel is but this is the easiest why to put them inline
Ayush Bahuguna
@relentless-coder
Feb 23 2017 10:16
they are kind of smushed of, I tried flex, but as I said the items would try to fit in the width of ul. I want them to overflow and that would be hidden
a carousel is when you have items in div and they move left to right.
Ayush Bahuguna
@relentless-coder
Feb 23 2017 10:19
nevermind, i got it to work. thanks for help
badalsaibo
@heyDante
Feb 23 2017 10:22
how?
Ayush Bahuguna
@relentless-coder
Feb 23 2017 10:25
@heyDante set the width of ul more than the container, and container's overflow is hidden.
Cata
@catalinux0
Feb 23 2017 10:59
Hey guys I want navigate to different sections of the webpage by clicking buttons in the navigation but don't know how...here's my code
navigate to different sections of the webpage by clicking buttons in the navigation.
<h2 class="border"><a href="#top">About</a> <a href="#middle">Portofolio</a> <a href="#bottom"> Contact</a></h2>
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:04
I think it s a good start
But you need to add refs to your section in the page
@catalinux0 like this I believe:
<div id="top"></div>
Cata
@catalinux0
Feb 23 2017 11:07
Thx I will try this ;)
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:07
Keep me updated @catalinux0
Sind Sie deutsch ?
kirbyedy
@kirbyedy
Feb 23 2017 11:09
nein
9 ?
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:11
Aah ;) @kirbyedy you are a funny dev!
kirbyedy
@kirbyedy
Feb 23 2017 11:11
:D
I love that joke :)
Cata
@catalinux0
Feb 23 2017 11:12
I'm new in Deutschland...Meine Deutsch ist nicht gud genug :))
kirbyedy
@kirbyedy
Feb 23 2017 11:12
gut
where are you from originally ?
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:13
I will go in germany in a month and I will stay there for five month... It s why I ask u this :)
kirbyedy
@kirbyedy
Feb 23 2017 11:17
and where are you from ? @AlbanMariette
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:17
I am in France and you ?
kirbyedy
@kirbyedy
Feb 23 2017 11:17
cool
cyprus
Alban MARIETTE
@AlbanMariette
Feb 23 2017 11:19
Great !
Cata
@catalinux0
Feb 23 2017 11:24
I'm from Romania, I leave in Germany for 3 years
Dany Din
@danydin
Feb 23 2017 11:34
wie lange lernst du programming @catalinux0
Matthew
@Krimsonmedic
Feb 23 2017 11:34
@kirbyedy Does this look ok?
It's not showing it on here, but that button provides a random Iframe of a random wikipage
It works, just not displaying here for some reason
The search bar automatically pulls results as you type, so there's not need for a search button
Also not working here... but works in codepen
Federico Dente
@fez994
Feb 23 2017 11:37

I made a function that change background image based on the id of the API (For the weather app) can you tell me why is not working?






    var id = data.weather[0].id;



    function changeBg(){


    if (id >= 700 && id <= 800) {
        $('body').css('background-image', 'url("../img/fog.jpg")');
    }

    else {
        $('body').css('background-color', 'red');
    }



    }


    changeBg();

This is an example, i can't link the full code cause i'm using sublime text and not codepen

Dany Din
@danydin
Feb 23 2017 11:38
@Krimsonmedic it keep refershing your codepen maybe preventdefault is required?
Matthew
@Krimsonmedic
Feb 23 2017 11:38
I'm not sure what that is, I'll have to google it lol
Dany Din
@danydin
Feb 23 2017 11:39
sure check it
@fez994 the else is working?
Cata
@catalinux0
Feb 23 2017 11:39
2 monate...und du?
Federico Dente
@fez994
Feb 23 2017 11:39
@danydin Nope, not even the else
Dany Din
@danydin
Feb 23 2017 11:40
try change the 'body' to a class or id with content on the page and make sure jquery is loaded
Matthew
@Krimsonmedic
Feb 23 2017 11:40
oh....well that makes sense @danydin , I assumed that would be super complex lol. I'll give it a shot
@danydin thanks
CamperBot
@camperbot
Feb 23 2017 11:40
krimsonmedic sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @danydin |http://www.freecodecamp.com/danydin
Dany Din
@danydin
Feb 23 2017 11:41
@catalinux0 ah nett, wie alt bist du? ich lerne fash ein jahr schon
np
Cata
@catalinux0
Feb 23 2017 11:43
Ja ich habe nicht so viel zeid dafur, aber ich lerne jeden tag...25 u?
Federico Dente
@fez994
Feb 23 2017 11:44
@danydin Tryed, i wrapped all my html in a div with the id of "huge"; used ('#huge') , nothing changed, jquery works fine because all my code work... i copied all the code in a pen, check it out (use firefox) http://codepen.io/fez994/pen/GrbqrN
Adam
@GoingAllTheWayUp
Feb 23 2017 11:45
$(document).ready(function() {

  if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
     $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude, function(json) {
        $("#main").html("<h2>" + JSON.stringify(json.main) + "</h2>"); 
      }   )}); 
} 
});
Not working anyone see something?
Dany Din
@danydin
Feb 23 2017 11:46
@GoingAllTheWayUp check on console.log if it parse the callback correctly
Adam
@GoingAllTheWayUp
Feb 23 2017 11:48
@danydin By typeing json in console I get nothing
Not sure how to parse it
Dany Din
@danydin
Feb 23 2017 11:50
@fez994 "jQuery.Deferred exception: id is not defined" "ReferenceError: id is not defined
Adam
@GoingAllTheWayUp
Feb 23 2017 11:51
@danydin not sure how to do that.
Federico Dente
@fez994
Feb 23 2017 11:53
@danydin How is it possible? if i use ('#divid').html(id); it gives me back a number, how can it be not defined?
elad ben aderet
@eladonline
Feb 23 2017 11:55
why does some of the propertys in the "css" section are lighted && would my function work ? no.. y not? && im trying to make an optional value (options) to the function moveFade how do i do that ?
why does some of the propertys in the "css" section are lighted && would my function work ? no.. y not? && im trying to make an optional value (options) to the function how do i do that ?
Dany Din
@danydin
Feb 23 2017 11:55
maybe you've something override it then, thats waht the console wrote @fez994
elad ben aderet
@eladonline
Feb 23 2017 11:55
@eladonline
why does some of the propertys in the "css" section are lighted && would my function work ? no.. y not? && im trying to make an optional value (options) to the function moveFade how do i do that ?
why does some of the propertys in the "css" section are lighted && would my function work ? no.. y not? && im trying to make an optional value (options) to the function how do i do that ? https://repl.it/FuuF/1
sry for the double
Adam
@GoingAllTheWayUp
Feb 23 2017 11:59
$(document).ready(function() {
console.log("before");
  if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
     $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude, function(json) {
        console.log("after");
        $("#main").html("<h2>" + JSON.stringify(json.main) + "</h2>"); 

      }   )}); 
} 
});
This if statment for geolocation is not running. I am useing bootsrap css/js and jquery in my pen. and I have my html div id set to main.
I don't know if I have used my position functon properly
Matthew
@Krimsonmedic
Feb 23 2017 12:01
uh
Freecodecamp wont let me check off the wikipedia viewer task even though I submitted it
it just keeps bringing me back to the same page
Adam
@GoingAllTheWayUp
Feb 23 2017 12:04
does fcc not check out projects?
Matthew
@Krimsonmedic
Feb 23 2017 12:06
I dont think so, but part of the cert is building your portfolio out...so it wouldn't do you a whole lot of good to BS your way through
and i figured it out
I was submitting the "display url" instead of the actual url
It worked when I copied it out of the browser
Adam
@GoingAllTheWayUp
Feb 23 2017 12:06
LOL
Matthew
@Krimsonmedic
Feb 23 2017 12:07
They might when you hit the "claim X cert" at the end of one of the big sections
i'm not sure
Adam
@GoingAllTheWayUp
Feb 23 2017 12:08
I thought i noticed a delay from my project submission to the point it was cleared IDK tho
So can someone help me with some code put in the chatroom about 8 minutes ago? I don't know if I am useing GeoLocation properly, when submitting my Long/Latt through another api
can I do what I did?
Dany Din
@danydin
Feb 23 2017 12:12
you should use another api for the geolocation
Adam
@GoingAllTheWayUp
Feb 23 2017 12:14
? I though i was useing the built in if (navigator.geolocation) properly can you explain a bt more? @danydin
Dany Din
@danydin
Feb 23 2017 12:16
its doing problems as chrome and other popular browsers disasbled it by default
so we use an api to bypass it
Adam
@GoingAllTheWayUp
Feb 23 2017 12:17
ok cool, ill look into it
Aniculaesei
@Aniculaesei
Feb 23 2017 12:23
hello my friends.can you tell me...how i can set a div to pe centered(in the middle of the page)?thank you
Adam
@GoingAllTheWayUp
Feb 23 2017 12:24
@danydin thanks
achudoz
@achudoz
Feb 23 2017 12:37
Hi, I just finished my twitch.tv viewer (i think), but the API being rather unstable at least on my end, can anyone please just check if it is working? You should see:
1) a list of channels including their logo etc.
2) either "currently offline..." or "Streaming: (something - currently starcraft II on two of them) on the same line as the channel name
3) 1 div with the text "404: 'n0NX1stInGčann3l' doesn't exist" centred in the middle
http://codepen.io/achudoz/pen/VPoyEM?editors=1111
@Aniculaesei there are lots of ways, but I recommend you get acquainted with flexbox
Aniculaesei
@Aniculaesei
Feb 23 2017 12:51
http://codepen.io/Aniculaesei/full/vxBWKw/ can somebody help me to put the div with the text in center?Thank you
Spyrantis Theodoros
@thodorisanta
Feb 23 2017 12:53
so i made a couple changes so i can chain equations like 5+4-2. But it doesnt work yet. What i did was (JS line 95) check if the oparator was used before and if it was the value of the value of the first equation (5+4) was kept by the first number then the operator took the new vault (-) and then the user used the second number to store the new value (2).
https://codepen.io/oshikurou/pen/jyKLyg?editors=1111
Ken Haduch
@khaduch
Feb 23 2017 13:27
@achudoz - hello - I am seeing what you listed - also in the console (on the CodePen UI) there are two strings "1st AJAX error" and "2nd AJAX error". Those seem to be coming from the "non existing channel", and the error that is being returned is a 404 error "The parameter "name" was malformed: the value must match the regular expression /^[a-zA-Z0-9][a-zA-Z0-9_]*$/" - but you probably have seen that.
Adam
@GoingAllTheWayUp
Feb 23 2017 13:37
When codeing https://www.freecodecamp.com/challenges/show-the-local-weather what API did you use if you did not use built navigator.geolocation.getCurrentPosition ?
how do you get a users Long and Lat with out navigator.geolocation.getCurrentPosition?
Moisés Man
@moigithub
Feb 23 2017 13:47
@GoingAllTheWayUp google for "ip api location" many free out there
Adam
@GoingAllTheWayUp
Feb 23 2017 13:48
I think that when useing position.coords.latitude/long I need to round them to the whole number to pass them in to openweather api @moigithub
so im useing Math.floor()
var lat = Math.floor(position.coords.latitude);
Moisés Man
@moigithub
Feb 23 2017 13:49
no need to round...
but ..there are some restriction on chrome to use built-in geolocation.. works only on https (secure connections)
soo IF u use https on ur codepen.. ur content should also be served from secure sites
but.... openweather api (the free version) dont support https
Adam
@GoingAllTheWayUp
Feb 23 2017 13:51
ok, so your correct.
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { is failing to run the function position every time
Moisés Man
@moigithub
Feb 23 2017 13:52
soo a solution.. instead of using the built-in geolocation service from chrome, is using another API
for ip location
Adam
@GoingAllTheWayUp
Feb 23 2017 13:52
SO ill have to try to use an API to pull the long/latt
OK
@moigithub thanks
CamperBot
@camperbot
Feb 23 2017 13:52
goingallthewayup sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2724 | @moigithub |http://www.freecodecamp.com/moigithub
Adam
@GoingAllTheWayUp
Feb 23 2017 13:52
Ill look for an API now
and check my https
Aniculaesei
@Aniculaesei
Feb 23 2017 13:53
can anyone tell me why i cant putt all my elements in center?what can i do?thank you http://codepen.io/Aniculaesei/pen/vxBWKw?editors=1000
Adam
@GoingAllTheWayUp
Feb 23 2017 13:54
@Aniculaesei I like margin-left: auto; margin-right: auto togeather and bottem top and be used also
together they center fairly well
hey guys, why cant i make the text to the middle lol
kirbyedy
@kirbyedy
Feb 23 2017 14:13
@Aniculaesei since you are using bootstrap 4 check this one: http://v4-alpha.getbootstrap.com/content/images/
@FL8Liew looks middle to me :)
FL8Liew
@FL8Liew
Feb 23 2017 14:16
@kirbyedy lol i guess cause i just edited it
@kirbyedy when i add class="row" then class="col-xs-12"
it is not in middle anymore
Adam
@GoingAllTheWayUp
Feb 23 2017 14:33
$(document).ready(function() {
console.log("1");
   $.getJSON('http://freegeoip.net/json/', function(json){
        $("#main").html("<h2>" + json.longitude + " " + json.latitude + "</h2>");
console.log("2");    
        $.getJSON('api.openweathermap.org/data/2.5/weather?lat=' + json.latitude + '&lon=' + json.longitude, function(weather){
         $("#weather").html("<h2>" + weather.main + "</h2>");
console.log("3");
     })

 })
});

$.getJSON('api.openweathermap.org/data/2.5/weather?lat=' + json.latitude + '&lon=' + json.longitude is failing.

anyone see anything im missing,

Tom
@moT01
Feb 23 2017 14:38
@GoingAllTheWayUp says invalid api key when i try to go to the weather url
Moisés Man
@moigithub
Feb 23 2017 14:39
@GoingAllTheWayUp add http:// to ur openwerather url (2nd getJSON )
else it will be taken as relative path to codepen (if i recall u can check this on the network tab/devtools )
Tom
@moT01
Feb 23 2017 14:39
might be the lat/lon i made up
kirbyedy
@kirbyedy
Feb 23 2017 14:46
@GoingAllTheWayUp yep missing api key
Martin
@MartinM9
Feb 23 2017 14:54
@kirbyedy coulmns still doesn't work. The unordered lists go to the left side, but img stays on the left side as well. So it doesn't align with the text
WiseKodama
@WiseKodama
Feb 23 2017 14:55
Has anyone had any luck with twitch today?
It's like the workaround is under too much load
I am getting very irradic responses
Martin
@MartinM9
Feb 23 2017 14:58
Hey guys. I'm writing my first project, the tribute. But I have trouble to align unordered lists with image. So the lists would be on the left side and the img on the right side. Any ideas? Thank you
Moisés Man
@moigithub
Feb 23 2017 15:05
@MartinM9 showing code (or a link to ur code) helps...
Any idea why it shows a different number of channels each time? Is there something wrong with the FCC backup API?
That is caching the data?
@moigithub I've deleted the columns in <ul> already. Becasue, if I want to align lists with that image, it seems that I need something else than columns.
Moisés Man
@moigithub
Feb 23 2017 15:23
@MartinM9
Martin
@MartinM9
Feb 23 2017 15:24
@moigithub Yes
Moisés Man
@moigithub
Feb 23 2017 15:27
do u see the image ?? thats how u wanna layout ?
Martin
@MartinM9
Feb 23 2017 15:28
@moigithub Yes, that's exactly what I want.
Moisés Man
@moigithub
Feb 23 2017 15:29
red is a "row"
greens are "cols"
inside each "cols" u write content.. ie.. left col.. ul+li
right col img
Martin
@MartinM9
Feb 23 2017 15:30
@moigithub Ok, I think I get it. I'll try it out and let you know in a minute
@moigithub Works nice. So easy damn.. Thank you man
CamperBot
@camperbot
Feb 23 2017 15:33
martinm9 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2726 | @moigithub |http://www.freecodecamp.com/moigithub
ESLMiguel
@ESLMiguel
Feb 23 2017 15:38
@moigithub finally got that pig latin algorithm figured out, thanks for the help earlier :smiley_cat:
CamperBot
@camperbot
Feb 23 2017 15:38
eslmiguel sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2727 | @moigithub |http://www.freecodecamp.com/moigithub
WiseKodama
@WiseKodama
Feb 23 2017 15:38
@forkerino thanks again!
CamperBot
@camperbot
Feb 23 2017 15:38
wisekodama sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @forkerino |http://www.freecodecamp.com/forkerino
ESLMiguel
@ESLMiguel
Feb 23 2017 15:39
@WiseKodama he helped you?
what was wrong?
WiseKodama
@WiseKodama
Feb 23 2017 15:39
there was an error from the api
ESLMiguel
@ESLMiguel
Feb 23 2017 15:39
ah
WiseKodama
@WiseKodama
Feb 23 2017 15:39
if you have the channel brunofin in the array like the challenge wants you to it wont work
ESLMiguel
@ESLMiguel
Feb 23 2017 15:39
thank goodness
WiseKodama
@WiseKodama
Feb 23 2017 15:39
it worked yesterday but today the api doesn't have the cached data or something
it might work again in the future but for now I would remove "brunofin" from the array
ESLMiguel
@ESLMiguel
Feb 23 2017 15:40
good to hear
WiseKodama
@WiseKodama
Feb 23 2017 15:40
it works for the other deactivated account "comster404"
sennator
@sennator2
Feb 23 2017 15:40
why is my game class aligning to logo class
?
when both are absolute and should be positioned to frame class
WiseKodama
@WiseKodama
Feb 23 2017 15:42
you are missing ;
after the console log?
sennator
@sennator2
Feb 23 2017 15:44
@WiseKodama me?
Moisés Man
@moigithub
Feb 23 2017 15:47

@MartinM9 codepen quick add button add bootstrap version 4
and img-responsive class seems its removed from version 4...(its now named img-fluid)
http://v4-alpha.getbootstrap.com/content/images/

soo u can do 2 things.. rename ur class.. to use img-fluid instead of img-responsive
OR... change the bootstrap version to 3 on ur css settings
https://www.bootstrapcdn.com/

JDogg1994
@JDogg1994
Feb 23 2017 15:49
Hi I need some help with my "size your image challenge"
Am I in the right place?
badalsaibo
@heyDante
Feb 23 2017 15:52
@JDogg1994 Strictly 'No' . But we would not bother helping someone
rooms
CamperBot
@camperbot
Feb 23 2017 15:52

freeCodeCamp rooms:

:point_right: Here is a list of our official chat rooms
WiseKodama
@WiseKodama
Feb 23 2017 15:59
@sennator2
$('.twitch-frame').append('<div class="frame"><div class="name"><p> '+twitch.name+'</p></div><div class="logo"><img src="'+twitch.logo+'"/></div><div class="game"><p>'+twitch.game+'</p></div></div>')
This works
I think its always iffy if you try to escape with the slash
I always escape with "doublequotes" :)
Bgene
@Bgene
Feb 23 2017 16:02
how do I align my navbar to the center?
WiseKodama
@WiseKodama
Feb 23 2017 16:03
try margin:0 auto;
Bgene
@Bgene
Feb 23 2017 16:04
doesn't work
badalsaibo
@heyDante
Feb 23 2017 16:07
@Bgene navbar takes the whole width of the page. you mean aligning the content at the center
Bgene
@Bgene
Feb 23 2017 16:08
@heyDante actually the class isn't navbar
I made it to be class="nav-bar" and edited it myself
.nav-bar{
padding:0 0 0 0;
position:fixed;
margin: 0 auto;
width:80%;
background-image: url("http://wallpaper-gallery.net/images/blue-wallpaper-hd/blue-wallpaper-hd-4.jpg");
background-position: 0px 300px;
background-size: 100% 300%;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
height:100px;
}
this is my CSS codee
ESLMiguel
@ESLMiguel
Feb 23 2017 16:11
that feeling when you are one cm from solving an algorithm :triumph:
Gulsvi
@gulsvi
Feb 23 2017 16:13
@Bgene Do you have a codepen link or more code to show? Seems you have made a custom navbar
@ESLMiguel haha :) I'm on caesar's cipher and can't find an efficient way to do it... yet. Taking a break...
Bgene
@Bgene
Feb 23 2017 16:16
@SkyCoder01 I'm using sublime and testing it on chrome
ESLMiguel
@ESLMiguel
Feb 23 2017 16:18
@SkyCoder01 just got it
Gulsvi
@gulsvi
Feb 23 2017 16:18
@Bgene Okay, lots of ways to center a navbar - and your dev environment may have something to do with it. If you want to set it up on codepen, I can take a closer look
ESLMiguel
@ESLMiguel
Feb 23 2017 16:19
caesar's cipher was quite difficult
taking a break is the right thing to do
Gulsvi
@gulsvi
Feb 23 2017 16:19
Congrats :) Yeah, hoping a break helps me see it differently.
I've been working on this task foro a month now I think
Gulsvi
@gulsvi
Feb 23 2017 16:20
@Bgene Do you want the whole navbar centered, or just the About, Portfolio, and Contact links?
Bgene
@Bgene
Feb 23 2017 16:20
@SkyCoder01 the entire navbar
horizontally
but it would be nice if I can get them to vertically align too
Gulsvi
@gulsvi
Feb 23 2017 16:25

@Bgene You could offset your first column, but then it doesn't really scale well to smaller screens:

    <div class="nav-bar">
      <div class="row align-items-center">
        <div class="col-md-3 col-md-offset-3">
          <h1>Billy Gene</h1>
        </div>
        <div class="col-md-6">
          <div class="nav-buttons">
            <a href="#aboutme">About Me</a>
            <a href="#port-folio">Portfolio</a>
            <a href="#contactme">Contact Me</a>
          </div>
        </div>
      </div>
    </div>

Any reason you don't use a standard navbar and just stylize it?

Bgene
@Bgene
Feb 23 2017 16:25
it won't respond to the changes I make to the margin
Gulsvi
@gulsvi
Feb 23 2017 16:25
By the way - you have both Bootstrap 3 and 4 added to that project
Bgene
@Bgene
Feb 23 2017 16:26
I just removed the link on the later one I sent
Gulsvi
@gulsvi
Feb 23 2017 16:28
There are some bugs with Bootstrap v4, it isn't even beta yet. That may be why you were having trouble with the margins
Bgene
@Bgene
Feb 23 2017 16:28
hmm... Okay...
I'll try again. but it's quite late so I guess I'll call it a night
HAHA I still have school in the morning
@SkyCoder01 thanks anyway
CamperBot
@camperbot
Feb 23 2017 16:28
bgene sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @skycoder01 |http://www.freecodecamp.com/skycoder01
aenila
@aenila
Feb 23 2017 16:40
Morning everybody!
Spyrantis Theodoros
@thodorisanta
Feb 23 2017 16:41

okay so i fixed the rest. but now i want the CE button to "erase" the last value the user game , whether its the first value, the second value or even an operator. but how can i do that?

https://codepen.io/oshikurou/pen/jyKLyg?editors=1111

aenila
@aenila
Feb 23 2017 16:44
Working on the Pomodoro Clock. Pretty close to done, but I'm having issues with the act of pausing the timer, changing the duration, and starting it over. I keep having one of two problems depending on what method I use to start it over. A)The timer will count X times faster for each run(2x for second, 3x for third, etc) or B) Multiple timers will countdown simultaneously. I have tried a simple clearInterval(x) call, which results in the multiple timers running upon restart - and I have tried to use a flag that, when true, returns the function that manages the timer related variables. Anybody that can shed some light on what I'm doing wrong?
http://codepen.io/aenila/pen/ggNZwv
Kevin-Mok
@Kevin-Mok
Feb 23 2017 16:47
<div id="quote-box" class="col-md-6 col-md-offset-3">
Can someone help me figure out why this div spans my page is not a centered column of width 6?
ReeceKidd
@ReeceKidd
Feb 23 2017 16:49
@Kevin-Mok Because your columns need to add up to 12.
Kevin-Mok
@Kevin-Mok
Feb 23 2017 16:50
@ReeceKidd <div id="quote-box" class="col-md-offset-3 col-md-6 col-md-offset-3"> Like that? It seems to have no effect though.
Setting width to 6 and offset to 6 does nothing either.
ReeceKidd
@ReeceKidd
Feb 23 2017 16:51

No like: <div class="col-md-3"></div>

<div class="col-md-6"></div>

<div class="col-md-3"></div>
It needs to add up to 12 across all the columns in a row.
And it can help to place the columns inside a <div class="row"></div>
Hi I'm trying to place my mainImage in front of my navigation bar, I've tried using z-index:1, but this isn't working.... Does anyone have any ideas? http://codepen.io/ReeceKidd/pen/LxvPWK?editors=1100
Kevin-Mok
@Kevin-Mok
Feb 23 2017 16:55

@ReeceKidd

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div id="quote-box" class="col-md-6">
            <h3>Quote Box</h3>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>

This is all my code. The element still spans across the entire page.

ReeceKidd
@ReeceKidd
Feb 23 2017 16:56
@Kevin-Mok Is it inside a container?
@Kevin-Mok <div class="container-fluid">
Kevin-Mok
@Kevin-Mok
Feb 23 2017 16:56
@ReeceKidd Updated it. That's my entire page right now.
ReeceKidd
@ReeceKidd
Feb 23 2017 16:57
If your just trying to center the quote box just do: <h3 class="text-center">Quote Box</h3>
Your pen hasn't updated for me, so I can't see it. Sorry
Kevin-Mok
@Kevin-Mok
Feb 23 2017 17:02
@ReeceKidd Nothing is centering this damned box. I've added text-center to h3 and the div containing it, and it's still left aligned.
I wanted to try to learn how to use Bootstrap grid to center it, but that's not working either.
Adam
@GoingAllTheWayUp
Feb 23 2017 17:03
@kirbyedy @moigithub @moT01 thanks
Gulsvi
@gulsvi
Feb 23 2017 17:06
@Bgene This is how I would do it with Bootstrap 3 default navbar - just a little customization to get the contents in the center and the background to be transparent: http://codepen.io/skycoder/pen/aJbJwg?editors=1100
Muhammad Hasham
@MohammadHasham
Feb 23 2017 17:07
what is webkit used in css
Gulsvi
@gulsvi
Feb 23 2017 17:07
@ReeceKidd You are using a pre-alpha release of bootstrap 4. They started adding that with quick add in codepen. It uses different class names for offsetting your columns.
@ReeceKidd Change it to: <div id="quote-box" class="col-md-6 offset-md-3 text-center"> or use Bootstrap 3 instead of Bootstrap 4. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
@MohammadHasham That's a good question for google
ReeceKidd
@ReeceKidd
Feb 23 2017 17:10
@Kevin-Mok You are using bootstrap 4, change it to an earlier version, don't use the code pen feature to automatically add it
Muhammad Hasham
@MohammadHasham
Feb 23 2017 17:10
@SkyCoder01 Thanks
CamperBot
@camperbot
Feb 23 2017 17:10
mohammadhasham sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 23 2017 17:10
@ReeceKidd Sorry, wrong person @Kevin-Mok :)
ReeceKidd
@ReeceKidd
Feb 23 2017 17:11
@SkyCoder01 No worries, thanks for pointing it out. :)
CamperBot
@camperbot
Feb 23 2017 17:11
reecekidd sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 23 2017 17:11
:point_up: See here
Kevin-Mok
@Kevin-Mok
Feb 23 2017 17:14
Ohhhhhhhhhhh. Thanks @ReeceKidd @SkyCoder01
CamperBot
@camperbot
Feb 23 2017 17:14
kevin-mok sends brownie points to @reecekidd and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 120 | @reecekidd |http://www.freecodecamp.com/reecekidd
Chris
@bestintown23
Feb 23 2017 17:15
How can put text in the center of my pictures? https://codepen.io/bestintown23/pen/VpZGyK
pani7
@pani7
Feb 23 2017 17:23
How can i write something inside thumbnail under photo? (i am using img-thumbnail bootstrap class)
tazpowerz
@tazpowerz
Feb 23 2017 17:30
How do i create a link to my code pen page for me to be able to share it ?
aenila
@aenila
Feb 23 2017 17:32
@tazpowerz Just copy the url from the browser's address bar
tazpowerz
@tazpowerz
Feb 23 2017 17:34
@aenila cool
Jakumozo
@Jakumozo
Feb 23 2017 17:51
Please help. I am trying to pop a random quote on click? What might be wrong?
http://codepen.io/Kromel/pen/VpwjeE/
Igor Amidzic
@igoramidzic
Feb 23 2017 17:53
Capture.PNG
Anyone know the best way to create the textboxes in this form?
Bunched up against each other
rishabh
@rish109dk
Feb 23 2017 17:57
hey every1 ... just wanted to know that can i break the sequence of order..... can i just shift to others ...instead of doing portfolio now can i do it later... Also i need some more examples of portfoliocoding as the 1 given is quite tough for me to understand each function......... so it can take time Rt??? ... however any more suggested link is known to any1 can just send me....PLPLZPLZ...
Igor Amidzic
@igoramidzic
Feb 23 2017 17:59
@rish109dk Of course. You don't have to follow the steps one by one, but usually things get more difficult as you progress, so maybe you should practice on your own before moving on to other tasks
Gulsvi
@gulsvi
Feb 23 2017 18:00
@pani7 Below the thumbnail instructions in the Bootstrap documentation, they talk about adding custom content below. http://getbootstrap.com/components/#thumbnails-custom-content, that should help. Here's a way to do it without bootstrap: https://codepen.io/skycoder/pen/NdLrRp
@Jakumozo I see this error in my browser's console with your pen: Uncaught ReferenceError: $ is not defined, this means you need to add jQuery to your project.
Once you fix that, you just need to parse the JSON correctly - I can help with that if needed, just ask.
@rish109dk I skipped the portfolio and have spent a lot of time reading the bootstrap documents. I'm finally ready to start now, but might just wait until the end when all my other projects are done. It should take around 50 hours to do the tribute page and the portfolio, so yeah, it's a lot of time :)
Jakumozo
@Jakumozo
Feb 23 2017 18:15
@SkyCoder01 Thank you. I added the jQuery, the button works now, although I cant find the solution with getting JSON :( What could you suggest?
CamperBot
@camperbot
Feb 23 2017 18:15
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 23 2017 18:18

@Jakumozo Make your code like this for now:

    $.getJSON('http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1', function(jsonInput){
      console.log(jsonInput);
    });

And then click the console button in codepen to see what the JSON looks like

After that, it's a matter of remembering how to access JSON properties, like in this challenge: https://www.freecodecamp.com/challenges/accessing-objects-properties-with-the-dot-operator
Then you write it to the page like we learned here: https://www.freecodecamp.com/challenges/convert-json-data-to-html
Jakumozo
@Jakumozo
Feb 23 2017 18:23
@SkyCoder01 the console is empty, does it mean that I am not getting it?
Gulsvi
@gulsvi
Feb 23 2017 18:23
@Jakumozo You have to click the button :)
New Quote
Jakumozo
@Jakumozo
Feb 23 2017 18:24
I know, still empty
Gulsvi
@gulsvi
Feb 23 2017 18:24
Hmmm, it isn't empty for me...
@Jakumozo What happens when you go here in your browser? http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
Maybe your network blocks that site?
Jakumozo
@Jakumozo
Feb 23 2017 18:25
I have an object
David
@DEstepp
Feb 23 2017 18:26
Can anyone tell me how to get rid of unwanted white space in my thumbnail? The space is on the left and right sides
Gulsvi
@gulsvi
Feb 23 2017 18:26
This is what I see when I click the "New quote" button
image.png
Tom
@moT01
Feb 23 2017 18:27
@DEstepp got any code?
Jakumozo
@Jakumozo
Feb 23 2017 18:28
@SkyCoder01 this is strange, allright. I will try to understand why.. thank you
CamperBot
@camperbot
Feb 23 2017 18:28
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jakumozo already gave skycoder01 points
Gulsvi
@gulsvi
Feb 23 2017 18:29
@Jakumozo Oh wait... change your API url to use HTTPS - maybe that's the problem?
Aside from that I don't know :(
Matthew Bailin
@mdbailin
Feb 23 2017 18:29
Hey I'm trying to use jQuery but my browser is throwing an error that says that '$' isn't defined. Does anyone know why that's happening?
Jakumozo
@Jakumozo
Feb 23 2017 18:29
@SkyCoder01 YES!! GREAT!
Gulsvi
@gulsvi
Feb 23 2017 18:30
:)
Tom
@moT01
Feb 23 2017 18:30
you want the white box around the picture smaller im guessing
David
@DEstepp
Feb 23 2017 18:30
@moT01 Yes
h1tag
@h1tag
Feb 23 2017 18:31
Hi everyone!
Hi @SkyCoder01
@mdbailin did you add jQuery from js settings?
Gulsvi
@gulsvi
Feb 23 2017 18:32
@fortMaximus Hello!
Tony Miri
@TonyMiri
Feb 23 2017 18:32
I think my tic-tac-toe is done. Anybody see any issues? No difficulty settings so it's very easy to beat. http://codepen.io/tonedf/full/KaLZJz/
oops. I found one myself. hmmm
Tom
@moT01
Feb 23 2017 18:34
@DEstepp here's what i think i would do, ...change the width of the picture to like 90% then try n center the .img-thumbnail
Matthew Bailin
@mdbailin
Feb 23 2017 18:34
@fortMaximus yes I did
h1tag
@h1tag
Feb 23 2017 18:35
@mdbailin can you show ur pen?
Tom
@moT01
Feb 23 2017 18:35
@DEstepp and you could add a max-width to .img-thumbnail if that makes it too big
Tom
@moT01
Feb 23 2017 18:36
and i would stick with using % as units
Matthew Bailin
@mdbailin
Feb 23 2017 18:36
I tried wrapping the code around $(document).ready(function(){}); to see if that would help
Gulsvi
@gulsvi
Feb 23 2017 18:36
@igoramidzic I haven't tried this before, so not sure if it's the best way, but this is one way: https://codepen.io/skycoder/pen/VpwzYZ?editors=1100
Tom
@moT01
Feb 23 2017 18:38
@FatTone225 seems to be working for the most part, ...it could use some like borders on those elements, its a little confusing where one thing starts and another stops
h1tag
@h1tag
Feb 23 2017 18:38
@mdbailin I'm not getting the error you mentioned before
Tom
@moT01
Feb 23 2017 18:38
maybe a popup or some text somewhere letting me know i won
Matthew Bailin
@mdbailin
Feb 23 2017 18:38
Does the board work?
@fortMaximus Does the board work?
Tony Miri
@TonyMiri
Feb 23 2017 18:39
@moT01 Which elements need borders?
h1tag
@h1tag
Feb 23 2017 18:39
@mdbailin however, when I start playing, I get this error: Uncaught TypeError: playerTile is not a function
Tom
@moT01
Feb 23 2017 18:39
some nice animations/transitions whatever you used
Igor Amidzic
@igoramidzic
Feb 23 2017 18:39
@Sky thanks you so much, I appreciate it :) sorry don't know your full tag I'm on mobile
CamperBot
@camperbot
Feb 23 2017 18:39
igoramidzic sends brownie points to @sky :sparkles: :thumbsup: :sparkles:
:warning: @sky's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Tom
@moT01
Feb 23 2017 18:40
for instance when i load the page, ...the start looks like its just there, i cant tell that its a button @FatTone225
Gulsvi
@gulsvi
Feb 23 2017 18:40
It was fun to figure out :) I couldn't get the checkbox to work though @igoramidzic
Tom
@moT01
Feb 23 2017 18:40
most people can probly figure it out
Tony Miri
@TonyMiri
Feb 23 2017 18:41
@moT01 I see. I know what you mean though. I could probably make it stand out more.
Matthew Bailin
@mdbailin
Feb 23 2017 18:41
@fortMaximus So why would I be getting the $ error then?
Tony Miri
@TonyMiri
Feb 23 2017 18:41
@moT01 Thank you for your suggestions!
h1tag
@h1tag
Feb 23 2017 18:41
@mdbailin why are you using playerTile as a function, isn't it just a variable?
CamperBot
@camperbot
Feb 23 2017 18:41
fattone225 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @mot01 |http://www.freecodecamp.com/mot01
Matthew Bailin
@mdbailin
Feb 23 2017 18:41
@fortMaximus It's a closure
don't worry about that, I'll fix that part later
Gulsvi
@gulsvi
Feb 23 2017 18:42
@DEstepp It looks like you copied the HTML from the example tribute page, but that won't work with the version of bootstrap you have. You need to use bootstrap 3 like they use in the tribute example.
Jakumozo
@Jakumozo
Feb 23 2017 18:43
@SkyCoder01 it worked for a while, now it doesnt work again :( although I didnt make any changes. Could you have a look? http://codepen.io/Kromel/pen/VpwjeE/
h1tag
@h1tag
Feb 23 2017 18:43
@mdbailin still haven't learn closures :worried:
Matthew Bailin
@mdbailin
Feb 23 2017 18:43
@fortMaximus I'll teach you later. Can you please answer my original question first?
Gulsvi
@gulsvi
Feb 23 2017 18:44
@Jakumozo It is working for me - you are just getting the same quote over and over again. That's the next challenge to try and solve with that API :)
ehutchllew
@ehutchllew
Feb 23 2017 18:45
@Jakumozo it works, but the api is only outputting 1 quote
h1tag
@h1tag
Feb 23 2017 18:47
@mdbailin All I know is that you get this error if you haven't added jQuery. But as I told you, the error is not showing for me
Jakumozo
@Jakumozo
Feb 23 2017 18:47
@ehutchllew @SkyCoder01 I dont understand why it doesnt work for me... I thought that on click it uses the url, where I always get different output in browser
Gulsvi
@gulsvi
Feb 23 2017 18:49
@Jakumozo We can't really give any other hints without giving the answer. I'm not sure if you want the answer or to try and figure it out though.
@Jakumozo Actually, one more hint. Look at the documentation for the quotes API: https://quotesondesign.com/api-v4-0/
Compare how they use the getJSON and the AJAX, then study the difference between getJSON and Ajax to see what's missing in your getJSON call.
Jakumozo
@Jakumozo
Feb 23 2017 18:51
@SkyCoder01 the problem is that it doesnt show me even one same quote :( but it shows it for you
I am trying to figure out why, because it is difficult to practice in this way
Viktor Yakov
@ViktorYakov
Feb 23 2017 18:54
Hey, Hey folks how are you doing? Now to the point! I have been struggling with random quote machine project. Before 3-4 days I found out how to get the json data file from the APi and even managed to tweet that quote on twitter I switched off my PC because it was too late to finish up the project only the design part was left. Next day when I tried to press the button to get a random quote the console log showed a lot of errors and the struggle started. For the last 3 days, I was trying to fix the errors changed a few APis but couldnt make it work. Finally I was able to retrieve the info from an API, I can see from the console-Network the returned json file. The problem is that I can't use the information from the json file which retrieved from the server. My success function doesn't work and I am a bit mentally fatigued and bored from that struggle. Could you please check my code and give some hints, I don't want the straight forward answer but some hints would be much appreciated. Thanks in advance! Here is my code:

$(document).ready(function() {
   $("#getMsg").on("click", function() {
      $.ajax({
        method: "GET",
        url: "https://wisdomapi.herokuapp.com/v1/random",
        dataType: "jsonp",
        success: function(data) {
          $('.quote').html(data);
        }
    });
   });
});
Tom
@moT01
Feb 23 2017 18:57
@ViktorYakov 3-4 days is a while
got a pen?
Gulsvi
@gulsvi
Feb 23 2017 18:59
@Jakumozo If you press Ctrl+Shift+J, do you get a browser console with more information?
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:00
Yeah I have got a pen @moT01
CamperBot
@camperbot
Feb 23 2017 19:00
:bulb: to format code use backticks! ``` more info
Tom
@moT01
Feb 23 2017 19:01
@ViktorYakov that code is working for me
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:01
@WTPP at the end use the ```
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:01
DAMN IT
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:01
use at the end :P
Jakumozo
@Jakumozo
Feb 23 2017 19:01
@SkyCoder01 20 erros (4 types) ending as "Origin 'http://s.codepen.io' is therefore not allowed access."
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:01
Rleax dude
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:01
Im forgetting to press shit
duuuude
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:01
@WTPP use the edit option man
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:02
nah look man
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:02
I am forgeting too from time to time
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:02
li a {
float: left;
display: block;
color: #005;
padding: 8px 16px;
text-decoration: none;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
overflow: hidden;
background-color: #333;
}
/uzvedimas ant juostos/
li a:hover {
background-color: #365;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.text-center {
text-align: center;
}
a {
display: block;
padding: 25%;
background-color: #dddddd;
}
</style>
I GOT THIS
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:02
h1tag
@h1tag
Feb 23 2017 19:02
@WTPP why post 4 times? delete the past 3
Gulsvi
@gulsvi
Feb 23 2017 19:02
@Jakumozo Hmm, I don't know why you're getting that...
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:03
Oh i didn't know I can delete chat posts.. my bad. Thank you
Jakumozo
@Jakumozo
Feb 23 2017 19:03
@SkyCoder01 anyway, thank you! I will try another browsser
CamperBot
@camperbot
Feb 23 2017 19:03
:warning: jakumozo already gave skycoder01 points
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:04
@moT01 I am retrieving the json file but the problem is my success function can't really render that info to the codepen page. I am sure it isn't that hard the problem is that I am kind of tired.
@WTPP what was your problem mate could you explain what you want to do ?
Gulsvi
@gulsvi
Feb 23 2017 19:05

@Jakumozo Never mind, I figured it out - add &callback= to the end of your URL:

$("#randQuote").on("click", function() {
  $.getJSON('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=', function(jsonInput) {
    console.log(jsonInput);
    $("#main").html(jsonInput[0].content);
  });
});

Then study the stuff I talked about earlier :)

Daumantas Drukteinis
@WTPP
Feb 23 2017 19:05
@ViktorYakov It should be horizontal, I'm making navigation bar
Gulsvi
@gulsvi
Feb 23 2017 19:05
@ehutchllew Gave one workaround, but that doesn't explain why you see a different quote every time you open the link in your browser
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:05
But it's not
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:06
@WTPP can you give me your codepen, please?
Tom
@moT01
Feb 23 2017 19:07
@ViktorYakov i think its that your just putting data into the element
Jakumozo
@Jakumozo
Feb 23 2017 19:07
@SkyCoder01 thanks a lot! it works well now
CamperBot
@camperbot
Feb 23 2017 19:07
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jakumozo already gave skycoder01 points
Tom
@moT01
Feb 23 2017 19:07
be more specific
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:07
@ViktorYakov http://codepen.io/WTPP/pen/evYRdR/ here you go Viktorrr
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:09
I will check it now
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:10
I mean I added float:left; but it did nothing
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:12
@WTPP Dude okay, first your html must be separeted into the HTML field second you can easily get the bootstrap cdn link from the options this is not necessary. Let me check the rest
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:15
@ViktorYakov Okay okay okay okay okay nice I'm trying it
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:18
@WTPP
ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
    display: block;
    /* float: right; */
    width: 100%;
    overflow: hidden;
    /* background-color: #333; */
}

li {
    float: left;
    width: 20%;
    margin: auto 40px;
    text-align: center;
}


a {
    /* display: block; */
    /* padding: 25%; */
    /* width: 100%; */
    /* background-color: #dddddd; */
}
Tom
@moT01
Feb 23 2017 19:19
@ViktorYakov let me know if you need more direction
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:20
@WTPP This is not styled just properly distributed vertical nav bar you need to style them don work around a element I would suggest :)
Hope that helps
@moT01 well I am trying to render the data which I retrieved from the sever to my html page I am failing currently with this task - some hints would be appreciated
Jasmin Parent
@charlesdarkwind
Feb 23 2017 19:23
Anyone whos the logo from twitch api challenge wont work for no apparent reson?
Daumantas Drukteinis
@WTPP
Feb 23 2017 19:24
@ViktorYakov Okay i'll try my best, really thank you, guys like you gives me motivation maaaaan ;)
CamperBot
@camperbot
Feb 23 2017 19:24
wtpp sends brownie points to @viktoryakov :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @viktoryakov |http://www.freecodecamp.com/viktoryakov
Johnny
@jtan3
Feb 23 2017 19:24
@charlesdarkwind the logos works for me
Gulsvi
@gulsvi
Feb 23 2017 19:25
@charlesdarkwind <img src=""> not <img href="">
:shipit: :)
Jasmin Parent
@charlesdarkwind
Feb 23 2017 19:25
@SkyCoder01 Lol you got me
Gulsvi
@gulsvi
Feb 23 2017 19:26
Okay, back to algorithms now lol
Jasmin Parent
@charlesdarkwind
Feb 23 2017 19:26
I need a break xD
Gulsvi
@gulsvi
Feb 23 2017 19:26
This room is too distracting for me :p
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:26
@moT01 Thank you man ! I know I think I tried to access the received object but somehow It wasn't working anyway thank you now it is working gosh :D
CamperBot
@camperbot
Feb 23 2017 19:26
viktoryakov sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 526 | @mot01 |http://www.freecodecamp.com/mot01
Viktor Yakov
@ViktorYakov
Feb 23 2017 19:27
@WTPP You are welcome dude keep coding and never give up :P
Kevin
@AnaRobynn
Feb 23 2017 19:30
Hello, I'm wondering how I can achieve a pressed button look on the the whole counter.
http://codepen.io/rangelke/pen/XMWeWW
Kevin
@AnaRobynn
Feb 23 2017 19:32
@jtan3 No bootstrap
Pure css
or js
Johnny
@jtan3
Feb 23 2017 19:33
@rangelke google button?
Tom
@moT01
Feb 23 2017 19:33
theres some css, um i forgot what to call em.... style you can apply on events
button:hover { 
 background-color: blue 
}
Kevin
@AnaRobynn
Feb 23 2017 19:34
@jtan3 I'm pretty sure I tried that, which is why I'm here...
CedricGB
@CedricGB
Feb 23 2017 19:35
Hello, I have finished my tribute page but when I want to finish the challenge by adding my code, it's doesn't work, I missed something ?
Tom
@moT01
Feb 23 2017 19:35
@rangelke that's the way to go pure css
Tyler Moeller
@TylerMoeller
Feb 23 2017 19:35
@rangelke What do you mean by the "whole counter"?
@rangelke
Kevin
@AnaRobynn
Feb 23 2017 19:37
@TylerMoeller I meant quote, the whole block with the black border
I want to make is sort of clickable
to generate a new quote
Tyler Moeller
@TylerMoeller
Feb 23 2017 19:38
One approach is to move the button up or down 5px on :active or :focus to make it seem "pressed", but I can take a closer look
Kevin
@AnaRobynn
Feb 23 2017 19:39
hmm, I'll try that
Tyler Moeller
@TylerMoeller
Feb 23 2017 19:39
Depends on what "pressed" look you want, you could also brighten the spot around the mouse/finger where it's clicked, but that gets more complicated
Tom
@moT01
Feb 23 2017 19:39
@rangelke if you check my pen out, you can see some of the css on the .btn and different .btn events or whatever
tazpowerz
@tazpowerz
Feb 23 2017 19:41
my image is not responsive in my project. despite using img-responsive.https://gist.github.com/anonymous/f043526ab0c25138e8337a83f0930c1b
curiousNoob
@curiousNoob
Feb 23 2017 19:47
hi
Moisés Man
@moigithub
Feb 23 2017 19:48
@tazpowerz img-responsive is bootstrap version 3 class
soo if u have linked bootstrap v4 on ur project.. it wont work
tazpowerz
@tazpowerz
Feb 23 2017 19:49
@moigithub What should i do?
@moigithub What should i do? i dont want to start the project all over again.
Johnny
@jtan3
Feb 23 2017 19:51
@tazpowerz what bootstrap are you using?
Moisés Man
@moigithub
Feb 23 2017 19:51
u can change ur bootstrap link to v3 and keep using img-responsive https://www.bootstrapcdn.com
or keep v4. and change the class name http://v4-alpha.getbootstrap.com/content/images/#responsive-images
@tazpowerz
curiousNoob
@curiousNoob
Feb 23 2017 19:52
what does this means in CSS code: -webkit-transition:all .3s;
tazpowerz
@tazpowerz
Feb 23 2017 19:54
@jtan3 bootstrap v4.0
@moigithub thanks
CamperBot
@camperbot
Feb 23 2017 19:55
tazpowerz sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2728 | @moigithub |http://www.freecodecamp.com/moigithub
tazpowerz
@tazpowerz
Feb 23 2017 19:56
@moigithub
@moigithub thanks a million
CamperBot
@camperbot
Feb 23 2017 19:57
tazpowerz sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:warning: tazpowerz already gave moigithub points
Moisés Man
@moigithub
Feb 23 2017 19:57
:+1:
Tom
@moT01
Feb 23 2017 20:06
@curiousNoob it means it will transition all the changed styles in .3seconds
curiousNoob
@curiousNoob
Feb 23 2017 20:09
@moT01 thanks
CamperBot
@camperbot
Feb 23 2017 20:09
curiousnoob sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 527 | @mot01 |http://www.freecodecamp.com/mot01
curiousNoob
@curiousNoob
Feb 23 2017 20:52
display:-webkit-box; can someone explain this line
Jakumozo
@Jakumozo
Feb 23 2017 20:55
Why does the function always return the same value? Shouldn't it on click send a new query and get new value?
http://codepen.io/Kromel/pen/jBOLZK
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 20:59
hi Everyone! could someone have a look at my code? not sure whats wrong
Tom
@moT01
Feb 23 2017 21:11
@lidiawisniewska whats it doing
Ken Haduch
@khaduch
Feb 23 2017 21:13
@lidiawisniewska - what are you expecting it to do that it isn't doing?
Tom
@moT01
Feb 23 2017 21:14
i think its the for loop, and you should be using an each or foreach or something
Kevin
@AnaRobynn
Feb 23 2017 21:21
@curiousNoob Does that even exist Oo
@moT01 @TylerMoeller I'm currently pleased with the result of the animated button. https://codepen.io/rangelke/pen/zZYERK
Learned a bit from your pen's and info. Thanks!
CamperBot
@camperbot
Feb 23 2017 21:22
rangelke sends brownie points to @mot01 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 528 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 1508 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ken Haduch
@khaduch
Feb 23 2017 21:23
@lidiawisniewska - so far, it's doing something that I'm not sure you intended, but it is requesting information on the users in your list, and the for the ones that are online, you are calling the getOfflineStreamers() function - but within that function, you are also referencing usernames[i] which is kind of a shaky thing to do. Actually, I see that you are using an IIFE, so that's probably working to make the function enclose the correct value of i, at least some of the time. But the fact that the returns from the initial calls to the API are asynchronous, you cannot really rely on the timing of those events. That might be why you are getting erratic behavior? It seems that I saw it do different things two times...
Tom
@moT01
Feb 23 2017 21:24
@rangelke lookin good
Tyler Moeller
@TylerMoeller
Feb 23 2017 21:25
@curiousNoob That's old syntax for the 2009 version of flexbox: https://css-tricks.com/old-flexbox-and-new-flexbox/
(don't use it :))
@rangelke very nice!!
Good thinking by changing the box-shadow
Kevin
@AnaRobynn
Feb 23 2017 21:27
@moT01 @TylerMoeller One weird behaviour I noticed is that during the transition from nothing to :hover the text weirds out a bit, but I'm not sure if that could be solved. Since it's scaling the button up, so I guess text has more room.
Tom
@moT01
Feb 23 2017 21:29
text size doesn't transition very well i dont think
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 21:30
@khaduch thanks for pointing that out! solved some issues but new ones came up
CamperBot
@camperbot
Feb 23 2017 21:30
lidiawisniewska sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2532 | @khaduch |http://www.freecodecamp.com/khaduch
Kevin
@AnaRobynn
Feb 23 2017 21:31
Without the transition, the scale works normally, without weirding out the text
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 21:31
need to understand few bits to fix this :)
Tyler Moeller
@TylerMoeller
Feb 23 2017 21:32
@rangelke I've always seen that with scale as well - things get blurry/distorted
Tom
@moT01
Feb 23 2017 21:34
not enough resolution on the screen maybe?
feels to me like there's not enough pixels to make a smooth transition
Ken Haduch
@khaduch
Feb 23 2017 21:36
@Jakumozo - I just tried your quote program and it seems to be returning different quotes with each click? Are you still seeing the behavior that you were asking about?
Anthony Contreras
@AmazeCPK
Feb 23 2017 21:38
Hello, I'm wondering how I can make dynamic images appear like in this website: http://karltaylorportfolio.com/overview/
Ken Haduch
@khaduch
Feb 23 2017 21:40
@lidiawisniewska - well, the javascript analysis complains about creating functions within the loop, so that it probably a valid complaint. I think that instead of using i to access the user, it would be more robust to extract the username from the returned data and use that for subsequent access for the related data, like the icon, etc. That way, you are synchronizing the data access for each user by actually reacting to the returned data. You probably will want to store the returned data, per user, in some type of structure - objects or arrays of objects, so that you can later use it for selecting the offline and online users?
Gulsvi
@gulsvi
Feb 23 2017 21:41
@Jakumozo This is where you'll have to look at the documentation and notice the difference between the getJSON code and the ajax code. There is one thing they do differently with the Ajax code that you can also do. If you're fed up though and just want the answer, let us know :) It's a one line fix.
Ghaith Ali
@ghaithAqidi
Feb 23 2017 21:42
guys, I made a simple guide on how to make a new repository with webstorm, you can check it out here:
https://www.scribd.com/document/340144286/Git-With-WebStorm-Guide
Jerzz
@2cool4school
Feb 23 2017 21:44
Hey guys has anyone ever used the twitter button on a website?
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 21:49
@khaduch not sure if this is what you mean - json._links.channel.substr(38)
to get the username?
Ken Haduch
@khaduch
Feb 23 2017 22:09
@lidiawisniewska - that looks like the place where you would want to get the information - you could just easily extract it with a split like json._links.channel.split('/').pop() - gets the last portion of that string... at least for an online user. I guess for an offline user, as well...
Gulsvi
@gulsvi
Feb 23 2017 22:12
@2cool4school I've used a twitter button before, what's your question?
Jakumozo
@Jakumozo
Feb 23 2017 22:16
@SkyCoder01 thanks, man! I've completed this challenge thanks to you.
CamperBot
@camperbot
Feb 23 2017 22:16
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 22:18
@khaduch cool - the same result
Jerzz
@2cool4school
Feb 23 2017 22:23
@SkyCoder01 I was wondering how I can attach a twitter share button to images on my site, and tweet the link to the image along with the images as a thumbnail?
@SkyCoder01 I've been trying at this for two days. I've traversed the twitter documentation, and I can accomplish what they have in their examples. For instance I can get the tweet button to send "example text https://examplelink.com"
@SkyCoder01 But when i send the url to whatever image I want, I want the image to be displayed in the tweet. Not as some arbitrary link that users are going to be compelled to ignore.
Jakumozo
@Jakumozo
Feb 23 2017 22:26
@SkyCoder01 if you could also have a look http://codepen.io/Kromel/pen/dvydvR ? It doesnt return the value
Gulsvi
@gulsvi
Feb 23 2017 22:27
@2cool4school I've only used it for tweeting quotes, sorry :(
I was reading this the other day though and there are <meta> tags for displaying images of a web page when tweeting out a link to a page. Maybe you have to put the images in an iFrame with these meta tags? I'm not sure though... sorry.
Igor Amidzic
@igoramidzic
Feb 23 2017 22:28
Can someone help me with my textbox/div problem? I have a div right next to a text box and the div is messing up the alignment: anyone know how to fix?
nevermind got it
http://codepen.io/amidzicigor/pen/JWjpLN
Jerzz
@2cool4school
Feb 23 2017 22:28
@SkyCoder01 That's fine man I appreciate the reach out
@SkyCoder01 Thanks
CamperBot
@camperbot
Feb 23 2017 22:28
2cool4school sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Lidia Wisniewska
@lidiawisniewska
Feb 23 2017 22:29
@khaduch not sure at one point do i declare it to be able to use it in last function?
Gulsvi
@gulsvi
Feb 23 2017 22:30
@Jakumozo You're getting a familiar error again:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
The solution to this error can change for different APIs
See this Stack Overflow regarding that error: http://stackoverflow.com/a/38921370
Ken Haduch
@khaduch
Feb 23 2017 22:34
@lidiawisniewska - I think that you want to make it "global" - within your .ready function. Just like where you have the var usernames (if I understood your question.)
Gulsvi
@gulsvi
Feb 23 2017 22:42
@lidiawisniewska @khaduch Maybe it's easier to loop with callback instead? Then you can use the names in your array without it getting out of sync. .forEach() was a lifesaver for me when I was having trouble with my for() loop in the Twitch project.
For example, usernames.forEach(function(user, i) {
Larry Hawkins
@HawkinsLJ
Feb 23 2017 22:44
@igoramidzic Hi
looking at your code and in this section:<span class="group">
<!-- Terms and Conditions & Referral code -->
<div class="tos item small-item left-item">
<input type="checkbox" name="" value="I agree">
</div><!-- --><input class="item small-item" type="text" name="referralCode" placeholder="Referral code">
</span>
Igor Amidzic
@igoramidzic
Feb 23 2017 22:44
@HawkinsLJ Sup
Larry Hawkins
@HawkinsLJ
Feb 23 2017 22:44
I suspect the div is causing this issue.
Aftab Parvez
@aftabparvez
Feb 23 2017 22:44
Hi everyone! Anyone have a really good looking website layout which I can try and create with flex box?
Larry Hawkins
@HawkinsLJ
Feb 23 2017 22:44
Anyway to remove it and use the Span?
i would think the best thing to do is replicate another span section as best as possible and avoid the div
Igor Amidzic
@igoramidzic
Feb 23 2017 22:45
@HawkinsLJ I fixed my problem by adding vertical-align: top to the div
Larry Hawkins
@HawkinsLJ
Feb 23 2017 22:45
awesome
Igor Amidzic
@igoramidzic
Feb 23 2017 22:46
@HawkinsLJ Thank you
CamperBot
@camperbot
Feb 23 2017 22:46
igoramidzic sends brownie points to @hawkinslj :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @hawkinslj |http://www.freecodecamp.com/hawkinslj
Jakumozo
@Jakumozo
Feb 23 2017 22:55
@SkyCoder01 many thanks again! you are helping a lot!
CamperBot
@camperbot
Feb 23 2017 22:55
jakumozo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jakumozo already gave skycoder01 points
Gulsvi
@gulsvi
Feb 23 2017 22:56
@Jakumozo Maybe you can help me soon! :)
The flex items do not center when I set the height of the container to 100%. However , they center when I set it to 1000px or any other pixel value.
Can someone help me with this?
Moisés Man
@moigithub
Feb 23 2017 23:22
ofc.. % is based on parent/container size
ie.: if u have a container 1000px
doing on child 50% mean its 500px
if u dont have any parent.. where this % will calculated from?
Aftab Parvez
@aftabparvez
Feb 23 2017 23:36
@moigithub Thanks for your input! I changed the height to adapt to the viewport height by adjusting it to 100vh instead of 100% and it worked. Thanks again!! :)
CamperBot
@camperbot
Feb 23 2017 23:36
aftabparvez sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2730 | @moigithub |http://www.freecodecamp.com/moigithub
nathabonfim59
@nathabonfim59
Feb 23 2017 23:42

http://codepen.io/nathabonfim59/pen/GWRxRz
Hello, I'm trying to build a version mobile of my portfolio page, and I've created a bottom navbar to facilitate the navigation on small screen devices, but I don't know how to change the position of these elements dynamically according to screen size.

Can someone help me?

Paul DiLoreto
@paulmichaelxd
Feb 23 2017 23:46
read documentation on bootstrap 3 and css media queries
@nathabonfim59
Manuel Reyes
@Androbat
Feb 23 2017 23:54
Hi
Could someone check my code?
Tom
@moT01
Feb 23 2017 23:55
@Androbat whats up, i could try
nathabonfim59
@nathabonfim59
Feb 23 2017 23:56
I'm trying to do this without bootstrap, but it's a really great idea, I'll use media queries to do this, thanks @paulmichaelxd
CamperBot
@camperbot
Feb 23 2017 23:56
nathabonfim59 sends brownie points to @paulmichaelxd :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @paulmichaelxd |http://www.freecodecamp.com/paulmichaelxd
Manuel Reyes
@Androbat
Feb 23 2017 23:58
@moT01 Ok. See, I don´t know why my css transition is not working. See my codepen. http://codepen.io/Androbat/pen/dNEBQO?editors=1100
Finagl3
@Finagl3
Feb 23 2017 23:59
Hownl do I figure a docs relative path? I'm trying to link one doc to another and what I'm doing obviously isn't working...