These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Jan 2017
Joe Escobedo
@joeEscob1023
Jan 09 2017 00:38
can you guys give me a review on how i did on my tribute page? Its my first go at making something look presentable. Would like to get some feed back!
Alan Sato
@Halfcreative
Jan 09 2017 00:41
I dont understand why my radiobuttons for celcius and fahrenheit havent been working properly. you should only be able to select one or the other https://codepen.io/halfcreative/pen/BpaPKx?editors=1010
Tyler Moeller
@TylerMoeller
Jan 09 2017 00:43
@Halfcreative The commas are causing some problems in your HTML:
        <label><input type="radio",name="tempSet" id="c">Celcius</label>
        <label><input type="radio",name="tempSet" id="f">Fahrenheit</label>
Remove those commas and you'll only be able to select one or the other
Alan Sato
@Halfcreative
Jan 09 2017 00:44
@TylerMoeller this is the third time you have helped me
@TylerMoeller thank you
CamperBot
@camperbot
Jan 09 2017 00:44
halfcreative sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1273 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 09 2017 00:44
np :+1:
@Halfcreative Also, check out this page to see how to use the <label> tag. They have an example with radio buttons: http://www.w3schools.com/tags/tag_label.asp
Joe Escobedo
@joeEscob1023
Jan 09 2017 00:50
can you guys review my Tribute page please? :shipit:
Brendon Bradley
@brenbrad
Jan 09 2017 00:56
Sure @TacoJoe
Brendon Bradley
@brenbrad
Jan 09 2017 01:00
with my limited knowledge it looks great. I appreciate the comments in the HTML section. also the JS fade out of tom lol thats great !!
the only thing i noticed was the comment under the picture is slightly off .. other then that Great job
I see the other Js when you hover over their logo it glows red .. thats cool
Gerrit Ohrner
@Gutgrinder
Jan 09 2017 01:02
Hey guys, need some help on the local weather projet. i built the api and it works if im pasting it right in the browser. But when i try to receive it with jquery it says 404 not found. Any ideas? Pen: http://codepen.io/Gutgrinder/pen/zNvvaV?editors=1010
Joe Escobedo
@joeEscob1023
Jan 09 2017 01:03
@brenbrad thanks!
CamperBot
@camperbot
Jan 09 2017 01:03
tacojoe sends brownie points to @brenbrad :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @brenbrad |http://www.freecodecamp.com/brenbrad
Alan Sato
@Halfcreative
Jan 09 2017 01:04
@TylerMoeller is my nested label usage not appropriate? The FCC examples have it made as such
Eberechi Akoma
@EAkoma
Jan 09 2017 01:06
@EAkoma
Hello, I completed my first assignment a week ago. I thought that I should submit my code for feedback lol.I am new to front-end.
https://codepen.io/EbereAko/pen/KNbPZQ
Sara Soliman
@solimansara
Jan 09 2017 01:27
Can someone please let me know what is missing in my code? The icons in my contact page are not working.
uriznik
@uriznik
Jan 09 2017 01:33
@solimansara you will need to link to any reuiqred external css resouce
uriznik
@uriznik
Jan 09 2017 01:38
@solimansara e.g. in the codepen settings > css > add http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Sara Soliman
@solimansara
Jan 09 2017 01:44
Thank you @uriznik that actually worked!
CamperBot
@camperbot
Jan 09 2017 01:44
solimansara sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @uriznik |http://www.freecodecamp.com/uriznik
Sara Soliman
@solimansara
Jan 09 2017 01:46
How can i make the icons appear all on the same line?
uriznik
@uriznik
Jan 09 2017 01:50
@EAkoma good job - I think the summary would look better left aligned and I don't think the transparency works that well with the picture
Sara Soliman
@solimansara
Jan 09 2017 01:57
That worked, thanks!!
J1G
@jaz1gdev
Jan 09 2017 02:07
For the tribute page, is it being suggested we utilize CSS as little as possible and strongly stick to HTML?
uriznik
@uriznik
Jan 09 2017 02:13
I wouldn't say so
the example uses bootstrap so it's still using css
J1G
@jaz1gdev
Jan 09 2017 02:14
super noob over here :) right, it's just in the video "he says notice I'm using very little CSS" so I thought that might be a hint to not rely on it heavily. #thinkingtoohard
uriznik
@uriznik
Jan 09 2017 02:19
don't feel like it needs to be a fancy page but no one cares if you did use more css
Sara Soliman
@solimansara
Jan 09 2017 02:21
Is there a way to leave comments in the CSS part of codepen?
Linda
@Mee0wth
Jan 09 2017 02:22
Hi guys, I'm trying to change the color of my nav-bar text but I'm not sure what I'm doing wrong in the CSS portion. Can someone help?
Help.png
Sara Soliman
@solimansara
Jan 09 2017 02:23
Never mind, i found out how :)
uriznik
@uriznik
Jan 09 2017 02:25
@Mee0wth what's the codepen link
I'll brb
uriznik
@uriznik
Jan 09 2017 02:33
@Mee0wth color: #FFFFFF!important; will override the default colour
João Mhurilo Godoi da Silva
@ebak123
Jan 09 2017 02:43
Good night guys, i've finished my Twitchtv JSON API project, BUT, i dont understand how to check if the streamer has closed their twitch account or the account never existed. I used the API KEY method to build the page, so, my response with ajax are limited...
uriznik
@uriznik
Jan 09 2017 02:44
@Mee0wth it looks like the bootstrap css is loaded after your css so it will take precedence (amongst external css files) so the !important will override that
Linda
@Mee0wth
Jan 09 2017 03:01
@uriznik Thank you so much!
CamperBot
@camperbot
Jan 09 2017 03:01
mee0wth sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 470 | @uriznik |http://www.freecodecamp.com/uriznik
Shanta Nathwani
@TantienHime
Jan 09 2017 03:01
So this sounds like a completely stupid question: How are we supposed to know what's in the bootstrap library for the Tribute Page Challenge? I'm totally fine with building the HTML to this and I'm used to adding my own CSS. I've already gone through the Bootstrap lesson and used to using Sublime Text 2 to fill in some of the blanks. Does this make sense? How am I supposed to access the Bootstrap "styling"?
uriznik
@uriznik
Jan 09 2017 03:06
@TantienHime you would add the predefined bootstrap classes to your elements
@TantienHime e.g.add the btn and btn-default classes to an anchor to make a bootstrap looking button<a class="btn btn-default" href="#" role="button">Link</a>
Adam Morris
@Adam-Morris
Jan 09 2017 03:10

I didn't mean for this to work, but it does. Why?

function bouncer(arr) {
  return arr.filter(function(val) {
    if (val !== false) {
      return val;
    }
  });
}

If you do bouncer([9, null, undefined, NaN, false, 0, "abc"]) it will output [9, "abc"]... Why does it do that? Is false and null and undefined and NaN and 0 all considered the same?

Shanta Nathwani
@TantienHime
Jan 09 2017 03:18
Thanks for that @uriznik. How am I to remember them all? Is there a reference that I can look at to see where they all are?
CamperBot
@camperbot
Jan 09 2017 03:18
tantienhime sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @uriznik |http://www.freecodecamp.com/uriznik
uriznik
@uriznik
Jan 09 2017 03:19
@Adam-Morris the filter function will convert the value you return to a boolean which is what actually does most of the work. When val is equal to false, the function will return undefined by default and that will also get turned into false
Shanta Nathwani
@TantienHime
Jan 09 2017 03:21
Fair enough. I did do a search and found it, but nothing looked familiar, save the columns. Just wanted to see if I was on the right path. Thanks again @uriznik!
CamperBot
@camperbot
Jan 09 2017 03:21
tantienhime sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:warning: tantienhime already gave uriznik points
Adam Morris
@Adam-Morris
Jan 09 2017 03:21
Ohh thank you @uriznik
CamperBot
@camperbot
Jan 09 2017 03:21
adam-morris sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 473 | @uriznik |http://www.freecodecamp.com/uriznik
uriznik
@uriznik
Jan 09 2017 03:22
fun fact, NaN !== NaN <- that is true
Kelechi Chinaka
@ke1echi
Jan 09 2017 03:26
pls guys who wants to walk me through the random quote machine
uriznik
@uriznik
Jan 09 2017 03:37
@kelechichinaka have you started yet?
Kelechi Chinaka
@ke1echi
Jan 09 2017 03:38
done with the ui @uriznik
uriznik
@uriznik
Jan 09 2017 03:39
@kelechichinaka have you chosen a quote api?
Kelechi Chinaka
@ke1echi
Jan 09 2017 03:39
no @uriznik
Linda
@Mee0wth
Jan 09 2017 03:47
Should all sections of html start with a <div class="container"> if I'm using bootstrap? Is this proper form?
uriznik
@uriznik
Jan 09 2017 03:48
@kelechichinaka start off with this one because it is easy to get going- https://github.com/jamesseanwright/ron-swanson-quotes
badalsaibo
@heyDante
Jan 09 2017 03:50
@Mee0wth it should, for better responsiveness
uriznik
@uriznik
Jan 09 2017 03:50
@Mee0wth yes you should have a container or container-fluid class to house your bootstrap grid
Linda
@Mee0wth
Jan 09 2017 03:51
@uriznik I'm still not sure when I should use container-fluid vs. container
badalsaibo
@heyDante
Jan 09 2017 03:52
@Mee0wth This really helped me!
https://www.youtube.com/watch?v=g3LRU3JF-rQ
Linda
@Mee0wth
Jan 09 2017 03:54
@heyDante Thank you!
CamperBot
@camperbot
Jan 09 2017 03:54
mee0wth sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 159 | @heydante |http://www.freecodecamp.com/heydante
Adam Morris
@Adam-Morris
Jan 09 2017 03:56
How would I make this: return (val != args[1] && val != args[2]...); in a for loop if I need to return something? I want it so I can just do return (val != args[i]);?
Here is where I am using it:
function destroyer(arr) {

  var args = [].slice.call(arguments);
  args.shift();

  return arr.filter(function(val) {

    return (val != args[1] && val != args[2]);

  });
}
badalsaibo
@heyDante
Jan 09 2017 03:59
@Mee0wth if you go through the bootstrap tutorials by that guy, you can easily make the portfolio page.
Linda
@Mee0wth
Jan 09 2017 04:00
@heyDante absolutely will do. Thank you for always being so helpful
CamperBot
@camperbot
Jan 09 2017 04:00
mee0wth sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:warning: mee0wth already gave heydante points
uriznik
@uriznik
Jan 09 2017 04:02
@Adam-Morris lots of ways, indexOf() function, reduce, an actual for loop that you could return early from, every() function
Joe Escobedo
@joeEscob1023
Jan 09 2017 04:02
after i make the tribute page, is the portfolio assignment supposed to come up? i feel like theres a ton i havent learned yet to get that far
Phillip Troutman
@troutman21
Jan 09 2017 04:04
@TacoJoe i just finished my portfolio assignment. I felt the same way starting off. Just start super basic and keep googling things and reviewing the past FCC lessons. I learned more during that assignment by just doing it than i did in all the lessons.
badalsaibo
@heyDante
Jan 09 2017 04:04
@TacoJoe it took one month for the potfolio page. Just know bootstrap, then you are easy to go.
Joe Escobedo
@joeEscob1023
Jan 09 2017 04:07
i mean all i learned were the opening 120 or so challenges and then the tribute page came up and i understood how to do that but right next was the portfolio one and I'm kinda like just whoa, I'm surprised we dont go through more challenges to get us ready for that one.
badalsaibo
@heyDante
Jan 09 2017 04:08
@TacoJoe Don't worry. You have to get the habit of search-ask theory. Also you can always have help from FCC.
Joe Escobedo
@joeEscob1023
Jan 09 2017 04:08
plus i find bootstrap hard to understand. I'm sure I'm making it harder than it really is but those columns are hard to get down
i usually use col-md-4 on most of them or i offset them with 4
I feel like I'm doing it wrong
Adam Morris
@Adam-Morris
Jan 09 2017 04:09
@uriznik Thanks. I got it using indexOf() in the end.
CamperBot
@camperbot
Jan 09 2017 04:09
adam-morris sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:warning: adam-morris already gave uriznik points
Phillip Troutman
@troutman21
Jan 09 2017 04:09
@TacoJoe YES, i agree with @heyDante the majority of the time thats what i was doing. and while you are researching you will come across new html tags and attributes that you didn't even learn yet.
Adam Morris
@Adam-Morris
Jan 09 2017 04:10
@TacoJoe I didn't use any bootstrap in my portfolio page, so don't worry. But mine isn't very good I don't think :/
badalsaibo
@heyDante
Jan 09 2017 04:10
@TacoJoe Told you. Take your time. Don't do it forcefully. Even I was in a same situation as yours.
Joe Escobedo
@joeEscob1023
Jan 09 2017 04:11
I'll be sure to ask for help because I know I'm going to need it aha! thanks @troutman21 @Adam-Morris and @heyDante !
CamperBot
@camperbot
Jan 09 2017 04:11
tacojoe sends brownie points to @troutman21 and @adam-morris and @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @troutman21 |http://www.freecodecamp.com/troutman21
:cookie: 164 | @heydante |http://www.freecodecamp.com/heydante
:cookie: 265 | @adam-morris |http://www.freecodecamp.com/adam-morris
Phillip Troutman
@troutman21
Jan 09 2017 04:13
yea i didnt use that much bootstrap either. But again it will become more and more natural to you as time goes on in the project. Also, check out other people's projects to get ideas of what is possible AND regularly post what you are working on. Most are not shy about giving you pointers on better ways to do things. When it comes down to it though... its your code. There are multiple ways of coding pages that will all end up with the same product. Do what makes sense in your head. @TacoJoe
Sanjay Tailor
@sanjaykt
Jan 09 2017 04:18
@max77p No I have not
Joe Escobedo
@joeEscob1023
Jan 09 2017 04:23
ill be sure to keep that in mind!
Adam Morris
@Adam-Morris
Jan 09 2017 04:36
Hey. I was doing this challenge, and I was wondering how my code could have been made better. I feel like I solved the challenge in a very bad way.
function getIndexToIns(arr, num) {

  var oldArr = arr.slice();
  num = num.toString();
  arr.push(num);

  arr = arr.sort(function(a, b) {
    return a - b;
  });

  for (var i = 0; i < arr.length; i++) {
    if (typeof arr[i] == "number") {
      arr[i] = 0;
    }
  }

  var numIndex = arr.findIndex(function(val) {
    return val == num.toString();
  });

  return (oldArr.findIndex(function(val) { return val == num; }) >= 0) ? numIndex - 1 : numIndex;
}
cjljohnson
@cjljohnson
Jan 09 2017 04:45
Hi
Does anyone know why my toggle on the temp element causes the temp div to vanish? it's line 45 in the JS code that causes it http://codepen.io/cjljohnson/pen/bgdMjP
I'm trying to get it so when you click it it changes to fahrenheit
uriznik
@uriznik
Jan 09 2017 04:52
toggle just hides the element
and toggle() again would show it
Ananda Johnson
@Sovember
Jan 09 2017 04:53
blob
Hi I have a question. I have a video within a bootstrap container fluid div, for some reason the height is not changing. I've tried changing the height of the container and the video itself but it's stuck at around 760 px for some reason, any help? Than you
cjljohnson
@cjljohnson
Jan 09 2017 04:54
@uriznik that's not what the documentatinos says https://api.jquery.com/toggle-event/
uriznik
@uriznik
Jan 09 2017 04:55
@cjljohnson they've deprecated that and reused the name it seems
cjljohnson
@cjljohnson
Jan 09 2017 04:56
What function should i use instead?
uriznik
@uriznik
Jan 09 2017 04:59
I don't know if there is one, I just used a click handler and kept track if it's celsius or fahrenheit in a global variable
cjljohnson
@cjljohnson
Jan 09 2017 05:00
By the way did the weather page styles work for whatever weather it gave you?
uriznik
@uriznik
Jan 09 2017 05:01
@cjljohnson yes I got the sun and moving clouds :)
Minoy
@minoy
Jan 09 2017 05:15

Hello!
Stuck with Object Oriented and Functional Programming challenge 'Make Unique Objects by Passing Parameters to our Constructor'
Following is the current code:

var Car = function(wheels, seats, engines) {
  //Change this constructor
  this.wheels = 4;
  this.seats = 5;
  this.engines = 1;
};

//Try it out here
var myCar = new Car (3,1,2);

On executing it is still showing the initial values for the properties. Any ideas? It looks correct to me :worried:

uriznik
@uriznik
Jan 09 2017 05:15
@Sovember do you have a codepen link?
Adam Morris
@Adam-Morris
Jan 09 2017 05:16
@minoy You have set this.wheels to 4, this.seats to 5, and this.engines to 1.
@minoy The function takes in the variables wheels, seats and engines but does nothing with them.
Minoy
@minoy
Jan 09 2017 05:23
@Adam-Morris Yes, I figured. Thanks!
CamperBot
@camperbot
Jan 09 2017 05:23
minoy sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @adam-morris |http://www.freecodecamp.com/adam-morris
Adam Morris
@Adam-Morris
Jan 09 2017 05:23
No problem.
Ananda Johnson
@Sovember
Jan 09 2017 05:29
@uriznik Hello, yes here i made one with a filler video . http://codepen.io/Sovember/pen/EZVgjj
The video part is under <-- Start Slider --->
uriznik
@uriznik
Jan 09 2017 05:42
@Sovember not sure, setting the width of the video may force the height to keep the aspect ratio
Ananda Johnson
@Sovember
Jan 09 2017 05:43
@uriznik Google chrome is also adding the object-fit: contain; css do you believe this is part of the issue?
uriznik
@uriznik
Jan 09 2017 05:45
don't know sorry
Ananda Johnson
@Sovember
Jan 09 2017 05:46
@uriznik it is fine thank you for the help either way
CamperBot
@camperbot
Jan 09 2017 05:46
sovember sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 474 | @uriznik |http://www.freecodecamp.com/uriznik
uriznik
@uriznik
Jan 09 2017 05:47
what are the dimensions of your original video (outside of the browser) ?
and the width of your monitor/browser
Ananda Johnson
@Sovember
Jan 09 2017 05:48
1280 x 720 @uriznik
Adam Morris
@Adam-Morris
Jan 09 2017 05:51
How could I use a regular expression in this? I am still a little confused about them.
    if (arr[i] == /*ALPHANUMERIC*/) {

      if ((arr[i] - 13 < 65)) {
        arr[i] = 90 + (arr[i] - 13 - 65) + 1; 
      } else {
        arr[i] -= 13;
      }

    }
uriznik
@uriznik
Jan 09 2017 05:52
@Sovember is that the video dimentions? or your laptop?
DarylKnapp
@DarylKnapp
Jan 09 2017 05:55

Good Eve Code Camp,

Can someone explain to me what Im doing wrong? I'm trying to make my background the same color as my hero title.

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

uriznik
@uriznik
Jan 09 2017 05:55
@Adam-Morris a regex wouldn't help much with the character code part of it
Adam Morris
@Adam-Morris
Jan 09 2017 05:56
facepalm I'm stupid, sorry lol
uriznik
@uriznik
Jan 09 2017 05:59
@DarylKnapp make the white background lower down the same as the gray at the top?
Ayush Bahuguna
@relentless-coder
Jan 09 2017 05:59
do I need to know bootstrap classes from the top of my head?
DarylKnapp
@DarylKnapp
Jan 09 2017 06:02
@uriznik I would like the background my Hero which is the dark blue hex #161920 be be were the white is right now on my page.
Adam Morris
@Adam-Morris
Jan 09 2017 06:03

Is there a short-term way of saying 1 to 10 in an array? Example:

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
return array; //1,2,3,4,5,6,7,8,9,10

Is there a short way to write the array of numbers 1 to 10?

I guess I could do it in a for loop with array.push(), but is there a quicker way?
Ananda Johnson
@Sovember
Jan 09 2017 06:07
@uriznik those are my image dimensions
h1tag
@h1tag
Jan 09 2017 06:09
hey, I'm on the Build a Random Quote Machine project, why the code(below) doesn't work (when I click the button nothing shows)?
<script>
  $(document).ready(function(){

    $("#getQuote").on("click", function(){
                          $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
        $("body").append(a[0].content + "<p>— " +   a[0].title + "</p>")
          });
    });

  });
</script>

<h1 id="title">RQG</h1>
<button id="getQuote" class="btn btn-primary">roll it</button>
uriznik
@uriznik
Jan 09 2017 06:09
@Sovember are you on a 1366x768 laptop? those image dimensions would scale to a height of 768 with a width of 100%
uriznik
@uriznik
Jan 09 2017 06:16
@DarylKnapp take out the body bgcolor which is deprecated, and add body { background-color: #202020; } to your css
@fortMaximus check your browser console for errors
Adam Morris
@Adam-Morris
Jan 09 2017 06:20
How could I improve this code?
function rot13Char(arr) {

  var nono = [];

  for (var k = 0; k < 128; k++) {

    if (k === 65) {
      k = 90;
      continue;
    }

    nono.push(k);

  }

  for (var i = 0; i < arr.length; i++) {

    if (nono.indexOf(arr[i]) < 0) {

      if ((arr[i] - 13 < 65)) {
        arr[i] = 90 + (arr[i] - 13 - 65) + 1; 
      } else {
        arr[i] -= 13;
      }

    }

  }

}

function rot13(str) { // LBH QVQ VG!

  var charCodes = [];

  for (var i = 0; i < str.length; i++) {
    charCodes.push(str.charCodeAt(i));
  }

  rot13Char(charCodes);

  for (var j = 0; j < charCodes.length; j++) {
    charCodes[j] = String.fromCharCode(charCodes[j]);
  }

  var endString = charCodes.join("");

  return endString;
}
Ananda Johnson
@Sovember
Jan 09 2017 06:22
yup! that's the number I'm stuck with 768, and width 100% @uriznik
any idea how to override this? thanks again
uriznik
@uriznik
Jan 09 2017 06:24
@Sovember this looks like it might help - http://wesbos.com/css-object-fit/
h1tag
@h1tag
Jan 09 2017 06:29
@uriznik I've got this error: Uncaught ReferenceError: $ is not defined
at index.html:7
Ananda Johnson
@Sovember
Jan 09 2017 06:29
@uriznik Perfect! Thanks a lot i'll let u kno if it works
CamperBot
@camperbot
Jan 09 2017 06:29
sovember sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:warning: sovember already gave uriznik points
h1tag
@h1tag
Jan 09 2017 06:30
I googled it but I think the answers I found on stackoverflow are using a different format than mine @uriznik
uriznik
@uriznik
Jan 09 2017 06:31
@fortMaximus do you have a codepen link?
@fortMaximus that error looks like you're not loading the jquery javascript
uriznik
@uriznik
Jan 09 2017 06:39
@fortMaximus move the script content into the javascript section of codepen
h1tag
@h1tag
Jan 09 2017 06:39
@uriznik why?
uriznik
@uriznik
Jan 09 2017 06:40
it'll work better with the codepen design
and you won't get that error
h1tag
@h1tag
Jan 09 2017 06:40
thanks @uriznik , it worked :)
CamperBot
@camperbot
Jan 09 2017 06:40
fortmaximus sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 476 | @uriznik |http://www.freecodecamp.com/uriznik
Gururaj Birajdar
@grajsb
Jan 09 2017 06:51
Hello
can some one please help me with my quote machine app
Refused to execute script from 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…age]=1&callback=jQuery1102023775303288113347_1483943147963&_=1483943147964' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
I get this error
Adam Morris
@Adam-Morris
Jan 09 2017 07:16
Well.... They don't teach you much about JSON and then they just throw you in the deep end lol
Adam Morris
@Adam-Morris
Jan 09 2017 07:24
Why isn't my jQuery changing the background-color? http://codepen.io/Amorris/pen/MJabmp
Ian
@toianw
Jan 09 2017 07:43
@Adam-Morris You're missing a closing )on the end of your css method call.
Adam Morris
@Adam-Morris
Jan 09 2017 07:47
@toianw I figured it out. I hadn't imported jQuery ._. Thanks for trying to help anyways
CamperBot
@camperbot
Jan 09 2017 07:47
adam-morris sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @toianw |http://www.freecodecamp.com/toianw
Adam Morris
@Adam-Morris
Jan 09 2017 07:58
Why isn't this changing the background-color? http://codepen.io/Amorris/pen/MJabmp
Ian
@toianw
Jan 09 2017 08:05
@Adam-Morris The commented out line seems to be missing two +s
Adam Morris
@Adam-Morris
Jan 09 2017 08:06
@toianw Yea thanks, just saw that too!
CamperBot
@camperbot
Jan 09 2017 08:06
:warning: adam-morris already gave toianw points
adam-morris sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
Ian
@toianw
Jan 09 2017 08:07
@Adam-Morris :+1:
Nguyen Thanh An
@RoastedChicken
Jan 09 2017 08:07
why this won't work
Tyler Beutel
@TylerBeutel
Jan 09 2017 08:08
I'm stuck on the Local Weather application challenge, anyone know how to get user's current location (from Code Pen)? It says it doesn't work, because the .getCurrentPosition() is depreciated for unsecure origins
Ian
@toianw
Jan 09 2017 08:10
@TylerBeutel on some browsers you need to use https to be able to use the .getCurrentPosition.
Tyler Beutel
@TylerBeutel
Jan 09 2017 08:14
Ohhhh thanks @toianw, just manually added https:// in the url and it worked :)
CamperBot
@camperbot
Jan 09 2017 08:14
:cookie: 485 | @toianw |http://www.freecodecamp.com/toianw
tylerbeutel sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
Leigh Hobson
@leighhobson89
Jan 09 2017 08:18
@TylerBeutel you might need to put a proxy in front of your api call URLs (depending which domain you are using) to be able to use https:// , like this:
https://cors-anywhere.herokuapp.com/<myURL>
https://cors-anywhere.herokuapp.com/http://maps.google.com
i had to do that with openweathermap and google maps anyway just to let you know
Tyler Beutel
@TylerBeutel
Jan 09 2017 08:21
Oh thats cool :P thanks @leighhobson89
CamperBot
@camperbot
Jan 09 2017 08:21
tylerbeutel sends brownie points to @leighhobson89 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @leighhobson89 |http://www.freecodecamp.com/leighhobson89
Adam Morris
@Adam-Morris
Jan 09 2017 08:33
How do I center the box? http://codepen.io/Amorris/pen/MJabmp
Don't worry I figured it out. I used margin
Adam Morris
@Adam-Morris
Jan 09 2017 08:57
Why isn't this getting the quote? http://codepen.io/Amorris/pen/MJabmp
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:10
Hahaha in the console, its coming up with the same error I am having... @Adam-Morris
Still have no idea how to fix it
@Adam-Morris There is a discussion about it for Code Camp here: FreeCodeCamp/FreeCodeCamp#3264
Adam Morris
@Adam-Morris
Jan 09 2017 09:12
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:13
Thats exactly what I need thanks @Adam-Morris
CamperBot
@camperbot
Jan 09 2017 09:13
tylerbeutel sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @adam-morris |http://www.freecodecamp.com/adam-morris
Jack Lyons
@JackEdwardLyons
Jan 09 2017 09:17
hi guys, i have a simple input field for emails, but get null from the value when i do a console log
why is that?
Adam Morris
@Adam-Morris
Jan 09 2017 09:19
I'm using a different API now. But it is giving me undefined? Any reason for that? http://codepen.io/Amorris/pen/MJabmp
Ian
@toianw
Jan 09 2017 09:20
@Adam-Morris @TylerBeutel or use jsonp. JQuery will do the heavy lifting for you. Just use this as the url:
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
Adam Morris
@Adam-Morris
Jan 09 2017 09:21
@toianw I love you. :heart: Thank you so much!
CamperBot
@camperbot
Jan 09 2017 09:21
adam-morris sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @toianw |http://www.freecodecamp.com/toianw
Ian
@toianw
Jan 09 2017 09:22
@Adam-Morris :smile:
@JackEdwardLyons your input element has two id's. Remove the one you don't need. And you forgot to add value on the end of this line in the js var email = document.getElementById("email");
Jack Lyons
@JackEdwardLyons
Jan 09 2017 09:30
thanks @toianw
CamperBot
@camperbot
Jan 09 2017 09:30
jackedwardlyons sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @toianw |http://www.freecodecamp.com/toianw
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:37
Hey guys, I'm working on the Local Weather API challenge, and I can't seem to get passed this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
I've tried a proxy, but I still can't seem to get it to work. This is my code: https://codepen.io/TylerBeutel/pen/OWyXWp
any ideas?
r2d2
@UsamaHameed
Jan 09 2017 09:41
Hi guys, does any one know of good Angular.js tutorials? There are so many to choose from... can't decide
Jack Lyons
@JackEdwardLyons
Jan 09 2017 09:43
@toianw could you see why i can;t get the input fields to clear on button click?
Gheorghe Sula
@sulagheorghe
Jan 09 2017 09:44
hi guys
im trying to make a one page web site, but I dont really know how much the height o each section it should be
any recommendation?
Adam Morris
@Adam-Morris
Jan 09 2017 09:47
How do I align the text in the box vertically? http://codepen.io/Amorris/pen/MJabmp
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:50
@Adam-Morris, you might not want to hardset a height value or it will overflow if the quote is too big
Adam Morris
@Adam-Morris
Jan 09 2017 09:50
What would I do instead?
Ian
@toianw
Jan 09 2017 09:51
@JackEdwardLyons I forked the pen. Take a look. I've commented the changes I've made.
http://codepen.io/toianw/pen/bgVqMZ?editors=1011
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:51
Just set the height to auto, and it will expand with its content @Adam-Morris
Adam Morris
@Adam-Morris
Jan 09 2017 09:51
@TylerBeutel Cool, thanks.
CamperBot
@camperbot
Jan 09 2017 09:52
adam-morris sends brownie points to @tylerbeutel :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @tylerbeutel |http://www.freecodecamp.com/tylerbeutel
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:52
@Adam-Morris This is mine if you want to have a look: https://codepen.io/TylerBeutel/pen/pRJBOJ/
Jack Lyons
@JackEdwardLyons
Jan 09 2017 09:53
cool thanks @toianw
CamperBot
@camperbot
Jan 09 2017 09:53
:warning: jackedwardlyons already gave toianw points
jackedwardlyons sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
Jack Lyons
@JackEdwardLyons
Jan 09 2017 09:53
:)
Adam Morris
@Adam-Morris
Jan 09 2017 09:53
@TylerBeutel I wish I could make that :laughing:
Tyler Beutel
@TylerBeutel
Jan 09 2017 09:55
@Adam-Morris You'll get there :+1: it just looks fancier than it really is
Adam Morris
@Adam-Morris
Jan 09 2017 09:58
@TylerBeutel I'm using your idea of changing background-color and also the nice looking buttons. :P
But I'm gonna add animations (so mine will be better)
Vaidotas
@unreality23
Jan 09 2017 10:05
Hello, Im doing the task called build a random quote machine, and im struggling with a tweet part, I can't find a solution in tweeting my quote from my website, I can easily tweet text which I already loaded on website but I cant tweet the text which is randomly chosen from the external file. Here is my code, and I hope someone will able to help me! :) Thank you in advance..
<script>



window.getInfo = function(response) {
            if (globals && globals.quote && globals.quotesAuthor) {
               $("#quotes").html(globals.quote);
                $("#quoteauthor").html(globals.quotesAuthor);

            }

        }

$("button").click(function() {
     $.ajax({
        type: "POST",
        url: "include.inc.php",
        dataType: 'json',
        success:  window.getInfo, getTweeted
    });
});

alert(getInfo);
var getAnswer = document.getElementById("quotes").innerHTML;

window.twttr = (function (d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = {
        _e: [],
        ready: function (f) {
            t._e.push(f)
        }
    });
}(document, "script", "twitter-wjs"));
 twttr.ready(function (twttr) {

    twttr.widgets.createShareButton(
        'http://fcc.coms',
    document.getElementById('developer'),
    function (el) {
        console.log("Button created.")
    }, {
        url: "include.inc.php",
        dataType: 'json',
        text: getAnswer,
        size: 'large'
    });
});


</script>
Gerrit Ohrner
@Gutgrinder
Jan 09 2017 10:19
Hey guys, need some help on the local weather projet. i built the api and it works if im pasting it right in the browser. But when i try to receive it with jquery it says 404 not found. Any ideas? Pen: http://codepen.io/Gutgrinder/pen/zNvvaV?editors=1010
Ilian Iliev
@zaken
Jan 09 2017 10:23
@unreality23 Hey, You are using the wrong twitter API
Vaidotas
@unreality23
Jan 09 2017 10:25
which one should i use ?
Ilian Iliev
@zaken
Jan 09 2017 10:25
@unreality23 it works like this
"http://twitter.com/home/?status=" + response.quoteText + ' (' + response.quoteAuthor + ')'
Vaidotas
@unreality23
Jan 09 2017 10:25
and im not sure why its wrong while its working
oh
Ilian Iliev
@zaken
Jan 09 2017 10:25
you only need a url
to which you query your tweet text basically
and twitter does the rest using the url
add this to your tweet button as href and voila ;)
Ian
@toianw
Jan 09 2017 10:31
@Gutgrinder add http:// to the front of the url. Otherwise your ajax request will be sent to codepens servers
Gerrit Ohrner
@Gutgrinder
Jan 09 2017 10:33
Oh, I see. That makes sense. Thanks a bunch :-).
Ilian Iliev
@zaken
Jan 09 2017 10:33
@Gutgrinder also if you want to train your API skills further, you could check users IP and use it as the weatherAPI query
it gives a more accurate result
and doesn't require a confirmation to use users location
Adam Morris
@Adam-Morris
Jan 09 2017 10:38
How could I make the colours fade from one to the next? http://codepen.io/Amorris/pen/MJabmp
Ilian Iliev
@zaken
Jan 09 2017 10:48

@Adam-Morris add

transition: background-color .5s ease-in-out;

to body in your CSS

edit time to your liking ofcourse
Adam Morris
@Adam-Morris
Jan 09 2017 10:49
@dzift whispers: I love you :heart: Thank you so much!
CamperBot
@camperbot
Jan 09 2017 10:49
adam-morris sends brownie points to @dzift :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @dzift |http://www.freecodecamp.com/dzift
Ilian Iliev
@zaken
Jan 09 2017 10:49
;) good luck
Vaidotas
@unreality23
Jan 09 2017 10:49
@dzift the thing is if i wanna use repsone.quote function, i have to put twttr.ready(function(twttr) insside function(repsonse) and then there is problems like, that twitter button will only appear if i will press get inspiration button, i want that that button would appear at the beginning of the page
Ilian Iliev
@zaken
Jan 09 2017 10:50
@unreality23 can you give me a codepen link
Adam Morris
@Adam-Morris
Jan 09 2017 10:53
How do I stop the text in the button going black when you click on it? http://codepen.io/Amorris/pen/MJabmp
Ilian Iliev
@zaken
Jan 09 2017 10:55

@Adam-Morris btw can you please add

.newquote:focus {  
  outline: 0 !important;
}

to your CSS, that blue border is driving me crazy :D

Adam Morris
@Adam-Morris
Jan 09 2017 10:55
@dzift What blue border?
Ilian Iliev
@zaken
Jan 09 2017 10:56
when you click the button
Adam Morris
@Adam-Morris
Jan 09 2017 10:56
@dzift :heart: Thank you.
CamperBot
@camperbot
Jan 09 2017 10:56
adam-morris sends brownie points to @dzift :sparkles: :thumbsup: :sparkles:
:warning: adam-morris already gave dzift points
alpox
@alpox
Jan 09 2017 11:07

As anwer to @kevinliu6102 :point_up: 8. Januar 2017 19:26 (Sry, bit late).
Answer: The problem is that you run all requests in parallel (So far so good) But that means, that the responses can come back in any order (The faster wins - race condition). If you want them to be in the same order as given, you have to implement a controlling mechanism to handle that.

To everyone interested:
I'll come to speak about an a bit advanced topic now because it has a lot of actuality atm.
Nowadays, javascript developers handle asynchronous stuff a lot with "Promises" to come around the clutter of callback style programming.
Promises are a new concept and most browsers already implemented it .
There is as example Promise.all which waits for a number of promises to fulfil and run a function after which gets all the responses in the order as you gave it into the call. This is how keeping order is usually handled at the moment.

Also, to speak about the way you ask for data - XMLHttpRequests are the usual old style of getting data called Ajax which was not created to do the job which it does nowadays. I just wanted to point out that because of this fact, and that everyone needs wrapper functions around these clumsy ajax calls, there is a new method which is already implemented in most browsers - not sure how far the compability goes atm. It probably isn't ready yet to use in production apps, but it will take the role of ajax quite soon:
The Fetch API of javascript.

Adam Morris
@Adam-Morris
Jan 09 2017 11:30
Phew. Just got my random quote generator fully functional! Any suggestions or comments? http://codepen.io/Amorris/pen/MJabmp
alpox
@alpox
Jan 09 2017 11:43
@Adam-Morris Looks good! :-)
Adam Morris
@Adam-Morris
Jan 09 2017 11:44
thanks! @alpox
CamperBot
@camperbot
Jan 09 2017 11:44
adam-morris sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 716 | @alpox |http://www.freecodecamp.com/alpox
Adam Morris
@Adam-Morris
Jan 09 2017 11:45
In the .quotesection of my CSS code, I have set height: auto; is there a way to transition that when it changes? http://codepen.io/Amorris/pen/MJabmp
alpox
@alpox
Jan 09 2017 11:45

@Adam-Morris Just a style thing, to tell that its possible:

$(".tweetquote").on("click", function() {
      tweetQuote();
  });

Can be written simpler as

$(".tweetquote").on("click", tweetQuote);
Since tweetQuote is already a function ;-)
@Adam-Morris What exactly do you want to transition it to?
Adam Morris
@Adam-Morris
Jan 09 2017 11:49
@alpox Since I have my height: auto; the height will change, depending on the size of the quote. if it is a really long quote, the box will need to be bigger, so the height will change. I want to make this (top of the page) when it changes size.
alpox
@alpox
Jan 09 2017 11:56
@Adam-Morris I'm afraid this is not really possible without javascript calculations
Adam Morris
@Adam-Morris
Jan 09 2017 11:57
@alpox Damn.
Gheorghe Sula
@sulagheorghe
Jan 09 2017 12:05
hi
anybody can tell me why on scrolling, my navbar doesn`t change?
Marianissimus
@Marianissimus
Jan 09 2017 12:08
@sulagheorghe hi. add a # to your links. like this: <li><a href="#contact">Contact Us</a></li>. You need to link to an id, that's why you need the #
Gheorghe Sula
@sulagheorghe
Jan 09 2017 12:10
@Marianissimus thank you!!
CamperBot
@camperbot
Jan 09 2017 12:10
:cookie: 300 | @marianissimus |http://www.freecodecamp.com/marianissimus
sulagheorghe sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
Marianissimus
@Marianissimus
Jan 09 2017 12:10
cu placere, gheorghe:)
Gheorghe Sula
@sulagheorghe
Jan 09 2017 12:11
@Marianissimus ))
Ilian Iliev
@zaken
Jan 09 2017 12:16

@Adam-Morris here

$(".quote").html("<i class=\"fa fa-quote-left\" aria-hidden=\"true\"></i> " + json["quoteText"] + " <i class=\"fa fa-quote-right\" aria-hidden=\"true\"></i>");

you can make it more readable if you leave the fa icons in the html, and only insert json["quoteText"] (making and extra div or span, but making the code cleaner)

alpox
@alpox
Jan 09 2017 12:26
@Adam-Morris I just tried a bit around and it seems there is no smooth solution anyways.
The question is when to adjust the text (This always happens instantly) and the text would just overflow when the container grows slowly.
The only almost viable solution i found was this (Fork):
http://codepen.io/alpox/pen/ZLbyVP
Where i just let it wait for 0.5 seconds until the transition is done before setting the new quote, in case that the container has to grow
(And it needed a hidden container clone)
All in all you can say there is no good solution for that and you should probably stay with the version you got
Systole19
@Systole19
Jan 09 2017 12:55
Hi guys. I've created a page using only HTML and CSS, no bootstrap. It's not one of the FCC projects just something I decided to try in my own time. Is it okay if I post the codepen here for some feedback?
Alexandria
@astrawter
Jan 09 2017 12:57
@Systole19 you can or you can try posting in CodeReview!
Systole19
@Systole19
Jan 09 2017 12:57
Oh! Thank you!
alpox
@alpox
Jan 09 2017 12:57
@Systole19 I guess so. Can you maybe specify what kind of feedback you want? Codestyle / Visual design...
Systole19
@Systole19
Jan 09 2017 12:57
Codestyle I believe.
I know it is absolutely not responsive and I'm sure there are things I could have done better. Saved some lines of code.
@astrawter @alpox Well, here it is!
Like I said, lacks responsiveness.
Utkarsh Agarwal
@greenutkarsh
Jan 09 2017 13:01
It seems difficult to Build a Personal Portfolio Webpage after whatever has been taught before this project. So can I skip this project for now and learn further ?
alpox
@alpox
Jan 09 2017 13:02
@greenutkarsh The point of the Portfolio Webpage is to get you into your own research and learning through documentations / googling
Alexandria
@astrawter
Jan 09 2017 13:02
@greenutkarsh I think its best to work on the portfolio first it only gets harder from there so might as well push through it!
alpox
@alpox
Jan 09 2017 13:02
So its not recommended to just go on without it, its recommended to make your way through
Utkarsh Agarwal
@greenutkarsh
Jan 09 2017 13:02
I tried but couldnt come up with some thing good
Alexandria
@astrawter
Jan 09 2017 13:03
You don't need anything fancy for now just try with something simple header picture paragraph
you can expand it from there
alpox
@alpox
Jan 09 2017 13:03
@greenutkarsh You just have to keep going and do your research through mostly google :-) lots of stackoverflow, html documentations, bootstrap documentations and examples...
@Systole19 I think giving proper feedback about html/css only is bit hard because there are 100 ways to do it. I don't see anything weird or wrong in your code so thats probably a good thing :-) Maybe take a look at clearing when working with floating designs (Navbar). Thats not really a matter in your case though.
Also, maybe you wanna take a look at Flexbox which could make your life a bit easier in some cases (Not yet totally stable in browsers since its a new technology. But its upcoming)
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:09
Hello guys! I am doing the "Show the Local Weather" project and I am having some issues. I can't get any JSON data from third-party APIs. I really don't know what I'm doing wrong and I'm in a tough spot. Anyone could offer some help?
kirbyedy
@kirbyedy
Jan 09 2017 13:10
lets see what you got
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:13
https://codepen.io/blamed/pen/GrJxPM Here is the pen. Thanks
Rimi.
@Codevotee
Jan 09 2017 13:14
@xblamedx when I go on the pen, it displays the latitude
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:15
Really? Why I can't see anything?
kirbyedy
@kirbyedy
Jan 09 2017 13:15
@xblamedx looks ok to me
Rimi.
@Codevotee
Jan 09 2017 13:16
at the top of your browser, does it show any icon saying something like "blocked scripts" ? @xblamedx
kirbyedy
@kirbyedy
Jan 09 2017 13:16
lon = data.lon; <-- this one should be data.longitude
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:18
@kirbyedy You are right but I'm trying to figure out what I'm doing wrong first and I don't see any Latitude
I get this console error GET https://freegeoip.net/json/ net::ERR_BLOCKED_BY_CLIENT
send @ jquery.min.js:4
ajax @ jquery.min.js:4
r.(anonymous function) @ jquery.min.js:4
getJSON @ jquery.min.js:4
(anonymous) @ VM115 pen.js:5
j @ jquery.min.js:2
k @ jquery.min.js:2
kirbyedy
@kirbyedy
Jan 09 2017 13:19
you should allow in your browser to use your location
so your code is correct
Screen Shot 2017-01-09 at 15.20.59.png
check the image
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:25
I just went through the browser settings and set it to allow all sites to track my physical location and I still get nothing in return.
Rimi.
@Codevotee
Jan 09 2017 13:25
@kirbyedy KIRBY is this your IP: 178.62.---.-- lol :laughing:
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:27
@APRim05 No I don't see any icon like it.
Rimi.
@Codevotee
Jan 09 2017 13:28
@xblamedx try changing https to http, and reload
kirbyedy
@kirbyedy
Jan 09 2017 13:28
nope ;)
my starts with 128.x.x.x
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:30
@APRim05 When I do this i get this error Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'http://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://codepen.io' that is not equal to the supplied origin. Origin 'http://codepen.io' is therefore not allowed access.
Rimi.
@Codevotee
Jan 09 2017 13:30
ahh ok
ok leave it as https @xblamedx
@xblamedx im not sure why it's not showing, it works fine for me
Systole19
@Systole19
Jan 09 2017 13:33
@alpox Thank you for the feedback alpox! I'll definitely take a look at Flexbox. Could you explain clearing floats?
CamperBot
@camperbot
Jan 09 2017 13:33
systole19 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 717 | @alpox |http://www.freecodecamp.com/alpox
Panagiotis Zisis
@pzisis93
Jan 09 2017 13:38
Does anyone know who should I contact or where should I post about my issue?
Paul Hwang
@rpgstupid
Jan 09 2017 13:41
Can anyone help me with the lesson "Change Text Inside an Element Using jQuery"
kirbyedy
@kirbyedy
Jan 09 2017 13:43
I could help if I knew what is it about :F
:D
Paul Hwang
@rpgstupid
Jan 09 2017 13:43
I'm honestly pretty lost on what to do, so do you think you can look at the lesson? "Change Text Inside an Element Using jQuery"
kirbyedy
@kirbyedy
Jan 09 2017 13:45
@rpgstupid well as far as I can see you have to emphasise the text
so you have to use <em>
similar as the example in the instructions
Here's how you would rewrite and emphasize the text of our heading:

$("h3").html("<em>jQuery Playground</em>");
now you apply it to your target 4
Paul Hwang
@rpgstupid
Jan 09 2017 13:47
@kirbyedy
but my target 4 isnt in the jQuery format, would i have to rewrite it completely?
It's like this
id="target4">#target4</button>
<button class="btn btn-default target"
Darth Skywalker
@adityaparab
Jan 09 2017 13:54
A cleaner approach would be
$('<em/>',{text:'jQuery Playground'}).appendTo('h3');
Yura
@Yukayuk
Jan 09 2017 14:02
hi, I have a problem with a tribute page building. I wrote a code for image but it doesn't appear on the screen. here it is:<img src="http://media.cubadebate.cu/wp-content/uploads/2011/06/hemingway1.jpg" alt="uncle-hem">
should I write smth in CSS field? or JS?
MaxLAB
@Max-LAB
Jan 09 2017 14:05
@Yukayuk this is corect image code
did you put it inside <body> tag?
Yura
@Yukayuk
Jan 09 2017 14:08
sorry, it works. I've just written unnecessary script in JS
MaxLAB
@Max-LAB
Jan 09 2017 14:08
@Yukayuk nicee, keep on working :+1:
Yura
@Yukayuk
Jan 09 2017 14:14
@Max-LAB uff, it's not easy task(
kirbyedy
@kirbyedy
Jan 09 2017 14:14
@adityaparab that is correct but the instruction down there says: Make sure you are using .html() and not .text().
so the correct answer would be: $("#target4").html("<em>#target4</em>");
I think...
MaxLAB
@Max-LAB
Jan 09 2017 14:17
@Yukayuk sure it is, just keep on working and don't hesitate to ask anything that confuses you.
Panagiotis Zisis
@pzisis93
Jan 09 2017 14:17
@kirbyedy I found out what my problem was.... aaaand it was adblock :P
kirbyedy
@kirbyedy
Jan 09 2017 14:18
lol
Panagiotis Zisis
@pzisis93
Jan 09 2017 14:18
exactly
Vaidotas
@unreality23
Jan 09 2017 14:27
does anyone knows in which part i should put this code ? "http://twitter.com/home/?status=" + response.quoteText + ' (' + response.quoteAuthor + ')' its from build a random quote machine. thank you for the answer
"http://twitter.com/home/?status=" + response.quoteText + ' (' + response.quoteAuthor + ')'
Vaidotas
@unreality23
Jan 09 2017 14:32
anyone ? :)
Hjalmar Johnson
@HjalmarJ
Jan 09 2017 14:36
https://codepen.io/Mistahstek/pen/QdWdoL?editors=1111
Hello good people, what is wrong with my ajax call? Thanks xD
Yura
@Yukayuk
Jan 09 2017 14:37
@Max-LAB when I analyze my code with HTML Inspector in CodePen it says the following:
The classes text-center (1) container (1) row (1) col-md-3 (4) are used in the HTML but not found in any stylesheet. Since you have external stylesheets, you can probably ignore this.
'<h2' is not a valid attribute of the <div> element.
'<img' is not a valid attribute of the <div> element.
what does it mean?
badalsaibo
@heyDante
Jan 09 2017 14:38
@Yukayuk add bootstrap.css
Yura
@Yukayuk
Jan 09 2017 14:38
@heyDante where?
MaxLAB
@Max-LAB
Jan 09 2017 14:38
@Yukayuk you need to use <h2></h2> tag like this or <img src=""> tag like this
Yura
@Yukayuk
Jan 09 2017 14:39
@Max-LAB yes, i do
MaxLAB
@Max-LAB
Jan 09 2017 14:39
@Yukayuk can you send me your codepen here or in private message
badalsaibo
@heyDante
Jan 09 2017 14:41
@Yukayuk copy this code above your html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Yura
@Yukayuk
Jan 09 2017 14:42
@heyDante i did it, but the same message when analyzing
MaxLAB
@Max-LAB
Jan 09 2017 14:43
@Yukayuk remove image from <h2> tag it is not valid html syntax
Sorin Ruse
@sorinr
Jan 09 2017 14:44
@solimansara if you want to get rid of the white space between navigation and home section you can add this to css:
#home h1{
  margin-top: 0;
}
MaxLAB
@Max-LAB
Jan 09 2017 14:44
@Yukayuk need to close this div <div class="col-md-3" like <div class="col-md-3">
@Yukayuk this too <div class="col-md-3"> </div> <div class="col-md-3"> </div>
Yura
@Yukayuk
Jan 09 2017 14:47
@Max-LAB and where should i insert img tag?
MaxLAB
@Max-LAB
Jan 09 2017 14:47
@Yukayuk above or below <h2> tag
Venkatesh Thapan
@thenerdyouknow
Jan 09 2017 14:47
In my calculator when I reduce size of window the calculator buttons reduce to one button a row.
How do I fix that?
Yura
@Yukayuk
Jan 09 2017 14:49
@Max-LAB can i simply remove h2 tag and leave img?
MaxLAB
@Max-LAB
Jan 09 2017 14:50
@Yukayuk sure you can, use this example @heyDante sent to you
Yura
@Yukayuk
Jan 09 2017 14:50
@heyDante uh! thanks
CamperBot
@camperbot
Jan 09 2017 14:50
yukayuk sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 199 | @heydante |http://www.freecodecamp.com/heydante
Yura
@Yukayuk
Jan 09 2017 14:51
@heyDante what did you change exactly?
MaxLAB
@Max-LAB
Jan 09 2017 14:51
@Yukayuk still I think you shoud remove <img> from <h2> <h2> <img src="http://media.cubadebate.cu/wp-content/uploads/2011/06/hemingway1.jpg" alt="uncle-hem"> Uncle-Hem </h2>
badalsaibo
@heyDante
Jan 09 2017 14:52
you were using improper <div> tags?. I didn't alter anything though. Just corrected your <div> tags. @Yukayuk
Yura
@Yukayuk
Jan 09 2017 14:53
how did i use it improperly? closing tag?
MaxLAB
@Max-LAB
Jan 09 2017 14:54
@Yukayuk every <div> you open you need to close it with </div>
badalsaibo
@heyDante
Jan 09 2017 14:54
see your 6th line of code @Yukayuk
you have not closed it properly.
Yura
@Yukayuk
Jan 09 2017 14:55
@heyDante yes, i see)
badalsaibo
@heyDante
Jan 09 2017 14:55
I think that was the only problem.
Your code seems fine to run.
also the 8th line of code is not closed. @Yukayuk
Hello911
@Hello911
Jan 09 2017 15:07
https://codepen.io/Hello911/pen/RKPejX?editors=1100 how do I vertically center all the boxes relative to the screen? I did align-items, and justify-content both center. and made height: 100% for both flex box and body.
Can someone Help PLZ!?!?!?
Vaidotas
@unreality23
Jan 09 2017 15:08
how to add # in your link that it would be visible ? i want that in my tweet text at the end would be #FCC but if i do that #FCC dissapears
Hello911
@Hello911
Jan 09 2017 15:10
@heyDante I need to align all 3 boxes within the screen given that the screen is large enough to show a big blank space underneath/
Sorin Ruse
@sorinr
Jan 09 2017 15:11
@Hello911 you have to give a fixed height like min-height: 600px not %gs
Yura
@Yukayuk
Jan 09 2017 15:12
@Max-LAB how to resize images in order make them fit to the size of the column?
should i make box for each of the image in row?
Sorin Ruse
@sorinr
Jan 09 2017 15:13

@Hello911 try:

body{
  background:#4A6556;
  min-height: 600px;
  }

to see what happens

badalsaibo
@heyDante
Jan 09 2017 15:13
@Yukayuk use bootstrap class of class="img-responsive"
Hello911
@Hello911
Jan 09 2017 15:14
@sorinr nothing.
do I need to give .flex the same thing for height?
Sorin Ruse
@sorinr
Jan 09 2017 15:14
@Hello911 add class="flex" to body
Hello911
@Hello911
Jan 09 2017 15:15
but I already did for the first div class.
Vaidotas
@unreality23
Jan 09 2017 15:16
how to add # in your link that it would be visible ? i want that in my tweet text at the end would be #FCC but if i do that #FCC dissapears
Yura
@Yukayuk
Jan 09 2017 15:20
@heyDante thanks!
CamperBot
@camperbot
Jan 09 2017 15:20
yukayuk sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:warning: yukayuk already gave heydante points
Yura
@Yukayuk
Jan 09 2017 15:24
how to set font size of the headings?
Frank
@Frankbono
Jan 09 2017 15:24
Hi, I am having trouble with my dropdown menu using bootstrap. The dropdown menu doesn't work. I read the documentation from the Bootstrap site and I can't see my mistake. Can someone help me?
Sorin Ruse
@sorinr
Jan 09 2017 15:25
@Hello911 yes but a flex container must have itself a fixed height or his parent must have a fixed height. take a look at this example
Hello911
@Hello911
Jan 09 2017 15:25
https://codepen.io/Hello911/pen/RKPejX?editors=1100 How do I make the parent flex container (red) extend the entire height of the screen?
Frank
@Frankbono
Jan 09 2017 15:28
Anyone?
Vaidotas
@unreality23
Jan 09 2017 15:38
@Frankbono you might me missing some library or the method of dropdown is newer or older way then the library. well at least it was for me once
Alexeggers
@Alexeggers
Jan 09 2017 15:39
Hey guys, I am currently working on the Weather App. I use chrome, and chrome does not allow geolocation via http, only https. This conflicts with the openweathermap api, which can only be called via http. Is there a solution for this besides using a less secure browser (wink)? I've not been able to find a suitable replacement for the api either.
Sorin Ruse
@sorinr
Jan 09 2017 15:40
@Alexeggers you can use apixu.com that works both http and https
Joanna Szpinda
@joanshpin
Jan 09 2017 15:42
@sorinr thank you very much for this! this was my first time sharing anything, very stressful ;)
CamperBot
@camperbot
Jan 09 2017 15:42
joanshpin sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1061 | @sorinr |http://www.freecodecamp.com/sorinr
Philipp Scholz
@philipp32
Jan 09 2017 15:42
Hey :) I am trying to get JSON data. FCC gives us this function:
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
What does the 2nd line do?

The

JSON.stringify(json));

part.

Alexeggers
@Alexeggers
Jan 09 2017 15:44
@philipp32 you probably know how to build a javascript object right? this converts it into a json string, amongst other things. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Philipp Scholz
@philipp32
Jan 09 2017 15:45

@Alexeggers I do.

getJSON("http://api.openweathermap.org/data/2.5/weather?lat=%lat%&lon=%lon%&APPID=f9461b5a35486896321efd7ddd9d4bba", function(json) {
$("#JSON").html(JSON.stringify(json));
});}

This is my function. DO I need the second line? Or do I need a variable in which I can store the JSON object?

Alexeggers
@Alexeggers
Jan 09 2017 15:48
It depends on what you are trying to do. Currently you are setting the content of the tag with id JSON to whatever is in that json object. That works I suppose, but it might look ugly because you'll literally have '{weather: "sunny", time:"high noon"}' in your html. I would recommend you create another function that handles the json and just pass it on
(this is all off the top of my head, i'm still new to front end development, I come from java and python)
@sorinr did you have to link your account to facebook with that API? I can't seem to log in without doing so, which is something I'd rather avoid
Philipp Scholz
@philipp32
Jan 09 2017 15:55
@Alexeggers thank you so far
CamperBot
@camperbot
Jan 09 2017 15:55
philipp32 sends brownie points to @alexeggers :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @alexeggers |http://www.freecodecamp.com/alexeggers
Alexeggers
@Alexeggers
Jan 09 2017 15:57
@philipp32 no problem mate :)
Philipp Scholz
@philipp32
Jan 09 2017 15:58
@Alexeggers If you need any help, let me know. :)
Alexeggers
@Alexeggers
Jan 09 2017 15:58
@philipp32 definitely
Ian
@toianw
Jan 09 2017 15:58

@Hello911

html, body{
  background:#4A6556;
  heigth:100%;
   }

If you spell height correctly, that will get you most of the way there. May be a good idea also to use min-height: 100% for the .flex element rather the height: 100%, so if the content is higher than the window height, the red background will still be there as you scroll.

Sorin Ruse
@sorinr
Jan 09 2017 15:58
@Alexeggers no. if you scroll down on signup page you can enter your data as you wish
Alexeggers
@Alexeggers
Jan 09 2017 16:00
@sorinr I did, I skipped past the options to log in via github or facebook or google and signed up as you said instead. Once I confirm my email, I am redirected to the log in page. After entering my details there, i am linked to facebook to log in there. When I was signed in but refused to give the api access to my profile, I got an error
@sorinr never mind I just trust my enter key too much. Pressing enter automatically redirects you to facebook, as that is the first option on the form (for whatever reason). Thanks a bunch man :)
CamperBot
@camperbot
Jan 09 2017 16:02
alexeggers sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1062 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 09 2017 16:05
@Alexeggers i think they send you an email with a link for confirming your email. don't remember exactly
@Alexeggers i can login with my email and pass
Alexeggers
@Alexeggers
Jan 09 2017 16:09
@sorinr Yea I found the error, read the second reply :)
Sorin Ruse
@sorinr
Jan 09 2017 16:09
@Alexeggers lol. ok. :+1:
asafofer
@asafofer
Jan 09 2017 16:19
can anyone help me with the random quote machine?
Tom
@moT01
Jan 09 2017 16:19
@asafofer whats the problem
asafofer
@asafofer
Jan 09 2017 16:20
@moT01 i fell like the site didnt really explaine how to work with json or ajax
Tom
@moT01
Jan 09 2017 16:20
yea, it didn't very well
asafofer
@asafofer
Jan 09 2017 16:20
i found a quote api site but i really dont know how to implememnt it in my site
Tom
@moT01
Jan 09 2017 16:20
what site
currently empty
@moT01 ?
Tom
@moT01
Jan 09 2017 16:23
i see a quote
asafofer
@asafofer
Jan 09 2017 16:23
oh yeah i forgot to remove that part
i need a random generated one that works with thte button
@moT01 this is the updated one
Tom
@moT01
Jan 09 2017 16:24
put all that js code, inside something like, $("#newquote").click(function()
playingwithinfinity
@playingwithinfinity
Jan 09 2017 16:25
@asafofer Look at mine to solve your problems. http://codepen.io/jimpix/pen/WoErgX
Tom
@moT01
Jan 09 2017 16:25
or put it in its own function, and call it when the button is clicked
asafofer
@asafofer
Jan 09 2017 16:27
@moT01 but everytime i click it it just adds more instead of replacing
@playingwithinfinity did you manage only from this site?
Tom
@moT01
Jan 09 2017 16:27
you're appending the data each time
playingwithinfinity
@playingwithinfinity
Jan 09 2017 16:27
@asafofer I used an API to get quotes, but yes.
@asafofer Use JQuery to replace html.
Use JQuery.
Hello911
@Hello911
Jan 09 2017 16:28
@toianw Are u still there? Thanks for point it out. I am too careless. Can you help me but one more time?
CamperBot
@camperbot
Jan 09 2017 16:28
hello911 sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @toianw |http://www.freecodecamp.com/toianw
asafofer
@asafofer
Jan 09 2017 16:28
@playingwithinfinity @moT01 thank you' ill keep trying
CamperBot
@camperbot
Jan 09 2017 16:28
asafofer sends brownie points to @playingwithinfinity and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @playingwithinfinity |http://www.freecodecamp.com/playingwithinfinity
:cookie: 452 | @mot01 |http://www.freecodecamp.com/mot01
asafofer
@asafofer
Jan 09 2017 16:30
thank you
just a bummer because everything was so well explained until now
playingwithinfinity
@playingwithinfinity
Jan 09 2017 16:31
@asafofer I know. I'm stuck on the Wikipedia Viewer.
I'm learning AJAX because you have to in order to build it.
Tom
@moT01
Jan 09 2017 16:33
i probly spent like 4 hours on the wikipedia api alone
Hello911
@Hello911
Jan 09 2017 16:41

http://codepen.io/Hello911/pen/WRQMyx?editors=1100

How do I bring the two rows closer? I wan to eliminate the huge unwanted margin in between them.

Alexeggers
@Alexeggers
Jan 09 2017 16:42
@Hello911 I believe you can do this by setting a negative margin. Not sure if that is the optimal solution though
Ritvars
@RitvarsZ
Jan 09 2017 16:57
Hi! Is there any way of getting twitch stream status(Online or offline) with '/twitch-api/channels/'? Or the only way is with /streams/? If so, what's the best way of making and displaying data from 2 json requests? My codepen: http://codepen.io/Ritvars/pen/apOKYa
Adepoju Paul
@adepoju-paul
Jan 09 2017 17:32
how do i center an ul please
Sorin Ruse
@sorinr
Jan 09 2017 17:32
@Hello911 add align-content: center; or whatever you want to class flex
Adepoju Paul
@adepoju-paul
Jan 09 2017 17:34
@Hello911 add align-content: center; or whatever you want to class flex , let me try it out , thanks
CamperBot
@camperbot
Jan 09 2017 17:34
adepoju-paul sends brownie points to @hello911 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @hello911 |http://www.freecodecamp.com/hello911
Sorin Ruse
@sorinr
Jan 09 2017 17:35
@Hello911 and you can also add some margin-bottom: xxpx to .Projects class
Rishi
@SpadesR
Jan 09 2017 17:36
Hey guys, is it good form to first work on the structure of a page, then the content and then the CSS? Or is a different order more common?
Adepoju Paul
@adepoju-paul
Jan 09 2017 17:40
how do i center an un ordered list please
Sorin Ruse
@sorinr
Jan 09 2017 17:43
@adepoju-paul you can make your ul {list-style-position: inside;} and center it as a block
Tyler Moeller
@TylerMoeller
Jan 09 2017 17:47
@SpadesR Content first is the best practice. Focus on what you want to communicate, then create a design/structure to highlight that content.
Matthew Crumley
@mattCrumley
Jan 09 2017 17:47

Can someone help me understand why my font awesome icons are not showing up?

<header>
 <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Gloria Hallelujah">
       <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</header>

  <div class="pageFour" id="p4">
          <h2 class="text-center">Contact Me</h2>
      <p class="text-center">mcrumley86@gmail.com</p>
   <div class="btnList text-center">
          <a class="btn btn-default" href="#"><i class="fa fa-twitter" aria-hidden="true" id="twitterIcon" ></i>Twitter</a>
          <a class="btn btn-default" href="#"><i class="fa fa-github" aria-hidden="true" id="gitHubicon"></i>GitHub</a>
          <a class="btn btn-default" href="https://www.linkedin.com/in/matthew-crumley-393295a7"><i class="fa fa-linkedin-square" aria-hidden="true" id="linkedInicon"></i>LinkedIn</a>
          <a class="btn btn-default" href="#"><i class="fa fa-facebook" aria-hidden="true" id="faceBookicon"></i>Facebook</a>
        </div> 
  </div>

https://codepen.io/Nowhereman86/pen/QdbgMx

Sorin Ruse
@sorinr
Jan 09 2017 17:48
@Nowhereman86 change it to 4.7.0. maybe the icons were added in a later version then 4.1.0
Tyler Moeller
@TylerMoeller
Jan 09 2017 17:50
@Nowhereman86 If you load your codepen over HTTPS, all of your resources also need to be loaded over HTTPS. Change your font awesome URL to use HTTPS
Sorin Ruse
@sorinr
Jan 09 2017 17:50
@Nowhereman86 or try https://maxcdn.....
Tyler Moeller
@TylerMoeller
Jan 09 2017 17:50
@RitvarsZ You'll need to call both /channels and /streams. Here are a couple of ways to make consecutive API calls:
$.getJSON(url1).done(function(data1) {
  $.getJSON(url2).done(function(data2) {
    // do something with data1 and data2
  });
});

$.when(
  $.getJSON(url1),
  $.getJSON(url2)
).done(function(data1, data2) {
  // do something with data1 and data2
});
Sorin Ruse
@sorinr
Jan 09 2017 17:50
@TylerMoeller :+1:
Tyler Moeller
@TylerMoeller
Jan 09 2017 17:50
:)
Matthew Crumley
@mattCrumley
Jan 09 2017 17:51
That worked tyler. Thanks
and sorin
Tyler Moeller
@TylerMoeller
Jan 09 2017 17:52
@Nowhereman86 Important to use HTTPS everywhere when possible or you end up with issues like this. Here's a long but good read about it: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
Sorin Ruse
@sorinr
Jan 09 2017 17:53
@Nowhereman86 :+1:
Jason
@ICodeWateverIFeelLikeCoding
Jan 09 2017 17:56
Hello, how could i position my p element within my h1 element? not center, just offset from the top left corner https://codepen.io/JaosnCodes/pen/wgaJvY
Adepoju Paul
@adepoju-paul
Jan 09 2017 18:00
@sorinr center as block? please explain further
Tyler Moeller
@TylerMoeller
Jan 09 2017 18:01
@ICodeWateverIFeelLikeCoding You can't put a <p> element inside a <h1> element. Use a <div> instead with CSS to make the text larger like H1 does. You can use margin-top and margin-left to move your text 30px down and to the right.
Jason
@ICodeWateverIFeelLikeCoding
Jan 09 2017 18:04
Thank you. ill change it to a <div>. I decided to change the parent element's position to relative, and the child elements position to absolute, so i can now specifically position my p eement within its parent
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 09 2017 18:08
@ICodeWateverIFeelLikeCoding Sounds good - with that approach, be sure to resize your screen and make sure everything lines up the way you want on smaller/larger screens.
Sorin Ruse
@sorinr
Jan 09 2017 18:09
@ICodeWateverIFeelLikeCoding something like ?
#portfolio-paragraph {
  padding-top: 30px;
  padding-left: 30px;
}
Matthew Crumley
@mattCrumley
Jan 09 2017 18:10
I think my site looks great on a desktop, but in the mobile view my background images are way off... the full image of each background does not show. I thought using container-fluid would fix this?
https://codepen.io/Nowhereman86/full/QdbgMx/
kevinliu6102
@kevinliu6102
Jan 09 2017 18:10

@alpox I actually ended up finishing it on my own haha. I just created the HTML elements with unique IDs that would contain the returned information before actually making the API request, and then dump the relevant information into those elements by ID. Here's my pen again if you'd like to see: http://codepen.io/keebin/pen/BpNEBV

And thanks for the Fetch API tip; I'll definitely keep that in mind for next time.

CamperBot
@camperbot
Jan 09 2017 18:10
kevinliu6102 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 718 | @alpox |http://www.freecodecamp.com/alpox
Sorin Ruse
@sorinr
Jan 09 2017 18:11
@adepoju-paul center the entire ul not each li. can u share ur pen link so i can show you what i mean?
alpox
@alpox
Jan 09 2017 18:14
@kevinliu6102 Yea thats another variant which works :-)
Rishi
@SpadesR
Jan 09 2017 18:14
Does anyone know how I can get these two columns to line up horizontally to each other? I figured 2x md-6 would get the maximum 12 in the row but they're still vertically aligned at max screen res :worried:
  <div class="row">
    <div class="col-md-6">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h1><br>
      <span class="glyphicon glyphicon-console" </span>
      <div class="col-md-6">
         <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h1><br>
      </div>
      </div>
    </div>
asafofer
@asafofer
Jan 09 2017 18:15
what is wrong with this code?
Adepoju Paul
@adepoju-paul
Jan 09 2017 18:15
Tyler Moeller
@TylerMoeller
Jan 09 2017 18:19
@SpadesR Your first column is wrapping around the second one - close the </div> before starting the next column to get them side by side:
<div class="row">
  <div class="col-md-6">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h1><br>
    <span class="glyphicon glyphicon-console"> </span>
  </div>  <!-- closing </div> for the first column -->
  <div class="col-md-6">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h1><br>
  </div>  <!-- closing </div> for the second column -->
</div>
Sorin Ruse
@sorinr
Jan 09 2017 18:20
@adepoju-paul something like example
Rishi
@SpadesR
Jan 09 2017 18:20
@TylerMoeller Ah thanks! That does the trick. :+1:
CamperBot
@camperbot
Jan 09 2017 18:20
spadesr sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1274 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Rishi
@SpadesR
Jan 09 2017 18:21
@TylerMoeller Cheers for the help on structure as well by the way ;) :+1:
Jason
@ICodeWateverIFeelLikeCoding
Jan 09 2017 18:21
Hi, when i scroll down my page, elements begin to overlap my navbar.. How do i avoid this? Is there a way to change the z-index? https://codepen.io/JaosnCodes/pen/wgaJvY
Adepoju Paul
@adepoju-paul
Jan 09 2017 18:23
@sorinr thanks so much, i get it now
CamperBot
@camperbot
Jan 09 2017 18:23
adepoju-paul sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1063 | @sorinr |http://www.freecodecamp.com/sorinr
Tyler Moeller
@TylerMoeller
Jan 09 2017 18:23
@SpadesR np, happy to help :+1:
@asafofer crossorigin.me seems to be down at the moment, and I believe it requires you to send headers now. Don't use a proxy (in my opinion). If you require HTTPS for your quotes, try a different API that supports HTTPS.
JD Tadlock
@jdtdesigns
Jan 09 2017 18:26
@asafofer You can use https://www.apixu.com/. It supports https for free
Matthew Crumley
@mattCrumley
Jan 09 2017 18:27
Why wont my button direct me to the linked in website from code pen?
  <div class="pageFour" id="p4">
      <h2 class="text-center">Contact Me</h2>
      <p class="text-center">mcrumley86@gmail.com</p>
      <div class="btnList text-center">
            <a class="btn btn-default" href="https://www.linkedin.com/in/matthew-crumley-393295a7"><i class="fa fa-linkedin-square" aria-hidden="true" id="linkedInicon"></i>LinkedIn</a>
      </div> 
  </div>
JD Tadlock
@jdtdesigns
Jan 09 2017 18:28
@ICodeWateverIFeelLikeCoding Just add z-index: 100; to your 'ul'
Sorin Ruse
@sorinr
Jan 09 2017 18:28
@ICodeWateverIFeelLikeCoding yes you can add z-index: 999; to your ul {}
JD Tadlock
@jdtdesigns
Jan 09 2017 18:28
lol
Sorin Ruse
@sorinr
Jan 09 2017 18:28
@jdtdesigns lol
JD Tadlock
@jdtdesigns
Jan 09 2017 18:29
@Nowhereman86 add 'target="_blank"' to the link
Matthew Crumley
@mattCrumley
Jan 09 2017 18:30
thanks JD
JD Tadlock
@jdtdesigns
Jan 09 2017 18:31
@Nowhereman86 welcome
Jason
@ICodeWateverIFeelLikeCoding
Jan 09 2017 18:32
@jdtdesigns thanks!
CamperBot
@camperbot
Jan 09 2017 18:32
icodewateverifeellikecoding sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 814 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 09 2017 18:33
@ICodeWateverIFeelLikeCoding ;)
Melissa Guerrero
@Mmgfrog
Jan 09 2017 18:38
Hi! I'm on Random Quote Machine and have a question about where jQuery should go on CodePen. Does jQuery belong in a <script> in the HTML section or does it go in the JS section? I have successfully written an array of quotes and randomly returned one of them. Having trouble getting my quote to generate on a button click and can't get it to render to the view. Any input or help appreciated very much! http://codepen.io/Mmgfrog/pen/egOxwq
JD Tadlock
@jdtdesigns
Jan 09 2017 18:40
@Mmgfrog You don't add <html><head> or <body> to the html panel on Codepen. That's all done for you. You just put the stuff inside the body.
Dat Tran
@dattran91
Jan 09 2017 18:40
Hi everyone, can someone give me some feedback on my tribute page? https://codepen.io/dattran91/pen/MJajRy
JD Tadlock
@jdtdesigns
Jan 09 2017 18:40
All css and js stuff is added in settings @Mmgfrog
Check the Quick Add dropdowns in CSS and JS and you'll see some libraries/frameworks that you can add easily.
Melissa Guerrero
@Mmgfrog
Jan 09 2017 18:43
@jdtdesigns so because I manually added Bootstrap CDN, added jQuery library manually, etc it won't run properly?
JD Tadlock
@jdtdesigns
Jan 09 2017 18:44
@Mmgfrog Correct
Settings->JS->Quick Add->jQuery
Settings->CSS->Quick Add->Bootstrap
Melissa Guerrero
@Mmgfrog
Jan 09 2017 18:45
Ugh, thanks CodePen. LOL. I appreciate the input @jdtdesigns! Thanks!
CamperBot
@camperbot
Jan 09 2017 18:45
mmgfrog sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 815 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 09 2017 18:45
@Mmgfrog welcome
@dattran91 You have margin of 550px on your .text-box
I'd remove that and just use padding to push the content inside. Otherwise your content will fly off the page
Dat Tran
@dattran91
Jan 09 2017 18:49
@jdtdesigns yup that seem to fix the problem, thank you so much
CamperBot
@camperbot
Jan 09 2017 18:49
dattran91 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 816 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 09 2017 18:51
@dattran91 welcome
Sahil Sunny
@sahilsunny
Jan 09 2017 19:03
Ritvars
@RitvarsZ
Jan 09 2017 19:13
@TylerMoeller Thanks!
CamperBot
@camperbot
Jan 09 2017 19:13
ritvarsz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1275 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
KasiaNyczek
@KasiaNyczek
Jan 09 2017 19:22
Can someone review my code please? http://codepen.io/KateNy/pen/egNLyZ
Jerry Purvis
@MessiaHack
Jan 09 2017 19:22
what would be a good width or height standard to set for CSS media queries on cell phones, rather than setting multiple media queries due to the difference in width between so many cell phones?
Rimi.
@Codevotee
Jan 09 2017 19:34
@MessiaHack width of 768px, idk about the height
Jerry Purvis
@MessiaHack
Jan 09 2017 19:36
thanks @APRim05
CamperBot
@camperbot
Jan 09 2017 19:36
:cookie: 493 | @aprim05 |http://www.freecodecamp.com/aprim05
messiahack sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
Lindsey
@sanguineseraphine
Jan 09 2017 19:46
Can anyone help me? I need to make my columns more centered and create space between my ul and my link at the bottom of the page. I am stuck and probably overthinking it. https://codepen.io/sanguineseraphine/pen/jyPjEa
Jerry Purvis
@MessiaHack
Jan 09 2017 19:47
@sanguineseraphine padding-top or padding-bottom will always help create space at the top or bottom of a div. you can also try text-align: center in your class
padding-left, padding-right can center images within a div pretty well
Lindsey
@sanguineseraphine
Jan 09 2017 19:49
I tried to text align and nothing happened. I will try the padding. Thank you!
Jerry Purvis
@MessiaHack
Jan 09 2017 19:50
you might need to align individual. try using bootstrap rows and columns.
use your col-sm-4 class within a div, not within the UL itself. It will be much cleaner
Lindsey
@sanguineseraphine
Jan 09 2017 19:52
ahhh, perfect. I thought it looked a little excessive.
KasiaNyczek
@KasiaNyczek
Jan 09 2017 19:53
@sanguineseraphine try margin-bottom: 50px; for col-sm-4 this should create a space as you want.
Lindsey
@sanguineseraphine
Jan 09 2017 19:54

ok, i did that, and now i do not have 3 columns - just one. <div class="col-sm-4">
<ul>
<li>elected</li>
<li>35</li>
<li>killed</li>
</ul>
<ul class>
<li>president</li>
<li>friends</li>
<li>controversy</li>
</ul>
<ul class>
<li>wife</li>
<li>kids</li>
<li>dog</li>
</ul>

</div>

ah i left the class markers, let me remove those and re-run
nothing.
Ian Lee
@asparism
Jan 09 2017 20:00
does anyone know why the #start click code here won't work? neither the javascript nor the css:active are triggering: https://codepen.io/Asparism/pen/jyPJGK
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:05
@asparism It's the z-index in your CSS putting the element behind other elements - click events won't register.
@sanguineseraphine Put your columns in rows to get the spacing you want to achieve:
<div class="row">
  <div class="col-sm-4">
    bullet list
  </div>
</div>
Ian Lee
@asparism
Jan 09 2017 20:07
thanks @TylerMoeller
CamperBot
@camperbot
Jan 09 2017 20:07
asparism sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1276 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Lindsey
@sanguineseraphine
Jan 09 2017 20:07
aha! thank you @KasiaNyczek & @TylerMoeller
CamperBot
@camperbot
Jan 09 2017 20:07
sanguineseraphine sends brownie points to @kasianyczek and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @kasianyczek |http://www.freecodecamp.com/kasianyczek
:star2: 1277 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:09
no problem - with bootstrap everything starts with a container, then a row, then your columns. 12 columns for every row.
Lindsey
@sanguineseraphine
Jan 09 2017 20:13
@TylerMoeller I applied the row class along with my col-sm-4 class in separate divs. should i do this for each individual column, as I would like 3? Nothing has changed.
Jerry Purvis
@MessiaHack
Jan 09 2017 20:15

can someone test my pen on their smart phone. I want to see if the forecast days show up, but not the forecast itself

http://codepen.io/MessiaHack/pen/qqvPbx

Tyler Moeller
@TylerMoeller
Jan 09 2017 20:16

@sanguineseraphine A row is 12 columns wide, so you can use the "row" class instead of your "col-md-12" and "col-sm-12" classes. If you want 3 grids side-by-side, put them in a single row like:

<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
</div>

Hope that helps answer your question

(4 + 4 + 4 = 12)
Lindsey
@sanguineseraphine
Jan 09 2017 20:19
Yes, I figured as such. Someone told me to apply the class to the whole div to create the space I needed. I had it right the first time. Thank you!
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:20

@MessiaHack This code seems to be what you're using to hide the forecast data:

@media screen and (max-width: 768px) {
    .forecast {
        visibility: hidden;
    }
}

You can test that by making your window smaller - no need for a mobile device. It's dependent on screen size, not device type.

Jerry Purvis
@MessiaHack
Jan 09 2017 20:21
@TylerMoeller gotcha
@TylerMoeller is there a way to set it for device? I didn't see anything :/
Tagir A
@Tagir-A
Jan 09 2017 20:23
Hi guys!
Can you checkout my portfolio and give some feedback?
Also, can anyone explain why scrollspy doesn't work? http://codepen.io/tcup/full/dNojpo/
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:23
@MessiaHack For CSS, I don't know offhand. In JavaScript, I use if (typeof window.orientation !== 'undefined') to determine if it's a mobile or tablet since those devices will have landscape/portrait mode defined. A desktop would not.
Jerry Purvis
@MessiaHack
Jan 09 2017 20:23
@TylerMoeller thanks
CamperBot
@camperbot
Jan 09 2017 20:23
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1278 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adam Morris
@Adam-Morris
Jan 09 2017 20:24
How do I center my .everything div vertically? http://codepen.io/Amorris/pen/MJabmp
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:24
@Tagir-A You'll need the . in front of the class name: $('body').scrollspy({ target: '.navbar-fixed-top' })
Gururaj Birajdar
@grajsb
Jan 09 2017 20:25
@Manish-Giri do you mind helping me with my random quote machine challenge
Tagir A
@Tagir-A
Jan 09 2017 20:27
@TylerMoeller Oh, thank you! It works now
CamperBot
@camperbot
Jan 09 2017 20:27
tagir-a sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1279 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
DarylKnapp
@DarylKnapp
Jan 09 2017 20:31
Good Morning everyone!
I was just wondering if i could get some constructive criticism on my portfolio. How's it looking people?
http://codepen.io/DarylKnapp/pen/vgYNXe?editors=1100
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:35

@Adam-Morris There are lots of ways to vertically center content. One quick way is to use viewport height units:

.everything {
  margin-top: 35vh;
}

But that won't leave it perfectly centered. Flexbox may be a better approach - you could also use absolute positioning or simulate a table display.

Adam Morris
@Adam-Morris
Jan 09 2017 20:36
@TylerMoeller Okay! Thank you.
CamperBot
@camperbot
Jan 09 2017 20:36
adam-morris sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1280 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tagir A
@Tagir-A
Jan 09 2017 20:37
@Adam-Morris I'm just a beginner, but you may try to wrap it into a div with class centrify
.centrify {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 100vh;
}
Adam Morris
@Adam-Morris
Jan 09 2017 20:38
@Tagir-A That doesn't work, but it's ok i have found a solution. Thanks anyway!
CamperBot
@camperbot
Jan 09 2017 20:38
adam-morris sends brownie points to @tagir-a :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @tagir-a |http://www.freecodecamp.com/tagir-a
Jerry Purvis
@MessiaHack
Jan 09 2017 20:39
okay. so the class does hide as I expected, however, there is a big gap between the different days. is there a way to fix this?
the idea is that on devices with small screens, they can click on the day, and it will expand out the forecast for that day
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:41
@MessiaHack Use display: none; instead of visibility: hidden;
Jerry Purvis
@MessiaHack
Jan 09 2017 20:41
okay. thanks
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:43
Or use accordion and have it expanded by default on screens larger than xs: http://getbootstrap.com/javascript/#collapse-example-accordion
Tagir A
@Tagir-A
Jan 09 2017 20:43
@DarylKnapp I like your idea with screens, though it may distract a bit.
But your navigation buttons don't work.
And also, I think, that you not supposed to use image with text. I guess, actual text is better.
oh, and also verify your email, so that it would be possible to toggle full page view
@Adam-Morris sorry, mate. As I've said, I'm just a beginner. I even haven't reached random quote challenge yet. :D
09riche
@09riche
Jan 09 2017 20:48
um hi sorry this is so noob but i'm having trouble getting off the ground with the scrolling portfolio page
how do you get to stack background images on top of each other?
so far i have:
<div class="container-fluid">
<div> <img src="https://s28.postimg.org/ffu1920ot/peacock.jpg" class="img-responsive" width="100%" height="auto">
<h1>NICK RICHARDSON<

</img>
</div>
</div>
<div class="container-fluid">
<div> <img src="https://s28.postimg.org/ffu1920ot/peacock.jpg" class="img-responsive">

</img>
</div>
</div>
:-(
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:52
@09riche You mean superimposed over each other, or stacked vertically with one image above another?
09riche
@09riche
Jan 09 2017 20:53
stacked vertically! i'm sure it's super simple...
(thanks for writing back)
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:54
Your code should be showing that @09riche. A peacock, followed by your <h1> text below that, with the peacock again below your <h1> text
09riche
@09riche
Jan 09 2017 20:54
Yep! but the thing is they're not background images so i can't impose the h1 over the top peacock
basically i want the peacock with some stuff over the top of it, then to be able to scroll down and another image appears with more stuff (buttons etc) over it
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:55
Ahhh, I see. To do that, you need to use CSS and give a minimum height to each of your divs. http://www.w3schools.com/cssref/pr_background-image.asp
Adam Morris
@Adam-Morris
Jan 09 2017 20:56
How would I make my .everything section pulse everytime you click new quote? Right now it is only everytime you hit run. http://codepen.io/Amorris/pen/MJabmp
09riche
@09riche
Jan 09 2017 20:57
aha! but how do apply that css to individual divs, rather than to the whole body?
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:57

@09riche Your html would be:

<div class="container-fluid">
  <div class="row section1">
    <h1>NICK RICHARDSON</h1>
  </div>
  <div class="row section2">
    <h2>Section 2</h2>
  </div>
</div>

With CSS:

.section1 {
  background-image: url('https://s28.postimg.org/ffu1920ot/peacock.jpg');
  min-height: 400px;
}

.section2 {
  background-image: url('https://s28.postimg.org/ffu1920ot/peacock.jpg');
  min-height: 400px;
}

(for example)

09riche
@09riche
Jan 09 2017 20:59
@TylerMoeller brilliant, that's exactly what i was after. thank you!
CamperBot
@camperbot
Jan 09 2017 20:59
09riche sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 09 2017 20:59
@Adam-Morris remove the pulse class before adding it again.
CamperBot
@camperbot
Jan 09 2017 20:59
:star2: 1281 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adam Morris
@Adam-Morris
Jan 09 2017 20:59
@TylerMoeller I tried that but it doesn't work
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:00
@Adam-Morris This should work:
  $(".newquote").on("click", function() {
    $(".everything").removeClass("animated pulse");
    getNewQuote();
  });
Hello911
@Hello911
Jan 09 2017 21:00
@sorinr That works
thn
x
Alex
@ajanecek
Jan 09 2017 21:00
Hi, I'm working on the wikipedia viewer challenge and I can't seem to get the data from the wiki API. I am using the sandbox to generate the link but using $.getJSON doesn't seem to get me any results when I request info from the console. I am running the following in console:
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&titles=pizza&srsearch=pizza&srnamespace=&srlimit=10", function(json) {
  console.log(json);
});
Hello911
@Hello911
Jan 09 2017 21:00
thnx
Adam Morris
@Adam-Morris
Jan 09 2017 21:01
@TylerMoeller Oh yes! Thank you. It works, I was putting the .removeClass() inside the getNewQuote function,
CamperBot
@camperbot
Jan 09 2017 21:01
adam-morris sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: adam-morris already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:03
@Adam-Morris That would work too - you just have to do it on the first line. If you remove the class before the animation completes, the animation won't run.
Adam Morris
@Adam-Morris
Jan 09 2017 21:03
Ohh. I'm stupid
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:05
Or you can get fancy and wait for the animation end event to fire:
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  element.addClass(animation).one(animationEnd, function () {
    element.removeClass(animation);
  });
@ajanecek Add this to the end of your wikipedia URL: &origin=*, that allows you to call the API from another server, like codepen
kevinliu6102
@kevinliu6102
Jan 09 2017 21:10
couldn't you also add ?callback=? at the end of the URL to make it return JSONP
which i think works for codepen
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:11
@kevinliu6102 Yeah, that works too if you want to use JSONP
kevinliu6102
@kevinliu6102
Jan 09 2017 21:11
i used that for one of those challenges, but i don't really know what the big difference between them is lol
Adam Morris
@Adam-Morris
Jan 09 2017 21:11
Is there a way to put a div in the very bottom right?
Alex
@ajanecek
Jan 09 2017 21:12
@TylerMoeller That worked. Thank you very much. Now I need to look into why it worked. thanks for the link. I'll also look at the JSONP method.
CamperBot
@camperbot
Jan 09 2017 21:12
ajanecek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1282 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adam Morris
@Adam-Morris
Jan 09 2017 21:14
Don't worry I figured it out
Finished my random quote machine!! http://codepen.io/Amorris/full/MJabmp/
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:17

It's a technical document, so may be more confusing than helpful :)

The MediaWiki API also requires that the origin be supplied as a request parameter, appropriately named "origin", which is matched against the Origin header required by the CORS protocol. Note that this header must be included in any pre-flight request, and so should be included in the query string portion of the request URI even for POST requests.

mendala
@mendala
Jan 09 2017 21:17
can someone help me I'm trying to set a background image
not entirely sure how to do it
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:18
@mendala Use the background-image property: http://www.w3schools.com/cssref/pr_background-image.asp
It can be applied to any element, class, ID, etc. doesn't have to be used with the body as shown on that page
Example: :point_up: January 9, 2017 12:57 PM

Nice job @Adam-Morris You can chain your jQuery methods like this:

$(".everything").removeClass("animated rollIn").addClass("animated rollOut");

Also, use codepen to analyze your JS - it will show you some minor fixes you can consider. Click the down arrow in the top, right-hand corner of the JS Panel (works with the HTML and CSS panels too)

Adam Morris
@Adam-Morris
Jan 09 2017 21:23
@TylerMoeller Thanks for the tips!
CamperBot
@camperbot
Jan 09 2017 21:23
adam-morris sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: adam-morris already gave tylermoeller points
mendala
@mendala
Jan 09 2017 21:28
@TylerMoellerhttp://codepen.io/mendala/pen/dNPQOX
@TylerMoellerhttp thank you
CamperBot
@camperbot
Jan 09 2017 21:28
mendala sends brownie points to @tylermoellerhttp :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for tylermoellerhttp
KasiaNyczek
@KasiaNyczek
Jan 09 2017 21:32
@DarylKnapp for me it is so dark. The contrast between the colors of the letters and background is not sufficient, it is not easy to read it.
Hello911
@Hello911
Jan 09 2017 21:34
https://codepen.io/Hello911/pen/WRQMyx?editors=1100 How to align the word "Tribute Page" with the left border of the thumbnail?
Adam Morris
@Adam-Morris
Jan 09 2017 21:34
Do I need to register for Open Weather Map for it to work?
Tyler Moeller
@TylerMoeller
Jan 09 2017 21:39
@Adam-Morris Yes, you need an API key and have to register to get one. To save you lots of headaches though...try using a different API that works over both HTTPS and HTTP without costing you money. People typically recommend apixu, weather underground, or dark sky over openweathermap.
Adam Morris
@Adam-Morris
Jan 09 2017 21:39
@TylerMoeller Okay, thank you.
CamperBot
@camperbot
Jan 09 2017 21:39
adam-morris sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1283 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
cjljohnson
@cjljohnson
Jan 09 2017 21:59
Hi, can anyone figure out why my background colour isn't blue? am i missing something obvious http://codepen.io/cjljohnson/pen/bgdMjP
uriznik
@uriznik
Jan 09 2017 22:00
@cjljohnson don't put the colour in quotes in the css
cjljohnson
@cjljohnson
Jan 09 2017 22:02
@uriznik thanks, i knew it was dumb
CamperBot
@camperbot
Jan 09 2017 22:02
cjljohnson sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @uriznik |http://www.freecodecamp.com/uriznik
cjljohnson
@cjljohnson
Jan 09 2017 22:09
@uriznik is there anything i can do about adblock stopping the api requests?
uriznik
@uriznik
Jan 09 2017 22:11
@cjljohnson don't know, what does it say about the request?
cjljohnson
@cjljohnson
Jan 09 2017 22:12
jquery.min.js:4 GET http://ip-api.com/json net::ERR_BLOCKED_BY_CLIENT
send @ jquery.min.js:4
ajax @ jquery.min.js:4
r.(anonymous function) @ jquery.min.js:4
getJSON @ jquery.min.js:4
(anonymous) @ VM11411 pen.js:12
j @ jquery.min.js:2
k @ jquery.min.js:2
uriznik
@uriznik
Jan 09 2017 22:12
can you whitelist the domain?
cjljohnson
@cjljohnson
Jan 09 2017 22:13
is there a way to expand that error message from the console to give more info?
i just disabled it for codepen but i was wondering in general if you were actually making a web app like this
Hello911
@Hello911
Jan 09 2017 22:15
https://codepen.io/Hello911/pen/WRQMyx?editors=1100 How do I make the word Tribute Page go partially behind the thumbnail like this. http://imgur.com/gallery/punl3
uriznik
@uriznik
Jan 09 2017 22:16
@cjljohnson don't know about expanding the error and I think that's adblock just being adblock
KasiaNyczek
@KasiaNyczek
Jan 09 2017 22:22
@Hello911 try opacity ?
Tyler Moeller
@TylerMoeller
Jan 09 2017 22:22

@cjljohnson You can use a different ip-based location API that isn't blocked by Adblock, like freegeoip.net/json or ipinfo.io/json. You could also detect the failure with the .fail() method:

  $.getJSON(IP_API, function(data) {
    geoJSON = data;
    getWeatherJSON(setWeatherURL(geoJSON.lat, geoJSON.lon));
  }).fail(function(err) {
    alert('failed to get location from ip-api.com');
  });

Here's a pen with redundant location lookup in case of failures: https://s.codepen.io/TylerMoeller/pen/ZBBEGq

Hello911
@Hello911
Jan 09 2017 22:23
@KasiaNyczek huh what?
KasiaNyczek
@KasiaNyczek
Jan 09 2017 22:25
@Hello911 Transparency trick. Css Image Opacity. I am not sure what do you want to do.
Homer Allen
@homerallen
Jan 09 2017 22:27
Curious to find out thought's on Simon's graphics. Yes, I'm on Simon -- w00t :) Should I make them myself or should I acquire them from somewhere - making them would have it's advantages because I need to allow for the button to illuminate when pressed or when a pattern is given, etc, also on and off and strict mode
Jose Irizarry
@Stjose
Jan 09 2017 22:27
Good Evenning
how can I create bullet point using HTML or CSS
Tyler Moeller
@TylerMoeller
Jan 09 2017 22:34
@Stjose Assuming you mean the symbol, it's: &bull;
Jinnd319
@Jinnd319
Jan 09 2017 22:44
I noticed that some code I have placed after an if statement in jQuery doesn't run until after the if statement is passed. Thing is that the code is outside the if statement. Why is that? Here is the code:
if(target.length){
      event.preventDefault();
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, 1000); 
    }

    console.log(target);
Jessi L Wasell
@JessiW
Jan 09 2017 22:44
Is there anyone here working in React.js?
JD Tadlock
@jdtdesigns
Jan 09 2017 22:44
@JessiW I know a little. What's the issue?
Coy Sanders
@coymeetsworld
Jan 09 2017 22:45
yeah
working on Recipe Box right now
Jessi L Wasell
@JessiW
Jan 09 2017 22:46
Ok @jdtdesigns & @coymeetsworld - I'm working on my markdown previewer and everything works great except the conversion to markdown part - you know - like rendering an h1 in the output looking like an actual h1 instead of showing my <h1> tag?
Coy Sanders
@coymeetsworld
Jan 09 2017 22:47
I ended up using the dangerouslySetInnerHTML attribute in my div @JessiW
Jessi L Wasell
@JessiW
Jan 09 2017 22:48
Here's a link to my pen so you can test it out yourself - http://codepen.io/GenesisWebDesign/pen/apzMwz
Coy Sanders
@coymeetsworld
Jan 09 2017 22:48
there are concerns using that which is why the attribute is named that way, but I think the purpose was just to make you aware its a danger and that you should make sure to sanitize your input
i.e. make sure there's no way someone can inject a script in there or something, that's the way it was explained to me anyways
Jessi L Wasell
@JessiW
Jan 09 2017 22:49
@coymeetsworld - That makes sense - I was trying that but only coming up with errors and the breakdown of my whole previewer then - must've been how I was implementing it?
how do you make sure of that?
Walid Ashri
@walidashri
Jan 09 2017 22:50
Please I need help to show the flags in this d3 force layout here is my pen
Coy Sanders
@coymeetsworld
Jan 09 2017 22:50
how did you try implementing it @JessiW ?
Jessi L Wasell
@JessiW
Jan 09 2017 22:51
I did make it an attribute of my div - like this....
Jose Irizarry
@Stjose
Jan 09 2017 22:51
@TylerMoeller Thank
CamperBot
@camperbot
Jan 09 2017 22:51
stjose sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1284 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Jessi L Wasell
@JessiW
Jan 09 2017 22:51
sorry @coymeetsworld - just a sec
<div dangerouslySetInnerHTML={marked(this.state.value)} </div>
@coymeetsworld
Nick McCord
@Thrillxlordz
Jan 09 2017 22:53
can anybody lend me a hand with the 'Steamroller' problem near the end of intermediate algorithm scripting?
Coy Sanders
@coymeetsworld
Jan 09 2017 22:53
that's a little off, you need to pass it an object
they key is __html and then the marked result would be the value
Jessi L Wasell
@JessiW
Jan 09 2017 22:54
okay - I'll look @coymeetsworld - I"ll look at that...
okay so I need to make an object like this? @coymeetsworld ```
oops sorry ...hold on
JD Tadlock
@jdtdesigns
Jan 09 2017 22:56
@JessiW Sorry, just came back.
Give me a sec
{marked(this.state.value)} should be {this.state.value}
then it will output correctly
hmm
Jessi L Wasell
@JessiW
Jan 09 2017 22:58
Okay - but I tried that and it does output but doesn't recognize any symbols to convert them to tags?
I'm looking at the doc @coymeetsworld sent me - @jdtdesigns
CoryCMyers
@CoryCMyers
Jan 09 2017 22:59
Anyone available to point me in the right direction here? I am just now starting to work through javascript and jQuery, so if I know what I want to do I go digging in stack exchange until I find something that works. So right now I have this, and overall I am pretty pleased with it for only being a week in to learning what I am doing.
However, I cannot get the splash page to display properly on Mobile, and have no idea what part to tweak, and feedback would be much appreciated.
Jessi L Wasell
@JessiW
Jan 09 2017 22:59
I still have the chat up so let me know any thoughts @jdtdesigns @coymeetsworld
Coy Sanders
@coymeetsworld
Jan 09 2017 22:59
@JessiW what do you have now?
Jessi L Wasell
@JessiW
Jan 09 2017 23:00
so in other words @coymeetsworld I need something like this?```
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
Coy Sanders
@coymeetsworld
Jan 09 2017 23:01
yeah, you don't necessarily need to call a function though, you can do it right in the div
JD Tadlock
@jdtdesigns
Jan 09 2017 23:01
@JessiW Yeah, i was about to post this:
translateMarkdown: function (iniText) {
    return {
      __html: marked(iniText)
    };
  },
Coy Sanders
@coymeetsworld
Jan 09 2017 23:01
just makes it a little easier to read
Jessi L Wasell
@JessiW
Jan 09 2017 23:02
Ohhhhhh!!!! okay - that's making more sense - lemme try.... :) @coymeetsworld @jdtdesigns
I was dancing all around it - LOL!
Back in a minute - trying....
Tony Miri
@TonyMiri
Jan 09 2017 23:05
Hey y'all. Just getting back into the swing of things and running into a minor CSS snafu. I'm sure it'll be real quick if anyone wants to help me out. Any takers?
Here's the pen, just trying to get the green div to show. http://codepen.io/TonyMiri/pen/WRQYgM
Jessi L Wasell
@JessiW
Jan 09 2017 23:07
@coymeetsworld - still working on it - haven't quite got it yet :)
Coy Sanders
@coymeetsworld
Jan 09 2017 23:08
keep plugging away it'll click @JessiW
Jessi L Wasell
@JessiW
Jan 09 2017 23:08
Thank you @coymeetsworld & @jdtdesigns - I'll let you know when I get it...
CamperBot
@camperbot
Jan 09 2017 23:08
jessiw sends brownie points to @coymeetsworld and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 817 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1752 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Jessi L Wasell
@JessiW
Jan 09 2017 23:09
I'm getting a little error - I think I made a syntax mistake somewhere...
CoryCMyers
@CoryCMyers
Jan 09 2017 23:11
@coymeetsworld Your @ keeps confusing me
Since my eyes fill in an r in it and I keep wondering what someone is hollering at me for
CamperBot
@camperbot
Jan 09 2017 23:12
holler back!
Coy Sanders
@coymeetsworld
Jan 09 2017 23:12
its ok people keep calling me you @CoryCMyers
Jessi L Wasell
@JessiW
Jan 09 2017 23:13
@coymeetsworld - so here's what I've got....
var Component = React.createClass({
  getInitialState: function() {
    return {
      value: ''
    };
  },
  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
  },
  translateMD: function (text) {
    return {
      __html: marked(text)
    };
  },
  render: function() {
    return (
      <div>
      <input value = {this.state.value} onChange = {this.handleChange} id = "input"/>
        <div id = "previewer" dangerouslySetInnerHTML={translateMD()}></div>
                                              );
  };
});

ReactDOM.render(<Component />, document.getElementById('content'));
Coy Sanders
@coymeetsworld
Jan 09 2017 23:14
you need to pass the text into translateMD still @JessiW
Jessi L Wasell
@JessiW
Jan 09 2017 23:14
I think I'm a lot closer but am getting an unterminated JSX error and trying to figure out where...
oh duh - you mean like this translateMD(text) ?
@coymeetsworld
Coy Sanders
@coymeetsworld
Jan 09 2017 23:15
not text but yeah, something needs to go in there
Jessi L Wasell
@JessiW
Jan 09 2017 23:15
this.state.value?
@coymeetsworld
Coy Sanders
@coymeetsworld
Jan 09 2017 23:16
try it :)
Jessi L Wasell
@JessiW
Jan 09 2017 23:17
Okay I did but since I still have an error for unterminated JSX content its not doing anything :)
I think the this.state.value is right tho
@coymeetsworld
I'm looking for the error now
Coy Sanders
@coymeetsworld
Jan 09 2017 23:18
make sure all your tags are all closed and there are no syntax errors
Jessi L Wasell
@JessiW
Jan 09 2017 23:19
Okay - thanks - looking @coymeetsworld
CamperBot
@camperbot
Jan 09 2017 23:19
jessiw sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave coymeetsworld points
Tyler Moeller
@TylerMoeller
Jan 09 2017 23:19
@CoryCMyers Since you're already using bootstrap, you can achieve a very similar splash/pop-up effect with the Bootstrap Modal dialog and use a lot less of your own custom JavaScript. For example: https://s.codepen.io/TylerMoeller/pen/MJaZyR
Not sure if that's the direction you're asking for, but the docs for bootstrap modals are at: http://getbootstrap.com/javascript/#modals
They will be responsive by default and scale down to mobile, if that's the main issue you're trying to solve - with a lot less of your own custom code :)
CoryCMyers
@CoryCMyers
Jan 09 2017 23:21
@TylerMoeller Any port in a storm! But yes, the more light weight I can make it the better. I had not even heard of Modals.
Jinnd319
@Jinnd319
Jan 09 2017 23:22
I'm working on my portfolio project and I'm having problems with adding the active class to my "nav-item"s in my navbar. Can someone help me out? I'm reading the documentation for offset() and I'm running tests, but I just don't understand.
Jessi L Wasell
@JessiW
Jan 09 2017 23:24
Okay @coymeetsworld - I fixed the error but now I have a new one - translateMD is not defined?
Adel
@AdelMahjoub
Jan 09 2017 23:25
@Jinnd319 link your codepen please
Coy Sanders
@coymeetsworld
Jan 09 2017 23:25
you need to use this @JessiW
Jinnd319
@Jinnd319
Jan 09 2017 23:25
Adel
@AdelMahjoub
Jan 09 2017 23:26
@Jinnd319 what do you want to do exactly
Jinnd319
@Jinnd319
Jan 09 2017 23:27
@AdelMahjoub I'm trying to write some jQuery to add the active class to my navbar elements so they highlight when I scroll to their div block
Jessi L Wasell
@JessiW
Jan 09 2017 23:30
@coymeetsworld I think I missed something....
Jinnd319
@Jinnd319
Jan 09 2017 23:30
@AdelMahjoub I'm trying to use offset() to figure out where the div blocks are, but that doesn't seem to be working. I don't know why.
Jessi L Wasell
@JessiW
Jan 09 2017 23:32
sorry @coymeetsworld - I've got to go - I'll work on this more later - thanks for all the help!
CamperBot
@camperbot
Jan 09 2017 23:32
jessiw sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Jan 09 2017 23:32
np good luck @JessiW
Adel
@AdelMahjoub
Jan 09 2017 23:34
 $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
@Jinnd319 add jquery before bootstrap js
Jinnd319
@Jinnd319
Jan 09 2017 23:38
@AdelMahjoub I thought bootstrap went in the css window. Where is the bootstrap js in my code?
Adel
@AdelMahjoub
Jan 09 2017 23:38
@Jinnd319 under javascript tab, add jquery before bootstrap js
Jinnd319
@Jinnd319
Jan 09 2017 23:39
@AdelMahjoub I haven't added bootstrap js?
Adel
@AdelMahjoub
Jan 09 2017 23:40
@Jinnd319 yes
Jinnd319
@Jinnd319
Jan 09 2017 23:40
@AdelMahjoub excellent
Simon Cordova
@gbsimon87
Jan 09 2017 23:41
Hi everybody! I've got a quick question...
I'm working on a site, and basically it has a div with the following layout.
I need to get rid of the "Telephone:" part using jQuery, I don't have access to their code.
Any suggestions?
<div id="talkButton">
  <span class="hays-job-actions-consultant-detail">Telephone:
    <strong>
      <a href=""  id="jd_telephone">
        0292492288
      </a>
    </strong>
  </span>
</div>
However the phone number inside in the link needs to continue showing, just get rid of the text 'Telephone:'
Jinnd319
@Jinnd319
Jan 09 2017 23:43
@AdelMahjoub can you explain how var hash gets a value?
Adel
@AdelMahjoub
Jan 09 2017 23:43
@Jinnd319 add class="active" to your first <li> to highlight the active item
Jinnd319
@Jinnd319
Jan 09 2017 23:44
@AdelMahjoub that only works for the <li> that has class="active"
Adel
@AdelMahjoub
Jan 09 2017 23:45
@Jinnd319 when you scroll it will activate the other items
Jinnd319
@Jinnd319
Jan 09 2017 23:45
@AdelMahjoub It doesn't I just tested that.
@gbsimon87 I haven't been able to find any jQuery that actually deals with text. I think you should use Javascript to edit the text inside the span instead.
Simon Cordova
@gbsimon87
Jan 09 2017 23:52
@Jinnd319 the text method deals with text, or the html method...
I just need to keep the link in there
Tyler Moeller
@TylerMoeller
Jan 09 2017 23:53
@gbsimon87 Use the .replace() method to replace "Telephone:" with ""
document.getElementById('talkButton').innerText.replace("Telephone: ", "")
Jinnd319
@Jinnd319
Jan 09 2017 23:55
@AdelMahjoub I got to go thanks for the help
CamperBot
@camperbot
Jan 09 2017 23:55
jinnd319 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Jan 09 2017 23:56
@Jinnd319 yw
Simon Cordova
@gbsimon87
Jan 09 2017 23:58
@TylerMoeller, good evening...I tried the replace method but it didn't seem to function for me...
This was my implementation...
$("#talkButton > span").replace("Telephone:", ""));
I kept getting 'replace' is not a function on the console
Does the replace value need to be saved into a new variable?
CoryCMyers
@CoryCMyers
Jan 09 2017 23:58
@TylerMoeller Modals would work wonderfully for what I Am wanting to do, but I cannot seem to get them to function.
@TylerMoeller Thank you for pointing in the right direction for me though
CamperBot
@camperbot
Jan 09 2017 23:59