These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Feb 2017
JazzCard
@JazzCard
Feb 20 2017 00:04
it didn't work :( h-75 only seems to work on the img class
Tried it on the <div class="col-md-6 h-75"> and it didn't change anything
Zack Richardson
@ZackRich12
Feb 20 2017 00:04
Anyone mind giving me a few tips for starting my tribute page?
should i code everything in html and then add css and bootstrap?
Vered Rekanati
@veredrec
Feb 20 2017 00:06
@ZackRich12 The way I did it was to plan what I want to have and then I did the html and after I had all (or most) of the elements, I added the css.
Zack Richardson
@ZackRich12
Feb 20 2017 00:06
@veredrec Okay, Thank you!
CamperBot
@camperbot
Feb 20 2017 00:06
zackrich12 sends brownie points to @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @veredrec |http://www.freecodecamp.com/veredrec
Vered Rekanati
@veredrec
Feb 20 2017 00:06
No problem :)
JazzCard
@JazzCard
Feb 20 2017 00:10
can anyone explain how I'd make the image smaller while also making the div smaller as well? Currently when I try to make the image smaller, the div.row stays the same height. https://codepen.io/JazzCard/pen/jyjyba
Zack Richardson
@ZackRich12
Feb 20 2017 00:12
@JazzCard not 100% sure but try making "col-md-6" a smaller number??
@JazzCard im a total noob
JazzCard
@JazzCard
Feb 20 2017 00:14
Hmm yeah that may have helped
Daniel Aguila
@MxLooney
Feb 20 2017 00:23
Hey guys this may seem silly but how do you copy and paste a code on chat with the black background?
JazzCard
@JazzCard
Feb 20 2017 00:29
'''
line this?
'''
CamperBot
@camperbot
Feb 20 2017 00:29
:bulb: to format code use backticks! ``` more info
JazzCard
@JazzCard
Feb 20 2017 00:29
^
Hello911
@Hello911
Feb 20 2017 00:29
function rot13(str) { // LBH QVQ VG!
  var array=str.split(' ');
  for(var i=0; i<array.length;i++){
    array.push(array[i].split(""));
  }

  return array;
}

// Change the inputs below to test
rot13("IM JOE");
I want to make ([["I","M"],["J","O","E"]]. WHat is wrong?
JazzCard
@JazzCard
Feb 20 2017 00:30
Testing
@MxLooney You type your code inbetween two of these ```
my first pen
JazzCard
@JazzCard
Feb 20 2017 00:33
So it'll look like this after you do
ruiandrep
@ruiandrep
Feb 20 2017 00:33
please review
Daniel Aguila
@MxLooney
Feb 20 2017 00:34
`` <h1> s </h1>
JazzCard
@JazzCard
Feb 20 2017 00:37
@ruiandrep Looks good!
Tony Miri
@TonyMiri
Feb 20 2017 00:39
Anyone here pro with flexbox?
ruiandrep
@ruiandrep
Feb 20 2017 00:39
@JazzCard thanks m8
CamperBot
@camperbot
Feb 20 2017 00:39
ruiandrep sends brownie points to @jazzcard :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @jazzcard |http://www.freecodecamp.com/jazzcard
Hello911
@Hello911
Feb 20 2017 01:00

  for(var j=0;j<array.length;j++){
    for(var k=0;k<array[j].length;k++){
      var s=array[k];
      if(s=="!"||s=="?"||s=="."){
        s=s;
       }
      else if(s.charCodeAt()==77||s.charCodeAt()<77){
        s=String.fromCharCode(s.charCodeAt()+13);
      }
      else if(s.charCodeAt()>77){
        s=String.fromCharCode(s.charCodeAt()-13);
      }
    }
Why does the error say s.charCodeAt is not a function? How should I fix it?
JazzCard
@JazzCard
Feb 20 2017 01:14
what's the bootstrap v4 way to center an image. I think I found some documentation, but it sounded a bit confusing
Harrison
@VideoGC
Feb 20 2017 01:22
For the second project, you are supposed to build a personal portfolio. Going through the tutorials, a navigation bar was never mentioned. Did I miss something?
Zack Richardson
@ZackRich12
Feb 20 2017 01:26
how can i give a group of html code the same id?
Harrison
@VideoGC
Feb 20 2017 01:27
Use a class?
Zack Richardson
@ZackRich12
Feb 20 2017 01:27
<div class = "class"> like this?
Harrison
@VideoGC
Feb 20 2017 01:28
Yeah. To declare it in CSS, it would be:
.class { code }
Matthew Bailin
@mdbailin
Feb 20 2017 01:51
Hey all, I've written a miniMax algorithm for my ticTacToe project. For some odd reason, the algo isn't updating the variable "bestMove". Would anyone be able to explain why?
function miniMax(depth,seed){


  if (seed == "player"){
     bestScore = -10000000000000000;
   } else{
     bestScore = 10000000000000000;
   }
   if(moveRecord.every(isNotZero) || depth == 0){
    bestScore = evaluate();
    console.log("board is evaluated");
  }else{
    for(var k=0; k<moveRecord.length; k++){
      if(moveRecord[k] == 0){
        var m = k;
        console.log("open move found");
        moveRecord[m] = -1;
        if(seed == "player"){
          currentScore = miniMax(depth-1,"computer")[0];
          if(currentScore > bestScore){
            bestScore = currentScore;
            bestMove = k;
            console.log(bestMove + " is the best move now.")
          }
        }else{
          currentScore = miniMax(depth-1,"player")[0];
          if(currentScore < bestScore){
            bestScore = currentScore;
            bestMove = k;
            console.log(bestMove + " is the best move now.")
          }
        }
       moveRecord[k] = 0;
      }
    }
  }
  return [bestScore,bestMove];
Robert Collins
@robbiemu
Feb 20 2017 02:01
when an input has focus it interrupts click events in its area. How do I get them back?
Zack Richardson
@ZackRich12
Feb 20 2017 02:20
http://codepen.io/ZackRich12/pen/egwWKy how can i center each word of its corresponding picture?
David Meyers
@davmey
Feb 20 2017 02:23
This css code will center both image and anchor text to the window.

img {
display: block;
margin: 0px auto;
}

a {
text-align: center;
}

@ZackRich12 if that's not what you're wanting then try wrapping them in divs and centering them according to that.
Zack Richardson
@ZackRich12
Feb 20 2017 02:24
<div align = center> ???
@davmey
David Meyers
@davmey
Feb 20 2017 02:26
No no, that div is just a container, css actually wouldn't be any different, but now you can resize and position divs as you like.
<div>
<img class = columnImage src = "https://tinyurl.com/zmdoh2n" id = "healthImg">

<a href = "#">
<h4>Transportation</h4>
</a>
</div>
also, I wouldn't put spaces between = and "" in your html
this: class="columnImage"
not this: class = columnImage
Nene M
@ZetaRuby
Feb 20 2017 02:46
do I ask here if i need help?
Mihai Veronica
@VeronicaM
Feb 20 2017 02:46
@ZetaRuby yes, go ahead :)
Nene M
@ZetaRuby
Feb 20 2017 02:50
Okay, well, I'm working on the creating a tribute page project. And I can't very well remember everything I learned in all the previous lessons. I just wanted to know if I was expected to have gone through everything just once then do the project or if I had to go back and do the lessons again in order to do the project. I feel dumb for not being able to recall what I learned, is that bad?
I can't remember who to properly use a div element and other things
Mihai Veronica
@VeronicaM
Feb 20 2017 02:51
@ZetaRuby that's ok if you can't remember everything, you can review as you code
you tribute page
Zack Richardson
@ZackRich12
Feb 20 2017 02:52
@davmey I got it here it is:
http://codepen.io/ZackRich12/pen/egwWKy
Mihai Veronica
@VeronicaM
Feb 20 2017 02:52
@ZetaRuby you can reference this website for basic html questions https://www.w3schools.com/
Nene M
@ZetaRuby
Feb 20 2017 02:54
Oh, so it's okay if I went back and looked at everything I did? I don't know, I just thought you had to go through the lessons then you'll be ready to do the project on your own...
Okay, thank you
@VeronicaM Thank you
CamperBot
@camperbot
Feb 20 2017 02:54
zetaruby sends brownie points to @veronicam :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @veronicam |http://www.freecodecamp.com/veronicam
Mihai Veronica
@VeronicaM
Feb 20 2017 02:55
you're welcome @ZetaRuby
Zack Richardson
@ZackRich12
Feb 20 2017 03:02
http://codepen.io/ZackRich12/pen/egwWKy
a work in progress but does anyone have any tips for my tribute page so far?
philiplee15
@philiplee15
Feb 20 2017 03:07
<body>
  <div class="content">
    <h1>Tic Tac Toe</h1>
    <p>Click Here to Play</p> 
  </div>  
</body>
can someone help explain why when i add a div container around div class content, content goes from being centered on the page to like offscreen at the top
Chris Jantzen
@XXiphias
Feb 20 2017 03:10
you mean you're adding another div outside of .content?
if so it means that that outer div is at the top, wherever you're seeing it. and then content is being moved relative to it, inside of it
likely .content has position: relative
badalsaibo
@heyDante
Feb 20 2017 03:13
cbot
CamperBot
@camperbot
Feb 20 2017 03:13
you called?
pumasunam8
@pumasunam8
Feb 20 2017 03:17
@ruiandrep bueno!
CamperBot
@camperbot
Feb 20 2017 03:17

freeCodeCamp rooms:

:point_right: Here is a list of our official chat rooms
pumasunam8
@pumasunam8
Feb 20 2017 03:18
@mwjsmith7 very good!
CamperBot
@camperbot
Feb 20 2017 03:19

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
David Meyers
@davmey
Feb 20 2017 03:19
Good job @ZackRich12
xemexpress
@xemexpress
Feb 20 2017 03:51
@xemexpress
hello guys, I was trying to draw a Greece flag in canvas, but I don't understand why there is a black stroke on the fifth line.. Anyone knows why?
http://codepen.io/xemexpress/pen/LxBQBX
JazzCard
@JazzCard
Feb 20 2017 04:27
How do you center an element inside of a div using bootstrap?
Ken Haduch
@khaduch
Feb 20 2017 04:29
@JazzCard - which version of bootstrap are you using? if you are using version 3.x, what usually works is to put class="text-center" as an attribute on the <div> - I'm not sure if they have changed it if you are using the bleeding edge v4 alpha version.
JazzCard
@JazzCard
Feb 20 2017 04:29
im using v4, and text-center works only for text
Ken Haduch
@khaduch
Feb 20 2017 04:30
@JazzCard - do you have a link to your project?
that you'd care to post...
JazzCard
@JazzCard
Feb 20 2017 04:31
for sure!
One sec
oh, never mind! Looks like .text-center works
for centering a button. Weird lol
Ken Haduch
@khaduch
Feb 20 2017 04:38
@JazzCard - yeah, I just verified that it does still work for v4...
JazzCard
@JazzCard
Feb 20 2017 04:38
so does .text-center just center any element, regardless if its text?
Ken Haduch
@khaduch
Feb 20 2017 04:42
@JazzCard - you can read about the text-align property here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align - it seems to work fine, although I don't know what the elements are that it will not center-align. (assuming that you use text-align: center; which is basically all that the .text-center class puts on the style for that class, along with a ! important, which makes sure to override any conflicting properties.
@JazzCard - they also mention the other standard way of centering things, at https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#Notes that note on that page.
JazzCard
@JazzCard
Feb 20 2017 04:45
Thanks @khaduch
CamperBot
@camperbot
Feb 20 2017 04:45
jazzcard sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2500 | @khaduch |http://www.freecodecamp.com/khaduch
Robert Collins
@robbiemu
Feb 20 2017 04:52
I'm having trouble with a floating dialog. I need it to tend to be fixed a bit from bottom and right. But, It should always be at least after a certain position down on the page
JazzCard
@JazzCard
Feb 20 2017 05:11
Hey all, just finished my tribute page. Feedback always welcome :) https://codepen.io/JazzCard/full/jyjyba/
zhen zeng
@zengyanzi
Feb 20 2017 06:47
hi,is there anybody use codepen with bootstrap,please?
badalsaibo
@heyDante
Feb 20 2017 06:57
@zengyanzi yes ma'am!
@JazzCard Nice one Jazz.
zhen zeng
@zengyanzi
Feb 20 2017 07:18
it seems something wrong with my bootstrap setting
@heyDante could you tell me how to set up please
badalsaibo
@heyDante
Feb 20 2017 07:20
@zengyanzi settings --> CSS --> quick Add --> Bootstrap
zhen zeng
@zengyanzi
Feb 20 2017 07:21
I have set like it
badalsaibo
@heyDante
Feb 20 2017 07:22
@zengyanzi Ive seen it doesnt work for most of the pens (of mine too) so i load it directly on my code
zhen zeng
@zengyanzi
Feb 20 2017 07:23
but it sncaught TypeError: Cannot read property 'extend' of undefined
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
backbone-min.js:1 Uncaught TypeError: Cannot read property 'extend' of undefined
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
backbone-min.js:1 Uncaught TypeError: Cannot read property 'extend' of undefined
at backbone-min.js:1
at backbone-min.js:1
at backbone-min.js:1
so need I copy all the link to html directly,
badalsaibo
@heyDante
Feb 20 2017 07:24
copying it to above your html code
zhen zeng
@zengyanzi
Feb 20 2017 07:24
yes ,it works now
badalsaibo
@heyDante
Feb 20 2017 07:24
cool
zhen zeng
@zengyanzi
Feb 20 2017 07:24
I remove all from the setting and copy to the html
thanks a lot
badalsaibo
@heyDante
Feb 20 2017 07:25
i always prefer copying it to the html.
zhen zeng
@zengyanzi
Feb 20 2017 07:26
happy to solve this, I will continue my study now
badalsaibo
@heyDante
Feb 20 2017 07:26
gl
zeddmacharia
@zeddmacharia
Feb 20 2017 08:16
Zhanibek
@zhann1982
Feb 20 2017 08:30
@zeddmacharia Hello! Put your ul and li inside of div tag. give that div any class. And then write in css .class{display:block; margin:0 auto;}
zeddmacharia
@zeddmacharia
Feb 20 2017 08:33
@zhann1982 that did not work
http://codepen.io/macharia95/pen/vgqpxW how do i center my pills
Abhijeet Singh
@abhijeetps
Feb 20 2017 08:39
Would anybody share his/her Twitch.tv App Project?
The instructions given on FCC is very confusing.
Zhanibek
@zhann1982
Feb 20 2017 08:44
@zeddmacharia what about that ul li {
display: block;
margin: 0 auto;
}
zeddmacharia
@zeddmacharia
Feb 20 2017 08:48
@zhann1982 okay..that worked but that not how i wanted it to look like ...now how do i pull my menu1 pill to the right?
Marianissimus
@Marianissimus
Feb 20 2017 08:48
@zeddmacharia @zhann1982 Doesn't that nav actually need a container?
Zhanibek
@zhann1982
Feb 20 2017 08:49
You can give ul tag its width. For example: ul {width:400px;}
@Marianissimus yes. i advised to put everything in div
zeddmacharia
@zeddmacharia
Feb 20 2017 08:51
@Marianissimus I just added it..how do i pull my menu 1 pill to the right
Marianissimus
@Marianissimus
Feb 20 2017 08:53
where is it? I clicked on the pen and it's not there:) You can use smth like offset: col-md-offset-1
zeddmacharia
@zeddmacharia
Feb 20 2017 08:53
i added the pill-right class in the li and it did not work
davidridwann
@davidridwann
Feb 20 2017 08:58
@zeddmacharia you can see it http://getbootstrap.com/components/
Abhijeet Singh
@abhijeetps
Feb 20 2017 08:58
Guys, check if its showing correct locations and weather. Also, suggestion is warmly welcomed.
http://codepen.io/aps120797/full/BQXRZr
Zhanibek
@zhann1982
Feb 20 2017 09:00
Hello everyone! I have a problem with my weather viewer. When autocomplete menu drops down an extra line of text appears at the bottom of the page. How to fix this problem? Any suggestions? And how trigger pressing enter button when user enters text in input (type=text)?
zeddmacharia
@zeddmacharia
Feb 20 2017 09:07
@zhann1982 how do i pull my pills to the right?#
Zhanibek
@zhann1982
Feb 20 2017 09:08
Are you using boostrap?
@zeddmacharia Are you using boostrap?
So you want to put HOME pill to the left and other pills to the right?
Abhijeet Singh
@abhijeetps
Feb 20 2017 09:09
Till, then, check out my Wikipedia Viewer:
http://codepen.io/aps120797/full/ZLdzbK
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 09:18

Im working on the calculator project. Can you tell me how my JQUERY is so far , what should i change and what should i do first? thank you :)

http://codepen.io/oshikurou/pen/jyKLyg?editors=0011

Philipp Scholz
@philipp32
Feb 20 2017 09:28
@aps120797 Seems fine to me. Couple of things I would do:
  1. Trigger the search function via enter.
  2. Have the grey box where the articles appear hidden in the beginning.
  3. Make the buttons next to the search bar responsive. But all else: Great job! :)
@aps120797 Doesn't for me. Sry.
@philipp32
Hey. :) Short question. Refused to display 'https://www.twitch.tv/jonsandman' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. How can I solve this error? Someone said I shouldn't represent something in an i-frame.
But I couldn't find the problem with the i-frame.
Abhijeet Singh
@abhijeetps
Feb 20 2017 09:33
@philipp32 That's the perfect sugestions I was searching for. Thanks. :smile:
CamperBot
@camperbot
Feb 20 2017 09:33
aps120797 sends brownie points to @philipp32 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @philipp32 |http://www.freecodecamp.com/philipp32
Abhijeet Singh
@abhijeetps
Feb 20 2017 09:33
@philipp32 Will soon update it.
Philipp Scholz
@philipp32
Feb 20 2017 09:34
@aps120797 Your'e welcome. :)
Looks much better than mine.
Abhijeet Singh
@abhijeetps
Feb 20 2017 09:35
@philipp32 May I have a look at yours?
Any suggestions are welcome.
Try it in full page not.
It's not responsive.
Abhijeet Singh
@abhijeetps
Feb 20 2017 09:38
@philipp32 It's beautiful! Better than mine. Mine is simple. I have mostly used predefined Bootstrap designs. Yours completely designed by you!
@philipp32 Have you don eTwitch.tv API?
Philipp Scholz
@philipp32
Feb 20 2017 09:39
What suggestions apart from responsive design do you have? Thanks. :)
the API works fine.
zeddmacharia
@zeddmacharia
Feb 20 2017 09:41
@zhann1982 yes am using bootstrap
Philipp Scholz
@philipp32
Feb 20 2017 09:42
Do you have some feedback for my twitch viewer? I haven't really worked according to the user rules. :) http://codepen.io/philipp32/full/QdrgYR/
@thodorisanta Seems fine. I can't see any problems with it.
Dany Din
@danydin
Feb 20 2017 09:45
@philipp32 its working for me only for the first search
then it nots searching again another query
Philipp Scholz
@philipp32
Feb 20 2017 09:46
@danydin You need to press the X. ^^
Dany Din
@danydin
Feb 20 2017 09:47
make it work without that as well .. people wont bother ;)
dengxianxiao
@dengxianxiao
Feb 20 2017 09:53
How to use local image in codepan io?
kirbyedy
@kirbyedy
Feb 20 2017 09:56
@dengxianxiao you will have to upload it somewhere on the internet
for example https://postimage.io/
or if you have any cloud account with public access
Fabio
@Gentarozzo
Feb 20 2017 10:09
@philipp32 nice app ^^ I'm having problem to test if the channel exists or not... the api gave me always the same answer NULL... there's no error if the account does not exists
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 10:20

how can i make my calculator accept 2 or more number digits? like "55 or 555"

http://codepen.io/oshikurou/pen/jyKLyg?editors=0011

zeddmacharia
@zeddmacharia
Feb 20 2017 10:32
http://codepen.io/macharia95/pen/vgqpxW how do i add an image background
achudoz
@achudoz
Feb 20 2017 10:50
@zeddmacharia
body {
background-image: url('locationofyourimage');
}
bleka
@bleka
Feb 20 2017 10:53
how can i make my text size responsive?
achudoz
@achudoz
Feb 20 2017 10:54

@thodorisanta don't use

$("#screen").text(buttonPressed)

but replace .text with .append

@thodorisanta you are going to have other problems with your logic though.
Lalith Kishore
@dantetheshadeslayer
Feb 20 2017 11:17
Hey GUYS
I NEED HELP
Is anyone doing the freecode camp challenges for HTML?
HELllo
why is it empty or is it my internet connection
第8哥
@de8ug
Feb 20 2017 11:20
so is that your real question?
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 11:24
@achudoz what do you mean?
Zhanibek
@zhann1982
Feb 20 2017 11:33
Hello everyone! I need help. I have two problems with my weather viewer: 1- autocomplete menu does't disappear when i press enter . 2- an extra line of text appears at the bottom of page after choosing in autocomplete menu.
bleka
@bleka
Feb 20 2017 11:34
Why is there a big white border around my image? https://codepen.io/bleka/full/dNBvZV/
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 11:36
@zhann1982 for your 2nd problem on html delete line 42 <hr />
Zhanibek
@zhann1982
Feb 20 2017 11:37
@thodorisanta that didn't help
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 11:38
@zhann1982 it does! do it and then run the page again
@zhann1982 ctrl + shift + 5
Zhanibek
@zhann1982
Feb 20 2017 11:41
@thodorisanta The problem is not the line. The problem is the text that appears after i choose any variant in autocomplete menu
appears at the bottom of page
@thodorisanta Excuse me, I think I should first check my pen in sublime.
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 11:47
@zhann1982 okay. Good luck with your project!
Chris Ji
@guidetheorient
Feb 20 2017 11:48
the example's pic can fit the window,why mine is not like this
kirbyedy
@kirbyedy
Feb 20 2017 11:58
@guidetheorient I dont see a picture on yours
Chris Ji
@guidetheorient
Feb 20 2017 12:08
sorry, you can change a pic link
the GreatFireWall
Federico Dente
@fez994
Feb 20 2017 12:11
I have a problem with the local weather APP, i don't know what i'm doing wrong, the app is getting the coordinates correctly but not showing any data from the api, this is my code
http://codepen.io/fez994/pen/GrbqrN
Clyde Lobo
@oppiniated
Feb 20 2017 12:30
@fez994 Are you sure it's getting the coordinates?
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
kirbyedy
@kirbyedy
Feb 20 2017 12:32
@fez994 with that link for your page you can`t get geolocation
its unsecure
Matthew
@Krimsonmedic
Feb 20 2017 12:34
have any suggestions for cool buttons to spice up my "local weather" project?
For the farenhiet and Cel
@fez994 hey man, I'm just finishing that project
kirbyedy
@kirbyedy
Feb 20 2017 12:36
Matthew
@Krimsonmedic
Feb 20 2017 12:36
want me to give you a secured API for weather?
it will work with the built in geolocation
Then you'll have to make sure to load you codepen in HTTPS
for everything to show up
When you get the API make sure to select the HTTPS:// version
and TY @kirbyedy
CamperBot
@camperbot
Feb 20 2017 12:38
krimsonmedic sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1817 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
hey guys, i am stuck here....
i cant rotate the quote..
Matthew
@Krimsonmedic
Feb 20 2017 12:45
Does this look dumb?
Ken Haduch
@khaduch
Feb 20 2017 12:46

@fez994 - the weather app link that you posted does get the coordinates when I open it with firefox, because they still permit the geolocation to work without https:// so if you are also using firefox (and I don't know if any other browsers have the https:// requirement in place?) then the location will work. As @oppiniated points out, on Chrome, it will not work unless you use https:// so that is a problem.

The next problem (still using firefox, where the coordinates are returning) is that you have a small error in your code for this line: var lon = position.coord.longitude; coord should be coords.

So I edited that, and the next thing is that openweather is returning an error Invalid API key. Please see http://openweathermap.org/faq#error401 for more info. So I'm not sure what is wrong with your API key?

Then @Krimsonmedic offered a different site to use, and there is a note or two on the forum that discusses the project and options - for you to look through, here is the information: freeCodeCamp/freeCodeCamp#7853 and this one, too: freeCodeCamp/freeCodeCamp#9145 - you can scan through those, if you haven't seen them, and see if they have any insight to offer? I believe that the apixu.com site it discussed there.

Good luck!

Matthew
@Krimsonmedic
Feb 20 2017 12:47
I just posted mine, it shows how I pulled the other API, almost exactly the same, but with different data sets, or rather the names for the arrays are different.
Which I guess is normal among all APIs
Sonja
@sonjaSch
Feb 20 2017 12:49
hey my icons are not displayed on codepen..
how can i fix this
Ken Haduch
@khaduch
Feb 20 2017 12:50
@sonjaSch - want to share your URL for your codepen project? we can look...
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 12:50

Can you check the JS on my calculator app and tell me what do you think about the logic im following SO FAR , what should i do wrong and what should i do next? :)

http://codepen.io/oshikurou/pen/jyKLyg?editors=1111

Ken Haduch
@khaduch
Feb 20 2017 12:51
@Krimsonmedic - your weather site works, but it does display very minimal information - like I don't know what my location is, or rather, what it is reporting on?
Clyde Lobo
@oppiniated
Feb 20 2017 12:52
@sonjaSch You are using relative URLs for you image iconUrl/Sunrise.png
Use fully qualified URLs
An example is this in your css http://images02.wetter.tv/shutterstock_105012008.jpg/articlecoverimage/2.836.384
Ken Haduch
@khaduch
Feb 20 2017 12:54
@sonjaSch - yes, if you are uploading this from a local project on your own computer, you might have trouble on CodePen if you are using locally stored images. Free CodePen accounts do not allow upload of images, etc. so you have to have a full URL to refer to them.
Sonja
@sonjaSch
Feb 20 2017 12:57
@oppiniated @khaduch ok I see thx so far, that means i need other images?
CamperBot
@camperbot
Feb 20 2017 12:57
sonjasch sends brownie points to @oppiniated and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 583 | @oppiniated |http://www.freecodecamp.com/oppiniated
:star2: 2501 | @khaduch |http://www.freecodecamp.com/khaduch
FL8Liew
@FL8Liew
Feb 20 2017 13:02
hey guys, anyone can help me with random quote machine?
Federico Dente
@fez994
Feb 20 2017 13:03
@Krimsonmedic @khaduch I'll try another API then, btw i'm aware of the https and codepen problem, thats why i'm not programming on codepen but on sublime text 3, you are getting invalid api key because i changed it with a new one; I changed the coords but still the API is not working (not showing city name on my html) https://codepen.io/fez994/pen/GrbqrN even if i load codepen with https:// nothing change
Ken Haduch
@khaduch
Feb 20 2017 13:03
@sonjaSch - you can find other images that you are able to access over the web, or you can put your current images on a site where you can access them - I think that you can do that on github - there are ways to upload projects and run them on github (sorry, I don't know the details) - but I just reloaded your page and am seeing some icons now, so you might have changed it already?
Sonja
@sonjaSch
Feb 20 2017 13:06
@khaduch got it :sweat_smile:
Federico Dente
@fez994
Feb 20 2017 13:08
Can someone explain this error to me? XMLHttpRequest cannot load file:///C:/Users/Federico/Desktop/Web%20Developer/Local%20Weather%20App/api…ather?lat=44.4976146&lon=11.3342943&appid=735124465b106ee2def7cd7533415e27. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Ken Haduch
@khaduch
Feb 20 2017 13:08
@fez994 - your URL that you posted is using https:// so that will work to get geolocation info, but since you are loading the top-level page with https:// it will not access insecure information from openweather (which has to be accessed with http:// for the free account). Now, if I change your top-level URL to http:// and running on FireFox, it works - gets the geolocation and displays the city name. So it is still the problem with the access mode and which browser you are using. It works with http:// and FireFox.
Federico Dente
@fez994
Feb 20 2017 13:13
@khaduch Oh yeah now i see, it works on http:// on firefox only, but when i try on chrome it doesn't work. If i want my website to work in all browser what can i do? Change api like @Krimsonmedic said?
Ken Haduch
@khaduch
Feb 20 2017 13:13
@fez994 - this is the error that is reported in the console for the https:// top-level URL and http:// weather URL : 08:11:17.586 Blocked loading mixed active content “http://api.openweathermap.org/data/2.5/weather?lat=xxx&lon=xxxx&appid=xxxx” 1 jquery.min.js:4:16835 (I X'ed out the appid, and location)
@fez994 - those notes that I posted talk about alternatives. You can use a different site that will accept https:// requests for the weather API. You can use IP location information (which you can access over http:// but the accuracy is not always too great. ) Those options are all discussed in the notes in the forum: freeCodeCamp/freeCodeCamp#7853 and freeCodeCamp/freeCodeCamp#9145
Federico Dente
@fez994
Feb 20 2017 13:22
@khaduch Thanks man, now i fully understand the problem, i'll try another alternative; thanks for the time u dedicated answering my question, i really appreciate it :) bye
CamperBot
@camperbot
Feb 20 2017 13:22
fez994 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2502 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 20 2017 13:23
@fez994 - you're welcome and good luck with the project!
Daniel Godigna
@DGAcode
Feb 20 2017 13:42
Hello, how do I use the twitter API I just need a simple button to tweet out a quote
Tony
@FreakishLancer
Feb 20 2017 13:52
@DGAcode One of the most common ways is to just have https://twitter.com/intent/tweet?text= as the href attribute of the Tweet link and append your quote and author to the end of it.
FL8Liew
@FL8Liew
Feb 20 2017 13:52
anyone can help me with random quote machine?
Daniel Godigna
@DGAcode
Feb 20 2017 14:00
@FreakishLancer thanks you mean like this
CamperBot
@camperbot
Feb 20 2017 14:00
dgacode sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Daniel Godigna
@DGAcode
Feb 20 2017 14:00
<a href="https://twitter.com/intent/tweet?text=">Tweet</a>
Tony
@FreakishLancer
Feb 20 2017 14:01
@DGAcode Everytime you get a random quote, you will add the quote text and author for that quote at the end of that URL.
If you go to this link, notice that you have a window showing the text you intend to tweet. Since there is nothing at the end of this URL, there is no text in the input field yet.
tfitzp
@lefitzp
Feb 20 2017 14:05
If i've built my portfolio page, that answers all the stories, and bought a domain to have it as my actual portfolio can I submit this to the 'Build a personal portfolio' section? Or do I need to transfer it all to Codeine?
Daniel Godigna
@DGAcode
Feb 20 2017 14:05
I am sorry give me a minute I need to do something
tfitzp
@lefitzp
Feb 20 2017 14:05
Codepen*
Tony
@FreakishLancer
Feb 20 2017 14:06
@lefitzp I've seen a lot of people submit their portfolios from Github pages, so I'm sure you can do that.
tfitzp
@lefitzp
Feb 20 2017 14:06
@FreakishLancer Thank you very much!
CamperBot
@camperbot
Feb 20 2017 14:06
lefitzp sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Daniel Godigna
@DGAcode
Feb 20 2017 14:27
@FreakishLancer I am sorry, I wasn't here. I understand the tricky part is how to select the quote the person is watching I guess
Chris Ji
@guidetheorient
Feb 20 2017 15:03
how can i fix the pic in to the jumbotron??http://codepen.io/guidetheorient/pen/QdXJOQ?editors=1000
Shawon Ibn Kamal
@shawonibnkamal
Feb 20 2017 15:09
@guidetheorient use img-responsive class on the image and take <div class="container"> inside the jumbotron
BebeSel
@bebesel
Feb 20 2017 15:17
hi there.. I have a problem.. how to maintain my text and image inside my yellow box.. whenever I resize my window?
Ashley
@Ashtheyogi
Feb 20 2017 15:18
Hey I just finished my tribute page. How do I share the link?
Zack Richardson
@ZackRich12
Feb 20 2017 15:21
just copy and paste the url @Ashtheyogi
http://codepen.io/ZackRich12/pen/egwWKy
anyone have any tips for my page?? It's still a work in progress
Ashley
@Ashtheyogi
Feb 20 2017 15:21
Where can we find the URL? in the browser bar? @ZackRich12
Zack Richardson
@ZackRich12
Feb 20 2017 15:22
Correct! @Ashtheyogi
Ashley
@Ashtheyogi
Feb 20 2017 15:23
thank you @ZackRich12
CamperBot
@camperbot
Feb 20 2017 15:23
ashtheyogi sends brownie points to @zackrich12 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @zackrich12 |http://www.freecodecamp.com/zackrich12
Zack Richardson
@ZackRich12
Feb 20 2017 15:23
no problem!
Eyej
@Eyej
Feb 20 2017 15:25
hi, pls how do i separate the nav-pills in the menu bar of my portfolio? and also change their color? i tried pull-right, its not working, i dunno if its an error but its driving me nutshttp://codepen.io/Eyej/pen/xgNGWM?editors=1100
Robert Collins
@robbiemu
Feb 20 2017 15:26

I have <li> elements that I am dynamically generating and I have set attributes I would like to sort on. It looks like this:

<ul><li data-order="1000">natural first</li>
<li data-order="1">second</li>
<li data-order="1002">third</li>
</ui>

So, data-order is set dynamically as the user changes search values. How can I sort the position of the <li>'s within the<ul> each time the data-order changes?

WiseKodama
@WiseKodama
Feb 20 2017 15:27
document.getElementById('searchResults').innerHTML = document.getElementById('searchResults').innerHTML + "<div><h4><a data-toggle='collapse' href='#collapse" + i + "'>" + artResults[1][i] + "</a></h4><div class='collapse' id='collapse" + i "'><p>" + artResults[2][i] + "</p></div></div>";
Any chance anyone can spot the unexpected string error there?
just saw it :)
easier to spot on white background
Robert Collins
@robbiemu
Feb 20 2017 15:28
haha :) :+1:
WiseKodama
@WiseKodama
Feb 20 2017 15:30
any ideas why that doesnt create collapsible divs though?
Jasmin Parent
@charlesdarkwind
Feb 20 2017 15:31
Please help , why is my function firstSentence showing stuff if I do a console log but why I get undefined when calling it and assigning to "description"?
        for (var i = 0; i < resultLength; i++ ) {
          var pageName = data[1][i];
         // var description = data[2][i];
          var link = data[3][i];

          var description = firstSentence(pageName); //---HERE---

          $("#main").append("<a target='_blank' href="+ link +"><div class='results container-fluid'><h5>"+ pageName +"</h5>"+ description +"</div></a>")
        };   
      }//success func
  });//ajax
}        

//Since we want the first sentence of the wiki article and not the first paragraph, we must use the query API and not the //opensearch one
function firstSentence(queryName) {  

var queryUrl ="https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exsentences=1&titles="+queryName+"&origin=*";

  $.ajax( {
    url: queryUrl,
    datatype: 'json',
    success: function(data) {

      data.query.pages[Object.keys(data.query.pages)].extract;
Robert Collins
@robbiemu
Feb 20 2017 15:32
@charlesdarkwind it hasn't resolved yet
Does this help?
Search for something and press enter or click the search thingy
you will get a div with 10 items
they are perma collapsed
doesn't let me unfold them
Robert Collins
@robbiemu
Feb 20 2017 15:33
@WiseKodama I see. are these collapse class/id/routes from a library? It's bootstrap?
WiseKodama
@WiseKodama
Feb 20 2017 15:34
yeah
Robert Collins
@robbiemu
Feb 20 2017 15:35
3.3.7
stevenAfarmer
@stevenAfarmer
Feb 20 2017 15:35

Why will my image not load? <h1 class="text-primary">Skeletor</h1>
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiD67Ol_p7SAhUq4YMKHTVlDPoQjRwIBw&url=http%3A%2F%2Fbustatoons.blogspot.com%2F2012%2F03%2Fskeletor-on-throne-3.html&psig=AFQjCNHlLaPRaDYKNha9DuOGJtgVF7DA4g&ust=1487690800134600" alt="Skeletor on the throne.">

<p>3 Reasons Skeletor should rule Castle Greyskull</p>

<li>His face is a skull.</li>
<li>He-Man hides behind an alias. Skeletor does not.</li>
<li>Skeletor is hands on and always taking action. He participates in almost every mission. Never letting minions do all the work.</li>

Robert Collins
@robbiemu
Feb 20 2017 15:36
@stevenAfarmer I get an automatic redirect when I open that link
WiseKodama
@WiseKodama
Feb 20 2017 15:37
the link is bad @stevenAfarmer
@robbiemu thats the one I am following basically
can you see what I am missing?
stevenAfarmer
@stevenAfarmer
Feb 20 2017 15:37
@robbiemu @WiseKodama Thanks
CamperBot
@camperbot
Feb 20 2017 15:37
stevenafarmer sends brownie points to @robbiemu and @wisekodama :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @wisekodama |http://www.freecodecamp.com/wisekodama
:cookie: 325 | @robbiemu |http://www.freecodecamp.com/robbiemu
playingwithinfinity
@playingwithinfinity
Feb 20 2017 15:38
How do I draw the board for Tic Tac Toe? I'm currently using buttons, but I want to know how to make the grid.
WiseKodama
@WiseKodama
Feb 20 2017 15:38
bootstrap grid?
just divs with borders? :)
stevenAfarmer
@stevenAfarmer
Feb 20 2017 15:38
@robbiemu @WiseKodama I fixed it. Thanks again
CamperBot
@camperbot
Feb 20 2017 15:38
stevenafarmer sends brownie points to @robbiemu and @wisekodama :sparkles: :thumbsup: :sparkles:
:warning: stevenafarmer already gave robbiemu points
:warning: stevenafarmer already gave wisekodama points
WiseKodama
@WiseKodama
Feb 20 2017 15:39
@stevenAfarmer :+1:
Robert Collins
@robbiemu
Feb 20 2017 15:40
@WiseKodama change it so it has a button isntead of the link. if the button works but the link doesn't, find out how you can fire off 'event.preventDefault()' when click the link
WiseKodama
@WiseKodama
Feb 20 2017 15:40
@robbiemu it wasnt that... I forgot to add bootstrap js...
@robbiemu thanks!
CamperBot
@camperbot
Feb 20 2017 15:40
wisekodama sends brownie points to @robbiemu :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @robbiemu |http://www.freecodecamp.com/robbiemu
Robert Collins
@robbiemu
Feb 20 2017 15:40
nps
WiseKodama
@WiseKodama
Feb 20 2017 15:40
:facepunch: mysel
f
one thing though
Robert Collins
@robbiemu
Feb 20 2017 15:40

I have <li> elements that I am dynamically generating and I have set attributes I would like to sort on. It looks like this:

<ul><li data-order="1000">natural first</li>
<li data-order="1">second</li>
<li data-order="1002">third</li>
</ui>

So, data-order is set dynamically as the user changes search values. How can I sort the position of the <li>'s within the<ul> each time the data-order changes?

WiseKodama
@WiseKodama
Feb 20 2017 15:41
can you check my pen again?
see the autocomplete? once you delete the text field and hover underneath it you can see its still there...
Robert Collins
@robbiemu
Feb 20 2017 15:42
@WiseKodama I'm also noticing with the search "foo" that the first few do not collapse, but then the later few do
WiseKodama
@WiseKodama
Feb 20 2017 15:42
yeah, cause the autocomplete dropdown is above them
not sure how to make it go away
I tried display:none but nothing
Robert Collins
@robbiemu
Feb 20 2017 15:43
@WiseKodama actually it goes away when I click it
but the links are still unresponsive
WiseKodama
@WiseKodama
Feb 20 2017 15:44
Doesn't go away for me
Its transparent
but its still there
Robert Collins
@robbiemu
Feb 20 2017 15:44
@WiseKodama you're talking about the big white dropdown right
WiseKodama
@WiseKodama
Feb 20 2017 15:44
you should have a pointer hand left and right of the links
the autocomplete one yeah
Robert Collins
@robbiemu
Feb 20 2017 15:44
@WiseKodama yeah I get the cursor effect
no collapse though
WiseKodama
@WiseKodama
Feb 20 2017 15:44
cause you are on the dropdown from autocomplete
its just invisible
opacity:0
that's what I use for the fade in/out effect when it appears
but it stays tehre
there
Robert Collins
@robbiemu
Feb 20 2017 15:45
oo you gotta change that to z-index:-1 or something :)
WiseKodama
@WiseKodama
Feb 20 2017 15:46
That fixed it!
@robbiemu thank you!
CamperBot
@camperbot
Feb 20 2017 15:46
wisekodama sends brownie points to @robbiemu :sparkles: :thumbsup: :sparkles:
:warning: wisekodama already gave robbiemu points
Robert Collins
@robbiemu
Feb 20 2017 15:46
:) nps.
WiseKodama
@WiseKodama
Feb 20 2017 15:46
CamperBot give him cookiez!
:cookie:
Robert Collins
@robbiemu
Feb 20 2017 15:46
can you help me think through my plan?
WiseKodama
@WiseKodama
Feb 20 2017 15:46
sure thing, let me read through it
Robert Collins
@robbiemu
Feb 20 2017 15:47

I have <li> elements that I am dynamically generating and I have set attributes I would like to sort on. It looks like this:

<ul><li data-order="1000">natural first</li>
<li data-order="1">second</li>
<li data-order="1002">third</li>
</ui>

So, data-order is set dynamically as the user changes search values. How can I sort the position of the <li>'s within the<ul> each time the data-order changes?

does this help?
$(".listitems li").sort(sort_li) // sort elements
.appendTo('.listitems'); // append again to the list
// sort function callback
function sort_li(a, b){
return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
}
you have to grab the data, sort it and append it again from what I can tell
Robert Collins
@robbiemu
Feb 20 2017 15:53
you can do sort right on jquery? coool
heh, thanks @WiseKodama :)
WiseKodama
@WiseKodama
Feb 20 2017 15:53
this is beyond my capabilities but, I am glad to help in anyway way
playingwithinfinity
@playingwithinfinity
Feb 20 2017 15:53
How do I built the Tic Tac Toe AI? and the graphics?
WiseKodama
@WiseKodama
Feb 20 2017 15:53
basically wrap that into a function and call it once you change or add something
Robert Collins
@robbiemu
Feb 20 2017 15:56
not quite getting it though: https://jsfiddle.net/hb09gf4p/
WiseKodama
@WiseKodama
Feb 20 2017 15:57
What's supposed to happen?
Gulsvi
@gulsvi
Feb 20 2017 15:57
@Eyej pull-right is a bootstrap 3 class, not a bootstrap 4 class. Click the Settings button in your codepen and use this link to bootstrap instead: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
@playingwithinfinity This article is popular on /r/learnjavascript today: https://www.pluralsight.com/guides/front-end-javascript/tictactoe-with-native-javascript-es6?status=in-review
I still have another 4 weeks of algorithms to go before I get there...
Robert Collins
@robbiemu
Feb 20 2017 16:01
https://jsfiddle.net/hb09gf4p/2/ @SkyCoder01 can you look at this a minute? need to get it sorted. it's like 3 lines of code
Gulsvi
@gulsvi
Feb 20 2017 16:03
@robbiemu Looks like you're doing what they're doing at: http://stackoverflow.com/questions/21600802/jquery-sort-list-based-on-data-attribute-value
I can try to take a closer look
Robert Collins
@robbiemu
Feb 20 2017 16:04
@SkyCoder01 yes that looks right. the accepted answer looks just like mine
doesn't seem to work though
playingwithinfinity
@playingwithinfinity
Feb 20 2017 16:05
@SkyCoder01 This stuff is complicated
Gulsvi
@gulsvi
Feb 20 2017 16:06
@playingwithinfinity Have you done the JS algorithms yet? I noticed you haven't done any challenges: https://www.freecodecamp.com/playingwithinfinity
playingwithinfinity
@playingwithinfinity
Feb 20 2017 16:08
@SkyCoder01 Yeah, I don't usually login with my GitHub profile.
I'm done with most of the algorithms.
Gulsvi
@gulsvi
Feb 20 2017 16:08
Ahh, was wondering. I'm afraid to start tic tac toe until I finish the algorithms :)
playingwithinfinity
@playingwithinfinity
Feb 20 2017 16:08
And I built a tic tac toe in C++, though not an AI.
@SkyCoder01 To be honest, algorithms are for developing your problem solving skills.
They won't necessarily help you build anything.
anyone can help me with this?
i can only click once for my random quote
Gulsvi
@gulsvi
Feb 20 2017 16:09
@playingwithinfinity Isn't figuring out how to play against a computer in JavaScript kind of an algorithm?
I could do the UI no problem, but not sure where I would start with the AI
playingwithinfinity
@playingwithinfinity
Feb 20 2017 16:11
@SkyCoder01 Yes.
But the algorithm challenges are different.
Robert Collins
@robbiemu
Feb 20 2017 16:11
@WiseKodama thats interesting. maybe I am doing it right.. I just brought that into the fiddle, and it doesn't work either. so might be a problem with jsfiddle itself
playingwithinfinity
@playingwithinfinity
Feb 20 2017 16:11
Most aren't standard algorithms, but rather problems.
Moisés Man
@moigithub
Feb 20 2017 16:13
@FL8Liew move var r = Math.floor(Math.random() * a.length); INSIDE the click function
so it generates a new number everytime u click.. and "quote changes"
FL8Liew
@FL8Liew
Feb 20 2017 16:13
@moigithub wow, thanks!!
CamperBot
@camperbot
Feb 20 2017 16:13
fl8liew sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2713 | @moigithub |http://www.freecodecamp.com/moigithub
FL8Liew
@FL8Liew
Feb 20 2017 16:14
is there any way to display any random quote in the beginning?
Gulsvi
@gulsvi
Feb 20 2017 16:15

@robbiemu This works for me:

$("ul li").sort((a,b) => {
  return $(a).data('order') > $(b).data('order')
}).appendTo('ul');

Make sure you're using the Babel preprocessor to get it running though. It won't work with JavaScript 1.7 like you had it.

Robert Collins
@robbiemu
Feb 20 2017 16:15
@SkyCoder01 @WiseKodama :+1: thanks got it. darn 1.7 js instead of regular :) wasn't running
CamperBot
@camperbot
Feb 20 2017 16:15
:cookie: 254 | @skycoder01 |http://www.freecodecamp.com/skycoder01
robbiemu sends brownie points to @skycoder01 and @wisekodama :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @wisekodama |http://www.freecodecamp.com/wisekodama
Gulsvi
@gulsvi
Feb 20 2017 16:15
We figured that out at the exact same time lol
WiseKodama
@WiseKodama
Feb 20 2017 16:15
lol :) thought it must have been working
Gulsvi
@gulsvi
Feb 20 2017 16:16
One liner: $("ul li").sort((a,b) => $(a).data('order') > $(b).data('order')).appendTo('ul');
Zhanibek
@zhann1982
Feb 20 2017 16:17
Hello everyone! I almost finished my Wikipedia Viewer. But I have the last bug i couldn't fix. When I choose input from autocomplete menu and press enter or press my 'Search article' button, I get a text line with my choise at the bottom of the page. http://codepen.io/zhann1982/pen/xgowoZ
Gulsvi
@gulsvi
Feb 20 2017 16:18
@FL8Liew That's what document.ready is for - create a function for grabbing a random quote and call that function in your document.ready so it gets a new quote when the page loads.
Jasmin Parent
@charlesdarkwind
Feb 20 2017 16:19
anyone knows why this jquery wont work?
$('#main').css("margin-top", "300px");
FL8Liew
@FL8Liew
Feb 20 2017 16:20
@SkyCoder01 where should i include the document.ready??
Gulsvi
@gulsvi
Feb 20 2017 16:20
@FL8Liew You already have the document.ready in the right place - you need to put your quote code in its own function and call that function in your document.ready.
WiseKodama
@WiseKodama
Feb 20 2017 16:21
@charlesdarkwind .style.marginTop = 300px;
$('#main').style.marginTop = 300px;
try that
Gulsvi
@gulsvi
Feb 20 2017 16:21
@charlesdarkwind It works for me - some other CSS is conflicting with it. Show us your codepen
WiseKodama
@WiseKodama
Feb 20 2017 16:22
Does anyone know how to make a clear button appear inside an input text window?
FL8Liew
@FL8Liew
Feb 20 2017 16:23
@SkyCoder01 sorry.... but i dont get what u mean by - you need to put your quote code in its own function and call that function in your document.ready.
WiseKodama
@WiseKodama
Feb 20 2017 16:23
why are you setting it twice?
@charlesdarkwind your css has #main{margin-top:300px}
why do you need to set it again in jquery?
Gulsvi
@gulsvi
Feb 20 2017 16:24
@FL8Liew
$(document).ready(function() {
  getQuote();
  $(".right").click(getQuote);
});

function getQuote() {
  // your quote code goes here
}
Kunal Aggarwal
@saiiiyan
Feb 20 2017 16:26
https://codepen.io/kunal1996/full/OWewBx/ Image size is not matched with the parent.Can anybody help???
WiseKodama
@WiseKodama
Feb 20 2017 16:26
@SkyCoder01 any chance you would know how I can put my random wiki art title and the recycle button on the same line?
FL8Liew
@FL8Liew
Feb 20 2017 16:26
@SkyCoder01 lol, without example i cannot understand what u saying, but with example and read back what u type i understand now
Jasmin Parent
@charlesdarkwind
Feb 20 2017 16:26
@WiseKodama ah yes that wont work, im trying to make my animate work more than once
$('#main').animate({'margin-top': '50px'}, 1000);
FL8Liew
@FL8Liew
Feb 20 2017 16:26
@SkyCoder01 thanks!
CamperBot
@camperbot
Feb 20 2017 16:26
fl8liew sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @skycoder01 |http://www.freecodecamp.com/skycoder01
WiseKodama
@WiseKodama
Feb 20 2017 16:26
@kunal1996 check if you have padding
Gulsvi
@gulsvi
Feb 20 2017 16:27
@FL8Liew :)
@WiseKodama I think if you use display: inline or display:inline-block it should work. I might have to see your pen
WiseKodama
@WiseKodama
Feb 20 2017 16:28
wanted to attach it then something caught my attention here it is
Gulsvi
@gulsvi
Feb 20 2017 16:28
@charlesdarkwind It looks like it's working?
Kunal Aggarwal
@saiiiyan
Feb 20 2017 16:28
@WiseKodama no padding
WiseKodama
@WiseKodama
Feb 20 2017 16:29
@kunal1996 its the img-responsive class I guess, its 100% width auto height and display:block
Jasmin Parent
@charlesdarkwind
Feb 20 2017 16:29
@SkyCoder01 yea forget about that line, I wan to make my animate work more than once
not sure how
FL8Liew
@FL8Liew
Feb 20 2017 16:29
@SkyCoder01 https://codepen.io/yitwey/pen/BpeKmz erm.... it's still not working...
Gulsvi
@gulsvi
Feb 20 2017 16:30
@charlesdarkwind For every search result? One animates up at a time?
Jasmin Parent
@charlesdarkwind
Feb 20 2017 16:31
@SkyCoder01 well everytime we press enter and want theresults yea
Kunal Aggarwal
@saiiiyan
Feb 20 2017 16:32
@WiseKodama thanks :smile:
CamperBot
@camperbot
Feb 20 2017 16:32
kunal1996 sends brownie points to @wisekodama :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @wisekodama |http://www.freecodecamp.com/wisekodama
Gulsvi
@gulsvi
Feb 20 2017 16:32
@charlesdarkwind I did that for my wikipedia viewer with a setTimeout, added a slideUp animation to each search result every 250ms
But I used animate.css
Jasmin Parent
@charlesdarkwind
Feb 20 2017 16:33
allright Ill check into that
buiphuking
@buiphuking
Feb 20 2017 16:33
can i ask something about driver plz? i set up win10, first i have image device driver, but when i shut down my lap, i lose image device, anyone help me out?
Gulsvi
@gulsvi
Feb 20 2017 16:34
  data[1].forEach(function(e, i) {
    setTimeout(function() {
      $('#results').append(
        `<a class="article animated slideInUp" target="_blank" href="${data[3][i]}">
           <p class="article-title">${data[1][i]}</p>
           <p class="article-extract">${data[2][i]}</p>
         </a>`
      );
    }, i * 200);
  });
WiseKodama
@WiseKodama
Feb 20 2017 16:35
@kunal1996 <img src="http://img.themebin.com/steve_iquote_t.jpg" width="100%">
Robert
@Brayn7
Feb 20 2017 16:35
anyone have an idea of how to use setInterval in react with a state that is updating
WiseKodama
@WiseKodama
Feb 20 2017 16:35
@SkyCoder01 any luck with that vertical alignment?
Robert
@Brayn7
Feb 20 2017 16:35
working on the game of life
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 16:36

how can i get rid of the 0 WHEN i press a button?

http://codepen.io/oshikurou/pen/jyKLyg?editors=1011

Gulsvi
@gulsvi
Feb 20 2017 16:36
@WiseKodama Oh, I thought you wanted it horizontal?
WiseKodama
@WiseKodama
Feb 20 2017 16:36
just in a line yeah @SkyCoder01
Gulsvi
@gulsvi
Feb 20 2017 16:37
@WiseKodama It's a little complicated because it's all in a form
WiseKodama
@WiseKodama
Feb 20 2017 16:37
The top bit isnt in a form
I am looking for the recycle button and the random article title
Gulsvi
@gulsvi
Feb 20 2017 16:38
@WiseKodama This would put the recycle icon next to your search icon though:
        <form onsubmit="searchArt(event)">
          <input type="text" name="artSearch" placeholder="Wiki Search" id="searchTerm">
          <button type="submit" class="submitBtn">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
          <a class="fa fa-2x fa-refresh right recycle" onclick="refreshRan()"></a>
        </form>
WiseKodama
@WiseKodama
Feb 20 2017 16:38
The two elements in the light grey thingi
Daniel Godigna
@DGAcode
Feb 20 2017 16:38
hello can anybody give me a hand to with this twitter button
WiseKodama
@WiseKodama
Feb 20 2017 16:38
I want it on the same line as the Random Wiki Article of the day title
Gulsvi
@gulsvi
Feb 20 2017 16:39
Ahhhh, I thought you wanted it on the same line as the search button...just a second :)
Daniel Godigna
@DGAcode
Feb 20 2017 16:39
I just want to print the quote into a tweet
Gulsvi
@gulsvi
Feb 20 2017 16:40
@WiseKodama Did you try display: inline like I suggested earlier?
This seems to do it:
#randText {
  display: inline;
}
john94
@lpy1994
Feb 20 2017 16:40
@thodorisanta just write it with code.
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 16:41
@lpy1994 what do you mean?
john94
@lpy1994
Feb 20 2017 16:41
you have it on the “C” button. just implement on others
WiseKodama
@WiseKodama
Feb 20 2017 16:41
@SkyCoder01 Thanks!
CamperBot
@camperbot
Feb 20 2017 16:41
:cookie: 256 | @skycoder01 |http://www.freecodecamp.com/skycoder01
wisekodama sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 16:42
@lpy1994 that was a mistake. "C" was suppose to replace it with 0. did that. but how can i erase the 0 when the user presses a button?
Gulsvi
@gulsvi
Feb 20 2017 16:47
@thodorisanta "When a number button is clicked, if #screen starts with a '0' and not with '0.' remove the first 0"
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 16:49
@SkyCoder01 i dont understand..
Eyej
@Eyej
Feb 20 2017 16:49
@SkyCoder01 Thanks! it worked but the text colors don't want to change...
CamperBot
@camperbot
Feb 20 2017 16:49
eyej sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 20 2017 16:52
@thodorisanta It's a conditional statement - detect if the #screen starts with a '0' after a number button is clicked and remove it.
@Eyej I think you have to be more specific to make them change color:
.nav-pills>li>a{
  color: black;
}
Eyej
@Eyej
Feb 20 2017 16:55
oh! ok lemme try that
Mark
@vinarius
Feb 20 2017 16:57
Hey guys, having trouble figuring out why my footer won't extend all the way to the right on a mobile browser. You can scroll to the right and you'll see. Any ideas? Not FCC related, personal project for someone who's interested in a challenge. Thanks.
john94
@lpy1994
Feb 20 2017 16:58
@thodorisanta other buttons won’t work as well.
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 16:59
@SkyCoder01 hmmm, actually all calculators dont allow the user to start with 0. so that mean that if the user presses a couple or one 0's at the beggining the program should cancel the move. How can i make the calculator to erase all 0 on the left side of the number?
Eyej
@Eyej
Feb 20 2017 16:59
@SkyCoder01 It scatters the whole arrangement, pls take a look http://codepen.io/Eyej/pen/xgNGWM?editors=1100
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 17:00
@lpy1994 the app is not finished. im just focusing on this part now,
playingwithinfinity
@playingwithinfinity
Feb 20 2017 17:00
@thodorisanta Use string functions.
john94
@lpy1994
Feb 20 2017 17:00
@thodorisanta just realized
playingwithinfinity
@playingwithinfinity
Feb 20 2017 17:00
I don't get the Minimax algorithm, can anyone help me?
Gulsvi
@gulsvi
Feb 20 2017 17:01
@thodorisanta Maybe I'm oversimplifying but can't you do: When a number button is pressed, if #screen === 0, set #screen === ""
FL8Liew
@FL8Liew
Feb 20 2017 17:01
https://codepen.io/yitwey/pen/BpeKmz?editors=0010 hey guys i am still struggling to get the initial display code.. anyone can help??
Spyrantis Theodoros
@thodorisanta
Feb 20 2017 17:02
@playingwithinfinity can you be more specific?
Zhanibek
@zhann1982
Feb 20 2017 17:02
@thodorisanta I fixed all the bugs in my Wikipedia viewer. The easiest way is to export pen to sublime and open it directly in browser. Then i just found all errors in dev console. :smile:
Fabio
@Gentarozzo
Feb 20 2017 17:02
Hello can you help me with a problem I'm having with Ajax? With the Twitch app I can take information from a json, but I need another ajax call to get another json just to know if that channel exists or not... How can I merge the 2 calls?
Gulsvi
@gulsvi
Feb 20 2017 17:06
@Eyej I don't see the arrangement scattered, sorry, but I don't understand :/
playingwithinfinity
@playingwithinfinity
Feb 20 2017 17:06
Robert
@Brayn7
Feb 20 2017 17:06
anyone make the game of life yet?
john94
@lpy1994
Feb 20 2017 17:08
@playingwithinfinity Math.max.apply();
Fabio
@Gentarozzo
Feb 20 2017 17:11
No one can help me handle two json?
Gulsvi
@gulsvi
Feb 20 2017 17:11
@Gentarozzo You have to make two getJSON calls for every user unfortunately...
One to see if they're online/offline/closed and another to get the info about the user.
Fabio
@Gentarozzo
Feb 20 2017 17:13
@SkyCoder01 I did a each... with a json... in the success I do the other call... problem is that for the json with the info, channel that does not exists or are offline I've the same info :|
Gulsvi
@gulsvi
Feb 20 2017 17:14
I'm still finishing my Twitch viewer, but I can try to take a look at yours and see. I didn't have that problem.
Fabio
@Gentarozzo
Feb 20 2017 17:15
@SkyCoder01 Now I just delete the 2 json stuff... wait a sec
Deepanshu Chug
@deepanshuchg
Feb 20 2017 17:17
is there any class in bootstrap to bring image in center?
Eyej
@Eyej
Feb 20 2017 17:17
never mind, i have fixed it up, thank you so much! @SkyCoder01
CamperBot
@camperbot
Feb 20 2017 17:17
eyej sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: eyej already gave skycoder01 points
Fabio
@Gentarozzo
Feb 20 2017 17:17
@SkyCoder01 I'm trying to pass the channel not existing into the error of the first ajax call...
Gulsvi
@gulsvi
Feb 20 2017 17:18
@Gentarozzo It looks like you're using the actual Twitch API which maybe is different. I used the one that free code camp set up for us
Manuel Reyes
@Androbat
Feb 20 2017 17:18
Hi
Robert Collins
@robbiemu
Feb 20 2017 17:19
how can I get a floating dialog that stays fixed to the bottom of the viewport unless the viewport is not tall enough? I'm finding that bottom is overriding margin-top with this set:
  bottom: 20px;
  margin-top: 1000px;
  position: fixed;
Manuel Reyes
@Androbat
Feb 20 2017 17:19
Can so me somedody help me?
Levi
@MalangeLevi
Feb 20 2017 17:20
@Androbat if u tell us
Deepanshu Chug
@deepanshuchg
Feb 20 2017 17:20
is there any class in bootstrap to bring image in center?
if now, any html property to bring it in center?
Robert Collins
@robbiemu
Feb 20 2017 17:20
what happens is bottom takes into account the margin, producing an element with top: -560px for margin-top:1000px, or top:-1560px for margin-top:2000px
Levi
@MalangeLevi
Feb 20 2017 17:20
no but you can just use margin : auto
if i m not mistaken
Fabio
@Gentarozzo
Feb 20 2017 17:21
@SkyCoder01 there's really one? can you show me that?
Manuel Reyes
@Androbat
Feb 20 2017 17:21
@MalangeLevi I´m trying to size a logo for my practice website. So,
Robert Collins
@robbiemu
Feb 20 2017 17:21
@MalangeLevi it overrides auto, too
Levi
@MalangeLevi
Feb 20 2017 17:21
@robbiemu ok
Manuel Reyes
@Androbat
Feb 20 2017 17:22
@MalangeLevi I´m trying and I don´t see why it doesn´t work. Take a look at it.
Gulsvi
@gulsvi
Feb 20 2017 17:22
It's basically this:
const channels = 'https://wind-bow.gomix.me/twitch-api/channels/' + user,
      streams = 'https://wind-bow.gomix.me/twitch-api/streams/' + user;

// Make the API calls and fill out the HTML with the data received
$.getJSON(channels, channelData => {
  $.getJSON(streams, streamData => {

    if (channelData.status === 404) {
      // show closed accounts
      return;
    }

    if (!streamData.stream) {
      // show offline accounts
      return;
    }

    // show online accounts
  });
});
Robert Collins
@robbiemu
Feb 20 2017 17:22

@Androbat show us the code :) use markdown, like:
\``inline\``` =>inline` and:

\`\`\`js
js
\`\`\`

produces:

js
Deepanshu Chug
@deepanshuchg
Feb 20 2017 17:24
https://codepen.io/deepanshuchug/pen/pRXBEB, margin:auto not working, what am i doing wrong?
Fabio
@Gentarozzo
Feb 20 2017 17:24
@SkyCoder01 json are the same anyway
@SkyCoder01 your app is fantastic
Gulsvi
@gulsvi
Feb 20 2017 17:25
I want to keep working on it some more, it looks bad on mobile...
Deepanshu Chug
@deepanshuchg
Feb 20 2017 17:25
ignore the commented div class=row, i just did that.. its present in the actual code
Fabio
@Gentarozzo
Feb 20 2017 17:25
@SkyCoder01 so i need to understand how you managed the not existing channel
Gulsvi
@gulsvi
Feb 20 2017 17:26
@Gentarozzo I noticed the console in my browser shows a 404 error for comster with your app, but not in mine when i use the Free Code Camp endpoint
Maybe the server handles the requests differently even though JSON is the same
Fabio
@Gentarozzo
Feb 20 2017 17:26
@SkyCoder01 but you use an if on the 404 error
Gulsvi
@gulsvi
Feb 20 2017 17:26
@Gentarozzo That's a 404 in the JSON, not a browser console message
Manuel Reyes
@Androbat
Feb 20 2017 17:27

``<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/default.css">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>My first html5 and css website</title>
</head>

<body>

<header class="cabecera">
<div class="conteiner clearfix">
<div class="logo">
<img src="img/logo4.gif">
</div>

<nav class="Menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

</nav>
</header>

</body>
</html> ``` =>

Fabio
@Gentarozzo
Feb 20 2017 17:27
@SkyCoder01 hm ok... need to save your and study it
Gulsvi
@gulsvi
Feb 20 2017 17:28
image.png
Manuel Reyes
@Androbat
Feb 20 2017 17:31

``<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/default.css">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<title>My first html5 and css website</title>
</head>

<body>

<header class="cabecera">

<div class="conteiner clearfix">
<div class="logo">
<img src="img/logo4.gif">
</div>

<nav class="Menu">

<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

</nav>
</header>
</body>
</html> ``` =>

```js```
Gulsvi
@gulsvi
Feb 20 2017 17:32
@deepanshuchg If you're trying to center the image, it has to have display: block
img{
  display: block;
  margin:auto;
  width:auto;
}
Deepanshu Chug
@deepanshuchg
Feb 20 2017 17:34
@SkyCoder01 Thanks sky it worked, would you mind what does it means btw?
CamperBot
@camperbot
Feb 20 2017 17:34
deepanshuchg sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 20 2017 17:39
@deepanshuchg Images are inline elements by default - they don't have a width, so "auto" can't be calculated. If you make them a block element, they have a width and "auto" can be calculated.
This is kind of technical, but it's explained in detail here: https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins
john94
@lpy1994
Feb 20 2017 17:41
@thodorisanta have you figured it out yet?
Manuel Reyes
@Androbat
Feb 20 2017 17:43

``` <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/default.css">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>My first html5 and css website</title>
</head>

<body>

<header class="cabecera">
<div class="conteiner clearfix">
<div class="logo">
<img src="img/logo4.gif">
</div>

<nav class="Menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

</nav>
</header>

</body>
</html>``` This is my html

Tyler Moeller
@TylerMoeller
Feb 20 2017 17:45
@Androbat What do you need help with? Also, use Shift+Enter after the backticks... you can press the up arrow to edit your post
https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Manuel Reyes
@Androbat
Feb 20 2017 17:45
<header class="cabecera">
    <div class="conteiner clearfix">
    <div class="logo">
    <img src="img/logo4.gif">
    </div>

<nav class="Menu">
<ul class="clearfix">
@TylerMoeller look. I want to make my logo smaller.
Gulsvi
@gulsvi
Feb 20 2017 17:46
Do you have a codepen link @Androbat
Tyler Moeller
@TylerMoeller
Feb 20 2017 17:47
@Androbat Where is your CSS to make the image smaller?
Manuel Reyes
@Androbat
Feb 20 2017 17:47
@TylerMoeller I did´t on my codepen, but It doesn´t work on mi sublime. I´m gonna post my css.
Tyler Moeller
@TylerMoeller
Feb 20 2017 17:48
For example:
.logo img {
  width: 100px;
}
@Androbat Maybe this challenge will help https://www.freecodecamp.com/challenges/size-your-images
Manuel Reyes
@Androbat
Feb 20 2017 17:49

@TylerMoeller ´´´ .cabecera .conteiner{
width: 1170px;
margin: 0 auto;
padding: 0 15px;
}
.cabecera .logo {
float: left;
width: 230px;
padding: 10px 0;

}

.cabecera. .logo. img{
width: 100%;´´´

Tyler Moeller
@TylerMoeller
Feb 20 2017 17:50
@Androbat putting a dot after class names is going to cause problems: .cabecera. .logo. img
.cabecera .conteiner .logo img {
  width: 100%;
}
Manuel Reyes
@Androbat
Feb 20 2017 18:11
@TylerMoeller Thanks. That was the problem.
CamperBot
@camperbot
Feb 20 2017 18:11
androbat sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1504 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
David
@glesgagaming
Feb 20 2017 18:37
Hey guys, I feel like many of the requirements on the 'Build a personal portfolio' step are more advanced than I've learned, it's asking to do things I've not covered. Is this to get me to Learn it?
Fabio
@Gentarozzo
Feb 20 2017 18:50
Can someone tell me why my getJson are not workign?
http://codepen.io/Gentarozzo/pen/WRBgXV?editors=0010
@SkyCoder01 I'm trying to study how your solution works... but in console there's no ajax call for me...
@glesgagaming you've to learn it by yourself doing questions and using google
Ellen
@ellenkorbes
Feb 20 2017 18:54
Hey everyone. Apart from the tweet button, does this work for you? https://codepen.io/ellenkorbes/full/LxoqKK/
Gulsvi
@gulsvi
Feb 20 2017 19:03
@Gentarozzo You need to call the function (esegui()) to run the getJSON inside it :)
Fabio
@Gentarozzo
Feb 20 2017 19:06
@SkyCoder01 OMG! that was so obvious! ... shame on me... thanks a lot
CamperBot
@camperbot
Feb 20 2017 19:06
gentarozzo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 259 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 20 2017 19:06
@ellenkorbes This does not work: https://codepen.io/ellenkorbes/full/LxoqKK/
But this one does: http://codepen.io/ellenkorbes/full/LxoqKK/
You should read about mixed-content. Basically, when you load a web page over HTTPS, everything needs to be called via HTTPS or it won't be secure.
Ellen
@ellenkorbes
Feb 20 2017 19:07
@SkyCoder01 Ohhhhhhh. Alright, I'll read up on that. Thanks a lot, I'd never have guessed myself haha
CamperBot
@camperbot
Feb 20 2017 19:07
ellenkorbes sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 260 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 20 2017 19:10
@glesgagaming It's definitely more advanced, I skipped it and went straight to the quote machine. You don't have to do it now if you don't want to, but they do set expectations that it will take you about 50hours to do the portfolio + tribute page.
That's a lot of time for reading these documents and playing around with the sample code they give: http://getbootstrap.com/
roeP
@roeP
Feb 20 2017 19:11
hello, i'm in my first tribute project and i dont know how to center an img. also is there a way to crop the image without additing its source?
*edit
Gulsvi
@gulsvi
Feb 20 2017 19:15
@roeP What have you tried that isn't working? Do you have a codepen?
Fabio
@Gentarozzo
Feb 20 2017 19:17
@SkyCoder01 Should this work? Because it's not... I'm testing some easy paragraph on it
http://codepen.io/Gentarozzo/pen/WRBgXV?editors=0010
@SkyCoder01 my bad... there was Nintendo in the URL... sorry
Gulsvi
@gulsvi
Feb 20 2017 19:20
@Gentarozzo I think your forEach variable needs to be different than the array variable. And, yeah, that nintendo was left on :)
chan.forEach(user => {
or chan.forEach(utente => { :)
:it:
Fabio
@Gentarozzo
Feb 20 2017 19:22
@SkyCoder01 :D I'm learning so much from this Twitch app! ... now that is working (I hope) I can play with some design
Gulsvi
@gulsvi
Feb 20 2017 19:23
It taught me a lot too - glad you got it working @Gentarozzo
Fabio
@Gentarozzo
Feb 20 2017 19:23
@SkyCoder01 Grazie ;)
CamperBot
@camperbot
Feb 20 2017 19:23
gentarozzo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: gentarozzo already gave skycoder01 points
roeP
@roeP
Feb 20 2017 19:24
im using code pen, and img-responsive class to make it mobile responsible
but the img is in the left side of the page
Fabio
@Gentarozzo
Feb 20 2017 19:25
@roeP Can I suggest you to use the CSS method? like height: 100% ; width:auto;
roeP
@roeP
Feb 20 2017 19:30
thanks, i now rememberd in that. also a question about codepen, the 2 left windows for css and js- why they are seperate from the main html window? im writing my css in the <style>
Fabio
@Gentarozzo
Feb 20 2017 19:30
@roeP This is good to teach you to separate STYLE and MARKUP and SCRIPT
@roeP don't use the script tag, because in some other situation you will use an external css (that is a window in codepen)
@roeP style*
@roeP here in the chat, if you want to talk with someon in particular click on his name, so it will be notified to that person
roeP
@roeP
Feb 20 2017 19:34
@Gentarozzo thank you for your replay. so its best if i cut my <style> from the html and move it to the css window? so that in my html window only the body will remain?
CamperBot
@camperbot
Feb 20 2017 19:34
roep sends brownie points to @gentarozzo :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @gentarozzo |http://www.freecodecamp.com/gentarozzo
Fabio
@Gentarozzo
Feb 20 2017 19:36
@roeP you don't need to cut the style tag... just take everything between the tag and put it in the CSS window... that window is like a "<style></style>" for you.
roeP
@roeP
Feb 20 2017 19:37
@Gentarozzo cool! tnx
CamperBot
@camperbot
Feb 20 2017 19:37
roep sends brownie points to @gentarozzo :sparkles: :thumbsup: :sparkles:
:warning: roep already gave gentarozzo points
vinnybomp
@vinnybomp
Feb 20 2017 20:35
hello, i am trying to use codepen, i cant figure out how to add the run button to test code
vincentwue
@vincentwue
Feb 20 2017 20:45

ist there a native english speaker, maybe british, who want to get private lessons for free from a german student of computer science? I want to learn english, you want to learn coding.
send me a mail with your skype (is there a better phone service?) name and tell me a bit about yourself
vini96@web.de

Looking forward to great conversations

i am tolerant and democrat by heart
WiseKodama
@WiseKodama
Feb 20 2017 20:54
Greetings everyone, can anyone check out my Wiki Viewer and let me know their thought? http://codepen.io/WiseKodama/full/aprJbm/
Dejvid Vujic
@DejvidV
Feb 20 2017 21:04
Hey guys, I've made a navigation bar with bootstrap however want to make it horizontal instead of vertical. Any ideas how? I've searched but only have found examples of CSS type navigation bars
Gulsvi
@gulsvi
Feb 20 2017 21:20
@DejvidV The default bootsrap navbar is horizontal: http://getbootstrap.com/components/#navbar-default
@WiseKodama Nice job - autocomplete is a nice feature :)
And that spinning recycle button :)
I think you want to use https for your links to wikipedia though or your app won't work if opened from https://codepen.io/WiseKodama/full/aprJbm/
jmgumina
@jmgumina
Feb 20 2017 21:30
Hi there, I am building the personal portfolio page, i have created my header and nav section successfully, but i cannot get any text to appear in the body and am completely stuck. https://codepen.io/jNewbie/pen/LxwPKq?editors=1100
Simon Fan
@simonfan
Feb 20 2017 21:33
@jmgumina your content is fine! All you've got to do is to put a margin-top on the .about div
tareq4
@tareq4
Feb 20 2017 21:33

http://codepen.io/tareq4/pen/mRZPzd

Guy's i need help here for this object
i don't know why the down red background don't show full screen >>> http://codepen.io/tareq4/pen/mRZPzd

jmgumina
@jmgumina
Feb 20 2017 21:34
thanks @simonfan
CamperBot
@camperbot
Feb 20 2017 21:34
jmgumina sends brownie points to @simonfan :sparkles: :thumbsup: :sparkles:
:cookie: 12 | @simonfan |http://www.freecodecamp.com/simonfan
Simon Fan
@simonfan
Feb 20 2017 21:35
@jmgumina welcome! ;)
tareq4
@tareq4
Feb 20 2017 21:35
scrol down to see what i mean
???
Simon Fan
@simonfan
Feb 20 2017 21:36
@tareq4 , sorry did not understand your objective.. You want the red div to occupy the whole screen, is that right?
If so, you need to set it to have a height of say "100vh" (100% viewport height)
tareq4
@tareq4
Feb 20 2017 21:38
yes as you see onder the pic there is red background but not the fullscreen
ok i gonna try @simonfan
Ayobami
@purpose50
Feb 20 2017 21:39
Hi guys, please check out my calculator project and can anyone please tell me how to move the input text from left to right:
http://codepen.io/purpose/full/ggNVZd/
Simon Fan
@simonfan
Feb 20 2017 21:39
@purpose50 that looks great!
you can set the text-align: right
Ayobami
@purpose50
Feb 20 2017 21:40
@simonfan thanks :smile:
CamperBot
@camperbot
Feb 20 2017 21:40
purpose50 sends brownie points to @simonfan :sparkles: :thumbsup: :sparkles:
:cookie: 13 | @simonfan |http://www.freecodecamp.com/simonfan
Simon Fan
@simonfan
Feb 20 2017 21:40
Is that what you want?
Ayobami
@purpose50
Feb 20 2017 21:41
@simonfan will do that now
tareq4
@tareq4
Feb 20 2017 21:41
@simonfan didn't work ,but thx anyway
CamperBot
@camperbot
Feb 20 2017 21:41
tareq4 sends brownie points to @simonfan :sparkles: :thumbsup: :sparkles:
:cookie: 14 | @simonfan |http://www.freecodecamp.com/simonfan
Gulsvi
@gulsvi
Feb 20 2017 21:42

@tareq4 The container for the div you want to have a red background needs to have 0 margin and 0 padding:

<div style="margin: 0; padding: 0;" class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div style="height: 800px; width:40000px; background-color: #B40404;"></div>
    </div>
  </div>
</div>

(but use CSS instead of inline styles)

tareq4
@tareq4
Feb 20 2017 21:42
oke let me try
ow
@SkyCoder01 but check what happens now !
Ayobami
@purpose50
Feb 20 2017 21:48
@simonfan yeah, that worked
Gulsvi
@gulsvi
Feb 20 2017 21:48
@tareq4 Your code doesn't look like what I wrote above :p
Simon Fan
@simonfan
Feb 20 2017 21:48
@purpose50 great!
tareq4
@tareq4
Feb 20 2017 21:49
@SkyCoder01 haha yeah but it's the same idea
Gulsvi
@gulsvi
Feb 20 2017 21:49
@tareq4 12 columns in a row. You need a new row every time you want to use 12 more columns. Very different without the container
tareq4
@tareq4
Feb 20 2017 21:50
oooo ok so i need new container too
and row
@SkyCoder01
Gulsvi
@gulsvi
Feb 20 2017 21:50
Yeah, it's taking the col-xs-9 and col-xs2 from above into account I think

Sometimes adding this to your CSS helps to see what's going on:

* {
  border: 1px solid black;
}

It will put a box around all your elements so you can see which ones have padding/margins

tareq4
@tareq4
Feb 20 2017 21:52
yeah it workd man thanks @SkyCoder01
CamperBot
@camperbot
Feb 20 2017 21:52
tareq4 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 20 2017 21:52
No problem
tareq4
@tareq4
Feb 20 2017 21:57
@SkyCoder01 you still there?
i have one more question
Gulsvi
@gulsvi
Feb 20 2017 21:59
@tareq4 Sure
tareq4
@tareq4
Feb 20 2017 22:01
oo you'r here ok... http://codepen.io/tareq4/pen/mRZPzd
how can i set my button right
@SkyCoder01
Gulsvi
@gulsvi
Feb 20 2017 22:02
@tareq4 On the right, or keep it from getting small?
You really need to fix all that repeated code at the top:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- the responsive link + script -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


<!-- the jumpotron link + script -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
tareq4
@tareq4
Feb 20 2017 22:03
hahahaha yeah... but i need those ,it's link's
Gulsvi
@gulsvi
Feb 20 2017 22:03
<script> goes at the end, <meta> and <link> goes in the codepen settings "Stuff for <head>" section.
tareq4
@tareq4
Feb 20 2017 22:03
for bootstrap
oo yeah forgot that
hahaha
Gulsvi
@gulsvi
Feb 20 2017 22:04
:)
I'm not sure what you want to do with the button
A grid offset though would put it on the right:
<div class="top-box container-fluid">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      <button type="button" class="btn btn-primary btn-block" id="button1">button 1</button>
    </div>
  </div>
</div>
@tareq4
tareq4
@tareq4
Feb 20 2017 22:07
what i mean is not i want to set it on the right ... but set it right .sooo it is under the red line, and i need it in the red line
@SkyCoder01
just look how freecodecamp webpage looks at the top
Gulsvi
@gulsvi
Feb 20 2017 22:08
I think you want a navbar
tareq4
@tareq4
Feb 20 2017 22:08
it's a green line
oo is that what it calls
hahaha
Like that?
tareq4
@tareq4
Feb 20 2017 22:09
wait
Gulsvi
@gulsvi
Feb 20 2017 22:09
tareq4
@tareq4
Feb 20 2017 22:10
yeah that
Gulsvi
@gulsvi
Feb 20 2017 22:10
Right-click the one on the free-code camp page and click "inspect" they use bootstrap too
tareq4
@tareq4
Feb 20 2017 22:10
(home) and (about) these things
ok
Gulsvi
@gulsvi
Feb 20 2017 22:10
Yeah, that's a navbar that they customized
tareq4
@tareq4
Feb 20 2017 22:11
ok thx a lot man @SkyCoder01
CamperBot
@camperbot
Feb 20 2017 22:11
tareq4 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: tareq4 already gave skycoder01 points
Gulsvi
@gulsvi
Feb 20 2017 22:11
Good luck
jwdoug
@jwdoug
Feb 20 2017 22:46
After submitting a page for the Tribute Page challenge, is there any way to get feedback? What happens with the pages that I submit?
I guess that goes for any challenge on the site.
Ryan Williams
@Ryanwfile
Feb 20 2017 22:48
I'm trying to create a fly in text heading on a website as seen on this codepen http://codepen.io/Ryanwfile/pen/KaYJje,
which uses the css link https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css.
When I try to implement this on a slightly older pen that uses this css link //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css the fly in text no longer works, if I try to use the new css link it breaks most of the codepen’s design. Anyone know of a way to get this type of fly in text while using the older css link? All help is greatly appreciated.
Gulsvi
@gulsvi
Feb 20 2017 22:58
@Ryanwfile From what I can tell, .hidden is a built in Bootstrap 3 class (it sets an element to display: none). In bootstrap4, they changed it to .d-none. So, the bootstrap3 class is conflicting with your fly-in text because it relies on using the class hidden. The fix is to replace the word 'hidden' in your html, css, and JS to something that bootstrap doesn't use. hidden-fly-in-text perhaps?
Ryan Williams
@Ryanwfile
Feb 20 2017 22:58
@SkyCoder01 I will try that, thank you very much
CamperBot
@camperbot
Feb 20 2017 22:58
ryanwfile sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ryan Williams
@Ryanwfile
Feb 20 2017 23:13
@SkyCoder01 It worked, thank you so much for the help
CamperBot
@camperbot
Feb 20 2017 23:13
ryanwfile sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave skycoder01 points
Michael Grienauer
@mgrienauer
Feb 20 2017 23:14
https://codepen.io/mike93og/pen/pRmmrP?editors=1010 anyone have any idea why my page isnt coonecting to the api correctly? this is the api im using http://forismatic.com/en/api/
Vered Rekanati
@veredrec
Feb 20 2017 23:27
@mike93og93 It works if you remove the "s" from the https in codepen :)
The same happened to me with the weather application...
Ken Haduch
@khaduch
Feb 20 2017 23:43
@mike93og93 - if yo load the top level page with https:// the API access using http:// is blocked - you get this type of error: Blocked loading mixed active content “http://api.forismatic.com/api/1.0/?jsonp=jQuery31105522061889890783_1487634105005&method=getQuote&lang=en&format=jsonp&_=1487634105006”[Learn More] jquery.min.js:4:17558 if you use the developer's console.
@mike93og93 - it does work when you change your top-level URL to use http:// although it is complaining about some problem finding bootstrap: GET https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7-alpha.6/js/bootstrap.min.js [HTTP/2.0 404 Not Found 28ms] - l;ooks like you might have a bad URL there?
Gulsvi
@gulsvi
Feb 20 2017 23:46
Where does everyone get that quote machine template? Seems we shouldn't be copy/pasting from another project for the front-end certification.
See it everywhere on codepen though
Jason
@ICodeWateverIFeelLikeCoding
Feb 20 2017 23:49
for some reason my css isn't changing the color of the document body..this started happening after changing the link element at the beginning of my html to request the bootstrap 3.3.7 library to use it's icons..why is his happening? https://codepen.io/JaosnCodes/pen/VPJorz?editors=1100
Gulsvi
@gulsvi
Feb 20 2017 23:52
@ICodeWateverIFeelLikeCoding <link> elements only go in the <head> section.
Jason
@ICodeWateverIFeelLikeCoding
Feb 20 2017 23:54
@SkyCoder01 i've tried that
it caused the same issue
Gulsvi
@gulsvi
Feb 20 2017 23:56
@ICodeWateverIFeelLikeCoding Use the codepen settings to add things to <head>
image.png
Moisés Man
@moigithub
Feb 20 2017 23:56
or paste the url link on the css settings @ICodeWateverIFeelLikeCoding
Gulsvi
@gulsvi
Feb 20 2017 23:57
Right :arrow_heading_up: :arrow_heading_up: and make sure your bootstrap.js is the same version as your bootstrap.css
Jason
@ICodeWateverIFeelLikeCoding
Feb 20 2017 23:58
@moigithub @SkyCoder01 thank you!
CamperBot
@camperbot
Feb 20 2017 23:58
icodewateverifeellikecoding sends brownie points to @moigithub and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:star2: 2717 | @moigithub |http://www.freecodecamp.com/moigithub
Albert L. C.
@sirus3020
Feb 20 2017 23:58
guys. I need help with the twitch API..
when I loop the JSON, It doesn't return the info in order.