These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Jan 2017
Robin
@LuckyRabbits
Jan 17 2017 00:01
 .smaller-image {
    width: 100px;
  }

  .img-responsive


  }
</style>

<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " class="img-responsive"src="https://bit.ly/fcc-running-cats"></a>
Could someone take a quick peek at my code^
img-responsive class isn't working as expected
ack let me markdown again
some of the code is missing

.smaller-image {
width: 100px;
}

.img-responsive

}
</style>

<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " class="img-responsive"src="https://bit.ly/fcc-running-cats"></a>

Coy Sanders
@coymeetsworld
Jan 17 2017 00:05
@LuckyRabbits which challenge is that @LuckyRabbits ? Also you only want to specify the class attribute one time in a tag
img-responsive if i'm not mistaken comes from bootstrap, you don't actually declare the class in your style so you should remove that too
Robin
@LuckyRabbits
Jan 17 2017 00:06
That is challenge 71 "Make images Mobile Responsive"
Emmanuel
@chriemma
Jan 17 2017 00:07

@Here somebody tell what is wrong < style>

button {

font-size:24px;
}

pinkButton {

background-color:pink;
}

orangeButton {

background-color:orange;
}

Coy Sanders
@coymeetsworld
Jan 17 2017 00:07
@LuckyRabbits so you want to create a new image, not add img-responsive to the img you already have
so there should be 2 images, put the 2nd one you're going to create right below the first
Robin
@LuckyRabbits
Jan 17 2017 00:08
@coymeetsworld Thank you for the clarification. Let me try.
CamperBot
@camperbot
Jan 17 2017 00:08
luckyrabbits sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1828 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 17 2017 00:09
sure thing, also remove your class definition of img-responsive too, that class is given to you with BootStrap which is imported into the app now (FCC doesn't show you that step I'm guessing for brevity)
aRtoo
@artoodeeto
Jan 17 2017 00:13
hi guys. i have a button which allows the user to toggle (show or hide) a class with text. but i realize instead of using a 2 buttons i want to use 1. do i have to put if else statement to change the state of a button? or jquery has a special class for that?? http://codepen.io/artoo/pen/MJjgqW
JasonLadieu
@JasonLadieu
Jan 17 2017 00:17
Hi everyone, I made a simple tribute page. Any feedback would be great! http://codepen.io/JasonLadieu/pen/dOrddQ
Robin
@LuckyRabbits
Jan 17 2017 00:18

@coymeetsworld like this?

<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border img-responsive" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-running-cats"> </a>

Coy Sanders
@coymeetsworld
Jan 17 2017 00:19
@LuckyRabbits you want to create a different img all together @LuckyRabbits
and on this one yes you merged the classes so functionally thats ok, but you have 2 sources which you don't want.
Robin
@LuckyRabbits
Jan 17 2017 00:19
between <a></a> tags?
Coy Sanders
@coymeetsworld
Jan 17 2017 00:19
no outside
you should have 2 images, each with their own classes and src
Robin
@LuckyRabbits
Jan 17 2017 00:19
k
Coy Sanders
@coymeetsworld
Jan 17 2017 00:20
if you look at the test cases it'll say that you need 2
aRtoo
@artoodeeto
Jan 17 2017 00:25
hi sir. i have a button which allows the user to toggle (show or hide) a class with text. but i realize instead of using a 2 buttons i want to use 1. do i have to put if else statement to change the state of a button? or jquery has a special class for that?? http://codepen.io/artoo/pen/MJjgqW
Tyler Moeller
@TylerMoeller
Jan 17 2017 00:27
@artoodeeto You're looking for the .toggleClass() method - one button click will either add/remove a class depending on its current state. You can't .animate().toggleClass(), but you can add transition effects in your CSS.
aRtoo
@artoodeeto
Jan 17 2017 00:28
@TylerMoeller finally. thank you sir. im gonna try it i hope i can get it
CamperBot
@camperbot
Jan 17 2017 00:28
artoodeeto sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1324 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
aRtoo
@artoodeeto
Jan 17 2017 00:28
thanks
Chiu Yong
@chiuyong
Jan 17 2017 00:30
Is there anyone to help me with a doubt?
Robin
@LuckyRabbits
Jan 17 2017 00:30
@coymeetsworld I figured it out. I needed to use the < img > tag and within that tag use src="add the image url "and set a Bootstrap class="img-responsive"
woot woot! 🌈
Coy Sanders
@coymeetsworld
Jan 17 2017 00:31
yep good job @LuckyRabbits, you didn't define img-responsive in the style tags yourself though right?
Robin
@LuckyRabbits
Jan 17 2017 00:32
Correct.
It wasn't necessary.
💥
Coy Sanders
@coymeetsworld
Jan 17 2017 00:33
ok good :)
Tomas
@TOMEJUS
Jan 17 2017 00:35
Hey everyone!
Robin
@LuckyRabbits
Jan 17 2017 00:35
🖐🏼 @TOMEJUS
Alexander Huynh
@caesarsalad93
Jan 17 2017 00:41
Wowwww, my mind is blown. Can someone confirm this for me? I set a variable equal to an object. If I update the properties on that variable, it also updates the properties on the original object?
Coy Sanders
@coymeetsworld
Jan 17 2017 00:45
yes @caesarsalad93, it doesn't make a copy, objects are passed by reference
there are ways to make copies but that isn't the way it works with variable assignment
Alexander Huynh
@caesarsalad93
Jan 17 2017 00:46
This threw me off because if I do
var x = 8;
var y  = x;
y = 10;
x will 8 still yeah?
x will equal 8*
willstanleyus
@willstanleyus
Jan 17 2017 00:47
Weather APP question
Coy Sanders
@coymeetsworld
Jan 17 2017 00:50
x should still equal 8, 8 isn't an object
Alexander Huynh
@caesarsalad93
Jan 17 2017 00:51
Ohhhhhhhh okay I see. So this is where it is important to understand primitive values vs objects
Coy Sanders
@coymeetsworld
Jan 17 2017 00:51
yep :)
Tyler Moeller
@TylerMoeller
Jan 17 2017 00:51
@willstanleyus Don't ask to ask, just ask :)
Alexander Huynh
@caesarsalad93
Jan 17 2017 00:51
@coymeetsworld thanks!
CamperBot
@camperbot
Jan 17 2017 00:51
caesarsalad93 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1831 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 17 2017 00:52
no problem
jfrancis2
@jfrancis2
Jan 17 2017 00:53
If I have an image, then a button, within a <div class="col-sm-3">, how do I get a space between them? Is it just a case of using a <br /> tag?
Coy Sanders
@coymeetsworld
Jan 17 2017 00:54
you shouldn't use br tags as they are deprecated @jfrancis2,
jfrancis2
@jfrancis2
Jan 17 2017 00:54
That's what I thought. What's the alternative?
Coy Sanders
@coymeetsworld
Jan 17 2017 00:54
CSS
jfrancis2
@jfrancis2
Jan 17 2017 00:54
Hmm i'll investigate. Thanks
Coy Sanders
@coymeetsworld
Jan 17 2017 00:54
if you want to change how something looks or where its positioned CSS is almost always the answer
Tyler Moeller
@TylerMoeller
Jan 17 2017 00:58
@jfrancis2 One option is to put your button in a <div>
A div is a block element, which creates a new line. <img> and <button> are inline elements which do not: http://www.w3schools.com/html/html_blocks.asp
Islam Ibakaev
@dagman
Jan 17 2017 01:00
you guys how do you handle this issue?
Handling of 'touchstart' input event was delayed for 164 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
Tyrantt47
@Tyrantt47
Jan 17 2017 01:01
hey guys. been trying to research, but cant seem to find the answer, or what its even called, but im trying to figure out how to prevent your page from stretching too far apart. on the example page for the portfolio (https://codepen.io/freeCodeCamp/full/YqLyXB) you can see that once you stretch the page to a certain point, you get a padding/margin on the sides. that way it prevents your page from becoming too disoriented. what is this called so i can figure out how to do it?
JasonLadieu
@JasonLadieu
Jan 17 2017 01:02
@Tyrantt47 CSS max-width
Tyrantt47
@Tyrantt47
Jan 17 2017 01:03
thanks @JasonLadieu
CamperBot
@camperbot
Jan 17 2017 01:03
tyrantt47 sends brownie points to @jasonladieu :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jasonladieu |http://www.freecodecamp.com/jasonladieu
jfrancis2
@jfrancis2
Jan 17 2017 01:03
@TylerMoeller Thanks- I used margin-bottom:5px on the button and it's done the trick
CamperBot
@camperbot
Jan 17 2017 01:03
jfrancis2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1325 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jfrancis2
@jfrancis2
Jan 17 2017 01:03
margin-top even
JasonLadieu
@JasonLadieu
Jan 17 2017 01:03
@Tyrantt47 np!
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:04
@Tyrantt47 They're using bootstrap's .container class - it gives your page a fixed width.
max-width works great too :)
John Nunns
@johnnunns
Jan 17 2017 01:09
does anyone have any clue of where to start if I wanted to change an array of data into the format of an object?
Tyrantt47
@Tyrantt47
Jan 17 2017 01:10
@TylerMoeller I'm currently using the .container class, but its not working the same. is it maybe because i set a col-lg-x?
John Nunns
@johnnunns
Jan 17 2017 01:10
Like changing ['myName', 'John'] into {myName: John}
Tyrantt47
@Tyrantt47
Jan 17 2017 01:11
@TylerMoeller here is what im working on. Im trying to get it where you get the sides to show up once stretched past a certain point. http://codepen.io/Tyrantt47/pen/PWGjXY
actually. you can see it better on my current save: http://codepen.io/Tyrantt47/pen/LxbEBo
it stretches all the way to the sides. i tried the max width, but it kinda messed up my page
Tyrantt47
@Tyrantt47
Jan 17 2017 01:17
fixed it.
JasonLadieu
@JasonLadieu
Jan 17 2017 01:18
@Tyrantt47 You are using it wrong. Try .body {}
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:18
@Tyrantt47 Seems you are using container-fluid not container
JasonLadieu
@JasonLadieu
Jan 17 2017 01:19
@Tyrantt47 .body {max-width: 800px;}
Tomas
@TOMEJUS
Jan 17 2017 01:19
Anyone else had issue with setting textarea width? Can't seem to react to any width I set
willstanleyus
@willstanleyus
Jan 17 2017 01:20
@TylerMoeller: Having trouble with the background changing with the weather conditions. Last objective to complete.
plus, having a challenge with CodePen not updating the without changing views. been in and out all day
Tyrantt47
@Tyrantt47
Jan 17 2017 01:23
@JasonLadieu i saw that and changed it to container. So should i wrap all my code in a body and make that class?
jfrancis2
@jfrancis2
Jan 17 2017 01:27
My portfolio, what do you all think? http://codepen.io/jfrancis2/pen/WRoNKb
Pretty standard bootstrap :)
Tomas
@TOMEJUS
Jan 17 2017 01:28
@jfrancis2 I like it especially the hello page. Keep up the good work and keep us updated with your portfolio!
jfrancis2
@jfrancis2
Jan 17 2017 01:29
Thanks :) Took me a couple of hours. I think it's ok!
Tomas
@TOMEJUS
Jan 17 2017 01:30
No worries
trungkienpvt
@trungkienpvt
Jan 17 2017 01:31
hey guys, i want to learn about reponsite in web, how to start learning about it?
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:32
@trungkienpvt This is a good set of resources: http://bradfrost.github.io/this-is-responsive/resources.html
trungkienpvt
@trungkienpvt
Jan 17 2017 01:33
@TylerMoeller thank you so much
CamperBot
@camperbot
Jan 17 2017 01:33
trungkienpvt sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1326 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
willstanleyus
@willstanleyus
Jan 17 2017 01:34
Can anyone help with Codepen issues. It works one moment and dies the next. Trying to finish the weather app.
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:34
@willstanleyus Share your code
Or a link to your codepen
willstanleyus
@willstanleyus
Jan 17 2017 01:37

@TylerMoeller var API_Key = "7bd138ff02b9b9bd18a3067392f2c3ab";
var cel = false;
var wd;

function displayTemp(fTemp, c){
if(c) return Math.round((fTemp - 32) * (5/9)) + "&#8451";
return Math.round(fTemp) + " &#8457";

}
function getCardinal(angle) {
//easy to customize by changing the number of directions you have
var directions = 8;

    var degree = 360 / directions;
    angle = angle + degree/2;

    if (angle >= 0 * degree && angle < 1 * degree)
        return "N";
    if (angle >= 1 * degree && angle < 2 * degree)
        return "NE";
    if (angle >= 2 * degree && angle < 3 * degree)
        return "E";
    if (angle >= 3 * degree && angle < 4 * degree)
        return "SE";
    if (angle >= 4 * degree && angle < 5 * degree)
        return "S";
    if (angle >= 5 * degree && angle < 6 * degree)
        return "SW";
    if (angle >= 6 * degree && angle < 7 * degree)
        return "W";
    if (angle >= 7 * degree && angle < 8 * degree)
        return "NW";

    return "N";
}

function render(wd, cel){
var currentLocation = wd.name;
var currentWeather = wd.weather[0].main;
var currentTemp= displayTemp(wd.main.temp, cel);
var high = displayTemp(wd.main.temp_max, cel);
var low = displayTemp(wd.main.temp_min, cel);
var Speed = wd.wind.speed;
var Degree = getCardinal(wd.wind.deg);
var icon = wd.weather[0].icon;

$('#currentLocation').html(currentLocation); 
$('#currentWeather').html(currentWeather); 
$('#currentTemp').html(currentTemp);
$('#high-low').html(high + " / " + low);

Speed = (2.237*(Speed)).toFixed(1);
$('#Speed-Degree').html(Speed + "mph" + " / " + Degree);

var iconSrc = "http://openweathermap.org/img/w/" + icon + ".png"; 
$('#currentTemp').prepend('<img src="' + iconSrc + '">'); 

$(function(){
var loc;

$.getJSON('http://ipinfo.io', function(d){
loc = d.loc.split(",");
console.log(loc);

$.getJSON('http://api.openweathermap.org/data/2.5/weather?units=imperial&lat='

        + loc[0] + '&lon=' + loc[1] +'&appid=' + API_Key, function(apiData){
wd = apiData; 

render(apiData, cel);

$('#toggle').click(function(){
                 cel = !cel; 
                 render(wd, cel); 
                 })

})

})

})
}

@TylerMoeller was trying different was to have the background change with weather conditions, and finally the the app stop working altogether.
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:41
Try using https://postimage.org instead
willstanleyus
@willstanleyus
Jan 17 2017 01:43
@TylerMoeller Not seeing the closing bracket you are referring to

var API_Key = "7bd138ff02b9b9bd18a3067392f2c3ab";
var cel = false;
var wd;

function displayTemp(fTemp, c){
if(c) return Math.round((fTemp - 32) * (5/9)) + "&#8451";
return Math.round(fTemp) + " &#8457";

}
function getCardinal(angle) {
//easy to customize by changing the number of directions you have
var directions = 8;

    var degree = 360 / directions;
    angle = angle + degree/2;

    if (angle >= 0 * degree && angle < 1 * degree)
        return "N";
    if (angle >= 1 * degree && angle < 2 * degree)
        return "NE";
    if (angle >= 2 * degree && angle < 3 * degree)
        return "E";
    if (angle >= 3 * degree && angle < 4 * degree)
        return "SE";
    if (angle >= 4 * degree && angle < 5 * degree)
        return "S";
    if (angle >= 5 * degree && angle < 6 * degree)
        return "SW";
    if (angle >= 6 * degree && angle < 7 * degree)
        return "W";
    if (angle >= 7 * degree && angle < 8 * degree)
        return "NW";

    return "N";
}

function render(wd, cel){
var currentLocation = wd.name;
var currentWeather = wd.weather[0].main;
var currentTemp= displayTemp(wd.main.temp, cel);
var high = displayTemp(wd.main.temp_max, cel);
var low = displayTemp(wd.main.temp_min, cel);
var Speed = wd.wind.speed;
var Degree = getCardinal(wd.wind.deg);
var icon = wd.weather[0].icon;

$('#currentLocation').html(currentLocation); 
$('#currentWeather').html(currentWeather); 
$('#currentTemp').html(currentTemp);
$('#high-low').html(high + " / " + low);

Speed = (2.237*(Speed)).toFixed(1);
$('#Speed-Degree').html(Speed + "mph" + " / " + Degree);

var iconSrc = "http://openweathermap.org/img/w/" + icon + ".png"; 
$('#currentTemp').prepend('<img src="' + iconSrc + '">'); 

$(function(){
var loc;

$.getJSON('http://ipinfo.io', function(d){
loc = d.loc.split(",");
console.log(loc);

$.getJSON('http://api.openweathermap.org/data/2.5/weather?units=imperial&lat='

        + loc[0] + '&lon=' + loc[1] +'&appid=' + API_Key, function(apiData){
wd = apiData; 

render(apiData, cel);

$('#toggle').click(function(){
                 cel = !cel; 
                 render(wd, cel); 
                 })

})

})

})
}

@TylerMoeller Sorry, I tried to post only line 68 and the rest was defaulted...
 + loc[0] + '&lon=' + loc[1] +'&appid=' + API_Key, function(apiData){
@TylerMoeller yea still broke. This is the third attempt at this pipeline. Only one way to start over. Get to typing....
Tyler Moeller
@TylerMoeller
Jan 17 2017 01:48
@willstanleyus Before background changes, get your weather API working. You need to pass both latitude and longitude to your URL and use a callback to avoid CORS restrictions
Start by trying to save your latitude and longitude in two separate variables, then create a URL that can connect to Open Weather Map
$(document).ready(function() {
  getLocation();
})

function getLocation() {
  $.getJSON('http://ipinfo.io/json?callback=?', function(d) {
    getWeather(d);
  });
}

function getWeather(locationData) {
  console.log(locationData)
  // add your getJSON for the weather API here - use locationData to get your latitude and longitude
}
Ken Haduch
@khaduch
Jan 17 2017 02:07
@stoicavali91 re: :point_up: January 16, 2017 2:27 PM - did you get any answers on this? I just clicked on your project & it looks like you are getting different games for different users. (It's hard to scroll through this chat room and find the information that you are looking for!)
JD Tadlock
@jdtdesigns
Jan 17 2017 02:21
@DarylKnapp I'm back
John Nunns
@johnnunns
Jan 17 2017 02:58
var customerData = {
  'Joe': {
    visits: 1
  },
  'Carol': {
    visits: 2
  },
  'Howard': {
    visits: 3
  },
  'Carrie': {
    visits: 4
  }
};

function greetCustomer(firstName) {
  var greeting = '';
    if(customerData[firstName]!== firstName){
        greeting = "Welcome! Is this your first time?"
    }else if(customerData[firstName].visits === 1){
      greeting = "Welcome back, " + firstName + "! We're glad you liked us the first time!"
    }else {
      greeting = "Welcome back, " + firstName + "! So glad to see you again!"
    }


  return greeting;
}
greetCustomer("Joe")
any ideas why "Joe" and evevryone on the list is running the greeting as if it's their first visit?
do I need to nest the if inside for some reason?
Ken Haduch
@khaduch
Jan 17 2017 03:04
@johnnunns - let's say that the firstName is "Joe", as you are saying. Then what will be returned as a value from the lookup that is equivalent to customerData["Joe"]? Is there any way that it will ever be equal to the firstName? (That is, it would have to have a value of "Joe" stored somewhere in an object as a value, and there isn't any place like that.)
JD Tadlock
@jdtdesigns
Jan 17 2017 03:07
@johnnunns add this inside the function up top: console.log(typeof customerData[firstName]);
You'll see why it's not matching the firstName. ;)
John Nunns
@johnnunns
Jan 17 2017 03:07
so customerData['Joe'] != "Joe"
JD Tadlock
@jdtdesigns
Jan 17 2017 03:07
nope
you need to check if the object inside of customerData exists
@johnnunns
you can find the object using bracket notation
so customerData[firstName] will return an object
John Nunns
@johnnunns
Jan 17 2017 03:10
can you write customerData.property != firstName?
or customerData.hasOwnProperty === false?
JD Tadlock
@jdtdesigns
Jan 17 2017 03:11
you're on the right track
hasOwnProperty checks if a property exists in an object
the names are properties and their value is an object
John Nunns
@johnnunns
Jan 17 2017 03:12
there's no .hasOwnValue is there haha?
JD Tadlock
@jdtdesigns
Jan 17 2017 03:13
all you need is hasOwnProperty ;)
check the customerData object for the name using hasOwnProperty
John Nunns
@johnnunns
Jan 17 2017 03:15
function greetCustomer(firstName) {
  var greeting = '';
    if(customerData[firstName].hasOwnValue === false){
        greeting = "Welcome! Is this your first time?"
    }else if(customerData[firstName].visits === 1){
      greeting = "Welcome back, " + firstName + "! We're glad you liked us the first time!"
    }else {
      greeting = "Welcome back, " + firstName + "! So glad to see you again!"
    }


  return greeting;
}

greetCustomer("Joe")
oops forgot to correct value lol had to try it
function greetCustomer(firstName) {
  var greeting = '';
    if(customerData[firstName].hasOwnProperty === false){
        greeting = "Welcome! Is this your first time?"
    }else if(customerData[firstName].visits === 1){
      greeting = "Welcome back, " + firstName + "! We're glad you liked us the first time!"
    }else {
      greeting = "Welcome back, " + firstName + "! So glad to see you again!"
    }


  return greeting;
}

greetCustomer("Joe")
so this is where I'm at
JD Tadlock
@jdtdesigns
Jan 17 2017 03:16
@johnnunns You need to check customerData not the objects inside
hint* customerData.hasOwnProperty()
CamperBot
@camperbot
Jan 17 2017 03:16
Set a bonfire to talk about with bonfire name
John Nunns
@johnnunns
Jan 17 2017 03:16
yeah just changed to customerData.hasOwnProperty
oh damnit are you kidding me is is just because i don't have the () haha
JD Tadlock
@jdtdesigns
Jan 17 2017 03:17
hasOwnProperty takes an argument
John Nunns
@johnnunns
Jan 17 2017 03:17
I totally forgot
haha it's passed now all work. put in the argument firstName
JD Tadlock
@jdtdesigns
Jan 17 2017 03:18
;)
John Nunns
@johnnunns
Jan 17 2017 03:18
thanks @jdtdesigns
CamperBot
@camperbot
Jan 17 2017 03:18
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 849 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 17 2017 03:18
welcome
John Nunns
@johnnunns
Jan 17 2017 03:18
thanks @khaduch
CamperBot
@camperbot
Jan 17 2017 03:18
johnnunns sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2290 | @khaduch |http://www.freecodecamp.com/khaduch
John Nunns
@johnnunns
Jan 17 2017 03:19
If you guys have any more free time, I'm completely clueless on the idea of how to turn an array into an object
JD Tadlock
@jdtdesigns
Jan 17 2017 03:20
@johnnunns There's quite a few ways, but the easiest is using .filter() once you know how to use it ;)
sorry
.reduce()
John Nunns
@johnnunns
Jan 17 2017 03:21
such as [['myName', 'John'] ['yourName' , 'Ted']] to {myName: John, yourName: Ted}
would reduce work to do that?
JD Tadlock
@jdtdesigns
Jan 17 2017 03:22
yep
John Nunns
@johnnunns
Jan 17 2017 03:23
Let me see what they have on here for reduce and I'll see if i can get an answer from here
Tomas
@TOMEJUS
Jan 17 2017 03:24

Hi, anyone knows how to make to Divs below each other with such bootstrap structure:

row
col xs 6 ... Something
col xs 6 .... Something
end of row

Now they are side by side, but I want one below another one, how do I achieve that? Cant figure it out :/

and:

row
col xs 12 ... Something
row
col xs 12 ... something
end of row

is not good, because I want them side by side, but with different width I want to make one of the div below, is it possible to do with css? Basically, I tried display: block but that doesn't seem to work. ANy help would be appreciated. Thank you

Ken Haduch
@khaduch
Jan 17 2017 03:25
@johnnunns - you're welcome.
Jonathan Marx Domah
@marxcom
Jan 17 2017 03:32
@TOMEJUS how do want to achieve side-by-side and one-below at the same time?
@TOMEJUS I will try row
col xs 12 ... Something
row
col xs 6 ... something col xs 6...something
end of row
Tomas
@TOMEJUS
Jan 17 2017 03:36
@marxcom I think I sorted, partially :D
JD Tadlock
@jdtdesigns
Jan 17 2017 03:37
@johnnunns Is it a challenge you're trying to complete or just something you were wondering?
I could show you the way to use reduce to get the result if it's not a challenge
John Nunns
@johnnunns
Jan 17 2017 03:38
something I'm wondering. I do multiple free courses but haven't found a core group that's as helpful as this one
So i usually come here even for problems outside this camp
JD Tadlock
@jdtdesigns
Jan 17 2017 03:39
@johnnunns Gotcha. Here's how you would turn the array into an object:
var data = [['myName', 'John'], ['yourName' , 'Ted']];

data = data.reduce(function(obj, arr) {
  obj[arr[0]] = arr[1];

  return obj;
}, {});
John Nunns
@johnnunns
Jan 17 2017 03:40
what's up with the last line?
}, {});
JD Tadlock
@jdtdesigns
Jan 17 2017 03:41
the first argument you pass into .reduce() is a callback with a number of args based on what you need to do. By default you pass in 2 args, the first being the ending output, and the current value in the array
the second argument in reduce() is the output type
it can be any data type
so obj refers to {} on the last line
buiphuking
@buiphuking
Jan 17 2017 03:48
http://pathlab.webhubz.com/
someone plz tell me the event jquery of the div with background-color: blue above footer??????????????
John Nunns
@johnnunns
Jan 17 2017 03:49
JD thanks man I'm trying to understand it but I'm really struggling @jdtdesigns
CamperBot
@camperbot
Jan 17 2017 03:49
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: johnnunns already gave jdtdesigns points
John Nunns
@johnnunns
Jan 17 2017 03:52
Let me watch a quick youtube video on it to get a further understanding. I've done the reduce problem here in the camp problem and it makes perfect sense but it's much simpler.
JD Tadlock
@jdtdesigns
Jan 17 2017 03:56
@johnnunns Higher order functions can be really hard to grasp for awhile when you first start. A lot of the connections between what they do begin to 'click' after you code more advanced programs/apps. This guy is great at explaining them: https://www.youtube.com/watch?v=BMUiFMZr7vk
JD Tadlock
@jdtdesigns
Jan 17 2017 04:15
@buiphuking Are you wanting to know how to make a slider using jQuery?
Tyrantt47
@Tyrantt47
Jan 17 2017 04:52
Can someone tell me why i'm getting a broken link error from my navbar scrolling?
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a href="#" class="navbar-brand header1">Tyrantt47</a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active header2"><a href="1">Portfolio</a></li>
          <li class="header2"><a href="2">About me</a></li>
          <li class="header2"><a href="3">Contact me</a></li>

            </ul>
          </li>

        </ul>
      </div>
    </div>
    <!-- container -->
</div>
<div id="1" style="min-height:1000px;background-color:white">
</div>
<div id="2" style="min-height:1000px;background-color:#777">
</div>
<div id="3" style="min-height:1000px;background-color:white">
</div>
Adam
@adamakers
Jan 17 2017 04:54
@Tyrantt47 could it be the period oin your data-target attr?
@revisualize thanks
CamperBot
@camperbot
Jan 17 2017 04:55
adamakers sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star2: 2999 | @revisualize |http://www.freecodecamp.com/revisualize
Joseph
@revisualize
Jan 17 2017 04:55
Why are you thanking me here?
What did I do?
Adam
@adamakers
Jan 17 2017 04:56
i wanted to see 3k
Joseph
@revisualize
Jan 17 2017 04:56
@adamakers I want to earn them :P
Adam
@adamakers
Jan 17 2017 04:56
quick, give me a compliment
or... how abouyt this
for containers, would it be best to use a div, or is there a better suited element to use?
@revisualize Its kind of strange that they have all these specific elements for things, but not containers
Tyrantt47
@Tyrantt47
Jan 17 2017 04:58
@adam nope, i changed it to an id and targeted the idea and still a broken link
@adamakers
Coy Sanders
@coymeetsworld
Jan 17 2017 05:00
want to review my recipe box app @revisualize ? http://fcc-my-recipe-box.herokuapp.com/
Joseph
@revisualize
Jan 17 2017 05:01
@coymeetsworld Sure.
@coymeetsworld Did you just install a tracking cookie on my computer?
Coy Sanders
@coymeetsworld
Jan 17 2017 05:01
no but i used local storage
so that your "recipes" would persist on browser closing
Joseph
@revisualize
Jan 17 2017 05:02
@coymeetsworld Pesto Cheesy Chicken Rolls ... Looks good.
Coy Sanders
@coymeetsworld
Jan 17 2017 05:02
you have something that checks that?
i put it in the github page but if you want to remove it just put this in your console localStorage.setItem('_coymeetsworld_recipes', '')
Joseph
@revisualize
Jan 17 2017 05:02
@coymeetsworld HA HA! I edited your food.
Coy Sanders
@coymeetsworld
Jan 17 2017 05:02
ya all those look good lol
Joseph
@revisualize
Jan 17 2017 05:02
@coymeetsworld Looks good.
Coy Sanders
@coymeetsworld
Jan 17 2017 05:02
no you edited yours lol
Joseph
@revisualize
Jan 17 2017 05:02
OH!
Funny.
Aaron Cleveland
@amclv
Jan 17 2017 05:03
is tehre something i can use to not make my website widen when i zoom in and out?
Coy Sanders
@coymeetsworld
Jan 17 2017 05:03
the results are unique for each person because thats what i stored in your local storage
thanks for the review though! @revisualize
CamperBot
@camperbot
Jan 17 2017 05:03
coymeetsworld sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star2: 3000 | @revisualize |http://www.freecodecamp.com/revisualize
Aaron Cleveland
@amclv
Jan 17 2017 05:03
like to fix the structure so it stays in the same place
Joseph
@revisualize
Jan 17 2017 05:03
@coymeetsworld I made it say:
12 fresh ghost peppers sliced halfwise and seeded
Coy Sanders
@coymeetsworld
Jan 17 2017 05:03
hmm let me check to see if it changed on mine, just in case :)
nope I see no changes
John Nunns
@johnnunns
Jan 17 2017 05:09
@jdtdesigns you on man?
JD Tadlock
@jdtdesigns
Jan 17 2017 05:13
@johnnunns yep
John Nunns
@johnnunns
Jan 17 2017 05:15
awesome, thanks for putting me onto these videos they're great @jdtdesigns
CamperBot
@camperbot
Jan 17 2017 05:15
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 850 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
John Nunns
@johnnunns
Jan 17 2017 05:16
I'm currently watching the map one, and will watch the reduce here in a second. I'm presuming he's going to show the traditional for loop way in order to show the "original" code too right?
JD Tadlock
@jdtdesigns
Jan 17 2017 05:19
yeah, he usually shows the standard approach before showing the functional way
Ayush Bahuguna
@relentless-coder
Jan 17 2017 05:39
getElementsByTagName is returning an html collection. isn't it supposed to return a node list? I was getting a node list, but when I replace content on my file with handlebars template i've been getting an htmlCollection
Sorin Ruse
@sorinr
Jan 17 2017 05:50
Jonathan Marx Domah
@marxcom
Jan 17 2017 05:50
I need help displaying my search results in divided grids. Ho can have a next page? https://goo.gl/NP3npg
buiphuking
@buiphuking
Jan 17 2017 05:52
@jdtdesigns
i want to use bxslider to build a slider, have you experienced about it?
Ayush Bahuguna
@relentless-coder
Jan 17 2017 05:54
@sorinr that's returning an empty nodeList. Just to let you know, I wasn't facing this issue before I replaced content on my html with a handlebars template. does it have something to do with that?
John Nunns
@johnnunns
Jan 17 2017 05:54
@jdtdesigns right, so he only shows the standard approach in the basic video where he's reducing numbers into an overall sum. The standard is a for loop. He doesn't show how the for loop would work when transforming an array into an object, would you mind walking me through how you'd do that with a for loop? Just don't want to feel like I've jumped ahead without knowing the basics
Sorin Ruse
@sorinr
Jan 17 2017 05:58
@marxcom first do not use async: false let the ajax call to be asynchronous and you treat the response in the callback
@relentless-coder it is possible. never seen used queryselectorall with handlebars. sorry i can't help you with that
Sorin Ruse
@sorinr
Jan 17 2017 06:05
@marxcom then change like this: $("#searchResult").append('<a href= "' + data[3][i] + '">' + data[1][i] + '</a><p>' + data[2][i] + '</p>');
buiphuking
@buiphuking
Jan 17 2017 06:06
anyone experienced with bxslider, help me?
Sorin Ruse
@sorinr
Jan 17 2017 06:06
@marxcom because of the href="" you need to alternate single quotes with double quotes when you concatenate
Jonathan Marx Domah
@marxcom
Jan 17 2017 06:25
@sorinr Thanks
CamperBot
@camperbot
Jan 17 2017 06:25
marxcom sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1096 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 17 2017 06:25
@marxcom welcome
Ashwini Sridhar
@Ash1108
Jan 17 2017 06:53
Hello. Can anyone tell me how to center absolute elements in a div?
kirbyedy
@kirbyedy
Jan 17 2017 06:57
@Ash1108 with flexbox that is easy: justify-content: center;
have you used flexbox before ?
Tomas
@TOMEJUS
Jan 17 2017 06:59
Do you use a lot flexbox with bootstrap? I don't see where to use it
Ashwini Sridhar
@Ash1108
Jan 17 2017 06:59
@kirbyedy No I haven't used! What is it?
Coy Sanders
@coymeetsworld
Jan 17 2017 07:05
its a way to layout your elements @Ash1108, its pretty nice and also responsive
there are other ways to center specific things though in CSS, like margin: 0 auto and text-align: center depending on what you're trying to center
Muhammad Hasham
@MohammadHasham
Jan 17 2017 07:08
@sorinr yaaaaaaaaay.... i did that start button implementation
Ashwini Sridhar
@Ash1108
Jan 17 2017 07:08
But margin:0 auto doesn't work for unknown width.
Coy Sanders
@coymeetsworld
Jan 17 2017 07:09
yeah, just gave an example wasn't sure what you were trying to center @Ash1108
Sorin Ruse
@sorinr
Jan 17 2017 07:10
@MohammadHasham :+1:
Ashwini Sridhar
@Ash1108
Jan 17 2017 07:10
I have a relative parent element whose width is 100%. I want to make it's child element center. @coymeetsworld
Sorin Ruse
@sorinr
Jan 17 2017 07:10
@MohammadHasham keep go on
Muhammad Hasham
@MohammadHasham
Jan 17 2017 07:10
:D
Tomas
@TOMEJUS
Jan 17 2017 07:10
@Ash1108 It would work if you set your parent element with: display: flex; and child element with: margin: auto (please note only margin: auto no zero) then it will center it with any width, at least it worked for me.
Coy Sanders
@coymeetsworld
Jan 17 2017 07:11
I would look into using Flexbox @Ash1108, it'll be alot nicer to use. But if you want something quicker can you give the child element (i'm guessing its a div inside of a div) a width also? Then you can use the margin property
Ashwini Sridhar
@Ash1108
Jan 17 2017 07:13
@coymeetsworld @TOMEJUS Thankyou! I will try it. But right now i'm only using html and css to get the result.
CamperBot
@camperbot
Jan 17 2017 07:13
:cookie: 125 | @tomejus |http://www.freecodecamp.com/tomejus
ash1108 sends brownie points to @coymeetsworld and @tomejus :sparkles: :thumbsup: :sparkles:
:star2: 1844 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 17 2017 07:14
np @Ash1108 and good luck
kirbyedy
@kirbyedy
Jan 17 2017 07:15
@Ash1108 this is an excellent text to start with flexbox, it is really easy to follow
h1tag
@h1tag
Jan 17 2017 07:35
Hey, I'm on the Show the Local Weather project, what's the best way to change the background based on the weather forcast?
Sorin Ruse
@sorinr
Jan 17 2017 07:45
@fortMaximus you can choose some bg images for general conditions like sunny, cloudy, rainy and snowy and depending on the weather condition display one of them
h1tag
@h1tag
Jan 17 2017 07:48
@sorinr how do I include the images in the project? Using their URL?
Sorin Ruse
@sorinr
Jan 17 2017 07:50
@fortMaximus yes. i would make an object var like var backgrounds = { "sunny": "url for a sunny image", "cloudy": "url for a cloudy img", etc } and when you get data from the api in js you decide witch one to apply
h1tag
@h1tag
Jan 17 2017 07:51
@sorinr thank you :)
CamperBot
@camperbot
Jan 17 2017 07:51
fortmaximus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1099 | @sorinr |http://www.freecodecamp.com/sorinr
Sung Guk Lee
@katsuya245126
Jan 17 2017 07:52
@katsuya245126
can anyone help me here
http://codepen.io/katsuyalee/full/KaMqKd/
as you can see, the table is off centered and I can't get it to center
h1tag
@h1tag
Jan 17 2017 07:54
@katsuya245126 it's looks centered to me
nice design btw
Sorin Ruse
@sorinr
Jan 17 2017 07:58
@katsuya245126 what do u mean off centered?
Sung Guk Lee
@katsuya245126
Jan 17 2017 08:01
ah it depends on the screen size I guess. When I look at it on my phone, it's off center
try opening Result and HTML at the same time
h1tag
@h1tag
Jan 17 2017 08:05
@katsuya245126 I tried that, it's still centered
maybe you need to use Bootstrap
Sung Guk Lee
@katsuya245126
Jan 17 2017 08:05
Hmm I guess you have a big screen?
I'm on 1440x900
h1tag
@h1tag
Jan 17 2017 08:07
I think you need to use Bootstrap to make it look the same on all screen sizes
Sung Guk Lee
@katsuya245126
Jan 17 2017 08:07
The table is based on bootstrap I think
'<table class="table table-responsive" align="center">'
<table class="table table-responsive" align="center">
h1tag
@h1tag
Jan 17 2017 08:09
I didn't notice it. Also, I haven't used this class before. Maybe someone more experienced can help you
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:15
Hey guys! I have a few questions.
  1. Is it better to use VanillaJS (I mean using the DOM for I/O) or JQuery? When do I know which one to use? Some web developer told me that JQuery can't be used with React.
  2. What is the difference between $.getJSON() and $.ajax()? They are both AJAX calls right?
  3. If you can set async:false in $.ajax(), then what is the point of making a synchronous "Asynchronous Javascript and XML" Request?
Luis Villavicencio
@Tav0
Jan 17 2017 08:25
@playingwithinfinity you can pretty much get your answer from stackoverflow
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:30
@Tav0 So for Question 3, it is a normal non AJAX request, unlike $.getJSON() which is an AJAX request.
jolly17
@jolly17
Jan 17 2017 08:30
Guys, do you know any good HTML kid's theme for a store or otherwise?
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:30
@jolly17 Just google it.
Not free though.
jolly17
@jolly17
Jan 17 2017 08:32
I did, but mostly are for wordpress
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:32
Then build your own :P
jolly17
@jolly17
Jan 17 2017 08:33
I just completed front end course and wanted to implement learnings
https://wrapbootstrap.com/theme/kidz-multipurpose-children-kids-theme-WB059350N Does anyone know if I can try my hands on this one?
then i will buy and just try my coding skills
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:35
@jolly17 Why would you buy an HTML theme if you wanted to try your coding skills?
Sorin Ruse
@sorinr
Jan 17 2017 08:38
@jolly17 as @playingwithinfinity said why buy it and not try doing something similar by yourself?
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:43
@sorinr Well, for one. It's hard.
Sorin Ruse
@sorinr
Jan 17 2017 08:46
@playingwithinfinity no its not. its pretty much basic stuff. my hardest problem in a project like that templates its not the layout itself but combining the typography and color pallet and imgs
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:48
@sorinr That is what I mean too!
Ditto!
Navbars and stuff is tough in the beginning, but not too hard.
What's wrong with my Wikipedia Viewer? You can't see the title in the search results. http://codepen.io/jimpix/pen/PbVRpm
Sorin Ruse
@sorinr
Jan 17 2017 08:51
@playingwithinfinity do not use async:false
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:52
When I hover over one of the results, I can see the title.
Sorin Ruse
@sorinr
Jan 17 2017 08:55
@playingwithinfinity in here $('#output').prepend("<div><div class='btn-primary><a href="+data[3][i]+"><h2>" + data[1][i]+ "</h2>" + "<p>" + data[2][i] + "</p></a></div></div>"); because of the href="" you have to use single quotes along with double quotes when concatenating
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:57
Oh
Sorin Ruse
@sorinr
Jan 17 2017 08:58
@playingwithinfinity so this part <a href=" should be like <a href='" and this part + "</h2>" should be like: + "'</h2>"
playingwithinfinity
@playingwithinfinity
Jan 17 2017 08:59
Like this?
$('#output').prepend("<div><div class='btn-primary><a href=' "+data[3][i]+"><h2>" + data[1][i]+ " '</h2>" + "<p>" + data[2][i] + "</p></a></div></div>");
Sorin Ruse
@sorinr
Jan 17 2017 09:00
@playingwithinfinity yes
playingwithinfinity
@playingwithinfinity
Jan 17 2017 09:01
It doesn't work.
Sorin Ruse
@sorinr
Jan 17 2017 09:32
@playingwithinfinity let me take a closer look
Muhammad Hasham
@MohammadHasham
Jan 17 2017 09:36
why is codepen.io not working?
it says website is down?
Sorin Ruse
@sorinr
Jan 17 2017 09:37
yep. also i could not get it work
maybe there are some temporary problems
Muhammad Hasham
@MohammadHasham
Jan 17 2017 09:38
maybe!
Chris Cullen
@123xylem
Jan 17 2017 09:39
<nav class="navbar navbar-default">

 <div class=" navbar-header">
    <a href="#" class="navbar-brand">Kora</a>
</div>
<div class="container">
<ul class=" nav navbar-nav">
    <li><a href="#">Our Food</a></li>
    <li><a href="#">Contact</a></li>
    </ul>


<ul class=" navbar-nav navbar-right">
        <li><a href="#">Sign Up</a></li>
                <li><a href="#">Login</a></li>
</ul>

</nav>
</div>
Quick Question: Why is this navbar displaying vertically not horizontally!!??
Sorin Ruse
@sorinr
Jan 17 2017 09:39
@playingwithinfinity sorry the single quote should be in here "'><h2>" not in here "'></h2>". i copy paste the wrong h2 tag
@123xylem have you loaded bootstrap lib?
Chris Cullen
@123xylem
Jan 17 2017 09:41
@sorinr <link rel="stylesheet" type="text/css" href="bootstrap.css">
I added this .css file to it
Sorin Ruse
@sorinr
Jan 17 2017 09:41
@123xylem so, r u working locally on your pc?
Chris Cullen
@123xylem
Jan 17 2017 09:42
@sorinr yea
and it just shows a vertical navbar.. i even tried to change the webkit box orient to horizontal but no workyu
Sorin Ruse
@sorinr
Jan 17 2017 09:44
@123xylem and do you downloaded the bootstrap.css on your pc? in witch folder in your project? here href="bootstrap.css" you have to give the relative path to the lib so the browser will know where to look up for it
Chris Cullen
@123xylem
Jan 17 2017 09:44
@sorinr ah.. the css is working as I can add css classes
i put the css in the same folder as the html
Chris Cullen
@123xylem
Jan 17 2017 10:09

<nav class="navbar navbar-default">

 <div>
    <a href="#" class="navbar-brand">Kora</a>
</div>
<div class="container">
<ul class=" nav navbar-default navbar-nav">
    <li><a href="#">Our Food</a></li>
    <li><a href="#">Contact</a></li>
    </ul>


<ul class="  navbar-nav navbar-right nav">
        <li><a href="#">Sign Up</a></li>
                <li><a href="#">Login</a></li>
</ul>
</div>

</nav>
QUICK QUESTION: Why is this displaying vertically not horizontally?
Also the Elements seem to be strethching to the end and taking up all the width. I guess that has something to do with it but i just followed a tutorial on inline navbar with bootstrap so i dont get how it doesnt wor
Sorin Ruse
@sorinr
Jan 17 2017 10:10
@123xylem then its something wrong with your nav structure and classes. i would suggest to grab the example in here: http://getbootstrap.com/components/#navbar and cut off what you don't need
excel32w
@excel32w
Jan 17 2017 10:53
is code pen.io site down?
Sorin Ruse
@sorinr
Jan 17 2017 10:55
@excel32w yep
excel32w
@excel32w
Jan 17 2017 10:55
ok thank you
Sorin Ruse
@sorinr
Jan 17 2017 10:55
this part https://blog.codepen.io/documentation/ still working but not the pens route
Simon Cordova
@gbsimon87
Jan 17 2017 11:19
Hey guys, I'm trying to wrap some form rows inside a div using wrapAll. It's wrapping just fine, but only expanding to the width of one td, I need to expand the full row.
Any ideas?
Darth Skywalker
@adityaparab
Jan 17 2017 11:19
@gbsimon87 show your code
Simon Cordova
@gbsimon87
Jan 17 2017 11:21
$("ul li:gt(4)").wrapAll("<div class='newDiv'");
Darth Skywalker
@adityaparab
Jan 17 2017 11:22
@gbsimon87 and html markup?
Simon Cordova
@gbsimon87
Jan 17 2017 11:23
The thing is, my table has multiple row, each has four columns
Darth Skywalker
@adityaparab
Jan 17 2017 11:23
@gbsimon87 : you're also missing a closing > after class='newDiv'"
Simon Cordova
@gbsimon87
Jan 17 2017 11:24
yeah..
@adityaparab I just realized that, but in my code it's correct
Thing is I don't have the HTML as I'm injecting jquery into a website
Darth Skywalker
@adityaparab
Jan 17 2017 11:24
is there a I can see this problem live?
The table in the results
You can insert that in the console...
and that as well...
Once you insert those, you'll see the 'see all room options' link
I'll send the full code in one sorry
    // APPEND THE NEW LINK TO THE BOTTOM OF THE TABLE
    var newLink = "<tr style='display:table-row; vertical-align: inherit; border-color: inherit'><td id='seeMoreLink' style='align=center' colspan='4'><a>See all room options</a></td></tr>";
    $("#roomsTable > tbody tr[data-ratetypecategory").last().after(newLink); 

    //HIDE LIST ITEMS IF LENGTH IS GREATER THAN FOUR
    $("#roomsTable > tbody tr[data-ratetypecategory]:gt(4)").hide();

    // WRAP THE REMAINING ROWS INTO ONE DIV
    $("#roomsTable > tbody tr[data-ratetypecategory]:gt(4)").wrapAll('<div class="newDiv" />');



    $("#seeMoreLink").on("click", function() {
    // HIDE LINK
    $(this).hide();

    // SHOW THE REST OF THE LIST ITEMS
    $("#roomsTable > tbody tr[data-ratetypecategory]:gt(4)").slideDown(3000);
    });
You can copy and paste that into the page, try refreshing it first
Simon Cordova
@gbsimon87
Jan 17 2017 11:31
any ideas?\
Darth Skywalker
@adityaparab
Jan 17 2017 11:32
your url is blocked at my work proxy!
under the label adult entertainment!
:D
:laughing:
Simon Cordova
@gbsimon87
Jan 17 2017 11:33
what lol
it's a hotels and vacations website
Screen Shot 2017-01-17 at 11.33.43.png
Darth Skywalker
@adityaparab
Jan 17 2017 11:34
:D
Simon Cordova
@gbsimon87
Jan 17 2017 11:34
@adityaparab
There's a screenshot
kelvinabella
@kelvinabella
Jan 17 2017 11:35
Hello
Simon Cordova
@gbsimon87
Jan 17 2017 11:35
so basically those two rows that don't fully expand are the ones I wrapped in a div
kelvinabella
@kelvinabella
Jan 17 2017 11:35
is codepen website offline?
Darth Skywalker
@adityaparab
Jan 17 2017 11:35
@gbsimon87 : I see...
Sorin Ruse
@sorinr
Jan 17 2017 11:35
@kelvinabella yep. for about two hours now
Darth Skywalker
@adityaparab
Jan 17 2017 11:36
Instead of wrapping your trs in .newDiv why not just wrap the entire table?
@gbsimon87
kelvinabella
@kelvinabella
Jan 17 2017 11:36
okay. thanks @sorinr
CamperBot
@camperbot
Jan 17 2017 11:36
kelvinabella sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1100 | @sorinr |http://www.freecodecamp.com/sorinr
Robert Uivarosi
@URobert
Jan 17 2017 12:11
Hi all. Long time no see :). Can anyone help me out with a react environment setup? More exactly for some reason I can't get my Sass file included... I get a unexpected token error
Darth Skywalker
@adityaparab
Jan 17 2017 12:15
@URobert are you using webpack?
I like this starter boilerplate when it comes to react development. https://github.com/alicoding/react-webpack-babel
DarylKnapp
@DarylKnapp
Jan 17 2017 12:47

Good Morning Devs

Can someone help me?

Im want to move the boxs that are below my "About, and Projects" headers so that text are within the boxs.

http://i64.tinypic.com/jzi1qq.png

Darth Skywalker
@adityaparab
Jan 17 2017 12:47
@DarylKnapp you have codepen?
DarylKnapp
@DarylKnapp
Jan 17 2017 12:50

@adityaparab Sorry I dont use Codepen sorry. Ill share the code my bad.

http://i66.tinypic.com/10fvq5v.png

http://i66.tinypic.com/10x7eas.png

Darth Skywalker
@adityaparab
Jan 17 2017 12:50
@DarylKnapp It's hard to debug using images mate
DarylKnapp
@DarylKnapp
Jan 17 2017 12:53
@adityaparab I thought it might of been padding/margin, but when I img{} in css but it then moves all my IMG's
Ashan Mohammed
@AshanMohammed
Jan 17 2017 12:53
Hello! Why ca't style some elements using the class but can style using only id's? Anyone please?
DarylKnapp
@DarylKnapp
Jan 17 2017 12:53
@adityaparab
FreeHandz
@FreeHandz
Jan 17 2017 13:32
hey guys, I'm stucked with the tic-tac-toe challenge. I cannot switch player1 and player2 for some reason. can u guys take a looK? i commented my code, it's not gonna be hard to find.
http://codepen.io/FreeHandz/full/QdGdbP/
FreeHandz
@FreeHandz
Jan 17 2017 13:39
i just figured it out, wow. nevermind.
Muhammad Hasham
@MohammadHasham
Jan 17 2017 13:45
blob
How can i make this border?
@adityaparab
playingwithinfinity
@playingwithinfinity
Jan 17 2017 13:49
Why isn't my project working anymore? https://codepen.io/jimpix/pen/WoErgX
Sorin Ruse
@sorinr
Jan 17 2017 13:52
@MohammadHasham border-left: 2px solid gray or border-right: 2px solid gray depending to witch container you apply it. if left contrainer then use border-right if right container use border-left
@playingwithinfinity do not load your pen over https. load it over http
playingwithinfinity
@playingwithinfinity
Jan 17 2017 13:56
@sorinr How?
Why? Basically why?
It works when I used http: instead of https
ximocoperations
@ximocoperations
Jan 17 2017 13:59
Hi guys can ,t use codepen.io please help
Sorin Ruse
@sorinr
Jan 17 2017 13:59
@playingwithinfinity because your http://api.forismatic.com works on http only
ximocoperations
@ximocoperations
Jan 17 2017 14:00
How do i save my work on code pen.io
Sorin Ruse
@sorinr
Jan 17 2017 14:02
@ximocoperations if u just created a new pen its initial settings are auto-save and auto-updating so u don't need to save it manually
ximocoperations
@ximocoperations
Jan 17 2017 14:04
but after closing my browser an reload the page again i get a blank pen
Sorin Ruse
@sorinr
Jan 17 2017 14:06
@ximocoperations are you logged in with codepen?
ximocoperations
@ximocoperations
Jan 17 2017 14:06
no
how do i do so
Sorin Ruse
@sorinr
Jan 17 2017 14:07
@ximocoperations then thats the problem. log in create a pen and u will have saved into your collection of pens
ximocoperations
@ximocoperations
Jan 17 2017 14:11
thanks men
Tomas
@TOMEJUS
Jan 17 2017 14:11
anyone here from London?
Sorin Ruse
@sorinr
Jan 17 2017 14:15
not me. same continent but quite far from London :)
Tomas
@TOMEJUS
Jan 17 2017 14:16
@sorinr Romania right? Im originally from Lithuania so close enough haha!
Sorin Ruse
@sorinr
Jan 17 2017 14:17
@TOMEJUS we can say so :)
kirbyedy
@kirbyedy
Jan 17 2017 14:18
2k km ? :D
Sorin Ruse
@sorinr
Jan 17 2017 14:19
@kirbyedy maybe a little more :)
kirbyedy
@kirbyedy
Jan 17 2017 14:19
:D
Sung Guk Lee
@katsuya245126
Jan 17 2017 14:23
Tomas
@TOMEJUS
Jan 17 2017 14:23
Not that bad haha! I want to find some kind of meetings or something, very hard to find motivation at home...
I feel ashmed of myself, I have a degree in computing science (did it here in UK) but I still work at the bar, i feel useless. Want to change that, hopefully i'll get motivated :D
@katsuya245126 I believe you should change background it is hard to read a quotes
Marianissimus
@Marianissimus
Jan 17 2017 14:25
@TOMEJUS did you try meetup or something similar?
Sorin Ruse
@sorinr
Jan 17 2017 14:26
@TOMEJUS try to make a nice presentation website for the bar u work . it would be nice for your portfolio
@katsuya245126 i like it. i would only try to display the quotes after the table with the same width as the table
Tomas
@TOMEJUS
Jan 17 2017 14:29
@Marianissimus No, but I would love to not really sure where to find these meetups and even more how to behave there. Have you been in any?
@sorinr Yeah, I'll try it's just hard to get motivation :D
Muhammad Hasham
@MohammadHasham
Jan 17 2017 14:30
@TOMEJUS check out jay shetty on youtube
Muhammad Hasham
@MohammadHasham
Jan 17 2017 14:31
blob
how to get that border?
Sorin Ruse
@sorinr
Jan 17 2017 14:32
@TOMEJUS its easier when you r in there because you see what they need what are the day to day problems. go on presenting your solution for that problems
Muhammad Hasham
@MohammadHasham
Jan 17 2017 14:32
@sorinr
Sorin Ruse
@sorinr
Jan 17 2017 14:32
@MohammadHasham yep
kirbyedy
@kirbyedy
Jan 17 2017 14:33
its a 1px border on right/left of the div
Muhammad Hasham
@MohammadHasham
Jan 17 2017 14:33
blob
how to get this kind of line? is it a simple border
@sorinr
@kirbyedy Thanks
CamperBot
@camperbot
Jan 17 2017 14:34
mohammadhasham sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
Marianissimus
@Marianissimus
Jan 17 2017 14:34
@TOMEJUS not to advertise or anything, but I only know this site: https://www.meetup.com/ . I've been in a meetup, it was OK, a bit too technical for me(yet). It's nice to meet people that have the same interest as you - gives you extra-motivation
CamperBot
@camperbot
Jan 17 2017 14:34
:star2: 1687 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Tomas
@TOMEJUS
Jan 17 2017 14:34
@Marianissimus thanks i'll def check it out!
CamperBot
@camperbot
Jan 17 2017 14:34
tomejus sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Jan 17 2017 14:35
@MohammadHasham show us the code. how else can we find that border?
Sorin Ruse
@sorinr
Jan 17 2017 14:35
@MohammadHasham :point_up: January 17, 2017 3:52 PM
Muhammad Hasham
@MohammadHasham
Jan 17 2017 14:35
@sorinr Thanks man!
CamperBot
@camperbot
Jan 17 2017 14:35
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1101 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 17 2017 14:43
@MohammadHasham welcome
playingwithinfinity
@playingwithinfinity
Jan 17 2017 15:01
Can somebody fix my project? What's wrong with the titles to the results? They don't show up. http://codepen.io/jimpix/pen/PbVRpm
Clyde Lobo
@oppiniated
Jan 17 2017 15:07
@playingwithinfinity What's the issue?
Sorin Ruse
@sorinr
Jan 17 2017 15:11
@playingwithinfinity i don't see any issue in there
playingwithinfinity
@playingwithinfinity
Jan 17 2017 15:14
I got it.
I changed it.
Milos Ratkovic
@Shadow032
Jan 17 2017 15:44
hey guys, can somebody help me with the weather app. I got it working using API call to get user's latitude and longitude, but now i want to make it work with navigator.geolocation as it gives more precise location as far as i know. So i got this code at the end of JS field (the working code with API call is commented out) and it doesnt work for god knows what reason. Also i tested this code(geolocation) in localhost and it works just fine. I did append https:// on my codepen. So here's the CodePen: https://codepen.io/Shadow032/pen/wgzqgz?editors=1011
nevermind the page looking just focus on JS :D
Sorin Ruse
@sorinr
Jan 17 2017 15:48
@Shadow032 this "https://api.openweathermap.org is not going to work unless you have a paid account with openweather. the free version its working only on http not https. so if you wanna use navigator.geolocation you will have to change the weather api
Milos Ratkovic
@Shadow032
Jan 17 2017 16:12
@sorinr I got it working now.
still used openweather, its just that i used https:// to get latitude and longitude and , open weather call uses http:// so i had to use proxy pass through, just appended "https://cors-anywhere.herokuapp.com/" to my api call
Sorin Ruse
@sorinr
Jan 17 2017 16:17
@Shadow032 i've seen that. only its just a work around prefixing the call with cors-anywhere. the same was with crossorigin.me until the openweather blocked access for calls coming through that proxy :)
@Shadow032 imagine that they have to eat. so they will not allow for long time calls over proxies :)
Milos Ratkovic
@Shadow032
Jan 17 2017 16:19
@sorinr Oh well, Im glad i got it working with geolocation as well. First I used API call for latitude and longitude but it was so inaccurate. Im fine with this for now. I'll come later and play with it more, I heard that yahoo uses https:// so i guess i'll try that later. Thanks :)
CamperBot
@camperbot
Jan 17 2017 16:19
shadow032 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1102 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 17 2017 16:24
@Shadow032 there is also wunderground and apixu that have free plans working on https
Michelle Smith
@shellsy515
Jan 17 2017 16:40
In codepen you don't need to add the basic html tags like head and title and stuff, but is there anyway to see all that code if you want to?
Darth Skywalker
@adityaparab
Jan 17 2017 16:41
@shellsy515 Yes. Right click anywhere on preview pane and select inspect element
In the upward hierarchy, you will find an <iframe> element
when you expland that iframe, you will see your code embedded in there
Michelle Smith
@shellsy515
Jan 17 2017 16:43
Oh great. And I've noticed that a lot of people don't put alt text in their images, do you need to add this in codepen?
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 16:49
hlw everyone
actually i have been stucked in a prb from last two days
the problem is .... when i minimize my window
one appears and when i click that button it doesn;t show me all the menus i added
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
  <div class="navbar-collapse collapse" id="nav-collapse">
    <ul class="nav navbar-nav" >
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">About2</a></li>
      <li><a href="#">About3</a></li>
    </ul>
badly need a help
Darth Skywalker
@adityaparab
Jan 17 2017 16:53
@shellsy515 : Alt text serves many purposes.
but you don't really need it to complete your challenges
Michelle Smith
@shellsy515
Jan 17 2017 16:55
So down the road I'll need to add it at some point?'
like maybe for a job or something.
Tyler Moeller
@TylerMoeller
Jan 17 2017 16:56
@arefinsaad Make sure you have both jQuery and bootstrap.js added to your project.
blob
Darth Skywalker
@adityaparab
Jan 17 2017 16:57

@shellsy515 Here are two common purposes to use an alt text on image.

1) If you're developing a website for blind people, the content reader program can't read an image so instead it will look for alt text and read it instead.

2) If your image link is broken, you see broken image icon (bad UX). But if you have alt text, then browser will display alt text if the image link is broken

if you have these requirements then you will find yourself using alt text.
otherwise, it's not scientifically necessary. But having it serves bigger spiritual purpose
Tyler Moeller
@TylerMoeller
Jan 17 2017 16:58
@shellsy515 Technically, the alt attribute is required. Good points from @adityaparab above as well
Michelle Smith
@shellsy515
Jan 17 2017 16:59
Thanks @adityaparab Thank you @TylerMoeller . I really appreciate it.
CamperBot
@camperbot
Jan 17 2017 16:59
shellsy515 sends brownie points to @adityaparab and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 863 | @adityaparab |http://www.freecodecamp.com/adityaparab
:star2: 1330 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 17:05
@TylerMoeller do i have to add it in javascript or in CSS ??
or in both ?
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:05
@arefinsaad Add it as I show in the screenshot above
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 17:09
@TylerMoeller ..i did that .. but still not working !!!
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:12
@arefinsaad Okay, I will investigate further - most of the time, the problem is just the missing javascript.
Thongmonk
@Thongmonk
Jan 17 2017 17:13
Hi guys, I have some questions for you.
First one: i'm trying to build up the first front end project, the one about the tribute page. Do you think I should use only HTML without using CSS?
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 17:13
Thnks for ur reply .... :)
but let me know if u find it
Sorin Ruse
@sorinr
Jan 17 2017 17:15
@Thongmonk it will be very hard to do it only using html. you will need also some css to style it
Thongmonk
@Thongmonk
Jan 17 2017 17:16
@sorinr But how does it work in codepen? Cause on the console I used for the challanges I had the <style></style> thing, here it is kinda different
Sorin Ruse
@sorinr
Jan 17 2017 17:17
@Thongmonk everything you had between <style></style>, in codepen you put them into the css pane
Thongmonk
@Thongmonk
Jan 17 2017 17:18
@sorinr like, if I have to create a class
```
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:19
@arefinsaad You need the ID for the collapse menu and a # symbol in front of the data-target, see my code comments in the code below:
  <nav class="navbar navbar-default">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse">
            <!-- added a '#' sign in the data-target value above '#navbar-collapse' -->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>
      <div class="navbar-collapse collapse" id="navbar-collapse"> 
        <!-- added id="navbar-collapse" to the line above -->
        <ul class="nav navbar-nav" >
          <li><a href="#">About</a></li>
          <li><a href="#">About2</a></li>
          <li><a href="#">About3</a></li>
        </ul>
        <form class="navbar-form">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search"/>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
  </nav>
^^ This code above works
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 17:20
@TylerMoeller .... Thanks
U r great !!!
my code is working now
and thanks again for helping me out
CamperBot
@camperbot
Jan 17 2017 17:20
arefinsaad sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1331 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:20
No problem - have fun with the rest of your page :+1:
Sorin Ruse
@sorinr
Jan 17 2017 17:20
@Thongmonk in the fcc challenges where and how did you create a new class?
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 17 2017 17:20
:)
Thongmonk
@Thongmonk
Jan 17 2017 17:22
@sorinr Yeah sorry, I did not explain well.
The point is: I used to put everything in the style area, and then to assign the classes to every HTML element.
Now I should create the classes in the CSS part of Codepen without using the <style></style>?
David Botte
@DNBotte
Jan 17 2017 17:25
Suppose my site uses the same html element over and over again (like a navbar or footer). Is there a way I could save that element in one file, then link to that file with whatever page I'm making? Without php?
Kinda like how I can link to the same .css and .js files over and over again
I Googled this but it seems like it's only possible in php
Thongmonk
@Thongmonk
Jan 17 2017 17:26
The question is for anyone of course
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:27
@Thongmonk Yes, put your CSS in the CSS panel of codepen now. Don't use <style> tags or inline styles like <div style="font-weight: bold">
It keeps your code separate and easier to maintain - that's the idea anyway :)
@DNBotte You can dynamically generate it with JavaScript, yes
(if I understood your question correctly)
Sorin Ruse
@sorinr
Jan 17 2017 17:31
@Thongmonk sorry been away but hope you get what @TylerMoeller advised you
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:31
@sorinr I remember last week some people were trying to switch divs from right to left - do you know what challenge they were working on?
Looking for some coding practice projects like that...
Sorin Ruse
@sorinr
Jan 17 2017 17:33
@TylerMoeller i remember something but i'm not sure what challenge was. too old to remember things :)
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:33
lol :)
Thongmonk
@Thongmonk
Jan 17 2017 17:33

@TylerMoeller So if i have to apply to somthing i wrote in the HTML panel?
Like

<h1 class="blue-text">Hello World</h1>

After I created the class in the Css Panel without tags?

.blue-text {
  color=blue;
}
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:34
@Thongmonk Yes, but it's color: blue; not color=blue; :)
Thongmonk
@Thongmonk
Jan 17 2017 17:34
@TylerMoeller THanks man
CamperBot
@camperbot
Jan 17 2017 17:34
thongmonk sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1332 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:34
The Codepen tour shows how to do it for all three panels: https://s.codepen.io/pen/tour/welcome/start
Thongmonk
@Thongmonk
Jan 17 2017 17:34
@sorinr Thank you as well
CamperBot
@camperbot
Jan 17 2017 17:34
thongmonk sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1103 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 17 2017 17:35
@TylerMoeller let me check my forked pen maybe i have still something in there but not sure coz i usually delete the forked pens after a couple of days
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:36
@sorinr I found it --> :point_up: January 11, 2017 5:50 AM
Was just wondering where that project came from though - a couple people on the same day had questions about it
Sorin Ruse
@sorinr
Jan 17 2017 17:38
@TylerMoeller :+1: i kept that one
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:38
I have my own version of it too :) http://s.codepen.io/TylerMoeller/pen/ggPyEz
Sorin Ruse
@sorinr
Jan 17 2017 17:39
@TylerMoeller lol. really really nice. i like it
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:39
It was fun to work on that - looking for more of those :)
Sorin Ruse
@sorinr
Jan 17 2017 17:40
@TylerMoeller thats cool. i also like those kind of challanges
David Botte
@DNBotte
Jan 17 2017 17:42
@TylerMoeller ya kow I do recall trying something like that after seeing it on w3 schools and thinking it must have been for something else. My code was probably off. I'll give it another shot.
Thanks!
CamperBot
@camperbot
Jan 17 2017 17:42
dnbotte sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1333 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sorin Ruse
@sorinr
Jan 17 2017 17:43
@TylerMoeller i did that pen based on the pict the guy provided if you remember but after that i have never went further :) you did a nice job based on that
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:44
I remember something about switching elements and don't remember what the requirements were, so just made it up as I went along @sorinr
Thanks for the compliment, by the way - the animate.css library does most of the work :)
Sorin Ruse
@sorinr
Jan 17 2017 17:46
@TylerMoeller yes but i like more the idea on how you have used it
Sorin Ruse
@sorinr
Jan 17 2017 17:54
@TylerMoeller saved your pen for further reference. hope you don't mind :)
Tyler Moeller
@TylerMoeller
Jan 17 2017 17:55
@sorinr Don't mind at all - Have fun with it! :)
Jessi L Wasell
@JessiW
Jan 17 2017 17:56
Hi - I was in the DataViz room - but there doesn't seem to be anyone in there right now. Is someone here able to help me in React.js?
I'm having a problem with my Camper Leaderboard - all morning I've been trying to fix an error - and I finally fixed it but I'm not sure why my render doesn't render anything but the headers on the page. There's no errors to show me the possible problem
Here's my pen - my code isn't complete yet - I'm simply trying to see something on the page to show me I'm doing this right! :)
http://codepen.io/GenesisWebDesign/pen/apNKPy
Sorin Ruse
@sorinr
Jan 17 2017 17:58
@TylerMoeller one heart from my side for that pen :)
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:01
@sorinr Thanks!
CamperBot
@camperbot
Jan 17 2017 18:01
tylermoeller sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1104 | @sorinr |http://www.freecodecamp.com/sorinr
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:01
@JessiW You're going to make me brush up on my react some more :p
If you use the non-minified versions of the react files, you'll get more useful messages in the console to help point you in the right direction (hopefully)
I'm seeing lots of warnings about invalid <tr> nesting and needing a <tbody>
Jessi L Wasell
@JessiW
Jan 17 2017 18:02
Okay @TylerMoeller - I'm not even getting an error at this point - which is normally a good thing - but I can't tell whats wrong either....
Okay - where do you see that?
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:03
blob
I changed to the unminified react.js files and got the above ^^
Jessi L Wasell
@JessiW
Jan 17 2017 18:04
Ohh, okay - let me see - I'll try the same... @TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:05
Unfortunately, fixing that doesn't end up displaying the data you want...
Jessi L Wasell
@JessiW
Jan 17 2017 18:05
I do have a <tbody> in my code - hmmm ok, that's strange...
@TylerMoeller
maybe I'm just not calling the info correctly?
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:06
Presumably, you'll have to loop through all the usernames - you won't be able to have <td>{this.state.data.username}</td> generate all the users
But to fix the warnings in my screenshot, put the <tbody> inside <table> @JessiW
Jessi L Wasell
@JessiW
Jan 17 2017 18:07
@TylerMoeller - Ok, great - I'll fix that error real quick - just a sec...
@TylerMoeller - K so I fixed that - now to your comment about looping through the usernames - I'm going to look back on how I did that in Front End for camper news - and see how I can implement that in react. Do you think that will fix my problem?
Sorin Ruse
@sorinr
Jan 17 2017 18:10
@JessiW you are asking for $.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent', function(result) {.... but you r loading the pen over http. this way you will never get a response from the api
Jessi L Wasell
@JessiW
Jan 17 2017 18:10
@sorinr - okay, sorry I'm not sure I understand completely....
Sorin Ruse
@sorinr
Jan 17 2017 18:11
@JessiW if you load your pen over http you cannot make calls to apis over https
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:12
@JessiW I don't want to lead you down the wrong path since I haven't finished that project, but from looking at the json, you'll have to loop (forEach, .map(), etc..) through the users to display everyone on the leaderboard
@sorinr You sure about that? :)
Sorin Ruse
@sorinr
Jan 17 2017 18:13
@TylerMoeller i would say yes. it will encounter mixed content issues
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:13
Mixed content issues only happen in secure (HTTPS) origins
Sorin Ruse
@sorinr
Jan 17 2017 18:15
@TylerMoeller think its both ways
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:16
@sorinr Here's a basic quote machine that calls an API over HTTPS, but works when the pen is loaded over HTTP: http://s.codepen.io/TylerMoeller/pen/MbyvwJ
Jessi L Wasell
@JessiW
Jan 17 2017 18:16
@sorinr & @TylerMoeller - sorry my laptop battery just died so had to restart after plugging it in ! :) I'm reading your comments now.
Okay - so I get what you all are saying - @TylerMoeller I think I will try what you're suggesting - and go back to my camper news project to see what I can glean from that.
I think I did something similar to what you're suggesting in that project!
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:18
Good luck, @JessiW
Sorin Ruse
@sorinr
Jan 17 2017 18:18
@TylerMoeller yep. u r right
Jessi L Wasell
@JessiW
Jan 17 2017 18:18
Thanks @sorinr & @sorinr !! :)
CamperBot
@camperbot
Jan 17 2017 18:18
jessiw sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1105 | @sorinr |http://www.freecodecamp.com/sorinr
Jessi L Wasell
@JessiW
Jan 17 2017 18:18
oops - I meant to @TylerMoeller too - LOL!!
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:19
It can be confusing, @sorinr had the same discussion with JD a while back
Jessi L Wasell
@JessiW
Jan 17 2017 18:19
Thank you @TylerMoeller :)
CamperBot
@camperbot
Jan 17 2017 18:19
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1334 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:19
LOL :)
Jessi L Wasell
@JessiW
Jan 17 2017 18:20
LOL :)
Sorin Ruse
@sorinr
Jan 17 2017 18:20
@TylerMoeller ye. remember something. but as you said if you don't pay attention it can be confusing at first site
@TylerMoeller thanks. you deserve some sweeties :)
CamperBot
@camperbot
Jan 17 2017 18:25
sorinr sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1335 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:26
:) :+1:
brian-m-dc
@brian-m-dc
Jan 17 2017 18:26
Hey everyone! Just completed my tribute page. Would love some thoughts! http://codepen.io/brianm1090/pen/YNpEgJ
Faisal Patel
@faisal148991
Jan 17 2017 18:35
hi there, could anyone give me a hand with my function that tries and requests for a quote from an api? I am lost on the reason as to why its not working http://codepen.io/grootsbrowncousin/pen/mREYXX?editors=1010
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:42
@faisal148991 You are very close, use format=jsonp instead of json and add &jsonp=? to the end of the URL. See this forum post for details: https://forum.freecodecamp.com/t/solved-random-quote-machine-jquery-getjson-ajax-methods-not-working-on-codepen/54901
@brian-m-dc Nice start - it would be good to try and make your image responsive. http://getbootstrap.com/css/#images-responsive
Also, there are some issues to address in your HTML - in the codepen HTML panel, click the down arrow in the top, right-hand corner and select "Analyze HTML"
brian-m-dc
@brian-m-dc
Jan 17 2017 18:55
Thanks @TylerMoeller!
CamperBot
@camperbot
Jan 17 2017 18:55
brian-m-dc sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1336 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
brian-m-dc
@brian-m-dc
Jan 17 2017 18:56
What would you recommend for centering the image then? I found:
margin-left: auto;
margin-right: auto;
from the WC3. Does that make sense?
Tyler Moeller
@TylerMoeller
Jan 17 2017 18:57
@brian-m-dc If you read that link I sent you, it tells you how to center responsive images
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
Lots of useful info there :) you can give the image rounded borders, make it into a circle, a thumbnail, etc.
brian-m-dc
@brian-m-dc
Jan 17 2017 18:59
Lol duh it would help if I read through it
Robin
@LuckyRabbits
Jan 17 2017 19:06
Hi, I noticed that once you begin the "Responsive Design Using Bootstrap" portion the course kinda skips over how we enable Bootstrap e.g it running behind the scenes. Anyone know of a good reading resource on that?
Ritvars
@RitvarsZ
Jan 17 2017 19:08
@LuckyRabbits Look up linking css files in html, ots super simple
Robin
@LuckyRabbits
Jan 17 2017 19:09
🌈 😉 that is good news @RitvarsZ
thank you
Ali Murtaza
@AliMurtazaInnocent
Jan 17 2017 19:19
Hi I need some help on priority bases so please anyone for me?
I am facing some an issue of twitter tweet button on random quote machine project i can send the link to check it out.
Ali Murtaza
@AliMurtazaInnocent
Jan 17 2017 19:27
anybody here?
Tyler Moeller
@TylerMoeller
Jan 17 2017 19:38
@AliMurtazaInnocent Feel free to send your link
Philipp Scholz
@philipp32
Jan 17 2017 20:03
Hey, I want the FA icon for search to appear. But it doesn't. Could you please take look at tell me why? :)
http://codepen.io/philipp32/pen/ggwJoX
Kacper Łukawski
@lukawski
Jan 17 2017 20:06
@philipp32 did you add fa to your project?
Robin
@LuckyRabbits
Jan 17 2017 20:17
Hi does anyone have a recommendation for a GUI editor for HTML5, CSS and Bootstrap?
ximocoperations
@ximocoperations
Jan 17 2017 20:18
hey juys can i use css desk as an alternative to codepen?
Nick Danvers
@Ravenor222
Jan 17 2017 20:20
Hey guys. wondering if I can get some quick help
Has to do with the portfolio webpage project
Philipp Scholz
@philipp32
Jan 17 2017 20:25
@Ravenor222 sure
what is it?
Igor Amidzic
@igoramidzic
Jan 17 2017 20:32
Anyone know how to center float items?
I have a ul with images float left, but I want them in center of the container
Sergio
@scamargo
Jan 17 2017 20:38
hey guys I'm trying to link to twitch.tv channels, but twitch.tv seems to have trouble loading the channel: https://codepen.io/scamargo/pen/GrNJor?editors=1111
I recognize this issue may be on the twitch end, however, any suggestions on what I could do differently would be appreciated
Milos Ratkovic
@Shadow032
Jan 17 2017 20:39
@philipp32 Hey,you need to add this link in your html in order to get your FA icons work. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@philipp32 just add this and you'll see it.
You'll just need to position it a bit :smile:
Tyler Moeller
@TylerMoeller
Jan 17 2017 20:48
@LuckyRabbits Lots of people use http://codepen.io
@scamargo Twitch doesn't let you open links in a new tab from within an iFrame. Load your codepen in debug mode and it should work fine.
@igoramidzic This might be of use: http://stackoverflow.com/a/21508512
Tyler Moeller
@TylerMoeller
Jan 17 2017 20:55
@ximocoperations As long as Free Code Camp can view the code in your project, you can use any site to build your page and display it.
Arpan Das
@Code-of-the-noob
Jan 17 2017 20:58
So in the random Quote Machine Zipline..
Do we have to import any special files where the quotes will be or do we use our own??
If we are using our own where do we keep the file.??
Sergio
@scamargo
Jan 17 2017 21:07
@TylerMoeller thanks!
CamperBot
@camperbot
Jan 17 2017 21:07
:star2: 1337 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
scamargo sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Margaret
@Margaret2
Jan 17 2017 21:18
@Code-of-the-noob some people use a random quotes API, which you can find by searching around on Google, and some people just use an array of quotes and randomly pull quotes out of the array
Peter Phillips
@Cowboy59
Jan 17 2017 21:39
can someone help me try to put col - 3 wide by 3 wide on page 3 but not working for me
was using col-md-4 but would only go strait down page not side by side
Peter Phillips
@Cowboy59
Jan 17 2017 21:49
anyone here?
Tyler Moeller
@TylerMoeller
Jan 17 2017 21:52
@Cowboy59 Typical way to get a 3-column md-sized grid is:
  <div class="row">
    <div class="col-md-4">
      ...content...
    </div>
    <div class="col-md-4">
      ...content...
    </div>
    <div class="col-md-4">
      ...content...
    </div>
  </div>
Peter Phillips
@Cowboy59
Jan 17 2017 21:52
ok let me try ty
Tyler Moeller
@TylerMoeller
Jan 17 2017 21:53
Also, you only need this link once - put it at the very bottom of your HTML:
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
Peter Phillips
@Cowboy59
Jan 17 2017 21:59
ty that fixed it
Jonathan Marx Domah
@marxcom
Jan 17 2017 22:06
I have to redo my profile page
Sunny Wong
@swong194
Jan 17 2017 22:43
Hi everyone I just attempted the tribute page
this is my very first time doing something like this i was wondering if you guys could give me some feedback
Tom
@moT01
Jan 17 2017 22:47
@swong194 looks pretty good
if i wanted to be picky, ...the paragraph at the bottom is too close to the border
i would maybe center his quote, ...not a big deal there
it might look pretty cool if you gave that grey box rounded corners on top to match the picture
all your styling is in the html, usually its put in the css area
monkeyfingerz
@monkeyfingerz
Jan 17 2017 22:51
how do i share my codepen page?
Tom
@moT01
Jan 17 2017 22:52
@monkeyfingerz copy and paste the url
@swong194 on the top right of each codepen section theres a little arrow you can click and find an analyze option, ...shows a few errors in the html
Sunny Wong
@swong194
Jan 17 2017 23:02
@moT01 thank you, i adjusted the background. For some reason i can't move the margin on the bottom.. i moved the quote a bit further from the right side. Is it wrong if i style in the html area?
CamperBot
@camperbot
Jan 17 2017 23:02
swong194 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 17 2017 23:05
not wrong, just not the way most people do it
Sunny Wong
@swong194
Jan 17 2017 23:07
@moT01 also i dont think the errors are correct, some of the stuff is on external style sheets i selected. i just don't know what The BEM element 'MLK-picture' must be a descendent of 'MLK'. this means >__>
Tom
@moT01
Jan 17 2017 23:11
yea im not sure on that one, ...looks like you could ignore it.. the last <a> is missing the =
Ryan Schumm
@2667schummr
Jan 17 2017 23:11
Hey guys. I just finished the weather app. I saved the codepen and closed my browser. When I reopened it, the getJSON method was not working anymore. Has anyone had this problem?
Tom
@moT01
Jan 17 2017 23:12
i would take a look if you share the pen, ...i have not had that problem

@swong194 descendant means its nested within the element, ...

<div class="MLK">
    <div class="MLK-picture"></div>
</div>

here mlk-picture is the descendant or child, ...and mlk is the parent

Tom
@moT01
Jan 17 2017 23:20
and whats the problem
Ryan Schumm
@2667schummr
Jan 17 2017 23:20
the api is loading in the getJSON method
*not
Tom
@moT01
Jan 17 2017 23:24
yea i see, im looking, it looks like its right
Addison Dalton
@Addison-Dalton
Jan 17 2017 23:25
@2667schummr I am having the exact same problem. It worked fine yesterday when I submitted my project. Today it isn't working.
In the chrome console, I get Failed to load resource: net::ERR_CONNECTION_REFUSED.
Ryan Schumm
@2667schummr
Jan 17 2017 23:28
Yeah its frustrating. Maybe it will work tomorrow haha
Addison Dalton
@Addison-Dalton
Jan 17 2017 23:29
What's even stranger is, if I open my the app on my phone, it works fine still.
Tom
@moT01
Jan 17 2017 23:33
yea im not sure, mine works and its the exact same
Tyler Moeller
@TylerMoeller
Jan 17 2017 23:35
@2667schummr Open Weather Map won't work when your codepen is loaded over HTTPS - the API only supports HTTP. This forum post may help get you in the right direction: https://forum.freecodecamp.com/t/show-the-local-weather-openweathermap-warning/60292
@Addison-Dalton ^^ maybe the same issue you're hitting too
Addison Dalton
@Addison-Dalton
Jan 17 2017 23:36
@TylerMoeller Possibly, I'll take a look.
Tom
@moT01
Jan 17 2017 23:36
ahh, i shoulda had that, sure seen that problem enough
Ryan Schumm
@2667schummr
Jan 17 2017 23:37
I just created a new pen and copied all of the old code and it works
Tyler Moeller
@TylerMoeller
Jan 17 2017 23:39
@2667schummr to be clear,
But only if you're not using Chrome :)
Tom
@moT01
Jan 17 2017 23:42
any feedback on my twitch project?
http://codepen.io/moT01/pen/WRGERp
Ryan Schumm
@2667schummr
Jan 17 2017 23:42
@TylerMoeller what did you change in the code?
Tyler Moeller
@TylerMoeller
Jan 17 2017 23:43
@2667schummr I didn't change the code, one is opened over https:// and the other is http://
Addison Dalton
@Addison-Dalton
Jan 17 2017 23:43
@TylerMoeller switching to HTTP for codepen worked for me. Thanks!
CamperBot
@camperbot
Jan 17 2017 23:43
addison-dalton sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1339 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 17 2017 23:43
np :+1:
Tyler Moeller
@TylerMoeller
Jan 17 2017 23:53
Nice work @moT01 There seem to be some missing images. Storbeck has one for example. Also, top/bottom margins can't be used with inline elements, so the 0px of margin won't take effect, it will just use the browser defaults which I think is 1em:
.heading p {
    display: inline;
    margin: 0 2px; 
}