These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Oct 2016
Tony Miri
@TonyMiri
Oct 29 2016 00:00
@emamador That is interesting! That's the exact situation they are talking about and like the one exception to using .click lol
emamadordev
@emamadordev
Oct 29 2016 00:01
@FatTone225 yeah lol.
emamadordev
@emamadordev
Oct 29 2016 00:02
:)
@FatTone225 thanks
CamperBot
@camperbot
Oct 29 2016 00:02
:cookie: 367 | @fattone225 |http://www.freecodecamp.com/fattone225
emamador sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
Tony Miri
@TonyMiri
Oct 29 2016 00:02
Writing Javascript but I can't figure out how to post a gif in here lol
@emamador Thank you too!
CamperBot
@camperbot
Oct 29 2016 00:02
:cookie: 218 | @emamador |http://www.freecodecamp.com/emamador
fattone225 sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
emamadordev
@emamadordev
Oct 29 2016 00:03
hell yeah brownie points
still don't know what they are for bu whatever
after accumulating a certain amount of brownie points they should send real brownies over the mail
Tony Miri
@TonyMiri
Oct 29 2016 00:05
I second that
Love me some brownies
emamadordev
@emamadordev
Oct 29 2016 00:14
hey!
Tony Miri
@TonyMiri
Oct 29 2016 00:33
Anyone able to help me out with an authorization question for the Wikipedia viewer?
Darshan
@Dave1089
Oct 29 2016 00:40
sorry guys .. just testing something... dont mind it
Collin
@collinferry
Oct 29 2016 01:03
Anyone had any issues with the HTTP deprecation of geolocation in Chrome? (This would likely come up specifically in regards to the Weather App.
Coy Sanders
@coymeetsworld
Oct 29 2016 01:05
yep, its been deprecated for months
it should still work in other browsers, but what I did and others did was use another API to grap location
Tyler Moeller
@TylerMoeller
Oct 29 2016 01:06
@gastikirs
    <div class="row text-center">
          <i id="twitch-logo" class="center-block fa fa-twitch fa-4x" aria-hidden="true"></i>
    </div>
Collin
@collinferry
Oct 29 2016 01:20
With my weather app I'm having trouble getting the output to center due to a variable size. Does anyone have a clue on what type of CSS can help with this? The weather app is running live here: http://collinferry.com/weathertop/index.html
Note that it can't currently run in Chrome, Firefox works
Tony Miri
@TonyMiri
Oct 29 2016 01:31
@collinferry margin: auto; ???
Collin
@collinferry
Oct 29 2016 01:43
@FatTone225 Thanks, this could help.
CamperBot
@camperbot
Oct 29 2016 01:43
collinferry sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @fattone225 |http://www.freecodecamp.com/fattone225
Ryan Williams
@Ryanwfile
Oct 29 2016 01:45

Can someone familiar with github please help me I am having an issue linking to a file. The error message from the browser reads

The page at 'https://cdn.rawgit.com/Ryanwfile/projects/battleship/bookbs.html' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

However the link in my code reads

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Any help would be very appreciated, thank you

Walid Ashri
@walidashri
Oct 29 2016 01:47
@Ryanwfile this not related to github it's CORS issue
areu sure all ur links is https?
Ryan Williams
@Ryanwfile
Oct 29 2016 01:48
@walidashri I'm not sure sure what that means, the page loads perfectly fine when I load the file directly into the browser myself
@walidashri Well the one link in question was originally just HTTP but I deleted all of the files since editing the file and committing didn't seem to work so I started from scratch with all links to HTTPS and it's still not working, thank you for the help
CamperBot
@camperbot
Oct 29 2016 01:49
ryanwfile sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 508 | @walidashri |http://www.freecodecamp.com/walidashri
Walid Ashri
@walidashri
Oct 29 2016 01:50
@Ryanwfile for info about CORS
Ryan Williams
@Ryanwfile
Oct 29 2016 01:51
@walidashri Yea I am reading about that but I'm not sure exactly all of my links work except the one in this case, I'm particularly confused by why it says the link has to be HTTPS when the link is HTTPS
Walid Ashri
@walidashri
Oct 29 2016 01:54
@Ryanwfile maybe it's http and pretend to be https :) gl in your work
Ryan Williams
@Ryanwfile
Oct 29 2016 01:56
@walidashri Thanks, well I guess it could be reading it as http but I did post the link here and it's the same way in the code so I have no idea why it wouldn't read it as HTTPS
CamperBot
@camperbot
Oct 29 2016 01:56
:warning: ryanwfile already gave walidashri points
ryanwfile sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
Walid Ashri
@walidashri
Oct 29 2016 01:58
@Ryanwfile I c it now the img link is not https
Ryan Williams
@Ryanwfile
Oct 29 2016 01:58
@walidashri It's the 2nd to last line, it looks like it's HTTPS
@walidashri The image link isn't causing problems it's the js link
Caleb Ju
@jucaleb4
Oct 29 2016 02:02
Hey guys, for the Tribute page, how do I align the text in the center while having the text start from the same column on the left-hand side
Walid Ashri
@walidashri
Oct 29 2016 02:04
@Ryanwfile u can update the ver 3.3.7 if np or as quick fix try add the file to ur assets rather the link
Caleb Ju
@jucaleb4
Oct 29 2016 02:04
For instance, when i set all the bullets points to have class="text-center", the bullet points don't start at the sa me point
Ryan Williams
@Ryanwfile
Oct 29 2016 02:05
@walidashri That's a great idea, thank you. I'm just brand new to github and was hoping the HTTPS error was a mistake on my part
CamperBot
@camperbot
Oct 29 2016 02:05
ryanwfile sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave walidashri points
Walid Ashri
@walidashri
Oct 29 2016 02:06
@Ryanwfile np gl we all new :)
@jucaleb4 u got a link?
Caleb Ju
@jucaleb4
Oct 29 2016 02:07
yea i'm getting it!
Caleb Ju
@jucaleb4
Oct 29 2016 02:14
Ok I'll try posting it tomrrow I'm still learning Github
Marcus Rogers
@marcusrogers23
Oct 29 2016 02:29
Do you guys know why my text is not centered and colored dark red?<div style=color:"#8b0000">
<h1 class="text-center"> Lebron James</h1>
</div>
crystal
@crystalYY
Oct 29 2016 02:34
div should like this:<div style="color:#8b0000;">@marcusrogers23
Marcus Rogers
@marcusrogers23
Oct 29 2016 02:36
thank you @crystalYY that fixed the coloring but my text still is not centered
CamperBot
@camperbot
Oct 29 2016 02:36
:warning: could not find receiver for crystalyy
marcusrogers23 sends brownie points to @crystalyy :sparkles: :thumbsup: :sparkles:
crystal
@crystalYY
Oct 29 2016 02:43
do you put the h1 tag in a div of which class is container-fluid or container
crystal
@crystalYY
Oct 29 2016 02:49
oh,I forget to remind you @marcusrogers23
Luke
@lukede
Oct 29 2016 03:27
I'm on the local weather project. I've completed it on my own separate files, but when I copy it into code pen the code seems to stop at the geolocation line. Anybody have any ideas of fixes?
Ken Haduch
@khaduch
Oct 29 2016 03:36
@lukede - I don't know if you made headway on this since you posted your question, but it looks like it worked fine for me, using Firefox on Windows? Found my location and updated the weather... It did ask me if I wanted to share my location. Note that if you use Chrome, it would not be able to do the geolocation, because you have to ues http:// rather than 'https://, and the geolocation on Chrome requires https://.
Luke
@lukede
Oct 29 2016 03:40
hey , thanks for the tips. @khaduch
CamperBot
@camperbot
Oct 29 2016 03:40
lukede sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1849 | @khaduch |http://www.freecodecamp.com/khaduch
Luke
@lukede
Oct 29 2016 03:41
for some reason it does not work on safari
@khaduch I did just try it on Firefox and it works. I am curious how examples I've seen load the weather without asking permission to access the geolocation
Liu, Kuichen
@Kuichen
Oct 29 2016 03:43
@lukede @khaduch and as a work around to let Chrome using geolocation under http, you may want to use the crossorigin.me api, however it will add 2+ secondes in request time. I didn't use navigator.geolocation but anther api http://ip-api.com/json instead.
here is my project weatherLand
Luke
@lukede
Oct 29 2016 03:49
@Kuichen cool
Tony Miri
@TonyMiri
Oct 29 2016 03:49
I used the Weather Underground API and they include a geolookup feature as a part of their API I believe. As a result though I have to do 2 API calls every time.
Luke
@lukede
Oct 29 2016 03:51
it's kind of annoying how long it takes to load and having to click ok to the geolocation request
Luke
@lukede
Oct 29 2016 03:52
@FatTone225 nice. Yours loads quick too
Tony Miri
@TonyMiri
Oct 29 2016 03:52
yeah grabs it instantly
Spent a few hours trying to get the CORS for the wikipedia viewer working today. Turns out you just add '&callback=?' onto the end of the url
Nowhere in the documentation does it say that, to be sure.
Greg Duncan
@GregatGit
Oct 29 2016 03:56
@lukede pen.js:9 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.
Luke
@lukede
Oct 29 2016 03:57
@FatTone225 thank you. I'll keep that in mind as I start that project next
CamperBot
@camperbot
Oct 29 2016 03:57
lukede sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @fattone225 |http://www.freecodecamp.com/fattone225
Luke
@lukede
Oct 29 2016 03:57
@GregatGit thanks. This is new to me. I will check it out
CamperBot
@camperbot
Oct 29 2016 03:57
lukede sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 779 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Oct 29 2016 03:58
@lukede this kind of issue will come up more and more - so the more you can understand it the better front end dev you'll be. Have a look at https://crossorigin.me/
@Kuichen great looking weather page
Liu, Kuichen
@Kuichen
Oct 29 2016 04:02
@GregatGit glad you like it! Thanks.
CamperBot
@camperbot
Oct 29 2016 04:02
kuichen sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 780 | @gregatgit |http://www.freecodecamp.com/gregatgit
Muhammad Hasham
@MohammadHasham
Oct 29 2016 06:13
how do i access my localhost on my mobile device i have used my ip but it is not working
hallowcard13
@hallowcard13
Oct 29 2016 06:14
Check the firewall of your computer
You need to allow the port 8080 to be access publicly
Muhammad Hasham
@MohammadHasham
Oct 29 2016 06:23
okay
thanks
Liu, Kuichen
@Kuichen
Oct 29 2016 06:25
@MohammadHasham kindly reminder, better @ the one who helped you so their effort will be appreciated with lovely brownie point! :smile:
hallowcard13
@hallowcard13
Oct 29 2016 06:29
Thanks liu
Liu, Kuichen
@Kuichen
Oct 29 2016 06:30
:smile:
hallowcard13
@hallowcard13
Oct 29 2016 06:30
Ohh sorry @Kuichen
Muhammad Hasham
@MohammadHasham
Oct 29 2016 06:32
@hallowcard13 Thanks
CamperBot
@camperbot
Oct 29 2016 06:32
mohammadhasham sends brownie points to @hallowcard13 :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @hallowcard13 |http://www.freecodecamp.com/hallowcard13
Muhammad Hasham
@MohammadHasham
Oct 29 2016 06:35
is this okay i haven't done any work on responsiveness it is doing all that stuff by default should i change it to become more mobile-tablet friendly
Liu, Kuichen
@Kuichen
Oct 29 2016 06:35
@hallowcard13 no problem.
Muhammad Hasham
@MohammadHasham
Oct 29 2016 06:35
blob
is this okay i haven't done any work on responsiveness it is doing all that stuff by default should i change it to become more mobile-tablet friendly
hallowcard13
@hallowcard13
Oct 29 2016 06:40
@MohammadHasham i thin you need to so that it would be friendly to search engine as well try reading media queries
Muhammad Hasham
@MohammadHasham
Oct 29 2016 07:12
what about design?
should i give them some media queries or max width @hallowcard13
hallowcard13
@hallowcard13
Oct 29 2016 07:15
@MohammadHasham you cam buy or download some templates that matches your needs , or you can use gimp it works like a photoshop is just that its free so you can do some web designing as well . Media queries that depends on your template as well and how do you want it to look like on a specific screen size
Muhammad Hasham
@MohammadHasham
Oct 29 2016 07:16
is it okay if it looks like this on a mobile?
@hallowcard13
as in the picture
or should i give it max width
actually i am converting it from a psd
Gaston Kirsman
@gastikirs
Oct 29 2016 07:19
Guys, if I have ONLY one column in the entire website, how do I center it responsively?
http://codepen.io/gastonk/full/ORYepw/
This just breaks if i resize the window. In full mode looks centered, but if you resize lower it breaks
Semak
@drdextar
Oct 29 2016 07:22
hello everyone
hope everyone is fine i am working on portfolio page and facing a problem with images
in code pen images are not visible although the src of these images are from the example.
Mohamed Osama Khan
@Assaonator
Oct 29 2016 07:38
are we allowed to use templates for our tribute page ?
Deepak
@delta12kilo
Oct 29 2016 07:38
how do i underline my <h2.....!?
Sorin Ruse
@sorinr
Oct 29 2016 07:39
@gastikirs you can make your div like: <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4"> to be responsive also for smaller screens
Deepak
@delta12kilo
Oct 29 2016 07:40
got it
Gaston Kirsman
@gastikirs
Oct 29 2016 07:42
@sorinr I added some classes but it stills working bad, look at the pen
hallowcard13
@hallowcard13
Oct 29 2016 07:43
@MohammadHasham better if you can upload it on code pen and lets have looked😊
Jerzz
@2cool4school
Oct 29 2016 07:46
Can anyone tell me how to get rid of the apparent padding around my navbar?
http://codepen.io/shipfaced/pen/MjMYyb
i have a body css rule of padding: 0;
my footer does the same thing
hallowcard13
@hallowcard13
Oct 29 2016 07:53
@2cool4school try putting a padding 0 and margin 0 at the body of your page
Jerzz
@2cool4school
Oct 29 2016 08:01
@hallowcard13 oh duh.. idk why margin didnt occur to me, intuitively it seems like it should be a padding rule. thank you
CamperBot
@camperbot
Oct 29 2016 08:01
2cool4school sends brownie points to @hallowcard13 :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @hallowcard13 |http://www.freecodecamp.com/hallowcard13
what do you guys think?
Sorin Ruse
@sorinr
Oct 29 2016 08:06
@gastikirs its because u have used table tag
Gaston Kirsman
@gastikirs
Oct 29 2016 08:09
@sorinr Sorry i dont understand. I used a table tag, and?
F22rapt
@F22rapt
Oct 29 2016 08:09
working on my portfolio, would i need a container-fluid class in order to get two rows of three images below my header without them screwed up my other elements?
Sorin Ruse
@sorinr
Oct 29 2016 08:11
@gastikirs wrap your table into a <div class="table-responsive">
hallowcard13
@hallowcard13
Oct 29 2016 08:13
@2cool4school your welcome😊
Gaston Kirsman
@gastikirs
Oct 29 2016 08:16
@sorinr Genious! ty :)
CamperBot
@camperbot
Oct 29 2016 08:16
gastikirs sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 802 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 29 2016 08:18
@gastikirs welcome
Collin
@collinferry
Oct 29 2016 08:51
I'm porting some CodePen projects over to GitHub and my quote machine is broken. It looks like the script.js file isn't running. Anyone care to take a look?
Here's the working version on CodePen: http://s.codepen.io/collinferry/debug/WrPjRY
Here's the broken version on GitHub: https://collinferry.github.io/stoic-wisdom/
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:13
Hello World! :)
CamperBot
@camperbot
Oct 29 2016 09:13

welcome to FreeCodeCamp @NitinNair89!

F22rapt
@F22rapt
Oct 29 2016 09:24
.mainPage{
background-image: url("http://lorempixel.com/output/business-q-g-640-530-7.jpg");
} Is not displaying, am i missing something here?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:28
Hi @F22rapt :wave:
F22rapt
@F22rapt
Oct 29 2016 09:30
hello again
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:31
@collinferry I have cloned your code on my desktop, few errors in html as well as js files
@F22rapt What's the issue? How you been? Long time no see :)
F22rapt
@F22rapt
Oct 29 2016 09:34
been workin
I'm trying to set a background image
not sure if its the url link or if the statement is wrong
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 09:35
@F22rapt the background-image is working, your div just hasn't got any size
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:36
@collinferry Are you there?
F22rapt
@F22rapt
Oct 29 2016 09:37
ah..would that be..background-size?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 09:37
@F22rapt No, just give your div a width and heigth
Right now you have a div that is 0 width and 0 height with a background-picture, so you see nothing
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:38

Please remove the below lines from your script.js file and add it inside your index.html just before the closing of <body> tag.
Remove the below from your JS file:

            var currentQuote = quotes[Math.floor(Math.random() * (quotes.length))];

            $("#tweet").on("click", function() {
                var text = currentQuote.quote.substring(0, 120) + "... -" + currentQuote.author;
                window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(text));
            });

            $("#button").on("click", function() {
                currentQuote = quotes[Math.floor(Math.random() * (quotes.length))];
                $(".blockquote").empty();
                $(".blockquote").append("<p><i class='fa fa-quote-left fa-2x'></i> " + currentQuote.quote + "</p><footer class='text-right'>" + currentQuote.author + "</footer>");
                return currentQuote;
            });

Add the below in your HTML file:

    <script>
        $(document).ready(function() {
            var currentQuote = quotes[Math.floor(Math.random() * (quotes.length))];

            $("#tweet").on("click", function() {
                var text = currentQuote.quote.substring(0, 120) + "... -" + currentQuote.author;
                window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(text));
            });

            $("#button").on("click", function() {
                currentQuote = quotes[Math.floor(Math.random() * (quotes.length))];
                $(".blockquote").empty();
                $(".blockquote").append("<p><i class='fa fa-quote-left fa-2x'></i> " + currentQuote.quote + "</p><footer class='text-right'>" + currentQuote.author + "</footer>");
                return currentQuote;
            });

        });

    </script>
F22rapt
@F22rapt
Oct 29 2016 09:39
aaah it just repeated the imagine lol
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:40
@F22rapt Give background-repeat: no-repeat;
F22rapt
@F22rapt
Oct 29 2016 09:42
mmm ok. but the image is just extremely small by default, is there another unit other than px i can use? otherwise ill be making it like 3k px long
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:43
em, %
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 09:43
@F22rapt some fixed units are: px em rem
some responsive unitsare: % vw(viewport-width) vh
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 09:44
100vw = 100% width of the browser
F22rapt
@F22rapt
Oct 29 2016 09:44
ok great! because 100% doesn't work for some reason..
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 09:45
@F22rapt Try to give body and html 100%width and height and then try your 100% on the div again
F22rapt
@F22rapt
Oct 29 2016 09:49
well if it aint broke don't fix it
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 09:50
@F22rapt And for more on backgrounds: http://www.w3schools.com/css/css3_backgrounds.asp
F22rapt
@F22rapt
Oct 29 2016 09:54
ah cool thats going in my folder
F22rapt
@F22rapt
Oct 29 2016 10:07
lets see now! what oh what does a portolio need
F22rapt
@F22rapt
Oct 29 2016 10:13
so I'm making a header and its causing a white space..is that because its being given margin?
or perhaps its padding..
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:13
@F22rapt In your case it's the h1-margin causing it
@F22rapt You can use the developer tools from your browser to find such things :)
F22rapt
@F22rapt
Oct 29 2016 10:14
but i such newb. cant even keep str8 the difference of padding and margin xD
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:15
F22rapt
@F22rapt
Oct 29 2016 10:19
ah. isn't it weird when you get started on something and ya just can't stop?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:21
@media screen and (max-width: 320px)  

     .box-header1{ 
             width:500px;
            height:1522px;
            margin-top:51px;
     }


}
am i suign the media query the right way
using*
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:23
@MohammadHasham Well, does it work?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:23
no it isnot working
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:23
I think I'd use all instead of screen but it looks good for me
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:23
@Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:23
@MohammadHasham Can you link it?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:24
i am trying to make it responsive
it is on localhost
:-(
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:24
@MohammadHasham you forgot an { after (max-width: 320px)
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:25
still not working :-(
i am testing it on google chrome as well
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:26
@MohammadHasham well, that works for me:
@media all and (max-width: 320px) { 

     .box-header1{ 
             width:500px;
            height:1522px;
            margin-top:51px;
       background-color: red;       
     }

}
Gonna eat now :)
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:26
@Otto-AA Okay Thanks
CamperBot
@camperbot
Oct 29 2016 10:26
mohammadhasham sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @otto-aa |http://www.freecodecamp.com/otto-aa
Muhammad Hasham
@MohammadHasham
Oct 29 2016 10:26
i'll try that
Ajay Tanwar
@ajayt365
Oct 29 2016 10:55
https://codepen.io/ajayt365/pen/LRBJWd . i am getting an object through ajax call but it's values is something unexpected . " error" ," not found" are inside object. what's wrong?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 10:57
@ajayt365 I think someone here said that it is offline right now. Look somewhere above to find the comment or search on google for it.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 11:08
@c0d0er you could set min-width to your font-size (20px in your case) or add an space before #result:before {content: "\00a0";}
c0d0er
@c0d0er
Oct 29 2016 11:09
@Otto-AA thanks, do you know if i dont use <br>, how could i make the buttons in 4 rows?
CamperBot
@camperbot
Oct 29 2016 11:09
c0d0er sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @otto-aa |http://www.freecodecamp.com/otto-aa
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 11:14
@ajayt365 twitch is working fine. - https://nitinnair89.github.io/TwitchTvApp/
Hyperdev space servers shuts down sometimes. That's why i used twitch api
Ajay Tanwar
@ajayt365
Oct 29 2016 11:19
@NitinNair89 i am not using clientID . is there a way to do it without clientID?
very bad attempt to make portfolio page.
can some one help me with bottom session and how i can make it look more better.
F22rapt
@F22rapt
Oct 29 2016 11:37
badadadadadadadada....text inside of a div col statement shouldn't expand the whole screen right?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 11:41
Nope
@ajayt365 That only way was the hyperdev link. Why not get a client ID?
@drdextar No need to use columns for those buttons. Just use font-awesome icons or something like that instead of buttons :)
Semak
@drdextar
Oct 29 2016 11:44
@NitinNair89 thanks nitin
CamperBot
@camperbot
Oct 29 2016 11:44
drdextar sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
F22rapt
@F22rapt
Oct 29 2016 11:48
didnt know font awesome had icons..
i was just thinkin about how to add the fb logo lol
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 11:49
they are basically fonts that look like icons @F22rapt
F22rapt
@F22rapt
Oct 29 2016 11:50
can they be nested inside a anchor?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 11:52
yes
F22rapt
@F22rapt
Oct 29 2016 11:52
sweet.
Tenzin Phuntsok
@tenzindphuntsok
Oct 29 2016 11:52
how can I align two div elements next to each other?
Filippo Tarozzi
@blnt
Oct 29 2016 12:03
@tenzindphuntsok you need a div as a row then you place 2 div as columns
F22rapt
@F22rapt
Oct 29 2016 12:06
uhm..so why is my footer just..hangin out http://codepen.io/f22rapt/pen/GjbgXK?editors=1100#0
further more why did it duplicate..
Tenzin Phuntsok
@tenzindphuntsok
Oct 29 2016 12:11
@blnt and the size of the column?
Filippo Tarozzi
@blnt
Oct 29 2016 12:15

@tenzindphuntsok you can assign size with css. Probably you are using boostrap, then you just need to assign classes according to the grid system
Example:

<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-5">Column 2</div>
</div>

Sorry, mistake...

<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>

Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:17
@F22rapt maybe codepen issue
Semak
@drdextar
Oct 29 2016 12:17
Filippo Tarozzi
@blnt
Oct 29 2016 12:17
You will have 2 columns: column 1 and 2 have both width 50% inside "row" @tenzindphuntsok
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:18
@drdextar :+1:
Semak
@drdextar
Oct 29 2016 12:19
@NitinNair89 thank you can u tell me how to make space between icons without using column or row classes
CamperBot
@camperbot
Oct 29 2016 12:19
drdextar sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: drdextar already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:20
@drdextar just put &nbsp; between them :)
Semak
@drdextar
Oct 29 2016 12:22
:+1: @NitinNair89
F22rapt
@F22rapt
Oct 29 2016 12:35
oooh i just got an idea!
Faefnir
@Faefnir
Oct 29 2016 12:37
how do i center an img with html ?
Islam Ibakaev
@dagman
Oct 29 2016 12:38
in the Procfile can i write web: npm run prod
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:42
@Faefnir give margin:0 auto; in the CSS property for that image
Faefnir
@Faefnir
Oct 29 2016 12:45
ty @NitinNair89
CamperBot
@camperbot
Oct 29 2016 12:45
faefnir sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:47
welcome! :)
F22rapt
@F22rapt
Oct 29 2016 12:48
ima..freakin..rawr
still getting this like..clipping on my footer below my image..
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:49
?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:50
@F22rapt Why did you do - <footer class ="nav nav-pills">?
F22rapt
@F22rapt
Oct 29 2016 12:51
<.> because im tryna make a bottom nav bar..
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:52
why do you need a navbar on bottom?
F22rapt
@F22rapt
Oct 29 2016 12:52
i was fixin to use it as my "contact" thingy
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:53
not a good practice. You can create a normal footer with some links
F22rapt
@F22rapt
Oct 29 2016 12:53
hmmm ok. I'm just terrible at design xD
well fudge..plan B..
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:56
haha
I was thinking to write few tutorials.. would it help?
F22rapt
@F22rapt
Oct 29 2016 12:58
of course
well for plan b i need to section off my headings down the page..theres a thing for that..i almost..remember..
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 12:59
any topics you want me to cover?
F22rapt
@F22rapt
Oct 29 2016 13:00
well..I'm really unsure on how to actually move things around efficently as to make a clean layout
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:00
ahh
F22rapt
@F22rapt
Oct 29 2016 13:03
i know that div row and div col can be useful but I don't know how to use those to acheive what i want. like my first port, i tried adding 6 images in a row and ended up breaking everything lol
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:03
you need to read the Bootstrap tutorial then :)
F22rapt
@F22rapt
Oct 29 2016 13:04
whur that at lol.
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:04
?
F22rapt
@F22rapt
Oct 29 2016 13:06
w3 schools?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:08
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:17
my meta tags are not working can anyone tell me where am i worng
blob
blob
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:18
how do you know there are not working? @MohammadHasham
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:19
my page looks compressed on mobile and media queries are not working
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:20
compressed?
can you show the code?
and can you give proper names to your css and js files please?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:20
i figured that out but still my media queries are not working
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:21
show your media query then
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:21
@media screen and (max-width: 320px)  
   {
       .wrapper{
        background-color:#09C;
    }


}
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:21
@MohammadHasham this will work for smaller screens only
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:21
i have tested it on max-width:320px
google chrome
how can i check that
786px?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:22
check what? the dev tools has the option to test for responsiveness
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:22
what should be the ideal breakpoints
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:22
did you try removing the "/" at the end of the meta tags?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:23
from both meta tags?
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:24
only 1 is needed
the one with initial scale
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:38
@NitinNair89 still the problem resides
what max-width should i use to test the queries i am using 320px but still nothing is happening
i am changing the background color
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:43
I hope the classes and IDs are properly coded in HTML.
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:43
blob
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:43
It is not just about max-width.
um, click the bar on the top
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:44
i am using classes and id's both.
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:44
it will auto set the device width
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:44
blob
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:44
it might be probably due to the 100% you set there
@MohammadHasham click the different grey bars on the top
It will auto set the device width
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:45
yes i have done that it has made 320x480
but still the problem is there
i am doing somethinf reallyworng
what else do i need to check
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:51
what's #09c?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:51
background color
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:51
@MohammadHasham Did you try normal keywords like - 'black' or 'red' ?
I know it is background-color. I am asking which color is it?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:52
i have done red
still nothing shows up
i am now using .container{
background-color:red;
}
in media query
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:53
that same code works at my end @MohammadHasham
i hope your media query is in CSS.css file?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:56
yes actually my whole css is in that file including the media queries everything is working except them
i have placed them at the end is that alright?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:57
i usually place media queries in a separate file
Muhammad Hasham
@MohammadHasham
Oct 29 2016 13:58
do they work in the same file?
or do i need to make another css file ad link that
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 13:59
try that
or try to change body color
in that same media query
see if it works
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:00
it has started started working i changed literally nothing
thats like some magic!
@NitinNair89 Thanks
CamperBot
@camperbot
Oct 29 2016 14:00
mohammadhasham sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:00
:scream:
@MohammadHasham Great for you!
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:01
yeah! Thanks you
F22rapt
@F22rapt
Oct 29 2016 14:05
NYAT! BSOD are a pain
who knows where i can get windows for like $7 xD
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:06
:lollipop:
F22rapt
@F22rapt
Oct 29 2016 14:10
itll be like 10 years before i can get a OS with my wage xD
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:11
haha
F22rapt
@F22rapt
Oct 29 2016 14:11
thats just sad!
maybe I'll become like worlds #1 freelance web developer xD
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:13
That's a good Goal :P
:)
F22rapt
@F22rapt
Oct 29 2016 14:14
yep, Apple? I own them
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:17
can an html page become responsive nowadays or developers tend to look for some frameworks such as bootstrap?
because i don't know how to convert a psd to responsive html without bootstrap
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:18
you can create your own framework or use the pre-made ones
@MohammadHasham
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:18
how can i make my own framework i am still a newbie actually i am asking regarding freelance perpective
or professional industries
it is okay to use bootstrap and skip gtml responsiveness
html*
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:19
@MohammadHasham Bootstrap is really good. Why do you want to skip responsiveness?
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:20
i am asking that i don't know how a html page is made responsive without bootstrap especially when it comes to making html from psd's
so is that okay to use bootstrap
is it okay professionally
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:20
yes buddy
of course. Why do you think otherwise?
You can make responsive by specifying layout in percentages.
Check out the tutorial in w3schools
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:21
because i have heard that some industries force their developers to make html responsive and don't use bootstrap or anything
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:24
Oh ok.
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:25
is that true?
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:27
I am not aware of that @MohammadHasham
Muhammad Hasham
@MohammadHasham
Oct 29 2016 14:27
@NitinNair89 Thanks okay
CamperBot
@camperbot
Oct 29 2016 14:27
mohammadhasham sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave nitinnair89 points
F22rapt
@F22rapt
Oct 29 2016 14:30
@NitinNair89 that understanding bootstrap link is frying my brain
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:32
@F22rapt take it slow
1 topic a day
F22rapt
@F22rapt
Oct 29 2016 14:34
welp thats the introduction done time for bed o/
seriously. i've hit the 12hour mark time ti shut down have a good day
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:35
Cya tomorrow @F22rapt :)
j1417
@j1417
Oct 29 2016 14:35
hi!! how can i set the footer to the bottom of the page??
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 14:41
your footer is already at the bottom @j1417
j1417
@j1417
Oct 29 2016 15:19
hi!!
why the fixed button is taking me to title 2 and not to title 1?http://codepen.io/Juan1417/pen/BLrjOY
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 15:28
@j1417 The structure is incorrect. You have button a button inside the <a>. Button click events will not access "href" of <a> unless you code it in your javascript
<a href="#title1" class="btn btn-lg btn-round fixedbutton"><i class="fa fa-arrow-up" aria-hidden="true" ></i>
      </a>
So, transfer the classes of button to a and get rid of the button tag
j1417
@j1417
Oct 29 2016 15:36
@NitinNair89 thanks
CamperBot
@camperbot
Oct 29 2016 15:36
j1417 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 29 2016 15:43
:)
Tom Sharkey
@tbsharkey
Oct 29 2016 16:31
Here is my tribute page. http://codepen.io/TShark/pen/JRxodQ I was wondering what I need to do to make the paragraph section the same font size as everything else
ApatheticMonster
@ApatheticMonster
Oct 29 2016 17:14
Hi @tbsharkey
Your tribute page is awesome!
I just wanted to ask where did you learn these codes for eg. section{
font-family: 'Roboto'!important; font-family: 'Roboto Condensed';
???
@NitinNair89 you there?
Faefnir
@Faefnir
Oct 29 2016 17:23

how do i organizine my lines with htlm ? like i have a line and the line bellow it should be a bit ahead without i have to press space multiple times

<html>
<head>
</head>
</html>

like this

D=
welp it auto arrenged the position of my text
ApatheticMonster
@ApatheticMonster
Oct 29 2016 17:25
use any text editor... then save it as any name with [dot]html extension... Then they'll start arranging themselves
@Faefnir
dot mean fullstop
Faefnir
@Faefnir
Oct 29 2016 17:27
ty @ApatheticMonster
CamperBot
@camperbot
Oct 29 2016 17:27
faefnir sends brownie points to @apatheticmonster :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @apatheticmonster |http://www.freecodecamp.com/apatheticmonster
ApatheticMonster
@ApatheticMonster
Oct 29 2016 17:28
welcome
@Faefnir
code
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 17:31
@tbsharkey Take care with your closing tags: <h3 >Education:<h3> should be <h3 >Education:</h3>. The way it is now it affects all others and therefore the font-size is the one of the h3-element ^^
ApatheticMonster
@ApatheticMonster
Oct 29 2016 17:32
@Otto-AA can youplease help me with these designing codes
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 17:33
@ApatheticMonster What's the matter?
ApatheticMonster
@ApatheticMonster
Oct 29 2016 17:33
I want help with these codes

.column-border{
border: 3em solid black;
border-radius:5%;
background: #cccccc;

}
p{ font-weight:bold;
font-family: 'Roboto Condensed';

}
section{
font-family: 'Roboto'!important;

padding:1em;
font-family: 'Roboto Condensed';
font-weight:bold;

where to learn them? for example Roboto Condensed and all
@Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 17:42
@ApatheticMonster I learned some non-basic stuff with experimenting a lot, trying out different things, and if I saw something where I wondered how that could be done then well, I just tried to do it and inspect the site if I didn't find a solution on my own.
Also google, w3schools and stackoverflow are pretty useful. So for example when I see font-family: 'Roboto Condensed' and wonder what that should mean, I just google it. So I search for "font family Roboto Condensed" and then find out that it's a google font. Then I click get started with google fonts and learn how to implement it (really easy btw).
@ApatheticMonster Another way to learn is to follow css-tricks.com :)
and this forum obviously
Collin
@collinferry
Oct 29 2016 17:45
@NitinNair89 Sorry, it was 2am PST, I'd gone to bed. I'm not seeing the same errors you're seeing. I have guessed that I could probably put the jQuery listeners in the HTML file, but I don't understand why that would work. Or perhaps more importantly, why the jQuery listeners aren't running from inside the JS file.
@NitinNair89 Thanks for taking a look!
CamperBot
@camperbot
Oct 29 2016 17:46
collinferry sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:26
please this code is not working i need help
$(document).ready(function(){
var api = 'http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=5e0b5e74c00157c5b716b574fa492405';
$.getJSON(api, function(data){
var lat = alert(data.coord.lat);
});
});
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 18:27
@maherbuhari Can you link your pen?
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:29
@Otto-AA sure
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 18:29
@maherbuhari and why do you have the alert in there?
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:30
@Otto-AA just to make sure is working
You need to open it with http://codepen.io/...
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:33
@Otto-AA is working now but please what do u fix
@Otto-AA :sparkles: :+1: :sparkles:
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 18:34
@maherbuhari I didn't change any of your code, only changed the link :)
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:37
ok thanks :sparkles: :+1: :sparkles:
@Otto-AA :sparkles: :+1: :sparkles:
Buhari Nasir Ahmad
@buharinasir
Oct 29 2016 18:47
@Otto-AA i add something to it and is not working again
Hernan De Andres
@hernanfda
Oct 29 2016 19:04
Hello! Im finishing my portfolio project but i can't make it work responsiveness in my iPhone, if y resize it in the browser it seems to work but in my phone the scroll bars appear. Any suggestion? https://codepen.io/hernanfda/full/LRoweg/
also i have some troubles with the font size in the portfolio pictures and in the contact area
Aaron Bell
@awb715
Oct 29 2016 19:59
http://codepen.io/Aaron-w-Bell/pen/rMEMYz does anyone know why my browserisnt asking to use my location
Andrew Naumann
@andrewnaumann
Oct 29 2016 20:02
@hernanfda You need to get rid of all that padding on the mobile size. It's causing the text to overflow the width of the mobile
Will
@wbrennan899
Oct 29 2016 20:05
Any advice on calling the OpenWeather API? I keep getting an error with no description other than "error"
Freddie O
@FreddieFO
Oct 29 2016 20:05
Hi please I need help. I’m trying to align my twitter button and my “Get Quote” button. For some reason they aren’t aligned. Here’s my code:
http://codepen.io/freddiefo/pen/xEBwVP/
Will
@wbrennan899
Oct 29 2016 20:08
Maybe try making the tweet link a button as well?
does anyone know this doesnt work
Will
@wbrennan899
Oct 29 2016 20:10
The position query?
Freddie O
@FreddieFO
Oct 29 2016 20:11
@wbrennan899 tried that before but you can’t assign a href to a button. Need that href to help tweet the quote
Robert Richey
@0x0936
Oct 29 2016 20:12
@awb715 still need to call getLocation()
i modified it @0x0936
Robert Richey
@0x0936
Oct 29 2016 20:13
no need to keep reposting - I have it open already ;)
Aaron Bell
@awb715
Oct 29 2016 20:13
okay haha
i mean if i copy what fcc has in my codepen it works, but when i do itmanually from w3 school, it doesnt
Robert Richey
@0x0936
Oct 29 2016 20:13
@awb715 and, still need to call getLocation() defining the function will not also call it
Aaron Bell
@awb715
Oct 29 2016 20:14
there we go
jeez
thatsbeen bothering me
thanks @0x0936
CamperBot
@camperbot
Oct 29 2016 20:14
awb715 sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1761 | @0x0936 |http://www.freecodecamp.com/0x0936
Robert Richey
@0x0936
Oct 29 2016 20:14
:+1:
Will
@wbrennan899
Oct 29 2016 20:14
@FreddieFO you could use JS to do .onclick() if you make it a button
Aaron Bell
@awb715
Oct 29 2016 20:23
 function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else{
    $("#location").html("Location isn't available")
  }// if location  isnt available, 

} 

 function showPosition(position){
   $("#location").html("Longitude: "+ position.coords.longitude+  "Latitude: " + position.coords.latitude)
 }
@0x0936 they else part doesnt work
Will
@wbrennan899
Oct 29 2016 20:30
Is there something I need to change in codepen for the OpenWeather API call to work?
Aaron Bell
@awb715
Oct 29 2016 20:30
@wbrennan899 im wokring on the same thing, but i havent started setting up the API
Hernan De Andres
@hernanfda
Oct 29 2016 20:32
@andrewnaumann how do i do that? because without the padding it look very small in the normal computer browser
Will
@wbrennan899
Oct 29 2016 20:37
@awb715 The issue I was having was codeine wasn't allowing my API call to go though. You need to get rid of the 's' in https://codepen.io/....
so, it might not have anything to do with your code if you are getting an error
Adolfo Saenz
@AdoSae1
Oct 29 2016 20:41
guys how does one add a thumbnail
Aaron Bell
@awb715
Oct 29 2016 20:43
i see
so load the page like http://...etc
this is gonna be my first time setting up an api
Will
@wbrennan899
Oct 29 2016 20:45
@awb715 Yeah, nothing to do with your code, you just make sure your pen is loaded with http rather than https
Aaron Bell
@awb715
Oct 29 2016 20:45
do you reccomend i set up the design or api first @wbrennan899
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 20:46
@AdoSae1 what about an image-tag?
Will
@wbrennan899
Oct 29 2016 20:47
@awb715 It doesn't really matter. What I did was set up a rough version of the interface layout and then worked on the Javascript part
Adolfo Saenz
@AdoSae1
Oct 29 2016 20:48
i get more or less the code to make the thumnail but the picture i want to make my thumbnail is on my computer but when i link it in my image tag it doesnt show it
@Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 20:50
can you show us the code? @AdoSae1
Adolfo Saenz
@AdoSae1
Oct 29 2016 20:53
<a href="https://codepen.io/AdoSae/pen/jrRNgg" action="_blank"><img src="aldothumb.png" alt="aldo thumnail"></a>
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 20:54
@AdoSae1 is the picture in the same folder?
Adolfo Saenz
@AdoSae1
Oct 29 2016 20:54
what do you mean?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 20:55
your src seems like it is in the same folder. Else you would need a more specific path
and also I'd use target="_blank" on your link :)
Aaron Bell
@awb715
Oct 29 2016 20:56
ihave no idea how to set up an api to be honest
@wbrennan899
Freddie O
@FreddieFO
Oct 29 2016 20:58
@wbrennan899 I made it a button and it works! Thank you!
CamperBot
@camperbot
Oct 29 2016 20:58
freddiefo sends brownie points to @wbrennan899 :sparkles: :thumbsup: :sparkles:
:cookie: 245 | @wbrennan899 |http://www.freecodecamp.com/wbrennan899
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:00
@awb715 Well, first search for an api which fits to your need. Then you'll need something like
$.getJSON(yourApiUrl)
   .done(function(response) {
      console.log(response);
}).fail(function() {
   console.log("fail");
});
Will
@wbrennan899
Oct 29 2016 21:03
@Otto-AA Do you need the .done? I did without it. I used $.getJSON(url,callback).error(). Any reason you used .fail()?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:05
@wbrennan899 no, I don't think so. I also saw things like $.getJSON(url, function(e) { ... }); and they worked, but I find this version pretty clear
Aaron Bell
@awb715
Oct 29 2016 21:05
@wbrennan899 whats homebrew?
@Otto-AA would responsecarry the data from the api?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:06
@awb715 yup
Aaron Bell
@awb715
Oct 29 2016 21:06
thanks @Otto-AA
CamperBot
@camperbot
Oct 29 2016 21:06
awb715 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @otto-aa |http://www.freecodecamp.com/otto-aa
Taras Yaremkiv
@Y-Taras
Oct 29 2016 21:10
Hello! I'm working on the Simon GAme project. ANy idea's why the game get into infinite loop, as far as I get it -
https://codepen.io/Y-Taras/pen/gwEBXv
Will
@wbrennan899
Oct 29 2016 21:11
@awb715 homebrew is for downloading packages, but you won't need it since all the code is in codepen. Why do you ask?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:11

@wbrennan899 Not sure about using error and success though:

"The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead."

from http://api.jquery.com/jQuery.getJSON/

Will
@wbrennan899
Oct 29 2016 21:12
@Otto-AA thanks
CamperBot
@camperbot
Oct 29 2016 21:12
wbrennan899 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @otto-aa |http://www.freecodecamp.com/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:12
@wbrennan899 You're welcome :)
Will
@wbrennan899
Oct 29 2016 21:19
:)
Hernan De Andres
@hernanfda
Oct 29 2016 21:24
hey guys! im finishing my portfolio project, but i can't make the stackable effect when i resize the screen, everything just get smaller instead of stacking elements, any suggestion?
Robert Richey
@0x0936
Oct 29 2016 21:25
@awb715 that else will only trigger when the global, window object does not have navigator.geolocation defined. I suspect what you're trying to do is check if the user blocks geolocation? pass in a second argument to .getCurrentPosition() as a function that runs when geolocation is blocked. below is a contrived exampled, but illustrates the optional error callback function
function success(position) {
  // user allowed geolocation
}

function error() {
  // user blocked geolocation
}

navigator.geolocation.getCurrentPosition(success, error)
Will
@wbrennan899
Oct 29 2016 21:28
@hernanfda You used col-xs-4 for your projects, so I believe that means they won't stack on an xs screen. Maybe use col-md-4 and col-xs-12
Robert Richey
@0x0936
Oct 29 2016 21:30
^ col-xs-12 is implied and doesn't need to be explicit. any screen width smaller than col-md will result in stacking columns, full width
Will
@wbrennan899
Oct 29 2016 21:31
But if you are using col-xs-4, they won't stack on a small screen, right?
So, he just needs to use col-md-4 or something like that?
Robert Richey
@0x0936
Oct 29 2016 21:32
@wbrennan899 I was referencing your example of Maybe use col-md-4 and col-xs-12
@wbrennan899 that's right. col-xs-4 will not stack
Will
@wbrennan899
Oct 29 2016 21:34
@0x0936 thanks, @hernanfda replace col-xs-4 with col-md-4 and they should stack :)
CamperBot
@camperbot
Oct 29 2016 21:34
wbrennan899 sends brownie points to @0x0936 and @hernanfda :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @hernanfda |http://www.freecodecamp.com/hernanfda
:star2: 1762 | @0x0936 |http://www.freecodecamp.com/0x0936
Mohamed Osama Khan
@Assaonator
Oct 29 2016 21:41
why is the run button missing in codepen... anybody? or is that normal?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 29 2016 21:41
@Assaonator you can set auto-update, so everytime you change something it will update or manually update with a button
Mohamed Osama Khan
@Assaonator
Oct 29 2016 21:42
ohhh ok
thanks @Otto-AA
CamperBot
@camperbot
Oct 29 2016 21:42
assaonator sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @otto-aa |http://www.freecodecamp.com/otto-aa
Hernan De Andres
@hernanfda
Oct 29 2016 21:50
@wbrennan899 hey man! thats it! it is working now! thank you
CamperBot
@camperbot
Oct 29 2016 21:50
hernanfda sends brownie points to @wbrennan899 :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @wbrennan899 |http://www.freecodecamp.com/wbrennan899
Will
@wbrennan899
Oct 29 2016 21:51
Wooh!
Hernan De Andres
@hernanfda
Oct 29 2016 21:54
@wbrennan899 the only thing left is that the navbar is not working when i open it from my iPhone, what do you think about that?
Will
@wbrennan899
Oct 29 2016 22:06
@hernanfda It does the sandwich thing for me
Looks fine
J4yKay
@J4yKay
Oct 29 2016 22:07
hey guys, so I made a website where I ask users for information, but I;m not sure how to store this information so that I can do calculations on their input
how would i implement this?
Hernan De Andres
@hernanfda
Oct 29 2016 22:08
@wbrennan899 yes, but try to click in the links, the sandwich is ok but the links don`t
Will
@wbrennan899
Oct 29 2016 22:10
Ahh, I see...
I'm stumped
Maybe put the navbar in the container?
Is ".navCollapseMenu" your own class?
vakio
@vakio
Oct 29 2016 22:13
ice cream sandwich?
Robert Richey
@0x0936
Oct 29 2016 22:13
@wbrennan899 welp, turns out there is a benefit to including col-xs-12, as it adds left and right padding. I have always avoided adding that class, but now the option is open. I learned something, thanks :)
CamperBot
@camperbot
Oct 29 2016 22:13
0x0936 sends brownie points to @wbrennan899 :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @wbrennan899 |http://www.freecodecamp.com/wbrennan899
Will
@wbrennan899
Oct 29 2016 22:15
@0x0936 haha cool, good to know! My error benefitted us both!
thanks @wbrennan899!
CamperBot
@camperbot
Oct 29 2016 22:16
sorry wbrennan899, you can't send brownie points to yourself! :sparkles: :sparkles:
Will
@wbrennan899
Oct 29 2016 22:16
haha
Hernan De Andres
@hernanfda
Oct 29 2016 22:16
@wbrennan899 yes, it is my own class.. but the links work in any web browser, the issue is with my phone
Will
@wbrennan899
Oct 29 2016 22:16
It doesn't work on my phone either
Hernan De Andres
@hernanfda
Oct 29 2016 22:26
its weird, i don't know what is the problem as in the browser works smoothly
Jarod Spiewak
@Memj
Oct 29 2016 22:26

Could someone take a look at my project? It no longer works and I don't know why.

This is the Twitch API that I completed and it worked file about a month ago. Haven't touched it since, went back to look at it and apparently every account no longer exists?

http://codepen.io/memj/pen/XdqEYq?editors=0010

Walid Ashri
@walidashri
Oct 29 2016 22:41
@Memj the api has changed
Jarod Spiewak
@Memj
Oct 29 2016 22:53
I saw, I fixed it now, thanks
Ben Line
@Benwebdev
Oct 29 2016 23:12
Here to help with frontend if anyone needs it :D.
cameron nicklaus
@camnicklaus
Oct 29 2016 23:25
@Memj looks like you've got one online.
@Memj I just finished mine and most of those accounts don't stream anymore. your api call is for streams, so they'll mostly show up offline
Islam Ibakaev
@dagman
Oct 29 2016 23:35
hey guys working on recipe app have made a lot of work. need to add auth stuff.
this is how it looks at the moment https://yourecipes.herokuapp.com/
test it out and give your thoughts.
Andrew Naumann
@andrewnaumann
Oct 29 2016 23:35
@hernanfda sorry for the late reply, study about "Media Queries" they allow you to have CSS rules apply at certain widths
Ben Line
@Benwebdev
Oct 29 2016 23:39
@dagman having a look now :D.
Islam Ibakaev
@dagman
Oct 29 2016 23:42
@Benwebdev does it works correct? any bugs?
NajahA21
@NajahA21
Oct 29 2016 23:50
need help! :worried: Currently on the build a tribute page challenge. Cannot figure out how to make images responsive
Ben Line
@Benwebdev
Oct 29 2016 23:50
@NajahA21 Hey :D, link me to your challenge.
bootstrap right? @NajahA21
NajahA21
@NajahA21
Oct 29 2016 23:53
@Benwebdev http://codepen.io/NajahA/pen/KgjaWE Yes! thanks!
CamperBot
@camperbot
Oct 29 2016 23:53
najaha21 sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @benwebdev |http://www.freecodecamp.com/benwebdev
Ben Line
@Benwebdev
Oct 29 2016 23:56
@NajahA21 Ya your using bootstrap.
NajahA21
@NajahA21
Oct 29 2016 23:56
yes @Benwebdev
Ben Line
@Benwebdev
Oct 29 2016 23:56
@NajahA21 to make images responsive in bootstrap you use the bootstrap class img-responsive
<img class="img-responsive" src="http://2.bp.blogspot.com/-PU60V0WVeWw/Ub9q7IMq4wI/AAAAAAAAAr0/JBKk7VGRWi4/s400/BalenciagaCristobalEveningDress4.jpg" alt="img2"></img>
@NajahA21 Like this.
NajahA21
@NajahA21
Oct 29 2016 23:57
@Benwebdev i tried that but when i add the class the images move out of position and overlap
i think the problem is in my div class row but not sure
Ben Line
@Benwebdev
Oct 29 2016 23:59
@NajahA21 Send me your challenge link please