These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Nov 2016
Ivan
@gonzalezi2
Nov 03 2016 00:04
The codeacademy course on recursion is very good.
j1417
@j1417
Nov 03 2016 00:17
hi!! why i cant see the message in the console???https://codepen.io/Juan1417/pen/zKZkxy?editors=1111
Brian
@BrianCodes33
Nov 03 2016 00:17
function bouncer(arr) {
  return arr.filter(function(val){
    return val;
  });
  }
anyone can help me here
j1417
@j1417
Nov 03 2016 00:24
what does that function do? @BrianCodes33
Brian
@BrianCodes33
Nov 03 2016 00:25
it doesn’t do anything
j1417
@j1417
Nov 03 2016 00:27
what do you want to do¿
Brian
@BrianCodes33
Nov 03 2016 00:30
filter out falsey values
j1417
@j1417
Nov 03 2016 00:31
try adding !!vall
in return
Brian
@BrianCodes33
Nov 03 2016 00:32
woah
haha thx
why is it a double not
j1417
@j1417
Nov 03 2016 00:32
i have no idea....:(
Brian
@BrianCodes33
Nov 03 2016 00:33
lol
if you have no idea how do you have the answer
j1417
@j1417
Nov 03 2016 00:33
because i had the same question
i know that !!val is a falsy value...
but i do not know why
i@BrianCodes33 i think that you can use Boolean(val) too
Brian
@BrianCodes33
Nov 03 2016 00:39
ok thx @j1417
CamperBot
@camperbot
Nov 03 2016 00:39
briancodes33 sends brownie points to @j1417 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @j1417 |http://www.freecodecamp.com/j1417
c0d0er
@c0d0er
Nov 03 2016 01:24
@TylerMoeller thanks
CamperBot
@camperbot
Nov 03 2016 01:24
:cookie: 907 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
apbowe
@apbowe
Nov 03 2016 01:44
Does anyone know if the calculator (for the first advanced project - create a calculator) have to follow the order of operations. It looks like the example provided does not. I posted it online for feedback and it is unclear if that is required.
sorry *has to follow . . .
j1417
@j1417
Nov 03 2016 01:55
Hi! Im trying to get the latitude and the longitude from the navigator with the code in the challenge but it does not work:
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}
apbowe
@apbowe
Nov 03 2016 01:56
Does anyone know if the calculator (for the first advanced project - create a calculator) has to follow the order of operations. It looks like the example provided does not. I posted it online for feedback and it is unclear if that is required.
Walid Ashri
@walidashri
Nov 03 2016 02:04
@j1417 u get linke
apbowe
@apbowe
Nov 03 2016 02:06
Does anyone know if the calculator (for the first advanced project - create a calculator) has to follow the order of operations. It looks like the example provided does not. I posted it online for feedback and it is unclear if that is required.
Walid Ashri
@walidashri
Nov 03 2016 02:08
@j1417 just add s in ur link https
j1417
@j1417
Nov 03 2016 02:09
where??
Walid Ashri
@walidashri
Nov 03 2016 02:11
https://codepen.io/Juan1417/pen/zKZkxy
@j1417
j1417
@j1417
Nov 03 2016 02:11
it does not work...
Walid Ashri
@walidashri
Nov 03 2016 02:12
@j1417 u don't have any id data in ur html
j1417
@j1417
Nov 03 2016 02:13
@walidashri i change that now....
@walidashri i put an alert
Walid Ashri
@walidashri
Nov 03 2016 02:14
@j1417 working :+1:
j1417
@j1417
Nov 03 2016 02:15
i cant see the alert.. @walidashri
Walid Ashri
@walidashri
Nov 03 2016 02:15
https://codepen.io/Juan1417/pen/zKZkxy try this link
j1417
@j1417
Nov 03 2016 02:16
@walidashri oh.. it does not work in opera....:(
Walid Ashri
@walidashri
Nov 03 2016 02:17
u copied that link :point_up:
j1417
@j1417
Nov 03 2016 02:18
yes!! i tried in chrome and it works....
did you tried in chrome or opera??
@walidashri
Walid Ashri
@walidashri
Nov 03 2016 02:18
chrome
@j1417
Tyrone
@tsaulon
Nov 03 2016 02:42
Hello, I'm working on the Wikipedia viewer and I'm trying to make request data from the API but it says "No 'Access-Control-Allow-Origin' header is present on the request source". How do I fix this?
    $(document).ready(function(){

        $('#searchContainer').addClass('animated fadeIn');

        $( "#search" ).click(function() {
                $( "#searchContainer" ).animate({
                        "margin-top": 0
                }, 500, function() { 
                //Call Ajax Function Here

                var searchItem = document.getElementById('text').value;
                var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchItem +"&format=jsonp&callback=?";

                    $.ajax({
                        url: api,
                        type: "GET",
                        async: false,
                        datatype: 'json',
                        success: function(data, status, jqXHR){
                            console.log(data);
                        }
                    });
                });
        });
    });
Tom
@moT01
Nov 03 2016 02:44
did you try format=json in the url, might work
or http
comaeternal
@comaeternal
Nov 03 2016 02:47
function truncateString(str, num) {
  if (num < 3) {
    return str.slice(0, num) + "...";
  } else if (num > 10) {
    var x = num - 3;
    return str.slice (0, x) + "...";

  } else {
    return str.slice(-str.length);
  }

}

//truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2) should return "A-tisket a-tasket A green and yellow basket".
truncateString("A-tisket a-tasket A green and yellow basket", 11);
I want to return just str. But the .length + 2 is throwing me off. Can anyone guide me on this?
Tom
@moT01
Nov 03 2016 02:49
im not sure what youre asking, looks like you're pretty close
comaeternal
@comaeternal
Nov 03 2016 02:50
//truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2) should return "A-tisket a-tasket A green and yellow basket".
Tom
@moT01
Nov 03 2016 02:50
instead of return str.slice, you could go str = str.slice... then return str at the end
Tyrone
@tsaulon
Nov 03 2016 02:53
@moT01 Yeah, format=json doesn't work either
Tom
@moT01
Nov 03 2016 02:53
@comaeternal if (str.length > num)
@tsaulon http without the s? nothin?
i was having that issua as well, i dont recall exactly how i fixed it
Walid Ashri
@walidashri
Nov 03 2016 02:55
@comaeternal 2nd if u need to check if num < than str.length
and in else return the str
Tyrone
@tsaulon
Nov 03 2016 02:57

@moT01 So the access-control-allow-origin went away but these errors come up: http://puu.sh/s4IgO/f39f855c11.png

That's normal?

Tom
@moT01
Nov 03 2016 02:58
umm, probly not, can you console.log your data and get anything?
try it without the get
Tyrone
@tsaulon
Nov 03 2016 03:00
I have the console.log(data) in there if it's succesful but what's in the puush.png is all that comes up
removing "Get" doesn't do anything @moT01 :(
Tom
@moT01
Nov 03 2016 03:00
by the way, that url gives you an array, not an object, im not sure if it will work like that
Tyrone
@tsaulon
Nov 03 2016 03:03
@moT01 I fixed, I'm so dumb, the 't' in dataType is supposed to be capital
Tom
@moT01
Nov 03 2016 03:04
that will happen
Ike Orji
@ikeuzo57
Nov 03 2016 05:52
What class can I use to hue my <img> to the right just like <class="navbar-right"> using bootstrap?
Ike Orji
@ikeuzo57
Nov 03 2016 06:04

ok I got it now
the class 'pull-right'.

<div class="pull-right">...</div>

silver537
@silver537
Nov 03 2016 06:53
float: right;
honesty1997
@Honesty1997
Nov 03 2016 07:19
Hey guys!
Have some issues here.
I am working on pomodoro clock.And the clock can now count down well.
I am trying to get it stop counting after it starts costing by clicking it again.
Don't quite how to do it using javascript.....
A_A
@Otto-AA
Nov 03 2016 07:54
@Honesty1997 There is a clearInterval function: http://www.w3schools.com/jsref/met_win_clearinterval.asp
dsillydude
@dsillydude
Nov 03 2016 08:00
hello guys im just starting to biuld a Build a Tribute page i want to make everything stay in between, what code do i use for that i kinda forgot
honesty1997
@Honesty1997
Nov 03 2016 08:02
@Otto-AA Oh Thanks!!
CamperBot
@camperbot
Nov 03 2016 08:02
:cookie: 351 | @otto-aa |http://www.freecodecamp.com/otto-aa
honesty1997 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
honesty1997
@Honesty1997
Nov 03 2016 08:02
I will try to use that
Angela Downs
@angeladowns
Nov 03 2016 10:24
Hello. I'm working on a Tribute page. Should I be using rows and columns for this challenge? If so, I'm confused about when they should be used.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 10:25
I think just generally if you want to have horizontal sections you can use them.
I don't think they are strictly necessary for that challenge
Though I'm no expert. I just submitted mine!
For instance, I used the grid system when I wanted some text on the left and a related image on the right
Jacob
@jakeoneder
Nov 03 2016 10:27
@bozeman42 how you get so good at programming?
Angela Downs
@angeladowns
Nov 03 2016 10:28
ok. thanks @bozeman42 That helps!
CamperBot
@camperbot
Nov 03 2016 10:28
:cookie: 120 | @bozeman42 |http://www.freecodecamp.com/bozeman42
angeladowns sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
Topssy
@Topssy
Nov 03 2016 10:38
Hello
how do i place an image in a placeholder?
Topssy
@Topssy
Nov 03 2016 10:43
is it even possible?
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 10:43
Can you be more specific? What kind of placeholder do you mean? I think just generally you put an img tag wherever you want the image to be
Topssy
@Topssy
Nov 03 2016 10:46
(if you haven't built any websites before, use placeholders.) I am doing a portfolio exercise and the above instruction i what i was given
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 10:48
Ah, I would say just find some free image to link and display it where you will one day display your projects
I think the idea is to have a structure to display your projects once you actually have them
So anything will do for the time being
Topssy
@Topssy
Nov 03 2016 10:50
okay thanks @bozeman42
CamperBot
@camperbot
Nov 03 2016 10:50
topssy sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @bozeman42 |http://www.freecodecamp.com/bozeman42
herbie vd berg
@herbievdberg
Nov 03 2016 11:51
hey all...how do i jump to a section of a page by clicking on a button
Peder Kjellen
@PeZaK
Nov 03 2016 12:31
@herbievdberg you can reference a part of a page by using the id tag
instead of href="www.somewebpage.com" you can use href=#someId
Eduardo Herrera
@ito2307
Nov 03 2016 13:18
hello
i have a project in rails
and i'm trying to implement something called taboga
@ito2307
hello guys
i have a question
how can implement this in my project https://github.com/IFARHU/taboga?
https://github.com/IFARHU/taboga
masteresp
@masteresp
Nov 03 2016 14:02
Sup people!
Could someone take a look at my tribute page?
I'm having some problems with my grid
Is anyone here?
:(
xD
Ayodele Mudavanhu
@Ayoalex
Nov 03 2016 14:07
how to i get the link to my freecodecamp profile page?
masteresp
@masteresp
Nov 03 2016 14:08
You press your profile image in the upper right corner
Ayodele Mudavanhu
@Ayoalex
Nov 03 2016 14:15
@masteresp thanks
CamperBot
@camperbot
Nov 03 2016 14:15
ayoalex sends brownie points to @masteresp :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @masteresp |http://www.freecodecamp.com/masteresp
sree
@UXsree
Nov 03 2016 14:54
any body solving exact change challenge?
Brandon
@bwolfram1
Nov 03 2016 14:54
I can't get the image to appear on the page with a url.
Like I have a link to an image that I want to use but it's not loading on codepen.
A_A
@Otto-AA
Nov 03 2016 15:29
@bwolfram1 Can you link the pen/ give us the src of the img?
Ken Haduch
@khaduch
Nov 03 2016 15:31
@bwolfram1 - yes, please post the URL of your page or that you're trying to use. For example, you cannot cross-link to imgur pages, they block access. There could be other reasons why it isn't working for you... we can try to help.
@masteresp - hey there - what's your problem with teh grid?
masteresp
@masteresp
Nov 03 2016 15:32
@khaduch Well I dont really know how to use it
...
Ken Haduch
@khaduch
Nov 03 2016 15:33
@masteresp - that's a problem... :)
Brandon
@bwolfram1
Nov 03 2016 15:33
one sec.
Ken Haduch
@khaduch
Nov 03 2016 15:34
@masteresp - it looks pretty good as you have it set up? What are you trying to achieve with it?
masteresp
@masteresp
Nov 03 2016 15:34
@khaduch Did you open the full page
?
Like in a new window?
Ken Haduch
@khaduch
Nov 03 2016 15:35
@masteresp - yes, I did. I guess I just don't know what you are attempting to do with it...
Brandon
@bwolfram1
Nov 03 2016 15:36
I tried multiple sites.
masteresp
@masteresp
Nov 03 2016 15:36
@khaduch Well you see that quote ?
Brandon
@bwolfram1
Nov 03 2016 15:36
I change it to the original.
Ken Haduch
@khaduch
Nov 03 2016 15:37
@bwolfram1 - it's possibly that you have "src=" spelled "scr=", and then it might be imgur...
Maksim Kulichenko
@makstheimba
Nov 03 2016 15:37
<div class = "container">
                <div class = "row">
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/pomodoro.jpg" />
                    </div>
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/twitch.jpg" />
                    </div>
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/calc.jpg" />
                    </div>
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/wiki.jpg" />
                    </div>
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/weather.jpg" />
                    </div>
                    <div class = "col-xs-12 col-sm-6 col-md-4">
                        <img class = "img-responsive" src="assets/tictactoe.jpg" />
                    </div>
                </div>
            </div>
I have bootstrap code that should align images but I get whitespaces like this on medium and large screens. Why?
Brandon
@bwolfram1
Nov 03 2016 15:37
oh rip
A_A
@Otto-AA
Nov 03 2016 15:37
@khaduch Yeah, that was the error, nice catch :)
Ken Haduch
@khaduch
Nov 03 2016 15:38
@bwolfram1 - yes, once it tries to load the image, you get an error for the imgur link, because they block accesses like this.
Brandon
@bwolfram1
Nov 03 2016 15:38
I changed it @khaduch
Ken Haduch
@khaduch
Nov 03 2016 15:38
@bwolfram1 - the resulting error is: GET http://i.imgur.com/Z5LBbm1.jpg 403 (Forbidden) If you read imgur's terms and conditions, they state that they do not allow cross-linking to get images from their site.
Brandon
@bwolfram1
Nov 03 2016 15:39
check it again @khaduch
Ken Haduch
@khaduch
Nov 03 2016 15:40
@bwolfram1 - now I see an image
Brandon
@bwolfram1
Nov 03 2016 15:40
noice
Ken Haduch
@khaduch
Nov 03 2016 15:41
@masteresp - I see the quote. It is in the right-hand column next to the 'interesting facts'
Spencer
@coderamen
Nov 03 2016 15:42
hey everyone...
i was wondering how do I create links for my videos?
Ken Haduch
@khaduch
Nov 03 2016 15:43
@masteresp - it looks like you do not have that contained within a div that has column classes?
A_A
@Otto-AA
Nov 03 2016 15:45
@coderamen what about <a href="linkToVid">LOOK MY VID</a>?
@coderamen or do you mean a video displaying on your side?
Spencer
@coderamen
Nov 03 2016 15:48
@Otto-AA I mean video displaying...cos i have a video in my computer however i want to convert it to a link
<div id="container" align="center"> <video width="640" height="320" autoplay> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/> </video> <div id="custom-message">CENTERED TEXT ABOVE</div> </div>
like this sample.....http://media.w3.org video
i have no idea how to make video into a link.....
Srilaxmi Reddy
@srilaxmireddyy
Nov 03 2016 15:49
Hello world
CamperBot
@camperbot
Nov 03 2016 15:49

welcome to FreeCodeCamp @srilaxmireddyy!

A_A
@Otto-AA
Nov 03 2016 15:50
@coderamen Upload your video to any platform and then link to it
Spencer
@coderamen
Nov 03 2016 15:51
@Otto-AA any websites to recommend?? cos i'm really noob, dunno how it is done...sorry for my broken english
sorry platform...
A_A
@Otto-AA
Nov 03 2016 15:51
@coderamen I also never used an host for stuff like this
@coderamen I think I heard someone say that it works with google drive. I guess it's worth a try
Spencer
@coderamen
Nov 03 2016 15:53
oh okay lemme try
testing <div class="video-container"> <video autoplay loop muted> <source src="video/imp_video.mp4" type="video/mp4"></video> </div>
<div class="video-container"> <video autoplay loop muted> <source src="video/imp_video.mp4" type="video/mp4"></video> </div>
weird how to paste your code??
shift enter code enter?
A_A
@Otto-AA
Nov 03 2016 15:58
@coderamen three time ` new line [code] new line ```
Spencer
@coderamen
Nov 03 2016 15:59
<div class="video-container"> <video autoplay loop muted> <source src="video/imp_video.mp4" type="video/mp4"></video> </div>
A_A
@Otto-AA
Nov 03 2016 15:59
@coderamen press Ctr + Shift + M to see the commands
Spencer
@coderamen
Nov 03 2016 15:59
am i doing it right??
im using mac
A_A
@Otto-AA
Nov 03 2016 16:00
@coderamen doing what right?
Spencer
@coderamen
Nov 03 2016 16:01
pasting the code
A_A
@Otto-AA
Nov 03 2016 16:01
@coderamen for a one-line code I use this method and for a multi-line code I would use
this 
method
Spencer
@coderamen
Nov 03 2016 16:01

```<div class="jumbotron">
<div class="video-container">
<video autoplay loop muted> <source src="video/imp_video.mp4" type="video/mp4"></video>
</div>

<div class="vid-overlay">
<h1>Bringing ideas to life</h1>
<p>Everyone have great ideas in their mind. But getting your idea realised is another matter.</p>
</div>

</div>
```

A_A
@Otto-AA
Nov 03 2016 16:02
@coderamen make another line break before <div
Spencer
@coderamen
Nov 03 2016 16:02
oh
A_A
@Otto-AA
Nov 03 2016 16:02
(just edit it)
Spencer
@coderamen
Nov 03 2016 16:02
<div class="col-sm-4">
lol confuse....
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:03
you can do it at right just near time
Capture d’écran 2016-11-03 à 17.03.20.png
Capture d’écran 2016-11-03 à 17.03.28.png
click on blue dots (show on hover), at right in your previous message
@coderamen
Spencer
@coderamen
Nov 03 2016 16:07
<nav class="navbar navbar-default navbar-fixed-top"> <divclass="container">
<nav class="navbar navbar-default navbar-fixed-top"> <divclass="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
i dont think im doing right
lol
evakri
@evakri
Nov 03 2016 16:09
Hey guys, I got a question about the first challenge
How do you make that white field under the picture?
By using tables?
Maksim Kulichenko
@makstheimba
Nov 03 2016 16:11
@evakri it's bootstrap caption text
@evakri you can do something like that by placing image in a div and text on the bottom of div
BehindTheMath
@BehindTheMath
Nov 03 2016 16:12
I have a table with external images in the first column. I used CSS to make the first column fixed so the table scrolls horizontally. As a result, the rows don't resize automatically to fit the content, so I'm doing t with JS triggered on load. However, onload isn't triggered until after around 350ms. so there's a flicker before the table resizes. Is there a way to prefetch the image sizes earlier in the render so I can start resizing earlier?
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:12
@coderamen you're almost there :)
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    </div>
  </div>
</nav>
evakri
@evakri
Nov 03 2016 16:12
@evakri you can do something like that by placing image in a div and text on the bottom of div
okay, thanks
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:13
@coderamen you can select my message and copy paste to see what i've used to obtain this result
Spencer
@coderamen
Nov 03 2016 16:13
test test
```
test test
<nav class="navbar navbar-default navbar-fixed-top"> <divclass="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
hooray i did it
A_A
@Otto-AA
Nov 03 2016 16:14
@coderamen :clap:
Spencer
@coderamen
Nov 03 2016 16:15
thanks for being patient @Otto-AA @AlexanderDom
CamperBot
@camperbot
Nov 03 2016 16:15
:cookie: 352 | @otto-aa |http://www.freecodecamp.com/otto-aa
:cookie: 389 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
coderamen sends brownie points to @otto-aa and @alexanderdom :sparkles: :thumbsup: :sparkles:
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:15
@coderamen you're welcome
Spencer
@coderamen
Nov 03 2016 16:16
okay i have another problem hopefully you guys can help
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:16
Capture d’écran 2016-11-03 à 17.15.13.png
A_A
@Otto-AA
Nov 03 2016 16:16
@AlexanderDom How do you add an image here? Just drag into it?
Spencer
@coderamen
Nov 03 2016 16:16
i created a link for my video via google drive ady....but i cant see it
<div class="jumbotron">
  <div class="video-container">
    <video autoplay loop muted> <source src="https://drive.google.com/open?id=0B_RdO3IHMDQ5R004S2h4SVo4SU0" type="video/mp4"></video>
  </div>
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:16
@coderamen you can look at my last image for some advices
@Otto-AA yes, but you can do it in markdown too
A_A
@Otto-AA
Nov 03 2016 16:17
@coderamen Ok, doesn't seem like it works with google drive
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:17
like this
Yes
Spencer
@coderamen
Nov 03 2016 16:19
last image? @AlexanderDom
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:19
@coderamen for video element you need a real file
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:19
you drive link links to a page with a google drive videoplayer
Spencer
@coderamen
Nov 03 2016 16:20
I understand it works on a real file...but im wondering how this guy did this
<div id="container" align="center">
  <video width="640" height="320" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
  </video>
  <div id="custom-message">CENTERED TEXT ABOVE</div>
</div>
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:20
@coderamen you need your video to be at least in mp4 format
Spencer
@coderamen
Nov 03 2016 16:20
above its an example of what i found at the internet
oh so i need to create a folder in my google drive? @Otto-AA
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:26
Spencer
@coderamen
Nov 03 2016 16:27
@AlexanderDom its definitely working for the example...
but mine is not
<div class="jumbotron">
  <div class="video-container">
    <video autoplay loop muted> <source src="https://drive.google.com/file/d/0B_RdO3IHMDQ5R004S2h4SVo4SU0/view?usp=sharing" type="video/mp4"></video>
  </div>
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:28
... i don't think you can link to your google drive for your video
like i said before
for video element
Spencer
@coderamen
Nov 03 2016 16:29
@AlexanderDom oh then how do i create link for my video in order to view?
c0d0er
@c0d0er
Nov 03 2016 16:35
@TylerMoeller thanks!
CamperBot
@camperbot
Nov 03 2016 16:35
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 908 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Don Price
@KingHippo
Nov 03 2016 16:39
anyone know how to create a log file with the unix time stamp?
Alexander Domikov
@AlexanderDom
Nov 03 2016 16:47
you need to add it somewhere where you can access it @coderamen , if your have your domain name for exemple www.coderamen.com otherwise easy solution can be add it on youtoube and include it with youtube player, but again i don't think you can add it from drive
Spencer
@coderamen
Nov 03 2016 16:48
okok ill try @AlexanderDom
Nitin Chandran Nair
@NitinNair89
Nov 03 2016 16:48
Hello World :)
CamperBot
@camperbot
Nov 03 2016 16:48

welcome to FreeCodeCamp @NitinNair89!

Tyler Moeller
@TylerMoeller
Nov 03 2016 16:49

@coderamen You can also use the embed code they give:

<iframe src="https://drive.google.com/file/d/0B_RdO3IHMDQ5R004S2h4SVo4SU0/preview" width="640" height="480"></iframe>

To use the <video> tag as you would like, you need to link to an actual file with an extension of .mp4, you're linking to a page for viewing the video instead.

evakri
@evakri
Nov 03 2016 17:02
I'm taking the first challenge and I feel a bit... lost. The most puzzling thing is how to size everything. For example, how to make that the gray body would be of such and such size, and the picture would be no bigger than body?
So I created a div with the needed background colour. Then what?
Doneal Bercier
@donealbercier
Nov 03 2016 17:05
@evakri I just started on the Tribute Project myself. Bootstrap has documentation on sizing on their website page. https://codepen.io/donealbercier/pen/yawdzJ
Nitin Chandran Nair
@NitinNair89
Nov 03 2016 17:06
@evakri dimensions can be assigned to elements using width and height CSS properties
BehindTheMath
@BehindTheMath
Nov 03 2016 17:07
Does Chrome DevTools have a way to jump from an element referenced in the Console to the Elements tab like in Firefox?
evakri
@evakri
Nov 03 2016 17:08
@donealbercier @NitinNair89 Thanks for replies.
CamperBot
@camperbot
Nov 03 2016 17:08
evakri sends brownie points to @donealbercier and @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @donealbercier |http://www.freecodecamp.com/donealbercier
:cookie: 341 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Nov 03 2016 17:08
@evakri you're welcome. But don't thank me unless I solved your query :)
CamperBot
@camperbot
Nov 03 2016 17:08
nitinnair89 sends brownie points to @evakri :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @evakri |http://www.freecodecamp.com/evakri
Alexander Domikov
@AlexanderDom
Nov 03 2016 17:09
@BehindTheMath $$('your selector') in console, then right click and open in elements tab
$$() it's like $('') of jquery but works in console only
no need of jquery
"Reveal in elements tab"
by the way if you tap $0 it shows you your last selected item
BehindTheMath
@BehindTheMath
Nov 03 2016 17:11
Cool. Thanks!
Alexander Domikov
@AlexanderDom
Nov 03 2016 17:11
you're welcome ;)
Andrea De La Flor Muente
@adelaflor
Nov 03 2016 17:16
hi!! have you done the first challenges?? did you do them using the code of the tasks before or did you use other code you searched somewhere else??
Doneal Bercier
@donealbercier
Nov 03 2016 17:17
@adelaflor Which challenges were you refering to
Andrea De La Flor Muente
@adelaflor
Nov 03 2016 17:19
@donealbercier I managed to do the tribute page and now I am begginig the personal portfolio and I am kinda scared
Spencer
@coderamen
Nov 03 2016 17:22

@TylerMoeller I tried to use iframe tag....still doesn't work sadly :(

<div class="jumbotron">
  <div class="video-container">
    <video autoplay loop muted> <iframe src="https://drive.google.com/file/d/0B_RdO3IHMDQ5NmVSNkpqN2twVEE/view?usp=sharing" type="video/mp4"></iframe>
  </div>

still give me black screen

Doneal Bercier
@donealbercier
Nov 03 2016 17:22
@adelaflor Same here haha planning it out is the hardet part. But struggling with it is fun. I wasn't really worried about the actual colors or design as much about understanding the different pieces. I actually haven't updated the code on coding pen but I have this so far. https://codepen.io/donealbercier/pen/bwXxMX
Purcea Robert
@RobertPurcea
Nov 03 2016 17:24
Can i change background color using only Bootstrap?
no css
Doneal Bercier
@donealbercier
Nov 03 2016 17:25
@Robertb4 Bootstrap only supports contextual color schemes http://getbootstrap.com/css/#helper-classes . In order to change the background you'll have to override the class
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:26
@coderamen You have a type of video/mp4 for your iframe. Try this instead:
<div class="jumbotron">
  <div class="video-container text-center">
    <iframe src="https://drive.google.com/file/d/0B_RdO3IHMDQ5R004S2h4SVo4SU0/preview" width="640" height="480"></iframe>
  </div>
</div>
^^works for me
Spencer
@coderamen
Nov 03 2016 17:29
oh okay lemme try
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:30
@Robertb4 It's limited in color choices, but yes: <body class="bg-primary"></body>: http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:31
can anyone advise me that what shall i use instead of alert boxes to get number of players and there sign/s.
http://codepen.io/Mohammad_Hasham/pen/rryQmV
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:32
@MohammadHasham You may want to look for inspiration here: http://codepen.io/search/pens?q=tic+tac+toe&limit=all&type=type-pens
Lots of different ways to do it - up to you and your preferences
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:32
@TylerMoeller Thanks
CamperBot
@camperbot
Nov 03 2016 17:32
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 909 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Andrea De La Flor Muente
@adelaflor
Nov 03 2016 17:33
@donealbercier whaattt !! looks pretty good!!
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:34
@TylerMoeller how can i change between backgrounds for choosing signs/players and playing board
Andrea De La Flor Muente
@adelaflor
Nov 03 2016 17:34
@donealbercier I have zero haha but I have hope, have fun!
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:35
@MohammadHasham I'm not sure I understand what you mean by changing backgrounds
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:35
like in he provided pen the user is prompted to select something once selected the screen changes to play game
https://codepen.io/FreeCodeCamp/pen/KzXQgy
@TylerMoeller
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:36
You could show the options first, once selected, the options are hidden and the board is shown
Parminder Sanghera
@parmsang
Nov 03 2016 17:36
Hi - I am working on simon game. For some reason when I hover over the strict and start buttons these change to a whitish color. That's not supposed to happen. Can someone assist? http://codepen.io/parmsang/pen/WGmmGZ
Doneal Bercier
@donealbercier
Nov 03 2016 17:36
@adelaflor Thank you and keep trying. You could look to other projects for inspiration
CamperBot
@camperbot
Nov 03 2016 17:36
donealbercier sends brownie points to @adelaflor :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @adelaflor |http://www.freecodecamp.com/adelaflor
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:36
@TylerMoeller shall i use .show() and .hide()
masteresp
@masteresp
Nov 03 2016 17:36
Hi guys! I've just completed my tribute page, and now im gonna start on the personal portfolio page... BUT HOW ON EARTH IS ONE SUPPOSED TO DO THIS:
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
Doesn't that require javascript?
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:36
@MohammadHasham Yes, that's most likely what they are doing
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:37
@TylerMoeller Thanks!
CamperBot
@camperbot
Nov 03 2016 17:37
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Nov 03 2016 17:37
@MohammadHasham It's what I did for mine too: http://codepen.io/TylerMoeller/pen/ojMvMy
So old lol, need to update it
Doneal Bercier
@donealbercier
Nov 03 2016 17:37
@masteresp In order to go to certain sections of the page all you need is to assign your elements with an id and refrence them in the link
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:38
@TylerMoeller Thanks
CamperBot
@camperbot
Nov 03 2016 17:38
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave tylermoeller points
Doneal Bercier
@donealbercier
Nov 03 2016 17:38
@masteresp JavaScript can be used for smooth scrolling
Parminder Sanghera
@parmsang
Nov 03 2016 17:38
^ anyone?
Peter Kim
@NOUX-NOVA
Nov 03 2016 17:41
Hi guys. I'm having issues with putting new elements below the navbar in the main section. Whenever I try to put anything (such as text), it won't show and the navbar gets pushed down. Here is a link to the repo: https://github.com/NOUX-NOVA/gregs_list/tree/gh-pages Can some kind soul point me in the right direction? Thank you!
Doneal Bercier
@donealbercier
Nov 03 2016 17:43
@NOUX-NOVA I had the exact same problem. You'll want to have a <nav> element to contain the different fields. And Bootstrap has several classes that organize the content inside
Peter Kim
@NOUX-NOVA
Nov 03 2016 17:44

@donealbercier Thanks for the response. I have:

<nav>
<ul>
<li class="top-left">Greg's List</li>
<li><a href="#">Post</a></li>
<li><a href="#">Account</a></li>
</ul>
</nav>

That's what you mean right?

Doneal Bercier
@donealbercier
Nov 03 2016 17:44
@NOUX-NOVA
var code ="
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive "alt="Brand" src="">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link">Portfolio</a></li>
<li class="nav-item"><a class="nav-link">Contact</a></li>
</ul>
</div>
</nav>"
CamperBot
@camperbot
Nov 03 2016 17:44
noux-nova sends brownie points to @donealbercier :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @donealbercier |http://www.freecodecamp.com/donealbercier
masteresp
@masteresp
Nov 03 2016 17:45
@donealbercier @NOUX-NOVA Are you guys also working on the portfolio challange?
Doneal Bercier
@donealbercier
Nov 03 2016 17:45
@masteresp Yes I am at the moment
Peter Kim
@NOUX-NOVA
Nov 03 2016 17:46
@masteresp No I'm working on a separate project.
Spencer
@coderamen
Nov 03 2016 17:46
@TylerMoeller it works!! you are a genieus Tyler!!
masteresp
@masteresp
Nov 03 2016 17:46
@donealbercier I just started. Super intimidated. Don't know were to start.
Spencer
@coderamen
Nov 03 2016 17:46
thanks @TylerMoeller
CamperBot
@camperbot
Nov 03 2016 17:46
coderamen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 910 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Peter Kim
@NOUX-NOVA
Nov 03 2016 17:46
@donealbercier Do you know a way without bootstrap?
Michael Davis
@mhdavis
Nov 03 2016 17:48
Can someone help me out in understanding how the Wikipedia API works?
I just need someone to help me hash out what you is outputted from the API so I know how to store it local or if I even should
Doneal Bercier
@donealbercier
Nov 03 2016 17:49
@NOUX-NOVA http://www.w3schools.com/tags/tag_nav.asp the nav tag organizes information I believe
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:50
is it really important to use float left/right in bootstrap
because there is already provided grid
Doneal Bercier
@donealbercier
Nov 03 2016 17:50
@masteresp Was exactly the same for me. But I started by breaking down the components I saw in the example such as a navigation bar, several inforamtion screens, and a table to display projects on. And then I mocked up my website on paper. So far all I've done is this:http://www.w3schools.com/tags/tag_nav.asp but I wasn't really worried about looks to begin with
Peter Kim
@NOUX-NOVA
Nov 03 2016 17:52
@donealbercier Oops I guess I should've been more descriptive. I'm trying to add new elements in the main part of the page. text, input field etc. but nothing shows up when I add it and the navbar gets pushed down for some weird reason
Doneal Bercier
@donealbercier
Nov 03 2016 17:53
Okay so you're saying that the navbar isn't at the top of the screen, or that its covering content
Brandon
@bwolfram1
Nov 03 2016 17:54
How do you I fix the thumbnail width? Just do width: x; and align: center; in the CSS? http://codepen.io/bwolfram/full/XNrLvr/
herbie vd berg
@herbievdberg
Nov 03 2016 17:54
how do I share my Codepen project on facebook
Brandon
@bwolfram1
Nov 03 2016 17:55
copy and paste the link.
herbie vd berg
@herbievdberg
Nov 03 2016 17:55
@bwolfram1 paste it where?
Brandon
@bwolfram1
Nov 03 2016 17:55
@herbievdberg click change view and go to full page. Copy that link and paste it in the status area.
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:55
on your wall
@herbievdberg
herbie vd berg
@herbievdberg
Nov 03 2016 17:56
@bwolfram1 oh ok..sorry for dumb question.lol
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:57
how to overlap one element on another
bootstrap,html
Brandon
@bwolfram1
Nov 03 2016 17:57
what element are you trying to overlap?
You can always play with the margins.
You can use negative margins. @MohammadHasham
Muhammad Hasham
@MohammadHasham
Nov 03 2016 17:57
@bwolfram1 ok
Thanks
@bwolfram1 THanks
CamperBot
@camperbot
Nov 03 2016 17:58
:cookie: 119 | @bwolfram1 |http://www.freecodecamp.com/bwolfram1
mohammadhasham sends brownie points to @bwolfram1 :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Nov 03 2016 17:58
@bwolfram1 you can just add to your thumbnail css: width: 600px; margin: 0 auto; if this is what u want to achive
Brandon
@bwolfram1
Nov 03 2016 18:00
awesome, I was just trying to play with all the stuff widths and stuff.
@sorinr So I did that but now it's not aligned to the center.
Sorin Ruse
@sorinr
Nov 03 2016 18:03
@bwolfram1 it is. take a look here: tribute page
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:07
You might want to consider adding the class img-responsive to your img @bwolfram1
So that it displays well on smaller screens
Love the choice of Hubble. I chose Sagan :smile:
Brandon
@bwolfram1
Nov 03 2016 18:08
I'm on a MacBook Pro 13" and the text margins seems too small.
@bozeman42 thanks
CamperBot
@camperbot
Nov 03 2016 18:08
bwolfram1 sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @bozeman42 |http://www.freecodecamp.com/bozeman42
Brandon
@bwolfram1
Nov 03 2016 18:11
I could change it by doing it in CSS right?
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:13
I made a fork to play with if you don't mind. I think what might be tripping things up is the setting of a static width. What is your goal with the width? What was the problem before?
Brandon
@bwolfram1
Nov 03 2016 18:16
On my screen it seems like it's not centered and if you compare it to the codepen that they have it looks like the ul is smaller.
like the margin-left/margin-right are smaller but I changed them and nothing happened.
Brandon
@bwolfram1
Nov 03 2016 18:21
I give the ul element negative left/right margins and it worked but it's not centered now.
Parley Kennelly
@parleydk
Nov 03 2016 18:22
Hey, for anyone that wants to learn more about bootstrap, I have a suggestion. Go to this page on the website: http://getbootstrap.com/customize/
then select only one box for the custom download. Then scroll all the way to the bottom and click the compile/download button. Once you have the file open the bootstrap.css file in your editor of choice. You'll have a modular piece of bootstrap that is easier to follow and understand. Much better than trying to read the entire file at once. Then you'll be able to learn what BootStrap is doing behind the scenes.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:23
thanks @parleydk I'll check that out
CamperBot
@camperbot
Nov 03 2016 18:23
bozeman42 sends brownie points to @parleydk :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @parleydk |http://www.freecodecamp.com/parleydk
Purcea Robert
@RobertPurcea
Nov 03 2016 18:24
<div class="row">
<div class="col-sm-5">
<h2> Some of his movies </h2>
</div>
<div class="col-sm-10">
<h4> Interstellar </h4>
</div>
</div>
what am i doing wrong
im trying to put them in a row
it behaves like the divs do not exist
Ken Haduch
@khaduch
Nov 03 2016 18:25
@Robertb4 - a row can only have a total of 12 columns - so you can do 5 and 7, but not 5 and 10
Purcea Robert
@RobertPurcea
Nov 03 2016 18:26
got it thanks
Brandon
@bwolfram1
Nov 03 2016 18:26
Is this centered for anyone else? http://codepen.io/bwolfram/full/XNrLvr/
Ken Haduch
@khaduch
Nov 03 2016 18:28
@bwolfram1 - not centered. At least the image is not centered.
Brandon
@bwolfram1
Nov 03 2016 18:28
How do I center it?
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:28
@bwolfram1 I'm finding that the centering issue is related to the 'width' style given to the thumbnail.
Ken Haduch
@khaduch
Nov 03 2016 18:30
@bwolfram1 - the usual thing, to add class="center-block" as an attribute on the img is not working for some reason... I'm looking at it?
Brandon
@bwolfram1
Nov 03 2016 18:30
I found that too but when you remove the 'width' it gives the wings on the sides of the image.
One sec. I'm getting a higher res image.
Ken Haduch
@khaduch
Nov 03 2016 18:32
@bwolfram1 - it is the "thumbnail" class that is overriding that. Take that class off the div that is the parent to the img, take off both "thumbnail" and "img-responsive", and add this: <img class="center-block img-responsive" class to the img
Brandon
@bwolfram1
Nov 03 2016 18:33
@khaduch I think I fixed it now.
@khaduch thanks
CamperBot
@camperbot
Nov 03 2016 18:33
bwolfram1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1870 | @khaduch |http://www.freecodecamp.com/khaduch
Brandon
@bwolfram1
Nov 03 2016 18:33
@bozeman42 thanks
CamperBot
@camperbot
Nov 03 2016 18:33
bwolfram1 sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
:warning: bwolfram1 already gave bozeman42 points
Ken Haduch
@khaduch
Nov 03 2016 18:35
@bwolfram1 - okay, you're welcome. Now I see that if you resize the browser viewport that the "Timeline of Hubble's life" drifts off to the left? And the years on your timeline do, also... But the image looks good - so, one step at a time!
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:36
I think there are two things going on there. The negative margins and I think you don't close the thumbnail div
I think
Brandon
@bwolfram1
Nov 03 2016 18:36
I didn't
@khaduch timeline is centered
Ike Orji
@ikeuzo57
Nov 03 2016 18:39
How can I make Jquery work on codepen I've tried to include the cdn in a <script> on the top of my html and the $(document).ready() function as well in my html but it doesn't work any idea helps please
Brandon
@bwolfram1
Nov 03 2016 18:39
@bozeman42 the thumbnail div is closed right under the caption.
Ken Haduch
@khaduch
Nov 03 2016 18:40
@bwolfram1 - but if you narrow the window down to the xs size, everything below the image section is cut off on the left side. Aren't you seeing that?
@ikeuzo57 - add the jquery.js in the JS tab configuration as an external library, do not put it in your HTML panel.
Thinh Cao
@tcao2
Nov 03 2016 18:41
I have a question regarding the Wiki Viewer project
Ken Haduch
@khaduch
Nov 03 2016 18:41
@bwolfram1 - maybe it's not the "xs" size, maybe the the next size up/ Somewhere around 760px of width.
Thinh Cao
@tcao2
Nov 03 2016 18:42
I am using the wikipedia api, but the data I got from the JSON is not the same as what is showed in the example
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:42
I think it's just the negative margins @bwolfram1 re: text going off the left.
Brandon
@bwolfram1
Nov 03 2016 18:42
I see it. I think it's from the negative margins. @khaduch.
Yes what @bozeman42 said :P
Ken Haduch
@khaduch
Nov 03 2016 18:42
@bozeman42 @bwolfram1 - @bozeman42 is probably right - negative margins are a troublesome thing for responsive behavior...
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:43
The projects are great for seeing all of this stuff. Love it.
Brandon
@bwolfram1
Nov 03 2016 18:43
would a minimum margin help?
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:43
Are you trying to have the timeline further left?
Maybe left align the timeline after the heading?
Brandon
@bwolfram1
Nov 03 2016 18:43
Without the negative margins it looked really skinny.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:44
Maybe more breathing room with columns
Brandon
@bwolfram1
Nov 03 2016 18:45
I think it looks decent now that I took the negative margins off.
Ken Haduch
@khaduch
Nov 03 2016 18:45
@bwolfram1 - the columns really can do a lot for you, if you use them properly. You can even add empty columns on the left and right to "pad" the content into the middle, and then use the hiding classes to hide them on a narrower screen.
Ike Orji
@ikeuzo57
Nov 03 2016 18:46
@khaduch ok thanks gotcha
CamperBot
@camperbot
Nov 03 2016 18:46
ikeuzo57 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1871 | @khaduch |http://www.freecodecamp.com/khaduch
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:47
I should probably go back to working for my actual job. Have a good one, folks!
Brandon
@bwolfram1
Nov 03 2016 18:47
@khaduch could I change the size of the columns?
@bozeman42 You too!
Parley Kennelly
@parleydk
Nov 03 2016 18:47
you can use class="offset-md-2" then it will be offset only for medium sizes and above. So you don't need to create empty columns.
Thinh Cao
@tcao2
Nov 03 2016 18:48
for example, if I search for "Obama", the result returned from my search link isn't the same as the example
that is what I use to search
Parley Kennelly
@parleydk
Nov 03 2016 18:48
like this
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-2 col-xs-12">
Brandon
@bwolfram1
Nov 03 2016 18:49
That's what I have. @parleydk
Thinh Cao
@tcao2
Nov 03 2016 18:49
but the result, obviously, isn't the same as the example. An article on Michelle Obama is on the example. but not on my search result
Brandon
@bwolfram1
Nov 03 2016 18:49
still looks kinda small to me but I guess that how it's going to be.
Thinh Cao
@tcao2
Nov 03 2016 18:50
any help would be greatly appreciated !
Ken Haduch
@khaduch
Nov 03 2016 18:50
@parleydk :+1: - I just used empty columns because what was my first inclination, I just haven't used Bootstrap too much to get all of the offsets and things in my head... thanks!
CamperBot
@camperbot
Nov 03 2016 18:50
khaduch sends brownie points to @parleydk :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @parleydk |http://www.freecodecamp.com/parleydk
Parley Kennelly
@parleydk
Nov 03 2016 18:50
I did a lot of trial and error to get the offsets and columns to balance out.
Brandon
@bwolfram1
Nov 03 2016 18:50
Thanks everyone for the help but I just going to call this project done... for now.
functionally it's done
Parley Kennelly
@parleydk
Nov 03 2016 18:51
@khaduch the offsets just prevent you from having a bunch of extra divs.
Brandon
@bwolfram1
Nov 03 2016 18:52
This is my project if you want to check it out @parleydk http://codepen.io/bwolfram/full/XNrLvr/
I looked at it on my phone and it scales nicely.
Parley Kennelly
@parleydk
Nov 03 2016 18:55
I agree. I think the beginning projects are mainly to get us comfortable with the syntax and codepen. Each project, I'm spending more time on than the previous one. I can't spend the whole 2000 hours on a tribute page. :)
@bwolfram1
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 18:56
Can't stay away... here's mine. I'm pretty happy with it but would accept any commentary: http://codepen.io/bozeman42/full/qaGxjB/
I guess this is help forum, so maybe not appropriate here
Brandon
@bwolfram1
Nov 03 2016 18:57
Looks good @bozeman42
Aw shit, now it's time for the personal portfolio webpage.
Ike Orji
@ikeuzo57
Nov 03 2016 19:00
That's very lovely with the embeded video
alined properly
Sorin Ruse
@sorinr
Nov 03 2016 19:01
i don't know why, but i've seen a lot of tribute pages that are "all the same". most are trying to copy the example in the challenge.
Ken Haduch
@khaduch
Nov 03 2016 19:01
@bozeman42 - very nice! Great responsive behavior on the desktop... and it also looks good on a phone. Nice! You have a typo (I'm just looking near the bottom of the page) "Febrary" . Always nice to fix those... looking good, though!
Parley Kennelly
@parleydk
Nov 03 2016 19:02
@sorinr until I came here and saw what other people had done, that's what I thought the assignment was. How close can you get to a design without looking at the code.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:02
Thank you for the typo catch, @khaduch
CamperBot
@camperbot
Nov 03 2016 19:02
bozeman42 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1872 | @khaduch |http://www.freecodecamp.com/khaduch
Brandon
@bwolfram1
Nov 03 2016 19:03
rip me.
So the tribute page isn't supposed to like exactly like the example?
Parley Kennelly
@parleydk
Nov 03 2016 19:03
Maybe @QuincyLarson should update the instructions to make that a little more clear.
Ken Haduch
@khaduch
Nov 03 2016 19:04
@sorinr - I think that with people just starting out, that might be about the "least common denominator" - having a pattern to follow and try to mimic it. There are some very creative people who, I think, have some experience as artists or designers in addition to some programming that do some great "first" projects. It's all a learning experience for people just starting out.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:04
@sorinr For me, my main goal was reaching the functionality shown in the example as I am not a very visually sophisticated person. I've seen some beautiful tribute pages, and maybe once I have more skills under my belt I would revist and add more personal touch
George Phalen
@gphalen
Nov 03 2016 19:04
Hi. Can anyone take a look at my calculator project? I can string together equations of the same type (i.e. you can continually string together pluses or minuses), but I can't get it to string together equations with multiple operators. I've created all sorts of variables and if statements trying to account for the possibility of "divide" being pressed after "plus" and such, but nothing works. Kinda worried that the way I've done it up to now can't support it and I'll have to start from scratch, really just looking for any advice. Thanks. http://codepen.io/gphalen/pen/vXvEod
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:06
@sorinr So I would say it's a very fair observation that people are doing that. I think it's probably true, but I also think it's probably okay for beginning
Ken Haduch
@khaduch
Nov 03 2016 19:06
@bwolfram1 - you have flexibility to do any kind of design - there are just basic things that you have to fulfill, the "user stories". As I said above, I think that with varying skill levels, there are people who are just going to struggle with getting something that looks like a pattern that was put forth, and there are others who can really take the ball and run with it. As long as the user stories are fulfilled, and you get a flavor for what is going on, mimicking the page is a good place to start. You can always go back and tweak the styling later - it is good just to get an accomplishment and move on, in my opinion. There is so much to learn!
Sorin Ruse
@sorinr
Nov 03 2016 19:07
@khaduch :+1:
Ike Orji
@ikeuzo57
Nov 03 2016 19:08
@khaduch I have configured my js with Jquery but still not working
Brandon
@bwolfram1
Nov 03 2016 19:08
for the personal portfolio I'm going to just stick to the user stories but really personalized.
Ken Haduch
@khaduch
Nov 03 2016 19:08
@ikeuzo57 - did you post your URL for your project? I can take a look...
Ike Orji
@ikeuzo57
Nov 03 2016 19:11
@khaduch ok here
Ken Haduch
@khaduch
Nov 03 2016 19:12
@ikeuzo57 - go to your CSS panel, and also add the "animate.css" library to your external libs. that's what you need.
Sorin Ruse
@sorinr
Nov 03 2016 19:12
@bozeman42 i'm sure with time, as u get more and more knowledge about how to write better css and html and js, you will come back and willing to change all your layout and design of some of your pens :)
Ike Orji
@ikeuzo57
Nov 03 2016 19:13
ok
Ken Haduch
@khaduch
Nov 03 2016 19:13
@ikeuzo57 - at least to get the bounce that you are trying to add...
Ike Orji
@ikeuzo57
Nov 03 2016 19:14
Ok that works thanks very much
Ken Haduch
@khaduch
Nov 03 2016 19:15
@ikeuzo57 - and then, on CodePen, you should follow their rules - in the HTML panel, no <head>, <body>, <html>, <style>, <script>, etc. tags - only the HTML code for the page. All of the other pieces are pulled in from the CSS panel and JS panels, and plugged into a template that already contains those tags that I mentioned. It's the way to use CodePen properly. Good luck!
Sorin Ruse
@sorinr
Nov 03 2016 19:16
@khaduch yep
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 19:16
Working on Portfolio. How can I close the gaps between backgrounds?
http://codepen.io/WhiteLeaf1103/pen/BLXqNy
Brandon
@bwolfram1
Nov 03 2016 19:17
margins
Brandon
@bwolfram1
Nov 03 2016 19:22
Wait, so for the portfolio I can come back to it in the future because I don't really know JS.
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 19:22
@bwolfram1 can you give me an example please
Parley Kennelly
@parleydk
Nov 03 2016 19:24
If you need to add tags to the <head> section, click on the settings button for you pen and then you can enter tags here:
blob
Tyler Moeller
@TylerMoeller
Nov 03 2016 19:25
@WhiteLeaf1103 Add the 'row' class to your 'div1', 'div2', and 'div3' sections.
<div class="div1 row">
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:26
@bwolfram1 my approach to the portfolio thus far has been to look at the functionality of the example and research how to accomplish it.
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 19:27
@TylerMoeller why?
j1417
@j1417
Nov 03 2016 19:27
Hi!! why the variables are not get in to the api url???
````
$(document).ready(function(){


    var long;
    var lat;    

    if(navigator.geolocation){

    navigator.geolocation.getCurrentPosition(function(position){


    lat=position.coords.latitude;
    long=position.coords.longitude;



    var api="http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=c873adc18574701f4fb0abe01d927819";




    $.getJSON(api,function(data){




    alert(data.name);


    });


    });



    }



});
Tyler Moeller
@TylerMoeller
Nov 03 2016 19:28
@WhiteLeaf1103 To remove the space between your sections. http://getbootstrap.com/css/#grid
Brandon
@bwolfram1
Nov 03 2016 19:28
@bozeman42 I was thinking about just doing what I know now and then go from there since I'm pretty crap at JS.
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:29
@bwolfram1 I'm pretty sure if you meet the user stories you've met the requirements.
Alex Dobre
@Zerelt
Nov 03 2016 19:30
can anybody please explain to me why the background-image covers the entire height on my mobile browser only on Firefox, but doesn't cover the entire height in Chrome and Opera (full version) and the default android web browser ??
http://mathgame.netlify.com/
also if someone can test it on safari since i don't have anything made by apple
body {
    background-color: rgba(0, 0, 0, 0.90);
    font-family: Helvetica;
    color: rgba(0, 0, 0, 0.85);
    background: url('./images/bgwallpaper.jpg')center center fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0;
    min-height:100%;
    height:100%;
}
Sorin Ruse
@sorinr
Nov 03 2016 19:37
@Zerelt ciao. i'm on chrome on linux mint and it covers 100%width and height. same on opera and ff.
Alex Dobre
@Zerelt
Nov 03 2016 19:37
on mobile ?
on desktop it's working fine ; on my android it doesn't display the background-image properly on those browers i mentioned
pls check it out
Sorin Ruse
@sorinr
Nov 03 2016 19:39
@Zerelt sorry. haven't test it on mobile. let me try
Purcea Robert
@RobertPurcea
Nov 03 2016 19:39
if it's a mess tell me I don't want to go ahead doing the wrong things
also I'm kinda short on text but I suppose that doesn't matter
it's the first project btw
Sorin Ruse
@sorinr
Nov 03 2016 19:42
@Zerelt on windows phone its ok
Alex Dobre
@Zerelt
Nov 03 2016 19:43
looks nice. the image took a bit to load and if you look around I doubt you'll actually find text written with that neon blue color unless highlited or something
thanks @sorinr ... must be an android thing then
CamperBot
@camperbot
Nov 03 2016 19:44
zerelt sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 810 | @sorinr |http://www.freecodecamp.com/sorinr
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:44

So finally completed Tic Tac Toe Game
http://codepen.io/Mohammad_Hasham/full/rryQmV/

Special Thanks to @sorinr @sjames1958gm @NitinNair89 and others who really helped me through thick and thin

Please give a review.

CamperBot
@camperbot
Nov 03 2016 19:44
mohammadhasham sends brownie points to @sorinr and @sjames1958gm and @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 811 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 342 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
:star2: 4171 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Nov 03 2016 19:44
@camperbot :+1:
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 19:45
@Robertb4 It meets the user stories. I noticed one thing where you have class="container fluid" should be "container-fluid"
Alex Dobre
@Zerelt
Nov 03 2016 19:45
the window to select an option isn't centered if the window is not fullscreen @MohammadHasham
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:45
@Zerelt I'll check that
Purcea Robert
@RobertPurcea
Nov 03 2016 19:46
y thanks for pointing that out
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:46
it is centered at my browser
Sorin Ruse
@sorinr
Nov 03 2016 19:46
@MohammadHasham you should still work a little on the AI of the computer part moves :)
Alex Dobre
@Zerelt
Nov 03 2016 19:46
also the wins, looses and the rest all button are not properly aligned
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:46
google chrome
Alex Dobre
@Zerelt
Nov 03 2016 19:46
it's not on mine :/ it's to the right
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:47
@sorinr yeah sure! i'll read the minimax algo once i find some time
@Zerelt what do you mean by aligned
Alex Dobre
@Zerelt
Nov 03 2016 19:47
the writing under it is centered
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:47
i'll check on the other browser as well
can you tell me the exact pixels through dev tools where it is making things wierd
Alex Dobre
@Zerelt
Nov 03 2016 19:47
i mean the distance between the wins and the reset button is greater than the distance between the reset button and the loses
j1417
@j1417
Nov 03 2016 19:48
Hi how can i insert a sun like the one in this page?
Ian
@IJACOBS
Nov 03 2016 19:48
Hey guys! I need some help with a section of code for the Twitch stream viewer. I am trying to set it up so that it will iterate through an array containing the names of all the streams I want to know the information for, and find that out for each stream. It is working to change my varioable creating the url to get the JSON for, but it is not changing the variables with the JSON request for each stream. Does someone see what I did wrong here?
'''
CamperBot
@camperbot
Nov 03 2016 19:48
:bulb: to format code use backticks! ``` more info
Sorin Ruse
@sorinr
Nov 03 2016 19:48
@MohammadHasham :) anyway good job
Ian
@IJACOBS
Nov 03 2016 19:48
'''
CamperBot
@camperbot
Nov 03 2016 19:48
:bulb: to format code use backticks! ``` more info
Ian
@IJACOBS
Nov 03 2016 19:48
'''
CamperBot
@camperbot
Nov 03 2016 19:48
:bulb: to format code use backticks! ``` more info
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:48
@sorinr Thanks alot you really helped me
CamperBot
@camperbot
Nov 03 2016 19:48
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sorinr points
Ian
@IJACOBS
Nov 03 2016 19:49
function loadViewer (){
 $(".online").hide();
 $(".offline").hide();
 var streamNames =['freecodecamp','faceittv','noobs2ninjas','streamerhouse','monstercat','callofduty','imaqtpie'];
  var streamUrl;
  //for loop, hope it doesnt break it alll
  for ( i=0; i < streamNames.length; i++){
   streamUrl= 'https://wind-bow.hyperdev.space/twitch-api/streams/'+streamNames[i]+'?callback=?';
  console.log(streamUrl);
$.getJSON(streamUrl,  function(data) {
  console.log(data);
  $("#stream1").text(streamNames[i]);
  var pageLink= "<a target='_blank' href='https://www.twitch.tv/"+streamNames[i]+ "'>"+streamNames[i] + "</a>";
  console.log(pageLink);
  console.log(streamNames[i]+' STREAM '+i);
  /*
 //All data that is needed is gathered before if stream live statement
if (data.stream=null){
 $(".offline").show();
//run scripts for offline stream
}else{
$(".online").show();
// run scripts for online stream
$("#streamer1").append(pageLink);
};//end of if stream live statement
*/
})  // End getJSON from TwitchTV 
  };
}; //End loadViewer
window.onload= loadViewer;
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:49
blob
@Zerelt
@j1417 you will get that from api
Alex Dobre
@Zerelt
Nov 03 2016 19:49
@MohammadHasham chrome tools is telling me that your div.row is centered properly but the box with brown background color is not centered inside it
Muhammad Hasham
@MohammadHasham
Nov 03 2016 19:50
there must be some image sort of attrib @j1417
@Zerelt Okay maybe ! i'll check that
Alex Dobre
@Zerelt
Nov 03 2016 19:50
yeah that doesn't look centered to me ... that image you posted
wins is more to the left than loses is to the right with respect to the reset all button
Brandon
@bwolfram1
Nov 03 2016 19:51
How do I get the small sliver on the left of the nav bar to go away? http://codepen.io/bwolfram/full/oYNjyX/
j1417
@j1417
Nov 03 2016 19:52
how???
@Zerelt
Alex Dobre
@Zerelt
Nov 03 2016 19:54
i guess you'll have to google for the images you want to use if you don't want to use the default images openweathermaps uses, and make if conditions or switch staments to make it show those images depending on what the weather description is
@j1417
j1417
@j1417
Nov 03 2016 19:56
@Zerelt ohh.... is the image a gif??
Alex Dobre
@Zerelt
Nov 03 2016 19:58
most likely ... unless you wanna learn svg or canvas animations just for that :D
Yan Kozlovskiy
@YanKozlovskiy
Nov 03 2016 19:58

I would like to understand the difference between this:

function getJson(){
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?")
    .done(update)
    .fail(handleErr);
}

function update(response) {
 console.log(response);
}

getJson()

and this:

function getQuote(url) {
  var link = $.getJSON(url);
  console.log(link.done);
}
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
getQuote(url);
j1417
@j1417
Nov 03 2016 19:59
thanks @Zerelt
CamperBot
@camperbot
Nov 03 2016 19:59
j1417 sends brownie points to @zerelt :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @zerelt |http://www.freecodecamp.com/zerelt
A_A
@Otto-AA
Nov 03 2016 20:00
@bwolfram1 I always set body {margin: 0;} when I start writing CSS. That would solve your problem ;)
Sorin Ruse
@sorinr
Nov 03 2016 20:01
@bwolfram1 body{margin:o;} in ur css
A_A
@Otto-AA
Nov 03 2016 20:01
@sorinr First ;P
Sorin Ruse
@sorinr
Nov 03 2016 20:01
@Otto-AA :+1:
Alex Dobre
@Zerelt
Nov 03 2016 20:05
@YanKozlovskiy the difference is that the first is returning an object
while the second returns the function itself
if you put console.log(link.done()) you'll get an object(which contains the done key and its function, which is what you get when you just console.log(link.done))
Brandon
@bwolfram1
Nov 03 2016 20:09
@Otto-AA thanks I got it.
CamperBot
@camperbot
Nov 03 2016 20:09
bwolfram1 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @otto-aa |http://www.freecodecamp.com/otto-aa
Brandon
@bwolfram1
Nov 03 2016 20:09
But the 'text-center' class isn't working now :(
Well it wasn't working.
nm
A_A
@Otto-AA
Nov 03 2016 20:16
@bwolfram1 nm === nevermind?
Yan Kozlovskiy
@YanKozlovskiy
Nov 03 2016 20:16
@Zerelt how can i make the second return an object?
Ike Orji
@ikeuzo57
Nov 03 2016 20:16
Is there a way I can configure font Awesome in to my codepen??
Brandon
@bwolfram1
Nov 03 2016 20:17
yes @Otto-AA
A_A
@Otto-AA
Nov 03 2016 20:17
@YanKozlovskiy I'd try link.done(function(response) {console.log(response);});
@bwolfram1 How did you solve it?
Alex Dobre
@Zerelt
Nov 03 2016 20:18
You need a function like in your first example since the value of the done key inside that object has a function that takes arguments as parameters
function getQuote(url) {
  var link = $.getJSON(url);
  console.log(link.done(update));
}

function update(x){
  console.log(x)
}

var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
getQuote(url);
@YanKozlovskiy
j1417
@j1417
Nov 03 2016 20:19
hi!! where can i get weather animations??
Brandon
@bwolfram1
Nov 03 2016 20:20
@Otto-AA It was in my 'div1' in the CSS and not the 'mainheader' id in the CSS.
How do I scale down a big image with CSS or does it have to be done in photoshop?
A_A
@Otto-AA
Nov 03 2016 20:22
@ikeuzo57 In the HTML-Settings there is a place for header-stuff and in there you can add this link: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:22
is the issue the size in terms of data or the resolution
Brandon
@bwolfram1
Nov 03 2016 20:22
res
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:23
I think you can just assign size to it
like width etc
Brandon
@bwolfram1
Nov 03 2016 20:23
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:23
or make it responsive
A_A
@Otto-AA
Nov 03 2016 20:24
@bwolfram1 There you can find everything about background (next time pls say that here too ;) ) images: http://www.w3schools.com/css/css_background.asp
Brandon
@bwolfram1
Nov 03 2016 20:24
I feel so dumb...
A_A
@Otto-AA
Nov 03 2016 20:24
@bwolfram1 I think what you need is background-size: cover, but there's plenty of stuff that's nice to know
Brandon
@bwolfram1
Nov 03 2016 20:25
I did cover.
Thanks @Otto-AA
CamperBot
@camperbot
Nov 03 2016 20:25
bwolfram1 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: bwolfram1 already gave otto-aa points
I want to know
that
Brandon
@bwolfram1
Nov 03 2016 20:26
lol
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:26
those About
thing at the top right
Brandon
@bwolfram1
Nov 03 2016 20:26
the nav bar?
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:26
is a button or not>
ya nav bar
Brandon
@bwolfram1
Nov 03 2016 20:26
nah, it's a nav bar.
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:26
is that a button?
Brandon
@bwolfram1
Nov 03 2016 20:26
Buttons are for plebs when doing nav bars.
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:27
its nav bars
ri8?
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:27
Check out Bootstrap navbar with collapse
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:27
ohk
Brandon
@bwolfram1
Nov 03 2016 20:27
Here's some CSS for the nav bar:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0px;
  width: 100%;
}
li {
  float:left;
  font-family: 'Open Sans', sans-serif;

}
li a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: grey;
}
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:28
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp look for where it talks about collapse
Brandon
@bwolfram1
Nov 03 2016 20:28
the code that I posted is for a fixed position nav bar.
A_A
@Otto-AA
Nov 03 2016 20:29
Unbenannt.png
@c0d0er As you can see 2 is not the only text inside of .minute
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 03 2016 20:30
thanks a lot @bwolfram1 and @bozeman42
CamperBot
@camperbot
Nov 03 2016 20:30
soumyoahona200 sends brownie points to @bwolfram1 and @bozeman42 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @bwolfram1 |http://www.freecodecamp.com/bwolfram1
:cookie: 123 | @bozeman42 |http://www.freecodecamp.com/bozeman42
Aaron Kvarnlov-Leverty
@bozeman42
Nov 03 2016 20:30
Take note: if you want to use bootstrap's navbar collapse you need to have it load the bootstrap JS as well as the CSS
that can be done in the settings
c0d0er
@c0d0er
Nov 03 2016 20:31
@Otto-AA thanks
CamperBot
@camperbot
Nov 03 2016 20:31
c0d0er sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @otto-aa |http://www.freecodecamp.com/otto-aa
A_A
@Otto-AA
Nov 03 2016 20:31
@c0d0er (developer tools OP I tell you ;))
Ike Orji
@ikeuzo57
Nov 03 2016 20:36
Hi Guys this is a template of my Portfolio thinking of aligning a photo image on the right of the Jumbotron div http://codepen.io/ikeuzo57/pen/yVBXEG
Brandon
@bwolfram1
Nov 03 2016 20:40
Is this landing "page" too big? http://codepen.io/bwolfram/pen/oYNjyX
A_A
@Otto-AA
Nov 03 2016 20:44
@bwolfram1 I wouldn't say that the landing page is too big. But I think the header is kinda too small for that, or I just need something bigger to look at which refers to you.
Aleksander Gębicki
@Takumar
Nov 03 2016 20:44
@bwolfram1 it's okay, but add content for "Contact", "Portfolio". Just keep on going! :thumbsup:
Brandon
@bwolfram1
Nov 03 2016 20:49
So how do I bring the second part down? I'm pretty sure it's behind the image because I can't see it.
Like I can't see the 2nd part at all.
A_A
@Otto-AA
Nov 03 2016 20:50
@bwolfram1 cough color: white cough cough :)
Brandon
@bwolfram1
Nov 03 2016 20:51
bruh, background-color: stuff;
A_A
@Otto-AA
Nov 03 2016 20:51
@bwolfram1 you know what I mean?
Brandon
@bwolfram1
Nov 03 2016 20:51
yes
now I can't see the background color
A_A
@Otto-AA
Nov 03 2016 20:53
@bwolfram1 Btw, don't use name for text-stuff. It's used for input and others: http://www.w3schools.com/Tags/att_name.asp
@bwolfram1 "backgroud"
@bwolfram1 Just a tip: Structure your about, portfolio and other stuff with <section class="about">....</section> and the in CSS give section some basic styles like "width: 100%"
Brandon
@bwolfram1
Nov 03 2016 20:56
oh ok
I think I know what you mean.
mzedlach
@mzedlach
Nov 03 2016 20:57
Hello everyone :)
A_A
@Otto-AA
Nov 03 2016 20:57
Hi @mzedlach :D
Brandon
@bwolfram1
Nov 03 2016 20:57
Hello @mzedlach
mzedlach
@mzedlach
Nov 03 2016 20:58
Is there a difference between doing <button class="btn"> AND <button type="button">
Also, do i have to surround buttons with the <label> tag?
Hello @Otto-AA and @bwolfram1 :)
A_A
@Otto-AA
Nov 03 2016 20:59
@mzedlach class="btn" is mostly for styling purposes while type="button" tells about the function
So types could be button, submit and reset
mzedlach
@mzedlach
Nov 03 2016 21:00
@Otto-AA So... for a button to be functional, do I HAVE TO have type="button"
and "btn" is only if I want to dabble with JQuery?
A_A
@Otto-AA
Nov 03 2016 21:02
@mzedlach You don't HAVE TO, because button is the default type in most browsers (but only most I think)
mzedlach
@mzedlach
Nov 03 2016 21:02
okay
Thank you @Otto-AA :)
CamperBot
@camperbot
Nov 03 2016 21:02
mzedlach sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @otto-aa |http://www.freecodecamp.com/otto-aa
A_A
@Otto-AA
Nov 03 2016 21:03
@mzedlach and I only know "btn" from bootstrap.
mzedlach
@mzedlach
Nov 03 2016 21:03
oh man... I get bootstrap mixed up with everything else...
you sure?
it's not jquery?
A_A
@Otto-AA
Nov 03 2016 21:04
@mzedlach for bootstrap you use <button class="btn btn-info">...
mzedlach
@mzedlach
Nov 03 2016 21:04
ahhh, yes yes. You are most correct :)
A_A
@Otto-AA
Nov 03 2016 21:05
@mzedlach And when you have buttons like these you can target them with $('.btn').doSomeJQuery stuff
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:05
@bwolfram1 IDK if anyone mentioned this. But I used that same css class for my backgrounds and they told me it's better to use a name related to the purpose. .background1 V .div1 is much better. I used the same scheme tho at first. haha .div1 .div2 and .div3 I'm gonna change it tho.
mzedlach
@mzedlach
Nov 03 2016 21:05
right :)
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:07
can someone give me a good idea & example of the difference between div/id?
Monesul Haque
@mones-cse
Nov 03 2016 21:08

@WhiteLeaf1103

<div> tag defines a division or a section in an HTML
on ther other hand
id use to identify certain element in html

mzedlach
@mzedlach
Nov 03 2016 21:08
@WhiteLeaf1103 do you mean id as in... <div id="bubbles">>
??
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:10
the #in css.
Ok so id Is for indvidual elements in HTML and DIV is for sections?
mzedlach
@mzedlach
Nov 03 2016 21:11
Yeah, like @mones-cse said, <div> helps separate out your html into sections. "id" is comparable to "class" when labelling different divs. If I remember correctly, "id" takes precedence over "class"
A_A
@Otto-AA
Nov 03 2016 21:11
@WhiteLeaf1103 do you mean the difference between div and id or between class and id?
mzedlach
@mzedlach
Nov 03 2016 21:11
and id's should be specific to only one div. classes can be applied to many areas. Or, at least that is what is supposed to be done.
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:12
@Otto-AA with all these different elements I guess I mean them all!?!? can you explain what you thought I meant?
why would I make an id when I can just make another class? with . why use the # for id?
mzedlach
@mzedlach
Nov 03 2016 21:15

is specific to id's and . is specific to class's in css

i don't know why that went large.
Brandon
@bwolfram1
Nov 03 2016 21:15
the hashtag

large

mzedlach
@mzedlach
Nov 03 2016 21:15
ah!
okay
hahah
Brandon
@bwolfram1
Nov 03 2016 21:15
.#large
mzedlach
@mzedlach
Nov 03 2016 21:15
now i know
Monesul Haque
@mones-cse
Nov 03 2016 21:15

h1

h2

h3 /

mzedlach
@mzedlach
Nov 03 2016 21:15
fancy.
Monesul Haque
@mones-cse
Nov 03 2016 21:15
wow
A_A
@Otto-AA
Nov 03 2016 21:15

@WhiteLeaf1103 OK, lets do div and id first:
div is like h1 and p a tag. You need them to structure your html

<div>
   <h1>Header</h1>
   <p>Paragraph</p>
</div>

id is (like class) an attribute, means you give it to an tag

<div id="about">
   <h1 id="bigFatFirstHeader>Header</h1>
</div>
Monesul Haque
@mones-cse
Nov 03 2016 21:15
test
so this chat section support markdown ?
A_A
@Otto-AA
Nov 03 2016 21:16
@mones-cse Press Ctrl + Shift + M
mzedlach
@mzedlach
Nov 03 2016 21:17
I am a ghost today.
Monesul Haque
@mones-cse
Nov 03 2016 21:17
@Otto-AA
it says switch people fast :(
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:17
@Otto-AA I'm still confused. whats the id in the div and the id in the h1... why use id when you can use class?
A_A
@Otto-AA
Nov 03 2016 21:18
@WhiteLeaf1103 Btw, as you may already guessed: div is the short for divisor. So it is used to divide your HTML into some things
Monesul Haque
@mones-cse
Nov 03 2016 21:18
@WhiteLeaf1103 may be you already see this if not
check this out
http://www.w3schools.com/html/default.asp
most of your question has answer here
A_A
@Otto-AA
Nov 03 2016 21:19
@WhiteLeaf1103 The main difference between id and class: each ID is unique, so I can't say <p id="somef"></p><h1 id="somef"></h1> while classes can be applied to multiple elements
There is an article about the difference: https://css-tricks.com/the-difference-between-id-and-class/
Monesul Haque
@mones-cse
Nov 03 2016 21:20
@mzedlach why are you ghost today ?
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:21
an ID can only be applied once? then how can the <P> and <h1> have same ID?... Also why not just create another class if you have to create an ID for it anyways?
A_A
@Otto-AA
Nov 03 2016 21:21
@WhiteLeaf1103 They can't. That was an example how NOT to do it
WhiteLeaf1103
@WhiteLeaf1103
Nov 03 2016 21:21
I'll read both articles and i'll see if I'm any closer to figuring out my questions! Thanks for the references.
DreCurrency
@drecurrency
Nov 03 2016 21:21
hello, how to i control the position of an image tat is on top of a background image ?
mzedlach
@mzedlach
Nov 03 2016 21:21
Trying to help, not being acknowledged.
No biggie :)
@mones-cse
@drecurrency what do you mean by control?
Monesul Haque
@mones-cse
Nov 03 2016 21:22
@mzedlach lolz
mzedlach
@mzedlach
Nov 03 2016 21:22
@drecurrency What is it doing, and what do you want it to do?
Monesul Haque
@mones-cse
Nov 03 2016 21:23
i thought it was about Halloween :P @mzedlach
DreCurrency
@drecurrency
Nov 03 2016 21:23
@mzedlach i want to centre an image that is currently top left on top of another image
A_A
@Otto-AA
Nov 03 2016 21:24
I think the bot should tell every new one here something like "Please link your pen"
It would make life soooo much easier =D
@drecurrency TY =D
CamperBot
@camperbot
Nov 03 2016 21:24
otto-aa sends brownie points to @drecurrency :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @drecurrency |http://www.freecodecamp.com/drecurrency
mzedlach
@mzedlach
Nov 03 2016 21:24
@mones-cse lol
DreCurrency
@drecurrency
Nov 03 2016 21:26
@Otto-AA its because I don't like the work to be done for me. Id rather get the concept then put into practice myself
Monesul Haque
@mones-cse
Nov 03 2016 21:26
@drecurrency
.profilePic {
  margin:auto;
}
A_A
@Otto-AA
Nov 03 2016 21:27
@drecurrency Ok, tell me how much tips you want. So I'd do it with position:absolute on the img and top+left+transform->translate
DreCurrency
@drecurrency
Nov 03 2016 21:28
@Otto-AA using translate affected the responsiveness of the webpage when i tested on a mobile device
A_A
@Otto-AA
Nov 03 2016 21:29
@drecurrency It should work
@drecurrency I tested it and it works ;P
DreCurrency
@drecurrency
Nov 03 2016 21:30
what percentage do I set the translate points ?
A_A
@Otto-AA
Nov 03 2016 21:31
@drecurrency transform: translate(-50%, -50%)
DreCurrency
@drecurrency
Nov 03 2016 21:31
@mones-cse this worked though.. thanks man
CamperBot
@camperbot
Nov 03 2016 21:31
drecurrency sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 426 | @mones-cse |http://www.freecodecamp.com/mones-cse
A_A
@Otto-AA
Nov 03 2016 21:31
@drecurrency So half of it's width and heigth back
DreCurrency
@drecurrency
Nov 03 2016 21:32
@Otto-AA and as for top and left what do you set them as ?
A_A
@Otto-AA
Nov 03 2016 21:32
@drecurrency Oh, and don't use inline-styles too often. It get's really hard to maintain for bigger projects
Brandon
@bwolfram1
Nov 03 2016 21:32
How do I bring the text in the about section up a bit? http://codepen.io/bwolfram/full/oYNjyX/
A_A
@Otto-AA
Nov 03 2016 21:33
@drecurrency Well, if you want it in the middle? top 50%; left 50%
@drecurrency be sure to give the parent-element position:relative
@bwolfram1 reduce the padding-top in background2
Monesul Haque
@mones-cse
Nov 03 2016 21:35

@bwolfram1

.background2 {
  background-color: #03A9F4;
  height: 300px;
padding-top:20%;
  text-align: center;
}

change
padding-top:20% value

Brandon
@bwolfram1
Nov 03 2016 21:37
ok, also how do I get the spot where you land when you click the about tab to be the middle of that section? It just includes the bottom text and not the whole section.
A_A
@Otto-AA
Nov 03 2016 21:39
@bwolfram1 Try this: <div class="background2" id="about">
Brandon
@bwolfram1
Nov 03 2016 21:39
ok
also what the fuck did I just do?
A_A
@Otto-AA
Nov 03 2016 21:40
@bwolfram1 Accidently sent me a pizza?
Brandon
@bwolfram1
Nov 03 2016 21:40
nm, I didn't save :D
I fucked up the about part but I didn't save it.
All is good.
A_A
@Otto-AA
Nov 03 2016 21:41
:)
Hey guys, can you tell me if this works for you? http://aapianomusic.bplaced.net/midPlayer/
Monesul Haque
@mones-cse
Nov 03 2016 21:43
@Otto-AA
nope
Rock-Nation
@Rock-Nation
Nov 03 2016 21:44
hello, world! Just joined in hopes of getting a front-end developer notification -- if I'm not too old, that is
CamperBot
@camperbot
Nov 03 2016 21:44

welcome to FreeCodeCamp @Rock-Nation!

Brandon
@bwolfram1
Nov 03 2016 21:44
nothing there @Otto-AA
A_A
@Otto-AA
Nov 03 2016 21:44
@mones-cse Which browser are you using, and can you look into the console if there is an error?
@bwolfram1
Rock-Nation
@Rock-Nation
Nov 03 2016 21:45
My problem is, I'm borderline homeless -- could I take the classes in a public library an hour or two at a time?
Monesul Haque
@mones-cse
Nov 03 2016 21:45

@Otto-AA
chrome
and i am getting

Midi_Display.js:7 Uncaught ReferenceError: MIDI is not defined(…)

this error

A_A
@Otto-AA
Nov 03 2016 21:45
@mones-cse OK, thanks :)
CamperBot
@camperbot
Nov 03 2016 21:45
otto-aa sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @mones-cse |http://www.freecodecamp.com/mones-cse
A_A
@Otto-AA
Nov 03 2016 21:45
I guess it doesn't load something correctly there :/
Tony Miri
@TonyMiri
Nov 03 2016 21:46
@Rock-Nation This is a work-at-your-own-pace environment. An hour or two at a time would be perfect
Brandon
@bwolfram1
Nov 03 2016 21:46
@Otto-AA Chrome
I'm sorry, I should clarify there was no midi files there.
A_A
@Otto-AA
Nov 03 2016 21:47
@bwolfram1 No problem :)
Tony Miri
@TonyMiri
Nov 03 2016 21:48
Anybody know if the twitch.tv API allows you to chain users in the request url? I saw that the /channels/blah,blah,blah works but that format doesn't seem to work with /users/blah,blah,blah
Monesul Haque
@mones-cse
Nov 03 2016 21:53

@FatTone225 did you try

https://api.twitch.tv/kraken/streams/userId/?client_id=youClientId

for exmple

https://api.twitch.tv/kraken/streams/ESL_SC2/?client_id=youClientId
Tony Miri
@TonyMiri
Nov 03 2016 21:54
I have no idea what that is
We are supposed to be using the workaround url provided by freecodecamp so we don't need an auth key
So what works is this
https://wind-bow.hyperdev.space/twitch-api/users/freecodecamp?callback=?
but what I'm wondering is if something like this is possible
https://wind-bow.hyperdev.space/twitch-api/users/freecodecamp,user2,user3,user4?callback=?
From the looks of things I'm thinking that it isn't possible
I peeked at the example project's code
Jason Luboff
@JLuboff
Nov 03 2016 21:57
Can someone take a look at my CSS? My calculator moves slightly up and down, which is messing with the box shadow
http://codepen.io/jluboff/pen/ALJdkd
Monesul Haque
@mones-cse
Nov 03 2016 21:58

@FatTone225
i am not sure about those link but
before twich api didnt require clint id
but recently they need client id
when i call

https://api.twitch.tv/kraken/streams/ESL_SC2/?client_id=myclientId

i got json response like

{"stream":{"_id":23557640448,"game":"StarCraft II","viewers":526,"created_at":"2016-11-02T00:56:45Z","video_height":720,"average_fps":50,"delay":0,"is_playlist":false,"_links":{"self":"https://api.twitch.tv/kraken/streams/esl_sc2"},"preview":{"small":"https://static-cdn.jtvnw.net/previews-ttv/live_user_esl_sc2-80x45.jpg","medium":"https://static-cdn.jtvnw.net/previews-ttv/live_user_esl_sc2-320x180.jpg","large":"https://static-cdn.jtvnw.net/previews-ttv/live_user_esl_sc2-640x360.jpg","template":"https://static-cdn.jtvnw.net/previews-ttv/live_user_esl_sc2-{width}x{height}.jpg"},"channel":{"mature":false,"status":"RERUN: StarCraft 2 - Cure vs. herO (TvP) - IEM Katowice 2015 - Ro16","broadcaster_language":"en","display_name":"ESL_SC2","game":"StarCraft II","language":"en","_id":30220059,"name":"esl_sc2","created_at":"2012-05-02T09:59:20Z","updated_at":"2016-11-03T21:34:43Z","delay":null,"logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg","banner":null,"video_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-channel_offline_image-5a8657f8393c9d85-1920x1080.jpeg","background":null,"profile_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg","profile_banner_background_color":"#050506","partner":true,"url":"https://www.twitch.tv/esl_sc2","views":61132775,"followers":135461,"_links":{"self":"http://api.twitch.tv/kraken/channels/esl_sc2","follows":"http://api.twitch.tv/kraken/channels/esl_sc2/follows","commercial":"http://api.twitch.tv/kraken/channels/esl_sc2/commercial","stream_key":"http://api.twitch.tv/kraken/channels/esl_sc2/stream_key","chat":"http://api.twitch.tv/kraken/chat/esl_sc2","subscriptions":"http://api.twitch.tv/kraken/channels/esl_sc2/subscriptions","editors":"http://api.twitch.tv/kraken/channels/esl_sc2/editors","teams":"http://api.twitch.tv/kraken/channels/esl_sc2/teams","videos":"http://api.twitch.tv/kraken/channels/esl_sc2/videos"}}},"_links":{"self":"https://api.twitch.tv/kraken/streams/ESL_SC2","channel":"https://api.twitch.tv/kraken/channels/ESL_SC2"}}
which actually provide user ESL_SC2 information
Jason Luboff
@JLuboff
Nov 03 2016 22:00
@FatTone225 You may want to use something like ForEach to iterate through an array of users
Tony Miri
@TonyMiri
Nov 03 2016 22:00
@mones-cse does that support chaining? All I'm trying to avoid is doing a separate API call for each user, but I guess I'll have to
Monesul Haque
@mones-cse
Nov 03 2016 22:01
@FatTone225 i don't think they suport chaining
Jason Luboff
@JLuboff
Nov 03 2016 22:01
No, it would just keep it so you don't have to call the full url each time really
Tony Miri
@TonyMiri
Nov 03 2016 22:01
sigh Oooookaaaayyyyyy lol
Monesul Haque
@mones-cse
Nov 03 2016 22:02
lolz
Jason Luboff
@JLuboff
Nov 03 2016 22:03
I technically have two API calls per user in my array for my Twitch app. And I used $.each (not foreach, sorry)
Monesul Haque
@mones-cse
Nov 03 2016 22:03
@JLuboff when it moves slightly up and down?
Jason Luboff
@JLuboff
Nov 03 2016 22:04
@mones-cse Ya if you hit AC it will move down, then hit a number it will move it back up. Its not the biggest deal, but would like to fix it (the box shadow stays static)
Tony Miri
@TonyMiri
Nov 03 2016 22:10
@JLuboff I changed your js a little so that instead of using display.html I switched it to display.innerHTML = whatever. That gave it a little different behavior, and it looks like it has something to do with the way you are displaying your arrays
I don't know the answer to your problem, but that might be a start
Jason Luboff
@JLuboff
Nov 03 2016 22:12
@FatTone225 You're a genius ;) I changed it to instead of outputting the now empty array, to output 0 (seeing as how thats what the fresh calculator does anyhow) and its now staying in place
@FatTone225 Thanks!
CamperBot
@camperbot
Nov 03 2016 22:12
jluboff sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @fattone225 |http://www.freecodecamp.com/fattone225
Tony Miri
@TonyMiri
Nov 03 2016 22:13
@JLuboff Hey! I did something! lol. Glad it helped
Jason Luboff
@JLuboff
Nov 03 2016 22:13
:+1:
Monesul Haque
@mones-cse
Nov 03 2016 22:14
@JLuboff
try
add a test id and add min heiht to that
 <p class="text-right margins" id="test"><span id="display">0</span></p>
#test{
   min-height: 40px;
}
oh you already done it great (y)
Jason Luboff
@JLuboff
Nov 03 2016 22:15
I have to say...designing a calculator is annoying. The JS isn't too bad (albeit a few little things I probably could have done better), the actual look got me for a while. Even now, not crazy about my outcome but its a lot better then it was
A_A
@Otto-AA
Nov 03 2016 22:17
@JLuboff That should also do the trick
#display:before {
  content: "\0000a0";
}
Tony Miri
@TonyMiri
Nov 03 2016 22:17
@JLuboff Yeah. The calculator used to be in the intermediate projects, so it was one of the earlier ones I had to do. It was pretty daunting for me at that point.
Jeanpierso
@Jeanpierso
Nov 03 2016 22:20
Hello, Im new and have done my first Basic Project for the Tribute page: https://codepen.io/Jeanpierso/full/YGoLzL/ could I get feedback on what I have.
c0d0er
@c0d0er
Nov 03 2016 22:20
does anybody know why in the end of my js code, the seconds cannot be changed, and only the minutes are changed? http://codepen.io/c0d0er/pen/xRKpGO?editors=0011
Brandon
@bwolfram1
Nov 03 2016 22:21
how do I resize the thumbnail?
Tony Miri
@TonyMiri
Nov 03 2016 22:22
@Jeanpierso Looks great! Good job. Keep going!
Jeanpierso
@Jeanpierso
Nov 03 2016 22:22
@FatTone225 Thanks!
CamperBot
@camperbot
Nov 03 2016 22:22
jeanpierso sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @fattone225 |http://www.freecodecamp.com/fattone225
Brandon
@bwolfram1
Nov 03 2016 22:23
How do I fix this thumbnail? http://codepen.io/bwolfram/pen/oYNjyX
A_A
@Otto-AA
Nov 03 2016 22:24

@c0d0er Before clicking:

<h2 class="minute">2
        <span class="semi">:</span>
        <span class="second">00</span>
</h2>

vs after clicking:

<h2 class="minute">1</h2>
Aaron
@apalm1341
Nov 03 2016 22:24
Can anyone help me please?
Need help with using Tiled map editor program for making a game
A_A
@Otto-AA
Nov 03 2016 22:24
Night guys/girls :)
Aaron
@apalm1341
Nov 03 2016 22:24
I can't set up a bounding box
karocann
@karocann
Nov 03 2016 22:24
Doing twitch.tv. I'm trying to display two responses from an ajax call, but can't seem to get them to show up on the html page. The problem is in lines 52 to 57 in my codepen. Can anyone give me some ideas on how to accomplish this?
https://codepen.io/stmoen/pen/EgqrYo?editors=1010
Brandon
@bwolfram1
Nov 03 2016 22:25
night @Otto-AA
c0d0er
@c0d0er
Nov 03 2016 22:28
@Otto-AA thanks
CamperBot
@camperbot
Nov 03 2016 22:28
c0d0er sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @otto-aa |http://www.freecodecamp.com/otto-aa
Tony Miri
@TonyMiri
Nov 03 2016 22:30
@karocann I'm getting a 404 from your API request
Monesul Haque
@mones-cse
Nov 03 2016 22:31
@karocann your api url is wrong so it send back 404 error message
karocann
@karocann
Nov 03 2016 22:35
@FatTone225 @mones-cse When I call the API in my browser, it displays the error, message, and status which is what I want. What am I miussing?
https://api.twitch.tv/kraken/streams/brunofin?client_id=gl4ajs7qdnyu93ytjyrgnhtbdo3m9zh
Tony Miri
@TonyMiri
Nov 03 2016 22:36
Are you using CodePen?
karocann
@karocann
Nov 03 2016 22:37
@FatTone225 yes
Tony Miri
@TonyMiri
Nov 03 2016 22:37
So what are you getting in your js console when you make the api call?
from codepen
Jason Luboff
@JLuboff
Nov 03 2016 22:38
@Otto-AA That also did the trick as you mentioned, thanks!
CamperBot
@camperbot
Nov 03 2016 22:38
jluboff sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @otto-aa |http://www.freecodecamp.com/otto-aa
karocann
@karocann
Nov 03 2016 22:40
@FatTone225 I'm getting an "undefined" in my console. The 404 is shown as the status in the API call
@FatTone225 Why is the API call wrong?
Tony Miri
@TonyMiri
Nov 03 2016 22:43
No I don't know that it is
I was confused on what you were trying to do
But I see now
Brandon
@bwolfram1
Nov 03 2016 22:47
How do I adjust the size of the thumbnail? http://codepen.io/bwolfram/pen/oYNjyX
Jason Luboff
@JLuboff
Nov 03 2016 22:48
@karocann I'm not sure I understand what you're asking. lol
@karocann It looks like the api call is working, you're getting a returned object?
karocann
@karocann
Nov 03 2016 22:52
@JLuboff WHen you open the codepen, under the Display Name and the Status you see "undefined". I am trying to change that to the data shown in
https://api.twitch.tv/kraken/streams/brunofin?client_id=gl4ajs7qdnyu93ytjyrgnhtbdo3m9zh
for error ("Not Found") and message ("Channel 'brunofin' does not exist"). NO matter how change the data3 properties, I only get 404 or undefined. Does that help?
Jason Luboff
@JLuboff
Nov 03 2016 22:54
Ah, ya gotcha
Tony Miri
@TonyMiri
Nov 03 2016 22:54
@karocann Looks like this link might help
I'm not very familiar with the error handling with ajax requests, but it looks like you need to include a jqXHR parameter with your function
Jacob
@jdc101214
Nov 03 2016 22:57

@jdc101214
Hey guys! Im having so trouble with this challenge.
Link:
Code:```

// Setup
var collection = {
    "2548": {
      "album": "Slippery When Wet",
      "artist": "Bon Jovi",
      "tracks": [ 
        "Let It Rock", 
        "You Give Love a Bad Name" 
      ]
    },
    "2468": {
      "album": "1999",
      "artist": "Prince",
      "tracks": [ 
        "1999", 
        "Little Red Corvette" 
      ]
    },
    "1245": {
      "artist": "Robert Palmer",
      "tracks": [ ]
    },
    "5439": {
      "album": "ABBA Gold"
    }
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {
    if (prop !== "tracks" && value !== "") {
        collection[id][prop] = value;
    } else if (prop == "tracks" && value !== "") {
        if (!collection.hasOwnProperty("tracks")) {            
            collection[id][prop] = [];
        }
        collection[id][prop].push(value);
    } else { 
        delete collection[id][prop];
    }
    console.table(collection);
    return collection;
}
// Alter values below to test your code
updateRecords(2468, "tracks", "Free");

Link: https://www.freecodecamp.com/challenges/record-collection#?solution=%0A%2F%2F%20Setup%0Avar%20collection%20%3D%20%7B%0A%20%20%20%20%222548%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%22Slippery%20When%20Wet%22%2C%0A%20%20%20%20%20%20%22artist%22%3A%20%22Bon%20Jovi%22%2C%0A%20%20%20%20%20%20%22tracks%22%3A%20%5B%20%0A%20%20%20%20%20%20%20%20%22Let%20It%20Rock%22%2C%20%0A%20%20%20%20%20%20%20%20%22You%20Give%20Love%20a%20Bad%20Name%22%20%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%222468%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%221999%22%2C%0A%20%20%20%20%20%20%22artist%22%3A%20%22Prince%22%2C%0A%20%20%20%20%20%20%22tracks%22%3A%20%5B%20%0A%20%20%20%20%20%20%20%20%221999%22%2C%20%0A%20%20%20%20%20%20%20%20%22Little%20Red%20Corvette%22%20%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%221245%22%3A%20%7B%0A%20%20%20%20%20%20%22artist%22%3A%20%22Robert%20Palmer%22%2C%0A%20%20%20%20%20%20%22tracks%22%3A%20%5B%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%225439%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%22ABBA%20Gold%22%0A%20%20%20%20%7D%0A%7D%3B%0A%2F%2F%20Keep%20a%20copy%20of%20the%20collection%20for%20tests%0Avar%20collectionCopy%20%3D%20JSON.parse(JSON.stringify(collection))%3B%0A%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0Afunction%20updateRecords(id%2C%20prop%2C%20value)%20%7B%0A%20%20%20%20if%20(prop%20!%3D%3D%20%22tracks%22%20%26%26%20value%20!%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20%20%20collection%5Bid%5D%5Bprop%5D%20%3D%20value%3B%0A%20%20%20%20%7D%20else%20if%20(prop%20%3D%3D%20%22tracks%22%20%26%26%20value%20!%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20%20%20if%20(!collection.hasOwnProperty(%22tracks%22))%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20collection%5Bid%5D%5Bprop%5D%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20collection%5Bid%5D%5Bprop%5D.push(value)%3B%0A%20%20%20%20%7D%20else%20%7B%20%0A%20%20%20%20%20%20%20%20delete%20collection%5Bid%5D%5Bprop%5D%3B%0A%20%20%20%20%7D%0A%20%20%20%20console.table(collection)%3B%0A%20%20%20%20return%20collection%3B%0A%7D%0A%2F%2F%20Alter%20values%20below%20to%20test%20your%20code%0AupdateRecords(2468%2C%20%22tracks%22%2C%20%22Free%22)%3B%0A%0A

Jason Luboff
@JLuboff
Nov 03 2016 22:58
@karocann Have you thought about using $.getJSON instead of AJAX? With getJSON (what I used) I get returned useable data (I also used two API calls. One to Kraken and one to Channels)
c0d0er
@c0d0er
Nov 03 2016 22:58
@TylerMoeller thanks
CamperBot
@camperbot
Nov 03 2016 22:59
:cookie: 911 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
karocann
@karocann
Nov 03 2016 23:00
@FatTone225 @JLuboff I had tried a JSONP call initially with the hyperdev link, but it seemd to behave very erratically, so I decided to try an ajax call. Do you think a JSON with callbacks would be easier?
Tony Miri
@TonyMiri
Nov 03 2016 23:02
For me so far JSON with callbacks has always been easier, but I am working on the same project right now. Though, I am getting usable data with getJSON
Jason Luboff
@JLuboff
Nov 03 2016 23:02
I've never messed with AJAX...only JSON since as @FatTone225 mentioned...its always been easy lol
Tony Miri
@TonyMiri
Nov 03 2016 23:03
I mean, it's all ajax, just jquery makes it easier
Jason Luboff
@JLuboff
Nov 03 2016 23:03
True
karocann
@karocann
Nov 03 2016 23:04
@JLuboff Well, I'm stuck now, so I might as well try something different. Sounds like you used Kraken and freecodecamp/channel?
Jason Luboff
@JLuboff
Nov 03 2016 23:05
I did the project prior to needing the clientID, but ya
(I've since added the clientID)\
karocann
@karocann
Nov 03 2016 23:05
bye @JLuboff OK. I'll try tomorrow. bye
Jason Luboff
@JLuboff
Nov 03 2016 23:07
Adios
Tony Miri
@TonyMiri
Nov 03 2016 23:07
Interestingly I'm wondering if that JSON.parse() method might help him
karocann
@karocann
Nov 03 2016 23:07
@FatTone225 what is the JSON.parse methofd?
Tony Miri
@TonyMiri
Nov 03 2016 23:08
Look at that thing that Jacob just posted above
karocann
@karocann
Nov 03 2016 23:08
@FatTone225 I looked at it and my eyes are still crossed......
Tony Miri
@TonyMiri
Nov 03 2016 23:09
Since it is technically a JSON object that you're getting back when you put your API url in the browser, I'm wondering if there is a way to parse that JSON object into a different form to be able to access the data
But idk
Sounds like you're burnt out on it right now and I might just be making stuff up lol
karocann
@karocann
Nov 03 2016 23:10
@FatTone225 OK. later......
Tony Miri
@TonyMiri
Nov 03 2016 23:19
@jdc101214 I think this is where your problem is
 if (!collection.hasOwnProperty("tracks")) {            
            collection[id][prop] = [];
        }
        collection[id][prop].push(value);
    } else { 
        delete collection[id][prop];
    }
Jacob
@jdc101214
Nov 03 2016 23:22
@FatTone225 I got some help already but, the problem was with the hasOwnProperty.
It shold have had "[id]"
should
Tony Miri
@TonyMiri
Nov 03 2016 23:23
Ah. I see.

// Example
var ourArr = [ 9, 10, 11, 12];
var ourTotal = 0;

for (var i = 0; i < ourArr.length; i++) {
  ourTotal += ourArr[i];
}

// Setup
var myArr = [ 2, 3, 4, 5, 6];

// Only change code below this line
var total ="";

for(total = 0; total < myArr.length; total+= 20){
  console.log(myArr[total]);
}
Jason Luboff
@JLuboff
Nov 03 2016 23:24
@jdc101214 Please copy your own code without the link. The link can be very ugly :)
Jacob
@jdc101214
Nov 03 2016 23:24
@JLuboff I find it helpful when I help other people to see the context of their problem
@FatTone225 @JLuboff Could you help?
Tony Miri
@TonyMiri
Nov 03 2016 23:26
@jdc101214 Yeah. You might want to start overr
Jacob
@jdc101214
Nov 03 2016 23:26
@FatTone225 ?
Tony Miri
@TonyMiri
Nov 03 2016 23:26
Have you done previous bonfires where you set up a for loop?
Jacob
@jdc101214
Nov 03 2016 23:27
bonfire?
CamperBot
@camperbot
Nov 03 2016 23:27
give the name of the bonfire and I'll try to look it up!
Tony Miri
@TonyMiri
Nov 03 2016 23:27
Oh maybe they don't call them that anymore
Jacob
@jdc101214
Nov 03 2016 23:27
for(var total = 0; total < myArr.length; total+= 20){
  console.log(myArr[total]);
}
Jason Luboff
@JLuboff
Nov 03 2016 23:28
@jdc101214 I found it easier if you post the challenge name instead of the link. I also believe that sending someone a link clears their previous solution (I believe I read that so i could be wrong)
Tony Miri
@TonyMiri
Nov 03 2016 23:28
FreeCodeCamp used to be very "camping" themed and each coding challenge was called a 'bonfire'
Jacob
@jdc101214
Nov 03 2016 23:28
Ok I fixed the problem I think you are refering too.
@JLuboff It dosent
Tony Miri
@TonyMiri
Nov 03 2016 23:29
So @jdc101214 , what does each one of those declarations in your for loop say
Jacob
@jdc101214
Nov 03 2016 23:29
Im sorry but dinner is calling. Thanks for trying.
Tony Miri
@TonyMiri
Nov 03 2016 23:29
you are increasing total by too much lol
I know what they say
I was wondering if you know
Jason Luboff</