These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Jan 2017
Simon Cordova
@gbsimon87
Jan 06 2017 00:10

@Thrillxlordz give me an example of what you're seeking to accomplish...

@Jinnd319 it seems you're using jquery, and you can't use this if you're simply declaring the variable...

try perhaps something like...
var target = $("elementYouWantToUse").attr();
console.log(target);

Nick McCord
@Thrillxlordz
Jan 06 2017 00:12
@gbsimon87 I'm trying to make the random quote generator, and the way I want to accomplish this involves generating a random number that searches an array and picks the corresponding quote. I made the random number generator and the array of quotes in javascript, but i dont know how to make that show up on the web page.
CoryCMyers
@CoryCMyers
Jan 06 2017 00:14
Okay, so I have most of the layout nailed down for my tribute page can anyone help me out with getting the scroll bars set to be the same height as the central picture, and keeping them so dynamically? I have tried setting it as a, and as rows, but I am unable to get these scroll bars sized properly without setting them at a hard pixel height. Which will shift on whether or not things match up with the size of the device looking at it yes?
Any help would be VASTLY appreciated
Simon Cordova
@gbsimon87
Jan 06 2017 00:14
@Thrillxlordz which api are you using?
Nick McCord
@Thrillxlordz
Jan 06 2017 00:16
@gbsimon87 I'm just using codepen's default settings, if thats what you mean.
Simon Cordova
@gbsimon87
Jan 06 2017 00:18
No, I mean, are you creating the quotes yourself?
@CoryCMyers I'll take a look...
CoryCMyers
@CoryCMyers
Jan 06 2017 00:19
@gbsimon87 I appreciate it. The layout is pretty much how I want it on proportions, I am just curious now if it is even possible or if I have to manually set them, and live it it.
Nick McCord
@Thrillxlordz
Jan 06 2017 00:19
@gbsimon87 Oh, my mistake. Yeah, I'm personally adding the quotes.
Simon Cordova
@gbsimon87
Jan 06 2017 00:20
@Thrillxlordz show me your codepen link
@CoryCMyers which scroll bars?
Nick McCord
@Thrillxlordz
Jan 06 2017 00:23
CoryCMyers
@CoryCMyers
Jan 06 2017 00:24
@gbsimon87 There should be bars on the right and left text columns, that I would like to keep at the same height as the central picture, regardless of the monitor size veiwing the page
Took me forever to figure out how to swap the scroll bar on the right column to the left side to make the page prettier in my eyes.
Simon Cordova
@gbsimon87
Jan 06 2017 00:27
@CoryCMyers I'm sorry but I honestly don't see any scroll bars
nvm got it
CoryCMyers
@CoryCMyers
Jan 06 2017 00:29
@gbsimon87 Huzzah! You had me worried that I had broken something when I posted it!
Simon Cordova
@gbsimon87
Jan 06 2017 00:31
@Thrillxlordz it seems like you got it right ? :)
@CoryCMyers I'm looking into it
Sam Griffen
@ssgriffen
Jan 06 2017 00:32
Anyone know why my links arent working? http://codepen.io/ssgriffen/pen/VmOKEp
Nick McCord
@Thrillxlordz
Jan 06 2017 00:32
@gbsimon87 I was wondering how i could get the quotes to appear when i press the button
Shixun Liu
@lsx1988
Jan 06 2017 00:33
Hi, everyone. I am a little confused on why the height attribute of image inside the <div class=“thumbnail”> is not effective, however, I can still change the width and the size of image will change according to proportion. Now, I settle this problem by setting the max-height attribute
<div class="row">
      <div class="col-md-12">
        <div class="thumbnail">
          <img src=“image.jpg">
        </div>
      </div>
 </div>
Simon Cordova
@gbsimon87
Jan 06 2017 00:33
@Thrillxlordz the numbers are appearing just fine....
Nick McCord
@Thrillxlordz
Jan 06 2017 00:34
@gbsimon87 Well i have no clue how its working now xD thanks for taking a look :smile:
CamperBot
@camperbot
Jan 06 2017 00:34
thrillxlordz sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Jan 06 2017 00:34
@lsx1988 since you're using bootstrap anyway, try this..
<img src="image.jpg" class="img img-responsive" />
@Thrillxlordz it's now working because you're calling the function (asking it to execute) at the bottom of your JS
also...on codepen, just keep your js on the js section, no need to add <script> tags on the HTML section
CoryCMyers
@CoryCMyers
Jan 06 2017 00:38
@lsx1988 I had a similiar issue with a picture on my tribute page. The best I could figure out is since you are using a perctage based measurement with col-x-x the wight is not relevant to the size, but the width will affect how much of the page it assigns based on percent,
@lsx1988 Or that was my guess while I was putting mine together, I am not an expert
Shixun Liu
@lsx1988
Jan 06 2017 00:42

@gbsimon87 Thanks for you advice. I have tried the blow code, but the height still doesn’t work.. The image still stay at original size

<img scr=“image.jpg” class=“img img-responsive” height=“10”/>

but when I set the width, the image will reponse to this change

<img scr=“image.jpg” class=“img img-responsive” width=“10”/>
CamperBot
@camperbot
Jan 06 2017 00:42
lsx1988 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Jan 06 2017 00:45
@lsx1988 do you have it on codepen?
Shixun Liu
@lsx1988
Jan 06 2017 00:45
@CoryCMyers thanks for your reply. Actually I guess it’s due to the <div class="thumbnail”>, when I delete it and still keep image inside <div class="col-md-12”>, the image can be changed through width or height
CamperBot
@camperbot
Jan 06 2017 00:45
lsx1988 sends brownie points to @corycmyers :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @corycmyers |http://www.freecodecamp.com/corycmyers
Simon Cordova
@gbsimon87
Jan 06 2017 00:46
@CoryCMyers sorry buds don't really know how to change the size of the scroll bars
How do you change their size to begin with?
Jose Irizarry
@Stjose
Jan 06 2017 00:47
hello
Sander Berntsen
@sbxn14
Jan 06 2017 00:47
hey guys I would really like to get my header to look like the picture on here https://blackrockdigital.github.io/startbootstrap-agency/ (with my own picture) but I cannot for the life of me figure out how I get it to be the entire width and sufficient height for it to look great and so I can go over into another section afterwards. http://codepen.io/sbxn14/pen/egmKRr?editors=1100
CoryCMyers
@CoryCMyers
Jan 06 2017 00:48
@gbsimon87 Right now I have it set so that the two side columns are set to scroll with I have a Y overflow, and set the heights at a solid limit. What I would REALLY love to do is find a way to automatically assign the same height from the middle colum, to the side columns.
Column* Since the side columns are already set up to scroll for any overflow, that one problem right there SHOULD resolve my issue, and be dynamic.
sorry just trying to figure something now. no need help
Simon Cordova
@gbsimon87
Jan 06 2017 00:50
@CoryCMyers Oh, I get you now
Jose Irizarry
@Stjose
Jan 06 2017 00:51
@sbxn14 love you back groung
Simon Cordova
@gbsimon87
Jan 06 2017 00:52
@CoryCMyers do you have javascript knowledge just yet?
Sander Berntsen
@sbxn14
Jan 06 2017 00:52
@Stjose thanks! I just wish I knew how to fix it so it looks better.. :/
CamperBot
@camperbot
Jan 06 2017 00:52
sbxn14 sends brownie points to @stjose :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @stjose |http://www.freecodecamp.com/stjose
CoryCMyers
@CoryCMyers
Jan 06 2017 00:52
@gbsimon87 Just enough to ape the Jquery I have set there and tweak the variables to make the splash screen.
@gbsimon87 Most of what I have on that page though was me being stubborn enoug hto say I want it to look like -this- and then googling and reading until I made it work.
Sander Berntsen
@sbxn14
Jan 06 2017 00:53
but can no one help me? :(
Jose Irizarry
@Stjose
Jan 06 2017 00:54
sorry bro I just came back and try to remember everything for tribute page.
CoryCMyers
@CoryCMyers
Jan 06 2017 00:55
@sbxn14 HAve you broken out your Dev tool to break down how they did it?
Jose Irizarry
@Stjose
Jan 06 2017 00:55
and you look 1000% better the mine
CoryCMyers
@CoryCMyers
Jan 06 2017 00:56
@sbxn14 That is how I got things, or how I try to double check. If you see something you like on a page, sometimes yo ucan see how it was done by opening your developer tools.
Sander Berntsen
@sbxn14
Jan 06 2017 00:56
@CoryCMyers I did. thats how I got to a header and such. (i was in like body before lmao)
@CoryCMyers I've looked for some time now and have tried several things from there. I guess im just missing something
CoryCMyers
@CoryCMyers
Jan 06 2017 00:56
So you want a header that moves etc?
Sander Berntsen
@sbxn14
Jan 06 2017 00:56
nono
I just want the header to have the picture as background
and then sections below it eventually
with about/projects/contact etc
on a one page website.
Jose Irizarry
@Stjose
Jan 06 2017 00:57
I come back later need my second monitor. so see you guy back monday
Off to bed, night guys...
Sander Berntsen
@sbxn14
Jan 06 2017 00:59
@CoryCMyers a guy gave me this <code>background: url("https://ibin.co/37tPipsGYOaj.jpg"); no-repeat top center-fixed;</code>
that did not work the way I hoped
CoryCMyers
@CoryCMyers
Jan 06 2017 00:59
@gbsimon87 Thank you!
CamperBot
@camperbot
Jan 06 2017 00:59
corycmyers sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Sander Berntsen
@sbxn14
Jan 06 2017 01:00
background: url("https://ibin.co/37tPipsGYOaj.jpg"); no-repeat top center-fixed;
he gave me that
CoryCMyers
@CoryCMyers
Jan 06 2017 01:00
@sbxn14 I am seeing what I think are pseudo elements in there, and I know that is way out of my comfort zone.
Sander Berntsen
@sbxn14
Jan 06 2017 01:00
which makes it the right width
but it zooms it in ALOT
whats a psuedo element .-.
Sander Berntsen
@sbxn14
Jan 06 2017 01:01
oo those
Grey_Padawan
@Gprint
Jan 06 2017 01:04
Hey all !
Sander Berntsen
@sbxn14
Jan 06 2017 01:04
Heya @Gprint
Grey_Padawan
@Gprint
Jan 06 2017 01:05
wassup !
Nick McCord
@Thrillxlordz
Jan 06 2017 01:09
Can anybody help me with a piece of the random quote generator?
uriznik
@uriznik
Jan 06 2017 01:16
@sbxn14 remove the body tag from your html, and the meta tags, in the settings there is an 'Insert the most common viewport...' and click on that
Shixun Liu
@lsx1988
Jan 06 2017 01:19

@CoryCMyers I found it maybe because the <div class=“thumbnail”> has set the height of elements inside to be auto. So I tried the follwoing two ways and it works

.thumbnail>img{
    height: xxxpx;
}

or

uriznik
@uriznik
Jan 06 2017 01:20
@sbxn14 try something like this for the image
 background: #000000 url("https://ibin.co/37tPipsGYOaj.jpg") no-repeat fixed center;
 background-size: 100%;
Shixun Liu
@lsx1988
Jan 06 2017 01:20
@CoryCMyers or
<img src=“img.jpg” style=“height:xxxpx;”>
@CoryCMyers and this can explain why the max-height attribute works, but not height
Sander Berntsen
@sbxn14
Jan 06 2017 01:23
@uriznik managed to fix it with background-size: cover; :P
is it possible to create a round button with <i class="fa fa-angle-double-down" aria-hidden="true"></i> this as its icon and nothing else in it?
if so.. how?
Shixun Liu
@lsx1988
Jan 06 2017 01:24
@gbsimon87 I guess I get the point, it is because of the class “thumbnail”
uriznik
@uriznik
Jan 06 2017 01:26
@sbxn14 have you tried just <button ...><i class=...></i></button> ?
Sander Berntsen
@sbxn14
Jan 06 2017 01:26
@uriznik I did but then there was no icon..
Philip
@Balance17
Jan 06 2017 01:27
Hey everyone! Happy New Year!
I have a quick question regarding the Radio button value.
uriznik
@uriznik
Jan 06 2017 01:28
@sbxn14 and the font css is loaded and you can use it in other situations?
Sander Berntsen
@sbxn14
Jan 06 2017 01:28
@uriznik uh I got bootstrap loaded if thats what you mean
@uriznik uh just pasted it in a random h1. it did not appear.
Philip
@Balance17
Jan 06 2017 01:29
I know this will get the selected radio button value $(this).empty().append($('input[name="x&o"]:checked').val());
what would be the command for the unchecked value?
uriznik
@uriznik
Jan 06 2017 01:36
@sbxn14 It looks like you have to sign up if you want a cdn link. Try using class='glyphicon glyphicon-chevron-down' to test with the bootstrap icons
Chris
@ChrisGentile
Jan 06 2017 01:51
How does one center a list using only bootstrap to where the bullets also center and not stay justified to the left?
Sander Berntsen
@sbxn14
Jan 06 2017 01:52
@uriznik already got it working :D
anyone know how I can assign my js for scrolling to the button in the middle of the screen? im a huge newbie when it comes to js and I donno how to do it myself.. http://codepen.io/sbxn14/pen/egmKRr
breez803
@breez803
Jan 06 2017 02:14
how do i find an api to use for the random quote generator.
breez803
@breez803
Jan 06 2017 02:19
thanks @uriznik
CamperBot
@camperbot
Jan 06 2017 02:19
breez803 sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @uriznik |http://www.freecodecamp.com/uriznik
uriznik
@uriznik
Jan 06 2017 02:22
some may be easier to use than others (e.g. have https support and don't require any jsonp CORS workarounds)
sparklie3
@sparklie3
Jan 06 2017 02:24
i was wondering if anyone know how to trigger an css color change once an input text box meets a certain text length
i'm trying to figure out how to change my css for the GO submit button once both username and password have been inputted
Greg Duncan
@GregatGit
Jan 06 2017 02:31
@sparklie3 so you want to trigger an event when two elements are a certain length
sparklie3
@sparklie3
Jan 06 2017 02:31
yes
saw i want to check that username text length and password >8
and then, i can add a css class to my btn
i know i can write a simple if statement
but the problem becomes, how would i loop this?
i thought about writing a while statement, but that doesn't work
Greg Duncan
@GregatGit
Jan 06 2017 02:32
what do you mean loop
sparklie3
@sparklie3
Jan 06 2017 02:32
you can't write just an if statement, where would you bind this to?
say i used jquery
Greg Duncan
@GregatGit
Jan 06 2017 02:33
do you know how to make any type of event
sparklie3
@sparklie3
Jan 06 2017 02:33
i was going to write this
$( document ).ready(function() {

    if($("#inputEmail").val()!==""&& $("#inputPassword").val().length>=8){
        $("#submit").addClass("active");
    }
});
but i know this isn't going to work
Greg Duncan
@GregatGit
Jan 06 2017 02:34
read this first - you need to be all over this http://www.w3schools.com/js/js_htmldom_eventlistener.asp
sparklie3
@sparklie3
Jan 06 2017 02:35
yeah, i know how to add an event listener
i could do something like $(id).on(focus,function(){}
 $(id).on(focus,function(){
 // do stuff


})
Greg Duncan
@GregatGit
Jan 06 2017 02:36
start by console.log every time a letter (in the relevent fields)
sparklie3
@sparklie3
Jan 06 2017 02:36
and i could bind that to listen to me clicking on the password input box
why would i do that?
Greg Duncan
@GregatGit
Jan 06 2017 02:38
once it is clear that the event listener is working a simle if condition when the fields are the right length
sparklie3
@sparklie3
Jan 06 2017 02:38
oh, you gave me an idea
what won't work
what you suggested
i know the event listener works
but you can't write a simple condition
but you're .keypress() gave me an idea
thanks!
Alex Maroa
@Maroa01
Jan 06 2017 02:47
Hi guys i just started with the building of a tribute-page. Can anyone help me on how to get started i have no idea where to begin
uriznik
@uriznik
Jan 06 2017 02:50
@Maroa01 have you thought about what content you want to include?
sparklie3
@sparklie3
Jan 06 2017 02:51
@GregatGit it worked, thanks!
CamperBot
@camperbot
Jan 06 2017 02:51
:cookie: 814 | @gregatgit |http://www.freecodecamp.com/gregatgit
sparklie3 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
Alex Maroa
@Maroa01
Jan 06 2017 02:52
@uriznik Give me a minute i choose one.
@uriznik Yes i have
uriznik
@uriznik
Jan 06 2017 02:58
@Maroa01 you could start by adding that content with very simple markup
Alex Maroa
@Maroa01
Jan 06 2017 03:02
@uriznik Kindly explain
buiphuking
@buiphuking
Jan 06 2017 03:05
plz tell me how to build the element with background-color:blue above footer, i prefer bootstrap class,
http://pathlab.webhubz.com/
uriznik
@uriznik
Jan 06 2017 03:06
@Maroa01 e.g.
<h1>Ron Swanson</h1>
<h2>"Any dog under 50 pounds is a cat and cats are useless"</h2>
<div>Ron Swanson is a man's man, but he isn't trying to impress anyone with his manly ways. He's simply out to enjoy his life without being bothered by anyone.</div>
@Maroa01 do you have a project set up on codepoen?
Alex Maroa
@Maroa01
Jan 06 2017 03:08
@uriznik No. I am just starting on the tribute page
uriznik
@uriznik
Jan 06 2017 03:09
@Maroa01 you'll need to create an account on https://codepen.io/ and then you can make the tribute page there
Alex Maroa
@Maroa01
Jan 06 2017 03:10
@uriznik I have already created an account and everything. Its the starting of the tribute page is where i need help.
Do i need any where to refer incase of anything?
uriznik
@uriznik
Jan 06 2017 03:12
@have you done the html5 and responsive design with bootstrap sections of freecodecamp?
Alex Maroa
@Maroa01
Jan 06 2017 03:15
@uriznik Yes i have.
uriznik
@uriznik
Jan 06 2017 03:15
you can literally copy the html I put earlier and paste it into the HTML box of a fresh codepen project
Alex Maroa
@Maroa01
Jan 06 2017 03:18
@uriznik Do you mind showing me which html you are talking about
uriznik
@uriznik
Jan 06 2017 03:18
@Maroa01 e.g.
<h1>Ron Swanson</h1>
<h2>"Any dog under 50 pounds is a cat and cats are useless"</h2>
<div>Ron Swanson is a man's man, but he isn't trying to impress anyone with his manly ways. He's simply out to enjoy his life without being bothered by anyone.</div>
Alex Maroa
@Maroa01
Jan 06 2017 03:19
@uriznik Thank you!
CamperBot
@camperbot
Jan 06 2017 03:19
:cookie: 446 | @uriznik |http://www.freecodecamp.com/uriznik
maroa01 sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
uriznik
@uriznik
Jan 06 2017 03:22
@Maroa01 so just replace the content, look for an image you can put in, add some classes for styling and some basic css, think about if you want to use bootstrap, etc.
CoryCMyers
@CoryCMyers
Jan 06 2017 04:01
Anyone in here willing to take a quick skim over my Tribute Page before i submit it, and maybe give some tweaks?
Jon Grant
@jong649
Jan 06 2017 04:07
Hey guys, I'm having trouble getting a function to work when called from a separate function; am I missing something obvious here
$("#0").mousedown(function(){
  $('#0Snd').get(0).play(); 
  checkUserInput(0);
  console.log(checkUserInput(0));
});

function checkUserInput(x){
  if(x===solution[count]){
    count++;
    compStart();
    console.log("New count is "+count);
  }
}
I'm trying to make the mousedown action trigger the checkUserInput function, but it doesn't seem to be working
And i'm pretty certain that my if statement should be true
uriznik
@uriznik
Jan 06 2017 04:11
put a console.log("checkUserInput") at the top of checkUserInput
@jong649 does your browser console show any errors?
Jon Grant
@jong649
Jan 06 2017 04:14
@uriznik yes, RangeError: Maximum call stack size exceeded
at checkUserInput
uriznik
@uriznik
Jan 06 2017 04:14
@jong649 would compStart ever call checkUserInput?
Jon Grant
@jong649
Jan 06 2017 04:15
@uriznik No
jaghvi
@mehtajaghvi
Jan 06 2017 04:15

@uriznik var slide = 0;
//call the function slideshow
slideshow();

function slideshow() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
//don't disaply other sildes
x[i].style.display = "none";
}
slide++;
//reset slide from 1
if (slide > x.length) {slide = 1}
//display only the current slide
x[slide-1].style.display = "block";
setTimeout(slideshow, 3000);
}

@uriznik how is this code continously changing slides on my site if it was running only once
code pen is not accepting "col-md-24", anyone tried using this?
uriznik
@uriznik
Jan 06 2017 04:17
@mehtajaghvi it sets a timer with the setTimeout function for every 3 seconds that will call slideshow again
jaghvi
@mehtajaghvi
Jan 06 2017 04:17
But that timer is to display the next picture
uriznik
@uriznik
Jan 06 2017 04:18
@mehtajaghvi so the function will return and the browser javascript engine will call slideshow again when the time expires
jaghvi
@mehtajaghvi
Jan 06 2017 04:18
gotcha
thanks
uriznik
@uriznik
Jan 06 2017 04:19
a lot of things happen asynchronously with javascript and browsers so the flow of execution isn't always obvious
jaghvi
@mehtajaghvi
Jan 06 2017 04:20
yes
Jon Grant
@jong649
Jan 06 2017 04:27
I've been struggling with timing on this Simon project; setTimeout is my new best friend haha
Sam Griffen
@ssgriffen
Jan 06 2017 04:42
Looking for critques on the JS and functionality of this so far, not the style (which I havent worked too much on)...appreciate any feedback I can get, thanks: http://codepen.io/ssgriffen/pen/VmOKEp
Severin Field
@sevdeawesome
Jan 06 2017 05:13
Hey I just completed my "Build a Tribute Page" challenge, and Im not sure if what I have meets the standard... Do you think this is ok: http://codepen.io/sevdeawesome/pen/RKNVyr
Sarah
@Shoyren
Jan 06 2017 05:18
Hi, I'm working on the Wikipedia viewer, but I'm having trouble printing the JSON even though I think the URL gets constructed correctly. Can anyone help me on this? http://codepen.io/shoyren/pen/XpJPvV?editors=1011
Sorin Ruse
@sorinr
Jan 06 2017 05:25
@Shoyren make your var url2 = '&limit=10&callback=?'; and should work
Sarah
@Shoyren
Jan 06 2017 05:25
@sevdeawesome This is a good start and is functional, but the design could use some work. Consider downsizing the "Bio" text and the text at the bottom. I would also either make the text in the buttons larger or the buttons smaller to make it look more balanced. Lastly, I would change the color scheme. This tool will let you pick colors and will give you their hex values when you click on them: http://paletton.com/ I hope this is a bit helpful.
Ritvars
@RitvarsZ
Jan 06 2017 05:28
Any thoughts on my wiki viewer? http://codepen.io/Ritvars/pen/ZBNQrZ
Sarah
@Shoyren
Jan 06 2017 05:28
@sorinr Thanks but my console.log still isn't returning my JSON.string
CamperBot
@camperbot
Jan 06 2017 05:28
shoyren sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1035 | @sorinr |http://www.freecodecamp.com/sorinr
Ken Haduch
@khaduch
Jan 06 2017 05:30
@Shoyren - Since you are using a form, submitting the form is resulting in a reload of the page, if you add an event.preventDefault() it will do something different, still not working properly because of some access control error...
Sorin Ruse
@sorinr
Jan 06 2017 05:32
@Shoyren for me its returning data. you can even see it in the pen console or using devtools
Sarah
@Shoyren
Jan 06 2017 05:33
@khaduch @sorinr Thanks. It looks like on my end, the <form> tag was messing things up. I didn't realize that tag was causing the issue for me.
CamperBot
@camperbot
Jan 06 2017 05:33
shoyren sends brownie points to @khaduch and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: shoyren already gave sorinr points
:star2: 2222 | @khaduch |http://www.freecodecamp.com/khaduch
c0d0er
@c0d0er
Jan 06 2017 05:49
I added Redux, ReacRedux cdn and React, ReactDOM cdn, why it still cannot run? anything wrong with my codepen? http://codepen.io/c0d0er/pen/VPYRqW?editors=1010
Jack Lyons
@JackEdwardLyons
Jan 06 2017 05:51
Hi guys, im wondering what the best way to do a timeout with a 3, 2, 1 GO! and then another one second timeout where the text changes to "restart"
here's my code so far...
startGame.addEventListener("click", () => {
    document.getElementById("inputs-box").style.pointerEvents = "none";

    let time = 4;
    let countDown =() => {
       time--;
       startGame.innerText = time;
       if (time < 1) {
         startGame.innerText = "GO!";
          clearInterval(counter);
       }
    };
    const counter = setInterval(countDown, 1000);

    //
    // return startGame.innerText === "START GAME" 
    //   ? startGame.innerText = "RESTART";
    //   : startGame.innerText = "START GAME";
  });
Kartikeya Gupta
@kartikeya100
Jan 06 2017 05:51
how to make a navbar like this http://startuplab.no/ ....... hamburger always and slide left
how to make a navbar like this http://startuplab.no/ ....... hamburger always and slide left
Jack Lyons
@JackEdwardLyons
Jan 06 2017 05:52
change the elements width, height, position and use a simple transition of about 1 second @kartikeya100

it's ok, i just did this

let time = 4;
    let countDown =() => {
       time--;
       startGame.innerText = time;
       if (time < 1) {
         startGame.innerText = "GO!";
          clearInterval(counter);
          setTimeout(() => {
            startGame.innerText = "RESTART";
          }, 2000)
       }
    };
    const counter = setInterval(countDown, 1000);

if there's a cleaner way, id love to know :)

uriznik
@uriznik
Jan 06 2017 06:00
@c0d0er you need to include the redux thunk js https://npmcdn.com/redux-thunk@2.0.1/dist/redux-thunk.min.js
c0d0er
@c0d0er
Jan 06 2017 06:02
@uriznik thanks, why do i need this redux thunk?
CamperBot
@camperbot
Jan 06 2017 06:02
c0d0er sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @uriznik |http://www.freecodecamp.com/uriznik
Jack Lyons
@JackEdwardLyons
Jan 06 2017 06:47
is it possible to add a specific event listener based on button text
?
Sorin Ruse
@sorinr
Jan 06 2017 07:08
@JackEdwardLyons it should. read the button text into a var then $(element).on(myvar, function(){logic here}); something like this
@JackEdwardLyons but the btn text should be a valid event
@JackEdwardLyons sorry. i got it wrong. you want to switch events based on button text. right?
Sorin Ruse
@sorinr
Jan 06 2017 07:16
Jack Lyons
@JackEdwardLyons
Jan 06 2017 07:29
here's my code @sorinr
 /* Damn this is getting ugly... any thoughts, see the game and click the button to see what 
       * is going on.
       */
            if (startGame.innerText === "START GAME") {
              startGame.addEventListener('click', countDownToBegin);
            } 

              function countDownToBegin() {
                startGame.style.pointerEvents = "none";
                let time = 4;
          let countDown = () => {
             time--;
             startGame.innerText = time;

             if (time < 1) {
               startGame.innerText = "GO!";
                clearInterval(counter);

                setTimeout(() => {
                  startGame.innerText = "RESTART";
                  startGame.style.pointerEvents = "auto";

                  startGame.addEventListener('click', () => {
                          startGame.innerText = "START GAME";
                          // the if statement above doesn't trigger
                          // i want the countdown to begin once start game has been clicked again!
                          countDownToBegin();
                        })
                }, 2000);
             }
          };
          const counter = setInterval(countDown, 1000);
          startGame.removeEventListener('click', countDownToBegin);
              }
i want the button to count down on the first click, then reset, then on click again, do some logic, and be prepared for a second click to start again
i can make a codepen if you like
Sorin Ruse
@sorinr
Jan 06 2017 07:34
@JackEdwardLyons a codepen will help to see the actual behavior and make some tests
hope that helps
i feel like im 80 per cent there
but my code is sloppy
Darth Skywalker
@adityaparab
Jan 06 2017 07:43

@JackEdwardLyons

is it possible to add a specific event listener based on button text

Technically yes, but I'd recommend having one event handler that will abstract this. For example

function functionForStartGame(){
  // some code
}

function functionForRestart(){
  // some code
}

const startGame = document.getElementById("start-game");

startGame.addEventListener('click', function(){
  if(this.innerHTML === 'START GAME'){
    functionForStartGame.call(this);
  } else if(this.innerHTML === 'RESTART'){
    functionForRestart.call(this);
  }
});
Jack Lyons
@JackEdwardLyons
Jan 06 2017 07:44
ahhh coool @adityaparab
so using .call allows multiple "functions"
calling "this" is calling upon the window is it not? would it be better to put these functions in an object? just out of curiosity and not knowing much about "this" in general @adityaparab
Darth Skywalker
@adityaparab
Jan 06 2017 07:48
@JackEdwardLyons not really. .call will bind this the function you invoke .call on. It will emulate the same behaviour as you would have had had you used two different event handlers based on innerHTML
Jack Lyons
@JackEdwardLyons
Jan 06 2017 07:48
cool
ill give that a go, thank you @adityaparab that's a cool trick
CamperBot
@camperbot
Jan 06 2017 07:48
jackedwardlyons sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 789 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Jan 06 2017 07:49
this inside your .addEventListener callback will be the element on which you have called the event handler (click in this case)
@JackEdwardLyons :+1:
Just a word of caution, you won't be able to use arrow funciton if you are to follow this scheme
as arrow function will coarse your this to the parent object.
Sorin Ruse
@sorinr
Jan 06 2017 07:50
@adityaparab else if(this.innerHTML === 'RESTART')
Darth Skywalker
@adityaparab
Jan 06 2017 07:50
so if you're getting window for this inside your callback, then you're most likely using arrow function like
startGame.addEventListener('click', () => {
  if(this.innerHTML === 'START GAME'){
    functionForStartGame.call(this);
  } else if(this.innerHTML === 'RESTART'){
    functionForRestart.call(this);
  }
});
this won't work
@sorinr : Oh! Right! Updated. thanks
CamperBot
@camperbot
Jan 06 2017 07:51
adityaparab sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1036 | @sorinr |http://www.freecodecamp.com/sorinr
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:29
How do I create a button that opens a link? Like I want to get a random wikipedia article using a link that generates one on the click of a button?
I'm trying to make the Get Random Article into a button from a link. http://codepen.io/jimpix/full/PbVRpm/
Sorin Ruse
@sorinr
Jan 06 2017 08:31
@playingwithinfinity you do it fine. just add target="_blank" to the link for random article to open the page in a new tab
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:32
@sorinr But currently it is a link that looks like a button, not a button proper.
Sorin Ruse
@sorinr
Jan 06 2017 08:33
@playingwithinfinity you can get rid of button and let only <a> tag but add class="btn btn-default" to it. it will look like a button
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:34
Ok, thanks!
@sorinr
Sorin Ruse
@sorinr
Jan 06 2017 08:35
@playingwithinfinity welcome
Bunny Vishal
@bunnyvishal6
Jan 06 2017 08:36
Hello guys, I wanna tell you one thing. If you can't find a source to learn React or javascript or d3 any thing you can get awesome courses at pluralsight. I'm not promoting pluralsight .. it is actually a paid one. But there is a way to pluralsight for 3 months for free. First signup a microsoft account, then go to this page . https://www.visualstudio.com/dev-essentials/ and click join or access now, then you get some cool things for free. among them there will be pluralsight 3months subscription. click on activate then you will be taken to a pluralight page. just give name and email. thats it . you got a free pluralsight account for 3 months for free. And I'm not working for pluralsight . I am a camper and want other campers to get learning resources for free. you can check my profile at https://www.freecodecamp.com/bunnyvishal6
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:39
@sorinr Now I want my search button to be black, but the text inside it to be white. Is there anyway to do so?
Sorin Ruse
@sorinr
Jan 06 2017 08:41
@playingwithinfinity yes. just a sec
@playingwithinfinity add this to css:
.form-control{
  background: #000;
  color: #fff;
}
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:45
@sorinr Thanks! My method was unnecessarily complicated :P
CamperBot
@camperbot
Jan 06 2017 08:45
playingwithinfinity sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1037 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 06 2017 08:48
@playingwithinfinity sorry. i was making you the input field bg black and color white :) and u wanted the search btn
playingwithinfinity
@playingwithinfinity
Jan 06 2017 08:48
@sorinr I changed that.
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:21
thank you so much @adityaparab heres what I did
startGame.addEventListener('click', function() {
        if (this.innerHTML === 'START GAME') {
          countDownToBegin.call(this);
        } else if (this.innerHTML === 'RESTART') {
          this.innerHTML = 'START GAME';
          return;
          // functionForRestart.call(this);
        }
      });
CamperBot
@camperbot
Jan 06 2017 09:21
jackedwardlyons sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 790 | @adityaparab |http://www.freecodecamp.com/adityaparab
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:21
worked perfectly
playingwithinfinity
@playingwithinfinity
Jan 06 2017 09:24
Could somebody explain to me what this function does?
$('#output').prepend("<div><div class='btn-primary'><a href="+data[3][i]+"><h2>" + data[1][i]+ "</h2>" + "<p>" + data[2][i] + "</p></a></div></div>");?
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:26
it prepends a div with some data, that div has a class "btn-primary" (a div shouldn't be a button if thats what it is?)
The data will have a heading of h2 (maybe a title) with a paragraph and some more data
@playingwithinfinity
do you want extra clarification on specifics ? @playingwithinfinity
VilfredSikker
@VilfredSikker
Jan 06 2017 09:26

Hey people I need some help. I'm done with my Portfolio pretty soon, but I have a problem with my buttons. I would like to link them to my other media but page just gets white.

http://codepen.io/VilfredSikker/pen/MJYXMP/

Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:26
what do you understand the function to do @playingwithinfinity
hey @VilfredSikker the href is not written correctly
playingwithinfinity
@playingwithinfinity
Jan 06 2017 09:27
@JackEdwardLyons Wait, so it's possible to add html elements using JQuery `.prepend()?
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:27
instead of #About it needs to be a slash /
a href="/about"
yea, prepend and append allow new html to be added
@playingwithinfinity
VilfredSikker
@VilfredSikker
Jan 06 2017 09:28
@JackEdwardLyons you are looking at my buttons to Instagram, Fb, SC right? :)
playingwithinfinity
@playingwithinfinity
Jan 06 2017 09:29
@JackEdwardLyons Yeah, can you help me make my search output look better? What do I need to change in the .append() function? http://codepen.io/jimpix/pen/PbVRpm?editors=0010#0
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:30
@VilfredSikker add target="blank" to your links, sometimes codepen doesn't link well within the same window
so target="_blank" will create a new window and it works fine
sure @playingwithinfinity i will take a look, appending multiple pieces of data is often better using list tags
give me a sec @playingwithinfinity
VilfredSikker
@VilfredSikker
Jan 06 2017 09:32
@JackEdwardLyons That works, thanks! So normally it would work in any other writing program?
CamperBot
@camperbot
Jan 06 2017 09:32
vilfredsikker sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:32
ok @playingwithinfinity , add some padding
change the colors a bit
normally, yes @VilfredSikker
playingwithinfinity
@playingwithinfinity
Jan 06 2017 09:33
@JackEdwardLyons How do I make the article title show up?
I can't see the API call for some reason
VilfredSikker
@VilfredSikker
Jan 06 2017 09:35
@JackEdwardLyons :+1:
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:37
try this @VilfredSikker
('#output').prepend("<div style='background: blue; padding: 10px; margin-bottom: 20px'><a href=" + data[3][i] + "><h2>" + data[1][i] + "</h2>" + "<p>" + data[2][i] + "</p></a></div>");
        }
obv, create a class and put those styles in the class
if you're not sure, here's the whole code for the JS
$(document).ready(function() {
  $("#search").on("click", function() {
    var searchTerm = $("#searchBar").val();
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";

    $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: "json",
      success: function(data) {
        //console.log(data[1][0]);
        //console.log(data[2][0]);
        //console.log(data[3][0]);
        console.log(url);

        $("#output").html('');
        for (var i = 0; i < data[1].length; i++) {
          $('#output').prepend("<div style='background: blue; padding: 10px; margin-bottom: 20px'><a href=" + data[3][i] + "><h2>" + data[1][i] + "</h2>" + "<p>" + data[2][i] + "</p></a></div>");
        }
      },
      error: function(errorMessage) {
        alert("Error");
      }

    });
  });
});
@VilfredSikker
that looks nicer, the title is visible
Ashwin Nayar
@platonish
Jan 06 2017 09:40
Hi, I'm trying to create a custom tweet button for the Random Quote Machine challenge, but the quotes have tags such as <br> and <em> in them and I don't want them to show in the tweet. what should I do?
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:41
are the quotes hard coded @platonish
you could do a regex to replace them
Ashwin Nayar
@platonish
Jan 06 2017 09:41
what's regex?
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:42
its basically a method to find and replace code
someData.replace("<br>", "whatever");
that will replace a br tag with the word, whatever
@platonish
Ashwin Nayar
@platonish
Jan 06 2017 09:43
oh okay! and also I found encodeURIComponent(), does that work too?
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:44
hm, that's more for URLs
tell me, are your quotes hard coded @platonish
why do they have br tags to begin with ?
Ashwin Nayar
@platonish
Jan 06 2017 09:44
i'm sorry i don't know what hard coded means :(
i'm new to this
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:45
oh ok, so hard coding something generally means that you write in the code yourself, when mostly the code should be "dynamic"
Ashwin Nayar
@platonish
Jan 06 2017 09:45
do you mean to if im using an api to fetch the quotes?
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:45
dynamic means it appears / is altered, based on some user input
Ashwin Nayar
@platonish
Jan 06 2017 09:45
yes! the quotes are hard coded then
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:45
hard coding is a good idea for the beginning, for example if you don't have a database and need some "data"
Ashwin Nayar
@platonish
Jan 06 2017 09:46
all the quotes are in an array
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:46
ok, so in order to test your app, it's probably best to remove the br tags and em tags, or... otherwise use a regex to replace the tags before they get tweeted
Ashwin Nayar
@platonish
Jan 06 2017 09:46
and accessed using a random number function
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:46
Ashwin Nayar
@platonish
Jan 06 2017 09:47
okay cool, will try that out, thanks! @JackEdwardLyons
CamperBot
@camperbot
Jan 06 2017 09:47
platonish sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Jack Lyons
@JackEdwardLyons
Jan 06 2017 09:47
ok sorry, i gotta run, good luck
Sorin Ruse
@sorinr
Jan 06 2017 09:59
@JackEdwardLyons do not use "async: false,". if for some reason you cannot get a response from the api all your further code will not execute as you make the call synchronous
@JackEdwardLyons use async with a callback or promise
Akshaya
@akshayabmg
Jan 06 2017 10:24
Can anyone help me with proptypes in React?
I have a simple question in my code and I dont know where I made a mistake. I do not see any errors
Ezra
@EzraPlato
Jan 06 2017 11:24
Hey I'm trying to make text italic <h3 class="italic">text</h3> css is h3.italic {
font-style: italic;
}
Anyone know what I'm not doing
Salomon
@zarruk
Jan 06 2017 11:26
@vinaypuppal thanks!
CamperBot
@camperbot
Jan 06 2017 11:26
zarruk sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 648 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Sorin Ruse
@sorinr
Jan 06 2017 11:36
@EzraPlato it should work
Phillip Troutman
@troutman21
Jan 06 2017 12:14
Hey everyone. Can anyone tell me why my "Contact buttons" (Instagram, LinkedIn, FCC) are not linking to those pages? its just showing a blank screen when i click on them. http://codepen.io/Troutman21/pen/PbrQqE
Sorin Ruse
@sorinr
Jan 06 2017 12:18
@troutman21 try to add target="_blank" to those <a> tags
Phillip Troutman
@troutman21
Jan 06 2017 12:24
Thanks! @sorinr
CamperBot
@camperbot
Jan 06 2017 12:24
troutman21 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1040 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 06 2017 12:25
@troutman21 welcome
Saneer Gera
@saneergera
Jan 06 2017 12:39
hii Please help .I need an API key for Open Weather App .How do i create one
?
Esera
@drakho
Jan 06 2017 12:50
Hi.. Im in need of some help.. Can someone please take a look at this https://codepen.io/Bnoobie/pen/vyamqa.. tried to explain but I dont understand the problem myself..
oh the images are not inplace they are suppose to float left
in the discography section
Sorin Ruse
@sorinr
Jan 06 2017 13:08
@drakho strange but if you make .imgCont {
float: right; it will be floated to the left as u wish :)
Esera
@drakho
Jan 06 2017 13:12
@sorinr thanks.. but is suppose to work like that?
CamperBot
@camperbot
Jan 06 2017 13:12
:star2: 1041 | @sorinr |http://www.freecodecamp.com/sorinr
drakho sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 06 2017 13:13
@drakho nope
Esera
@drakho
Jan 06 2017 13:13
@sorinr any reason why it does that.
Sorin Ruse
@sorinr
Jan 06 2017 13:15
@drakho i would just add this: .imgCont:last-of-type{
float: none;
}
@drakho leave the .imgCont class as it is and add only the above
@drakho so you will have:
.imgCont {
  float: left;
  margin-top:10px;
  width: 30%;
  margin-right: 1%;
  margin-bottom: 0.5em;
}
.imgCont:last-of-type{
  float: none;
}
mozilla44
@mozilla44
Jan 06 2017 13:19
hi! quick question ! does the html/CSS course teaches you about stylesheets or only Internal CSS ?
Esera
@drakho
Jan 06 2017 13:22
@sorinr that worked.. so last-of-type makes sure the last div is the same as the others, or something like that..
Sorin Ruse
@sorinr
Jan 06 2017 13:23
@drakho yes. the last-of-type makes sure the last single element with that class aligns normally without any float
Capi Etheriel
@barraponto
Jan 06 2017 13:26
@mozilla44 CSS is stylesheets, not sure what you're talking about.
Sorin Ruse
@sorinr
Jan 06 2017 13:31
@mozilla44 you have 3 methods to style your html on a page: 1. inpage styling where you put all your css proprties in the <head> tag between <style></style> tags; 2. external stylesheet and you have to link it to your page and 3. inline styling where you style each html element when you declare it like `<div style="background-color: black; color: white;etc">
Esera
@drakho
Jan 06 2017 13:34
@sorinr thanks..
CamperBot
@camperbot
Jan 06 2017 13:34
drakho sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: drakho already gave sorinr points
Sorin Ruse
@sorinr
Jan 06 2017 13:38
@drakho welcome
Jose Irizarry
@Stjose
Jan 06 2017 13:58
buenos dias
hello
Salomon
@zarruk
Jan 06 2017 14:40
@vinaypuppal thanks!
CamperBot
@camperbot
Jan 06 2017 14:40
:cookie: 649 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
zarruk sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
Mujahid Islam
@Alkousari
Jan 06 2017 14:46
Hello JavaScript World!
CamperBot
@camperbot
Jan 06 2017 14:46

welcome to FreeCodeCamp @Alkousari!

Francisco Camargos
@Xicoria
Jan 06 2017 15:28
Hello everybody! :)
Grey_Padawan
@Gprint
Jan 06 2017 15:48
Hey all, can any one help me with the portofilo project, i need somone to explain how to add the smooth scrolling bar plz
sanberkzulfikar
@sanberkzulfikar
Jan 06 2017 15:51
@sorinr Hey ! Do you mind if i ask you something?
João Paulo Effting
@joaoeffting
Jan 06 2017 15:51
@sanberkzulfikar Hello. Of course not :D
sanberkzulfikar
@sanberkzulfikar
Jan 06 2017 15:52
I'm currently on the Tribute Page project
i'm on a streak but it will take some days to get my tribute page done, so do i loose my streak for it?
Vaidotas
@unreality23
Jan 06 2017 15:53

Hello everyone, I hope you have a nice friday :) I'm stuck with task called "Build a random Quote Machine" I have no idea how to tweet my quote, i can post simple text but i cant post random quote ```
window.getInfo = function(response) {
globals = response;
if (globals && globals.quote && globals.quotesAuthor) {
$("#quotes").html(globals.quote);
$("#quoteauthor").html(globals.quotesAuthor);

        }
    }

$("button").click(function() {
$.ajax({
type: "POST",
url: "include.inc.php",
dataType: 'json',
success: window.getInfo
});
});

window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function (f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.widgets.createShareButton(
'http://fcc.com',
document.getElementById('developer'),
function (el) {
console.log("Button created.")
}, {
url: "include.inc.php",
dataType: 'json',
text: " random text which works",
size: 'large'
});
});
```
i have no idea how to put globals.quote into the place wqhere its saying " random text which works" any answer would be great! Thank you! :)

window.getInfo = function(response) {
      globals = response;
            if (globals && globals.quote && globals.quotesAuthor) {
               $("#quotes").html(globals.quote);
                $("#quoteauthor").html(globals.quotesAuthor);


            }
        }
$("button").click(function() {
     $.ajax({
        type: "POST",
        url: "include.inc.php",
        dataType: 'json',
        success:  window.getInfo 
    });
});


window.twttr = (function (d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = {
        _e: [],
        ready: function (f) {
            t._e.push(f)
        }
    });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
    twttr.widgets.createShareButton(
        'http://fcc.com',
    document.getElementById('developer'),
    function (el) {
        console.log("Button created.")
    }, {
        url: "include.inc.php",
        dataType: 'json',
        text: " random text which works",
        size: 'large'
    });
});
Sorin Ruse
@sorinr
Jan 06 2017 16:02
@sanberkzulfikar nope. sorry. been away to walk my dog. or viceversa:)
@sanberkzulfikar just go and ask
@sanberkzulfikar if i know, i will answer :)
fedelago31
@fedelago31
Jan 06 2017 16:08
i dont understand why, sometimes, images charge, and other times. doesnt
Its like randomly appears. http://codepen.io/fedelago/pen/XprGBN
John Alcher
@alchermd
Jan 06 2017 16:09
Hey mates. How do I stop the timer when I click the number the second time?
http://codepen.io/AlcherMD/pen/MJwepZ
Sorin Ruse
@sorinr
Jan 06 2017 16:22
@alchermd what do u expect to achive by var val = $(this).text(), running;?
Aditi Roy
@AlluringAditi
Jan 06 2017 16:25
Hello Everyone, can someone please help me why this code is not working:
<!DOCTYPE html>
<html>
<head>
    <title>
Random Quote Machine.
</title>
<script type="text/javascript">
var getQuote(){
    var quoteArray = 'abcdefghijklmnopqrstuvwxyz'
    return quoteArray;
}
</script>

</head>
<body>

<h1>Random Quote Machine</h1>
<p>This Website Generated Random Quotes which can be shared on twitter with just click of a button</p>
<button type="button"
onclick="document.getElementById('quote').innerHTML = getQuote();">
New Quote</button>

<p id="quote"></p>

</body>
</html>
Anyone?
Francisco Camargos
@Xicoria
Jan 06 2017 16:28
var getQuote = function() {
Aditi Roy
@AlluringAditi
Jan 06 2017 16:29
@Xicoria Dom you mean
function getQuote() {
}
Francisco Camargos
@Xicoria
Jan 06 2017 16:30
nah... replace: var getQuote(){ with var getQuote = function() {
;)
alas... both ways would work
Aditi Roy
@AlluringAditi
Jan 06 2017 16:31
I did this and it's working:
<!DOCTYPE html>
<html>
<head>
    <title>
Random Quote Machine.
</title>
<script type="text/javascript">
function getQuote(){
    var quoteArray = 'abcdefghijklmnopqrstuvwxyz'
    return quoteArray;
}
</script>

</head>
<body>

<h1>Random Quote Machine</h1>
<p>This Website Generated Random Quotes which can be shared on twitter with just click of a button</p>
<button type="button"
onclick="document.getElementById('quote').innerHTML = getQuote();">
New Quote</button>

<p id="quote"></p>

</body>
</html>
@Xicoria Yeah :)
Sorin Ruse
@sorinr
Jan 06 2017 16:34
@AlluringAditi this onclick="document.getElementById('quote').innerHTML = getQuote();"> is wrong. it should be like <button type="button" onclick=" getQuote()"> New Quote</button> and withinh your get function getQuote() you make document.getElementById('quote').innerHTML = to the result you want to present
Aditi Roy
@AlluringAditi
Jan 06 2017 16:35
@sorinr Yeah that makes sense too, sure I'll use this.
Sorin Ruse
@sorinr
Jan 06 2017 16:37
@alchermd when you click h1 first time your var "running" is undefined that means false. start your logic from here
John Alcher
@alchermd
Jan 06 2017 16:39
@sorinr yah, shouldn't the else statement run since it's false?
Aditi Roy
@AlluringAditi
Jan 06 2017 16:39
@sorinr Hey I did this and it's not working :
<!DOCTYPE html>
<html>
<head>
    <title>
Random Quote Machine.
</title>
<script type="text/javascript">
function getQuote(){
    var quoteArray = "abcdefghijklmnopqrstuvwxyz";
    document.getElementById('quote') = quoteArray;
}
</script>

</head>
<body>

<h1>Random Quote Machine</h1>
<p>This Website Generated Random Quotes which can be shared on twitter with just click of a button</p>
<button type="button" onclick= "getQuote()">New Quote</button>

<p id="quote"></p>

</body>
</html>
:(
The previous one was working!!
Sorin Ruse
@sorinr
Jan 06 2017 16:41
@AlluringAditi document.getElementById('quote') = quoteArray; where is the innerHTML part?
Clyde Lobo
@oppiniated
Jan 06 2017 16:41
@AlluringAditi this line document.getElementById('quote') = quoteArray; should be document.getElementById('quote').innerHTML = quoteArray;
Aditi Roy
@AlluringAditi
Jan 06 2017 16:41
@sorinr ohhhhh I see sorryyyyyyy!!
:)
@oppiniated Thanks :)
CamperBot
@camperbot
Jan 06 2017 16:42
:cookie: 479 | @oppiniated |http://www.freecodecamp.com/oppiniated
alluringaditi sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
Aditi Roy
@AlluringAditi
Jan 06 2017 16:43

@sorinr

<!DOCTYPE html>
<html>
<head>
    <title>
Random Quote Machine.
</title>
<script type="text/javascript">
function getQuote(){
    var quoteArray = 
    [
    {
        "this is quote one"
    },
    {
        "this is Quote Two"
    },
    {
        "this is quote three"
    },
    {
        "this is quote four"
    },
    {
        "this is quote five"
    },
    ];
    document.getElementById('quote').innerHTML = quoteArray;
}
</script>

</head>
<body>

<h1>Random Quote Machine</h1>
<p>This Website Generated Random Quotes which can be shared on twitter with just click of a button</p>
<button type="button" onclick= "getQuote()">New Quote</button>

<p id="quote"></p>

</body>
</html>

Help me how can I now select one quote at a time when the function is called and then display it?

Sorin Ruse
@sorinr
Jan 06 2017 16:46
@AlluringAditi use a math.random to get a random quote from the array. here an example of mine but using sequential quotes example
Clyde Lobo
@oppiniated
Jan 06 2017 16:47
@AlluringAditi document.getElementById('quote').innerHTML = quoteArray[ Math.floor(Math.random() * (quoteArray.length-1))]
Aditi Roy
@AlluringAditi
Jan 06 2017 16:47
@sorinr Nooooooo please don't give me the code or else I'll be tempted to just copy paste, I'm not going to see the code I want to learn part by part please
Clyde Lobo
@oppiniated
Jan 06 2017 16:48
@oppiniated cool, so you need to generate a random number between 0 and the last index of the array
Aditi Roy
@AlluringAditi
Jan 06 2017 16:49
@oppiniated Okay and I can see that you did that using Math.random () --> Function
fedelago31
@fedelago31
Jan 06 2017 16:49
http://codepen.io/fedelago/pen/XprGBN Can somebody please help me? I dont know why my images are loading whenever they want :(
Aditi Roy
@AlluringAditi
Jan 06 2017 16:49
@oppiniated but what is Math.floor()
fedelago31
@fedelago31
Jan 06 2017 16:50
@AlluringAditi Math.floor() is for round up a number down. Like 2,7 is 2.
Aditi Roy
@AlluringAditi
Jan 06 2017 16:51
@fedelago31 you mean 2.7 right? if so then why not 3 why 2
fedelago31
@fedelago31
Jan 06 2017 16:52
@AlluringAditi Cause it rounds down. If you want to 2.7 be 3. use math.Round()
Sorin Ruse
@sorinr
Jan 06 2017 16:53
@AlluringAditi when i said :point_up: January 6, 2017 6:41 PM you have thanked to @oppiniated for giving you :point_up: January 6, 2017 6:41 PM the full code and u tell me noooo i don't want to see the code :) there is nothing wrong in looking to some others code as long as you understand what that code is doing :)
Aditi Roy
@AlluringAditi
Jan 06 2017 16:53
@fedelago31 Aahh I see, that's why floor I suppose and not ceiling :)
fedelago31
@fedelago31
Jan 06 2017 16:54
@AlluringAditi Lol xD
Amy Walters
@codecampamy
Jan 06 2017 16:54
Hey - I'm coding my portfolio site. What I'd like to do is get the button (which I intend to style later) to overlay the image and sit in the middle of it. I have been looking for a way position this with css for quite some time. Do I need a flex box? Should my image be a background image? If anyone can recommend a good tutorial on button overlay or could take a look at my code I would be very grateful http://codepen.io/codecampamy/pen/zozrBM
Aditi Roy
@AlluringAditi
Jan 06 2017 16:54
@sorinr but he just gave me the part where I was confused not the complete code.
Vaidotas
@unreality23
Jan 06 2017 16:54

Hello everyone, I hope you have a nice friday :grinning: I'm stuck with task called "Build a random Quote Machine" I have no idea how to tweet my quote, i can post simple text but i cant post random quote

window.getInfo = function(response) {
globals = response;
if (globals && globals.quote && globals.quotesAuthor) {
$("#quotes").html(globals.quote);
$("#quoteauthor").html(globals.quotesAuthor);
        }
    }
$("button").click(function() {
$.ajax({
type: "POST",
url: "include.inc.php",
dataType: 'json',
success: window.getInfo
});
});
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function (f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.widgets.createShareButton(
'http://fcc.com',
document.getElementById('developer'),
function (el) {
console.log("Button created.")
}, {
url: "include.inc.php",
dataType: 'json',
text: " random text which works",
size: 'large'
});
});

i have no idea how to put globals.quote into the place wqhere its saying " random text which works" any answer would be great! Thank you! :grinning:

Sorin Ruse
@sorinr
Jan 06 2017 16:56
@AlluringAditi mine its not at all complete. that pen its just a joke where i was playing with XML not html. my real pen its another one
Aditi Roy
@AlluringAditi
Jan 06 2017 16:56
@sorinr fine :)
Sorin Ruse
@sorinr
Jan 06 2017 16:56
@AlluringAditi and i 'm using an api to get quotes in that real one
Aditi Roy
@AlluringAditi
Jan 06 2017 16:56
@sorinr WHat is that API
Sorin Ruse
@sorinr
Jan 06 2017 16:57
@AlluringAditi api.forismatic.com
Vaidotas
@unreality23
Jan 06 2017 16:58
anyone ?
Aditi Roy
@AlluringAditi
Jan 06 2017 16:58
@sorinr This is what I'm getting when I got that link
403 Forbidden
This is my Updated code and it's not working :(
<!DOCTYPE html>
<html>
<head>
    <title>
Random Quote Machine.
</title>
<script type="text/javascript">
function getQuote(){
    var quoteArray = 
    [
    {
        "this is quote one"
    },
    {
        "this is Quote Two"
    },
    {
        "this is quote three"
    },
    {
        "this is quote four"
    },
    {
        "this is quote five"
    },
    ];
    document.getElementById('quote').innerHTML = quoteArray [Math.floor(Math.random() * (quoteArray.length -1))];
}
</script>

</head>
<body>

<h1>Random Quote Machine</h1>
<p>This Website Generated Random Quotes which can be shared on twitter with just click of a button</p>
<button type="button" onclick= "getQuote()">New Quote</button>

<p id="quote"></p>

</body>
</html>
Sorin Ruse
@sorinr
Jan 06 2017 17:01
@AlluringAditi for sure you get a 403. google for forismatic api, read the docs and you will understand how to construct the full url to get a valid response from that api
John Alcher
@alchermd
Jan 06 2017 17:02
@sorinr Hey mate I've been analyzing your code, but I just can't wrap my head around it. Why are you declaring clock outside the click handler? What does +$(this).text() mean?
Aditi Roy
@AlluringAditi
Jan 06 2017 17:02
@sorinr I believe I'm just a beginner so I rather stick to the array method for the time being, can you help me what's wrong with my code please

@oppiniated Hey I didn't understand this part

Math.random() * (quoteArray.length -1)

Why I'm multiplying a random generated number with the length of my array -1

Sorin Ruse
@sorinr
Jan 06 2017 17:04
@alchermd what code?
Sorin Ruse
@sorinr
Jan 06 2017 17:11
@AlluringAditi Math.random() returns a value between?
Aditi Roy
@AlluringAditi
Jan 06 2017 17:13
@sorinr 0 to less than 1 I guess ? not sure tough
Sorin Ruse
@sorinr
Jan 06 2017 17:14
@alchermd this var val = +$(this).text(); is not my code for sure. when i modify code i just fork the pen and present my own changes
Paweł Karniej
@Karniej
Jan 06 2017 17:18
Hello everybody , I'd like to ask a CSS question.
.site-header nav ul li a:link,
.site-header nav ul li a:vistied {
display: block;
padding 10px 18px;
border 1px solid black;
border-bottom: none;
}
I have this type of css,
Why it doesn't work could anybody tell me?
it doesn't change anything...
Cory
@cfirst
Jan 06 2017 17:19
Anyone follow any design blogs? What is y'alls muse? I haven't completed the weather app project because I don't know how I want to style it, haha XD
Sorin Ruse
@sorinr
Jan 06 2017 17:20
@AlluringAditi so if you have an array with 4 quotes your min will be zero and max will be 3. right?
Aditi Roy
@AlluringAditi
Jan 06 2017 17:20
@sorinr Yes
Hamoud Khatar
@skhamoud
Jan 06 2017 17:21
@Karniej that might be due to a lot of reasons first , you missed : in padding and border
Aditi Roy
@AlluringAditi
Jan 06 2017 17:21
@sorinr Then won't it return the same value each and every time
Paweł Karniej
@Karniej
Jan 06 2017 17:21
@skhamoud Haha thanks m8 , i am blind sometimes :/
CamperBot
@camperbot
Jan 06 2017 17:21
karniej sends brownie points to @skhamoud :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @skhamoud |http://www.freecodecamp.com/skhamoud
Sorin Ruse
@sorinr
Jan 06 2017 17:21
@AlluringAditi if you read this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random and replace min and max you will get a random quote based on your array of quotes
Paweł Karniej
@Karniej
Jan 06 2017 17:22
@skhamoud but still doesn't work, the class is added correctly
Hamoud Khatar
@skhamoud
Jan 06 2017 17:23
can you post a pen here ? it might be due to specificity issues
@Karniej can you post a pen here ? it might be due to specificity issues
Sorin Ruse
@sorinr
Jan 06 2017 17:23
@AlluringAditi when you have a smaller array it is very prbably that your quotes may repeat often :smile: )
Aditi Roy
@AlluringAditi
Jan 06 2017 17:23
@sorinr Then
0.282552 * { (3-0) + 0}
Paweł Karniej
@Karniej
Jan 06 2017 17:24
@skhamoud Hmm i am working on a wordpress theme, I don't know it would be correct if i'll try to put it on codepen
Aditi Roy
@AlluringAditi
Jan 06 2017 17:24
@sorinr Ah I see how can I avoid repeating then
I was thinking to make another function which would prevent the same numbers from repeating, will that work
or is there another method
Hamoud Khatar
@skhamoud
Jan 06 2017 17:25
@Karniej well that's a problem, anyway wordpress themes often have weird styling rules check the same rules but make them inline in devtools
Sorin Ruse
@sorinr
Jan 06 2017 17:25
@AlluringAditi using math.random u can't avoid this
@AlluringAditi using an api. you don't care. coz you get a new quote each time :)
Aditi Roy
@AlluringAditi
Jan 06 2017 17:26
@sorinr then how can I randomly select one quote at a time without using math.random ()
Hamoud Khatar
@skhamoud
Jan 06 2017 17:26
if it works then , its a specificity issue if not , then dive in the theme css look for the class and check its parent etc...
Aditi Roy
@AlluringAditi
Jan 06 2017 17:26
@sorinr now I see why u asked me to USE an API
@sorinr Okay tell me where can I get more info on this API thingi :)
Sorin Ruse
@sorinr
Jan 06 2017 17:26
@AlluringAditi sequential order
Paweł Karniej
@Karniej
Jan 06 2017 17:27
@skhamoud ok thank you once again, i'll try to work this out , you gave me some ideas
CamperBot
@camperbot
Jan 06 2017 17:27
:warning: karniej already gave skhamoud points
karniej sends brownie points to @skhamoud :sparkles: :thumbsup: :sparkles:
Aditi Roy
@AlluringAditi
Jan 06 2017 17:28
@sorinr What is that "sequential order "
Sorin Ruse
@sorinr
Jan 06 2017 17:28
@AlluringAditi i'm not asking u to use an api. i just presented u the math.random alternative
Hamoud Khatar
@skhamoud
Jan 06 2017 17:29
@Karniej check out this tutorial on specificity and overall css awesome stuff http://learn.shayhowe.com/html-css/getting-to-know-css/#specificity
Aditi Roy
@AlluringAditi
Jan 06 2017 17:29
@sorinr well that's intriguing, tell me about that
please :)
Sorin Ruse
@sorinr
Jan 06 2017 17:30
@AlluringAditi you loop through an array starting from 0 index to the end of the array then restrat again from 0 index and so on
mostlind
@mostlind
Jan 06 2017 17:30
Hey guys, qq: I'm trying to add a touchmove listener for the mobile version of a site, but I don't want to override the slidey, momentum-based scrolling on ios safari. does anyone know how I would go about that?
Aditi Roy
@AlluringAditi
Jan 06 2017 17:32

@sorinr

for (var i=0;i<quoteArray.length;i++){
    document.getElementById('quote').innerHTML = quoteArray[i];
}

This is what you mean

Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:33
Hello.. I needed some information
How are websites like codefight.com, codecademy.com and such interactive learning platforms created?
Sorin Ruse
@sorinr
Jan 06 2017 17:34
@AlluringAditi using this your for loop will stop at the end of the array. you have to reloop as many times as you want. take a look at my code you didn't want to see
Aditi Roy
@AlluringAditi
Jan 06 2017 17:36
@sorinr okay and I'm sorry man I was just not trying to copy paste, I've this bad habit of Ctrl+C and CTRL +V
:)
John Alcher
@alchermd
Jan 06 2017 17:37
@sorinr I finally got it to work! Can you please explain why I need to declare clock outside the click handler?
Sorin Ruse
@sorinr
Jan 06 2017 17:37
@AlluringAditi as i said. if you look at some code and u understand whats going on there, you can write it on your own. there is no copy paste in there
mostlind
@mostlind
Jan 06 2017 17:38
nevermind figured it out.. Had to add -webkit-overflow-scrollling: touch to my css
Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:39
@AlluringAditi What's up? Can I also try to explain? :D I hope @sorinr does not mind that.. How's you buddy?
Hamoud Khatar
@skhamoud
Jan 06 2017 17:39

@AlluringAditi you can do a recursive random call of a number like this

let lastNumber = -1;
let generateRandom = (arr, exception) => {
    const num = Math.floor(Math.random() * arr.length);
    return (num === exception) ? generateRandom(arr,exception) : num;    
  };

set lastNumber to the new value
and call that function with the array and the last known quote everytime you need a different but random number

Sorin Ruse
@sorinr
Jan 06 2017 17:40
@NitinNair89 i don't mind. don't worry :)
Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:40
:D
Aditi Roy
@AlluringAditi
Jan 06 2017 17:41
@NitinNair89 Thanks for your interest I appreciate that, @sorinr is already on it
CamperBot
@camperbot
Jan 06 2017 17:42
alluringaditi sends brownie points to @nitinnair89 and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
:star2: 1042 | @sorinr |http://www.freecodecamp.com/sorinr
Aditi Roy
@AlluringAditi
Jan 06 2017 17:42
:)
Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:42
:D
ok
Aditi Roy
@AlluringAditi
Jan 06 2017 17:43

@sorinr

$('main-card-content, .card-content').text(quote[0]);

What is this part for

Tony
@FreakishLancer
Jan 06 2017 17:44
Hi, is it good etiquette to ask for more examples for the tribute page codepen objective?
Sorin Ruse
@sorinr
Jan 06 2017 17:44
@AlluringAditi do not think i'm kinda guru in here. i would advise to listen always to other solutions that may be better the one i give
Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:46
@FreakishLancer Ask more examples from whom or where?
Sorin Ruse
@sorinr
Jan 06 2017 17:46
@AlluringAditi its just feeding the page with the first quote in the array having the 0 index.
Tony
@FreakishLancer
Jan 06 2017 17:46
Nitin Chandran Nair
@NitinNair89
Jan 06 2017 17:47
@FreakishLancer For that, take any subject (person, music band, etc.) and build a page for them
Sorin Ruse
@sorinr
Jan 06 2017 17:47
@AlluringAditi in other words when you open the page you would like to see a quote :)
Tony
@FreakishLancer
Jan 06 2017 17:47
Hmm, I see.
Paweł Karniej
@Karniej
Jan 06 2017 17:48
@skhamoud Thanks I managed to work everything!
CamperBot
@camperbot
Jan 06 2017 17:48
karniej sends brownie points to @skhamoud :sparkles: :thumbsup: :sparkles:
:warning: karniej already gave skhamoud points
Aditi Roy
@AlluringAditi
Jan 06 2017 17:52
@sorinr Thanks for all the help I think I can do that now
CamperBot
@camperbot
Jan 06 2017 17:52
:warning: alluringaditi already gave sorinr points
alluringaditi sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 06 2017 17:52
@AlluringAditi :+1:
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 06 2017 18:12
Anyone else get to the front end projects and then all of a sudden feel like they know nothing?
Kaz Baig
@kbaig
Jan 06 2017 18:12
@ColtenVanTussenbrook Haha yeah that's where most of the learning comes in. Which project are you on?
Hey guys, I'd appreciate some feedback on my weather app :) https://codepen.io/kbaig/full/egNJbv/
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 06 2017 18:13
I just started on the Random Quote Machine project @kbaig
Kaz Baig
@kbaig
Jan 06 2017 18:14
@ColtenVanTussenbrook Just finished that yesterday phew.
JD Tadlock
@jdtdesigns
Jan 06 2017 18:17
@kbaig You really shouldn't call the api every time they switch the degree unit. Just save the temp to a global variable and use that to switch from F to C. Requests should always be kept to a minimum when you can.
Kaz Baig
@kbaig
Jan 06 2017 18:19
@jdtdesigns I considered that but then figured it might be better to update the weather in the process. Would that be too much?
JD Tadlock
@jdtdesigns
Jan 06 2017 18:20
Weather doesn't change that frequently. Every 10 minutes would be a normal update process. @kbaig
So a switch of the degree unit shouldn't be associated with the api request.
Sorin Ruse
@sorinr
Jan 06 2017 18:21
@kbaig for me its working ok. :+1:
Kaz Baig
@kbaig
Jan 06 2017 18:22
@jdtdesigns Makes sense. I was thinking more of the use case where the page stays open for a while before switching degrees but thinking back, that's usually not going to happen. If it does, the user can just refresh
Sorin Ruse
@sorinr
Jan 06 2017 18:22
@jdtdesigns i would go for an hour change
Kaz Baig
@kbaig
Jan 06 2017 18:23
@jdtdesigns @sorinr Thanks guys
CamperBot
@camperbot
Jan 06 2017 18:23
kbaig sends brownie points to @jdtdesigns and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1043 | @sorinr |http://www.freecodecamp.com/sorinr
Karel Bofill
@scherzohradec
Jan 06 2017 18:23
hi guys!!! i'm just trying to embed an scratch project into my Personal Portfolio Webpage and i'm getting nothing!!! This is the code for embed from scratch: <iframe allowtransparency="true" width="485" height="402" src="//scratch.mit.edu/projects/embed/138375042/?autostart=false" frameborder="0" allowfullscreen></iframe>
JD Tadlock
@jdtdesigns
Jan 06 2017 18:24
@scherzohradec Can you post the link to your project?
i want to embed the scratch into one of my thumbnails from the portfolio div
Jason Luboff
@JLuboff
Jan 06 2017 18:31
I know with multiple IDs/classes I can apply the same event with jQuery for example $("#pause, #reset").click(function(){}) but is there a way to do that with $(this)?
@jdtdesigns I know you'll know the answer to this ;)
JD Tadlock
@jdtdesigns
Jan 06 2017 18:34
@scherzohradec Codepen only allows embedded iframes on PRO now i believe.
@JLuboff What are you trying to achieve?
Jason Luboff
@JLuboff
Jan 06 2017 18:36
@jdtdesigns I'm having a click event on a button, that I then want to .addClass("hidden") to two elements, one of them being the button I just clicked. I guess there's really no reason I couldn't use the ID name, but wanted to know if I could use this instead
Karel Bofill
@scherzohradec
Jan 06 2017 18:36
ah! so sad! ok, thanks anyway!!!
Rahul Yedida
@yrahul3910
Jan 06 2017 18:38
@JLuboff I've found $('selector').hide(); more convenient than using addClass('hidden')
JD Tadlock
@jdtdesigns
Jan 06 2017 18:38
@JLuboff It depends on the situation. If it's a case where you need to hide the button and the siblings or just a specific element and the button.
If the element other than the button is static and not a dynamically added element, then i'd just select it inside the click and add the class.
Jason Luboff
@JLuboff
Jan 06 2017 18:40
@yrahul3910 I'll take a look into the advantage/disadvantage of .hide versus addclass, thanks
CamperBot
@camperbot
Jan 06 2017 18:40
:cookie: 3 | @yrahul3910 |http://www.freecodecamp.com/yrahul3910
jluboff sends brownie points to @yrahul3910 :sparkles: :thumbsup: :sparkles:
Jason Luboff
@JLuboff
Jan 06 2017 18:40
@jdtdesigns Ya they're static buttons that live in the DOM, just hide or reveal based on current action
(I may not have used DOM correctly there)
JD Tadlock
@jdtdesigns
Jan 06 2017 18:46
@JLuboff Can you post the project?
Rahul Yedida
@yrahul3910
Jan 06 2017 18:47
What does the third User Story (placeholder notification if a streamer has closed their Twitch account) in the Twitch.tv project mean?
Jason Luboff
@JLuboff
Jan 06 2017 18:47
r2d2
@UsamaHameed
Jan 06 2017 18:48
@yrahul3910 Just output that the streamer has closed their account if you don't find that account :P
JD Tadlock
@jdtdesigns
Jan 06 2017 18:48
@yrahul3910 It means you need to check to channel to see if it's closed and if so, place an icon or text that tells the user the account is closed.
Sorin Ruse
@sorinr
Jan 06 2017 18:48
@yrahul3910 you just need to show the message that account is closed
Rahul Yedida
@yrahul3910
Jan 06 2017 18:49
Oh I see, does the API provide a method to check if it's closed?
JD Tadlock
@jdtdesigns
Jan 06 2017 18:50
if the api request fails on /channels it's closed or doesn't exist
Sorin Ruse
@sorinr
Jan 06 2017 18:50
@yrahul3910 not directly. you will get an error message from the api that you will have to interpret and and show the whatever you want
JD Tadlock
@jdtdesigns
Jan 06 2017 18:50
you can use .fail() with jQuery to grab the channels that are closed
Rahul Yedida
@yrahul3910
Jan 06 2017 18:51
Okay, thanks :)
JD Tadlock
@jdtdesigns
Jan 06 2017 18:51
@JLuboff Hmm, i'm guessing you're talking about the Begin Countdown btn?
Rahul Yedida
@yrahul3910
Jan 06 2017 18:51
@UsamaHameed @jdtdesigns @sorinr Okay, thanks :)
CamperBot
@camperbot
Jan 06 2017 18:51
yrahul3910 sends brownie points to @usamahameed and @jdtdesigns and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 550 | @usamahameed |http://www.freecodecamp.com/usamahameed
:star2: 1044 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 807 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Jason Luboff
@JLuboff
Jan 06 2017 18:51
@jdtdesigns specifically right now I was just playing around with it on the reset button (last code block)
shaistha
@shaistha24
Jan 06 2017 18:56
my carousel slide is not working on codepen , this is my code
<!-- carousel slide-->
<div class="container">
  <div class="row">
    <div class="col-sm-12">
<div class="carousel slide" id="my-slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#my-slide" data-slide-to="0" class="active"></li>
    <li data-target="#my-slide" data-slide-to="1" ></li>
    <li data-target="#my-slide" data-slide-to="2" ></li>
    <li data-target="#my-slide" data-slide-to="3" ></li>
    <li data-target="#my-slide" data-slide-to="4" ></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="img-responsive" src="http://www.phitany.com/images/slider/web-design-company.jpg">
      <div class="carousel-caption">WeDev</div>
    </div>
     <div class="item">
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQeTAJz8TJxSinNGFYr4xJp1lZOkukMjAoMvwOiM8DRZzlOf7xK">
       <div class="carousel-caption"><em>Take yours IDEAS ....</em></div>
    </div>
    <div class="item">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR55HhcBiiCbkDBu9M8_2ABq2M210B299NnexP8hzj2aTC3MJ5-">
<div class="carousel-caption"><em>Bring them together...</em></div>
    </div>
    <div class="item">
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTe6EURT3f18NEG9_EmGLmjLJiyv5Ggj1y9TpEedj5ZG7u7IxV7FQ">
      <div class="carousel-caption"><em>To create...</em></div>
    </div>
      <div class="item">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQo1u-1DNlVFTSBA6nEg2A4xpvk92OvZm1GV18YDhvINX4MS-GC">
      <div class="carousel-caption"><em>the most innovative and unique designs. </em></div>
    </div>  
  </div>
      </div>
    </div>
  </div>
  <!-- slide button -->
  <a class="left carousel-control" href="#my-slide" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span> 

    <a class="right carousel-control" href="#my-slide" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>

    <!-- end -->
pls tell me where did i go wrong
it shows the button on either sides but they are not working
Sorin Ruse
@sorinr
Jan 06 2017 18:58
@shaistha24 its working quite well
shaistha
@shaistha24
Jan 06 2017 18:59
hello @sorinr i wrote it on codepen and its not working there
Sorin Ruse
@sorinr
Jan 06 2017 18:59
@shaistha24 here the example
JD Tadlock
@jdtdesigns
Jan 06 2017 18:59
The ui is a little off right now. The Begin button shouldn't be separate from the others. Also, when clicking 'reset', you should just do $('#pause, #reset').addClass('hidden'); and show the Begin button.
shaistha
@shaistha24
Jan 06 2017 19:00
yah that example one is working but not on me codepen page
Sorin Ruse
@sorinr
Jan 06 2017 19:00
@shaistha24 take a look at codepen settings
shaistha
@shaistha24
Jan 06 2017 19:01
ok what should i look for . im new to code pen
Jason Luboff
@JLuboff
Jan 06 2017 19:02
@jdtdesigns Ya the UI is very immature right now. I was focusing on getting the code working first before design (usually my approach). I'll just do as you mentioned
@jdtdesigns Thanks
CamperBot
@camperbot
Jan 06 2017 19:02
:cookie: 808 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
jluboff sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 06 2017 19:02
@shaistha24 codepen settings. css/javascrprit. whath libs i have loadedv and how
shaistha
@shaistha24
Jan 06 2017 19:06
@sorinr u have cloudflare and bootstrap in css
n boostrap and jquery in javscript
for me i kept bootstrap for css
Sorin Ruse
@sorinr
Jan 06 2017 19:07
@shaistha24 i don't have any cloudfare
shaistha
@shaistha24
Jan 06 2017 19:08
my mistake its bootstap
Sorin Ruse
@sorinr
Jan 06 2017 19:09
@shaistha24 that is the cdn for loading bootstrap.css
shaistha
@shaistha24
Jan 06 2017 19:09
but u have two bootstrap coding in urs
n the second url did u add it on ur own bcoz its not showing when i add bootsrap

@sorinr even my nav bar is not working properly

<!-- Navbar--> 
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
  <script>
   body{
    background-color:lightgray;
  }
  .font-style{
    font-family:Caligrapher;
  }
 </script>
<!-- Logo -->
  <div class="navbar-header">

    <botton type="botton" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

    </botton>
    <a href="#" class="navbar-brand">WeDev</a>
    </div>
  <!-- Menu Items-->
  <div class="collapse navbar-collapse" id="navbar-collapse" >
    <ul class="nav navbar-nav ">
      <li class="active"><a href="#">Home</a></li>
      <li ><a href="#">About</a></li>
      <li ><a href="#">Portfolio</a></li>
      <li ><a href="#">FAQ</a></li>
      <li ><a href="#">Contact Us</a></li>
      </ul>
  </div>
  </div>
  </nav>
<!-- end nav-->

pls check this too

Sorin Ruse
@sorinr
Jan 06 2017 19:12
@shaistha24 maybe bootrstap.css and then jquery.js and after bootstrap.js. right?
shaistha
@shaistha24
Jan 06 2017 19:12
???
i have learn till jquery in freecodecamp n this is the project after that
i dont know much about javascript
@sorinr pls ignore the<script> part in the code and check the remaining ,pls do tell me of my mistakes
shaistha
@shaistha24
Jan 06 2017 19:22
@sorinr http://codepen.io/shaistha24/pen/GrJrXM pls check this link ,i have copied the same code for slide but is not working
see its not working !!!
pls check the settings for me
Reggie
@Reggie01
Jan 06 2017 19:24
@shaistha24 swap the jquery and bootstrap.js
bootstrap depends on jquery, so jquery should be first
shaistha
@shaistha24
Jan 06 2017 19:26
@Reggie01 thank u , its working now
CamperBot
@camperbot
Jan 06 2017 19:26
shaistha24 sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @reggie01 |http://www.freecodecamp.com/reggie01
Reggie
@Reggie01
Jan 06 2017 19:27
:smile:
pls check this
pls tell me y its not working there
@Reggie01
Sorin Ruse
@sorinr
Jan 06 2017 19:28
@shaistha24 no. you have loaded bootstrap.js before jquery.js i said :point_up: January 6, 2017 9:12 PM
shaistha
@shaistha24
Jan 06 2017 19:29
@sorinr where is bootstraop.js in the options?
due u mean in js add bootstrap n then jquery
its not working if so
Sorin Ruse
@sorinr
Jan 06 2017 19:30
@shaistha24 in codepen settings you hav3e a tab javascript
shaistha
@shaistha24
Jan 06 2017 19:30
yes
CoryCMyers
@CoryCMyers
Jan 06 2017 19:30
Does anyone know if any of the lessons go into media queries and how to incorporate them? I want to add a text element to a splash page on my tribute page saying that the site is much more landscape friendly, and if they do not move to landscape have the site reorganize it self into a stack that they can click through to see all the content, without it being too cluttered. Is that possible?
I am also trying to figure out how to have the splash page automatically resize itself for the device accessing it.
shaistha
@shaistha24
Jan 06 2017 19:32
@sorinr pls check my latest link
Reggie
@Reggie01
Jan 06 2017 19:32
@shaistha24 The site you linked looks right. The slider is working.
shaistha
@shaistha24
Jan 06 2017 19:32
the latest one
JD Tadlock
@jdtdesigns
Jan 06 2017 19:32
@CoryCMyers FCC doesn't teach you. You need to research and find other means to learn how to do most things. It just challenges you. ;)
shaistha
@shaistha24
Jan 06 2017 19:32
this one
pls help
Reggie
@Reggie01
Jan 06 2017 19:34
@shaistha24 Yes, the slider is working.
CoryCMyers
@CoryCMyers
Jan 06 2017 19:35
@jdtdesigns True, but it does a wonderful job of laying out the basics to help your brain start looking at a puzzle, then peering around a corner. I would not have been able to adapt the jQuery I found into something usable for my purpose without the basics FCC and learn.shayhowe got me used to thinking with.
I was hoping it had a starting/ju,ping off point since someone in the local FB group mentioned they thought it did, but my search of the challenge list did not return any hits.
shaistha
@shaistha24
Jan 06 2017 19:35
thank u @sorinr n @Reggie01
CamperBot
@camperbot
Jan 06 2017 19:35
shaistha24 sends brownie points to @sorinr and @reggie01 :sparkles: :thumbsup: :sparkles:
:warning: shaistha24 already gave reggie01 points
:star2: 1045 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 06 2017 19:37
@shaistha24 :+1:
BviLLeKid12
@BviLLeKid12
Jan 06 2017 20:24
What can I use to upload an image to the internet to get a link and use that link for my <img> src? I have tried imgur, but when I hit run in codepen it doesn't display the picture
Neeraj Lakhotia
@neeraj08
Jan 06 2017 20:34
@BviLLeKid12 image hosted at https location cant be accessed by an http location
try hosting image at a non secure location. lol
dont do that outside codepen though
Neeraj Lakhotia
@neeraj08
Jan 06 2017 20:51
Anyone give me some feedback on my semi-formal portfolio. Thanks.
https://codepen.io/neeraj08/full/ENEbBY/
Marko Rajkovic
@marko88ks
Jan 06 2017 21:08
Does anyone know a good link for responsive navbar gradually done (not to be bootstrap framework) i want to change stuff in nav-bar , but I want to know important thing aobut responsive : views from mobile`s .. any help will be great
Neeraj Lakhotia
@neeraj08
Jan 06 2017 21:27
Someone plz review my portfolio!!!
https://codepen.io/neeraj08/full/ENEbBY/
I will keep reposting it until someone does
lol
Charlotte Lievens
@lokedo
Jan 06 2017 21:32
@neeraj08 hi there! I think you also need a navigation bar for the assignment. I did, anyway. Other than that, looks great
Peter Phillips
@Cowboy59
Jan 06 2017 21:33
cn
alexbuster
@alexbuster
Jan 06 2017 21:33
can somebody help plz I'm at the tribute page but I can't seem to load up the picture.
I'm trying to get a picture from a facebook album
Peter Phillips
@Cowboy59
Jan 06 2017 21:34

can someone help me I am trying to do 3 boxes across in my portfolio but not working " <div class="row">
<div class="col-md-6">
<div class="thumbnail">
<p data-height="265" data-theme-id="0" data-slug-hash="rjBdoj" data-default-tab="result" data-user="cowboy59" data-embed-version="2" data-pen-title="Tribute" class="codepen">See the Pen <a href="https://codepen.io/cowboy59/pen/rjBdoj/">Tribute</a> by peter (<a href="http://codepen.io/cowboy59">@cowboy59</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 center-text">
<p data-height="265" data-theme-id="0" data-slug-hash="rjBdoj" data-default-tab="result" data-user="cowboy59" data-embed-version="2" data-pen-title="Tribute" class="codepen">See the Pen <a href="https://codepen.io/cowboy59/pen/rjBdoj/">Tribute</a> by peter (<a href="http://codepen.io/cowboy59">@cowboy59</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<p data-height="265" data-theme-id="0" data-slug-hash="rjBdoj" data-default-tab="result" data-user="cowboy59" data-embed-version="2" data-pen-title="Tribute" class="codepen">See the Pen <a href="https://codepen.io/cowboy59/pen/rjBdoj/">Tribute</a> by peter (<a href="http://codepen.io/cowboy59">@cowboy59</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>

alexbuster
@alexbuster
Jan 06 2017 21:35
<img src="https://www.facebook.com/photo.php?fbid=738500312890352&set=rpd.100001554121042&type=3&theatergjpg"> here's my code do I need a alt attriute for it to load
Neeraj Lakhotia
@neeraj08
Jan 06 2017 21:35
@lokedo thanks . I currently don't have a very long page. I'll add it when there's more stuff :). Thanks for the suggestion though
CamperBot
@camperbot
Jan 06 2017 21:35
:cookie: 283 | @lokedo |http://www.freecodecamp.com/lokedo
neeraj08 sends brownie points to @lokedo :sparkles: :thumbsup: :sparkles:
Charlotte Lievens
@lokedo
Jan 06 2017 21:36
@alexbuster you need a url, fb isn't going to work. Download the pic on your pc and through Pinterest you can make a url for this pic, after which you can post it <img src="">
alexbuster
@alexbuster
Jan 06 2017 21:37
one is on my computer that's where i run intro trouble the picture is on my computer but i don't know how to access it from my download file.
Charlotte Lievens
@lokedo
Jan 06 2017 21:39
@Cowboy59 try to put the col-md- in just one div element with class row. Now you make for each col-md- a <div class="row"></div>
Peter Phillips
@Cowboy59
Jan 06 2017 21:40
ok I will try
Charlotte Lievens
@lokedo
Jan 06 2017 21:40
@alexbuster mac or pc?
alexbuster
@alexbuster
Jan 06 2017 21:41
is it <img src"HBSB jpg">
pc
Charlotte Lievens
@lokedo
Jan 06 2017 21:41
@alexbuster you need a http
alexbuster
@alexbuster
Jan 06 2017 21:41
it a pc
Charlotte Lievens
@lokedo
Jan 06 2017 21:41
@alexbuster ok! wait a min
alexbuster
@alexbuster
Jan 06 2017 21:42
I still have to write http://
I just would like to know how to extract a picture from my pc files.
Charlotte Lievens
@lokedo
Jan 06 2017 21:45
@alexbuster don't know that, sorry -- I think you will have to make a link for your pic
alexbuster
@alexbuster
Jan 06 2017 21:46
Ok thaks for your help Charlotte.
JD Tadlock
@jdtdesigns
Jan 06 2017 21:46
@marko88ks I can create a responsive navbar on jsbin and you can watch to see how it's done. It'll take about 5 minutes. ;)
Charlotte Lievens
@lokedo
Jan 06 2017 21:48

I'm working on the Random Quote Machine challenge and I'm a bit stuck. Could anyone say what my next move has to be with JavaScript and bringing in the API?

https://codepen.io/Lokedo/pen/qRBpPK?editors=0010

JD Tadlock
@jdtdesigns
Jan 06 2017 21:51
@lokedo First thing is to load the codepen from http. Right now you're on https which won't work when requesting data through http (change https://codepen.io.... to http://codepen.io...). Second add jQuery by going to Settings->JS->Quick Add->jQuery. That should get you going. ;)
Charlotte Lievens
@lokedo
Jan 06 2017 21:51
@jdtdesigns thanks!!
CamperBot
@camperbot
Jan 06 2017 21:51
lokedo sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 809 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 06 2017 21:54
Do the second thing too. @lokedo
Charlotte Lievens
@lokedo
Jan 06 2017 21:55
@jdtdesigns I just did. Hate to ask, what's next?
JD Tadlock
@jdtdesigns
Jan 06 2017 21:55
@lokedo Did you copy/paste the code in the js panel?
Charlotte Lievens
@lokedo
Jan 06 2017 21:56
@jdtdesigns do you mean on Codepen? - I did.
Or which panel are we talking about?
JD Tadlock
@jdtdesigns
Jan 06 2017 21:57
On codepen. I'd recommend taking a tutorial/course on basic javascript/jquery. It will make your life much easier when you understand the basics. ;)
Charlotte Lievens
@lokedo
Jan 06 2017 21:59
@jdtdesigns thanks
CamperBot
@camperbot
Jan 06 2017 21:59
lokedo sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: lokedo already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 06 2017 22:01
@lokedo Welcome
Hello911
@Hello911
Jan 06 2017 22:02
can someone help me figure out how to vertical center the word "Welcome!"?
http://codepen.io/Hello911/pen/VPLbRw
Tom Stoddart
@wobytides
Jan 06 2017 22:06
@Hello911 try adding display: table; to your CSS for .box
Sabrina Ferguson
@itsacoyote
Jan 06 2017 22:08
@Hello911 add
html, body {
    height: 100%;
}
JD Tadlock
@jdtdesigns
Jan 06 2017 22:09
@Hello911
body, html {
  height: 100%;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
Hello911
@Hello911
Jan 06 2017 22:10

@jdtdesigns body{
height: 100%;
}

.box{
display: flex;
align-items: center;
justify-content: center;
height: 100%
}

.item{
max-width:50%;
vertical-align: middle;

}

not working
JD Tadlock
@jdtdesigns
Jan 06 2017 22:10
Take the .item styles away
@Hello911
all you need is what i gave you
Hello911
@Hello911
Jan 06 2017 22:12
@jdtdesigns THat works
but why body, html instead of just body?
JD Tadlock
@jdtdesigns
Jan 06 2017 22:13
it's typical practice to set html and body due to overlap issues
Hello911
@Hello911
Jan 06 2017 22:13
but just body wont work
JD Tadlock
@jdtdesigns
Jan 06 2017 22:14
Like i said :)
Hello911
@Hello911
Jan 06 2017 22:14
so that there is something else that overlap/override
?
JD Tadlock
@jdtdesigns
Jan 06 2017 22:14
<html></html> is an html element
it takes up space in the DOM
so if you set <body> to height: 100% and the html has no content, it won't fill the page.
that's why you need to set both when there is no content in the document
Hello911
@Hello911
Jan 06 2017 22:17
but there is content in the document. It is the word "welcome!"
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 06 2017 22:17
@Hello911 There's not enough content to fill the height of the browser window.
Hello911
@Hello911
Jan 06 2017 22:17
ok
JD Tadlock
@jdtdesigns
Jan 06 2017 22:17
So you have to manually set the elements to be the height of the window.
Hello911
@Hello911
Jan 06 2017 22:18
in order for justify-content: center; to work?
@jdtdesigns
??
JD Tadlock
@jdtdesigns
Jan 06 2017 22:19
In order to center one element on the page using align-items and justify-content. @Hello911
justify-content aligns items on the x-axis and align-items on y-axis
Hello911
@Hello911
Jan 06 2017 22:20
@jdtdesigns ok. I got it. Thank you.
CamperBot
@camperbot
Jan 06 2017 22:20
hello911 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 810 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Hello911
@Hello911
Jan 06 2017 22:21
@jdtdesigns Hope you don't get annoyed by my questions. Many people in the other chatrooms got tired of my questions. So I gotta come here at last.
It is not like I am too lazy to do research.
at least 4 times.
JD Tadlock
@jdtdesigns
Jan 06 2017 22:22
@Hello911 No worries. Just write down what you learn, so you can reference it later on. ;)
Hello911
@Hello911
Jan 06 2017 22:23
So u actually take notes?
I thought as you use it more it turns into muscle memory
But I have only been coding for 2 months, or less. So I don't know how professional coders do things.
Adam Morris
@Adam-Morris
Jan 06 2017 22:24
I have just got onto this challenge (https://www.freecodecamp.com/challenges/build-a-tribute-page) but I am very confused what it would like me to do. Does it just want me to remake the tribute page?
JD Tadlock
@jdtdesigns
Jan 06 2017 22:24
@Hello911 Of course I take notes. I don't have a photographic memory lol. The more you do it over and over the more it sticks. But we all need to refresh sometimes.
@Adam-Morris Exactly
Adam Morris
@Adam-Morris
Jan 06 2017 22:25
Oh, ok thank you,
Hello911
@Hello911
Jan 06 2017 22:25
@jdtdesigns Ok I will take notes. thank u for the advice.
CamperBot
@camperbot
Jan 06 2017 22:25
:warning: hello911 already gave jdtdesigns points
hello911 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
Tom Stoddart
@wobytides
Jan 06 2017 22:37
I’m really struggling to complete the local weather challenge on CodePen because of cross origin scripting rules… It’s working locally but I’m trying to use FreeCodeCamp/FreeCodeCamp#10341 to get it to work on CodePen. Do I seriously have to use JSONP to complete this challenge on CodePen?
Arjun Rajan
@Arjun125
Jan 06 2017 22:39
Hey i am tring to set semantic ui with laravel but nothing seems to work with the js part
can anyone please help me out
the css seems to work fine but the js part doesnt work at all
I ve been stuck on it from days.... :worried: Someone please help me
Thomas Nguyen
@todadqa
Jan 06 2017 22:44
ok so i have been trying with a few chats to sort out this problem.... On my tribute page i chose to be extra complicated and pick a picture which isnt the width of the page. This means that in my bootstrap thumbnail div, if the width is set to 100%, there are giant white borders on either side of the picture in the thumbnail div because the picture doesnt fit the div. I could resize the image but if i do so, the image is pixelated so really i just want the thumbnail div to technically become responsive and fit the picture. https://codepen.io/todadqa/pen/NdPNvj/
brycemcdonald86
@brycemcdonald86
Jan 06 2017 22:57
On the Twitch api challenge, I am iterating through an array of streamer names to update my page, using a for loop. For some reason it is refusing to iterate past the first time :/ http://codepen.io/brycemcdonald86/pen/qRBERK
Reggie
@Reggie01
Jan 06 2017 22:58
@todadqa Remove thumbnail and thumbnailwidth class from div surrounding the image. Then center the img look for subtitle centering a block or image. No need to apply a width like example shows. You also can apply the styling from the example on img element.
img {
  element: property
}
Thomas Nguyen
@todadqa
Jan 06 2017 22:59
@Reggie01 would this mean no bootstrap thumbnail then :(
Reggie
@Reggie01
Jan 06 2017 23:01
@todadqa you could override the bootstrap and remove the background-color from thumbnail
@todadqa
.thumbnail {
  background-color: initial;
}
Pieter Stokkink
@forkerino
Jan 06 2017 23:04
@brycemcdonald86 You don't update the x variable in your else statement inside the .getJSON ---> infinite loop.
brycemcdonald86
@brycemcdonald86
Jan 06 2017 23:07
@forkerino Thanks a ton! rookie mistake lol
CamperBot
@camperbot
Jan 06 2017 23:07
brycemcdonald86 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Jan 06 2017 23:08
:+1:
uriznik
@uriznik
Jan 06 2017 23:10
@brycemcdonald86 your .label line is outside the json callback function and causes an error when it references data
Robert
@SovereignRob1
Jan 06 2017 23:10
gheh. something happened and codepen reverted to a previous save i had. lost two days of work.
Michael Davis
@mhdavis
Jan 06 2017 23:10
Hey can someone help me out with something super simple: I'm trying to link my html with bootstrap by hosting bootstrap myself and pushing all that stuff onto a github repo
brycemcdonald86
@brycemcdonald86
Jan 06 2017 23:11
@uriznik Good catch also, thanks
CamperBot
@camperbot
Jan 06 2017 23:11
brycemcdonald86 sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @uriznik |http://www.freecodecamp.com/uriznik
Adam Morris
@Adam-Morris
Jan 06 2017 23:12
I'm completing the "Build a person portfolio webpage" challenge, and I want to get two buttons (that are using bootstrap) in the center, how would I do that? Here is my pen: http://codepen.io/Amorris/pen/KapqZG
brycemcdonald86
@brycemcdonald86
Jan 06 2017 23:20
<div class="buttons">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"><button class="btn btn-primary btn-block">Hi</button></div>
    <div class="col-md-1"><button class="btn btn-primary btn-block">Hello</button></div>
  </div>
</div>
@Adam-Morris I suck at boostrap, and wouldn't use it myself in this instance, but this is what i did, and it worked
Pieter Stokkink
@forkerino
Jan 06 2017 23:23
@brycemcdonald86 you can use an offset to skip columns: col-md-offset-5 in your example.
You'd use it on your first button.
Adam Morris
@Adam-Morris
Jan 06 2017 23:25
@brycemcdonald86 Nick hack! Thanks!
CamperBot
@camperbot
Jan 06 2017 23:25
:cookie: 296 | @brycemcdonald86 |http://www.freecodecamp.com/brycemcdonald86
adam-morris sends brownie points to @brycemcdonald86 :sparkles: :thumbsup: :sparkles:
Adam Morris
@Adam-Morris
Jan 06 2017 23:32
I am trying to add another button now, but I can't get it centered with 3 buttons :worried: Is there a way I could have an offset of 4.5? :question:
Sander Berntsen
@sbxn14
Jan 06 2017 23:35
hey I just inserted 3 divs that I wanna use as sections in my portfolio but there are like thick white lines between them. how do I get rid of those? http://codepen.io/sbxn14/pen/egmKRr
Adam Morris
@Adam-Morris
Jan 06 2017 23:38
add a margin of a negative value to your div's
div.contactme { min-height: 800px; background-color: crimson; margin: -100px; }
Sander Berntsen
@sbxn14
Jan 06 2017 23:40
ah thanks :D
taht fixed it
just a simple -20px on top margin and its all good
thanks ! @Adam-Morris
CamperBot
@camperbot
Jan 06 2017 23:40
:cookie: 120 | @adam-morris |http://www.freecodecamp.com/adam-morris
sbxn14 sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles: