These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Sep 2016
Oliver Coop
@ocoop
Sep 04 2016 00:22

Can anyone help. I'm sure this is an easy one but its got the better of me (only been doing this for 3 days though).

Issue - cant reduce the spacing / height of the background for the header text "Coops Coding Portfolio"... Want to make it shorter.

(open fully to see better)

http://codepen.io/olicooponline/full/PGoLXr/

Edy Cruz
@edyto0122
Sep 04 2016 00:23
Hi. I'm completely lost on this "Build a Tribute Page" challenge. Can someone please help me??
Oliver Coop
@ocoop
Sep 04 2016 00:24
@edyto0122 I've only been doing it for 3 days Edy, however i did do my tribute yesterday so may be able to offer something?
Edy Cruz
@edyto0122
Sep 04 2016 00:26
That would be great because I have no idea how to complete this.
@ocoop
Oliver Coop
@ocoop
Sep 04 2016 00:26
what are you stuck with
Edy Cruz
@edyto0122
Sep 04 2016 00:27
rule #1 is no problem I've figured out most of it already but rule#2 is giving a headache
Oliver Coop
@ocoop
Sep 04 2016 00:27
whats rule 2 again?
Edy Cruz
@edyto0122
Sep 04 2016 00:28
Fulfill the below user stories. Use whichever libraires you need. Give it your own personal style
Oliver Coop
@ocoop
Sep 04 2016 00:29

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

Edy Cruz
@edyto0122
Sep 04 2016 00:30
Yeah but idk what to do with that
Oliver Coop
@ocoop
Sep 04 2016 00:31
from what i have gathered, the point of the projects are to give you enough prior information to be able to go out and research what you dont know. I.e. learn on the job
and go back through your course material. all the info is in there
Edy Cruz
@edyto0122
Sep 04 2016 00:33
I have to read all of that before starting this challenge?? @ocoop
Oliver Coop
@ocoop
Sep 04 2016 00:33
read all of what, the course or the website i linked you?
Edy Cruz
@edyto0122
Sep 04 2016 00:34
the website you linked me
Oliver Coop
@ocoop
Sep 04 2016 00:35
no, god no.... use it as refererence. the 3 tabs you'll be using from the top are HTML, CSS & BOOTSTRAP. the left hand Nav of each helps you find what you need
if not, google
Edy Cruz
@edyto0122
Sep 04 2016 00:37
Oh thank God. Thank you for your help I'll see what I can do by myself lol @ocoop
CamperBot
@camperbot
Sep 04 2016 00:37
edyto0122 sends brownie points to @ocoop :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @ocoop |http://www.freecodecamp.com/ocoop
Oliver Coop
@ocoop
Sep 04 2016 00:38
@edyto0122 no prob. it seems daunting at first, what with being new to it, but you quickly get the nack of knowing where to look.
Edy Cruz
@edyto0122
Sep 04 2016 00:43
I still have no idea what I'm supposed to do here. Sorry to bother you so much!
@ocoop
Like my mind is blank
Oliver Coop
@ocoop
Sep 04 2016 00:44
you just need to make a page with some text, a picture and a hyperlink in it in essence
Edy Cruz
@edyto0122
Sep 04 2016 00:45
Where do I start typing my code?
Oliver Coop
@ocoop
Sep 04 2016 00:46
did you skip the tutorial? it gave you a link to www.codepen.io
Edy Cruz
@edyto0122
Sep 04 2016 00:46
Ohh yeah yeah I saw it now alright thanks lol! @ocoop
CamperBot
@camperbot
Sep 04 2016 00:46
edyto0122 sends brownie points to @ocoop :sparkles: :thumbsup: :sparkles:
:warning: edyto0122 already gave ocoop points
ldotlam
@ldotlam
Sep 04 2016 00:54
Hey guys, currently doing the tribute page and just had a question about the actual 'information' displayed on the site, is a copy+paste from another source and citing it okay? or am i expected to write up everything myself
Oliver Coop
@ocoop
Sep 04 2016 00:55
i dont think anyone reviews it
ldotlam
@ldotlam
Sep 04 2016 00:56
ahh okay, thanks for your quick reply :)
Chris Cullen
@123xylem
Sep 04 2016 01:09
http://codepen.io/123xylem/pen/JKqYZY?editors=0011
Can someone help me with my buttons at the bottom.. IM trying to change Symbol input from my User prompt on document ready to Pick which susymbol u want via the buttons at the bottom... I have ChooseX and ChooseO functions at the bottom of the JS correspoinding to the bottom of my HTML
Amit Patel
@AmitP88
Sep 04 2016 01:09
hey guys
I need a little help getting some css animations to work
I found a css animated button that I really like and am trying to integrate it into my portfolio site
I made a mini project to get it working by itself (which it does): https://amitp88.github.io/css-button/
but when I try to integrate it into my portfolio site, the button style is there, but the animation isn't: https://amitp88.github.io/New-Portfolio/
mjcreate
@mjcreate
Sep 04 2016 01:29
Hi! I have a dumb question about signing up for codepen - do most of you use your real name to sign up or do you just use initials or something?
Gang Zhao
@crumpx
Sep 04 2016 01:30
i think i just sign up with github. it's your choice.
Chris Cullen
@123xylem
Sep 04 2016 01:30
http://codepen.io/123xylem/pen/JKqYZY?editors=1111
Can someone tell me why my HTML buttons Coded at the bottom of my JS arent changing USER var???
Oliver Coop
@ocoop
Sep 04 2016 01:31
@mjcreate I think sign up to Github and then sign in to Codepen by using the button saying "sign in with github", whatever login credentials you choose doesnt matter

Hi all, just finished my project of building a portfolio page. feel free to critique but bare in mind only been doing this for 3 days:

open fully to see it work as it should

https://codepen.io/olicooponline/full/PGoLXr/

mjcreate
@mjcreate
Sep 04 2016 01:39
thanks @ocoop I didn't realize I can sign in with github! Your page looks pretty cool!
CamperBot
@camperbot
Sep 04 2016 01:39
mjcreate sends brownie points to @ocoop :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @ocoop |http://www.freecodecamp.com/ocoop
Oliver Coop
@ocoop
Sep 04 2016 01:42
@mjcreate thanks MJ
CamperBot
@camperbot
Sep 04 2016 01:42
ocoop sends brownie points to @mjcreate :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @mjcreate |http://www.freecodecamp.com/mjcreate
patricia grace
@patriciagrace
Sep 04 2016 01:50
@123xylem I can't figure it out either. But, I win every time. So , I like it lol Seriously, though, I made some changes still couldn
couldn't choose X
Dan Stockham
@DanStockham
Sep 04 2016 02:06
Who's having trouble?
makkoli
@makkoli
Sep 04 2016 02:09

@123xylem

 if (user == "X" || user == "x") {
    userX = true;
    userText = "X";
  } else {
    userO = true;
    userText = "O";
    console.log(userText);
  }

The problem is here, when the document loads it automatically assigns the user the value O, since the user hasn't chosen a symbol yet.

@123xylem I got it to give the user the correct symbol, but I can't get it to render X on the tile
Alex S.
@aszwet1
Sep 04 2016 02:25
I've got a quick question regarding the container and container-fluid classes in bootstrap
if I'm trying to build a navbar would I nest the nav bar inside the container div, or vice versa?
Dylan
@dhcodes
Sep 04 2016 02:55
@aszwet1 I believe the navbar is usually outisde the container
Chris Cullen
@123xylem
Sep 04 2016 02:59
@makkoli so is there a way of me making this wait for user input?
@patriciagrace thanks working on it now
CamperBot
@camperbot
Sep 04 2016 02:59
123xylem sends brownie points to @patriciagrace :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for patriciagrace
Chris Cullen
@123xylem
Sep 04 2016 03:04
http://codepen.io/123xylem/pen/JKqYZY?editors=1111
Ive got it to accept userX but it doesnt work for userO
0.
John
@johnfrades
Sep 04 2016 03:09
guys i just finished learning HTML/CSS/Bootstrap/Javascript/NodeJS/ExpressJs .. im looking towards to AngularJS or Angular2... which is better?
if i will learn angular 2, do i need to learn 1st angularJS?
thank you!
Stephen
@stephepush
Sep 04 2016 03:15
@johnfrades, I've heard you could learn one or the other, but its just better to learn Angular2 at this point
AngularJS doesn't have mobile support is what I've read
John
@johnfrades
Sep 04 2016 03:19
@stephepush thanks bro
CamperBot
@camperbot
Sep 04 2016 03:19
johnfrades sends brownie points to @stephepush :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @stephepush |http://www.freecodecamp.com/stephepush
Stephen
@stephepush
Sep 04 2016 03:20
you're welcome
Chris Cullen
@123xylem
Sep 04 2016 03:21
function chooseO()
            {user="O"; userO=true;
             console.log(user, userX, userO)};

function newChoice() {
  choice = choices[Math.floor(Math.random() * choices.length)];

  return choice;
  console.log(choice + " cpu next choice");
}

$(document).ready(function() {
userX=false;
  userO=false;

  if (userX == true) {
    userX=true;
    userText = "X";
  } else if (userO == true){
   userO=true;
    userText = "O";
    console.log(userText);
  }
My document ready seems to not take into account the funciton above it.. So none of the other functions in doc ready take it into account. hOW CAN I get the choose functions to start off my program?
Le Dien Phuc
@phucledien
Sep 04 2016 03:26
hey guys, can anyone help me ?
I am doing random quote project
This is a freecodecamp's example codepen of it https://codepen.io/hezag/pen/ZGxOLX
In javascript part I dont know why we should check if it in iframe or not
Why does the dev use it for twitter and tumblr ?
Stephen
@stephepush
Sep 04 2016 03:37
@ledienphuc , probably just for preference. I also kind of suspect that hezag isn't a beginning coder, or that he came back and added some stuff to his random quote generator when he got more experience
hi everyone! I'm trying to code in additional functionality to my random quote generator to show "unattributed" when the api doesn't return a name of who said the quote. I'm trying to integrate this code into my app to no avail:
if ($('#author').is(':empty')){
  $('#author').text("Unattributed");
}
Ken Haduch
@khaduch
Sep 04 2016 03:57
@stephepush - well, you are putting a - in there, so it might not be empty? How about testing for a dash? Or test the value coming in from the data and set the author text that way?
Stephen
@stephepush
Sep 04 2016 04:01
lol, I have spent a good portion of the last two days trying to figure this out, and you're right, @khaduch ! Thanks.
CamperBot
@camperbot
Sep 04 2016 04:01
stephepush sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1623 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 04 2016 04:01
@stephepush - or change your code to this:
if ($('#author').text() === '-'){
  $('#author').text("Unattributed");
}
Stephen
@stephepush
Sep 04 2016 04:01
Ha! Very true!
yep, that works, thanks again @khaduch
CamperBot
@camperbot
Sep 04 2016 04:03
stephepush sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: stephepush already gave khaduch points
Ken Haduch
@khaduch
Sep 04 2016 04:03
@stephepush - you are welcome!
Stephen
@stephepush
Sep 04 2016 04:20
Alright, here's one last question for the night:
I used the twitter icon from the fontAwesomeCDN in a button on my random quote generator app and now the buttons do no line up. Any idea what's going on? Here's the codepen:
http://codepen.io/stephepush/pen/dXQKjW
Henry Cabello
@hacu9
Sep 04 2016 04:27
Hey guys what do you think of my weather machine? https://codepen.io/cabello986/full/rrNpBG/ it still needs work,i want to be able to change animations by just writing em down
Stephen
@stephepush
Sep 04 2016 04:30
i like it, @hacu9 , what are you using for the snowflake(?) effect?
Sorin Ruse
@sorinr
Sep 04 2016 04:31
@stephepush add line-height: 60px; to button{} in css
Stephen
@stephepush
Sep 04 2016 04:32
@sorinr, I figured it had something to do with line heights in css. Thanks.
CamperBot
@camperbot
Sep 04 2016 04:32
stephepush sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @sorinr |http://www.freecodecamp.com/sorinr
Stephen
@stephepush
Sep 04 2016 04:35
@hacu9 , cool stuff.. It would be awesome if you had a rain effect and/or a wind effect for corresponding weather conditions. Don't know if anyone has come up with anything like that, though
Henry Cabello
@hacu9
Sep 04 2016 04:35
re open it
bkd705
@bkd705
Sep 04 2016 04:39
Anyone need help with anything, im bored.
Henry Cabello
@hacu9
Sep 04 2016 04:45
I do xD i wanna change animations when certain conditions are met
bkd705
@bkd705
Sep 04 2016 04:56
What conditions and what do you wanna change?
Anshul
@AnshulMalik
Sep 04 2016 04:57
Hello Everyone
Stephen
@stephepush
Sep 04 2016 05:33
very cool, @hacu9 . I wanna see the end result!
Hmm, @hacu9 , I think the problem with having these graphics for different weather conditions is the number of lines of CSS/JS each of these effects contain
I imagine you could use a switch case based on the weather id (assuming you're using openweathermaps)
but you're gonna have at least 1000 lines of code....
it would be very cumbersome on codepen, methinks, maybe not so much on hosted space, wehre you can direct to differing .js scriptfiles
Stephen
@stephepush
Sep 04 2016 05:38
as well as .css files
KARTHICKMANIAN S
@karthickmanian
Sep 04 2016 05:39
I need help to build portfolio page. I have no idea about this.
bkd705
@bkd705
Sep 04 2016 05:39
the size of the file would be a pain to do in codepen, but it wouldnt be anything out of the ordinary length wise
whatsup @karthickmanian
KARTHICKMANIAN S
@karthickmanian
Sep 04 2016 05:41
I've build tribute page. The next step is to build portfolio page . What are things i have to use in that page @bkd705
bkd705
@bkd705
Sep 04 2016 05:42
Check the user stories
KARTHICKMANIAN S
@karthickmanian
Sep 04 2016 05:42
okay
bkd705
@bkd705
Sep 04 2016 05:42
I'm pretty sure its super similar to the tribute page.
Brandon
@Intendant-
Sep 04 2016 06:18
So I'm doing the show local weather project and was wondering if anyone could give me a hand
https://codepen.io/bperez83525/pen/EgxJZA?editors=1111
the api is logging an error, but my key is correct, not really sure what's going on here
Shukrullah shirzad
@Shukrullahshirzad
Sep 04 2016 06:27

hey guys

i wanna
send an image in here how can do this

Shukrullah shirzad
@Shukrullahshirzad
Sep 04 2016 06:33
anyone in here
:worried:
labeebahmad414
@labeebahmad414
Sep 04 2016 06:49
Can anybody help me with this? I need to find coordiantes of point where I finished drawing arc.
http://stackoverflow.com/questions/39314283/how-to-get-coordinates-of-point-where-drawing-arc-ended-in-canvas
Sorin Ruse
@sorinr
Sep 04 2016 08:28
@Intendant- add your key to the url: 'https://simple-weather.p.mashape.com/weatherdata?lat=1.0&lng=1.0',
Pavel Antonov
@pavel-antonov
Sep 04 2016 08:38

Hello guys, I have a question :) Im working on my portfolio ( Basic Frond End ) and i'm stuck. I have 2 sections with picutres i want to add things over them. On the first i want to add text, on the third ( after the skills section ) i want to add buttons, but when i try to add them, they appear everyelse but over the image, can some 1 give me a hand ?

This is my Codepen : http://codepen.io/pavel-antonov/pen/zBgZrw

Kuba Rdzak
@qubkon
Sep 04 2016 08:46
@pavel-antonov the structure is not right
@pavel-antonov and probably using an image as a background is a better idea than how it's done now
Pavel Antonov
@pavel-antonov
Sep 04 2016 08:50
@qubkon What do you mean by the structure is not right ?
And how can i make the photo to be centralized ( with some space on the left/right ) ( without using containers + col-md-8 )
It will be much appreciated, if you give me a hint what to do next, or how to overcome my problem : )
Kuba Rdzak
@qubkon
Sep 04 2016 08:51
@pavel-antonov 1) that code is quite messy 2) um... you can just set height/ width or adjust padding or margin
Pavel Antonov
@pavel-antonov
Sep 04 2016 08:51
@qubkon im looking at the full page : http://codepen.io/pavel-antonov/full/zBgZrw/
and everything seems okey :D :D :D
@qubkon so it will be better to start all over again ?
Kuba Rdzak
@qubkon
Sep 04 2016 08:52
@pavel-antonov just wait a minute - I'll look into it
Pavel Antonov
@pavel-antonov
Sep 04 2016 08:53
thanks dude
AnnemiekeNL
@AnnemiekeNL
Sep 04 2016 09:02
I'm having some trouble with responsive layout for my 'random qoute machine' Project Link - http://codepen.io/AnNL/pen/eZjmGj. Any feedback in general?
Pavel Antonov
@pavel-antonov
Sep 04 2016 09:09
@AnnemiekeNL I cant tell you about the code ( i havent reached that level yet ) but i like the final result very much most of the thing i like when you click next quote, the picture changes i like that : )
AnnemiekeNL
@AnnemiekeNL
Sep 04 2016 09:10
Thanks @pavel-antonov I appreciated that!
CamperBot
@camperbot
Sep 04 2016 09:10
annemiekenl sends brownie points to @pavel-antonov :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @pavel-antonov |http://www.freecodecamp.com/pavel-antonov
Kuba Rdzak
@qubkon
Sep 04 2016 09:13
@pavel-antonov oh man, I'm kinda busy - working on my own project at the moment, but try to code your website without CSS first
@pavel-antonov it will help you with the structure - code'll be clean and when everything'll be in position, then you can style it the way you want it
Pavel Antonov
@pavel-antonov
Sep 04 2016 09:14
@qubkon np dude, thank you so much : )
CamperBot
@camperbot
Sep 04 2016 09:14
pavel-antonov sends brownie points to @qubkon :sparkles: :thumbsup: :sparkles:
:cookie: 107 | @qubkon |http://www.freecodecamp.com/qubkon
Kuba Rdzak
@qubkon
Sep 04 2016 09:14
@pavel-antonov you can create a repo and I'll help you with that later on if you want or something
Pavel Antonov
@pavel-antonov
Sep 04 2016 09:15
will see, good luck with your project : )
Kuba Rdzak
@qubkon
Sep 04 2016 09:15
cheers mate :)
Kuba Rdzak
@qubkon
Sep 04 2016 09:43
@pavel-antonov maybe something like this? :P
Sayed Afif
@sayedafif
Sep 04 2016 10:09
"Search Results for-" comes at the end but i want it to at the beginning. http://codepen.io/sayedafif/pen/KgKLXb?editors=1010
J4yKay
@J4yKay
Sep 04 2016 10:16
So I broke up a row into 4 parts using div tags and then I put an image in each one. Now when I resize my browser window, the images overlap. Is there a way to make the image stick to the page?
labeebahmad414
@labeebahmad414
Sep 04 2016 10:16
GuilioM
@GuilioM
Sep 04 2016 10:17
Hi Guys, having a little margin/width issue with my webpage (2nd Project - Personal Portfolio). Can Anyone Help? https://codepen.io/GuilioM/full/VKYwkA/
Joffrey Nolting
@Yovvel
Sep 04 2016 10:32
@GuilioM where? i don't see it
GuilioM
@GuilioM
Sep 04 2016 10:33
you don't see the left-right scroll bar? @Yovvel
Joffrey Nolting
@Yovvel
Sep 04 2016 10:34
ohh yes! i see it now.. sorry
one moment please, i am looking at your code right now
GuilioM
@GuilioM
Sep 04 2016 10:34
I'm referring to the entire <html> or the <body>, it's probably <body> but I don't see what I did that affected the width of the entire page.
no worries. and Sure. @Yovvel
Birau Sergiu
@birausergiu
Sep 04 2016 10:42
Hello
Joffrey Nolting
@Yovvel
Sep 04 2016 10:43
@GuilioM the width issue is in your footer
```
footer {
background-color: #000066;
font-family: Raleway;
color: white;
/margin: 0 auto;/
padding: 1em 3em;
text-align: center;
left: 0;
bottom: 0;
width: 100%;
}
``
footer {
    background-color: #000066;
    font-family: Raleway;
    color: white;
    /*margin: 0 auto;*/
    padding: 1em 3em;
    text-align: center;
    left: 0;
    bottom: 0;
    width: 100%;
}
should be
footer {
    background-color: #000066;
    font-family: Raleway;
    color: white;
    /*margin: 0 auto;*/
    padding: 1em 3em;
    text-align: center;
    left: 0;
    bottom: 0;
}
@GuilioM remove width:100%; should do the trick
and remove margin: 0 auto; from you footer section
@birausergiu hi
Shukrullah shirzad
@Shukrullahshirzad
Sep 04 2016 10:46
Hi guys I have a problem with saving my work the page doesn't save my previous task what should i do?
GuilioM
@GuilioM
Sep 04 2016 10:47
JOY OH JOY, I've been focusing on <body> too long. I swore the answer was in there, but you proved me wrong @Yovvel Thank you! i really appreciate it! I wonder why though.
CamperBot
@camperbot
Sep 04 2016 10:47
guiliom sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @yovvel |http://www.freecodecamp.com/yovvel
Joffrey Nolting
@Yovvel
Sep 04 2016 10:51
@GuilioM np! sometimes it doenst have to be the body, but it can be anything which stretched out to much, then it will take the rest with it
@Shukrullahshirzad where are you trying to save? in codepen or in freecodecamp tutorials
Shukrullah shirzad
@Shukrullahshirzad
Sep 04 2016 11:06
free code camp tutorials
I have finished tribute page but it doesn't saves
Joffrey Nolting
@Yovvel
Sep 04 2016 11:35
@Shukrullahshirzad have you clicked the save button in codepen?
Eden-Zeev Einav
@edenzeev
Sep 04 2016 11:36

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text{
color: pink;
}
</style>

<h1>class="pink-text">Hello World!</h1>

anyone know what is wrong why my pink-text class won't apply to h1 element?
Joffrey Nolting
@Yovvel
Sep 04 2016 11:37
@edenzeev you have typed <h1>class="pink-text"> but it should be <h1 class="pink-text"> with other words, you are having a > to much
Eden-Zeev Einav
@edenzeev
Sep 04 2016 11:39
@Yovvel thanks allot, sorry for the noob question :p is there a way you guys remember to avoid making these small but critical mistakes?
CamperBot
@camperbot
Sep 04 2016 11:39
edenzeev sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @yovvel |http://www.freecodecamp.com/yovvel
Joffrey Nolting
@Yovvel
Sep 04 2016 11:41
@edenzeev just keep coding, it will get better when you have more expierience, but even the top programmers can make those kind of errors. thats why it is important to write a smill piece of code and test it before continue. otrherwise you have 100 lines of code with probably multipe typing errors..well try to fix it then :P
np btw
Eden-Zeev Einav
@edenzeev
Sep 04 2016 11:42
(thumbs up)
Kuba Rdzak
@qubkon
Sep 04 2016 11:44
@edenzeev use : and then type emoji :P
Eden-Zeev Einav
@edenzeev
Sep 04 2016 11:44
:thumbsup:
Joffrey Nolting
@Yovvel
Sep 04 2016 11:46
:+1: @qubkon didn't know that :P
Safbek
@safbek
Sep 04 2016 11:50
hi!i need some help!has anyone read the book by Ethan Marcotte? I used his method of translating pixels into a percentage. let's say I have a container width 220 pixels which contains an element with a width of 30 pixels. I divided 30/220 =13.636363636364%. in pixels like the layout. but in the percentage of the item looks narrower than in pixels. what does it mean?
Kuba Rdzak
@qubkon
Sep 04 2016 12:14
@safbek isn't it better to use ems?
Justin
@JustinGaravel
Sep 04 2016 12:17
Hey all, for the local weather app, which API would you suggest? The one recommended in the instructions is blocked over CodePen because it's only http
Safbek
@safbek
Sep 04 2016 12:24
@qubkon is it a good idea to use em instead of % for the grid . I don't understand it well?
Kuba Rdzak
@qubkon
Sep 04 2016 12:30
@safbek well, I'm using px for everything and it's fine most of the time
@xxjeep maybe Weather Underground ? It's free for developers.
Michael Bomholt
@bomholtm
Sep 04 2016 12:36
has anyone used SVG social media icons instead of icon fonts?
Safbek
@safbek
Sep 04 2016 12:47
@qubkon how do you do responsive design?
Joffrey Nolting
@Yovvel
Sep 04 2016 12:50
@bomholt nope not me..
@bomholt but i dont think you can use them with codepen..
@bomholt why dont you take a look at the fa icons?
Kuba Rdzak
@qubkon
Sep 04 2016 12:52
@safbek media query before, now I'm using Bootstrap.
Michael Bomholt
@bomholtm
Sep 04 2016 13:09
@Yovvel you can use svg everywhere and i already use some fa icons via fort awesome in all of my finished projects
Joffrey Nolting
@Yovvel
Sep 04 2016 13:09
@bomholt oh you can? one moment, i will take a look again
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:10
yes you can use svg everywhere
hello everyone :)
Michael Bomholt
@bomholtm
Sep 04 2016 13:10
its easy and nice (fa icons via js file) but i heard a lot of people saying svg is the future and i wanted to use svg for my portfolio pages
so i learn something new and have used the best available technology
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:11
it's here since long time (i mean svg)
Kuba Rdzak
@qubkon
Sep 04 2016 13:11
But got to mainstream recently.
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:11
wasn't used thank's to our dear internet explorer :)
Michael Bomholt
@bomholtm
Sep 04 2016 13:11
yeaa but it just now becoming a great thing @AlexanderDom browser support was horrible
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:12
specially ie actually
Joffrey Nolting
@Yovvel
Sep 04 2016 13:12
@bomholt maybe this will help you? https://codepen.io/ruandre/pen/howFi
Kuba Rdzak
@qubkon
Sep 04 2016 13:13
Currently Mozilla is a step behind. You have to write some -mozes for stuff to work properly.
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:13
which stuff ?
Michael Bomholt
@bomholtm
Sep 04 2016 13:13
@Yovvel thanks
CamperBot
@camperbot
Sep 04 2016 13:13
bomholt sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @yovvel |http://www.freecodecamp.com/yovvel
Kuba Rdzak
@qubkon
Sep 04 2016 13:14
Transitions, transformations - stuff like that.
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:14
oh that
it's more css3 implemantation for svg yes
Michael Bomholt
@bomholtm
Sep 04 2016 13:14
@Yovvel so this codepen works with adblock and stuff?
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:14
i speaked of just natural inline svg :)
yes transformation for svg it's another subject
Joffrey Nolting
@Yovvel
Sep 04 2016 13:16
@bomholt i dont know, haven't experimented with it yet.. heard of svg by you, so it is something i am gonna try soon, but for now i dont know much about it yet
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:16
@bomholt i opened codepen page with adblock and yes it works
Michael Bomholt
@bomholtm
Sep 04 2016 13:17
@AlexanderDom ah ok thanks. have not adblock on this device and was to lazy to install or stand up
CamperBot
@camperbot
Sep 04 2016 13:17
bomholt sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Michael Bomholt
@bomholtm
Sep 04 2016 13:17
what is natural inline svg?
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:18
you're welcome, yes it's seems like, why you thought it's gonna be blocked ?
Alexander Domikov
@AlexanderDom
Sep 04 2016 13:24
by the way there are two libraries to animate svg gsap and snap svg
Usman Akram
@usmanakram1996
Sep 04 2016 13:42
hey there i want a feedback of my project any one there available?
Stephen
@stephepush
Sep 04 2016 14:32
@Intendant- : I don't think mashape provides you with an actual weather api. It just holds all of your api keys or whatever. Use the open weather app api; lots of people here know the documentation because lots of people used it for their weather app.
whbob
@whbob
Sep 04 2016 14:38
Hi, I am at the section in FreeCodeCamp where, using code pen, construct an html page with a jpeg, text, link to web page. Where should I put the jpeg? I don't think that I can reference my own computer, right?
Joffrey Nolting
@Yovvel
Sep 04 2016 14:39
@whbob you need images hosted somewhere, like on google drive or flickr.com
@whbob or a ftp server :P
whbob
@whbob
Sep 04 2016 14:40
I do have a google drive. Thanks :)
Joffrey Nolting
@Yovvel
Sep 04 2016 14:40
np
Safbek
@safbek
Sep 04 2016 14:48
@qubkonThanks)
Matthew Layton
@ml404
Sep 04 2016 14:58
'''
CamperBot
@camperbot
Sep 04 2016 14:58
:bulb: to format code use backticks! ``` more info
Matthew Layton
@ml404
Sep 04 2016 14:59
var quote = [];
var author = [];
var rand = quote[Math.floor(Math.random() * quote.length)];

function generate() {
  $(".message").html(" '" + quote[rand] + "' " + " - " + author[rand]);
}
Any idea why this returns 'undefined' - 'undefined' rather than a random value?
I've got a bunch of pushed array values below this line
Muhammad Hasham
@MohammadHasham
Sep 04 2016 15:33
if i want to add a decrement in a value after exactly one second how can i do that using js?just like a timer
This message was deleted
Muhammad Hasham
@MohammadHasham
Sep 04 2016 15:45
TrayBanks
@TrayBanks
Sep 04 2016 15:50
Can when someone tell why my buttons at the bottom of my page are not clickable anymore?
http://codepen.io/TrayBanks/pen/NRKvGg
Muhammad Hasham
@MohammadHasham
Sep 04 2016 16:05
What is wrong with my JS?need help
http://codepen.io/Mohammad_Hasham/pen/PGwkwo
r2d2
@UsamaHameed
Sep 04 2016 16:22
Has anyone got any tutorials for positioning content? E.g. using position: relative / absolute? (Working on the simon game)
@MohammadHasham have you called myFunction?
Pradnya Joshi
@pradxj07
Sep 04 2016 16:27
@ml404 , as per the code snippet quote is empty. and you are trying to assign an item from an empty array (quote) to rand. Hence rand is undefined.
Alexandro Pequeno
@Argestis
Sep 04 2016 17:06
Hi, guys. So I was wondering, I'm working on my second front end, project: https://codepen.io/argestis/pen/xExBNz Should I learn on how to make the pen responsive or should I wait?
kat-mag
@kat-mag
Sep 04 2016 17:12
@Argestis You should go for responsive right now. It'll be easier for you later on ;)
doesn't take long to learn ;)
Alexandro Pequeno
@Argestis
Sep 04 2016 17:13
Alright. Thank you!, @kat-mag
CamperBot
@camperbot
Sep 04 2016 17:13
argestis sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @kat-mag |http://www.freecodecamp.com/kat-mag
Alexandro Pequeno
@Argestis
Sep 04 2016 17:14
Should I do it with bootstrap or @media option on html? don't know what's better :/
kat-mag
@kat-mag
Sep 04 2016 17:15
@Argestis If you want to learn - do it with media queries and sizing things properly with percents & ems
@Argestis Bootstrap is the easy way that won't teach you how things are done in real life :D
jean luc tuyishime
@luc-tuyishime
Sep 04 2016 17:16
how can i make an upload picture using javascript and save it to a database
kat-mag
@kat-mag
Sep 04 2016 17:16
It's nice to know how bootstrap works, but won't benefit you right now. U need to know how bootstrap does things ;P
@luc-tuyishime Can't help, sorry. Databases are not my thing ;< U can ask in backend room
mjcreate
@mjcreate
Sep 04 2016 17:29
I need help using codepen. When I add a style to the css window, it doesn't seem to be available in my html. See http://codepen.io/mjcreate/pen/YGPzdd - to test I put in .blue-text in the css and set h2 to it but nothing happens. What am I missing here?
holy moly didn't expect that preview gif to pop up
kat-mag
@kat-mag
Sep 04 2016 17:30
@mjcreate remove that style {}
u don't need that
mjcreate
@mjcreate
Sep 04 2016 17:31
@kat-mag thank you so much!
CamperBot
@camperbot
Sep 04 2016 17:31
mjcreate sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @kat-mag |http://www.freecodecamp.com/kat-mag
mjcreate
@mjcreate
Sep 04 2016 17:32
works now does snoopy dance
kat-mag
@kat-mag
Sep 04 2016 17:32
@mjcreate No problem :clap:
Adam Pankowski
@losbaltica
Sep 04 2016 17:43

Hi guys can somebody tell me why my web dont show quote?

http://codepen.io/codermaster/pen/dpPoWp?editors=1010

Sorin Ruse
@sorinr
Sep 04 2016 17:52
@losbaltica check your get fail sintax
Irina
@2Irina2
Sep 04 2016 17:57
Hi there!
Could anyone help me with my wikipedia viewer?
kat-mag
@kat-mag
Sep 04 2016 17:59
@2Irina2 pro hint. Don't ask if someone can help. Just say what's the problem and post your codepen :P
@2Irina2 Someone will eventually go through your code ;)
Irina
@2Irina2
Sep 04 2016 17:59
@kat-mag good tip
I am trying to get the JSON for the input the user added in the text box once the user presses Enter, but nothing happens
and i'm not sure what i did wrong
Sorin Ruse
@sorinr
Sep 04 2016 18:02
@losbaltica take a look here: random quotes
kat-mag
@kat-mag
Sep 04 2016 18:06
@2Irina2 take a look at the console errors. It's spitting out the lack of Access-Control-Allow-Origin header. It's not getting through to the wiki api
Irina
@2Irina2
Sep 04 2016 18:07
@kat-mag but why not?
@kat-mag and how can i access the console errors?
kat-mag
@kat-mag
Sep 04 2016 18:08
ctrl+shift+i on chrome. On others - just right click and there should be 'Inspect' or something like that
Irina
@2Irina2
Sep 04 2016 18:10
ok so how am i supposed to do this.. where did i go wrong with my code?
Alexandro Pequeno
@Argestis
Sep 04 2016 18:10
Guys, do you know how to change div positions with jquery?, like div1 and div2, Then putting div2 before div1? I tried using .insertBefore but didn't worked on code pen :/
kat-mag
@kat-mag
Sep 04 2016 18:13
@2Irina2 No idea about jquery way of doing this, but I found a good overview of this challenge here https://medium.freecodecamp.com/building-a-wikipedia-search-engine-project-4d84de3841d2#.v60k6i87g
Irina
@2Irina2
Sep 04 2016 18:15
@kat-mag i'll take a look, thanks!
CamperBot
@camperbot
Sep 04 2016 18:15
2irina2 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @kat-mag |http://www.freecodecamp.com/kat-mag
Michael Cavataio
@MCavataio
Sep 04 2016 18:25
s315578
@s315578
Sep 04 2016 18:35
Hey guys
Alexandro Pequeno
@Argestis
Sep 04 2016 18:36
@MCavataio , Thank you! this is awesome!
CamperBot
@camperbot
Sep 04 2016 18:36
argestis sends brownie points to @mcavataio :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @mcavataio |http://www.freecodecamp.com/mcavataio
s315578
@s315578
Sep 04 2016 18:36
I have a question regarding the code I have written for Portfolio project.
any help would be appericiated
My body elements goes over the Header which is FIXED.
I dont know how to fix it.
kat-mag
@kat-mag
Sep 04 2016 18:41
@s315578 set the z-index to some higher value on that header
and there's a reason for that html & css editor views. Put your css in css tab & html in html tab (just FIY - that's the codepen way)
s315578
@s315578
Sep 04 2016 18:42
Got it fixed buy putting class="navbar-fixed-top"
by*
I wrote the code with notepad++ so i just copied the code
thank you
Joran de Haan
@LeCoquille
Sep 04 2016 18:52
Hi everyone! Does anybody have an idea why I wouldn't be able to change the thickness of y <hr> line? Could it be that bootstrap is overwriting my custom css styles on this one?
kat-mag
@kat-mag
Sep 04 2016 18:53
@LeCoquille possible. Kick it out for a second and you'll find out ;P
Joran de Haan
@LeCoquille
Sep 04 2016 18:56
@kat-mag yess, so it is bootstrap. still not sure how to fix it though
Adam Pankowski
@losbaltica
Sep 04 2016 18:57
hi guys anyone knows how to cover properly background?
I cant figure out why is not fully cover...
http://codepen.io/codermaster/pen/LkvXqR
Irina
@2Irina2
Sep 04 2016 19:01
@losbaltica that's because you also have to specify in the javascript code that your image-size should be cover once it is changed based on the weather
@losbaltica i also had this problem while building my weather app
kat-mag
@kat-mag
Sep 04 2016 19:03
@LeCoquille you probably need to overwrite every property that <hr> can have, because that's what bootstrap is doing. Or you can use a <div> and create your own custom hr element.
r2d2
@UsamaHameed
Sep 04 2016 19:04
How do make square divs using flexbox? Those divs have no content so they just squish to a line
Joran de Haan
@LeCoquille
Sep 04 2016 19:05
@kat-mag i dont get it, it seems that when i insert an hr line, the color is white by default. cant seem to figure it out. could you take a quick look at my codepen?
Adam Pankowski
@losbaltica
Sep 04 2016 19:06
@2Irina2 thats interesting :D
Irina
@2Irina2
Sep 04 2016 19:07
@losbaltica yeah.. don't even ask me how much time i spent trying to figure it out :|
kat-mag
@kat-mag
Sep 04 2016 19:07
@LeCoquille I'll take a look
Adam Pankowski
@losbaltica
Sep 04 2016 19:07

@2Irina2 do you know how to at more than 1 attribute to id?

 $('.logo').css('background-image', 'url(' + backgroundImg[bgIndex] + ')', 
'background-size', 'cover');

coz when i do it like that i think i missing something

Joran de Haan
@LeCoquille
Sep 04 2016 19:08
@kat-mag thanks man!
Irina
@2Irina2
Sep 04 2016 19:08
Oh no you just write two $('.logo').css();s
CamperBot
@camperbot
Sep 04 2016 19:08
lecoquille sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @kat-mag |http://www.freecodecamp.com/kat-mag
Irina
@2Irina2
Sep 04 2016 19:09
@losbaltica one for background image and one for background size
Adam Pankowski
@losbaltica
Sep 04 2016 19:09
@2Irina2 ajj no magic trixs :D
Irina
@2Irina2
Sep 04 2016 19:10
@losbaltica sorry? :D
kat-mag
@kat-mag
Sep 04 2016 19:11
@LeCoquille border to none, background-color to black... and you can manipulate the thickness through the height
Adam Pankowski
@losbaltica
Sep 04 2016 19:12
@2Irina2 damit not working, when i add background-size: cover to my js code img disapear :D
Irina
@2Irina2
Sep 04 2016 19:13
@losbaltica well okay.. there's another way to do so
@losbaltica i think you should apply the .css function to te whole page, and not just to the p element with the class logo
Adam Pankowski
@losbaltica
Sep 04 2016 19:16
@2Irina2 i think theres a problem with my bootstraps
Irina
@2Irina2
Sep 04 2016 19:16
as in $('html').css("background-size", "cover");
@losbaltica at least that's how i did with mine... when it comes to background, i applied these adjustments directly to the html in the CSS section and when it came to changing the background according to the weather, i typed in $('html').css("background-size", "cover");
Adam Pankowski
@losbaltica
Sep 04 2016 19:17
@2Irina2 ok ill try :)
Irina
@2Irina2
Sep 04 2016 19:17
@losbaltica my logic is that.. you need the whole page to have the specific background and not just the p element
Adam Pankowski
@losbaltica
Sep 04 2016 19:21
@2Irina2 alright now is working!! :) i remove class and just add cover to whole body :)
@2Irina2 thx! for help ;)
CamperBot
@camperbot
Sep 04 2016 19:21
losbaltica sends brownie points to @2irina2 :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @2irina2 |http://www.freecodecamp.com/2irina2
Joran de Haan
@LeCoquille
Sep 04 2016 19:21
@kat-mag Yess, thanks kat-mag!
CamperBot
@camperbot
Sep 04 2016 19:21
lecoquille sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:warning: lecoquille already gave kat-mag points
Irina
@2Irina2
Sep 04 2016 19:21
@losbaltica great! :) no problem
CMRover
@CMRover
Sep 04 2016 19:28
Hi guys. I might need someone to explain to me how to do something within the tribute page project.
Also new here btw.
Michael Cavataio
@MCavataio
Sep 04 2016 19:34
Hey @CMRover what are you working on?
CMRover
@CMRover
Sep 04 2016 19:35
Um, I also posted my question on Help general but I guess it's ok if I post it here as well.
@CMRover
Essentially, what I'm trying to do is placing an image right on the border of a div.
I want that so I can blend the image's border with the div's border. They'll be of the same color.
What I can't figure out is how to place an element on the border of another element.
Sam
@ampersamd
Sep 04 2016 19:36
Using Bootstrap, can I make a well take the full width of the column it
it's placed in?
Having trouble doing so in my quote project.
Michael Cavataio
@MCavataio
Sep 04 2016 19:46
@CMRover are your working with elements that have positions of fixed or absolute?
Alexandro Pequeno
@Argestis
Sep 04 2016 19:50
What do you guys think? http://codepen.io/argestis/pen/xExBNz I still need to add some Jquery and fix the responsive screen sizes (;
Pranay Kumar
@pranaykumar389
Sep 04 2016 19:51
Hello Everybody,
Can any one help me out here below is my code. what is the mistake i'm doing here and why this isn't working?
    <div class="preloader" style="position:fixed;width:100%;height:100%;top:0;left:0;z-index:100000;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#fff;">
        <div style="width:200px;height:200px;position:absolute;left:50%;top:50%;background-position:center;margin:-100px 0 0 -100px;">
            <img src="images/load.gif" alt="loading..." width="100%"/>
        </div>
    </div>

    <div class="container">
        <h1>Hello </h1>
    </div>

    <script>
        $(document).ready(function () {
           $(window).load(function () {
            $('.preloader img').fadeOut();
            $('.preloader').fadeOut(1000);
           }); 
        });
    </script>
CMRover
@CMRover
Sep 04 2016 20:00
@MCavataio I figured it out but thanks anyway
CamperBot
@camperbot
Sep 04 2016 20:00
cmrover sends brownie points to @mcavataio :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @mcavataio |http://www.freecodecamp.com/mcavataio
CMRover
@CMRover
Sep 04 2016 20:01
I did it by setting the image's position to relative and then moving it -50px to the bottom
sfmajors373
@sfmajors373
Sep 04 2016 20:03
Hi guys! I am having issues with my Quote Generator button being not able to be pressed. When I first put it in, it was fine, but now, it doesn't work. I have reconfigured my functions several times to try different options, but I can't seem to figure out how to make my button work again. Can anyone look at it for a minute to see if you see a problem? https://codepen.io/sfmajors/pen/bwbPqG
Michael Cavataio
@MCavataio
Sep 04 2016 20:03
@CMRover ahh definitely seems like an abosolute or fixed issue any other questions let me know
Margaret
@Margaret2
Sep 04 2016 20:10
@sfmajors373 it's because you added the "active" class to your button. Remove that class and you will be able to click it again
sfmajors373
@sfmajors373
Sep 04 2016 20:13
@Margaret2 Thank you!!!
CamperBot
@camperbot
Sep 04 2016 20:13
sfmajors373 sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @margaret2 |http://www.freecodecamp.com/margaret2
jacobus-brogly
@jacobus-brogly
Sep 04 2016 20:19
@rudrapranaykumar can you post your code in jsfiddle?
and put link here?
sfmajors373
@sfmajors373
Sep 04 2016 20:19
Do you happen to know why it isn't printing the quote to the well when I push the button? Am I still missing parts that I need or do I have a part written incorrectly? (Sorry, I hate to be needy, but I have been trying to figure this out for a few days now)
Ken Haduch
@khaduch
Sep 04 2016 20:20
@sfmajors373 - one thing that appears to be a problem (perhaps not the only problem) you are not loading jQuery.js? But then after that $.backstretch is "not a function" is the error being reported?
sfmajors373
@sfmajors373
Sep 04 2016 20:22
@khaduch Crap, no, I had sorted out all of the ones that gave me the red exclamation point and now I am stuck trying to figure out what I have screwed up without its help, and I haven't been sure where to go with it.
Pranay Kumar
@pranaykumar389
Sep 04 2016 20:23
@jacobus-brogly Thank you for your reply.the problem got solved from the other group. :smile:
CamperBot
@camperbot
Sep 04 2016 20:23
rudrapranaykumar sends brownie points to @jacobus-brogly :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jacobus-brogly
Michael Cavataio
@MCavataio
Sep 04 2016 20:23
@sfmajors373 there's a couple of issues with the listeners that you have in place also
Ken Haduch
@khaduch
Sep 04 2016 20:23
@sfmajors373 - and you are using a variable quoteBtn that is not being set up anywhere?
sfmajors373
@sfmajors373
Sep 04 2016 20:25
@khaduch The listener said to use the element, so I put quoteBtn in as the id for the actual button, and then inserted that, is that not what it is looking for?
@khaduch I screwed that up actually, so never mind the quoteBtn, I named it different things in different places
Michael Cavataio
@MCavataio
Sep 04 2016 20:34
@sfmajors373 also looks like you set the wrong element here
  //target the text of the quote class
    $('.quote').text(randomQuote);
sfmajors373
@sfmajors373
Sep 04 2016 20:35
Thanks!
Ken Haduch
@khaduch
Sep 04 2016 20:35
@sfmajors373 - I saw that same thing - I got sidetracked on some other problems.
@sfmajors373 - you have to make sure to include the jquery.js library, if you haven't done that.
mjcreate
@mjcreate
Sep 04 2016 20:36
I have another codepen question - where's do I import a google font? DO I code it as a line on html (with the link property) or do I add it in settings somewhere?
sfmajors373
@sfmajors373
Sep 04 2016 20:37
@mjcreate I usually put it as my very first line in the html, but I don't know if that necessarily makes it best practice.
Ken Haduch
@khaduch
Sep 04 2016 20:38
@mjcreate - put it in the CSS external links settings on the CSS tab config box.
@mjcreate - for CodePen, that's the recommended way to do it.
mjcreate
@mjcreate
Sep 04 2016 20:41
@sfmajors373 @khaduch thanks!
CamperBot
@camperbot
Sep 04 2016 20:41
mjcreate sends brownie points to @sfmajors373 and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @sfmajors373 |http://www.freecodecamp.com/sfmajors373
:star2: 1624 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 04 2016 20:51
@mjcreate & @sfmajors373 - just for additional information - Codepen should not have anything in the HTML panel other than HTML elements - you should not have the <html>, <head>, <body> or <style>, or <script> tags - the CodePen template does the framework for the page, and the JS code and external libs should be in the JS config, same for the CSS - your custom code, and external CSS should be in the CSS config panel.
sfmajors373
@sfmajors373
Sep 04 2016 20:57
@khaduch Oh, Crap, I didn't know that. Does that mean all the things that I have written in the HTML part shouldn't be there or they can be there just not with those tags? <div> tags are ok?
And what is the difference between this Listener function: quoteBtn.addEventListener('click', getQuote); and this one: $( "#quoteBtn" ).click(function() { alert( getQuote()); I know one is jQuery and one isn't, but does one work for this project and one not? Is one better than the other? Do I have either formatted appropriately?
mjcreate
@mjcreate
Sep 04 2016 21:20
I have yet another question. So I have a div which is centered. Inside that I put a list. The text of the list is centered but teh bullets are way on the left? What did I do wrong? my thingy is at http://codepen.io/mjcreate/pen/YGPzdd
@sfmajors373 the div tags work ok on mine. I think just the head body etc shouldn't be there
mjcreate
@mjcreate
Sep 04 2016 21:26
Actually, I think I can figure this out. I need another div to enclose my list, don't I?
Irina
@2Irina2
Sep 04 2016 21:41
okay this may be a very dumb question.. but...
why doesnt the button have a top margin of 20px?
Norvin Burrus
@ndburrus
Sep 04 2016 21:56
Taylor
@admiraltaylor
Sep 04 2016 22:03
Hi friends, I'm working on making the javascript calculator, and while it's pretty ugly still, I have the button press -> screen functionality down. The next step is to make it actually calculate the functions people type in with the virtual buttons. Anyone have a hint about how to record that user input in a way that makes it actually do math?
I'm hoping for a hint, rather than the answer :D I didn't want to look at someone's solution
Irina
@2Irina2
Sep 04 2016 22:18
@admiraltaylor well, my way may not be the most efficient way, but here it goes
@admiraltaylor i came up with two variables and a boolean... the user can initially click lots of digits on the calculator and the big number gets stored in the first variable
once the user presses any operation button, it means that he is done with the first variable and he is about to enter the second number... the boolean changes its value and now, the second number is being stored in the second variable
you also have to memorize the operation button the user pressed.

you come up with all the functions.. as in

function add(a, b) {
    return a + b;
  }

  function substract(a, b) {
    return a - b;
  }

etc

Irina
@2Irina2
Sep 04 2016 22:24
and once the user presses =, you make the computer choose the right function based on the operation button the user pressed, and you replace the a and b parameters with variable one and two
i'm sure there could be a better way to do this but yeaahh :joy:
Daniel
@DanielMW34
Sep 04 2016 22:44

Hello Everyone. I'm having a little bit of trouble accessing the JSON / JSONP data returned from the TwitchTV API... anybody have some familiarity with this to provide troubleshooting help? Basically, I want to see if the "Steam": 'null' and then run some conditional logic (if/then). Problem is, I cannot seem to get a return value on this, not sure where I am going wrong. Not sure if it is in the API call itself or the way I am trying to access the data in my JavaScript. For instance... the first example of these API calls returns data in a browser, the second example does not however, when I actually use it in my JavaScript call, which should I do, first or second...

<!-- Example 1: --> https://api.twitch.tv/kraken/streams/freecodecamp?callback=xxx
<!-- Example 2: --> https://api.twitch.tv/kraken/streams/freecodecamp?callback=?

Furthermore, in this example of my JavaScript code (link to pen below) is there a different way I should be accessing the JSON data to determine whether stream='null'

$(document).ready(function () {
     var twitchUser = "freecodecamp";
      var API = "https://api.twitch.tv/kraken/streams/" + twitchUser + "?callback=xxx";
    $.getJSON(API, function(xxx) {
      $("#test1").html(xxx.stream);        

      });     
    });
Daniel
@DanielMW34
Sep 04 2016 22:53
This code is also not leaving me clear on whether I am getting my data.... perhaps the issue is correctly reading the JSON data...
$(document).ready(function() {
  var twitchUserArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var twitchUser = twitchUserArr[0];
    var API = "https://api.twitch.tv/kraken/streams/" + twitchUser + "?callback=?";
    $.getJSON(API, function(data) {
      if ((data.stream) === "null");
      $("#test1").html("stream is not active");        

      });     
    });
in this case, I know the ESL_SC2 is streaming data... yet, the conditional statement is returning as True
so I'm not clear where my error exists
mjcreate
@mjcreate
Sep 04 2016 23:00
thanks @ndburrus !
CamperBot
@camperbot
Sep 04 2016 23:00
mjcreate sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2111 | @ndburrus |http://www.freecodecamp.com/ndburrus
Lamine
@mlhamoudi
Sep 04 2016 23:00
Hello Guys, I just finished my Tribute Page, and I wanted your feedback: http://codepen.io/mlhamoudi/full/WGNJOO/
Cheers!
Ken Haduch
@khaduch
Sep 04 2016 23:01

@mjcreate - it has to do with the styling of unordered lists - if you want to "center" them, the best way is you're using Bootstrap, is to use the grid and do something like this (just off the top of my head)

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        <ul>
        </ul>
    </div>
    <div class="col-md-4">
    </div>
</div>

leaving the side divs empty, and you can even add a class to hide the side divs on a narrower screen. That puts the list in a center column, you just have to make sure that you account for 12 columns in your row.

Maybe using flexbox would be another way, but I've done something like this with the grid in Bootstrap.

P.S. I just looked at your project and it seems that is what you did... :)

mjcreate
@mjcreate
Sep 04 2016 23:05
@khaduch yes, I am trying to use the grid. I forgot how much fun it is to figure things out. My brain is getting a workout LOL. thanks!
CamperBot
@camperbot
Sep 04 2016 23:05
mjcreate sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1625 | @khaduch |http://www.freecodecamp.com/khaduch
Taylor
@admiraltaylor
Sep 04 2016 23:09
@2Irina2 thanks! this is a good idea. for some reason I thought there might have been a way to straight memorize the input as a function the way you might enter it into a console application...
CamperBot
@camperbot
Sep 04 2016 23:09
admiraltaylor sends brownie points to @2irina2 :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @2irina2 |http://www.freecodecamp.com/2irina2
Taylor
@admiraltaylor
Sep 04 2016 23:09
but I guess not!
tyl-er
@tyl-er
Sep 04 2016 23:17

Hey guys I have a CSS question. Working on the Wikipedia viewer. I want my search results to fill up (or lay on top of) the background image without spilling over at the bottom. Any ideas?

body {
background: #ccc;
}

.card {
width: 640px;
height: 360px;
margin-left: auto;
margin-right: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-image: url("http://www.celebrityreputation.com/wp-content/uploads/sites/37/2015/12/Wikipedia-Logo-on-Black2.jpg");
}

.searchBox {
width: auto;
height: auto;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

output {

width: 640px;
height: 360px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

http://codepen.io/tyl-er/pen/ALAyjq?editors=0100

Kevin Murphy
@kaym0
Sep 04 2016 23:22
Hey how can I write
OUtput.push((x[i+1]-x[i]) * 3600/s) in Ruby it keeps saying undefined method '-' and not reading the subtraction symbol
tyl-er
@tyl-er
Sep 04 2016 23:28
Never mind
Florencia
@flopywood
Sep 04 2016 23:39
@admiraltaylor Yes, I agree with @2Irina2 Try using pseudocode and figure out what actions to do if the user clicks a given button and then just use jQuery to create those actions like: $(".+").click(function()....
Ryan Apolinar
@ryanapolinar
Sep 04 2016 23:39
Trying to use an image for the background via CSS. My CSS file is located in Web/css/style.css and my image is in Web/images/image.png. How do I access it so I can use it with background-image: url("link goes here")?
Gary Siu
@GarySiu
Sep 04 2016 23:39
@kaym0 What is the value of x[i+1]? Also why are you asking Ruby questions in a frontend help channel for a JS bootcamp?
bkd705
@bkd705
Sep 04 2016 23:40
url('../images/image.png')
../ goes up a folder
./ goes to the root directory
Gary Siu
@GarySiu
Sep 04 2016 23:40
@bkd705 I thought ./ would be current folder?
Florencia
@flopywood
Sep 04 2016 23:41
@ryanapolinar it's much easier to create one IMAGES folder and copy all the iamges you want to use to that folder so you don't get lost accessing different folders
bkd705
@bkd705
Sep 04 2016 23:41
no ./ goes to the root file
Ryan Apolinar
@ryanapolinar
Sep 04 2016 23:41
@bkd705 thank you very much, that worked!
CamperBot
@camperbot
Sep 04 2016 23:41
ryanapolinar sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @bkd705 |http://www.freecodecamp.com/bkd705
bkd705
@bkd705
Sep 04 2016 23:41
root folder**
Ryan Apolinar
@ryanapolinar
Sep 04 2016 23:41
@flopywood yeah I have all the images there, just trying to access it from the CSS
Florencia
@flopywood
Sep 04 2016 23:42
@ryanapolinar oh then it's background-image: url("....");
Gary Siu
@GarySiu
Sep 04 2016 23:42
@bkd705 Is this css specific? On my file system / goes to root and ./ goes to current?
I guess I'll make a quick test page :/
Florencia
@flopywood
Sep 04 2016 23:47
@admiraltaylor i would actually simplify it by using just one button for all the keys and call that to action like this: $('.btn').click(function() {
onScreen += this.value;
@admiraltaylor this way you save yourself of all the logic of the conditional statements because if you give the buttons a value attribute of "+", etc,etc,etc you then get the element by ID and indicate what action to perform