These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Jan 2017
Bardoe Bess
@bardbess
Jan 16 2017 00:03

Ah. are you sure your api call is correct? Im not sure aye @alboz1 . getting

_links:
channel
:"https://api.twitch.tv/kraken/channels/erd"
:"https://api.twitch.tv/kraken/streams/erd"

stream:null

back.

Havnt done that one yet
Erd
@alboz1
Jan 16 2017 00:04
nvm
Tyrantt47
@Tyrantt47
Jan 16 2017 00:06
hey guys. just messing around with something i saw on youtube and attempted to make a carousel, but for somereason its not working. can anyone tell me what i did wrong? https://codepen.io/Tyrantt47/pen/MJjaob
user denied geolocation
google that and see how you can fix that
cheers
tip: always have error handlers for any callbacks or promises
Moisés Man
@moigithub
Jan 16 2017 00:23
@Tyrantt47 IF bootstrap carousel u also need to add bootstrap library to ur JS settings
cuz carousel is a dynamic bootstrap component
Alexandre Resende
@AlexandreResende
Jan 16 2017 00:30
Hi all,
How could I know that there was an quote api before doing the random quote machine ?
Tyrantt47
@Tyrantt47
Jan 16 2017 00:30
@moigithub thanks! didnt realize that this had to do with bootstrap since i did it all in html and css (only been doing this for a few days now)
CamperBot
@camperbot
Jan 16 2017 00:30
tyrantt47 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2512 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Jan 16 2017 00:32
http://forismatic.com/en/ @AlexandreResende
Alexandre Resende
@AlexandreResende
Jan 16 2017 00:33
thats ur page @moigithub ?
Salomon
@zarruk
Jan 16 2017 00:37
hello. I want to know why the secsvar within the circle is not being reduced each second (or 1000 milliseconds). can someone give me a clue please? https://codepen.io/zarruk/pen/rjegVa
Tyrantt47
@Tyrantt47
Jan 16 2017 00:38
@moigithub one last question, the right side of the screen has a dark shadow, whereas the left side doesnt. know whats up with that?
Moisés Man
@moigithub
Jan 16 2017 00:40
@Tyrantt47 dunno
Aaron Cleveland
@amclv
Jan 16 2017 00:42
I was wondering if anyone can help me. I have been working on my tribute page for a while now. I finally got to the point where I believe its done. Except when I either display in full mode or i zoom in and out the timeline widens and the bluish background seems to show white on the bottom right about the biography. is there something I missing? I tried working with the padding and it seem to have no effect. If anyone could help I greatly appreciate it! http://codepen.io/actheory/pen/PWzBZg
Tyrantt47
@Tyrantt47
Jan 16 2017 00:46
@moigithub turns out it has something to do with the chevrons, more specifically, whichever is loaded last.
aRtoo
@artoodeeto
Jan 16 2017 00:57
hi guys i have a img using bootstrap and i cant find the solution to make it horizontal.
http://codepen.io/artoo/pen/RKGwLv?editors=1000
Salomon
@zarruk
Jan 16 2017 01:22

https://codepen.io/zarruk/pen/rjegVa?editors=1100

Hello. Is there a way to make the content appear just inside the circle without having to do it manually?

aRtoo
@artoodeeto
Jan 16 2017 01:52
hi guys. how do you display images horizontally using bootstrap??
Rashad
@BRashad
Jan 16 2017 01:53
@artoodeeto try this in css: background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)), url(../css/img/libraryopt.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
just do not use this part: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)),
this part makes the image kind of darker
aRtoo
@artoodeeto
Jan 16 2017 01:55
@BRashad ha?? i just want it display side by side bro
@BRashad http://codepen.io/artoo/pen/RKGwLv?editors=1100 heres the code pen if this helps
Rashad
@BRashad
Jan 16 2017 01:56
@artoodeeto you use row-md-4
you should try col-md-4 instead
bootstrap grid system http://getbootstrap.com/css/#grid for more reference
aRtoo
@artoodeeto
Jan 16 2017 01:58
@BRashad tried it sir nothing happends
Aaron Cleveland
@amclv
Jan 16 2017 02:00
I was wondering if anyone can help me. I have been working on my tribute page for a while now. I finally got to the point where I believe its done. Except when I either display in full mode or i zoom in and out the timeline widens and the bluish background seems to show white on the bottom right about the biography. is there something I missing? I tried working with the padding and it seem to have no effect. If anyone could help I greatly appreciate it! http://codepen.io/actheory/pen/PWzBZg
Rashad
@BRashad
Jan 16 2017 02:00
@artoodeeto bro i look now and it look horizontal :_
Screen Shot 2017-01-15 at 19.01.32.png
@artoodeeto look at my print screen it works :)
aRtoo
@artoodeeto
Jan 16 2017 02:08
@BRashad how bro?? dang!
Rashad
@BRashad
Jan 16 2017 02:10
Maybe you should refresh your page I did nothing you just changed the code when I sent you a hint and I clicked the link you sent me initially once more after that
Salomon
@zarruk
Jan 16 2017 02:10
does anyone know why the segundos function is being called without me having pressed the start button? https://codepen.io/zarruk/pen/rjegVa
mazury
@mazury
Jan 16 2017 02:12
Hi guys, anybody knows what I'm doing wrong in this API test code? It seems that JSON request doesn't work http://codepen.io/Adam92/pen/RKROPw?editors=1111
Tony Miri
@TonyMiri
Jan 16 2017 02:31
@zarruk maybe add a preventdefault in there
Tony Miri
@TonyMiri
Jan 16 2017 02:36
@adamgithub92 also you need to use the # inside your jquery call
in order to use a div id
So you should have "#apitest"
Tomas
@TOMEJUS
Jan 16 2017 02:37
Hi everyone!
Tony Miri
@TonyMiri
Jan 16 2017 02:39
Hi!
mazury
@mazury
Jan 16 2017 02:44
@moigithub thx
CamperBot
@camperbot
Jan 16 2017 02:44
adamgithub92 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2513 | @moigithub |http://www.freecodecamp.com/moigithub
aRtoo
@artoodeeto
Jan 16 2017 02:55
question guys. for the tribute page should all of your codes be use by bootstrap?? or i can use CSS?
kevinliu6102
@kevinliu6102
Jan 16 2017 02:59
@artoodeeto you can use whatever you want or don't want
aRtoo
@artoodeeto
Jan 16 2017 03:00
@kevinliu6102 thans
HAVENKTB13
@HAVENKTB13
Jan 16 2017 03:11
could i please getsome help
Tony Miri
@TonyMiri
Jan 16 2017 03:15
@HAVENKTB13 What do you need?
Mohammad Younis Malik
@myounism
Jan 16 2017 05:54
@myounism
Hello campers.. i m on challenge #117 - Build a Tribute Page
i need help
Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
What this means to do actually? I am not getting it correctly.. plz help fellow campers
badalsaibo
@heyDante
Jan 16 2017 05:56
@myounism You can use any library's like bootstrap, jQuery etc. Give it your own unique touch - feel free to modify it to your personal taste.
Mohammad Younis Malik
@myounism
Jan 16 2017 05:57
Fulfill the below user stories..
what this means? pzl help @heyDante
DavidMinAZ
@DavidMinAZ
Jan 16 2017 05:57
@myounism They're pretty stock directions, especially the one regarding using whatever libraries you prefer.
badalsaibo
@heyDante
Jan 16 2017 05:59
@myounism fulfill the statement they said.
Mohammad Younis Malik
@myounism
Jan 16 2017 05:59
Thanks @DavidMinAZ , @heyDante i will start working on it..
CamperBot
@camperbot
Jan 16 2017 05:59
myounism sends brownie points to @davidminaz and @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @heydante |http://www.freecodecamp.com/heydante
:cookie: 271 | @davidminaz |http://www.freecodecamp.com/davidminaz
DavidMinAZ
@DavidMinAZ
Jan 16 2017 05:59
@myounism The user stories are the functional requirements of the project stated in terms of what the user will be able to do... I forget whereabout they explained the terminology and it's easy to put it behind you and forget because they don't use the term much afterward until you hit larger challenges.
badalsaibo
@heyDante
Jan 16 2017 06:00
@DavidMinAZ lol same brownies
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:00
@heyDante I guess we'll have to learn to share
:laughing:
badalsaibo
@heyDante
Jan 16 2017 06:00
haha yes
Mohammad Younis Malik
@myounism
Jan 16 2017 06:01
yes.. help from seniors, make us junior campers go ahead.. :)
Tomas
@TOMEJUS
Jan 16 2017 06:01
Hey guys I've run into small problem regarding bootstrap, anyone have done full image page?
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:01
@someone I'm stuck on a personal project that I'm recreating based upon what I've learned on FCC if there's anyone willing to have a look and tell me where I'm flubbing it up...
Tomas
@TOMEJUS
Jan 16 2017 06:02
@DavidMinAZ post a link
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:03
The mobile responsive menu is the issue... I'm using Bootstrap classes but not entirely
http://codepen.io/dmattiuz/pen/RKGNwb
You'll see what happens when you try to access it in a small window... it's putting the nav list into a box with scrollbars
@TOMEJUS Wish I could help with that, but all I can think of is simply styling the body tag with background-image. Have never tried it myself.
Tomas
@TOMEJUS
Jan 16 2017 06:06

@DavidMinAZ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".myNavBar">

You don't need to put a dot before referencing a class, you do need hash for a id tho. Keep that in mind

@DavidMinAZ also, in this case you must reference navbar by id, simply because you put the class, not call it. Im not sure how to explain this, but you may add class, but not reference it. Take a look at a css file where you style classes you add dot before, right? In HTML you don't add dot so it means it not referencing, its 6 in the morning, i havn't slept yet, so i don't know if i made any sense
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:08
@TOMEJUS I removed the dot and it stopped working, so I put it back
@heyDante Thanks for the docs also... having a look as it's different that what I referred to originally
CamperBot
@camperbot
Jan 16 2017 06:09
davidminaz sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @heydante |http://www.freecodecamp.com/heydante
Tomas
@TOMEJUS
Jan 16 2017 06:09
@DavidMinAZ First step: change .myNavBar to let's say for example: #realNavBar (full line: data-target="#realNavBar">
badalsaibo
@heyDante
Jan 16 2017 06:10
@DavidMinAZ the end part of the doc is what you should be looking for.
Tomas
@TOMEJUS
Jan 16 2017 06:10
@DavidMinAZ Then change: <nav class="navbar-collapse collapse myNavBar" id="realNavBar">
@DavidMinAZ I mean add id="realNavBar">
@DavidMinAZ It will work now, I don't know if this is what you've aimed for, but now its working the right way.
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:12
@TOMEJUS Thanks. It was working as-was in Chrome, but I did make the change to targeting by ID rather than class as suggested.
CamperBot
@camperbot
Jan 16 2017 06:12
davidminaz sends brownie points to @tomejus :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @tomejus |http://www.freecodecamp.com/tomejus
Tomas
@TOMEJUS
Jan 16 2017 06:12
@DavidMinAZ Also David, if you want to use nice Bootstrap animations I would suggest you to change <ul> to: <ul class="nav navbar-nav navbar-right"> then the menu will slide nicely. No worries, any time!
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:12
@TOMEJUS Still, I'm getting horizonal and vertical scrolls when it expands those items
Tomas
@TOMEJUS
Jan 16 2017 06:13
@DavidMinAZ Let me know if <ul> change fixed your problems.
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:14
I didn't care for the way they styled their default navbar looked but I wonder if I can still use those classes and keep the appearance as-is
Tomas
@TOMEJUS
Jan 16 2017 06:15
@DavidMinAZ I suppose the classes for "ul" may help solve that.
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:19
@TOMEJUS It does, to a degree... it gets them to stack but still leaves a vertical scroll (on desktop). Also, I didn't care for their automatic styles over highlighting on :hover... plus in Chrome it makes the bottom of the header div bounce
Which I would think my own styles would override those if done by ID rather than class but it doesn't appear to be so
Tomas
@TOMEJUS
Jan 16 2017 06:21
@DavidMinAZ I believe that scroll is something from your custom CSS code. My suggestion would be: copy only navbar code and put it on a fresh pen in codepen and then check if same happens, then you'll know if it is coming from nav, or the problem is caused by some other code within your css (this is what I do when I run into simillar problems). Give me pen link with just a nav i'll test that too.
h1tag
@h1tag
Jan 16 2017 06:25
Hey, I'm Show the Local Weather project, I'm using the weather api from: https://www.apixu.com and here's my code pen: https://codepen.io/FortMax/pen/wgGdGR. I get this error on console after running my project: Uncaught TypeError: Cannot read property 'temp_c' of undefined
Tomas
@TOMEJUS
Jan 16 2017 06:26
@DavidMinAZ No, I mean just navbar no CSS code whatsoever, so it means only <div class="nav" ... </div> or <nav class="">...</nav> which ever you use
@DavidMinAZ You did exactly opposite in this case, you copied all the css which in fact we are trying to separate
@DavidMinAZ I just glanced at the code and you should really re-write the navbar. I believe it should start as <div class="navbar nav" or <nav class="navbar" and shouldn't be included in default HTML tag header. Try to look at the w3s example someone posted earlier
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:32
@TOMEJUS Sorry, trimmed it down now and did minimal CSS to improve visibility
Tomas
@TOMEJUS
Jan 16 2017 06:33
@DavidMinAZ Yes, but the purpose of this "debugging" is to determinate where to look for mistake (either within the navbar itself or other code which is not in the navbar")
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:35
@TOMEJUS Right, I apologize. Now it should be just the <nav> and it's container DIV, which appears to be working normally once I remembered to add Bootsrap.js and jQuery.js to the pen
Tomas
@TOMEJUS
Jan 16 2017 06:39
@DavidMinAZ Here you go! Please let me know if you need any more help!
Alexander Huynh
@caesarsalad93
Jan 16 2017 06:41
Hi guys, is there a way I can set a parent container to have equal width of its children?
Tomas
@TOMEJUS
Jan 16 2017 06:42
@caesarsalad93 you can with JavaScript

@caesarsalad93 It would go something like this:

jQuery:

ready
$select child element
var tempChildElement = $selectedChild.width;
$select parent element.width = tempChildElement;

That's it.

DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:44
@TOMEJUS Thanks, again! (Stepped away a moment, sorry!) I also was able to override the styles by applying them to the ul
CamperBot
@camperbot
Jan 16 2017 06:44
davidminaz sends brownie points to @tomejus :sparkles: :thumbsup: :sparkles:
:warning: davidminaz already gave tomejus points
Tomas
@TOMEJUS
Jan 16 2017 06:45
@DavidMinAZ Keep up good work!
Alexander Huynh
@caesarsalad93
Jan 16 2017 06:45
@TOMEJUS thanks tomas
CamperBot
@camperbot
Jan 16 2017 06:45
caesarsalad93 sends brownie points to @tomejus :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @tomejus |http://www.freecodecamp.com/tomejus
Tomas
@TOMEJUS
Jan 16 2017 06:46
@caesarsalad93 No problem, anytime
h1tag
@h1tag
Jan 16 2017 06:46
:point_up: January 16, 2017 8:25 AM please help
Alexander Huynh
@caesarsalad93
Jan 16 2017 06:52
A flexbox question. Do you need to set display: flex in both the parent and the child? Or just the parent
Tyrantt47
@Tyrantt47
Jan 16 2017 06:52
I'm having problems with bootstrap and cant seem to find the answer to it. I'm trying to do the portfolio project and trying to use bootstrap to scale my page, but for some reason 12 is only using half of the page instead of the full page. can anyone tell me what i'm doing wrong? https://codepen.io/Tyrantt47/pen/PWGjXY
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-6 col-xs-2">
        <h1> Old education him departure any arranging one prevailed. Their end whole might began her. Behaved the comfort another fifteen eat. Partiality had his themselves ask pianoforte increasing discovered. So mr delay at since place whole above miles. He to observe conduct at detract because. Way ham unwilling not breakfast furniture explained perpetual. Or mr surrounded conviction so astonished literature. Songs to an blush woman be sorry young. We certain as removal attempt. </h1>
      </div>
    </div>
  </div>
DavidMinAZ
@DavidMinAZ
Jan 16 2017 06:52
@TOMEJUS Very glad you broke my stuck pattern of thinking... and also I fixed that bouncing where it was adding the border on :hover by just adding a similar border that matched the background color.
Tyrantt47
@Tyrantt47
Jan 16 2017 06:53
(the problem is below the carousel)
Tomas
@TOMEJUS
Jan 16 2017 06:58
@caesarsalad93 I haven't used flex yet myself, but it should work like every other class in HTML5/CSS3. Child gets all everything from the container in this case from the parent. However the best way to know is to try it both ways and see what happens.
@DavidMinAZ No worries, I hope that will help you to get better!
@Tyrantt47 Can you explain your problem a little bit more? Can't seem to understand whats wrong with your pen
Tyrantt47
@Tyrantt47
Jan 16 2017 07:03
@tomas look under the carousel. the text is cut off halfway across the screen, when I have it set to col-lg-12. from my understanding, it should stretch the full 12 columns across the screen. it seems like 12=6, 6=3, etc etc. i cant seem to figure out how to make 12=12.
i changed the font color to make it easier to see
Tomas
@TOMEJUS
Jan 16 2017 07:07
@Tyrantt47 The way I understand it bootstrap does not stretch anything it just divides the blocks. So basically if for example you'll put something like: <div row... </div> and inside that particular div you can either put one: <div col-xs-12 for example and it will cover all the row, or you can put combinations like: <div col-xs-6 </div> and some text inside that div, then create another div (OUTSIDE that div) but inside row Div with another col-xs-6 and you'll have TWO columns with 50% screen ratio within the same row. However, I may be wrong since I started boostrap few days ago myself, but since I am using bootstrap it hvn't streched anything for me and worked the way I hoped it will work (most of the time)
@Tyrantt47 Is what you want to achieve that carousel is 1st page and the text is another page? Or Im missing something, because you just put exact amount of text to cut off.
Sorin Ruse
@sorinr
Jan 16 2017 07:10
@Tyrantt47 it is full screen width. try to change view and place codepen panels above preview. your problem on smaller screens starts here col-sm-6 col-xs-2
Tyrantt47
@Tyrantt47
Jan 16 2017 07:11
@TOMEJUS I want to place text below the carousel. however, when i use col-lg-12, the text only covers half of the screen, as if i put col-lg-6. but this is what i typed:
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-6 col-xs-2">
      <h1 style="color:red"> Old education him departure any arranging one prevailed. Their end whole might began her. Behaved the comfort another fifteen eat. Partiality had his themselves ask pianoforte increasing discovered. So mr delay at since place whole above miles. He to observe conduct at detract because. Way ham unwilling not breakfast furniture explained perpetual. Or mr surrounded conviction so astonished literature. Songs to an blush woman be sorry young. We certain as removal attempt. </h1>
    </div>
  </div>
</div>
but when you look at my page, the red text below the carousel acts like it is col-lg-6, when the code above shows col-lg-12
https://codepen.io/Tyrantt47/pen/PWGjXY
h1tag
@h1tag
Jan 16 2017 07:13
Hey @sorinr remember the problem with the weather api we were talking about. I used the api you suggested and I got this: :point_up: January 16, 2017 8:25 AM
Tomas
@TOMEJUS
Jan 16 2017 07:14
@Tyrantt47 I must understand you wrong, because from my point of view it displays the way it should. It fills every blank space available since you using all the columns, i'll repeat myself, but col-lg-12 means that you are using one big column of (12 columns combined) and that's width, for a height you are using row which you only have one, so in reality you have one row and one column and you fill it with a text which is what i am seeing. I'll send you a screenshot.
blob
Tyrantt47
@Tyrantt47
Jan 16 2017 07:15
@TOMEJUS interesting... on my screen, it only shows half the screen.
Tomas
@TOMEJUS
Jan 16 2017 07:15
This is what i am seeing and it seems fine regarding your code. Can you please mark-up or something what are you trying to achieve otherwise I don't get it
Browser issues? I doubt that since its a pretty standard basic code.
Tyrantt47
@Tyrantt47
Jan 16 2017 07:16
Sorin Ruse
@sorinr
Jan 16 2017 07:16
@fortMaximus jus a sec to look into it
Michael Stojsavljevic
@mikestoj
Jan 16 2017 07:17
Hey having a lot of trouble styling my portfolio. I have an image and a paragraph in a container div, seperated into rows. How can I center the image and paragraph in their respective rows? Help
Tomas
@TOMEJUS
Jan 16 2017 07:18
You can use center-block for images and text-center for text. @mikestoj
Tomas
@TOMEJUS
Jan 16 2017 07:18
@Tyrantt47 That is interesting, also go to full view mode to check if it really is like this plus full size window.
@Tyrantt47 since you posted your link I've seen it the way I should
Tyrantt47
@Tyrantt47
Jan 16 2017 07:19
@tomas when i switched browsers (currently using chrome), it seemed to display fine
@TOMEJUS thanks for the help and sorry about the confusion
CamperBot
@camperbot
Jan 16 2017 07:19
tyrantt47 sends brownie points to @tomejus :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @tomejus |http://www.freecodecamp.com/tomejus
Tomas
@TOMEJUS
Jan 16 2017 07:19
@Tyrantt47 no worries, let me know if you need any more help! good luck.
badalsaibo
@heyDante
Jan 16 2017 07:20
@Tyrantt47 You use IE.
tptynlr
@tptynlr
Jan 16 2017 07:22
help
Tyrantt47
@Tyrantt47
Jan 16 2017 07:22
@heyDante are you suggesting i use IE or saying that i currently use it?
Tomas
@TOMEJUS
Jan 16 2017 07:22
@Tyrantt47 If my eye are not laying I see Chrome right next to left corner
badalsaibo
@heyDante
Jan 16 2017 07:23
@Tyrantt47 do you use IE.
Tyrantt47
@Tyrantt47
Jan 16 2017 07:23
@heyDante i use chrome
havnet had issues with the bootstrap until now.
badalsaibo
@heyDante
Jan 16 2017 07:23
Its fine then. np
IE has many issues
Muhammad Hasham
@MohammadHasham
Jan 16 2017 07:23
can anyone help me with my simon says game project?
Sorin Ruse
@sorinr
Jan 16 2017 07:31
@fortMaximus here how you can do it: example
Michael Stojsavljevic
@mikestoj
Jan 16 2017 07:34
@TOMEJUS Is there a way to center them vertically?
Tomas
@TOMEJUS
Jan 16 2017 07:36
@mikestoj You shouldn't need to do that since if you put them in the columns they will be centered automatically. However, I believe there is a CSS rule called: vertical-align you can try: vertical-align: middle;
Michael Stojsavljevic
@mikestoj
Jan 16 2017 07:37
@TOMEJUS I've set them in a div with a background image. Should I do that or make the background div responsive?
Tomas
@TOMEJUS
Jan 16 2017 07:41
Ideally if you put the image in the css (background-image: url(<...>) then the DIV itself should be only as big as the contents inside, so if you don't put anything inside there should be no image therefore no vertical alignment. If you put something only part of the image will show, that's if you don't set width and height (which would ruin the purpose of responsive)
Michael Stojsavljevic
@mikestoj
Jan 16 2017 07:48
@TOMEJUS ahh okay. I was making this more complicated than I needed to. Must be getting late. Thanks!
CamperBot
@camperbot
Jan 16 2017 07:48
mikestoj sends brownie points to @tomejus :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @tomejus |http://www.freecodecamp.com/tomejus
Tomas
@TOMEJUS
Jan 16 2017 07:49
@mikestoj No worries man, glad to help!
Muhammad Hasham
@MohammadHasham
Jan 16 2017 08:04
can anyone help me with simon says game?
project of FCC?
MacGuffin
@MacGuffin1990
Jan 16 2017 08:10
hello everyone。。。。what is wrong with my project. i can not get data....http://codepen.io/MacGuffin1990/pen/ygexEW?editors=1010
MacGuffin
@MacGuffin1990
Jan 16 2017 08:17
can someone help please
h1tag
@h1tag
Jan 16 2017 08:20
@sorinr what was wrong with my previous code? And your code doesn't show a result/ weather (i.e. change the html with the response received). Did it show a result when you ran it?
Sorin Ruse
@sorinr
Jan 16 2017 08:28
@fortMaximus yes. it shows a result ofc
Adel
@AdelMahjoub
Jan 16 2017 08:35
@MacGuffin1990 you are getting data, take a look at network in the dev tools
MacGuffin
@MacGuffin1990
Jan 16 2017 08:36
@AdelMahjoub i got data thank u
CamperBot
@camperbot
Jan 16 2017 08:36
macguffin1990 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
h1tag
@h1tag
Jan 16 2017 08:38
@sorinr why it's not working for me? Also, I did allow location access from the browser (google chrome). What was wrong with my previous code?
Sorin Ruse
@sorinr
Jan 16 2017 08:40
@fortMaximus my pen its not working?
h1tag
@h1tag
Jan 16 2017 08:40
yes
Sorin Ruse
@sorinr
Jan 16 2017 08:44
Screenshot from 2017-01-16 10-43-15.png
@fortMaximus here what i get:
h1tag
@h1tag
Jan 16 2017 08:45
idk why it's not working on my side
Sorin Ruse
@sorinr
Jan 16 2017 08:51
@fortMaximus first its not navigator.geoLocation as in your code its navigator.geolocation. look here: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation . second your w.current["temp_c"]; its wrong. it should be like w.current.temp_c. same for weather var
Muhammad Hasham
@MohammadHasham
Jan 16 2017 08:58
if there is a for loop which decrements a variable value = 10 at every iteration after the for loop terminates will the actual value would be changed or its instance from actual i mean global scope?
h1tag
@h1tag
Jan 16 2017 09:00
@sorinr it worked. Sorry, it was something missed up in my Chrome location settings, I allowed location on codepen but it was blocked on all websites from the browser settings. And about the object access I followed Accessing Nested Objects challenge instructions, why is that wrong?
Sorin Ruse
@sorinr
Jan 16 2017 09:08
@fortMaximus maybe was not wrong using nested objects. i'm just used to separate concerns. thats why i create different functions for job. one job is getting the location. this passes the response to the getweather function that his jos is to retrieve the weather. you can even make a new function like render(weather object) witch will take care of the rendering the weather object on the page. this way if you want to change the location service or weather api or just rendering its much simplier coz you have to change only one function
@fortMaximus hope it makes sense
Tom Stoddart
@wobytides
Jan 16 2017 09:16
@MohammadHasham yeah, it will do that, it depends on where you declare it using var value = 10;
h1tag
@h1tag
Jan 16 2017 09:16
@sorinr can you give me an example on the render function or add it to the code?
Sorin Ruse
@sorinr
Jan 16 2017 09:20
@fortMaximus yep. just wait. have something to finish
MacGuffin
@MacGuffin1990
Jan 16 2017 09:25
@AdelMahjoub when i click the button nothing happen...can u help me to find the bug.http://codepen.io/MacGuffin1990/pen/ygexEW?editors=0010
GastroGeek
@GastroGeek
Jan 16 2017 09:34

@MacGuffin1990 - you should probably wait for the form submit event rather than a button press event within a form... since the form will then attempt to 'submit' which interferes with your button handler. You had:

Page load
On button click, fetch ajax

But then form submits, overriding button handler and messing stuff up

What you want is

Page load
on form submit (via usual button press), prevent default form submission
then action ajax request and update p

http://codepen.io/anon/pen/pRELMe?editors=0010

MacGuffin
@MacGuffin1990
Jan 16 2017 09:36
@GastroGeek thanks for u help
CamperBot
@camperbot
Jan 16 2017 09:36
macguffin1990 sends brownie points to @gastrogeek :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for gastrogeek
Sorin Ruse
@sorinr
Jan 16 2017 09:37
@fortMaximus just reload my example above
h1tag
@h1tag
Jan 16 2017 09:45
@sorinr why you're using alert() and stringify()?
in render()
Sorin Ruse
@sorinr
Jan 16 2017 09:49
@fortMaximus just to show you the object you pass to the render function its working. if you just alert(response) will show you [object] or something like this. stringify function transform the object into a string to be able to be showed up by the alert function. your job is to work on the response object and show on page what you want. get rid of that alert. it was just to make you see the render function its working
@fortMaximus your render function will have to be in sync with your html code. if you change your html it may be needed that you also change something into the render function only. the getlocation and get weather remain the same
h1tag
@h1tag
Jan 16 2017 09:58
@sorinr I don't understand, why if something changed in html you may need to change render() (it doesn't have anything related to the html code inside it)?
Sorin Ruse
@sorinr
Jan 16 2017 10:01
@fortMaximus in the render you refer to elements in html. like you did with $('#p1').html(here data you wanted). if you change the structure of your html the render function will have to know where to place data you want from the response
h1tag
@h1tag
Jan 16 2017 10:03
I see but I thought you said before that render() is for when you change the api
Sorin Ruse
@sorinr
Jan 16 2017 10:05
@fortMaximus please read again :point_up: January 16, 2017 11:08 AM
h1tag
@h1tag
Jan 16 2017 10:16
@sorinr yea, you're right. Thank you for taking the time to help me :smile:
CamperBot
@camperbot
Jan 16 2017 10:16
fortmaximus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 16 2017 10:22
@fortMaximus welcome
Ajith
@ajithvallabai
Jan 16 2017 10:24
thanks @adityaparab now it works!
where could i learn these advanced topics ?
CamperBot
@camperbot
Jan 16 2017 10:24
ajithvallabai sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 853 | @adityaparab |http://www.freecodecamp.com/adityaparab
Megan
@megan32
Jan 16 2017 10:43
Hey, anyone willing to help me figure out why my page suddenly disappeared? was going along just fine, and then it all went away. Tried Chrome Dev tool, but can't figure out how to fix based on the error it popped up; tossed code in Codepen and it won't work there either... like 90% sure its a JS issue...
code link:
dev tools link (if that helps...): http://127.0.0.1:60759/null
Coy Sanders
@coymeetsworld
Jan 16 2017 10:56
try changing the variable location @megan32
also you dont need the window.onload part, i believe that the code in JS pane won't run until the HTML document has been fully rendered
and also on HTML sections you only include the body section, without the actual body tags. the header goes inside of settings.
one more thing too, you can import libraries from a drop down in the settings so you can import bootstrap/jquery that way if you'd prefer
Megan
@megan32
Jan 16 2017 11:00
@coymeetsworld Thank you
I've been coding in brackets and just copy/pasted to codepen for the sake of asking/showing code -i'll def. toggle on the BS and Jquery;
I'm a little confused -change the variable "location" because this is a key word or I spelt it wrong somewhere?
-body tags are there (<body> and </body> -I'm not sure what you mean? (as is: <html> <head>stuff</html><body>div-stuff</body></html> is this wrong?)
CamperBot
@camperbot
Jan 16 2017 11:00
megan32 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1825 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 16 2017 11:01
oh ok figured that much just checking
im not sure what the deal is w/ location, but i tried changing the value to loc and that problem didn't happen anymore
might have something to do with window.location but not 100% sure
actually i think that's what it is
location is already defined and has information like the URL of the page. so when you set location to something else it changes the object and now it thinks you're trying to go to another page
Megan
@megan32
Jan 16 2017 11:05
oh weird, ok! Cool thank you!
Coy Sanders
@coymeetsworld
Jan 16 2017 11:05
no problem
Megan
@megan32
Jan 16 2017 11:05
bah...I knew it...I was reading about window. as a global variable and had that "huh, wonder if this will be related" thought haha
Ajith
@ajithvallabai
Jan 16 2017 11:06
guys is there any code to reduce the size of the object(calculator) without reducing the width of the table,buttons and boxes ? this is my pen http://codepen.io/indian46/pen/Xpjdpr?editors=1111
like zoomming in and out
Sorin Ruse
@sorinr
Jan 16 2017 11:18
@megan32 here a solution
DarylKnapp
@DarylKnapp
Jan 16 2017 11:56

Good Morning Devs

Just wanted to ask this question as I asked it yesterday, and no one was able to assist me at all. How would I get the arrow snugged right under the "About" head Im using it as a I guess kinda like a text-dec ha ha..

http://i65.tinypic.com/2cfz81j.png

kirbyedy
@kirbyedy
Jan 16 2017 11:57
@DarylKnapp does your h2 have bottom margin ?
DarylKnapp
@DarylKnapp
Jan 16 2017 11:59
@kirbyedy It does not.
I thought it might of been padding.
kirbyedy
@kirbyedy
Jan 16 2017 12:00
@DarylKnapp just in case can you type this to your css
h2 {
margin:0;
}
DarylKnapp
@DarylKnapp
Jan 16 2017 12:03

@kirbyedy Still nothing lol let me share my CSS code for h2

h2 {
color: #2e5158;
font-family: 'Oswald', sans-serif;
padding: 10px;
margin: 0;
}

kirbyedy
@kirbyedy
Jan 16 2017 12:04
then check that image of arrows, can you copy paste it here
only the image
image should be trimmed to display only the arrows, no extra space
badalsaibo
@heyDante
Jan 16 2017 12:14
type .png would be great
Megan
@megan32
Jan 16 2017 12:59
Anyone happen to know why a image file tag would cause other parts of a code to not work? (I'm working in Brackets, not code pen, but it won't be in the code pen system...)
kirbyedy
@kirbyedy
Jan 16 2017 13:01
wrong syntax ?
Megan
@megan32
Jan 16 2017 13:01
this is how I have it:

'''

var temperature;
var location;
var icon;

// update the weather; All pull from internet except icon; icon is different because it is pulling from a folder, not the web.//
function update(weather){
document.getElementById('icon').src = "images/codes" + weather.icon + ".png";
document.getElementById('temperature').innerHTML = weather.temperature;
document.getElementById('location').innerHTML = weather.location;

}

//initiate the page with window.onload//
window.onload = function(){
// temperature = document.getElementById("#temperature");
// location = document.getElementById("#location");
// icon = document.getElementById("#icon");

// //establish default information for the system
var weather = {};
weather.icon = rain;
weather.temperature = "45";
weather.location = "Kyoto";
console.log(weather);
update(weather);
}
'''

CamperBot
@camperbot
Jan 16 2017 13:01
:bulb: to format code use backticks! ``` more info
Megan
@megan32
Jan 16 2017 13:01
ugh sorry

var temperature;
var location;
var icon; 

// update the weather; All pull from internet except icon; icon is different because it is pulling from a folder, not the web.//
function update(weather){
    document.getElementById('icon').src = "images/codes" + weather.icon + ".png";
    document.getElementById('temperature').innerHTML = weather.temperature;
    document.getElementById('location').innerHTML = weather.location;

}

//initiate the page with window.onload//
window.onload = function(){
//     temperature = document.getElementById("#temperature");
//     location = document.getElementById("#location");
//     icon = document.getElementById("#icon");

// //establish default information for the system
    var weather = {}; 
    weather.icon = rain;
    weather.temperature = "45";
    weather.location = "Kyoto";
    console.log(weather);           
    update(weather);
}
Sorin Ruse
@sorinr
Jan 16 2017 13:02
@megan32 yes its because "Bugs will appear in one part of a working program when another 'unrelated' part is modified." :)
Megan
@megan32
Jan 16 2017 13:03
@sorinr awesome feature of javascript...
(there really needs to be a "palm to face" emoji...)
how do you work around that? I tried moving aspects around (order top to bottom) and that didn't help
Darth Skywalker
@adityaparab
Jan 16 2017 13:04
@megan32 is name of your image file Kyoto.png or codesKyoto.png?
Megan
@megan32
Jan 16 2017 13:04
no, big folder is Weather_App_V2 ; image forlder is imgs
all image files are weather related (rain, snow, sunny, et)
Darth Skywalker
@adityaparab
Jan 16 2017 13:06
@megan32 : I'm guessing the problem is with this line
document.getElementById('icon').src = "images/codes" + weather.icon + ".png";
try changing it to
document.getElementById('icon').src = "images/codes/" + weather.icon + ".png";
added a / after /codes
Sorin Ruse
@sorinr
Jan 16 2017 13:06
@megan32 if the problem is displaying the img you need mabe a relative path to it. not like .src = "images/codes" but something like .src = "../images/codes"
Megan
@megan32
Jan 16 2017 13:08
@adityaparab Thank you! I'll give that a shot
CamperBot
@camperbot
Jan 16 2017 13:08
megan32 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 854 | @adityaparab |http://www.freecodecamp.com/adityaparab
Megan
@megan32
Jan 16 2017 13:08
@sorinr it's in a folder within the bigger project folder, I'll try adding the big folder name, but it's not pulling off the internet (still learning how to use the two options)
@sorinr thank you!
CamperBot
@camperbot
Jan 16 2017 13:08
megan32 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1091 | @sorinr |http://www.freecodecamp.com/sorinr
Darth Skywalker
@adityaparab
Jan 16 2017 13:09

@megan32 Another thing is (not related to the problem at hand) is JS VM performance considerations.
Adding properties to the objects post instantiation is performance deficient. Therefore change following part of your code

window.onload = function(){
//     temperature = document.getElementById("#temperature");
//     location = document.getElementById("#location");
//     icon = document.getElementById("#icon");

// //establish default information for the system
    var weather = {}; 
    weather.icon = rain;
    weather.temperature = "45";
    weather.location = "Kyoto";
    console.log(weather);           
    update(weather);
}

to

window.onload = function(){
//     temperature = document.getElementById("#temperature");
//     location = document.getElementById("#location");
//     icon = document.getElementById("#icon");

// //establish default information for the system
    var weather = {
        icon:"rain",
        temperature:"45",
        location:"Kyoto"
    }; 
    console.log(weather);           
    update(weather);
}

@megan32 : I found your problem

this line

weather.icon = rain;

should be

weather.icon = "rain";
that is why nothing seems to work
Sorin Ruse
@sorinr
Jan 16 2017 13:10
@megan32 the relative path its the way. think what file its calling that src img url to load. where is your html file placed and how you can reach the path to the img
Megan
@megan32
Jan 16 2017 13:10
thanks! @adityaparab I'm no where near worrying about performance...this is attempt like 5 on the same chunks of code (that I'm training on from a tutorial)....
CamperBot
@camperbot
Jan 16 2017 13:10
megan32 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: megan32 already gave adityaparab points
Megan
@megan32
Jan 16 2017 13:10
it's just not my night, so it's not going to be a performance night either haha
@sorinr Big folder: Weather_App_V2 --> internal folder --> Imgs --> codes --> image
imgs*
Sorin Ruse
@sorinr
Jan 16 2017 13:13
@megan32 where is your html file calling that img placed into that structure above?
Megan
@megan32
Jan 16 2017 13:13
@darth the quotes "rain" vs. rain is the problem haha ...with quotes was changing the other text to defaults
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:13
anyone who could guide me regarding web security field,pentesting and stuff
Megan
@megan32
Jan 16 2017 13:14
<body >
<div class="container" id="background">
    <div class="weather-app">
    <div class="temperature"><span id="temperature">0</span>&deg;</div> 
    <div class="location"><span id="location">Unknown</span></div>
    <div class="top">
      <img class="icon" id="icon" width="75px" src="imgs/codes/rain.png" />
    </div>
    </div>
    </div>  


    </body>
</html>
(plus head at the top...)
Darth Skywalker
@adityaparab
Jan 16 2017 13:15
@megan32 : Yeah. Because you haven't a variable rain declared anywhere so you would have been getting uncaught type error all along. It helps to take a look at console once in a while ;)
Megan
@megan32
Jan 16 2017 13:15
It seems to be happy now..I think it was a blend of your suggest @adityaparab and @sorinr haha
rain isn't a variable though
it's the image title
Darth Skywalker
@adityaparab
Jan 16 2017 13:15
but you can still make var rain = 'rain' :D
Megan
@megan32
Jan 16 2017 13:15
do all images needs to be variables?
Darth Skywalker
@adityaparab
Jan 16 2017 13:16
no.. but it's generally a bad practice to hardcode names. With your code, at this instance, it is not of any importance
Megan
@megan32
Jan 16 2017 13:17
got it. Thank you!
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:17
@sorinr still struggling with simon says
can you see my pen?
Darth Skywalker
@adityaparab
Jan 16 2017 13:18
if only I had a penny for everytime I see @MohammadHasham talking about simon game, I'd have purchased green card to USA by now :D
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:18
@adityaparab Hahahahahhahahahhahah!!! :'p actually i have to complete it by next monday!
i am trying my best!!!...
JD Tadlock
@jdtdesigns
Jan 16 2017 13:19
@MohammadHasham You just posted about pen testing and web security, then ask about the simon game. :D
kirbyedy
@kirbyedy
Jan 16 2017 13:20
multitasking :D
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:20
@jdtdesigns currently doing simon says.Just asking to gather some information!
Darth Skywalker
@adityaparab
Jan 16 2017 13:20
:laughing: all the best @MohammadHasham
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:20
@adityaparab Yeah!!!...
Sorin Ruse
@sorinr
Jan 16 2017 13:21
@MohammadHasham you r doing fine. i like that you don't give up. i confess that i don't like at all the simon game
JD Tadlock
@jdtdesigns
Jan 16 2017 13:21
pen testing and security are extremely more advanced @MohammadHasham ;)
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:21
@sorinr Thanks alot! that really means to me.Such thing from you really motivates.
CamperBot
@camperbot
Jan 16 2017 13:21
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1092 | @sorinr |http://www.freecodecamp.com/sorinr
Muhammad Hasham
@MohammadHasham
Jan 16 2017 13:22
@jdtdesigns but what is the pathway and what are the fields related to it.
longdilong
@longdilong
Jan 16 2017 13:22
Excuse me, I want to figure out how the js part of the codes showed in the http://codepen.io/FreeCodeCamp/full/bELoPJ works, I can understand the html and css part……
is there any books or files that shows the meaning of functions in java(:з)∠)
JD Tadlock
@jdtdesigns
Jan 16 2017 13:29
@longdilong I'm not really sure what you're asking. Are you wanting to know how the js works?
longdilong
@longdilong
Jan 16 2017 13:31
yes……because I want to understand the js codes……and sorry for my poor English.
JD Tadlock
@jdtdesigns
Jan 16 2017 13:31
@MohammadHasham If you're wanting to get into security that'd be computer science and networking.
getting down to the binary
if you're over 20 i'd recommend sticking with learning standard programming or web dev
@longdilong Here's one of many videos on the basics of javascript https://www.youtube.com/watch?v=vEROU2XtPR8
Java and Javascript are two totally seperate programming languages. Not related at all ;)
longdilong
@longdilong
Jan 16 2017 13:40
Thank you!o( ̄▽ ̄)ブ (and sorry for my poor computer science knowledge(:з)∠)
Sorin Ruse
@sorinr
Jan 16 2017 13:48
@longdilong don't be sorry for your English. imagine that on this channels we r people all over the world that their native languag may not english. so just go and ask questions and if we don't understand we may ask you to reformulate yuour question
mazury
@mazury
Jan 16 2017 13:48
Can sbd help? Whenever i try to search for a title which has two words, function returns empty array. What can I do? http://codepen.io/Adam92/pen/RKROPw
Sorin Ruse
@sorinr
Jan 16 2017 13:56
@adamgithub92 you can try spliting your input by " "(space) and rejoin it it by % and after make the call to the api
Pterodactylus
@Pterodactylus
Jan 16 2017 14:00
Hello, I am trying to write a web tool that would when entering an expression, it would be evaluated and a proof tree would be built.
Here is an example of one tree: https://i.imgur.com/J3RvoYT.png
And my attempt so far: https://jsfiddle.net/vRb3P/
Sorin Ruse
@sorinr
Jan 16 2017 14:02
@adamgithub92 you can try something like url: "http://wikipedia.org/w/api.php?action=opensearch&format=json&search=" + $('#input').val().split(" ").join("%")
mazury
@mazury
Jan 16 2017 14:10
@sorinr ths, it worked, though didn't use %, just join(''). Why % anywas?
thx @sorinr
CamperBot
@camperbot
Jan 16 2017 14:11
adamgithub92 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1093 | @sorinr |http://www.freecodecamp.com/sorinr
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:11
@jdtdesigns why would you recommend me that? i am closer to 20? what are its consequences?
Sorin Ruse
@sorinr
Jan 16 2017 14:12
@adamgithub92 sometimes, for some apis % its just a way for "escaping" strings
JD Tadlock
@jdtdesigns
Jan 16 2017 14:16
@MohammadHasham It can take around 15 to 20 years to become intermediate at binary
it's all about how it clicks for you
but normally it doesn't click for a long time
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:22
@jdtdesigns but what about XSS attacks and finding vulnerabilities in web apps and finding bugs? it is also applicable for them?
JD Tadlock
@jdtdesigns
Jan 16 2017 14:23
@MohammadHasham That's networking and has been figured out for awhile. You don't need to dive into that yourself anymore unless that's really what you want to learn about. There are plenty of frameworks for every language that do all that for you now. There's certain things that you shouldn't focus on in your learning, just because there's really no point.
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:24
@jdtdesigns Thanks a ton! that was worth just a couple of more questions
CamperBot
@camperbot
Jan 16 2017 14:24
:cookie: 847 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
mohammadhasham sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Jan 16 2017 14:25
As a web dev, you have 5 to 10 'new' languages to learn basically. So much information, you'll constantly feel overwhelmed. There's no reason to add to that by trying to learn stuff you don't need to. ;)
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:26
actually some of my friends are learning pentesting and using kali linux that fascinates me ! They try to get those 'Bug Bounties' offered by many companies? how would you describe that it is worth
moreover,i did some search online and found that web dev's are pretty easily available and pentesters are less so they have a high payscale as compared to web dev's.
please comment on this @jdtdesigns
JD Tadlock
@jdtdesigns
Jan 16 2017 14:29
@MohammadHasham It's one thing to play with kali and another to understand how pen testing actually works. If they're learning networking then good for them. I have a friend who's been in college for 4 years for networking, comp science. His co-workers still consider him a 'noob'.
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:30
so how do you see the statement that 'web dev's are easily avaiable so there payscale differ'
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 16 2017 14:30
@MohammadHasham There's 10 million copy/paste experts
There's few and far between expert web devs
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:31
@jdtdesigns Thanks! alot just a last thing!
CamperBot
@camperbot
Jan 16 2017 14:31
mohammadhasham sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave jdtdesigns points
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:31
how can one become 'expert' web dev who are 'few' what does it take?
@jdtdesigns
DarylKnapp
@DarylKnapp
Jan 16 2017 14:31
Can someone share some info on how to link a section of say your portfolio? Im making mine just a scroll portfolio, but still want the nav bar to work as well.
JD Tadlock
@jdtdesigns
Jan 16 2017 14:32
@MohammadHasham To give you an idea, i've been doing this for going on almost 8 years and I'm still noob at some things.
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:33
@jdtdesigns So to earn a pretty handsome 'salary' in a well reputed firm.What frameworks and languages are to be learned
JD Tadlock
@jdtdesigns
Jan 16 2017 14:34
@DarylKnapp You need to add an id to your section(<section id="portfolio">). Then in your nav you need to add a hash url to the links matching your id's (<a href="#portfolio">Portfolio</a>).
@MohammadHasham To be considered a 'senior' dev, you usually need to be advanced to expert level in the all the major frameworks for your business stack.
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:36
@jdtdesigns Long way ahead!! for me.
JD Tadlock
@jdtdesigns
Jan 16 2017 14:36
So for js, Angular, Ember, React, Express, Node, Nginx, MongoDB, ect.
Muhammad Hasham
@MohammadHasham
Jan 16 2017 14:37
Okay thanks!
Tim Handy
@TimHandy
Jan 16 2017 14:38
Hi all, I have a single React component rendering to the page, however when it renders it appears to render twice. I have added a console.log() message which shows up twice in the console window. Any ideas why this is?
JD Tadlock
@jdtdesigns
Jan 16 2017 14:39
@TimHandy Are you working in codepen?
Tim Handy
@TimHandy
Jan 16 2017 14:39
@jdtdesigns nope, locally, with webpack -w running and a basic express server.
JD Tadlock
@jdtdesigns
Jan 16 2017 14:40
post your jsx @TimHandy
Tim Handy
@TimHandy
Jan 16 2017 14:41
'use strict'

import React from 'react'
import ReactDOM from 'react-dom'
import './css/styles.scss'
//import Table from 'Table'



//const Table = require('./components/container/Table.jsx')
class App extends React.Component {
    constructor(props) {
        super()
    }

    render() {
        return (
            <div style={{width:"50%", margin:"0 auto"}}>
               <p>hello, this is the app rendered element</p>
            </div>
        )
    }
}

console.log('hello from App.jsx')

ReactDOM.render(
    <App />, document.getElementById('app')
)
JD Tadlock
@jdtdesigns
Jan 16 2017 14:45
@TimHandy It seems like something webpack is doing in rendering.
Tim Handy
@TimHandy
Jan 16 2017 14:45
@jdtdesigns figured it out!
JD Tadlock
@jdtdesigns
Jan 16 2017 14:46
@TimHandy What was the issue?
Tim Handy
@TimHandy
Jan 16 2017 14:46
@jdtdesigns it was due to a missing 'inject: false' in my config
JD Tadlock
@jdtdesigns
Jan 16 2017 14:46
ah, yeah i figured it was webpack related :D
Tim Handy
@TimHandy
Jan 16 2017 14:46
@jdtdesigns thanks for looking :-)
CamperBot
@camperbot
Jan 16 2017 14:46
:cookie: 848 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
timhandy sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
abhijith shenoy
@shenoyabhijith
Jan 16 2017 14:47
i want to align degree to the top
help front end
CamperBot
@camperbot
Jan 16 2017 14:47
no wiki entry for: front end
ehutchllew
@ehutchllew
Jan 16 2017 14:50
@shenoyabhijith Try line-height
its only going a certain height
@ehutchllew
ehutchllew
@ehutchllew
Jan 16 2017 14:53
@shenoyabhijith Might need to create a separate element for your &deg.
Sorin Ruse
@sorinr
Jan 16 2017 15:04
@shenoyabhijith this will never work for the opeanweather api coz the free account of openwether works only over http not https. if you want to use navgator.geolocvation that works only on https you should change your api to apixu.com or wunderground.com or any api that supports https
abhijith shenoy
@shenoyabhijith
Jan 16 2017 15:04
nah working f9 now
JD Tadlock
@jdtdesigns
Jan 16 2017 15:05
@sorinr He's using weatherunderground
checkout every 1 getting location
JD Tadlock
@jdtdesigns
Jan 16 2017 15:07
@shenoyabhijith I would help, but I'd have to re-code everything. There's numerous errors, in the html, css and js.
The forecast isn't going to work with '/'. You need to change that to ','.
working f9
click on the pen and see
JD Tadlock
@jdtdesigns
Jan 16 2017 15:09
@shenoyabhijith Forecast won't work until you change the '/' to a comma.
guaranteed
abhijith shenoy
@shenoyabhijith
Jan 16 2017 15:11
sorry that was a piece of code from my last api call
playingwithinfinity
@playingwithinfinity
Jan 16 2017 15:11
Hey, anyone here finished the Open Weather API project? Does it work? I heard some people saying that it doesn't work on CodePen or some browser.
abhijith shenoy
@shenoyabhijith
Jan 16 2017 15:11
which i deleted now i need to clean up my code
since i'm achieving location in only 1 api call
JD Tadlock
@jdtdesigns
Jan 16 2017 15:14
@playingwithinfinity The issue is with the navigator api. It doesn't work through http anymore and openweather requires premium to use https. You can use an ip location api or just go with another weather api that supports https.
playingwithinfinity
@playingwithinfinity
Jan 16 2017 15:16
@jdtdesigns So should I use a different one?
JD Tadlock
@jdtdesigns
Jan 16 2017 15:16
I would. Weather Underground or a
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:17
@playingwithinfinity yeah that is not working now! i also need to update api :D
playingwithinfinity
@playingwithinfinity
Jan 16 2017 15:17
@jdtdesigns You mean this : https://www.wunderground.com/ ?
JD Tadlock
@jdtdesigns
Jan 16 2017 15:17
Apixu is good also @playingwithinfinity
Yes
playingwithinfinity
@playingwithinfinity
Jan 16 2017 15:19
Apixu seems better than wunderground.
But wunderground has way better documentation IMO
Martynas
@FlintMayers
Jan 16 2017 15:22
Trying to filter an array from args values. Right now it only filters out the first value.

function destroyer(arr) {
  // Remove all the values
  var args = [];
  for(var i = 1; i < arguments.length; i++){
    args.push(arguments[i]);
  }

  function destroy(element){
     for(var i = 0; i < args.length; i++){
       return element != args[i];
     }
  }


  return arr.filter(destroy);
}

destroyer([3, 5, 1, 2, 2], 2, 3, 5);
Ricardo G.
@Rubenricardo
Jan 16 2017 15:35
hello
Ken Haduch
@khaduch
Jan 16 2017 15:35
@FlintMayers - I think that a problem could be that you are looping through args.length, and it could be that the element that you are looking at first might be somewhere in the list but you aren't seeing it right away. You need to be able to look at the entire args list within your function before determining that the element is or isn't there. Using something like .indexOf() that gives you the answer in one shot is probably more efficient for this?
Ricardo G.
@Rubenricardo
Jan 16 2017 15:35
does anybody have any idea why self and social media appear in blue?
Ken Haduch
@khaduch
Jan 16 2017 15:36
@Rubenricardo - because they are anchor elements (links) and that is the default color.
mazury
@mazury
Jan 16 2017 15:37
Anybody knows how to chamge color when hovering over search results and another button? I want background color of those div to change, and so far i onlym managed do to it with random link button http://codepen.io/Adam92/pen/RKROPw?editors=0110
Martynas
@FlintMayers
Jan 16 2017 15:38
@khaduch You mean using indexof inside the for loop in the destroy function? or I don't need the for loop at all this way?
MaxLAB
@Max-LAB
Jan 16 2017 15:38
@FlintMayers it is because for loop checks only first array member and that is 2. for loop initialise every time new element came in.
Ken Haduch
@khaduch
Jan 16 2017 15:38
@Rubenricardo - you can override that, using CSS. Also, you have a typo on one of your attributes for the socialmedia link - hrer instead of href
@FlintMayers - use indexOf instead of a for loop - because you don't need to do both.
Ricardo G.
@Rubenricardo
Jan 16 2017 15:39
@khaduch thanks
CamperBot
@camperbot
Jan 16 2017 15:39
rubenricardo sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2287 | @khaduch |http://www.freecodecamp.com/khaduch
Martynas
@FlintMayers
Jan 16 2017 15:39
@khaduch How would I pass the whole args array inside the indexOf?
Ken Haduch
@khaduch
Jan 16 2017 15:40
@FlintMayers - since it is in scope, you can just reference it, but if you look at the filter method, you can pass an optional argument that can be referenced via the this variable within the function. You could try it that way.
@Rubenricardo - you're welcome
Martynas
@FlintMayers
Jan 16 2017 15:41

@khaduch

function destroy(element){
     if(element.indexOf(args) != 1){
        return element;
     }
  }

IGives me an error

@khaduch why i can't check it like that?
@khaduch I know I am passing in the whole array. I just don't know how to loop throug it without a for loop
Ken Haduch
@khaduch
Jan 16 2017 15:42
@FlintMayers - where you have the element you have to have args instead - because .indexOf is an Array method, so your variable has to be an array.
Ritvars
@RitvarsZ
Jan 16 2017 15:43
@adamgithub92 kts easy in css
Ken Haduch
@khaduch
Jan 16 2017 15:43
so args.indexOf(element) is what you want, and you can just (or should just) pass the result of the comparison back, so you should try return args.indexOf(element) == -1;
Martynas
@FlintMayers
Jan 16 2017 15:43
@khaduch changed it. But know it does the opposite of what is asked of me
@khaduch it filters out the wrong values

function destroyer(arr) {
  // Remove all the values
  var args = [];
  for(var i = 1; i < arguments.length; i++){
    args.push(arguments[i]);
  }

  function destroy(element){
     if(args.indexOf(element) != -1){
        return element;
     }
  }


  return arr.filter(destroy);
}

destroyer([3, 5, 1, 2, 2], 2, 3, 5);
DarylKnapp
@DarylKnapp
Jan 16 2017 15:44
Hey @jdtdesigns are you still in here at all?
Martynas
@FlintMayers
Jan 16 2017 15:44
@khaduch returns 3,5,2,2 while it should only return 1
Ritvars
@RitvarsZ
Jan 16 2017 15:44
@adamgithub92 just do `element:hover{ backround-color: color;}
Ken Haduch
@khaduch
Jan 16 2017 15:44
@FlintMayers - instead of doing !=, do === --- so you are testing the opposite sense of the value
@FlintMayers - oh, and double check what I posted here: :point_up: January 16, 2017 10:43 AM
you don't want to return the element, but the result of the .indexOf lookup...
Martynas
@FlintMayers
Jan 16 2017 15:45
@khaduch thanks. it's solved now but i didn't quite get it
CamperBot
@camperbot
Jan 16 2017 15:45
flintmayers sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2288 | @khaduch |http://www.freecodecamp.com/khaduch
MaxLAB
@Max-LAB
Jan 16 2017 15:46
@adamgithub92 as @RitvarsZ mention, you could
.result-item:hover{
    background-color: red;
}
Ken Haduch
@khaduch
Jan 16 2017 15:46
@FlintMayers - take a few minutes to study what is going on - re-read the .filter() documentation and if you have further questions, just post them!
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:49
@khaduch can you help me with simon says game?
i am stuck at a function
Ken Haduch
@khaduch
Jan 16 2017 15:50
@MohammadHasham - I haven't done that yet, but I can take a look...
Ajay Tanwar
@ajayt365
Jan 16 2017 15:51
hey any good sass tutorials ?
mazury
@mazury
Jan 16 2017 15:51
@RitvarsZ @Max-LAB yeah, i figured and tried that, but did't work
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:52

https://codepen.io/Mohammad_Hasham/pen/JbWOWw?editors=1010

actually i am comparing user generated pattern with computer generated pattern and storing them in an array for comparison.The problem is in the compareArray function might be some logic mistake.
@khaduch

Ken Haduch
@khaduch
Jan 16 2017 15:52
@ajayt365 - I had one that I started, not sure if it's the best, but here's a link: http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:52
@khaduch
Ken Haduch
@khaduch
Jan 16 2017 15:52
@MohammadHasham - I'll give it a shot...
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:52
yeah i'll be really thankful
@khaduch
MaxLAB
@Max-LAB
Jan 16 2017 15:54
@adamgithub92 I tried on your pen, and it worked. If desired behavior is to change background color when hover returned result item
ehutchllew
@ehutchllew
Jan 16 2017 15:54
@MohammadHasham Doesn't let me click any of the buttons after the first round.
playingwithinfinity
@playingwithinfinity
Jan 16 2017 15:54

What is wrong with this API call?

$(document).ready(function(){
  var url = 'http://api.wunderground.com/api/myKey/geolookup/conditions/forecast/q/Canada/Toronto.json';
  $.getJSON(url,function(data){
    var request = JSON.parse(data);
    console.log(request[0]);
  });
})

Nothing logs to the console.

Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:54
@ehutchllew what happens?
yeah actually that is the problem
it doesnt response to anything after the first round
Ken Haduch
@khaduch
Jan 16 2017 15:54
@MohammadHasham - it seems to be doing some crazy stuff...
Muhammad Hasham
@MohammadHasham
Jan 16 2017 15:55
it does not respond to clicks after the first round! @khaduch
mazury
@mazury
Jan 16 2017 15:57
@Max-LAB sorry, i must have benn doing sth wrong, it works with your line :) thx
CamperBot
@camperbot
Jan 16 2017 15:57
adamgithub92 sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @max-lab |http://www.freecodecamp.com/max-lab
MaxLAB
@Max-LAB
Jan 16 2017 15:57
@adamgithub92 nicee :+1:
mazury
@mazury
Jan 16 2017 15:57
@RitvarsZ thx
CamperBot
@camperbot
Jan 16 2017 15:57
adamgithub92 sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
mazury
@mazury
Jan 16 2017 15:59
Now i can't figure out how can i animate up movement of the div which contains h1 and form, can you help me @Max-LAB ? http://codepen.io/Adam92/pen/RKROPw
of course animation as an answer to search button click
MaxLAB
@Max-LAB
Jan 16 2017 16:04
@adamgithub92 give me a minute
playingwithinfinity
@playingwithinfinity
Jan 16 2017 16:06
$(document).ready(function(){
$("#click").on("click",function(){
$("
});
});
lol
MaxLAB
@Max-LAB
Jan 16 2017 16:07
@adamgithub92
success: function(data) {
            $('.open').animate({top:'20px'}, 500);
....
Ajay Tanwar
@ajayt365
Jan 16 2017 16:09
@khaduch it's more of scss than sass. i might need pure sass no braces and stuff
Sorin Ruse
@sorinr
Jan 16 2017 16:12
@jdtdesigns yep. i've seen after he was using wunderground. i had some other pens opened and i looked at somebody else's pen
mazury
@mazury
Jan 16 2017 16:13
Thx a lot @Max-LAB , i think i forgot about dot in (.open), and could find any info bout it in console log
CamperBot
@camperbot
Jan 16 2017 16:13
adamgithub92 sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
:warning: adamgithub92 already gave max-lab points
MaxLAB
@Max-LAB
Jan 16 2017 16:14
@adamgithub92 :+1: just keep on coding this is really beautiful design
mazury
@mazury
Jan 16 2017 16:18
Thx @Max-LAB, another question: if I don't have anything inside document.ready.function(), because function which starts when I click search button is outside, then do I still need it?
CamperBot
@camperbot
Jan 16 2017 16:18
adamgithub92 sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
:warning: adamgithub92 already gave max-lab points
Muhammad Hasham
@MohammadHasham
Jan 16 2017 16:21
@khaduch any idea?
MaxLAB
@Max-LAB
Jan 16 2017 16:23
@adamgithub92 no, you dont need to keep doc.ready function. You can remove it
Ken Haduch
@khaduch
Jan 16 2017 16:32
@MohammadHasham - well, I'm a little confused about what is going on at this point, and unfortunately I have to leave the computer for a couple hours. I could try to give it a look a little later if you are still in need? At this point, I'm pondering the way that you are setting arr1 values in the button click handlers and how the compareArrays function is using that?
But I would need more time to get a better idea of what is going on. Sorry that I cannot spend another half hour or so right now to get a handle on things?
One thing that I don't see anywhere in the code is use of a timer function like setInterval? Did I just miss it? For automatic playback of the sequences, it seems that you would need something like that? I'll try to check in later...
Muhammad Hasham
@MohammadHasham
Jan 16 2017 16:34
@khaduch Thanks for spending your time i hope you will look when free and i have used setinterval as well
CamperBot
@camperbot
Jan 16 2017 16:34
mohammadhasham sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2289 | @khaduch |http://www.freecodecamp.com/khaduch
mazury
@mazury
Jan 16 2017 16:37
Any idea why I can't get the ajax response on my tablet or phone in this? http://codepen.io/Adam92/pen/GrjzYQ?editors=1010
Ken Haduch
@khaduch
Jan 16 2017 16:39
@MohammadHasham - I don't set setInterval in the version that I'm looking at? Should I?
Muhammad Hasham
@MohammadHasham
Jan 16 2017 16:40
actually i am using fadeIn and fadeOut instead of setting intervals
@khaduch
Sorin Ruse
@sorinr
Jan 16 2017 16:44
@adamgithub92 normally you will have to see on tablet or phone the html as you defined it keeping in mind the bootstrap grid you have used
Ken Haduch
@khaduch
Jan 16 2017 16:45
@MohammadHasham - oh, I'll have to look at that more closely then... I don't know if that will work very well, I would think that you would have to use the completeoption in some way to make sure that the flashing sequenced in some reasonable way? Not sure because I haven't really tried this type of thing. It did seem that the flashing of the different colors went rather quickly? Like multiple buttons flashed at once.
mazury
@mazury
Jan 16 2017 16:46
@sorinr I don't understand, what does it mean?
Muhammad Hasham
@MohammadHasham
Jan 16 2017 16:49
@khaduch yeah actually i need to set the milliseconds precisely
to avoid that
Clifton Hackett
@KingRedeye
Jan 16 2017 16:49
anyone available to assist me with understanding one of the challenges?
Make Object Properties Private this challenge to be exact.
Sorin Ruse
@sorinr
Jan 16 2017 16:54
@adamgithub92 if u used the bootstrap grid in a correct manner you should expect to see the page on tablet or mobile the way you want otherwise you should recheck your grid
mazury
@mazury
Jan 16 2017 16:56
@sorinr I didn't use any grid elements...
MaxLAB
@Max-LAB
Jan 16 2017 16:58
@KingRedeye sure, what have you done so far?
Sorin Ruse
@sorinr
Jan 16 2017 16:59
@adamgithub92 then why in your pen settings->css part you have loaded bootstrap?
mazury
@mazury
Jan 16 2017 17:01
hmmm... so far I've done it for defult fonts I guess
Sorin Ruse
@sorinr
Jan 16 2017 17:01
@adamgithub92 almost any element on your page has a stiling dictated by bootstrap. so if you want something on your own you should ether get rid of bootstrap or override it
mazury
@mazury
Jan 16 2017 17:04
@sorinr so I should put these elements inside grid elements like span, etc ?
Muhammad Hasham
@MohammadHasham
Jan 16 2017 17:07
@khaduch any idea?
Sorin Ruse
@sorinr
Jan 16 2017 17:11
@adamgithub92 just read the http://getbootstrap.com/ documentaion and decide for yourself what you want from the framework and what you need to override
Ken Haduch
@khaduch
Jan 16 2017 17:13
I think that I would try to devise a loop using setInterval and a count to control it. I think that trying to time this with jquery is fraught with pitfalls...
css break-down
icon duplicate
Sorin Ruse
@sorinr
Jan 16 2017 17:17
@shenoyabhijith witch icon is duplicated?
mazury
@mazury
Jan 16 2017 17:19
@sorinr ok, thx
CamperBot
@camperbot
Jan 16 2017 17:19
adamgithub92 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1094 | @sorinr |http://www.freecodecamp.com/sorinr
playingwithinfinity
@playingwithinfinity
Jan 16 2017 17:42
Somebody please tell me what's wrong with my code? Nothing is changing on button click
Sorin Ruse
@sorinr
Jan 16 2017 17:50
@playingwithinfinity you have to define an event to take care of your button clik like: example
Reggie
@Reggie01
Jan 16 2017 17:58
@playingwithinfinity Also, your click event should wrap around your ajax call.
// sorinr's example 
$('#click').on('click', function(){
alert('click btn was cliked');
  // insert ajax here
});
abhijith shenoy
@shenoyabhijith
Jan 16 2017 18:10
background image change not working
Addison Dalton
@Addison-Dalton
Jan 16 2017 18:20

Hopefully someone can help me with this. I've been searching a few hours and can't find a solution. I'm working on the weather app and I want a weather icon to change based on the current weather condition. The following code is without checking for the current weather condition, as I can't get my JS to change the icon even on page load.I can get the class to work if I add it directly in my HTML, so I believe I'm doing something wrong in JS. Thanks!

HTML:

<div class="weather-icon wi">
  <i id="#weather-icon"class=""></i>
</div>

JS:

$("#weather-icon").removeClass().addClass("wi-day-sunny");
Reggie
@Reggie01
Jan 16 2017 18:33
@shenoyabhijith background image is currently on html and body elment. Change to just body element.
body {
  background-image:url("https://s27.postimg.org/c1ifb47f7/pexels_photo.jpg");
}
Addison Dalton
@Addison-Dalton
Jan 16 2017 18:36
I found my problem, nevermind!
Reggie
@Reggie01
Jan 16 2017 18:36
@Addison-Dalton do you have a link to codepen page for the project?
@Addison-Dalton nvm
glad you found your problem
Addison Dalton
@Addison-Dalton
Jan 16 2017 18:37
I accidentally included a "#" in my id name in the HTML. Hours of searching just for that, lol!
Reggie
@Reggie01
Jan 16 2017 18:37
Yeah, it happens to everyone. :smile:
Sorin Ruse
@sorinr
Jan 16 2017 18:40
@Addison-Dalton are u using openweather api for retrieving weather data?
Addison Dalton
@Addison-Dalton
Jan 16 2017 18:44
@sorinr Yes.
Sorin Ruse
@sorinr
Jan 16 2017 18:48
@Addison-Dalton weather icons library have special mappings for this lib. read here: https://erikflowers.github.io/weather-icons/api-list.html. so you can use the weather code in rder to compose your icon
Addison Dalton
@Addison-Dalton
Jan 16 2017 18:49
@sorinr I got my icons working now, though. It was a typo error. Thanks nonetheless.
CamperBot
@camperbot
Jan 16 2017 18:49
:star2: 1095 | @sorinr |http://www.freecodecamp.com/sorinr
addison-dalton sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 16 2017 18:51
@Addison-Dalton :+1:
Stoica Valentin
@stoicavali91
Jan 16 2017 19:02
Hi! I am trying to do the TwitchTcv Json API and i don't know how to make the name of the game to appear near the ok user. Can someone please help me? http://codepen.io/stoicavali91/pen/ZLONPb
Stoica Valentin
@stoicavali91
Jan 16 2017 19:09
if only an user is active, the result is good(because is a single answear), but if there are many users online, the code will display the name of the games in the same place, not for every user. Can someone give me a hint or something?
Ken Haduch
@khaduch
Jan 16 2017 19:22
@stoicavali91 - probably a closure problem. Look up the javascriptissexy.com article about closures and look for the "pitfalls" section
Stoica Valentin
@stoicavali91
Jan 16 2017 19:27
@khaduch i understand that it is a problem with my code, but i don't know how to solve it unfortunately. I don't know how to display the stream variable, one value each time. I looks that a for loop doesn't help me
Zeljko Marinkovic
@zeljkomarinkovic
Jan 16 2017 20:06
Hello guys. I have a task to convert my design with fixed dimensions to fluid? What is the easiest way to do that? Im using scss to do this. Is there any easy way to do this?
Tyler Moeller
@TylerMoeller
Jan 16 2017 20:13
@zeljkomarinkovic It depends on the design, but typically you use % instead of pixels for your width, height, margins, padding, etc...
Sam Griffen
@ssgriffen
Jan 16 2017 20:28
working on a FCC lesson in Codepen. Anyone know why I'm getting undefined as my last value. Run the pen and look at the console. http://codepen.io/ssgriffen/pen/vgLjYX?editors=0002
Rommon
@r0mmon
Jan 16 2017 20:53
Guys, where is i can find whether api based on https for Show the Local Weather task? If i use http, the error is getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
alpox
@alpox
Jan 16 2017 20:54
@r0mmon Specifically: http://ip-api.com/docs/api:json
Rommon
@r0mmon
Jan 16 2017 20:56
@alpox it is geo by ip/ Its cool, but what about wether data?
alpox
@alpox
Jan 16 2017 20:57
@r0mmon Most people here use this ip api for determining the location instead of getCurrentPosition due to the error you got.
Not switch the weather api.
I don't know of any other good and free weather api which would be easy to use
Rommon
@r0mmon
Jan 16 2017 20:58
ok, thnks )
Ritvars
@RitvarsZ
Jan 16 2017 21:03
Hi, I have this wordpress site that I need to make responsive. What would be the best approach in this case? Here's a link: http://petrovka15.ru
alpox
@alpox
Jan 16 2017 21:06
@RitvarsZ Break the horizontal aligned parts into vertical parts on smaller screens (The boxes etc.), probably remove the slider or make a specific one for the small screens.
Pack the navigation bar into a breadcrumb menu.
Alexis
@alexisgcn
Jan 16 2017 21:07
help to my random quote
CamperBot
@camperbot
Jan 16 2017 21:07
no wiki entry for: to my random quote
Alexis
@alexisgcn
Jan 16 2017 21:07
help with my little project
CamperBot
@camperbot
Jan 16 2017 21:07
no wiki entry for: with my little project
Alexis
@alexisgcn
Jan 16 2017 21:07
help
Richard Viskovic
@DrMerkwurdigliebe
Jan 16 2017 21:07
help wikipedia viewer
CamperBot
@camperbot
Jan 16 2017 21:07
no wiki entry for: wikipedia viewer
Alexis
@alexisgcn
Jan 16 2017 21:08
i almost finish my random quote machine, but i dont know how to make that my text has the same transition to the colors
Rommon
@r0mmon
Jan 16 2017 21:08
who can help me for review my code. I'm confused with the scope and all of the code has turned into one function. How to make the variables. If i stand var out, i get undefined because asynchrony.
https://codepen.io/r0mmon/pen/bpNjpN
Ritvars
@RitvarsZ
Jan 16 2017 21:09
@alpox But how exactly do I do it? Do I make my own media queries, or just use foundation or some other framework?
alpox
@alpox
Jan 16 2017 21:11
@RitvarsZ Well, is it this exact page you want to make responsive? Then i would say media queries.
Do you build the page newly? Then a framework would be good
But it wouldn't be easy at all to pack a framework into an already existing page.
Ritvars
@RitvarsZ
Jan 16 2017 21:12
@alpox I have to make the whole site responsive - every page of it.
alpox
@alpox
Jan 16 2017 21:13
@RitvarsZ Media queries it is :-)
Ritvars
@RitvarsZ
Jan 16 2017 21:13
@alpox Well, time to study media queries then :D
alpox
@alpox
Jan 16 2017 21:14
Building a page up and then make it responsive is nasty and a long hard job.
Thats why there is the mobile-first approach :D
Ritvars
@RitvarsZ
Jan 16 2017 21:14
@alpox Thanks!
CamperBot
@camperbot
Jan 16 2017 21:14
ritvarsz sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 735 | @alpox |http://www.freecodecamp.com/alpox
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:15
Can I get some help on my project? https://codepen.io/dadleatherwood/pen/BpLegq
alpox
@alpox
Jan 16 2017 21:15
@dadleatherwood Sure
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:17
@alpox How can I center my buttons in my header top to bottom?
Alexis
@alexisgcn
Jan 16 2017 21:17
@r0mmon you miss the property get in your dictioary
alpox
@alpox
Jan 16 2017 21:18
@dadleatherwood center them top to bottom? do you mean you want them listed upon each other?
@dadleatherwood You would have to put them into an unordered list which spans on the whole width
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:19
@alpox I want them centered in the middle of the nav bar, top to bottom. I thought I could do this by changing the margins, but was unsuccessful. Then I tried display:inline, but that didn't seem to work either.
alpox
@alpox
Jan 16 2017 21:19
@dadleatherwood
.nav {
  height: 100px;
  background: white;
  text-align: center;
}
This centers the links in the middle of the page
If you want them stacked you need another approach. Its best to pack them in a list anyways
Alexis
@alexisgcn
Jan 16 2017 21:20
@dadleatherwood you can use flexbox to center whatever you want
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:21
@alpox Made those changes. Now will you look at it?
Now they are stacked on top of one another, and have dots to the left of the nav bar.
Alexis
@alexisgcn
Jan 16 2017 21:22
the header is the div father, and your nav is the son, your header tag must have display:flex; and your nav have properties display: flex;
align-items: center;
justify-content: center;
alpox
@alpox
Jan 16 2017 21:22
@dadleatherwood stacked would be:
.header .btn {
  text-decoration: none;
  background: white;
  color: #58BD91;
  border-radius: 5px;
  font-size: 25px;
}

.nav ul {
  list-style-type: none;
}
<ul>
        <li><a href="#" class="btn" target="blank">About</a></li>
        <li><a href="#" class="btn" target="blank">Portfolio</a></li>
        <li><a href="#" class="btn" target="blank">Contact</a></li>
      </ul>
Alexis
@alexisgcn
Jan 16 2017 21:22
@dadleatherwood do you like flexbox ?
alpox
@alpox
Jan 16 2017 21:23
@alexisgcn Not sure if flexbox is ready to use yet. It depends on the browser compability requirement.
Alexis
@alexisgcn
Jan 16 2017 21:24
you can use the prefix
alpox
@alpox
Jan 16 2017 21:25
@alexisgcn That doesn't help for every browser. Compability for older browsers would still not be guaranteed.
The prefix only specifies the usage of experimental implementations of the browser engines but there are quite some which don't even have that
Milos Ratkovic
@Shadow032
Jan 16 2017 21:25
@dadleatherwood just writte this under your .nav
.nav {
  background: white;
  padding: 30px 0;
  text-align: right;
}
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:25
@alpox Now, how would I get them side by side instead of on top of one another?
Milos Ratkovic
@Shadow032
Jan 16 2017 21:25
@dadleatherwood delete height: 100%
alpox
@alpox
Jan 16 2017 21:26
@dadleatherwood Ah you wanted them side by side anyway? Top to bottom told me something else :D
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:26
@alpox Yeah, I just wanted the spacing different.
Alexis
@alexisgcn
Jan 16 2017 21:26
ok @dadleatherwood look this is my header on codepen, if it can help you good,
alpox
@alpox
Jan 16 2017 21:27
@dadleatherwood
.nav li {
  display: inline-block;
  padding: 0 10px;
}
Ah maybe i understood you wrong still
@dadleatherwood If you wanted to also align it vertically, you can do:
.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}
Milos Ratkovic
@Shadow032
Jan 16 2017 21:31
hey guys, anybody here can help me with weather app ? this is my code pen http://codepen.io/Shadow032/pen/wgzqgz
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:31
@alpox Alright, we almost have it. Now, how can I bring the words down so they are more centered on the navbar?
alpox
@alpox
Jan 16 2017 21:31
Be aware that your body also has some margin defined... you may want to remove it with
html, body {
  padding: 0;
  margin: 0;
}
Milos Ratkovic
@Shadow032
Jan 16 2017 21:32
@dadleatherwood I have them centered just right with your code just do the padding thing
alpox
@alpox
Jan 16 2017 21:32
@dadleatherwood Ah look at my last comment for that centering :-)
@dadleatherwood If you wanted to also align it vertically, you can do:
.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:34
@alpox Thank you so much! I am sure it is a silly question, but I am very new.
CamperBot
@camperbot
Jan 16 2017 21:34
dadleatherwood sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 736 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 16 2017 21:35
@dadleatherwood Its not, lot of people run into this :-)
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:35
@dadleatherwood Can you explain what position:relative did, and transform: translateY(-50%)?
alpox
@alpox
Jan 16 2017 21:37
@dadleatherwood position: relative; goes sure that the element can be aligned relatively to its parent element through the top, bottom, left and right attributes, which would be ignored by the default positioning position: static;.
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:37
@alpox Thank you!
CamperBot
@camperbot
Jan 16 2017 21:37
dadleatherwood sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: dadleatherwood already gave alpox points
alpox
@alpox
Jan 16 2017 21:37
So you can set top: 50%; which moves the elements upper most border/point to the middle (50%)
Since it was the upper most point which was used to align the element, the element would be too much down (As much as half the element)
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:38
@alpox Can you help with something else?
alpox
@alpox
Jan 16 2017 21:38
So you use transform: translateY(-50%); Which moves the element up for half its own size
@dadleatherwood Guess i can
Patirck
@SomeRandom42
Jan 16 2017 21:39
Hey? could someone help me? I am trying to do the Build a Random Quote Machine, but Looking at the JSON lessons. I am at a total loss on what to do . I tried re doing the lessons but understood none of it and just copied the input and did the lesson. But I did not learn anything.
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:39
@alpox I have my icons in the footer. How can I get them to the right of the page instead of below the 'About the Page' h1? I put them in seperate columns, but that did not do what I wanted.
alpox
@alpox
Jan 16 2017 21:40
@SomeRandom42 Do you wanna use an API or not? It would maybe be easier without one for the beginning. So you can go with just a bit local javascript
Patirck
@SomeRandom42
Jan 16 2017 21:41
@alpox I do not plan 2. My initial thought is to make an array with several quotes and use locl javascript. I am at a loss on how to use it here and would like ideas what to look uo\p
alpox
@alpox
Jan 16 2017 21:42
@dadleatherwood Do you want the text to be totally right aligned or rather left aligned but on the right side?
@SomeRandom42 Yea thats the better way for the beginning i would say. Did you do the exercises about javascript objects?
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:43
@alpox Lets do right aligned to the far right of the page
alpox
@alpox
Jan 16 2017 21:43
If you did them but not understand them, try to redo and try to understand what happens there. If you don't, just come here and ask (Maybe better in the HelpJavascript channel)
Patirck
@SomeRandom42
Jan 16 2017 21:44
@alpox I did but I might need to go back and refresh (moved so I have not been coding for a month so I am hazy
alpox
@alpox
Jan 16 2017 21:44
@dadleatherwood When you want the title to stay, put the rest of the footer into a new div which you can give an id to (or a class if you prefer)
@SomeRandom42 Well the outline is that you can have an object:
var obj = {
    someKey: "somevalue"
};

console.log(obj.someKey); // Logs somevalue
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:47
@alpox Aren't the icons/links already in their own <div class="col-md-6">?
alpox
@alpox
Jan 16 2017 21:47
If the key begins with a number or contains whitespace you have to define and access it bit different:
var obj = {
    "51key": "somevalue",
    "key with whitespace": "test"
};
console.log(obj["51key"]); // Logs somevalue
console.log(obj["key with whitespace"]); // Logs test
@dadleatherwood These yes, but not the Made by
Or did you want that one to stay there?
Patirck
@SomeRandom42
Jan 16 2017 21:48
@alpox you know I think my issue is I have no idea how javascript interacts with html / css. I think I have idea of how to write the array (from the exercises) but being thrown into the wild . I am not sure how to make the java script work. in my knowledge the java script bod is just sitting in code pen
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:49
@alpox That one will stay with the About Page title.
@alpox I just want to get the icons to the right of the page.
alpox
@alpox
Jan 16 2017 21:49
@SomeRandom42 The interactions happen through simple function calls. You probably want to use jQuery for this kind of interaction since its presented by freecodecamp
For access special objects on the page you use the html class or id of an element
If you want to access an object with the id "test": $("#test") represents this html object
if you want to access all objects with the class "active": $(".active") represents all these html objects
If you want to set the text of an element: $("#test").text("You put some new text in this element here");
This would set the text "You put some new text in this element here" inside the element with the id test
@dadleatherwood Ah alright. you probably want to set another class to that div then though (additionally) since col-md-6 is not very specific and gets reused since its declared by bootstrap
Patirck
@SomeRandom42
Jan 16 2017 21:52
@alpox I am kind of getting it but do you know a good source with examples? I can play around with it to wrap my mind around it , but hard to do with moving chat bar
alpox
@alpox
Jan 16 2017 21:53
@dadleatherwood Then you can set it position: relative too and right: 0;
@SomeRandom42 Well you can always play in codepen
@SomeRandom42 Just create html there, maybe just a div in the html panel
Then some simple javascript for testing this

@SomeRandom42

<div id="test">
</div>

In the html panel

$("#test").text("You put some new text in this element here"); in the javascript panel

Go sure to add jquery in the javascript panel in settings (top right of page)
blob
Patirck
@SomeRandom42
Jan 16 2017 21:56
@alpox Thanks I will play around with this for a little but and come back thank you :! so much!
CamperBot
@camperbot
Jan 16 2017 21:56
somerandom42 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 737 | @alpox |http://www.freecodecamp.com/alpox
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 21:57
@alpox Okay, will you take a look?
Patirck
@SomeRandom42
Jan 16 2017 21:59
@alpox If i wanted to show an element of an array from javascript onto html how would I do that?
alpox
@alpox
Jan 16 2017 21:59

@dadleatherwood Sidenote:
Put

html, body {
    padding: 0;
    margin: 0;
}

in your css. You have a white border all around

@dadleatherwood Looks right otherwise i think :-)
@SomeRandom42 The full array or one of its elements?
Jacob Leatherwood
@dadleatherwood
Jan 16 2017 22:00
@alpox I would prefer the icons at the bottom to be on the same "row" as the H1. Does that make sense?
Patirck
@SomeRandom42
Jan 16 2017 22:01
@alpox one of the elements
alpox
@alpox
Jan 16 2017 22:02
@SomeRandom42 Well if you have an array say var arr = [1,2,3,4] You can access its first element by arr[0], second element with arr[1] etc. until arr[arr.length-1] for the last element.
If you now want to show it on page you can therefore use:
var arr = [1,2,3,4];
$("#test").text(arr[0]);
Patirck
@SomeRandom42
Jan 16 2017 22:07
@alpox question ? If i want to look up more how to use the $ sign is it JSON? I want to read some more and mess around in code pen with out asking here every couple of minutes when I have a question?
alpox
@alpox
Jan 16 2017 22:11

@SomeRandom42 When you have questions about javascript you'd better go over to HelpJavascript anyway :-) Now i can answer you though.

You have to distinguish JSON and Javascript.
JSON is a text representation of objects Means a special format used to transfer data. It allows to store data in a well readable textformat and even send it through the wire as this.

Javascript objects are datastructures of javascript to represent data. It can be converted to JSON and JSON back to javascript objects.

I know that FreeCodeCamp and its users really often don't properly distinguish that and use the term interchangable which is not appropriate and confuses people.

The sign $ stands for a javascript function, its an abbreviation for jQuery --> $ = jQuery where jQuery is a javascript library which simplifies some tasks like interaction with the HTML DOM.
You find the documentation for jQuery here: http://api.jquery.com/
Its not easy to understand jQuery in its fullest as a beginner. What you have to know is that you always use it with the dollar sign followed by the braces to call the javascript function. Then you put there a selector. $(selector) which selects html objects.
Then you can do manipulations on these objects with predefined manipulation or data retrieval functions defined by jQuery in the link i sent you.
You find a lot of resources about jQuery everywhere on the web, you just have to google jquery <task>
@SomeRandom42 I hope that sums it up :-)
alpox
@alpox
Jan 16 2017 22:17
Hmm i should copy that stuff out for standard answers here because that is stuff which people often don't get to know here but they should
Patirck
@SomeRandom42
Jan 16 2017 22:18
@alpox It does! thanks so much, it helps me know the terms to look for and what i need to look at. My problem before you helped me was I know what i need to do but did not know what to look for. Now I have the basis and the name and even something to play around with to get an idea of what is going on! That helps so much and keeps me from wanting to say quit . Thanks a Million!!!
CamperBot
@camperbot
Jan 16 2017 22:18
somerandom42 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: somerandom42 already gave alpox points
pingrivero
@pingrivero
Jan 16 2017 22:19
Is Bootstrap still being used in the workplace or ReactJS/Angular became the generally used framework in companies?
alpox
@alpox
Jan 16 2017 22:20
@SomeRandom42 You're welcome :-) I'm glad i can help like this. Thats why i'm here, to help ;-)
I know that it can be very confusing in the beginning and noone cares to clearly define stuff here.
@pingrivero Don't mix up different kinds of things.
Bootstrap --> CSS Framework to easily create website designs.
Angular --> Fully fledged javascript framework (Going to be deprecated soon)
ReactJS --> Lightweight component framework (Creation of small web components) without any additional stuff like state containers or anything. Just components.
pingrivero
@pingrivero
Jan 16 2017 22:23
@alpox thanks for the clarification!
CamperBot
@camperbot
Jan 16 2017 22:23
pingrivero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 738 | @alpox |http://www.freecodecamp.com/alpox
jfrancis2
@jfrancis2
Jan 16 2017 22:52
@alpox nice explanations :smile:
alpox
@alpox
Jan 16 2017 22:53
@jfrancis2 Uh thx :D
CamperBot
@camperbot
Jan 16 2017 22:53
alpox sends brownie points to @jfrancis2 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @jfrancis2 |http://www.freecodecamp.com/jfrancis2
jfrancis2
@jfrancis2
Jan 16 2017 22:54
np. I just joined the channel and noticed your comments. Really good explanation of JSON up there!
alpox
@alpox
Jan 16 2017 22:55
@jfrancis2 :blush:
jfrancis2
@jfrancis2
Jan 16 2017 22:55
How do you send brownie points?
alpox
@alpox
Jan 16 2017 22:55
I copied some of the text out for later explanations because such questions often arise here
you just have to thank someone and reference the other in the same post
jfrancis2
@jfrancis2
Jan 16 2017 22:56
@alpox ah, thanks, like this? :+1:
CamperBot
@camperbot
Jan 16 2017 22:56
jfrancis2 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 739 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 16 2017 22:57
@jfrancis2 Exactly :-)
jfrancis2
@jfrancis2
Jan 16 2017 22:58
Love it. I wish I'd found FCC sooner
alpox
@alpox
Jan 16 2017 22:58
Yea its a nice place to learn i think :-) i mostly just stick around here to answer questions, don't need the course myself
jfrancis2
@jfrancis2
Jan 16 2017 22:59
I've always been into web development but mostly backend. Need to brush up my front-end skills. In my day job though I code C# for enterprise applications. I have a unique set of skills - jack of all, master of none!
alpox
@alpox
Jan 16 2017 23:00
Heheh nice thing! I programmed a lot with C# back in the days but now my Windows is up only for games :D
This place surely fits for going into frontend :-)
jfrancis2
@jfrancis2
Jan 16 2017 23:01
I use mine for everything because we do so much of the .net stack at work. I should invest in a linux box again though, I miss it
Definitely
alpox
@alpox
Jan 16 2017 23:01
I'm same, i just know a lot of different fields but am no proper expert in anything. I just did my education as an application dev. And am now studying computer science
jfrancis2
@jfrancis2
Jan 16 2017 23:01
How are you finding CS?
alpox
@alpox
Jan 16 2017 23:02
Computer science or C# now? :D
jfrancis2
@jfrancis2
Jan 16 2017 23:02
Computer science :)
alpox
@alpox
Jan 16 2017 23:02
I like it. Definitely. But i like my university less :P such an organisational mess...
jfrancis2
@jfrancis2
Jan 16 2017 23:03
I'm doing the first year of a computer science degree (work are paying for it). Finding it a bit tedious tbh, learning about basic networking and stuff! Not sure if I will continue it
alpox
@alpox
Jan 16 2017 23:03
I always learnt faster myself... If i just get a book and some environment to try out i learn in 1 week what i learn at university in 3-4 months
jfrancis2
@jfrancis2
Jan 16 2017 23:04
Same here but self-learning with programming can be difficult. It's not easy to find the best practices or figure out some of the deeper topics like data architecture or security
alpox
@alpox
Jan 16 2017 23:04
Yea i believe you that ;-) Had the same thing here. Learn a lot what i already know, just with badly aligned exams
Well i learn a lot of some ground theory behind though which might be useful. But mostly useful only to understand certain papers out there ^^
jfrancis2
@jfrancis2
Jan 16 2017 23:05
Some of it may come in useful one day!
If not, at least you get a degree out of it
alpox
@alpox
Jan 16 2017 23:06
Sure, i hope so :D
Not doing this for nothing :P
I'm in my second year now
Last exam tomorrow morning
(Gotta go to bed maybe)
jfrancis2
@jfrancis2
Jan 16 2017 23:06
Awesome, goood luck!
alpox
@alpox
Jan 16 2017 23:06
So i'm half the way there to a bachelor
Thanks :-)
And good night :-)
jfrancis2
@jfrancis2
Jan 16 2017 23:07
Laters Alpox :)
alpox
@alpox
Jan 16 2017 23:07
Yea see you around here :-) have a good time
Noah Fleitz
@burningPluto
Jan 16 2017 23:14
Hey everyone! I am having some trouble trying to make my navigation mobile friendly.
How can I make this navigation mobile friendly? I'd like to just use new css and html when the width is less than 768px. If anyone can point me in the right direction I'd be so grateful. The pen: http://codepen.io/NoahFleitz/pen/LxZvgE
Sam Griffen
@ssgriffen
Jan 16 2017 23:18
Any suggesting for getting past CORS issues for a JS POST request. I've already tried the crossorigin prepend and the Header set Access-Control-Allow-Origin "*" ...
jfrancis2
@jfrancis2
Jan 16 2017 23:18
@burningPluto You could try using a tag like this: <meta name="viewport" content="width=device-width, initial-scale=1"> but use JS to change the width value based on the width the browser reports.
Francois van Leersum
@Blockshot12
Jan 16 2017 23:22
@burningPluto You can use display: noneto hide html elements with CSS.
or use mobile detect….
not an option on codepen.
But why do you want to do this?
alpox
@alpox
Jan 16 2017 23:24
@burningPluto what you are looking for are media queries. With media queries you can define screen sizes and define special css for each range you specify. Just google it :)
@ssgriffen Also try if the API supports JSONP.
Noah Fleitz
@burningPluto
Jan 16 2017 23:25
The only problem I'm really having is getting all of the links to stack to the right so I can make my mobile navigation. I've been trying to utilize media queries, but the css I wrote before gets in the way of how the links layout.
I need the links to layout to the right in one column and I'm struggling to fix it.
alpox
@alpox
Jan 16 2017 23:27
You can redefine the CSS you wrote before in the media query. Go sure you put the queries at the end of the css file. Also go sure that you check whether you need the !importantdeclaration if some style gets overwritten else
Noah Fleitz
@burningPluto
Jan 16 2017 23:28
@alpox I've done those things. I think I'm trying to fix it the wrong way. I guess I just have to play with it
I have a border on the links an thats whats causing all of the problems. If I don't include the border in the media queries it still uses the css from the default size. If I can take the border away I should be able to fix it. I might have to take the class away that contains the border when the screen width is less than 768px I think that may work
alpox
@alpox
Jan 16 2017 23:44
@burningPluto border: none; in the media query (in the appropriate selector) should help out
the media queries dont define a whole new css, they extend and override what its there, so you can just reset those properties which you dont want to have defined
Noah Fleitz
@burningPluto
Jan 16 2017 23:52
I had two inline elements that needed to be removed so I could re position the links. I used jQuery to remove the elements when the width is less than 768px.
@alpox thanks for helping. I didnt know border none existed either so that works too!
CamperBot
@camperbot
Jan 16 2017 23:52
burningpluto sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 740 | @alpox |http://www.freecodecamp.com/alpox