These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Dec 2016
Jason Luboff
@JLuboff
Dec 06 2016 00:04 UTC
@sorinr Have you ever dealt with trying to write html form data to a JSON file on a server?
Sorin Ruse
@sorinr
Dec 06 2016 00:13 UTC
@JLuboff yep. done a few projects using laravel, ci and symfony. why?
Jason Luboff
@JLuboff
Dec 06 2016 00:16 UTC
@sorinr I've created a digital sign for our conference room. It reads the data from a JSON file. I'm trying to create a form that reception can input the necessary data to that is then saved to a JSON file on the server. I'm having some trouble finding a solution on this. Can I do this strictly with Ajax? Or do I need PHP?
aRtoo
@artoodeeto
Dec 06 2016 00:21 UTC
hi guys for the responsive website. do you really need to use percentage on calculating the sizes and content of the site or you could use pixels?? any thoughts? thanks!
Sorin Ruse
@sorinr
Dec 06 2016 00:21 UTC
@JLuboff whats the structure(for the app) yo u have right now pr how did you thought you will implement it. what technologies can you use for backend i mean?
@JLuboff just pm me more details and i'll try to answer you tomorrow. its 2.23am in here.off to bed for now.
Jason Luboff
@JLuboff
Dec 06 2016 00:24 UTC
@sorinr Will do, thanks!
CamperBot
@camperbot
Dec 06 2016 00:24 UTC
jluboff sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 898 | @sorinr |http://www.freecodecamp.com/sorinr
Zaurbek Zhakupov
@zzhakupov
Dec 06 2016 01:15 UTC
Do I need to completely learn react or I just need to learn part needed to make freecodecamp challenges?
bkd705
@bkd705
Dec 06 2016 02:34 UTC
That is up to you!
Learn it to make the freecodecamp challenges, if you like it, learn it more, else, learn something else! :P
Blaise
@Blaisebev
Dec 06 2016 02:37 UTC
Hi guys! Can someone shed light on this problem? I am trying to have my thumbnail hug my image and end under the words "Explorer, Philanthropist, Mountaineer."
Axiomteck
@axiomteck
Dec 06 2016 02:40 UTC
Build a Tribute Page
on building this page
Greg D
@mosaic-greg
Dec 06 2016 03:07 UTC
yay i finally understand what a callback is and how to use it :thought_balloon:
now to stick one inside a loop
ruchi4
@ruchi4
Dec 06 2016 03:09 UTC
@mosaic-greg thats great, do you know why we need callback functions?
Greg D
@mosaic-greg
Dec 06 2016 03:09 UTC
@ruchi4 so you can wait for one function to finish , before running the next one
ruchi4
@ruchi4
Dec 06 2016 03:10 UTC
ok cool
Greg D
@mosaic-greg
Dec 06 2016 03:21 UTC
useful for the simon project
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 03:21 UTC
// https://wind-bow.gomix.me/twitch-api
var apiLink = "https://wind-bow.gomix.me/twitch-api";
var streamers = {
  "ids" : ["freecodecamp", "sovietwomble", "warowl", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "ESL_SC2", "OgamingSC2", "cretetion", "comster404", "brunofin"]
};
var test;

$(document).ready(function() {
  var tempList = {};
  var temp = {};
  $.each(streamers.ids, function(id, value) {
    $.getJSON(apiLink + "/streams/" + value + "?callback=?", function(json) {
      tempList[value] = json;
    });
    $.getJSON(apiLink + "/channels/" + value + "?callback=?", function(json) {
      temp[value] = json;
    });
  });
  streamers.streamStat = tempList;
  streamers.channels = temp;

  $.each(streamers.ids, function(id, value) {
    var streamObj = streamers.streamStat[value];
    var channelObj = streamers.channels[value];

    $("#streamerList").append("<p>" + JSON.stringify(streamObj) + "</p>");
  });
});
Need help! On the second each function, all the <p> elements contains undefined.
Josh Bivens
@joshbivens
Dec 06 2016 03:33 UTC
Anyone familiar with api calls in frameworks like React? I have a question
@larongbingo I remember having to make 2 asynchronous calls to get it working...
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 03:37 UTC
@joshbivens I'm a noob, what does "asynchronous calls" mean? :(
Josh Bivens
@joshbivens
Dec 06 2016 03:38 UTC
@larongbingo hold on, lemme look at my pen. I'm a noob too ;)
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 03:38 UTC
:D
Josh Bivens
@joshbivens
Dec 06 2016 03:40 UTC
separate the 2 $.getJSONs into their own function and the call them in a promise-type set-up:
channels.forEach(function(channel) {
    $.when(getChannelInfo(channel), getStreamInfo(channel))
      .done(function(channelData, streamData) {...
You wait for both calls to be done, then proceed to populate the html
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 03:43 UTC
Copy, Thanks @joshbivens will post something here if it works for a noob like me T_T
CamperBot
@camperbot
Dec 06 2016 03:43 UTC
larongbingo sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @joshbivens |http://www.freecodecamp.com/joshbivens
Josh Bivens
@joshbivens
Dec 06 2016 03:43 UTC
@larongbingo Nice! Good luck
Ken Haduch
@khaduch
Dec 06 2016 03:52 UTC

@Blaisebev - you are not closing your tags - you didn't close the <img element, and you didn't close the <div class="thumbnail" - change your code to this, I think it is what you want:

          <div class="thumbnail"><img class="center-block img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/6c/c7/0f/6cc70fcb2af12332b3ad50ab1a5acaae.jpg" alt="EdHillaryPortrait"> 
<p>Explorer, Philanthropist, Mountaineer</p>
          </div>

Add the closing > for the <img, and the closing </div> for the thumbnail <div>

@Blaisebev - of course, it might necessitate other adjustments to your code. Use the "Tidy HTML" option to indent the HTML code and see how things line up after that.
@Blaisebev - you also have missed the closing quote on the word "jumbotron" in the first nested div element. After you fix that, use "Tidy HTML" again and see what the structure looks like. You have to change the setup of the closing </div> tags near the end, so that the container is containing the entire body of the page.
chantheman1288
@chantheman1288
Dec 06 2016 04:13 UTC
Hey, I am having trouble getting some elements inside a row <div> to be on the same line, and i don't know why. Could anyone take a look at my code? https://codepen.io/chantheman1288/pen/QGmMRL/
The howdy, hello, and hi and their respective <div>s should all be on the same line. This is where I am going to put the main content of the portfolio
@chantheman1288 change the display to inline
display: inline;
not sure if that's the best way to go about it, but it works
chantheman1288
@chantheman1288
Dec 06 2016 04:16 UTC
on which element?

mainstuff

#mainstuff
Ken Haduch
@khaduch
Dec 06 2016 04:17 UTC
@chantheman1288 - you should be able to do that using the grid, but you must have something wrong. I think that the class is "container-fluid" for the container class? For one thing, anyway... that would be a start.
chantheman1288
@chantheman1288
Dec 06 2016 04:19 UTC
I put the entire web page in the "container-fluid" class
I thought that that was what I was supposed to do when using Bootstrap
Almost forgot, thank you @moT01 for the help. Can you tell me why it fixed it?
CamperBot
@camperbot
Dec 06 2016 04:20 UTC
chantheman1288 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @mot01 |http://www.freecodecamp.com/mot01
ResetSuzette
@ResetSuzette
Dec 06 2016 04:21 UTC
<a href="#" target="_blank">NAME</a> is a link that opens another page, correct?
Pen is being strange
so i think the default display is block. which makes the rectangle surrounding each item go the entire width of the page.. making it inline just like makes the rectangle fit the content or something like that
you can see it more visually by opening the inspector and viewing your items
chantheman1288
@chantheman1288
Dec 06 2016 04:22 UTC
Oh, ok. Weird that it worked with the header, but not the #mainstuff id
im not sure if im right on all that
might want to find a page to read about it, or a youtube vid or something
ken, am i right on that
chantheman1288
@chantheman1288
Dec 06 2016 04:24 UTC
I looked it up as well, and that's what it said. How do I open the inspector?
@ResetSuzette im not sure, ...target_blank means a new tab or window i believe. but no the # i think is just a dead link
placeholder
firefox i right click and click inspect element
chrome is similar i believe
chantheman1288
@chantheman1288
Dec 06 2016 04:43 UTC
Now this is really confusing. It seems to have something to do with the #logo piece. I extended the div that contains the #logo, and it made the gap larger https://codepen.io/chantheman1288/pen/QGmMRL/
whats the problem
James Moore
@James-N-M
Dec 06 2016 04:47 UTC
@chantheman1288 what are you trying to do ? or you just posting
I like the orange on black its tight @chantheman1288
i was just thinking that
chantheman1288
@chantheman1288
Dec 06 2016 04:48 UTC
Nevermind, I found why it was doing it
James Moore
@James-N-M
Dec 06 2016 04:49 UTC
Good stuff @chantheman1288
chantheman1288
@chantheman1288
Dec 06 2016 04:49 UTC
for some reason, it was mad that the logo at the top left was 2em in size
anything else fixes the issue
@James-N-M @moT01 thanks, I got the idea for the color scheme from the LinusTechTips logo
CamperBot
@camperbot
Dec 06 2016 04:50 UTC
chantheman1288 sends brownie points to @james-n-m and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @james-n-m |http://www.freecodecamp.com/james-n-m
:warning: chantheman1288 already gave mot01 points
jumper18
@jumper18
Dec 06 2016 05:02 UTC
Hi, I'm using an unordered list to make a nav bar. Can someone let me know the best way to get the list items in a horizontal line? I have already removed the bullets, margins, and padding.
chantheman1288
@chantheman1288
Dec 06 2016 05:04 UTC
@jumper18 I haven't made my nav bar yet, but I would assume you could use a row, and put each list item in their own column
jumper18
@jumper18
Dec 06 2016 05:05 UTC
I tried that and it messed up my bar because it was fixed. Not sure why though. I read something that said I could use an unordered list, but can't seem to figure it out.
chantheman1288
@chantheman1288
Dec 06 2016 05:06 UTC
@jumper18 are you using codepen? wanna post the code so we can see?
jumper18
@jumper18
Dec 06 2016 05:06 UTC
Yeah, one sec
i know you got this chan
chantheman1288
@chantheman1288
Dec 06 2016 05:12 UTC
I changed the <ul> tag to a <div> tag with a class of "row", and changed all the <li> tags to <div class="col-xs-3">
It evenly distributed them horizontally across the page
i added
li {
  display: inline;
}
jumper18
@jumper18
Dec 06 2016 05:15 UTC
ahh I see!
chantheman1288
@chantheman1288
Dec 06 2016 05:15 UTC
Oh, that was way simpler, go with that
jumper18
@jumper18
Dec 06 2016 05:16 UTC
Is it more common to use the ul or the rows/columns for a nav bar?
it might be, ...they both work
jumper18
@jumper18
Dec 06 2016 05:17 UTC
thanks guys
not sure how to send points, this was my first question
click the name and say thanks
i haven't used much bootstrap, ...so im more comfortable with css
jumper18
@jumper18
Dec 06 2016 05:18 UTC
@moT01 thanks
CamperBot
@camperbot
Dec 06 2016 05:18 UTC
jumper18 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @mot01 |http://www.freecodecamp.com/mot01
jumper18
@jumper18
Dec 06 2016 05:19 UTC
@chantheman1288 thanks
CamperBot
@camperbot
Dec 06 2016 05:19 UTC
jumper18 sends brownie points to @chantheman1288 :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @chantheman1288 |http://www.freecodecamp.com/chantheman1288
but if you're going to use bootstrap it might be better to try and solve you problems using it if you can
chantheman1288
@chantheman1288
Dec 06 2016 05:19 UTC
@moT01 the example portfolio lights up each button as you scroll past it, do you know how to do that? I haven't been able to figure it out. I assume its some css or JS trickery
jumper18
@jumper18
Dec 06 2016 05:19 UTC
I was using it because the video for the project had said to download it
chantheman1288
@chantheman1288
Dec 06 2016 05:20 UTC
I started using bootstrap because it was in the tutorials, but I really like the idea of a simple adaptive interface for multiple devices
you can use css to do it, ...pick your target and :hover
a:hover {
    color: blue;
}
bootstrap might have classes for that as well
theres other things you can do as well
:active, :visited
i think theres a number of others
Lean Junio
@leanjunio
Dec 06 2016 05:23 UTC
is anybody familiar with django?
chantheman1288
@chantheman1288
Dec 06 2016 05:25 UTC
I'm sorry, I don't think I was clear. https://codepen.io/FreeCodeCamp/full/YqLyXB/ Here is the page i am looking at, and as you scroll down, the point you are scrolling through becomes highlighted
ahh
well, i would probly use some jquery for that, not sure you might be able to get there with css
chantheman1288
@chantheman1288
Dec 06 2016 05:28 UTC
ok. I haven't done enough with jquery to do that right now I don't think. Are you using freecodecamp only, or learning on other sites as well?
heroiczero
@heroiczero
Dec 06 2016 05:28 UTC
@chantheman1288 that is probably done with javascript
chantheman1288
@chantheman1288
Dec 06 2016 05:29 UTC
Oh, ok @heroiczero I haven't done the javascript part yet, I'll just wait until then
heroiczero
@heroiczero
Dec 06 2016 05:30 UTC
@chantheman1288 i would just make a website with your knowledge of html and css and bootstrap
@chantheman1288 probably can learn CSS3 independently from http://www.w3schools.com/css/css3_intro.asp and add it into your code
the stuff fcc teaches you in their exercises won't be enough to get through the projects so you will have to go find other places to figure things out
chantheman1288
@chantheman1288
Dec 06 2016 05:33 UTC
ok, thanks, I'll work on it
Hong
@designBuildShipSoftware
Dec 06 2016 05:43 UTC
Hi, I am working on Pomodoro Clock project. I am using js Date instance instead of using i--. However, sometimes the timer will go past 0:00 to a negative time. But if I use i--, there won't be a negative time. However, using i-- might not give the accurate time in seconds. Can I use i-- here instead of js Date?
using i-- is easier codingwise
Hong
@designBuildShipSoftware
Dec 06 2016 05:52 UTC
Which one do you (expert) recommend?
jumper18
@jumper18
Dec 06 2016 05:57 UTC
I am using jquery to target a specific id to change the color, but it's not working. Can someone look at it for me?
I want to change the text of jumper18 from black to white
chantheman1288
@chantheman1288
Dec 06 2016 05:59 UTC
you were super close
$("#jumper18").children().css("color", "#FFFFFF");
that's what you need
jumper18
@jumper18
Dec 06 2016 06:00 UTC
ahh so I need children
chantheman1288
@chantheman1288
Dec 06 2016 06:00 UTC
you were selecting the list element that the text was held in, not the actual text. The children thing selects the child of the element with the id "#jumper18", and turns the color to white
jumper18
@jumper18
Dec 06 2016 06:01 UTC
if I had added the id to the link instead, would I have needed children?
chantheman1288
@chantheman1288
Dec 06 2016 06:01 UTC
no
jumper18
@jumper18
Dec 06 2016 06:01 UTC
awesome
@chantheman1288 thanks
CamperBot
@camperbot
Dec 06 2016 06:01 UTC
jumper18 sends brownie points to @chantheman1288 :sparkles: :thumbsup: :sparkles:
:warning: jumper18 already gave chantheman1288 points
chantheman1288
@chantheman1288
Dec 06 2016 06:02 UTC
Glad to have helped. This is so interesting
jumper18
@jumper18
Dec 06 2016 06:04 UTC
yeah I agree, I just started recently and I'm glad I did
chantheman1288
@chantheman1288
Dec 06 2016 06:06 UTC
@jumper18 , are you using any other websites you recommend?
jumper18
@jumper18
Dec 06 2016 06:08 UTC
not specifically, I just google something when I want to know
grantknaver
@grantknaver
Dec 06 2016 06:25 UTC
anyone free to answer a question quick
Hong
@designBuildShipSoftware
Dec 06 2016 06:35 UTC
Hey, I've decided to use i-- instead of date instance on my t.
On my pomodoro
Venkatesh Thapan
@thenerdyouknow
Dec 06 2016 06:43 UTC
When I put an image in my div the div doesn't scale down to the size of the image. How do I remedy this?
someone please explain my error?
kirbyedy
@kirbyedy
Dec 06 2016 06:50 UTC
@JackVizl Uncaught SyntaxError: Unexpected token <
Sorin Ruse
@sorinr
Dec 06 2016 06:50 UTC
@JackVizl look in here: </div class='col-lg-6'> in stickpoint.append.
Alex
@Sevohan
Dec 06 2016 06:50 UTC
Hey everyone! I recently finished my Wikipedia viewer but I can't seem to figure out how to get my footer to stay below everything else on my page at all times. Once I search Wikipedia my footer just floats over my results. http://codepen.io/Sevohan/pen/ORorLB
Sorin Ruse
@sorinr
Dec 06 2016 06:56 UTC
@JackVizl html syntax errors r somehow hard to discover when you write them in js
Sorin Ruse
@sorinr
Dec 06 2016 07:01 UTC
@JackVizl and take a look in here too: https://wind-bow.gomix.me/
@JackVizl suspect its also the api call url that gives you also errors. i have a twitch id key and for me its working the kraken way
Samudabamu
@Samudabamu
Dec 06 2016 07:16 UTC
Currently trying to format a <h> element with a negative margin, however it's not working. The above element is a floating image. Here is my html and here is my CSS
Hopefully this makes sense
When I say not work, I mean the <h> element is not moving at all, no matter the value of the negative margin
working*
jumper18
@jumper18
Dec 06 2016 07:20 UTC
I am trying to change my hr elements with CSS, but the height and color don't seem to change. Can someone help out? http://codepen.io/jumper18/pen/pNaKZr
Ghana Phuyel
@gphuyel
Dec 06 2016 07:23 UTC
@Sevohan position:fixed;
wangyiming21212
@wangyiming21212
Dec 06 2016 07:26 UTC
how to convert HTML entitles????
somebody help me
grantknaver
@grantknaver
Dec 06 2016 07:29 UTC
can anyone help with an api
this is brutal
Alex
@Sevohan
Dec 06 2016 07:45 UTC
Thank you @gphuyel
CamperBot
@camperbot
Dec 06 2016 07:45 UTC
sevohan sends brownie points to @gphuyel :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @gphuyel |http://www.freecodecamp.com/gphuyel
Emanuele Antonelli
@Em-Ant
Dec 06 2016 07:59 UTC
@tommyto prevent abuses I decided to not forward all kind of requests to the twitch api in the pass-through server. It responds only to GET /streams/:id, users/:id, channels/:id. If you need the full functionality I think you should get your own api key.
@sorinr molto bene, grazie :it:
Sorin Ruse
@sorinr
Dec 06 2016 08:03 UTC
@Em-Ant e andato via il PM?
Maryna Sokolova
@ultramarichka
Dec 06 2016 08:14 UTC
Hello everyone!
Here is my Wiki Searcher http://codepen.io/ultramarichka/full/jVVjEG/
kirbyedy
@kirbyedy
Dec 06 2016 08:16 UTC
@ultramarichka nice
maybe to handle cases when the user types something crazy like jkdshfalksjdfhalskhj
or empty box
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:34 UTC
Twitch API example project shared in instructions doesn't do anything, can anybody provide any other project to view?
Sorin Ruse
@sorinr
Dec 06 2016 08:39 UTC
@segmentationfaulter here is mine: twitch
Hebert Phillipe
@hiltypro
Dec 06 2016 08:41 UTC

Hi Guys,

How are you?
Please could you evaluate my tic tac toe?
So far this is the most challenging project that I've made here in freecodecamp:

http://codepen.io/hilty/full/RGAmZN/

Any feedback and advice is appreciated. =)
Cheers,

Sorin Ruse
@sorinr
Dec 06 2016 08:46 UTC
@hiltypro pretty nice. i would just add some messages for win, loss and tie. haven't seen them
James Shore
@Jimbobmahooley
Dec 06 2016 08:47 UTC
Hi can anyone post their personal portfolio webpage so i can get some ideas thanks
alpox
@alpox
Dec 06 2016 08:51 UTC
@segmentationfaulter They put the url for the new api endpoint wrong (Maybe already outdated again)
Thats why it doesn't work
I wonder though, why they didn't even handle the fail-case in their example
ashkrish07
@ashkrish07
Dec 06 2016 08:52 UTC
can anyone help me how to send quotes to twitter page...?
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:52 UTC
@alpox can you please provide some example project which is upto-date?
alpox
@alpox
Dec 06 2016 08:53 UTC
@segmentationfaulter Just a little fork from the example:
https://codepen.io/alpox/pen/RoMvxv?editors=0010
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:54 UTC
@alpox thanks a lot!
CamperBot
@camperbot
Dec 06 2016 08:54 UTC
segmentationfaulter sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 675 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 06 2016 08:54 UTC
@segmentationfaulter No problem :-)
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:54 UTC
@alpox are api endpoints shared outdated too?
alpox
@alpox
Dec 06 2016 08:57 UTC
@segmentationfaulter Yup they are. Use https://wind-bow.gomix.me/twitch-api
@segmentationfaulter Api documentation: https://github.com/justintv/Twitch-API
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:57 UTC
@alpox what if we use the twitch's own api?
isn't it a recommended way?
Sorin Ruse
@sorinr
Dec 06 2016 08:58 UTC
@segmentationfaulter i'm using just their api. registered with them and got my free key
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:59 UTC
@sorinr great, I would too
alpox
@alpox
Dec 06 2016 08:59 UTC
@segmentationfaulter Yea you can use that one, you just have to register and get an API key.
Freecodecamp provided an own endpoint for not needing that one
Muhammad Saqib
@segmentationfaulter
Dec 06 2016 08:59 UTC
@alpox thanks
@sorinr thanks
CamperBot
@camperbot
Dec 06 2016 08:59 UTC
segmentationfaulter sends brownie points to @alpox and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: segmentationfaulter already gave alpox points
:cookie: 899 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 06 2016 09:00 UTC
@segmentationfaulter welcome
James Shore
@Jimbobmahooley
Dec 06 2016 09:19 UTC
Hi can anyone post their personal portfolio webpage so i can get some ideas thanks
kirbyedy
@kirbyedy
Dec 06 2016 09:24 UTC
@Jimbobmahooley did you try to google ? there is literally million of portfolio sites around
alpox
@alpox
Dec 06 2016 09:24 UTC
@Jimbobmahooley Pictures are not up to date anymore (One or two not there anymore since i made it a long time ago) But you get the idea:
http://codepen.io/alpox/full/KzKXjN/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:26 UTC
@Jimbobmahooley suggests not gawk on too much on portfolio site you may end up making a exact design copy even if the code is yours :/
kirbyedy
@kirbyedy
Dec 06 2016 09:26 UTC
nice, a mobile phone and an email, I can spam you now :D
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:26 UTC
@Jimbobmahooley suggests not to gawk on too much on portfolio site you may end up making a exact design copy even if the code is yours :/
alpox
@alpox
Dec 06 2016 09:28 UTC
@kirbyedy Uhrg :D
@kirbyedy I may have to take these down :D
kirbyedy
@kirbyedy
Dec 06 2016 09:28 UTC
:D
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:29 UTC
@kirbyedy it better to have those actually .... (if the phone number is for professional use only )
James Shore
@Jimbobmahooley
Dec 06 2016 09:29 UTC
Thanks @alpox
CamperBot
@camperbot
Dec 06 2016 09:29 UTC
jimbobmahooley sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 676 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 06 2016 09:29 UTC
@kirbyedy Well this mail address is full of spam anyway :D i'm switching :P
kirbyedy
@kirbyedy
Dec 06 2016 09:29 UTC
@Mr-Kumar-Abhishek well having your portfolio on the codepen is not very professional to me :P
alpox
@alpox
Dec 06 2016 09:29 UTC
@Mr-Kumar-Abhishek That sadly is not the case, since i don't keep multiple mobile accounts :D I'm a poor student here
But this portfolio will never go life
kirbyedy
@kirbyedy
Dec 06 2016 09:30 UTC
doing it for the practice and as a playground is fine, but then just use some fake numbers
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:30 UTC
@kirbyedy true codepen is not professional
alpox
@alpox
Dec 06 2016 09:31 UTC
@kirbyedy You're right :D i updated my codepen with fakenumbers
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:31 UTC
@Jimbobmahooley http://mr-kumar-abhishek.github.io/my-portfolio <-- unfinished portfolio ... need to complete it :p
alpox
@alpox
Dec 06 2016 09:31 UTC
Since it won't go live anyway, thats no prob
I'll once make a portfolio/blog programmed with ELM and Phoenix/Elixir on backend
Once i have time
@Mr-Kumar-Abhishek Looks good so far, but Bootstrap shines through every edge :D
You may want to give it your own look ;-)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:33 UTC
@alpox yeah , I have to design over the bootstrap this is just you know.... rough stuff
alpox
@alpox
Dec 06 2016 09:33 UTC
But for unfinished i can just say that its layed out quite well already :D
@Mr-Kumar-Abhishek Yea that was my guess
I usually don't use any framework like Bootstrap for things like this
Because its easier to give it your own style when you are not led by key principles of the framework you're using
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:35 UTC
@alpox bootstrap is new to me, previously I did everything from scratch
alpox
@alpox
Dec 06 2016 09:36 UTC
@Mr-Kumar-Abhishek Heheh okay :D have fun with looking into it then
Its surely faster to mock a website with it
kirbyedy
@kirbyedy
Dec 06 2016 09:37 UTC
stupid question
its basically for javascript room
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:37 UTC
@alpox that is the point ... I am just on a rush to finish them....
kirbyedy
@kirbyedy
Dec 06 2016 09:38 UTC
how would you make every first letter of the word uppercase in the array and then convert that array to string
alpox
@alpox
Dec 06 2016 09:38 UTC
@Mr-Kumar-Abhishek :D its best for when you are in a rush
Good choice then ^^
@kirbyedy arr.map(elem => elem[0].toUpperCase() + elem.slice(1)).join(' ');
kirbyedy
@kirbyedy
Dec 06 2016 09:39 UTC
sheesh that was quick :D
Sorin Ruse
@sorinr
Dec 06 2016 09:39 UTC
i would say when learning css better do it on your own with no framework help. afterwards you will better understand how a framework works and what benefits you get using it.
kirbyedy
@kirbyedy
Dec 06 2016 09:39 UTC
I was hoping we could discuss it a bit :D
jumper18
@jumper18
Dec 06 2016 09:39 UTC
Can someone look at my codeine page and tell me why my text and images overlap my nav bar when scrolling? http://codepen.io/jumper18/pen/pNaKZr
kirbyedy
@kirbyedy
Dec 06 2016 09:39 UTC
but thanks @alpox
CamperBot
@camperbot
Dec 06 2016 09:39 UTC
kirbyedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 677 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 06 2016 09:39 UTC
@kirbyedy Sure :D we can discuss that ^^ that was just out of my fingers :D
kirbyedy
@kirbyedy
Dec 06 2016 09:40 UTC
lol
Sorin Ruse
@sorinr
Dec 06 2016 09:41 UTC
@jumper18 just give your navbar a z-index: 9999;
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:41 UTC
@sorinr I worked on css for freelance projects for few years (without ever learning it ) and still made a good design and had satisfied customers lol
kirbyedy
@kirbyedy
Dec 06 2016 09:41 UTC
wow, what is that game on the picture
with those buttons
and how do you play that
M&Ms ?
alpox
@alpox
Dec 06 2016 09:42 UTC
@Mr-Kumar-Abhishek Well, so you learned it - by doing :-)
jumper18
@jumper18
Dec 06 2016 09:43 UTC
@sorinr thanks
CamperBot
@camperbot
Dec 06 2016 09:43 UTC
jumper18 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 901 | @sorinr |http://www.freecodecamp.com/sorinr
alpox
@alpox
Dec 06 2016 09:43 UTC
@jumper18 You may want to do something about the title wrap on smaller width of the browser
jumper18
@jumper18
Dec 06 2016 09:43 UTC
@alpox yeah I noticed that but I wasn't sure what to do
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 09:44 UTC
@alpox i suppose so... it same with any other technology I came across unless those are down to metal like kernel or AI engines
jumper18
@jumper18
Dec 06 2016 09:44 UTC
@kirbyedy the game is called Igo
alpox
@alpox
Dec 06 2016 09:45 UTC
@jumper18 white-space: nowrap; on the navbar
Sorin Ruse
@sorinr
Dec 06 2016 09:45 UTC
@alpox learn by doing are lessons you will always remember. even now i don't remember all the css syntax from any framework. i just know what i want and how i want it and searach for it
alpox
@alpox
Dec 06 2016 09:46 UTC
@sorinr Yea well thats how i do it too :D and i guess most developers
Noone can remember every bit
jumper18
@jumper18
Dec 06 2016 09:46 UTC
@alpox should I just add that to the body?
alpox
@alpox
Dec 06 2016 09:47 UTC
@jumper18 No to the css of .NavBar
jumper18
@jumper18
Dec 06 2016 09:49 UTC
@alpox thanks
CamperBot
@camperbot
Dec 06 2016 09:49 UTC
jumper18 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 06 2016 09:51 UTC
@jumper18 np
jumper18
@jumper18
Dec 06 2016 09:51 UTC
@alpox sorry to be a bother, but do you also know why my hr will not increase in size of change colors?
I added, what I assumed were the appropriate, parts to the css
alpox
@alpox
Dec 06 2016 09:52 UTC
@jumper18 Use background-color instead of color
jumper18
@jumper18
Dec 06 2016 09:53 UTC
@alpox ahh got it! thanks again
CamperBot
@camperbot
Dec 06 2016 09:53 UTC
jumper18 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: jumper18 already gave alpox points
alpox
@alpox
Dec 06 2016 09:53 UTC
@jumper18 np :-)
Parley Kennelly
@parleydk
Dec 06 2016 10:04 UTC
Hey there. Could someone take a look at this for me and help me figure out why this bit of CSS doesn't make my collapsed menu "hamburger" button show up as white. I'm not using navbar-default. .navbar > .navbar-toggle > .icon-bar { color: white; }
http://codepen.io/pdkennelly/pen/XNzYxG
Marianissimus
@Marianissimus
Dec 06 2016 10:07 UTC
@parleydk Hi, i se you're using #example-navbar-collapse", maybe remove example?
Parley Kennelly
@parleydk
Dec 06 2016 10:09 UTC
@Marianissimus I took that out. no change.
Sorin Ruse
@sorinr
Dec 06 2016 10:14 UTC
@parleydk its important to have same id both places. no matter what the id is
Parley Kennelly
@parleydk
Dec 06 2016 10:15 UTC
@sorinr yes, thanks. when I changed it in one place I also changed it in the other. I didn't expect it to fix my problem, but it does look funny to still have the example piece there in a production website.
CamperBot
@camperbot
Dec 06 2016 10:15 UTC
parleydk sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 902 | @sorinr |http://www.freecodecamp.com/sorinr
Marianissimus
@Marianissimus
Dec 06 2016 10:15 UTC
so, yeah, the button is there and working, but does not display
Parley Kennelly
@parleydk
Dec 06 2016 10:17 UTC
@Marianissimus exactly. I just want it to have the same look and feel as the standard non-collapsed menu.
Marianissimus
@Marianissimus
Dec 06 2016 10:21 UTC
there's also the problem that the collapsed navbar seems bigger than the browser size, there's a horizontal scroll at resize
Parley Kennelly
@parleydk
Dec 06 2016 10:24 UTC
@Marianissimus thanks. I hadn't noticed that. I'll look into that. I just got rid of the "hamburger" button and put in the word Menu. that will work for me. I hate fighting Bootstrap.
CamperBot
@camperbot
Dec 06 2016 10:24 UTC
parleydk sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 149 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Dec 06 2016 10:25 UTC
you're welcome, happy to try a challenge:)
Rajat
@rajataudichya
Dec 06 2016 10:33 UTC
can some1 tell me how can we change a froms submit button
mohamedsaieed
@mohamedsaieed
Dec 06 2016 10:37 UTC
@Marianissimus hey i pm you
Gustav Svedung
@gustavsvedung
Dec 06 2016 10:49 UTC
Hi! Anyone here who's got the time to help me with a simple tribute page question?
Pieter Stokkink
@forkerino
Dec 06 2016 10:52 UTC
@gustavsvedung sure
Gustav Svedung
@gustavsvedung
Dec 06 2016 10:53 UTC
@forkerino great! i'm using bootstrap figure tag, to input an image and a caption, but i can't get the image centered
on larger screens, that is
Blaise
@Blaisebev
Dec 06 2016 10:55 UTC
@khaduch Thank you Ken! Ahh a very frustratingly small mistake on my part. I appreciate your help!
CamperBot
@camperbot
Dec 06 2016 10:55 UTC
blaisebev sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2039 | @khaduch |http://www.freecodecamp.com/khaduch
Pieter Stokkink
@forkerino
Dec 06 2016 10:58 UTC
@gustavsvedung This is because your image is only 864 px wide.
Gustav Svedung
@gustavsvedung
Dec 06 2016 10:59 UTC
@forkerino Is there a way to still get it centered on the page, when the browser width exceeds the image width?
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 11:00 UTC
@joshbivens Thank you very much Josh!!! Nearly done with my Project :D
CamperBot
@camperbot
Dec 06 2016 11:00 UTC
larongbingo sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @joshbivens |http://www.freecodecamp.com/joshbivens
Gianni Guitteaud
@gianniGG
Dec 06 2016 11:02 UTC
hey @gustavsvedung , there is a quick way to center it. you currently have it in a figure, and have no center setting applied. If you put it in a row and align it in the center, it will work
Pieter Stokkink
@forkerino
Dec 06 2016 11:04 UTC
@gustavsvedung Yes, you can use the 'center-block' class on a div surrounding the img.
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:09 UTC
@forkerino @gianniGG for some reason i chose to go with bootstrap 4, but I guess i should be able to use something like <div class="mx-auto>
Sorin Ruse
@sorinr
Dec 06 2016 11:12 UTC
@gustavsvedung bootstrap 4 will switch to flexbox as far as i know. until then i would just use plain flex properties
Marianissimus
@Marianissimus
Dec 06 2016 11:14 UTC
however, they say on the bootstrap site: "Enabling flexbox means reduced browser and device support:
Internet Explorer 9 and below do not support flexbox.
Internet Explorer 10 has a few known quirks"
Sorin Ruse
@sorinr
Dec 06 2016 11:16 UTC
@Marianissimus let the MS improve their browsers :)
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:17 UTC
tried wrapping the whole <figure> in a <div class="d-block mx-auto">, but that didn't seem to do it
Marianissimus
@Marianissimus
Dec 06 2016 11:18 UTC
yup, but the ie9 and ie10 users will not update too soon:) also, you have to manually enable bootstrap in Sass, whatever that is...
*flexbox, enable flexbox, correction
Sorin Ruse
@sorinr
Dec 06 2016 11:21 UTC
every change takes awhile but they will do it. you will see. in a way the web developers are pushing the things to move.
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:28 UTC
got the <figure> centered with a simple text-xs-center class in the parent col. thanks all!
Marianissimus
@Marianissimus
Dec 06 2016 11:29 UTC
do you need the xs part of it? pls try
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:30 UTC
@Marianissimus tried it, didn't work without the xs part
Marianissimus
@Marianissimus
Dec 06 2016 11:31 UTC
k, thx
Sorin Ruse
@sorinr
Dec 06 2016 11:31 UTC
@Marianissimus i think removing xs part will be like returning to bootstrap 3.x
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:32 UTC
what's your general opinion on using bootstrap alpha when learning to code?
bad idea?
Marianissimus
@Marianissimus
Dec 06 2016 11:34 UTC
it's not clear when they will release the final version, maybe next year? I don't know...
Sorin Ruse
@sorinr
Dec 06 2016 11:35 UTC
i personally don't like using frameworks. if you learn well css you will just understand what whatever framework its doing and at that point its just up to u in using one or another. this is how i think
@Marianissimus i think most of the devs using bs 3 r already looking into the bs4 even in alpha so they can gradually change their apps, templates, or whatever based on bs. they have to look into that
Gustav Svedung
@gustavsvedung
Dec 06 2016 11:43 UTC
@sorinr so maybe focus on using plain CSS when completing the first FCC challenges? makes sense in a way
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 11:53 UTC
anyone know a keyless Placefinder API ??
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 12:14 UTC
I need some help on my weather app , anyone ?
Hebert Phillipe
@hiltypro
Dec 06 2016 12:30 UTC

Hi Guys,

How are you?

Please could you evaluate my tic tac toe?
So far this is the most challenging project that I've made here in freecodecamp:
http://codepen.io/hilty/full/RGAmZN/

Any feedback and advice is appreciated. =)
Cheers,

ivanposavec
@ivanposavec
Dec 06 2016 12:46 UTC
Hello guys, i dont really know is this question is for this group, but please help me if someone can. I need to make some kind of scientific paper about HTML for my class, i am trying hard few days but i dont really have inspiration. I found a lot of books but there are more like tutorials for HTML, i need stuff like how html works, history od html and stuff like that, can someone help me with some literature or some tips what should i write about? thanks!
ADIL KARMOUZI
@mradil16
Dec 06 2016 12:56 UTC
Hi everyone . How can I pause / play an embed youtube video using jQuery ?
Capi Etheriel
@barraponto
Dec 06 2016 12:59 UTC
@mradil16 idk, but youtube has its own api library.
Michael de Lima Alves
@elderalves
Dec 06 2016 13:14 UTC
Anyone knows how I can get an invite to dribble?
Capi Etheriel
@barraponto
Dec 06 2016 13:19 UTC
in 2010!
haha
Sorin Ruse
@sorinr
Dec 06 2016 13:20 UTC
@suforoso why not just sign up: https://dribbble.com/signup ?
kirbyedy
@kirbyedy
Dec 06 2016 13:20 UTC
@sorinr its not the same
you can sign up but you cant post your work, only if someone invites you
Renz Christen Yeomer Pagulayan
@larongbingo
Dec 06 2016 13:21 UTC
Hi Guys,
Need help on my project
http://codepen.io/larongbingo/pen/YpaGqQ
I need to align the image , the h2, and the p elements in a single line
Sorin Ruse
@sorinr
Dec 06 2016 13:22 UTC
@kirbyedy i know. but if you are registered and meet people and show your work you will probably get the invitation :)
kirbyedy
@kirbyedy
Dec 06 2016 13:22 UTC
lol yea... I am hoping for the last 2 years :D
I guess I am not good enough :(
Sorin Ruse
@sorinr
Dec 06 2016 13:24 UTC
@kirbyedy lol. don't worry. u r not alone :)
kirbyedy
@kirbyedy
Dec 06 2016 13:25 UTC
:laughing:
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 13:42 UTC
anyone has attempted to do weather project with a keyless api ?
kirbyedy
@kirbyedy
Dec 06 2016 13:43 UTC
the simple weather ?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 13:48 UTC
@kirbyedy yes
kirbyedy
@kirbyedy
Dec 06 2016 13:49 UTC
I think I did an example with that one
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 13:49 UTC
@kirbyedy which API did you use ?
kirbyedy
@kirbyedy
Dec 06 2016 13:50 UTC
the simpleweather.js
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 13:52 UTC
@kirbyedy this is good stuff ... http://simpleweatherjs.com/ you won't belive what I was attempting to do instead...
kirbyedy
@kirbyedy
Dec 06 2016 13:53 UTC
yep thats the one
I did one with openweather as well
and with wunderground
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 13:57 UTC
@kirbyedy I tried to find a keyless API and got meta weather api , then I needed WOEID for it so again I needed another placefinder api , there was one of yahoo , so I had to get the api keys again , resisting using api keys again I got the whole data of yahoo api , geo location data from internet archive , I was on the way to build my api :o
kirbyedy
@kirbyedy
Dec 06 2016 14:00 UTC
:D
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 14:02 UTC
@kirbyedy using this passes for FCC challenge doesn't it ?
kirbyedy
@kirbyedy
Dec 06 2016 14:04 UTC
yes
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 14:17 UTC
@kirbyedy thanks a lot !
CamperBot
@camperbot
Dec 06 2016 14:18 UTC
mr-kumar-abhishek sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1624 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 06 2016 14:18 UTC
:)
Parley Kennelly
@parleydk
Dec 06 2016 14:35 UTC
@Marianissimus @sorinr Thanks both of you. Take a look now. I only have the home page completed, as I wanted to iron out all the formatting issues. http://codepen.io/pdkennelly/pen/XNzYxG
CamperBot
@camperbot
Dec 06 2016 14:35 UTC
parleydk sends brownie points to @marianissimus and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 904 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 150 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Dec 06 2016 14:41 UTC
yeah, it's nice, but I still notice a horizontal scroll at smaller size. I guess the rounded borders that you added, also add to the width of the elements. I'm not sure, but you can check
maybe use some margins on them - (@media and max-size... ) , i think you need to touch up a little the slideshow and navbar
the scroll appears at around 1028px and less
Sorin Ruse
@sorinr
Dec 06 2016 14:53 UTC
@parleydk what about trying a background-color: rgba(255,0,0,.8) to make it a little transparent and show the notes from the bg img?
Anyone like it?
Marianissimus
@Marianissimus
Dec 06 2016 15:09 UTC
hi. i like the font for the header, but I don't find it easy to read in the paragraph below... So, yeah for the header:)
Spencer
@coderamen
Dec 06 2016 15:10 UTC
hi all
is it possible for my button to send type inputs and link the buttons to send message to my email?
like when u type your name, email address, message = hello with a send button
Saud Alfaris
@Alfarissaoud
Dec 06 2016 15:14 UTC
@coderamen Only if you use a back-end language like php
thanks @Marianissimus
CamperBot
@camperbot
Dec 06 2016 15:14 UTC
alfarissaoud sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 153 | @marianissimus |http://www.freecodecamp.com/marianissimus
Spencer
@coderamen
Dec 06 2016 15:15 UTC
oh there no tag or javascript function i can use to do that? @Alfarissaoud
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:26 UTC
@mradil16 Put your video in an iframe and use the iframe API: https://developers.google.com/youtube/iframe_api_reference
Here's an example: http://codepen.io/TylerMoeller/pen/MbGWaO?editors=1011
Jerry Purvis
@MessiaHack
Dec 06 2016 15:26 UTC
@coderamen there is a way with jquery, however, codepen does not allow it
@coderamen I suspect it is because of security concerns.
Spencer
@coderamen
Dec 06 2016 15:27 UTC
okay @MessiaHack how do i do it then?
@MessiaHack demo pls?
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:28 UTC
@larongbingo put each streamer in a row with columns for the image, and h2. Don't use <p> as it creates a new line.
Jerry Purvis
@MessiaHack
Dec 06 2016 15:28 UTC
@coderamen look at my JS starting at line 20
@coderamen you generally have to have your own server setup to manage the post commands, though there are ways around it, such as I have (mailchimp with Mandrilla)
Spencer
@coderamen
Dec 06 2016 15:30 UTC
oh...
i thought there is a way i could manipulate it without using own server
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:30 UTC
@MessiaHack @coderamen Check out https://formspree.io, just use a burner email account as it might get spammed by email address harvesting bots...
Jerry Purvis
@MessiaHack
Dec 06 2016 15:31 UTC
@TylerMoeller yeah. I recently ran into that one, but unless my code is wrong on my portfolio, and someone's information was incorrect, codepen blocks these functions
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:33 UTC
Hmmm, I haven't tried it on codepen - you can always deploy to github if you want the functionality and submit the github url when you complete the project
Saud Alfaris
@Alfarissaoud
Dec 06 2016 15:34 UTC
@MessiaHack there is a small problem
@MessiaHack some space on the right side of the page
Jerry Purvis
@MessiaHack
Dec 06 2016 15:35 UTC
@Alfarissaoud how can I fix it?
Josh Bivens
@joshbivens
Dec 06 2016 15:41 UTC
@larongbingo :)
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:45 UTC
@MessiaHack I just tried out formspree.io and it worked on codepen. You have to do it from the debug view of your page, however, or you run into security errors.
Jerry Purvis
@MessiaHack
Dec 06 2016 15:45 UTC
thanks @TylerMoeller
CamperBot
@camperbot
Dec 06 2016 15:45 UTC
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1094 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:46 UTC
The security errors cause the form to load over and over again...ended up getting 60 test mails lol before the service throttled me.
Jerry Purvis
@MessiaHack
Dec 06 2016 15:46 UTC
@TylerMoeller apparently, there is some white space on the right side of my web page, and I'm not sure which direction go to to get it fixed.
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:47 UTC
Okay, I'll take a look. One way to debug these kinds of things is to add this to your CSS:
* {
  border: 1px solid black;
}
Looks like it's something to do with your logo
Jerry Purvis
@MessiaHack
Dec 06 2016 15:48 UTC
oh wow. That little trick is cool! That definitely helps!
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:52 UTC

@MessiaHack The fix appears to be removing the margin-right -90px for your h2 and using margin-left instead:

h2 {
  font-family: orbitron;
  font-size: 75px;
  text-align: center;
  margin-left: 90px;
}

And then change your .line-separator class to have a smaller margin-left value

Sorin Ruse
@sorinr
Dec 06 2016 15:52 UTC
@TylerMoeller yep. borders for visually debugging html and css and console.log for js part
ko loy yee
@koloyyee
Dec 06 2016 15:56 UTC
hey guys
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:56 UTC
@sorinr Good, not some crazy hack I've been recommending lol
ko loy yee
@koloyyee
Dec 06 2016 15:56 UTC
how you guys doing
Jerry Purvis
@MessiaHack
Dec 06 2016 15:57 UTC
@TylerMoeller that border trick really helps big time.
ko loy yee
@koloyyee
Dec 06 2016 15:57 UTC
i just want to ask for some advice, i have finished the css training with freecodecamp, but i feel like i dont really understand if i have to make a webpage, i would like to ask, should i stop learning javascript but focus on CSS first?
Jerry Purvis
@MessiaHack
Dec 06 2016 15:58 UTC
so why does putting margin-right -90px create that gap, but not doing margin-left 90px?
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:58 UTC
@koloyyee It's up to you, sometimes it's good to take a break and try JS for a while, then go back to CSS. Or, vice-versa.
ko loy yee
@koloyyee
Dec 06 2016 15:59 UTC
@TylerMoeller thanks, i am just wondering is it ok to stop JS but to learn more CSS first
CamperBot
@camperbot
Dec 06 2016 15:59 UTC
koloyyee sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1095 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 06 2016 15:59 UTC
@MessiaHack margin-left is moving off of the P where margin-right is moving off the right side of the page.
ko loy yee
@koloyyee
Dec 06 2016 15:59 UTC
because i have a bit of confusion with JS logic
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:00 UTC
So, margin-right: -90px is saying to move it 90px off the right side of the page
@koloyyee I switch it up all the time - sometimes working on unrelated things can give you those aha moments
Jerry Purvis
@MessiaHack
Dec 06 2016 16:00 UTC
interesting. definitely something to remember in the future.
ko loy yee
@koloyyee
Dec 06 2016 16:01 UTC
ic, just the reality is i only have 1 hr of coding time everythign after work lol
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:01 UTC
@MessiaHack Understanding the details of the CSS Box Model helps a lot with this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Sorin Ruse
@sorinr
Dec 06 2016 16:05 UTC
@TylerMoeller hacks are ok. i will not try to change a lot of code (be it html, css, js) just to solve an issue. i would go deeper into code only if that issue generates also other issues
Jerry Purvis
@MessiaHack
Dec 06 2016 16:05 UTC
thanks @TylerMoeller
CamperBot
@camperbot
Dec 06 2016 16:05 UTC
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: messiahack already gave tylermoeller points
ko loy yee
@koloyyee
Dec 06 2016 16:23 UTC
hey guys i just want to ask which book or website if i want to learn more indepth about CSS? thank you
jimegreen
@jimegreen
Dec 06 2016 16:25 UTC
good night
Nitin Chandran Nair
@NitinNair89
Dec 06 2016 16:25 UTC
@gabriela3001 Internet is more than enough. There are many websites
Sorin Ruse
@sorinr
Dec 06 2016 16:26 UTC
@koloyyee i would say there is no book or website that will teach you css better then your own practice of it
ko loy yee
@koloyyee
Dec 06 2016 16:27 UTC
@sorinr i mean as in understand more about different class or style or elements
Clyde Lobo
@oppiniated
Dec 06 2016 16:27 UTC
@koloyyee I'd recommend this book http://shop.oreilly.com/product/0636920031123.do
You can also check https://css-tricks.com/
Spencer
@coderamen
Dec 06 2016 16:28 UTC
hi @TylerMoeller after experimenting with what you recommend on https://formspree.io/, my respond is still need a web server to work....damn :(
ko loy yee
@koloyyee
Dec 06 2016 16:28 UTC
thanks! @oppiniated i suppose is a entry level book correct?
CamperBot
@camperbot
Dec 06 2016 16:28 UTC
koloyyee sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @oppiniated |http://www.freecodecamp.com/oppiniated
Clyde Lobo
@oppiniated
Dec 06 2016 16:29 UTC
@koloyyee You need to understand the basics of css
ko loy yee
@koloyyee
Dec 06 2016 16:30 UTC
@oppiniated yea i desparately want to master basic
Rik Dendal
@rikdendal
Dec 06 2016 16:30 UTC
Is there like a library where you can search for the different functions?
Clyde Lobo
@oppiniated
Dec 06 2016 16:31 UTC
@rikdendal what functions?
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:31 UTC
@coderamen Yes, that is correct. Your HTML must not be in an iFrame and must be on a web server for formspree to work.
Rik Dendal
@rikdendal
Dec 06 2016 16:31 UTC
@oppiniated bootstrap
ko loy yee
@koloyyee
Dec 06 2016 16:31 UTC
thank you so much @oppiniated !!
CamperBot
@camperbot
Dec 06 2016 16:31 UTC
koloyyee sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:warning: koloyyee already gave oppiniated points
Sorin Ruse
@sorinr
Dec 06 2016 16:32 UTC
@koloyyee for css part the class or id, or whatever its just a selector. so you need to select something from the html part and style it using css as you want. thats all. hope it makes sense
Rik Dendal
@rikdendal
Dec 06 2016 16:32 UTC
@oppiniated I mean somewhere where i can find information of the different function within bootstrap
ko loy yee
@koloyyee
Dec 06 2016 16:33 UTC
@sorinr yea it does! i just need to understand them well enough and practice enough! thanks @sorinr
CamperBot
@camperbot
Dec 06 2016 16:33 UTC
koloyyee sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 905 | @sorinr |http://www.freecodecamp.com/sorinr
jelwart
@jelwart
Dec 06 2016 16:34 UTC
I just got to the "Build a personal portfolio webpage" and I'm a little bit overwhelmed. I've got the example opened up right next to me, but is there a way I can see where the visible action on the page is located in the writing? For example: I press "Portfolio" and the page scrolls down. Where in the code is this happening?
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:34 UTC
@jelwart right-click the element and choose "inspect"
Clyde Lobo
@oppiniated
Dec 06 2016 16:34 UTC
@rikdendal I really don't know what you need. Have you tried http://getbootstrap.com/javascript/
jelwart
@jelwart
Dec 06 2016 16:35 UTC
@TylerMoeller Oh sweet. You know, I totally knew that but was way overthinking it because this little project seems impossible. Thanks man!
CamperBot
@camperbot
Dec 06 2016 16:35 UTC
jelwart sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1096 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:36 UTC
No problem, it can be overwhelming at first :)
@rikdendal In case that link from oppiniated isn't what you need, try https://devdocs.io - they have all the bootstrap docs and much more, all in one place.
Capi Etheriel
@barraponto
Dec 06 2016 16:42 UTC
devdocs++
Sorin Ruse
@sorinr
Dec 06 2016 16:43 UTC
@koloyyee u r going to use classes a lot in css and html (these two r always related) when you want to style same way multiple html elements
Sorin Ruse
@sorinr
Dec 06 2016 16:53 UTC
@barraponto devdocs are really nice but i don't see it suitable for the first beginner. the menus are structured alphabetically. someone new will have difficulties in searching for what he/she needs coz doesn't know how to/where to search for
Capi Etheriel
@barraponto
Dec 06 2016 16:54 UTC
agreed. but it's good for people like myself, who code in airplanes/publictransport
(i'm actually switching to Zeal, but it's basically the same)
Sorin Ruse
@sorinr
Dec 06 2016 16:58 UTC
@barraponto yep. when you need some quick info, i also go sometimes to devdocs to refresh my memory or just learn but because i know how to search. i know what i need
Tyler Moeller
@TylerMoeller
Dec 06 2016 16:58 UTC
devdocs is like a dictionary, quick reference and good for a read from start to finish if you want to increase your vocabulary
Sorin Ruse
@sorinr
Dec 06 2016 17:00 UTC
@TylerMoeller yes. kinda wikipedia but you have to know to put the right question in order to get the right answer
Stefaan Walleghem
@lawfets
Dec 06 2016 17:02 UTC
I'm officially hating the weather api project
So after long searching and quite a bit of help I managed to get the call working
But now I'm trying to get a bit of order in the provided object
I was so depressed, I literally copy pasted the "convert JSON Data to html" code and adapted it to my code
and what happens? nothing
I am literally getting sick over this one
if someone please wants to look at it. it's my worst project ever
Sorin Ruse
@sorinr
Dec 06 2016 17:08 UTC
@lawfets what do you want to achieve using this: data.forEach(function(val) ?
Stefaan Walleghem
@lawfets
Dec 06 2016 17:09 UTC
@sorinr I don't really know exactly anymore, as I said, I copied the code from the cat challenge json to html code
because, nothing gets me anywhere
so data is the object, and I'm looking for what is described in the function
Jason Luboff
@JLuboff
Dec 06 2016 17:10 UTC
@lawfets I find using jQuery is very useful. We can use jquery's .html to replace data in our HTML portion. For instance, we can have a div container <div id="temp"></div> and in our JS do $("#temp").html(data.main.temp) which will place the temp data there
Sorin Ruse
@sorinr
Dec 06 2016 17:10 UTC
@lawfets don't panic. just have fun.
Stefaan Walleghem
@lawfets
Dec 06 2016 17:11 UTC
@JLuboff I have a div where to place it, but nothing comes up the screen
and I know it works because I can get the whole object through the JSON call
but now, I want to see, what is property and what is value, by highlighting property
Jason Luboff
@JLuboff
Dec 06 2016 17:13 UTC
@lawfets The thing is, if you do console.log(htmlCode) it isn't returning anything, hence why we aren't getting any output. I think thats where @sorinr is coming from when asking about the forEach function
Stefaan Walleghem
@lawfets
Dec 06 2016 17:13 UTC
@JLuboff I can only say that that function is a literal copy of the "convert JSON data to html" challenge just before the projects
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
});
html += "</div><br>";
});
<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});


        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>
Jason Luboff
@JLuboff
Dec 06 2016 17:15 UTC
I would ditch it. You can access each component of the returned object with just dot or bracket notation
Stefaan Walleghem
@lawfets
Dec 06 2016 17:15 UTC
yes, but I like to find out how things work before I use them
Jason Luboff
@JLuboff
Dec 06 2016 17:15 UTC
What I did was create variables for each element that I wanted (city, temp, etc) and then work with them from there
Sorin Ruse
@sorinr
Dec 06 2016 17:15 UTC
@lawfets if you console.log(data); just after q=veurne&units=metric&lang=en&appid=your_api_id", function(data){ you will see in the console a nice reponse
Stefaan Walleghem
@lawfets
Dec 06 2016 17:16 UTC
@JLuboff I understand you point of view but that is not how my brain works, I have to solve the puzzle first before I can continue
@sorinr I don't see anything, I'll first try it in brackets
@sorinr and isn't that almost the same as {$("#weatherMap").html(JSON.stringify(data)), what we used and succeeded for the first part
Stefaan Walleghem
@lawfets
Dec 06 2016 17:22 UTC
@sorinr I don't see anything using console.log
Tyler Moeller
@TylerMoeller
Dec 06 2016 17:22 UTC

@lawfets For another suggestion, if you just want to see the JSON object printed as HTML, use this code in your $.getJSON function:

    for (var prop in data) {
      if (!data.hasOwnProperty(prop)) continue;
      $('#weatherMap').append(prop + ': ' + JSON.stringify(data[prop]) + '<br>');
    }

That should help give an idea of what data.coord gives you, along with data.weather.description

etc.
Stefaan Walleghem
@lawfets
Dec 06 2016 17:23 UTC
@TylerMoeller I first want to solve the problem I have at the moment instead of looking for a different solution although I appreciate your help
Sorin Ruse
@sorinr
Dec 06 2016 17:23 UTC
@lawfets press f12 into ur browser and go to console tab
Tyler Moeller
@TylerMoeller
Dec 06 2016 17:23 UTC
The problem we're trying to help you solve is to see the JSON object so you can figure out how to parse it.
All that $.getJSON is doing is getting a JSON object so you can parse it and then present as HTML
Stefaan Walleghem
@lawfets
Dec 06 2016 17:25 UTC
@sorinr ok, I get data.forEach is not a function
@sorinr but if this is a mistake then why does it work in the challenge
@sorinr I think I found it. forEach is for array? yes?
but mine is a full object
not an array
so that's why it doesn't work, the challenge uses an array
Stefaan Walleghem
@lawfets
Dec 06 2016 17:31 UTC
@JLuboff @sorinr thx for your time, and the info, I'll try to finish it with jLuboff's code
CamperBot
@camperbot
Dec 06 2016 17:31 UTC
lawfets sends brownie points to @jluboff and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 473 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 906 | @sorinr |http://www.freecodecamp.com/sorinr
Tyler Moeller
@TylerMoeller
Dec 06 2016 17:31 UTC
@lawfets Correct. So, change your .forEach() to: [data].forEach(function(val) {
The brackets puts it in an arry
Stefaan Walleghem
@lawfets
Dec 06 2016 17:31 UTC
@TylerMoeller, oh, does it work that way too? nice
I'm breathing again
Tyler Moeller
@TylerMoeller
Dec 06 2016 17:33 UTC
The code I put above is a better way to do it for a generic JSON object, but that will work for this Weather APIs object
that = putting data in brackets as [data].forEach
Stefaan Walleghem
@lawfets
Dec 06 2016 17:33 UTC
@TylerMoeller Yes, and now you gave me that line of code, I'll use it and see how it works
@TylerMoeller thx a lot, I'll try to get one step further now
CamperBot
@camperbot
Dec 06 2016 17:35 UTC
lawfets sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1097 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 06 2016 17:37 UTC
Hang in there, definitely good to take it one step at a time as you're doing
Stefaan Walleghem
@lawfets
Dec 06 2016 17:42 UTC
btw, all you people, helping me, I finally understand how to work with the console on pencode and use the F12 button, so thanks for that too
Parley Kennelly
@parleydk
Dec 06 2016 17:45 UTC
@Marianissimus @sorinr thanks for the feedback. I made the background semi-transparent and I only get the horizontal scroll bar below 317px. I had to add a container-fluid class to the carousel. Last thing for this page is the contact info. I want it directly under the words of the top image. I'm playing with position:
CamperBot
@camperbot
Dec 06 2016 17:45 UTC
parleydk sends brownie points to @marianissimus and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 155 | @marianissimus |http://www.freecodecamp.com/marianissimus
:cookie: 907 | @sorinr |http://www.freecodecamp.com/sorinr
Scott Mac Donald
@Corinos
Dec 06 2016 17:48 UTC
Is anyone available to have a peek at my HTML/CSS? I have a specific effect I'm trying to create, but can't seem to make it happen. It seems like it should be fairly straight forward.
I feel like I may have some inherited css that's causing my issue.
Scott Mac Donald
@Corinos
Dec 06 2016 17:56 UTC
I'm looking at it in the 'Inspect Element' section of Chrome, and nothing is jumping out when I look at the styles. The effect, for reference, is that I have an img that's a png with transparency. It looks like a polaroid frame. I want to have it appear on top of another image, with the transparency showing my second img through.
I've played with position and z-index, but I don't have a great understanding of them and any changes haven't affected my end result.
Adjusting margins didn't... Damnit. I was playing while typing this and I'm making progress! Thanks for listening!
Rob McDonald
@McRobbah
Dec 06 2016 18:00 UTC
Good day! I am finishing up my tribute page and I would like to know where I enter my user stories? Also, is there still a place in the forums to request feedback on our tribute pages?
Scott Mac Donald
@Corinos
Dec 06 2016 18:01 UTC
Hey @McRobbah, I think the User Stories part is what you read from the instrictions, for instance "3.User Story: I navigate to different sections of the webpage by clicking buttons in the navigation."
I don't think you enter any, per-se.
Rob McDonald
@McRobbah
Dec 06 2016 18:02 UTC
Got it. Thank you @Corinos
CamperBot
@camperbot
Dec 06 2016 18:02 UTC
mcrobbah sends brownie points to @corinos :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @corinos |http://www.freecodecamp.com/corinos
Dustin Wright
@DustinEWright
Dec 06 2016 18:05 UTC

Hey y'all, just getting started with this one. I'm curious, why can't I make my font color white via CSS? This is very much a work in progress, please forgive the mess.

https://codepen.io/DustinWright/pen/yVKPav

Scott Mac Donald
@Corinos
Dec 06 2016 18:08 UTC
@DustinEWright It could be a Bootstrap thing with that Jumbotron, or do you mean in the navbar?
Dustin Wright
@DustinEWright
Dec 06 2016 18:10 UTC
Both actually.
Scott Mac Donald
@Corinos
Dec 06 2016 18:10 UTC
Now, I don't know how to do what that says exactly
Dustin Wright
@DustinEWright
Dec 06 2016 18:10 UTC
@Corinos Sorry, still getting the hang of this too. Both actually. I thought local CSS overrode Bootstrap.
Tyler Moeller
@TylerMoeller
Dec 06 2016 18:11 UTC
@DustinEWright The property is color not font-color, also, the text in your .nav-pills section is blue because those are hyperlinks. You'll need to specify .nav-pills a to specify a color for those.
.nav-pills a {
  background-color: #4D4D50;
  color: white;
}

.jumbotron {
  background-color: #AAAAAA;
  color: white;
}
Scott Mac Donald
@Corinos
Dec 06 2016 18:12 UTC
I think the Bootstrap parts, like the Jumbotron, all have defaults that look at some of the properties like Primary and that sort as well.
Also, listen to @TylerMoeller . He seems to know what he's doing, heh.
Dustin Wright
@DustinEWright
Dec 06 2016 18:16 UTC
@Corinos @TylerMoeller Thank you both, I see better now.
CamperBot
@camperbot
Dec 06 2016 18:16 UTC
:cookie: 143 | @corinos |http://www.freecodecamp.com/corinos
dustinewright sends brownie points to @corinos and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1098 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Dustin Wright
@DustinEWright
Dec 06 2016 18:19 UTC

I'd like to add an image to the background of the page, is this not the correct syntax?

body {
    background: url("https://unsplash.com/photos/pq2DJBntZW0") no-repeat center center;
}

Thanks!

nghitrum
@nghitrum
Dec 06 2016 18:20 UTC
Hello! Could you please help me about changing the background color of twitter share button?
Is there any way to custom the button but still keep the function of twitter?
Custom means style custom.
alpox
@alpox
Dec 06 2016 18:22 UTC
@nghitrum you can always restyle with css
Tyler Moeller
@TylerMoeller
Dec 06 2016 18:22 UTC
@DustinEWright That's the correct syntax, but you are linking to a web page not an image.
Dustin Wright
@DustinEWright
Dec 06 2016 18:23 UTC
@TylerMoeller Thanks again, I'm doing it wrong!
CamperBot
@camperbot
Dec 06 2016 18:23 UTC
dustinewright sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: dustinewright already gave tylermoeller points
nghitrum
@nghitrum
Dec 06 2016 18:23 UTC
@alpox I know i can do this but i don't know how. I am not sure which class they're using.
alpox
@alpox
Dec 06 2016 18:24 UTC
@nghitrum just inspect your button with your browsers developer tools
@nghitrum And you probably can give it an id/class yourself (not sure here)
Tyler Moeller
@TylerMoeller
Dec 06 2016 18:24 UTC
@DustinEWright Unsplash can be tricky - take those final letters and numbers as the picture ID and plug it in like this:
https://source.unsplash.com/<picture ID>/WidthxHeight
For example: https://source.unsplash.com/pq2DJBntZW0/1280x1024
Tyler Moeller
@TylerMoeller
Dec 06 2016 18:24 UTC
Adjust the width/height to your liking
Tom
@kidkarma
Dec 06 2016 18:25 UTC
Can anyone help me with a wordpress question? I'm not sure where else to ask. I need to add an ID to a header div which currently only has a class. Is this possible?
Dustin Wright
@DustinEWright
Dec 06 2016 18:25 UTC
All, I've found this tutorial video on YouTube about Bootstrap. I'm finding it a handy reference.
https://youtu.be/gqOEoUR5RHg
@alpox Fancy! Thank you!!!
CamperBot
@camperbot
Dec 06 2016 18:25 UTC
dustinewright sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 679 | @alpox |http://www.freecodecamp.com/alpox
nghitrum
@nghitrum
Dec 06 2016 18:26 UTC
@alpox I figure out that the color is set by .btn class. However, when i set class as
```
.btn {
    background-color: unset !important;
}
It doesn't work.
alpox
@alpox
Dec 06 2016 18:28 UTC
@nghitrum unset isn't a valid identifier i guess. try none
Chris
@bestintown23
Dec 06 2016 18:32 UTC
http://codepen.io/bestintown23/pen/woPMBV hey guys how can i make my site here have the parallax effect when i scroll?
what effect are you looking for
Chris
@bestintown23
Dec 06 2016 18:35 UTC
@moT01 parallax
you need to link some css position or style to the position of the scroll location, ...i used it a little bit on my wiki page, http://codepen.io/moT01/pen/LRoxrQ?editors=1010 the bottom function in my js
might not be the way to do what you want to happen
Chris
@bestintown23
Dec 06 2016 18:58 UTC
http://codepen.io/bestintown23/pen/woPMBV here is my portfolio. is there any suggestions to make it better?
@bestintown23 the pictures are too big
i dont like the space between the nav bar and the top
could maybe use a little more color
but it looks pretty solid, ...as you do more projects you will add more things, and maybe change some things around
Marianissimus
@Marianissimus
Dec 06 2016 19:09 UTC
black and white. i like it. it has a cool, sobre style @bestintown23
also love the michael jordan tribute page. maybe there's work to be done on both of them, but you have a good eye for cool, fresh, minimal design @bestintown23
Chris
@bestintown23
Dec 06 2016 19:16 UTC
@Marianissimus thanks!!!
CamperBot
@camperbot
Dec 06 2016 19:16 UTC
bestintown23 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 156 | @marianissimus |http://www.freecodecamp.com/marianissimus
Thomas Swatland
@swatbone85
Dec 06 2016 19:16 UTC
Hey guys, having a bit of trouble. Whenever I click the button, the object VERY briefly gets logged to the console, but a millisecond later the console gets cleared. I tried changing "#searchButton" to "body" and then it works fine if I click the div. Hope this made sense, any thoughts?
$("#searchButton").on("click", function() {
  $.ajax({
    url: api + "anything",
    dataType: "jsonp",
    crossDomain: true,
    success: function(data) {
      console.log(data)
    }
  });
});
Chris
@bestintown23
Dec 06 2016 19:16 UTC
@moT01 how can i make the pictures smaller?
could add a margin, ...probly work
Ken Haduch
@khaduch
Dec 06 2016 19:27 UTC

@bestintown23 - nice looking site, I agree with @moT01 about the pictures being rather large - you can just do something like set the width to a percentage, or use max-width with a pixel value. Although the picture of yourself at the top is a nice picture, it may be a little overkill? Just my opinion, but if someone is coming to see your portfolio, they might want to see something that is informative right at the top of the page - your "About" section, perhaps, which also features a more reasonably sized profile pic of you, which is nice. If you are trying to feature some of your photographic work, then maybe list that as a skill and have a portfolio page of your photo work?

And I agree with @Marianissimus about the Michael Jordan page - great style on that! Good start!

Chris
@bestintown23
Dec 06 2016 19:29 UTC
@khaduch thanks
CamperBot
@camperbot
Dec 06 2016 19:29 UTC
bestintown23 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2041 | @khaduch |http://www.freecodecamp.com/khaduch
Jason Luboff
@JLuboff
Dec 06 2016 19:30 UTC
@sorinr Some brownies for you. Thanks
CamperBot
@camperbot
Dec 06 2016 19:30 UTC
jluboff sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 908 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 06 2016 19:31 UTC
@JLuboff glad u enjoyed it. :+1:
Chris
@bestintown23
Dec 06 2016 19:35 UTC
@khaduch my plan was to make a animation that could show on the first picture welcoming viewers to the site, i just need to figure out how to do it lol
Ken Haduch
@khaduch
Dec 06 2016 19:38 UTC
@bestintown23 - I'm sure that you'll have a great portfolio, judging by your work up to this point. Use the feedback as you find it to be helpful, it is good to get lots of opinions!
Frank Joseph
@frankmaayn
Dec 06 2016 19:41 UTC
does anyone know how to make the navbar go down as you scroll down the page?
Marianissimus
@Marianissimus
Dec 06 2016 19:42 UTC
yup, with jquerry or javascript, it can be done @frankmaayn
@frankmaayn what do you mean by down? fixed position will make it sit where you want (at the top) as you scroll
Frank Joseph
@frankmaayn
Dec 06 2016 19:44 UTC
@moT01 when i scroll down the page.. the navbar will follow
@moT01 for example the freecodecamp nav bar
Marianissimus
@Marianissimus
Dec 06 2016 19:45 UTC
it will stick to the top of the page, that's what you mean, right? give us an example
css fixed positioning
Marianissimus
@Marianissimus
Dec 06 2016 19:45 UTC
that's a fixed positioning, right
Frank Joseph
@frankmaayn
Dec 06 2016 19:45 UTC
i dont know lol
Marianissimus
@Marianissimus
Dec 06 2016 19:45 UTC
no need for js or jquerry for that, just css
Frank Joseph
@frankmaayn
Dec 06 2016 19:46 UTC
@Marianissimus an example would be the freecodecamp nav bar... when u scroll down it follows
Marianissimus
@Marianissimus
Dec 06 2016 19:47 UTC
.navbar {position: fixed}
i disagree, it doesn't follow, it stays in the same position.
your content flows, the navbar stays put right there.
Frank Joseph
@frankmaayn
Dec 06 2016 19:48 UTC
yes thats what i meant
lol
Marianissimus
@Marianissimus
Dec 06 2016 19:48 UTC
no, it's important to clarify, because a navbar can do many things. it can follow, jump positions, so on
so, yup, gave you the code earlier:)
Dustin Wright
@DustinEWright
Dec 06 2016 19:50 UTC
What must I do to get my divs to butt up against each other? Is this a margin and/or padding problem? (those have not clicked with me yet).
Thanks!
https://codepen.io/DustinWright/pen/yVKPav
@swatbone85 hey are you still having issues?
Thomas Swatland
@swatbone85
Dec 06 2016 19:50 UTC
@moT01 Hey! Yeah, can't seem to figure it out
have a pen?
Frank Joseph
@frankmaayn
Dec 06 2016 19:52 UTC
@Marianissimus i added the code; what do i need to put so that the nav bar is fixed infront of the context and not behind it
Thomas Swatland
@swatbone85
Dec 06 2016 19:52 UTC
@moT01 Writing in Atom, gimme a sec and I'll put it in a pen
@DustinEWright open the inspector and you can find out what is actually taking up that space
Dustin Wright
@DustinEWright
Dec 06 2016 19:53 UTC
@moT01 "inspector"? The editor? Sorry, very new.
Marianissimus
@Marianissimus
Dec 06 2016 19:53 UTC
the paragraph has a margin, i found it @DustinEWright
firefox, right click, and click inspect element
Dustin Wright
@DustinEWright
Dec 06 2016 19:53 UTC
@Marianissimus Meant the contains themselves as in the example.
chrome is similar
Dustin Wright
@DustinEWright
Dec 06 2016 19:54 UTC
@moT01 I'm sorry, what am I looking for?
@Marianissimus I meant the containers themselves.
move the mouse over the words in the html, ...and the elements will become highlighted @DustinEWright
Marianissimus
@Marianissimus
Dec 06 2016 19:55 UTC
@frankmaayn show me the code, i need to see it
jelwart
@jelwart
Dec 06 2016 19:56 UTC
Hey guys, how can I keep the pipes in my navbar without them being part of the actual links? I like the "clean" look that the pipes provide but having them highlight when I hover over the links is obnoxious. https://codepen.io/jelwart/pen/xRjGoJ
Lajuane Brown
@bluntiebrown
Dec 06 2016 19:57 UTC
Hello out there I just completed the tribute page and need help putting up on facebook for review by other students/coders
Dustin Wright
@DustinEWright
Dec 06 2016 19:57 UTC
@moT01 Now I see what you mean, thank you!
CamperBot
@camperbot
Dec 06 2016 19:57 UTC
dustinewright sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @mot01 |http://www.freecodecamp.com/mot01
Dustin Wright
@DustinEWright
Dec 06 2016 19:58 UTC
@Marianissimus I see what you mean, thank you!
CamperBot
@camperbot
Dec 06 2016 19:58 UTC
dustinewright sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 157 | @marianissimus |http://www.freecodecamp.com/marianissimus
@swatbone85 your ajax is working so yea, its something like you said, ...lemme see if i can get there
Marianissimus
@Marianissimus
Dec 06 2016 19:59 UTC
sometimes it's so quite in here, and other times I can't follow what's going on:)
Frank Joseph
@frankmaayn
Dec 06 2016 19:59 UTC
lol
Marianissimus
@Marianissimus
Dec 06 2016 20:02 UTC
@frankmaayn ok, I see your problem: the content goes over the navbar. hmm, actually, you have some other problems, if I'm being honest:) for instance, you use inline styles, and it's so hard for me to see what's going on in the pen... perhaps, if you know what you've done there, you can use some z-index: 1 for the navbar, -100 for the content container, if you have any
here's a demo how z-index works: http://www.w3schools.com/cssref/playit.asp?filename=playcss_z-index&preval=2 basically, you want to tell the browser to display the navbar on top of the other content
OR @frankmaayn better yet, since you use bootstrap, just add this class to the navbar: .navbar-fixed-top
Dustin Wright
@DustinEWright
Dec 06 2016 20:07 UTC

I had one of you help me earlier, but I failed to understand. I want to use an image from here, how to I get the proper URL to put into background tag?

background: url()

https://unsplash.com/collections/136301/space
Thanks.

@swatbone85 so i may have found your problem, ...when you submit a form the browser will like take you to another page
you need to prevent that from happening
Thomas Swatland
@swatbone85
Dec 06 2016 20:10 UTC
@moT01 Ah yeah, that makes sense! That would explain the clear console.
jelwart
@jelwart
Dec 06 2016 20:10 UTC
@DustinEWright I followed the link, chose a picture, and inspected it in chrome. Then I took the image link (https://images.unsplash.com/photo-1459909633680-206dc5c67abb?dpr=1&auto=compress,format&fit=crop&w=991&h=660&q=80&cs=tinysrgb&crop=) which might work for you. Because if I remember correctly you were using the link to the website instead of the one to the image.
i would think that stuff would stay in the console though still, ...guess not
jelwart
@jelwart
Dec 06 2016 20:11 UTC
@DustinEWright But it also might not work, I'm also new here.
Thomas Swatland
@swatbone85
Dec 06 2016 20:11 UTC
@moT01 I'll do some reading on the subject :) thanks for your help!
CamperBot
@camperbot
Dec 06 2016 20:11 UTC
swatbone85 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @mot01 |http://www.freecodecamp.com/mot01
sure thing
Dustin Wright
@DustinEWright
Dec 06 2016 20:12 UTC
@jelwart Thanks, I thought of that, but figured it was not the cool way. You'd think the site would facilitate this more easily.
CamperBot
@camperbot
Dec 06 2016 20:12 UTC
dustinewright sends brownie points to @jelwart :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @jelwart |http://www.freecodecamp.com/jelwart
jelwart
@jelwart
Dec 06 2016 20:13 UTC
@DustinEWright Yeah it was surprisingly difficult to do, considering how easy it is by comparison if you just google an image lol. Keep at it though my man.
did you get your problem resolved? @jelwart
jelwart
@jelwart
Dec 06 2016 20:15 UTC
@moT01 About the pipes being part of the link? No I'm still searching around and experimenting.
Sorin Ruse
@sorinr
Dec 06 2016 20:15 UTC
@frankmaayn when u want an element on the page to maintain the same position no matter where u scroll on the page, it means it have a fixed position. here an example
Dustin Wright
@DustinEWright
Dec 06 2016 20:15 UTC
@jelwart Thank you, such simple things stump me for hours at this stage.
CamperBot
@camperbot
Dec 06 2016 20:15 UTC
dustinewright sends brownie points to @jelwart :sparkles: :thumbsup: :sparkles:
:warning: dustinewright already gave jelwart points
@jelwart i would think that pulling those bars out of the <a> would work, but its not
jelwart
@jelwart
Dec 06 2016 20:19 UTC
@moT01 It pulls them off the navbar completely, which is weird.
i think that bootstrap class is why
Frank Joseph
@frankmaayn
Dec 06 2016 20:21 UTC
@sorinr yeah i figured lol I'm trying to make the navbar go over the contaxt rather than under it now
@jelwart
li a {
  display: inline-block;
}
Sorin Ruse
@sorinr
Dec 06 2016 20:23 UTC
@frankmaayn just give your navbar an z-index:999;
@jelwart did you figure out what i did there? does that link show my changes, ...i dont think it does
jelwart
@jelwart
Dec 06 2016 20:23 UTC
Hey, look at that! Perfect, thanks my man. @moT01
CamperBot
@camperbot
Dec 06 2016 20:23 UTC
jelwart sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @mot01 |http://www.freecodecamp.com/mot01
jelwart
@jelwart
Dec 06 2016 20:24 UTC
Yeah the link didn't show the changes but when you typed them into here I got what you were saying.
Tom
@kidkarma
Dec 06 2016 20:24 UTC
Does anyone know how to add an ID to header.php in a wordpress theme?
@jelwart good
@kidkarma never used wordpress, ...could you put that php file in an element and give that an id maybe
Frank Joseph
@frankmaayn
Dec 06 2016 20:27 UTC
@sorinr tried that lol it didnt work
@sorinr actually i take that back lol
it works xD
Sorin Ruse
@sorinr
Dec 06 2016 20:30 UTC
@frankmaayn it was impossible not to work. a higher z-index place your element above the others having a lower z-index. like in photoshop layering
Dustin Wright
@DustinEWright
Dec 06 2016 20:31 UTC

Not sure exactly how to say this, on the portfolio project I think my buttons at the top should take the visitor to the different sections I've called "pageOne", "pageTwo", and "pageThree". I thought this would be done like this:

<li class="pull-right">
    <a href="pageOne">Contact</a>
  </li>
`

"pageOne" is an h1 tag identifying that section. Can anyone give me a pointer please? Thanks.

Frank Joseph
@frankmaayn
Dec 06 2016 20:32 UTC
@sorinr @sorinr @sorinr @sorinr @sorinr thanks lol
CamperBot
@camperbot
Dec 06 2016 20:32 UTC
frankmaayn sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 909 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 06 2016 20:33 UTC
@frankmaayn welcome
Tom
@kidkarma
Dec 06 2016 20:35 UTC
@moT01 I don't know enough about wordpress to know whether that would cause issues elsewhere
@kidkarma neither do i, just threw it out there
Loekies1
@Loekies1
Dec 06 2016 20:40 UTC

Hello people,

I am trying to make the random quote generator but I can't get information from the api into my html page. However when I use the api http url I doet get the desired json file. Is there anybody who can tell me how to get the quotes into my html? here is my code:
codepen

Matt Johnson
@maj0191
Dec 06 2016 20:43 UTC
Hi all, I created the first tribute page challenge for the subject of a book I recently read. My only issue with what I've constructed is that the background color of the caption cuts off on the lower right part of this page. Could anyone tell me why? Also, what would you change to make this code cleaner? https://codepen.io/maj015/pen/ZBrPPN
Zachary Smith
@Kozs
Dec 06 2016 20:45 UTC
Hey guys, does anyone know if Bootstrap has a class that acts like text-center but for images?
@Loekies1 im not getting anything from your loadjson
Zachary Smith
@Kozs
Dec 06 2016 20:45 UTC
And is there a list of what bootstrap has for me
Jerry Purvis
@MessiaHack
Dec 06 2016 20:48 UTC
@Kozs w3schools.com is a good resource
Zachary Smith
@Kozs
Dec 06 2016 20:48 UTC
Thanks @MessiaHack
CamperBot
@camperbot
Dec 06 2016 20:48 UTC
kozs sends brownie points to @messiahack :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @messiahack |http://www.freecodecamp.com/messiahack
Loekies1
@Loekies1
Dec 06 2016 20:48 UTC
@moT01 I changed it to $.getJSON but that gives an authorisation error
thats jquery, need to add that
@maj0191 not sure what you mean by background color, ...you picture is too big when you make the window smaller, ...add max-width: 100%; to your image
Jerry Purvis
@MessiaHack
Dec 06 2016 20:51 UTC
@maj0191 I don't see the issue you are having with the caption background. However, I would recommend using more div tags rather than the br tag
catshark
@catshark
Dec 06 2016 20:53 UTC
FYI, the twitch challenge example no longer appears to work
Matt Johnson
@maj0191
Dec 06 2016 20:53 UTC
@moT01 The white background for the caption on my desktop cuts off on the right side. As for max-width:100%, I've set that in the CSS just now but it still doesn't seem to be responsive. Is it because the image is from an external link?
Charan Teja
@charan1922
Dec 06 2016 20:54 UTC
could any one please make changes in myportfolio
Matt Johnson
@maj0191
Dec 06 2016 20:54 UTC
@MessiaHack What will the div tag do differently? Does div also function as a space break?
Chris
@bestintown23
Dec 06 2016 20:55 UTC
@khaduch thanks so much
CamperBot
@camperbot
Dec 06 2016 20:55 UTC
bestintown23 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2043 | @khaduch |http://www.freecodecamp.com/khaduch
Jerry Purvis
@MessiaHack
Dec 06 2016 20:55 UTC
@maj0191 div allows you to break things into sections, and offers you more options to do things, such as creating rows & columns.
it just offers so much more flexibility than simply a page break.
@maj0191 on your desktop? ...your image goes outside its container when you shrink your browser window, ...which is where i think the space your talking about comes from. adding that 100% to your image should keep the image inside its container and i think will fix the problem you speak of that im not sure i see
Matt Johnson
@maj0191
Dec 06 2016 20:57 UTC
@MessiaHack Thanks, yeah I mean, what I was trying to do here with the br was just have a paragraph space between the two elements. All of them are part of the same div so that I could have them be responsive. Not sure if this is good practice though.
CamperBot
@camperbot
Dec 06 2016 20:57 UTC
maj0191 sends brownie points to @messiahack :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @messiahack |http://www.freecodecamp.com/messiahack
Matt Johnson
@maj0191
Dec 06 2016 20:59 UTC
@moT01 Perfect, yes, thanks it seems to work now. Is there a Bootstrap version of the max-width:100% that I should use? or does it make more sense to just add that in general
CamperBot
@camperbot
Dec 06 2016 20:59 UTC
maj0191 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @mot01 |http://www.freecodecamp.com/mot01
@maj0191 there certainly might be something in bootstrap that would have the same effect, ..but i dont know
@Loekies1 having any luck?
Loekies1
@Loekies1
Dec 06 2016 21:04 UTC
@moT01 im pretty lost in the whole api thing... when i try to use jquery i get a authorisation error saying: XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json&target=_blank. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
thats a common problem
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:05 UTC
@maj0191 and @moT01 You want the class img-responsive if you don't want to use "width: 100%" on that image. It looks like you have the class image-responsive on that picture currently.
other people say to put something in front of your url, ...forgot what it is
tell him tyler
Zachary Smith
@Kozs
Dec 06 2016 21:07 UTC
Anyone know how to center these images? REF: https://codepen.io/Loses/full/ENLNZm/
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:07 UTC
@Loekies1 change your URL to: http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&callback=?&format=jsonp&jsonp=gotData and move all of your code out of your document.ready function
Then you'll find your next error in the console which I think you can figure out
Matt Johnson
@maj0191
Dec 06 2016 21:08 UTC
@TylerMoeller Thanks Tyler, yes, so that's why I was confused as to why the image wasn't responsive. I must have applied it incorrectly.
CamperBot
@camperbot
Dec 06 2016 21:08 UTC
maj0191 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1099 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:10 UTC
No problem, I always get img-responsive and responsive-img mixed up lol
@Kozs i could give you a css solution, ...just center the row with your images
margin-left: auto; margin-right: auto; should center the row
Loekies1
@Loekies1
Dec 06 2016 21:11 UTC
@moT01 I tried using that url yesterday, but it only had quotes on design, as mentioned in the title, and I would only get one quote, even when refreshing I would get the same quote. looking at the api it seemed to me that it only had one quote stored in it...
Zachary Smith
@Kozs
Dec 06 2016 21:11 UTC
what does auto do @moT01
not sure exactly, ...puts the same margin on the left and right i suppose
Zachary Smith
@Kozs
Dec 06 2016 21:12 UTC
Doesn't seem to work :/
Loekies1
@Loekies1
Dec 06 2016 21:13 UTC
@TylerMoeller what does this piece of code do? :callback=?&format=jsonp&jsonp=gotData it changes the format to jsonp and what else? what does the callback=? do?
so your div/row must be taking up the whole width of its container
Ken Haduch
@khaduch
Dec 06 2016 21:13 UTC
@Kozs - since you aren't really using the "row" div in bootstrap as it should be used (with the 12-column grid), if you just change that class="row" to class="text-center" it will center the images.
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:13 UTC
@Loekies1 The callback=? treats the request as JSONP, which enables you to access data on a different domain
You'll need that for all your future API projects as well
Zachary Smith
@Kozs
Dec 06 2016 21:14 UTC
@khaduch Thanks, that worked! I thought you had to use the 'row' for them to be next to each other.
CamperBot
@camperbot
Dec 06 2016 21:14 UTC
kozs sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2044 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Dec 06 2016 21:19 UTC
@Kozs - well, since you are using the .img-thumbnail class, that has display: inline-block; as one of the properties, so that makes them display inline. If you took of the .img-thumbnail, then it wouldn't display that way.
the "row" div is for use with the 12-column Bootstrap grid - which you will learn something about if you haven't already done so. The "text-center" class just sets the CSS property text-align: center; which works for centering these images, in this case.
Loekies1
@Loekies1
Dec 06 2016 21:19 UTC
@moT01 @TylerMoeller I thank you guys for your effort so far! I have came so much furter, however I now get no errors but a different problem, it displays this on screen: [object Object] link to codepen: http://codepen.io/Loekies1/pen/KNooLx?editors=1010
CamperBot
@camperbot
Dec 06 2016 21:19 UTC
loekies1 sends brownie points to @mot01 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 1100 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Zaurbek Zhakupov
@zzhakupov
Dec 06 2016 21:20 UTC
Hello guys, can you pls explain what is going on this codepen, I wasn't doing anything and right now it's saying that something is wrong. In console it shows literally about 10 errors. Can someone pls help me with this issue? http://codepen.io/Zooll/pen/JbXzXR
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:20 UTC
@Loekies1 That's because it's a JSON object that needs to be parsed or stringified. Change it to JSON.stringify(data) to see what's in the object. You'll then know how to parse from there.
Loekies1
@Loekies1
Dec 06 2016 21:24 UTC
@TylerMoeller I forgot I even did those challenges... I think I will look into it more.
Tyler Moeller
@TylerMoeller
Dec 06 2016 21:25 UTC
@Loekies1 Sorry, just trying to give hints rather than the answer :) but as another hint - you will want to use dot notation for this rather than bracket notation.
@Zooll8 i dont see your errors, ...there was a message on here yesterday having to do with that project, not sure what it said, but it may have been something about that service not working, or having to change something to keep it working
Zaurbek Zhakupov
@zzhakupov
Dec 06 2016 21:28 UTC
@moT01 Thank you anyway, I already figured out what to do. This problem was becaause they changed API request
CamperBot
@camperbot
Dec 06 2016 21:28 UTC
zooll8 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @mot01 |http://www.freecodecamp.com/mot01
You can go here and check it now
Lillian
@LillianTheDeveloper
Dec 06 2016 21:33 UTC
Hi y'all! I have a (hopefully) easy question...I'm on the build a tribute page and I want to see the code i wrote in codepen on a live site because the video's and image are not showing in the preview within codepen (Not sure if there is something wrong with my code or if that is standard) any suggestions?
the images should work if youre getting them from online somewhere
i would think the same with the vids
Lillian
@LillianTheDeveloper
Dec 06 2016 21:35 UTC
I got them from my gdrive and made sure they were set to public
Ken Haduch
@khaduch
Dec 06 2016 21:35 UTC
@LillianTheDeveloper - I have seen people post videos that play on CodePen, and images, too - depends on how you are loading them. Post your link to your CodePen project and you can get help here....
Lillian
@LillianTheDeveloper
Dec 06 2016 21:36 UTC
I also tried a pixaby image, just to test it and it didn't work either
go to the url and see if the image/vid comes up
Lillian
@LillianTheDeveloper
Dec 06 2016 21:37 UTC
@khaduch when you say how you loaded them, what do you mean? I copied link to them within my img tag
@moT01 ok...i'll try that
Ken Haduch
@khaduch
Dec 06 2016 21:37 UTC
@LillianTheDeveloper - some sites (like 'imgur') will block images from being loaded, for instance.
Lillian
@LillianTheDeveloper
Dec 06 2016 21:38 UTC
@moT01 I went to the url and the image did show up
@khaduch they are in gdrive
is the syntax right <img src="url">
Lillian
@LillianTheDeveloper
Dec 06 2016 21:40 UTC
@moT01 yes...I think so: <img class="img-responsive" scr="https://drive.google.com/file/d/0B9yYvmPbVWN_bEdwekFILVducHc/view?usp=sharing" alt="Rafaela the Matriarch">
scr
Ken Haduch
@khaduch
Dec 06 2016 21:40 UTC
@LillianTheDeveloper - what is "gdrive"? (I'm not familiar with that as a web term?) oh, google drive?
Lillian
@LillianTheDeveloper
Dec 06 2016 21:40 UTC
oh! hahaha... thanks!
src
Lillian
@LillianTheDeveloper
Dec 06 2016 21:41 UTC
src...I guess dyslexia and coding don't mix well! Thanks! @moT01 @khaduch
CamperBot
@camperbot
Dec 06 2016 21:41 UTC
lillianthedeveloper sends brownie points to @mot01 and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2045 | @khaduch |http://www.freecodecamp.com/khaduch
:cookie: 337 | @mot01 |http://www.freecodecamp.com/mot01
alevele3
@alevele3
Dec 06 2016 21:42 UTC
Should I take the challenges on basic JS before I build the personal portafolio Webpage, it seems that alot of the samples use it, and I never code it with before. ???
@alevele3 its not necessary, since you will probly want to go back and make changes to your portfolio later anyway as you learn more. no js will limit the things you can do, ...but you can still make a great site with just css and html
alevele3
@alevele3
Dec 06 2016 21:45 UTC
ty.
Ken Haduch
@khaduch
Dec 06 2016 21:53 UTC
@LillianTheDeveloper :)
Ghana Phuyel
@gphuyel
Dec 06 2016 22:07 UTC
Why doesn’t scrollpsy work on codeine?
Codepen
Zachary
@Bazill03
Dec 06 2016 22:10 UTC
Hi guys! What's a good weather api to use for the weather app?
Lillian
@LillianTheDeveloper
Dec 06 2016 22:12 UTC
What does fork mean in codepen?
Zachary
@Bazill03
Dec 06 2016 22:13 UTC
@LillianTheDeveloper To make a copy of the project.
Ken Haduch
@khaduch
Dec 06 2016 22:13 UTC
@LillianTheDeveloper - "fork" means to make a copy of the code that you have in your project (or anyone elses) to do a separate line of work.
James Moore
@James-N-M
Dec 06 2016 22:13 UTC
https://codepen.io/James_M0025/pen/bBvbJB anybody recommend anything ???
Lillian
@LillianTheDeveloper
Dec 06 2016 22:13 UTC
oh cool! thanks
Ken Haduch
@khaduch
Dec 06 2016 22:14 UTC
Kind of like a "fork" in a road, if you have a chart (I think maybe it's called a "railroad chart"?) Or maybe not...
Ken Haduch
@khaduch
Dec 06 2016 22:20 UTC
@LillianTheDeveloper - to get more familiar with the terminology: https://help.github.com/articles/fork-a-repo/ and https://guides.github.com/activities/forking/
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 22:30 UTC
Anyone know how to center a button in bootstrap 4?
Pieter Stokkink
@forkerino
Dec 06 2016 22:34 UTC

Hey all, I have a problem with my code in the create a calculator challenge. I want to build my buttons from scratch using HTML/CSS/Bootstrap and created the following code:

    <div class="row row1">
        <div class="col-xs-3 text-center">
          <button>AC</button>
        </div>
        <div class="col-xs-3 text-center">
          <button>CE</button>
        </div>
        <div class="col-xs-3 text-center">
          <button>:</button>
        </div>
        <div class="col-xs-3 text-center">
          <button>x</button>
        </div>
      </div>

With CSS:

button {
  border: 1px solid;
  border-radius: 3px;
  text-align: center;
  height: 40px;
  width: 40px;
}
The problem is that the buttons do not align. The padding created by bootstrap on the left starts at the left of the border, while on the right, it starts right after the text, causing the button as a whole to misalign. Any idea what I can do about that?
Does bootstrap have problems with fixed-width elements?
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 22:40 UTC
@forkerino how did you manage to get the buttons centered?
@forkerino can you check my codepen, and tell me what I need to center the button?
Pieter Stokkink
@forkerino
Dec 06 2016 22:42 UTC
@BrendanBrianSmith It is bootstrap's columns, they aren't properly centered, that's why I'm here. Happy to have a look at your code, can you post a link?
mhm
@mierea
Dec 06 2016 22:42 UTC
Hello guys
I have a question
I just finished all frontend challenges and want to issue the FE Dev certificate
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 22:43 UTC
@forkerino I posted a link to the codepen right above.
mhm
@mierea
Dec 06 2016 22:44 UTC
on step2 it mentions plagiarism. Is using code from open source github considered to be plagiarism? (considering I did not included copyright for that code i used)
nevermind. i read the whole description now and came to realize its the same as using jquery or other frameworks
Pieter Stokkink
@forkerino
Dec 06 2016 22:48 UTC
@BrendanBrianSmith You can use column offset to put in some blank columns to the left of a column. For example col-sm-offset-4, which puts 4 columns of nothing before everything you put in that column on small screens (and bigger if not defined).
@mierea Congrats!
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 23:00 UTC
<div class="row">
    <div class="col-xs-12">
      <div class="card card-block">
        <h4 class="card-title text-xs-center">Links to Some Friends</h4>
        <p class="card-text text-xs-center"> Test of the words in a paragraph boiiii</p>
        <div class="col-xs-offset-4 col-xs-1 text-center">
          <button type="button" href="#" class="btn btn-outline-primary">Heyyo</button>
        </div>
      </div>
    </div>
  </div>
what am I doing wrong? button still wont align center
Coy Sanders
@coymeetsworld
Dec 06 2016 23:02 UTC
you have a column inside a column @BrendanBrianSmith
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 23:04 UTC
okay, and if I take the column out, how do I align the button to the center of the card?
@coymeetsworld this ^
@forkerino @coymeetsworld Thank You guys!
CamperBot
@camperbot
Dec 06 2016 23:08 UTC
brendanbriansmith sends brownie points to @forkerino and @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1584 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
:cookie: 298 | @forkerino |http://www.freecodecamp.com/forkerino
aRtoo
@artoodeeto
Dec 06 2016 23:24 UTC
how can you make your text responsive?? use em? or percentage?.
Aida Woldegiorgis
@aow003
Dec 06 2016 23:27 UTC
This is the tribute page I am working on https://codepen.io/aow003/pen/zojorN/?editors=1000
I need help with centering the list so that it is aligned under the sub-heading
I would like it to look more centered
grantknaver
@grantknaver
Dec 06 2016 23:30 UTC
can anyone help out with an api
@grantknaver sup
Akiva Majowka
@AkivaMajowka
Dec 06 2016 23:31 UTC
@aow003 try using the class text-center
jwalk197804
@jwalk197804
Dec 06 2016 23:32 UTC
Can someone please recommend a good book for css layout and responsive web design. I know html and css fairly well..but i need work with learning CSS layout ,more specifically how to build responsive layout from scratch.
Aida Woldegiorgis
@aow003
Dec 06 2016 23:32 UTC
@AkivaMajowka It looks really wierd now that I did that
grantknaver
@grantknaver
Dec 06 2016 23:32 UTC
awesome
I am trying to:
BrendanBrianSmith
@BrendanBrianSmith
Dec 06 2016 23:34 UTC
can I get feedback on my tribute page? https://codepen.io/BrendanBrianSmith/pen/MbVQzv/
Akiva Majowka
@AkivaMajowka
Dec 06 2016 23:35 UTC
@aow003 try margin-left like this: <div class="col-md-8" style = "margin-left: 120px">
<ul>
<li><strong>January 26, 1944 </strong>- Born in Birmingham, Alabama</li>
<li><strong>August 1, 1960</strong> - Davis attended Carrie A
grantknaver
@grantknaver
Dec 06 2016 23:36 UTC
  1. I am trying to figure out how to get my submit field to update my query string for my subject search. So can look for whatever I want. This wont work no matter what. Hell it wont even submit
Akiva Majowka
@AkivaMajowka
Dec 06 2016 23:36 UTC
@aow003

<div class="col-md-8" style = "margin-left: 120px">

<ul>

<li><strong>January 26, 1944 </strong>- Born in Birmingham, Alabama</li>

<li><strong>August 1, 1960</strong> - Davis attended Carrie A...

@BrendanBrianSmith if i had to get picky i would say the friends and family box could be the same size as the box next to it, when you shrink the window way down some of the text flows out of its container, ...could maybe use a little more color, ...but it looks good
thats me being pretty picky
grantknaver
@grantknaver
Dec 06 2016 23:37 UTC
  1. When I use the sandbox api, one search comes back for every title, but when I observe the sample wiki project multiple results pop up.
here is my code.
Aida Woldegiorgis
@aow003
Dec 06 2016 23:38 UTC
@AkivaMajowka this is what I did to fix it <div class="col-xs-8 col-xs-offset-2">
grantknaver
@grantknaver
Dec 06 2016 23:38 UTC
hopefully that is enough info for you to help out @moT01
@grantknaver i spent so many hours with that wiki api
grantknaver
@grantknaver
Dec 06 2016 23:39 UTC
@moT01 I believe it.
i didnt use the sandbox, ...i looked at the url of the example and figured out what those parameters did, which are not explained in their docs
grantknaver
@grantknaver
Dec 06 2016 23:40 UTC
yep
I have been doing that for a min also
many hours
grantknaver
@grantknaver
Dec 06 2016 23:41 UTC
lol your tell me to just keep trying basically
Akiva Majowka
@AkivaMajowka
Dec 06 2016 23:41 UTC
@aow003 nice! ist col-xs used for small screens and col-md for desktop?
isnt*
i dunno
i could just share the url i ended up with
grantknaver
@grantknaver
Dec 06 2016 23:43 UTC
sure
havent seen anyone else have the random like that
they all just open a page with a single random thing
grantknaver
@grantknaver
Dec 06 2016 23:47 UTC
yep your query string is way different.
But I understand what you did
you will feel better about yourself if you find your own way
grantknaver
@grantknaver
Dec 06 2016 23:49 UTC
true that. it makes me feel better knowing I wasn't missing something obvious
no, there was other people that had the same issues, ...i couldn't get it to work using the way their docs wanted me to, so i did a lot of looking around and trial and error and eventually figured out what all those parameters do
pats myself on the back
grantknaver
@grantknaver
Dec 06 2016 23:53 UTC
yep, that has been my issue too. When I try to do it their it does not work.
Aida Woldegiorgis
@aow003
Dec 06 2016 23:57 UTC
@AkivaMajowka probably, I can go back to change it to medium
aRtoo
@artoodeeto
Dec 06 2016 23:59 UTC
hi guys. need help i have media queries on my css. but if i resize the page my header goes out of its header div. http://codepen.io/artoo/pen/ZBbYyM?editors=1100