These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Feb 2017
Ken Nawrocki
@nawrockp
Feb 07 2017 00:01
@mcube25 why the brackets around the plus minus divide multiply strings?
Ralph Nahra
@Rallph
Feb 07 2017 00:52

Hello, could someone help me figure out why my col isn't offsetting like it should? I appreciate it.

http://codepen.io/Rallph/pen/dNjVPK

<!-- Let's have buttons go here -->
<div class = "container">
<div class = "row">

  <div class = "col-sm-4 col-sm-offset-4">
    Hello World
  </div>

  <div>
  </div>

  <div>
  </div>

</div>
</div>
Tyler Moeller
@TylerMoeller
Feb 07 2017 01:02
@Rallph You've added bootstrap 4 to your codepen instead of bootstrap 3
I think this is how they do it in v4: <div class="col-sm-4 offset-sm-4">
Jesus Carrillo
@91integ25
Feb 07 2017 01:08
on bootstrap how do I override the navbar style? I'm having difficulty with it
Ralph Nahra
@Rallph
Feb 07 2017 01:11
@TylerMoeller that worked thanks. :)
CamperBot
@camperbot
Feb 07 2017 01:11
rallph sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1467 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 07 2017 01:11
@91integ25 It depends on what you want to override, usually you can right-click inspect and see what classes are assigned to the item you want to override
If you have a codepen link and say what you want to style, I can take a closer look
Jesus Carrillo
@91integ25
Feb 07 2017 01:14
I've tried restyling the class but it didn't work. I gave the element a new class and it still didn't work I also tried styling it with an id but that didnt work either.
@TylerMoeller
Moisés Man
@moigithub
Feb 07 2017 01:17
@91integ25 css specificity
Jesus Carrillo
@91integ25
Feb 07 2017 01:18
ok I'll try that thanks.]
Hello911
@Hello911
Feb 07 2017 01:46
var add=function(){
  var count=0;
  return function(){return count+=1;};
}();
Is anybody familiar with the concept of closure? Which "self-evoking" function only runs once? And how is count set to 0 only once, even if you call add() multiple times?
Chase
@Athabasco
Feb 07 2017 02:16
Any idea on how I could improve my weather app?
http://codepen.io/Athabasco/pen/wgXdNJ
Tom
@moT01
Feb 07 2017 02:18
@Athabasco says your supposed to have some sort of icon or picture in there
Chase
@Athabasco
Feb 07 2017 02:18
@moT01 Yeah, but I'm not done...
Gulsvi
@gulsvi
Feb 07 2017 02:20
@Athabasco You could support chrome. Only about 6-7% of people use firefox now. https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Tom
@moT01
Feb 07 2017 02:20
k
Chase
@Athabasco
Feb 07 2017 02:21
@SkyCoder01 Yeah I can't support Chrome, navigator.geolocation is disabled on chrome.
Gulsvi
@gulsvi
Feb 07 2017 02:21
Fall back on failure to http location?
Chase
@Athabasco
Feb 07 2017 02:21
@SkyCoder01 ?
nvm
i understand
Gulsvi
@gulsvi
Feb 07 2017 02:22
That's what I do in my weather app so it works on http/https http://codepen.io/skycoder/pen/GrQBdw?editors=0010
Chase
@Athabasco
Feb 07 2017 02:22
It's supposed to say "your browser does not support this web app" but that isnt working
Ralph Nahra
@Rallph
Feb 07 2017 02:26

Ok so I'm having a weird problem

when I have the following code in my document.ready it happens automatically for some reason

$("#online").on("click", select("#online"));

but when I do this instead, it works perfectly fine

$("#online").on("click", function() {
    select("#online");
  });

here is the code for my select() function

function select(tab) {
  $("div").removeClass("selected");
  $(tab).addClass("selected");
}

http://codepen.io/Rallph/pen/dNjVPK

Tom
@moT01
Feb 07 2017 02:29
@Rallph so what's the problem? do the one that works
Gulsvi
@gulsvi
Feb 07 2017 02:50
@Rallph you got me curious :) it seems that when you pass a named function as the second argument, the .on() method acts as .trigger()
Ralph Nahra
@Rallph
Feb 07 2017 03:07
@moT01 I will, I was just curious about it. @SkyCoder01 cool, thanks man
CamperBot
@camperbot
Feb 07 2017 03:07
rallph sends brownie points to @mot01 and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 501 | @mot01 |http://www.freecodecamp.com/mot01
John Nunns
@johnnunns
Feb 07 2017 03:10
function sumDigits(num) {
 var x = num.toString().split('');
for(var i =0; i<x.length; i++){
  result = Number(...x)
}
return result

}

sumDigits(786)
hey guys trying to turn my string of numbers into separate numbers
wanted to use the Number() function, but I'm not going through all the numbers it seems
only returning 7
also tried Number(x[i])
Ken Nawrocki
@nawrockp
Feb 07 2017 03:34
@johnnunns did you mean result += Number(...x)
xemexpress
@xemexpress
Feb 07 2017 03:47
@johnnunns can you show an example of an input?
Carlos Reyes
@carloskappa
Feb 07 2017 03:50
hello room
anybody here could help me with the simon game project?
got some questions
tadm123
@tadm123
Feb 07 2017 04:00
Hi guys, I need help. I'm doing a "Random quote generator" but my quotes suddently stop showing up. Here's my pen:
I double checked and don't know what happened. Any help would be appreciated
Abdijabar Yussuf Mohamed
@aymohamed
Feb 07 2017 04:07
Hello Friends,
Can someone suggest for me what to improve here ? https://codepen.io/aymohamed/pen/ZLJWwJ
Gulsvi
@gulsvi
Feb 07 2017 04:11
@tadm123 You'll need to change your API to use https:// and fix this code:
  $('#getQuote').on(click())'
});
tadm123
@tadm123
Feb 07 2017 04:15
thanks @SkyCoder01
CamperBot
@camperbot
Feb 07 2017 04:15
tadm123 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 135 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Abdijabar Yussuf Mohamed
@aymohamed
Feb 07 2017 04:26
Hello Friends, any suggestion on what to add : https://codepen.io/aymohamed/pen/ZLJWwJ
h1tag
@h1tag
Feb 07 2017 06:05
Hey, I've tried the helpjavascript and help chat rooms with no luck, so I'll post here: "Hey, don't know where to begin from in the Roman Numeral Converter challenge. Any hints?"
Ayush Kumar Singh
@Geomancer91
Feb 07 2017 06:19
http://codepen.io/Geomancer91/pen/qRyxYJ?editors=1111 Hi..can any1 check if it's fine or any1 have any suggestion to improve
Daniel
@doodleslr
Feb 07 2017 06:22
using the geolocation API from mozilla dev, do i need to link to the api? or would using navigator.geolocation etc work automatically to determine the users coordinates?
because even using this code
```
$(document).on("click", "#butt", function(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("asdadsad");
  console.log(position.coords.latitude, position.coords.longitude);
    });
  };
});
Ayush Kumar Singh
@Geomancer91
Feb 07 2017 06:23
@fortMaximus u can see below stackoverflow link it would be helpful http://stackoverflow.com/questions/9083037/convert-a-number-into-a-roman-numeral-in-javascript
Daniel
@doodleslr
Feb 07 2017 06:24
the function(position) doesnt run so console.log asdasd doesnt even run, but as far as i can tell, it should work
h1tag
@h1tag
Feb 07 2017 06:26
@Geomancer91 I need a hint not the solution. Thanks anyway
CamperBot
@camperbot
Feb 07 2017 06:26
fortmaximus sends brownie points to @geomancer91 :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @geomancer91 |http://www.freecodecamp.com/geomancer91
h1tag
@h1tag
Feb 07 2017 06:28
@Geomancer91 and your project is doing fine. Good job
Ayush Kumar Singh
@Geomancer91
Feb 07 2017 06:31
@fortMaximus Thanks for checking
CamperBot
@camperbot
Feb 07 2017 06:31
geomancer91 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Dan
@RetartedZombie
Feb 07 2017 06:32
Hi guys,
Having trouble with my Wikipedia Viewer project. Trying to get previous search results to clear when a new search is submitted but it doesn't work. Any ideas?
http://codepen.io/RetartedZombie/full/apKXJG/
h1tag
@h1tag
Feb 07 2017 06:33
@doodleslr are you using Firefox browser?
Daniel
@doodleslr
Feb 07 2017 06:37
@fortMaximus nope chrome it' the latest version which is compatible
h1tag
@h1tag
Feb 07 2017 06:37
@doodleslr did you check your location settings?
Daniel
@doodleslr
Feb 07 2017 06:40
its on ask when site tries to track location
h1tag
@h1tag
Feb 07 2017 06:41
@doodleslr did your codepen pen page ask you to allow location access?
Daniel
@doodleslr
Feb 07 2017 06:41
oh new error message when resetting location services, getCurrentPosition doesn't run on http needs https
no it hasnt yet
h1tag
@h1tag
Feb 07 2017 06:42
@doodleslr paste your pen url here
Daniel
@doodleslr
Feb 07 2017 06:42
all good found a few frum posts with useful info
@fortMaximus going to use two new APIs instead of navigator.geolocation
Taylor
@kdmstr
Feb 07 2017 07:34
I've been stuck on this for a few days... how do I change the color of the elements in my header based on the div I'm focused on? http://codepen.io/kdmnstr/pen/zNwmEj
normaliz3
@normaliz3
Feb 07 2017 08:04
hi people :) im making my portfolio page now, and im making this nav bar. and its a foxed top, but im trying tp get it to collapse when i resize the window, but it wont work. can anyone help me? :)
normaliz3
@normaliz3
Feb 07 2017 08:12
anyone online? :)
Marianissimus
@Marianissimus
Feb 07 2017 08:15
hi. @normaliz3 add some content first, so we can test it. for instance, add a div class="something", then add css .something {height: 600px}
normaliz3
@normaliz3
Feb 07 2017 08:16
@Marianissimus okei, but istn the point that the links in the navbar is gonna go into the collapse button?
or do i need to add som js code to get it to wokr=
work*
hi btw :D
Marianissimus
@Marianissimus
Feb 07 2017 08:17
you already added the bootstrap js, so it should be ok
normaliz3
@normaliz3
Feb 07 2017 08:17
yes that's why i am som confused. that it doesent work..
Marianissimus
@Marianissimus
Feb 07 2017 08:17
did you copy the navbar from the bootstrap? that should work
it should work when you scroll. you can't scroll now since you have NO content.
buiphuking
@buiphuking
Feb 07 2017 08:18
hi, i want to ask something,
http://yeuhangngoai.vn/
i want to build a web like this, this web is responsive, my question is the should i use bootstrap for nav and adjust it or use pure css for nav ?
Marianissimus
@Marianissimus
Feb 07 2017 08:18
so... add some content, that's the point
normaliz3
@normaliz3
Feb 07 2017 08:18
@Marianissimus i know the scroll function works :) but it when it collapses the links wont show up in the collapse button
Marianissimus
@Marianissimus
Feb 07 2017 08:19
@normaliz3 don't they expand on click?
normaliz3
@normaliz3
Feb 07 2017 08:19
@Marianissimus they should do that,but when i click nothing happens
Marianissimus
@Marianissimus
Feb 07 2017 08:20
check the divs, maybe one is not closed...
kirbyedy
@kirbyedy
Feb 07 2017 08:21
@buiphuking I think that is a word press
normaliz3
@normaliz3
Feb 07 2017 08:21
@Marianissimus okei, now i added a jumbotron. so you see the fixed navbar works :)
kirbyedy
@kirbyedy
Feb 07 2017 08:21
most probably there is a template already
buiphuking
@buiphuking
Feb 07 2017 08:22
@kirbyedy in VietNam, they use wordpress a lot to put the price low,
kirbyedy
@kirbyedy
Feb 07 2017 08:23
not only in vietnam :)
buiphuking
@buiphuking
Feb 07 2017 08:24
newbee like me can't competitive with them without using wordpress
Marianissimus
@Marianissimus
Feb 07 2017 08:25
@buiphuking you can do it with boostrap, or with css + a bit of js / jQuery for the dropdown
you need wordpress / another cms if you want to update it often (the products, so on)
@normaliz3 I'll have to check every div... be patient:)_
normaliz3
@normaliz3
Feb 07 2017 08:27
@Marianissimus i dont think i have the right js active, because now i just added a template with a collapse and it doesent work, but it works from the template site ..
buiphuking
@buiphuking
Feb 07 2017 08:28
http://yeuhangngoai.vn/
this web they bidded $53
normaliz3
@normaliz3
Feb 07 2017 08:29
@Marianissimus i just start over again
Marianissimus
@Marianissimus
Feb 07 2017 08:31
@normaliz3 you need to copy the example again, but this time make the changes
for instance, you still have: data-target="#bs-example-navbar-collapse-1">. this goes nowhere! update the name of the classes and the data-target and everything
they should match
also, you have some font-awesome which is not called... fa fa-bars. that should be added to the html
normaliz3
@normaliz3
Feb 07 2017 08:33
@Marianissimus okei, but still the js doesent work for some reason i even tryed to take the template and copyed the code in brackets. still didnt work
Marianissimus
@Marianissimus
Feb 07 2017 08:33
copy the code but update it to match whatever you specify
also, there are more things you need to do in the file: like attaching the right links to font-awesome or whatnot
normaliz3
@normaliz3
Feb 07 2017 08:35
@Marianissimus i have tried to do every thing. the only thing that doesent work is the js itsleft. even i f i copy a nav bar with the collapse working in a template. it wont work in brackets or pen even if i change the font etc
normaliz3
@normaliz3
Feb 07 2017 08:42
@Marianissimus you see? i tried this. still the js wont work
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:43
@Marianissimus you need to add jquery
normaliz3
@normaliz3
Feb 07 2017 08:43
i think ill just skip the collaspe part
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:43
js tab "quick add" jquery
normaliz3
@normaliz3
Feb 07 2017 08:44
i have added jq still doesent work
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:44
Capture d’écran 2017-02-07 à 09.44.00.png
add it before bootstrap
put bootstrap js call in second place
normaliz3
@normaliz3
Feb 07 2017 08:46
you sir. are absolute the best person i ever talked to! THANKS it worked out fine :D
so for the collapse i need both js and jq?
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:47
sorry @Marianissimus misread the name i talked to @normaliz3 all this time :)
@normaliz3 you're welcome
yes and one more i think i look at it
normaliz3
@normaliz3
Feb 07 2017 08:49
@AlexanderDom i need to add 1 more thing? btw do you know how i can add like this? if i klik a link i my navbar right. let ex say i klikk the link About... how can i make it so when i klikk this it takes me down the site where the about section is?
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:49
tether like said in js error, Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
by the way
you can drag and drop scripts to change order
normaliz3
@normaliz3
Feb 07 2017 08:50
@AlexanderDom uhm thats a long as code right there XD
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:50
@normaliz3 look at final screenshot
Capture d’écran 2017-02-07 à 09.50.58.png
normaliz3
@normaliz3
Feb 07 2017 08:51
okei so i cant do that with just bootstrap?
i need to use thether?
normaliz3
@normaliz3
Feb 07 2017 08:52
ah okei i can do it with bootstrap but i need the plugin fomr thether :)
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:52
yes :)
normaliz3
@normaliz3
Feb 07 2017 08:53
ah i see :) now i just need to find the code for that and try to fill out mi site :D
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:55
:]
normaliz3
@normaliz3
Feb 07 2017 08:55
1 last question. where can i find the link so i can add thether? :)
sorry im kinda new to coding so :)
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:55
links for what exactly sorry ?
normaliz3
@normaliz3
Feb 07 2017 08:56
the link i need to put im my pen so i can use thether :)
like http...thether.js whatever xD
Alexander Domikov
@AlexanderDom
Feb 07 2017 08:56
in js tab between jquery and bootstrap script
like in my screenshot
normaliz3
@normaliz3
Feb 07 2017 08:57
okei i have done it. now i have to try to make the website.
@AlexanderDom can you check this out? if you click the link about https://blackrockdigital.github.io/startbootstrap-freelancer/
you see the way it takes you down to it? thats thether?
Alexander Domikov
@AlexanderDom
Feb 07 2017 09:01
you mean that scrolling motion ?
normaliz3
@normaliz3
Feb 07 2017 09:02
yes
<li class="page-scroll">
<a href="#about">About</a>
</li>
like this?
x
xD
Alexander Domikov
@AlexanderDom
Feb 07 2017 09:02
in fact tether is needed for some other thing in bootstrap not nav scroll behavior but because bootstrap have all his "stuff" together in one big script you need other script -> thether
Sander Berntsen
@sbxn14
Feb 07 2017 09:23
http://codepen.io/sbxn14/pen/RKZyGp when I press enter my page just refreshes. what did I do wrong?
Waqas Abbasi
@Waqas909
Feb 07 2017 09:47
Hey guys
Does anyone know how I can position my "098" numbers under the big 200 numbers?
http://codepen.io/Waqas909/pen/OWENwR?editors=1100
and position them in a way that they update towards the left and not to the right, so if it's a big number it doesn't go off the calculator
kinda stuck on this
Clyde Lobo
@oppiniated
Feb 07 2017 09:50
@Waqas909 add position: absolute; bottom: 0; right: 17px; to #lower rule
Waqas Abbasi
@Waqas909
Feb 07 2017 09:50
I tried that
but like i said if someone enters a long number, it just goes off the calculator
oh wait

oh okay that works.

Thank you @oppiniated

CamperBot
@camperbot
Feb 07 2017 09:51
waqas909 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 557 | @oppiniated |http://www.freecodecamp.com/oppiniated
Waqas Abbasi
@Waqas909
Feb 07 2017 09:52
I tried something similar except I used left: 265px instead .-. somehow it ended in the same spot
kirbyedy
@kirbyedy
Feb 07 2017 10:08
@Waqas909
  display:flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-end;
on the #screen
but remove the float on your upper and lower
kirbyedy
@kirbyedy
Feb 07 2017 10:14
Screen Shot 2017-02-07 at 12.13.51.png
@Waqas909
Waqas Abbasi
@Waqas909
Feb 07 2017 10:17
@kirbyedy Thank you, that helps alot
CamperBot
@camperbot
Feb 07 2017 10:17
waqas909 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1742 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Millen812
@Millen812
Feb 07 2017 11:24
is there a problem with bootstrap in CodePen today?
started a new project, tried to import that but it doesn't show correctly http://getbootstrap.com/components/#nav
3tmaan
@3tmaan
Feb 07 2017 11:25
@kirbyedy I don't really recommend using display flex yet, bowsers compatibility issues
@kirbyedy instead you can use pure vanillaJs
@kirbyedy at least your are working for a specific device or browser
kirbyedy
@kirbyedy
Feb 07 2017 11:29
@3tmaan example on the compatibility issues please
3tmaan
@3tmaan
Feb 07 2017 11:33
@kirbyedy display:flex is not recognized under IE11. So if your target majority has IE 10 (for ex), there will be a problem with display of that specific element.
Colin N. Creighton
@colincreighton
Feb 07 2017 11:33
@Millen812 check the codepen settings for the bootstrap link. when I had problems it was because the page was https but the link in the settings was only http.
3tmaan
@3tmaan
Feb 07 2017 11:34
@kirbyedy check this link out: http://caniuse.com it helping me a lot
Colin N. Creighton
@colincreighton
Feb 07 2017 11:35
Can anyone help with the Random Quote Machine? The code from the example exercise doesn't work to display the contents of the json from this site I found http://quotes.rest/qod.json. I can't find any documentation on how it should look like.
Clyde Lobo
@oppiniated
Feb 07 2017 11:55
@colincreighton What is the issue? Do you have a link?
Spyrantis Theodoros
@thodorisanta
Feb 07 2017 12:16

im working on the calculator project. Can you give me any tips on how to make the "show dialog" on the top? and also what do you think of my calculator so far?

https://codepen.io/oshikurou/pen/WRyJwm?editors=1100

Millen812
@Millen812
Feb 07 2017 12:25
ty @colincreighton but the link was indeed https. Don't really know why it's not working.
CamperBot
@camperbot
Feb 07 2017 12:25
millen812 sends brownie points to @colincreighton :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @colincreighton |http://www.freecodecamp.com/colincreighton
Rennie Bevineau
@Renniesb
Feb 07 2017 12:37
How do I create a full-width of a col-3 side image in bootstrap?
3tmaan
@3tmaan
Feb 07 2017 12:37
@thodorisanta It's looking nice so far, you are doing a good job with it. You can put your calculator container (#calculator) on position relative and your show dialog on position absolute with a specific height and top value to adjust according to your needs..
Spyrantis Theodoros
@thodorisanta
Feb 07 2017 12:46
@3tmaan to be honest im not sure i understand what you mean :/
Rennie Bevineau
@Renniesb
Feb 07 2017 12:46
How would I create the image on the left in this picture?
blob
See how it is full width to the left
full height full width and it isn't 50% width
I mean it doesnt take up half the screen
it takes up quarter of the screen
and that should be responsive
How do I do it?
Sorin Ruse
@sorinr
Feb 07 2017 12:58
@Renniesb you can do it by eather background-image applied to that left container or using an image tag inside the container.for both ways its very important to have the right image resolution. you'll not be able to place the right way a landscape img into a portrait container. hope it makes sense
taltmann42
@taltmann42
Feb 07 2017 13:01
@Renniesb the bootstrap cols usually have padding, you'd have to write your own CSS to remove the padding in order to fully fill a column. Then for the image it's better to use it as background-image, then you can add background-size:cover which will scale the image up so the whole element is filled with the background. For the full-height, give the container a height:100vh
Rennie Bevineau
@Renniesb
Feb 07 2017 13:04
Sorin Ruse
@sorinr
Feb 07 2017 13:05
@taltmann42 yes but as i said above a landscape img using bg-size: cover and height:100vh doesn't fully solve the problem into a portrait container space
taltmann42
@taltmann42
Feb 07 2017 13:07
@sorinr well yes, but partly - if you want to support all possible screens at some point, parts of an image have to be cut off somewhere. what if the screen is pretty damn long but not that high (as in http://devinsblog.com/wp-content/uploads/2009/06/nec-crv43_3-530x323.jpg )? In that case, the 25% width image might as well be at landscape proportions.. or near to a square
@Renniesb ...is that a challenge/project on freecodecamp?
Rennie Bevineau
@Renniesb
Feb 07 2017 13:10
No it isn't
taltmann42
@taltmann42
Feb 07 2017 13:10
So it's from a client
Rennie Bevineau
@Renniesb
Feb 07 2017 13:10
yes
taltmann42
@taltmann42
Feb 07 2017 13:10
wow
Sorin Ruse
@sorinr
Feb 07 2017 13:12
@taltmann42 <picture> tag with different sources tailored for pixel perfect(some photosop needed in here) display may help
John Alcher
@alchermd
Feb 07 2017 13:13
Is my problem unsolvable? My page is https://alchermd.github.io/random-quote-machine/ and if you look at the console, you'll see the error message.
taltmann42
@taltmann42
Feb 07 2017 13:13
@sorinr yep that would be a nice state of the art solution :) but in my experience clients don't really provide the developer with so much assets, unless they have a great designer
Clyde Lobo
@oppiniated
Feb 07 2017 13:14
@alchermd Can you comprehend what the error messages mean?
John Alcher
@alchermd
Feb 07 2017 13:14
@oppiniated I do. Which makes me think that the only solution is if the API that I use migrates to HTTPS...
Clyde Lobo
@oppiniated
Feb 07 2017 13:15
@alchermd Yes. But that might be a paid service
Sorin Ruse
@sorinr
Feb 07 2017 13:18
@taltmann42 actually they almost provide you nothing. they expect you to be a magician and pull out of your hat the right things they want :)
taltmann42
@taltmann42
Feb 07 2017 13:19
@sorinr yeah.. no not doing that anymore.. well sometimes for smaller clients, but otherwise I take projects where the design is already approved
Sorin Ruse
@sorinr
Feb 07 2017 13:26
@taltmann42 i switched for some time to financial apps where where u don't have much of a design but a lot of UX/Functionality
taltmann42
@taltmann42
Feb 07 2017 13:27
@sorinr oh nice, but I'm not sure if I'd be ready for financial apps, since a simple bug could have some serious consequences
Rennie Bevineau
@Renniesb
Feb 07 2017 13:28
Not sure if I understand
So image has to be perfect square right?
then it will be scalable
kirbyedy
@kirbyedy
Feb 07 2017 13:29
@3tmaan oh only IE11, well I can live without it :D
Sorin Ruse
@sorinr
Feb 07 2017 13:32
@Renniesb think that any picture have a ratio like width/height. so to scale it proportionally you will have to maintain the same ratio all the time be it 1/1 in case of squares
Rennie Bevineau
@Renniesb
Feb 07 2017 13:33
But the code I used isnt keeping it in the col-4 width
it is outside and I dont know why
background-size: cover should cover the width of the column correct?
and with image responsive class it shrinks image too much
taltmann42
@taltmann42
Feb 07 2017 13:36
@Renniesb you should set a max-width for your image if you don't want it to overflow its container. also, background-size only works when the image is a background-image, not an img-tag. Also you shouldn't only rely on bootstrap to create responsive sites
Sorin Ruse
@sorinr
Feb 07 2017 13:38
@Renniesb in that example your image is 1000/1079px lets say almost square. try make your img like: <img class="img-responsive" src="http://i.imgur.com/V7qTQXY.png?2"/>
asmaamoussa
@asmaamoussa
Feb 07 2017 13:39

@asmaamoussa
hi... I am working on this exercise:
Fill in the event handler below to apply the class "btn-like" to the $(".btn") element when a key is pressed. Use $(".btn") to select the Like button. Use .toggleClass() to apply the class "btn-like".

var main = function() {
$(".btn").keypress(function() {
$(".btn-like").toggleClass();

});
};

$(document).ready(main);

taltmann42
@taltmann42
Feb 07 2017 13:40
@asmaamoussa you have to provide toggleClass with a parameter, otherwise, how should jQuery know which class should toggle?
Rennie Bevineau
@Renniesb
Feb 07 2017 13:40
Oh yeah, I didn't see that I forgot to take out image tag
still doesn't work
correctly
asmaamoussa
@asmaamoussa
Feb 07 2017 13:41
@taltmann42 actually I put the ".btn-like" in the toggle class at first
but didn't know what to put at the beginning
taltmann42
@taltmann42
Feb 07 2017 13:42
@asmaamoussa but as far as I see someone in the main help chat already answered you
PipsChips
@PipsChips
Feb 07 2017 13:42
Hi! Could someone pls help me with wikipedia's API:
http://codepen.io/PipsChips/pen/zNLMyV
Rennie Bevineau
@Renniesb
Feb 07 2017 13:42
Ok it is better now but not right. How can I improve this- http://plnkr.co/edit/iWn2LJrQ6anGsUhkhLMa?p=preview
asmaamoussa
@asmaamoussa
Feb 07 2017 13:42
yes, @taltmann42 they wee late so I posted the question here
Rennie Bevineau
@Renniesb
Feb 07 2017 13:43
It auto crops
asmaamoussa
@asmaamoussa
Feb 07 2017 13:43
he addressed the problem as well but I still don't know what to put in the beginning
taltmann42
@taltmann42
Feb 07 2017 13:44
@Renniesb
  1. try background-position:center
  2. of course it crops somewhere, otherwise it would be stretched at some point
  3. someone who has "experience developing responsive websites that offer a rich and engaging user experience on all devices" should know all that, especially when accepting a real world project from a client who expects you to know your stuff when you state it
Rennie Bevineau
@Renniesb
Feb 07 2017 13:45
Your cutting deep man
taltmann42
@taltmann42
Feb 07 2017 13:45
@Renniesb sorry..
@Renniesb actually, I'm really sorry didn't want to be a prick, but this is a quite basic responsiveness task, when you actually have a real project. I'd be completely understanding if you'd build a personal page to improve yourself and are stuck somewhere but this is something compeletely different.
Rennie Bevineau
@Renniesb
Feb 07 2017 13:50
I've been building personal pages for years at some point you have to spread your wings
taltmann42
@taltmann42
Feb 07 2017 13:52
@Renniesb have to agree on that one, where the personal pages responsive? Did you try to create responsive pages without bootstrap? The latter one is crucial for understanding how you can use CSS for all possible kind of things
Rennie Bevineau
@Renniesb
Feb 07 2017 13:53
I was taught to use bootstrap in my codecamp. Before so I had a year of experience but It wasn't responsive without bootstrap
And at times it is frustrating because I was told responsive design and bootstrap dont mix
at least half of the time it seems like you have to do one or the other
taltmann42
@taltmann42
Feb 07 2017 13:55
okay.. yeah I hate that about freecodecamp.. bootstrap is nice to know but it also restricts you quite a bit, and doesn't help understand the underlying CSS itself. Just an advice, try to get familiar with pure CSS this will help tons in the future
what to you mean they "don't mix"?
Rennie Bevineau
@Renniesb
Feb 07 2017 13:56
Sometimes I think you have to edit these bootstrap classes to fit the project. img-responsive doesnt always get the job done. you could use img sourceset
taltmann42
@taltmann42
Feb 07 2017 13:56
yeah right that's what i mean.. bootstrap is in the way sometimes.. probably all the times if you want to have a uniqe page
by just looking at your screenshot, I can tell you that bootstrap won't have classes for all of that, there's no way around custom written CSS
Rennie Bevineau
@Renniesb
Feb 07 2017 13:57
:)
taltmann42
@taltmann42
Feb 07 2017 13:58
@Renniesb well but it doesn't resize with the windows width
@Renniesb if you want the image to take 25% width this would probably be what you're looking for http://plnkr.co/edit/rt1fPk8soNPTPNh7Skvx?p=preview
it gets cropped, because the image itself is almost squared, but the container for the image is not, this is normal, you can't squash an image in all kind of possible dimensions without it looking distorted
Rennie Bevineau
@Renniesb
Feb 07 2017 14:05
Ok, I get it. That works
This div is a row and the rows height is not the same as its width
Evan
@EvanDCP
Feb 07 2017 14:05
hey guys can you please tell me if my Submit button is blue (due to bootstrap)?
Colin N. Creighton
@colincreighton
Feb 07 2017 14:06
can anyone help me with the json code for the random quote machine? I've copied the code from the exercise but it doesn't output anything. https://codepen.io/Cncreighton/pen/pRpabQ
taltmann42
@taltmann42
Feb 07 2017 14:07
@Renniesb that's because your image-container has a negative margin-top
Rennie Bevineau
@Renniesb
Feb 07 2017 14:07
I needed to get rid of the margins they impose
taltmann42
@taltmann42
Feb 07 2017 14:07
@Renniesb what do you mean with that?
Rennie Bevineau
@Renniesb
Feb 07 2017 14:08
a container has the margins
taltmann42
@taltmann42
Feb 07 2017 14:08
the container fluid just has padding
@EvanDCP yes that's because of bootstrap
badalsaibo
@heyDante
Feb 07 2017 14:09
@EvanDCP Yes It is blue.
Rennie Bevineau
@Renniesb
Feb 07 2017 14:09
And so I just had to get rid of that padding
taltmann42
@taltmann42
Feb 07 2017 14:09
@colincreighton your first problem is, that you're working on https://codepen, but the quote API uses http
Rennie Bevineau
@Renniesb
Feb 07 2017 14:10
I could of edited the container directly I suppose
Evan
@EvanDCP
Feb 07 2017 14:10
@taltmann42 @heyDante thanks!! I can't see it blue, my pc can't see bootstrap, captchas etc. that's why I asked lol glad to know it's actually working for everyone else
CamperBot
@camperbot
Feb 07 2017 14:10
evandcp sends brownie points to @taltmann42 and @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @heydante |http://www.freecodecamp.com/heydante
:cookie: 463 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 07 2017 14:10
@colincreighton when removing th s from https:// your code progresses a bit further
Rennie Bevineau
@Renniesb
Feb 07 2017 14:10
but the solution I found online suggests the negative margin
badalsaibo
@heyDante
Feb 07 2017 14:10
@EvanDCP I thought you were color blind.
taltmann42
@taltmann42
Feb 07 2017 14:10
@Renniesb yep.. oooor get rid of bootstrap and make CSS do what you want it to do instead of hacking a way around bootstrap
@Renniesb well it is a solution, but it can lead to some unexpected side-effects as you've realized on your own now
Rennie Bevineau
@Renniesb
Feb 07 2017 14:11
It depends on the project
Evan
@EvanDCP
Feb 07 2017 14:11
@heyDante lol no hahah
Rennie Bevineau
@Renniesb
Feb 07 2017 14:11
I think bootstrap has a way of making all sites look the same though
taltmann42
@taltmann42
Feb 07 2017 14:11
I always write my CSS compeletely from scratch
Rennie Bevineau
@Renniesb
Feb 07 2017 14:11
I don't like that
taltmann42
@taltmann42
Feb 07 2017 14:11
yes and I hate that
:thumbsup:
badalsaibo
@heyDante
Feb 07 2017 14:11
@EvanDCP jk
Colin N. Creighton
@colincreighton
Feb 07 2017 14:12
@taltmann42 https://quotes.rest/qod.json exists though, but when i add the use that i still see nothing
taltmann42
@taltmann42
Feb 07 2017 14:12
that's the spirit! free yourself from bootstrap
@colincreighton pen.js:33 - Uncaught TypeError: json.forEach is not a function
Rennie Bevineau
@Renniesb
Feb 07 2017 14:12
But some course instructors make the point that writing everything from scratch can take longer
I say that it can take just as long if you have to correct everything
Colin N. Creighton
@colincreighton
Feb 07 2017 14:13
@taltmann42 how do you see that? AnalyseJS reports no errors
taltmann42
@taltmann42
Feb 07 2017 14:13
@Renniesb and it takes up less place, loads faster, is more flexible, easier to change, and has no tons of unused declarations. Also, if you've done a few projects you have some places to get your css from when you see a similar feature
Colin N. Creighton
@colincreighton
Feb 07 2017 14:13
also that is a copy of the code used in the FCC exercise
Clyde Lobo
@oppiniated
Feb 07 2017 14:14
pen.js:33 Uncaught TypeError: json.forEach is not a function at Object.success (pen.js:33) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js:4)
taltmann42
@taltmann42
Feb 07 2017 14:14
@colincreighton you can open the dev-tools: right-click somewhere in the pen -> Inspect Element -> then go to the "Console"-tab
Clyde Lobo
@oppiniated
Feb 07 2017 14:14
@taltmann42 Damn.. you gave away the secret :P
Colin N. Creighton
@colincreighton
Feb 07 2017 14:15
ok cool
but i don't understand what the right way to reference all the objects is. i couldnt find any documentation on it
taltmann42
@taltmann42
Feb 07 2017 14:15
@oppiniated so you prefer copy/pasting everything from the console to the chat? ;)
Clyde Lobo
@oppiniated
Feb 07 2017 14:15
@taltmann42 That's the dream :)
Colin N. Creighton
@colincreighton
Feb 07 2017 14:16
i understand that the keys and values in the site i use will be different from the exercise example but i thought the code the way it is written would at least output everything
Clyde Lobo
@oppiniated
Feb 07 2017 14:16
I think we should suggest FCC to have an article about how to use the dev tools
@colincreighton But why copy paste everything? Do you understand any bit of the code?
badalsaibo
@heyDante
Feb 07 2017 14:16
@oppiniated there is a lesson at a later stage regarding this
taltmann42
@taltmann42
Feb 07 2017 14:17
@oppiniated there is a complete section about chrome devtools :P
after completing the backend-cert... yep that could probably be repositioned
@taltmann42 let me check
Colin N. Creighton
@colincreighton
Feb 07 2017 14:19
i can tell what it looks like it's supposed to do which is assign all the elements of json to an array and then output them. i've tried to look up documentation for the .getJson function and they don't explain it
Rennie Bevineau
@Renniesb
Feb 07 2017 14:19
Doing everything from scratch means you also don't have to learn a new framework every year.
Just learn the new HTML/CSS standards
taltmann42
@taltmann42
Feb 07 2017 14:20
@Renniesb well that too yes.. and if you're proficient in CSS, learning a framework is done much quicker
@colincreighton you can access JSON in the same way you access javascript-objects
Rennie Bevineau
@Renniesb
Feb 07 2017 14:22
I practically learned bootstrap and HTML/CSS side by side
Colin N. Creighton
@colincreighton
Feb 07 2017 14:23
i just haven;t found any examples that show: given x json format this is the way you access it
taltmann42
@taltmann42
Feb 07 2017 14:24
well, bootstrap is basically CSS (+ some JS). So there's nothing inherently wrong with that, but to become a better developer, you have to know the underlying concepts
Colin N. Creighton
@colincreighton
Feb 07 2017 14:24
up until now these things were explained but the json exercise just straight up gave you the exact code to use with explaining each step of it
taltmann42
@taltmann42
Feb 07 2017 14:24
@colincreighton the json format depends on the API you're using and differs everytime. You can log the json in the callback to see it's structure. If you see a key called "results" you can access it with json.results
Baillie O'Grady
@baillieo
Feb 07 2017 14:26
https://codepen.io/baillieo/pen/ZLRJyQ any feedback would be amazing!
taltmann42
@taltmann42
Feb 07 2017 14:29
@baillieo looks really nice, one thing though: maybe remove the scaling-effect from the "App"-field. I expected it to be clickable due to that.
Colin N. Creighton
@colincreighton
Feb 07 2017 14:29
@taltmann42 ah I see! I had tried that before but it wasn't working so I thought it was wrong. Commenting out the foreach and fixing the https seems to have got things responding! Finally! Thank you!
CamperBot
@camperbot
Feb 07 2017 14:29
colincreighton sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 464 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Baillie O'Grady
@baillieo
Feb 07 2017 14:37
@taltmann42 thanks , i reduced the scaling effect
CamperBot
@camperbot
Feb 07 2017 14:37
baillieo sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 465 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Evan
@EvanDCP
Feb 07 2017 14:40
hey guys can you please take a look at my now finished project and check if everything is okay? do all functions work? is it all centered and nicely looking?
taltmann42
@taltmann42
Feb 07 2017 14:43
@EvanDCP the wikipedia-logo is quite big and loads for a while. the container has a gray background-color, so it looks a bit odd.
And the submit-button is below the text-input and shifted to the right a bit
@EvanDCP big, in terms of file size, not how it's actually shown, sorry if that wasn't clear :P
PipsChips
@PipsChips
Feb 07 2017 14:47
Hi! Could someone pls help me with wikipedia's API:
http://codepen.io/PipsChips/pen/zNLMyV
Evan
@EvanDCP
Feb 07 2017 14:49
@taltmann42 thanks! gonna fix it!!
CamperBot
@camperbot
Feb 07 2017 14:49
:warning: evandcp already gave taltmann42 points
evandcp sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
alican karalar
@alicankaralar
Feb 07 2017 15:02
hello
i've got some problems with twitch-api assignment
for some reason, my for loop for iterating through array doesn't work inside the getJSON function, returning "undefined" values, any idea why?
i couldn't understand

for example

  var chan = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0 ; i < chan.length ; i++) {


    getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + chan[i], function(data) {

      console.log(chan[i]);

      if (data.stream !== null) {

        newStream = "<li class=\"" + chan[i] +"\">"+ data.stream.status + "</li>";
      }

      else {

        newStream = "<li class=" + chan[i] + ">"+ data.stream + "</li>";
      }

      document.getElementById('streamslist').innerHTML += newStream;

    });

console.log(chan[i]) returns undefined values everytime when inside the getJSON function, but when used outside of the getJSON but nested inside the for loop it returns correct values.
note that it doesn't work for the url argument for the function and inside the function, but inside the loop outside the getJSON function it runs just fine

alican karalar
@alicankaralar
Feb 07 2017 15:09
and this is my getJSON function
    var getJSON = function(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "json";
        xhr.onload = function() {
            callback(xhr.response);
        };
        xhr.send();
    };
this results in "null" api returns, because i assign the chan[i] value after .../streams/ for api request
Evan
@EvanDCP
Feb 07 2017 15:14
what about now guys? does it look better? http://codepen.io/EvanDCP18/full/qRywmq/
alican karalar
@alicankaralar
Feb 07 2017 15:15
@EvanDCP it works for me :)
Clyde Lobo
@oppiniated
Feb 07 2017 15:18
@EvanDCP The wikipedia logo looks squished
Evan
@EvanDCP
Feb 07 2017 15:18
squished? what do you mean? too large?
alican karalar
@alicankaralar
Feb 07 2017 15:19
@EvanDCP not like large but kind of stretched
from the sides
or maybe stomped from the top :)
Evan
@EvanDCP
Feb 07 2017 15:20
got it!! take a look now!
better?
alican karalar
@alicankaralar
Feb 07 2017 15:22
it looks fine in the full view in the website but in embed it somehow looks stretched again
not that big of an issue i would say, but if you feel like, try to fix it
as for design i would say the search bar is unnecessarily big, which at the end causes the submit button to overflow to the next line
Evan
@EvanDCP
Feb 07 2017 15:23
@alicankaralar I see, thanks! It's so difficult to fix this when I can't actually see what's going on :/ man I wish I could fix this bug I'm having because it's like stupid to code with this computer if I can't actually see the right results of anything I code lol
CamperBot
@camperbot
Feb 07 2017 15:23
evandcp sends brownie points to @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
alican karalar
@alicankaralar
Feb 07 2017 15:24
i would suggest putting them either side by side
or maybe positioning submit button a bit more wisely
@EvanDCP whats wrong with your computer?
Clyde Lobo
@oppiniated
Feb 07 2017 15:25
@EvanDCP The issue is, the image has a dimension of 1:1, you need to set the same height and width
Evan
@EvanDCP
Feb 07 2017 15:26
@alicankaralar for some reason it can't see bootstrap, captchas, API's... it's so weird O.o Okay, I may have fixed this now, can someone confirm?: http://codepen.io/EvanDCP18/full/qRywmq/
@oppiniated oh! got it
alican karalar
@alicankaralar
Feb 07 2017 15:26
you shortened your search bar but submit button is still at the following line
is there a line break? or a different element both displaying block?
you can try display inline for both of them and nest them inside a div maybe
@oppiniated can you help me if you can with my code?
Sanford Banks
@sbanks77
Feb 07 2017 15:29
I am completely stuck at building a personal portfolio webpage like the one in the example
:worried:
Evan
@EvanDCP
Feb 07 2017 15:29
done! see now, do they look aligned now? http://codepen.io/EvanDCP18/full/qRywmq/
PipsChips
@PipsChips
Feb 07 2017 15:29
Hi! Could someone pls help me with wikipedia's API:
http://codepen.io/PipsChips/pen/zNLMyV
alican karalar
@alicankaralar
Feb 07 2017 15:30
hahaha @EvanDCP they are aligned, but the wiki logo is now stretched in height :)
@PipsChips what is the problem?
Evan
@EvanDCP
Feb 07 2017 15:31
@alicankaralar bffff i'm lacking in patience now xD
alican karalar
@alicankaralar
Feb 07 2017 15:32
@PipsChips is it about allow-origin type of error?
alican karalar
@alicankaralar
Feb 07 2017 15:40

update i found the solution in stack overflow.

That's a classical problem : i has the value of end of loop when the callback is called.

You can fix it like this :

for (var i = 0; i < array.length; i++) {
(function(i) { // protects i in an immediately called function
$.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) {
$('#' + array[i]).text(data.query.querypage.results.length);
});
})(i);
}

Mark Ayoub
@mk485eg
Feb 07 2017 15:44
Any ideas how to pass the random quota machine
?
alican karalar
@alicankaralar
Feb 07 2017 15:44
what i learned is, due to their nature, theres a conflict between api calls and for loops, api calls are asynchronous... which was causing the problem in my case, by the time an api call is made, the for loop is already over, hence the chan[i] value returning undefined
@mk485eg what have you done so far?
i can guide you
a little
:sparkles: not too much
Mark Ayoub
@mk485eg
Feb 07 2017 15:45
I need it from scratch
alican karalar
@alicankaralar
Feb 07 2017 15:45
okay what are your ideas
in terms of inner workings
we press a button, and we get a quote
where do we get the quotes from?
Mark Ayoub
@mk485eg
Feb 07 2017 15:46
I will share with you a link
alican karalar
@alicankaralar
Feb 07 2017 15:46
okay
But I am not satisfied I get copy and paste
alican karalar
@alicankaralar
Feb 07 2017 15:49
why are you using json p?
as far as i know jsonp requests are made within the html with a <script> tag
Mark Ayoub
@mk485eg
Feb 07 2017 15:49
I take it copy
alican karalar
@alicankaralar
Feb 07 2017 15:50
okay well you are using an api which is nice
Mark Ayoub
@mk485eg
Feb 07 2017 15:50
:smile:
Good
alican karalar
@alicankaralar
Feb 07 2017 15:50
now what you have to do is, to do the api request properly
do you remember api requests?
if not, go back to json lessons, and go over them once again
Mark Ayoub
@mk485eg
Feb 07 2017 15:51
:+1:
And this could give me the result I need
?
alican karalar
@alicankaralar
Feb 07 2017 15:52
yep
Mark Ayoub
@mk485eg
Feb 07 2017 15:52
I will try
@alicankaralar thanks for your help
CamperBot
@camperbot
Feb 07 2017 15:52
mk485eg sends brownie points to @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
alican karalar
@alicankaralar
Feb 07 2017 15:52
it is simple once you understand what is it
so it is good to invest your time and patience because the following assignments will also require api calls
Mark Ayoub
@mk485eg
Feb 07 2017 15:53
Appreciate
James Barrett
@jamesbarrett95
Feb 07 2017 16:00
Hi guys, currently working on the Twitch Viewer challenge and I seem to be having a problem with my iterations in my for loop... Not sure if it is an API problem. Anyway here is teh codez:
const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
const streamers = document.getElementById("streamers");

for(let i = 0; i < channels.length; i++) {
  let url = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=myclientid&stream_type=all&callback=?";

  function callback(data) {
    const a = document.createElement("a");
    const li = document.createElement("li");
    const span = document.createElement("span");
    const img = document.createElement("img");

    a.setAttribute("href", data.url)
    a.setAttribute("target", "blank");
    a.appendChild(li);
    img.setAttribute("src", data.logo);
    li.appendChild(img);
    span.textContent = data.display_name;
    li.appendChild(span);
    streamers.appendChild(a);
  }

  $.getJSON(url, callback);
}
However whenever I refresh the page it does it lists them in a different order... Example:
This is going to be problematic when I start filtering by who is online and offline... Any help would be great
Sanford Banks
@sbanks77
Feb 07 2017 16:06
whats good folks
PipsChips
@PipsChips
Feb 07 2017 16:06
@alicankaralar
srry for my late answer; the problem is, I don't know what's the problem :). My console is blank
Sanford Banks
@sbanks77
Feb 07 2017 16:08
im making the personal portfolio and im stuck
Or Halimi
@orhalimi
Feb 07 2017 16:08
me too XD
took me so much time to CSS it T_T
@sbanks77 just doing it right now, maybe I will able to help?
Sanford Banks
@sbanks77
Feb 07 2017 16:09
ok @orhalimi ... Im trying to make the border like the example portfolio
Or Halimi
@orhalimi
Feb 07 2017 16:10
the border of the insert fields?
Sanford Banks
@sbanks77
Feb 07 2017 16:10
yea @orhalimi
well the header
i just encountered a similar problem, i guess the answer is in this thread
Or Halimi
@orhalimi
Feb 07 2017 16:11
@sbanks77 I will upload myn to codepen, sec
this one is the right link
@PipsChips what browser are you using, if chrome, inspect
Sanford Banks
@sbanks77
Feb 07 2017 16:13
ok @orhalimi thanks
CamperBot
@camperbot
Feb 07 2017 16:13
sbanks77 sends brownie points to @orhalimi :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @orhalimi |http://www.freecodecamp.com/orhalimi
Sanford Banks
@sbanks77
Feb 07 2017 16:13
i am watching a youtube video also
Or Halimi
@orhalimi
Feb 07 2017 16:13
@sbanks77 https://codepen.io/orhalimi/pen/vgjYjp
take a look if I did something similar
Only the send button went ugly but....not sure what to do about it
T_T
James Barrett
@jamesbarrett95
Feb 07 2017 16:19
@alicankaralar Don't think that's what I'm looking for... I think it's more to do with the API than the actual code
(Well, it must be a problem with the code, but you know what I mean :P)
alican karalar
@alicankaralar
Feb 07 2017 16:19
also
you are making the getjson request outside the for loop
and your variable is defined with let which won't be valid inside the getJSON function
@jamesbarrett95
you want to pass the url into getjson function
not sure if the scope of the url defined in for loop can be passed into getjson as an argument, same goes for callback
Jean Marco Romero
@volkranium
Feb 07 2017 16:27
Do u guys have an idea of whye a div appears behind the other?
alican karalar
@alicankaralar
Feb 07 2017 16:27
@volkranium did you check their position attributes?
also, check their z-index attributes
Jean Marco Romero
@volkranium
Feb 07 2017 16:28
its overlapping getting behind a header div with my nav , i want it to respect the flow of the web page
behind the header
i mean below
alican karalar
@alicankaralar
Feb 07 2017 16:29
so is your nav position fixed?
Jean Marco Romero
@volkranium
Feb 07 2017 16:29
ahh yes
alican karalar
@alicankaralar
Feb 07 2017 16:29
thats why, you can use top:(insert-nav-height-here) for your div
Jean Marco Romero
@volkranium
Feb 07 2017 16:30
ah thanks @alicankaralar
CamperBot
@camperbot
Feb 07 2017 16:30
volkranium sends brownie points to @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
Jean Marco Romero
@volkranium
Feb 07 2017 16:30
can something be fixed and relative at the same time?
alican karalar
@alicankaralar
Feb 07 2017 16:30
no, fixed position removes the element from the natural flow of the page
so that the other elements don't pay attention to its position
hence the first element to come after it is buried underneath or vice versa
Jean Marco Romero
@volkranium
Feb 07 2017 16:31
ok
but it cant be fixed and relative at the same time?
cause i have some elements in position absolute relative to my header
alican karalar
@alicankaralar
Feb 07 2017 16:32
it is possible with this, you might have a container element with fixed attribute, but inside it other elements can be positioned relatively
Jesse Jafa
@awareness481
Feb 07 2017 16:32
Need a little bit of help on the Random Quote challenge. I'm trying to get quotes through an API but nothing is happening
http://codepen.io/tstusr/pen/MJBNKR
alican karalar
@alicankaralar
Feb 07 2017 16:33
@volkranium they are probably relative to something else
Gulsvi
@gulsvi
Feb 07 2017 16:35
@tstusr441 I just looked up that API and they give you the code to use here: https://quotesondesign.com/api-v4-0/
alican karalar
@alicankaralar
Feb 07 2017 16:36
@tstusr441 you might be making a jsonp request when you include "callback=" at the end of your url
which is a different process
as @SkyCoder01 says, look at the api documentation
Sanford Banks
@sbanks77
Feb 07 2017 16:36
@orhalimi it says 404 not found
Jesse Jafa
@awareness481
Feb 07 2017 16:37
The code the page provides doesn't give a new one for each button press. I searched a bit and found out (which might be an incorrect assumption) that I need to use $.ajax() in order to get a new quote for each click
Gulsvi
@gulsvi
Feb 07 2017 16:38
@tstusr441 Try the $.ajax example instead of the getJSON example?
Also, the url has filter[posts_per_page]=1, maybe you need to get 20 instead of 1 and choose a random one?
I did a joke machine instead of a quote machine with reddit, so can't help with that API...
alican karalar
@alicankaralar
Feb 07 2017 16:40
@tstusr441 when you include callback= parameter in your query it might be that the api percieves it as jsonp
Jesse Jafa
@awareness481
Feb 07 2017 16:41
Thanks @SkyCoder01 @alicankaralar I think I ll be able to get it working
CamperBot
@camperbot
Feb 07 2017 16:41
tstusr441 sends brownie points to @skycoder01 and @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
:cookie: 138 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jesse Jafa
@awareness481
Feb 07 2017 16:42
Works now :)
Gulsvi
@gulsvi
Feb 07 2017 16:42

@volkranium Are you talking about the fixed to top navbar in bootstrap? If so, the documentation says to add 70px of padding.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

alican karalar
@alicankaralar
Feb 07 2017 16:42
cool how
Mohamed
@moey4
Feb 07 2017 17:11
i need help on uploading image on codepen
Himanshu Yadav
@heman713
Feb 07 2017 17:34
hey guys!!this is my first time on FCC gitter. I have completed portfolio page with some help,if you guys please could help me to make header responsive it wld be great!!
Jean Marco Romero
@volkranium
Feb 07 2017 17:38
why does my web page look like crap in codepen?
codepen messes up my layout
alican karalar
@alicankaralar
Feb 07 2017 17:51
@volkranium probably some of the css declarations you use are not valid in codepen
did you figure out what are those?
Jean Marco Romero
@volkranium
Feb 07 2017 17:52
not yet @alicankaralar
Gulsvi
@gulsvi
Feb 07 2017 17:54
hard to answer that question without seeing your code @volkranium ...
we're all learning, probably just some coding mistakes
Karthik Nallasivan
@furball514
Feb 07 2017 18:06
Hey guys i just got my front end certificate but its blank doesnt have my name on it whys that? Pls help
Pranav Bhaskar
@CoderPrans
Feb 07 2017 18:09

hey guys,
is something wrong with my code.

var request = new XMLHttpRequest();
request.open("GET", "http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en");
request.onload = function(){

  console.log(request.responseText);
 };
}

the browser is not logging out the responseText.

taltmann42
@taltmann42
Feb 07 2017 18:11
@CoderPrans you need to send() the request
Pranav Bhaskar
@CoderPrans
Feb 07 2017 18:14
thanks @taltmann42
CamperBot
@camperbot
Feb 07 2017 18:14
coderprans sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Pranav Bhaskar
@CoderPrans
Feb 07 2017 18:15

but now its showing

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
@taltmann42

taltmann42
@taltmann42
Feb 07 2017 18:16
@CoderPrans that means that the forismatic-API rejects your request, is it the correct key? maybe their documentation reveals more about how to use the API
Pranav Bhaskar
@CoderPrans
Feb 07 2017 18:17
yes that url is giving raw json data with that key.. @taltmann42
taltmann42
@taltmann42
Feb 07 2017 18:22
@CoderPrans it seems that you have to use JSONP for that API then - some information on it: http://stackoverflow.com/questions/22780430/javascript-xmlhttprequest-using-jsonp
alican karalar
@alicankaralar
Feb 07 2017 18:23

http://codepen.io/lycjee/pen/dNjBPE

can somebody look at my code and tell me why doesn't my js append elements into html?

bennern21
@bennern21
Feb 07 2017 18:23

`<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" type="text/css"/>

<link href="https://fonts.googleapis.com/css?family=Rock Salt" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Special Elite" rel="stylesheet" type="text/css">

<style>

<div class="container-fluid"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

$(document).ready(function() {
$("div").addClass("animated bounce");
});


h1 {
font-family: Rock Salt;
}

h2 {
font-family: Special Elite;
}

</style>

<h1>
Nolan's Portfolio
</h1>

    <h2 >
    ...About Nolan...

</h2>

<div>

<div id="div1" class="container-fluid">
<button class="btn">
</button>
</div>
</div>`

it keeps on saying `HTML Inspector warnings:

The classes container-fluid (1) btn (1) are used in the HTML but not found in any stylesheet.
1`

Rafael
@Koyirox
Feb 07 2017 18:23
hello
bennern21
@bennern21
Feb 07 2017 18:25
hello?
Rafael
@Koyirox
Feb 07 2017 18:25
i was wondering if someone can tell me how to use css to call the path for an image that i have in my computer XD
bennern21
@bennern21
Feb 07 2017 18:25
im stuck
Rafael
@Koyirox
Feb 07 2017 18:25
me too
bennern21
@bennern21
Feb 07 2017 18:26
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" type="text/css"/>
it wont work
Rafael
@Koyirox
Feb 07 2017 18:27
try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
bennern21
@bennern21
Feb 07 2017 18:27
it says the "btn" element isnt in a stylesheet
it still wont work! i need the '"well", "btn", and jQuery"' bootstrap
it still wont work! i need the ' "well", "btn", and jQuery" ' bootstrap
Rafael
@Koyirox
Feb 07 2017 18:29
button dosent appear or work?
bennern21
@bennern21
Feb 07 2017 18:29
it still wont work! i need the ' "well btn and jQuery" ' bootstrap
'well btn jquery` bootstrap'
well btn jquery bootstrap
HELLO!?!??!???!!??!
Rafael
@Koyirox
Feb 07 2017 18:31
i am here
bennern21
@bennern21
Feb 07 2017 18:31
the bootstrap link wont work
its useless
im using www.codepen.io
and its not recgonizing it
Rafael
@Koyirox
Feb 07 2017 18:33
did you try other btn class ? like btn primary?
bennern21
@bennern21
Feb 07 2017 18:34

still saying `HTML Inspector warnings:

The classes container-fluid (1) btn-primary (1) are used in the HTML but not found in any stylesheet.`

still saying HTML Inspector warnings: The classes container-fluid (1) btn-primary (1) are used in the HTML but not found in any stylesheet.
but the button looks blue
it works but its still erroring
alican karalar
@alicankaralar
Feb 07 2017 18:35
Gah
for (let i = 0; i < 8; i++) {

    document.getElementById('channelslist').innerHTML += "<li> <img src=" + channelsReturn[i].logo + "> <a href=" + channelsReturn[i].url + ">" + channelsReturn[i].display_name + "</a> </li>";

  }


  for (let i = 0; i < 8 ; i++) {

    document.getElementById('streamslist').innerHTML += "<li> <img src=" + streamsReturn[i].logo + "> <a href=" + streamsReturn[i].url + ">" + streamsReturn[i].display_name + "</a> </li>";
  }
why doesn'T this work?
channelsReturn has values just before the loop
Rafael
@Koyirox
Feb 07 2017 18:37
mmmm
@bennern21 did you add bootstrap in the setings menu?
bennern21
@bennern21
Feb 07 2017 18:39
no
Rafael
@Koyirox
Feb 07 2017 18:39
then do it
go to settings above in codepen
css
below there is a button i thinks its says quick add
there put boostrap
Or Halimi
@orhalimi
Feb 07 2017 18:49
Hey guys, I have a few problem with jquery http://codepen.io/orhalimi/pen/Kaxpvz?editors=1010
not sure why the button and the hover is not working
Nikki L.R.
@nikkilr88
Feb 07 2017 18:53
Could anyone help me out? Is there a way to stop the content from stretching when scrolling? https://codepen.io/nikkilr88/pen/LxJVym
I have this version here, and I don't have that issue using background-position in the script, but then the problem with this one is that I cannot set the starting position of the image. http://codepen.io/nikkilr88/pen/qRyrNq The other one uses transform
Nikki L.R.
@nikkilr88
Feb 07 2017 19:00
@orhalimi Perhaps it's the z-index
It's set at -1
Karthik Nallasivan
@furball514
Feb 07 2017 19:01
Hey guys is it not possible to download the freecodecamp certificate?
Front end
Nikki L.R.
@nikkilr88
Feb 07 2017 19:01
I have it working after changing it. : )
Karthik Nallasivan
@furball514
Feb 07 2017 19:01
Because when I do my name is cut out
Sorin Ruse
@sorinr
Feb 07 2017 19:03
@nikkilr88 i don't see any content stretching when i scroll
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:03
hey, how to set images in center on our page? i cant figure it out, with margins you actually can do that but if u change a size of a image then u must do it again. How to do it once for all?
Sorin Ruse
@sorinr
Feb 07 2017 19:03
@aleksaknezevic display: block; margin: 0 auto;
Gulsvi
@gulsvi
Feb 07 2017 19:04
@furball514 you probably need to fix your projects before they'll give it to you? Your tribute page has broken images and doesn't even tribute anyone
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:05
@sorinr thanks i did already that but i didnt type 0 onlu margin: auto :)
CamperBot
@camperbot
Feb 07 2017 19:05
aleksaknezevic sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1156 | @sorinr |http://www.freecodecamp.com/sorinr
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:06
i must ask something more, can i add class in css which will give my images possibility to change margins or something like that, i forgot how to do that
Sorin Ruse
@sorinr
Feb 07 2017 19:07
@nikkilr88 and this background-position: cover; is useless in class .phototwo. there is no value "cover" for the background-position.
@aleksaknezevic just add margin: XXpx to the element you want
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:09
i know, but can i make a class in css which i can use later more than once?
i figured out :)
Sorin Ruse
@sorinr
Feb 07 2017 19:12
@aleksaknezevic yep you can make a class and use it but i would use a class only for more properties. lets say you have 5 imgs and you need different margins/padding for each of them. what will u do? create 5 classes?
Nikki L.R.
@nikkilr88
Feb 07 2017 19:12
@sorinr It's the first one I shared
@sorinr background-position: cover was a mistake :D Thanks
CamperBot
@camperbot
Feb 07 2017 19:13
nikkilr88 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1157 | @sorinr |http://www.freecodecamp.com/sorinr
Nikki L.R.
@nikkilr88
Feb 07 2017 19:13
In the first pen I shared, the white space below the picture stretches.
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:18
@sorinr no, i just wanted to try that, i must do that cause i think that if i dont know to do that, one day i will need same thing :P and i will dk how to do
Sorin Ruse
@sorinr
Feb 07 2017 19:21
@aleksaknezevic in case of margin/padding i would just use them on each element and not use a class. you will find yourself creating so many classes that you will forget their names and what they do :)
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:22
ohh i get it :) thansk @sorinr are you learning or you already know all this
Sorin Ruse
@sorinr
Feb 07 2017 19:23
@aleksaknezevic already know it but still learning everyday. in this field you have to continuously learn
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:25
can you look at my tribute page (but i didnt finish it yet ) and tell me what u think?
Sorin Ruse
@sorinr
Feb 07 2017 19:26
@aleksaknezevic just share your pen link
but on this it looks different od full page the images are on right place
Nikki L.R.
@nikkilr88
Feb 07 2017 19:28
Anyone? :)
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:29
@nikkilr88 your page is great :O but im begginer i cant help you but its great :)
Nikki L.R.
@nikkilr88
Feb 07 2017 19:31
@aleksaknezevic Hehe... thanks! I am a beginner too. I appreciate it!
CamperBot
@camperbot
Feb 07 2017 19:31
nikkilr88 sends brownie points to @aleksaknezevic :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @aleksaknezevic |http://www.freecodecamp.com/aleksaknezevic
Gulsvi
@gulsvi
Feb 07 2017 19:31
@nikkilr88 Try using materialize? http://materializecss.com/parallax.html
Then you don't have to create your own parallax from scratch, unless that's what your project is trying to do?
I don't think bootstrap has built in parallax, but I've seen materialize sites use it
This example is kind of like yours: http://stephaniejagiello.com/ and it's in the materialize showcase
Nikki L.R.
@nikkilr88
Feb 07 2017 19:37
@SkyCoder01 Thanks! Yeah, I am making it from scratch.
Gulsvi
@gulsvi
Feb 07 2017 19:39
@nikkilr88 good luck :+1: :) It can be tricky from what I've read, especially on mobile.
Sorin Ruse
@sorinr
Feb 07 2017 19:39
@aleksaknezevic suppose you want something like example
Jason Roeschley
@jroeschley
Feb 07 2017 19:39
Hello! I'm building a tribute page for the first challenge in codepen. I want my h6 elements to be gray but they're not turning gray unless I use in-line styling. I'd like to set all h6 elements to gray, though. I put h6 {
color: gray;
}
...but it doesn't make my h6 elements gray. Could somebody help me?
Nikki L.R.
@nikkilr88
Feb 07 2017 19:41
@jroeschley Can you share your project here?
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:42
@sorinr yes, is that good or not?
I'd like to make my quotes in grey (I've set the quotes as h6 elements).
Sorin Ruse
@sorinr
Feb 07 2017 19:45
@aleksaknezevic take a look at your html structure and mine and decide how you will wanna look your page both on desktop and mobile. read more about the bootstrap grid
aleksaknezevic
@aleksaknezevic
Feb 07 2017 19:46
i dont wanna be noob but idk where to find your project
Sorin Ruse
@sorinr
Feb 07 2017 19:47
@jroeschley close the body { margin-top: 60px; with a }
Jason Roeschley
@jroeschley
Feb 07 2017 19:48
Oh my goodness. Thank you so much! I didn't think to look for that. :smile:
Sorin Ruse
@sorinr
Feb 07 2017 19:53
@aleksaknezevic :point_up: February 7, 2017 9:39 PM and click on the example link
@jroeschley syntax highlighting in any editor is quite a great debugger. if you see some code highlighted other way then the other there is a sign that something is wrong in there :)
NateSutton21
@NateSutton21
Feb 07 2017 19:55
Hello everyone, I'm currently working on the portfolio challenge and I have a problem with the navigation bar. I'm trying to float my name to the left and the rest of the li elements in the navigation to float to the right, but so far I have no luck figuring it out on my own. If someone here could help, that'd be awesome. Here's my codepen project: https://codepen.io/nate-intj/pen/BpPmRR
zerpsoup
@zerpsoup
Feb 07 2017 19:55
Hello, I'm working on the Build a Personal Portfolio Webpage. #2 says "use whichever libraries you need". What libraries are they referring to ?
Ctiller93
@Ctiller93
Feb 07 2017 19:57
Maaaaaaan. That's a bummer.
So it turns out that to use actual geolocation data via navigator.geolocation I have to do it over https.
But the openweather api doesn't let you use https unless you're a pro subscriber. D:
apparently ip-api doesn't work over https either, but the downside is that it's really inaccurate for me.
So apparently doing something where I try to use the navigator and if that doesn't work fall back on the ip method just isn't happening. Anyone got any other workarounds?
Ken Haduch
@khaduch
Feb 07 2017 20:02
@NateSutton21 - if you are using bootstrap - the navbar example code that they have on their site does exactly that. It is easiest to start with that and make changes as you need to.
Rafael
@Koyirox
Feb 07 2017 20:03
anyone know how to use image from your computer instead of using online images?
Ken Haduch
@khaduch
Feb 07 2017 20:04
@Ctiller93 - there is a note in the freecodecamp forum about this - there are other alternative sites that they suggest. These are the links - freeCodeCamp/freeCodeCamp#7853 and maybe this one, too: freeCodeCamp/freeCodeCamp#9145 - you can scan through those, if you haven't seen them, and see if they have any insight to offer?
Ctiller93
@Ctiller93
Feb 07 2017 20:05
:O Sweet. Going to be reading through those. Thanks @khaduch !
CamperBot
@camperbot
Feb 07 2017 20:05
ctiller93 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2431 | @khaduch |http://www.freecodecamp.com/khaduch
hkleindl
@hkleindl
Feb 07 2017 20:06
I'm having trouble lining up some elements in the Tribute Page project. Anyone willing to look at what I have and maybe give me some suggestions?
aleksaknezevic
@aleksaknezevic
Feb 07 2017 20:07
@sorinr its <div class=col-md-12> ?
Sorin Ruse
@sorinr
Feb 07 2017 20:08
@aleksaknezevic yes and img-responsive and i think some minor changes into css :)
Ken Haduch
@khaduch
Feb 07 2017 20:08
@hkleindl - what have you got?
Sorin Ruse
@sorinr
Feb 07 2017 20:09
@khaduch hi Ken. h r u?
Moisés Man
@moigithub
Feb 07 2017 20:09
quotes around the class name "col-md-12" @aleksaknezevic
Sorin Ruse
@sorinr
Feb 07 2017 20:10
@moigithub he just typed them like that. in my code they are "" surounded
hkleindl
@hkleindl
Feb 07 2017 20:12

@khaduch https://codepen.io/hkleindl/pen/pRpqjP

That's the link to the page I'm working on. I'm having trouble with the right image lining up and the caption moves around on me when I switch to full page view, so I'm assuming something is wrong with that as well.

Ken Haduch
@khaduch
Feb 07 2017 20:18
@sorinr - hello Sorin - I'm doing okay, and you?
Sorin Ruse
@sorinr
Feb 07 2017 20:18
@hkleindl move whatever you have between <style></style> tags in the html pane into the css one.much easier to read your style :)
Ken Haduch
@khaduch
Feb 07 2017 20:18
@hkleindl - are you developing this entirely on CodePen, or on a local system and copying it?
hkleindl
@hkleindl
Feb 07 2017 20:20

@sorinr thank you for the tip. I was wondering about that.

@khaduch it's entirely on CodePen.

CamperBot
@camperbot
Feb 07 2017 20:20
hkleindl sends brownie points to @sorinr and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1158 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 2432 | @khaduch |http://www.freecodecamp.com/khaduch
Josie
@Josie-N
Feb 07 2017 20:20
https://codepen.io/CMYK/pen/LxOgJj
Any ideas how I could get rid of that white padding between my rows? :D
Ken Haduch
@khaduch
Feb 07 2017 20:20
@hkleindl - because if your style definitions conflict with Bootstrap definitions, with the way tjat you have it set up, Bootstrap will override your settings since it will be loaded in the wrong order.
Sorin Ruse
@sorinr
Feb 07 2017 20:20
@khaduch quite fine. struggling porting an old project made in laravel(php) into node. i find the hardest part into choosing the right node modules for this job. :)
hkleindl
@hkleindl
Feb 07 2017 20:21
@khaduch any idea which definitions are conflicting?
Ken Haduch
@khaduch
Feb 07 2017 20:22
@hkleindl - I don't know if there is anything, it's just that you could run into problems if you are trying to override bootstrap classes or modify them and things get loaded in the wrong order.
Sorin Ruse
@sorinr
Feb 07 2017 20:23
@Josie-N get rid of border into your .desc class
Ken Haduch
@khaduch
Feb 07 2017 20:24
@hkleindl - one thing that is not correct is your class: "col-xs-4" for the third column - that might be the problem with your caption? I haven't tried it yet.
it should be class= not class:
Josie
@Josie-N
Feb 07 2017 20:24
@sorinr I just did, but nothing changed. https://codepen.io/CMYK/pen/LxOgJj?editors=1100
Ken Haduch
@khaduch
Feb 07 2017 20:25
@hkleindl - that definitely changes the way it works.
hkleindl
@hkleindl
Feb 07 2017 20:26
@khaduch I can't believe I missed that. I'll fix that and see if that fixes what I'm having problems with. Good eye. Thanks.
CamperBot
@camperbot
Feb 07 2017 20:26
hkleindl sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: hkleindl already gave khaduch points
Sorin Ruse
@sorinr
Feb 07 2017 20:26
@Josie-N now i got you want
Ken Haduch
@khaduch
Feb 07 2017 20:26
@hkleindl - that being "fixed" - you might not want to use col-xs-4 because that means that those columns will always be 33% of the screen width, even on the narrowest screens. You can see how it looks, but you possibly want to have a different proportion for better readability on a narrow screen?
Josie
@Josie-N
Feb 07 2017 20:28
@sorinr happy to hear! 😁😊
hkleindl
@hkleindl
Feb 07 2017 20:33
@khaduch if I do 3, 6, 3 the right image still goes beyond the border.
Sorin Ruse
@sorinr
Feb 07 2017 20:35
@Josie-N whant something like this ?
Tony
@FreakishLancer
Feb 07 2017 20:35
Hey guys, I was wondering if you could test my Pomodoro Clock to see if anything is wrong with it. Thanks! http://codepen.io/Freaklancer/pen/JEBONQ
Ken Haduch
@khaduch
Feb 07 2017 20:37
@hkleindl - it is the margin settings that you have in your .subtle-border class - see what happens if you comment those out? (At least that is what I think is causing the overflow...)
Ctiller93
@Ctiller93
Feb 07 2017 20:39
Huh. I see. It might just be best to use the html5 geolocation with one of the other weather API's they mention, but I'm curious now, what are some good IP geolocation API's that won't put my location at an hour away from my actual location?
Tony
@FreakishLancer
Feb 07 2017 20:39
@Ctiller93 You could use the IPInfo API with the APIXU or Wunderground weather APIs
Ctiller93
@Ctiller93
Feb 07 2017 20:41
@FreakishLancer I assume you mean this one? http://www.ipinfodb.com/ip_location_api.php
hkleindl
@hkleindl
Feb 07 2017 20:41
@khaduch that seems to line everything up correctly...
Tony
@FreakishLancer
Feb 07 2017 20:41
@Ctiller93 I meant this one: https://ipinfo.io/developers (You get JSON request with "https://ipinfo.io")
Ctiller93
@Ctiller93
Feb 07 2017 20:42
Huh. Gooootcha.
And it works over https too. Sweet!
Gulsvi
@gulsvi
Feb 07 2017 20:44
@Ctiller93 I use both navigator.geolocation and ipinfo in my weather app. Dark Sky for weather API.
works over http or https
Ctiller93
@Ctiller93
Feb 07 2017 20:45
So I'm guessing you use ipinfo for http and you use navigator.geolocation for https?
I'm avoiding looking at anyone's code. Would be cheating. :P
Gulsvi
@gulsvi
Feb 07 2017 20:45
navigator.geolocation is tried first, if that is blocked (on https) or if the user is using http, it tries ipinfo instead
Ctiller93
@Ctiller93
Feb 07 2017 20:46
Makes sense. Sounds like what I was trying to accomplish.
Gulsvi
@gulsvi
Feb 07 2017 20:46
Removed the link to get rid of the temptation :)
Ctiller93
@Ctiller93
Feb 07 2017 20:46
Hehe. Fair. Thanks. :P
It wouldn't be that hard to pull off. I can totally do it, I just had trouble finding out what could/couldn't work, so thanks a ton! @SkyCoder01 @FreakishLancer .
CamperBot
@camperbot
Feb 07 2017 20:47
ctiller93 sends brownie points to @skycoder01 and @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 363 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Sorin Ruse
@sorinr
Feb 07 2017 20:48
@FreakishLancer there is a problem when switching from focus interval to break. no matter what you have into the break interval it starts counting down with a wrong interval. and the break interval is displayed wrong. not in the circle in the place of focus interval
Ken Haduch
@khaduch
Feb 07 2017 20:48
@FreakishLancer - I set both time periods on your clock to 1:00, after the first minute, the clock is now displaying 0-1:25 as it is counting down? I haven't tried to analyze why that would be. The next thing that I feel it is hard to tell whether you are in the "Focus" or "Break" time - unless you are sitting there watching the clock. Also, I think that the example project (and the description) talks about the timer "going off", which means some kind of sound, at least that is what they have going at the end of a period. SO, those are a couple things that I notice about it.
Sorin Ruse
@sorinr
Feb 07 2017 20:49
@khaduch lol. did the same :)
Tony
@FreakishLancer
Feb 07 2017 20:50
@sorinr @khaduch Thanks for the feedback. I'll fix those things and check back soon!
CamperBot
@camperbot
Feb 07 2017 20:50
freakishlancer sends brownie points to @sorinr and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 2433 | @khaduch |http://www.freecodecamp.com/khaduch
hkleindl
@hkleindl
Feb 07 2017 20:52
@khaduch I figured it out. I made an identical border class as the original subtle-border class and set the left margin to -5px. I appreciate you taking the time to look at my code. Take care!
Tony
@FreakishLancer
Feb 07 2017 20:53
@khaduch Looks like I didn't create the same checks to clear the break interval like I did the focus interval! :(
Ken Haduch
@khaduch
Feb 07 2017 20:54
@FreakishLancer - that's why it is good to have different people try the app! :) You can't always think of everything - good luck fixing it!
@hkleindl you're welcome. good luck with that project!
NateSutton21
@NateSutton21
Feb 07 2017 21:01
@khaduch: I figured it out, I appreciate your help! I've been stuck on this for about a day on something so simple haha.
Josie
@Josie-N
Feb 07 2017 21:02
@sorinr yeees, thank you!
CamperBot
@camperbot
Feb 07 2017 21:02
josie-n sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1160 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 07 2017 21:02
@Josie-N :+1: welcome
Josie
@Josie-N
Feb 07 2017 21:03
@sorinr but how did you do it?
Sorin Ruse
@sorinr
Feb 07 2017 21:05

@Josie-N just added this into css:

div.no-padd {
padding: 0px;
}

and applied this class to all divs col-xx-xx in the html

Josie
@Josie-N
Feb 07 2017 21:05
<div class="col-md-3 no-padd">
Is no-padd like a special attribute ?
Sorin Ruse
@sorinr
Feb 07 2017 21:06
@Josie-N read my answer above
Josie
@Josie-N
Feb 07 2017 21:06
I've never seen div and then .no-padd like that before 😳
Sorin Ruse
@sorinr
Feb 07 2017 21:07
@Josie-N div.no-padd means i'm selecting all divs that have the class no-padd. remember that in css the dot (.) is the identifier for class and # for ids
Josie
@Josie-N
Feb 07 2017 21:09
@sorinr ok, I understand, it's the div before the dot(.) that surprised me
var code = "formatted";
.col-md-4 { padding: 0px; } var code = "formatted";
why would it not simply work like this for example?
I had the padding: 0px idea as well, but didn't think of using it like that 😶(div.no-padd)
Sorin Ruse
@sorinr
Feb 07 2017 21:12
@Josie-N its just to proper identify the exact elements you want to style that way
Tony
@FreakishLancer
Feb 07 2017 21:13

@khaduch @sorinr I've adjusted my clock temporarily so you guys can test it more easily. I think it should work correctly now? http://codepen.io/Freaklancer/pen/JEBONQ

I have a question though - what are some places to get tick/clock sounds? I am having trouble finding audio links of those.

Josie
@Josie-N
Feb 07 2017 21:15
I feel like I'm in my first year at Hogwarts
wizardry
aadeyemi88
@aadeyemi88
Feb 07 2017 21:18
anyone know how to insert text within padding?
under an image
<p>
<center>
<img class="img-thumbnail scale padding-bottom" src="https://static1.squarespace.com/static/5256f6e4e4b086e2b62842e2/t/54bbbd61e4b077c90273b411/1421589862757/" alt="Norman Bolaug and Crew">
<h2 class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - parts of his life-long war on hunger.
</h2>
</center>
</p>
Sorin Ruse
@sorinr
Feb 07 2017 21:18

@Josie-N instead of no-padd class you can use in css:

div[class^='col-md'] {
  padding: 0px;
}

that will be applied to each div with a class starting with col-md

Gulsvi
@gulsvi
Feb 07 2017 21:19
@aadeyemi88 Like this?
<div class="padding">
  <img>
  text
</div>
aadeyemi88
@aadeyemi88
Feb 07 2017 21:21
@SkyCoder01 so i do not have to add separate padding to the image itself?
Gulsvi
@gulsvi
Feb 07 2017 21:21
@aadeyemi88 That would push the text away from the image
aadeyemi88
@aadeyemi88
Feb 07 2017 21:21
@SkyCoder01 ahh ok let me try
Sorin Ruse
@sorinr
Feb 07 2017 21:21
@Josie-N the class will give you the freedom to apply it to only the divs you want not to all of them
Hello911
@Hello911
Feb 07 2017 21:23
function sayHello2(name){
   var text='Hello'+name;
   var say=function(){console.log(text);}
   return say;

var say2=sayHello('Bob');
say2();
What does return say;? Say is a function that logs 'Hello' someone. Also what does var2(); do?
aadeyemi88
@aadeyemi88
Feb 07 2017 21:27
@SkyCoder01 it is still below the padding of the image
Gulsvi
@gulsvi
Feb 07 2017 21:27
@aadeyemi88 Don't use padding on the image
Josie
@Josie-N
Feb 07 2017 21:27
@sorinr thanks again
CamperBot
@camperbot
Feb 07 2017 21:27
josie-n sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: josie-n already gave sorinr points
Gulsvi
@gulsvi
Feb 07 2017 21:27
Just on the div and keep the text inside the div
aadeyemi88
@aadeyemi88
Feb 07 2017 21:28
@SkyCoder01 i removed the image padding
<div class="img-padding">
<img class="img-thumbnail scale" src="https://static1.squarespace.com/static/5256f6e4e4b086e2b62842e2/t/54bbbd61e4b077c90273b411/1421589862757/" alt="Norman Bolaug and Crew">
<h2 class="text-center"> Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - parts of his life-long war on hunger.
</h2>
</img>
</div>
Gulsvi
@gulsvi
Feb 07 2017 21:29
@aadeyemi88 Here's an example: http://codepen.io/skycoder/pen/NdLrRp
you could adjust the padding on the div to have the white background show on the sides and top too if you want it to look like a polaroid (guessing that's the effect you want)
padding: 5px 5px 15px 5px;
No closing </img> tag, by the way maybe that was messing things up in your code
Sorin Ruse
@sorinr
Feb 07 2017 21:32
@Josie-N welcome
@SkyCoder01 i would not create classes for just setting padding. imagine in a larger project you will have elements with diff paddings. what will you do? create a class for each padding value?
Gulsvi
@gulsvi
Feb 07 2017 21:37
I haven't thought that far along yet, just finished wikipedia :/
I suppose I would create containers and columns like in bootstrap with built in padding
and maybe a no-padding class to override default padding?
krckyboy
@krckyboy
Feb 07 2017 21:39

http://codepen.io/krcky/pen/xgaOKy

How to make #first float to the left and #second float to the right while being inside the <header>?

I can't make it just by adding that without removing the background color and whatnot.

aadeyemi88
@aadeyemi88
Feb 07 2017 21:40
@SkyCoder01 yes it worked! thanks but now i need to have the white padding constrict more for the polaroid effect
CamperBot
@camperbot
Feb 07 2017 21:40
aadeyemi88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 143 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Andrew Charlebois
@andrewchar
Feb 07 2017 21:41
@krckyboy give your header a set width and set float: left and float: right to each child element
Sorin Ruse
@sorinr
Feb 07 2017 21:42
@SkyCoder01 no need for classes to reset implicit tags styling. you can use some reset library like normalize.css or reset.css
Andrew Charlebois
@andrewchar
Feb 07 2017 21:42
@krckyboy i would also make then classes, not ids
krckyboy
@krckyboy
Feb 07 2017 21:42
@andrewchar Thank you. Added :smile:
CamperBot
@camperbot
Feb 07 2017 21:42
krckyboy sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @andrewchar |http://www.freecodecamp.com/andrewchar
Gulsvi
@gulsvi
Feb 07 2017 21:42
@sorinr Why add another library on top of my own library though?
I assume you are talking about creating something like bootstrap from scratch?
krckyboy
@krckyboy
Feb 07 2017 21:43
  • Thank you. Added:

header { width: 100%; }

But you see, when I added floats to the IDs, the background of the header disappears.

http://codepen.io/krcky/pen/xgaOKy

Sorin Ruse
@sorinr
Feb 07 2017 21:43
@SkyCoder01 bootstrap incorporates normalize
Gulsvi
@gulsvi
Feb 07 2017 21:43
@aadeyemi88 Glad that worked :)
@sorinr okay, so they do have classes to reset implicit tag styling?
All in the same framework?
Janina Pohorecki
@janepohorecka
Feb 07 2017 21:45
<script type="text/javascript">
    var sections = $('section'),
        nav = $('nav'),
        nav_height = nav.outerHeight();

    $(window).on('scroll', function() {
        var cur_pos = $(this).scrollTop();

        sections.each(function() {
            var top = $(this).offset().top - nav_height,
                bottom = top + $(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
                nav.find('a').removeClass('active');
                sections.removeClass('active');

                $(this).addClass('active');
                nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
            }
        });
    });

    nav.find('a').on('click', function() {
        var $el = $(this),
            id = $el.attr('href');

        $('html, body').animate({
            scrollTop: $(id).offset().top - nav_height
        }, 500);

        return false;
    });
</script>
Why isnt my javascript loading?
Andrew Charlebois
@andrewchar
Feb 07 2017 21:45
@krckyboy its because you have an error. remove the doctype
@krckyboy codepen puts the doctype in already, you just dont see it
Sorin Ruse
@sorinr
Feb 07 2017 21:46
Gulsvi
@gulsvi
Feb 07 2017 21:46
@sorinr Okay, so I'm confused why it would be bad to have a no-padding class then if I'm not using a framework.
Or, using my own I guess
krckyboy
@krckyboy
Feb 07 2017 21:47

@andrewchar Thank you, but why does the background color of the header disappear then?

http://codepen.io/Macxim/pen/bgxeYR

CamperBot
@camperbot
Feb 07 2017 21:47
krckyboy sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:warning: krckyboy already gave andrewchar points
Andrew Charlebois
@andrewchar
Feb 07 2017 21:47
@krckyboy not sure what background color youre talking about. i can see the background color
Gulsvi
@gulsvi
Feb 07 2017 21:47
@sorinr normalize.css seems to override the browser's default styles, not bootstrap's?
because some browsers have different defaults than others
krckyboy
@krckyboy
Feb 07 2017 21:48

@andrewchar I'd really appreciate help, but you see, my goal is to make the #first float to the left, #second float to the right.

Second, I want the #second have the height 100% of the header, so I can add top border on :hover, while also having #second position on the bottom of the header, not on the top like this.

@andrewchar Weird for the color. At first it disappeared. :O
Gulsvi
@gulsvi
Feb 07 2017 21:49
I'm still new at this, so genuinely curious to learn from someone who has done this before, by the way :)
Sorin Ruse
@sorinr
Feb 07 2017 21:50
@SkyCoder01 yes and that means bootstrap first apply the normalize.css and then their own styling. if u r using bootstrap you don't have to worry about the browser defaults but about overriding bootstrap classes :)
Gulsvi
@gulsvi
Feb 07 2017 21:52
Maybe a misunderstanding then, because if I want a bootstrap row with no padding, I have to define some CSS like no-padding to add to the row. I would have to do the same if I built my own CSS framework - even if I incorporated normalize.css with it
I think? :)
getting confused now, should probably study this more :)
Andrew Charlebois
@andrewchar
Feb 07 2017 21:57
@krckyboy i hyjacked your pen and did this. is that what your looking for
Sorin Ruse
@sorinr
Feb 07 2017 21:59
@SkyCoder01 ofc. if you want to override some of the bootstrap implicit classes you will have to create a class of your own be it no-padding but you will have to always use the precedence rule like: <div class="no-padding row"> will not be the same as <div class="row no-padding"> in the bootstrap context. hope u get what i mean
krckyboy
@krckyboy
Feb 07 2017 22:01

@andrewchar Thanks a lot! The plan was to make the .first and .second stay on the bottom of the header. Other than that, I want the border to appear at the top of the header when I hover over them.

I just don't know what I need to add to make that. Like, what is the key code to make that. Of course, other than that, I want to make it responsive - if it isn't already.

CamperBot
@camperbot
Feb 07 2017 22:01
krckyboy sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:warning: krckyboy already gave andrewchar points
krckyboy
@krckyboy
Feb 07 2017 22:01
@andrewchar But then again, I could later on add padding if I just want it slightly higher in position than the bottom of the header (the .first and .second).
Gulsvi
@gulsvi
Feb 07 2017 22:02

@sorinr Thanks for that explanation. Why is it different with Bootstrap compared to:

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

Here I can write class="pink-text blue-text" or class="blue-text pink-text and the text will always be blue.
From: https://www.freecodecamp.com/challenges/override-styles-in-subsequent-css

CamperBot
@camperbot
Feb 07 2017 22:02
skycoder01 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @sorinr |http://www.freecodecamp.com/sorinr
Andrew Charlebois
@andrewchar
Feb 07 2017 22:02
@krckyboy text-align might be what you need for that
@krckyboy or make it a flex item and align them on the bottom that way
@krckyboy making it a flex item is better because you dont have to float them.
krckyboy
@krckyboy
Feb 07 2017 22:03
@andrewchar I know how flexbox works, but first I want to understand how to make it using the old way with floats and other stuff.
@andrewchar And what did you do with mad style sheets?
Andrew Charlebois
@andrewchar
Feb 07 2017 22:03
@krckyboy ok so you want the text to be aligned on the bottom right
krckyboy
@krckyboy
Feb 07 2017 22:04
@andrewchar That's right, buddy.
Andrew Charlebois
@andrewchar
Feb 07 2017 22:04
@krckyboy lol i meant to say "made the style sheet scss"
so that i can nest css
like what i did for the hover
Sam Griffen
@ssgriffen
Feb 07 2017 22:04
krckyboy
@krckyboy
Feb 07 2017 22:05
@andrewchar Just a question. SASS is the same as SCSS? I mean, the same functionality?
Andrew Charlebois
@andrewchar
Feb 07 2017 22:08
@krckyboy somewhat yes.
@krckyboy sass has more to offer. scss is fine if you wanna just nest stuff
krckyboy
@krckyboy
Feb 07 2017 22:09
@andrewchar I just find it weird how H1 element stays on the bottom of the header and UL and its LI don't.
Like, what's the catch there.
Ken Haduch
@khaduch
Feb 07 2017 22:10
@ssgriffen @ssgriffen - the key is that they are talking about "a returned function" - you can generate and return a function from your function. And when you have a calling sequences like addTogether(2)(3) - you have a function that is passed back, and it is called with the argument 3. So you need to "remember" the fact that you had a 2 in the first call in the sequence. You want to study the information about "Closures", because that is the mechanism for "remembering". I don't know if that will help - maybe it will give you a little bit of insight?
Sam Griffen
@ssgriffen
Feb 07 2017 22:11
@khaduch thanks
CamperBot
@camperbot
Feb 07 2017 22:11
ssgriffen sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2434 | @khaduch |http://www.freecodecamp.com/khaduch
Sorin Ruse
@sorinr
Feb 07 2017 22:11
@SkyCoder01 in this case the last defined class has the precedence. let me search and send you something you should read
Ken Haduch
@khaduch
Feb 07 2017 22:13
@ssgriffen - that link that they put in the lesson for documentation on Closures has some example that is similar to one that I made when trying to figure out how that closure works. Get a good understanding of that and you'll be on a good track to understand how this works.
krckyboy
@krckyboy
Feb 07 2017 22:13
@andrewchar Okay, so I was playing with line height and height itself on the .second thingy and I can push it down to the bottom. Now just to figure out on my own how to put the border up to the top.
@andrewchar Haha, I did it. I dunno what I did, but I did it. This is what I did on my thingy after I took a look at your code.
body {
  font-family: 'Play', sans-serif;
  box-sizing: border-box;
}

header {
  background: #AFF;
  overflow: hidden;
}

h1, h2, ul, li, header div, header nav {
  display: inline-block;
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 3em;
}

#first {
    float: left;
}

#second {
    float: right;
    line-height: 2.8em;
    height: 2em;
    font-size: 2em;
    border-top: 1px solid black
}
Andrew Charlebois
@andrewchar
Feb 07 2017 22:14
@krckyboy border for the on hover?
Gulsvi
@gulsvi
Feb 07 2017 22:15
@sorinr Okay, I will read up on that. Thank you for taking so much time to explain all of this to me today
CamperBot
@camperbot
Feb 07 2017 22:15
skycoder01 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: skycoder01 already gave sorinr points
Sorin Ruse
@sorinr
Feb 07 2017 22:15
@SkyCoder01 and also this will help: https://css-tricks.com/precedence-css-order-css-matters/
krckyboy
@krckyboy
Feb 07 2017 22:15
@andrewchar Yup. I didn't add that on hover in my code, since I just want to focus on the positioning now. I guess just by playing with height, line-height can make me get to my goal in this case. And also, overflow: hidden on the header was the solution to the background-color disappearing when I include floats to my elements.
Gaston Kirsman
@gastikirs
Feb 07 2017 22:20

Guys, I have this markup

<div class="col-md-3">
  <div class="member__content">
    <div class="overlay {{member.color}}" [ngClass]="{ offline: !member.isLoggedIn, online: member.isLoggedIn }" (click)="askLogin(member)">
      <img 
      src="app/assets/images/portraits_square/{{member.id}}.png"
      [ngClass]="{ offline: !member.isLoggedIn, online: member.isLoggedIn }"
      class="member__image-small"  
      alt="" >
    </div>
    <p *ngIf="member.isLoggedIn" class="member__image-text">{{member.name | uppercase }}<br> IS <br>HERE</p>
  </div>
</div>

How can I center the memberimage-text class in the membercontent div?

Anjali Rathod
@anjali1206
Feb 07 2017 22:24
hello everyone. I just finished Wikipedia Viewer project. Please share your reviews and feedback. http://codepen.io/anjali1206/full/rjdYyV/
Gulsvi
@gulsvi
Feb 07 2017 22:28
@sorinr I'm still confused, I created a pen to help see why no-padding at the beginning or the end of the class value would matter and it doesn't seem to matter because my CSS goes after bootstrap.
https://codepen.io/skycoder/pen/OWoRjZ
Tony
@FreakishLancer
Feb 07 2017 22:29
@anjali1206 works decently. The search results are reversed though.
krckyboy
@krckyboy
Feb 07 2017 22:30
How can I include reset.css to Codepen?
HizPearl
@HizPearl
Feb 07 2017 22:30
Building my first Tribute Page. Have a look let me know what you think... Thanks. Working on the Portfolio page now :worried: http://codepen.io/HizPearl/full/YNOGpZ/
Anjali Rathod
@anjali1206
Feb 07 2017 22:30
@FreakishLancer Thank you. I will fix that search result issue.
CamperBot
@camperbot
Feb 07 2017 22:30
anjali1206 sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Mike Boardley
@Boardley
Feb 07 2017 22:30
@krckyboy - You can link to in the CSS settins
settings

@krckyboy

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Or you can paste this in at the top of your css panel

krckyboy
@krckyboy
Feb 07 2017 22:32
@Boardley Thank you a lot! Got it. :)
CamperBot
@camperbot
Feb 07 2017 22:32
krckyboy sends brownie points to @boardley :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @boardley |http://www.freecodecamp.com/boardley
Mike Boardley
@Boardley
Feb 07 2017 22:32
@krckyboy :thumbsup:
Gabi
@JJcreated
Feb 07 2017 22:37
hi guys, im doing the wikipedia challenge, ive had some help but now im stuck, its not working like it should, anyone know why?
http://codepen.io/jjcreated/pen/gLJjda
Basanth Narra
@narraboss
Feb 07 2017 22:44
how to create a navigation menu using bootstrap in a portfolio website
Sorin Ruse
@sorinr
Feb 07 2017 22:51
@SkyCoder01 codepen always loads what you have in the css afte rit loads what you have in pen settings. so the code in codepen's css panel will always override the css libraries you load in the header. the best way to understand the precedence in css is to make a local app with a combination test of inline styling, style placed within tags <style></style> in the document header and style linked into the page from external file(try it before and after loading bootstrap)
Ryan L
@codelinde
Feb 07 2017 22:58
Hey guys. I'm working on the Twitch API challenge and was wondering if anyone could give me a pointer. The project requires 3 API calls, because one (to /users) is needed to verify whether the user exists, another (to /streams) to tell whether a user is online or offline, and yet another (to /channels) to populate the logo data if the user is offline. Notwithstanding the fact that I haven't written in the 3rd API call (I just realized this would be necessary), the console is returning 'undefined' for the user from the initial array I'm iterating through after it passes the first if/else statement. This is some kind of issue having to do with scope, but I'm not quite sure how to fix it. If anyone has any ideas please let me know. Thanks. http://codepen.io/codelinde/pen/mRKRBm
alpox
@alpox
Feb 07 2017 23:09
@codelinde I would say you need only 2
@codelinde You have the problem that the items from the first call come back after the whole for loop has finished.
(Callbacks)
Therefore, the loop is already done and the variable user is set to userArr.length since thats the value with which it leaves the loop.
since userArr[user] where user === userArr.length is undefined, you always add to your URL undefined.
@codelinde One way to preserve the variable is to wrap the request into a function since the function parameter gets preserved on call to it.
I myself and the new webfolk usually prefer the way through promises - which sadly are not covered by FCC and jQuery does not yet support it all over to preserve compability.
@codelinde To wrap up: Put each request into its own function and call it when you need it.
Ryan L
@codelinde
Feb 07 2017 23:17
@alpox OK, I will give that a try. Thank you. I looked into using promises for this but in the end found the implementation might be a tad advanced for my current level.
CamperBot
@camperbot
Feb 07 2017 23:17
codelinde sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 766 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 07 2017 23:19

@codelinde
You can always try it out later. Its not so hard in the end if you once got into some asynchronous programming. You will find that it easily solves some nasty problems.

But till then, you can go with normal function wrappers for the calls :-)

Ananda Johnson
@Sovember
Feb 07 2017 23:22
https://jsfiddle.net/rpq1tf9x/ As can be seen in this jsfiddle link, I have a basic bootstrap collapsing navbar that has an added text in the middle reading "Open 6am to 5pm", it's all fine and dandy on bigger screens but when you resize it to smaller screens it breaks the navbar. Anyone know why this is? Thanks
dualen
@dualen
Feb 07 2017 23:23
can anyone explained me why my img ''id big-yoda'' isn't centered? url:http://codepen.io/dualen/full/dNjVvg/
Cristopher Encarnacion
@chris0715
Feb 07 2017 23:38
I finish the front end side.. and now I am on the look for a job. from your point of view do you think I can consider my exercises as my portfolio.
Jakub Krysmalski
@krysmalskipl
Feb 07 2017 23:39
Guys. If I want to connect my project with a CMS, what shall I use? How to start?
@dualen I think that you need another container there
Cristopher Encarnacion
@chris0715
Feb 07 2017 23:42
@dualen col-md-12
dualen
@dualen
Feb 07 2017 23:45
i'll try it, thanks!
Gabi
@JJcreated
Feb 07 2017 23:51
hi guys, im doing the wikipedia challenge, ive had some help but now im stuck, its not working like it should, anyone know why?
http://codepen.io/jjcreated/pen/gLJjda
ndajiya
@ndajiya
Feb 07 2017 23:52
does anyone have any experience with Qwilr?