These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Jan 2017
Tyler Moeller
@TylerMoeller
Jan 10 2017 00:00
.replace() is vanilla JavaScript, not a jQuery method @gbsimon87
You would need to do something similar to this with jQuery:
  var newHTML = $('#talkButton').html().replace('Telephone:', '');
  $('#talkButton').html(newHTML);
@CoryCMyers You might need to add Bootstrap.js to the JavaScript section of your codepen settings. It's available in the quick-add dropdown.
Simon Cordova
@gbsimon87
Jan 10 2017 00:01
@TylerMoeller thank you very much
CamperBot
@camperbot
Jan 10 2017 00:01
gbsimon87 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1286 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Simon Cordova
@gbsimon87
Jan 10 2017 00:01
that worked like a charm
Tyler Moeller
@TylerMoeller
Jan 10 2017 00:01
Glad that helped :+1:
CoryCMyers
@CoryCMyers
Jan 10 2017 00:10
@TylerMoeller That got it, now to poke it until the modal pop up only shows up once, and fits the full size within the screen of a handheld in portrait. Any suggestions on where to go from here?
Adel
@AdelMahjoub
Jan 10 2017 00:12
@Jinnd319 wrap everything in a body tag , and add: data-spy="scroll" to that body tag
Tyler Moeller
@TylerMoeller
Jan 10 2017 00:17
@CoryCMyers You can control showing/hiding the modal with JavaScript: http://getbootstrap.com/javascript/#via-javascript
For making it full screen on smaller device sizes, use CSS - specifically, check out CSS Media Queries to make your elements behave differently on different screen sizes.
Also, don't forget to add a viewport tag as well for consistent display on mobile. I noticed you didn't have that in your tribute page originally.
Example: <meta name="viewport" content="width=device-width, initial-scale=1">
Robert
@SovereignRob1
Jan 10 2017 00:21
i could use some help. im doing my portfolio page and made a fixed navbar at the top. When i start the "about me" section, the text is hidden by the navbar.
how do i fix this?
Adel
@AdelMahjoub
Jan 10 2017 00:23
@SovereignRob1 what do you think, how that can be fixed
CoryCMyers
@CoryCMyers
Jan 10 2017 00:23
@TylerMoeller When I add a viewport tag it breaks the removal of scrollbars and max heights I have set up for desktop vs. anthing with <900 pixel width,
Robert
@SovereignRob1
Jan 10 2017 00:25
i figured it out. all in the padding of the body
Adel
@AdelMahjoub
Jan 10 2017 00:25
@SovereignRob1 nice
Robert
@SovereignRob1
Jan 10 2017 00:25
thanks @AdelMahjoub . struggling here and get lost sometimes
CamperBot
@camperbot
Jan 10 2017 00:25
sovereignrob1 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
CoryCMyers
@CoryCMyers
Jan 10 2017 00:29
@TylerMoeller Thank you again for continuing to assist me. I am just now getting into how javascript works and on arrays right now in FCC. Everything I have there is from knowing what I wanted to see, and then poking or reading over what I found on stack overflow until it did what I wanted.
CamperBot
@camperbot
Jan 10 2017 00:29
corycmyers sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: corycmyers already gave tylermoeller points
Mariusz Klimek
@tarnos12
Jan 10 2017 00:49
Hi
I have a trouble with border-image(url) not working properly when using css
When I hover over an url in my debug window, it displays properly and stays that way. I assume it has something to do with loading it. When my div with border image, has a new child element added, border image also appears. Weird :| I am using firefox
mendala
@mendala
Jan 10 2017 00:53
ahhh struggling with my personal profile page
Sean Hoar
@SHoar
Jan 10 2017 01:02
@tarnos12 did you use the pseudoselector :hover ?
cjljohnson
@cjljohnson
Jan 10 2017 01:05
Is there an easier way to get the input value than $('input[name="search"]').val()? http://codepen.io/cjljohnson/pen/apvPeW
can i get it from the e object?
Peter Weinberg
@no-stack-dub-sack
Jan 10 2017 01:06
@cjljohnson not sure the context, but can you give it an id and just do $('#myId').val()
cjljohnson
@cjljohnson
Jan 10 2017 01:07
That's basically what i'm doing, i was just wondering if there was a way to get it from the e object as it would be more flexible
Adel
@AdelMahjoub
Jan 10 2017 01:08
@cjljohnson you can
Peter Weinberg
@no-stack-dub-sack
Jan 10 2017 01:08
I wasn't sure if you were looking for just a syntactically simpler solution
Adel
@AdelMahjoub
Jan 10 2017 01:08
@cjljohnson check all the e properties in the console, e.target.value
cjljohnson
@cjljohnson
Jan 10 2017 01:09
@AdelMahjoub do you know how to do it? or is there a way to find an object's type in JS so i can look it up?
William Cross
@williamtech814
Jan 10 2017 01:09
I'm missing the concept on this challenge: Accessing Objects Properties with Variables
cjljohnson
@cjljohnson
Jan 10 2017 01:10
@AdelMahjoub it just says undefined
Adel
@AdelMahjoub
Jan 10 2017 01:11
@cjljohnson post your code
Peter Weinberg
@no-stack-dub-sack
Jan 10 2017 01:11
@williamtech814 the challenge is basically saying to define a variable set equal to an object's property name, so you can use that variable to access that property's value
with bracket notation
Adel
@AdelMahjoub
Jan 10 2017 01:12
@cjljohnson normal, there is no value
cjljohnson
@cjljohnson
Jan 10 2017 01:12
So there's no way to get the form's value with 'this' or anything?
i have to do what i'm doing currently?
Peter Weinberg
@no-stack-dub-sack
Jan 10 2017 01:15
@williamtech814 i.e. :
var myVar = 'someProp';
var myObj = {
    'someProp': 14
}
console.log(myObj[myVar])
// logs 14
Adel
@AdelMahjoub
Jan 10 2017 01:15
@cjljohnson
var input = document.querySelector("input")
input.addEventListener("input", inputHandler, false)
function inputHandler(e){
console.log(e.target.value)
}
William Cross
@williamtech814
Jan 10 2017 01:17
thanks @no-stack-dub-sack
CamperBot
@camperbot
Jan 10 2017 01:17
williamtech814 sends brownie points to @no-stack-dub-sack :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @no-stack-dub-sack |http://www.freecodecamp.com/no-stack-dub-sack
Peter Weinberg
@no-stack-dub-sack
Jan 10 2017 01:18
no prob
Adel
@AdelMahjoub
Jan 10 2017 01:18
@cjljohnson in your case, since the listener is on the form => e.target[0].value
cjljohnson
@cjljohnson
Jan 10 2017 01:19
@AdelMahjoub thanks
CamperBot
@camperbot
Jan 10 2017 01:19
cjljohnson sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Jan 10 2017 01:20
@cjljohnson yw
William Cross
@williamtech814
Jan 10 2017 01:21

this code isn't working?
// Setup
var testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};

// Only change code below this line;

var playerNumber=testObj[16]; // Change this Line
var player = testObj[playerNumber]; // Change this Line
console.log(player)

Tyler Beutel
@TylerBeutel
Jan 10 2017 01:26
I'm working on the Weather API challenge at the momen, anyone know how to get around No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.? Here is my pen: https://codepen.io/TylerBeutel/pen/OWyXWp
@williamtech814 Try changing it to playerNumber = 16
William Cross
@williamtech814
Jan 10 2017 01:31
@TylerBeutel thanks
CamperBot
@camperbot
Jan 10 2017 01:31
williamtech814 sends brownie points to @tylerbeutel :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @tylerbeutel |http://www.freecodecamp.com/tylerbeutel
Tyler Beutel
@TylerBeutel
Jan 10 2017 01:31
@williamtech814 All good :)
Luis Graterol
@luisgraterol
Jan 10 2017 01:41
Whats up guys? Is somebody available right now? I need help with the tweeting functionality of the Random Quote Generator Challenge!
Please! I would really appreciate it!
Tyler Beutel
@TylerBeutel
Jan 10 2017 01:43
@luisgra Here is a link to my Quote Generator, it has working tweet functionality if you want to see how I did it: https://codepen.io/TylerBeutel/full/pRJBOJ/
DarylKnapp
@DarylKnapp
Jan 10 2017 01:51
@sorinr you in the building? :P
Tyler Beutel
@TylerBeutel
Jan 10 2017 01:53
I'm working on the Weather API challenge at the moment, anyone know how to get around No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.? Here is my pen: https://codepen.io/TylerBeutel/pen/OWyXWp
Luis Graterol
@luisgraterol
Jan 10 2017 01:54
thank you @TylerBeutel !
CamperBot
@camperbot
Jan 10 2017 01:54
luisgra sends brownie points to @tylerbeutel :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @tylerbeutel |http://www.freecodecamp.com/tylerbeutel
Tyler Beutel
@TylerBeutel
Jan 10 2017 01:55
@luisgra No problem :)
breez803
@breez803
Jan 10 2017 01:59
can anyone help with local weather app
Manuel Almeida
@netstudenton
Jan 10 2017 01:59
I need help i got the JSON from wikipedia api but can't access the properties desired .
I wrote a console.log to show articles title but the console shows 'undefined '
https://codepen.io/netstudent/pen/jybxoO?editors=1111
JD Tadlock
@jdtdesigns
Jan 10 2017 02:11
@TylerBeutel You'll need to use an api that returns jsonp if you want to use Codepen. If there is an 'Access Control..' header in the request Codepen, will deny the response. The MetaWeather api is still in beta and doesn't have jsonp support.
https://apixu.com is great ;)
JD Tadlock
@jdtdesigns
Jan 10 2017 02:17
@netstudenton Remove <html><head> stuff from the html panel. Codepen adds that for you. You'll also need to add the imported font through Settings->HTML->Stuff for <head>. Also you have the google font url set with http and it needs to be https since you're loading the codepen on https. Add this to stuff for <head>:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat+Alternates" />
Manuel Almeida
@netstudenton
Jan 10 2017 02:18
@jdtdesigns i've add all metas ,link and scripts using the codepen config
JD Tadlock
@jdtdesigns
Jan 10 2017 02:19
Umm, check your stuff again lol.
You have <html><head> tags in your html still
those don't go there
Manuel Almeida
@netstudenton
Jan 10 2017 02:20
@jdtdesigns that doesn't solve the problem with the js
JD Tadlock
@jdtdesigns
Jan 10 2017 02:20
you also have @import url(http://fonts.google.....) in css
correct, but first things first
you have 2 errors due to those issues
in the console
breez803
@breez803
Jan 10 2017 02:21
@jdtdesigns would you mind taking a look http://codepen.io/breez803/pen/PWPdje?editors=1012
hoangduy51191
@hoangduy51191
Jan 10 2017 02:24
Build a Personal Portfolio Webpage it's too difficult with me .Can you help me?
JD Tadlock
@jdtdesigns
Jan 10 2017 02:24
@netstudenton To get the results you can do this. You were just accessing the object wrong.
success: function(parsed){
        var result, pages = parsed.query.pages;
        for ( result in pages) {
          console.log(pages[result].extract); 
        }
      }
Tyler Beutel
@TylerBeutel
Jan 10 2017 02:26
@jdtdesigns Thanks I'll check it out :)
CamperBot
@camperbot
Jan 10 2017 02:26
:cookie: 818 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
tylerbeutel sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
breez803
@breez803
Jan 10 2017 02:29
@hoangduy51191 just try applying some of the stuff you learned with html and css. I just made my layout first, then started adding some the projects from this site to it
JD Tadlock
@jdtdesigns
Jan 10 2017 02:29
@breez803 If you're wondering why it's not working, you're probably using chrome. You loaded codepen with codepen.io/...... This won't work with the navigator.geolocation due to Chrome deprecating the geolocation on insecure origins. This simply means if you don't load the page with https://codepen.io/...., navigator won't work.
miriam-z
@miriam-z
Jan 10 2017 02:30
best way to use brand images inside bootstrap 3 navbar? I am using mobile first approach and the media queries do not seem to be working.
Manuel Almeida
@netstudenton
Jan 10 2017 02:32
@jdtdesigns thank you. Can't understand what was wrong with my code.
CamperBot
@camperbot
Jan 10 2017 02:32
netstudenton sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 819 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
breez803
@breez803
Jan 10 2017 02:32
@jdtdesigns i just changed that after it wouldn't work to see if that was why I wasn't pulling data. even with the https, i still wasnt accessing anything and the url was working
JD Tadlock
@jdtdesigns
Jan 10 2017 02:42
@breez803 You can't request data through http when loading over https. This will throw a 'Mixed Content' error. Check out the browser console ctrl shit j. It will show you all the errors being thrown. OpenWeather requires a premium membership to request through https. You can use https://apixu.com which is free and has https support. ;)
Manuel Almeida
@netstudenton
Jan 10 2017 02:44
@jdtdesigns Could you please tell what was wrong with my cod
Why we can't do that ?
function(parsed){
         var result, pages = parsed.query.pages;
        for ( result in pages) {
          console.log(result.extract); 
        }
JD Tadlock
@jdtdesigns
Jan 10 2017 02:48
@netstudenton The only time you should use bracket notation is for accessing some dynamic data where you don't know the prop name or the prop name is in a format that dot notation doesn't support.
You'll see the warning if you hover over the brackets
That's jslint showing the warnings which is a javascript syntax checker
Also, it's good practice to declare your variables before the for loop. Declaring variables inside for loops can cause some weird errors. It's a must when working on larger projects.
Caroline Dunn
@cdunn0529
Jan 10 2017 02:53
Anyone else find the Personal Portfolio project to be pretty daunting? I hope I'm not alone
Robert
@SovereignRob1
Jan 10 2017 02:54
@cdunn0529 yes. i feel like im drowning. I look at other peoples portfolios and feel hightly inadequate
hightly
Manuel Almeida
@netstudenton
Jan 10 2017 02:54
@jdtdesigns thank you again
CamperBot
@camperbot
Jan 10 2017 02:54
netstudenton sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: netstudenton already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 10 2017 02:55
@cdunn0529 Coding will always be daunting lol. I'm 8 years in and i'm still overwhelmed. Just know, we've all been there and you just have to climb the walls and keep pushing. ;)
Manuel Almeida
@netstudenton
Jan 10 2017 02:55
@SovereignRob1 don't feel that way ! keep working hard
Robert
@SovereignRob1
Jan 10 2017 02:55
i am. just having a rough time
Caroline Dunn
@cdunn0529
Jan 10 2017 02:55
@SovereignRob1 I don't even know where to start. I made it through the lessons leading up to the project pretty easily and now I feel like a baby bird pushed out of the nest haha
Robert
@SovereignRob1
Jan 10 2017 02:55
we will get there. im learning a lot from doing them
Thomas Kurpit
@tkurpit
Jan 10 2017 02:56
Hi all
Manuel Almeida
@netstudenton
Jan 10 2017 02:56
@cdunn0529 I took long to me too ! I'm still doing front-end projects every project i finish I grow as developer !! don't give up
Thomas Kurpit
@tkurpit
Jan 10 2017 02:56
I'm struggling on the portfolio as well
breez803
@breez803
Jan 10 2017 02:56
@cdunn0529 @SovereignRob1 I know how you guys feel. this is new to me as well. just keep at it and use that as motivation.
I also used the w3schools site as a reference. start off with drawing on paper a simple layout and try to code that. thats how I started and then i just kept going back and replacing stuff. Mine is still nothing to brag about but i do take proud in how far Ive come with it
Caroline Dunn
@cdunn0529
Jan 10 2017 02:58
I feel like the project requires more knowledge and skill than what we've learned so far. Maybe I'm wrong, I don't know. I'm not against going on a google adventure if I have to.
breez803
@breez803
Jan 10 2017 02:59
@jdtdesigns what should i use for the value?
@cdunn0529 you over thinking it(which i have learned is very easy to do in this field). its just to see where you stand. Just start off small
JD Tadlock
@jdtdesigns
Jan 10 2017 03:01
@breez803 you mean to get the weather info?
Caroline Dunn
@cdunn0529
Jan 10 2017 03:01
@breez803 I over think EVERYTHING haha
breez803
@breez803
Jan 10 2017 03:01
@cdunn0529 w3schools.com will show you everything there is to front end development
this site just helps you put it into practical use
Caroline Dunn
@cdunn0529
Jan 10 2017 03:02
@breez803 yes! I've seen that! Thanks!
CamperBot
@camperbot
Jan 10 2017 03:02
cdunn0529 sends brownie points to @breez803 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @breez803 |http://www.freecodecamp.com/breez803
Manuel Almeida
@netstudenton
Jan 10 2017 03:02
@cdunn0529 if get stuck ask someone help in the chat
JD Tadlock
@jdtdesigns
Jan 10 2017 03:02
@breez803 Don't use the Codepen console. It doesn't show all the data and errors. Use the browser console(Ctrl Shift J).
Manuel Almeida
@netstudenton
Jan 10 2017 03:02
@jdtdesigns got that
Caroline Dunn
@cdunn0529
Jan 10 2017 03:03
@netstudenton I definitely will, me being me, I was nervous about asking for help on here. I feel better now
breez803
@breez803
Jan 10 2017 03:03
@jdtdesigns yeah. it keeps telling me that parameter q is missing
Robert
@SovereignRob1
Jan 10 2017 03:04
ok, gotta ask for help. Trying to put a pic of me next to my name and title. im reading everything about it i just cant seem to get it done right
JD Tadlock
@jdtdesigns
Jan 10 2017 03:05
breez803
@breez803
Jan 10 2017 03:05
@SovereignRob1 whats the link?
Robert
@SovereignRob1
Jan 10 2017 03:05
This is what i have
<div class="container-fluid bg-1 text-center">
  <h1 class= "margin" style="font-size: 50px;">
    <img src="https://photos-6.dropbox.com/t/2/AAAlH2Gitu6mijqLOe5XNZQvLKsor23xMD5zbICCfT0xiQ/12/53204753/jpeg/32x32/1/_/1/2/2011-06-10%2020.49.50.jpg/EJOmhCkY3yIgBygH/sXt7smUWxhuDttcnPmWXf8PchYICfk3I4rtmVD4wKtE?size=800x600&size_mode=3" class="img-responsive img-circle margin" alt="me" width="150" height="150">
    <strong>Robert J Cook</strong><br>

  WEB DEVELOPER IN-TRAINING</h1>
</div>
JD Tadlock
@jdtdesigns
Jan 10 2017 03:09
@SovereignRob1 First thing is you'll need to use a different host for the image. Dropbox doesn't allow for direct linking. https://postimage.org/ works pretty well.
Robert
@SovereignRob1
Jan 10 2017 03:10
@jdtdesigns thank you. thats good to know
CamperBot
@camperbot
Jan 10 2017 03:10
sovereignrob1 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Robert
@SovereignRob1
Jan 10 2017 03:16
ok. fixed that
breez803
@breez803
Jan 10 2017 03:18
thanks @jdtdesigns what part of south carolina are you in
CamperBot
@camperbot
Jan 10 2017 03:18
breez803 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 821 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Caroline Dunn
@cdunn0529
Jan 10 2017 03:23
I'm still not sure I understand what <div> is or does
ā˜†Zā˜…
@spacetimespecter
Jan 10 2017 03:28
This might seem ridiculously obvious, but I'm still not sure what the goal of the tribute page is.
Caroline Dunn
@cdunn0529
Jan 10 2017 03:29
I just spouted off a bunch of crap about a fictional character. I made a Michael Scott tribute page.
ā˜†Zā˜…
@spacetimespecter
Jan 10 2017 03:29
oh my god good plan
breez803
@breez803
Jan 10 2017 03:37
@cdunn0529 ironically, thats what im watching lol
@spacetimespecter just to play with some the things you learn
@cdunn0529 think of it as an organizer for your page. a divider
Adam Morris
@Adam-Morris
Jan 10 2017 03:39
Why is this not working? http://codepen.io/Amorris/pen/ygYRWo
breez803
@breez803
Jan 10 2017 03:41
@Adam-Morris the first thing i see, is that you don't need the p tags.
Adam Morris
@Adam-Morris
Jan 10 2017 03:43
@breez803 It still does not change,
Manuel Almeida
@netstudenton
Jan 10 2017 03:58
guys take a look at my wikipedia view
https://codepen.io/netstudent/full/jybxoO?editors=1111
JD Tadlock
@jdtdesigns
Jan 10 2017 04:13
@SovereignRob1 and anybody else interested. I made an example of an animated navbar just using css and a tiny bit of jQuery. I also used css alone to create a layout grid. I used a media query to add some slight adjustments for the mobile view. The code is all commented to help you understand what things do what. ;)
http://codepen.io/jdtadlock/pen/vgNMXZ?editors=0100
@netstudenton Lookin good!
Adam Morris
@Adam-Morris
Jan 10 2017 04:14
http://codepen.io/Amorris/pen/ygYRWo Why is long undefined?
Manuel Almeida
@netstudenton
Jan 10 2017 04:17
@jdtdesigns couldn't make it without your help 9000+ thanks to you !!!!
CamperBot
@camperbot
Jan 10 2017 04:17
netstudenton sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 822 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 10 2017 04:17
@netstudenton Welcome!
@Adam-Morris Navigator no longer works through http on chrome. You have to use https (ie. https://codepen.io/myname/project). Also, you're setting the variable inside the function and then calling it outside. Navigator is an asynchronous data resource. It won't give you the data instantly. Because of this, you need to pass the data to a function from within the getCurrentPosition function or do what you're doing now with the globals up top and then call a function from inside the getCurrentPosition after setting the vars.
Adam Morris
@Adam-Morris
Jan 10 2017 04:24
@jdtdesigns Oh, I reaise my mistake. thank you.
CamperBot
@camperbot
Jan 10 2017 04:24
adam-morris sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 823 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 10 2017 04:25
@Adam-Morris welcome
JackVizl
@JackVizl
Jan 10 2017 04:52
hey can someone please help me with the simon project
no clue how to shape the buttons
Lindsey
@sanguineseraphine
Jan 10 2017 05:40
Hey guys! I plan on working the style a bit more, but does my code look clean? https://codepen.io/sanguineseraphine/pen/jyPjEa
Dinesh
@dinesh333
Jan 10 2017 05:47
Hey guys just completed the build a tribute page.. how does it look?
http://codepen.io/dinesh333/full/wgBgRQ/
Megan
@megan32
Jan 10 2017 05:50
Question about the random quote generator: trying to make the background color change along with the quote. I've got a function for the quote to change (and it works), but the color function does not work. In the CSS do I need to somehow reference the function instead of listing a color?
DarylKnapp
@DarylKnapp
Jan 10 2017 05:54

Can anyone advised me if there is a way to make a set With and Height for my graphic on my portfolio page?

http://codepen.io/DarylKnapp/pen/vgYNXe?editors=1100

Tyler Beutel
@TylerBeutel
Jan 10 2017 05:56
@megan32 Can you post your code? It might help people answer your question
Megan
@megan32
Jan 10 2017 06:00
hey, sorry! Yes....just need to move it into codepen...one sec
Tyler Beutel
@TylerBeutel
Jan 10 2017 06:01
@DarylKnapp You can give your image a class, then set a height, width, min-height, min-width, max-height or max-width
I've put the working quotes-only function into a comment
Tyler Beutel
@TylerBeutel
Jan 10 2017 06:06
@megan32 I'll have a quick look, but here is a link to mine: https://codepen.io/TylerBeutel/full/pRJBOJ
It has changing background colours, and might help you understand it a bit better :)
Megan
@megan32
Jan 10 2017 06:06
thank you!
@TylerBeutel ....yeah...I have no idea what your code means haha...what is the JS written in? Is that jQuery?
Tyler Beutel
@TylerBeutel
Jan 10 2017 06:09

@megan32 Yeah its written in jQuery. Basically this part:

  var colours = [
    "#CD6155",
    "#9B59B6",
    "#5499C7",
    "#48C9B0",
    "#52BE80",
    "#F4D03F",
    "#DC7633",
    "#AAB7B8",
    "#566573"
  ]

is just an array of colours (like what you have), and this:

$('body').css("background-color", colours[Math.floor(Math.random() * (8+1))]);

changes the css of the body to a random colour in the array

DarylKnapp
@DarylKnapp
Jan 10 2017 06:11

@TylerBeutel How does this look? code wise..

http://codepen.io/DarylKnapp/pen/vgYNXe?editors=1100

Megan
@megan32
Jan 10 2017 06:13
where did you learn the jQuery? FCC barely (if at all...?) touches on it . I started the Codecademy jQuery, never sure if their hand holding method is worth the time
Tyler Beutel
@TylerBeutel
Jan 10 2017 06:14
jQuery isn't too hard to understand once you get the basics, but I did learn it before using FCC
Megan
@megan32
Jan 10 2017 06:15
yeah...they forget to mention that "flying by the seat of your pants" isn't the best method ;-) ....I'll go try and rapidly bone up on jQuery
Thanks for your page though! Definitely helpful to see a working version
Arin
@arinarjani
Jan 10 2017 06:16
@megan32 You look here: JQuery. Look on the left side-bar to see all the separate functions. When you build something, think of a keyword that might describe it, then look at this page to see if you find a function that does what you want.
Simply learning the whole library is pointless. Learn how JQuery as a whole works instead, aka, $(selector)
@TylerBeutel Try not to give exact solutions, but rather hints to the solution.
learning to search or use the dev tools will be her best tool
Tyler Beutel
@TylerBeutel
Jan 10 2017 06:19
Okay, sorry @arinarjani
DarylKnapp
@DarylKnapp
Jan 10 2017 06:19

if anyone is wanting sizing here's a great size i use all the time

http://designerstoolbox.com/designresources/banners/

Tyler Beutel
@TylerBeutel
Jan 10 2017 06:19
@megan32 This link will probably help: http://www.w3schools.com/js/js_htmldom_css.asp
Megan
@megan32
Jan 10 2017 06:19
oh that is genius! THank you! @arinarjani
CamperBot
@camperbot
Jan 10 2017 06:19
megan32 sends brownie points to @arinarjani :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @arinarjani |http://www.freecodecamp.com/arinarjani
Arin
@arinarjani
Jan 10 2017 06:21
@megan32 Also, when you ask a question. First try to figure out something on your own. If you cannot, then post a link to your code, then the line number, or something very specific to where you think the error is, then ask your question as detailed as possible.
Megan
@megan32
Jan 10 2017 06:31
@arinarjani Thanks for the feedback/advice. After several days of banging my head, I turned to the forums haha I'll definitely start with code posting next time...clearly what I thought was a quick question is actually a rabbit hole of jQuery-knowledge-attainment I need to conquer :-)
CamperBot
@camperbot
Jan 10 2017 06:31
megan32 sends brownie points to @arinarjani :sparkles: :thumbsup: :sparkles:
:warning: megan32 already gave arinarjani points
Sorin Ruse
@sorinr
Jan 10 2017 06:31
@megan32 your changing color statement must be like: document.getElementById('container').style.backgroundColor = color[randomNumber]; but be aware that you need same number of colors as the number of your quotes because you are using randomNumber generated by the quotes.lenght
Arin
@arinarjani
Jan 10 2017 06:31

@megan32
JQeury:
Now to your question on changing the color. Look at that site I posted and then look at the .css() method. Learn how to pass css properties using it. Then look at your newQuote function. That whole function is basically how you will change your background color. Instead of calling newQuote(), you might call newColor().

VannilaJS ( What you already have, so just stick with this ):
I see you are not using JQuery in your app, so maybe learn how to get css for each element. I would scroll over the quote background, then right click -> inspect. if you look at the code, you will see a $0 on the far right. then go into your console and type in var a = $0 and hit enter. Then type in a.style and hit enter. You will see all the CSS for that element, so scroll down until you see something that might be what you want to change. For instance, do a.style.margin = "50px" or something to get a feel for what you are doing.

Side note: I changed the background of this site to green while writing the above. Now I need to change it back lol

Megan
@megan32
Jan 10 2017 06:32
@sorinr -good point! Didn't even dawn on me...just thought generating random numbers would suffice haha
Sorin Ruse
@sorinr
Jan 10 2017 06:34
@megan32 or you can have another var randColor generated based on the color array length and use it to change background
Megan
@megan32
Jan 10 2017 06:34
@arinarjani Thank you! I originally had to functions one for the quote generate and one for the color change, but it seemed silly since they did the same thing (essential: generate and change), so I tried to bump it into one
CamperBot
@camperbot
Jan 10 2017 06:34
megan32 sends brownie points to @arinarjani :sparkles: :thumbsup: :sparkles:
:warning: megan32 already gave arinarjani points
Megan
@megan32
Jan 10 2017 06:34
@sorinr thank you! i tried that too (as part of the separate function system that didn't work / pre-trying it as one function to do two things)
CamperBot
@camperbot
Jan 10 2017 06:34
:star2: 1064 | @sorinr |http://www.freecodecamp.com/sorinr
megan32 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Arin
@arinarjani
Jan 10 2017 06:35
making new functions for things and making your code better will come in time
Sorin Ruse
@sorinr
Jan 10 2017 06:36
@megan32 u can use only one function but generate two values one for quotes and one for colors
Arin
@arinarjani
Jan 10 2017 06:36
just get it done as best you can for now
Megan
@megan32
Jan 10 2017 06:38
@sorinr yeah, I think i'll try that, seems like it'd take care of the how many elements issue @arinarjani sound advice
h1tag
@h1tag
Jan 10 2017 06:52
Hey, in the Random Quote Machine project, I don't know why my code is not displaying quotes at random (it only displays the first Quote a[0] in the JSON object and doesn't update every time you click the button). Here's the link to the code: http://codepen.io/FortMax/pen/RKWzGN
h1tag
@h1tag
Jan 10 2017 06:57
@jdtdesigns what was wrong with the previous URL?
JD Tadlock
@jdtdesigns
Jan 10 2017 06:59
&callback= is not the jsonp param for their url
that's the typical param but for QoD it's _jsonp=
h1tag
@h1tag
Jan 10 2017 07:00
QoD = Quality of Data?
JD Tadlock
@jdtdesigns
Jan 10 2017 07:01
quotesondesign lol
h1tag
@h1tag
Jan 10 2017 07:03
idk, I just copied the first code in this link: https://quotesondesign.com/api-v4-0/
what was the previous URL for?
c0d0er
@c0d0er
Jan 10 2017 07:06
does anybody know why the following recipe box html file cannot be fired in chromium, but can be fired in firefox?
<html>
  <head>
    <style></style>
    <meta charset="UTF-8">
    <title>Recipe Box</title>
    <link href=".\load\bootstrap.min.css" rel="stylesheet">
    <link href="rstyle.css" rel="stylesheet">
  </head>
  <body>
    <div id='app'>hello</div>
    <script src=".\load\react.min.js"></script>
    <script src=".\load\react-dom.min.js"></script>
    <script src='.\load\babel.js'></script>
    <script src=".\load\jquery.min.js"></script>
    <!--<scrip src=".\load\bootstrap.min.js"></script>-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="rscript.js" type="text/babel"></script>
  </body>
</html>
JD Tadlock
@jdtdesigns
Jan 10 2017 07:06
@fortMaximus Codepen requires you to request jsonp when their is an 'access control header' present on the return request
most api's offer an option to return jsonp
h1tag
@h1tag
Jan 10 2017 07:10
Thanks @jdtdesigns but one last thing, what's an access control header? Is it the same as HTTP access control?
CamperBot
@camperbot
Jan 10 2017 07:10
fortmaximus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 824 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
h1tag
@h1tag
Jan 10 2017 07:14
I was reading it, just wanted to make sure
Utkarsh Agarwal
@greenutkarsh
Jan 10 2017 07:29
how is my first project, though got some idea from youtube ..
http://codepen.io/greenutkarsh/full/bgVWQe/
Luca Corsilli
@Lc0rE
Jan 10 2017 08:13
Hello freecodecampers! I'm actually working on the Portfolio Project and I'm struggling with the navbar element. While I scroll the page, It should change the active element to the corresponding section I'm viewing. It is kinda working for the first sections but not for the last... any help?
https://codepen.io/l_core/pen/BpaOma
h1tag
@h1tag
Jan 10 2017 08:16
@Lc0rE I don't know the answer to your problem but the functionality you're asking about is working fine for me. I'm using Google Chrome
i.e. I viewed your project and the active element does change when scrolling the page
Luca Corsilli
@Lc0rE
Jan 10 2017 08:17
not for the Footer section.. I mean if I scroll all way down till the footer shows up, the navbar is not responding to the scroll change.
h1tag
@h1tag
Jan 10 2017 08:18
you mean it should not highlight any section when reaching the footer?
uriznik
@uriznik
Jan 10 2017 08:21
it's not highlighting 'contact' because the section is not tall enough to trigger the logic that would change the classes
Luca Corsilli
@Lc0rE
Jan 10 2017 08:21
it should highlight "Footer" on the top navbar when I reach the footer. Basically, when the user reach the bottom of the page, the navbar should have the Footer text in red
@uriznik I was thinking something about that.. but I have no idea on how I can change the rules to fix this. I don't think that the footer will be higher than thi in the future
uriznik
@uriznik
Jan 10 2017 08:24
could just add a check for if the page is at the bottom
Luca Corsilli
@Lc0rE
Jan 10 2017 08:25
hmmm sound interesting! gotta find out how to achieve this
uriznik
@uriznik
Jan 10 2017 08:29
if($(window).scrollTop() + $(window).height() == $(document).height()) {
Luca Corsilli
@Lc0rE
Jan 10 2017 08:45
thanks!
c0d0er
@c0d0er
Jan 10 2017 08:49
does anybody know how to use apache server in linux to load the local index.html file?
alpox
@alpox
Jan 10 2017 09:00
@c0d0er You can open the index.html in your browser directly if its just that... You need apache only with PHP
c0d0er
@c0d0er
Jan 10 2017 09:06
@alpox babel.js:36810 XMLHttpRequest cannot load file:///home/rscript.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
alpox
@alpox
Jan 10 2017 09:06
Aha cors issue :D wonder why this happens because it should be the same domain
But how is it possible that babel throws that
Is this during the opening of the webpage, or building it?
@c0d0er However, if you wanna use apache, the directory where you put your files vary with the distribution. In ubuntu it should be /var/www/html with the newest versions. You can try to put your files there and start the server
You should be able to access them with http://localhost/
alpox
@alpox
Jan 10 2017 09:12
I usually prefer setting up a local node server instead of apache since apache is quite a beast
That needs a bit more knowledge though
kirbyedy
@kirbyedy
Jan 10 2017 09:15
how do you set up a node server ?
c0d0er
@c0d0er
Jan 10 2017 09:15
@alpox thanks
CamperBot
@camperbot
Jan 10 2017 09:15
c0d0er sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 719 | @alpox |http://www.freecodecamp.com/alpox
c0d0er
@c0d0er
Jan 10 2017 09:16
@uriznik thanks
CamperBot
@camperbot
Jan 10 2017 09:16
c0d0er sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @uriznik |http://www.freecodecamp.com/uriznik
alpox
@alpox
Jan 10 2017 09:24
@kirbyedy Well node itself is kinda a server. If you want to present only a public folder (recursively) like apache can do, the easiest way is to create a node app with a single file app.js, set express as a dependency and set it up to serve a static folder, then start it.
With a bit more complex i just wanted to say that there is some code writing involved, but its jut a very few lines though :-)
kirbyedy
@kirbyedy
Jan 10 2017 09:26
right :)
I thought there is a simple click click run your local node server thing :)
alpox
@alpox
Jan 10 2017 09:26
Hmm seems it works even easier: https://github.com/indexzero/http-server :D didn't see that one
Nah a click click run doesn't really exist... Maybe a write write run as it seems :D
http-server seems neat for running a quick server
kirbyedy
@kirbyedy
Jan 10 2017 09:33
good enough thanks @alpox :)
CamperBot
@camperbot
Jan 10 2017 09:33
kirbyedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 720 | @alpox |http://www.freecodecamp.com/alpox
Sorin Ruse
@sorinr
Jan 10 2017 10:11
@kirbyedy you may also take a look here: https://github.com/zellwk/gulp-starter-csstricks for a starter package with gulp, sass and browsersync. just clone the repo or download the zip. unfold it. run npm install and after gulp and you are off to go
kirbyedy
@kirbyedy
Jan 10 2017 10:12
@sorinr thanks
CamperBot
@camperbot
Jan 10 2017 10:12
kirbyedy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1065 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 10 2017 10:13
@kirbyedy welcome
Minoy
@minoy
Jan 10 2017 10:25

Hello! I am trying to write a simple code to replace space with nothing in a string. Following is the current code:

function palindrome(str) {
  var space = /\s/g;
  str.replace(space,'');
  return str;
}
palindrome("ey e");

It is not working. Any ideas? How do we represent nothing in JS. I am using '' above. Is that correct?

Vaidotas
@unreality23
Jan 10 2017 10:34
Hello, I've started a project called show the local weather, but im not sure which API for it would be the best? Moreover I cant use openweathermap.org api because company blocked this page for interfering with their programs so I have to search for alternatives. Any answer would be great, and thank you in advance!
Daniel-Correia
@Daniel-Correia
Jan 10 2017 10:34
@minoy
any particular reason why you wouldn't do
return str.reverse();
@unreality23 is if for personal use ?
Minoy
@minoy
Jan 10 2017 10:36
@Daniel-Correia Hmm... not sure what you mean. I am trying to replace. Why will I use .reverse() method?
Vaidotas
@unreality23
Jan 10 2017 10:36
@Daniel-Correia yes, its for a project
@Daniel-Correia im just doing in in work while there is no work so doing FCC instead :D
kirbyedy
@kirbyedy
Jan 10 2017 10:37
@unreality23 I would suggest darksky or wunderground
Daniel-Correia
@Daniel-Correia
Jan 10 2017 10:38
@minoy sorry i just saw the name of the function and immediately thought you wanted to reverse the string.
Vaidotas
@unreality23
Jan 10 2017 10:41
@kirbyedy thank you !
CamperBot
@camperbot
Jan 10 2017 10:41
unreality23 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1672 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
alpox
@alpox
Jan 10 2017 10:43
@minoy Strings are by default immutable in javascript - means you cannot implicitly change it like str[0] = 'A', which would mean that you change a specific character in the string. Since this is not possible, you can only generate new strings from an old one.
This leads to the fact, that all string operations don't alter the string on which they operate, but rather return a new string, which you have to assign to some variable again (which you don't do in your code).
Linda
@Mee0wth
Jan 10 2017 11:19

Does anyone know how I would go about changing the text color of, Home, Portfolio, and Contact with CSS?

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

Sorin Ruse
@sorinr
Jan 10 2017 11:20
@unreality23 you can also consider apixu.com that works both on http and https on the free plan
Coy Sanders
@coymeetsworld
Jan 10 2017 11:22
give either the list elements or link inside the list elements their own class @Mee0wth
Linda
@Mee0wth
Jan 10 2017 11:23
@coymeetsworld ooooh. I can only edit through classes? I can't edit through li { } ?
Coy Sanders
@coymeetsworld
Jan 10 2017 11:23
you could, just depends on what you want to do
if you want to apply the same thing to all of them then yeah using li { } would be better, but if you want to do something separate then you would need to use something like classes
Scott
@Gangezilla
Jan 10 2017 11:24
You can do both, @linda. Use the attribute color: blue to change it on either a class or li
Linda
@Mee0wth
Jan 10 2017 11:25
@coymeetsworld I tried with the li { } and it didn't work
Coy Sanders
@coymeetsworld
Jan 10 2017 11:26
do you have a codepen link or the code you tried @Mee0wth?
Linda
@Mee0wth
Jan 10 2017 11:27
@coymeetsworld I was doing this on sublime text first since it was easier with the features
Coy Sanders
@coymeetsworld
Jan 10 2017 11:28
thats fine, do you have the CSS code you tried for li?
Linda
@Mee0wth
Jan 10 2017 11:28
li {
color: #FFF;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="navbar-menu"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
the html code is nav
Coy Sanders
@coymeetsworld
Jan 10 2017 11:29
why does one of your lis have a class navbar-menu?
Linda
@Mee0wth
Jan 10 2017 11:29
@coymeetsworld oh I added that to check when you said to put a class in the li to edit...and I forgot to delete it
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
so it should look like this
Coy Sanders
@coymeetsworld
Jan 10 2017 11:30
ok, and where do you put your CSS code? is it also in your HTML file in style tags in the head section?
or is it in a separate file and you use a link tag?
Linda
@Mee0wth
Jan 10 2017 11:31
it's in a separate .css file
that's linked
Prakash
@prakashafk
Jan 10 2017 11:32
hellow whats the class for full width in CSS?
Coy Sanders
@coymeetsworld
Jan 10 2017 11:32
and other styles get through?
so it's linked properly?
Linda
@Mee0wth
Jan 10 2017 11:32
@coymeetsworld and yes css style code is in head section
@coymeetsworld linked correctly becuase the other edits work
Scott
@Gangezilla
Jan 10 2017 11:32
Try putting it on the a tag instead of the li, @Mee0wth :)
Linda
@Mee0wth
Jan 10 2017 11:32
@coymeetsworld I really can't understand why I can't change the text color..that's all I want to do
@Gangezilla Tried it, it won't work.... I tired ul {
color: #FFF;
}
Scott
@Gangezilla
Jan 10 2017 11:34
No no, as in the anchor tag, a. Like:
a { color: red
Coy Sanders
@coymeetsworld
Jan 10 2017 11:34
@Mee0wth it might be because you're using bootstrap
Linda
@Mee0wth
Jan 10 2017 11:34
@Gangezilla tried it
Coy Sanders
@coymeetsworld
Jan 10 2017 11:34
their settings may take precedence over custom CSS
Linda
@Mee0wth
Jan 10 2017 11:34
@coymeetsworld is there a way around it? Yes I am using bootstrap
@coymeetsworld ooooh
Coy Sanders
@coymeetsworld
Jan 10 2017 11:34
which link are you declaring first?
bootstrap or your own CSS?
Philipp Scholz
@philipp32
Jan 10 2017 11:35
@Mee0wth Have you tried giving your li/ul a common class name and then changing the color?
Coy Sanders
@coymeetsworld
Jan 10 2017 11:35
try declaring your own CSS after
Linda
@Mee0wth
Jan 10 2017 11:35
@coymeetsworld bootstrap comes first in the rel sheet
@philipp32 have not tried that will try that.
Coy Sanders
@coymeetsworld
Jan 10 2017 11:36
ok then you need to be more specific then in your style
Philipp Scholz
@philipp32
Jan 10 2017 11:36

Short question: I want to get the location of a PC. I use this API: http://ip-api.com/json. My code looks like this:

function getWeather(){
$.getJSON("http://ip-api.com/json")
}

Not much right now. This sends me the data in a JSON format. How can I access the JSON object. What notation is there?

Coy Sanders
@coymeetsworld
Jan 10 2017 11:37
try .navbar .navbar-nav>li>a instead @Mee0wth
Linda
@Mee0wth
Jan 10 2017 11:37
@coymeetsworld I'm not sure what you mean? Should I paste my css file link before bootstraps?
Coy Sanders
@coymeetsworld
Jan 10 2017 11:37
no that won't matter
issue is the CSS precedences
Linda
@Mee0wth
Jan 10 2017 11:37
@coymeetsworld
.navbar-nav>li>a {
color: #FFF;
}
@coymeetsworld doesn't work *tears
Coy Sanders
@coymeetsworld
Jan 10 2017 11:38
need to add .navbar to the beginning with a space between, like i had above
Sorin Ruse
@sorinr
Jan 10 2017 11:38
@Mee0wth as @coymeetsworld said you have to use the same identifier for your element as bootstrap doesin order to be able to override it without using !important after each property
Darth Skywalker
@adityaparab
Jan 10 2017 11:38
@philipp32
function getWeather(){
  $.getJSON("http://ip-api.com/json", function(jsonData){
    console.log(jsonData);
  })
}
Linda
@Mee0wth
Jan 10 2017 11:38
@coymeetsworld OMG OMG OMG
Coy Sanders
@coymeetsworld
Jan 10 2017 11:39
i couldn't get it to work w/ important @sorinr
idk why
did it work @Mee0wth
Linda
@Mee0wth
Jan 10 2017 11:39
@coymeetsworld What are you a magician?!?!? Thank you!!
CamperBot
@camperbot
Jan 10 2017 11:39
mee0wth sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1761 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Darth Skywalker
@adityaparab
Jan 10 2017 11:39
@Mee0wth what seems to be the problem your highness?
Linda
@Mee0wth
Jan 10 2017 11:39
@coymeetsworld Yes I've been working on this stupid bar for 2 hrs....
Coy Sanders
@coymeetsworld
Jan 10 2017 11:39
@Mee0wth :thumbsups
Darth Skywalker
@adityaparab
Jan 10 2017 11:39
very well.. sorted out! :+1:
Coy Sanders
@coymeetsworld
Jan 10 2017 11:40
yeah while bootstrap is nice to get something up quick its hard to customize some of the things they have for you @Mee0wth
when you get more experience it would be better to just not use bootstrap and define all your styles but that takes a little more time/practice
Sorin Ruse
@sorinr
Jan 10 2017 11:40
@Mee0wth if you can share the pen link it would be much easier to understand whats going on in there and be able to receive better advice :)
Linda
@Mee0wth
Jan 10 2017 11:40
@coymeetsworld This is a really good learning experience though. Thanks!
CamperBot
@camperbot
Jan 10 2017 11:40
mee0wth sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: mee0wth already gave coymeetsworld points
Linda
@Mee0wth
Jan 10 2017 11:41
@sorinr sorry, I'll do that from now on. I was only coding in sublime texts becuase they have the shortcut and it's faster...
Coy Sanders
@coymeetsworld
Jan 10 2017 11:41
yw @Mee0wth, another thing you could do also is customize bootstrap and make those changes directly: http://getbootstrap.com/customize/
Linda
@Mee0wth
Jan 10 2017 11:41
@coymeetsworld That's too pro for me at the moment
@coymeetsworld maybe once I get a better hang of it
Coy Sanders
@coymeetsworld
Jan 10 2017 11:42
i would take a look, it actually doesn't look bad
Philipp Scholz
@philipp32
Jan 10 2017 11:42
@adityaparab now I can access it like this?
var city = jsonData.city;
Coy Sanders
@coymeetsworld
Jan 10 2017 11:42
all the defaults are listed in there, you can just scroll around and find the things you would want to change
Darth Skywalker
@adityaparab
Jan 10 2017 11:42
@philipp32 inside your callback function to $.getJSON, yes
Philipp Scholz
@philipp32
Jan 10 2017 11:43
thank you very much. :) @adityaparab
CamperBot
@camperbot
Jan 10 2017 11:43
philipp32 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 807 | @adityaparab |http://www.freecodecamp.com/adityaparab
Coy Sanders
@coymeetsworld
Jan 10 2017 11:43
@Mee0wth I would stick with using an editor too, but yeah like @sorinr said if you need to show something putting it on something like codepen would help us test somethings out
either that or another provider if you know of one or have your own webhosting, but codepen is pretty easy so we just say that one
Linda
@Mee0wth
Jan 10 2017 11:43
@coymeetsworld got it!
Philipp Scholz
@philipp32
Jan 10 2017 11:45

@adityaparab

 function getWeather(){
  var output = $('#location');
  $.getJSON("http://ip-api.com/json", function(jsonData){
    console.log(jsonData);
  })
 var city = jsonData.city;
 output.innerHTML=city;
}

This, in theory, should display the city name into my html element. Nothing happens. What did I do wrong?

Darth Skywalker
@adityaparab
Jan 10 2017 11:46
@philipp32 this in theory as well as in practice, should not work :D
Philipp Scholz
@philipp32
Jan 10 2017 11:47
Why is that? Probably some incredibly stupid error on my part. :D
Darth Skywalker
@adityaparab
Jan 10 2017 11:47
This should work
function getWeather(){
  var output = $('#location');
  $.getJSON("http://ip-api.com/json", function(jsonData){
    console.log(jsonData);
    var city = jsonData.city;
    output.innerHTML=city;
  })
}
Coy Sanders
@coymeetsworld
Jan 10 2017 11:47
@philipp32 getJSON is an asynchronous call, that's the trick
most other code is synchronous meaning it'll go one line at a time until the previous ones are done, but not getJSON
the rest of your code continues to run even if the API call isn't finished, so there could be some times where you're attempting to set the city with data you don't have yet
Philipp Scholz
@philipp32
Jan 10 2017 11:49
that means I should move the output variable underneath the getJSON function?
Coy Sanders
@coymeetsworld
Jan 10 2017 11:49
inside, not underneath, like what @adityaparab has
Darth Skywalker
@adityaparab
Jan 10 2017 11:49

your jsonData variable exists only inside the callback function to $.getJSON It won't be available outside it.

And since this is async call, your

var city = jsonData.city;
output.innerHTML=city;

will be executed (jsonData will be undefined) before

function(jsonData){
  console.log(jsonData);
}
Philipp Scholz
@philipp32
Jan 10 2017 11:49
When I click the button I don't even get an alert that the program wants to access the location.
Darth Skywalker
@adityaparab
Jan 10 2017 11:50
@philipp32 you won't because you're not using navigator.geolocation.getCurrentPosition
it will prompt for the location
the api call you're making will approximate your location based on your ip address
which is not usually accurate
Philipp Scholz
@philipp32
Jan 10 2017 11:51
Someone recommended this yesterday to me because Chrome will only send the location over https and that should make more troublefree.#
I tried it out. It sadly didn't work. @adityaparab
Coy Sanders
@coymeetsworld
Jan 10 2017 11:52
only reason I used the API is because openweathermap was the API I used for weather, and the free version only operates through http not https
and yes Chrome blocks geolocation on non-secure connections
so you wouldn't be able to use Chrome to test/demo
Philipp Scholz
@philipp32
Jan 10 2017 11:53
This is my browser of choice so I will use ip-api.com :)
Coy Sanders
@coymeetsworld
Jan 10 2017 11:53
yeah, may not be 100% accurate but its close enough
Philipp Scholz
@philipp32
Jan 10 2017 11:54
Thank you for all the explanations. They were really helpful. One last though.
Why doesn't the code work? :)
function getWeather(){
  var output = $('#location');
  $.getJSON("http://ip-api.com/json", function(jsonData){
    console.log(jsonData);
    var city = jsonData.city;
    output.innerHTML=city;
  })
}
I tried deleting the html of the objecting before putting some new HTML in it. Didn't work either.
Coy Sanders
@coymeetsworld
Jan 10 2017 11:54
are you calling the function?
alpox
@alpox
Jan 10 2017 11:55
@philipp32 There is no .innerHTML property on output since output is a jquery object. Use output.html(city); instead.
Philipp Scholz
@philipp32
Jan 10 2017 11:55
yes, with a button.
Coy Sanders
@coymeetsworld
Jan 10 2017 11:55
also not sure if you can use innerHTML on a jQuery selector
@alpox :thumbsup:
Darth Skywalker
@adityaparab
Jan 10 2017 11:56
@philipp32 can you show your full code?
Philipp Scholz
@philipp32
Jan 10 2017 11:56
WOOOORRRKKKKSSSS!!!!!
Thank you guys. @adityaparab @coymeetsworld
CamperBot
@camperbot
Jan 10 2017 11:56
philipp32 sends brownie points to @adityaparab and @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: philipp32 already gave adityaparab points
:star2: 1762 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Philipp Scholz
@philipp32
Jan 10 2017 11:56
That did the trick.
Coy Sanders
@coymeetsworld
Jan 10 2017 11:56
np @philipp32
Darth Skywalker
@adityaparab
Jan 10 2017 11:57
@philipp32 : oh! it did work!
:+1:
Philipp Scholz
@philipp32
Jan 10 2017 11:57
I will remove the button so the function gets executed on page load later.
Sorin Ruse
@sorinr
Jan 10 2017 12:04
@adityaparab why do you combine jquery code with vanilla js? like in output.innerHTML= city instead of output.html(city). i would go all the way with jquery or all the way vanilla js
Darth Skywalker
@adityaparab
Jan 10 2017 12:05
@sorinr I only reorganized what was already there
alpox
@alpox
Jan 10 2017 12:05
Thats solved now anyways :-)
Sorin Ruse
@sorinr
Jan 10 2017 12:06
@adityaparab ah. ok
@alpox yep. sorry. haven't seen your post above :)
Ananda Johnson
@Sovember
Jan 10 2017 12:13
I have an FTP question here. I've uploaded my files through FTP but a few of my styles are missing? I've uploaded the latest css version but the live site is missing just a few lines of css, any idea what the issue could be? Thanks
alpox
@alpox
Jan 10 2017 12:13
@Sovember try ctrl-f5 if you're using chrome to reload the page with a clear cache
It often happens that the browser keeps an old version of the css around in its cache. Maybe you have to manually clear the cache in the settings somewhere
Rishi
@SpadesR
Jan 10 2017 12:14
Hi campers, I'm at the second Portfolio zipline now. I'm almost done with the user stories but I almost exclusively used html/bootstrap (tiny bit of CSS for text color). Should I just go on to the next assignment after having completed the user stories (with a barebones page) or should I keep tweaking the portfolio page? I feel like the assignments beforefor the zipline haven't really geared me up enough for properly adding CSS and JS. So I was debating whether that'll come up plenty in the next assignments or if I should just use other resources to learn more about it for the portfolio zipline.
Ananda Johnson
@Sovember
Jan 10 2017 12:18
@alpox It worked! Thanks, had no idea
CamperBot
@camperbot
Jan 10 2017 12:18
sovember sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 721 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 10 2017 12:24
@SpadesR There won't come much for teaching you about CSS and HTML. There will come exercises to teach you how to treat Javascript though.
This means that you will have to investigate yourself to learn about CSS and HTML through browsing and collecting resources about it - this is a good lesson to learn about how to find what you need in the internet.
However, if you feel you did enough for the portfolio for now, you can surely go on and maybe come back later when you learned more.
Rishi
@SpadesR
Jan 10 2017 12:41
@alpox Alright, thanks! I'll be sure to check out some other resources as well then.
CamperBot
@camperbot
Jan 10 2017 12:41
spadesr sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 722 | @alpox |http://www.freecodecamp.com/alpox
Ivan
@karpushchenko
Jan 10 2017 13:06
I'm completely stuck with QUOTE MACHINE challenge - Codepen is killing me! Why my script works fine in debug mode http://s.codepen.io/karpushchenko/debug/qqGBgz/NjrYzybVmqLA but it's not working in full?
It 's not even logging the console ><
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:09
Hey folks, i'm doing the twitch project just now. It works but my code is complex and inefficient...I'm sure there's a better way to do this but I'm stuck. Anybody feel like pointing me in the right direction?
This is my javascript code
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];

for (var i = 0; i < channels.length; i++) {
    (function(i) { // protects i in an immediately called function. see http://stackoverflow.com/a/15347771
        $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + channels[i], function(data) {
            if (data.stream !== null) { // if stream is live
                $('#channelsUL').append('<li class="online" name="' + channels[i] + '"><a href="' + data.stream.channel.url + '"><img height="50px" src="' + data.stream.channel.logo + '"></img></a><br>' + data.stream.channel.display_name + "<br>" + data.stream.channel.status + "</li>");
            } else { // stream is not live
                    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + channels[i], function(data) {
                    if (data.status == "404") { // if channel does not exist
                        $('#channelsUL').append('<li class="offline" name="' + channels[i] + '">' + data.message + '</li>');
                    } else { // if channel exists but stream is offline
                        $('#channelsUL').append('<li class="offline" name="' + channels[i] + '"><a href="' + data.url + '"><img height="50px" src="' + data.logo + '"></img></a><br>' + data.display_name);
                        if (data.status !== null) {
                            $('#channelsUL').append('<li class="offline" name="' + channels[i] + '">' + data.status);
                        } // end else

                    } // end else stream is not live
                    }); // end else getJSON
            } // end if stream is live
        }); // end getJSON
    })(i); // end immediately called function
} // end for loop
Darth Skywalker
@adityaparab
Jan 10 2017 13:13
wtf did I just see??? :laughing:

@villain101

the

 $('#channelsUL').append(....

part is common and repeating multiple times. Wrap it inside function and do that thing in that function.

pass your required values as parameters to this function.
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:17
@adityaparab Ok I'll have a look. thanks
CamperBot
@camperbot
Jan 10 2017 13:17
villain101 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 811 | @adityaparab |http://www.freecodecamp.com/adityaparab
Ivan
@karpushchenko
Jan 10 2017 13:19
I'm completely stuck with QUOTE MACHINE challenge - Codepen is killing me! Why my script works fine in debug mode http://s.codepen.io/karpushchenko/debug/qqGBgz/NjrYzybVmqLA but it's not working in full?
Anybody knows what's wrong?
sorry for full-quoting myself :)
alpox
@alpox
Jan 10 2017 13:20
@karpushchenko works in both cases for me
MaxLAB
@Max-LAB
Jan 10 2017 13:21
@karpushchenko I just also checked it works in both cases
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:21
@karpushchenko Doesn't work for me in codepen full
Ivan
@karpushchenko
Jan 10 2017 13:24
What the.. ) I thinks it's better to speak with Codepen support =(
Darth Skywalker
@adityaparab
Jan 10 2017 13:24
@karpushchenko try putting all your js code inside $(document).ready
Tariyel Hamidov
@tariellaelius
Jan 10 2017 13:24
@karpushchenko Maybe try including the json object in the code area instead of calling it with getJSON?
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:25
@karpushchenko Have you checked the developer console errors? Might be some clues there
Ivan
@karpushchenko
Jan 10 2017 13:25
It wasn't with $(document).ready too @adityaparab
@villain101 no errors, strange..
It wasn't with $(document).ready too @adityaparab
Darth Skywalker
@adityaparab
Jan 10 2017 13:27
I see
no idea then
Ivan
@karpushchenko
Jan 10 2017 13:27
@tariellaelius i think that Codepen forces me to use bicycles :) I'll try to beat it other way)
thanks everybody
DarylKnapp
@DarylKnapp
Jan 10 2017 13:28
Can anyone help me get my nav bar to float to the right rather then the left? maybe Im just so tried, that im blanking out lol :P
Darth Skywalker
@adityaparab
Jan 10 2017 13:28
shouldn't navbar be at top covering full screen width?
anyway. show your code please
DarylKnapp
@DarylKnapp
Jan 10 2017 13:30

@adityaparab Well of course it should, but I want the font, and hover over to the right rather then the left.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</div>
</nav>w

Paul Maxwell
@paulmaxwell
Jan 10 2017 13:30
@karpushchenko I fixed it on my end
Darth Skywalker
@adityaparab
Jan 10 2017 13:30
@DarylKnapp do you have code pen?
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:31
@karpushchenko Try changing your json url to https
Ivan
@karpushchenko
Jan 10 2017 13:31
@villain101 really? one second
Nicole Spangelo
@Spangelo
Jan 10 2017 13:32
@SpadesR My portfolio isn't how I want it to be...for now. I tweak it every so often so see what works and what doesn't. @alpox That's a great tip! It's also how I found some of the HTML and CSS I wanted. I keep a notebook of websites that I use as a resource.
Darth Skywalker
@adityaparab
Jan 10 2017 13:33
@DarylKnapp is this how your want it to look like?
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse pull-right" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Social</a></li>
      </ul>
    </div>
  </div>
</nav>
just added a class pull-right on the div#myNavbar
Ivan
@karpushchenko
Jan 10 2017 13:34
@villain101 thanks a lot! that really works! but It's so strange that the rest of the script stopped to work too :clap:
CamperBot
@camperbot
Jan 10 2017 13:34
karpushchenko sends brownie points to @villain101 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @villain101 |http://www.freecodecamp.com/villain101
DarylKnapp
@DarylKnapp
Jan 10 2017 13:35
@adityaparab UGH ! lols sorry for wasting your time.. I knew that.. too tried need sleep :P Thanks! :P
CamperBot
@camperbot
Jan 10 2017 13:35
darylknapp sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @adityaparab |http://www.freecodecamp.com/adityaparab
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:35
@karpushchenko nice :)
the developer console was showing me two errors
Ivan
@karpushchenko
Jan 10 2017 13:37
What browser do you use?
alpox
@alpox
Jan 10 2017 13:37
Chrome
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:37
i cant post them it goes wonky
yeh chrome
Ivan
@karpushchenko
Jan 10 2017 13:38
chromium shows nothing
I'll use mozilla next time =)
alpox
@alpox
Jan 10 2017 13:38
@karpushchenko Surely are on this link? http://codepen.io/karpushchenko/full/qqGBgz
Ivan
@karpushchenko
Jan 10 2017 13:41
@alpox please rerun, I forgot to save this
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:41
alpox
@alpox
Jan 10 2017 13:42
@villain101 Change https to http in the url and it should work
Paul Maxwell
@paulmaxwell
Jan 10 2017 13:43
yep
Ivan
@karpushchenko
Jan 10 2017 13:49
Something is wrong with my internet connection, so I can't load anything.
Anyway, thanks, everybody, now I now where the evil is
badalsaibo
@heyDante
Jan 10 2017 13:56
Is anybody onto Material Design?
badalsaibo
@heyDante
Jan 10 2017 14:11
@alpox it should be "Click the button below" . btw its awesome.
Frank
@Frankbono
Jan 10 2017 14:30
Can someone help me. I cannot get my dropdown menu to work in Bootstrap. I read the documentation and it still doesn't work. I have even copied and pasted that code from the documentation to test it out and the dropdown menu still doesn't work. I don't know what I missing here
kirbyedy
@kirbyedy
Jan 10 2017 14:33
@Frankbono I dont see you linked the jquery and bootstrap.js libraries
in the javascript section of your codepen settings
Frank
@Frankbono
Jan 10 2017 14:36
@kirbyedy I linked it under CSS. In my editor i put the following <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
kirbyedy
@kirbyedy
Jan 10 2017 14:37
nope thats another thing
you need jquery and bootstrap in the javascript section
bootstrap.js library
note that jquery needs to be loaded before bootstrap
Frank
@Frankbono
Jan 10 2017 14:37
@kirbyedy I just did what you said and added it and it still doesn't work
kirbyedy
@kirbyedy
Jan 10 2017 14:38
first jquery then bootstrap
add them in that order
Screen Shot 2017-01-10 at 16.39.04.png
Frank
@Frankbono
Jan 10 2017 14:42
@kirbyedy That worked!! Thank you so much! I was going crazy trying to figure this out.
CamperBot
@camperbot
Jan 10 2017 14:42
frankbono sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1674 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Frank
@Frankbono
Jan 10 2017 14:49

@kirbyedy How do I add the code in my editor correctly? It works in codepen but not in my editor

<head>
<title>FB Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<link src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

Sorry this is what i have

<head>
<title>FB Design</title>

<link src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

cmhall42
@cmhall42
Jan 10 2017 14:53
hey, can I get some clarification? With the 'Build a Tribute Page' can we choose the style/pictures/colours etc and the text ourselves? We just need to do it in the style suggested?
JD Tadlock
@jdtdesigns
Jan 10 2017 15:04
@cmhall42 You don't need to follow any kind of style. You just have to complete the 2 user stories. The style and text is all up to you. ;)
@Frankbono Is that all the code you've put in your editor?
cmhall42
@cmhall42
Jan 10 2017 15:08
@jdtdesigns thanks!
CamperBot
@camperbot
Jan 10 2017 15:08
cmhall42 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 825 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Vaidotas
@unreality23
Jan 10 2017 15:12
which weather api is the best to use for local weather task ?
Jessi L Wasell
@JessiW
Jan 10 2017 15:12
@coymeetsworld - not sure if you're in here today but I figured out what the problem was - I was simply missing the keyword 'this' before my translate. So I ended up with .....
<div id = "previewer" dangerouslySetInnerHTML={this.translate(this.state.value)}
          />
Thank you again for your help! @coymeetsworld @jdtdesigns
CamperBot
@camperbot
Jan 10 2017 15:13
jessiw sends brownie points to @coymeetsworld and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 826 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1763 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Alexeggers
@Alexeggers
Jan 10 2017 15:14
Are the projects we do here actually checked? I am asking because my weather app does not work when adblock is turned on
I am worried that someone looks at it and thinks it doesn't work, when it's actually the adblocker
JD Tadlock
@jdtdesigns
Jan 10 2017 15:17
@Alexeggers FCC was made to challenge you. They don't check your work. It's all an automated system. ;)
Vaidotas
@unreality23
Jan 10 2017 15:18
@Alexeggers which weather api did you use ?
Alexeggers
@Alexeggers
Jan 10 2017 15:18
@unreality23 the one provided in the task. openweathermap
@jdtdesigns well that's alright then I suppose, thanks!
CamperBot
@camperbot
Jan 10 2017 15:21
alexeggers sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 827 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
samsmith453
@samsmith453
Jan 10 2017 15:22
Hey guys, any idea why this isn't working to print random quotes? Thanks https://codepen.io/samsmith453/full/egmbpJ/
Vaidotas
@unreality23
Jan 10 2017 15:22
oh :( does anyone knows good alternatives to openweathermap ? because it doesnt work for me because work place blocked this website
Sorin Ruse
@sorinr
Jan 10 2017 15:23
@samsmith453 load your pen over http not https
samsmith453
@samsmith453
Jan 10 2017 15:23
@sorinr How do I do that?
@sorinr Done thank you!
CamperBot
@camperbot
Jan 10 2017 15:23
samsmith453 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1066 | @sorinr |http://www.freecodecamp.com/sorinr
JD Tadlock
@jdtdesigns
Jan 10 2017 15:24
@unreality23 https://apixu.com
Vaidotas
@unreality23
Jan 10 2017 15:24
@jdtdesigns thank you!
CamperBot
@camperbot
Jan 10 2017 15:24
unreality23 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 828 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Frank
@Frankbono
Jan 10 2017 15:25

@jdtdesigns I also put two scripts at the bottom right before the </body> tag <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<scirpt src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:29
can anyone tell me why '$(document).ready(function() {
$("#avatar").fadeIn();
});' wont work but '$(document).ready(function() {
$("#avatar").fadeOut();
});' does work?
JD Tadlock
@jdtdesigns
Jan 10 2017 15:29
@Frankbono post all the html you have in the editor
@rafaelmonroy Do you have the avatar set to display none; in the css? It will need to have a starting state
Frank
@Frankbono
Jan 10 2017 15:31

@jdtdesigns <!DOCTYPE html>

<head>
<title>FB Design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

</body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#BS-dropdown">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">FB Design</a>
</div>
<div class = "collapse navbar-collapse" id="BS-dropdown">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</div>

<header>
<div class="container">
<h1>testing</h1>
</div>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<scirpt src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:32
@jdtdesigns that worked! thanks :)
CamperBot
@camperbot
Jan 10 2017 15:32
rafaelmonroy sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 829 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 10 2017 15:32
</body> <!-- This should be <body> -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
@Frankbono
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:33
@jdtdesigns how can i add code to my messages onhere like you did just now
JD Tadlock
@jdtdesigns
Jan 10 2017 15:33
you also need
  <scirpt src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Vaidotas
@unreality23
Jan 10 2017 15:33
@rafaelmonroy type ctrl + enter
type ``` and after it again the same
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:35
$(document).ready(function() { $("#avatar").fadeIn('slow'); });
</body> <!-- This should be <body> -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
ahh nice! thanks
@unreality23 thanks :)
CamperBot
@camperbot
Jan 10 2017 15:36
rafaelmonroy sends brownie points to @unreality23 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for unreality23
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:39
<scirpt src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
</body> <!-- This should be <body> -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
  <scirpt src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Frank
@Frankbono
Jan 10 2017 15:40
@unreality23 I changed what you said and still nothing changes. Even the h1 elements don't work. It works in codepen but not in my editor. It gets squished under the menu bar and the dropdown still doesn't work
Screen Shot 2017-01-10 at 10.38.15 AM.png
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:41
javascript $(document).ready(function() { $("#avatar").fadeIn('slow'); });
```$(document).ready(function() {
$("#avatar").fadeIn('slow');
});
$(document).ready(function() { $("#avatar").fadeIn('slow'); });
html <script>$(document).ready(function() { $("#avatar").fadeIn('slow'); });</script>
Vaidotas
@unreality23
Jan 10 2017 15:43
@rafaelmonroy after every ``` you have to press ctrl+enter
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:43
$(document).ready(function() { $("#avatar").fadeIn('slow'); });
on a mac is it command + enter?
@unreality23
Vaidotas
@unreality23
Jan 10 2017 15:44
oh sorry i meant shift + enter
ment*
Rafael Monroy
@rafaelmonroy
Jan 10 2017 15:45
$(document).ready(function() { 
    $("#avatar").fadeIn('slow');     
});
ah yes! thanks man! @unreality23
CamperBot
@camperbot
Jan 10 2017 15:45
rafaelmonroy sends brownie points to @unreality23 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for unreality23
playingwithinfinity
@playingwithinfinity
Jan 10 2017 15:55
Hey guys, I"m trying to learn AJAX, but when I request data from a link and then log it to console it shows up backwards? What is wrong? http://codepen.io/jimpix/pen/WRQMVp?editors=1111
Tariyel Hamidov
@tariellaelius
Jan 10 2017 16:01
@playingwithinfinity What do you mean by 'backwards'? LOL
JD Tadlock
@jdtdesigns
Jan 10 2017 16:01
@playingwithinfinity Not sure what you mean. I added a button click event and it works the same. http://codepen.io/jdtadlock/pen/xgZEjO?editors=0010
@playingwithinfinity Also, don't use the Codepen console. Use the browser console (ctrl shift j or right click and hit 'inspect' then the 'console' tab).
The codepen console doesn't show all data and errors.
Calvyn
@youdoronronron
Jan 10 2017 16:06
Hi guys, can anybody tell me why this code isn't working properly? The 'about' button is not inline with the others:
<div>

<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>
Or is just codepen displaying it incorrectly?
Nitin Chandran Nair
@NitinNair89
Jan 10 2017 16:08
@youdoronronron Can you share your codepen link?
Nitin Chandran Nair
@NitinNair89
Jan 10 2017 16:14
@youdoronronron Close the <a> tag:
<div class="navbar-header">
       <a href="#" class="navbar-brand">Calvyn Evans Portfolio<a>

     </div>
NidhiVishen
@NidhiVishen
Jan 10 2017 16:32
i am building my tribute page..the picture which i am using is not showing up...only a broken image is showing.how to fix this/
Clyde Lobo
@oppiniated
Jan 10 2017 16:34
@NidhiVishen code? Are you linking pictures from your local hard drive?
@youdoronronron link?
NidhiVishen
@NidhiVishen
Jan 10 2017 16:38
no
from google
<img src="https://www.google.co.in/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F9%2F9c%2FKalpana_Chawla%2C_NASA_photo_portrait_in_orange_suit.jpg%2F220px-Kalpana_Chawla%2C_NASA_photo_portrait_in_orange_suit.jpg&imgrefurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FKalpana_Chawla&docid=NuIIFnDKNqR5mM&tbnid=eGxVtEckirDhTM%3A&vet=1&w=220&h=275&bih=638&biw=1366&q=kalpana%20chawla&ved=0ahUKEwjNiJ7o_bfRAhXKPY8KHXc1BiwQMwgwKAAwAA&iact=mrc&uact=8">
@oppiniated can u help?
Ian
@toianw
Jan 10 2017 16:44
@NidhiVishen try this: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Kalpana_Chawla,_NASA_photo_portrait_in_orange_suit.jpg/220px-Kalpana_Chawla,_NASA_photo_portrait_in_orange_suit.jpg">
NidhiVishen
@NidhiVishen
Jan 10 2017 16:47
@toianw thanks a lot but why didn't my link worked?
CamperBot
@camperbot
Jan 10 2017 16:47
nidhivishen sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @toianw |http://www.freecodecamp.com/toianw
Ian
@toianw
Jan 10 2017 16:48
@NidhiVishen because your link wasn't an image (note the .jpg extension on the end of the link I provided.
NidhiVishen
@NidhiVishen
Jan 10 2017 16:50
@toianw oh ok and how did u do that?
Ian
@toianw
Jan 10 2017 16:51
@NidhiVishen are you using chrome?
NidhiVishen
@NidhiVishen
Jan 10 2017 16:51
@toianw yes
Ian
@toianw
Jan 10 2017 16:52
@NidhiVishen right click on the image and select copy image address
NidhiVishen
@NidhiVishen
Jan 10 2017 16:54
@toianw oh yeah right thanku so much
CamperBot
@camperbot
Jan 10 2017 16:54
nidhivishen sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:warning: nidhivishen already gave toianw points
Ian
@toianw
Jan 10 2017 16:55
@NidhiVishen no problem :smile:
Kaz Baig
@kbaig
Jan 10 2017 17:07
Hey guys! I'd appreciate some feedback on my Wikipedia viewer.
http://codepen.io/kbaig/full/zNrqwz/
need help
quotes are duplicated while click
and quotes do not change
Kaz Baig
@kbaig
Jan 10 2017 17:08
@shenoyabhijith I'm not seeing any quotes when clicking at all
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:09
click on the link
Kaz Baig
@kbaig
Jan 10 2017 17:10
@shenoyabhijith I don't see a link in the pen. Do you mean the click here button?
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:12
i changed it
small bug
check out now
@kbaig
Kaz Baig
@kbaig
Jan 10 2017 17:15
@shenoyabhijith no change in full page view. It won't load in editor view, perhaps because you're missing a { at the end of line 6 in the javascript. I think that's what it is, the red error circle is there
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:16
ohh
ill correct it
r2d2
@UsamaHameed
Jan 10 2017 17:18
Can anybody link to an easy to understand guide on CSS units like vh and rem?
Ritvars
@RitvarsZ
Jan 10 2017 17:20
Can anyone tell me what's wrong with my code? Console.log returns undefined, undefined
for (var i = 0; i < streamers.length; i++){
    $.when(
        $.getJSON(urlCheck + streamers[i] + "?callback=?"),
        $.getJSON(urlData + streamers[i] + "?callback=?")
    ).done(displayData(dataCheck, dataStream));
};

function displayData(dataCheck, dataStream) {
    console.log(dataCheck, dataStream);
};
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:24
help duplicates
CamperBot
@camperbot
Jan 10 2017 17:24
no wiki entry for: duplicates
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:25
in random quotes
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:25
@UsamaHameed This should be helpful for a basic introduction: https://css-tricks.com/the-lengths-of-css/
r2d2
@UsamaHameed
Jan 10 2017 17:26
thanks @TylerMoeller looks like everyone likes css-tricks.com
Everyone is directing me to this website :P
CamperBot
@camperbot
Jan 10 2017 17:26
usamahameed sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1287 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:27
It's a good site - same person that helped found codepen.io :)
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:28
@shenoyabhijith Your API request is getting cached, add this before your getJSON:
$.ajaxSetup({ cache: false });
And be sure to .empty() your HTML before using .append() again.
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:28
help me
CamperBot
@camperbot
Jan 10 2017 17:28
no wiki entry for: me
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:29
thanks @TylerMoeller
CamperBot
@camperbot
Jan 10 2017 17:29
:star2: 1288 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
shenoyabhijith sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:29
when i click a button
there are 2 quotes
how can i eliminate the previous quote with a new 1
?
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:31
@shenoyabhijith .append() your quote to something different than $('body') and use .empty() to clear the contents of that element before appending a new quote again.
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:32
can you give a prototype for empty
how to use it
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:33
$('body').empty() would clear all the HTML between the <body></body>. Here are the help docs for that method: https://api.jquery.com/empty/
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:35
thanks @TylerMoeller
CamperBot
@camperbot
Jan 10 2017 17:35
:warning: shenoyabhijith already gave tylermoeller points
shenoyabhijith sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:36
how can i change the font color of the quotes
Michelle Smith
@shellsy515
Jan 10 2017 17:36
How do you cut and copy on codepen?
abhijith shenoy
@shenoyabhijith
Jan 10 2017 17:37
which are dynamic
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:38
@shenoyabhijith Use the .css() jQuery method. They have an example of changing the font color to red on this page: https://api.jquery.com/css/
Michelle Smith
@shellsy515
Jan 10 2017 17:40
Okay, so you have to use the shortcuts.
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:40
Yes, there is no toolbar with cut, copy, paste buttons in codepen
Ayush Bahuguna
@relentless-coder
Jan 10 2017 17:40
has anyone here ever used Angular Material?
Michelle Smith
@shellsy515
Jan 10 2017 17:40
Thank you @TylerMoeller
CamperBot
@camperbot
Jan 10 2017 17:40
shellsy515 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1289 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Kaz Baig
@kbaig
Jan 10 2017 17:45
Hey guys, I'm having trouble figuring something out for my Weather App. Is there a way to ensure that the user is always prompted for location permissions? I've linked it to friends and the prompt rarely shows on mobile and also sometimes doesn't on a laptop. https://codepen.io/kbaig/pen/LxVbqK?editors=0010
spuaca
@spuaca
Jan 10 2017 17:47

Example: $(".target:nth-child(3)").addClass("animated bounce");
Make the second child in each of your "well" elements bounce. You must target the children of element with the target class.

Code:

<script>
$(".well:nth-child(2)").addClass("animated bounce");
</script>

<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>

<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>

How do I make it work
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:49
@kbaig You can create a custom prompt if needed, but no, navigator.geolocation doesn't provide an option to always prompt the user for permissions. It's up to the browser and user settings. If they are not prompted for location, it's because they've already given permissions or denied them.
Kaz Baig
@kbaig
Jan 10 2017 17:55
@TylerMoeller I see. oh well!
Tyler Moeller
@TylerMoeller
Jan 10 2017 17:58
@spuaca Are you trying to make that work in codepen?
spuaca
@spuaca
Jan 10 2017 18:02
@TylerMoeller no, not in codepen, in an exercise
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:04
@spuaca The code you have above should make the second set of buttons bounce, but the <script> code needs to be after the two divs.
Can you link to the exercise? That may be okay for the challenges, it's been a while since I did those.
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:06
@spuaca Ahh, I see. You are targeting the entire .well, they just want you to target the second button (.target) in each of the wells.
They give you the code for targeting the third button: $(".target:nth-child(3)").addClass("animated bounce");, but want you to target the second button instead
spuaca
@spuaca
Jan 10 2017 18:08
@TylerMoeller thanks so much!
CamperBot
@camperbot
Jan 10 2017 18:09
:star2: 1290 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
spuaca sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:09
np :+1:
Robin
@LuckyRabbits
Jan 10 2017 18:30
Hello world
CamperBot
@camperbot
Jan 10 2017 18:30

welcome to FreeCodeCamp @LuckyRabbits!

Robin
@LuckyRabbits
Jan 10 2017 18:31
Hey hey, started the FrontEnd Certification a few days ago.
:) 25 challenges in!
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:31
Welcome @LuckyRabbits !
Robin
@LuckyRabbits
Jan 10 2017 18:32
šŸ‘‹šŸ¼
giovanniattina
@giovanniattina
Jan 10 2017 18:44
HI!
I'm trying to remove the spaces between he divs, how can I do it?
the divs*
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:48
@giovanniattina Remove the margin from your <h2> elements. For example:
h2 {
  margin: 0;
}
giovanniattina
@giovanniattina
Jan 10 2017 18:51
@TylerMoeller that's work, thanks
CamperBot
@camperbot
Jan 10 2017 18:51
giovanniattina sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1291 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 10 2017 18:52
@giovanniattina No problem - also a small bug in your code, the <h2> is closed with a </h3>.
ehutchllew
@ehutchllew
Jan 10 2017 18:55
Hello all! Quick question, aren't these 2 the same?
document.getElementById(lastClick + 'SFX').play();

$('#' + lastClick + 'SFX').play();
giovanniattina
@giovanniattina
Jan 10 2017 18:59
@TylerMoeller thanks again haha
CamperBot
@camperbot
Jan 10 2017 18:59
:warning: giovanniattina already gave tylermoeller points
giovanniattina sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 10 2017 19:03
@ehutchllew I don't think .play() is a jQuery method, the second line of code shouldn't run without a .get() first: $('#' + lastClick + 'SFX').get(0).play();
ehutchllew
@ehutchllew
Jan 10 2017 19:06
@TylerMoeller Tried .get(0), still no go though :(
@TylerMoeller wait nvm, got it!
@TylerMoeller thanks!
CamperBot
@camperbot
Jan 10 2017 19:07
ehutchllew sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1292 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
cjljohnson
@cjljohnson
Jan 10 2017 19:17
Hey for the https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api what exactly am i supposed to make? A hard coded list of streams or a search feature or what?
JD Tadlock
@jdtdesigns
Jan 10 2017 19:37
@cjljohnson Did you look at the example and read the user stories?
it's pretty detailed
cjljohnson
@cjljohnson
Jan 10 2017 19:38
Well i get that the FreeCodeCamp channel is hard coded as a result but what about the others?
JD Tadlock
@jdtdesigns
Jan 10 2017 19:41
@cjljohnson It's an app using the twitch api to see who's online, offline or closed. Nothing hard coded about the data.
BKAY142
@BKAY142
Jan 10 2017 19:42
Hi everyone! Is it possible to get FCC Front End Development lessons as printable slides? Would be nice to have it on paper alongside while I work on a project.
Tyler Moeller
@TylerMoeller
Jan 10 2017 19:46
@cjljohnson Use the hard-coded list of users in step 9 here: https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api. Your search will only need to search through those users. No need to grab additional users beyond that list.
cjljohnson
@cjljohnson
Jan 10 2017 19:47
@jdtdesigns then how do you determine which user streams to show if it isn't a hard coded list
@TylerMoeller ok thanks
CamperBot
@camperbot
Jan 10 2017 19:47
cjljohnson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1294 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 10 2017 19:48
Lots of people add additional users beyond that list - but that's a good starting point with some offline/online/closed accounts.
JD Tadlock
@jdtdesigns
Jan 10 2017 19:48
@cjljohnson I thought you were referring to getting the data. The list can be any streamers you want.
cjljohnson
@cjljohnson
Jan 10 2017 19:48
I guess i'll just make a list of Hearthstone pros or something, seems like a bit useless to just have a list of randoms
JD Tadlock
@jdtdesigns
Jan 10 2017 19:49
They just give you a mix that has some 24/7 streams and closed.
Basically, if you just put some random name in there, it's the same response as a closed stream.
Kaz Baig
@kbaig
Jan 10 2017 19:51
Was anyone able to get the Twitch API working with CodePen?
JD Tadlock
@jdtdesigns
Jan 10 2017 19:52
@kbaig Yes
cjljohnson
@cjljohnson
Jan 10 2017 19:57
From what i understand you can get it working but you expose your api key in doing so
Which is why there's the in between
JD Tadlock
@jdtdesigns
Jan 10 2017 19:58
@cjljohnson It's no big deal to expose your key. You can always change it in the future. ;)
Also, the key is not secure so it doesn't really matter anyway.
Kaz Baig
@kbaig
Jan 10 2017 20:03
I'm not sure what to put as my redirect URI while registering the app to get the client ID
Lydia Larae
@nevaIsDreaming
Jan 10 2017 20:04
can anyone help me with my wikipedia viewer?
Tyler Moeller
@TylerMoeller
Jan 10 2017 20:08
@nevaIsDreaming Sure, what's the question?
@kbaig It's the URL to your project
JD Tadlock
@jdtdesigns
Jan 10 2017 20:08
@kbaig Use your codepen project url
Tyler Moeller
@TylerMoeller
Jan 10 2017 20:08
:)
JD Tadlock
@jdtdesigns
Jan 10 2017 20:08
:D
Kaz Baig
@kbaig
Jan 10 2017 20:09
@jdtdesigns does it matter if it's in full or editor view?
JD Tadlock
@jdtdesigns
Jan 10 2017 20:09
@kbaig nope
Mike
@MNJCMagic
Jan 10 2017 20:10
Hi all, sorry to bother everyone but I have a confusing problem with my wikipedia viewer and was wondering if someone had some insight
Kaz Baig
@kbaig
Jan 10 2017 20:10
ok thanks!
Mariusz Klimek
@tarnos12
Jan 10 2017 20:10
@SHoar No, I dont. It does not appear on hover, but when I "hover" over an url inside my debugger, it also appears when I change firefox tabs. It works fine on chrome as far as I can see
Mike
@MNJCMagic
Jan 10 2017 20:11
My API calls seem to work about 1/3 of the time - if I wiki search "heart" it'll give me the data, but if I reload and search "face" it won't, though half an hour later "face" will work randomly
JD Tadlock
@jdtdesigns
Jan 10 2017 20:11
@MNJCMagic Post your codepen
Thank you
JD Tadlock
@jdtdesigns
Jan 10 2017 20:12
@MNJCMagic Just move jquery above bootstrap in Settings->JS
Mike
@MNJCMagic
Jan 10 2017 20:13
ah man thanks, I appreciate it
JD Tadlock
@jdtdesigns
Jan 10 2017 20:13
Make sure to use the browser console to see errors (ctrl shift j)
@MNJCMagic welcome ;)
Tyler Moeller
@TylerMoeller
Jan 10 2017 20:13

@MNJCMagic A couple of issues:

    <input class="form-control" id="searchTerm"></input>
  <button class="btn btn-primary" id="search">Submit</input>

Button needs to be closed with </button> and </input> is not needed, <input> is a void element like <img> that does not need a closing tag.
Also, your form is refreshing the page on submit - add e.preventDefault()

 $("#search").click(function(e){
   e.preventDefault();
Mike
@MNJCMagic
Jan 10 2017 20:14
ok thanks!
I appreciate you taking the time to look at it
Tyler Moeller
@TylerMoeller
Jan 10 2017 20:14
Third issue - you aren't using any bootstrap.js features, so remove that entirely :)
(unless you plan on using it in the future)
Mike
@MNJCMagic
Jan 10 2017 20:14
that's for down the road! the thing I have the hardest time with is the api
so I'm trying to get it functional before I make things stylish - not sure if that's the appropriate workflow
Tyler Moeller
@TylerMoeller
Jan 10 2017 20:15
Definitely a good workflow - work on the fit and finish last
Mike
@MNJCMagic
Jan 10 2017 20:15
thanks friends
Alan Sato
@Halfcreative
Jan 10 2017 20:30
https://codepen.io/halfcreative/pen/MJaBvX?editors=0010 I'm having trouble understanding why my content section gets refreshed back after i change it. Currently i have it set so that the search query is displayed in the content area after i press the search button, but it seems to just load it and then go back
Seth Church
@iEnder
Jan 10 2017 20:36
@Halfcreative add e as a perameter of your form submission function and e.preventDefault(); inside the function body
or watever you want to call your event
Alan Sato
@Halfcreative
Jan 10 2017 20:37
@pkmn9060 thank you
CamperBot
@camperbot
Jan 10 2017 20:37
halfcreative sends brownie points to @pkmn9060 :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @pkmn9060 |http://www.freecodecamp.com/pkmn9060
JD Tadlock
@jdtdesigns
Jan 10 2017 20:38
@Halfcreative
$("#search").on("click", function(e) {
    e.preventDefault(); // Need this
    var text = $("#textbox").val(); // It's .val() not .val
    $(".content").html(text);
    //Inside the "search" button function
});
Alan Sato
@Halfcreative
Jan 10 2017 20:38
@pkmn9060 why is it that some form submission functions need to specify prevent Default and others do?
Seth Church
@iEnder
Jan 10 2017 20:39
@Halfcreative by default the 'submit' button of a form usually carries out a action if none is specified it will refresh the page
Alan Sato
@Halfcreative
Jan 10 2017 20:40

@jdtdesigns i was changing back and forth from

var text = $("#textbox").val();

and

var text = document.getElementById("textbox").value;
Seth Church
@iEnder
Jan 10 2017 20:41
yea if your gonna use JQuery might as well just use the tools it provides
JD Tadlock
@jdtdesigns
Jan 10 2017 20:41
@Halfcreative ^
Alan Sato
@Halfcreative
Jan 10 2017 20:42
@pkmn9060 so will my random button not require me telling to prevent refresh because it will not try to refresh on its own.
Seth Church
@iEnder
Jan 10 2017 20:43
@Halfcreative no becuase its not submitting the form
Alan Sato
@Halfcreative
Jan 10 2017 20:43
@pkmn9060 super helpful man thanks @jdtdesigns you too thank you
CamperBot
@camperbot
Jan 10 2017 20:43
halfcreative sends brownie points to @pkmn9060 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: halfcreative already gave pkmn9060 points
:cookie: 830 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Michael Davis
@mhdavis
Jan 10 2017 20:44
@jdtdesigns you still around? I'm having some problems with sticky navigation bars
JD Tadlock
@jdtdesigns
Jan 10 2017 20:46
@mhdavis What's the issue?
Michael Davis
@mhdavis
Jan 10 2017 20:46
@jdtdesigns im not really sure to be honest
im using the js algorithm and css important bits
from this
I'm building it in sublime text so i don't have a pen for it
Lydia Larae
@nevaIsDreaming
Jan 10 2017 20:47
Michael Davis
@mhdavis
Jan 10 2017 20:47
the navbar is in, but for some reason event tho the js won't function @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 10 2017 20:48
@mhdavis Here's some simple sticky nav code i made .http://jsbin.com/hifoxe/2/edit?css,js,output
@mhdavis Sounds like your just not importing the js correctly
post your html
and file structure
Kevin Nolan
@betaalpha987
Jan 10 2017 20:50
Hiya. Are there any programs that let you visually place nested div containers, buttons and things like that as if it were an art program, then convert it to CSS3 so you can copy-paste into code? Like a layout generator but more advanced. I want to use it to more easily lay out the buttons and display for the calculator project, and later ones :)
Michael Davis
@mhdavis
Jan 10 2017 20:50
@jdtdesigns anything specific? like the <scripts> and <nav> realated stuff?
@jdtdesigns so the jsbin you sent me should still work if a header is added to the top
Seth Church
@iEnder
Jan 10 2017 20:51
@betaalpha987 sounds like your looking for a WYSIWYG Editor
Michael Davis
@mhdavis
Jan 10 2017 20:52
@jdtdesigns in terms of the scripts, they are at the bottom of the page in my html
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
Kevin Nolan
@betaalpha987
Jan 10 2017 20:52
@pkmn9060 - probably. Any good suggestions?
JD Tadlock
@jdtdesigns
Jan 10 2017 20:53
@nevaIsDreaming
$(document.ready(function() { // $(document needs to be $(document)
  $("button").click(function() {
    alert("That worked!");
    var term = $("#sterm").val();
    //get the text from the search box and store as a variable.
    var sUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + term + "&format=json&callback=?";
    //put the variable into the api call url

    $.getJSON(sUrl, function(json) {
      var rList = "<ul> ";
      for (var i = 0; i < 10; i++) {
        rList += "<li><a href=" + json[2][i] + ">" + json[0][i] + "</a>" + json[1][i] + "</li>";
        };
      rList += "</ul>";
      $("#resultbox").html(rList);
      //build the search results into an unordered list with jquery html function
    });
  });
})
  ); // Remove this
Seth Church
@iEnder
Jan 10 2017 20:53
@betaalpha987 not really I dont personally know many
JD Tadlock
@jdtdesigns
Jan 10 2017 20:53
@nevaIsDreaming Also, move jQuery above bootstrap in Settings->JS
Seth Church
@iEnder
Jan 10 2017 20:53
Though to be honest they are usually frowned apon and its best to learn css positioning by hand @betaalpha987
JD Tadlock
@jdtdesigns
Jan 10 2017 20:54
@mhdavis Post your html and js
Kevin Nolan
@betaalpha987
Jan 10 2017 20:56
@pkmn9060 - Okeydokey. I can understand that. So do folks not tend to use a layout editor just to get the basic layout done faster?
Michael Davis
@mhdavis
Jan 10 2017 20:57
@jdtdesigns HTML
  <nav id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Porfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
CSS
#navigation {
  position: relative;
  width: 100%; height: 50px;
  background: red;
  box-shadow: 0 0 5px rgba(#000, 0.15);
  text-align: center;
  line-height: 50px;
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    li {
      a {
        height: inherit;
        padding: 0 25px;
        display: inline-block;
        transition: all 150ms ease;
        line-height: inherit;
        text-transform: uppercase;
        &:hover {
          background: black;
          color: white;
        }
      }
    }
  }
    &.fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
  }
}
js
      //Sticky Navigation js
    var $nav = $('#navigation'),
        posTop = $nav.position().top;
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        if (y > posTop) { $nav.addClass('fixed'); }
        else { $nav.removeClass('fixed'); }
    });
JD Tadlock
@jdtdesigns
Jan 10 2017 20:59
@mhdavis You have an extra bracket above &.fixed ;)
'&' needs to refer to the ul
@mhdavis Or not lol
Michael Davis
@mhdavis
Jan 10 2017 21:01
@jdtdesigns yea just tried that; didn't work lol
the error must have to do with the css, I'm just not sure where
JD Tadlock
@jdtdesigns
Jan 10 2017 21:02
it's the #navigation that needs to be fixed, so that's right
what you have
give me a sec
Michael Davis
@mhdavis
Jan 10 2017 21:02

jd

@jdtdesigns no problem
sorry typo
@jdtdesigns I can tell you that the text align isn't working either. its text-align center but the navbar contents are pulled left
JD Tadlock
@jdtdesigns
Jan 10 2017 21:05
@mhdavis It's working fine here http://jsbin.com/savicew/edit?css,output
Post your <head> html code
Michael Davis
@mhdavis
Jan 10 2017 21:07
@jdtdesigns heads up i don't know if certhings in the meta are unecessary
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Portfolio Version 2</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
*certain things
there are certain attributes in my meta tags that you don't have
I wonder if i remove those
JD Tadlock
@jdtdesigns
Jan 10 2017 21:10
what does your console say?
Lydia Larae
@nevaIsDreaming
Jan 10 2017 21:12
@jdtdesigns thanks for the input. I acutally get an error without the )} in there, though i don't understand why it should be there either.
CamperBot
@camperbot
Jan 10 2017 21:12
nevaisdreaming sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 831 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Jessi L Wasell
@JessiW
Jan 10 2017 21:13
Anyone here working in react?
Or having done the markdown previewer?
My markdown previewer works great - I'm just trying to figure out how to implement the placeholder text in the textarea as shown in the example.
I'm using the same text shown in the example and putting it inside a string as the placeholder text but its not converting some of the characters - such as the ==== sign...
I'm assuming its because they're in a string - anyone able to point me to some info on this?
Jessi L Wasell
@JessiW
Jan 10 2017 21:22
Anyone here?
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:22
@nevaIsDreaming The first line of your JS is still not correct, it should be: $(document).ready(function() {
After that change, a search gives a list of results and an alert() that it worked.
Alan Sato
@Halfcreative
Jan 10 2017 21:23
@JessiW could we see your code?
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:23
@JessiW You'll probably get better help on Data Visulization projects at: https://gitter.im/FreeCodeCamp/HelpDataViz
With that said, I've finished that project and can take a quick look at your code.
Jessi L Wasell
@JessiW
Jan 10 2017 21:23
Okay @TylerMoeller - here's a link to my pen...
As you can see - its converting some of the text to markdown - and not others.
In the placeholder text I mean
But when you go to use it - everything works great.
DJ Pelland
@dna113p
Jan 10 2017 21:25
@JessiW You syntax isn't quite right.
Jessi L Wasell
@JessiW
Jan 10 2017 21:26
Okay - where? @dna113p
DJ Pelland
@dna113p
Jan 10 2017 21:26
Heading 
 =======  
Sub-heading 
 ----------- 
### Another deeper heading  Paragraphs are separated  by a blank line.   Leave 2 spaces at the end of a line to do a line break Text attributes *italic*, **bold**, `monospace`, ~~strikethrough~~ . Shopping list: * apples * oranges * pears  Numbered list:  1. apples  2. oranges  3. pears  The rain---not the reign---in  Spain.  *[Herman Fassett (https://freecodecamp.com/hermanfassett)*
You need some line breaks on those top 2, but let me look at the rest
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:26
@JessiW You'll need to add line breaks to get the markup working
Here's a fork to show you what I mean: https://s.codepen.io/TylerMoeller/pen/jyWGqO?editors=0010
Jessi L Wasell
@JessiW
Jan 10 2017 21:27
I did have it that way - but then it broke the string and threw errors - do you mean line breaks maybe with a regex?
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:27
I mean an actual \n
Look how I set up that variable defaultText -- it uses different text than what you had, but gives the idea
Jessi L Wasell
@JessiW
Jan 10 2017 21:28
Oh @TylerMoeller - I don't want to look at your whole code - though I appreciate your help very much - okay so just need to add those \n in then?
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:28
It's all your code, I just added a variable defaultText and
made that your return value
Jessi L Wasell
@JessiW
Jan 10 2017 21:29
Oh, good - okay - sorry, I thought you'd sent me a link to your pen! My mistake!
@TylerMoeller
I didn't look at it so I didn't know :)
alpox
@alpox
Jan 10 2017 21:29
@heyDante I'm really late at writing that but: You wrote the wrong man :D
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:29
Lol, nope a fork of yours. Good job not wanting to look at someone else's code btw - best way to learn :)
Jessi L Wasell
@JessiW
Jan 10 2017 21:30
Oh, I get it - somehow I forgot about using those + signs to continue the string...
@TylerMoeller thanks so much for your kind words :)
CamperBot
@camperbot
Jan 10 2017 21:30
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1295 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:31
You could also use backticks and make it a template literal. Something I should probably change
Jessi L Wasell
@JessiW
Jan 10 2017 21:31
I'm looking at what you forked right now...
What's template literal mean?
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:31
No need to quote each line of text and separate with a +. Really useful for large chunks of text: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Jessi L Wasell
@JessiW
Jan 10 2017 21:32
@TylerMoeller - one question just to clarify this in my brain :) ....so are we essentially using regex when we are using \n ?
looking at the link you sent too :)
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:33
@JessiW It's like a regex, but I think it's officially called a metacharacter when used that way
alpox
@alpox
Jan 10 2017 21:34
@JessiW \n is a normal newline character, which is exactly that in (i guess) every programming language. \ is just to escape the next character.
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:34
Now you've made me curious - never had to define it before
Yeah, like @alpox says. You can also use \t for tab, for example.
alpox
@alpox
Jan 10 2017 21:35
\t is a Tab character, \r is a carriage return, \n is a line feed
Jessi L Wasell
@JessiW
Jan 10 2017 21:35
@TylerMoeller & @alpox - okay makes sense - I'm totally new to markdown - never built anything with it before so I'm just trying to sort this all out :)
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:35
\n is purely a JavaScript thing. In markdown it's <br> :)
Jessi L Wasell
@JessiW
Jan 10 2017 21:35
Okay - I get that then. I think I have a handle on it now though so thank you so much @TylerMoeller !
CamperBot
@camperbot
Jan 10 2017 21:35
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jan 10 2017 21:36
Good luck with the rest :+1:
Jessi L Wasell
@JessiW
Jan 10 2017 21:36
@TylerMoeller thanks so much
CamperBot
@camperbot
Jan 10 2017 21:36
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave tylermoeller points