These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Aug 2016
wuksha
@wuksha
Aug 28 2016 00:00
@coffeebeanzz Thank you very much! I stoped here because I don't know what to do now
CamperBot
@camperbot
Aug 28 2016 00:00
wuksha sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:warning: wuksha already gave coffeebeanzz points
coffeebeanzz
@coffeebeanzz
Aug 28 2016 00:01
@wuksha the next project is the portfolio. I used bootstrap on mine
Most people put placeholder pictures for projects and go back and update it
wuksha
@wuksha
Aug 28 2016 00:06
@coffeebeanzz I will try to make portfolio with bootstrap tomorow.
When i start code i feel like I don't know anything and i have to see examples always. :worried:
what is advantage of putting placeholder instead of real picture?
coffeebeanzz
@coffeebeanzz
Aug 28 2016 00:09
@wuksha i mean to put a picture if you dont have a project to put there. I had four pictures on mine but since ive finished the quote machine i just have that on there instead
@wuksha seeing examples is not bad. It will get easier with practice
here's a good link for bootstrap: http://getbootstrap.com/css/
wuksha
@wuksha
Aug 28 2016 00:12
thank you @coffeebeanzz , you are very kind. :smile:
CamperBot
@camperbot
Aug 28 2016 00:12
wuksha sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:warning: wuksha already gave coffeebeanzz points
coffeebeanzz
@coffeebeanzz
Aug 28 2016 00:12
you're welcome @wuksha and here's a brownie for completing your first project :) thanks!
CamperBot
@camperbot
Aug 28 2016 00:12
coffeebeanzz sends brownie points to @wuksha :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for wuksha
John Doe
@codingisfun11
Aug 28 2016 00:34
blob
how can I improve the code :D
blob
Eric Bezanson
@ericbezanson
Aug 28 2016 00:55
@coffeebeanzz bro... You gotta seize the cheese. Believe in yourself! You got it dude.
Kantra
@removed~kantrakantra
Aug 28 2016 01:25

Hey guys, I have a CSS question. I have a letter-spacing animation but I'm having a hard time centering the text. It keeps moving off center. I need it to stay centered from the beginning of the animation until the end.

http://codepen.io/kantrakantraa/pen/qNZawR

buiphuking
@buiphuking
Aug 28 2016 02:20
anybody good at css? i want to ask something ?????????????
Jesus Guzman
@gdevtech
Aug 28 2016 02:21
@buiphuking what seems to be the question? Maybe I can help...
puzl3d
@puzl3d
Aug 28 2016 02:23
Hi all. I am having an issue with bootstrap grid system I guess. I feel that my question would be best served by attaching the code. What is the best way to do that?
Jesus Guzman
@gdevtech
Aug 28 2016 02:24
@puzl3d Yes please attach a codepen link to help
puzl3d
@puzl3d
Aug 28 2016 02:27
@gdevtech http://codepen.io/Puzl3d/pen/rLXmxa?editors=1100 I can't figure out why the pic keeps wrapping under the place holder text.
Jesus Guzman
@gdevtech
Aug 28 2016 02:30
@puzl3d which is the placeholder text?
Chris
@capozzic1
Aug 28 2016 02:31
Hello all. For the "Show the Local Weather" app, would I make it from the context of my current location, or for the location of anyone that views it?
puzl3d
@puzl3d
Aug 28 2016 02:31
@gdevtech the <p> element under my name
@gdevtech i have read the Bootstrap documentation and I feel like it's set up right but obviously not.
Daulis M Gonzalez
@daulis809
Aug 28 2016 02:33
@capozzic1 i think it should show the weather of anyone using your app, that way those who live outside you city can get an accurate weather
Jesus Guzman
@gdevtech
Aug 28 2016 02:33
Oh I see ok give me a sec @puzl3d
LPR-309
@LPR-309
Aug 28 2016 02:33
@puzl3d It might be the </img> tag. Images are single tags, you don't need end tags for them.
puzl3d
@puzl3d
Aug 28 2016 02:33
@gdevtech sure. I appreciate it.
Jesus Guzman
@gdevtech
Aug 28 2016 02:34
@LPR-309 is right img is self close tag but thats not the issue
Cleaning code up now stand by
puzl3d
@puzl3d
Aug 28 2016 02:35
@LPR-309 Ohh I see.
Jesus Guzman
@gdevtech
Aug 28 2016 02:38
@puzl3d So I use https://www.dirtymarkup.com/ to help me see the guides on where the div starts and ends. But you have everything wrpa correctly. The first thing that I should have done is check Codepen to see if you enable Boostrap and it is not enable... There is the issue. Enable bootstrap in codepen and your good to go. Do you know how to do that?
puzl3d
@puzl3d
Aug 28 2016 02:40
@gdevtech Oh wow. I feel like a fool. Thank you very much. I will figure it out. I did it for the last project but I forgot to do it for this one.
CamperBot
@camperbot
Aug 28 2016 02:40
puzl3d sends brownie points to @gdevtech :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @gdevtech |http://www.freecodecamp.com/gdevtech
Jesus Guzman
@gdevtech
Aug 28 2016 02:41
@puzl3d If not... On codepen on the top left next to HTML click the gear > Click tab CSS > then in the bottom click Quick Add > Select bootstrap
puzl3d
@puzl3d
Aug 28 2016 02:42
@gdevtech Got it. Awesome. Thank you again. I was loosing my mind!
CamperBot
@camperbot
Aug 28 2016 02:42
puzl3d sends brownie points to @gdevtech :sparkles: :thumbsup: :sparkles:
:warning: puzl3d already gave gdevtech points
Jesus Guzman
@gdevtech
Aug 28 2016 02:42
No problem
Aaron
@apalm1341
Aug 28 2016 03:15
@apalm1341
http://codepen.io/ap1341/pen/XKvggq
Can someone help me please?
Jesus Guzman
@gdevtech
Aug 28 2016 03:15
@apalm1341 Whats up?
Aaron
@apalm1341
Aug 28 2016 03:16
@gdevtech hey there. I am having trouble with this div
the div around my h1 and h3 elements
Jesus Guzman
@gdevtech
Aug 28 2016 03:17
@apalm1341 box class?
Aaron
@apalm1341
Aug 28 2016 03:17
I want to be able to have a box around those elements
but the box is shifted up mostly out above nav bar where you can't see most of it
@gdevtech yes, I am talking about the box class
Jesus Guzman
@gdevtech
Aug 28 2016 03:23
Ok cool let me take a look at it @apalm1341
it seems that you figured out that your transform cause the issue
Aaron
@apalm1341
Aug 28 2016 03:37
@gdevtech yep, I solved it I believe
still having issue
There is something I am not doing like this guy in this video
@gdevtech would you happen to know why?
Jesus Guzman
@gdevtech
Aug 28 2016 03:39
@apalm1341 Um I have not watch this video but if you just tell me maybe I can help out more?
Aaron
@apalm1341
Aug 28 2016 03:41
I seem to have a thin block type of gap between my nav bar and div block
but the guy doens't
*doesn't
John Doe
@codingisfun11
Aug 28 2016 03:42
blob
hello good people!
Jesus Guzman
@gdevtech
Aug 28 2016 03:43
Its your transform on the class box that is causing this @apalm1341
Aaron
@apalm1341
Aug 28 2016 03:44
what should I do then?
I don't think the guy in video even used it but I could be wrong
don't even think he even used the transform thing
Jesus Guzman
@gdevtech
Aug 28 2016 03:45
Looking at the video he never used transform and his class is called block. Start at time 17:55 and see how he does it. @apalm1341

@apalm1341 So, for me when I started to learn development I love tutorials but always wanted to keep up with them while coding and watching at the same time which never worked for me... So, what I did and I know sounds a little silly but works for me is that I watched the tutoiral without coding and then the second time I code with the person. I with try that method out so that ;

  1. You are actually listening to the concepts on why the he/she is doing what they are doing.

and

  1. So the second time you watch you already know what the next move will be.
Aaron
@apalm1341
Aug 28 2016 03:51
@gdevtech good advice
looked at video though and can't figure it out
I know I shouldn't be using the transform thing
but for my situation it won't look at all like his if I don't
Jesus Guzman
@gdevtech
Aug 28 2016 03:52
Right because if you take it out then it goes away right?
Aaron
@apalm1341
Aug 28 2016 03:52
yep
and I don't want it to do that
Jesus Guzman
@gdevtech
Aug 28 2016 03:53
OK good so now look at the parent div class pageOne
Aaron
@apalm1341
Aug 28 2016 03:53
@gdevtech ok
Jesus Guzman
@gdevtech
Aug 28 2016 03:53
What is that div actually doing to all of its child divs?
Aaron
@apalm1341
Aug 28 2016 03:54
giving a background image
and setting a height and a margin-top
and a background size cover
Jesus Guzman
@gdevtech
Aug 28 2016 03:56
OK good, So for your margin top you are saying hey lets remove margin and push them up by 10%. This applies to all of your children divs.
Does that make sense @apalm1341
Aaron
@apalm1341
Aug 28 2016 04:01
So, you are saying it pushes just the children divs inside the pageOne div class up by 10%?
Jesus Guzman
@gdevtech
Aug 28 2016 04:02
Yup
Aaron
@apalm1341
Aug 28 2016 04:02
okay, so...
Jesus Guzman
@gdevtech
Aug 28 2016 04:03
remove the margin-top and then remove all translate
@gdevtech okay, I just did that
but there is still white gap
and still didn't move buttons
?
Jesus Guzman
@gdevtech
Aug 28 2016 04:08
Good now take a look at your H1 tag
Aaron
@apalm1341
Aug 28 2016 04:08
ok
Jesus Guzman
@gdevtech
Aug 28 2016 04:08
and take a look at this..
So the reason Im pointing you to the site is because every browser sets its own styles but since your are using boostrap framework they also have a default style for the tags.
Aaron
@apalm1341
Aug 28 2016 04:13
okay
I was able to remove the white gap
I looked at h1 element in css and made sure to uncomment out the two things I had commented out
with the margin-top and padding
Jesus Guzman
@gdevtech
Aug 28 2016 04:14
Yup good. Also do you know about the inspect element tool on browsers?
Aaron
@apalm1341
Aug 28 2016 04:14
but my elements didn't shift over along with it too
*but my buttons didn't shift over along with it too
meant to say buttons not elements
@gdevtech and yes, I know about it
Jesus Guzman
@gdevtech
Aug 28 2016 04:15
Okay use it and hover over your buttons btnlist class tag
then remove the transform
Aaron
@apalm1341
Aug 28 2016 04:17
I just removed the transform in codepen
I don't know how to use the inspect element tool to do that on browsers?
I just knew how to click inspect to get into that area
so, now my buttons aren't too far down but are right below the div box
@gdevtech ....
Jesus Guzman
@gdevtech
Aug 28 2016 04:20
Good your getting there
Aaron
@apalm1341
Aug 28 2016 04:20
now what?
Jesus Guzman
@gdevtech
Aug 28 2016 04:22
So now the buttons need to be center right?
Aaron
@apalm1341
Aug 28 2016 04:22
right
Jesus Guzman
@gdevtech
Aug 28 2016 04:22
Ok good, do you reemeber how you center your h1 and h3?
Aaron
@apalm1341
Aug 28 2016 04:22
should I center using inline styling or just those style declarations or whatever you call them, not even sure if I am calling them right lol
Chris
@capozzic1
Aug 28 2016 04:24
what are you centering?
Jesus Guzman
@gdevtech
Aug 28 2016 04:25
so you are calling a class text-center for your box class which centered the h1 and h3. This class is part of the bootstrap frame work and inputs the css as text-align: ccenter; So you can add the css or your can add the class to your btnlist. thats up to you.
Aaron
@apalm1341
Aug 28 2016 04:30
@gdevtech couldn't I also use a center tag?
Jesus Guzman
@gdevtech
Aug 28 2016 04:30
I dont think people use that anymore thats html4
Aaron
@apalm1341
Aug 28 2016 04:30
and just put it around the div that has class btnlist?
Chandrahas P
@Chan11
Aug 28 2016 04:31
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">My Portfolio</a></div>
    <!--<div class="nav-collapse collapse navbar-responsive-collapse">-->
        <ul class="nav navbar-nav pull-right">
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Work</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>

            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>My Projects</a>
<ul class="dropdown-menu">
    <li><a href="#">AAAAAAa</a></li>
    <li><a href="#">AAAAAAa</a></li>
<li><a href="#">AAAAAAa</a></li>
<li><a href="#">AAAAAAa</a></li>
        </ul><!-- end of dropdown menu-->
            </li><!--end of dropdown -->
        </ul><!-- -->
    <!--</div>-end nav collapse-->
</div><!-- end of container-->
</nav><!-- -->
something problem withmy dropdown menu,pls help
Jesus Guzman
@gdevtech
Aug 28 2016 04:31
lets stay with html5 and use the text-align: center;
and css3
Aaron
@apalm1341
Aug 28 2016 04:34
@gdevtech okay cool. That centered my buttons
I added the text-align center to my css though
in css section in codepen
is that okay too?
I think what you were saying though was to do inline styling? not sure cause
Jesus Guzman
@gdevtech
Aug 28 2016 04:38
never do inline style. calling classes is different then inline style. You did it right.
@Chan11 I assume you are using bootstrap?
Chandrahas P
@Chan11
Aug 28 2016 04:43
@gdevtech yes using bootstrap. but dropdown menu is not working
Jesus Guzman
@gdevtech
Aug 28 2016 04:47
OK cool reviewing now
Aaron
@apalm1341
Aug 28 2016 04:48
@gdevtech thank-you very much
CamperBot
@camperbot
Aug 28 2016 04:48
apalm1341 sends brownie points to @gdevtech :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @gdevtech |http://www.freecodecamp.com/gdevtech
Aaron
@apalm1341
Aug 28 2016 04:48
greatly appreciate your help
Goodnight all!
Jesus Guzman
@gdevtech
Aug 28 2016 04:48
No problem
Aaron
@apalm1341
Aug 28 2016 04:48
:smile:
Jesus Guzman
@gdevtech
Aug 28 2016 04:50
@Chan11 There are a few things that are not correct in calling classes using bootstrap framework
Try reviewing there guide http://getbootstrap.com/components/#navbar
Chris Cullen
@123xylem
Aug 28 2016 05:30
function cpu() { //CPU move chosen from random choice var
  if (userX) {
    if (answer.indexOf("A") >= 0 && answer.indexOf("C") >= 0) {
      $("#B").text("O").css("color", "blue");
    } else if (answer.indexOf("A") >= 0 && answer.indexOf("I") >= 0) {
      $("#E").text("O").css("color", "blue");
    } else if (answer.indexOf("A") >= 0 && answer.indexOf("G") >= 0) {
      $("#D").text("O").css("color", "blue");
    } else if (answer.indexOf("B") >= 0 && answer.indexOf("H") >= 0) {
      $("#E").text("O").css("color", "blue");
    } else if (answer.indexOf("C") >= 0 && answer.indexOf("I") >= 0) {
      $("#F").text("O").css("color", "blue");
    } else if (answer.indexOf("C") >= 0 && answer.indexOf("G") >= 0) {
      $("#E").text("O").css("color", "blue");
    } else if (answer.indexOf("D") >= 0 && answer.indexOf("F") >= 0) { 
      $("#E").text("O").css("color", "blue");
    } else {  //if human not 1 move from winning pick randomly
      $("#" + choice + "").text("O").css("color", "blue");
      cpuAnswer.push(choice.toUpperCase());    console.log(cpuAnswer);

    }
QUESTION:
Here im saying if user moves to within 1 move of winning Get AI to take that winnning move... Are my if else statements correct?
My code is lagging with this and I dont think it works for some reason?
If I go to position A and C cpu freezes... It should go to B
tyl-er
@tyl-er
Aug 28 2016 06:07

So none almost none of my code works. I'm just trying to see the info from the weather API, but nothing shows up. It also doesn't show up if I try to print it to the console. And there's supposed to be a JS drawing on the page, but that doesn't show up either. Not sure what I'm doing wrong.

http://codepen.io/tyl-er/pen/ZOgXxB?editors=0011

var weather;

var api = 'http://api.openweathermap.org/data/2.5/weather?q=';
var apiKey = '&APPID=001b0f58045147663b1ea518d34d88b4';
var units = '&units=metric';

var input;

function setup() {
createCanvas(400, 200);

var button = select('#submit');
button.mousePressed(weatherAsk);

input = select('#city');
}

function weatherAsk() {
var url = api + input.value() + apiKey + units;
loadJSON(url, gotData);
}

function gotData(data) {
weather = data;
}

function draw() {
background(0);
if (weather) {
var temp = weather.main.temp;
var humidity = weather.main.humidity;
ellipse(100, 100, temp, temp);
ellipse(300, 100, humidity, humidity);

 document.getElementById("mytext").value = humidity;

}
}

Fourbits
@Fourbits
Aug 28 2016 06:18
@tyl-er You have a function called setup(), but you never call it.
tyl-er
@tyl-er
Aug 28 2016 06:21
Can I call by pressing the submit button?
Sorry I'm kinda tired. Going to bed now thanks for the help @Fourbits
CamperBot
@camperbot
Aug 28 2016 06:24
tyl-er sends brownie points to @fourbits :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @fourbits |http://www.freecodecamp.com/fourbits
Fourbits
@Fourbits
Aug 28 2016 06:28
@tyl-er You should call it in your JavaScript. No need to wait for user action.
Chris Cullen
@123xylem
Aug 28 2016 06:55
else if (answer.indexOf("D") >= 0 && answer.indexOf("F") >= 0) {
  $("#e").text("O").css("color", "blue");
  if (answer.indexOf("E") >= 0 || cpuAnswer.indexOf("E") >= 0) {
    $("#" + choice + "").text("O").css("color", "blue");
    cpuAnswer.push(choice.toUpperCase());

  }
}
    else if (answer.indexOf("H") >= 0 && answer.indexOf("I") >= 0) {
  $("#g").text("O").css("color", "blue");
  if (answer.indexOf("G") >= 0 || cpuAnswer.indexOf("G") >= 0) {
    $("#" + choice + "").text("O").css("color", "blue");
    cpuAnswer.push(choice.toUpperCase());

  }
}else {
  $("#" + choice + "").text("O").css("color", "blue");
  cpuAnswer.push(choice.toUpperCase());
  console.log(cpuAnswer);

}
The computer will console.log the correct move in certain situations but wont place its O in the box. Can you help me debug this?
http://codepen.io/123xylem/pen/JKqYZY?editors=0011
Ryan Apolinar
@ryanapolinar
Aug 28 2016 08:27
How do I stop Bootstrap columns from overlapping? All of my column sizes add up to 12 but they overlap when they reach a small width (around 600px or so). Here is the Codepen
Ryan Apolinar
@ryanapolinar
Aug 28 2016 08:35
Nevermind, figured out I can add multiple col-*-* depending on the size to specify different column sizes when it hits a threshold
Chris Cullen
@123xylem
Aug 28 2016 08:46
http://codepen.io/123xylem/pen/JKqYZY?editors=0011
Can you help me find the bracket problem making my ELSE UNEXPECTED? It starts after------ if( userx)
Brendan Costigan
@BrendanCostigan
Aug 28 2016 09:01
I might be wrong but I think you have a bracket problem, on line 346 you have an else statement after the bracket that closes the function.
Sorry that should have been 345
Chris Cullen
@123xylem
Aug 28 2016 09:02
@BrendanCostigan hey when i removethe bracket it says unexlected else though
Brendan Costigan
@BrendanCostigan
Aug 28 2016 09:11
@123xylem There is a lot of code there so I might well be wrong but my guess is that the problem is to do with those double brackets at line 300.
@123xylem The else on line 345 has nothing to match with and I suspect that you intended it to continue from the if (userX) {. I'm a beginner with Javascript so I cannot read and understand you code quickly enough to be sure.
@123xylem Need to walk the dog now so got to drop out. Good luck.
Chris Cullen
@123xylem
Aug 28 2016 09:14
ok thanks for tryinh @BrendanCostigan
CamperBot
@camperbot
Aug 28 2016 09:14
123xylem sends brownie points to @brendancostigan :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @brendancostigan |http://www.freecodecamp.com/brendancostigan
Tamarcuse
@Tamarcuse
Aug 28 2016 09:43
Hey guys I have a question regarding using an API, When using an API to get a JSON file with the getJSON method you can do that using a url. where do you get that url from? is there like a table to contents for each API?
the doer
@ewathedoer
Aug 28 2016 09:51
For all those who learn flexbox https://www.youtube.com/watch?v=hg5X7XFdpWc
AlBMyName
@IshmaRey-Hool
Aug 28 2016 10:03

Hi Guys,

I was doing ...
https://www.freecodecamp.com/challenges/build-a-random-quote-machine

This is my pen:
http://codepen.io/Ishma-Reyhool/pen/pyZJvx

Could someone tell me why my color change feature at the very bottom isn't working.

Karayel
@Karayel
Aug 28 2016 10:06
Hı guys, I have a problem with code pen. I am getting XHR failed loading: GET but I am sure, I am doing right. What's wrong with codepen about xhr ? Thanks
Gary Siu
@GarySiu
Aug 28 2016 10:51
@IshmaRey-Hool I would not recommend your approach (hardcoding every quote in a case statement)
@Karayel Link to your code?
@IshmaRey-Hool Consider using an array of quotes. This means you can automatically check how many quotes you have by checking it's length and randomly pick from that
Gary Siu
@GarySiu
Aug 28 2016 10:56
@IshmaRey-Hool Same with your colour choices
Stephen James
@sjames1958gm
Aug 28 2016 11:11
@Karayel There is a syntax error -
@Karayel I would use keypress instead of keyup
also inside your if (keycode === 13 code) add (event.preventDefault();) to prevent your form from getting submitted and refreshing your page
Karayel
@Karayel
Aug 28 2016 11:12
@sjames1958gm how can I pretent xhr request get error?
@sjames1958gm Thanks for your advice
CamperBot
@camperbot
Aug 28 2016 11:12
karayel sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2904 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 28 2016 11:14
I am not seeing an error?
Karayel
@Karayel
Aug 28 2016 11:15
@sjames1958gm Now, I can't see neither. But I have a problem about calling API in codepen. No data is comming.
greg
@wearenotgroot
Aug 28 2016 11:18
@Karayel should you be using url instead of this --"https://api.github.com/users/jeresig" on the $.ajax ?
Stephen James
@sjames1958gm
Aug 28 2016 11:19
@Karayel your logResults has to be in the global namespace for the repsonse to see it. Move logResults to the very top of the js section
Karayel
@Karayel
Aug 28 2016 11:20
@wearenotgroot opp, my mistake
Andrew1024
@Andrew1024
Aug 28 2016 11:21
Could anybody help with this code? http://codepen.io/Andrew1024/pen/LkwOdv
I can't add the offline streamers
Karayel
@Karayel
Aug 28 2016 11:21
@sjames1958gm how can I do that ? I don't know how can I use scope in javascript
Stephen James
@sjames1958gm
Aug 28 2016 11:22
@Karayel Move it outside the $(function () {});
Gary Siu
@GarySiu
Aug 28 2016 11:22
@Karayel Your form is reloading the page whenever you submit. You should look into event.preventDefault()
Oh I see @sjames1958gm beat me to the punch on that one :P
@Andrew1024 You're checking for data.stream. However the stream property is not on the data object but rather each streamer...
Karayel
@Karayel
Aug 28 2016 11:27
@GarySiu I still can't see json data in console.
Stephen James
@sjames1958gm
Aug 28 2016 11:28
@Andrew1024 You are missing the closing " on your class in the offline case $('.list-group').append('<li class="list-group-item>offline</li>')
Gary Siu
@GarySiu
Aug 28 2016 11:29
@Karayel Do you see the error object the server is returning?
Andrew1024
@Andrew1024
Aug 28 2016 11:31
@sjames1958gm Thank you :smile: Is there other ways to do the same but without so much HTML in javascript?
CamperBot
@camperbot
Aug 28 2016 11:31
andrew1024 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2906 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Gary Siu
@GarySiu
Aug 28 2016 11:32
@Andrew1024 Since you're transpiling with babel and using es6 anyway, you might want to check out template strings: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Stephen James
@sjames1958gm
Aug 28 2016 11:33
@Andrew1024 You could use document.createElement("li"), the add the class through HTML element functions. Or use a framework that allows better use of templates
Gary Siu
@GarySiu
Aug 28 2016 11:34
createElement is probably the more professional/orthodox thing
Karayel
@Karayel
Aug 28 2016 11:38
@GarySiu @sjames1958gm I did it. Thanks
CamperBot
@camperbot
Aug 28 2016 11:38
karayel sends brownie points to @garysiu and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 229 | @garysiu |http://www.freecodecamp.com/garysiu
:warning: karayel already gave sjames1958gm points
Gary Siu
@GarySiu
Aug 28 2016 11:38
:+1:
Najat91
@Najat91
Aug 28 2016 11:50
this is hard :(
greg
@wearenotgroot
Aug 28 2016 11:52
@Najat91 just keep at it. No pain no gain! right?
Najat91
@Najat91
Aug 28 2016 11:54
@wearenotgroot yes right
Adam Pankowski
@losbaltica
Aug 28 2016 11:55
hi i got a problem with my Random Quote Machine. I dont know why my API dont work. Can somebody help me?
https://codepen.io/codermaster/pen/LkvXqR?editors=0010
greg
@wearenotgroot
Aug 28 2016 11:55
@Najat91 :+1:
@losbaltica either change your codepen connection to use http instead of https or use some proxy (https://crossorigin.me/'your api url here')
Adam Pankowski
@losbaltica
Aug 28 2016 11:58
hmm i cant find it. i guess it is in settings section
greg
@wearenotgroot
Aug 28 2016 12:00
@losbaltica codepen.io/codermaster/pen/LkvXqR?editors=0010 <------------no https
also I think foristmatic only accepts http
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";
Adam Pankowski
@losbaltica
Aug 28 2016 12:02
@wearenotgroot thx ! :)
CamperBot
@camperbot
Aug 28 2016 12:02
losbaltica sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1484 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Aug 28 2016 12:04
@losbaltica :+1:
John
@jden3725
Aug 28 2016 13:22
Hello,

Hello, my thumbnail images are not displaying the same size. Does anyone know how to correct this? In css, I have img thumbnail {max-height: 100%; max-width: 100%} <div id="Portfolio" class="container">
<div class="pageThree page-header text-center">
<h1>Portfolio</h1>

<div class="row">
<div class="col-sm-4">
<a href="http://s.codepen.io/John9167/debug/QERPvY" target="_blank">
<img class="img-thumbnail" src="https://s22.postimg.org/41ac2ga41/lincoln_jpg.jpg" alt="photo of lincoln">
<p>Tribute Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="https://s.codepen.io/John9167/debug/VjJqpm" target="_blank">
<img class="img-thumbnail" src="https://s20.postimg.org/mcm56ul4d/portfolio.jpg" alt="photo of portfolio">
<p>Portfolio Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" target="_blank">
<img class="img-thumbnail" src="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" alt="photo of web design desk">
<p>Future Project Placeholder</p>
</a>
</div>
</div>

<div class="row">
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://s22.postimg.org/41ac2ga41/lincoln_jpg.jpg" alt="photo of lincoln">
<p>Tribute Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://s20.postimg.org/mcm56ul4d/portfolio.jpg" alt="photo of portfolio">
<p>Portfolio Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" alt="photo of web design desk">
<p>Future Project Placeholder</p>
</a>
</div>
</div>

Dan
@dcgoings
Aug 28 2016 13:25
@jden3725 did you try using something else besides percentages?
@jden3725 i feel like using 100% and 100% is going to use the image's full dimensions no matter what they are. if you switch it to maybe 300px and 200px, you might get a different result.
John
@jden3725
Aug 28 2016 13:28
@dcgoings Hi Daniel, 2 of the 6 thumbnails are bigger. They are on the portfolio page. https://codepen.io/John9167/pen/VjJqpm
I tried adjusting height and width but it didnt change the size
For example <img src="" width="200px" height="200px">
Dan
@dcgoings
Aug 28 2016 13:30
so couple things
on your HTML "about me" section
you have an extra quotation at <div id=""text" class="col-md-6 text-center">
secondly, all of your pictures have the class <img class="img-thumbnail"> correct?
but..
you dont have that class anywhere in the css :)
once you fix that, you'll be set.
John
@jden3725
Aug 28 2016 13:36

@dcgoings I think you are looking at old commented html. The following is what I am referring to (not col-md-6 text-center>) <div id="Portfolio" class="container">

<div class="pageThree page-header text-center">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4">
<a href="http://s.codepen.io/John9167/debug/QERPvY" target="_blank">
<img class="img-thumbnail" src="https://s22.postimg.org/41ac2ga41/lincoln_jpg.jpg" alt="photo of lincoln">
<p>Tribute Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="https://s.codepen.io/John9167/debug/VjJqpm" target="_blank">
<img class="img-thumbnail" src="https://s20.postimg.org/mcm56ul4d/portfolio.jpg" alt="photo of portfolio">
<p>Portfolio Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" target="_blank">
<img class="img-thumbnail" src="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" alt="photo of web design desk">
<p>Future Project Placeholder</p>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://s22.postimg.org/41ac2ga41/lincoln_jpg.jpg" alt="photo of lincoln">
<p>Tribute Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://s20.postimg.org/mcm56ul4d/portfolio.jpg" alt="photo of portfolio">
<p>Portfolio Page (Free Code Camp)</p>
</a>
</div>
<div class="col-sm-4">
<a href="#" target="_blank">
<img class="img-thumbnail" src="https://hd.unsplash.com/photo-1432888498266-38ffec3eaf0a" alt="photo of web design desk">
<p>Future Project Placeholder</p>
</a>
</div>
</div>

Dan
@dcgoings
Aug 28 2016 13:37
nah dude
im looking at your codepen
HTML section, line 36
remove the double quote
secondly, all of your images use the img-thumbnail class right?
but you dont have that anyways in your css.
HTML line 57, 63, 69, 78, 84, 90. all those lines start with
<img class="img-thumbnail"
but you dont have that class in your CSS.
John
@jden3725
Aug 28 2016 13:40
thank you, you are correct about the double quote. thank you I must have sent an old pen. The two thumbnails on portfolio page right side are too wide. Please look at this one: https://codepen.io/John9167/pen/VjJqpm
Dan
@dcgoings
Aug 28 2016 13:41
ah okay now we're on the same page :)
nope
nevermind
you still dont have that class lol
read the classes! they're different! all you have to do is change one thing in the CSS
you have .thumbnail-img
that's not what you have in the HTML.
John
@jden3725
Aug 28 2016 13:44
what is the correct terminology? thumbnail-img
Dan
@dcgoings
Aug 28 2016 13:45
it's whatever you want. it's a class that you made the name for. as long as they're the same and match each other, you could make it whatever you want
John
@jden3725
Aug 28 2016 13:45
@dcgoings thank you
CamperBot
@camperbot
Aug 28 2016 13:45
jden3725 sends brownie points to @dcgoings :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @dcgoings |http://www.freecodecamp.com/dcgoings
Dan
@dcgoings
Aug 28 2016 13:45
anyways, glad you figured it out. :) gotta run but ill be back later.
no problem. good luck!
Spartano
@Spartano
Aug 28 2016 13:49
hello, anione has some external links for importing FLAG ICONS into codepen ?
vínαч puppαl
@vinaypuppal
Aug 28 2016 14:05
https://github.com/lipis/flag-icon-css @Spartano and you can use https://rawgit.com/ to import css file into codepen from this git repo
Arlind
@ArlindXh
Aug 28 2016 14:31
@dcgoings u there ?
Bogdan Cublesan
@cuble27
Aug 28 2016 14:38
Hey guys? I have one question. Shouldn't display:block take 100% width from the div?
Jesus Guzman
@gdevtech
Aug 28 2016 14:56
@cuble27 Yup you are right it takes 100% width with browsers default margins and paddings
Bogdan Cublesan
@cuble27
Aug 28 2016 14:56
shouldn't inline-block do the same thing?
i'm struggling with something here, maybe can I show you in codepen?
Jesus Guzman
@gdevtech
Aug 28 2016 14:57
Sure
John Doe
@codingisfun11
Aug 28 2016 14:57
@dcgoings Hello Mr.Goings would you please be so kind and help me out?
Bogdan Cublesan
@cuble27
Aug 28 2016 14:57
See how the time is on the same line with the bubbles?
Jesus Guzman
@gdevtech
Aug 28 2016 14:59
yup
Bogdan Cublesan
@cuble27
Aug 28 2016 14:59
how can I make it move on the line below the bubble?
display:block is not an alternative, it messes the bubble up
Jesus Guzman
@gdevtech
Aug 28 2016 15:02
Let me review the code and structure stand by
Bogdan Cublesan
@cuble27
Aug 28 2016 15:02
@gdevtech roger that
Jesus Guzman
@gdevtech
Aug 28 2016 15:05
Ok so I would write my code as follows:
<div class="message-box-sent">
<span class="fourth sent">Whaaaaat!!! 😹 Register it now!</span>
<span class="fourth time" style="text-align:right;">20:04</span>
</div>
<div class="message-box-sent">
           <span class="fourth sent">Whaaaaat!!! 😹 Register it now!</span>
           <span class="fourth time" style="text-align:right;">20:04</span>
        </div>
Arlind
@ArlindXh
Aug 28 2016 15:08
@gdevtech would u be so kind to review mine when you're available? Im having some problems with the background images not being centered well...
Jesus Guzman
@gdevtech
Aug 28 2016 15:08
.message-box-sent { 
   display: block;
   float: right;
}
and for recieved you do a float left
what the codepen link @ArlindXh
Bogdan Cublesan
@cuble27
Aug 28 2016 15:10
@gdevtech you are my hero! Thank you alot!!!
CamperBot
@camperbot
Aug 28 2016 15:10
cuble27 sends brownie points to @gdevtech :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @gdevtech |http://www.freecodecamp.com/gdevtech
Jesus Guzman
@gdevtech
Aug 28 2016 15:11
@cuble27 No problem
@ArlindXh it looks cover to me?
Arlind
@ArlindXh
Aug 28 2016 15:12
yes everything looks fine on my monitor too
Jesus Guzman
@gdevtech
Aug 28 2016 15:12
So.... whats the issue?
Arlind
@ArlindXh
Aug 28 2016 15:12
but when i view it from my laptop it looks disproportioned
Bogdan Cublesan
@cuble27
Aug 28 2016 15:13
@ArlindXh change your :hover colors, maybe remove them from some text completly
Arlind
@ArlindXh
Aug 28 2016 15:13
the width is wai bigger than the screen so u have to scroll right,and its blank(white)
@cuble27 are the backgrounds centered in your screen or do u have to scroll right ?
Jesus Guzman
@gdevtech
Aug 28 2016 15:16
@ArlindXh you are using boostrap right?
Arlind
@ArlindXh
Aug 28 2016 15:16
yes
John Doe
@codingisfun11
Aug 28 2016 15:18
blob
Jesus Guzman
@gdevtech
Aug 28 2016 15:22
@ArlindXh Ok so what I would do is every page should have a <section> tag and the class for that section should have row. Then for children whithin the section define your divs with the correct grid classes that bootstrap provides to you. There is alot that I would change but you did a great job I think you maybe need to have a better understanding on how bootstrap works. Review boostrap grid and refactor the code to use my suggestion then go from there.
http://getbootstrap.com/css/#grid
Arlind
@ArlindXh
Aug 28 2016 15:27
thanks @gdevtech i'll try to section the pages and the rows and see what happens, i know i probably overcomplicated some of it but it was my first time making it and i dont really have any experience ,thnx again.
CamperBot
@camperbot
Aug 28 2016 15:27
arlindxh sends brownie points to @gdevtech :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @gdevtech |http://www.freecodecamp.com/gdevtech
Jesus Guzman
@gdevtech
Aug 28 2016 15:41
Sure thing no problem. I was the same way when I started but you will get better.
Dan
@dcgoings
Aug 28 2016 15:50
@ArlindXh @codingisfun11 im here, whats up
John Doe
@codingisfun11
Aug 28 2016 16:01
WHAT UPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP MR.GOINGS
Dan
@dcgoings
Aug 28 2016 16:02
lol when did i become popular here
John Doe
@codingisfun11
Aug 28 2016 16:03
with glasses like those how would you ever be unpopular?
i sent you a pm mr.goings would you ever be so kind to check it out?
Dan
@dcgoings
Aug 28 2016 16:07
ill answer it here
look at the example they give you.
jonaz889
@jonaz889
Aug 28 2016 16:08
Hello i am doing the "Use the Twitchtv JSON API" challenge. and my css is going crazy i could use some help. here is my codepen : https://codepen.io/jonaz889/pen/AXGJyR?editors=0110
Dan
@dcgoings
Aug 28 2016 16:09
the example grabs the array ourPets, right? and within that array, the first tree is cat and the second tree is dog.
this problem is asking you to make the var secondTree access pine.
Arlind
@ArlindXh
Aug 28 2016 16:10
@dcgoings do u know how can i fix my last background pic to not show the white space at the end ?
http://codepen.io/ArlindXh/full/OXZQgY/
John Doe
@codingisfun11
Aug 28 2016 16:11
vvar secondTree[0].type1.list.pine;
@dcgoings
Dan
@dcgoings
Aug 28 2016 16:12
what's the difference between what you have and the example they have?
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"
myPlants[0] is grabbing what? flowers or trees?
@ArlindXh looks like you figured it out? or no?
Arlind
@ArlindXh
Aug 28 2016 16:15
nope..
Dan
@dcgoings
Aug 28 2016 16:15
it's the copyright box. you had it.
adjust the margin.
Arlind
@ArlindXh
Aug 28 2016 16:17
i used negative number to put the copyright in the img
but the white space is still there
theaabbcc
@theaabbcc
Aug 28 2016 16:18
Quick question, are we allowed to use other hosting websites, like GitHub, for our challenges instead of CodePen?
Tyler Moeller
@TylerMoeller
Aug 28 2016 16:19
@theaabbcc Yes, as long as they can review your code, you can host your projects anywhere.
theaabbcc
@theaabbcc
Aug 28 2016 16:19
Alright, thank you.
Dan
@dcgoings
Aug 28 2016 16:21
@ArlindXh change your height for pageThree
try 100%;
Arlind
@ArlindXh
Aug 28 2016 16:23
oh,now's fine thnx a lot
John Doe
@codingisfun11
Aug 28 2016 16:23
@dcgoings I am stuck :( :(
Dan
@dcgoings
Aug 28 2016 16:24
@codingisfun11 with?
John Doe
@codingisfun11
Aug 28 2016 16:24
var secondTree = myPlants1.list[2].["pine"];
Dan
@dcgoings
Aug 28 2016 16:24
and what's the difference between what you have and the example to the left?
im not going to give you the answer ;)

you have this:

myPlants1.list[2].["pine"];

and they have this in the example solution:

ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"
Arlind
@ArlindXh
Aug 28 2016 16:28
@dcgoings do the social media buttons at the last img appear in place at you ? cause when i open the page from my monitor they are fine,but when i open the page from my laptop the are misplaced right in a white space and u need to scroll right to see them
Dan
@dcgoings
Aug 28 2016 16:29
@ArlindXh they are to the right and need to scroll right to see them for me
Arlind
@ArlindXh
Aug 28 2016 16:30
do u know how can i fix that ?
cause they appear fine on my monitor , maybe cause its really wide
Dan
@dcgoings
Aug 28 2016 16:32
hmm, not entirely sure what's causing it atm
Arlind
@ArlindXh
Aug 28 2016 16:32
its the social media buttons i think...
Yes, i commented the buttons ,look now it should be fine
Dan
@dcgoings
Aug 28 2016 16:36
yep, i think it has something to do with you using col-md-8. if you want social media buttons, just try messing around with that. might be what's causing it.
Arlind
@ArlindXh
Aug 28 2016 16:38
or maybe the text i wrote is <center>-ed and thats why when i add the buttons they need more space so they are getting out of the img ?
Chris Rutherford
@cjrutherford
Aug 28 2016 16:38
hey all, just wanted to get some coding feedback on my tic-tac-toe game: http://codepen.io/christopherrutherford/pen/QEokXm?editors=1000
John Doe
@codingisfun11
Aug 28 2016 16:42
@dcgoings myPlants[0].list1; // "pine"
myPlants1.names[0]; // "pine"
i put both of the ones in brackets it does not show in chat.
Dan
@dcgoings
Aug 28 2016 16:43
okay, do you understand how arrays work?
the first object in an array is [0]
then the second object is
[1]
etc etc
which means, in order to access the second object in myPlants, it would be
myPlants[1]
and then to access the second object in list, it would be
.list[1]

now you need to combine them to get:

myPlants[1].list[1];

because that will return pine.

John Doe
@codingisfun11
Aug 28 2016 16:46
blob
Dan
@dcgoings
Aug 28 2016 16:47
all you should have is
var secondTree = myPlants[1].list[1];
i wanted you to follow the example and understand why they got Fluffy and why they got Spot
John Doe
@codingisfun11
Aug 28 2016 16:50
i didn't even need to put pine.
amazing.......
Dan
@dcgoings
Aug 28 2016 16:53
correct. the example has // "Fluffy" and // "Spot" because it's telling you what it's going to be returning.
John Doe
@codingisfun11
Aug 28 2016 17:04
you are a smart man Daniel! coulnd not have done it without you!
Gatreek92
@Gatreek92
Aug 28 2016 17:44

Hey guys i need a little help for the chunky monkey exercice :worried: this is my code
hi guys i need a little help for the chunky monkey exercice :worried:
this is my code

function chunkArrayInGroups(arr, size) {
var finalArray = [];
var array = [];
for (var i = 0 ; i < arr.length/size ; i+size)
{ array = arr.slice(i,size);
finalArray.push(array);
}
console.log(finalArray);
return finalArray;
}
chunkArrayInGroups(["a", "b", "c", "d"], 2);

Stephen James
@sjames1958gm
Aug 28 2016 17:45
@Gatreek92 Looks like you are counting up by size, but you also divided the length by size, sure about both?
Research the second parameter of slice
Gatreek92
@Gatreek92
Aug 28 2016 17:47
@sjames1958gm what i need to do ? i'am a littlebit confused :worried:
Stephen James
@sjames1958gm
Aug 28 2016 17:50
@Gatreek92 the second parameter to slice is the ending index which size is only the first loop.
If you divide length by size and increment by size you get for ( var i = 0; i < 2; i += 2) which will only loop once.
Gatreek92
@Gatreek92
Aug 28 2016 17:58
@sjames1958gm so i changed the loop to for(var i = 0 ; i <arr.length;i++) so he could loop all the array , and for slice the second parametres needs to be size so hi extract the necessary number of elements , no ?
Stephen James
@sjames1958gm
Aug 28 2016 18:00
@Gatreek92 No i += size worked well. You needed to have i and i + size for the slice parameters
@Gatreek92 You just couldn't do both increment by size and divide the length by size
Gatreek92
@Gatreek92
Aug 28 2016 18:09
@sjames1958gm thanks dude i soleved the problem :+1: :smile:
CamperBot
@camperbot
Aug 28 2016 18:09
gatreek92 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2914 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Alexander Domikov
@AlexanderDom
Aug 28 2016 18:22
hello hello
Alexander Domikov
@AlexanderDom
Aug 28 2016 18:29
my i hope so finished calculator
Anshul Jain
@ajain706
Aug 28 2016 18:59
need hel
CasiqueJhon
@CasiqueJhon
Aug 28 2016 19:01
Finally I 'm done, many thanks to all, it has taken me all weekend , I hope you like , there's a small mistake in the image of Bob Marley (probably But this is the one what I see ) I could not fix it . As anyone knows how fix it, help me with it. I present my portfolio page!
http://codepen.io/zeusksiq/full/rLEKpW/
Gryff Coates
@mrbrit2
Aug 28 2016 19:13
$(function() {
$("#quoteButton").click(function() {
  $.getJSON('api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?', function(json){
    $("#quoteText").html(json)
  });
   });
});
Anyone got any reasons why this brings up an error
failed to load resource: the server responded with a status of 404 ()
sm-programmer
@sm-programmer
Aug 28 2016 19:19
@mrbrit2 At a quick glance, it means it doesn't locate the resource. I guess it can't find the JSON API, which could mean it is no longer there (3rd line)
Gryff Coates
@mrbrit2
Aug 28 2016 19:20
@sm-programmer see, that's where I'm getting confused because upon loading the API it's shows up!
sm-programmer
@sm-programmer
Aug 28 2016 19:21
@mrbrit2 You mean that you can directly load it? Gee, that's weird indeed! Do you have your project online? Let's discard it's universally down xD
Gryff Coates
@mrbrit2
Aug 28 2016 19:22
@sm-programmer haha yes I do though it just a work in progress so far ^_^
https://codepen.io/mrbrit/pen/kXKvLd
Stephen James
@sjames1958gm
Aug 28 2016 19:24
@mrbrit2 You are missing http:// from the front so it tries to process that URL relative to the codepen page
Gryff Coates
@mrbrit2
Aug 28 2016 19:25
@sjames1958gm I had to take it off as codepen is https
Stephen James
@sjames1958gm
Aug 28 2016 19:25
@mrbrit2 Then connect to codepen over http:// but you have to have it or it wont work.
sm-programmer
@sm-programmer
Aug 28 2016 19:25
Oh, so you have to deal with CORS and the like.
Try https://crossorigin.me for that matter.
It's a "HTTP-to-HTTPS" conversor, so you no longer have the must-be-HTTPS-served restriction.
Gryff Coates
@mrbrit2
Aug 28 2016 19:28
@sjames1958gm guess that would work but would not be ideal if I want other to view it.
@sm-programmer thats a good workaround! Thanks mate ^_^
CamperBot
@camperbot
Aug 28 2016 19:28
mrbrit2 sends brownie points to @sm-programmer :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @sm-programmer |http://www.freecodecamp.com/sm-programmer
Gryff Coates
@mrbrit2
Aug 28 2016 19:29
@sjames1958gm thanks for the help though xx
CamperBot
@camperbot
Aug 28 2016 19:29
mrbrit2 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2916 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
sm-programmer
@sm-programmer
Aug 28 2016 19:29
@mrbrit2 Glad I've helped you! ^_^
Stephen James
@sjames1958gm
Aug 28 2016 19:32
@mrbrit2 :+1:
Rick Brown
@RickBr0wn
Aug 28 2016 19:33
ok.. i completed my tribute page. Can i post my codepen in here for ppl to look at the code. The code is probably not "efficient" i kinda wrote it as i go, rather than giving it any forethought.. :smile:
Parker Mitchell
@RParkerM
Aug 28 2016 19:35
I think I was able to avoid CORS issues for pretty much all of the front-end projects by using JSONP. Not sure if that was the intended way or not
Kyle W Pilkinton
@tadake
Aug 28 2016 19:35
yeah @RickBr0wn you just paste the link to it and gitter does the rest
Ken Haduch
@khaduch
Aug 28 2016 19:56
@RickBr0wn - my comments would be:
  • the font is difficult to read at the small size - it would be fine for larger text elements, and maybe the caption beneath the picture, just too difficult on the eyes (at least on my eyes) for the large spans of text.
  • the narrowed section of text below the image starts to wrap in a bad way as the screen is narrowed - probably fixed size margins? The bootstrap grid could be helpful there, could be tailored to different screen sizes (or use some media queries, which probably haven't been covered yet
  • I would make the larger area of text narrower, with bootstrap grid or something else, it gets spread out too far on the wide screen
  • just took a peek at the HTML - the <center> tag is deprecated - they recommend not using it anymore (although still supported?)
  • it is a nice clean look, though, and nice work
CasiqueJhon
@CasiqueJhon
Aug 28 2016 20:02
please help me up with a little thing
why my toggle button is not working? I have all ok!!!
Andrea Rocca
@sfogo5
Aug 28 2016 20:03
@CasiqueJhon the bootstrap.js library is missing
Ken Haduch
@khaduch
Aug 28 2016 20:04
@CasiqueJhon - you need both jquery.js and bootstrap.js to handle the navbar collapse and expanding? jquery.js first, and then bootstrap.js, the order is important.
CasiqueJhon
@CasiqueJhon
Aug 28 2016 20:05
@sfogo5 @khaduch how can I make that?
Ken Haduch
@khaduch
Aug 28 2016 20:07
@CasiqueJhon - just go to the JS config (gearbox) button, and in the "Add External JavaScript" boxes, you can do the Quick-add of jquery and bootstrap. The URLs should appear in the text boxes, then save and reload your page.
@CasiqueJhon - that should do it.
CasiqueJhon
@CasiqueJhon
Aug 28 2016 20:10
@khaduch SO MANY THANK YOU!!!!
CamperBot
@camperbot
Aug 28 2016 20:10
casiquejhon sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1594 | @khaduch |http://www.freecodecamp.com/khaduch
Luis Graterol
@luisgraterol
Aug 28 2016 20:14
jhon!! disculpa! como haces que el texto haga el scroll y la foto del fondo no??
Max Zueff
@IvanBot
Aug 28 2016 20:28

How to get a full-width slider block?

http://codepen.io/IvanBot/pen/KrORjY

Alexander Domikov
@AlexanderDom
Aug 28 2016 20:31
@IvanBot .section { }
has width: 50%
remove it
Max Zueff
@IvanBot
Aug 28 2016 20:32
@AlexanderDom it`s slider
dturn127
@dturn127
Aug 28 2016 20:32
Good afternoon, all. I'm working on a project and I'm trying to include an image within my navigation bar. When I insert the image, the whole nav bar gets thrown off. Can someone please point me in the right direction to get this working properly? Thanks
Alexander Domikov
@AlexanderDom
Aug 28 2016 20:34
@IvanBot your section hide your slider with overflow and section take only 50% of screen width
vínαч puppαl
@vinaypuppal
Aug 28 2016 20:35
@IvanBot give .logo block width: 100%
Alexander Domikov
@AlexanderDom
Aug 28 2016 20:36
oh that
vínαч puppαl
@vinaypuppal
Aug 28 2016 20:36
@AlexanderDom and use for Eg: transform: translateX(-100%) to move slider block
Alexander Domikov
@AlexanderDom
Aug 28 2016 20:36
yes @vinaypuppal is right so, i misunderstood your question
yes good one, either than change left position change translateX but be sure that your logo is "positionned" (has position other than static - default, absolute or relative)
or nothing gonna happen
Steve Rybka
@steevka
Aug 28 2016 20:51
Hey gang! Having a frustrating problem with my tribute site. There is a ~5px white margin to the right of the whole page. Any ideas?? Driving me crazy!
Dan
@dcgoings
Aug 28 2016 20:57
@steevka it's a combination of the inline styling you have on line 2, and your CSS for your footer.
hmm, maybe not line two.
it's definitely the footer though.
hmm.
Steve Rybka
@steevka
Aug 28 2016 21:01
Thanks for checking it out. I removed the line 2 inline styling becuase that shouldn’t have been there anyway. And I closed my <p> tag in the footer but that didn’t do anything to help the margin
Dan
@dcgoings
Aug 28 2016 21:01
i dont know man. when i delete the inline style on line two and remove the padding on your footer, it goes away. but that messes up your header. it looks like a padding issue but im not sure exactly where.
hmm, okay so now what i said isn't working.. interesting.
Spartano
@Spartano
Aug 28 2016 21:03
does anione finished the D3 project Show National Contiguity with a Force Directed Graph? really want to see how other people did it.
Steve Rybka
@steevka
Aug 28 2016 21:03
Lol yeah I just tried that and couldn’t get results
Ohhhh it’s the padding on the footer col-xs-12 column
Actually, it’s the row in the footer...
@Spartano no sorry
Dan
@dcgoings
Aug 28 2016 21:09
@steevka remove the row class in both the header and footer
should be good
Steve Rybka
@steevka
Aug 28 2016 21:09
I’ll try! I thought bootstrap always went Container > Row > Col
Dan
@dcgoings
Aug 28 2016 21:10
yeah but i dont see col in your header anywhere
so i feel like there's some sort of conflict
Steve Rybka
@steevka
Aug 28 2016 21:11
Thanks @dcgoings !!!
CamperBot
@camperbot
Aug 28 2016 21:11
:cookie: 354 | @dcgoings |http://www.freecodecamp.com/dcgoings
steevka sends brownie points to @dcgoings :sparkles: :thumbsup: :sparkles:
Dan
@dcgoings
Aug 28 2016 21:11
np :)
so i think i figured it out. you were trying to use row and column when it didnt need to be used.
you used it correctly at "part truck" "part van" "fully badass"
Carlos García de Castro
@garciadecastro
Aug 28 2016 21:13
Hi mate, I'd like to know where I could find a list witn HTML family fonts. Has somebody have any idea? thk
Dan
@dcgoings
Aug 28 2016 21:13
cause that needs to be in one row, split up three ways.
you're not trying to do that with your header or footer so there was no need.
Steve Rybka
@steevka
Aug 28 2016 21:14
Ahhh! That makes sense. Guess there is something to be said about doing something the simplist way
Max Zueff
@IvanBot
Aug 28 2016 21:25
please, how to customize css to get the full width of the slider with hidden squares?
http://codepen.io/IvanBot/pen/KrORjY
vínαч puppαl
@vinaypuppal
Aug 28 2016 21:34
@IvanBot This did not help to acheive full-width slider block?? https://gitter.im/FreeCodeCamp/HelpFrontEnd?at=57c34b223cdeb6467b79eb43
Olga C
@Octopinky
Aug 28 2016 21:38
@IvanBot
.slider {
  position: absolute;
  white-space: nowrap;
  width: 100%;
  background-color:green;
}
Max Zueff
@IvanBot
Aug 28 2016 21:44
@vinaypuppal @Octopinky not working
Olga C
@Octopinky
Aug 28 2016 21:44
@IvanBot you did not change the position
Olga C
@Octopinky
Aug 28 2016 21:51
@IvanBot is it working now?
Max Zueff
@IvanBot
Aug 28 2016 21:54
@Octopinky nooo
:cry:
Olga C
@Octopinky
Aug 28 2016 21:55
oh noes. what is not working now?
Brewall131
@Brewall131
Aug 28 2016 22:13
Hey guys, I've been having so much trouble trying to work around this seemingly easy issue. I want to add an overlay to my background image, but I can't get it to cover the entire background image. Here is my HTML: <div id="Home" class="section1 container-fluid">
<div class="overlay">
</div>
</div>
and here is my css:
.section1 {
height:500px;
color: #fff;
background-image: url("https://hd.unsplash.com/3/doctype-hi-res.jpg");
background-size: cover;
}
adding the link looks like it will be easier to read: http://codepen.io/Brewall131/pen/wWkWkY
Dylan
@dhcodes
Aug 28 2016 22:20
@Brewall131 what do you mean "add an overlay"
@Brewall131 looks like you have one now. Did you get it worked out?
Brewall131
@Brewall131
Aug 28 2016 22:22
@dhcodes I've got the overlay added, I just can't get it to cover the entire background image. On the left and the right, you can see that the image shows through.
Margaret
@Margaret2
Aug 28 2016 22:23
@Brewall131 try padding:0; in your section1 class
Brewall131
@Brewall131
Aug 28 2016 22:25
thank you @Margaret2 ! Just so that I know for future reference, where was it getting a padding other than 0 from?
CamperBot
@camperbot
Aug 28 2016 22:25
brewall131 sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @margaret2 |http://www.freecodecamp.com/margaret2
Margaret
@Margaret2
Aug 28 2016 22:25
from bootstrap probably, since it also had container-fluid @Brewall131
Brewall131
@Brewall131
Aug 28 2016 22:25
thank you so much :)
Margaret
@Margaret2
Aug 28 2016 22:26
:D no problem
Tomislav Perić
@tomislavperich
Aug 28 2016 22:46
Hey guyse, I'm having a problem with a bootstrap lesson.
Help, anyone? :(
CamperBot
@camperbot
Aug 28 2016 22:46
no wiki entry for: anyone
Tomislav Perić
@tomislavperich
Aug 28 2016 22:46
@camperbot Thanks CamperBot, you're a true hope giver.
CamperBot
@camperbot
Aug 28 2016 22:46
tomislavperich sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star2: 2281 | @camperbot |http://www.freecodecamp.com/camperbot
Moisés Man
@moigithub
Aug 28 2016 22:48
u should post ur question.. and what u did (ur code ) @tomislavperich
Tomislav Perić
@tomislavperich
Aug 28 2016 22:49

Alright.

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div clas="well">

</div>
</div>
<div class="col-xs-6">
<div clas="well">

</div>
</div>
</div>
</div>

The task is to add a div element with the class well inside each of your div elements with the class "col-xs-6".

Besides indentation getting lost; I see no problems with my code here. And since I can't progress to the next lesson, could this be a bug?
Moisés Man
@moigithub
Aug 28 2016 22:51
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div clas="well">

      </div>
    </div>
    <div class="col-xs-6">
      <div clas="well">

      </div>
    </div>
  </div>
</div>
adding ` <-- backticks above and after helps :)
```
code on next line
```
Tomislav Perić
@tomislavperich
Aug 28 2016 22:52
Like this?
Moisés Man
@moigithub
Aug 28 2016 22:52
@tomislavperich code is correct.. except class missing an s
Tomislav Perić
@tomislavperich
Aug 28 2016 22:53
Damn. I've checked dictionary twice. It's getting late... Thanks @moigithub
CamperBot
@camperbot
Aug 28 2016 22:53
tomislavperich sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2039 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Aug 28 2016 22:53
:+1:
Steve Rybka
@steevka
Aug 28 2016 23:17
Can anyone help me figure out why there is a ~5px white gap on the right side of my page?
Tharmi
@Silentox
Aug 28 2016 23:18
how do you even begin to write the html for a tribute page? i feel like i got thrown in lol
Steve Rybka
@steevka
Aug 28 2016 23:19
@Silentox Yeah it can feel like trial by fire, but you got this! Did you create a codepen? What do you have so far?
Alex
@Sevohan
Aug 28 2016 23:20
@Silentox My feelings exactly with all the projects I've done so far. My strategy is to create a mock-up or wire-frame and take one step after another to create it piece by piece and it's done before you know it :)
Tharmi
@Silentox
Aug 28 2016 23:20
just finished the 117 lessons and signed up to codepen and now it wants me to make a tribute page but i barely remember what i learned lol, and it doesnt want me to use examples or anything
Aaron
@apalm1341
Aug 28 2016 23:23
@apalm1341
http://codepen.io/ap1341/pen/bZXjdd
Hey all.
I am having trouble with doing what this guy in video is doing
can someone help please?
Alex
@Sevohan
Aug 28 2016 23:23
@Silentox Use examples all you want just be sure to write your own code. Figuring out how things can be done by looking at examples is great but you want to make sure you learn it before you implement it.
Tharmi
@Silentox
Aug 28 2016 23:24
@Sevohan makes sense, thanks!..just going back and reviewing my lessons and making a rough draft atleast before i look at other's tribute pages for help
CamperBot
@camperbot
Aug 28 2016 23:24
silentox sends brownie points to @sevohan :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @sevohan |http://www.freecodecamp.com/sevohan
Brandon Martinez
@bmo84
Aug 28 2016 23:29
hello, anyone else have trouble with the wikipedia api? I'm having a hell of a time trying to get it to give me data, all I'm getting is an empty object
Brandon Martinez
@bmo84
Aug 28 2016 23:38
CamperBot
@camperbot
Aug 28 2016 23:38
:bulb: to format code use backticks! ``` more info
Brandon Martinez
@bmo84
Aug 28 2016 23:39
OH oops, didn't work right. I'm getting this back when when I log the response in the console