These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Oct 2016
GetBig33
@GetBig33
Oct 09 2016 00:13
ahhhhh idk
how i get am image shud i copy the whole url
cuz the pic i want has a long link
GetBig33
@GetBig33
Oct 09 2016 00:55
any one that can help explain to me what would a code in js look like or be ?
Marina
@joyinthenow
Oct 09 2016 01:43
soooo.... who should I build a tribute page to?
Chad
@ckooser
Oct 09 2016 01:44
could someone help me with bootstrap?
Adel
@AdelMahjoub
Oct 09 2016 01:46
@ckooser what's up
@ckooser http://getbootstrap.com/components/ or http://www.w3schools.com/bootstrap/default.asp well explained, maybe all what you need is there
Chad
@ckooser
Oct 09 2016 01:48
thanks mate I'll check it out now
@AdelMahjoub
@AdelMahjoub having a tough time with Add an i element with the classes fa and fa-thumbs-up.
Your fa-thumbs-up icon should be located within the Like button.
Adel
@AdelMahjoub
Oct 09 2016 01:49
@ckooser for font awsome : http://fontawesome.io/examples/
Chad
@ckooser
Oct 09 2016 01:50
you're the man!
@AdelMahjoub
Adel
@AdelMahjoub
Oct 09 2016 01:50
@ckooser :smile: don't forget google is your friend
Chad
@ckooser
Oct 09 2016 01:52
@AdelMahjoub this might be a little beginnner stuff to ask but how do I add an i element?
Adel
@AdelMahjoub
Oct 09 2016 01:52
you write <i></i> that's an i element
@ckooser <i class="fa fa-thumbs-up"></i>
@just like any other html tag
@ckooser don't hesitate to try , you won't break anything
Chad
@ckooser
Oct 09 2016 01:55
@AdelMahjoub I've been trying haha and maybe I'm not the best googler either because I'm struggling with this
JD Tadlock
@jdtdesigns
Oct 09 2016 01:55
Creating the Dev>Wars site from the ground up if anybody is interested in joining or watching. ;) https://ide.c9.io/jdtdesigns/devwar
Chad
@ckooser
Oct 09 2016 01:56
@AdelMahjoub is this wrong?
 <button class="btn btn-block btn-primary fa fa-info-circle"><i class="fa fa-info-circle"></i> Like</button>
Adel
@AdelMahjoub
Oct 09 2016 01:57
@ckooser fa fa-info should be in the i tag not button tag
Chad
@ckooser
Oct 09 2016 02:00
@AdelMahjoub thanks I got it with your help!
CamperBot
@camperbot
Oct 09 2016 02:00
ckooser sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Chad
@ckooser
Oct 09 2016 02:00
<i class="fa fa-info-circle fa-thumbs-up"></i> Like</button>
</div>
Adel
@AdelMahjoub
Oct 09 2016 02:02
@ckooser welcome,
errordetected
@errordetected
Oct 09 2016 02:08
This message was deleted
GetBig33
@GetBig33
Oct 09 2016 02:21
i swear this code pen ahhhhh Lord al get back to this tomrrow
Tarik Carey
@MysticRiver
Oct 09 2016 02:26
Can someone help me make my quote generator codepen responsive?
I'm not using bootstrap and it breaks on smaller view points
Dylan
@dhcodes
Oct 09 2016 02:28
@MysticRiver can you paste your link
you likely want to change fixed dimensions to fluid units
Tarik Carey
@MysticRiver
Oct 09 2016 02:29
Sure, Thanks
Dylan
@dhcodes
Oct 09 2016 02:29
ex. change px to %
Tarik Carey
@MysticRiver
Oct 09 2016 02:29
gotcha
I tried doing that, but it didnt look the same
Dylan
@dhcodes
Oct 09 2016 02:30
@MysticRiver change the width on your .quote-container to something like 70%
well yeah, it won't look exactly the same
you would set a min-width though
Tarik Carey
@MysticRiver
Oct 09 2016 02:31
ok
Tarik Carey
@MysticRiver
Oct 09 2016 02:37
How do i make the fonts responsive?
Like for the quotes?
I tried using both vh and ems but they aren't perfect
Should I use media queries for the foont sizes?
Tarik Carey
@MysticRiver
Oct 09 2016 03:02
Thanks for your help @dhcodes . That solved my problem
CamperBot
@camperbot
Oct 09 2016 03:02
mysticriver sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1474 | @dhcodes |http://www.freecodecamp.com/dhcodes
Tarik Carey
@MysticRiver
Oct 09 2016 03:03
I guess I'll just use media queries for my text content so that it doesn't break the div
Dylan
@dhcodes
Oct 09 2016 03:16
sorry, i was working on something
glad you got it
Tarik Carey
@MysticRiver
Oct 09 2016 03:22
yeah, thanks
I just wished there was an easier way to get responsive typography
Instead of having to use media queries for each breakpoint
c0d0er
@c0d0er
Oct 09 2016 03:32
@jdtdesigns i am interested in joining, now i am already in, what should i do next?
JD Tadlock
@jdtdesigns
Oct 09 2016 03:33
@c0d0er I'm not sure what you press
but you do something that will give me a pop up to accept you
Dylan
@dhcodes
Oct 09 2016 03:35
@MysticRiver you can do ems or % but if the screen is ever really big or really small it doesn't look great
Tarik Carey
@MysticRiver
Oct 09 2016 03:38
Yeah, thanks. I tried using ems but they don't scale responsively with the screen size
c0d0er
@c0d0er
Oct 09 2016 03:51

@c0d0er

function steamrollArray(arr) {
var a=[];
var b=[];
a=arr.reduce(function(p,c){
//    console.log(c)
//a=a.concat(c);//
//if(!Array.isArray(c)){return p+c}
if(Array.isArray(c)){return p.concat(c)}//---why here shows 'TypeError: Cannot read property 'concat' of undefined'?
},[])


return a;

}

steamrollArray([1, {}, [3, [[4]]]]);

/*
Array.isArray()
steamrollArray([[["a"]], [["b"]]]) should return ["a", "b"].
steamrollArray([1, [2], [3, [[4]]]]) should return [1, 2, 3, 4].
steamrollArray([1, [], [3, [[4]]]]) should return [1, 3, 4].
steamrollArray([1, {}, [3, [[4]]]]) should return [1, {}, 3, 4].
*/

could anybody help if(Array.isArray(c)){return p.concat(c)}//---why here shows 'TypeError: Cannot read property 'concat' of undefined'?

c0d0er
@c0d0er
Oct 09 2016 04:26
my code need improvement since i should not use global variable, could anybody help? this is for challenge: https://www.freecodecamp.com/challenges/steamroller
var a=[];
function steamrollArray(arr) {
for(var i=0;i<arr.length; i++) {
    if(!Array.isArray(arr[i])){a.push(arr[i])}
    steamrollArray(arr[i]);
}    
return a;
}
steamrollArray([1, {}, [3, [[4]]]]);
/*
Array.isArray()
steamrollArray([[["a"]], [["b"]]]) should return ["a", "b"].
steamrollArray([1, [2], [3, [[4]]]]) should return [1, 2, 3, 4].
steamrollArray([1, [], [3, [[4]]]]) should return [1, 3, 4].
steamrollArray([1, {}, [3, [[4]]]]) should return [1, {}, 3, 4].
*/
Muhammad Hasham
@MohammadHasham
Oct 09 2016 05:33
In the project of tic tac toe game how can i make the computer to make choices on which box to tick?
should i do it using switch statement in javascript
harshit297
@harshit297
Oct 09 2016 05:43
what to do for javascript after doing the freecode camp?
Allan Pooley
@AllanPooley
Oct 09 2016 06:43
@harshit297 Do you mean for further study?
There's a couple of resources I've collected along the way: http://eloquentjavascript.net/ <-- This is a really excellent, completely free online textbook with working activities
There is this online repository of documentation: http://bonsaiden.github.io/JavaScript-Garden/
Ajay Tanwar
@ajayt365
Oct 09 2016 07:12
https://codepen.io/ajayt365/pen/LRzNmq . how to get the div below the input box ?
Evan W
@Dirtier
Oct 09 2016 07:35
@harshit297 https://github.com/getify/You-Dont-Know-JS IMO best JS book series out there. And it's free on Github. I like Eloquent too, but it's a bit older.
Anyone there that is decent with Vue and Vue components? Having trouble with a modal template
@MysticRiver There is
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 07:48
@ajayt365 position: absolute takes your main-div out of the order, so your div thinks it should be placed at the start. When you have position: staticon your main-div it will be part of the order and the results will be below the main-div. In your case I would do:
.move {
    position:static;
    margin-top: 8%;
    transform: translate(0, 0);
}
Ajay Tanwar
@ajayt365
Oct 09 2016 08:17
@Otto-AA with the current position: relative if I do top :200px it shifts downwards but with top:10% it's not working . Why is that so ?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:18
@ajayt365 do you mean the .content-div?
Ajay Tanwar
@ajayt365
Oct 09 2016 08:19
Yeah
@Otto-AA
Erick Delfin
@Nifled
Oct 09 2016 08:21
blob
Hi everyone, I just made this design of a personal logo (for my portfolio) off the top of my head, I was wondering what you guys thought. Honestly, Good? Bad? Meh?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:23

@ajayt365 The .content-div is relative to the body, so you need to give the body a height:

body, html {
    height: 100%;
    width: 100%;
}

You can just write that at the top of your css

Ajay Tanwar
@ajayt365
Oct 09 2016 08:25
When I positioned 'main' div with absolute position , I didn't need to give body a height . @Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:26
@Nifled tbh, it looks okay, not too good and not bad. I would have tried it without overlapping the 2 figures to make it look more clear
@Otto-AA It's because of Position: absoluteinstead of position:relative, but pls don't ask me why exactly O.o
Erick Delfin
@Nifled
Oct 09 2016 08:33
@Otto-AA I also have tried that approach, I actually have 3 different 'prototypes' and one of them is without the overlapping edges
Ajay Tanwar
@ajayt365
Oct 09 2016 08:33
@Otto-AA yeah I wanted to ask why (%) works with position absolute but not with relative
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:33
@Nifled Well, I think I would like that best
Tony Johnson
@tnyjhnsn
Oct 09 2016 08:34
@Nifled i like it
Evan W
@Dirtier
Oct 09 2016 08:34
Can anyone help out with Vue for a sec?
Tony Johnson
@tnyjhnsn
Oct 09 2016 08:35
@Nifled i’m assuming the symbols represent “ed” ?
Evan W
@Dirtier
Oct 09 2016 08:35
Template for modal isn't calling function, getting a reference error
Tony Johnson
@tnyjhnsn
Oct 09 2016 08:36
@Nifled although maybe the black circle background could be a little tighter toward the letters
@Nifled ie. make the letters bigger
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:38
@ajayt365 position absolute: "However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling."
and I guess position relative doesn't do that, but I am not sure about this stuff at all O.o
Evan W
@Dirtier
Oct 09 2016 08:38
@Otto-AA that sounds more like fixed, with the scrolling
Erick Delfin
@Nifled
Oct 09 2016 08:40
@tnyjhnsn yeah, its supposed to be 'ed'
@tnyjhnsn and good point, i'll try that out
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 08:40
@Dirtier the quote is from there: http://www.w3schools.com/css/css_positioning.asp so I am 99% sure it's correct
I think they mean that when you scroll down the page, it will move upwards
Tony Johnson
@tnyjhnsn
Oct 09 2016 08:41
@Nifled I think you just have to imagine that the icon might get really small, so you need the letters to be as big as possible within the confines of the circle
Erick Delfin
@Nifled
Oct 09 2016 08:41
@tnyjhnsn Very true! thanks for the advice :smile:
CamperBot
@camperbot
Oct 09 2016 08:41
nifled sends brownie points to @tnyjhnsn :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @tnyjhnsn |http://www.freecodecamp.com/tnyjhnsn
alpox
@alpox
Oct 09 2016 09:01
@c0d0er Just instantiate a inside of the steamrollArray function
Ricky11
@ricky11
Oct 09 2016 09:16
hi guys using jumbotron i am trying to insert the image at the bottom of a col-md-* but the image is never at the bottom, any idea how to fix it ? http://carbon-mothership-214240.nitrousapp.com/
rohitdesigner
@rohitdesigner
Oct 09 2016 09:37
hello
@rohitdesigner
hello
i what to open a starup
is there anybody to help with the ui designing
Nemanja Komar
@nems808
Oct 09 2016 10:24
I am struggling with getting getting json data from open weather using codepen
I know that my api call is correct because it works when I use in the browser
Does anyone have any idea why the api call is not retrieving any data in codepen?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 10:33
@nems808 can you give us the codepen?
@rohitdesigner What kind of startup?
Albert Brennan
@bluegreybolt
Oct 09 2016 10:37
@nems808 You will have to give more detail, and post the Codepen link.
Nemanja Komar
@nems808
Oct 09 2016 10:38
Sorry, was trying to google a solution but no luck
here's the codepen. Super simple for now. Just trying to print the response to console
if you copy paste the link into the browser you will get a json response
@Otto-AA link above
@bluegreybolt added the link above
Albert Brennan
@bluegreybolt
Oct 09 2016 10:41
@nems808 Change your URL
Where it says callback
Change that to callback=?
Remove JSONP
You just want &callback=? at the end of your URL
Nemanja Komar
@nems808
Oct 09 2016 10:43
@bluegreybolt Thanks a bunch!!!
CamperBot
@camperbot
Oct 09 2016 10:43
:cookie: 301 | @bluegreybolt |http://www.freecodecamp.com/bluegreybolt
nems808 sends brownie points to @bluegreybolt :sparkles: :thumbsup: :sparkles:
Albert Brennan
@bluegreybolt
Oct 09 2016 10:43
@nems808 NP
Ajinkya
@Ajinkya5509
Oct 09 2016 10:53
hello ! I'm stuck at random quotes machine .. task does any one knw how to share link on JSON as object?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 09 2016 10:54
@Ajinkya5509 if you make ajax call you define if data you recieve is JSON or anything else
@Ajinkya https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en here is some nice api, you can try and implement AJAX call for this link
Ajinkya
@Ajinkya5509
Oct 09 2016 10:57
thnx
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 09 2016 10:57
no problem ;)
rohitdesigner
@rohitdesigner
Oct 09 2016 11:23
@Otto-AA its like practo.com
the idea is better than it
silver537
@silver537
Oct 09 2016 11:24
im not quite finished with this one but here's something halfway. feed back is appreciated.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:38
@rohitdesigner Ok, I don't think that I have enough time for it :/
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:44
@silver537 Looks pretty nice ;) Maybe make the background a bit lighter (e.g. rgb(10,10,10))
silver537
@silver537
Oct 09 2016 11:44
which background?
@Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:44
@silver537 body
silver537
@silver537
Oct 09 2016 11:45
oh. well that's gonna be reserved for pics corresponding the weather.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:45
@silver537 :)
silver537
@silver537
Oct 09 2016 11:46
but yea. i guess ill make it lighter for now! :D
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:47
@silver537 And the position-tracking isn't that accurate (correct country but ~20 cities away), you could use the html5 geolocation thing which is extremely precise
Taufiq Muhammadi
@waruboy
Oct 09 2016 11:47
Hello folks
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:47
Hi @waruboy
silver537
@silver537
Oct 09 2016 11:47
@Otto-AA which is that?
Taufiq Muhammadi
@waruboy
Oct 09 2016 11:47
Hi @Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:47
@silver537 The one which also was a excercise on freecodecamp
Taufiq Muhammadi
@waruboy
Oct 09 2016 11:47
in the first project, building a tribute page
it seems that we don't need to use JS?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:48
@waruboy Yep, and if you only use bootstrap you don't even need CSS ;)
@waruboy It's totally up to you how you do it
Taufiq Muhammadi
@waruboy
Oct 09 2016 11:51
ah, just making sure. Thanks @Otto-AA
CamperBot
@camperbot
Oct 09 2016 11:51
waruboy sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @otto-aa |http://www.freecodecamp.com/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:51
@waruboy You're welcome
Anders
@Skretch
Oct 09 2016 11:52

Trying to do the "Random Quote Machine" project but when I try to run this code:

$(document).ready(function(){
  $("#getQuote").on("click", function(){
    $.getJSON("http://quotesondesign.com/wp-json/posts", function(json){
      $("#quote").html(json.content);
      $("#author").html(json.title);
    })
  })
})

I get this Error:

XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

Anyone got any idea what I am doing wrong ? or if there are any settings I need to change on Codepen.io ?

silver537
@silver537
Oct 09 2016 11:52
@Otto-AA ah i tried that one, but it didn't work for me.
i kept getting errors
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:53
@Skretch Can you post the link to your pen? That makes it a bit easier for us ;)
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:57
@Skretch It works for me when I write json[0].contentand json[0].title
@Skretch And I don't know why, but I never got your error :/
Anders
@Skretch
Oct 09 2016 11:58
Hmm still doesn't work for me :/
are you using chrome ?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 11:58
no, firefox
my current code:
$(document).ready(function() {
  $("#getQuote").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts", function(json) {
      $("#quote").html(json[0].content);
      $("#author").html(json[0].title);
    });
  });
});
Anders
@Skretch
Oct 09 2016 12:00
Yea thats what i changed it to. Trying do download firefox, to see if that helps
silver537
@silver537
Oct 09 2016 12:00
@Skretch http => https
Anders
@Skretch
Oct 09 2016 12:00
Nice. That did it :D. Thanks
3 days for one letter.....
xD
silver537
@silver537
Oct 09 2016 12:01
chrome is picky with security
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 12:01
@Skretch Eyy, nobody needs security ;P
silver537
@silver537
Oct 09 2016 12:01
@Otto-AA it's why the geolocation wont work on my browser.
Anders
@Skretch
Oct 09 2016 12:01
xP
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 12:01
@silver537 It should work anyways
silver537
@silver537
Oct 09 2016 12:02
As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function. -MDN
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 12:02
@silver537 Oh lol, point for you
Taufiq Muhammadi
@waruboy
Oct 09 2016 12:03
Chrome is very popular though, so you must aware of its behavior if you want to build a webpage
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 12:03
@waruboy :+1:
Ajinkya
@Ajinkya5509
Oct 09 2016 12:08
hi i need help on my weather api ...hw do i use weather info on it?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 12:10
@Ajinkya5509 Hmm, do you mean how you get the weather info based on the coordinates?
Ajinkya
@Ajinkya5509
Oct 09 2016 12:19
yeap
plz help me
Mohit Sharma
@xxholyChalicexx
Oct 09 2016 12:47
while using the twitch api....where am i suppose to type the client id........ it seems now we cant use twitch api without client id.....
Mohit Sharma
@xxholyChalicexx
Oct 09 2016 12:57
@Ajinkya5509 use this api link for ur current location: http://ip-api.com/json
Veronika Krukovich
@VKrukovich
Oct 09 2016 13:12
Clip2net_161009160922.png
how return all three reverseStrings? run test shows only the last
Simon Cordova
@gbsimon87
Oct 09 2016 13:27
Good aft!
Can anyone provide input on the weather app?
Can't seem to get the user's input and use that specific city to query results
U-ways
@U-ways
Oct 09 2016 13:49
@gbsimon87 It's working fine for me :D
kat-mag
@kat-mag
Oct 09 2016 13:49
@gbsimon87 you're trying to pass cityChoice as 'lat' parameter in the query.... 'lat' & 'lon' stand for 'lattitude' & 'longitude' so it'd ignore you anyways.
@VKrukovich aren't you supposed to do this in the body of the function? Why the hell are you doing operations on the function call, I do not comprehend... ;D
U-ways
@U-ways
Oct 09 2016 13:52
@VKrukovich You need to initialise your methods inside your function (on your return statement.) So:
function reverseString(str) {
    return str.split("").reverse().join(""); // Use your methods inside your function! :D
}
Simon Cordova
@gbsimon87
Oct 09 2016 13:53
@U-ways and @kat-mag cheers :)
kat-mag
@kat-mag
Oct 09 2016 13:54
@gbsimon87 and this ip service is a good idea maybe, but it's catching the ip of my provider that is XXX kilometers away from me, so the results kinda don't match my location ;d
Nathan Cunningham
@nacu4
Oct 09 2016 13:55
I'm trying to create the "portfolio" and I can't get my headers to work.. I'm adding <div class = "row"> but then nothing is showing up on a row. This is my code: <div class="container-fluid">
<div class="row">
<div class="col-*-*">Nathan</div>
<div class="col-*-*">About</div>
<div class="col-*-*">Resume</div>
<div class="col-*-*">Contact</div>
</div>
</div>
kat-mag
@kat-mag
Oct 09 2016 13:56
@nacu4 link the pen. And why the 'col-' classes are with starzzz? :o
Nathan Cunningham
@nacu4
Oct 09 2016 13:56
@kat-mag I tried it with numbers and that didn't work either... how do I link the pen? Sorry... still new
kat-mag
@kat-mag
Oct 09 2016 13:57
paste the codepen link :)
kat-mag
@kat-mag
Oct 09 2016 13:59
it's supposed to be the navbar, right?
Nathan Cunningham
@nacu4
Oct 09 2016 13:59
yes
kat-mag
@kat-mag
Oct 09 2016 13:59
you can use the bootstrap navbar class, it'll be easier
and you got your tags messed up a little
check the <p>'s and <h1>
and we don't close <br> tag anymore. It's a void element ^^
Add bootstrap in CSS tab settings :)
there's a 'quick add' at the bottom of the CSS settings modal, so you don't have to look for a link to bootstrap cdn :+1:
Nathan Cunningham
@nacu4
Oct 09 2016 14:04
ok. I already added bootstrap before I did this. what's the syntax for the components of a navbar?
I'm doing some googling right now and trying different things out. Nothing is working yet, but I'm experimenting
and all my </br> tags have been removed :)
kat-mag
@kat-mag
Oct 09 2016 14:07
:D you can take a look at the docs. bstrp
Nathan Cunningham
@nacu4
Oct 09 2016 14:07
haha. that's the website I was on.... thanks for the pointers!
kat-mag
@kat-mag
Oct 09 2016 14:10
No problem. Just the documentation knows more than I do about bootstrap :P not a bootstrap fan
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 14:15
@Ajinkya5509 Sry, was away. Do you still have the problem? If yes, which api are you using
Ajay Tanwar
@ajayt365
Oct 09 2016 14:33
https://codepen.io/ajayt365/pen/LRzNmq . what's happening here ? the input fills the entire space on pressing enter while when the position was absolute it didn't .
Joe Consterdine
@JoeKonst
Oct 09 2016 14:55
you need to specify a width when using pos: absolute
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:00
@ajayt365 or remove the width: 100%part on your input
Ajay Tanwar
@ajayt365
Oct 09 2016 15:06
bros i was expecting something about behaviour . like why the entire horizontal space is not filled by 'absolute' . anyone knows the reason?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:12
ok, when you make something position:absolute, the width and height will be set automatically, therefore it is content+padding+border; display:block has no impact here
when you then give it position:static it uses the default display:block (every <div> has) which makes it fill the whole line
Ajay Tanwar
@ajayt365
Oct 09 2016 15:41
@Otto-AA height and width are both auto ?
Braxton Fair
@braxtonfair
Oct 09 2016 15:41
Could someone check out my tribute project? http://codepen.io/Braxton/full/zKWwJB/
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:42
@ajayt365 (As far as I know) when you use position:absolute the default value for width and height is auto. You are still able to change them though
U-ways
@U-ways
Oct 09 2016 15:42
@braxtonfair Awesome!
Braxton Fair
@braxtonfair
Oct 09 2016 15:43
@U-ways Thank you!
CamperBot
@camperbot
Oct 09 2016 15:43
braxtonfair sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @u-ways |http://www.freecodecamp.com/u-ways
Muhammad Hasham
@MohammadHasham
Oct 09 2016 15:48
blob
blob
blob
I have converted a psd to html can anybode rate me!
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:49
@MohammadHasham Looks really nice ;)
If its responsive then even better
The social-media links are maybe a bit too small
Muhammad Hasham
@MohammadHasham
Oct 09 2016 15:55
Product-page.psd
This message was deleted
@Otto-AA
Ajay Tanwar
@ajayt365
Oct 09 2016 15:56
@braxtonfair don't use obselete tags like <b> etc . use <strong> instead
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:57
@MohammadHasham Do you use brackets?
Muhammad Hasham
@MohammadHasham
Oct 09 2016 15:58
@Otto-AA no sublime actually
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:59
@MohammadHasham You should consider using brackets for PSD->HTMl because it has an extra tool for that (don't know if sublime has)
Muhammad Hasham
@MohammadHasham
Oct 09 2016 15:59
okay, @Otto-AA Thanks
CamperBot
@camperbot
Oct 09 2016 15:59
mohammadhasham sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @otto-aa |http://www.freecodecamp.com/otto-aa
Muhammad Hasham
@MohammadHasham
Oct 09 2016 15:59
do you have any prior exp of web
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 15:59
@MohammadHasham what do you mean?
Muhammad Hasham
@MohammadHasham
Oct 09 2016 16:00
@Otto-AA i wanted to seek help that is why i was asking if you are a newbie or pro
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 09 2016 16:01
@MohammadHasham about half a year, but I gonna eat now ;)
Braxton Fair
@braxtonfair
Oct 09 2016 16:01
@ajayt365 Why use <strong> over <b>? Aren't they functionally the same?
Leonardi Caraballo
@leonardicar
Oct 09 2016 16:02
Hi all,
a quick question: I want to be a Front End Developer, do I have to do the rest of the training in FreeCodeCamp or just stop after front-end certificate and continue my learning in front end dev only?
Muhammad Hasham
@MohammadHasham
Oct 09 2016 16:03
@Otto-AA Sure
@braxtonfair same here please anyone answer
Braxton Fair
@braxtonfair
Oct 09 2016 16:04
@visualbug That should be fine, but I would recommend going through the rest, or as much as you can, so you can at least understand the stack. I'd also recommend TeamTreehouse as another place to learn. Although not free, they are excellent.
shine
@ShineforSupreme
Oct 09 2016 16:05

They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.

As the author writes in a discussion list post:

Think of three different situations:

web browsers
blind people
mobile phones
"Bold" is a style - when you say "bold a word", people basically know that it means to add more, let's say "ink", around the letters until they stand out more amongst the rest of the letters.

That, unfortunately, means nothing to a blind person. On mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

<b> is a style - we know what "bold" is supposed to look like.

<strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.

HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web." <strong> is semantic—it describes the text it surrounds (e.g., "this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed (e.g., "this text should be bold").

Xavier Artot
@xavierartot
Oct 09 2016 16:09
@visualbug the D3.js part is require for me, and you have to know React.js
Leonardi Caraballo
@leonardicar
Oct 09 2016 16:12
Thanks @braxtonfair and @xavierartot yes, My plan is to improve my html, CSS and Javascript skills doing some more training like pluralsigh to feel more confident writing and reading code,
and jump to a UI Interface design (Webs-APPs) CSS - UI Animations and material design etc, (I am a graphic Designer, so I love it)
*but true, I need to know back-end too maybe a 2 part of my learning after this is go deep in back-end (react.js)
CamperBot
@camperbot
Oct 09 2016 16:12
visualbug sends brownie points to @braxtonfair and @xavierartot :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @xavierartot |http://www.freecodecamp.com/xavierartot
:cookie: 121 | @braxtonfair |http://www.freecodecamp.com/braxtonfair
sekoku
@sekoku
Oct 09 2016 16:53
Does anyone have a Twitter API integration tutorial available? This might seem to be a bit "spoon-feeding" but the Twitter help files don't really make me understand putting the random quotes into the tweet... The furthest I've gotten is being able to make a tweet composition box but I can't seem to get it to pull the text.
Patrick Fitzgerald
@mrpf1
Oct 09 2016 17:17
@sorinr thanks for the advice. Using saved json for code camp challenge because of api key issues - it doesn't have the stream value. Since found another saved stream which does. Now I just have to code it :)
CamperBot
@camperbot
Oct 09 2016 17:17
mrpf1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 773 | @sorinr |http://www.freecodecamp.com/sorinr
sekoku
@sekoku
Oct 09 2016 17:33
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a> <--This puts "Hello world" into a tweet box on Twitter. But trying to put JSON data into that doesn't work and from what I can see Twitter's API's won't do that? So, should I stringify the data and then pass it to twitter that way?
Stephen James
@sjames1958gm
Oct 09 2016 17:46
@sekoku What is the data you are trying to add to the tweet, just a string? Have tried - encodeURIComponent - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
sekoku
@sekoku
Oct 09 2016 17:49
JSON data that isn't stringified. Problem is I can't CSS modify it if I stringify it since it just returns plain-text with no modifications. I guess I could probably hide the string in another function ("tweet") and then have that data be pulled on tweet to append to the tweet?text="" bit, but that seems way more complicated than this probably should be.
Twitter's development docs aren't really giving me a simple answer.
Essentially what I have right now is a call to the JSON API, it pulls that data into three separate things ("quote", "author", "url for quote") on loading. I want to put the "quote" data into the tweet but everything I'm seeing on Twitter isn't really giving me a way to make "json.quote" work.
Sorin Ruse
@sorinr
Oct 09 2016 17:51
@mrpf1 :+1:
Stephen James
@sjames1958gm
Oct 09 2016 17:52
"https://twitter.com/intent/tweet?text=" + encodeURIComponent(json.quote); and assign the href attr of <a>
Markus
@mageteus
Oct 09 2016 17:53
Hi. Would anyone be able to help me with one nasty css bug?
be willing to*
nabinsademba
@nabinsademba
Oct 09 2016 17:54
@mageteus
yes bro paste your task detail here
sekoku
@sekoku
Oct 09 2016 17:55
@sjames1958gm Not sure I'm understanding: <a class="twitter-share-button" href='https://twitter.com/intent/tweet?text='+encodeURIComponent(json.quote);">Tweet</a>?
Markus
@mageteus
Oct 09 2016 17:55
@nabins13 Thanks! Do you have Mac? Because I think I found a bug in Chrome and have been trying to get around it for quite a few hours now
CamperBot
@camperbot
Oct 09 2016 17:55
:cookie: 254 | @nabins13 |http://www.freecodecamp.com/nabins13
mageteus sends brownie points to @nabins13 :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Oct 09 2016 17:55
@sekoku No you will have to use js to set the href attr in the a tag
The scrollbar renders inproperly when I have that box-shadow styling
I've narrowed the issue down to the box-shadow and relatively positioned child elements in the scrollable content
sekoku
@sekoku
Oct 09 2016 18:00
@sjames1958gm Still not understanding. Something like <a href="javascript://url.goes.here;">?
Or putting it outside the <a> as a function call?
Stephen James
@sjames1958gm
Oct 09 2016 18:02
@sekoku The code that receives the API - you need to use jquery (if you are using jquery) to assign the quote value to the element
@sekoku Do you have a pen link?
sekoku
@sekoku
Oct 09 2016 18:03
I haven't put it into Codepen yet and the only JQuery I'm really using is "getJSON" to separate the data into 3 parts.
Stephen James
@sjames1958gm
Oct 09 2016 18:05
Inside your $.getJSON
   var href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(json.quote); 
   $(".twitter-share-button").attr("href", href);
Markus
@mageteus
Oct 09 2016 18:07
Anyone have anything to say about the scrollbar issue? I really can't find any solution to this
sekoku
@sekoku
Oct 09 2016 18:08
Okay, that worked. Makes sense now. Make it a variable assign the variable to the anchor and the json can be appended that way.
Stephen James
@sjames1958gm
Oct 09 2016 18:08
@sekoku :+1:
A little suprised that that worked - I did it from memory :)
sekoku
@sekoku
Oct 09 2016 18:09
I dunno why that method wouldn't be shown on Twitter API documentations.
Everything I've seen wants it like automatically appended to the ?text= as a plain file or something.
Stephen James
@sjames1958gm
Oct 09 2016 18:10
@sekoku I would have thought they would have some js examples.
sekoku
@sekoku
Oct 09 2016 18:10
They have bits but I haven't seen full JS.
https://dev.twitter.com/web/tweet-button <---What I was using https://dev.twitter.com/rest/reference/post/statuses/update <---What I found for JSON but couldn't figure out how to make into a functional thing.
Stephen James
@sjames1958gm
Oct 09 2016 18:13
@sekoku I used some really complex tweet widget, that made it difficult to update
sekoku
@sekoku
Oct 09 2016 18:15
Alright, well now that the data is working it's just a matter of layout and CSS now. Thanks @sjames1958gm
CamperBot
@camperbot
Oct 09 2016 18:15
sekoku sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3760 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 09 2016 18:21
@sekoku :+1:
Johnathan Mullen
@MrJkmullen
Oct 09 2016 18:26
When I click my temp is changes to Celsius but not back to Fahrenheit http://codepen.io/jkmullen/pen/WGzvoY?editors=1010
vínαч puppαl
@vinaypuppal
Oct 09 2016 18:27
@MrJkmullen typo here --> $("ftemp").html(ftemp);
You should have $(#ftemp).html(ftemp);
Johnathan Mullen
@MrJkmullen
Oct 09 2016 18:29
@vinaypuppal thank you
CamperBot
@camperbot
Oct 09 2016 18:29
mrjkmullen sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 606 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Elliot Brown
@Elzy1337
Oct 09 2016 18:34
About to start the tribute page, wish me luck...god save me :P
CamperBot
@camperbot
Oct 09 2016 18:34
you need to ask about @someone!
Abdulah Hamzic
@hamzicabdulah
Oct 09 2016 18:41
about @camperbot
CamperBot
@camperbot
Oct 09 2016 18:41
:star2: 2462 | @camperbot |http://www.freecodecamp.com/camperbot
Sorin Ruse
@sorinr
Oct 09 2016 18:45
@mageteus what is the problem?
Markus
@mageteus
Oct 09 2016 18:55
@sorinr did you check the pen I posted?
Sorin Ruse
@sorinr
Oct 09 2016 18:56
@mageteus yes
Markus
@mageteus
Oct 09 2016 18:57
what machine are you using?
windows/macOS?
Sorin Ruse
@sorinr
Oct 09 2016 19:00
@mageteus linux/chrome
c0d0er
@c0d0er
Oct 09 2016 19:33
@alpox thanks
CamperBot
@camperbot
Oct 09 2016 19:33
c0d0er sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 671 | @alpox |http://www.freecodecamp.com/alpox
Johnathan Mullen
@MrJkmullen
Oct 09 2016 21:53
My Fareniheit symbol is showing up weired http://codepen.io/jkmullen/pen/WGzvoY?editors=1010
@vinaypuppal My Fahrenheit symbol is displaying weird could you help me? http://codepen.io/jkmullen/pen/WGzvoY?editors=1010
vínαч puppαl
@vinaypuppal
Oct 09 2016 22:00
@MrJkmullen Hi, is that displaying weird now also or did you fix it, i see it as displaying correct in my browser(Firefox)
Braxton Fair
@braxtonfair
Oct 09 2016 22:48
http://codepen.io/Braxton/full/amYwxj/ Anyone want to critique my Personal Portfolio so far?
Taufiq Muhammadi
@waruboy
Oct 09 2016 22:58
hi @braxtonfair
You have ".col-xs-" showing on your page
Braxton Fair
@braxtonfair
Oct 09 2016 23:00
Oh, my bad, was working on the images next :) Thank you @waruboy
CamperBot
@camperbot
Oct 09 2016 23:00
braxtonfair sends brownie points to @waruboy :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @waruboy |http://www.freecodecamp.com/waruboy
Braxton Fair
@braxtonfair
Oct 09 2016 23:10
@waruboy Want to give it a look now?
Taufiq Muhammadi
@waruboy
Oct 09 2016 23:17
@braxtonfair it's fixed. Keep it up! +1
:+1:
Braxton Fair
@braxtonfair
Oct 09 2016 23:17
Thank you @waruboy :)
CamperBot
@camperbot
Oct 09 2016 23:17
braxtonfair sends brownie points to @waruboy :sparkles: :thumbsup: :sparkles:
:warning: braxtonfair already gave waruboy points
tainaml
@tainaml
Oct 09 2016 23:23
hello
i am new here
shiva mariswamy subramani
@shivamar
Oct 09 2016 23:23
As soon as someone gives u a wireframe
how do u start? I am confused with how to set the sizes of elements
Geoff
@greengeoff
Oct 09 2016 23:30
What's a good resource for nice-looking fonts in large print. I'm working on the 'Local Weather' App..
erick
@erickzhao
Oct 09 2016 23:32
@greengeoff try google fonts
tainaml
@tainaml
Oct 09 2016 23:33
salut
Taufiq Muhammadi
@waruboy
Oct 09 2016 23:35
hello @tainaml
tainaml
@tainaml
Oct 09 2016 23:35
:) hello!