These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Apr 2017
Pagnito
@Pagnito
Apr 07 2017 00:06
how do i make it so when i toggle out a div, it doesn reset me to the top of the page
actually i tihnk it might be a diffirent reason for i havent fixed yet
ill b back
Abi H
@westminsterabi
Apr 07 2017 00:07
i'm working on the tribute page and my image is coming out huge even though i'm using img-responsive. any tips?
Gulsvi
@gulsvi
Apr 07 2017 00:10
@westminsterabi Try img-fluid, you probably have Bootstrap 4 added to your Codepen, that's the default with the quick-add menu.
Or, open your settings, click CSS, and replace your bootstrap link to the one for Bootstrap 3: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Meisha Booker
@Meisha04
Apr 07 2017 00:20
hello i am on the personal portfolio portion and i have not built any websites so how do i add placeholders?
Abi H
@westminsterabi
Apr 07 2017 00:22
@SkyCoder01 thanks! that worked :)
CamperBot
@camperbot
Apr 07 2017 00:22
westminsterabi sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 903 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 00:24
@Meisha04 Placehold.it is one option: https://placehold.it/
Meisha Booker
@Meisha04
Apr 07 2017 00:25
thank you @SkyCoder01
CamperBot
@camperbot
Apr 07 2017 00:25
meisha04 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 904 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 00:25
Lots of options depending on what you want :)
Pagnito
@Pagnito
Apr 07 2017 00:48
ok so im trying to use strNum variable to assign my buttons ids but for some reason when i console.log strNum after the ajax call it just gives me the final value of strNum

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

$.ajax({
url: "https://wind-bow.glitch.me/twitch-api/users/"+apiArray[i],
dataType: "JSONP",
type: 'GET',
cache:false,
success: function(data){

console.log(strNum);
it doesnt make any sense, cuz it prints out all my streamers 1 by 1 basically but for someone reason "i" doesnt show up until it has the final value of 7
Aaron Peck
@apeck14
Apr 07 2017 01:08
Does anyone see an issue with this function?
function whatIsInAName(collection, source) {
  var arr = [];
  var srcKeys = Object.keys(source);//["last"]

  for(var i = 0; i < collection.length; i++){//loops through collection array
    for (var x in collection[i]){//loop through each object in collection by the key
      if(x === srcKeys && source[srcKeys] === collection[x]){// if the key is equal to the source key and the value of those keys are equal then...
         arr.push(source);
         }
    }
  }
  return arr;

}
whatIsInAName(
  [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }],

  { last: "Capulet" }
 );
for the challenge Wherefore art thou
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:17
hi guys, just finished my Portfolio Project . Any Feedback is highly appreciated.
Aaron Peck
@apeck14
Apr 07 2017 01:19
this room is dead
Jorge
@OrangeKulture
Apr 07 2017 01:22
@CodeToOvercome looks pretty good! I would check for grammar, though..
Aaron Peck
@apeck14
Apr 07 2017 01:24
@OrangeKulture can you read my code quick?
Ken Haduch
@khaduch
Apr 07 2017 01:25
@apeck14 - it might be a problem if there are cases where there are two properties and values that you have to match. Are you failing any cases? (I haven't gone back to look at the full test set.)
Jorge
@OrangeKulture
Apr 07 2017 01:25
@apeck14 yeah, I was reading that too ..
Aaron Peck
@apeck14
Apr 07 2017 01:25
Well, my function returns arr = []
Just an empty array
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:26
@OrangeKulture lol. Thanks.. I was more focused on layout that i forgot about grammar..
CamperBot
@camperbot
Apr 07 2017 01:26
codetoovercome sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @orangekulture |http://www.freecodecamp.com/orangekulture
Aaron Peck
@apeck14
Apr 07 2017 01:26
so idk if the for loops are even iterating or not
Jorge
@OrangeKulture
Apr 07 2017 01:27
@apeck14 they should be .. you are failing all cases?
Aaron Peck
@apeck14
Apr 07 2017 01:27
@OrangeKulture yeah :(
Ken Haduch
@khaduch
Apr 07 2017 01:28
@apeck14 - I think that one problem would be x === srcKeys because isn't srcKeys an array of keys? And you are trying to compare a single key to an array?
You might find it interesting to take this case and run it through pythontutor and watch what you get for results as it goes along...
Aaron Peck
@apeck14
Apr 07 2017 01:30
@khaduch Good thinking, should I add another for loop to iterate through srcKeys?
Jorge
@OrangeKulture
Apr 07 2017 01:30
@CodeToOvercome welcome!
Ken Haduch
@khaduch
Apr 07 2017 01:30
@apeck14 - and another thing - your source[srcKeys] === collection[x] - you cannot refer to collection[x] because collection is an array of objects, and you are generating an indexito access those, so somehow you always need to be usingcollection[i]` to make references to the objects...
Jorge
@OrangeKulture
Apr 07 2017 01:30
@apeck14 Ok, seems to me that the problem is how you are going through the array ....
@apeck14 maybe filtering might be helpful?
Aaron Peck
@apeck14
Apr 07 2017 01:31
so redew everything?
Jorge
@OrangeKulture
Apr 07 2017 01:31
@apeck14 srcKeys is good.. it should hold the objects.key
Aaron Peck
@apeck14
Apr 07 2017 01:32
@khaduch Alright ty
CamperBot
@camperbot
Apr 07 2017 01:32
apeck14 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2710 | @khaduch |http://www.freecodecamp.com/khaduch
Aaron Peck
@apeck14
Apr 07 2017 01:32
@OrangeKulture Alrighty
Jorge
@OrangeKulture
Apr 07 2017 01:32
what i would do is this .. have a variable like you do, srcKeys
Aaron Peck
@apeck14
Apr 07 2017 01:33
Thanks for the help guys
Jorge
@OrangeKulture
Apr 07 2017 01:34
right, then .. i would use an empty array to store the filtered array from the one you are passing when calling the function. yeah?
var array = [];
arr = colections.filter
Ken Haduch
@khaduch
Apr 07 2017 01:34
@apeck14 - my first version, before I started getting more knowledgeable about higher-order functions, involved two for loops - one to iterate through the collection and look at each object, and one to iterate through the keys and check for the match or misses in the individual collection objects. Since then, I learned more about .filter() and .every() and got it down to about 5 lines of code.
Aaron Peck
@apeck14
Apr 07 2017 01:35
Alright thanks, I'll work on it! Ill stick with the two for loops for now
Jorge
@OrangeKulture
Apr 07 2017 01:36
.filter should be useful here, for sure
Aaron Peck
@apeck14
Apr 07 2017 01:36
filter()?
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:38
@OrangeKulture i have a quick question . When i try to view portfolio page on mobile device, images doesn't load. Not sure what i am doing wrong
Jorge
@OrangeKulture
Apr 07 2017 01:38
yeah
@CodeToOvercome maybe media queries? are you working on codepen?
I didn't use any media queries.. should i ?
Jorge
@OrangeKulture
Apr 07 2017 01:39
@CodeToOvercome lol duh ! haha sorry .. im all over the place
@CodeToOvercome not if you don;t want to .. no
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:39
are media queries necessary to see images in mobile device ??
i didn't add any media queries on my Tribute page . I am still able to see it though..
Jorge
@OrangeKulture
Apr 07 2017 01:40
@CodeToOvercome not necessary, nope sometimes when you have a lot if images, it is useful to make sure it's properly rendered on all devices
media queries are simply guidelines .. don't worry about it .. let me see
@apeck14 one sec
Gulsvi
@gulsvi
Apr 07 2017 01:41
@CodeToOvercome imgur blocks codepen. You probably have them cached on your desktop where you're developing the website, so the images show up fine. Use a different image service like https://postimage.io
Jorge
@OrangeKulture
Apr 07 2017 01:41
ohh ok .. yeah seems imgur sucks a bit in this case
but if you see them now, you should be able to see them on mobile
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:42
@SkyCoder01 never knew that...Thanks
CamperBot
@camperbot
Apr 07 2017 01:42
codetoovercome sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 905 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:42
@OrangeKulture did u edit it ?
Jorge
@OrangeKulture
Apr 07 2017 01:43
@CodeToOvercome i didnt edit it .. and i just loaded the site on my mobile and it looks good! images and all
Gulsvi
@gulsvi
Apr 07 2017 01:43
Try the HTTP version of Dee's website - you'll see it's blocked
HTTPS is loading fine for me too
Jorge
@OrangeKulture
Apr 07 2017 01:44
ohh ok .. yeah thats probs it
i loaded the https both times
Gulsvi
@gulsvi
Apr 07 2017 01:44
Seems imgur forgot to check for HTTPS codepen :p
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:44
@SkyCoder01 good catch..
it looks totally fine now..
Jorge
@OrangeKulture
Apr 07 2017 01:45
@SkyCoder01 you mentioned a list earlier today, regarding the weather apis you found, right? the ones that didn't need a free key? or did I imagine all of that ?
Gulsvi
@gulsvi
Apr 07 2017 01:45
Yeah, you imagined that lol :) I think they all need a key unfortunately
Jorge
@OrangeKulture
Apr 07 2017 01:46
yeah ... seems so
Aaron Peck
@apeck14
Apr 07 2017 01:46
@khaduch you still there?
Ken Haduch
@khaduch
Apr 07 2017 01:46
@apeck14 - yes, in and out of the computer room... what's up?
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 01:47
Goodnight all .. thanks to all of you. See you all tomorrow..
Aaron Peck
@apeck14
Apr 07 2017 01:47
Ok, so I'm on the verge of getting it right (I believe) but how would I compare the values of the object by key in this case
@khaduch
function whatIsInAName(collection, source) {
  var arr = [];
  var srcKeys = Object.keys(source);//["last"]
  for(var i = 0; i < collection.length; i++){//iterate through the collection array
   for(var e in collection[i]){// loop through the keys of each object in collection
     for(var j = 0; j < srcKeys.length; j++){
      if(e === srcKeys[j] &&&){//if the key of collection[i] is equal to the source(s) key(s)

         } 
     }
    }
  }

}
whatIsInAName(
  [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }],

  { last: "Capulet" }
 );
Jorge
@OrangeKulture
Apr 07 2017 01:47
@CodeToOvercome take it easy!
Gulsvi
@gulsvi
Apr 07 2017 01:47
Computer Room - I like the sound of that. Makes me think of monitors and cables everywhere
Aaron Peck
@apeck14
Apr 07 2017 01:48
@khaduch my if statement is incomplete because idk how to check if the values are the same as well
WillGITCode
@WillGITCode
Apr 07 2017 01:49
I finally finished the random quote machine zipline. Then I found out after submitting that Forismatic does not offer their api over HTTPS. I never receved any errors or problems during the hours of dev time and testing. only after I submitted my project. Hmmmmmm, any ideas?
Ken Haduch
@khaduch
Apr 07 2017 01:50
@apeck14 - you have to determine if it has the property - I would use .hasOwnProperty() for that and then compare that same key's value between the collection[i] object and the source object.
Jorge
@OrangeKulture
Apr 07 2017 01:50
you can call it from the http and use the https://crossorigin.me
Aaron Peck
@apeck14
Apr 07 2017 01:50
@khaduch Thanks man :)
CamperBot
@camperbot
Apr 07 2017 01:50
apeck14 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: apeck14 already gave khaduch points
Jorge
@OrangeKulture
Apr 07 2017 01:50
that;s what I did .. i reckon it takes a while tho, not sure if its codepen or forismatic servers or what
@WillGITCode whoops forgot the quote
Gulsvi
@gulsvi
Apr 07 2017 01:52
@WillGITCode Now that you know how to call an API pretty well, it should be easy to switch to one that supports HTTPS, like https://quotesondesign.com/api-v4-0/
crossorigin.me is something that people use as a hack workaround, but it goes down a lot and can be slow.
Jorge
@OrangeKulture
Apr 07 2017 01:52
@SkyCoder01 super slow
yeah i was playing around with quotes on design earlier, but it went down for a while
at least for me .. dunno what it was
Gulsvi
@gulsvi
Apr 07 2017 01:53
Yeah, servers go down sometimes :(
Even my reddit quote machine goes down
Jorge
@OrangeKulture
Apr 07 2017 01:54
maybe it's all us campers relentlessly requesting quotes :D
Gulsvi
@gulsvi
Apr 07 2017 01:54
haha :)
Aaron Peck
@apeck14
Apr 07 2017 01:55
@khaduch wait, I'm so lost... should I replace my old if statement with what you said or is what you said the second component of the if statement after &&?
Jorge
@OrangeKulture
Apr 07 2017 01:55
they'd be like "dayuuum this guys don't kid around when it comes to finding your daily insipirations. Frank, we need more servers ... "
@apeck14 seems to me like you are not testing the srcKeys iteration from source vs the values from the iterations on collections
Aaron Peck
@apeck14
Apr 07 2017 01:58
can you show me in code?
Jorge
@OrangeKulture
Apr 07 2017 01:58
@apeck14 i don;t wanna weigh in too much, i haven't done it myself .. this is what I think from watching the code and the challenge
Aaron Peck
@apeck14
Apr 07 2017 01:59
Can you just write out the if statement though?
Ken Haduch
@khaduch
Apr 07 2017 02:00
@apeck14 - you know, I think that I would lose this line from your recently posted code: for(var e in collection[i]){// loop through the keys of each object in collection because you really don't care about all of the keys in the collection[i] object - you really only care to examine the ones in the source and see if they exist and match in the collection - so you do not really need to iterate through that.
Then your internal loop would be going through the source keys, and that would be something like if ( collection[i].hasOwnProperty( some_source_key ) && collection[i][ some_source_key ] === source[ some_source_key ]) - where it's up to how you generate your list of source keys, some_source_key is pseudo-code-ish... :)
Jorge
@OrangeKulture
Apr 07 2017 02:00
this is (sort of) what i would do:
var arrar = [];
arr.filter(function(val,ind){
});
woops
arr = collections.filter
sorry
Ken Haduch
@khaduch
Apr 07 2017 02:01
@SkyCoder01 :point_up: April 6, 2017 9:47 PM- that isn't far from the truth, even though it's just my makeshift home office... plenty of monitors and cables everywhere!
Pagnito
@Pagnito
Apr 07 2017 02:02
how come the html() from my ajax call only exists within my ajax call, if i try to acces what i wrote into the document with html() in the ajax outside of the ajax its undefined
Jorge
@OrangeKulture
Apr 07 2017 02:02
and then, id loop using srcKeys.length, compare the srcKeys[i] in val and source
sry, just trying to share a lil of my thought process... like i said, i havent done it myself, so i dont wanna give you some wrong advice @apeck14
Gulsvi
@gulsvi
Apr 07 2017 02:03
@Pagnito ajax is asynchronous, it has to go to the server, get the data, and then come back. By the time it's done, all the code before and after it has run (unless it's asynchronous too)
Aaron Peck
@apeck14
Apr 07 2017 02:04
@khaduch like this?
function whatIsInAName(collection, source) {
  var arr = [];
  var srcKeys = Object.keys(source);//["last"]
  for(var i = 0; i < collection.length; i++){//iterate through the collection array
     for(var j = 0; j < srcKeys.length; j++){
      if(collection[i].hasOwnProperty(srcKeys[j]) && collection[i][srcKeys[j]] === source[srcKeys[j]] ){//if the key of collection[i] is equal to the source(s) key(s)
         arr.push();
         } 

    }
  }

}
but obviously with something inside of arr.push();
Pagnito
@Pagnito
Apr 07 2017 02:04
yea i was thinking that, so i wrapper my function in a if statement saying if(apiArray.length>0) { do this
Gulsvi
@gulsvi
Apr 07 2017 02:06
anotherFunction() {
  // this code runs fifth
}

function asyncFunction() {
  // this code runs third

  $.ajax({
    url: url....
  }).done(function(data) {
   // this code runs fourth
    anotherFunction();
  });
}

$(document).ready(function() {
  // this code runs second
  asyncFunction();
});

// this code runs first
console.log('hello!')
Ken Haduch
@khaduch
Apr 07 2017 02:07
@apeck14 - that looks like you're on the right track. You have to make sure that you can account for the cases where there are multiple keys in the source, though, and you'd be pushing collection[i] into your result array if you found that everything matched properly.
Pagnito
@Pagnito
Apr 07 2017 02:08
@SkyCoder01 i dont understand that. why do we put variables first then>
?
Aaron Peck
@apeck14
Apr 07 2017 02:09
@khaduch Yeah, it failed all test cases on FCC, so how would I do that?
Gulsvi
@gulsvi
Apr 07 2017 02:10
@Pagnito variables first?
Can you show an example
Pagnito
@Pagnito
Apr 07 2017 02:10
@SkyCoder01 yea , isnt a good practice to define variables first?
Ken Haduch
@khaduch
Apr 07 2017 02:10
@apeck14 - do you have any updated to the code? The one you posted here: :point_up: April 6, 2017 10:04 PMis not complete.
Pagnito
@Pagnito
Apr 07 2017 02:10
@SkyCoder01 i dunno im really confused on that order. is it always like that?
Gulsvi
@gulsvi
Apr 07 2017 02:11
@Pagnito I'm not sure what you mean - can you show an example?
Aaron Peck
@apeck14
Apr 07 2017 02:11
function whatIsInAName(collection, source) {
  var arr = [];
  var srcKeys = Object.keys(source);//["last"]
  for(var i = 0; i < collection.length; i++){//iterate through the collection array
     for(var j = 0; j < srcKeys.length; j++){
      if(collection[i].hasOwnProperty(srcKeys[j]) && collection[i][srcKeys[j]] === source[srcKeys[j]] ){//if the key of collection[i] is equal to the source(s) key(s)
         arr.push(source);
         } 

    }
  }
return arr; //returns [{last : "Capulet}]
}
whatIsInAName(
  [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }],

  { last: "Capulet" }
 );
@khaduch
Pagnito
@Pagnito
Apr 07 2017 02:11

var html = '';
for (var i=0; i <apiArray.length; i++) {
var strNum = i;

$.ajax({
url: "https://wind-bow.glitch.me/twitch-api/users/"+apiArray[i],
dataType: "JSONP",
type: 'GET',
cache:false,
success: function(data){

 html += '<a id ="g" class="list-group-item g"><img class="logo" src="'+data.logo+'">'+data.display_name+'</a>'+

 '<div id="acc" class="accordion">'+data.bio +'<a target="_blank" href="https://www.twitch.tv/'+apiArray[i]+'">'+'>>>Check us out'+'</a></div>';

 $('.streams').html(html);


}
Gulsvi
@gulsvi
Apr 07 2017 02:12
@Pagnito Ahhh, no, not a good practice at all. Those are global variables.
Pagnito
@Pagnito
Apr 07 2017 02:12
@SkyCoder01 yea but within a function, i read that its good to declare ur vars first
Gulsvi
@gulsvi
Apr 07 2017 02:13
You have to declare a variable to use it
Ken Haduch
@khaduch
Apr 07 2017 02:13
@apeck14 - you want to push something from collection...
Aaron Peck
@apeck14
Apr 07 2017 02:13
Wdym?
Pagnito
@Pagnito
Apr 07 2017 02:13
@SkyCoder01 so that order that u showed me, is that how it always is? or is it just with async ?
Gulsvi
@gulsvi
Apr 07 2017 02:13
@Pagnito In your case, html = '' and then the ajax function goes off and gets the data from the url while the rest of your code outside of the ajax finishes running
Aaron Peck
@apeck14
Apr 07 2017 02:13
Arent the source and what were checking for in collection the same? @khaduch
Gulsvi
@gulsvi
Apr 07 2017 02:14
@Pagnito Always runs in that order if your code is set up like that.
Ken Haduch
@khaduch
Apr 07 2017 02:14
@apeck14 - objects from the collection should be pushed into the result array if they fulfill all of the conditions of matching with the source, so you don't want to keep pushing the source object, but objects from collection - as in .push(collection[i]) They are not necessarily the same. The source is a subset of what is in the collection[i]
Gulsvi
@gulsvi
Apr 07 2017 02:15
document.ready waits for the document to be ready. Code outside of that runs first. code inside of document.ready calls other functions that run after the document is ready. If any of those functions are async, they take some time while other functions run.
Pagnito
@Pagnito
Apr 07 2017 02:15
@SkyCoder01 i still dont understand tho, why when i put an if statement to make sure it only runs once the ajax call is answered, its still doesnt see the id im looking for
Gulsvi
@gulsvi
Apr 07 2017 02:16
Hmm, I don't see your if statement up there - is it in your pen right now?
Pagnito
@Pagnito
Apr 07 2017 02:16
hold on
its all the way at the bottom
Aaron Peck
@apeck14
Apr 07 2017 02:16
So like this? This returns the whole object I believe
      if(collection[i].hasOwnProperty(srcKeys[j]) && collection[i][srcKeys[j]] === source[srcKeys[j]] ){
         arr.push(collection[i]);
         }
@khaduch
Ken Haduch
@khaduch
Apr 07 2017 02:17
@apeck14 - I think so - is it passing any tests? You might be passing some tests if you have the rest of it right...
don't forget to return arr
Gulsvi
@gulsvi
Apr 07 2017 02:18
@Pagnito hold on, having trouble seeing what you're doing. Indentation is all off and no comments :p
Pagnito
@Pagnito
Apr 07 2017 02:18
@SkyCoder01 shit sorry
Aaron Peck
@apeck14
Apr 07 2017 02:18
@khaduch It passed 2/4
function whatIsInAName(collection, source) {
  var arr = [];
  var srcKeys = Object.keys(source);//["last"]
  for(var i = 0; i < collection.length; i++){//iterate through the collection array
     for(var j = 0; j < srcKeys.length; j++){
      if(collection[i].hasOwnProperty(srcKeys[j]) && collection[i][srcKeys[j]] === source[srcKeys[j]] ){//if the key of collection[i] is equal to the source(s) key(s)
         arr.push(collection[i]);
         } 

    }
  }
console.log(arr);
}
whatIsInAName(
  [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }],

  { last: "Capulet" }
 );
Gulsvi
@gulsvi
Apr 07 2017 02:19
@Pagnito Yeah, so the for loop inside your if statement is likely done before your first ajax call finishes.
Ken Haduch
@khaduch
Apr 07 2017 02:20
@apeck14 - that's good. That means that you probably have the ones that have multiple keys in the source, which involves some other complication...
Gulsvi
@gulsvi
Apr 07 2017 02:20
It's one of the first pieces of code that run in your app
Aaron Peck
@apeck14
Apr 07 2017 02:20
@khaduch It only passed the ones that the source object was 1 key/value pair
Pagnito
@Pagnito
Apr 07 2017 02:20
@SkyCoder01 yea i just realized my if statement doesnt rly check if its done, cuz the array is 7 initially
@SkyCoder01 so the interperter read the code from the bottom up?
Ken Haduch
@khaduch
Apr 07 2017 02:21
@apeck14 - yeah, so fix it! :) How would you make a change to insure that all of the source's keys and values matched before you push? that's what you need to do.
Gulsvi
@gulsvi
Apr 07 2017 02:21
@Pagnito This challenge forces you to learn how async functions work. It doesn't read from bottom up.
Aaron Peck
@apeck14
Apr 07 2017 02:22
@khaduch add a for loop that loops through source?
Ken Haduch
@khaduch
Apr 07 2017 02:22
@apeck14 - you already have that, don't you?
Aaron Peck
@apeck14
Apr 07 2017 02:22
Oh yah, lol
Pagnito
@Pagnito
Apr 07 2017 02:22
@SkyCoder01 yea i think i get now, technically tho if make a proper if statement it should work my way right?
Aaron Peck
@apeck14
Apr 07 2017 02:23
@khaduch add another if statement, correct?
parenting the one I already have
Gulsvi
@gulsvi
Apr 07 2017 02:23
@Pagnito If you want code to run when all of your ajax calls are complete, you'll have to check that i is equal to the length of your array - 1. If so, you've processed the whole array and you can call a function.
This is the same code I wrote above, in different order. The order of functions doesn't matter - the timing does:
$(document).ready(function() {
  // this code runs second
  asyncFunction();
});

function asyncFunction() {
  // this code runs third

  $.ajax({
    url: url....
  }).done(function(data) {
   // this code runs fourth
    anotherFunction();
  });
}

// this code runs first
console.log('hello!')

anotherFunction() {
  // this code runs fifth
}
Ken Haduch
@khaduch
Apr 07 2017 02:24
maybe a little more complicated than that - you have to make sure that every source key and value matches with something in the collection[i] - you could count the matches and see if it matches the number of source keys, then push, for example...
Aaron Peck
@apeck14
Apr 07 2017 02:25
Ok thanks for the help! @khaduch
CamperBot
@camperbot
Apr 07 2017 02:25
apeck14 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: apeck14 already gave khaduch points
Aaron Peck
@apeck14
Apr 07 2017 02:26
I screenshotted what you just said and I'll pick it back up tomorrow
Ken Haduch
@khaduch
Apr 07 2017 02:27
@apeck14 - it's a good problem for taking things to the next level... good luck with that, it's good when you get it working. Then you find out there's an easier way (but I don't think that you have been introduced to .filter and .every? those make it simple! You're welcome...
Pagnito
@Pagnito
Apr 07 2017 02:28

@SkyCoder01 if(i == apiArray.length) {
for (var j=0; j < apiArray.length; j++) {
var strNum = j;
var acc = 'acc'+strNum;
var streamBtn = 'g'+strNum;
$('#acc').addClass('g4');
$('#g').css('font-size', '100px');

$("#g").click(function(){
$('#acc').toggle(500);
  })

}

}

Aaron Peck
@apeck14
Apr 07 2017 02:28
@khaduch I have seen functions like filter() and every(), just haven't used them much so I'm afraid :')
Jorge
@OrangeKulture
Apr 07 2017 02:37
@apeck14 just throw them in there and see what happens, the filter function is really good in cases such as these I think .. SandBox from FCC is really nice, and you get to practice a lot
Ken Haduch
@khaduch
Apr 07 2017 02:37
@apeck14 - try to work it out without them - it can be done! That's how I did my first version of this one, and then refined it after some extra learning...
Cory Hoban
@Khaladin
Apr 07 2017 03:18
Hi I'm having trouble prepopulating a tweet for my random quote generator https://www.freecodecamp.com/challenges/build-a-random-quote-machine
i can tweet some text but I don't know how to get it to put in the div I want if someone could point me in the right direction that would be helpful
Jorge
@OrangeKulture
Apr 07 2017 03:24
@Khaladin you mean the button to actually tweet the quote?
Cory Hoban
@Khaladin
Apr 07 2017 03:28
@OrangeKulture yeah
@OrangeKulture I can put in text but I'm not sure how to get it to tweet what's in the <div>
Jorge
@OrangeKulture
Apr 07 2017 03:30
@Khaladin ahh ok i know what you mean .. you will have to search twitter's docs. I myself don't use twitter much, did a lil research on the API's doc page they have, there's some useful info .. haven't implemented it myself to be honest
Cory Hoban
@Khaladin
Apr 07 2017 03:30
@OrangeKulture alright, thanks for the look
CamperBot
@camperbot
Apr 07 2017 03:30
khaladin sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 07 2017 03:31
@Khaladin welcome .. sry i can be of more enlightenment
Rahul Jangid
@rjcool9
Apr 07 2017 04:15
how to retrieve the data from FORM element using javasript/jQuery
someone help
Jorge
@OrangeKulture
Apr 07 2017 04:17
@rjcool9 what do you mean retrieve?
Rahul Jangid
@rjcool9
Apr 07 2017 04:18
how can i get the data of input field in form using javascript/jquery
i am doing wikipedia viewer
and i need to get the data which user enters
Jorge
@OrangeKulture
Apr 07 2017 04:22
@rjcool9 ohh ok, for the challenge .. havent done that myself. Normally when you have to manipulate the data from a form, you would declare the onsubmit from the HTML to a function, like so:
<form name="search" onsubmit="return userSearch()">
and then you declare a function with jquery or javascript that deals with the info from the user input
@rjcool9 sry if that doesn;t help, havent done the challenge myself
Rahul Jangid
@rjcool9
Apr 07 2017 04:25
yeah i tried that but just after the function the data is lost
Jorge
@OrangeKulture
Apr 07 2017 04:25
what you mean lost?
Rahul Jangid
@rjcool9
Apr 07 2017 04:26
its ok
Jorge
@OrangeKulture
Apr 07 2017 04:26
im guessing you have to pass the argument the user is searching into a call for wikipedia?
Rahul Jangid
@rjcool9
Apr 07 2017 04:30
yeah we have to do that
thanx for ur time @OrangeKulture
CamperBot
@camperbot
Apr 07 2017 04:30
rjcool9 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 07 2017 04:32
@rjcool9 sure thing!
Michael Duh
@mikaeloduh
Apr 07 2017 04:54

hello, i have some code like this:

var a = [1, 2, 3, 4, 5, 6] ;
var b = [];

for (var i in a)
  b.push(i);

this maks elements in b string. I wish i can push as interger directly, passible?

Jorge
@OrangeKulture
Apr 07 2017 05:09
@mikaeloduh dont use a for in loop, just a regular loop, and push each iteration to b
Michael Duh
@mikaeloduh
Apr 07 2017 05:13
@OrangeKulture for (var i=0; i<a.length; i++) I use this and it work, thanks!
CamperBot
@camperbot
Apr 07 2017 05:13
mikaeloduh sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 07 2017 05:15
@mikaeloduh thats it! welcome !
Zachary Orona-Calvert
@TheTRUEHoohah
Apr 07 2017 05:52

@TheTRUEHoohah

function convertHTML(str) {

var strT = str.split("");
var andRegex = /[&]/;

var pointRegex = /[ < >]/;

var quotesRegex = /[""]/;

var apostRegex = /[']/;

if(andRegex.test(str[0])){

return strT.join("") + "&";}

else if(pointRegex.test(str[0])){

return strT.join("") + " <";}

else if(quotesRegex.test(str[0])){
return strT.join("") + """;
}

return str;

}

convertHTML("Dolce & Gabbana");
I cant figure why it wont work im on the HTML entities one

Zach
@hirodashi
Apr 07 2017 06:23
@cory did you figure it out?
Sam Griffen
@ssgriffen
Apr 07 2017 06:32
Just starting on this simon says proj. Anyone know why this isn't working on mobile? http://codepen.io/ssgriffen/full/BWEBWP/
Leafie Tutoring
@www-leafie-io
Apr 07 2017 06:52
@ssgriffen in what way is it not working?
Sam Griffen
@ssgriffen
Apr 07 2017 06:52
@www-leafie-io Sounds arent working, highighting not working, my buttons arent even hiding like they should onn mobile
Zhanibek
@zhann1982
Apr 07 2017 06:58
Hello! I have problem with setTimeout function. I want to delay .css() method, but it's not working inside setTimeout. http://codepen.io/zhann1982/pen/dvgqrq?editors=0110
Michael Bomholt
@bomholtm
Apr 07 2017 07:44
hey just finished my front end certificate a few days ago but did go back to fix some issues on my tic tac toe and simon game... i am not completely satisfied with the tic tac toe algorithm. is there a better method then the computer picking random fields or minimax. with random numbers its way to easy to win and with minimax a win isnt possible at all
Sonja
@sonjaSch
Apr 07 2017 07:57
@KatSaldivar send u pm
alpox
@alpox
Apr 07 2017 08:11
@bomholt Well minimax is a perfect player ^^ maybe you could manipulate the minimax so it chooses the wrong branch now and then
alpox
@alpox
Apr 07 2017 08:20
@zhann1982 Your variable k will have another value at the time the callback of setTimeout runs - so it refers to the wrong element. You can save the element to use in a new variable to prevent that. Go sure to use let for the variable definition and not var (Var is dangerous when it comes to scopes)
    let element = $("#s"+test[k]);
    element.css("opacity","0.5");
    setTimeout(function(){
        element.css("opacity","1");  //   <----- Here it is
    },1000);
Derek B. McIntire
@derekbmcintire
Apr 07 2017 08:21
Hey all, I'm currently working on my wikipedia search project and have a (hopefully)simple css question. I set up my search submit button inside the search input field and animated everything so it looks and works how I want, but since they overlap the mouse doesn't change to the pointer when i hover over the submit button, instead it spasms between a text cursor and the arrow. Anyone know a fix so I can get it to just be the pointer? my pen - https://codepen.io/derekbmcintire/pen/KWLOOQ
or even just do nothing, because once you click on the search field it works fine. it's just before the search field is selected.
alpox
@alpox
Apr 07 2017 08:29
@derekbmcintire I see what causes the error but at the moment not how to solve it
Derek B. McIntire
@derekbmcintire
Apr 07 2017 08:30
@alpox okay thanks for trying
CamperBot
@camperbot
Apr 07 2017 08:30
derekbmcintire sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 918 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 07 2017 08:30
@derekbmcintire The problem is your opacity: 0.2 of the input field
If you take this one away, the pointer stops spasming ^^
Derek B. McIntire
@derekbmcintire
Apr 07 2017 08:30
ahh ok
Bogdan
@oblanao
Apr 07 2017 08:32
Hello, does anyone have any idea why my #about div loses CSS when resizing the windows to smaller resolution? http://codepen.io/oblanao/pen/VpOWMd
Derek B. McIntire
@derekbmcintire
Apr 07 2017 08:32
I guess I can just change the colors to look more muted, thanks again
alpox
@alpox
Apr 07 2017 08:34
@derekbmcintire Yes, that would probably be the best way
@derekbmcintire I usually don't work with opacity until i really really need it
Bogdan
@oblanao
Apr 07 2017 08:37
never mind, just figured it out: forgot to close the @media min-width query with the appropiate } :D
Derek B. McIntire
@derekbmcintire
Apr 07 2017 08:40
actually i figured out how to do it using border: 2px solid rgba(0,0,0,.1);
that makes the border have an opacity of .1 and has the same look
and I used two declerations, the first one just solid incase the browser has any trouble with rgba
:)
Andres Arigon
@AndresAL86
Apr 07 2017 08:49
Hello there.. I have just finished to build my portfolio (real one) I am wondering if I can use it instead of make a new one for this course "Build a personal porfolio webpage" www.andresarigon.com Can I used it or should I build a new one?
h1tag
@h1tag
Apr 07 2017 08:51
@AndresAL86 if it meets the user stories, then :+1:
Andres Arigon
@AndresAL86
Apr 07 2017 08:51
@fortMaximus yes it meets the user stories and more.
However, I don't have the code on Codepen.io should I copy my code there or can I use my real URL and the real page?
Heathercoraje
@Heathercoraje
Apr 07 2017 08:54
Hi. a lot of struggle yesterday but back in game :)
I am putting my image for a banner but it is too long. it doesnt fit the brower-wise 100%
my code is
<div class="banner">
<img class="banner-image" src="https://s27.postimg.org/priakqavn/pexels-photo-201987.jpg">
this is my css

.banner {
width: 100%;
display:block;
}

.banner >.banner-image {
width: 100%;
display:block;
}

Can anyone help?
h1tag
@h1tag
Apr 07 2017 08:56
@AndresAL86
As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.
you also have done an awsome job! :+1:
Andres Arigon
@AndresAL86
Apr 07 2017 08:57
@fortMaximus cool. Thank you very much!!! I thing less to do! :)
CamperBot
@camperbot
Apr 07 2017 08:57
andresal86 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 714 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Heathercoraje
@Heathercoraje
Apr 07 2017 08:59
@AndresAL86 your webpage looks amazing!
Andres Arigon
@AndresAL86
Apr 07 2017 09:00
@Heathercoraje .banner {width:100%; display:block; height::auto; max-wdith: YOUR REAL PICTURE WIDTH HERE px}
@Heathercoraje thanks!
CamperBot
@camperbot
Apr 07 2017 09:00
andresal86 sends brownie points to @heathercoraje :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @heathercoraje |http://www.freecodecamp.com/heathercoraje
Andres Arigon
@AndresAL86
Apr 07 2017 09:00
height:auto (sorry for the double ::)
Heathercoraje
@Heathercoraje
Apr 07 2017 09:01
so simple {width: 100%; display:block;}
wouldn't make the img look screen-fit. right?
@AndresAL86 Could you see what is wrong with my code?
Andres Arigon
@AndresAL86
Apr 07 2017 09:06
Let me check
Heathercoraje
@Heathercoraje
Apr 07 2017 09:07
@AndresAL86 Thank you
CamperBot
@camperbot
Apr 07 2017 09:07
heathercoraje sends brownie points to @andresal86 :sparkles: :thumbsup: :sparkles:
:cookie: 188 | @andresal86 |http://www.freecodecamp.com/andresal86
Andres Arigon
@AndresAL86
Apr 07 2017 09:10
Ok I am on it. I cannot see any problem. Exactly what would you like to achieve? @Heathercoraje
Heathercoraje
@Heathercoraje
Apr 07 2017 09:11
the picture is too big
I have to scroll down to see the full picture. I rather want it to be static full img on the browser without scrolling it down.
Andres Arigon
@AndresAL86
Apr 07 2017 09:12
ok
now I understand you
one sec
Heathercoraje
@Heathercoraje
Apr 07 2017 09:12
ok
Andres Arigon
@AndresAL86
Apr 07 2017 09:17
Done
<div style="height: 100vh; background-image: url(https://s27.postimg.org/priakqavn/pexels-photo-201987.jpg) ; background-size: cover; background-repeat: no-repeat; position: relative;">
<p> Hello there! </p>

</div>
I have made that on your HTML
now the image should be always the 100% of your screen height
Heathercoraje
@Heathercoraje
Apr 07 2017 09:18
I can't adjust it on css?
Andres Arigon
@AndresAL86
Apr 07 2017 09:18
yes one sec let me create it as css
Heathercoraje
@Heathercoraje
Apr 07 2017 09:19
on tutorial I watched, he put on css
Andres Arigon
@AndresAL86
Apr 07 2017 09:19

it should be your HTML

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Fjalla+One|Francois+One|Kaushan+Script|Merriweather|Open+Sans+Condensed:300|Oswald|Pacifico|Raleway" rel="stylesheet">

<body>
<ul class="nav">
<div class="logo"><a href="#">Unqiue WW</a>

</div>
<li><a href="#top">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact me</a></li>    

</ul>

<div class="bg-home">
<p> Hello there! </p>

</div>

and your new css class
.bg-home {height: 100vh; background-image: url(https://s27.postimg.org/priakqavn/pexels-photo-201987.jpg) ; background-size: cover; background-repeat: no-repeat;}
Heathercoraje
@Heathercoraje
Apr 07 2017 09:20
.banner-image { width:100%; display:block;} then the image got smaller..
pastacolsugo
@pastacolsugo
Apr 07 2017 09:20
GM everyone, I've just started working on the Tribute page with Bootstrap on Codepen.io and I can't figure out why the image is not responsive to the page width. As I learned on FCC tutorials I should just add class="img-responsive"
http://codepen.io/sugo/pen/wJZdXQ
Any ideas?
Heathercoraje
@Heathercoraje
Apr 07 2017 09:22
@AndresAL86 I will try with your code. Thanks!
CamperBot
@camperbot
Apr 07 2017 09:22
heathercoraje sends brownie points to @andresal86 :sparkles: :thumbsup: :sparkles:
:warning: heathercoraje already gave andresal86 points
otrov
@otrov
Apr 07 2017 09:24
yo peeps.. Anyone have any tips how to import bootstrap in codepen.io IDE since layout is diferent for me.. I'm using windows
blob
pastacolsugo
@pastacolsugo
Apr 07 2017 09:25
you should go to settings>CSS>import
otrov
@otrov
Apr 07 2017 09:25
blob
blob
pastacolsugo
@pastacolsugo
Apr 07 2017 09:26
you can link it in the <head> if you want
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 10:26
Hi, i wanted to implement ScrollSpy to my nav .. I did refer to Bootstrap Documentation ..Am missing something though.
Bogdan
@oblanao
Apr 07 2017 10:37
Hello, just finished my (simple) Portofolio project. Please take a look, any feedback welcome http://codepen.io/oblanao/full/VpOWMd/
nik3108
@nik3108
Apr 07 2017 10:37
how to add a image to codepen
Bogdan
@oblanao
Apr 07 2017 10:38
@nik3108 <img src="..">
nik3108
@nik3108
Apr 07 2017 10:39
link
i tried to add a google link
Bogdan
@oblanao
Apr 07 2017 10:39
<img src="..." href="...">
nik3108
@nik3108
Apr 07 2017 10:39
but it did'nt support
Deepan Udaiyar
@CodeToOvercome
Apr 07 2017 10:42
@oblanao looks great..
@oblanao underline didn't seems to line up properly
V Arun Kumar
@arunvkumr
Apr 07 2017 10:47
hey guys, i have completed twitch project have a look and give some feedback. https://codepen.io/arunkumrv/full/VpNPBg/
heroiczero
@heroiczero
Apr 07 2017 10:51
@arunvkumr Nice :+1:
V Arun Kumar
@arunvkumr
Apr 07 2017 10:53
@heroiczero thanks... In codepen if i do analyze css i m getting an error, Element (a.active) is overqualified, just use .active without element name. but if i do as it says it doesn't work.
CamperBot
@camperbot
Apr 07 2017 10:53
arunvkumr sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1100 | @heroiczero |http://www.freecodecamp.com/heroiczero
Bogdan
@oblanao
Apr 07 2017 11:01
which underline are you refering to?
Ken Haduch
@khaduch
Apr 07 2017 11:07
@arunvkumr - took a look at your app on my phone. Looks nice, but it's hard to give it a good look. One thing, in portrait mode the header text goes outside the box. But it looks nice and clean, in general.
V Arun Kumar
@arunvkumr
Apr 07 2017 11:16
@khaduch thanks, if you are talking about the title 'Twitch Streamers', i have fixed it. if it still out of the box let me know :smile:
CamperBot
@camperbot
Apr 07 2017 11:16
arunvkumr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2711 | @khaduch |http://www.freecodecamp.com/khaduch
James Barrett
@jamesbarrett95
Apr 07 2017 11:22
Hi guys, can someone help me understand what I actually need to do on this challenge: Wherefore art thou
I think I'm having a bit of a silly moment here
Apprently: whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 }) should return [{ "a": 1, "b": 2 }, { "a": 1, "b": 2, "c": 2 }]... But why?
h1tag
@h1tag
Apr 07 2017 11:51
@jamesbarrett95 because they contain { "a": 1, "b": 2 }
Zhanibek
@zhann1982
Apr 07 2017 12:05
@alpox Thanks! I'll try that
Michael Katos
@MichaelKatos
Apr 07 2017 12:22
Im having a problem with creating a navbar to stay on top
Bas
@Aliaselias
Apr 07 2017 12:23
You'll have to make it position: fixed; and width: 100%;
Michael Katos
@MichaelKatos
Apr 07 2017 12:24
<nav class"navbar fixed-top navbar-inverse bg-inverse">
<div class="container">
<div class="row">
<div class"col-6">
<h4 class="text-uppercase">Michael <strong>Katos</strong></h4>
</div>
<div class"col-6">
<ul class="nav nav-justified">
<li><a href="./#home">Home</a></li>
<li><a href="./#portfolio">Portfolio</a></li>
<li><a href="./#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
Bas
@Aliaselias
Apr 07 2017 12:26
Are you using bootstrap?
Bootstrap has it's own class for a fixed navbar, its fixed-navbar-top
Joshua
@Jbaldacchino
Apr 07 2017 12:35
@oblanao give some more footer space below the bottom facebook & twtter icons in my opinion, the rest loks great though!
def
@defregga
Apr 07 2017 12:46
Good day all.
A question regarding the Portfolio challenge. Is it sufficient if it functionally fulfills the user stories, but is essentially just a draft? I am wary to fill any in-depth personal details in there or links to real social media profiles if it's essentially just used as a gating mechanism for the Front End Dev Certification.
Rachit Magon
@rmagon
Apr 07 2017 12:53
^ same question
h1tag
@h1tag
Apr 07 2017 12:55
@defregga yes
you can also use a placeholder text
def
@defregga
Apr 07 2017 12:56
Sweet!
Jan Peters
@JanPeters
Apr 07 2017 12:58
Does anyone know how I can center a <ul>?
h1tag
@h1tag
Apr 07 2017 13:01
@JanPeters you can google it ^^
Level One
@WelcomeToLevelOne
Apr 07 2017 13:01
Hey guys how do I center an image?
Bas
@Aliaselias
Apr 07 2017 13:03
Display: block; margin: 0 auto;
h1tag
@h1tag
Apr 07 2017 13:04
you can google it also, but here's a guide made by a fellow camper: https://codepen.io/skycoder/pen/xqbGor
Jan Peters
@JanPeters
Apr 07 2017 13:04
I googled it, but the mehtods I found didn't work for me for some reason.. I was doing something wrong
Thanks anyways
Level One
@WelcomeToLevelOne
Apr 07 2017 13:05
@fortMaximus thanks
CamperBot
@camperbot
Apr 07 2017 13:05
welcometolevelone sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 715 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 07 2017 13:06
@JanPeters what did u try?
Jan Peters
@JanPeters
Apr 07 2017 13:06
putting it in a div with center-text
Amongst other things I came across on stackoverflow
Screenshot from 2017-04-07 15-08-09.png
h1tag
@h1tag
Apr 07 2017 13:08
@JanPeters did you link to Bootstrap 3?
from the css settings
Jan Peters
@JanPeters
Apr 07 2017 13:09
It's for the tribute page, and yes I did that
h1tag
@h1tag
Apr 07 2017 13:09
post the link to your pen please
Sorry for any possible mistakes, this is my first time
h1tag
@h1tag
Apr 07 2017 13:11
you linked to Bs4
you have to link to Bs3
because you're using Bs3 classes
Jan Peters
@JanPeters
Apr 07 2017 13:12
Ok thank you, since you looked at it. Do you think it's good enough this far?
h1tag
@h1tag
Apr 07 2017 13:13
but still the problem is unsolved, right?
Jan Peters
@JanPeters
Apr 07 2017 13:13
Yeah
h1tag
@h1tag
Apr 07 2017 13:16
@JanPeters use the class text-center with the ul
Jan Peters
@JanPeters
Apr 07 2017 13:17
Thanks, I had that before. And that centers the text of the ul, but not the bulletpoints
They are still aligned to the left
h1tag
@h1tag
Apr 07 2017 13:19
Screenshot.png
that's what i'm seeing
def
@defregga
Apr 07 2017 13:20
Can I get feedback on my Portfolio page? I am pretty close to done, but still have to fix the navbar behavior when collapsed.
Jan Peters
@JanPeters
Apr 07 2017 13:20
Screenshot from 2017-04-07 15-20-39.png
@fortMaximus I must be doing something wrong
h1tag
@h1tag
Apr 07 2017 13:21
haha. How?!
maybe you're doing changes that is still unsaved
@defregga nice and simple. Like the design :+1:
Jan Peters
@JanPeters
Apr 07 2017 13:22
Not a clue, that's why I gave up on googling in the first plae haha
Looks very nice @defregga I like the clean design
def
@defregga
Apr 07 2017 13:23
Thanks @fortMaximus @JanPeters
CamperBot
@camperbot
Apr 07 2017 13:23
defregga sends brownie points to @fortmaximus and @janpeters :sparkles: :thumbsup: :sparkles:
:cookie: 716 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
:cookie: 2 | @janpeters |http://www.freecodecamp.com/janpeters
def
@defregga
Apr 07 2017 13:26
I do think I am missing something with regards to external dependencies. My collapsed menu doesn't work. When I take the sample code from here http://v4-alpha.getbootstrap.com/components/navbar/ and paste into a new CodePen and include the correct BS version, it also doesn't work.
h1tag
@h1tag
Apr 07 2017 13:26
@JanPeters I forked the working one: https://codepen.io/FortMax/pen/KWjzvB
Jan Peters
@JanPeters
Apr 07 2017 13:27
Well, it looks the same on my pc.. Maybe a wrong setting in chrome. I'll try firefox
h1tag
@h1tag
Apr 07 2017 13:27
I'm on FF
Jan Peters
@JanPeters
Apr 07 2017 13:27
Yeah, chrome fucked it up for me. It's fixed in FF
h1tag
@h1tag
Apr 07 2017 13:28
@defregga you also need jQuery and Bootstrap JS
def
@defregga
Apr 07 2017 13:30
@fortMaximus Indeed, it was the missing JS references.
Level One
@WelcomeToLevelOne
Apr 07 2017 13:43
How do I centralise a bulletpoint list using the bootstrap grid? <div class="text-center"> isn't working and the bulletpoint is far to the left
def
@defregga
Apr 07 2017 13:43
Do you have a link to the CodePen?
Level One
@WelcomeToLevelOne
Apr 07 2017 13:43
Who? Me?
def
@defregga
Apr 07 2017 13:44
Yes, @WelcomeToLevelOne
ignoring the fact that I just realised it doesn't have to be on Dr. Borlaug, does anyone have any solutions?
def
@defregga
Apr 07 2017 13:46
Use the row and col-- classes we learned about and also read up in the Bootstrap documentation regarding offsets. so how do you do this for example |<- 2 cols ->|<- 8 cols ->|<- 2cols->| ?
"Grid" is the section in the BS doc you want to be looking at.
Level One
@WelcomeToLevelOne
Apr 07 2017 13:47
col-xs-2, col-xs-8, col-xs,2 or something right?
def
@defregga
Apr 07 2017 13:48
Something like that. But col areas without content won't take up any space. That's where the offsets come in.
Level One
@WelcomeToLevelOne
Apr 07 2017 13:48
oki
Jan Peters
@JanPeters
Apr 07 2017 13:51
http://codepen.io/JanPeters/pen/NpZGKE Is it good enough as it is now? Can someone give me some feedback? :)
I am still ooking how to get the list aligned
def
@defregga
Apr 07 2017 13:53
The unordered list looks a bit awkward. Maybe try the same approach that @WelcomeToLevelOne wants going to take (see above).
Jan Peters
@JanPeters
Apr 07 2017 13:53
Yeah, what I said, the list is what I was looking at now
Thanks @defregga
CamperBot
@camperbot
Apr 07 2017 13:54
janpeters sends brownie points to @defregga :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @defregga |http://www.freecodecamp.com/defregga
elad ben aderet
@eladonline
Apr 07 2017 13:59
a question guys if i have a function that taks arg (array) a = ["yelow"] and i do var arr = a and then i do arr.shift() it shifts a too whyy?
function (a)
KatSaldivar
@KatSaldivar
Apr 07 2017 14:13
@sonjaSch Thanks!
CamperBot
@camperbot
Apr 07 2017 14:13
katsaldivar sends brownie points to @sonjasch :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @sonjasch |http://www.freecodecamp.com/sonjasch
Gulsvi
@gulsvi
Apr 07 2017 14:21

@CodeToOvercome To get ScrollSpy working, change your body tag to target your .nav class:

<body data-spy="scroll" data-target=".nav">

And then go to your Codepen Settings, click "JavaScript", and add both jQuery and Bootstrap.js from the quick-add menu. ScrollSpy requires Bootstrap's JavaScript File which also requires jQuery.

Just tried it in your codepen and it's working as expected
Jan Peters
@JanPeters
Apr 07 2017 14:24
http://codepen.io/JanPeters/pen/NpZGKE Can anyone explain to me how I can get my UL items vertically aligned?
Gulsvi
@gulsvi
Apr 07 2017 14:25

@JanPeters One way to center a list is to give it a width, like 70% and use auto margins, for example:

ul {
  margin: 0 auto;
  text-align: left;
  width: 70%;
}

And, yeah, you can also use bootstrap column offsets - it would be good practice to get familiar with the grid system.
For other feedback on your page, don't include <body> or <head> tags in your HTML on codepen - put <head> code in the codepen settings in the "Stuff for <head>" section. Also, try to avoid using <br> tags for creating vertical space - use CSS margin-top/bottom instead. Good start so far :)

Jan Peters
@JanPeters
Apr 07 2017 14:27
Thanks @SkyCoder01
CamperBot
@camperbot
Apr 07 2017 14:27
janpeters sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 906 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 14:28
@JanPeters No problem. I also forgot to mention - make sure everything between your <style> </style> tags goes in the CSS window of codepen.
Jan Peters
@JanPeters
Apr 07 2017 14:29
Ohh ok, thank you
h1tag
@h1tag
Apr 07 2017 14:29
@SkyCoder01 Hey
def
@defregga
Apr 07 2017 14:30
Hmm, my navbar does something funky when the viewport changes from sm to xs. until then the ...-brand and toggler are on the left and right side respectively. In xs, the brand jumps to about the middle and the toggler a line down.
Gulsvi
@gulsvi
Apr 07 2017 14:30
Happy Friday @fortMaximus :)
def
@defregga
Apr 07 2017 14:30
Can somebody have a look please? https://codepen.io/def19/pen/oZRBYp?editors=1000
h1tag
@h1tag
Apr 07 2017 14:31
@SkyCoder01 Thank you. Same to you
CamperBot
@camperbot
Apr 07 2017 14:31
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 907 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
Apr 07 2017 14:35
@defregga is there a problem? Or do u want a review?
def
@defregga
Apr 07 2017 14:35
It's two lines above the link.
Some responsive layout behavior on xs viewports I don't understand.
Gulsvi
@gulsvi
Apr 07 2017 14:36
@defregga It appears to be the placement of your container, button, and navbar-brand. This fixes it:
<nav class="navbar navbar-toggleable-sm navbar-light fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarPortfolio" aria-controls="navbarPortfolio" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="container">
    <a class="navbar-brand" href="#" style="padding-left: 10px">def</a>
    <div class="collapse navbar-collapse text-right" id="navbarPortfolio">
      <div class="nav navbar-nav ml-auto">
        <a class="nav-item nav-link" href="#about">About <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#portfolio">Portfolio</a>
        <a class="nav-item nav-link" href="#contact">Contact</a>
      </div>
    </div>
  </div>
</nav>
Moved your navbar-brand below the button and took the button outside of the container
Your div with the links, should be a "ul" with "<li>" elements I believe - not sure if that will cause problems with scroll spy if you want to get that working later.
Jan Peters
@JanPeters
Apr 07 2017 14:37
@SkyCoder01 I got all that, the bullet points are fixed now. Thanks! Anything else I need to look over before sending it in?
CamperBot
@camperbot
Apr 07 2017 14:37
janpeters sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: janpeters already gave skycoder01 points
Jan Peters
@JanPeters
Apr 07 2017 14:38
Except putting the style in the css tab
Gulsvi
@gulsvi
Apr 07 2017 14:39
@JanPeters Looks good! Just move that <link> into your codepen settings, the CSS into the CSS panel. Also, replace img-responsive with img-fluid since you're using Bootstrap 4.
lady_geek
@madhurisobale
Apr 07 2017 14:41
Hi All I need help How do i put local image in my portfolio page ? eg i want to put my image as profile pic in my portfolio
any place where i can upload images
Gulsvi
@gulsvi
Apr 07 2017 14:41
@madhurisobale You can upload it to a service like https://postimage.io, they will give you a URL to use.
def
@defregga
Apr 07 2017 14:41
O_O it works indeed.
lady_geek
@madhurisobale
Apr 07 2017 14:42
@SkyCoder01 Thanks let me check if it works
CamperBot
@camperbot
Apr 07 2017 14:42
madhurisobale sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 908 | @skycoder01 |http://www.freecodecamp.com/skycoder01
def
@defregga
Apr 07 2017 14:42
Only thing left now is that on my Android phone, the brand and navbar-items are centered instead of left/right aligned.
Thanks @SkyCoder01
CamperBot
@camperbot
Apr 07 2017 14:42
defregga sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 909 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 14:43
@defregga No problem - good luck with the Android fix :)
def
@defregga
Apr 07 2017 14:43
Only thing left now is that on my Android phone, the brand and navbar-items are centered instead of left/right aligned. >> Seems to be the same on my PC's Chrome once viewport goes to xs.
Deon Shipmon
@theDapperCoder
Apr 07 2017 14:50
For the Front End Development Projects: Build a Tribute Page, do I have to use bootstrap to build the page or can I build it with anything of my choosing?
Gulsvi
@gulsvi
Apr 07 2017 14:51
@theDapperCoder You can use whatever you want - you just need to fulfill the User Stories mentioned in the challenge
Deon Shipmon
@theDapperCoder
Apr 07 2017 14:52
@SkyCoder01 Thanks!
CamperBot
@camperbot
Apr 07 2017 14:52
thedappercoder sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 910 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Deon Shipmon
@theDapperCoder
Apr 07 2017 14:54
@SkyCoder01, but the only way for me to fully understand bootstrap is to just use it. Even if it takes me a little longer to build that project
Gulsvi
@gulsvi
Apr 07 2017 14:56
@theDapperCoder I agree. I thought maybe you were talking about using a different framework, like Foundation or Materialize.
Deon Shipmon
@theDapperCoder
Apr 07 2017 14:57
@SkyCoder01, simply trying to build the project. But I understand basic html, css, and javascript. Seeing that bootstrap is new to me. I figured I would just try that.
def
@defregga
Apr 07 2017 15:01
I think I'll chalk this alignment issue up to BS4 being an alpha version. No idea what I can do to fix that.
Monica Kiss
@MonicaKiss
Apr 07 2017 15:04
hello all, i have a question, if i use bootstrap, is there any method by which i can set a fixed height of a column by percentage? if i put position: fixed to the columns, the second colum apears above my first column
Jorge
@OrangeKulture
Apr 07 2017 15:08
hey guys!
عبدالله بن علي نور
@liamsy
Apr 07 2017 15:09
hey guys
can you look at my personal portfolio project and comment on it?
Gulsvi
@gulsvi
Apr 07 2017 15:14
@MonicaKiss You will have to use CSS directly to adjust the height of a column. You generally don't want to use position: fixed on a bootstrap column, they are meant to be move around as part of the responsive design.
Hello @OrangeKulture :) Happy Friday
def
@defregga
Apr 07 2017 15:17
I'd also like to get feedback on what I may have overlooked on my Portfolio page. I believe I fulfill all four User Stories. https://codepen.io/def19/full/oZRBYp/
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:17
guys can u tell me why this isnt working
<a href="https://www.facebook.com/BuLgArIan.BuLLeT?ref=bookmarks" target="_blank"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>
Gulsvi
@gulsvi
Apr 07 2017 15:17
@liamsy Good start on your portfolio :) It would be nice to have the images centered in the portfolio section. In Codepen, you shouldn't have <body>, <head>, <meta>, <link> tags in the HTML. All of that should go in settings. I'm not sure why you have twitter widget code and a link to bootstrap.js in the Javascript panel either. Aside from that though, it looks good.
@XtraPurpl3 It works for me! If you are not seeing the facebook icon, be sure to add Font Awesome to your project. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:20
@SkyCoder01 i did add it and everything i see the icon is just the link on it is not working when i click it it turns blue but doesnt open a new tab or anything and i have put target="_blank" on it
Jorge
@OrangeKulture
Apr 07 2017 15:20
@SkyCoder01 thanks! same to you. Are you already collecting the brownies for today's brownie party.. It's long overdue, in my opinion
CamperBot
@camperbot
Apr 07 2017 15:20
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 912 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:20
@SkyCoder01 when i right click on the fb icon and then open it works :(
Jorge
@OrangeKulture
Apr 07 2017 15:20
what the
Gulsvi
@gulsvi
Apr 07 2017 15:21
@XtraPurpl3 Maybe some extra code before/after it is conflicting. Do you have a link to all of your code by chance? Maybe in codepen?
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:21
yeah 1 sec
Gulsvi
@gulsvi
Apr 07 2017 15:21
@OrangeKulture Lol, thanks for the cookie :)
CamperBot
@camperbot
Apr 07 2017 15:21
skycoder01 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @orangekulture |http://www.freecodecamp.com/orangekulture
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:22
عبدالله بن علي نور
@liamsy
Apr 07 2017 15:23
@SkyCoder01 ooh...I had the twitter widget thing first but I had to remove it. thanks anyways
CamperBot
@camperbot
Apr 07 2017 15:23
liamsy sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 913 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
Apr 07 2017 15:23
@SkyCoder01 haha sure! the more the merrier .. it'd be awesome if you could trick CamperBot into giving out brownies to him/her self and kinda go on an infinite loop until it explodes from the high blood sugar levels
Gulsvi
@gulsvi
Apr 07 2017 15:24
@XtraPurpl3 There is a bug in your JavaScript - if you remove that, your link works. I'll try to debug it and see how to fix.
Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:24
ah ok that be great thanks
Gulsvi
@gulsvi
Apr 07 2017 15:24
hahaha @OrangeKulture

@XtraPurpl3 This is the standard code for what you're trying to do - but you don't really have your HTML set up for it yet.

$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);

For now, I would remove the JavaScript from your project and try to implement smooth scroll once you get more content added to your page.

Todor Georgiev
@XtraPurpl3
Apr 07 2017 15:28
oki doks thank you for your help :)
Gulsvi
@gulsvi
Apr 07 2017 15:29
You're welcome :)
h1tag
@h1tag
Apr 07 2017 15:40
@SkyCoder01 how's your web development journey going?
Gulsvi
@gulsvi
Apr 07 2017 15:40
@fortMaximus I've been trying to get better at JavaScript. Learning Node.js too. How about you?
h1tag
@h1tag
Apr 07 2017 15:41
learning YDKJS and contribution to open source
Gulsvi
@gulsvi
Apr 07 2017 15:43
@fortMaximus Cool! As I learn node.js, I'm finding there are lots of bugs to fix in the tutorials. Maybe a good opportunity to contribute to open source there as well.
What's the open academic project? Is that like free code camp?
h1tag
@h1tag
Apr 07 2017 15:44
@SkyCoder01 so you're learning node.js from freecodecamp?
Gulsvi
@gulsvi
Apr 07 2017 15:44
@fortMaximus just on my own with their online workshops
The javascript meetup I go to is also a nodeschool, so they've been helping me figure it out
h1tag
@h1tag
Apr 07 2017 15:45
which online workshops?
It's a bunch of workshops with text-based command line challenges to learn JavaScript, Node.js, etc
h1tag
@h1tag
Apr 07 2017 15:46
I see, why did you halt your progress on freecodecamp?
Gulsvi
@gulsvi
Apr 07 2017 15:47
I haven't stopped, just slowed down a bit. JavaScript isn't as easy for me as front-end
So, trying to get better at JS for now...
When the beta is no longer a beta, I'll go for my certificate. Why did you stop?
also, forgot to mention that I'm learning design too, from HackDesign website
Gulsvi
@gulsvi
Apr 07 2017 15:50
I'll have to check it out. If this JavaScript doesn't get easier, I'll probably look at design some more too
Umar
@OceanBrass
Apr 07 2017 15:51
hi guys
h1tag
@h1tag
Apr 07 2017 15:51
I'm not learning design because JS is difficult, it's something that I love
@OceanBrass hi
Umar
@OceanBrass
Apr 07 2017 15:52
how can i do 1 step back in codepen, i delited my code by mistake =(((
h1tag
@h1tag
Apr 07 2017 15:52
you can't :worried:
wait
I thought u deleted the pen
Gulsvi
@gulsvi
Apr 07 2017 15:52
Ctrl+Z to undo your code changes?
h1tag
@h1tag
Apr 07 2017 15:52
yes
Umar
@OceanBrass
Apr 07 2017 15:53
@SkyCoder01 yeeeees!!! thank youuuu!!!!
CamperBot
@camperbot
Apr 07 2017 15:53
oceanbrass sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 914 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 15:53
:)
Umar
@OceanBrass
Apr 07 2017 15:53
=))))
h1tag
@h1tag
Apr 07 2017 15:54
@SkyCoder01 I love YDKJS also
Gulsvi
@gulsvi
Apr 07 2017 15:54
just don't delete, save, refresh - then you can never go back
h1tag
@h1tag
Apr 07 2017 15:54
love the process of learning
Umar
@OceanBrass
Apr 07 2017 15:55
thanks for the advice ;)
Gulsvi
@gulsvi
Apr 07 2017 15:55
I'm no good at learning from books. Need to try, fail, talk to people about it, try, and fail again
Books just put me to sleep lol
h1tag
@h1tag
Apr 07 2017 15:55
but YDKJS is different
I also write the example in the book
it's not like university books
Gulsvi
@gulsvi
Apr 07 2017 15:56
I used Eloquent Javascript at first, but maybe I'll give YDKJS a try
Umar
@OceanBrass
Apr 07 2017 15:56
@SkyCoder01 completly agree, books its too bored
Gulsvi
@gulsvi
Apr 07 2017 15:57
Yeah, I have to see how it works for myself to keep myself awake :)
Umar
@OceanBrass
Apr 07 2017 15:57
more interesting when you do it mistake by mistake
Gulsvi
@gulsvi
Apr 07 2017 15:57
^^ Definitely
Mohamed Derhalli
@derhallim
Apr 07 2017 15:58
wololo
h1tag
@h1tag
Apr 07 2017 15:59
@SkyCoder01 then type the examples, even Kyle himself instructs you to do that
Gulsvi
@gulsvi
Apr 07 2017 15:59
haha @derhallim WOLOLO WOLOLO WOLOLO WOLOLO
Mohamed Derhalli
@derhallim
Apr 07 2017 15:59
haha
u know that game?
Gulsvi
@gulsvi
Apr 07 2017 16:00
@fortMaximus I will give it a try this weekend and see how it goes. Thanks for the advice :)
CamperBot
@camperbot
Apr 07 2017 16:00
skycoder01 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 717 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Gulsvi
@gulsvi
Apr 07 2017 16:00
@derhallim Age of Empires?
Mohamed Derhalli
@derhallim
Apr 07 2017 16:00
do we need to write "use strict" when we're using ES6 syntax?
@SkyCoder01 yeaa AOE haha
h1tag
@h1tag
Apr 07 2017 16:01
I just finished the scopes, and I feel that I'm more confident about my knowledge in it @SkyCoder01
Gulsvi
@gulsvi
Apr 07 2017 16:01
lol, I haven't played it. I like Civilization series though, would probably like AOE too
Mohamed Derhalli
@derhallim
Apr 07 2017 16:01
yea pretty much the same
h1tag
@h1tag
Apr 07 2017 16:01
it's like reading the documentation @SkyCoder01 and I know u love this stuff
Gulsvi
@gulsvi
Apr 07 2017 16:01
I do need more practice in Closures :) @fortMaximus
Mohamed Derhalli
@derhallim
Apr 07 2017 16:01
ydnjs books are 100% awesome
Gulsvi
@gulsvi
Apr 07 2017 16:02
Okay, okay! I'll read it. I promise :p
elad ben aderet
@eladonline
Apr 07 2017 16:02
hey guys im trying to set default arg to a function if no arg has entered like setInterval(function(t){},500 or t )
h1tag
@h1tag
Apr 07 2017 16:02
@SkyCoder01 about oaeproject, you can visit their website http://oaeproject.org/
Mohamed Derhalli
@derhallim
Apr 07 2017 16:02
@eladonline u can do t || 500
elad ben aderet
@eladonline
Apr 07 2017 16:03
thanks man
Mohamed Derhalli
@derhallim
Apr 07 2017 16:03
or i guess: t= 500, this way if u don't provide value, it's 500
so u've got 2 ways
h1tag
@h1tag
Apr 07 2017 16:05
@SkyCoder01 every chapter in YDKJS is like one page
Gulsvi
@gulsvi
Apr 07 2017 16:05
Big font? :)
lol
Mohamed Derhalli
@derhallim
Apr 07 2017 16:05
one page with links to other books :'(
(kidding)
badalsaibo
@heyDante
Apr 07 2017 16:06
@fortMaximus You reading the paperback or online?
h1tag
@h1tag
Apr 07 2017 16:06
online
ofc :smile:
free
Mohamed Derhalli
@derhallim
Apr 07 2017 16:07
who has pluralsight
?
h1tag
@h1tag
Apr 07 2017 16:16
@SkyCoder01 about design: after learning about fonts, I never knew that much work and thought goes into them, they like have a science of their own
Gulsvi
@gulsvi
Apr 07 2017 16:18
@fortMaximus I've heard it can get really complicated to develop fonts - especially considering all the different character sets for different languages
h1tag
@h1tag
Apr 07 2017 16:18
even years
takes*
James Barrett
@jamesbarrett95
Apr 07 2017 16:20
Hi guys, quick question:
Why does the first if statement run when a lowercase argument is passed through?
function myReplace(str, before, after) {

  let newWordAfter;

  if (before.charAt(0).toUpperCase) {
    console.log("for some reason, is uppercase");
    newWordAfter = after.charAt(0).toUpperCase() + after.slice(1);
  } else {
    newWordAfter = after;
  }

    const stringSplit = str.split(" ");
    for (var i = 0; i < stringSplit.length; i++) {
        if (stringSplit[i] === before) {
              stringSplit[i] = newWordAfter;
        }
    }
    const newString = stringSplit.join(" ");
    console.log(newString);
}

myReplace("Let us go to the store", "us", "him");
(The first if statement, that is)
Moisés Man
@moigithub
Apr 07 2017 16:22
toUpperCase is a method soo need () at the end
but that method dont return true or false.. it return the uppercase version of a char
Gulsvi
@gulsvi
Apr 07 2017 16:22
@jamesbarrett95 I think you want to compare against the upper case version of that letter:
  if (before.charAt(0) === before.charAt(0).toUpperCase()) {
Thanks @moigithub :)
CamperBot
@camperbot
Apr 07 2017 16:23
skycoder01 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3015 | @moigithub |http://www.freecodecamp.com/moigithub
h1tag
@h1tag
Apr 07 2017 16:23
:warning: :p
Gulsvi
@gulsvi
Apr 07 2017 16:23
lol
IDKJS
Jakub Wojtyra
@frozenfroggie
Apr 07 2017 16:25
Hello, I have problem with my next projects- Game of life and Duengeon crawler game. I want to build this using react&redux, but codepen its not comfortable in such cases (i mean implementing redux, you know..), rather i want to code in something like c9.io, but probably fcc requires link to project written in codepen?
h1tag
@h1tag
Apr 07 2017 16:25
no
Gulsvi
@gulsvi
Apr 07 2017 16:26

@frozenfroggie According to: https://www.freecodecamp.com/about/

Do I have to use CodePen for the front end projects?
As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

James Barrett
@jamesbarrett95
Apr 07 2017 16:26
I thought the missing parenthesis was the cause of my problem, however it's not!
h1tag
@h1tag
Apr 07 2017 16:26
but that method dont return true or false.. it return the uppercase version of a char
James Barrett
@jamesbarrett95
Apr 07 2017 16:26
I've just added them and the if block is still running...
h1tag
@h1tag
Apr 07 2017 16:27
there are specific falsy values in JS
SADickson
@SADickson
Apr 07 2017 16:27
<h1 class="text-center">Sidney Crosby</h1> any idea why my text isn
Gulsvi
@gulsvi
Apr 07 2017 16:27
It's because .toUpperCase() doesn't return true/false - you need to compare the letter against the upper case version
SADickson
@SADickson
Apr 07 2017 16:27
isnt centering
Gulsvi
@gulsvi
Apr 07 2017 16:28
@SADickson Is bootstrap added to your project?
Gulsvi
@gulsvi
Apr 07 2017 16:28
If it is, share your codepen project if you can and we can take a closer look
SADickson
@SADickson
Apr 07 2017 16:28
Let me take a look. give me a sec
Gulsvi
@gulsvi
Apr 07 2017 16:29
Okay :clock1: :clock10:
:)
Missing quite a bit, was just styling and organizing it now
Gulsvi
@gulsvi
Apr 07 2017 16:29
@SADickson Click the "Settings" button, click "CSS", and then go to the "Quick-Add" menu and add Bootstrap
Jakub Wojtyra
@frozenfroggie
Apr 07 2017 16:29
So its totally fine to write frontend in c9.io?
Gulsvi
@gulsvi
Apr 07 2017 16:30
@frozenfroggie Yes, totally fine. You could even do it on your own server.
SADickson
@SADickson
Apr 07 2017 16:30
Ah there we go! Thanks @SkyCoder01
CamperBot
@camperbot
Apr 07 2017 16:30
sadickson sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 915 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 16:30
At least, that's what the text means to me - publicly viewable code and a live demo
Jakub Wojtyra
@frozenfroggie
Apr 07 2017 16:30
thanks @SkyCoder01
CamperBot
@camperbot
Apr 07 2017 16:30
frozenfroggie sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 916 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 16:31
No problem!
@SADickson Just to prevent any headaches, that is Bootstrap 4, a newer version. Most bootstrap documentation you'll find on google is for Bootstrap 3. Here are the bootstrap 4 docs: https://v4-alpha.getbootstrap.com
James Barrett
@jamesbarrett95
Apr 07 2017 16:38
@SkyCoder01 thanks mate, fixed!
CamperBot
@camperbot
Apr 07 2017 16:38
jamesbarrett95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 917 | @skycoder01 |http://www.freecodecamp.com/skycoder01
James Barrett
@jamesbarrett95
Apr 07 2017 16:38
However, FCC is not passing my code...?
Final code snippet:
/* jshint esversion: 6 */
function myReplace(str, before, after) {

  let newWordAfter;

  if (before.charAt(0) == before.charAt(0).toUpperCase()) {
    newWordAfter = after.charAt(0).toUpperCase() + after.slice(1);
  } else {
    newWordAfter = after;
  }

    const stringSplit = str.split(" ");
    for (var i = 0; i < stringSplit.length; i++) {
        if (stringSplit[i] === before) {
              stringSplit[i] = newWordAfter;
        }
    }
    const newString = stringSplit.join(" ");
    console.log(newString);
}

myReplace("Let us go to the store", "go", "blah");
This is for the ```
Search and Replace
challenge
Spam alert, my bad there haha
Gulsvi
@gulsvi
Apr 07 2017 16:42
@jamesbarrett95 Replace your last line console.log(newString) with return newString
h1tag
@h1tag
Apr 07 2017 16:45
@SkyCoder01 also, I didn't stop freecodecamp, I'm also workin on and off on the last frontend projects
Gulsvi
@gulsvi
Apr 07 2017 17:08
Good to know!
h1tag
@h1tag
Apr 07 2017 17:12
no campers to help :cry: (room z quiet)
alpox
@alpox
Apr 07 2017 17:14
Quack, quack, quack
ducking around
h1tag
@h1tag
Apr 07 2017 17:14
Haha
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:21
guys please check my random quote generator...I need help....the json api is not generating a new code...what's wrong???
it's not generating new quote
h1tag
@h1tag
Apr 07 2017 17:23
@Soumyoahona200 check the browser console
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:24
in the console the same quote is displaying
h1tag
@h1tag
Apr 07 2017 17:25
I'm seeing this error in the console: Blocked loading mixed active content “http://code.jquery.com/jquery-2.2.4.min.js”[Learn More]
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:26
It's may be because of your browser allow control allow origins is off
h1tag
@h1tag
Apr 07 2017 17:27
mixed content is different from cross origin
and cross origin comes from the api not from the browser
it's because you have this http://quotesondesign.com/api/3.0/api-3.0.json and this https://twitter.com/intent/tweet?text=
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:36
@fortMaximus So how to fix it??
Will Foster
@Will5592
Apr 07 2017 17:37
Anyone able to reccomend a decent random quote api?
Forismatic is the one I tried, but the website doesn't load, just says bad gateway
Gulsvi
@gulsvi
Apr 07 2017 17:37
@Will5592 Lots of people use this one - it has some great code samples to help you get familiar with calling APIs with $.ajax or $.getJSON: https://quotesondesign.com/api-v4-0/
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:38
@SkyCoder01 but it's not giving a new quote
Gulsvi
@gulsvi
Apr 07 2017 17:38
@Soumyoahona200 Try v4.0 of that Quote API instead. The Ajax call you have seems to be for a different API. There are code samples here: https://quotesondesign.com/api-v4-0/
h1tag
@h1tag
Apr 07 2017 17:38
@Soumyoahona200 you have to change all the urls in your code to https or all to http
and I don't think this the right URL for quotesondesign api, use this one: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback= in your ajax()
Gulsvi
@gulsvi
Apr 07 2017 17:40
@Soumyoahona200 The quote API gives a new quote every time if you figure out how to prevent cache in your API call.
Will Foster
@Will5592
Apr 07 2017 17:40
@SkyCoder01 Thanks, I did actually check that one out from my google search, but read something similar to you about some funny issues with the coding. I'll follow the instructions and see where I get. Thanks!
CamperBot
@camperbot
Apr 07 2017 17:40
will5592 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 919 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 17:40
Feel free to ask here for help if needed :)
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:42
@SkyCoder01 @fortMaximus I made the changes as suggested ...now it gives this result http://codepen.io/Soumyoahu100/full/EWXQGY/
Gulsvi
@gulsvi
Apr 07 2017 17:43
@Soumyoahona200 You have not made the changes suggested. Please read the documentation and try the code samples mentioned here: https://quotesondesign.com/api-v4-0/
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:43
the quote is appearing in <p> format in page
Gulsvi
@gulsvi
Apr 07 2017 17:44
It will show you how to get it displayed on your page :)
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:44
@SkyCoder01 I'm trying it fro last 3 hours....It's not that helpful :(
*from
Gulsvi
@gulsvi
Apr 07 2017 17:44
@Soumyoahona200 Where did you get this code?
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp',
        cache: false,
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:45
made it
is it wrong? :worried:
Gulsvi
@gulsvi
Apr 07 2017 17:45
Where is your getQuote method in your code?
h1tag
@h1tag
Apr 07 2017 17:46
@Soumyoahona200 make sure you load the pen over http too
in the address bar
Screensho.png
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:47
@SkyCoder01 that was a mistake ...it has to be getNewQuote....but still it is not helping
Gulsvi
@gulsvi
Apr 07 2017 17:48
@Soumyoahona200 Yeah, I know :)
It's for a different Quote API
Correct code, but wrong api
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:48
so,removing the data part will fix this?
Gulsvi
@gulsvi
Apr 07 2017 17:48
Were you trying to use Forismatic before, maybe?
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:49
yes I was trying forismatic
but didn't worked
h1tag
@h1tag
Apr 07 2017 17:50
i saw someone say half an hour ago its down
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:50
@fortMaximus yes.It's showing some error :worried:
h1tag
@h1tag
Apr 07 2017 17:52
@Soumyoahona200 did change the url in the address bar to http too?
did u*
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 17:56
@fortMaximus yes..but no progress
@SkyCoder01 I changed the code according to the documentation....but stilll something is keeping it on hold..:(
h1tag
@h1tag
Apr 07 2017 17:57
@Soumyoahona200 here's the working one: http://codepen.io/FortMax/pen/BWgWXp
Pagnito
@Pagnito
Apr 07 2017 17:57
having trouble. im tryin to use $.each to iterate over a some elements and addClass, but for some reason it adds it over and over till the index reaches its length
Gulsvi
@gulsvi
Apr 07 2017 17:58
@Soumyoahona200 I'd recommend simplifying your getNewQuote() function:
  function getNewQuote() {
    $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      cache: false,
      success: function(response) {
        $('#quote').html(response[0].content);
        $('#author').html(response[0].title)
      }
    });
  }
h1tag
@h1tag
Apr 07 2017 17:58
I also changed &callback to &jsonp to generate more than one quote @Soumyoahona200
Pagnito
@Pagnito
Apr 07 2017 17:58
look at the developer tools, i consoled the elements, and u can see each one has the class added 7 times instead of once
h1tag
@h1tag
Apr 07 2017 17:59
@Soumyoahona200 it works without &_jsonp but it keeps generating the same quote, so that's why I changed it to &_jsonp
Gulsvi
@gulsvi
Apr 07 2017 18:02
@Pagnito You have seven elements with the class .g, so $.each will loop through each one of those
h1tag
@h1tag
Apr 07 2017 18:03
@SkyCoder01 did you build a random quote app using quotesondesign?
Gulsvi
@gulsvi
Apr 07 2017 18:03
@fortMaximus Yes
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 18:03
Gulsvi
@gulsvi
Apr 07 2017 18:03
And wikiquote and reddit :p
h1tag
@h1tag
Apr 07 2017 18:03
@Soumyoahona200 :clap:
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 18:03
randome quotes are generating thanks @fortMaximus
CamperBot
@camperbot
Apr 07 2017 18:03
soumyoahona200 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 718 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Gulsvi
@gulsvi
Apr 07 2017 18:03
The code sample I put above is the simplest approach to getting a new quote from quotes on design with ajax
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 18:04
but how to hide that <p>
??
h1tag
@h1tag
Apr 07 2017 18:04
@SkyCoder01 did you face a problem where the api keeps generating the same quote?
Pagnito
@Pagnito
Apr 07 2017 18:05
@SkyCoder01 true true thanks
CamperBot
@camperbot
Apr 07 2017 18:05
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 920 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 18:05
@fortMaximus Yeah, that's why I put cache: false in the example above. If you use $.getJSON, you add $.now() to the end of the url to add a random timestamp and prevent caching
Well, not a random timestamp, lol, but anyway...
h1tag
@h1tag
Apr 07 2017 18:06
@SkyCoder01 why it works if you add &_jsonp instead of &callback= :smile: ?
Gulsvi
@gulsvi
Apr 07 2017 18:06
@fortMaximus I've never seen that before :p &callback= is only meant for getJSON, not ajax
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 18:06
@SkyCoder01 How to fix this unwanted <p> tags???
Gulsvi
@gulsvi
Apr 07 2017 18:06
@Soumyoahona200 use .html() instead of .text()
@Soumyoahona200 I show you in :point_up: my code sample above.
h1tag
@h1tag
Apr 07 2017 18:07
@SkyCoder01 I used &_jsonp with getJSON too
to make it generate more than one
Gulsvi
@gulsvi
Apr 07 2017 18:08
@fortMaximus I've never see &_jsonp - it probably adds a random number to the url
Soumyojyoti Majumdar
@SoumyoNawab8
Apr 07 2017 18:08
@SkyCoder01 thanks a million
CamperBot
@camperbot
Apr 07 2017 18:08
soumyoahona200 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 921 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
Apr 07 2017 18:08
how do I add this $.now() at the of the url? :worried:
That's where I played around with that API
h1tag
@h1tag
Apr 07 2017 18:09
I see
Gulsvi
@gulsvi
Apr 07 2017 18:09
const url = `http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=${$.now()}`;
h1tag
@h1tag
Apr 07 2017 18:09
where did you get $.now() from, never seen it before
Gulsvi
@gulsvi
Apr 07 2017 18:09
From the jQuery docs: http://api.jquery.com/jquery.now/
h1tag
@h1tag
Apr 07 2017 18:10
and why it works? :smile:
what does it hav to do with the cache?
Gulsvi
@gulsvi
Apr 07 2017 18:10
It adds a timestamp to the URL, so the browser and server thinks it is a different URL every time you make the API call
h1tag
@h1tag
Apr 07 2017 18:10
I see, I see
Gulsvi
@gulsvi
Apr 07 2017 18:10
Same URL = pull it from cache
works with images too - add ?sig=${$.now()}
h1tag
@h1tag
Apr 07 2017 18:11
images?
Gulsvi
@gulsvi
Apr 07 2017 18:11
Yeah, let's say you use a random image API, like: http://source.unsplash.com/category/nature/1600x900
h1tag
@h1tag
Apr 07 2017 18:12
I see
Gulsvi
@gulsvi
Apr 07 2017 18:12
If you want a different random image every time - or a bunch of different random ones, add ?sig="some random number"
h1tag
@h1tag
Apr 07 2017 18:12
@SkyCoder01 Thanks for the good explanaaation and for all of this
CamperBot
@camperbot
Apr 07 2017 18:12
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 07 2017 18:12
:+1: :)
h1tag
@h1tag
Apr 07 2017 18:13
but why do u have to do this manually :cry:
Gulsvi
@gulsvi
Apr 07 2017 18:13
Cache is a good thing I guess :) cuts down on page load time, but it can be evil during development
Or for random quote machines haah
h1tag
@h1tag
Apr 07 2017 18:13
haha
alpox
@alpox
Apr 07 2017 18:15
Hmm today i had to see again that one can write code all day long - 2k loc and still not implement new features :-/
h1tag
@h1tag
Apr 07 2017 18:18
haha
the coder life
Gulsvi
@gulsvi
Apr 07 2017 18:20
Implementing new features is what weekends are for! :p
h1tag
@h1tag
Apr 07 2017 18:21
sky go to bed
Gulsvi
@gulsvi
Apr 07 2017 18:22
Too much coffee... die nacht ist jung!
alpox
@alpox
Apr 07 2017 18:22
Aber nicht zu jung
Es ist doch erst 8 uhr! :D
Gulsvi
@gulsvi
Apr 07 2017 18:22
That's the only german I know lol
That and Zwei Bier bitte
alpox
@alpox
Apr 07 2017 18:23
Damn and i already thought you might be somewhere from germany :D
James McCallum
@jamesrmccallum
Apr 07 2017 18:23
Hi all - can anyone help me with a flexbox?
I'm having trouble getting a column to layout just as i want it
Can anyone help me with my spacing between pictures, paragraphs, and lists?
Gulsvi
@gulsvi
Apr 07 2017 18:41
@SADickson Use margin-top and margin-bottom in your CSS, just like you did to make space between the top of your page and your jumbotron
SADickson
@SADickson
Apr 07 2017 18:42
@SkyCoder01 Do I need to create selectors for elements
Gulsvi
@gulsvi
Apr 07 2017 18:43
@SADickson Yes, it's a good idea to define classes and use them to style your elements
Jorge
@OrangeKulture
Apr 07 2017 18:44
@SADickson GOO Pens!
SADickson
@SADickson
Apr 07 2017 18:46
@SkyCoder01 think I need to add anything else to make it a bit easier to read? https://codepen.io/SADickson/pen/mWgYqq
@OrangeKulture I'm a leafs fan ;) but had to make page about something I kenw
knew*
@OrangeKulture figured it would be a tad easier than making one about Matthews
Gulsvi
@gulsvi
Apr 07 2017 18:47
@SADickson Check it out on a smaller screen (make your browser window smaller). There are some changes you'll need to make so it looks good on smaller screens.
SADickson
@SADickson
Apr 07 2017 18:48
@SkyCoder01 should I open it on my mobile?
Gulsvi
@gulsvi
Apr 07 2017 18:48
For example: width="1000" is a bad practice because your picture will never get small enough for screens smaller than 1000px
It isn't necessary to open it on your mobile, you can simulate it by making your browser smaller for this purpose.
Jorge
@OrangeKulture
Apr 07 2017 18:49
@SADickson haha yeah for sure ... the leafs are a nice team, they just can't catch a break
Gulsvi
@gulsvi
Apr 07 2017 18:49
When you start using JavaScript and special CSS effects, then you'll definitely want to test it out on other browsers like mobile safari/chrome
SADickson
@SADickson
Apr 07 2017 18:49
I'm on chrome right now
what do you think I should edit
Ah okay I see it's quite bad on my iPhone
Gulsvi
@gulsvi
Apr 07 2017 18:52
@SADickson Make the image responsive and changed col-xs-12 to col-12 for starters.
SADickson
@SADickson
Apr 07 2017 18:54
Alright I'll take a look, thanks
SADickson
@SADickson
Apr 07 2017 19:09
Tom
@moT01
Apr 07 2017 19:11
@SADickson i wanna say awful and talk some trash about crosby, ...but i can't deny his abilities
ComfortCodes
@ComfortCodes
Apr 07 2017 19:13
I've completed the Build Tribute page challenge but cannot move on even after attaching my pen. https://codepen.io/comfortcodes/EWBgJO
Tom
@moT01
Apr 07 2017 19:13
@SADickson looks good, i would be done with it
@ComfortCodes you should be able to jump to any challenge you want without attaching anything
SADickson
@SADickson
Apr 07 2017 19:15
@moT01 Yeah I'm a Leafs fan.. But couldnt think of much to make a tribute page about
@ComfortCodes Did you check mark all of those boxes?
If not do so then try again
Because I just did that and it went fine
better question, what in the world can I put on my portfolio if I have nothing to put on there
Nick Danvers
@Ravenor222
Apr 07 2017 19:18
Hey guys, wondering if anyone might be able to take a look at my copepen quickly...
SADickson
@SADickson
Apr 07 2017 19:18
Sure
Nick Danvers
@Ravenor222
Apr 07 2017 19:18
im trying to make a CSS banner have a absolute color so I cant see things behind it, when I scroll up my image goes over my banner and looks weird!
if you scroll down you see it, im just wondering how I can change that
SADickson
@SADickson
Apr 07 2017 19:19
Ah yes I see what you mean
Do you want your image to be underneath the banner then
so when you scroll the banner stays overtop?
Nick Danvers
@Ravenor222
Apr 07 2017 19:20
Yea id like the banner to be always at the top, and not be able to see something go behind it like the image
its not a big deal for the writing to go under but the image itself is white as hell so it looks funny =P
SADickson
@SADickson
Apr 07 2017 19:20
Yeah I know what you mean, and I know how to fix it give me two seconds
Nick Danvers
@Ravenor222
Apr 07 2017 19:20
thank you !
SADickson
@SADickson
Apr 07 2017 19:21
So you're going to want to change your banners z-index
try setting the banner z-index to 1000
Nick Danvers
@Ravenor222
Apr 07 2017 19:21
oh okay that works
is it based on one being the most important? or the other way around
SADickson
@SADickson
Apr 07 2017 19:22
I think the higher the z index the closer it is to the top layer
not 100% sure but I think that is how it works
Gulsvi
@gulsvi
Apr 07 2017 19:22
Yeah, each z-index is like a 3D layer
Nick Danvers
@Ravenor222
Apr 07 2017 19:22
thanks a bunch, that works for me
Tom
@moT01
Apr 07 2017 19:22
sounds about right
SADickson
@SADickson
Apr 07 2017 19:23
Yeah no problem at all
Ali Ahmad
@aliahmad-code
Apr 07 2017 19:34
@jasonetaylor Thanks! Definitely helped
CamperBot
@camperbot
Apr 07 2017 19:34
aliahmad-code sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 181 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
Dalton Escoe
@Alenero129
Apr 07 2017 19:48
Hello
Darshan
@Dave1089
Apr 07 2017 19:48
Hello
Dalton Escoe
@Alenero129
Apr 07 2017 19:49
Anyone know how to style a footer so that it stays at the bottom of the page and doesn't overlap other texts?
Darshan
@Dave1089
Apr 07 2017 19:50
@Alenero129 Sticky Footer
Gulsvi
@gulsvi
Apr 07 2017 19:52

@Alenero129 Another option is to have your HTML set up like:

<main>
  your website content
</main>
<footer>
  your footer content
</footer>

And then use this CSS:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
Dalton Escoe
@Alenero129
Apr 07 2017 20:00
I'm not getting it to work
This is the issue I'm currently having.
It's at the bottom but it doesn't scroll with the page.
Gulsvi
@gulsvi
Apr 07 2017 20:03
@Alenero129 Do you want it at the bottom of your page or the screen?
Tom
@moT01
Apr 07 2017 20:03
@Alenero129 if you want it to stay at the bottom of the screen, i would use some css fixed positioning, ...if you want it at the bottom of the page(after all the content), put it at the bottom of the html
Gulsvi
@gulsvi
Apr 07 2017 20:04
Both options above are for making sure it is at the bottom of the page, not fixed to the bottom of your screen
Mychal Simka
@msimka
Apr 07 2017 20:05
Done with all the Front End challenges woot woot
Tom
@moT01
Apr 07 2017 20:05
fixed will put it at the bottom of the screen
Dalton Escoe
@Alenero129
Apr 07 2017 20:05
lol @msimka
Mychal Simka
@msimka
Apr 07 2017 20:05
Not the codepen ones though. Thems annoying..
Dalton Escoe
@Alenero129
Apr 07 2017 20:05
Alright, thanks. I'll revisit it
Oh snap. All I needed to do was change the positioning from absolute to fixed
Mychal Simka
@msimka
Apr 07 2017 20:07
I don't know why they use codepen instead of building the webpages like you have to in the real world by connecting files etc.
Tom
@moT01
Apr 07 2017 20:07
@Alenero129 need to add some blank space at the bottom, it covers something up
Dalton Escoe
@Alenero129
Apr 07 2017 20:08
Thanks guys.
Mychal Simka
@msimka
Apr 07 2017 20:09
After finishing the Front End challenges, I'm realizing the javascript coverage is pretty thorough and helpful. I don't feel like I learned anything about how to really get CSS and HTML to do whatever I want.
Dalton Escoe
@Alenero129
Apr 07 2017 20:09
I padded the last div bottom to the same height as the footer @moT01
SADickson
@SADickson
Apr 07 2017 20:09
@msimka Maybe go back and repeat some challenges
Tom
@moT01
Apr 07 2017 20:09
there ya go, click name when saying thanks
Dalton Escoe
@Alenero129
Apr 07 2017 20:10
I don't really like codepen so I write the code in Sublime and then copy it to codepen. Just what I feel more comfortable with.
Thanks goes to @moT01 @SkyCoder01 @Dave1089
CamperBot
@camperbot
Apr 07 2017 20:11
alenero129 sends brownie points to @mot01 and @skycoder01 and @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 967 | @dave1089 |http://www.freecodecamp.com/dave1089
:cookie: 621 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 924 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Mychal Simka
@msimka
Apr 07 2017 20:13
@SADickson The CSS and HTML challenges are insufficient. There should be more complex stuff with linking, and objects like button and especially flexbox. That's the basics of CSS and HTML now. WOndering if there's another course out there which does that
Tom
@moT01
Apr 07 2017 20:13
@Alenero129 i think the editors are also helpful for figuring things out, ...they bring up options when you start typing and you know things are there that you didn't know existed
assuming they all do that
Mychal Simka
@msimka
Apr 07 2017 20:14
@moT01 which editors
Tom
@moT01
Apr 07 2017 20:14
@msimka there's some more in depth stuff like that coming here soon i think
Gulsvi
@gulsvi
Apr 07 2017 20:14
@msimka The course is over 2yrs old. They're working on an update which should be out soon: http://beta.freecodecamp.com/
Tom
@moT01
Apr 07 2017 20:15
beta.freecodecamp.com/
Dalton Escoe
@Alenero129
Apr 07 2017 20:15
@moT01 Yeah. They really help sometimes.
Tom
@moT01
Apr 07 2017 20:15
the code editors, atom, sublime
Dalton Escoe
@Alenero129
Apr 07 2017 20:15
More challenges for more practice would be great.
Tom
@moT01
Apr 07 2017 20:15
brackets
i would recommend one
Mychal Simka
@msimka
Apr 07 2017 20:16
@moT01 Those are all kinda like training wheels though. They get in the way once you understand it enough to need precision configurations
@moT01 emacs is the only choice longterm IMO
Tom
@moT01
Apr 07 2017 20:17
ouch
i guess i can't code without my training wheels yet
Gulsvi
@gulsvi
Apr 07 2017 20:17
As soon as you have an "only choice" humanity has failed
Mychal Simka
@msimka
Apr 07 2017 20:17
@moT01 Me neither, don't feel bad :)
Dalton Escoe
@Alenero129
Apr 07 2017 20:18
I think they're okay for learning as long as it's not dreamweaver drag and dropping.
Gulsvi
@gulsvi
Apr 07 2017 20:18
VS Code is the trend at the moment
Mychal Simka
@msimka
Apr 07 2017 20:18
Trying to slowly lose the training wheels though
@SkyCoder01 It seems like Atom and particularly Nuclide is the trend
Gulsvi
@gulsvi
Apr 07 2017 20:20
Back in 2016, yes
Not sure about Nuclide tho, haven't heard of that
Mychal Simka
@msimka
Apr 07 2017 20:20
@SkyCoder01 Nuclide = facebook's extension of Atom
Gulsvi
@gulsvi
Apr 07 2017 20:20
Ahhh
Mychal Simka
@msimka
Apr 07 2017 20:21
Used by Airbnb and most mobile first devs
At least from my experience
Tom
@moT01
Apr 07 2017 20:23
notepad
the original
Dalton Escoe
@Alenero129
Apr 07 2017 20:23
Back to basics
Mychal Simka
@msimka
Apr 07 2017 20:23
Is mobile first approach the only real option now? Are desktop-only apps even viable anymore, considering the growing capabilities of tablets to the point where the lines will be blurred completely in the near future?
Darshan
@Dave1089
Apr 07 2017 20:23
I'd prefer NP++ still
Gulsvi
@gulsvi
Apr 07 2017 20:24
mobile-first is an old concept... it's about content first now.
Dalton Escoe
@Alenero129
Apr 07 2017 20:24
How much do you guys depend on bootstrap classes?
Gulsvi
@gulsvi
Apr 07 2017 20:24
depends on what you're presenting, not what you're presenting on
Mychal Simka
@msimka
Apr 07 2017 20:24
@SkyCoder01 mobile-first and content-first is not an xor choice
You can do both
Gulsvi
@gulsvi
Apr 07 2017 20:26
By focusing on the content, and presenting that correctly regardless of screen size, there is no need to make a choice :)
Mychal Simka
@msimka
Apr 07 2017 20:27
@SkyCoder01 Well there are a few things you need to change, but it's not a big deal: touchscreen, flex values, scroll and swipe differences etc.
zacharey
@zacharey
Apr 07 2017 20:35
@SkyCoder01 I am baaaaccckkk
Gulsvi
@gulsvi
Apr 07 2017 20:37
lol, hey @zacharey
zacharey
@zacharey
Apr 07 2017 20:37

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <link href=“css/style.cssrel=“stylesheet”>
    </head>

    <body>