These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Dec 2016
Adam
@Adnosk
Dec 11 2016 00:00
I am on the Personal Portfolio Webpage assignment but i am unsure - I can do it just by using bootstrap and some css tinkering without any jQuery. Should I use jQuery? I looked for a sec at the given project code and thats really complicated compared to mine and uses a lot of js
soccer1996
@soccer1996
Dec 11 2016 00:11
hey can anyone tell me is the tribute page the last thing that freeCodeCamp has?
Johnny
@JohnnyBizzel
Dec 11 2016 00:27
@soccer1996 What do you mean?
@Adnosk You can use bootstrap without jQuery yes.
soccer1996
@soccer1996
Dec 11 2016 00:28
Is there anything else that it has you do? Cause im a beginner and was hoping for more projects like the tribute page. @JohnnyBizzel
Johnny
@JohnnyBizzel
Dec 11 2016 00:28
@soccer1996 All the front end projects require some type of page styling.
Gabi
@JJcreated
Dec 11 2016 00:35
@Bazill03 yeah, but wasnt i supposed to learn that in the lessons, they taught nothing of what i needed to know to get these challenges done
@Bazill03 like diddly squat
like if i need to go on codecademy to find out how to do an FCC challenge, then why wouldnt i just, well, stay on codecademy
Franco Rufo
@francorufo
Dec 11 2016 00:56

Hello people, i'm doing my twitch app and I have a container where i'll append all streamers. I am wondering how to fix so that when i scroll it doesn't go over my navbar and make the navbar-buttons unclickable.

http://codepen.io/franorufo/full/ZBoyNm/

emamadordev
@emamadordev
Dec 11 2016 02:24
@francorufo z-index the navbar
my guess though
@francorufo add this to the .container z-index: -1;
emamadordev
@emamadordev
Dec 11 2016 02:32

Can I get some feedback on my pomodoro project:
http://codepen.io/emmanuelamador/full/GNdrVr/

I just finished it.

Ken Haduch
@khaduch
Dec 11 2016 02:51
@emamador - I set both time counts to 0 minutes and started the clock. It switch to counting down a negative break time after a few seconds.
The "+" and "-" Buttons could be a little larger - maybe just bump up the font size a little? And they are a little hard to read and notice up there on top. No sound was played at the end of the Session time. Or the break time. I like that the timer went back to the session after the break time counted down. And I like the styling of the tomato clock and the responsive behavior seemed to be good. Just a few tweaks, if you'd like to make them. The biggest one being the 0 minute behavior...
Ken Haduch
@khaduch
Dec 11 2016 02:57
@emamador - even though you seem to have it working, another thing that would make it easier to code is to keep the count in seconds only, and just convert to mm:ss for the output. Just a helpful hint...
Franco Rufo
@francorufo
Dec 11 2016 02:58

http://codepen.io/franorufo/pen/ZBoyNm?editors=0002

I am having troubles with my javascript on the twitch app, My for loop is not going through my array normally. Somestimes array[0] is where array[8] should be. I've looked through my code 20 times..

@emamador thanks btw!
CamperBot
@camperbot
Dec 11 2016 02:58
francorufo sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @emamador |http://www.freecodecamp.com/emamador
BLOOGa
@BLOOGa
Dec 11 2016 03:08

https://codepen.io/BLOOGa/pen/xRzVjL/

Anybody know why my smooth scrolling isn't working?

emamadordev
@emamadordev
Dec 11 2016 03:13
@khaduch wow! thanks for the feedback. You gave details and made some good points. thanks. I thought about adding a sound. totally forgot about that. And I didn't notice the negative count when break and session were set at zero. thanks for bringing that to my attention. :smile:
CamperBot
@camperbot
Dec 11 2016 03:13
emamador sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2078 | @khaduch |http://www.freecodecamp.com/khaduch
emamadordev
@emamadordev
Dec 11 2016 03:14
@francorufo you're welcome.
Ken Haduch
@khaduch
Dec 11 2016 03:14
@francorufo - It looks like @emamador 's suggestion of putting the z-index: -1; on the container should work for your navbar issue.
Your "for loop" issue is probably related to the fact that the requests that you are making are asynchronous, so they are completing in whatever order the server can handle the request and return the data to you. There is no guarantee that they will be returned in the same order that your requests were issued. You can try to implement some other method of tracking the requests and ordering them as you wish, or just live with that randomness.
Franco Rufo
@francorufo
Dec 11 2016 03:17
@khaduch oh okay! that explains a lot. I was a few minutes away from ripping my hair out xD
@khaduch thank you
Ken Haduch
@khaduch
Dec 11 2016 03:17
@francorufo - but I am not seeing any results in the screen for players, just a javascript error in the console (Chrome on windows). Just tried on firefox, and no results there, either?
CamperBot
@camperbot
Dec 11 2016 03:17
francorufo sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2079 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Dec 11 2016 03:19
@francorufo I guess that you're not outputting to the screen yet, so forget my second comment... I see information in console.log
Franco Rufo
@francorufo
Dec 11 2016 03:19
@khaduch oh yeah, just console atm
Nausicaa33
@Nausicaa33
Dec 11 2016 03:31
Does anybody know what you're supposed to do in the "stand in Line" lesson besides use the ".push()" and ".shift()" functions?
Ken Haduch
@khaduch
Dec 11 2016 03:35
@Nausicaa33 - yes... what have you tried so far?
Michael Duh
@mikaeloduh
Dec 11 2016 03:38
Hello, can anyone tell why this http://codepen.io/mikaeloduh/pen/mOjoxg does not function on CodePen?
Ey Rics
@angel92004
Dec 11 2016 03:38
hi guys! im just curious, in the actual working environment do you guys still use templates or you do it from scratch?
Ken Haduch
@khaduch
Dec 11 2016 03:39
@mikaeloduh - go to your JS panel config box and add jQuery.js to your external javascript resources.
Michael Duh
@mikaeloduh
Dec 11 2016 03:40
there it go, thank you!
Ken Haduch
@khaduch
Dec 11 2016 03:41
@angel92004 - templates are handy - many code editors provide one just with a shortcut string, for example "html" will expand to the template. I guess doing it from scratch would be good, if you can remember everything (paths for jquery, bootstrap, etc.)
Ey Rics
@angel92004
Dec 11 2016 03:45
@khaduch i'm an aspiring web developer so i'm kinda curious with a lot of things when you're already out there.
Ken Haduch
@khaduch
Dec 11 2016 03:56
@angel92004 - good to try and figure these things out, for sure! I'm not really a web developer, but I've been dabbling in it and trying to learn, so I've seen a few of these things in different environments. Some of the other courses that I've taken the instructor uses and editor like "Sublime Text 2", if you open an HTML file there and just type "html" followed by TAB key, it expands to a basic template. I rely on having a template of my own that I use and just include, or have the jquery, and other lib links already set up there for myself.
Aida Woldegiorgis
@aow003
Dec 11 2016 04:06
I am trying to add a background image to my portfolio but it is not popping up
I am trying to understand if there is something wrong with the url that makes it not pop up in the background
damn is anyone online right now?
Berenice
@Berelarsenp
Dec 11 2016 04:10
Hi everyone! I've just finished the tribute page. Does somebody knows why I can't change colors in the <h> and <p> elements?
https://codepen.io/Berelarsenp/pen/dOjaXO
Aida Woldegiorgis
@aow003
Dec 11 2016 04:12
try adding the class text-color:(color) within your elements
class= "text-color:red" or whatever color
Ey Rics
@angel92004
Dec 11 2016 04:13
@khaduch it makes the work faster when you use template right? then just figure out and customize the stuff you need to change.
Aida Woldegiorgis
@aow003
Dec 11 2016 04:14
or create a style element like this
<style>
div
{color:white;}

</style>
you don't have to use white for your color but that is what I did to make all of the text white for my tribute page
Ey Rics
@angel92004
Dec 11 2016 04:18
@Berelarsenp
@Berelarsenp try adding this in your css
p {
  margin-left: 50px;
  color: red;
}
Ken Haduch
@khaduch
Dec 11 2016 04:32
@angel92004 - I would agree with that, you can get things going more quickly with a good template, or a few other things you can include that have settings for other common libraries, kind of like the stuff that codepen does for you with shortcuts.
Josh Hunter
@Phyrrax
Dec 11 2016 04:34
Hey there, I'm having some trouble with my profile page. My list items are not showing up on the navbar. Any ideas? Heres the codepen: http://codepen.io/Jhunter/pen/QGBoEw?editors=1100
Ken Haduch
@khaduch
Dec 11 2016 04:39

@Berelarsenp - just add style rules in your CSS panel for the elements that you want to change:

h1, h2 {
  color: green;
}

For example, to change the text color for h1 and h2 elements to green.

Although, because you are using the jumbotron, it has a higher priority setting for the <h1> elements, so it might not change that with this setting. So you could override that by putting the same type of declaration in your CSS panel:

.jumbotron h1 {
  color: red;
}

Would change it to red.

TheDadinomicon
@TheDadinomicon
Dec 11 2016 04:55
i need some help here im trying to stack some background images on this pen, i used css for the first one and i hoped it would work for the second one to format my "portfolio" section the same way. i also came across some info that said i should not use #id selectors in css, so how else can i acheive the outcome of stacking these images for my page? if someone has the time please checkout my code at http://codepen.io/TheDadinomicon/pen/rWrRGw?editors=1100
@Phyrrax i beleive that the navbar collapse belongs inside a <button> element and also requires <span> elements for the look one moment i have a video i used earlier when i made the same attempt
Ken Haduch
@khaduch
Dec 11 2016 04:59
@Phyrrax - I think that it is thinking that your navbar is collapsed, so those are hidden... If you remove the class collapse from your <div class="nav-collapse collapse navbar-responsive-collapse"> that will make them come back. But I think that you have just not correctly implemented the bootstrap navbar.
TheDadinomicon
@TheDadinomicon
Dec 11 2016 05:01
elisa1403
@elisa1403
Dec 11 2016 05:01
Hi guys, I've just completed my Tribute Page, let me know what you think. First time creating any kind of page
https://codepen.io/elisa1403/pen/bBLLwV
TheDadinomicon
@TheDadinomicon
Dec 11 2016 05:04
@elisa1403 looks nice! now prepare for some real frustration!
Ken Haduch
@khaduch
Dec 11 2016 05:06
@elisa1403 - looks pretty good, although that small, fine font is a little hard to read with all of that text. But other than that, a very nice job on that page! You might want to run your text through a spell check - I see a couple typos... Like "Graguated "
Josh Hunter
@Phyrrax
Dec 11 2016 05:06
Awesome thanks @TheDadinomicon @khaduch I appreciate it.
CamperBot
@camperbot
Dec 11 2016 05:06
phyrrax sends brownie points to @thedadinomicon and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @thedadinomicon |http://www.freecodecamp.com/thedadinomicon
:star2: 2081 | @khaduch |http://www.freecodecamp.com/khaduch
Michael Karpinski
@karpimpski
Dec 11 2016 05:25
http://codepen.io/karpimpski/pen/xRzZoO finished up my Leaderboard project! very simple design and my first time using Ajax without jQuery :P tell me what you think!
milesaylward
@milesaylward
Dec 11 2016 05:33
Hey guys who've completed advanced frontend projects. just opened up the freecodecamp JS calculator and tested it to see how it functions and in the directions a user story is: User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output. but an input of 8+6*9 returns 126 which is correct if we're talking order how i entered it but mathematically incorrect should I report bug or am i misreading?
how do I create a pageOne class that will allow me to separate sections on my website/code
milesaylward
@milesaylward
Dec 11 2016 05:49
@aow003 are you trying to add a scrollspy like in the demo or a link to a new page because codepen doesnt support multiple pages which is why the challenge is shown with a navbar that causes the page to scroll to other sections
Ey Rics
@angel92004
Dec 11 2016 06:00
how can i make my background fit to the screen https://codepen.io/angel392004/pen/gLXwWN
Michael Karpinski
@karpimpski
Dec 11 2016 06:04
if anybody is skeptical about React being much faster than vanilla JS like I was, check this out. here's my React code: http://codepen.io/karpimpski/pen/xRzZoO
and here's my vanilla code: http://codepen.io/karpimpski/pen/vyaMJO
I vastly prefer writing vanilla code to React so I wrote the closest thing to a vanilla equivalent that I could. I'm sure that it could be written in a more efficient way, but the React version is noticeably faster, even for a pretty small app like this one. definitely worth learning
milesaylward
@milesaylward
Dec 11 2016 06:11
@karpimpski a buddy of mine has told me react is definitely the way to go when building apps, I see you're on to the react challenges have you any answer to my question above?
It was about the advanced front end challenges
Michael Karpinski
@karpimpski
Dec 11 2016 06:14
@milesaylward how are you doing the math?
or do you mean the calculator FCC has up? if that's the output for their calculator then that's definitely a bug
@milesaylward I'm not sure how they did it. and I did it a WHILE ago, so I'm not too sure about whether or not I did it in the most effecient way, but I used Javascript's eval() method for my calculator and that returns the correct answer for your specific case
milesaylward
@milesaylward
Dec 11 2016 06:17
I plugged in the numbers as 8+6*9 expecting the calculator to evaluate multiplication before addition but instead it added the first numbers then multiplied them to give 126 if they simply want it to evaluate the way its entered its correct but if they want if evaluated in adherence to the order of ops it should return 62
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 06:17
@angel92004 Your background-image is vertically smaller
you can try this:
background-size: cover;
  background-position: center;
  background-size:100%;
  background-repeat: no-repeat;
Michael Karpinski
@karpimpski
Dec 11 2016 06:18
I'm gonna take a peek at their code and see how they have it set up. imo using eval is definitely the way to go for this project and that returns the right answer @milesaylward
ahm3dhany
@ahm3dhany
Dec 11 2016 06:22
i have a propblem
on "Profile Lookup"
I got "TypeError: cannot find the property 'likes' of undefined"
could any one help
milesaylward
@milesaylward
Dec 11 2016 06:22
share code @ahm3dhany
Michael Karpinski
@karpimpski
Dec 11 2016 06:23
@milesaylward I THINK based on the way they have it set up is that the code updates the answer every time you execute an operation, like an old school calculator. so it would see 8 + 6, and then as soon as you hit the * button it evaluates that as 14 and then multiplies 14 by whatever comes next
I only took a quick look because I'm working on a project, but I wouldn't necessarily classify that as a bug but more of a different way of doing things and a lack of visualization for that idea (like how old school calculators would show 14 right after you hit the multiply button)
milesaylward
@milesaylward
Dec 11 2016 06:25
Okay so now I guess I have to decide if I'll follow their route or decide to only evaluate the answer once the person hits the equals sign so it evaluates mathematically. I was going to peak at their code but I figured someone here might have a quick answer thank @karpimpski
CamperBot
@camperbot
Dec 11 2016 06:25
milesaylward sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @karpimpski |http://www.freecodecamp.com/karpimpski
Michael Karpinski
@karpimpski
Dec 11 2016 06:28
@milesaylward my personal preference is a traditional calculator, but that's all it is with this kind of stuff. as long as it works, it's completely up to you how you want to implement it! good luck :)
by traditional I mean new traditional, not the way FCC did it
Zachary
@Bazill03
Dec 11 2016 07:33
@bitcoinabdi Sorry, I missed your message!
Adrian Ferrar
@aferrar
Dec 11 2016 07:47
hello everyone, just finished my first major cleanup of my portfolio website and would love to hear feedback and constructive criticism from the community. Any comments are much appreciated! http://aferrar.github.io/
Purcea Robert
@RobertPurcea
Dec 11 2016 07:59
hey, let's say I have a sound on my computer(locally, not online) and I want to use it on a project. How do i do that?
Sorin Ruse
@sorinr
Dec 11 2016 08:05
@Robertb4 you can't link it. must upload it somewhere
Sorin Ruse
@sorinr
Dec 11 2016 08:17
@aferrar i would wrap into the menus a links also the imgs so all block will be clickable
ambat25
@ambat25
Dec 11 2016 08:22
@Robertb4 try using audio tag and the src links to the path of the audio file
Purcea Robert
@RobertPurcea
Dec 11 2016 08:34
I have this sound, uploaded, free
How do I turn this into an MP3 like the ones FCC give us in the Simon Project?
Uzair Ali
@uajkhan
Dec 11 2016 08:41
http://codepen.io/uajkhan/pen/rWKXVZ?editors=1100
I have a problem
the footer in my pen is not taking the full area on small screens
it's a border lik thing
Zpanda11
@Zpanda11
Dec 11 2016 08:49
guys how do i add subtle pattern to my background in CSS
i have it downloading and its called old_map.png
Uzair Ali
@uajkhan
Dec 11 2016 08:51
@Zpanda11 background-image
in css
Sorin Ruse
@sorinr
Dec 11 2016 08:53
@uajkhan try to add overflow-x: hidden; to the html {} in css
Adrian Ferrar
@aferrar
Dec 11 2016 08:54
@sorinr thanks! just added it in. great suggestion
CamperBot
@camperbot
Dec 11 2016 08:54
aferrar sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 933 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 11 2016 08:55
@aferrar welcome
Zpanda11
@Zpanda11
Dec 11 2016 08:55
@uajkhan i am on code pen and i wrote body{ background-image:/img/old_man.png;}
Uzair Ali
@uajkhan
Dec 11 2016 08:55
@sorinr it added another scroll bar
Zpanda11
@Zpanda11
Dec 11 2016 08:55
and its not working
Uzair Ali
@uajkhan
Dec 11 2016 08:56
@Zpanda11 you need to upload it somewhere and add the link I guess
Zpanda11
@Zpanda11
Dec 11 2016 08:56
oh i see, i'll google it
Sorin Ruse
@sorinr
Dec 11 2016 08:56
@uajkhan where?
Uzair Ali
@uajkhan
Dec 11 2016 08:57
@sorinr inside the footer
@sorinr and I added overflow-x: hidden;to the footer too
Zpanda11
@Zpanda11
Dec 11 2016 08:57
if i get a link what would the code be in the body tag ?
Uzair Ali
@uajkhan
Dec 11 2016 08:59
@uajkhan added to body tag and it had no affect
SabarJH
@SabarJH
Dec 11 2016 08:59
hello campers,
how to make an img on the center of page?
i've got problem to center the img when using img-responsive.
Uzair Ali
@uajkhan
Dec 11 2016 08:59
@Zpanda11 body{
background-image: url("");
}
@SabarJH .thumbnail
@SabarJH center-text works best for me :P
Uzair Ali
@uajkhan
Dec 11 2016 09:05
@sorinr duddee ?
Zpanda11
@Zpanda11
Dec 11 2016 09:15
Guys i finished my https://codepen.io/Zpanda11/pen/YpjJNV but when i opened it on a phone the information where all centered like each sentence 2 letters in the middle? how do i fix it with bootstrap
SabarJH
@SabarJH
Dec 11 2016 09:15
@uajkhan i nest img element on anchor element.
if i delete img-responsive class from img, text-center work well.
but when i apply img-responsive, text-center didn't work.
_
ambat25
@ambat25
Dec 11 2016 09:15
@Robertb4 that's the link to the site not the sound
Uzair Ali
@uajkhan
Dec 11 2016 09:17
@SabarJH center-block try this
Zpanda11
@Zpanda11
Dec 11 2016 09:17
i set the margins manually since the bootstrap center fluid was looking too wide on desktop
ambat25
@ambat25
Dec 11 2016 09:27
@SabarJH try margin left and right to auto
Sorin Ruse
@sorinr
Dec 11 2016 09:29
@uajkhan been away. whats the problem?
Uzair Ali
@uajkhan
Dec 11 2016 09:45
@sorinr SEE my footer
@sorinr the footer gets a border on smaller resolution
I don't want that and have no clue why is that happening
@sorinr no help needed now
Sorin Ruse
@sorinr
Dec 11 2016 09:50
@uajkhan ok . here my example for the horizontal scrollbar issue
Uzair Ali
@uajkhan
Dec 11 2016 09:51
dude
@sorinr i used overflow: auto; but I am getting a scrollbar in the footer
I don't want that
@sorinr not the horizontal one the vertical one in footer is the problem
Sorin Ruse
@sorinr
Dec 11 2016 09:55
@uajkhan there is additional scroll in the footer other then the page scroll bar for me
Uzair Ali
@uajkhan
Dec 11 2016 09:55
@sorinr and what did you change in the example pen ?
@sorinr yes those are the problems
@sorinr one is vertical and one is horizontal
Sorin Ruse
@sorinr
Dec 11 2016 09:57
@uajkhan is it also in my example? the vertical one its the page scroll bar
Uzair Ali
@uajkhan
Dec 11 2016 09:59
@sorinr no there isn't one in your example but if I make the width smaller on your one the columns go down and make lines appear
let me make a screenshot to how you
Sorin Ruse
@sorinr
Dec 11 2016 09:59
@uajkhan you mean a 15px gray line between cols in the footer?
Uzair Ali
@uajkhan
Dec 11 2016 10:01
@sorinr yes
Sorin Ruse
@sorinr
Dec 11 2016 10:01
@uajkhan bootstrap ul has an implicit margin-bottom of 15px. you have to override that
Boris Yordanov
@borisyordanov
Dec 11 2016 10:01
can anyone tell me why this is misaligned http://codepen.io/boris-yordanov/pen/yVqWXW
Uzair Ali
@uajkhan
Dec 11 2016 10:02
@sorinr how can I upload a picture here ?
Boris Yordanov
@borisyordanov
Dec 11 2016 10:02
it looks fine if i open it on my desktop, but it doesn't look right in codepen
@uajkhan drag and drop in the chat
Sorin Ruse
@sorinr
Dec 11 2016 10:02
@uajkhan just drag and drop it. but you can pm it if u want
Uzair Ali
@uajkhan
Dec 11 2016 10:03
@sorinr i'll pm you
SabarJH
@SabarJH
Dec 11 2016 10:12
@ambat25 it worked.
thank you :+1:
CamperBot
@camperbot
Dec 11 2016 10:12
sabarjh sends brownie points to @ambat25 :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @ambat25 |http://www.freecodecamp.com/ambat25
Purcea Robert
@RobertPurcea
Dec 11 2016 10:17
@ambat25 thanks a lot man
CamperBot
@camperbot
Dec 11 2016 10:17
robertb4 sends brownie points to @ambat25 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @ambat25 |http://www.freecodecamp.com/ambat25
ambat25
@ambat25
Dec 11 2016 10:19
Glad I can help @Robertb4
And @SabarJH
Almaz Nasibullin
@AlmazN
Dec 11 2016 11:29
hey guys. question about node + jquery installation here. im using 'npm install jquery' the corresponding folder appears in the directory node_modules, but should jquery appear as Dependence in package.json? and if so, why it may not appear in package.json?
alpox
@alpox
Dec 11 2016 11:55
@AlmazN It appears there only if you use --save:
npm install --save jquery
There is also --save-dev which makes this dependency a development dependency only in package.json
Luke Sallmen
@LukeSallmen
Dec 11 2016 11:55
Are there rules about posting outside links? I'm doing the coding "tribute page" challenge and I'm curious about how to make an effect from another page on mine
alpox
@alpox
Dec 11 2016 11:56
@LukeSallmen posting outside links? Do you mean if there are rules about if you are allowed to reference anothers website?
Luke Sallmen
@LukeSallmen
Dec 11 2016 11:59
Ah, never mind, silly question. So this page http://emperor.works/ has its layout split into four different "frames" (for lack of a better word) - in which one frame takes up my entire display, and scrolling down on my mouse takes me down to the next frame. I want to do the same thing for the biographical "Tribute" page that I'm making - are there any function in CSS/Bootstrap/whatever to do this?
alpox
@alpox
Dec 11 2016 12:04
@LukeSallmen You can create divs after each other, each with css height: 100vh
And for the scrolling, there are surely some javascript libraries
Maybe the code for doing the scrolling yourself wouldn't be all too hard
With jquery ofc.
Luke Sallmen
@LukeSallmen
Dec 11 2016 12:08
Ah. Separating it into divs makes a lot of sense, but what does that height: 100vh do? Is 100vh some sort of unit or percentage? And thanks, I will try the scrolling code once I do the first part.
@alpox
alpox
@alpox
Dec 11 2016 12:09
@LukeSallmen it means "from visible height"
@LukeSallmen So that is 100% of the visible height - means exactly the height of your browsers webframe
So it fits
Luke Sallmen
@LukeSallmen
Dec 11 2016 12:13
thank you so much!
alpox
@alpox
Dec 11 2016 12:21
@LukeSallmen Np :-)
Anabel
@AnabelSalomone
Dec 11 2016 12:30
Hello! I need help with the footer of my page. I want it to stay at the very bottom of the page, but all the solutions I've found don't work (footer goes floating all arounf the page xD)
alpox
@alpox
Dec 11 2016 12:31
@LukeSallmen Btw. you may want to read this though: https://envato.com/blog/scroll-hijacking/
Manipulating the scroll behaviour is not considered to be good practice
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 12:32
@AnabelSalomone Your footer looks fine to me
alpox
@alpox
Dec 11 2016 12:34
@AnabelSalomone
footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: monospace;
  font-size: 0.9em;
}
Luke Sallmen
@LukeSallmen
Dec 11 2016 12:36
@alpox I read it, but my design will hopefully appear a lot like the one that the author actually said wasn't too bad (fixed at one panel per scroll down), so it doesn't lose too much in terms of UX (hopefully!!)
Anabel
@AnabelSalomone
Dec 11 2016 12:37
@alpox thanks! :) but now it overlaps with the other sections on xs screens :(
CamperBot
@camperbot
Dec 11 2016 12:37
anabelsalomone sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 684 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 11 2016 12:37
@AnabelSalomone Well that is the tradeoff if you want it to stay there :-)
You may want to find another way then
Anabel
@AnabelSalomone
Dec 11 2016 12:40
Haha ok, I'll try to rearrange things on xs screens so it doesn't happen :)
This may be a way to do it
Set background to white of the footer, width to 100%, add a wrapper to the other page content and give this one a padding-bottom to make the content scrollable enough to see it all
Anabel
@AnabelSalomone
Dec 11 2016 12:45
@alpox you're the best! :clap:
alpox
@alpox
Dec 11 2016 12:47
@AnabelSalomone You're welcome :-)
Leigh Hobson
@leighhobson89
Dec 11 2016 13:07
i have some code i would like checking, basic html bootstrap marup. anyone can answer me why its not giving the desired result? i will send you the code via pm if thats how its mean to be done or i can post it here

```<div class="navbar-static-top navbar-inverse"><!-- open navbar -->
<div class="container"><!-- open inner container navbar -->
<a class="navbar-brand" href="#">LeighHobson
</a>

  <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button> 

  <div class="collapse navbar-collapse navHeaderCollapse"><!-- open navbar menu items div -->
<ul class="nav navbar-nav navbar-right">

  <li class="active"><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#showcase">ShowCase</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
  </div><!-- close navbar menu items div -->
  </div><!-- close inner navbar container -->

</div><!-- close navbar -->```

when shrunk, the button appears but wont show the menu items when it is tapped, why?
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:12
did you include jquery and bootstrap JS files?
Leigh Hobson
@leighhobson89
Dec 11 2016 13:13
perhaps not everything. the boostrap markup all works on my page but do i need jQuery for this functionality too?
what would the link be to add in? I am still training on this
Leigh Hobson
@leighhobson89
Dec 11 2016 13:21
i have added the jquery resources by clicking on them in codepen under settings. this doesnt make the button work. any other advice please?
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:24
add jquery first and then the bootstrap @leighhobson89
Leigh Hobson
@leighhobson89
Dec 11 2016 13:28
thats great, it appears now thanks! Nw the problem is, when in desktop mode and the navbar is not collapsed, clicking an option will navigate to a link and make the navbar item active. doing this on the items that appear from pressing the button does make the item active, but the link doesnt work. why could that be?
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:31
why the navbar will be collapsed on desktop?
can you share codepen link @leighhobson89
Leigh Hobson
@leighhobson89
Dec 11 2016 13:33
you misunderstood my bad explanantion. it works perfectly on desktop. when it collapses on mobile, the links dont work now. they do appear, they just dont navigate when tapped
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:33
did you add the same "href" attribute to the collapsible list items as well?
Leigh Hobson
@leighhobson89
Dec 11 2016 13:34
no, i thought the data-target would take care of it. i will try tha t thanks
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:34
ok
Leigh Hobson
@leighhobson89
Dec 11 2016 13:37
i dont understand how to do this - the data-target attribute points the button to the navbar <ul> with that class name. So the "href" will be inherited from there, no?
Arvind Natarajan
@Arvin6
Dec 11 2016 13:38
Eh. @leighhobson89 Its still not clear enough
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:39
:(
Arvind Natarajan
@Arvin6
Dec 11 2016 13:39
It'll be better if you can send the link here so we check the code and let you know
Leigh Hobson
@leighhobson89
Dec 11 2016 13:39
Ok, this is the code, the links work when on a browser where it is not collapsed. if it is collapsed and u tap the button, the links dont work. the code is here
<div class="navbar-static-top navbar-inverse"><!-- open navbar -->
    <div class="container"><!-- open inner container navbar -->
      <a class="navbar-brand" href="#">LeighHobson
      </a>

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> 

      <div class="collapse navbar-collapse navHeaderCollapse"><!-- open navbar menu items div -->
    <ul class="nav navbar-nav navbar-right">

      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#showcase">ShowCase</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
      </div><!-- close navbar menu items div -->
      </div><!-- close inner navbar container -->
  </div><!-- close navbar -->
hope that is clearer
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:41
remove the period in data-target
Leigh Hobson
@leighhobson89
Dec 11 2016 13:43
that needs to be there. - the menu items appear fine when the button is tapped
Arvind Natarajan
@Arvin6
Dec 11 2016 13:43
@leighhobson89 I would suggest you to use an ID based approach
Leigh Hobson
@leighhobson89
Dec 11 2016 13:43
they just dont navigate to the links when you press them
yet they do when accessing them the normal way without the button ie on desktop
Arvind Natarajan
@Arvin6
Dec 11 2016 13:43
Try giving that div an id
Then replace the navbarheadercollapse with that ID
Leigh Hobson
@leighhobson89
Dec 11 2016 13:44
ojk
ok
Arvind Natarajan
@Arvin6
Dec 11 2016 13:44
It should work
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:44
can you share your codepen or any other link? and i have never seen data-target attribute with a period. Either you givethe ID attribute or class name there without # or . respectively
Arvind Natarajan
@Arvin6
Dec 11 2016 13:45
@NitinNair89 Can we mention a class name without a "."
?
I think we cant
Leigh Hobson
@leighhobson89
Dec 11 2016 13:45
https://www.youtube.com/watch?v=qpWlaOeGZ_4 - this was the tutorial i used that shows to use the "."
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:45
@Arvin6 you can unless you are calling that class name inside the CSS
Leigh Hobson
@leighhobson89
Dec 11 2016 13:48
thanks but no joy. i gave the div an ID and then pointed to that id with data-target"#<idname>" - is this right?
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:49
nope
Arvind Natarajan
@Arvin6
Dec 11 2016 13:49
datat-target="#id"
Joseph Padgett
@Jspadgett82
Dec 11 2016 13:50
Hey folks. Does anyone have any links I can read about @include in CSS? Every way I try to search it, it always keeps coming up with @import and doesn’t talk about @include.
Leigh Hobson
@leighhobson89
Dec 11 2016 13:51
yes, thats what i meant - i expressed it wrong in the generic way above, sorry
it now works, and interestingly it was because i had missed the 'collapsed' class from the button tag
i spotted it in the link you sent me @NitinNair89 so thanks
CamperBot
@camperbot
Dec 11 2016 13:52
leighhobson89 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Leigh Hobson
@leighhobson89
Dec 11 2016 13:53
and @Arvin6 i have used your id approach, and i guess it is better practice this way, so thanks
CamperBot
@camperbot
Dec 11 2016 13:53
leighhobson89 sends brownie points to @arvin6 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @arvin6 |http://www.freecodecamp.com/arvin6
Arvind Natarajan
@Arvin6
Dec 11 2016 13:54
@leighhobson89 Anytime :)
Nitin Chandran Nair
@NitinNair89
Dec 11 2016 13:55
:)
Leigh Hobson
@leighhobson89
Dec 11 2016 13:56
oh no. it works on firefox when resized to collapse but i tried it on my physical iphone and the result is different. it wont navigate the the anchors in my links
so i think its a compatibility issue with safari maybe
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 13:59
Hello guys, can I ask some ReactJS questions here?
Adel
@AdelMahjoub
Dec 11 2016 14:02
@Zooll8 I guess you can
Arvind Natarajan
@Arvin6
Dec 11 2016 14:03
@leighhobson89 Might be.
Google for the compatibility issues. You should be able to make it work with minimal effort.
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 14:04
@AdelMahjoub Thanks, I wanted to ask qeustion how to make recipe box application, because when I see at recipe box projects from other people they are using such techniques and react syntax that I can't understand. It's like too big leap from just api leaderboards to recipe box. Can I somewhere find any tutorials that can help with this
CamperBot
@camperbot
Dec 11 2016 14:04
zooll8 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 14:05
@AdelMahjoub I don't want like to ctrl-c/ctrl-v, because I want to figure this out by myself
Uzair Ali
@uajkhan
Dec 11 2016 14:06
http://codepen.io/uajkhan/pen/rWKXVZ This is my project
some feedback would be nice
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 14:06
@uajkhan quite good, Uzair
Adel
@AdelMahjoub
Dec 11 2016 14:07
@Zooll8 read all the sections of the quick start guide https://facebook.github.io/react/docs/handling-events.html, absolutly all sections, and write the examples given and try to fully understand what is happening
@Zooll8 that's the minimum requirement
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 14:07
@AdelMahjoub ok
Adel
@AdelMahjoub
Dec 11 2016 14:08
@Zooll8 don't try to seach for videos or other tutorials, the docs are up to date and very progressive
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:08
Is it possible to set two background images, one after another, provided one uses different divs to seperate the space? I can successfully get one background image implemented, but I can only post another if I use the same URL as the first one.
Zaurbek Zhakupov
@zzhakupov
Dec 11 2016 14:08
@AdelMahjoub just wanted to ask about this ^_^
@LukeSallmen have you tried z-index?
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:10
nope! I guess I'll try that next. I'm still on my first project (the biography), so I was trying to keep it kinda simple. But simple isn't as fun anyways, I suppose.
Uros Tadic
@urketadic
Dec 11 2016 14:13
can someone tell me why http://codepen.io/urketadic/pen/YpjmOw iframe isnt working? Only first one works.
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:13
@LukeSallmen Sometimes keeping it simple is fine, but going out of your comfort zone to make things work can be the best way to mess up and learn until you get things better. That’s me almost every time I do something new lol! I fail more than I succeed until I understand. On the other hand, that’s also why I went back to my profile page after I had done it for a while lol
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:20
True! And now that I'm done the rabbit hole, in order to use Z-index I have to make a position-declaration for an element. Can I reconcile Bootstrap and Z-index?
(e.g.) once I do position: initial or w/e, it cancels out the bootstrap's responsive positioning
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:22
For the background images?
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:22
And/or my h1
I changed the image to a normal img src element and then tried to use Z-index
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:23
I missed if you had a link up. Can you give one for context?
I guess new situation is that I'm trying to get the text behind the image and change the Z-index without screwing up Bootstrap
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:31
Are you wanting the background image to cover the whole div (including to the top of the screen and be responsive? Just making sure I understand correctly.
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:34
I think so? I want the text transposed onto the top of the image. I also want the larger div (including text and image) take up the entire screen. And I want the whole thing to be responsive.
alpox
@alpox
Dec 11 2016 14:38
@LukeSallmen I think there were some issues when trying to load images from imgur to webpages like codepen
@LukeSallmen But actually, your css would work if you use background instead of brackground-image
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:43
@alpox are you suggesting I circumvent the Z-index ordeal and go back to using two different background elements (albeit NOT background-image elements?) or did I type brackground-image instead of background-image somewhere?
alpox
@alpox
Dec 11 2016 14:45
@LukeSallmen Wait. What do you need z-index for?
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:45
@alpox I was going to use it rather than background-image so that I could position my text element on top of my image.
alpox
@alpox
Dec 11 2016 14:45
@LukeSallmen As far as i see, you use background-image instead of background
just change the name
You don't need any z-index, because its a background
@LukeSallmen
html, body {
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container-fluid {
  padding: 0;
  margin: 0;
}

h1 {
  margin: 0;
}
This helps for getting rid of the white border
.first-panel{
  background: url(http://i.imgur.com/AGK2wAj.jpg);
  height: 100vh;
}

.second-panel{
 /* background-image:url(http://i.imgur.com/Epkgbc9.jpg);
  height: 100vh; */
  background: url(http://i.imgur.com/AwwtQAk.jpg);
  height: 100vh;
}
This is for the background images
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:48
okay that's precisely what I got for my rewrite of the background images
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:49
@LukeSallmen Here’s a forked thing of a way you could try it as well. I’m still new so yeah. @alpox might have the better idea lol.
http://codepen.io/Jspadgett82/pen/MbqgJd
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:49
Hey folks! I just finished pretty much everything about my Local Weather App, but I can't seem to get the Font Awesome icons I've chosen to show. Would anyone be willing to help me out?
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:50
@hamgoblin45 If I’m able, sure. Link?
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:50
Thanks for your time! @Jspadgett82 http://codepen.io/hamgoblin45/pen/woxbWj?editors=0110
CamperBot
@camperbot
Dec 11 2016 14:50
hamgoblin45 sends brownie points to @jspadgett82 :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @jspadgett82 |http://www.freecodecamp.com/jspadgett82
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:52
@hamgoblin45 Where are you trying to put your fa stuff at?
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:52
In the HTML ids #condition and #wind-speed
Luke Sallmen
@LukeSallmen
Dec 11 2016 14:54
@alpox @Jspadgett82 thanks! (also I'd like to mention my problem is fixed but the second image looks god-awful when next to the first!! yikes, design is hard)
CamperBot
@camperbot
Dec 11 2016 14:54
lukesallmen sends brownie points to @alpox and @jspadgett82 :sparkles: :thumbsup: :sparkles:
:cookie: 685 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 309 | @jspadgett82 |http://www.freecodecamp.com/jspadgett82
Rimi.
@Codevotee
Dec 11 2016 14:54
@hamgoblin45 looks good! but the background image is not very nice
@hamgoblin45 it says Pixabay free images
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:55
Thanks! @APRim05 Yeah it's mostly placeholder for now. I just found images via Google
CamperBot
@camperbot
Dec 11 2016 14:55
hamgoblin45 sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 464 | @aprim05 |http://www.freecodecamp.com/aprim05
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:55
Ohhh, like a watermark? @APRim05 ? I guess I didn't notice, I've only seen the snowy image thusfar
Like loaded up on the app
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:56
@LukeSallmen No worries. I’m still new, but I like to help if I can :D
Rimi.
@Codevotee
Dec 11 2016 14:56
@hamgoblin45 the layout is good too
@hamgoblin45 this is what I see
blob
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:57
Ohhhhhh that's not good. What wheather condition is that, btw?
I can fix it real fast
Rimi.
@Codevotee
Dec 11 2016 14:57
9*C clear sky
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:57
Okay, thanks a bunch @APRim05
CamperBot
@camperbot
Dec 11 2016 14:57
hamgoblin45 sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:warning: hamgoblin45 already gave aprim05 points
kirbyedy
@kirbyedy
Dec 11 2016 14:57
@hamgoblin45 pixabay does not allow hotlinking, hence that image
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:58
I should have rememebred from my freelance journalism days @kirbyedy
Rimi.
@Codevotee
Dec 11 2016 14:58
@hamgoblin45 I know a way of easily storing images and linking them to codepen
Joseph Padgett
@Jspadgett82
Dec 11 2016 14:58
@hamgoblin45 Part of it is you’re wind direction is still showing in upper case. Checking that out now
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:59
ooooo, that could be a problem. Thanks @Jspadgett82
CamperBot
@camperbot
Dec 11 2016 14:59
hamgoblin45 sends brownie points to @jspadgett82 :sparkles: :thumbsup: :sparkles:
:warning: hamgoblin45 already gave jspadgett82 points
Phoenix Williams
@hamgoblin45
Dec 11 2016 14:59
How do you mean? @APRim05
Rimi.
@Codevotee
Dec 11 2016 15:00
@hamgoblin45 you just need to follow steps 1,2,3 on this tutorial: http://solutionoptimist.com/2013/12/28/awesome-github-tricks/
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:01
Oh nice! That actually seems simple and super helpful!
Rimi.
@Codevotee
Dec 11 2016 15:01
yeah by uploading an image as an issue, github creates a link for it, then you can use that link on CodePen xD
like a cheat
Joseph Padgett
@Jspadgett82
Dec 11 2016 15:02
@hamgoblin45 Change your sindDir variable to windDir = compassDirections[index].toLowerCase(); that will make sure when it finds it in the array, it’ll show up lower case. Not sure if that’ll fix your font awesome problem, but it does show up lower properly then
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:03
Right on @Jspadgett82 ! Thanks a lot for the help. I'll plug that in and see if it fixes the font awesome issue
CamperBot
@camperbot
Dec 11 2016 15:03
:warning: hamgoblin45 already gave jspadgett82 points
hamgoblin45 sends brownie points to @jspadgett82 :sparkles: :thumbsup: :sparkles:
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:05
Hmmm, that didn't seem to be quite it. It just made my compass direction in the #Wind-speed box to be lowercase
Joseph Padgett
@Jspadgett82
Dec 11 2016 15:10
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:11
Yeah, those are the ones
Franco Rufo
@francorufo
Dec 11 2016 15:12

http://codepen.io/franorufo/pen/ZBoyNm?editors=1111

Hi guys, I'm stuck on the javascript for my twitch json app and I can't find out was wrong. First of all the error that i'm getting is that my code doesn't always append all of the streamers in my array. Second of all the data, for example their status(online/offline) is sometimes wrong. What mistake am I making?

Joseph Padgett
@Jspadgett82
Dec 11 2016 15:19
@hamgoblin45 I can’t find a CDN for those. They’re not font awesome standard. They’re inspired by it. That could be the issue. I only suggested the adjustment to .toLowerCase() because it was mentioned in that notation. I can’t see anywhere you’ve got them linked.
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:20
Hmmmm, okay. I'll have to look at the example I studied and see where they linked the icons. I might have just missed something
HAHA! I fixed it! That was it, I somehow forgot to link it! DOH!
Joseph Padgett
@Jspadgett82
Dec 11 2016 15:23
@hamgoblin45 lol! I thought so once I was like “wait a minute, you have to use a CDN for non local fa icons"
Phoenix Williams
@hamgoblin45
Dec 11 2016 15:24
I feel pretty silly, but I'm so glad we figured it out. Thanks so much for the help @Jspadgett82
CamperBot
@camperbot
Dec 11 2016 15:24
hamgoblin45 sends brownie points to @jspadgett82 :sparkles: :thumbsup: :sparkles:
:warning: hamgoblin45 already gave jspadgett82 points
Joseph Padgett
@Jspadgett82
Dec 11 2016 15:24
@hamgoblin45 Oh it’s quite fine. I feel so much better when that’s my issue rather than a typo, so yeah… definitely no worries hah!
Sara Dorris
@saralee233
Dec 11 2016 15:39
So I'm trying to work on the portfolio page but I'm not really sure what I am doing. I found an external website that gives me the codes I need to put in a scroll and make a 1 page website but I'm trying to learn and I don't think i'm learning by just using the codes. any suggestions as to what I should do?
Joseph Padgett
@Jspadgett82
Dec 11 2016 15:42

@saralee233 Well yes, actually. My personal recommendation, as someone who’s still going through early front end section stuff, is to just do some things and figure out how they work. Make it mobile friendly with bootstrap, and just get something that shows off what you want it to. Make it as plain as possible and go from there.

http://codepen.io/Jspadgett82/pen/KzgvYV

This is mine, but this is the redo I did after moving forward to other things. It’s still simple, but it has stuff in it I didn’t have a clue how to do when I first started. I will come back again once I’m more comfortable with other things.

Sara Dorris
@saralee233
Dec 11 2016 16:00
@Jspadgett82 Thanks!
CamperBot
@camperbot
Dec 11 2016 16:00
saralee233 sends brownie points to @jspadgett82 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @jspadgett82 |http://www.freecodecamp.com/jspadgett82
emamadordev
@emamadordev
Dec 11 2016 16:01
@milesaylward yeah that's wrong. ideally your calculator should compute by the rules of order of operations.
emamadordev
@emamadordev
Dec 11 2016 16:07
@angel92004 in css add this: background-size: 100%; to your body.
emamadordev
@emamadordev
Dec 11 2016 16:23
@aferrar wow..very unique and nice portfolio site.
Luke Sallmen
@LukeSallmen
Dec 11 2016 16:41
Anyone know how I can arrange elements vertically on top of a background image in a responsive way? I want to put some text at the bottom of an image that is 100vh/100vw, but I'm not sure how to do so other than by doing margins (which hasn't really led me anywhere)
Marianissimus
@Marianissimus
Dec 11 2016 16:45
@LukeSallmen I'm not sure about using vh.vw, anyway, please add the picture first so we can see the problem
Luke Sallmen
@LukeSallmen
Dec 11 2016 16:46
what do you mean add the picture first? and the vh/vw part is fine, I think. It's just ensuring my image takes up the entirety of the screen and no more.
Marianissimus
@Marianissimus
Dec 11 2016 16:49
@LukeSallmen you could use background-size: cover, but that's not the problem:) Ok, where's the background image? You want elements vertically on top of what? Maybe you can place the picture in a container, not a background, so you can align all that you need to
Luke Sallmen
@LukeSallmen
Dec 11 2016 16:51
you mean a div? so like put the entire picture in a container, set the container to take up the entire view, and then overlay the text on the images?
Marianissimus
@Marianissimus
Dec 11 2016 16:53
I really don't know what you're trying to accomplish. What I do know is that I don't see any pictures in your pen
jrandallhansen
@jrandallhansen
Dec 11 2016 16:53
hey anyone have feedback or suggestions for the layout/design of my Pomodoro clock? I haven't built out the functionality yet but i want to focus on improving appearance of my projects. let me know what you think (especially on different devices) https://codepen.io/jrandall/pen/NbyVod
Sorin Ruse
@sorinr
Dec 11 2016 16:57
@LukeSallmen you cannot use imgur links in codepen for your backgrounds. must put the imgs some other place like cloudinary or any other
Luke Sallmen
@LukeSallmen
Dec 11 2016 16:58
cloudinary is a paid service, no? @sorinr
Sorin Ruse
@sorinr
Dec 11 2016 16:58
@LukeSallmen no they also have a free plan with some restrictions ofc
@LukeSallmen you can even link them from github or dropbox
Luke Sallmen
@LukeSallmen
Dec 11 2016 16:59
@sorinr Is there any reason why Imgur doesn't work?
Sorin Ruse
@sorinr
Dec 11 2016 16:59
@LukeSallmen can't answer that question. ask codepen :)
Luke Sallmen
@LukeSallmen
Dec 11 2016 17:00
@sorinr Ah. I wasn't sure if it was an Imgur restriction or a codepen one.
Łukasz Sobek
@lukaszsobek
Dec 11 2016 17:00
@jrandallhansen maybe scrap the play and pause button in favor of clicking the field with the remaining time to pause when it runs, and run when it is paused?
Sorin Ruse
@sorinr
Dec 11 2016 17:01
@LukeSallmen don't know ether on witch part is the problem but if you look into the console you will see the 403 forbidden messages
jrandallhansen
@jrandallhansen
Dec 11 2016 17:03
@lukaszsobek I thought about that but then the reset button looks a bit out of place. any suggestions to remove the reset button as well?
@lukaszsobek those little buttons are the worst part i agree
Luke Sallmen
@LukeSallmen
Dec 11 2016 17:09
Updated this. I'm trying to get the "subtitle" text on the bottom(but still on top of the image) of my first image, but I need some ideas as to how.
Łukasz Sobek
@lukaszsobek
Dec 11 2016 17:16
@jrandallhansen design headaches :)
@jrandallhansen you could leave it alone and move it to the right instead of below, but ideally I'd probably group the settings and reset because right now they seem all over the place.
Tyler Moeller
@TylerMoeller
Dec 11 2016 17:40
@LukeSallmen @sorinr It's Imgur's fault according to codepen :) https://twitter.com/codepen/status/662641042647326720
Purcea Robert
@RobertPurcea
Dec 11 2016 17:42
there is a problem with the twitch api? The one FCC gives us? Because when I made the project it was working and now it is throwing an error
Sorin Ruse
@sorinr
Dec 11 2016 17:43
@TylerMoeller i knew there are problems using imgur but as i never used it didn't bother too much about that issue :)
Tyler Moeller
@TylerMoeller
Dec 11 2016 17:43
Very easy way to convert imgur links: https://postimage.org/web.php
I just use github for my images now - used to use imgur and then one day everything broke :)
Sorin Ruse
@sorinr
Dec 11 2016 17:44
@Robertb4 just register your app with twitch api and get your key. its free
@Robertb4 and ofc use the api urls provided by twitch
@TylerMoeller i also use dropbox for some of them
when i will be bored, someday, i'll try to organize all my media used in the pens and move them in a single place
Tyler Moeller
@TylerMoeller
Dec 11 2016 17:50
Took me a whole day to move everything from codepen, imgur, flickr, etc to github.
learned a lot in the process, now everything syncs up nicely when I make changes
@Mr-Kumar-Abhishek Not sure if you got your textfill issue sorted out. This is a good way to do responsive text: http://codepen.io/TylerMoeller/pen/LbJYpO?editors=1100
It's the flow-text class from materializecss
Sorin Ruse
@sorinr
Dec 11 2016 17:57
@TylerMoeller yep. someday i'll have to do it
Will Pittman
@willpittman432
Dec 11 2016 18:18
Hello, I am beginning the random quote generator challenge. Does anyone have any good resources they could recommend to better understand JSON and Ajax before I try and implement an API?
Sorin Ruse
@sorinr
Dec 11 2016 18:20
@willpittman432 what do u mean "implement an API"? write one of your own or just use an existing one?
Will Pittman
@willpittman432
Dec 11 2016 18:21
@sorinr I know I found an existing one, I just didn't get enough out of FCCs section about JSON to know what I am doing
Sorin Ruse
@sorinr
Dec 11 2016 18:23
@willpittman432 pick any quotes free api and read its docs and you will learn how to make a call to that api and how to use the response json you get back from it
Franco Rufo
@francorufo
Dec 11 2016 18:24
http://codepen.io/franorufo/pen/ZBoyNm?editors=1111
Hi guys, still having a hard time with my javascript on the twitch api project. I've tried looked at my ajax calls and it doesn't seem to be anything wrong with them. The problem that i'm facing is that my code doesn't always append all of the streamers in my array. Also the data showing the status of a stream (offline/online) more often that not shows up wrong. Any hints?
Sorin Ruse
@sorinr
Dec 11 2016 18:27
@francorufo donot use for (var i = 0;..... but try to use the jq .each() function or .forEach() in plain javascript
Purcea Robert
@RobertPurcea
Dec 11 2016 18:42
I get an "unexpected token on line 1 column 1: <" near DocType HTML, even if I do not even have that on line 1
What's the cause?
btw i see the error on chrome developer tools not in codepen
Purcea Robert
@RobertPurcea
Dec 11 2016 18:48
Please someone look over it, I try to get the front end certification and this is the last thins standing in my way :sparkles:
Kait
@k-vosswinkel
Dec 11 2016 18:49
Hey campers - I'm working on the random quote generator (http://codepen.io/kvosswinkel/pen/wojdpV) and I'm really stuck trying to get JSON into HTML or to display it. I keep getting the error "json.forEach () is not a function" and I get it - it's an object not an array, so I can't cycle through it. How to fix this though - I'm stumped!
Sorin Ruse
@sorinr
Dec 11 2016 18:53
@Robertb4 do not use for (var i = 0;..... but try to use the jq .each() function or .forEach() in plain javascript
Brian
@BrianCodes33
Dec 11 2016 18:53
@k-vosswinkel are you formatting your jquery right?
Kait
@k-vosswinkel
Dec 11 2016 18:55
@BrianCodes33 apparently not - what do you mean?
Sorin Ruse
@sorinr
Dec 11 2016 19:00
@k-vosswinkel no need for the foreach function. the json response is a simple object that you can acces like json.quoteText, json.quoteAuthor and thats it
Brian
@BrianCodes33
Dec 11 2016 19:02
@k-vosswinkel let me have a closer look at your code
Sorin Ruse
@sorinr
Dec 11 2016 19:20
@k-vosswinkel something like quotes then you just format the way you want to show the quote and author into the well
Charles
@charlessmith259
Dec 11 2016 19:22
guys need help from someone who knows redux
Adrian Ferrar
@aferrar
Dec 11 2016 19:36
@emamador thank you! any suggestions on improvements?
CamperBot
@camperbot
Dec 11 2016 19:36
aferrar sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @emamador |http://www.freecodecamp.com/emamador
Adrian Ferrar
@aferrar
Dec 11 2016 19:38
would love input on my recently updated portfolio site --> aferrar.github.io
Kait
@k-vosswinkel
Dec 11 2016 19:46
Oooh - thanks @sorinr !
CamperBot
@camperbot
Dec 11 2016 19:46
k-vosswinkel sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 934 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 11 2016 19:47
@k-vosswinkel welcome
Sorin Ruse
@sorinr
Dec 11 2016 19:56
@aferrar i've seen you included in the links also the imgs. :+1:
Rex Smith Jr.
@rsmith731
Dec 11 2016 20:53

does anyone know how to change the name attribute when using font awesome?

Ex: <i class="fa fa-linkedin" aria-hidden="true"> LinkedIn</i>

i want to change the font family of LinkedIn

emamadordev
@emamadordev
Dec 11 2016 20:59
hey guys i made changes to my pomodoro clock. I need some feedback: http://codepen.io/emmanuelamador/full/GNdrVr/
Ritvars
@RitvarsZ
Dec 11 2016 21:01
I'm building the quote machine, can anyone help me? Where can I get a list of quotes? How do I implement them? I could put them in an array, but it's not good practice, considering I should have a lot of quotes.
gyolland
@gyolland
Dec 11 2016 21:11
If you google Good Quotes you’ll come up with several sites
I recently used https://www.goodreads.com
there’s a quote tab
if you have someone in mind you can search for them by name and select the quote tab
good luck
Franco Rufo
@francorufo
Dec 11 2016 21:13
gyolland
@gyolland
Dec 11 2016 21:14
@RitvarsZ I should have been addressing my comments to you: check out https://www.goodreads.com
@RitvarsZ and google for “good quotes” to find other sites
Ritvars
@RitvarsZ
Dec 11 2016 21:15
Thanks! @francorufo @gyolland
CamperBot
@camperbot
Dec 11 2016 21:15
:cookie: 267 | @francorufo |http://www.freecodecamp.com/francorufo
ritvarsz sends brownie points to @francorufo and @gyolland :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @gyolland |http://www.freecodecamp.com/gyolland
Franco Rufo
@francorufo
Dec 11 2016 21:16
I tried with an array and this api and the api is very easy to use. It gives you random quotes, I didn't understand anything looking at that link so check out ---> https://www.youtube.com/watch?v=8SJI8qnMb-o @RitvarsZ
Samuel Buzas
@Samwisebuze
Dec 11 2016 21:16
Can someone help me figure out how to make the box around my image not span the width of the page?
gyolland
@gyolland
Dec 11 2016 21:20
@RitvarsZ this looks interesting: https://theysaidso.com/api/
John Hiner
@LudensCogitet
Dec 11 2016 21:20
@Samwisebuze Are you talking about the box surrounding the image and the text below it?
Samuel Buzas
@Samwisebuze
Dec 11 2016 21:20
@LudensCogitet Yes, i want it to fit the image with just a little outline
Anthony Contreras
@AmazeCPK
Dec 11 2016 21:21
has anyone used jcrop before? need help with preloading an image
gyolland
@gyolland
Dec 11 2016 21:21
@Samwisebuze is the box a div and have you tried setting the width to a percentage?
Samuel Buzas
@Samwisebuze
Dec 11 2016 21:22
Just go it, I nested my divs porrly
John Hiner
@LudensCogitet
Dec 11 2016 21:24
@Samwisebuze I was about to ask what about the divs ☺ Glad you fixed it.
gyolland
@gyolland
Dec 11 2016 21:24
@Samwisebuze I did something similar recently. I had class=“container” within a div that had class=“container-fluid” and the “container” would not be contained :-P
GetBig33
@GetBig33
Dec 11 2016 21:35
hey yol so I took a break from this tribute page thing I want to get it down
abid
@xanaDev
Dec 11 2016 21:41
Hi everyone !
Tyler Moeller
@TylerMoeller
Dec 11 2016 21:54
@Robertb4 Analyze your CSS in codepen - there are some errors that need to be fixed.
blob
And, as Sorin said, use a method with a callback to make your API calls, such as .map(), $.each, or .forEach(). Since this is your last project before certification, that should be enough to help you get started debugging the issue.
Uros Tadic
@urketadic
Dec 11 2016 22:19
How can i move scroll of contenteditable div automaticly when its gets filled with text?
I have tried all stuff from stackoverflow nothing works.
Best thing you can do is try do it yourself on my codepen http://codepen.io/urketadic/pen/YpLgBX
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:37
Uros Tadic
@urketadic
Dec 11 2016 22:38
i tried that
also i have span elemnt in my contenteditable div
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:39
How did you try it?
It works for me
Uros Tadic
@urketadic
Dec 11 2016 22:39
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
so i changed elementID with my div ID first
didnt work
then i changed it with my span ID
didnt work
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:39
Let me try that code, I tried the jQuery option
Uros Tadic
@urketadic
Dec 11 2016 22:39
Can you fork my project and send me link where it works
ok so uv tried
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
and u replaced #mydiv with #pi
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:40
@urketadic It goes in the first line of your keydown function
Uros Tadic
@urketadic
Dec 11 2016 22:41
mm
what do u mean
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:41
Try to get a good understanding of what the code does before you add it
Uros Tadic
@urketadic
Dec 11 2016 22:41
like
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:42
It can go anywhere in this function $("#pi").keydown(function(ev){
Uros Tadic
@urketadic
Dec 11 2016 22:42
sec
$("#pi").keydown(function(ev){
  $(this).scrollTop($(this)[0].scrollHeight);
this worked
yea thank you
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:44
This works too:
$("#pi").keydown(function(ev){
var objDiv = document.getElementById("pi");
objDiv.scrollTop = objDiv.scrollHeight;
Uros Tadic
@urketadic
Dec 11 2016 22:45
well kinda
it still writes 1 number
and on the second number it scrolls down
but still better than before
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:47
I think you'd have to make it work on keyup rather than keydown to prevent that from happening - just an idea
Uros Tadic
@urketadic
Dec 11 2016 22:48
i will try
thanks alot
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:48
Sure, you're welcome
Franco Rufo
@francorufo
Dec 11 2016 22:48
http://codepen.io/franorufo/pen/ZBoyNm?editors=1011
Hate to ask these many times but it seems like I've tried everything. My problem at this moment in time is that my code is only appending 3 of the 12 times it should be. Any hints?
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:51
@francorufo you can't use a for loop here. They finish before the API call completes. Use a method with a callback like $.each, .forEach, or .map()
Tyler Moeller
@TylerMoeller
Dec 11 2016 22:56
@francorufo Not sure if that makes sense - I see Sorin told you to do the same above.
Franco Rufo
@francorufo
Dec 11 2016 22:57
tried .forEach that did no differance
but I guess i'll try the other ones
Pieter Stokkink
@forkerino
Dec 11 2016 22:59
@urketadic Ah, glad you found an answer
Tyler Moeller
@TylerMoeller
Dec 11 2016 23:01
@francorufo That's only part of the problem. The other part is mentioned as an error in your browser's developer console Cannot read property 'channel' of null
Franco Rufo
@francorufo
Dec 11 2016 23:04
@TylerMoeller Think I understand the problem now. Thanks
CamperBot
@camperbot
Dec 11 2016 23:04
francorufo sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Kait
@k-vosswinkel
Dec 11 2016 23:08
Hey everyone - working on "random quote generator" and I've successfully called the API and displayed the quote/author using:
var quote = $('.quote').html(json.quoteText);
var author = $('.author').html(json.quoteAuthor);
but I'd like to add additional HTML and tags to this - I can't figure out how to do that - any tips or advice would be appreciated. Thanks!
Pieter Stokkink
@forkerino
Dec 11 2016 23:09
@k-vosswinkel Check this exercise for an example: https://www.freecodecamp.com/challenges/convert-json-data-to-html
Kait
@k-vosswinkel
Dec 11 2016 23:18
Hey @forkerino - thanks, but I've been working directly off of that and getting nothing but errors! So frustrating. json.forEach(function) returns "not a function." keys.forEach(function) returns "keys undefined." using html at all just returns a variety of errors including "html is undefined." I have tried copying verbatim, I've tried switching things around - that whole lesson seems useless in CodePen and I don't know why!
CamperBot
@camperbot
Dec 11 2016 23:18
k-vosswinkel sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @forkerino |http://www.freecodecamp.com/forkerino
Kait
@k-vosswinkel
Dec 11 2016 23:19
@forkerino I just used "prepend" and that seemed to do the trick.
Pieter Stokkink
@forkerino
Dec 11 2016 23:27
@k-vosswinkel .forEach must be used on an array. json is a json-object, and for keys to exist, you would have to define it, as in the example. You seem to have a solution, but if you would want to wrap the quoteText in a div for example, you could do the following:
var quote = $('.quote').html("<div>" + json.quoteText + "</div>");
Kait
@k-vosswinkel
Dec 11 2016 23:34
Oh ok - it's good to know you can format it that way - thanks @forkerino.
CamperBot
@camperbot
Dec 11 2016 23:34
k-vosswinkel sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:warning: k-vosswinkel already gave forkerino points
Pieter Stokkink
@forkerino
Dec 11 2016 23:34
:thumbsup:
John Hiner
@LudensCogitet
Dec 11 2016 23:39
@k-vosswinkel Hey, I'm not entirely sure of the context, so pardon me if I'm off topic. But, for general info, if you wanted to access the properties of an object as though it were an array, you could do this: "Object.keys(nameOfObject).forEach(function(value){nameOfObject[value] do something;})"
Object.keys() returns an array of the keys of a given object. Then you call forEach on that array and access each property lf the object using bracket notation.
*of the object using bracket notation.
Uros Tadic
@urketadic
Dec 11 2016 23:49
Is there an easy way to reprogram keycodes ?
Like numpad enter to be 8