These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Jan 2017
Adel
@AdelMahjoub
Jan 15 2017 00:11
@solimansara you can take a screenshot
@solimansara tu peux faire une capture d'écran, enregistrer l'image puis l'ajouter dans ton portfolio
Sara Soliman
@solimansara
Jan 15 2017 00:16
thank you @AdelMahjoub
CamperBot
@camperbot
Jan 15 2017 00:16
solimansara sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Jan 15 2017 00:17
you are welcome
Robin
@LuckyRabbits
Jan 15 2017 00:18
@bigerboy654 I like the light grey vertical rectangle that spans the length of the page. What line of code was used for that?
Ken Haduch
@khaduch
Jan 15 2017 00:18
@bigerboy654 - the tribute page looks good. Nice work!
Johnny
@JohnnyBizzel
Jan 15 2017 00:20
@bigerboy654 "click here" links are not accessibility compliant.
Ken Haduch
@khaduch
Jan 15 2017 00:20
@LuckyRabbits - if it is bootstrap, it could be a jumbotron (a bootstrap class) or a well (another bootstrap class)
Robin
@LuckyRabbits
Jan 15 2017 00:22
Yes! that is good to hear because I had a hunch the jumbotron might be involved. My script-reading skills are improving.
Icah Banton
@remdata
Jan 15 2017 00:42
Hello. Can someone please take a look at the following and tell me what to do to get it to work? http://codepen.io/ibanton/pen/wgWZdJ
William Cross
@williamtech814
Jan 15 2017 00:46
ty @Reggie01
CamperBot
@camperbot
Jan 15 2017 00:46
williamtech814 sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @reggie01 |http://www.freecodecamp.com/reggie01
Ken Haduch
@khaduch
Jan 15 2017 00:55
@remdata - if you check your browser console, you might see an error such as this: pen.js:24 getCurrentPosition() and watchPosition() no longer work on insecure origins. - loading on http:// in Chrome will no longer get you the location information. There is a note somewhere in the wiki on ways to solve this or alternate solutions - one of them is using IP address location information (less accurate, but doesn't have the https:// requirement) from http://ip-api.com (if my memory serves correctly) - you can try that or investigate other alternatives. http://ip-api.com/docs/api:json has the documentation on the JSON API for that.
Icah Banton
@remdata
Jan 15 2017 01:03
@khaduch . I did not get any error.
Ken Haduch
@khaduch
Jan 15 2017 01:05
@remdata - if you are using FireFox, you might not get an error because (at my last check) they do not restrict geolocation on http:// - which browser are you using?
Icah Banton
@remdata
Jan 15 2017 01:13
@khaduch .Chrome
Ken Haduch
@khaduch
Jan 15 2017 01:17
@remdata - then you have to be seeing that error in the browser console - you have to open the devtools to see if, most likely.
Icah Banton
@remdata
Jan 15 2017 01:21
@khaduch. I ran the code during one of the exercise(#260) an it worked. The browser even asked if I would allow it to use/access my current location. I'm not sure why it is not working in my pen. But I do not see an error in the console.
@khaduch. Are there any options I need to set to get it to work?
Ken Haduch
@khaduch
Jan 15 2017 01:23

@remdata - the exercises are using https:// to access the geolocation data. If you change your code in your CodePen to have this, you should see the error if you load on http:// and not https://

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
      $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
    },
    function(positionError) {
      $("#data").html("This happened: " + positionError.message);
  });
}

it is just the geolocation code with the error function implemented to show the error message in your HTML panel.

@remdata - the only way you can get it to work in Chrome is to use https:// but when the openweather API will not work (the free version, that is) because that will only work via http:// You can use the http://ip-api.com/json API to get IP-based location information, but as I said above, that is not as accurate. There is a note in the wiki about other alternatives - I'll have to see if I can find it (either in the wiki or in the github issues list.)
Ken Haduch
@khaduch
Jan 15 2017 01:30
@remdata - here is the issue that freeCodeCamp/freeCodeCamp#9079 discusses problems with this and the openweather API via http:// - you might find what you need there?
Icah Banton
@remdata
Jan 15 2017 01:32
@khaduch . I will check it out.
Ken Haduch
@khaduch
Jan 15 2017 01:46
@remdata - one approach that you could take would be to extend the code that I put there with the error case, and if the geolocation call fails, you could fall back to the ip-api site for the location (perhaps notify the user that the location information is less accurate?) and then pass that to the openweather site for the location.
Or pick up on the suggestions in that issue that I posted. Good luck!
Icah Banton
@remdata
Jan 15 2017 01:56
@khaduch. I appreciate the help you provided but for now my head hurts. I will sleep on it and try again tomorrow. Thanks.
CamperBot
@camperbot
Jan 15 2017 01:56
remdata sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2275 | @khaduch |http://www.freecodecamp.com/khaduch
C
@engineerwithoutfear
Jan 15 2017 02:26
Sara Soliman
@solimansara
Jan 15 2017 03:21
How to create a "coming soon" image placeholder?
I guess I can add it as background image?
Is there any other way?
Alexis
@alexisgcn
Jan 15 2017 03:29
Hello guys, i need some help se
I made my random quote machine,but its dont know what to do that every quote have a transition of time
Ken Haduch
@khaduch
Jan 15 2017 03:56
@alexisgcn - you should be able to do some CSS or jquery or a combination, if you're talking about them fading in and out? Just google something like "fade text in and out with CSS and jquery".
Ken Haduch
@khaduch
Jan 15 2017 04:02
@solimansara - you could just go to a simple photo editor or even a text editor and create a document, and take a screenshot of it with the snipping tool (on windows) or however you'd do that on a mac, save to an image format and put it on a site where you can access it via http:// - dropbox, etc. Or google images for "coming soon" graphic? Something like this would come up: http://stockfresh.com/royalty-free-stock-photos/coming+soon - it says "royalty free", but you should investigate whether or not you can link to them, use them, etc.
Subroto
@Shub1427
Jan 15 2017 04:04

Hi Guys,

I have been researching on ReactJS for quite some time, but haven't figured out what's the good way of implementing it.
Found this Article, related to using ReactJS as Isomorphic Component. But my question is, "Is it good to use ReactJS on the Server Side, or Create APIs only and run react to render components in the Frontend?"

This question is for creating Website that r not Single Page!!

Samakifry
@samakifry
Jan 15 2017 05:24
Can someone help me with a HTML QQ?
Christopher Ryder
@cryder9898
Jan 15 2017 05:41
@alexisgcn look up setInterval()
Christopher Ryder
@cryder9898
Jan 15 2017 05:48
@solimansara create an img element with alt="coming soon" and give it a width and height
abhijith shenoy
@shenoyabhijith
Jan 15 2017 06:13
help
geolocation not working
abhijith shenoy
@shenoyabhijith
Jan 15 2017 06:21
whats the problem
Muhammad Hasham
@MohammadHasham
Jan 15 2017 06:35
blob
why is my image border not being inline with the image how can i make it so?
Darth Skywalker
@adityaparab
Jan 15 2017 06:57
@MohammadHasham see if you have padding on the image
Chiu Yong
@chiuyong
Jan 15 2017 07:01
hello
i need help
is someone there?
Ananda Johnson
@Sovember
Jan 15 2017 07:09
hey guys does anyone know how to properly use php in an html website file? I have an html file and i'm putting php in the same file to validate a contact form. I changed the index.html to index.php and uploaded it to the host website i'm using, but when I add any php it breaks? Any suggestions?
Lester
@rlesterd
Jan 15 2017 07:18
Hey everyone, I'm working on the random quote project. Have my layout etc done but not sure how to get the "New Quote" button to function. I'm guessing I need to add jQuery with some kind of onClick function but any guidance will help. Also is there a site that you are using for the random quote api?
Here is what I have so far http://codepen.io/rlesterd/pen/VPjgPb
Tyrantt47
@Tyrantt47
Jan 15 2017 07:35
hey guys: just finished my first project (tribute page). I would love some constructive criticism if you wouldnt mind :) https://codepen.io/Tyrantt47/pen/xgOQRp
Coy Sanders
@coymeetsworld
Jan 15 2017 07:37
img link doesn't work @Tyrantt47, codepen blocks imgur so you need to find another host
also what should the like button do?
Shea Fitzek
@sheafitzek
Jan 15 2017 07:41
Feedback needed for my Tribute Page .
link
Thanks in advance.
abhijith shenoy
@shenoyabhijith
Jan 15 2017 07:43
@shenoyabhijith
how to make a request to weather api
with latitude and longitude
hers mycode
Tyrantt47
@Tyrantt47
Jan 15 2017 07:49
@coymeetsworld weird, it works for me when i click the image link. I set target="_blank" so that it would open in a new tab.
and the like button does nothing since they havent shown how to make buttons do things yet. so i wasnt sure how to make it do anything
this is the first project of fcc, so ive only been coding for a couple days now.
Coy Sanders
@coymeetsworld
Jan 15 2017 07:55
@Tyrantt47 you probably have the image cached in your browser, but imgur is definitely blocked from codepen
no big deal on the button, i would just remove it for now if it doesn't do anything. You'll have a chance to create a social media button on the twitter app
Tyrantt47
@Tyrantt47
Jan 15 2017 07:57
@shea-butter your page is a lot better than mine. where do you get more info on how to use the stylesheets?
Muhammad Hasham
@MohammadHasham
Jan 15 2017 07:57
how can i place some text over a fixed background it is always coming below the background?
MacGuffin
@MacGuffin1990
Jan 15 2017 08:00
hello guys who can tell me why i can not get the imghttp://codepen.io/MacGuffin1990/pen/MJKqXM
Sorin Ruse
@sorinr
Jan 15 2017 08:00
@shea-butter i would center page the quote below img. :+1:
Muhammad Hasham
@MohammadHasham
Jan 15 2017 08:01
how can i place text over my fixed background
 <div class = "row">
    <div class = "col-md-12 col-xs-12">
        <div class = "container-one">
            <div class="background-one">
            <img src="images/background-one.jpg"/>

            <!--This is snippet-->

                   <div class = "row">
                    <div class = "col-md-4 col-xs-4 col-md-offset-2">
                        <div class="container-opacity">
                            <h3>"Let food by thy medicene and medicene be thy food"</h3>
                            </div>
                    </div>
                    </div>
                    <!---->

            </div>
        </div>    
    </div>
</div>
@sorinr
Tyrantt47
@Tyrantt47
Jan 15 2017 08:03
@MacGuffin1990 i could be wrong, but shouldnt there be a link in the src?
<img src=""alt="weather img"></div>
MacGuffin
@MacGuffin1990
Jan 15 2017 08:04
js
@Tyrantt47 i made it in javascript
Tyrantt47
@Tyrantt47
Jan 15 2017 08:05
gotcha. havent gotten that far yet :")
Sorin Ruse
@sorinr
Jan 15 2017 08:05
@MohammadHasham something like example
MacGuffin
@MacGuffin1990
Jan 15 2017 08:06
now i have fixed it,but i do not know the reason
Muhammad Hasham
@MohammadHasham
Jan 15 2017 08:07
@sorinr thanks, but is there a way to place a container there?
CamperBot
@camperbot
Jan 15 2017 08:07
:star2: 1081 | @sorinr |http://www.freecodecamp.com/sorinr
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Tyrantt47
@Tyrantt47
Jan 15 2017 08:10
looking at @shea-butter tribute page has me wondering. he did a lot of things that werent taught in the prior lessons, is this from research/prior knowledge or is there another tribute page further along? https://codepen.io/shea_butter/pen/RaBJxg
protokol0
@mandaputtra
Jan 15 2017 08:13
helo, can someone tell me how to make red bold text in paragraph? should i declare a class in <b> element or i should use <span> nested the <b> element?
not working api
Sorin Ruse
@sorinr
Jan 15 2017 08:58
@MohammadHasham you can try to apply that css instead of h3 to a parent container of h3
Shea Fitzek
@sheafitzek
Jan 15 2017 09:05
@Tyrantt47 I honestly just googled A LOT. css-tricks is a great resource for css & I found a list of all bootstrap classes with examples.
@sorinr Thanks for the feedback...I'll see how that looks.
CamperBot
@camperbot
Jan 15 2017 09:08
shea-butter sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1082 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 15 2017 09:10
@shenoyabhijith this function(weather) return an object. look into the console. you cannot use it like document.getElementById("cntnt").innerHTML = weather;
Sorin Ruse
@sorinr
Jan 15 2017 09:15
@shenoyabhijith and i also think the api url is not the right one in order to retrieve the weather. as it is now it only retrieve a location object. better check again the api docs
Arvind Natarajan
@Arvin6
Jan 15 2017 09:19
I need help with my code
Can someone take a look?
I/m in the Wiki viewer exercise
And have trouble with Json
?
uriznik
@uriznik
Jan 15 2017 09:36
what's the url
John Alcher
@alchermd
Jan 15 2017 10:28
So I have a function that I want to run 3x. How do I do that? See init():
class SimonGame{
    ......
    init(){
        /** Run this.flash() 3x */
    }

    /** Flashes the buttons. */
    flash(){
        $(".box").addClass("highlighted").delay(1000).queue(function(){
            $(this).removeClass("highlighted");
        });
    }
}
Sorin Ruse
@sorinr
Jan 15 2017 10:40
@shenoyabhijith here how you can do it: weather
Islam Ibakaev
@dagman
Jan 15 2017 10:42
what does this line do new Date().setDate((new Date()).getDate() - 160)
uriznik
@uriznik
Jan 15 2017 11:03
@dagman it might be getting the date 160 days ago
abhijith shenoy
@shenoyabhijith
Jan 15 2017 11:30
how to insert a image url from api to html
slobns
@slobns
Jan 15 2017 11:42
Wikipedia Viewer... when I click on search, URL appears before results(for a moment ) and my errorMessage doesn`t work ... if someone had such an experiance ... https://codepen.io/slobns/pen/MJjKBB
Srđan Međo
@PerpetualWar
Jan 15 2017 12:03
anyone can help with this regex ? replace(/\s+[.,\/#!$%\^&*;:{}=-_`~()]/g, "")
I wanna remove spaces, punctuations and symbols
but its no goo
good*
help is appreciated
CamperBot
@camperbot
Jan 15 2017 12:04
no wiki entry for: is appreciated
Rahul Yedida
@yrahul3910
Jan 15 2017 12:04
The \s+ in the beginning means that the pattern you search for must have whitespace in the beginning, not necessarily what you're looking for.
Srđan Međo
@PerpetualWar
Jan 15 2017 12:05
hm correct
but I still need to remove all spaces
Rahul Yedida
@yrahul3910
Jan 15 2017 12:05
Try \s+? instead
Srđan Međo
@PerpetualWar
Jan 15 2017 12:06
ok will check it out
Rahul Yedida
@yrahul3910
Jan 15 2017 12:06
You can always try out your regular expressions at regexr.com
It even shows you what each part means :)
Srđan Međo
@PerpetualWar
Jan 15 2017 12:07
thats actually great stuff :)
will test it there , thanks man
didnt know about that site
Rahul Yedida
@yrahul3910
Jan 15 2017 12:07
Welcome :)
Srđan Međo
@PerpetualWar
Jan 15 2017 12:07
;)
asafofer
@asafofer
Jan 15 2017 12:09
i cant get openweather api to work on chrome
can anyone help?
'''if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myurl = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=82ebbd289686f95ab66441437bda5ff7"
$.getJSON(myurl, function(json) {
$("#city").html(JSON.stringify(json));
});'''
CamperBot
@camperbot
Jan 15 2017 12:10
:bulb: to format code use backticks! ``` more info
asafofer
@asafofer
Jan 15 2017 12:10
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var long = position.coords.longitude; var myurl = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=82ebbd289686f95ab66441437bda5ff7" $.getJSON(myurl, function(json) { $("#city").html(JSON.stringify(json)); });
Sander Berntsen
@sbxn14
Jan 15 2017 12:20
http://codepen.io/sbxn14/pen/qRNKOZ how do I make it so the quote gets added to the twitter box once I press the twitter button? http://codepen.io/sbxn14/pen/qRNKOZ
Srđan Međo
@PerpetualWar
Jan 15 2017 12:33

ok, I have found proper regex but my code is not working properly:

`function palindrome(str) {

var pal = str;

pal.replace(/[\W_]/g, "");
pal.toLowerCase();

var arr = pal.split("");
arr.reverse();
var pal2 = arr.join("");

if(pal2 === pal){
return true;
}
else{
return false;
}

}
palindrome("eye");`

any idea why ?
artjia
@artjia
Jan 15 2017 12:46
guys I don't understand why this line "$(".test").html(printData);" did not get executed within my code http://codepen.io/artjia/pen/Kagdzp?editors=1111
can someone help to take a look
Sara Soliman
@solimansara
Jan 15 2017 12:59
Can someone please explain to me why my css- #portfolio thumbnail and #portfolio caption doesn't work? http://codepen.io/Solimansara/pen/YNzXJp?editors=1100
Darth Skywalker
@adityaparab
Jan 15 2017 13:02

@solimansara you will have to do

#portfolio .thumbnail{

and

#portfolio .caption {
you're missing . before thumbnail and caption.
Sorin Ruse
@sorinr
Jan 15 2017 13:02
@artjia instead of for (var i = 0; i < channelName.length; i++) use chanelName.forEach()
Darth Skywalker
@adityaparab
Jan 15 2017 13:02
you've applied these as classes, so you need . before them
artjia
@artjia
Jan 15 2017 13:03
ok thanks @sorinr
CamperBot
@camperbot
Jan 15 2017 13:03
artjia sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1083 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 15 2017 13:03
@artjia for loop will iterate the array but will not wait for the asynchronous responses to arrive
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:04
i have an wrapper that i am using on a background with a fixed position.But i don't want it to drag when the page scrolls.But as soon as i remove the position:fixed attribute the wrapper comes below the background?How can i make it to not drag when the screen scrolls?
@sorinr @adityaparab
Sara Soliman
@solimansara
Jan 15 2017 13:06
Thanks @adityaparab
CamperBot
@camperbot
Jan 15 2017 13:06
solimansara sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 849 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Jan 15 2017 13:07
@MohammadHasham do you have pen where I can see this problem?
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:07
unfortunately,it is on my local machine
@adityaparab
is there any attrib. i can use instead of fixed to remove the problem!
Sorin Ruse
@sorinr
Jan 15 2017 13:08
@MohammadHasham what is dragging when you scroll?
Darth Skywalker
@adityaparab
Jan 15 2017 13:08
@MohammadHasham these things depend largely on the context you use these properties/attributes in
so it's hard to make any reasonable guess
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:09
@sorinr my container which has a fixed position
@adityaparab if i send you my css ?
Darth Skywalker
@adityaparab
Jan 15 2017 13:10
better yet, craete a codepen!
@MohammadHasham
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:12
blob
Sorin Ruse
@sorinr
Jan 15 2017 13:13
@MohammadHasham an element with a fixed position will stay the same position no matter of the scroll of your viewport. it should be visible in the viewport all the time at the exact same position. maybe your background image-position is not fixed so it scrolls away along with all other content
@MohammadHasham a link to an example of what u wanna achieve will be helpful to guide you
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:15
@sorinr okay thanks
@adityaparab
CamperBot
@camperbot
Jan 15 2017 13:15
mohammadhasham sends brownie points to @sorinr and @adityaparab :sparkles: :thumbsup: :sparkles:
:star2: 1084 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 850 | @adityaparab |http://www.freecodecamp.com/adityaparab
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:16
you are really a pro! man it worked really fine @sorinr
i made both fixed now
Sorin Ruse
@sorinr
Jan 15 2017 13:16
@MohammadHasham :+1:
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:17
it has been a year (off and on) but still i struggle at times
Sorin Ruse
@sorinr
Jan 15 2017 13:18
@MohammadHasham don't worry about that. more years of struggle will come :)
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:18
@sorinr Yeah!! maybe.
Ajith
@ajithvallabai
Jan 15 2017 13:28
@adityaparab eval() in js not responding could you help http://codepen.io/indian46/pen/Xpjdpr?editors=1011
guys could anyone help with eval() function ?
c0d0er
@c0d0er
Jan 15 2017 13:32
@toianw thanks!
CamperBot
@camperbot
Jan 15 2017 13:32
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave toianw points
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:39
every new elements being inserted is not coming below my fixed background instead it is overlapping the background? what would be the reason?
@sorinr @adityaparab
do i need to give some top % or is there a better option?
@sorinr
Muhammad Hasham
@MohammadHasham
Jan 15 2017 13:44
why it is not moving with the document flow?
Anthony Hayes
@EgoDominusVos
Jan 15 2017 13:48
Random Quote Machine
User story #2 - I'm not registering for Twitter, have absolutely no use for this service except for this project.
What are my alternatives?
Darth Skywalker
@adityaparab
Jan 15 2017 14:02
@MohammadHasham can you upload your images to some host?
the images are not accessible since they're local to your machine
Muhammad Hasham
@MohammadHasham
Jan 15 2017 14:05
Darth Skywalker
@adityaparab
Jan 15 2017 14:09
@ajithvallabai : This is how your $('#eval').click should look
$('#eval').click(function() {
     var $input = $("input[type=text]");
     var result = $input.val();
     var last = eval(result);
     $input.val(last);
})
@MohammadHasham alright
now can you explain what is the problem here?
Muhammad Hasham
@MohammadHasham
Jan 15 2017 14:10
actually i figured that out @adityaparab Thanks
CamperBot
@camperbot
Jan 15 2017 14:10
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave adityaparab points
Darth Skywalker
@adityaparab
Jan 15 2017 14:10
@MohammadHasham very well
Anthony Hayes
@EgoDominusVos
Jan 15 2017 14:13
anyone?
Darth Skywalker
@adityaparab
Jan 15 2017 14:14
@EgoDominusVos none, I'm afraid
you can always delete your account later if its of no use
Anthony Hayes
@EgoDominusVos
Jan 15 2017 14:14
same with the forums ...
maybe it's time to just copypasta
Sara Soliman
@solimansara
Jan 15 2017 14:21
How come my #nav-bar in the css part doesnt work??? http://codepen.io/Solimansara/pen/YNzXJp?editors=1100
Darth Skywalker
@adityaparab
Jan 15 2017 14:25

@solimansara In your html

<div class="navbar-header id="nav-bar">

you're missing closing " before id. Change it to look like

<div class="navbar-header" id="nav-bar">
and it should work
Mostafa Masri
@thefakeweed
Jan 15 2017 14:32
heyy is this good ? should i continue or do something ?

<html>

<font align="center"size="24" style="bold">Bill Gates</font>
<h2 class="text-center"><em>The man who created Microsoft</em></h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Bill_Gates_June_2015.jpg" alt="William Henry Bill Gates III born October 28, 1955 is an American business magnate, entrepreneur investor author and philanthropist">
<p align="center">William Henry Gates III
October 28, 1955 (age 61)</p>

Sara Soliman
@solimansara
Jan 15 2017 14:35
Ok thank you @adityaparab. And how to change the font of the nav-bar links only???
CamperBot
@camperbot
Jan 15 2017 14:35
solimansara sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 852 | @adityaparab |http://www.freecodecamp.com/adityaparab
Soumyojyoti Majumdar
@SoumyoNawab8
Jan 15 2017 14:36
guys need help....please goto this following link and in the textbox type any name or any thing....it will create and image of that alphabets or the thing written in that textbox ...and when you will put your mouse cursor on that image it will animate ....I am almost done but there is one bug...please check the problem first.... http://soumyoworkshop.xtgem.com/
anyone???
Darth Skywalker
@adityaparab
Jan 15 2017 14:38
@solimansara like this ?
.navbar ul.nav li a {
  /* CSS properties here */
}
not working
css background
@adityaparab
Chwihan
@Chwihan
Jan 15 2017 14:53
Don't suppose anyone knows why I'd be getting this error: GET https://ip-api.com/json net::ERR_CONNECTION_REFUSED
Darth Skywalker
@adityaparab
Jan 15 2017 15:00
@shenoyabhijith no idea
abhijith shenoy
@shenoyabhijith
Jan 15 2017 15:00
@adityaparab
i fixed it problem with hosting
Darth Skywalker
@adityaparab
Jan 15 2017 15:01
@shenoyabhijith :+1:
abhijith shenoy
@shenoyabhijith
Jan 15 2017 15:01
i need help in changing font color
here
and font
Milos Ratkovic
@Shadow032
Jan 15 2017 15:06

Hello guys, I need some at transforming JSON data to my HTML, here is the code:

$(document).ready(function() {
    $(".getQuote").on("click", function() {
      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(json) {
         //$(".message").html(JSON.stringify(json));
        var quoteTextHtml = "";
        var quoteAuthorHtml = "";
        json.forEach(function(val) {
          quoteTextHtml += "<i class='fa fa-quote-right quote'></i>" + val.quoteText;
          quoteAuthorHtml += "- " + val.quoteAuthor;
        });
        $(".message").html(quoteTextHtml);
        $(".author").html(quoteAuthorHtml);
      });
    });
  });

The JSON i get back is formated like
{
"quoteAuthor": "...." ;
"quoteText": "...." ;
"quoteAuthor": "...." ;
"quoteText": "...." ;
}

I can send you my CodePen link if you need it.

Sorin Ruse
@sorinr
Jan 15 2017 15:16
@Shadow032 u don't need the foreach function. just reffer the response like json.quoteText or json.quoteAuthor and thats it
Milos Ratkovic
@Shadow032
Jan 15 2017 15:18
@sorinr Thanks man, I dont know why did I actually use forEach... I mean it makes no sense. Thanks!
CamperBot
@camperbot
Jan 15 2017 15:18
:star2: 1085 | @sorinr |http://www.freecodecamp.com/sorinr
shadow032 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 15 2017 15:18
@Shadow032 welcome
Milos Ratkovic
@Shadow032
Jan 15 2017 15:19
I got it working now :+1:
Sorin Ruse
@sorinr
Jan 15 2017 15:21
@Shadow032 good :+1:
Sander Berntsen
@sbxn14
Jan 15 2017 15:24
document.getElementById( "tweet-container" ).href = 'https://twitter.com/intent/tweet?text=' + randomQuote; .. the link this applies to just leads back to me site. what did I Do wrong?
Sorin Ruse
@sorinr
Jan 15 2017 15:25
@sbxn14 add to the a link target="_blank"
Sander Berntsen
@sbxn14
Jan 15 2017 15:26
already got that on the anchor itself
Sorin Ruse
@sorinr
Jan 15 2017 15:28
@sbxn14 as you are not loading any quote at page load your href is will be just without randomQuote that is empty
Sander Berntsen
@sbxn14
Jan 15 2017 15:29
how do I fix that then
oh changed it to quotes[randomNumber] now it atleast copeis the thing but how do I make it so I have a quote when the site loads
Sorin Ruse
@sorinr
Jan 15 2017 15:31
@sbxn14 try to put your logic of getting a new quote into a function like: function getQuote(the logic in here) and call this function both on doc ready and on button click event
Sander Berntsen
@sbxn14
Jan 15 2017 15:34
uh
Sorin Ruse
@sorinr
Jan 15 2017 15:35
@sbxn14 just add this to js: window.onload = newQuote();
Sander Berntsen
@sbxn14
Jan 15 2017 15:35
ah got it :D
just added $() to it
the function between the ()
Sorin Ruse
@sorinr
Jan 15 2017 15:37
@sbxn14 do not mix jquery with vanilla javascript. if you went for vanilla js just use the window.onload as above
Sander Berntsen
@sbxn14
Jan 15 2017 15:37
okay will do
where do i place your . code?
under the function?
in the function?
Sorin Ruse
@sorinr
Jan 15 2017 15:41
@sbxn14 at the bottom of all your js code
Sander Berntsen
@sbxn14
Jan 15 2017 15:41
kay
sweet it works :D thanks! @sorinr
CamperBot
@camperbot
Jan 15 2017 15:42
sbxn14 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1086 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 15 2017 15:42
@sbxn14 welcome
Ghulam Shabir
@ghulamshabir
Jan 15 2017 15:55
Hello guys, can anyone tell me a good resource for learning web designing which can be used after learning html/css/js
Milos Ratkovic
@Shadow032
Jan 15 2017 16:01
Hey, It's me again, how do I pass data to the new page I open by clicking twitter button, here's the code:
     $(document).ready(function() {
    $(".getQuote").on("click", function() {
      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(json) {

        var quoteTextHtml = "";
        var quoteAuthorHtml = "";

          quoteTextHtml = "<i class='fa fa-quote-right quote'></i>" + json.quoteText;
          quoteAuthorHtml = "- " + json.quoteAuthor;

        $(".message").html(quoteTextHtml);
        $(".author").html(quoteAuthorHtml);
      });
    });
    $(".twitter").on("click", function() {
      window.open("https://twitter.com/intent/tweet?text=" + quoteTextHtml + "   " + quoteAuthorHtml);
    });
  });
Opening page works fine when I delete those 2 variables I just put.
And i could pass some random data with " " , but that's not what I want
Sorin Ruse
@sorinr
Jan 15 2017 16:04
@ghulamshabir i would just start googling for typography and color pallet trends. then look into the css animations. the rest its just your imagination :)
@Shadow032 make that 2 vars global
@Shadow032 mean place their declarations right after $(document).ready(function() {
Milos Ratkovic
@Shadow032
Jan 15 2017 16:07
Such a newbie mistakes, thanks a lot :)
did it :+1:
Sorin Ruse
@sorinr
Jan 15 2017 16:07
@Shadow032 welcome
Ghulam Shabir
@ghulamshabir
Jan 15 2017 16:08
@sorinr great! thanks :smile:
CamperBot
@camperbot
Jan 15 2017 16:08
ghulamshabir sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1087 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 15 2017 16:08
@ghulamshabir welcome
Milos Ratkovic
@Shadow032
Jan 15 2017 16:16
Hey can I just ask you one more question, If you have time to chek out my CodePen for random quote machine. So the CodePen navigation bar on top 'eats' my space and my background image. You can see that by resizing browser. Is there anyway I can fix that ? I assigned my background image to the <body>
Sorin Ruse
@sorinr
Jan 15 2017 16:17
@Shadow032 if you want to see your pen without codepen bar use debug version like http://codepen.io/Shadow032/debug/NdRWWZ/
Milos Ratkovic
@Shadow032
Jan 15 2017 16:19
Oh, yeah I see, so it gets eaten anyway, not just by the CodePen navigation bar but the browser window as well :d
Chwihan
@Chwihan
Jan 15 2017 16:26
http://codepen.io/Chwihan/full/RKGRxv/ can someone tell me if this works please, I can't get it to work over https for some reason
Suharto Wibowo
@SuhartoWibowo
Jan 15 2017 16:43
@Chwihan doesnt work on my browser too
Sorin Ruse
@sorinr
Jan 15 2017 16:45
@Chwihan its working. it will not work on https because both your api calls for location and weather are working only on http. don't know for the others but this $location.text(city + ", " + country); is more appropriate for me instead of $location.text(city + ", " + region);
Chwihan
@Chwihan
Jan 15 2017 16:51
Ah yeah, country probably makes more sense. If I change my api calls to https it doesn't work at all, is there any way to get around that?
Sorin Ruse
@sorinr
Jan 15 2017 16:52
@Chwihan as i said. those two apis are working only on http
@Chwihan if you want to use https along with navigator.geolocation(that works only on https) you will have to change your weather api to something like apixu.com or wunderground.com or any other api that support also calls over https for the free plan coz i suppose you don't wanna pay for using the api for this project :)
Sorin Ruse
@sorinr
Jan 15 2017 17:06
@Shadow032 i would add an if conditional to test if the author is empty and display "-Unknown" in that case, instead of leaving "-Author". and i would use both quotes in here like:
quoteTextHtml = "<i class='fa fa-quote-left quote'></i>" + justQuoteText+"<i class='fa fa-quote-right quote'></i>";
Sorin Ruse
@sorinr
Jan 15 2017 17:21
@Shadow032 yep that fa-quote-left/right doesn't work because i forgot that in font awesome their css syntax is fa:before for each icon. instead of using faw for that you can use .message:before and .message:after with content and styling you want
Alexis
@alexisgcn
Jan 15 2017 17:40
hello every one
i finish my random quote machine but i have a problem,i dont know how to make that my text have the same transition that the color has
here is my code
Bryan Paulson
@DelbertStinkfester
Jan 15 2017 17:50
Hello....I'm stuck on my Tribute page project.....Please Help!!!!!

Why won't this code center?

<div class="text-center">
<h1>The Charlotte Rose</h1>
<h3>Tribute Page</h3>
<img src="http://i63.tinypic.com/2yjtzjn.jpg" alt="Image and video hosting by TinyPic">
</div>

Tagir A
@Tagir-A
Jan 15 2017 17:54
@DelbertStinkfester
You'd better provide a link for your codepen, but my guess is, cause you need to use center-block class, not text-center
Arin
@arinarjani
Jan 15 2017 17:54
@DelbertStinkfester no need for a class of "text-center" when you can use "text-align: center" in your CSS.
Look into centering stuff with CSS on Google
Tagir A
@Tagir-A
Jan 15 2017 17:55
@arinarjani
good point. It actually depends on what results are expected.
since the class was applied to div I thought that it's not only about text
Arin
@arinarjani
Jan 15 2017 17:59
@Tagir-A center is center. CSS also allows for specific selecting as well based on elements and children. ( you probably already know this )
Amit Patel
@AmitP88
Jan 15 2017 18:00
hey guys, just wondering, is 600 lines of html code too much for a website? https://amitp88.github.io/Khmer-Family-Cafe/
I'm working on simplifying my code
Sorin Ruse
@sorinr
Jan 15 2017 18:00
@DelbertStinkfester just add in pen settings->css bootstrap lib
Tagir A
@Tagir-A
Jan 15 2017 18:01
@arinarjani Yeah, I agree on that.
Bryan Paulson
@DelbertStinkfester
Jan 15 2017 18:02
OMG....Thank you....I've been crying on the inside for hours
Sorin Ruse
@sorinr
Jan 15 2017 18:04
@DelbertStinkfester welcome
@DelbertStinkfester i would also add to that img the class="img-responsive" to make it shrink as the width of the display goes lower but you should also add this in css to recenter the img:
div.text-center img {
  display: block;
  margin: 0 auto;
}
Lloyd Ruskin
@lsruskin
Jan 15 2017 18:35
Hi people! How's this looking? https://codepen.io/lsruskin/full/EZKxWp/
Garrus Napp
@GarrusNapp
Jan 15 2017 18:36
@lsruskin pretty good, I'd center the image though
Deni Rustemovic
@deni86
Jan 15 2017 18:37
it's ok man, but you may add some customization with bootstrap colors
Robin
@LuckyRabbits
Jan 15 2017 18:37
@lsruskin Looks great! And having the image towards the middle of the page might look amazing. Play around with the placement.
Customizing the colors slightly could give the entire page some POP!
Deni Rustemovic
@deni86
Jan 15 2017 18:40
this is how i do it :)
I am usign css a lot for this and and little bootstrap
using*
Doegena Fennich
@Doegena
Jan 15 2017 18:42
http://codepen.io/Doegena/pen/pRydPP does someone know how to link the quote to facebook, thanks in advance
Alexis
@alexisgcn
Jan 15 2017 19:12
hey guys this is a short practice with css keyframes
Johnathan Mullen
@MrJkmullen
Jan 15 2017 19:41
I need my function to follow the Triangle Inequality rule...Need some assistance fixing the issue http://codepen.io/jkmullen/pen/ozVzwv
Sander Berntsen
@sbxn14
Jan 15 2017 20:19
hey for the weather app you gotta make. do you really HAVE to have backgrounds? as I had a whole design planned in my head before I saw that it requires you to have different backgrounds. or can I just use different colors? cause that would work waay better.
ehutchllew
@ehutchllew
Jan 15 2017 20:31
@sbxn14 No you don't. But you have to have something that shows the weather type. Just use the same API's icons.
Sander Berntsen
@sbxn14
Jan 15 2017 20:41
@ehutchllew alright sweet thanks
CamperBot
@camperbot
Jan 15 2017 20:41
:cookie: 352 | @ehutchllew |http://www.freecodecamp.com/ehutchllew
sbxn14 sends brownie points to @ehutchllew :sparkles: :thumbsup: :sparkles:
John Alcher
@alchermd
Jan 15 2017 21:30
Hello! Can someone please check out my JavaScript code? I'm wondering why I need 5 counts (see welcomeFlash method) to get 3 button flashes. Also, why does my flashButton method (triggered by clicking start) highlights the button but doesn't un-highlight it?
http://codepen.io/AlcherMD/pen/JEKzmB/
SkyHDuncan
@SkyHDuncan
Jan 15 2017 21:37
hey, how do i centre a heading? cheers
Greg D
@mosaic-greg
Jan 15 2017 22:05
@AmitP88 depends on if the user experience of your target customer is affected (eg fast loading is good)
GreatDewDrop
@GreatDewDrop
Jan 15 2017 22:17
@SkyHDuncan You can center a heading in html like so <h1 style="text-align: center">Your text</h1> or in CSS like so h1 { text-align: center; }
Luis Graterol
@luisgraterol
Jan 15 2017 22:38
@SkyHDuncan you can also add the bootstrap cdn and put <div class="text-center"><h1>Your text</h1></div>
Hey guys! Is anybody available? I need some help with the weather app project! I can't figure out whats wrong with my js code!
Is there anybody who has already finished it?
PLEASEE! I would really appreciate it!
Bardoe Bess
@bardbess
Jan 15 2017 23:03
try using https @SkyHDuncan https://codepen.io/luisgra/pen/egzjjG?editors=0010
Luis Graterol
@luisgraterol
Jan 15 2017 23:03
ignored
lol
Karweck
@Karweck
Jan 15 2017 23:13
Hey there^^ can someone help me align the Buttons on my site to the right of their container? http://codepen.io/Karweck/pen/OWMzPj
Bardoe Bess
@bardbess
Jan 15 2017 23:24
try adding float: right; white-space: nowrap; to .flat-buttons @Karweck
Karweck
@Karweck
Jan 15 2017 23:28
nice, thank you^^
Luis Graterol
@luisgraterol
Jan 15 2017 23:28
Hey guys! Is anybody available? I need some help with the weather app project! I can't figure out whats wrong with my js code!
Luis Villavicencio
@Tav0
Jan 15 2017 23:32
@luisgra what's wrong?
I can't figure out why the api isn't working!
Bardoe Bess
@bardbess
Jan 15 2017 23:37
maybe it is. have you tried calling it outside of the navigator.geolocation.getCurrentPosition function. just call it directly with a random lat/long. ive blocked my location so using navigator did not work for me @luisgra
Martine Ross
@moi238
Jan 15 2017 23:40
@luisgra it's because you're using geolocation to get the long and lat if you use something like ipinfo.io to get the details it'll work on http it's something to do with not being able to work cross origin from what I've read.
Luis Graterol
@luisgraterol
Jan 15 2017 23:44
how do I use the ipinfo.io API? @moi238
Martine Ross
@moi238
Jan 15 2017 23:46
http://codepen.io/moi238/pen/ggPpYB have a look at the code on mine and see if it'll help
@luisgra
Erd
@alboz1
Jan 15 2017 23:47
http://codepen.io/alboz/pen/pRbmeB?editors=0010
can someone help me why the data.stream === undefined not working?
Luis Villavicencio
@Tav0
Jan 15 2017 23:48
@luisgra you have navigator.geolocation empty
so it never goes inside your if statement
ops i mean it does, but it is an empty object
it doesn't have getCurrentPosition
check it out
Screen Shot 2017-01-15 at 6.50.30 PM.png
Bardoe Bess
@bardbess
Jan 15 2017 23:51
@luisgra http://ipinfo.io/developers/getting-started click on JQuery and it should give you everything you need for the api call
Luis Graterol
@luisgraterol
Jan 15 2017 23:52
OK! Let me try!
both things I mean! @Tav0 @bardbess
Erd
@alboz1
Jan 15 2017 23:53
can some one help me or nah
Luis Villavicencio
@Tav0
Jan 15 2017 23:53
@luisgra i'm sorry i was wrong
i misread the code
one sec
it could be that your browser doing https requests by force?
that was my main issue at the beginning with your code
if you are using an extension for https
remove it and try it again
Bardoe Bess
@bardbess
Jan 15 2017 23:55
navigator.geolocation returned for me. I used navigator.geolocation.getCurrentPosition(success_function, failed_function /*Weather.get_pos_by_ip*/) @luisgra @Tav0
Luis Villavicencio
@Tav0
Jan 15 2017 23:55
yea i didn't see that was a function
getCurrentPosition that is
Luis Graterol
@luisgraterol
Jan 15 2017 23:57
it doesn't work for me
Luis Villavicencio
@Tav0
Jan 15 2017 23:58
so i'm not familiar with that function but I get this when I browse using http instead of https
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.
Bardoe Bess
@bardbess
Jan 15 2017 23:58
@alboz1 whats up?
Luis Graterol
@luisgraterol
Jan 15 2017 23:58
I think I'll have to use ipinfo.io
Luis Villavicencio
@Tav0
Jan 15 2017 23:58
but https doesn't work with your api
Luis Graterol
@luisgraterol
Jan 15 2017 23:58
I got that too on my console! @Tav0
Erd
@alboz1
Jan 15 2017 23:59
can someone help me why the data.stream === undefined not working?
http://codepen.io/alboz/pen/pRbmeB?editors=0010 @bardbess