These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Dec 2016
just about finished with my portfolio
looking for feedback
and comments
Mike Neuman
@mikeneumannd
Dec 14 2016 00:02
@moT01 it only occurs on CodePen so idk
lyndxe
@lyndxe
Dec 14 2016 00:05
hey guys, I'm working on my portfolio and have hit a couple road blocks, wondering if I could get some input? not sure why I can't get my navigation bar to pull right?
Tom
@moT01
Dec 14 2016 00:05
@mikeneumannd yea i dont know, ...i dont see a setting for it on there
@aow003 looks pretty decent, ...it all seems to function good, ...im not sure i like the colors but thats me
Mike Neuman
@mikeneumannd
Dec 14 2016 00:09
reloaded the page and my problem is solved
Tom
@moT01
Dec 14 2016 00:11
@lyndxe i dont know enough bootstrap to help, ...what does it mean pull-right? the nav links aligned on the right im guessing?
Tyler Moeller
@TylerMoeller
Dec 14 2016 00:24
@lyndxe Move your closing </div><!-- navbar-header--> above the <ul> tag:
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand pull-left" id="brand" href="mailto:#Subject=Hello%20from%20CodePen!" target="_top"><strong>Lyndxe</strong></a>
      </div><!-- navbar-header-->
      <ul class="nav navbar-nav pull-right">
        <li><a href="#" id="button">About</a></li>
        <li><a href="#" id="button">Projects</a></li>
        <li><a href="#" id="button">Get In Touch</a></li>
      </ul><!-- end nav navbar-nav -->
    </div><!-- container-fluid-->
  </nav>
Also, it's best to use navbar-right instead of pull-right: http://getbootstrap.com/components/#navbar-component-alignment
Tyler Moeller
@TylerMoeller
Dec 14 2016 00:51
@moT01 It's a class in bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
.pull-right {
  float: right !important;
}
lyndxe
@lyndxe
Dec 14 2016 00:52
@TylerMoeller thank you!!
CamperBot
@camperbot
Dec 14 2016 00:52
lyndxe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1147 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 14 2016 00:52
You're welcome
Phillip Kelley-Dotson
@pkdotson
Dec 14 2016 01:20
Hey guys i'm working on the build a random quote machine. And i'm wondering how many lines of code am i looking at. From what i written down on how i want my generator to work. It doesn't seem to be that much. Am I thinking in a wrong way or what? i've took a sneak peak at other projects and i am astounded how much code they need for this project?
lewis reynolds
@lreynl
Dec 14 2016 01:20
I think I have my tic-tac-toe mostly done. A couple of things I'm not sure of are why the O's are filled in on mobile; and why both sides of the O's are the same color when they spin around. Any ideas? http://codepen.io/ler/pen/VmWZzM
Tom
@moT01
Dec 14 2016 01:23
@pkdotson quote machine isnt too bad
@pkdotson You can make it as complicated as you want, of course. Are you trying to use an API, or are you creating your own object of quotes?
Phillip Kelley-Dotson
@pkdotson
Dec 14 2016 01:24
i'm going to use a api. I assumed that would be the easiest
Tom
@moT01
Dec 14 2016 01:24
@pkdotson i would go with the api
@pkdotson I think the object is easier, but I agree - do the api - you'll learn more
Tom
@moT01
Dec 14 2016 01:28
@lreynl looks pretty good, ...the x's arent x's, ...theyre boxes
the background for the o is changing color but the letter itself isnt
Coy Sanders
@coymeetsworld
Dec 14 2016 01:31
you'll have plenty of opportunities to learn APIs in the courses
using a local array or object is much easier, dont' see anything wrong with that either if you decide to use it @pkdotson, I did
Phillip Kelley-Dotson
@pkdotson
Dec 14 2016 01:32
@moT01 @mltr @coymeetsworld thanks!
lewis reynolds
@lreynl
Dec 14 2016 01:33
@moT01 On which browser?
Tom
@moT01
Dec 14 2016 01:34
firefox
good luck, @pkdotson , and just to share, like @coymeetsworld , I used the object, not the api for the quotes challenge. you'll learn api in the wiki search for certain
Coy Sanders
@coymeetsworld
Dec 14 2016 01:35
yeah actually when I did the challenge which was around the beginning of the year @mltr @pkdotson it was listed as a beginner-level challenge
Tom
@moT01
Dec 14 2016 01:35
@lreynl yea, theyre x's on my chrome
Coy Sanders
@coymeetsworld
Dec 14 2016 01:36
with tribute/portfolio and i want to say calculator
and these challenges were before AJAX/JSON challenges so it assumed you have no prior knowledge of them. I think they were just moved over as those 2 were a little more advanced than what was expected of you
lewis reynolds
@lreynl
Dec 14 2016 01:37
@moT01 Thanks, I'll work on that next.
CamperBot
@camperbot
Dec 14 2016 01:37
lreynl sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 14 2016 01:38
@lreynl my browsers arent the most current, so it might work on a newer firefox
GuiRod22
@GuiRod22
Dec 14 2016 01:43
Hello, I'm having a problem with my tribute page, i put content inside buttons, but when i press one, all of them show the content at the same time. =\
Tom
@moT01
Dec 14 2016 01:44
share the pen
GuiRod22
@GuiRod22
Dec 14 2016 01:44
i need to save right ?
or just the link ?
Tom
@moT01
Dec 14 2016 01:45
save it and paste the url
i didn't finish it yet, so don't mind the style
@GuiRod22 my guess is that it's calling all p elements to toggle with any button click
sampah
@manusialemah
Dec 14 2016 01:48
Oi
you might need to use ids for each
sampah
@manusialemah
Dec 14 2016 01:49
Can I cheat, I mean, look at the source code, for, the personal portfolio webpage?
GuiRod22
@GuiRod22
Dec 14 2016 01:49
Gonna try it. Thanks for helping @mltr
CamperBot
@camperbot
Dec 14 2016 01:49
guirod22 sends brownie points to @mltr :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @mltr |http://www.freecodecamp.com/mltr
Marshall
@marshpiatt
Dec 14 2016 01:52

Hi i'm trying to resize a picture in my project, here is my html: <a href="https://en.wikipedia.org/wiki/Theodore_Roosevelt" alt="photo of Theodore Roosevelt"><img src="http://cp91279.biography.com/Theodore-Roosevelt_The-Talented-Mr-Roosevelt_HD_768x432-16x9.jpg" target="_blank" class="picture"></a> here is my css: .picture {

height:"200px";
width:"50px";
}

does anyone know why its not working
Tom
@moT01
Dec 14 2016 01:55
try it without the quotes in the units
Marshall
@marshpiatt
Dec 14 2016 01:56
that works thank you!
Tom
@moT01
Dec 14 2016 01:56
click name and say thanks
@marshpiatt
Marshall
@marshpiatt
Dec 14 2016 01:59
@moT01 Thanks!!
CamperBot
@camperbot
Dec 14 2016 01:59
marshpiatt sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @mot01 |http://www.freecodecamp.com/mot01
Marshall
@marshpiatt
Dec 14 2016 02:02
Does anyone know why the picture isn't taking any of the #picture id attributes? https://codepen.io/marshpiatt/pen/VmEXaz
Tom
@moT01
Dec 14 2016 02:04
seems to be working
Marshall
@marshpiatt
Dec 14 2016 02:06
when i adjust the height and width nothing happens on the console
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:07
@marshpiatt One way to debug these things is to add a border so you can see how the browser interprets your code:
#picture {  
  padding:100px;
  height:350px;
  width: 350px;
  border: 1px solid black; /* border for debugging  */
}
Tom
@moT01
Dec 14 2016 02:07
you mean the picture doesn't change its size?
Marshall
@marshpiatt
Dec 14 2016 02:07
yes the pictuer does no resize
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:08
Hopefully that can set you on the right path to investigate a solution
Change the width and see what happens with the border
Marshall
@marshpiatt
Dec 14 2016 02:08
so it looks like when i put in a border it shows up behind the image
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:09
Right, you are modifying the styling of the <div> not the image
Tom
@moT01
Dec 14 2016 02:09
say tyler, ...i had a problem earlier, didn't find an answer, ...your pretty knowledgeable. wanna help
Marshall
@marshpiatt
Dec 14 2016 02:09
it looks like the div is almost separate from the image
oh i see ok
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:09
Sure @moT01 I can try
Marshall
@marshpiatt
Dec 14 2016 02:10
why isn't the image effected by the div
i thought the div is like a container and everything inside of it is effected by the css
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:11
It's because of how divs and images display differently - divs are block elements. Images are inline elements.
If you set the image to have a width of 100%, it will fill out the width of it's (block) container
Marshall
@marshpiatt
Dec 14 2016 02:12
@TylerMoeller Thanks!
CamperBot
@camperbot
Dec 14 2016 02:12
marshpiatt sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1148 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tom
@moT01
Dec 14 2016 02:12
i was doing the smallest common multiple challenge, ...i built a string to use as a test for a loop, but it wasn't working liking a normal test would work. i figure its cause its a string. I was looking for a way around this, ...maybe some method that would allow me to use that string to test with
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:12
Welcome, @marshpiatt
its the scmtest string, ...i took out the tests i was trying it on
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:13
@moT01 That was a hard one for me... will have to refresh my memory and see if I can help
Tom
@moT01
Dec 14 2016 02:15
well, ...its more a question of can i use a string somehow in a loop test. I believe a string with anything in it comes back true(not 100%). but i want the string to evaluate like its written out
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:16
Not sure I understand completely, but you can convert a string to a number so it evaluates correctly with Number() or parseInt()
Also, a short hand is to put a + in front:
var a = '123';
var b = 2;
var sum = +a + 2;  // sum is 125
Tom
@moT01
Dec 14 2016 02:18
that plus with make it a number? so sum would be 125
will*
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:18
Yes, exactly
Tom
@moT01
Dec 14 2016 02:19
ahh, didnt see the comment
but no that won't help me here i dont think, ...
"k%1 === 0 && k%2 === 0 && k%3 === 0 && k%4 === 0 && k%5 === 0"
Marshall
@marshpiatt
Dec 14 2016 02:19
In CSS I am trying to center my image in the middle of the screen margin: auto; isn't working
any ideas?
Tom
@moT01
Dec 14 2016 02:19
that's the string i made that i want to use in a test
Marshall
@marshpiatt
Dec 14 2016 02:20
@thnknoutloud looks good!
thnknoutloud
@thnknoutloud
Dec 14 2016 02:20
can I please get some feedback.
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:20
@moT01 Oh, I understand your question better now - I think you can do it, let me take a closer look
thnknoutloud
@thnknoutloud
Dec 14 2016 02:20
@marshpiatt Thanks!
CamperBot
@camperbot
Dec 14 2016 02:20
thnknoutloud sends brownie points to @marshpiatt :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marshpiatt
GuiRod22
@GuiRod22
Dec 14 2016 02:21
@marshpiatt try putting display: block; margin: 0 auto;
Marshall
@marshpiatt
Dec 14 2016 02:21
@GuiRod22 Thanks!
CamperBot
@camperbot
Dec 14 2016 02:21
marshpiatt sends brownie points to @guirod22 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @guirod22 |http://www.freecodecamp.com/guirod22
Marshall
@marshpiatt
Dec 14 2016 02:21
it works
GuiRod22
@GuiRod22
Dec 14 2016 02:23
what am i doing wrong with this jquery
Tom
@moT01
Dec 14 2016 02:23
@thnknoutloud looks good
GuiRod22
@GuiRod22
Dec 14 2016 02:23
it still showing everything when i click, i put id in everything
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:24
@moT01 As I look at how to do it, you would need to parse the string and convert it into individual if statements - it will get ugly fast, especially with larger numbers. I remember with this challenge, an efficient way to do it is to use the Euclidian Algorithm
thnknoutloud
@thnknoutloud
Dec 14 2016 02:24
@moT01 Thanks!
CamperBot
@camperbot
Dec 14 2016 02:24
thnknoutloud sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 14 2016 02:25
@TylerMoeller that's a bummer, ...thanks ill look into it
Tyler Moeller
@TylerMoeller
Dec 14 2016 02:25
They give pseudo code there that will help with a better approach...
Sorry I couldn't give good news
Tom
@moT01
Dec 14 2016 02:25
@TylerMoeller thanks
CamperBot
@camperbot
Dec 14 2016 02:25
:star2: 1149 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mot01 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tom
@moT01
Dec 14 2016 02:25
yea it all worked fine in my head
@GuiRod22 find a way to do it using 'this' should only take one button.click function
GuiRod22
@GuiRod22
Dec 14 2016 02:28
you mean instead of using id using this ?
Peter Steele
@PeterHSteele
Dec 14 2016 02:28
has anyone who's built the weather app using crossorigin.me to get around the CORS thing had trouble getting it to work on codepen lately? I'm loading codepen on https so I'm not sure why it would be an issue
Tom
@moT01
Dec 14 2016 02:29
you might need to keep the id's there
yea, you can get the value of the button using something like $(this).value set that to a variable
then (variable).toggle()
something along those lines might be a good way to go, ...if it makes any sense
Marshall
@marshpiatt
Dec 14 2016 02:43
Could I please get some feedback for my first project, this is my first draft https://codepen.io/marshpiatt/pen/VmEXaz
Angarita
@Angarita
Dec 14 2016 02:46
Hi guys! can i get some help on how to center an image using CSS
GuiRod22
@GuiRod22
Dec 14 2016 02:46
display: block; margin: 0 auto;
Tom
@moT01
Dec 14 2016 02:48
@marshpiatt looks good, picture is a little skinny, ...most of the tribute pages are pretty much like that. As long as the tasks are all done
GuiRod22
@GuiRod22
Dec 14 2016 02:48
@Angarita use it in a id or class, should work since I had this little problem
Angarita
@Angarita
Dec 14 2016 02:48
ok Thanks! i´ll try that out
GuiRod22
@GuiRod22
Dec 14 2016 02:49
for example, my image has a class of lol, so:
.lol {
display: block;
margin: 0 auto;
}
Tom
@moT01
Dec 14 2016 02:50
the auto is what does it, ...0 is top and bottom margin, ...auto is left and right margin ...sets the margin the same on the left and right
James Moore
@James-N-M
Dec 14 2016 02:51

Hey guys ... Really curious as to why this code wont work the way i want it to... I must be using Math.min and Max wrong cause it returns null when i try to call it. ```
function sumAll(arr) {
var sum = 0;
var min, max;
min = Math.min(arr);
max = Math.max(arr);
for(var i = min; i <= max; i++)
{
sum+=i;
}
return arr[0];
}

sumAll([1, 4]);
```

function sumAll(arr) {
  var sum = 0; 
  var min, max; 
  min = Math.min(arr);
  max = Math.max(arr);
  for(var i = min; i <= max; i++)
  {
    sum+=i;
  }
  return arr[0]; 
}

sumAll([1, 4]);
Tom
@moT01
Dec 14 2016 02:53
@James-N-M i think you answered your own question
James Moore
@James-N-M
Dec 14 2016 02:55
Perhaps but! Do you know why Math.min is returning null ?
When i try to use it Id rather just a static function than a if else block
lewis reynolds
@lreynl
Dec 14 2016 02:59
@James-N-M You don't need to know what the values in the array are to sum them - you just need the array length.
Tom
@moT01
Dec 14 2016 03:00
it's the syntax, i dont think you can just stick an array in there
lyndxe
@lyndxe
Dec 14 2016 03:23
back again, couple of quick questions - does my overall navbar properties take over specified link (a) colors in CSS?
--take precedence over
for instance: I'm trying to style my link properties in CSS, and it's not working, despite what I believe to me correct input.
however, I have specified font and color properties above for the navigation bar
Tom
@moT01
Dec 14 2016 03:29
there is a hierarchy of precedence, if i understand you right it should work
Ryan
@ryanmcnamara36
Dec 14 2016 03:32
Hello all. Just finishing up the tribute page and I'm trying to import the Lobster font. Anyone know where I can find the link for the font on google??
Ryan
@ryanmcnamara36
Dec 14 2016 03:35
@lyndxe thanks so much ... just curious where o you find that link??
CamperBot
@camperbot
Dec 14 2016 03:35
geneyuss sends brownie points to @lyndxe :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @lyndxe |http://www.freecodecamp.com/lyndxe
lyndxe
@lyndxe
Dec 14 2016 03:35
Ryan
@ryanmcnamara36
Dec 14 2016 03:36
@lyndxe thanks ill bookmark the link. good luck!
CamperBot
@camperbot
Dec 14 2016 03:36
geneyuss sends brownie points to @lyndxe :sparkles: :thumbsup: :sparkles:
:warning: geneyuss already gave lyndxe points
lyndxe
@lyndxe
Dec 14 2016 03:36
no problem, enjoy @geneyuss !
@moT01 I'll post a link, I deleted what I'd had under font color in the hierarchy, and it's still not showing up how I'd had it
sparklie3
@sparklie3
Dec 14 2016 03:44
has anyone completed or working on the twitch api?
Angarita
@Angarita
Dec 14 2016 03:45
@lyndxe Hey! how can I share my own pen? i can´t find the link
sparklie3
@sparklie3
Dec 14 2016 03:45
i was wondering, rather than go the https://wind-bow.gomix.me/twitch-api approach, if someone is working on using the actual twitch api
@Angarita you can just copy the link for your pen
in the url
or you can find it under my pens
Tom
@moT01
Dec 14 2016 03:47
@lyndxe its a somewhat difficult to remember precedence, theres different values for the things you are targeting, ...if that makes any sense, ...tough to explain what i don't really understand. but something is overriding your colors
lyndxe
@lyndxe
Dec 14 2016 03:48
the easiest is just to copy the link from your address/search bar @Angarita
Tom
@moT01
Dec 14 2016 03:48
color: hotpink !important;
Angarita
@Angarita
Dec 14 2016 03:48
ooh ok, so here is my Tribute Page! check it out and please give me some feedback
Tom
@moT01
Dec 14 2016 03:48
that will give your thing top priority
Tom
@moT01
Dec 14 2016 03:49
it also works if you change the a's to #button's
lyndxe
@lyndxe
Dec 14 2016 03:49
@moT01 got it - thank you! I think I need to specify the colors with li, also since I'm specifically targeting a navbar function.
CamperBot
@camperbot
Dec 14 2016 03:49
lyndxe sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @mot01 |http://www.freecodecamp.com/mot01
sparklie3
@sparklie3
Dec 14 2016 03:50
@Angarita looks good, you have some id tags like id=who that you don't seem to use
Tom
@moT01
Dec 14 2016 03:51
@Angarita looks good
sparklie3
@sparklie3
Dec 14 2016 03:51
but otherwise, it does the trick
Angarita
@Angarita
Dec 14 2016 03:52
@sparklie3 Thanks! I will check that out.
@moT01 Thank you
CamperBot
@camperbot
Dec 14 2016 03:52
:cookie: 353 | @mot01 |http://www.freecodecamp.com/mot01
angarita sends brownie points to @sparklie3 and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @sparklie3 |http://www.freecodecamp.com/sparklie3
lyndxe
@lyndxe
Dec 14 2016 03:55
@moT01 I tried a few different tricks, the one that seemed to work the best was changing all the a's to #button. appreciate the help
HAMS
@309382570
Dec 14 2016 03:57
how to explain the usage like "<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> " in the first project?
Tom
@moT01
Dec 14 2016 03:59
xs, sm, md, is the size of the screen, xtra small, small, medium
the number is how many columns it takes up
HAMS
@309382570
Dec 14 2016 04:00
@moT01 thank you,what i don' t understand is how can the columns take different size at a same time
CamperBot
@camperbot
Dec 14 2016 04:00
309382570 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 14 2016 04:01
they don't, the first class is col-xs-12
lyndxe
@lyndxe
Dec 14 2016 04:01
also, am I to understand you can only have one container per page?
Tom
@moT01
Dec 14 2016 04:01
means that when the screen is extra small it will take up 12 columns
lyndxe
@lyndxe
Dec 14 2016 04:01
I've already got a container-fluid, but wondering if I can put another in
rather, just another container
Tom
@moT01
Dec 14 2016 04:01
and it changes to 10 when the screen gets to small
Michael Karpinski
@karpimpski
Dec 14 2016 04:02
@johnshelb this is late, but thank you so much for the feedback!
CamperBot
@camperbot
Dec 14 2016 04:02
karpimpski sends brownie points to @johnshelb :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @johnshelb |http://www.freecodecamp.com/johnshelb
Tom
@moT01
Dec 14 2016 04:03
@lyndxe i dont know, but i would guess yes
HAMS
@309382570
Dec 14 2016 04:05
@moT01 thank you again, i guess it means it will automatically use different space according the class when it couter different size of the page. It doesn't mean use it at the same time, am i correct?
CamperBot
@camperbot
Dec 14 2016 04:05
309382570 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: 309382570 already gave mot01 points
Tom
@moT01
Dec 14 2016 04:07
@309382570 right
Dylan-Clelland
@Dylan-Clelland
Dec 14 2016 05:03
How do I make a box around an image like this one? https://codepen.io/FreeCodeCamp/full/NNvBQW/
Ken Haduch
@khaduch
Dec 14 2016 05:33
@Dylan-Clelland - the grey box around the image is using the jumbotron class, I think? The white box around the image might be using thumbnail, which is another class.
Apoorv Mishra
@apoorv-mishra
Dec 14 2016 06:16
Hi
need help
I need help with tribute page challenge
c0d0er
@c0d0er
Dec 14 2016 06:19
does anybody know why the following code doesnt make table-inverse work in my pen https://codepen.io/c0d0er/pen/ObwGPM?editors=0010?
<div className='tarea'>
                <h3>FCC Camper Leaderboard</h3>

            <table className='table table-striped table-bordered table-hover table-inverse'>
Lindsay Anchors
@nzey
Dec 14 2016 06:26
Hi! I'm working on the weather app and can't figure out an error I'm getting. When I try to use $.getJSON to call to the api with my appid appended to the url, I get this in the console: "net::ERR_CONNECTION_REFUSED"
Adi2Point0
@Adi2Point0
Dec 14 2016 06:26
@nzey are you behind proxy?
Lindsay Anchors
@nzey
Dec 14 2016 06:27
@Adi2Point0 I don't know what "proxy" is
Adi2Point0
@Adi2Point0
Dec 14 2016 06:27
I see
try to paste that url directly in browser and see if its accessible
@nzey
Lindsay Anchors
@nzey
Dec 14 2016 06:28
oh, yes, it is
Adi2Point0
@Adi2Point0
Dec 14 2016 06:29
@nzey okay. post your code here
lewis reynolds
@lreynl
Dec 14 2016 06:29
@nzey openweathermap doesn't allow https connections for a free account. You could try that.
Lindsay Anchors
@nzey
Dec 14 2016 06:33
@Ireynl Ok. It looks like you're right that this related to https. When I paste the url into the browser, only 'http' works, not 'https.' When I try to use 'https' in my code, I get the 'connection refused' error. When I use 'http', I get a different error, which I'm working on figuring out now: "getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details."
Lindsay Anchors
@nzey
Dec 14 2016 06:45
@lreynl here's my draft on Codepen: http://codepen.io/Sorolla/pen/gLBjjQ
Coy Sanders
@coymeetsworld
Dec 14 2016 06:47
geolocation won't work on non secure connections on Chrome at least @nzey
you can use another API to get location like http://ip-api.com/json
Sorin Ruse
@sorinr
Dec 14 2016 06:49
or you can use another weather api like apixu that have a free plan and works on both http and https
@coymeetsworld the problem i encountered wit ip location is that if an user has dynamic ip it will return wrong location most of the time
Lindsay Anchors
@nzey
Dec 14 2016 06:52
hm, ok, thanks @lreynl, @coymeetsworld, @sorinr. I'll try these other options.
CamperBot
@camperbot
Dec 14 2016 06:52
nzey sends brownie points to @lreynl and @coymeetsworld and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 944 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1621 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
:cookie: 377 | @lreynl |http://www.freecodecamp.com/lreynl
Coy Sanders
@coymeetsworld
Dec 14 2016 06:53
yes that's true too @sorinr
not sure how many people have something like that setup
or use a VPN
something I could improve on I'm sure if I wanted
Sorin Ruse
@sorinr
Dec 14 2016 06:56
@coymeetsworld its also a matter of ISP. i have 1G fiber optic connection and an dynamic ip. i can ask for a fixed one but it will cost me more/month
Lindsay Anchors
@nzey
Dec 14 2016 07:00
Yay, it's mostly working with http://ip-api.com/json, though it thinks I'm in a city slightly farther north than I am.
Sorin Ruse
@sorinr
Dec 14 2016 07:03
@nzey if you grab the coordinates and place it on a google map will you have the same location?
Lindsay Anchors
@nzey
Dec 14 2016 07:05
@sorinr yes, It's basing the address on "Comcast Cable Communications, LLC"
Sorin Ruse
@sorinr
Dec 14 2016 07:07
@nzey same for me. it shows me a location 15km away from the current one. same city but....
kirbyedy
@kirbyedy
Dec 14 2016 07:10
ip location missis about 75km for me :D
Sorin Ruse
@sorinr
Dec 14 2016 07:10
@nzey if you want to go for geolocation that is more accurate you can use it with apixu.com
kirbyedy
@kirbyedy
Dec 14 2016 07:10
provider is the cause
Sorin Ruse
@sorinr
Dec 14 2016 07:10
yep. if we have a dynamic ip thats happening
Lindsay Anchors
@nzey
Dec 14 2016 07:12
Ok. Well thanks. I will try apixu.com. Thanks for the help @sorinr. Time for me to call it a night!
CamperBot
@camperbot
Dec 14 2016 07:12
nzey sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: nzey already gave sorinr points
Sorin Ruse
@sorinr
Dec 14 2016 07:13
@nzey np
Supergood
@supergoods
Dec 14 2016 07:21
hai everybody
i stuck with codepen in <img src> i cannot upload my img....
Supergood
@supergoods
Dec 14 2016 07:28
@nzey i stuck with codepen in <img src> i cannot upload my img....
any idea?
Henry Cabello
@hacu9
Dec 14 2016 07:33
Hey guys,Can i get some feedback ? http://codepen.io/cabello986/full/PbRxap/
Lindsay Anchors
@nzey
Dec 14 2016 07:33
@supergoods I wasn't ale to open your codepen
Anthony Contreras
@AmazeCPK
Dec 14 2016 07:35
I'm stuggling hard to find a way to incorporate a nice hover effect when hovering over images on my project
any suggestions?
Henry Cabello
@hacu9
Dec 14 2016 07:36
Try a scale 1.5 and a 1px solid grey border
Anthony Contreras
@AmazeCPK
Dec 14 2016 07:39
holy moly, that's insane.
I like it, but now need to figure out how to add it
Henry Cabello
@hacu9
Dec 14 2016 08:03
Its a scale + a label translated some pixels + overflow hidden so it cant be seen unless you hover and it gets translated in the pic frame
Aryan Agal
@grubdragon
Dec 14 2016 08:07
I'm making a wiki viewer https://codepen.io/grubdragon/pen/KNBWXo
anyone any ideas
my getJSON method isnt running
Sorin Ruse
@sorinr
Dec 14 2016 08:09
@hacu9 try to disable the hover on card when the animation just started coz if you hover in and out during animation you get a strange result
Henry Cabello
@hacu9
Dec 14 2016 08:13
im trying to hover but nothing happens :0
Sorin Ruse
@sorinr
Dec 14 2016 08:15
@hacu9 move your mouse in out during transition
Henry Cabello
@hacu9
Dec 14 2016 08:16
@sorinr I am xD
Sorin Ruse
@sorinr
Dec 14 2016 08:20
@hacu9 i'll pm u a snapshot
Henry Cabello
@hacu9
Dec 14 2016 08:22
@sorinr alright
S7eve
@S7eve
Dec 14 2016 08:23
Hi everyone, can I ask to finish the random quote challenge, do we need to use API from mashape?
Sorin Ruse
@sorinr
Dec 14 2016 08:23
@hacu9 just pm-ed u
Maryna Sokolova
@ultramarichka
Dec 14 2016 08:26
@hiltypro I don't know this challenge yet but your game looks really pretty
Henry Cabello
@hacu9
Dec 14 2016 08:27
@S7eve You can use any API you like,or a json you set yourself
anything you like
Ayobami
@purpose50
Dec 14 2016 08:30
@hacu9 awesome! :clap: but maybe you should try and add a footer section
S7eve
@S7eve
Dec 14 2016 08:40
@hacu9 if im trying to make one, how am i suppose to start?
Yerrapotu Manojkiran
@nani554
Dec 14 2016 09:00
guys i need help in finding out the heading font-family
file:///C:/Users/manoj/Desktop/FCC-Productivity-Timer/resources/images/timer.png
plz let me know
Yerrapotu Manojkiran
@nani554
Dec 14 2016 09:23

'''html
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Productive-Timer</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Freckle+Face" rel="stylesheet">
</head>

<body>
<img src="resources/images/timer.png">
<p class="font">productivity timer</p>
</body>
</html>
'''

CamperBot
@camperbot
Dec 14 2016 09:23
:bulb: to format code use backticks! ``` more info
Yerrapotu Manojkiran
@nani554
Dec 14 2016 09:25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Productive-Timer</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Freckle+Face" rel="stylesheet">
</head>
<body>
    <img src="resources/images/timer.png">
    <p class="font">productivity timer</p>
</body>
</html>
Sorin Ruse
@sorinr
Dec 14 2016 09:30
@nani554 this one will never work "resources/images/timer.png" unless u have a codepen pro account and upload the imgs there
@nani554 u can just upload timer.png some other place and serve it from there
Aryan Agal
@grubdragon
Dec 14 2016 09:37
Need some help with my wiki viewerhttps://codepen.io/grubdragon/pen/KNBWXo
could somebody check my getJSON method and tell me canges
*changes
I'm pretty tired of doing this
sampah
@manusialemah
Dec 14 2016 09:44
Hey, is it okay if don't use a container? What's the significance of container anyway?
Yerrapotu Manojkiran
@nani554
Dec 14 2016 09:46
@manusialemah if u open facebook,youtube,or most of famous websites ,u will notice one thing the content is in center ,which means we need to use a container to center out content
sampah
@manusialemah
Dec 14 2016 09:48
But my content stays at the center despite not having container
Sorin Ruse
@sorinr
Dec 14 2016 09:49
@manusialemah you can use whatever css u want for your projects. there is no restriction on that
sampah
@manusialemah
Dec 14 2016 09:49
Ok
sampah
@manusialemah
Dec 14 2016 10:02
Can I have some feedbacks? https://codepen.io/Hertzsprung/pen/gLdYKz
kat-mag
@kat-mag
Dec 14 2016 10:13
@manusialemah looks good! But you have something that spans too wide & vertical scrollbar is not something you want to see ;p
Don't close <br> tags, it's a void element
aaand it could use some margin on bottom. Your page ends kinda abruptly
jayisray
@jayisray
Dec 14 2016 10:26
So I finally coded my tribute page with media queries and made it responsive, but I know that my coding strategy is terrible. I feel like there is a lot of “ductape” holding the site together. Can anyone look at the site & code and give me some better strategies at approaching these types of sites? Thank you! http://attractive-porter.surge.sh
sampah
@manusialemah
Dec 14 2016 10:27
@kat-mag thanks, what's the limit of being to wide? How do I hide scrollbar?
CamperBot
@camperbot
Dec 14 2016 10:27
manusialemah sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @kat-mag |http://www.freecodecamp.com/kat-mag
R31Z
@R31Z
Dec 14 2016 10:29
very nice
kirbyedy
@kirbyedy
Dec 14 2016 10:34
@jayisray looks nice
jayisray
@jayisray
Dec 14 2016 10:34
@kirbyedy thanks :)
CamperBot
@camperbot
Dec 14 2016 10:34
jayisray sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1656 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Dec 14 2016 10:34
are you sure that text is in the middle of page ?
jayisray
@jayisray
Dec 14 2016 10:34
which one?
kirbyedy
@kirbyedy
Dec 14 2016 10:34
somehow I have the feeling its slightly left
seasons
those
jayisray
@jayisray
Dec 14 2016 10:34
I want the Seasons to be slightly left of each block of text
to give an indentation feel
pansihaoting
@pansihaoting
Dec 14 2016 10:40
Hey all, I'm hoping it's okay to post my tribute page here for feedback!
http://codepen.io/pansihaoting/full/BQqVJm/
kirbyedy
@kirbyedy
Dec 14 2016 10:41
@jayisray ok then
Pieter Stokkink
@forkerino
Dec 14 2016 10:45
Hey all, I've just tweaked my Tic Tac Toe project a little bit. Only thing is that the table displaying the board has some 'borders' around the corners... Any idea how they get there and how I can get rid of them?
https://codepen.io/forkerino/full/VmBMap/
Clyde Lobo
@oppiniated
Dec 14 2016 10:52
@forkerino border: 3px solid white; try removing this from td
Pieter Stokkink
@forkerino
Dec 14 2016 10:58
@oppiniated But then the whitespace disappears into a single pixel, which I don't find too pleasing to the eye. I want the whitespace to be there, just around the corners there are some grey edges.
Sorin Ruse
@sorinr
Dec 14 2016 11:05
@forkerino you can try and change the border radius only to corners of all game table if this is what you want. i like it the way it is now
Waqas Abbasi
@Waqas909
Dec 14 2016 11:10
Hey guys, a bit stuck here. How would I go on to make a search bar, which searches through some data I have? @TwitchTv Project
Pieter Stokkink
@forkerino
Dec 14 2016 11:25
@sorinr @oppiniated It seems to be a problem with chrome. In Firefox there is no problem. Here's a picture of what I mean in case it is only on my computer:
problem.png
Sorin Ruse
@sorinr
Dec 14 2016 11:28
@forkerino there is no problem. as @oppiniated alreay told u, you have in your style for tds tags a border radius
Pieter Stokkink
@forkerino
Dec 14 2016 11:30
@sorinr Yes, I want a border radius. I just see some small grey lines in the whitespace between the cells around their corners. Perhaps if you click on the picture you see them too.
sergiomgaspar
@sergiomgaspar
Dec 14 2016 11:30
guys. can you give me some feedback on the TwitchTV project pls.. (not a very good designed i admit) https://codepen.io/sergiomgaspar/full/MbPgmZ/
Sorin Ruse
@sorinr
Dec 14 2016 11:30
@forkerino you probably need: table { border-collapse: collapse; }
sergiomgaspar
@sergiomgaspar
Dec 14 2016 11:31
btw i split test Vs Twitch because due to proxy reasons (crappy network) i sometimes cant reach the API
Sorin Ruse
@sorinr
Dec 14 2016 11:32
@forkerino to get rid of that lines
Pieter Stokkink
@forkerino
Dec 14 2016 11:33
@sorinr border-collapse doesn't work well with border-radius. See MDN for that.
Sorin Ruse
@sorinr
Dec 14 2016 11:34
@forkerino it works if applied to table. its standard
Pieter Stokkink
@forkerino
Dec 14 2016 11:36

The border-radius property does not apply to table elements when border-collapse is collapse.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
And when I try it, the rounded corners don't look so rounded anymore....

problem2.png
Sorin Ruse
@sorinr
Dec 14 2016 11:39
@forkerino then just change your table design to a div layout. i don't see much choices in there
Waqas Abbasi
@Waqas909
Dec 14 2016 11:39
@sergiomgaspar "Open" channel name opens api link
Pieter Stokkink
@forkerino
Dec 14 2016 11:40
@sorinr you might be right, just hoped there might be some way to avoid having to do that.
@sorinr thanks
CamperBot
@camperbot
Dec 14 2016 11:40
forkerino sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 945 | @sorinr |http://www.freecodecamp.com/sorinr
sergiomgaspar
@sergiomgaspar
Dec 14 2016 11:40
@Waqas909 thx.. will fix it
CamperBot
@camperbot
Dec 14 2016 11:40
sergiomgaspar sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @waqas909 |http://www.freecodecamp.com/waqas909
Blaise
@Blaisebev
Dec 14 2016 11:49
Hi guys! I am working on hte portfolio page and would like the bottom section to have an even coloring. Should I put the divs within a container, any tips? http://codepen.io/Blaisebev/pen/ENdjox
Sorry, it's the second one!
Pieter Stokkink
@forkerino
Dec 14 2016 11:55
@Blaisebev I'm not entirely sure what you are asking, but one thing is for sure: you need to close your tags.
Blaise
@Blaisebev
Dec 14 2016 12:00
@forkerino When I view the page in full view and I look below the "Get in Touch!" section, I would like the right column's color to extend to match the left column.
to get search query results with channels about starcraft?
Pieter Stokkink
@forkerino
Dec 14 2016 12:14

@Blaisebev

you need to close your tags.

If you make a habit out of this, it will be easier to help you. Right now I'm looking at your code and it can break at many places, because the bootstrap-styled divs do not end most of the time. So every <div> needs to be followed somewhere by a </div>, and in between only place the stuff you want in that section of your page.

I don't have an answer for you yet....
Blaise
@Blaisebev
Dec 14 2016 12:22
@Pieter Thank you for the understanding. I am going through now looking where to close the tags.
CamperBot
@camperbot
Dec 14 2016 12:22
:warning: could not find receiver for pieter
blaisebev sends brownie points to @pieter :sparkles: :thumbsup: :sparkles:
Pieter Stokkink
@forkerino
Dec 14 2016 12:33
@Blaisebev Okey dokey, a simple example is:
<div class="container">
  <div class="row">
    <div class="col-md-6">
      //content
    </div>
    <div class="col-md-6">
      //content
    </div>
  </div>
</div>
Blaise
@Blaisebev
Dec 14 2016 12:37
thank you @forkerino Will clear my code and put this in. I appreciate your time and help.
CamperBot
@camperbot
Dec 14 2016 12:37
:cookie: 356 | @forkerino |http://www.freecodecamp.com/forkerino
blaisebev sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
Pieter Stokkink
@forkerino
Dec 14 2016 12:39
@Blaisebev Ok, if you keep running into the same problem, don't hesitate to ask again.
Blaise
@Blaisebev
Dec 14 2016 12:42
Will do. Thanks again @forkerino !
CamperBot
@camperbot
Dec 14 2016 12:42
blaisebev sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave forkerino points
Chike Chinukwue
@displacednaija
Dec 14 2016 12:46
Hi I am trying
a) To center the Castro image
b) To enter a margin at the top of the jumbotron.
Here is the link to Codepen: https://codepen.io/displacednaija/pen/qqYWGJ
kirbyedy
@kirbyedy
Dec 14 2016 12:50
@displacednaija img-align does not exist, correct it to text-align
@displacednaija did you try with margin-top ?
Chike Chinukwue
@displacednaija
Dec 14 2016 12:59
Hi kirbyedy thanks for the text-align tip. What is the accompanying property for margin?
Is it position?
Nice one. I got it.
Yeah so margin-top is the property and then you include the value which in my case is in px
kirbyedy
@kirbyedy
Dec 14 2016 13:03
pretty much yes
Chike Chinukwue
@displacednaija
Dec 14 2016 13:04
My question is why does the text-align property affect the image? I had seen this solution on Stackoverflow but got blindsided by the 'text' bit.
kirbyedy
@kirbyedy
Dec 14 2016 13:05
its is coming from bootstrap framework I think
which you embedded
so certain word mean something when styling your page
img-responsive is another example
Marianissimus
@Marianissimus
Dec 14 2016 13:17
just a test, please ignore
Silvietta
@Ayvlis
Dec 14 2016 13:18
text-align applies at all the child elements of the one where you declare it (https://css-tricks.com/almanac/properties/t/text-align/)
@displacednaija
Chris Rutherford
@cjrutherford
Dec 14 2016 13:23
I'm back!!!
kirbyedy
@kirbyedy
Dec 14 2016 13:23
well welcome back I guess :)
Gladias
@Gladias
Dec 14 2016 13:25
Hi guys, I have a problem with connecting to api. Its look like that: The page at 'https://codepen.io/Gladias/pen/YpeRmV?editors=1011' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery310017128881479441294_1481719368265&_=1481719368744'. This request has been blocked; the content must be served over HTTPS. How can I make this work. I tried few api's but still nothing changes.
kirbyedy
@kirbyedy
Dec 14 2016 13:27
@Gladias yep, can`t mix them
make sure your codepen starts with http:// instead of https://
Gladias
@Gladias
Dec 14 2016 13:33
@kirbyedy Ok thanks
CamperBot
@camperbot
Dec 14 2016 13:33
:star2: 1658 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
gladias sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
zKruki
@zKruki
Dec 14 2016 14:18
function findLongestWord(str) {

var myArray = str.split(" ");
 var wordLength = [];
  wordLength.push(myArray[0].length, myArray[1].length, myArray[2].length, myArray[3].length, myArray[4].length, myArray[5].length, myArray[6].length, myArray[7].length, myArray[8].length);

var myArray2 = wordLength.sort();

  myArray2.reverse();
   return myArray2;



  }
// myArray[0].length; return wordLength; copyPasta

findLongestWord("Google do a barrel roll");
need help. this is what i got
kirbyedy
@kirbyedy
Dec 14 2016 14:18
@zKruki try the HelpJavascript room
zKruki
@zKruki
Dec 14 2016 14:19
ok
Sorin Ruse
@sorinr
Dec 14 2016 14:31
@zKruki it should be return myArray2[0]
alpox
@alpox
Dec 14 2016 14:33
@zKruki What @sorinr says and be aware that .sort() sorts in alphanumerical order rather than numerical.
@zKruki Another thing is, that you cannot be sure how many words there will be, so direct indexing as you did for push is not a good choice
Pieter Stokkink
@forkerino
Dec 14 2016 14:39
One could use Math.max() to find the largest number, no need to write a sort function. @zKruki
Yerrapotu Manojkiran
@nani554
Dec 14 2016 14:43
Guys iam not able to use google font-family and bootstrap together
help me
CamperBot
@camperbot
Dec 14 2016 14:43

:point_right: readme [wiki]

Depecrated Wiki!

This repo serves as an archive for the wiki and a place to report issues for our current wiki located in our forum!

Our open source community's Wiki focuses on answering your questions about learning to code and getting a coding job. We also cover in detail our:

  • Curriculum
  • Other Programming Languages
  • Local Group Communities
  • Nonprofit Projects and much more

:pencil: read more about readme on the FCC Wiki

Yerrapotu Manojkiran
@nani554
Dec 14 2016 14:44
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1">
        <title>Productivity Timer</title>
        <link type="text/css" rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Crafty+Girls" rel="stylesheet">
        <script src="jquery-3.1.1.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <header class="heading">
                <h1>Productivity Timer</h1>
            </header>
        </div>

</body>
</html>

body{
    background-color:#0F1130;
    }

h1{
        font-family:"Crafty Girls";
        color:white;
    }
Sorin Ruse
@sorinr
Dec 14 2016 14:45
@forkerino yes but also needed to use apply or the spread operator ...array for Math.max().
Pieter Stokkink
@forkerino
Dec 14 2016 14:48
^yes
Jorge Castaño Delgado
@jhcastanod
Dec 14 2016 14:52
Hey guys, I've seen in some webpages people want to show their skills by loading a percentage. When you load the page for the first time those numbers are in zero and then reach the set value. How do I got that effect? help, please!
Pieter Stokkink
@forkerino
Dec 14 2016 14:54
@jhcastanod If you use bootstrap, you can use a progress bar. https://getbootstrap.com/components/#progress
But I have no idea how they work, never used them myself.
Sorin Ruse
@sorinr
Dec 14 2016 14:56
@jhcastanod i would not use %gs to show how much i know. mathematically % is a ratio of two known values
Jorge Castaño Delgado
@jhcastanod
Dec 14 2016 14:58
thanks @forkerino I'm gonna look into it more, thanks for that clue.
@sorinr good point. but do you know how to get that effect? how and where should I set that counter?
CamperBot
@camperbot
Dec 14 2016 14:58
jhcastanod sends brownie points to @forkerino and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @forkerino |http://www.freecodecamp.com/forkerino
:cookie: 946 | @sorinr |http://www.freecodecamp.com/sorinr
alpox
@alpox
Dec 14 2016 14:58
@jhcastanod Thats jus bootstrap doing its job
@jhcastanod And bootstrap does that by initializing the bar with 0, set it to another value on load.
The animation works because of a css transition
Sorin Ruse
@sorinr
Dec 14 2016 15:00
@jhcastanod i would just point out my general strengths in languages i know like: html, css, javascript, etc
Jorge Castaño Delgado
@jhcastanod
Dec 14 2016 15:02
@alpox I've got the idea now. but if I prefer just a number instead a bar? I'm so newby in web development... it's an amazing filed, so I'm just learning
Clyde Lobo
@oppiniated
Dec 14 2016 15:08
@jhcastanod just build a demo. you need to scroll to see the progress bar http://jsbin.com/xalega/edit?output
Jorge Castaño Delgado
@jhcastanod
Dec 14 2016 15:13
@oppiniated thanks for it. I'm following all of your advice guys. any additional resource is very welcome. thanks to each of you
CamperBot
@camperbot
Dec 14 2016 15:13
jhcastanod sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @oppiniated |http://www.freecodecamp.com/oppiniated
zKruki
@zKruki
Dec 14 2016 15:19
@sorinr @alpox @forkerino thanks yall, ill look math.max up now
CamperBot
@camperbot
Dec 14 2016 15:19
zkruki sends brownie points to @sorinr and @alpox and @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @forkerino |http://www.freecodecamp.com/forkerino
:cookie: 947 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 691 | @alpox |http://www.freecodecamp.com/alpox
Peter Steele
@PeterHSteele
Dec 14 2016 15:19
Hey guys, can anyone help me figure out why this weather app isn't working and how to load open weather api over http? It used to work but now console is showing a mixed content/content must be loaded over https error. When it worked before I loaded codepen over https and used crossorigin.me before my api endpoint but that doesn't seem to work right now: https://codepen.io/psteele1128/pen/VmLbxX
zKruki
@zKruki
Dec 14 2016 15:21
@forkerino If only I could remember the index number :wink:
zKruki
@zKruki
Dec 14 2016 15:26
the flaw is my design isnt dynamic enough. the shorter strings are leaving to many undefined properties.
MarieSole
@MarieSoleStG
Dec 14 2016 15:58
Well, I'm trying to figure out what to do and how to do my tribute page ... as I was wondering how to center everything on my own page, I searched and find the one they show on FCC... but... can anyone tell me where the grey background is from!!? what code make this, I don't get this one...
https://codepen.io/freecodecampcodersherry/pen/BKJrVJ?editors=1100#0
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:12

problem.png

@forkerino This seems to fix it:
Change background: grey to background-color: grey and add background-clip: padding-box;

td {
........
  background-clip: padding-box;
  background-color: grey;
........
}

I'm not sure why changing from shorthand background to background-color is needed here.

But... it works for me on Chrome/Firefox.. Inspired by this answer: http://stackoverflow.com/questions/13514593/table-cell-background-color-and-round-corners
Dylan Murphy
@dmurphy5
Dec 14 2016 16:14
Can someone see if this works in chrome? It worked fine yesterday, but now it doesn't in chrome and in IE I get a popup saying "Only secured content is displayed" https://codepen.io/anon/pen/PbxYmp
ionut
@ionutinz
Dec 14 2016 16:16
Hey Guys !
MarieSole
@MarieSoleStG
Dec 14 2016 16:16
Thank you Tyler!! i'll try it
Pieter Stokkink
@forkerino
Dec 14 2016 16:20
@TylerMoeller Thanks! I tried searching stackoverflow before posting here, but didn't find this particular topic. Never heard of background-clip either, so another good opportunity to learn more.
CamperBot
@camperbot
Dec 14 2016 16:20
forkerino sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1150 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:22
@MarieSoleStG That was for someone else having difficulty with grey borders showing up around their tic tac toe squares. For the grey background, you want to read about the jumbotron class in bootstrap: https://getbootstrap.com/components/#jumbotron
@forkerino No problem, glad it was an easy fix
@MarieSoleStG Also, to learn about centering things on your page, read the bootstrap docs:
Text: https://getbootstrap.com/css/#type-alignment
Images: https://getbootstrap.com/css/#images-responsive
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:27
@PeterHSteele This is a very common issue - if you are going to use navigator.geolocation, you require a weather API that supports HTTPS. OpenWeatherMap does not support HTTPS. See this issue for background with some options: FreeCodeCamp/FreeCodeCamp#7853
Lherm Jean-René
@jrlherm
Dec 14 2016 16:39
Hello Everyone
Could you help me? I have a problem with the Twitch API project. It seems to be a problem of scope.
I can't access the variable called "following". I declared it earlier so i don't understand why I can't access it into my ajax call.. It must be a stupid mistake but i can't see where it is and i'm on it since mon than one hour and it brings me crazy !!
Here is the link of my pen : http://codepen.io/jrlherm/pen/PbyQaJ?editors=1011
and it works inside of the for loop, i can access it using console.log, but not after the loop
miriam-z
@miriam-z
Dec 14 2016 16:46
what is the best way to create dividers in the menu in a nabber?
Tom
@moT01
Dec 14 2016 16:46
@jrlherm i dont see a variable called following, or a for loop
miriam-z
@miriam-z
Dec 14 2016 16:46
the dividers I need to create are full length 100px in size and I am only managing to create ones which are very small in size
alpox
@alpox
Dec 14 2016 16:47
@jrlherm There doesn't seem to be any variable called following. No reference to it either
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:49
@miriam-z Can you show an example of what you are trying to achieve? Not sure I understand what you want the dividers on the navbar to look like
Lherm Jean-René
@jrlherm
Dec 14 2016 16:49
Apparently it wasn't saved
sorry
miriam-z
@miriam-z
Dec 14 2016 16:49
@tyler yes sure
what is the best way for me to show images on gitter?
I will try a code pen
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:50
On windows, Alt+PrtScrn and then Ctrl+V. Or yes, you can share a codepen
miriam-z
@miriam-z
Dec 14 2016 16:50
on a mac?
Chris Rutherford
@cjrutherford
Dec 14 2016 16:50
cmd-Shift-F4
them cmd-V to paste
miriam-z
@miriam-z
Dec 14 2016 16:51
@cjrutherford thanks
CamperBot
@camperbot
Dec 14 2016 16:51
miriam-z sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
alpox
@alpox
Dec 14 2016 16:51
@jrlherm Your variable is accessible inside of the ajax callback, but the for loop below the ajax wont work, because it gets executed before the callback comes

@jrlherm But there is another error:
You loop for one too much in your for loop:

for (i=0; i<=followingData.follows.length; i++)

Should be:

for (i=0; i< followingData.follows.length; i++)
Chris Rutherford
@cjrutherford
Dec 14 2016 16:53
@miriam-z Not a Problem! :wink:
alpox
@alpox
Dec 14 2016 16:54
So the last followingData.follows[i] was undefined for you before. @jrlherm
miriam-z
@miriam-z
Dec 14 2016 16:54
Screen Shot 2016-12-14 at 16.53.43.png
@TylerMoeller this is what I am trying to achieve
Lherm Jean-René
@jrlherm
Dec 14 2016 16:54
Ahhh yes
Thank you very much @alpox
CamperBot
@camperbot
Dec 14 2016 16:55
:cookie: 692 | @alpox |http://www.freecodecamp.com/alpox
jrlherm sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
miriam-z
@miriam-z
Dec 14 2016 16:55
I have these dividers as png files is the best way to place images or can this be achieved with css?
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:55
@miriam-z Ahh, just use the border-left property in your css, for example:
.whatever-your-navbar-link-class-name-is {
  border-left: 1px solid black;
}
miriam-z
@miriam-z
Dec 14 2016 16:57
@TylerMoeller thanks! this looks exactly what i am looking for
CamperBot
@camperbot
Dec 14 2016 16:57
miriam-z sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1151 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
miriam-z
@miriam-z
Dec 14 2016 16:57
I have another question
Tyler Moeller
@TylerMoeller
Dec 14 2016 16:57
Glad I could help
miriam-z
@miriam-z
Dec 14 2016 16:57
I am using images within my navbar which are icons
I cannot fint this as glypicons or font awesome as an exact match
AnshulDawar
@anshuldawar
Dec 14 2016 16:59
hey
miriam-z
@miriam-z
Dec 14 2016 16:59
so using the images that were provided I need to keep these responsive and currently using the positioning as absolute to place them at the right place in the navbar
is there a better way to do this
Chris Rutherford
@cjrutherford
Dec 14 2016 16:59
hey all just trying to figure out why my styling for the borders isn't working properly.
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:00
@miriam-z Relative position would likely help them be more responsive if you can get that working
That way they stay positioned relative to the parent container as the screen size changes
playingwithinfinity
@playingwithinfinity
Dec 14 2016 17:00
Hey guys what do you think of my Random Quote Machine? Is it good enough? Should I submit it? http://codepen.io/jimpix/pen/WoErgX
miriam-z
@miriam-z
Dec 14 2016 17:01
@TylerMoeller I have positioned the container relative and the pngs absolute. when I position them relative they are not positioning correctly
@TylerMoeller thanks for your suggestion I will try this again :+1:
CamperBot
@camperbot
Dec 14 2016 17:02
miriam-z sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: miriam-z already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:02
@miriam-z No problem. I would have to see your code to better understand how to fix the icon/image issues
It is possible with absolute positioning as well - just need to keep responsiveness in mind and may have to use media queries
@cjrutherford You also need to specify the width and style of your borders:
  border-width: 1px
  border-style: solid
Raven
@KindaIntellectual
Dec 14 2016 17:10
Hi everyone, I'm working on the weather app challenge, and I'm a bit stuck. I'm using .delegate to change farenheit to celsius on click since I'm appending the temp on load (both degrees are stashed in variables so its just a simple html change via click) but the change stops after 3 clicks f -> c -> f. anyway i can make it so no matter how many time you click it the temp changes or is that something i shouldn't worry about? here is my pen - http://codepen.io/kindaintellectual/full/ZBzPZZ/
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:12
@playingwithinfinity Nice work. A few suggestions:
  • Simplify your click function to one line. There is no need to create an anonymous function just so it can call a named function: $("#clickMe").on("click", getQuote);
  • fluid is not a class, I think you mean container-fluid- don't forget that hyphen
  • Avoid using inline styles style="color:red"
  • The <i> tag for making text italic is deprecated, remove it and use CSS to make the button text white and italic: http://softwareengineering.stackexchange.com/questions/255366/why-are-the-b-and-i-tags-deprecated
  • For aesthetics, style the new quote and twitter buttons so they are the same size and shape. You might also want to try a different color palette: http://palettable.io
Chris Rutherford
@cjrutherford
Dec 14 2016 17:16
@TylerMoeller thanks for the tip, can you fork the pen? I can't seem to get the same results and want to see yours. I'm trying to make the borders work as the game board....
CamperBot
@camperbot
Dec 14 2016 17:16
cjrutherford sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1152 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:16
@cjrutherford Replace your CSS like so:
.field
  border: 1px solid black
  height: 150px
  width: 150px
  border-radius: 15%
  display: block
#1
  border-width: 5px
  border-style:  solid none none solid
blob
Chris Rutherford
@cjrutherford
Dec 14 2016 17:18
@TylerMoeller yep, that's what I get, but it's ignoring the border-style directive from #1
I want to have the outer edges empty
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:19
Let me dive in and see what #1 refers to
Tyler Moeller
@TylerMoeller
Dec 14 2016 17:25
@cjrutherford I can't figure that one out - chrome won't even let me add a style through the inspector. May be a problem with Jade? Jade hasn't been called that for over a year - it's name is pug now, so maybe it's an outdated version in codepen.
My only guess...
Chris Rutherford
@cjrutherford
Dec 14 2016 17:25
possibly....
been using pug for a while
Peter Steele
@PeterHSteele
Dec 14 2016 17:27
@TylerMoeller thanks so much, I will check that out. It's just weird because I definitely got it working on codepen with crossorigin.me before. So confusing!
CamperBot
@camperbot
Dec 14 2016 17:27
peterhsteele sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1153 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
James Shore
@Jimbobmahooley
Dec 14 2016 17:28
Hi, I'm trying to link to a specific part of a page but my <a> elements aren't working and I can't link to them, I can link to all other elements so don't know why this isn't working any ideas?
Vicfs
@Vicfs
Dec 14 2016 17:30

Hey guys, I'm working on my portfolio page and I'm having trouble with a few things:

Making the text inside my subsection wraps responsive(I want it to resize the same way the border itself does).
I can't get my social buttons to display vertically.
I couldn't think of a better solution to display my portfolio images the way they are being displayed right now.
Also, any tips regarding optimization of my code(or anything else) are more than welcome as I've been struggling trying to do so.
Thanks in advance.
https://codepen.io/Foxey/pen/ENLvaB

Francois van Leersum
@Blockshot12
Dec 14 2016 17:37
@Vicfs, CSS font-size doesn’t work that way. You’ll have to use media queries in CSS to make it responsive and make the border adjust to the size of your text.
Something like:
@media (min-width:768px) and (max-width: 1023px) {
  h2 { font-size: 1.4em; }
}
James Shore
@Jimbobmahooley
Dec 14 2016 17:41
Hi, I'm trying to link to a specific part of a page but it is interpreting multiple <br> tags as just one so I can't link to a specific one, any ideas so i can link to a specific part of my web page?
Vicfs
@Vicfs
Dec 14 2016 17:44
@Blockshot12 ok thanks, anything else?
CamperBot
@camperbot
Dec 14 2016 17:44
vicfs sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Francois van Leersum
@Blockshot12
Dec 14 2016 17:46
@Vicfs There are also JS scripts for responsive font-size, but thats a bit overboard for this exercise.
James Shore
@Jimbobmahooley
Dec 14 2016 17:48
Hi @Blockshot12 don't know whether you've seen my question but do you know how to help me?
Francois van Leersum
@Blockshot12
Dec 14 2016 17:48
@Vicfs Your social media icons are now inside a span, these tags are by default a inline element. Place them inside a list and get rid of the list style type.
.social-media__list {
  list-style-type: none;
  margin: 0;
}
Vicfs
@Vicfs
Dec 14 2016 17:52
In that case I'd probably have to change my menu as well right? I'm using it as a list as well and coded other specific CSS properties into that
Francois van Leersum
@Blockshot12
Dec 14 2016 17:56
<ul class=“social-media__list”>
  <li class=“social-media__item"><a href=“#”><i class="fa fa-google-plus fa-2x social-buttons"></i></a></li>
</ul>
@Vicfs Use classes to style and you can use as many lists as you like.
Vicfs
@Vicfs
Dec 14 2016 17:59
Yea I figured that... it gets a little confusing when I have to nest many elements though
Tyler Moeller
@TylerMoeller
Dec 14 2016 18:05
@Jimbobmahooley See this issue for background - it seems you are hitting a known issue and trying to use <br> tags to work around it, but that isn't a good approach: twbs/bootstrap#1768
James Shore
@Jimbobmahooley
Dec 14 2016 18:17
thanks @TylerMoeller i'll try and figure it out from the page, another question how do I make the links move so they scroll instead of just jumping straight to the link?
CamperBot
@camperbot
Dec 14 2016 18:17
jimbobmahooley sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1154 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 14 2016 18:18
@Jimbobmahooley Search for "smooth scroll" and you will find a few different techniques. It will require JavaScript.
James Shore
@Jimbobmahooley
Dec 14 2016 18:26
Thanks again @TylerMoeller looks a bit complex for me at the moment now though, also, I am now having a different problem, the JS I added means that It won't go to the bottom of the page for that link do you know a way around this?
CamperBot
@camperbot
Dec 14 2016 18:26
jimbobmahooley sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jimbobmahooley already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 14 2016 18:30
@Jimbobmahooley It is likely an issue with your HTML. Did you remove all of your <br> tags? Those are not meant for creating space between lines. Also, if you're using bootstrap, make sure you are using Container -> Row -> Column structure for your page.
James Shore
@Jimbobmahooley
Dec 14 2016 18:33
@TylerMoeller I didn't realise and i have a lot of <br> tags but I haven't used any bootstrap in the page i guess I'm going to have to put some more margins on elements cheers for all the help.
ag8023
@ag8023
Dec 14 2016 18:45
Hello
I am starting to build my portfolio page for the project
first portfolio task
now i want to set a background image for the entire body and i found an image online
since i am doing this in codepen, i gave the background-image a URL of the image but it doesnt seem to work
please help!
Quantum9
@Quantum9
Dec 14 2016 18:47
Hi Guys,
Sorin Ruse
@sorinr
Dec 14 2016 18:48
@ag8023 just sharing the pen url will help us to help u:)
Quantum9
@Quantum9
Dec 14 2016 18:48
I'm working on my tribute page and i need some help adding my caption text underneath a picture
Also, i used <blockquote> for my Quote section and the darn margin quote thingy just won't go away!
sekoku
@sekoku
Dec 14 2016 18:52
Question: For the random quote machine challenge: What exactly do they want you to tweet out? The quote itself? A link to the quote? A link to the random quote machine?
My quotes are over 140 characters, so I'm not sure that's what they want?
Laura Barluzzi
@laura-barluzzi
Dec 14 2016 18:54
Hi guys, I ahve this work in progress pen and I cannot figure out why the navbar-collapsed menu does not appear once I click on the button. !Help! http://s.codepen.io/Laura-Barluzzi/debug/ENdZoW
Tyler Moeller
@TylerMoeller
Dec 14 2016 19:23
@Quantum9 If you right-click an element on your page and select "Inspect", like the blockquote, you can study the HTML and CSS in a developer window to help you isolate the problem and test out fixes. I'm guessing you need to do add something like this to your CSS:
blockquote {
  border: none;
}
@sekoku Tweet the quote, a link to the quote, the author, whatever you think is useful for people on twitter :) it's your app, have fun with it. If the quote is longer than 140 characters, you can truncate it or check the length of the tweet and call your API again for another quote.
Tyler Moeller
@TylerMoeller
Dec 14 2016 19:30
@laura-barluzzi The mobile collapse menu requires Bootstrap's JavaScript: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
It has to be added after jQuery in your code.
Laura Barluzzi
@laura-barluzzi
Dec 14 2016 19:57
@TylerMoeller yeah thank you! such a silly one, I knew that I needed it, but I didn't find the 3.3.7 version :P still learning how to navigate in this! Thank you!
CamperBot
@camperbot
Dec 14 2016 19:57
laura-barluzzi sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1155 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Gabi
@JJcreated
Dec 14 2016 19:58
hey guys, so im building the local weather machine, can anyone tell me how i'd go about turning the coordinates into an address http://codepen.io/jjcreated/pen/vypPwW?editors=0010
id like to display it in the current location well
Tyler Moeller
@TylerMoeller
Dec 14 2016 20:00
@laura-barluzzi No problem - I noticed you were adding everything to the "stuff for <head>" section - it's best to add the JS libraries you need to the JavaScript settings section in codepen, they have jQuery and Bootstrap.js in a quick-add menu there.
blob
Gabi
@JJcreated
Dec 14 2016 20:00
i tried using some code i found but its not working
Tom
@moT01
Dec 14 2016 20:00
@JJcreated read the api docs of whatever site youre using
ag8023
@ag8023
Dec 14 2016 20:01
@Sorin Ruse yes will share the link
Tom
@moT01
Dec 14 2016 20:01
@JJcreated they should show you how to build a url with the lat/long
Gabi
@JJcreated
Dec 14 2016 20:01
@moT01 i have but honestly, i dont understand how to implement any of it
the lessons didnt really teach anything, just sort of told you how to do it
ill try thanks @moT01
CamperBot
@camperbot
Dec 14 2016 20:02
jjcreated sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @mot01 |http://www.freecodecamp.com/mot01
Tyler Moeller
@TylerMoeller
Dec 14 2016 20:02
@JJcreated You can use Google's reverse geocode API to get the address. Add the latititude,longitude after the = in this URL: https://maps.googleapis.com/maps/api/geocode/json?latlng=
Here's an example: http://codepen.io/TylerMoeller/pen/ZBBEGq?editors=0010
Tom
@moT01
Dec 14 2016 20:05
@TylerMoeller that's for a street address right? i think he meant url for getting the data
Tyler Moeller
@TylerMoeller
Dec 14 2016 20:05
@moT01 He wants to display an URL in the current location well?
Maybe the URL, I don't know :)
Tom
@moT01
Dec 14 2016 20:09
@JJcreated http://openweathermap.org/current theres some examples there, i think its what youre looking for, not sure
jacobus-brogly
@jacobus-brogly
Dec 14 2016 20:32
woot sneek peek
donor2.png
blood2.png
my map app for blood donors
MJ
@MJammin
Dec 14 2016 20:44

Hi, can anyone explain what I'm doing wrong in the Size your Images challenge where it wants you to resize the cat image to 100 pixels.

the example given is

<style>
.larger-image {
width: 500px;
}
</style>

and it wants us to use .smaller-image instead so the code i put in is:

<style>
.smaller-image {
width: 100px;
}
</style>

however this doesnt do anything (neither does the .larger-image code)

o2ri
@o2ri
Dec 14 2016 20:53

question about global scope ?
why are the variable didnt change?

'''
function str_buider(){
var latitude="55";
var longitude="44"
navigator.geolocation.getCurrentPosition(success);
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude,longitude);
'''

CamperBot
@camperbot
Dec 14 2016 20:53
:bulb: to format code use backticks! ``` more info
o2ri
@o2ri
Dec 14 2016 20:53
'''js
function str_buider(){
var latitude="55";
var longitude="44"
navigator.geolocation.getCurrentPosition(success);
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude,longitude);
'''
CamperBot
@camperbot
Dec 14 2016 20:53
:bulb: to format code use backticks! ``` more info
o2ri
@o2ri
Dec 14 2016 20:55

'''js
function str_buider(){
var latitude="55";
var longitude="44"
navigator.geolocation.getCurrentPosition(success);
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude,longitude);
;}

  console.log(latitude,longitude)

'''

CamperBot
@camperbot
Dec 14 2016 20:55
:bulb: to format code use backticks! ``` more info
o2ri
@o2ri
Dec 14 2016 20:57

'''js
function str_buider(){
var latitude="55";
var longitude="44"
navigator.geolocation.getCurrentPosition(success);
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude,longitude);
;}

  console.log(latitude,longitude)

}
'''

CamperBot
@camperbot
Dec 14 2016 20:57
:bulb: to format code use backticks! ``` more info
Tom
@moT01
Dec 14 2016 20:58
@MJammin im guessing it wants you to put that in the html part, as a class. between the two <style> tags is css, youre trying to style something that doesn't have that class... .smaller-image {} targets anything in the html with the class of smaller-image
probly didn't explain that well but maybe itll get you there
o2ri
@o2ri
Dec 14 2016 20:58
am sorry for the flodding just tring to format it
Tom
@moT01
Dec 14 2016 20:59
@o2ri use the ` not the '
its top left
@jacobus-brogly hey that's pretty cool looking, whats the application behind it? meaning what will it be used for, ..just showing where people are that have donated?
o2ri
@o2ri
Dec 14 2016 21:02
function str_buider(){
  var latitude="55";
  var longitude="44"
  navigator.geolocation.getCurrentPosition(success);
      function success(position) {
         latitude  = position.coords.latitude;
         longitude = position.coords.longitude;
         console.log(latitude,longitude);
        ;}

      console.log(latitude,longitude)
}
Tom
@moT01
Dec 14 2016 21:03
@o2ri theres a ; missing
o2ri
@o2ri
Dec 14 2016 21:03
why do i get differnt values before and after the function if it is global value?
Tom
@moT01
Dec 14 2016 21:03
more than one
cause you change the value in the functino
o2ri
@o2ri
Dec 14 2016 21:05
that what i wanted, the second console.log gives me 55,44
bistuDaniel
@bistuDaniel
Dec 14 2016 21:07
hi guys, can you help me with something?
Tom
@moT01
Dec 14 2016 21:08
@o2ri and in the function you get the actual coordinates? try not setting a value when you declare them
@bistuDaniel whats up
bistuDaniel
@bistuDaniel
Dec 14 2016 21:08
how can I create a frame like the one in the video? https://www.youtube.com/watch?v=qqrnzmqCGDw
I mean the grey one
Tom
@moT01
Dec 14 2016 21:10
the grey background behind the image and text
?
vincentwue
@vincentwue
Dec 14 2016 21:12
what exactly does this.refs.main?
in react, cant find the docs
o2ri
@o2ri
Dec 14 2016 21:12
@moT01 insdie the function ir prmpt the right values , if not setting them i get indefined on the second consloe.log
bistuDaniel
@bistuDaniel
Dec 14 2016 21:12
indeed @moT01
can you help me
?
Tom
@moT01
Dec 14 2016 21:15
@bistuDaniel there's lots of ways you could make that, ...the way i would do it is put all my html in a <div> or container then style it in css to make it grey and the right size and stuff
bistuDaniel
@bistuDaniel
Dec 14 2016 21:15
THANK YOU SIR!!!!! @moT01
CamperBot
@camperbot
Dec 14 2016 21:15
bistudaniel sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 14 2016 21:17
@o2ri got a pen?
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:20
anyone able to help with js in codepen? I'm trying to do the random quote generator and have been stuck trying to get
$(document).ready(function(){}
to work in the <script> section of my html
help?
Tom
@moT01
Dec 14 2016 21:23
easier to put it in the js section of codepen, ...did you add the jquery?
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:42
@moT01 I don't think I know what you mean
here is what I have in the html section
  <script >
    src="https://use.fontawesome.com/f0b133d665.js"  $(document).ready(function(){
    $("#new-quote").on("click", function(){
    $(".quote").html("Look, a new quote");
    $(".author-name").html("Look, a new author");
    });
  })
  </script>
the src was inside the script tag, and now I'm trying to add button functionality.
can I have more than one script tag?
Tom
@moT01
Dec 14 2016 21:44
yes
paste a link to your pen
the document.ready should be in the js tab of codepen
it probly doesn't have to be but i would recommend it
Tom
@moT01
Dec 14 2016 21:45
the src should be in the script <script src="asdfasdf">
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:47
how would I move the code over to the js section?
Tom
@moT01
Dec 14 2016 21:47
that's $document.ready is jquery
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:47
keep it in a <script> tag?
Tom
@moT01
Dec 14 2016 21:47
so you need to add jquery
no ill show you in a second
click the little settings button next to HTML CSS or JS
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:48
just added jquery
Tom
@moT01
Dec 14 2016 21:48
click the Javascript tab, and at the bottom, it says quick add
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:49
Tom
@moT01
Dec 14 2016 21:50
yea you need that
if you weren't on codepen you would put it in a <script> tag but codepen links it for you
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:52
I'm trying to leverage the lessons in the json / api section, but I'm having problems figuring out where to put even the basic "document ready" section
oh, you just put it in the js area
Tom
@moT01
Dec 14 2016 21:52
-my wiki page, if you want to see how it should be organized
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:54
@moT01 you got me working - AWESOME - Thank you
CamperBot
@camperbot
Dec 14 2016 21:54
malcolmanderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @mot01 |http://www.freecodecamp.com/mot01
All I was trying to do was to get my quote and author to update on click (been at this for 4 hours ... with breaks)
Tom
@moT01
Dec 14 2016 21:55
yea, that will happen
your <header> should probly just be <head>
and i don't think you need a closing </script> tag
quotesondesign.com is the site i used, ...pretty easy to understand explanation of their api
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 21:59
is there any way that I can move my fontawesome code over to the js area?
Tom
@moT01
Dec 14 2016 22:00
that i would probly just leave where it is
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 22:04
do I need to relink my pen for you to see the changes?
I'm trying to do something simple, I want to use the new quote button as a toggle
but not sure how to use the variables on the js side, is there any way to maintain state?
or do I need to hide state inside of the page?
(I'm just kind of playing right now trying to "figure out how the monster works"
)
Tom
@moT01
Dec 14 2016 22:07
im not sure what you mean, there's a .toggle() method with jquery i believe
no i can see the changes
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 22:09

right now, the behavior is that if I enable the

var tempcounter = 0;

line, then the page automatically updates to "Look, an odd quote"
but I haven't clicked the button, it's like it's running the "testing()" function on it's own

(I kind of wish that they had given us a handful of these types of tasks before dropping us into the coding challenges. I don't have many problems with the coding, it's just the interactions between the 3 layers of a web page [as presented in codepen.io] that's new to me.)
Tom
@moT01
Dec 14 2016 22:13
yea, they threw you in to the ring after that api section
i think its cause you add one to your counter at the beginning
yea im not sure why it runs right away
Malcolm B Anderson
@MalcolmAnderson
Dec 14 2016 22:18
I'll mess with it, and maybe down the road, I can help put some codepen.io exercises together (plus some exercises shifting from codepen.io to "regular" html pages)
Igor Amidzic
@igoramidzic
Dec 14 2016 22:29
Does anyone know how to vertically align row elements in bootstrap?
Here, I want the element on the right to be centered with the image:
www.codewithigor.com
Thank you!
sparklie3
@sparklie3
Dec 14 2016 22:41
has anyone worked on the front-end code for the twitch project?
if so, i was wondering, if someone got the actual twitch api working instead of using the fake api
Ian
@IJACOBS
Dec 14 2016 22:48
Anyone know why my header element is not responding to the padding and is being hidden behind my nav element?? http://codepen.io/pen/?editors=1100
@sparklie3 I did, feel free to take a look a mine http://codepen.io/ianjacobs/pen/YprZpg
sparklie3
@sparklie3
Dec 14 2016 22:49
@IJACOBS and you acutally used the twitch api?
Ian
@IJACOBS
Dec 14 2016 22:50
yes, take a look at the code. its towards the top
@sparklie3 you have to figure out how to use a regular ajax request, not jquery getJson, and you include it in the header field
sparklie3
@sparklie3
Dec 14 2016 22:51
i see because i have to include the client id in the header?
is that why you used ajax instead of the getJson?
Ian
@IJACOBS
Dec 14 2016 22:51
Yes, but thats all! It isnt too much more difficult, and I was ahving way more issues with getjson and with the wind bow
sparklie3
@sparklie3
Dec 14 2016 22:52
got it, i was trying to figure out how to load the twitch sdk bcause that's what they suggested in the documentation
Ian
@IJACOBS
Dec 14 2016 22:52
@sparklie3 If you want to understand ajax requests i highly reccomend this free short course: https://www.udacity.com/course/intro-to-ajax--ud110
sparklie3
@sparklie3
Dec 14 2016 22:53
thanks @IJACOBS
CamperBot
@camperbot
Dec 14 2016 22:53
sparklie3 sends brownie points to @ijacobs :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @ijacobs |http://www.freecodecamp.com/ijacobs
Ian
@IJACOBS
Dec 14 2016 22:53
I reccomend it to everyone working on the api projects, especially wikipedia, because I think FreeCodeCamp does not explain ajax requests well enough
happy to answer any question that I can!
sparklie3
@sparklie3
Dec 14 2016 22:53
right, i don't think it explains the callback well
but as a short quesiton, isn't ajax just the advanced version of .get or .getJson?
Ian
@IJACOBS
Dec 14 2016 22:54
It took me weeks and weeks to understand it enough to finish the twitch project
actually, get json is an advanced version of ajaz
sparklie3
@sparklie3
Dec 14 2016 22:54
because aren't you just using http://api.jquery.com/jquery.ajax/
Ian
@IJACOBS
Dec 14 2016 22:54
ajax is the simplest
sparklie3
@sparklie3
Dec 14 2016 22:54
you're still using jquery, you're not writing javascript for the request/response call
Ian
@IJACOBS
Dec 14 2016 22:55
hm you are right
for these projects, often times the exact same request worked with ajax and not with get json. I dont know why thats the case
sparklie3
@sparklie3
Dec 14 2016 22:56
getjson isn't an advanced version of ajax
it states This is a shorthand Ajax function, which is equivalent to:
jquery functions like get and getJson are simplified versions of ajax
everything you can do with get or getJson, you can do with Ajax, but not vice versa
that's my understanding
because if you need anymore control than .ajax, you're going to have to write XMLHttpRequest
Ian
@IJACOBS
Dec 14 2016 23:01
I am not sure I fully follow, I am just learning this stuff now as well. As far as getting the json goes though, I know that ajaz is sufficient for these apis
sparklie3
@sparklie3
Dec 14 2016 23:03
i'm pointing out just that in the jquery documentation, you'll see that both $.get and .getJson are just shorthand versions of $.ajax
Ian
@IJACOBS
Dec 14 2016 23:06
yes this is true. I am just saying that for some reason, they are behaving differently when getting the json for these projects, as in, for some reason getJson doesnt work, even though they are the same
Rami
@RNwebdk
Dec 14 2016 23:17
can someone help me please ? i am stuck on this simple quiz program and i get an error inside of my check() function saying it cant find the i variable that comes from the play() function
thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test site</title>
</head>
<body>
    <script>
        function play(quiz){
            //main game loop
            for(var i=0, question, answer, max=quiz.length; i<max; i++){
                question = quiz[i][0];
                answer = ask(question);
                check(answer);
            }
            //end of main game loop
            gameOver();
        }

        function ask(question){
            return prompt(question); // quiz[i][0] is the ith question
        }

        function check(answer){
            if (answer === quiz[i][1]) { // quiz[i][1] is the ith answer
                alert("That is correct!");
                score++//increase score by 1
            }else{
                alert("Wrong!");
            }    
        }

        function gameOver(){
            //infom the player that the game has finished and tell them how many points they have scored
            alert("Game over, you scored " + score + " points");
        }

        // QUIZ
        var quiz = [
            ["What is Superman's real name ?", "Clarke Kent"],
            ["What os Wonderwoman's real name ?", "Dianna Prince"],
            ["What is Batman's real name ?", "Bruce wayne"]
        ];

        var score = 0; // initialize score

        play(quiz);
</script>
</body>
</html>
it says Uncaught ReferenceError: i is not defined(…)
sparklie3
@sparklie3
Dec 14 2016 23:35
@RNwebdk this code is odd quiz[i][0];
oh, i see what you did
you have an array in an array
Francois van Leersum
@Blockshot12
Dec 14 2016 23:35
@Jimbobmahooley, sorry for the slow response but I had to eat first. Is your question already been answered? If not, I think this is what you’re looking for:
http://codepen.io/Blockshot/pen/eBQzeN
sparklie3
@sparklie3
Dec 14 2016 23:35
nm
Rami
@RNwebdk
Dec 14 2016 23:36
This is from a book, thats very bad that it's not working LOL!
but thanks for replaying anyways @sparklie3
CamperBot
@camperbot
Dec 14 2016 23:36
rnwebdk sends brownie points to @sparklie3 :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @sparklie3 |http://www.freecodecamp.com/sparklie3
sparklie3
@sparklie3
Dec 14 2016 23:36
what is this return prompt(question)
is prompt a function?
i don't see prompt defined anywhere
Rami
@RNwebdk
Dec 14 2016 23:36
yes it takes what ever the user types
sparklie3
@sparklie3
Dec 14 2016 23:37
but you wrote return prompt(question)
but i don't see the prompt function
is prompt defined somewhere?
do you see what i mean
Rami
@RNwebdk
Dec 14 2016 23:39
no it's a javascript function, and yes i returns that to the play() function to put it inside of the answer variable and serve it to the check function
but my problem is inside of the check function it cant find the i variable
i think i got something to do with the scope
but i dont know how to fix it
because i'm a newbie :P
sparklie3
@sparklie3
Dec 14 2016 23:40
got it, i've never used this prompt, let me continue to take a look
Rami
@RNwebdk
Dec 14 2016 23:41
I think i found it
no i didn't :(
sparklie3
@sparklie3
Dec 14 2016 23:42
yeah, i think your issue is the definition of var i=0
i think it hsould be this
for(var i=0; i<quiz.length; i++)
oh, i know
give me a little bit more
it's because of this
if (answer === quiz[i][1])
quiz[i] issue
i isn't defined anywhere in this function
you defined var i =0 in the function called play
but this i is in the function called check
remember that variables are scoped to the function
Rami
@RNwebdk
Dec 14 2016 23:46
yes, but how do i make it available inside of the check ?
sparklie3
@sparklie3
Dec 14 2016 23:46
so the function check doesn't know what it is, which is why it says i is not defined
Rami
@RNwebdk
Dec 14 2016 23:47
true, hmmm...
sparklie3
@sparklie3
Dec 14 2016 23:48
well, i can solve it several different ways
Rami
@RNwebdk
Dec 14 2016 23:49
i solved it
sparklie3
@sparklie3
Dec 14 2016 23:49
function play(quiz){
            //main game loop
            for(var i=0, question, answer, max=quiz.length; i<max; i++){
                question = quiz[i][0];
                answer = prompt(question);
                if (answer === quiz[i][1]) { // quiz[i][1] is the ith answer
                alert("That is correct!");
                score++//increase score by 1
                }else{
                    alert("Wrong!");
                }    
            }
            //end of main game loop
            gameOver();
        }





        function gameOver(){
            //infom the player that the game has finished and tell them how many points they have scored
            alert("Game over, you scored " + score + " points");
        }

        // QUIZ
        var quiz = [
            ["What is Superman's real name ?", "Clarke Kent"],
            ["What os Wonderwoman's real name ?", "Dianna Prince"],
            ["What is Batman's real name ?", "Bruce wayne"]
        ];

        var score = 0; // initialize score

        play(quiz);
that's one way to solve it
Rami
@RNwebdk
Dec 14 2016 23:50
thats what i did :)
put the functions inside of the play function
awesome
that makes sense
sparklie3
@sparklie3
Dec 14 2016 23:50
there's other ways
such as passing the values of i into the function
you could do something like check (answer, i)
and then you define function check (answer, i) {blah blah}
it depends on how you want to do it and if you are truly making the functions reusuable
Rami
@RNwebdk
Dec 14 2016 23:51
yes, but that is the hard way :)
sparklie3
@sparklie3
Dec 14 2016 23:51
don't think of it as hard
just different
you'll eventually be doing that stuff
because let's say another function needs to call check (answer)
you don't want to rewrite the code over and over again
and then, maintaining is hard
Rami
@RNwebdk
Dec 14 2016 23:52
i see
thank you @sparklie3
CamperBot
@camperbot
Dec 14 2016 23:52
rnwebdk sends brownie points to @sparklie3 :sparkles: :thumbsup: :sparkles:
:warning: rnwebdk already gave sparklie3 points
sparklie3
@sparklie3
Dec 14 2016 23:52
np
Manish Giri
@Manish-Giri
Dec 14 2016 23:58
anyone knows how to draw text with animation on screen?