These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Sep 2016
Robert Stone
@rjstone
Sep 26 2016 00:01
@jacobshoemaker92 As far as I know, you just need to add margin to the top to account for the fixed positioned div. fixed positioning take a box out of the element flow
Daniel Sousa
@satsulima
Sep 26 2016 00:04
@Vichulee Hello what are you trying to accomplish with the images?
Robert Stone
@rjstone
Sep 26 2016 00:06
BTW, if you need to use images in CodePen, dropbox is a good option. imgur doesn't work because they blocked it. if you don't have a dropbox account and you want one, please sign up using my referral URL so I can get some free storage space! hehe https://db.tt/JBhh3niM
Jacob Shoemaker
@jacobshoemaker92
Sep 26 2016 00:14
@rjstone Thanks for the help. I tried to add a margin to the top of the block but it adds a gap between the nav bar and the top of the home page. I'll keep working to find out how to fix it.
Robert Stone
@rjstone
Sep 26 2016 00:23
@Vichulee Your HTML is very broken. Unclosed quotes and text not inside an attribute. Also, you should avoid using style attributes in the HTML and do everything in CSS. You're also using a lot of obsolete attributes from HTML3/4 and not using the Bootstrap 3 grid system. I didn't do too much but here is some stuff cleaned up and I added an example of how to use the grid system. http://codepen.io/rjstone/pen/KgWOWa?editors=1000
See the Bootstrap documentation http://devdocs.io/bootstrap~3/css#grid
@jacobshoemaker92 You could probably also add an empty box with the same height as the navbar at the top of the page.
cdodds-person
@cdodds-person
Sep 26 2016 01:03
I'm trying to find a way to compare an array of numbers against a nested array of number patterns. something like picks = 1,2,3,5 checked against combos = [[1,2,3],[4,5,6]]. I've been toying around with indexof() paired with filter but am stuck. any thoughts?
function winCheck() for reference: https://codepen.io/chrisdodds/pen/YGWazb
S. Sylvester
@sylvest00
Sep 26 2016 01:14
Hi everyone. I'm having issues with the quote generator project. When I click my "get quote" button, nothing shows up. I am using the frontismatic API. I have a feeling that I am overlooking something very simple since I am able to run snipets of what other folks have done just fine. Do you guys mind taking a look at what I have? https://codepen.io/ssylvest00/pen/ZpZdGY
Omar Salem
@OmarSalem563
Sep 26 2016 01:19

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p size 16px class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

cdodds-person
@cdodds-person
Sep 26 2016 01:19
@sylvest00 - it's working in my browser.
S. Sylvester
@sylvest00
Sep 26 2016 01:24
@cdodds-person thanks for checking! i have been at this for hours and i see nothing. i've tried 3 different browsers and my placeholder ("QUOTE") does not change. odd
Ken Haduch
@khaduch
Sep 26 2016 01:28
@sylvest00 - I found that if I loaded it with the https:// transport, it blocked the access to the quote site. If I switched to http:// for loading the page, then it worked, although you're not formatting the quote, but looks like you are dumping the raw JSON output to the quote paragraph. But it works using http:// This was on firefox on windows
S. Sylvester
@sylvest00
Sep 26 2016 01:44
@khaduch thanks for the advice. i wanted to dump the raw json info just to make sure the basics were in order. i will definitely change it as soon as i can see the contents change in my quote container! lol! i also read about the https issue, so i made sure to copy the URL from their API tester
Stephen James
@sjames1958gm
Sep 26 2016 01:47
@OmarSalem563 Which challenge?
Salomon
@zarruk
Sep 26 2016 02:00
https://codepen.io/zarruk/pen/jrByJq Hello. So I am about to finish my Wikipedia project. Make one search and then make another. Then scroll down and you'll see previous empty divs. Does anybody know a way to clear up all the divs when a new search is made?
cdodds-person
@cdodds-person
Sep 26 2016 02:05
@zarruk before you write the results to #resultados, do something like $("#resultados").empty();
Salomon
@zarruk
Sep 26 2016 02:06
@cdodds-person that worked ;) thanks!
cdodds-person
@cdodds-person
Sep 26 2016 02:06
np
Salomon
@zarruk
Sep 26 2016 02:07
@cdodds-person another quick question. Why is my search bar a little to the right with respect to the random article bar? Do you know?
cdodds-person
@cdodds-person
Sep 26 2016 02:10
It isn't clearing properly. lyou might look at chopping up the page with a few more divs.
Salomon
@zarruk
Sep 26 2016 02:12
@cdodds-person https://codepen.io/zarruk/pen/jrByJq?editors=0100 it's now working perfectly!
@cdodds-person if you want to give me some feedback, it is welcome ;)
cdodds-person
@cdodds-person
Sep 26 2016 02:12
:clap:
you might check out https://coolors.co/ for a color scheme that's a little less harsh.
Salomon
@zarruk
Sep 26 2016 02:26
@cdodds-person ok thanks. I have a question. Please look for "hola". Look at the first result. It says "Hola may refer to:". Why is that?
cdodds-person
@cdodds-person
Sep 26 2016 02:29
that's the first result that comes back in wikipedia's JSON
if you go search wikipedia for "hola" you'll get the same thing
Brendan Beltz
@BtheGit
Sep 26 2016 02:48
I tried earlier but no response. Can anybody tell me why this quote generator won't generate a new quote on button click? I think I'm overlooking something basic here. http://codepen.io/quadrumane/pen/XjrKOZ/
Annu Nirmal
@annunirmal
Sep 26 2016 02:58

topic: random Quote machine
guys can you please help me in generating random colors on click in my js code

http://codepen.io/nirmalannu/pen/qaqdbR?editors=1111

grantknaver
@grantknaver
Sep 26 2016 03:21
You guys have any ideas as to why the "center-block" bootstrap wont center my first nav-brand ? https://codepen.io/GrantKnaver/pen/qamWpd
grantknaver
@grantknaver
Sep 26 2016 03:31
any ideas guys
Jeanine Schoessler
@virtual
Sep 26 2016 03:37
Mine is pretty similar if you want to check out the code @annunirmal http://codepen.io/virtual/pen/jqJeKb
Santiago Fernandez
@sf-jd
Sep 26 2016 03:37
i dont see a center-block class added anywhere
grantknaver
@grantknaver
Sep 26 2016 03:38
ill add it right now
@sf-jd thanks for the help man
CamperBot
@camperbot
Sep 26 2016 03:38
grantknaver sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @sf-jd |http://www.freecodecamp.com/sf-jd
Santiago Fernandez
@sf-jd
Sep 26 2016 03:38
@virtual i got your pen as a reference in the challenge description. or you made it 100% like the one i got visually lol
Jeanine Schoessler
@virtual
Sep 26 2016 03:39
lol I tried to make it similar :)
Santiago Fernandez
@sf-jd
Sep 26 2016 03:40
@grantknaver so you want "Creative Adrenalin" to be centered in mobile resolution?
grantknaver
@grantknaver
Sep 26 2016 03:40
yep
preferably with bootstrap
Jeanine Schoessler
@virtual
Sep 26 2016 03:41
text-center is a element centering class for bootstrap
grantknaver
@grantknaver
Sep 26 2016 03:43
tried that @virtual :(
Santiago Fernandez
@sf-jd
Sep 26 2016 03:44
yea grant im looking into it
grantknaver
@grantknaver
Sep 26 2016 03:45
thx
been stuck forever...
Santiago Fernandez
@sf-jd
Sep 26 2016 03:46
something in the id is prolly blocking the class
just cant figure out what
grantknaver
@grantknaver
Sep 26 2016 03:47
ya been a pain
I tried an !important declaration even :(
Santiago Fernandez
@sf-jd
Sep 26 2016 03:52
@grantknaver change the navbar-brand to navbar-brand-mobile
and then just fix the text
if at all possible to customize that class
grantknaver
@grantknaver
Sep 26 2016 03:53
hmmm thats an idea. Attack the issue from a different angle
Santiago Fernandez
@sf-jd
Sep 26 2016 03:54
theres so many inheretances going on
thats why i will continue to say i detest bootstrap
i have no fkn clue what's going on and it takes forever to understand what people wanna achieve or how to fix it
good ol' handwritten css so much easier to deal with xD
Annu Nirmal
@annunirmal
Sep 26 2016 03:59
@virtual yeah your code is working perfectly fine. can you help finding error in mine
Monesul Haque
@mones-cse
Sep 26 2016 04:00
hi friends i am about to start Pomodoro Timer project
any js function or library suggestion will be greate :)
greg
@wearenotgroot
Sep 26 2016 04:03
@mones-cse setInterval or setTimeout read about those and practice
setInterval docs
setTimeout docs
grantknaver
@grantknaver
Sep 26 2016 04:03
It worked man you freaking rock
Santiago Fernandez
@sf-jd
Sep 26 2016 04:04
lol
Monesul Haque
@mones-cse
Sep 26 2016 04:05
@wearenotgroot thnaks :)
wnbaorbust
@wnbaorbust
Sep 26 2016 04:07
I'm need help making 3 boxes next to each other not on top of each other.
Please
They are place holders
Sorin Ruse
@sorinr
Sep 26 2016 04:28
@wnbaorbust if you are using bootstrap you can use a div class row and inside put three divs class col-md-4 that will hold ur placeholders
Annu Nirmal
@annunirmal
Sep 26 2016 04:34
topic:random quote machine
please help me out with generating random background colors on click . cant figure out my mistake
http://codepen.io/nirmalannu/pen/qaqdbR?editors=1111
grantknaver
@grantknaver
Sep 26 2016 04:39
@sf-jd you had an idea on how to fix the mobile side of things how about the desktop
I stripped the desktop brand of the class nav-brand, but I still can not get the brand to center with the rest of the tabs
grantknaver
@grantknaver
Sep 26 2016 05:15
any ideas out there
Brendan Beltz
@BtheGit
Sep 26 2016 05:25
Bueller, anyone?
JD Tadlock
@jdtdesigns
Sep 26 2016 05:52
@annunirmal
// add this to body in your css
body {
  transition: background .7s;
}

// Change js to this. You can also do this for the button ;)
$('body').css('background', '#' + colors[color]);
Mikhail Panichev
@denisinvader
Sep 26 2016 06:27
Hi. Is there somebody who've made tic tac toe?
Sorin Ruse
@sorinr
Sep 26 2016 06:48
@hacu9 4.02+2.03=6.04(9) instead of 6.05
@hacu9 make: output= (eval(str).toFixed(no of resulting decimals) )
Annu Nirmal
@annunirmal
Sep 26 2016 06:51
@jdtdesigns hi tadlock, for which line i should be changing my js ?
here is the link: http://codepen.io/nirmalannu/pen/qaqdbR?editors=1011
JD Tadlock
@jdtdesigns
Sep 26 2016 06:53
@grantknaver I coded out a header for you. I have nothing against Bootstrap, but it's bloated and uses legacy code. We have way better layout options available today like flexbox. You'll see that the html is way less and the css for the menu is very minimal as well. I did some custom styling for the brand and such, but the main stuff that handles the responsiveness is very little. http://jsbin.com/wozahu/edit?output
@annunirmal
// take all this out
   $(".html body").animate({
      backgroundColor: colors[color],
      color: colors[color]
    }, 1000);
   $(".button").animate({
      backgroundColor: colors[color]
    }, 1000);

// replace with this
$('body').css('background', '#' + colors[color]);
$('.button').css('background', '#' + colors[color]);
Annu Nirmal
@annunirmal
Sep 26 2016 06:59
@jdtdesigns perfect it is working thanks alot.
one more thing why you kept transition value .7s.
CamperBot
@camperbot
Sep 26 2016 06:59
annunirmal sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 608 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Sep 26 2016 07:00
@annunirmal It can be any amount you choose. I just did .7s ;)
Sorin Ruse
@sorinr
Sep 26 2016 07:00
@hacu9 or at least you can go for a precision of 4 and don't show the last two decimals if they are zero
Annu Nirmal
@annunirmal
Sep 26 2016 07:01
@jdtdesigns okay , thanks alot man. i have been working on this from quite some time. thanks alot. keep helping
CamperBot
@camperbot
Sep 26 2016 07:01
annunirmal sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: annunirmal already gave jdtdesigns points
Henry Cabello
@hacu9
Sep 26 2016 07:02
@sorinr Just adding .toFixed?
JD Tadlock
@jdtdesigns
Sep 26 2016 07:02
@annunirmal You can actually replace the 2 new lines of js with this one line. ;)
$('body, .button').css('background', '#' + colors[color]);
Henry Cabello
@hacu9
Sep 26 2016 07:03
How do i make the = buttom full width e-e
Annu Nirmal
@annunirmal
Sep 26 2016 07:03
@jdtdesigns yeah right i figured that out :)
JD Tadlock
@jdtdesigns
Sep 26 2016 07:04
:D
Sorin Ruse
@sorinr
Sep 26 2016 07:04
@hacu9 toFixed() its like toFixed(0) means no decimals
JD Tadlock
@jdtdesigns
Sep 26 2016 07:05
or Math.round(myNum) ;)
Sorin Ruse
@sorinr
Sep 26 2016 07:10
@jdtdesigns only it rounds to nearest integer and get rid of decimals
Annu Nirmal
@annunirmal
Sep 26 2016 07:10
@jdtdesigns hey if i want to change text instead of background what should i be writing ?
$('.quote_text').css('text', '#' + colors[color]);
Henry Cabello
@hacu9
Sep 26 2016 07:11
@sorinr @jdtdesigns thanks c:
CamperBot
@camperbot
Sep 26 2016 07:11
hacu9 sends brownie points to @sorinr and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 730 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 609 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Sep 26 2016 07:12
@annunirmal
$('.quote_text').css('color', '#' + colors[color]);
.css() refers to the css properties just like you would use in your css stylesheet
Annu Nirmal
@annunirmal
Sep 26 2016 07:14
@jdtdesigns :+1: perfect . thanks
CamperBot
@camperbot
Sep 26 2016 07:14
annunirmal sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: annunirmal already gave jdtdesigns points
Sorin Ruse
@sorinr
Sep 26 2016 07:14
@annunirmal if you have defined your colors in the array like '#hex' no need for '#' + colors[color] just colors[color]
Annu Nirmal
@annunirmal
Sep 26 2016 07:15
@sorinr okay. thanks
CamperBot
@camperbot
Sep 26 2016 07:15
annunirmal sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 731 | @sorinr |http://www.freecodecamp.com/sorinr
Hansi2468
@Hansi2468
Sep 26 2016 07:17

Can anyone tell me what am i doing wrong, since it returns 4 and not [["a", "b"], ["c", "d”]]

function chunkArrayInGroups(arr, size) {

if (size ===2 ){
var arr1 = arr.splice(4);
var arr2 = arr1.push([arr[0]],[arr1],[arr2],[arr3]);
return arr2;}
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);

Evan W
@Dirtier
Sep 26 2016 07:52
Anyone know how to create forms like this?
alt
Woops
![pic](http://imgur.com/IjdC1Xt)
O.o how do you post images
Evan W
@Dirtier
Sep 26 2016 08:01
blob
Need help making a form like that ^
shreyas23sk
@shreyas23sk
Sep 26 2016 08:10
has anyone here completed that calculator project
santosh
@coderpsk
Sep 26 2016 08:14
var myStr ="I am a\"double quoted\" string inside" \"double quotes.\";
not working
Abdur Rehman
@HQuser
Sep 26 2016 08:16
var myStr ="I am a\"double quoted\" string inside \"double quotes.\";
try that
var myStr ="I am a\"double quoted\" string inside\"double quotes.\" ";
d wilder
@alhazen1
Sep 26 2016 08:58
@Dirtier
maybe something like this would work for you
input {
  border: 0;
  background: transparent; /* maybe don't need this? not sure */
  border-bottom: 2px solid lightgrey;
}
Evan W
@Dirtier
Sep 26 2016 08:58
@alhazen1 Yea I figured it out, thanks though :P
CamperBot
@camperbot
Sep 26 2016 08:58
dirtier sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @alhazen1 |http://www.freecodecamp.com/alhazen1
Evan W
@Dirtier
Sep 26 2016 08:59
@alhazen1 While you're here, would you by any chance take a look at my codepen and help me figure out why the push menu wont work at lower resolutions?
d wilder
@alhazen1
Sep 26 2016 08:59
@Dirtier got just a minute but I'll take a peek
Evan W
@Dirtier
Sep 26 2016 08:59
Blah it is right there, but most of the time when you start squeezing it smaller and smaller you cant click on it anymore
d wilder
@alhazen1
Sep 26 2016 09:15
@Dirtier Seems to work for me. I'm looking in dev tool, not on a real device but at telephone size it is still animating but everything is very tiny
Evan W
@Dirtier
Sep 26 2016 09:16
Ah yea I'm sure it is haha I didn't really design it for phones. Not that great at that yet
Sorin Ruse
@sorinr
Sep 26 2016 10:01
@Dirtier you can use @media queries in your css to change the font size you want for smaller screens. you can read more here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Istvan Kokuti
@zaturek
Sep 26 2016 10:34
hi guys! How can I get accurate location in html5? I've made the weather app, but the location is not accurate. The site doesn't ask for permission to reach location of the user. What could I do?
Stephen James
@sjames1958gm
Sep 26 2016 10:38
@zaturek I assume you aren't using the browser geolocation feature?
Istvan Kokuti
@zaturek
Sep 26 2016 10:39
I've use navigator.geolocation.getCurrentPosition(showPosition)
@sjames1958gm I'm not sure, if it is the right one I've choosed
Stephen James
@sjames1958gm
Sep 26 2016 10:40
Hmm that should require the browser to ask for location, and likely the most accurate that you can get.
Istvan Kokuti
@zaturek
Sep 26 2016 10:41
But when I handled the errors, i've got a "permission denied" respond
and the browser don't asked for my location
Stephen James
@sjames1958gm
Sep 26 2016 10:42
@zaturek You are running over http:// (on chrome?)
Istvan Kokuti
@zaturek
Sep 26 2016 10:42
yep
@sjames1958gm yep
Stephen James
@sjames1958gm
Sep 26 2016 10:43
getCurrentPosition on chrome only works over https:// - you can use an alternate api such as http://ip-api.com/json to get location on ip address, not as accurate.
Istvan Kokuti
@zaturek
Sep 26 2016 10:44
and I couldn't force it to use https?
Stephen James
@sjames1958gm
Sep 26 2016 10:44
Or you can use https:// on codepen (then you will need to use something like https://crossorigin.me to access http sites like openweather
Istvan Kokuti
@zaturek
Sep 26 2016 10:44
ohh
ok
@sjames1958gm thanks! :) I'll try it
CamperBot
@camperbot
Sep 26 2016 10:44
zaturek sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3490 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 26 2016 10:45
@zaturek good luck
Monesul Haque
@mones-cse
Sep 26 2016 11:16
hi guys i want to use a Circular Progress bar in my project is there any library for that or should i have to do that manually with css
Monesul Haque
@mones-cse
Sep 26 2016 11:39
@kirbyedy thanks
CamperBot
@camperbot
Sep 26 2016 11:39
mones-cse sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1411 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Monesul Haque
@mones-cse
Sep 26 2016 11:40
@kirbyedy is it possible to use it in code pen ?
kirbyedy
@kirbyedy
Sep 26 2016 11:41
I did not use it myself yet, but I think its possible
go through the documentation first
Monesul Haque
@mones-cse
Sep 26 2016 11:45
@kirbyedy thanks again thats what i need
CamperBot
@camperbot
Sep 26 2016 11:45
mones-cse sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: mones-cse already gave kirbyedy points
vínαч puppαl
@vinaypuppal
Sep 26 2016 12:23
U
Kevin TAN
@kevintan3o
Sep 26 2016 12:37
hey everyone, i'm currently at the challenge 118 with the tribute page, I managed to do everything and just missing one little feature. I wanna select all the dates to apply the bold class on it, how can I do this ? thanks in advance ;)
Sorin Ruse
@sorinr
Sep 26 2016 12:42
@kevintan3o just add <b> tags like: <b>1948</b> for eachi <li> element
Hassen Rmili
@hassenrmili
Sep 26 2016 12:44
This message was deleted
Matt Le Fleur
@mlefleur
Sep 26 2016 13:08
@kevintan3o Can you show us the current structure of your html? You'd usually write a single class in CSS and then apply that to all of the elements you want bold
Farhad
@fhdhsni
Sep 26 2016 13:09
I wanna do the Wikipedia viewer project, but I don't want to use jsonp to get around same-origin policy . Is there any other way? How did you do yours?
skinpsv
@skinpsv
Sep 26 2016 13:10
@kevintan3o I think you want to do it using jQuery .addClass function. You should add the corresponding lines in the JS windows in Code Pen
Sorin Ruse
@sorinr
Sep 26 2016 13:10
@mlefleur he is probably using ul>li so i suggested to add <b> tags to wrap the years so in css you can also change the b tags behaviour
@skinpsv addclass its not working because you have to apply it only for a portion of the text
skinpsv
@skinpsv
Sep 26 2016 13:13
you're right @sorinr , I thought it's for all text lines in the list
Ahmed
@HosTilezZz
Sep 26 2016 14:48
guys i just started working on my calculator project, but i noticed that the calculator shown in the challenge page does not follow the correct order of mathematical operations, instead it just goes from left to right, for example it shows that 69+66+9x12 is equal to 1728 instead of 243, is this a proper behavior?
MyamotoMusashi
@MyamotoMusashi
Sep 26 2016 15:11
hey guys can u help me, i have the following code <div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img class="img-responive pull-left" src="${availableCars[currentCar].img || "imgs/cars/Skoda-Fabia-1.4.jpg"}" alt="">
</div>
<div class="col-sm-7">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">брой места: </div>
<div class="col-sm-7">${availableCars[currentCar].seats || 0}</div>
</div>
</div>
</div>
</div>
</div>
and everythings work fine when i have 2 elements, but when i have only 1 on the page the text goes over the image, i cannot find solution on google
MIR WASIM ALI
@Wasimali09
Sep 26 2016 15:12
Hi can anyone help me with Build a Tribute page
Jose Barakat
@JoseBarakat
Sep 26 2016 15:36

@fhdhsni I'm trying this:

var URL_Wiki = 'https://crossorigin.me/https://' + lang 
        + '.wikipedia.org/w/api.php?action=opensearch&profile=fuzzy'
        + '&redirects=resolve&search=' + q;

Does it work for you?

Matt Le Fleur
@mlefleur
Sep 26 2016 15:56
@MyamotoMusashi Might be because you have quotes inside of quotes?
in your <img> src
"${availableCars[currentCar].img || "imgs/cars/Skoda-Fabia-1.4.jpg"}"
try changing that to
"${availableCars[currentCar].img || 'imgs/cars/Skoda-Fabia-1.4.jpg'}"
Nicole
@limenqingzhuanshen
Sep 26 2016 16:03
how can i upload a photo from my laptop?scr="file://C:\Users\lanxin\Desktop.untitled.png"
Santiago Fernandez
@sf-jd
Sep 26 2016 16:11
tinypic.com @limenqingzhuanshen
Haruhiism
@Haruhiism
Sep 26 2016 16:34
Hey guys, just a quick question for those who have done the tribute page. I don't seem to remember much of the syntax reviewed in the past up to this point, I could go back an check a few things covered, and it will be a refresher, but I guess my question is--how many of you had to do that? Is it normal for one to do the aforementioned due to not remembering?
kalamnuri
@kalamnuri
Sep 26 2016 16:34
Hi all, I am working on the "Build a Random Quote Machine" and the page I created works fine from a browser but from codepen, the twitter button is not showing up.
I am using a block of JavaScript code from twitter site to add tweet button which includes js.src = "https://platform.twitter.com/widgets.js";
I think that's where the problem is with codepen... I tried using this in JavaScript, or adding it as an external JavaScript from setting, but it doesn't show the tweet button at all from codepen
Farhad
@fhdhsni
Sep 26 2016 16:37
@JoseBarakat yep it works. Thanks :+1: but I guess I'll resort to jsonp anyway, It's a bit slow and I don't like to add external dependencies. It may break in the future.
CamperBot
@camperbot
Sep 26 2016 16:37
fhdhsni sends brownie points to @josebarakat :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @josebarakat |http://www.freecodecamp.com/josebarakat
Farhad
@fhdhsni
Sep 26 2016 16:39
@Haruhiism All the time. I'm doing intermediate projects and have the same problem. Let's say it's not a problem ;)
kalamnuri
@kalamnuri
Sep 26 2016 16:39
Does anyone have an idea of how to make the tweet button visible in codepen?
Haruhiism
@Haruhiism
Sep 26 2016 16:43
@fhdhsni Gotcha. Just needed someone to validate my worries, I guess!
Jason Luboff
@JLuboff
Sep 26 2016 16:48
@kalamnuri did you "load" javascript in Codepen? (In the JS box, click the gear for the settings and quick-add the appropriate JS framework)?
kalamnuri
@kalamnuri
Sep 26 2016 16:49
yes, I tried that as well
kalamnuri
@kalamnuri
Sep 26 2016 16:54

Here is the complete snippet I am using from twitter in my JavaScript
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
//js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);

t._e = [];
t.ready = function(f) {
t._e.push(f);
};

return t;
}(document, "script", "twitter-wjs"));

I tried using js.src = "https://platform.twitter.com/widgets.js" in code directly and then commenting it out and adding https://platform.twitter.com/widgets.js in setting as external JavaScript
Jose Barakat
@JoseBarakat
Sep 26 2016 16:56
@kalamnuri take a look at this pen https://codepen.io/alistairtweedie/pen/JlFnq
No JS
kalamnuri
@kalamnuri
Sep 26 2016 16:59
great..... thank you Jose Barakat... I'll give it a try
Jose Barakat
@JoseBarakat
Sep 26 2016 17:01
:+1: :smile:
greg
@wearenotgroot
Sep 26 2016 17:31
@kalamnuri if you are adamant on using twitters own tweet button then you need to use this on your js https://dev.twitter.com/web/tweet-button/javascript-create. you need to replace the old button with a new one with the updated text inside it
Stuart Taylor
@Bouncey
Sep 26 2016 17:59
Can anyone help me with my tic-tac-toe game?
Stacey Landrum
@staceyland
Sep 26 2016 18:12
how do I make a white (or other color) background that fills the whole navbar? when I try it it only does the right or left side http://codepen.io/staceyland/full/ZpBdoX/
Rimi.
@Codevotee
Sep 26 2016 18:21
.navbar-fixed-top {
  background-color: white;
}
@staceyland ^
JD Tadlock
@jdtdesigns
Sep 26 2016 18:23

@staceyland First you need to remove all of this from your html:

<html>
<title>Stacey's Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yatra One">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">


<body>

Then add bootstrap, font-awesome in Settings->CSS. Next add jQuery in Settings->js. The quick add drop down menu is useful.
Add this to your css and you're good:

.navbar-fixed-top {
  background-color: white;
}
Farhad
@fhdhsni
Sep 26 2016 18:58
I know it's a broad question to ask, but how do you guys do unit testing when it involves DOM?
JD Tadlock
@jdtdesigns
Sep 26 2016 19:04
@fhdhsni Basically you test your functionality step by step to make sure it works. It becomes second nature with dynamic websites, due to the data being manipulated through functionality and not statically coded.
Janina Pohorecki
@janepohorecka
Sep 26 2016 19:08
Can someone please help me recreate the snapped until scrolled aspect of this website? http://melaniedaveid.com/
For example, the work part.
How you have the right hand scrolling while the left side is fixed temporarly
Michiel
@MichielHuijse
Sep 26 2016 19:43
Are there some folks here that have experience with fornt end development for drupal? I just started as front end drupal developer and am doing some courses on it. Would bee nice to hear there are more working with drupal :)
Suzanne Atkinson
@AdventureBear
Sep 26 2016 19:44
good afternoon campers!
@janepohorecka that's a good find
Michiel
@MichielHuijse
Sep 26 2016 19:46
@AdventureBear hello Suzanne do you speak dutch?
Suzanne Atkinson
@AdventureBear
Sep 26 2016 19:48
@MichielHuijse no I don't, why do you ask?
PattyCreates
@PattyCreates
Sep 26 2016 19:50
Hi guys. I haz a lil css question.
Michiel
@MichielHuijse
Sep 26 2016 19:50
Suzanne becuase, it is a common name in dutch.
PattyCreates
@PattyCreates
Sep 26 2016 19:51
Is there a way to make one border side more dominant that the other? I currently have a mockup where there is a gray top border and an orange left border. They have different properties, but it seems like the left side is overlaying on the top side.
But I want to the top side to be the dominant one that crosses.
Screen Shot 2016-09-26 at 2.50.20 PM.png
Is there any CSS (only) that can make the border-top dominant? I currently have border-top as the second CSS element hoping it would override the border-left.
Suzanne Atkinson
@AdventureBear
Sep 26 2016 19:57
@MichielHuijse oh, that's nice. I like my name...fits many cultures.
I lived in germany for a semester, and everyone thought I was Dutch because I did not sound American.
I thought that was a great compliment
Michiel
@MichielHuijse
Sep 26 2016 19:58
@AdventureBear dutch above germans?? Haha lol
Suzanne Atkinson
@AdventureBear
Sep 26 2016 19:59
@MichielHuijse no, that the germans thought I was not american because my pronunciation was that good! I could read enough Dutch to get around as a tourist
Michiel
@MichielHuijse
Sep 26 2016 19:59
@AdventureBear wel wel
Suzanne Atkinson
@AdventureBear
Sep 26 2016 20:00
Ich kann ein Bissien Deutch, pero mi español en un poco mejor
ich kann noch...but not very well
@PattyCreates can you make the div with the left border occur after the div with the top border?
then it can show up below that one
PattyCreates
@PattyCreates
Sep 26 2016 20:05
Hm, so it's an HTML email. So less is more being that it's pretty complicated with TRs and TDs as is. I've tried assigning it to the TR but it still keeps inheriting the TD as the dominant one.
So box-sizing doesn't work for it either. :/
Michiel
@MichielHuijse
Sep 26 2016 20:08
@AdventureBear hablas espaniol? Que bueno yo tambien, estuve en sud america.
Tarek Alabd
@TarekAlabd
Sep 26 2016 20:09
hey , how to make nav bar like this : https://codepen.io/FreeCodeCamp/full/YqLyXB/
Michiel
@MichielHuijse
Sep 26 2016 20:09
anyway off topic :)
Suzanne Atkinson
@AdventureBear
Sep 26 2016 20:10
@MichielHuijse Mi español es tampoco muy malo. Solo por hablando de medicina?
Michiel
@MichielHuijse
Sep 26 2016 20:11
You need css html jquery, in my case I used a framwork bootstrap but you can do it all yourself
Suzanne Atkinson
@AdventureBear
Sep 26 2016 20:11
@PattyCreates unless you are displaying tabular data you don't need to use a table. Are you making a web page or writing an email?
Rimi.
@Codevotee
Sep 26 2016 20:12
@TarekAlabd go for an easier navbar
PattyCreates
@PattyCreates
Sep 26 2016 20:12
@AdventureBear it's an email.
Which gives me the shivers. :/
Rimi.
@Codevotee
Sep 26 2016 20:12
@TarekAlabd that code is too complicated for what FCC teaches before the Portfolio task
Michiel
@MichielHuijse
Sep 26 2016 20:14
@AdventureBear Tampoco muy malo, meens you are really not bad at spanish.
Tarek Alabd
@TarekAlabd
Sep 26 2016 20:14
@MichielHuijse I tried but i don't know how to make any navbar
Tyler Moeller
@TylerMoeller
Sep 26 2016 20:14
@PattyCreates If you can share the code, we might be able to help more. You may be able to get away with using outlines instead of borders, or a mix of the two
Tarek Alabd
@TarekAlabd
Sep 26 2016 20:15
@APRim05 that's true
Tyler Moeller
@TylerMoeller
Sep 26 2016 20:15
@TarekAlabd They're using the bootstrap fixed-to-top navbar with additional CSS styling to make it unique: https://getbootstrap.com/components/#navbar-fixed-top
Rimi.
@Codevotee
Sep 26 2016 20:15
@TarekAlabd are you using bootstrap?
Michiel
@MichielHuijse
Sep 26 2016 20:15
@TarekAlabd A navbar is an unordered list. with list items that float next to eachother
@TarekAlabd and an unordered list is a class: .ul which can be styled in the cascading style sheet. or css
Tarek Alabd
@TarekAlabd
Sep 26 2016 20:16
@APRim05 yes
PattyCreates
@PattyCreates
Sep 26 2016 20:17
@TylerMoeller @AdventureBear
<div style="margin:0 auto;max-width:600px;background:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailMain"><tbody><tr style="border-bottom: 2px solid #ededed;"><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px;">
Tarek Alabd
@TarekAlabd
Sep 26 2016 20:18
@MichielHuijse I'll try again , thanks
CamperBot
@camperbot
Sep 26 2016 20:18
tarekalabd sends brownie points to @michielhuijse :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @michielhuijse |http://www.freecodecamp.com/michielhuijse
Suzanne Atkinson
@AdventureBear
Sep 26 2016 20:24
@PattyCreates I only see the gray border in that code and it looks like it will be at the bottom of that first table row. I don't see the orange border. Again, unless you are displaying tabular data I would not style that with table HTML. Use DIVs instaed
Tyler Moeller
@TylerMoeller
Sep 26 2016 20:24
@PattyCreates I only get a white rectangle when I use that code. I don't think you can apply a border to <tr>
Alexander Domikov
@AlexanderDom
Sep 26 2016 20:24
<div style="margin:0 auto; max-width:600px; background:#ffffff;">
  <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailMain">
    <tbody>
      <tr style="border-bottom: 2px solid #ededed;">
        <td style="text-align:center;vertical-align:top;font-size:0px;padding:20px;"></td>
      </tr>
    </tbody>
  </table>
</div>
Evan W
@Dirtier
Sep 26 2016 20:25
@sorinr cant you just use em?
Tyler Moeller
@TylerMoeller
Sep 26 2016 20:25
@AdventureBear She's using HTML email, it's stuck in the 90s :) and needs to use tables.
Alexander Domikov
@AlexanderDom
Sep 26 2016 20:25
no you can't put border on <tr>
PattyCreates
@PattyCreates
Sep 26 2016 20:25
Ah silly me.
Evan W
@Dirtier
Sep 26 2016 20:25
@sorinr instead of px
PattyCreates
@PattyCreates
Sep 26 2016 20:25
<div style="margin:0 auto;max-width:600px;background:#ffffff;">
  <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailGreen">
    <tbody>
      <tr style="border-bottom: 2px solid #ededed;">
        <td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 20px 20px 15px;border-left: 5px solid #a5cf4a;">
Excuse the poor indentation
Alexander Domikov
@AlexanderDom
Sep 26 2016 20:28
you can use two spaces for it, codepen or something like that it's easier to share code by the way
@PattyCreates
what you really want to achieve ?
PattyCreates
@PattyCreates
Sep 26 2016 20:34
Screen Shot 2016-09-26 at 2.50.20 PM.png
The opposite of this @AlexanderDom
The sides are hilights.
But i'm actually having a weird bug atm. fml. One of the borders doesn't show up on mailchimp preview. Although its consistent with the others.
Alexander Domikov
@AlexanderDom
Sep 26 2016 20:42
What ? sorry i don't understand :(
cameron nicklaus
@camnicklaus
Sep 26 2016 20:59
I'm probably going about this all wrong, but is there a way to make the parent container display "on top" of the child elements? I want to make it's opacity less than 1 so it looks as though you are looking "through" it at the contents
Amit
@amit-s
Sep 26 2016 21:08
@camnicklaus css z-index maybe?
Tyler Moeller
@TylerMoeller
Sep 26 2016 21:09
@camnicklaus Opacity will affect everything, you can use RGBA instead to adjust the opacity on specific elements: background-color: rgba(170,170,170,.3);
The .3 at the end adjusts the opacity of the color applied
cameron nicklaus
@camnicklaus
Sep 26 2016 21:11
@amit-s @TylerMoeller thanks!
CamperBot
@camperbot
Sep 26 2016 21:11
camnicklaus sends brownie points to @amit-s and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @amit-s |http://www.freecodecamp.com/amit-s
:cookie: 850 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Simon Cordova
@gbsimon87
Sep 26 2016 21:59
Hey guys, apart from google, any idea where I can find some other icons?
I've got html5 and css3 ones, but am looking for javascript and jquery ones
encount
@encount
Sep 26 2016 22:01
Simon Cordova
@gbsimon87
Sep 26 2016 22:02
@encount that's where I got my icons but can't find anything for a javascript nor jquery icon
encount
@encount
Sep 26 2016 22:03
@gbsimon87 why cant you grap them straight from a google search?
Simon Cordova
@gbsimon87
Sep 26 2016 22:05
I suppose that'll be my only option
cheers @encount :)
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:07
Simon Cordova
@gbsimon87
Sep 26 2016 22:10
@AlexanderDom thanks buds! :)
CamperBot
@camperbot
Sep 26 2016 22:10
gbsimon87 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:10
:) you're welcome
Evan W
@Dirtier
Sep 26 2016 22:10
Anyone know if you can use node on codepen?
Simon Cordova
@gbsimon87
Sep 26 2016 22:11
@Dirtier yes you can
Evan W
@Dirtier
Sep 26 2016 22:11
@gbsimon87 Doppeee thanks
CamperBot
@camperbot
Sep 26 2016 22:11
dirtier sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:11
i'm not a node pro but i think you need something like cloud9 i mean a virtual machine
that what freeCodeCamp says :) here
@Dirtier
Evan W
@Dirtier
Sep 26 2016 22:14
Ahh damn, so you have to go through a lot to set it up?
Guess I'll give it a try, thanks @AlexanderDom
CamperBot
@camperbot
Sep 26 2016 22:14
dirtier sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:14
no, everything is set up @Dirtier
depends what you want
Evan W
@Dirtier
Sep 26 2016 22:15
I need an API
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:15
easiest i think is to run it on you pc locally, but like i said i'm far from mastering node
Evan W
@Dirtier
Sep 26 2016 22:16
Yea but then it wouldnt work on the codepen for everyone else, right?
Alexander Domikov
@AlexanderDom
Sep 26 2016 22:19
don't think so, if it's for quotes exercice you don't need to go so far
Evan W
@Dirtier
Sep 26 2016 22:47
@AlexanderDom I know :P but I want to lol
I could do it if I wasn't using codepen, was just seeing if I could get it to work on codepen
Otherwise I'm going to have to copy/paste some random quotes and crap over 100 times
Tyler Moeller
@TylerMoeller
Sep 26 2016 22:54
@Dirtier You can use browserify to run node modules in a browser
From what I see though, you're going to have to get it working on a server first and then bundle up your javascript into a browserify package for running in the browser later. Best to set up a cloud9 server instead of codepen for this kind of project
Evan W
@Dirtier
Sep 26 2016 22:58
Ok thanks @TylerMoeller. I think I'm supposed to do it on codepen though
CamperBot
@camperbot
Sep 26 2016 22:58
:cookie: 851 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
dirtier sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Sep 26 2016 22:59
You'll get plenty of opportunities to work with Node.js after figuring out the front end stuff first :)
Evan W
@Dirtier
Sep 26 2016 23:01
Haha I already know how to use Node and all that, I'm just kinda doing these projects real quick for the certificate. I just don't know how to use them on Codepen, and the project asks you to link the Codepen
Amit Patel
@AmitP88
Sep 26 2016 23:02
hey guys, quick question: should I include WIP projects on my pdf resume?
vínαч puppαl
@vinaypuppal
Sep 26 2016 23:02
@TylerMoeller @Dirtier another alternative for C9 is http://hyperdev.com/about/ it is like codepen for Node.js projects
Karan Bhullar
@dawnguard
Sep 26 2016 23:32
HELP
I can't get scrollspy to work D:
<body data-spy="scroll" data-target="#exCollapsingNavbar2">

<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

          <a class="navbar-brand" href="#"><i class="code icon"></i> Karan Bhullar</a>

          <ul class="nav navbar-nav">

            <li class="nav-item">

              <a class="nav-link" href="#skilly">Skills</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#projecty">Projects</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#contacty">Contact</a>

            </li>

          </ul>

          <ul class="nav navbar-nav navbar-right pull-xs-right">

            <li><a><i class="mail icon big"></i></a></li>

            <li><a><i class="github icon big"></i></a></li>

         </ul>

 </div>