These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Dec 2016
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:00
https://github.com/reporobot <-- this cat is not doing anything :(
alpox
@alpox
Dec 13 2016 00:01
@neeraj08 Also, please initialize the variable data before you use it:
var data = val;
@neeraj08 And finally, the method you were looking for is not $(document).load(loadStuff);
But: $(document).ready(loadStuff);
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:05
@alpox i was using ready() initially but it didnt load quote on page load. so was trying .load()
Lindsay Anchors
@nzey
Dec 13 2016 00:05
Hi all! I am working on my portfolio page and have a navbar superficially set up but I can't figure out how to make the links actually take me to different pages.
alpox
@alpox
Dec 13 2016 00:05
@neeraj08 Okay :-) then your issue was mainly with the position of where you set your quote
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:08
@alpox my code was working in the evening and now its shit!
JSON call is stuck
alpox
@alpox
Dec 13 2016 00:08
@nzey The links are usually simple web-links (relative or absolute). You will want relative links. If you want to link to the same page, create anchors (That is an arbitrary html element with a name set on it) and refer to them with href="#test". This would go to the place on the website which has the name test:
<div name="test">...</div> as example
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:08
console.log() inside never get executed
alpox
@alpox
Dec 13 2016 00:08
@neeraj08 Whats your state
@neeraj08 You didn't change to .ready yet
Should work with it
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:09
nopes.still not working
alpox
@alpox
Dec 13 2016 00:09
@neeraj08 Ah right, forgot to tell :D thats bit stupid
Access codepen from http instead of https
just take away the s from your url
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:10
lollllllll works
alpox
@alpox
Dec 13 2016 00:10
@neeraj08 Yup
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:10
haha
and i though all was gone
alpox
@alpox
Dec 13 2016 00:10
@neeraj08 I guess you're using a chromium based browser
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:11
Mozilla on Ubuntu 16.04
alpox
@alpox
Dec 13 2016 00:11
Oh okay. Well i think they do that too...
If you access a website through https, you are not allowed to load data from unsecure websites
So an ajax call to http (without s) fails
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:12
makes sense
alpox
@alpox
Dec 13 2016 00:12
Yea
Lindsay Anchors
@nzey
Dec 13 2016 00:18
@alpox Thanks! Why 'name' not 'id'. I don't think I've used 'name' before
CamperBot
@camperbot
Dec 13 2016 00:18
nzey sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @alpox |http://www.freecodecamp.com/alpox
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:20
https://www.freecodecamp.com/challenges/manage-packages-with-npm <-- I was doing this without even learning it ....
good to see there is spoonfeeding :p
alpox
@alpox
Dec 13 2016 00:22
@nzey I guess you can also use id instead of name and it should have the same effect
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:22
I am loving my new avatar always wanted an anime avatar... am I too old to use anime avatar ?
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:23
@alpox your portfolio shows me plain text O.o
alpox
@alpox
Dec 13 2016 00:23
@nzey Here is an exact description of the algorithm used to determine the element through the #foo where foo is refered to as fragid:
For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

Parse the URL, and let fragid be the <fragment> component of the URL.
If fragid is the empty string, then the indicated part of the document is the top of the document.
If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:24
ouch @alpox that will give me netsplit here
so many edits
alpox
@alpox
Dec 13 2016 00:24
@neeraj08 Oh don't know what happened there :D
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:24
lol fix it
alpox
@alpox
Dec 13 2016 00:24
@Mr-Kumar-Abhishek Lol :D sry there, but i didn't find a good way to present that :D
Jack Lyons
@JackEdwardLyons
Dec 13 2016 00:24
@JackEdwardLyons
heyguys, i finally got my tic tac toe working to a semi decent level, a few changes to be made... plus i will need to implement the minimax at some point (but as I'm aware that isn't part of the user stories)... any way, i would love some feedback :)
https://gomix.com/#!/project/joyous-bobcat
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:25
and your quote m/c shows a video
Coy Sanders
@coymeetsworld
Dec 13 2016 00:26
yes the requirement to make the game unbeatable is no longer required @JackEdwardLyons
alpox
@alpox
Dec 13 2016 00:26
@neeraj08 Weird. It seems that its not a problem with my code, but with codepen which doesn't want to notice the preprocessors
Casey Heath
@ExhibitArts
Dec 13 2016 00:26
Would it be possible to create a web app that will read a url and give you the timestamp of the webpage?
Neeraj Lakhotia
@neeraj08
Dec 13 2016 00:27
O.o @alpox
Coy Sanders
@coymeetsworld
Dec 13 2016 00:27
im sure its possible yeah @ExhibitArts
Daniel
@profoundhub
Dec 13 2016 00:27
@Mr-Kumar-Abhishek you create a different ssh key
Coy Sanders
@coymeetsworld
Dec 13 2016 00:27
if the webpage is world readable which it would have to be to access it
Jack Lyons
@JackEdwardLyons
Dec 13 2016 00:27
cool @coymeetsworld that makes it easy then :)
Daniel
@profoundhub
Dec 13 2016 00:27
@Mr-Kumar-Abhishek for each computer you are on
Jack Lyons
@JackEdwardLyons
Dec 13 2016 00:27
any feedback would be awesome !!
Coy Sanders
@coymeetsworld
Dec 13 2016 00:27
yeah, but if you want to learn about minimax it is pretty interesting
alpox
@alpox
Dec 13 2016 00:28
@neeraj08 I use CoffeeScript instead of javascript and Jade templates instead of html
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:28
@profoundhub i do so ?
alpox
@alpox
Dec 13 2016 00:28
Seems codepen has a problem to load it atm
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:28
@profoundhub i already do so ?
Casey Heath
@ExhibitArts
Dec 13 2016 00:28
Like, if you wanted to confirm the date and time of a published article?
Daniel
@profoundhub
Dec 13 2016 00:28
@Mr-Kumar-Abhishek of course, lol
use another email to create another ssh key, don't use the same one on Heroku either!
stay safe @Mr-Kumar-Abhishek
Casey Heath
@ExhibitArts
Dec 13 2016 00:30
I feel like something like a timestamp reader would be useful to those who do online research for school and such.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:30
@profoundhub lol why the heck I will use same ssh keys in different platforms / systems
Coy Sanders
@coymeetsworld
Dec 13 2016 00:31
website publish date and the article date could be different @ExhibitArts
Casey Heath
@ExhibitArts
Dec 13 2016 00:32
but I mean for a specific url.
Coy Sanders
@coymeetsworld
Dec 13 2016 00:32
what if like a news site changes a logo or a header or something?
but no change to the actual content?
Casey Heath
@ExhibitArts
Dec 13 2016 00:32
That's true.
The only way I can see this happening is if you create a work around.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:36
ahh... backend was my calling all along ^_^
darn ... I could only live in a console ~
:(
Coy Sanders
@coymeetsworld
Dec 13 2016 00:38
if you are using a legitimate publication @ExhibitArts odds are you should just go with what they are saying is the publish date
is it a concern where those dates may be wrong?
Casey Heath
@ExhibitArts
Dec 13 2016 00:39
No, but in certain situations I felt a need for something like this.
It was mostly when I was investigating something online.
And I was using a certain timeframe in my investigation.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:42
that is heavy page though
Casey Heath
@ExhibitArts
Dec 13 2016 00:42
So a confirmation would be necessary in that case.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:44
@ExhibitArts media websites change their content I have seen it
@ExhibitArts of the published articles if there is someone who might sue them
Casey Heath
@ExhibitArts
Dec 13 2016 00:44
oh.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:45
@ExhibitArts cuz I going to sue for something.. but before we could extract the article and save it , it was changed
@ExhibitArts regarding calling GNU and terrorist organisation ...can you believe that ??
Johnnie
@Johnnie843
Dec 13 2016 00:46
Im having a problem getting a box to sit at the bottom of the page. Any help?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:47
@ExhibitArts and all the hackers of GNU were called terrorists :(
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:47
your half linux is from GNU
how could someone publish such articles
Coy Sanders
@coymeetsworld
Dec 13 2016 00:47
don't believe that is something you can sue for @Mr-Kumar-Abhishek
thats the worst thing you read on the internet? open source contributers being called terrorists? lol.....
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:48
@coymeetsworld defamation ~ you could sue
@coymeetsworld i have read worst things but this was a main stream media site
Coy Sanders
@coymeetsworld
Dec 13 2016 00:49
good luck with that :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 00:49
@coymeetsworld not the dark web ~
@coymeetsworld I actually gave run for their money if it counts :p
@coymeetsworld I actually gave them run for their money if it counts :p
but lastly only the reporter get fired :( who wrote the article
editor was responsible too you know ~
well the point is ... articles do change ~ written by media websites
alpox
@alpox
Dec 13 2016 00:53
@neeraj08 No idea what exactly happened, but the identations were messed up...
http://codepen.io/alpox/full/KzKXjN/
Works again.
One link is broken though. i took it out
But this was only a short test anyway, i didn't make this portfolio to be any complete or whatever professional
Aida Woldegiorgis
@aow003
Dec 13 2016 01:04
The icon is not displaying
<li class="pull-right"> 
<a href= "https://www.freecodecamp.com/aow003">
    <i class="fa fa-free-code-camp"></i>
  FreeCodeCamp
  </a>
</li>
can someone check to see how i can display the free code camp icon
Daniel
@profoundhub
Dec 13 2016 01:05
@Mr-Kumar-Abhishek of course, if you are paranoid, just create a new SSH for each computer and cloud coding platform
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 01:06
@profoundhub I keep the email same ssh key different , pgp /gpg key same
different ... as in new key for every platform or computer
i don't think that is paranoid in any sense ~
Daniel
@profoundhub
Dec 13 2016 01:08
Hahaha it's up to you, I have several keys myself. @Mr-Kumar-Abhishek
Evan Kalvis
@evan17gr
Dec 13 2016 01:10
Are u using bootstrap?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 01:10
@profoundhub you could just block access to any computer if it compromised from your account if you keep different ssh key for every system / platform
@profoundhub you could just block access to any computer if it is compromised, from your account if you keep different ssh key for every system / platform
@aow003 have you imported the font awsome file
?
Aida Woldegiorgis
@aow003
Dec 13 2016 01:13
oh no let me go to the site and see how I can do that
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 01:14
@aow003 use a cdn
Aida Woldegiorgis
@aow003
Dec 13 2016 01:14
what is a cdn?
@Mr-Kumar-Abhishek
@aow003 add this link in your codepen settings (css section )
CSims20
@CSims20
Dec 13 2016 02:56
Hi Everyone! I'm currently in the middle of creating my portfolio. I have the bare bones of it all but have now decided to just create multiple web pages and then link them together. How do I do this in codepen without going back and forth? Does that make sense? Is it even possible?
Okay nvm. I think I just figured it out
Janina Pohorecki
@janepohorecka
Dec 13 2016 03:27
Hey guys! So I have completed about 100 hours worth of FCC front end curriculum. I want to complete the whole front end by April 1st. For those of you that hold the front end certificate, what is the best way to pace myself? Set deadlines for each project?
Gil Pabilona
@gilpabilona
Dec 13 2016 03:58
How to start my portfolio Webpage?.
Ken Haduch
@khaduch
Dec 13 2016 04:23
@CSims20 - you should look up how to do "tabbed" pages in a browser - maybe that would be similar to the idea that you want to implement?
Tom
@moT01
Dec 13 2016 04:27
@janepohorecka i havent completed it, but i've been bouncing around a bunch, ...after i did three api projects in a row i was in the mood for some algorithms
Scott Miller
@smiller171
Dec 13 2016 04:52
@CSims20 The portfolio user stories require that you be able to scroll through all the content.
Robert Laukhuff
@laukcoder
Dec 13 2016 05:16
Does anyone care to explain how they go about designing a page layout? What is your process for designing the look and feel of a web page. I'm working on some projects and I'm looking for some tips for good design.
kevinman003
@kevinman003
Dec 13 2016 05:17
Hi I'm pretty new to FCC and I approached the first challenge of a tribute page. I was wondering what else could I add to my page: http://codepen.io/kevinman003/pen/eBLoqQ
Robert Laukhuff
@laukcoder
Dec 13 2016 05:20
Very inspiring. Just a few seconds on your tribute page and I have come to terms with life and felt an existential peace
Aida Woldegiorgis
@aow003
Dec 13 2016 05:50
How can i get a smooth scroll effect going so that my navigation buttons don't just send me directly to the section on the website
Robert Laukhuff
@laukcoder
Dec 13 2016 06:47
@aow003 You'll need to use javascript or jQuery for that. I don't know if you've gone through that section on FreeCodeCamp yet, but it would be a good idea to do that and then come back to this project and update it to do what you want
Sidhar
@Sidhar03
Dec 13 2016 07:40
hello, I am currently stuck at building a portfolio for myself. Can anyone please explain how to expand the background image so that it fits the entire screen instead of repeating itself? Thank you
Coy Sanders
@coymeetsworld
Dec 13 2016 07:44
@janepohorecka best thing to do is try and code consistently even if its just for 30 mins a day
if you take even a week or two off it can throw off your rhythm when you're learning and it'll take you even longer to finish
@Sidhar03 have you tried googling for your answer?
here is my work.
18495
@18495
Dec 13 2016 07:58
Hi there any one can you help me ?
in project build a tribute page the image is not show in page
18495
@18495
Dec 13 2016 08:09
image is not showing in html
Francois van Leersum
@Blockshot12
Dec 13 2016 08:16
@18495 Need a little bit more info (:
18495
@18495
Dec 13 2016 08:21
@Blockshot12 i used a dropbox link but image is not showing in html
Francois van Leersum
@Blockshot12
Dec 13 2016 08:25
@18495 You need to change the shared link to the file actual file link. This article discribes the steps: https://ryanmo.co/2013/11/03/dropboxsharedlinks/
18495
@18495
Dec 13 2016 08:31
@Blockshot12 great it work thank you so much
CamperBot
@camperbot
Dec 13 2016 08:31
:cookie: 99 | @blockshot12 |http://www.freecodecamp.com/blockshot12
18495 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
Omar Ashraf
@Oaik
Dec 13 2016 09:20
Hello guys
i am in Show the Local Weather
Charan Teja
@charan1922
Dec 13 2016 09:39
whats my mistake
Clyde Lobo
@oppiniated
Dec 13 2016 10:07
?
Francois van Leersum
@Blockshot12
Dec 13 2016 10:07
???
Joel
@okmarq
Dec 13 2016 10:18
where do i get quotes to build a quote machine?
kirbyedy
@kirbyedy
Dec 13 2016 10:34
@okmarq search the internet for famous quotes
or use the api
Omar Ashraf
@Oaik
Dec 13 2016 10:47
guys
help me please
CamperBot
@camperbot
Dec 13 2016 10:47
no wiki entry for: me please
Omar Ashraf
@Oaik
Dec 13 2016 10:47
i got the ip from ip api
but now i want to get the weather for this ip
Jack Lyons
@JackEdwardLyons
Dec 13 2016 10:49
Hey guys does anyone know if you can look up past saves in HyperDev?
kirbyedy
@kirbyedy
Dec 13 2016 10:52
@Oaik your api should have documentation about how to use it
alternatively you can post your pen link here so we can see what is the problem
Omar Ashraf
@Oaik
Dec 13 2016 10:58
okay i will do
@kirbyedy i think that i can't use the api of the weather
kirbyedy
@kirbyedy
Dec 13 2016 11:02
you have to think of the way how to use the city you got from ip api and pass it on to the weather api in order to read weather forecast for it
Omar Ashraf
@Oaik
Dec 13 2016 11:03
i got the city but i can't use the weather
i don't know how
@kirbyedy thanks for your help anyway
CamperBot
@camperbot
Dec 13 2016 11:07
oaik sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1651 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Omar Ashraf
@Oaik
Dec 13 2016 11:07
i can' pass the chanallge
kirbyedy
@kirbyedy
Dec 13 2016 11:07
http://api.openweathermap.org/data/2.5/weather?q="+ city+"&callback=test&APPID=e831b5a1901c8ea3bb14c060f8b98e54"
should be something like this
where your city is actually the city you get from the ip api call
think of the way how to pass it on
Omar Ashraf
@Oaik
Dec 13 2016 11:08
where to put this url
in $.getJSON?
Blaise
@Blaisebev
Dec 13 2016 11:11
Hi guys! I am working on the portfolio page and would like to include the tribute page that was required. I am having difficulty adding the tribute page. Any tips?
Omar Ashraf
@Oaik
Dec 13 2016 11:13
Well done! i looked at the provided code and didn't understand any thing
Silvietta
@Ayvlis
Dec 13 2016 11:22
@Blaisebev I would just screenshot the page and add it as a link-image
but you should have somewhere on the web where to host the image
Blaise
@Blaisebev
Dec 13 2016 11:24
ok, thanks for the tip! @Ayvlis
CamperBot
@camperbot
Dec 13 2016 11:24
blaisebev sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 29 | @ayvlis |http://www.freecodecamp.com/ayvlis
Sorin Ruse
@sorinr
Dec 13 2016 11:29
@Blaisebev you may also consider embedding your tribute page into the portfolio. you can readmore on that here: https://blog.codepen.io/documentation/features/embedded-pens/
Silvietta
@Ayvlis
Dec 13 2016 11:29
@Blaisebev otherwise you can "embed" it with this notation: [[[https://codepen.io/yourusername/pen/pencode/]]]
Silvietta
@Ayvlis
Dec 13 2016 11:34
definitely @sorinr 's way is better :laughing: ty
CamperBot
@camperbot
Dec 13 2016 11:34
ayvlis sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 939 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 13 2016 11:34
@Ayvlis welcome
Simon Cordova
@gbsimon87
Dec 13 2016 11:45

I've got a single website, with a form, somewhat like this...

<html>

<section id="1"></section>
    <a href="" class="firstStyle">

<section id="2"></section>
    <a href="" class="secondStyle">

<section id="3"></section>

</html>

Basically it has a form, so the user finishes part of the form on section one, then clicks next, and is taken to section 2, which still is the same website...
I basically need to track when it switches from section to section. Basically I want to add new styles to the second link, but it has the same selector path.
Any ideas?

Ayobami
@purpose50
Dec 13 2016 11:49
Hi guys, thanks for the review yesterday and today, i made some changes. here is it: http://codepen.io/purpose/full/MbqgeR
any comment will be appreciated
Silvietta
@Ayvlis
Dec 13 2016 11:51
@purpose50 i really like it! Maybe the font is not that readable to use in paragraphs
Blaise
@Blaisebev
Dec 13 2016 11:51
@sorinr @Ayvlis awesome thanks!
CamperBot
@camperbot
Dec 13 2016 11:51
blaisebev sends brownie points to @sorinr and @ayvlis :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave ayvlis points
:cookie: 940 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 13 2016 11:52
@Blaisebev welcome
Silvietta
@Ayvlis
Dec 13 2016 11:52
:-)
Sorin Ruse
@sorinr
Dec 13 2016 11:55
@gbsimon87 so its more like an wizard form. i suppose your selector for the next section is the <a> tag. so if you have different classes for each section <a> tags whats the problem in styling them?
Simon Cordova
@gbsimon87
Dec 13 2016 11:56

Hey @sorinr !

There aren't currently different classes, I just want to add classes to my links but only when on section 2

Ayobami
@purpose50
Dec 13 2016 11:57
@Ayvlis thnak you very much. your point is noted :smile:
Simon Cordova
@gbsimon87
Dec 13 2016 11:57

I was thinking doing something like...

function divideSections(){
 $(".steps > section:nth-child(1)").attr('id', 'step01');
 $(".steps > section:nth-child(2)").attr('id', 'step02');
 $(".steps > section:nth-child(3)").attr('id', 'step03');
} 
divideSections();

This way it could be easier to target the links themselves without having to worry about the state of the form, is this viable?

Sorin Ruse
@sorinr
Dec 13 2016 11:58

@gbsimon87 your code is `

<section id="2"></section>
<a href="" class="secondStyle">so the class="secondStyle" its particular only to section 2

Simon Cordova
@gbsimon87
Dec 13 2016 11:59
sorry no...
I'd like to add "secondStyle"
they both currently have the same style
Sorin Ruse
@sorinr
Dec 13 2016 11:59
@gbsimon87 is there a conditional to add that class?
@gbsimon87 then you can use the jquerry addClass("secondStyle") to the element you want
Simon Cordova
@gbsimon87
Dec 13 2016 12:01
I was thinking...
if ( #step02).hasClass(current) {
      $("a").addClass("myClass");
}
Sorin Ruse
@sorinr
Dec 13 2016 12:03
@gbsimon87 here you have a problem: if ( #step02).hasClass(current) its wrong syntax. it should be like if ($("#step2").hasClass(current)) {logic in here}
Sorin Ruse
@sorinr
Dec 13 2016 12:08
@gbsimon87 but be aware that $("a").addClass("myClass"); will add "myClass" to each and every <a> tag not only to the one inside section 2
Simon Cordova
@gbsimon87
Dec 13 2016 12:08
for sure
thanks @sorinr
CamperBot
@camperbot
Dec 13 2016 12:08
gbsimon87 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 941 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 13 2016 12:09
@gbsimon87 welcome
Stein Gee
@Stiino0
Dec 13 2016 12:23
Hi guys! I'm doing the build a random quote machine challenge right now and I was wondering... what would be the best way to approach this? First design and then build functionality? Or might it be easier to first get it to work and then style it with whatever?
kirbyedy
@kirbyedy
Dec 13 2016 12:25
@Stiino0 I would start with functionality
Sorin Ruse
@sorinr
Dec 13 2016 12:32
@Stiino0 i would make a rough layout design even with no styling then add the functionality and then just style my layout
Stein Gee
@Stiino0
Dec 13 2016 12:34
Thx @kirbyedy & @sorinr . That's what I had in mind also. What would be the reason of this choice? To make sure you aren't distracted by classes, extra lines of html/css code?
CamperBot
@camperbot
Dec 13 2016 12:34
stiino0 sends brownie points to @kirbyedy and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 942 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1653 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sorin Ruse
@sorinr
Dec 13 2016 12:36
@Stiino0 making a rough layout will help you test your functionality. if everything its ok then you just go for styling
Stein Gee
@Stiino0
Dec 13 2016 12:36
Great. I will!
Thanks guys
Sorin Ruse
@sorinr
Dec 13 2016 12:38
welcome
kirbyedy
@kirbyedy
Dec 13 2016 13:26
I have a very strange problem, animate with jquery does not work when I work locally on my computer and testing it, once I put it on codepen it works
Clyde Lobo
@oppiniated
Dec 13 2016 13:43
@kirbyedy do you have the jquery library included locally?
kirbyedy
@kirbyedy
Dec 13 2016 13:44
of course
I tried with jquery locally and also linked to cdn
same thing
Clyde Lobo
@oppiniated
Dec 13 2016 13:46
what's the URL in your browser for local code?
kirbyedy
@kirbyedy
Dec 13 2016 14:02
file:///Users/_user/Desktop/Project%20Files/index.html
Marianissimus
@Marianissimus
Dec 13 2016 14:05
@kirbyedy that's your local url, won't help you with anything
kirbyedy
@kirbyedy
Dec 13 2016 14:08
@Marianissimus did you read the previous conversation or you just write to write something? :D
Tyler Moeller
@TylerMoeller
Dec 13 2016 14:14
@kirbyedy Any errors in the console? Do other jQuery methods work aside from .animate()?
kirbyedy
@kirbyedy
Dec 13 2016 14:17
nope, empty console
Clyde Lobo
@oppiniated
Dec 13 2016 14:17
@kirbyedy That's the problem, ajax don't work using the file protocol and hence jquery does not work. Use a local server
kirbyedy
@kirbyedy
Dec 13 2016 14:17
thats the only jquery method I use
great, what should I do now ?
Tyler Moeller
@TylerMoeller
Dec 13 2016 14:18
Try another jQuery method to isolate the issue
Clyde Lobo
@oppiniated
Dec 13 2016 14:18
@TylerMoeller It's not an issue with jquery
kirbyedy
@kirbyedy
Dec 13 2016 14:18
never installed a local server, dont know that
@kirbyedy What os are you on?
Tyler Moeller
@TylerMoeller
Dec 13 2016 14:19
I have .animate() working fine via file:/// with an external JS @oppiniated
kirbyedy
@kirbyedy
Dec 13 2016 14:20
osx
Clyde Lobo
@oppiniated
Dec 13 2016 14:20
@TylerMoeller ajax won't work
Tyler Moeller
@TylerMoeller
Dec 13 2016 14:20
It's .animate() no?
not .ajax
Silvietta
@Ayvlis
Dec 13 2016 14:20
I agree with @TylerMoeller , try another jQuery method, to see if it is actually jQuery the problem
kirbyedy
@kirbyedy
Dec 13 2016 14:21
look the method I am using is very simple
its 6 lines of code
and it is working in an online editor
on codepen
not only in this project, but in another 3 I made
it just wont work locally on my machine
Silvietta
@Ayvlis
Dec 13 2016 14:21
always the animate method?
kirbyedy
@kirbyedy
Dec 13 2016 14:22
with all the libraries linked or locally stored
its the only method I use

$('a').click(function(e){
    e.preventDefault();
    $('body, html').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 120
    }, 1000);
});
this is the whole code
Clyde Lobo
@oppiniated
Dec 13 2016 14:22
@kirbyedy great go into the folder where your code in in the terminal and type python -m SimpleHTTPServer and then type localhost:8000 in your browser
kirbyedy
@kirbyedy
Dec 13 2016 14:22
nothing special
done
does not work
@oppiniated any other idea ? :D
ty @oppiniated
CamperBot
@camperbot
Dec 13 2016 14:27
kirbyedy sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @oppiniated |http://www.freecodecamp.com/oppiniated
vínαч puppαl
@vinaypuppal
Dec 13 2016 14:29
@kirbyedy which Jquery version are you using, if you are using jquery.slim version it does not have animate method on it. And do you see any errors in browser console
http://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery
kirbyedy
@kirbyedy
Dec 13 2016 14:31
jquery-3.1.0.min.js
no errors in the console
Clyde Lobo
@oppiniated
Dec 13 2016 14:32
@kirbyedy can you post your entire code as is?
kirbyedy
@kirbyedy
Dec 13 2016 14:32
and this code works on other projects
Silvietta
@Ayvlis
Dec 13 2016 14:34
can you please paste your html code?
markygan123
@markygan123
Dec 13 2016 14:35

http://codepen.io/markygan123/full/bBMmdz/

i wonder why my second image won't show

Clyde Lobo
@oppiniated
Dec 13 2016 14:37
@markygan123 Because it's link to a webpage and not an image
Silvietta
@Ayvlis
Dec 13 2016 14:37
@markygan123 you didn't link a photo, but a website page: "http://imgur.com/gTUxAwH"
the image is this: http://i.imgur.com/gTUxAwH.png
Clyde Lobo
@oppiniated
Dec 13 2016 14:38
use http://i.imgur.com/gTUxAwH.png instead
Silvietta
@Ayvlis
Dec 13 2016 14:39
@kirbyedy still need help?
kirbyedy
@kirbyedy
Dec 13 2016 14:40
code works online on codepen, code does not work locally that is my issue
not a big deal, just wondering why
Silvietta
@Ayvlis
Dec 13 2016 14:41
can you please paste your html local code? @kirbyedy
kirbyedy
@kirbyedy
Dec 13 2016 14:41
I dont think so
I can give you the similar code which I used, but that code is online and its working
so once this site goes online most probably will work
Tyler Moeller
@TylerMoeller
Dec 13 2016 14:42
@kirbyedy We're happy to help you debug further if you don't mind trying a few things. Otherwise, add a HTML preview plugin to your code editor or set up a local server so you can run from http://localhost - it typically is not a best practice to preview your HTML via file:/// before deploying your code.
markygan123
@markygan123
Dec 13 2016 14:42
@Ayvlis i thought the link provided was the image link itself. thanks!
CamperBot
@camperbot
Dec 13 2016 14:43
markygan123 sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @ayvlis |http://www.freecodecamp.com/ayvlis
Silvietta
@Ayvlis
Dec 13 2016 14:43
@markygan123 np :)
kirbyedy
@kirbyedy
Dec 13 2016 14:43
@TylerMoeller most probably I would have to setup a server
Silvietta
@Ayvlis
Dec 13 2016 14:44
@kirbyedy probably it is not there the problem, because you're working on front-end and front-end is by definition all solved in host machine
I pasted your code in a file I made up now and to me it is working via file://
Chris
@bestintown23
Dec 13 2016 14:48
as i am going through these challenges, i do not seem to retain this information what can i do to get better in js?
Silvietta
@Ayvlis
Dec 13 2016 14:48
@kirbyedy just be sure that all your scripts have they're closing tag
kirbyedy
@kirbyedy
Dec 13 2016 14:49
they do
VeesciK
@VeesciK
Dec 13 2016 15:30
Hi. I'm going to build Tribute Page now, but I don't know who can I write about?
Sorin Ruse
@sorinr
Dec 13 2016 15:30
@kirbyedy do you have node.js installed on your machine?
kirbyedy
@kirbyedy
Dec 13 2016 15:32
yep
Sorin Ruse
@sorinr
Dec 13 2016 15:33
i'll pm u a download link of a package using gulp with sass and server with hotreloading. just a sec
kirbyedy
@kirbyedy
Dec 13 2016 15:34
@sorinr ty
CamperBot
@camperbot
Dec 13 2016 15:34
kirbyedy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 943 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 13 2016 15:34
you don't have pm activated
kirbyedy
@kirbyedy
Dec 13 2016 15:36
where is that ?
VeesciK
@VeesciK
Dec 13 2016 15:49
@Ayvlis Thanks :D
CamperBot
@camperbot
Dec 13 2016 15:49
veescik sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 31 | @ayvlis |http://www.freecodecamp.com/ayvlis
VeesciK
@VeesciK
Dec 13 2016 15:50
How to add link from google picture to my html code?
Silvietta
@Ayvlis
Dec 13 2016 15:51
you mean the results of google image search?
VeesciK
@VeesciK
Dec 13 2016 15:51
Yes
Silvietta
@Ayvlis
Dec 13 2016 15:54
<img src="link" alt="alternative text"/>
where link is the url of the image when you click "view image"
VeesciK
@VeesciK
Dec 13 2016 15:55
Ohh thanks. I tried <a href="url"></a> but it didn't work
Silvietta
@Ayvlis
Dec 13 2016 15:56
:-)
ionut
@ionutinz
Dec 13 2016 16:01
hey guys !
Igor Amidzic
@igoramidzic
Dec 13 2016 16:08
Can someone help me with bootstrap/css?
My elements are clinging to the top of the page and I don't know how to vertically center them.
http://codepen.io/amidzicigor/pen/RoeoLK
Sidra
@sidra93
Dec 13 2016 16:12
Hi.. How to nest text input element within a form element?
Igor Amidzic
@igoramidzic
Dec 13 2016 16:14
@sidra93 What do you mean? Can you explain a little more?
<form>
     <input type="text" value"">
</form>
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:16

I'm having trouble getting a image carousel to work. The following is my code:

<div class="container">
<section>
<div class="page-header" id="Academic">
<h2>Academic Accomplishments -- <small>Some of Minsky's most notable academic accomplishments.</small></h2>
</div>

  <div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#screenshot-carousel" data-slide-to="1"></li>
      <li data-target="#screenshot-carousel" data-slide-to="2"></li>
      <li data-target="#screenshot-carousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.marketingdirecto.com/wp-content/uploads/2016/01/minsky-300.jpg" alt="Text of Image">
      </div>
      <div class="item">
        <img src="https://i2.wp.com/media.boingboing.net/wp-content/uploads/2016/01/untitled1.jpg?w=600" alt="Text of Image">
      </div>
      <div class="item">
        <img src="https://s.aolcdn.com/dims5/amp:956ea18b73889646cef055e6ec2bb0c4a00acb04/q:100/?url=http%3A%2F%2Fo.aolcdn.com%2Fdims-shared%2Fdims3%2FGLOB%2Fcrop%2F1759x1440%2B0%2B0%2Fresize%2F1400x1145%21%2Fformat%2Fjpg%2Fquality%2F85%2Fhttp%3A%2F%2Fhss-prod.hss.aol.com%2Fhss%2Fstorage%2Fmidas%2F81ddb8910ad9ec614e48926df2b213b8%2F203311521%2F454262130.jpg" alt="Text of Image">
      </div>
      <div class="item">
        <img src="https://assets.wired.com/photos/w_730/wp-content/uploads/2016/01/marvin-minsky-bot-D0M7FA.jpg" alt="Text of Image">
      </div>
    </div>
  </div><!-- End Carousel -->
Silvietta
@Ayvlis
Dec 13 2016 16:18
@onewebdeveloper did you import bootstrap javascript file?
Clyde Lobo
@oppiniated
Dec 13 2016 16:21
@amidzicigor please change the order of the js in the settings, include jquery first and then bootstrap
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:21
In the reverse order though (jquery first, then bootstrap)... Sorry I didn't clairify.
Jason Luboff
@JLuboff
Dec 13 2016 16:21
@onewebdeveloper I've never dealt with the Carousel...but looking at the documentation, they have <div class="carousel-inner" role="listbox"> you're missing the listbox, not sure to what effect that has
Silvietta
@Ayvlis
Dec 13 2016 16:23
it seems you don't have the bootstrap js, but only the css
Igor Amidzic
@igoramidzic
Dec 13 2016 16:25
@oppiniated yeah I have it like that in my project, just accidentally put it in that order on codepen
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:27
@JLuboff Thanks. That helped but it is still behaving strangely. On one of the images the four dots dissappear, it is smaller than the rest and they are all different in size.
CamperBot
@camperbot
Dec 13 2016 16:27
onewebdeveloper sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @jluboff |http://www.freecodecamp.com/jluboff
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:28
@Ayvlis -- I have the bootstrap link in the CSS tab, and jquery in the JavaScript tab along with the bootstrap link underneath that. Maybe this isn't right?
@onewebdeveloper it should be right then
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:31
Maybe I sould set size parameters for the images so that they're all the same size. It works fine for three of the four images, but the smallest one the 4 navigation dots disappear.
@Ayvlis -- Thanks Silvietta, I think I can figure it out from here.
CamperBot
@camperbot
Dec 13 2016 16:31
onewebdeveloper sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 32 | @ayvlis |http://www.freecodecamp.com/ayvlis
Silvietta
@Ayvlis
Dec 13 2016 16:35
@onewebdeveloper :+1:
Nesredin Mustefa
@nesru
Dec 13 2016 16:36
hello
Can anyone help on twichTv project?
Alexis
@alexisgcn
Dec 13 2016 16:37
Hi guys
this is my tribute page project
I hope your feedback
Uros Tadic
@urketadic
Dec 13 2016 16:38
how i can make when Numpad enter is clicked, 8 from keyboard to be outputed.
Marko Rajkovic
@marko88ks
Dec 13 2016 16:38
Screenshot_1.png
How the image to be responsible when I install it directly from css
ionut
@ionutinz
Dec 13 2016 16:39
@alexisgcn looks good :) nice
Silvietta
@Ayvlis
Dec 13 2016 16:40
@alexisgcn I like it :clap:
Uros Tadic
@urketadic
Dec 13 2016 16:41
nice alexis looks dank a sfuck
Alexis
@alexisgcn
Dec 13 2016 16:46
Thanks you @Ayvlis
CamperBot
@camperbot
Dec 13 2016 16:46
alexisgcn sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 34 | @ayvlis |http://www.freecodecamp.com/ayvlis
Sorin Ruse
@sorinr
Dec 13 2016 16:47
@alexisgcn i found it well html semantically structured too. :+1:
Alexis
@alexisgcn
Dec 13 2016 16:50
@sorinr yeah it is tks
Joshua Berger
@onewebdeveloper
Dec 13 2016 16:58
@Ayvlis -- Never claimed I wrote it. I'm going through some tutorials and tweaking parts here and there to get a better feel of how things work. Believe me, I'm not going to copy someone else's work and submit it as my Tribute page assignment.
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 16:58
Hey everybody. I have a question about Tribute Page. Instead of typing```
Sorin Ruse
@sorinr
Dec 13 2016 16:59
@CantWeAllJustGitAlong go ask the question
Chris Rutherford
@cjrutherford
Dec 13 2016 17:00

hey all, I'm trying to figure out if this is possible with plain javascript with just a bit of jQuery.
I want to have an object that is set to specific pieces of the DOM that automatically updates based on the values of a variable. I'm thinking about it like this:

var domControl = { 'score':$('#score').text(), 'currentplayer':$('#currPlay').text()}

this isn't intended to be true code, but to see if this is possible.

Igor Quirino
@iquirino
Dec 13 2016 17:01
Hi all... my Youtube is blocked by proxy... how to complete some challenges like this? https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:01
class="text-center"
for all those elements, why couldn't i have used css like tbis
p, h1, h2 , h3 {
text-align: center;
Chris Rutherford
@cjrutherford
Dec 13 2016 17:02
@iquirino see if you can download them elsewhere and view them later
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:02
it would be a lot less typing. Unless "text-center" in bootstrap holds more properties than text-center
Chris Rutherford
@cjrutherford
Dec 13 2016 17:03
@CantWeAllJustGitAlong You can, but it can be a little tricky in straight up CSS the advantage of using the text-center class is that it behaves the exact same way each time for inline elements. One of the advantages of using a CSS framework like bootstrap
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:05
okay. Thanks. It's all just so new. What I didn't like about the project is that had a class to give it that greyish color. And some of the elements like <blockquote> and <cite> were never taught .
Sorin Ruse
@sorinr
Dec 13 2016 17:06
@CantWeAllJustGitAlong your code above its quite valid css code. @cjrutherford sometimes using a css framework like bs its kinda disadvantage if you want something else and you should overwrite a lot of css code
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:07
It just seems for a simple one page that BS was not necessary
Sorin Ruse
@sorinr
Dec 13 2016 17:08
@CantWeAllJustGitAlong aleluia :)
Chris Rutherford
@cjrutherford
Dec 13 2016 17:08
@CantWeAllJustGitAlong Yep, it's a nice to have but not necessary.
@sorinr I love overriding BS's default stuff. It gives me a starting point to customize. I can't tell you how often I've used the well class and just made it my own. better than just racking my brain trying to find the perfect standard component.
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:09
So you can always BS and then override it in the html and css with and ID or class?
Here's my tribute page. It's about Heisenberg
https://codepen.io/CodeItLikeYaOwnIt/pen/zoJMPw
Sorin Ruse
@sorinr
Dec 13 2016 17:11
@cjrutherford but i can tell u how many times i've used well class. 0. have you tried to make in devtools an audit of your page to just see how many features from BS you r not using?
Chris Rutherford
@cjrutherford
Dec 13 2016 17:14
@CantWeAllJustGitAlong Yep! and @sorinr I think we're just on different parts of the same spectrum. It's not how much you're using, it's how you're using. I mean yeah, I could just use a div, but there are some styling I prefer in a well to separate sections of my page, and I just override a portion of the defaults. it's why the framework is there
Silvietta
@Ayvlis
Dec 13 2016 17:14
@onewebdeveloper I don't understand, I was just saying that you didn't specify that you had imported the bootstrap.js file. No "malware" intentions on my own :P
Chris Rutherford
@cjrutherford
Dec 13 2016 17:15
@CantWeAllJustGitAlong Also, I like the references in your pen
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:22
Thanks. But I had to sneak a peak at the project codepen to even know to use Jumbotron. How do I find a list of these elements for BS. I don't even know if jumbrotron would even be considered a theme.
Chris Rutherford
@cjrutherford
Dec 13 2016 17:24
Of course! just check out getbootstrap.com and go to the components section.
Sorin Ruse
@sorinr
Dec 13 2016 17:25
@cjrutherford i don't totally agree. if you are using an entire framework just for styling a couple of elements i consider its not worth using a framework
Chris Rutherford
@cjrutherford
Dec 13 2016 17:26
@CantWeAllJustGitAlong for yours, I would say a jumbotron might be overkill. Check out the thumbnail, caption, etc
@sorinr I don't think you entirely understand how I use bootstrap. I use it for the grid to layout my content, use the built-in items to give it a standard look and feel, then customize the parts that don't quite fit my end design goals.
Sorin Ruse
@sorinr
Dec 13 2016 17:29
@cjrutherford thats exactly what i said. you are using an entire lib just for the grid. you can do that on youlself
Chris Rutherford
@cjrutherford
Dec 13 2016 17:29
It's either use the grid and take five minutes to layout a page, or do it manually with my own CSS and take five hours. Your choice
the code will come from somewhere, me or the framework, I'd rather stand on the shoulders of giants and actually get things done rather than spend my time reinventing the wheel.
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:31
The Tribute page project should have given a hint to check out components section of getbootstrap.com
Sorin Ruse
@sorinr
Dec 13 2016 17:33
@cjrutherford ok. i got your point. you don't want to learn css. you want to stand on shoulders of "giants".
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:34
I like CSS and I like the ease of layout and responsiveness that BS provides. I'm so torn
Bogdan Gatej
@Bogdan2992
Dec 13 2016 17:35
I have a question about Build a random quote machine
should I use that code pen or should I use something else
in order to write my code
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 17:36
Thans for your help @sorinr @cjrutherford
Suchtee
@Suchtee
Dec 13 2016 17:38
Hey foks, I'm working on my Tributepage for Leonardo da Vinci and it's going well so far. Here is my problem. I created a Slider/Carousel and it's works but the Pictures inside arn't in the center and dont got the same height. If someone can help me, that would be nice.
Sorin Ruse
@sorinr
Dec 13 2016 17:39
@Bogdan2992 you can use whatever api u want
Bogdan Gatej
@Bogdan2992
Dec 13 2016 17:40
@sorinr eu sunt destul de nou, in treaba asta cu web develop,vreau sa stiu care crezi u ca sunt cele mai utilizate
Ayo Isaiah
@ayoisaiah
Dec 13 2016 17:40
@CantWeAllJustGitAlong Use the right tool for the right job :wink:
Sorin Ruse
@sorinr
Dec 13 2016 17:42
@Bogdan2992 plz pm me in rom. here we respond only in eng so all other people understand what we are talking about
Chris Rutherford
@cjrutherford
Dec 13 2016 17:43
@sorinr that is an over simplification. I've known CSS for years prior to doing FCC. You have your opinion, I have mine. Please don't impose your thinking on others, respect theirs.
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:46
The classic bootstrap vs flexbox discussion ;)
Chris Rutherford
@cjrutherford
Dec 13 2016 17:47
@TylerMoeller question, if you have a moment
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:47
Sure
Chris Rutherford
@cjrutherford
Dec 13 2016 17:49
I want to be able to control certain elements in the DOM with a Javascript object such that in order to update the DOM, I only have to update the object. Do you know of a way? I remember seeing something to that effect, but it could just be me confusing AngularJS for real JS
Sorin Ruse
@sorinr
Dec 13 2016 17:50
@cjrutherford things are always simple just we have the tendency to over complicate them. i'm not saying using a framework its bad, but i'm saying is usefulness to use one for a small project where u can write your own code
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:50
@cjrutherford Sounds like React/Angular. You can do it with JS, but you need to update the object and then call a function based on a certain event happening on the page.
Suchtee
@Suchtee
Dec 13 2016 17:50
can nobody help me??
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:51
one important part of the framework vs write your own code argument I never see discussed is compatibility testing. Bootstrap is tested on every OS and every version of every browser with known issues documented. Your own code is not.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 17:51
@Suchtee I will take a look at it....
@Suchtee verify your email sent by codepen :/
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 17:53
Hi, I need help with the "Build a Tribute Page" challenge. I just wanted to know how to display such a large-font header text that is being shown in the demo page
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 17:53
@Suchtee verify your email sent by codepen :/ no access here
Chris Rutherford
@cjrutherford
Dec 13 2016 17:54
@sorinr agreed. agreed. I do agree that before using a framework (bootstrap) You need to know how to use the tool/language that the framework helps. Same goes for preprocessors like Pug, Sass/less, typescript/coffeescript
@TylerMoeller so like an event trigger?
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:54
@cjrutherford But maybe I'm not understanding your question. My github portfolio website is generated based on this file: https://github.com/TylerMoeller/tylermoeller.github.io/blob/master/repos.json
If I want to add more portfolio projects, I just update that json file.
Regarding the event trigger, yes, I was thinking you can click on a link, which calls a function to update an object, read it, and print to the page.
Suchtee
@Suchtee
Dec 13 2016 17:56
@Mr-Kumar-Abhishek ok sry forgot to do that
Chris Rutherford
@cjrutherford
Dec 13 2016 17:56
@TylerMoeller Ah, a little background. I'm working on the TicTacToe Game, and I wanted to see if I could maintain both the state, and the moves made in the object rather than having to continually query the DOM to determine the state of the board.
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:57
Sure, I think a lot of people use a global variable for that - the moves are stored in an array.
Suchtee
@Suchtee
Dec 13 2016 17:57
@Mr-Kumar-Abhishek i verifyed my e-mail should work now
Chris Rutherford
@cjrutherford
Dec 13 2016 17:59
@TylerMoeller okay, so I can do it, it's just not going to be as streamlined as possible. This will cut down my big switch for the AI from about 50 lines to a three case switch in a loop!
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 17:59
@Suchtee yes looking at it....
Tyler Moeller
@TylerMoeller
Dec 13 2016 17:59
@cjrutherford Yes, should be possible :) For example, when a user clicks a square on the tic-tac-toe board, you add the square they clicked to the array. The computer then moves based on which squares are not in the array yet.
Bogdan Gatej
@Bogdan2992
Dec 13 2016 18:00
@sorinr ok let
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:00
@Suchtee hold on I need to take this call.
Ritvars
@RitvarsZ
Dec 13 2016 18:00
Hello, kinda stuck at the beginning of my local weather app project. I wan't to get the country code and city from ipinfo, but the variable is only assigned in that json request. I wan't to use those variables with the weather api request. Can anyone point out what's wrong with this code?
$(document).ready(function(){
    var city, country;

    function getLocation(){

        $.getJSON("http://ipinfo.io", function(response) {
            city = response.city;
            country = response.country;
        }, "jsonp");

        $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + country, function(json){
            $("#location").html(json);
        });

    };
    getLocation();

});
Bogdan Gatej
@Bogdan2992
Dec 13 2016 18:00
@sorinr let's go in priv
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:00
Hi?
Chris Rutherford
@cjrutherford
Dec 13 2016 18:01
@TylerMoeller My initial approach was to have three arrays, one for the winning conditions, one for the empty spaces on the board, and one for the spaces that have been used, but I had some trouble with that, but now all I'll have to do is maintain the object and perform check on that!
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:01
need help with tribute page
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:01
@Suchtee It's hard to deal with images of different sizes - you can crop them so they are the same height, but it's usually easiest to edit them in a photo editor and make them all the same size before using them in a carousel or image grid.
Chris Rutherford
@cjrutherford
Dec 13 2016 18:01
@apoorv-mishra what seems to be the trouble! Welcome! :smile:
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:02
The header text seems to be too large. I can't figure out how to do that. Please give some hints
Chris Rutherford
@cjrutherford
Dec 13 2016 18:02
Can you link your pen?
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:02
sure
Ritvars
@RitvarsZ
Dec 13 2016 18:02
@apoorv-mishra give us your code :)
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:02
@Suchtee Unsplash has an easy to use image API that lets you grab images with specific sizes. For example, http://source.unsplash.com/3MNzGlQM7qs/1920x1200
The size of the images goes to the end of the url
Chris Rutherford
@cjrutherford
Dec 13 2016 18:02
And are you using a jumbotron?
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:03
no I am not
Chris Rutherford
@cjrutherford
Dec 13 2016 18:03
ah okay, good. The defaults for that are ginormous
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:03
sorry, I didn't get you
Chris Rutherford
@cjrutherford
Dec 13 2016 18:04
it's okay, jumbotrons in bootstrap are ridiculously large sometimes
Suchtee
@Suchtee
Dec 13 2016 18:04
@TylerMoeller i tought about this but i guess i dont have to do this because the width of the carousel is all ways widther then the pictures inside
Fabio Di Pane
@saylos
Dec 13 2016 18:04
ok guys, pls check my randomQuoteMachine and tell me what you think about. There are still a few issues but I get enough with it, I'm done with it.. the most important part is complete (API, JSON etc.):
http://codepen.io/saylos/pen/BQxYey
Suchtee
@Suchtee
Dec 13 2016 18:04
@TylerMoeller atleast that was my tought behind this
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:04
Yeah, it's the height that is messing things up, not the width. You could set a minimum height for the carousel and vertically center the smaller images, but it may not look right @saylos
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:05
Ok. Wait I am linking my codepen. Have a look at it and give hints as how to make appropriate changes
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:05
Ooops, not @saylos sorry about that
Fabio Di Pane
@saylos
Dec 13 2016 18:05
@TylerMoeller :smile:
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:05
Looking at your quote machine now though lol
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:07
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:07
@Suchtee okay back
Ritvars
@RitvarsZ
Dec 13 2016 18:07
@saylos Looking from a visual point of view, I would make the background image fade too
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:07
@Suchtee got your solution yet ?
Chris Rutherford
@cjrutherford
Dec 13 2016 18:07
@apoorv-mishra all I see is a div with a well class. Have you saved?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:08
@Suchtee got your solution yet ? if not am giving it you
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:08
@cjrutherford I sent another one. Have a look.
Suchtee
@Suchtee
Dec 13 2016 18:08
@Mr-Kumar-Abhishek not not really
no
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:09
Chris Rutherford
@cjrutherford
Dec 13 2016 18:09
@apoorv-mishra got it. It looks fine on mobile. Maybe you want to just lower the font size? Is an H2 or font-size in your CSS
Suchtee
@Suchtee
Dec 13 2016 18:09
@Mr-Kumar-Abhishek i was trying to give the carousel a min height
Fabio Di Pane
@saylos
Dec 13 2016 18:09
@TylerMoeller consider that I didn't give so much importance to the aesthetics. @RitvarsZ I tried but I had the problem that the background image (beeng part of body tag) is somehow connected with the quoteBox..
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:10
@Suchtee you were talking of centering it , i assume
@Suchtee okay a min height ... lets see...
Suchtee
@Suchtee
Dec 13 2016 18:11
@Mr-Kumar-Abhishek center and all the same height :D
center works
thanks @Mr-Kumar-Abhishek btw
CamperBot
@camperbot
Dec 13 2016 18:11
suchtee sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
Fabio Di Pane
@saylos
Dec 13 2016 18:11
@RitvarsZ the result was a mess, because I didn't want the box fading out
CamperBot
@camperbot
Dec 13 2016 18:11
:cookie: 438 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:11
@cjrutherford I am using h1 and h2 for text. But I want "mahatma gandhi" to be bigger as shown in the demo page. How can I do that. You said something about jumbotron.
Jas K
@jask84
Dec 13 2016 18:11
@suchtee http://codepen.io/jask/pen/pNxPeO?editors=1000. You has some small issues with trying to set a width and then overriding with a max-width . Also be aware of text-aline being misseplt. @Mr-Kumar-Abhishek covered most points. Plus I would recommend splitting css onto the css section in codepen. easier to read.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:12
@saylos Aesthetics are important, in my opinion ;) the main thing I would change is to make the background image full screen. See this article for an explanation: https://css-tricks.com/perfect-full-page-background-image/
Aside from that, your code looks good. Only a couple of issues:
  • no such thing as an 'alt' property for anchor elements: <a href="http://codepen.io/saylos/" alt="Saylos' codePen">
  • <!DOCUMENTTYPE html> should be <!DOCTYPE html> and that tag should not be used in codepen - they already add it for you.
Jas K
@jask84
Dec 13 2016 18:12
@Suchtee my fork isnt completely what you need. just a rough idea
Chris Rutherford
@cjrutherford
Dec 13 2016 18:13
@apoorv-mishra oh, then override the default for h1 with font-size in your CSS you can make it any size you like. Just be sure to use pt as your unit of measure
Apoorv Mishra
@apoorv-mishra
Dec 13 2016 18:13
@cjrutherford Alright, I will try. Thanks for help :)
CamperBot
@camperbot
Dec 13 2016 18:13
apoorv-mishra sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Chris Rutherford
@cjrutherford
Dec 13 2016 18:14
Np
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:14
@saylos You can transition the background image by doing something like this, for example:
body {
    transition: all 1s ease;
}
Fabio Di Pane
@saylos
Dec 13 2016 18:16
@TylerMoeller yep your right, I made mistake with DOCTYPE, and I wrote it because I started the project on Atom. I'll fix what you told me and read the article (I wanted the full scrin but it made a mess with the formats, considering other devices too), thanks a lot
CamperBot
@camperbot
Dec 13 2016 18:16
:star2: 1143 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
saylos sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:17
@Suchtee same height and in middle https://gist.github.com/Mr-Kumar-Abhishek/97fc3ee4fc9dd938a928d9fbc1d01725 but I propose to resize the images to constant height as the smallest pic is really small
Fabio Di Pane
@saylos
Dec 13 2016 18:17
@TylerMoeller I was afraid more about the code, I thought it was not elegant
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:17
@Suchtee hope this helps ~
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:18
@saylos For your first javascript front-end project, I think it's great.
Fabio Di Pane
@saylos
Dec 13 2016 18:19
@TylerMoeller thanks
CamperBot
@camperbot
Dec 13 2016 18:19
saylos sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: saylos already gave tylermoeller points
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:19
@Suchtee and yes , check your spelling of text-align as @jask84 mentioned forgot to say that
thanks @jask84 ^_^
CamperBot
@camperbot
Dec 13 2016 18:20
mr-kumar-abhishek sends brownie points to @jask84 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @jask84 |http://www.freecodecamp.com/jask84
Omar Ashraf
@Oaik
Dec 13 2016 18:23
guys
i need help
Build a Wikipedia Viewer
i don't understand anything
Chris Rutherford
@cjrutherford
Dec 13 2016 18:23
@Oaik whats the problem?
Omar Ashraf
@Oaik
Dec 13 2016 18:24
i can't start can't get the idea
and my english is not good so i can't understand well what to make
Suchtee
@Suchtee
Dec 13 2016 18:24
@Mr-Kumar-Abhishek @jask84 thanks
@Mr-Kumar-Abhishek its working well enough i guess thanks a lot
CamperBot
@camperbot
Dec 13 2016 18:25
suchtee sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:warning: suchtee already gave mr-kumar-abhishek points
Chris Rutherford
@cjrutherford
Dec 13 2016 18:25
I would start with the layout. Just map out how you want it to look, maybe build a single result to test, then call the api and inject the data. Let me know if you have more questions
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:26
Does anyone have a good URL to a tutorial that teaches how to use/include APIs in JavaScript? I've built a Random Quote Machine that selects quotes from arrays, but now want to upgrade to one that fetches truly random quotes from an API. http://codepen.io/jimpix/pen/WoErgX
Chris Rutherford
@cjrutherford
Dec 13 2016 18:26
And be sure to check out the example it'll help you get the idea of what they want.
Omar Ashraf
@Oaik
Dec 13 2016 18:26
@cjrutherford thanks for your help ;)
CamperBot
@camperbot
Dec 13 2016 18:26
:cookie: 306 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
oaik sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
Suchtee
@Suchtee
Dec 13 2016 18:26
@jask84 thanks for pointing out my mistakes :D I just started programming want to learn a lot more
CamperBot
@camperbot
Dec 13 2016 18:26
suchtee sends brownie points to @jask84 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @jask84 |http://www.freecodecamp.com/jask84
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:29
@playingwithinfinity This was first taught in this challenge: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
For quote APIs, this one has pretty clear documentation: https://quotesondesign.com/api-v4-0/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 18:29
@Suchtee if you like a bit of a challenge , figure out what are the extra rules I have given that is not really needed in your code :)
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:30
@TylerMoeller It doesn't teach how use online APIs, and it gives you the answer directly, unlike most FCC challenges.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:31
@playingwithinfinity Every API is unique and will have its own instructions
alpox
@alpox
Dec 13 2016 18:32
@playingwithinfinity its not really easy to teach how to use online apis since all of them have their specialities. each one defines its endpoint in its own specific way and you have to read its documentation to be able to use it properly. Thereis not much to teach, except how to do web requests
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:32
@TylerMoeller I don't get how to use the API you mentioned.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:32
The idea is to get familiar with the basic approach and then read the API's instructions to modify your approach as needed. It can get a little complicated at times, unfortunately, because the documentation is typically written for master developers...
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:33
How do I modify my code to use your API? http://codepen.io/jimpix/pen/WoErgX
I need to replace it using JQuery, but there is a bunch jargon in the getJSON function.
Suchtee
@Suchtee
Dec 13 2016 18:33
@Mr-Kumar-Abhishek i will do this but not right now ^^
Stoica Valentin
@stoicavali91
Dec 13 2016 18:33
hi guys... i am now attempting the Local Weather Challenge and i can say that none of the geolocation algorithms found on the internet works...yeeey...so, can someone help me with that?Thanks
Chris Rutherford
@cjrutherford
Dec 13 2016 18:34
@playingwithinfinity it can be dificult, but each has the same basic functionality, request data (maybe with parameters), return data via json or xml, then you have to display the data. it's different on what parameters it's expecting and how the data is structured on return
Sara Dorris
@saralee233
Dec 13 2016 18:35
I'm trying to add the background to my 3rd page but its not showing up.... can you tell me what I am doing wrong?
<div id="nav">
     <ul>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
     </ul>
</div>

<div id="page1">
  <a id"about class="smooth"></a>
                            <br><br>
 I am Sara Dee. I am a 26 year old college graduate. Who applied to graduate school is is currently waiting to find out if I was accepted. As a child I always thought it would have been cool to learn how to hack but I really wasn't sure about learning how to do it. I departed from that notion after reading something that made believe that hacking was for criminals. After hearing about the labor shortage in the CYbersecurity field I decided to go back to school and major in Cybersecurity. My undergraduate degree is in Business Management.
                            </div>
                             <div id="page2">                  <a id="portfolio" class="smooth"></a>        
    Portfolio infor here
</div>
<div id="page3">
               <a id="contact" class="smooth"></a>
                                             contact info here
                                             </div>            
#page1
{background-image:url("https://s-media-cache-ak0.pinimg.com/originals/5e/29/6b/5e296b0a58866c3e47ac5b7b43d25f2f.jpg");
background-repeat:no-repeat;
background-position:right top;
  height:800px; 
 ;
}
#page2
{background-image:url("http://img1.mxstatic.com/wallpapers/41523420631e14aea02e0182db9a4a81_large.jpeg");
background-repeat:no-repeat;
background-position:right top;
  height:1000px;
  #page3
{background-image:url("https://www.sixt.com/fileadmin/user_upload/pictures-city-page/palm-beach-citypage-1.jpg");
background-repeat:no-repeat;
background-position:right bottom;
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:37
It's annoying because I have no idea how to use the given API.
Chris Rutherford
@cjrutherford
Dec 13 2016 18:38
@playingwithinfinity which api is it?
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:38
alpox
@alpox
Dec 13 2016 18:38
@saralee233 you miss the curly brace at the end of the height line with 1000 px of page2. also the curly brace at the end of the css
Sara Dorris
@saralee233
Dec 13 2016 18:40
thanks! @alpox
CamperBot
@camperbot
Dec 13 2016 18:40
saralee233 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 689 | @alpox |http://www.freecodecamp.com/alpox
Chris Rutherford
@cjrutherford
Dec 13 2016 18:40
@playingwithinfinity I would say use their one-liner call that is on the page you linked when loading the page, then calling the same line to pull a new one. You only need one quote at the time
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:42
@playingwithinfinity It's good to review this challenge and the few that come after it: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
Note, /json/cats.json is the same as calling https://www.freecodecamp.com/json/cats.json
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:43
@cjrutherford How? I need to replace the html that has the class quotes with the API results.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:43
They show you how to use getJSON to access JSON data and display it to the page - that's all you're doing with a quotes API.
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:43
@TylerMoeller I just did.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:44
@playingwithinfinity And you saw how you added data to the div with the .message class?
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:44
@TylerMoeller Yeah
That's what I do in my code.
Chris Rutherford
@cjrutherford
Dec 13 2016 18:44
@playingwithinfinity yeah, for mine, I just used a json object filled with quotes, and the replacement is easy with jQuery. $('#quoteID').text(quoteString);
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:44
Oh.
I see.
Tyler Moeller
@TylerMoeller
Dec 13 2016 18:44
Yes, only you'll be adding data to the .author and .quote classes
Chris Rutherford
@cjrutherford
Dec 13 2016 18:45
and I just prefer targeting by ID because there can be only one
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:46
Ah, I just don't get it.
Chris Rutherford
@cjrutherford
Dec 13 2016 18:46
@playingwithinfinity about what?
where's the confusion?
Stoica Valentin
@stoicavali91
Dec 13 2016 18:47
can someone tell me please why the freecodecamp code for geolocation data won't work?Thanks
Chris Rutherford
@cjrutherford
Dec 13 2016 18:49
@stoicavali91 think you might be running into an issue with https, are you using chrome? I had to use an API to determine location based on IP address, then use that to call the weather API
GastroGeek
@GastroGeek
Dec 13 2016 18:51
@playingwithinfinity - use https:// in the getJSON call. if you place the getJSON stuff in a function, you can then trigger that on the button click and it will work as before, but via API. hope that helps.
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:53
I have no idea what you mean :(
Max Kelly
@maxleekelly
Dec 13 2016 18:53
Anyone willing to look at my code for the Quote Generator? I have the basic user stories done (clicking the new quote button generates a random quote, clicking the Tweet button opens a new window with the current quote ready to Tweet), but there are a few things I'm having trouble with:
Stoica Valentin
@stoicavali91
Dec 13 2016 18:53
yes, i am using chrome. What should i do to make the code work? @cjrutherford
playingwithinfinity
@playingwithinfinity
Dec 13 2016 18:54
Let me try it in the morning when I'm fresh, instead of doing it at midnight.
GastroGeek
@GastroGeek
Dec 13 2016 18:54

@playingwithinfinity - look at the URL in the getJSON call... you have:

http://quotesondesign.com

Needs to be:

https://quotesondesign.com
thats step 1
Chris Rutherford
@cjrutherford
Dec 13 2016 18:54
@playingwithinfinity use the jquery $.getJSON method to call the API, and you will use a callback method to process the data. $.getJSON is documented here: http://api.jquery.com/jquery.getjson/
@stoicavali91 try using this api to determine location. there is also a nice description of the data returned by the api as well.
Max Kelly
@maxleekelly
Dec 13 2016 18:55
  1. The text for the header won't center no matter what I try, and 2. I'm trying to get the Submit button to add a new quote to my array, but what I have so far doesn't seem to work… any advice is very much appreciated! http://codepen.io/maxleekelly/pen/qqJRRj
Stoica Valentin
@stoicavali91
Dec 13 2016 18:56
@cjrutherford Thank you! I'll try it
CamperBot
@camperbot
Dec 13 2016 18:56
stoicavali91 sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Kameron Robinson
@RobinsonKameron
Dec 13 2016 18:56
@cjrutherford Why would you use ip-api if you can use the built in navigator API?
Chris Rutherford
@cjrutherford
Dec 13 2016 18:56
@RobinsonKameron because Chrome requires that navigator requests come from a page using HTTPS: which openweathermap doesn't seem to be able to use.
it's an undocumented glitch with the zipline
David Vasquez
@Beefjerkie
Dec 13 2016 18:58
When I submit a codepen project like the tribute page, does someone look at it and give pointers on it?
Chris Rutherford
@cjrutherford
Dec 13 2016 18:59
You can ask here for feedback, but (not sure about this) I think they're reviewed when you're done with a specific track. Anyone with more XP please chime in
David Vasquez
@Beefjerkie
Dec 13 2016 19:00
I just would like feedback on it to ensure I am on the right path if that makes sense. Like school, you turn in a assignment and get feedback on it basically. Did not know if it was the same or not
kirbyedy
@kirbyedy
Dec 13 2016 19:00
@Beefjerkie not until you finish all the projects and apply for non-profit tasks
Chris Rutherford
@cjrutherford
Dec 13 2016 19:01
@kirbyedy thanks for the clarification! @Beefjerkie yeah, it's more like a group of people getting together to learn the same thing, which should be what a school is....
CamperBot
@camperbot
Dec 13 2016 19:01
cjrutherford sends brownie points to @kirbyedy and @beefjerkie :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @beefjerkie |http://www.freecodecamp.com/beefjerkie
:star2: 1654 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
David Vasquez
@Beefjerkie
Dec 13 2016 19:01
So overtime do I go back on previous projects and improve it to show it off before I apply for projects?
kirbyedy
@kirbyedy
Dec 13 2016 19:02
@Beefjerkie sure
Chris Rutherford
@cjrutherford
Dec 13 2016 19:02
You can, I intend to, once I finish the later ones. working on Simon now
David Vasquez
@Beefjerkie
Dec 13 2016 19:02
Sweet! Thanks @cjrutherford @kirbyedy !
CamperBot
@camperbot
Dec 13 2016 19:02
:cookie: 308 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
:star2: 1655 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
beefjerkie sends brownie points to @cjrutherford and @kirbyedy :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Dec 13 2016 19:03
dough, I should start working on that simon game... but its just neeah...
Dustin Wright
@DustinEWright
Dec 13 2016 19:04

Hello all. I'm currently using placeholder images for my projects in the portfolio exercise. What's a convenient way to make a screenshot public so I can use real images of my projects please?

Thanks.
https://codepen.io/DustinWright/pen/yVKPav?editors=1000#0

Igor Amidzic
@igoramidzic
Dec 13 2016 19:05
Does anyone know how to prevent my two buttons from coming together as the page shrinks? My goal is to keep them the same distance no matter the screen size. Just like codecademy.com
http://codepen.io/amidzicigor/pen/RoeoLK
Chris Rutherford
@cjrutherford
Dec 13 2016 19:05
@kirbyedy yeah had a lot of trouble with TTT, but it's worth it. One more project, then certified! Once More with Feeling!!!!
kirbyedy
@kirbyedy
Dec 13 2016 19:06
same here :)
Chris Rutherford
@cjrutherford
Dec 13 2016 19:06
@kirbyedy want to pair program it?
for a second there, I thought your avatar failed to load....
kirbyedy
@kirbyedy
Dec 13 2016 19:07
:D
Chris Rutherford
@cjrutherford
Dec 13 2016 19:08
@amidzicigor try adding margin between the buttons (maybe margin-right for the login button, and margin-left for the sign up?)
kirbyedy
@kirbyedy
Dec 13 2016 19:08
I decided to leave it for a while, exploring the foundation framework, and updating my portfolio
Igor Amidzic
@igoramidzic
Dec 13 2016 19:09
@cjrutherford Yeah I thought of that, but that sounds like a bootleg way to fix it lol. I was hoping for a more efficient or professional way
Chris Rutherford
@cjrutherford
Dec 13 2016 19:09
yeah I had the same thing, got burnt out on the TTT game, and learned angular, pug, sass, and a little node
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:09
For random quote machine, do you create all the quotes on your own or is there some database of quotes you can access?
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:09
@amidzicigor They appear to be using a standard bootstrap navbar: https://getbootstrap.com/examples/navbar-fixed-top/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 13 2016 19:09
npm install -g npm <-- inception
Chris Rutherford
@cjrutherford
Dec 13 2016 19:09
@amidzicigor a lot of programming in general is first, figuring out why the code is doing what it's doing, and second, figuring out how to stop that and do what you want.
kirbyedy
@kirbyedy
Dec 13 2016 19:10
@jpmitchellpierson search online for an quote api, there is alot of them
Igor Amidzic
@igoramidzic
Dec 13 2016 19:11
@TylerMoeller Oh I see, thanks
CamperBot
@camperbot
Dec 13 2016 19:11
amidzicigor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1144 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Chris Rutherford
@cjrutherford
Dec 13 2016 19:13
@jpmitchellpierson you could also grab a bunch of them in a JS object and just plop it in your code. Here is one: https://gist.github.com/signed0/d70780518341e1396e11
but mind you this is a json file with arrays of quotes,
Kameron Robinson
@RobinsonKameron
Dec 13 2016 19:16

@cjrutherford I suppose this is much better :)

http://codepen.io/RobinsonKameron/pen/NbOgjm?editors=0010#

@cjrutherford its also silent so you can just automatically know where your users are haha
Max Kelly
@maxleekelly
Dec 13 2016 19:17
@TylerMoeller Thanks, I tried that but the text still snaps to the left for some reason… it only started doing that once I added the pseudo-opacity to the background image– could that be the culprit? And yeah I suspected the Submit thing might be beyond me, most of what I looked up gave examples using PHP, thanks!
CamperBot
@camperbot
Dec 13 2016 19:17
maxleekelly sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1145 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Chris Rutherford
@cjrutherford
Dec 13 2016 19:17
@RobinsonKameron YES!!!! and now you can just tie the data to your DOM elements now!
Kameron Robinson
@RobinsonKameron
Dec 13 2016 19:18
@cjrutherford Fair enough.
Chris Rutherford
@cjrutherford
Dec 13 2016 19:19
@RobinsonKameron the data is only half the battle. Have fun! :+1:
Kameron Robinson
@RobinsonKameron
Dec 13 2016 19:20
:shipit:
Cody mcpherson
@cmcpherson730
Dec 13 2016 19:21

hey all, im working on my first project of a tribute page and im stuck. how do i post a link to a video under my h2 element? here is what i have so far and the next thing i need is the video to be inserted.

<div class="container">

<div class="jumbotron">

<h1 class= "text-center">Michael Jordan </h1>
<h2 class="text-center">THE DOCTOR IS HERE</h2>

Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:21
@cjrutherford I think I'm probably more comfortable with grabbing the array of quotes
do you think it be best to assign them to a variable and make them an object?
Chris Rutherford
@cjrutherford
Dec 13 2016 19:22
@jpmitchellpierson it's simpler, and if you wanted to later, you could go back and implement the API, and yes, that's exactly what I did
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:22
@cjrutherford yeah I don't feel all that comfortable using an API yet
Joshua Berger
@onewebdeveloper
Dec 13 2016 19:23
@Ayvlis Sorry about the missunderstanding. I thought you were laughing at me after saying I didn't write this (i.e. the code that I'm playing around with). It's all good :smile:
Chris Rutherford
@cjrutherford
Dec 13 2016 19:23
@jpmitchellpierson by the end of the next few projects, you will be
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:24
oh man lol
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:24

@maxleekelly Sorry about that...only worked on a smaller screen and I didn't notice you are using absolute positioning on your .header class. This should work:

.headText {
  display: block;
  color: #333;
  margin: 0 auto;
  font-family: Futura, sans-serif;
  height: 100%;
  width: auto;
  text-align: center; /* added this, */
}
.header {
  display: block;
  font-family: Futura, sans-serif;
  color: black;
  position: absolute;
  height: 100%;
  width: auto;
  margin: 0 auto;
  top: 5%;    
  left: 0;  /* and this, */
  right: 0;  /* and this to your CSS */
}

Lines I added have the /* */ comments after them

Chris Rutherford
@cjrutherford
Dec 13 2016 19:24
@jpmitchellpierson they're not all that bad, just have to get used to them is all
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:25
That is a lot of CSS though :) you should try and simplify if possible
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:26
@cjrutherford in the link you sent, below the quotes they have some code called random_quote.py. I take it that generates the random quote
Chris Rutherford
@cjrutherford
Dec 13 2016 19:27
@jpmitchellpierson I just googled json quotes and found it. The original app that used that may have been written in python
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:27
gotcha
Max Kelly
@maxleekelly
Dec 13 2016 19:28
@TylerMoeller It worked, thanks so much! Yeah I need to clean it up a lot haha… Out of curiosity, does FCC cover Submit buttons etc. at some point or is there another resource you'd recommend?
Chris Rutherford
@cjrutherford
Dec 13 2016 19:31
this might be a better question for the amazing @TylerMoeller , but here's the shot in the dark. Trying to figure out why my $('.square').click(function(){...}); isn't running in this pen
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:35
@maxleekelly I think you're mostly on your own with submit, which is odd because they have you use one with the first portfolio project. A lot of people run into problems with that one. With some more work, you could probably get user submitted quotes working, but as soon as they go to another page, the quotes will be gone.
@cjrutherford It's running, but it calls compMove() which then defines var block = checkForBlock(); which is undefined. Pull up your browser's dev console to see the error, Ctrl+Shift+J
Chris Rutherford
@cjrutherford
Dec 13 2016 19:39
@TylerMoeller yep, I'm filling in those as I go, so that's normal, but that shouldn't stop the square from being filled.... gotta look into that....
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:39
@cjrutherford You only look for position = 'space' and I don't see that in your JSON
      if(game.board[i].position === space){
        game.board[i].filled = true;
        game.board[i].takenBy = 'player';
        $('#'+i).text = game.player;
        break;
      }
Igor Amidzic
@igoramidzic
Dec 13 2016 19:40
can someone explain why my image is blurry while static, and then turns blurry again at the end of the transition?
http://codepen.io/amidzicigor/pen/PbyjMr
Chris Rutherford
@cjrutherford
Dec 13 2016 19:40
@TylerMoeller that's assigned just before the if statement with $(this).attr('id')
Suman kharel
@sumankharel
Dec 13 2016 19:41
hey! it was somthing like three ´´´ to write code. Could you guys remind me
Igor Amidzic
@igoramidzic
Dec 13 2016 19:42
@sumankharel Yupp..
``` at the start and finish of your code
Chris Rutherford
@cjrutherford
Dec 13 2016 19:42
one backtick(`) on either side for single line code. for multi line use three on either side.
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:42
@cjrutherford I'm confused. That code changes the 'id' of the element that was clicked on - it doesn't update your json
Nvm, I am confused - hang on a sec...
:bulb: :bulb: :bulb:
Chris Rutherford
@cjrutherford
Dec 13 2016 19:44
@TylerMoeller it should just get the ID of what was clicked which is a digit, then does the maintenance on the object, then once state is maintained, it puts the stuff in the square
themixedcoder
@themixedcoder
Dec 13 2016 19:44
.notify-mute
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:45

@cjrutherford The ID is text and you're comparing it to a number, try this instead:

if(game.board[i].position === +space){

The + makes sure it's a number

Chris Rutherford
@cjrutherford
Dec 13 2016 19:45
@TylerMoeller or parseInt. Thanks, I forgot about that.
CamperBot
@camperbot
Dec 13 2016 19:45
cjrutherford sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1146 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 13 2016 19:46
Time for more coffee :)
Chris Rutherford
@cjrutherford
Dec 13 2016 19:47
agreed! fourth cup today
Suman kharel
@sumankharel
Dec 13 2016 19:49

```js $(document).ready(function() {
var lati;
var longi;
var temperature;

$.getJSON("http://ip-api.com/json", function(location) {

lati = location.lat;
longi = location.lon;
// console.log(lati);
// using those coordinated to find location

function getWeather() {
  var api="api.openweathermap.org/data/2.5/weather?"
 var url=api+lati+longi;
$.ajax({
  jsonp: "jsonp",
  dataType: "jsonp",
  url: api,
  data : {
    lat: "$lati",
    lon: "$longi",
    appid: 'f1810e605c5d19b24c3f91c5cbcf6e17'

  }, 
  success: function(responedWeather){
    temperature = responedWeather.main.temp;
  $("#temperature").text(temperature);
  }
});

}
});
});

I think i am not able to do it correctly. But can anyone check what is wrong in my code?
Justin Pierson
@jpmitchellpierson
Dec 13 2016 19:53
@cjrutherford did you use Math.random to generate the random quote?
Chris Rutherford
@cjrutherford
Dec 13 2016 19:54
yep, but be sure to use Math.floor to round down, and multiply the result by the number of elements in your array/object to get a whole number between zero and the length
Suman kharel
@sumankharel
Dec 13 2016 19:57
I found it myselft :sparkles:
Jason Luboff
@JLuboff
Dec 13 2016 19:58
Ugh...can't figure this out. I have a JSON object I retrieve. It has five keys, each cotaining an array of values. I'm trying to modify it to allow the deletion of a value and then replace the JSON file with the new updated one using $.post. The same post code works with the initial form..anyone see anything obvious standing out?
$('#remove').click(function(){
      var checked =  $('input[name=radioBtn]:checked', '#returnMeet').attr('id');
      json.meetingTitle.splice(checked, 1);
      json.startTime.splice(checked, 1);
      json.startTimePeriod.splice(checked, 1);
      json.endTime.splice(checked, 1);
      json.endTimePeriod.splice(checked, 1);
      console.log(json);
    //  event.preventDefault();
      //var jsonData = json.serializeJSON();
      $.post("http://jluboff-10/CalTest/php/json.php", {json : json});
      window.location.replace("http://jluboff-10/CalTest/meetingSubmit.html");
    })
bulbrain
@bulbrain
Dec 13 2016 20:05
why this is an infinite loop??

function spinalCase(str) {
// "It's such a fine line between stupid, and clever."
// --David St. Hubbins
for(i = 1; i < str.length; i++) {
if(str[i] == str[i].toUpperCase()) {
var currChar = str[i].toLowerCase();
str = str.slice(0, i) + currChar + ' ' + str.slice(i+1);
}
}

str = str.replace(/ /g, '-').replace(/_/g, '-').toLowerCase();
return str;
}

spinalCase("This Is Spinal Tap");

if i remove currChar its not
and if i remove the char and put a letter after the space in line 7 its infinite loop again wtf javascript
Liam Lagan
@LiamLagan
Dec 13 2016 20:08
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Bo_Diddley_Prag_2005_02.jpg/1280px-Bo_Diddley_Prag_2005_02.jpg" alt="Playing his diddley bo">
</img>
.image {
display: block;
margin: auto;
max-width: 700px;
height: auto;
padding-top: 30px;
}
why doesnt my image resize
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:16
@cjrutherford think you could take a look at what I got so far?
kind of stuck on how to generate the random quote when the button is clicked. though I don't think I'm that far off
John
@johnshelb
Dec 13 2016 20:26

I'm confused! In a text editor, I wrote some code for the basic random quote machine. It took me days, but I finally got it to work. BUT...when I put it into codepen, it doesn't seem to work at all. The only changes I made are the following:
--instead of a <script> line to access jQuery, I use the codepen method of adding jQuery in settings
--I removed the <html> tags and pasted the html in the codepen html window
--I removed the <script> tags and pasted the js in the js window.

If it would be helpful for you to see the code from the working version, I'd be happy to paste it in here.
Here is the codepen:
https://codepen.io/johnshelby/pen/KNRENm

Chris Rutherford
@cjrutherford
Dec 13 2016 20:29
@jpmitchellpierson sure, but I recommend the $().click(); method
Jason Luboff
@JLuboff
Dec 13 2016 20:33
@johnshelb Its becuase you're loading codepen over https and your API is http. Change your codepen url to: http://codepen.io/johnshelby/pen/KNRENm
John
@johnshelb
Dec 13 2016 20:34
@JLuboff Thanks, that's very interesting. I'm not sure how to change the codepen url.
CamperBot
@camperbot
Dec 13 2016 20:34
:cookie: 484 | @jluboff |http://www.freecodecamp.com/jluboff
johnshelb sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
John
@johnshelb
Dec 13 2016 20:35
Oh, well I just deleted the 's' in the address bar and sure enough, it works now! Is that all there is to it?
madwarjo
@madwarjo
Dec 13 2016 20:36
Hi, can any one tell me how to make h1 and h2 headings on vertical center in my jumbotron?
https://codepen.io/madwarjo/pen/Roegwj
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:38
@cjrutherford that's what I did but I'm not very familiar with how to use all these yet
Chris Rutherford
@cjrutherford
Dec 13 2016 20:40
@jpmitchellpierson try a .click() instead of .on('click',function(){...});
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:41
@cjrutherford im not sure what to put in the parentheses
Chris Rutherford
@cjrutherford
Dec 13 2016 20:43
@jpmitchellpierson that would be where you put your function
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:43
I changed them all to .click() though and deleted the functions
oh ok
and thats the Math.floor(Math.random())
Michael Karpinski
@karpimpski
Dec 13 2016 20:46
https://preview.c9users.io/karpimpski/javascript-30/Mike30/01_drum_kit/index.html?_c9_id=livepreview3&_c9_host=https%3A%2F%2Fide.c9.io hey guys, I started work on a set of projects called JavaScript30. definitely check it out! this is my attempt at the first project (I didn't look at the code and tried to make it as similar to his as possible). let me know what you think!
Chris Rutherford
@cjrutherford
Dec 13 2016 20:46
@jpmitchellpierson I want to say that you may want to use the random number as the index of the item in the array you want to display. I don't think you'll need more than one function
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:47
so like quoteList.indexOf(Math.floor(Math.random())? @cjrutherford
John
@johnshelb
Dec 13 2016 20:47
@karpimpski Love the drum kit Mike!
Chris Rutherford
@cjrutherford
Dec 13 2016 20:49
@jpmitchellpierson well if you assign the DOM element text from the array, you can say something like $('#quote').text(quoteList[Math.floor(Math.random()*quoteList.length)].quote; this uses the random number as the index number of the array to fill the element with content.
@jpmitchellpierson don't let me confuse you
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:50
@cjrutherford im not sure where #quote came from?
Chris Rutherford
@cjrutherford
Dec 13 2016 20:51
I was using a generic id that fit the situation. I think in your code it should be .newQuote
Justin Pierson
@jpmitchellpierson
Dec 13 2016 20:52
oh ok
@cjrutherford assign the DOM element text from the array. I'm not sure what that means
David Vasquez
@Beefjerkie
Dec 13 2016 20:57
Greetings everyone! Is there a way to target multiple targets in JS? I attempted to look online but have not found a solution, just looking a way to clean up some code.

For example

  $("#screen1").hide();
  $("#screen2").hide();
  $("#screen3").hide();
  $("#screen4").hide();
  $("#screen5").hide();
  $("#screen6").hide();
  $("#screen7").hide();

I rather have it all in one command if possible

Tyler Moeller
@TylerMoeller
Dec 13 2016 21:01
@LiamLagan Add width: 100%; to your CSS - also the <img> tag is a void element. It does not use a closing </img> tag.
Chris Rutherford
@cjrutherford
Dec 13 2016 21:01
when I say DOM element, I'm referring to your HTML, assigning the element text means that you will be filling the text with Javascript, and assigning from the array means that you'll be using an array value to supply the contents. I'll go over the pieces of the last code snippet I gave you. $('.newQuote') targets your new quote div .text() tells the script you're wanting to define the text that goes inside the element. and the Math.Floor() rounds down to a whole number. Math.random * quoteList.length , with the help from Math.floor, generates a random number between 0 and the end of the array. quoteList[...].quote tells the script you want to pull just the quote from the array (if it's an array of objects, if it's just an array, then you can leave this off.)
@jpmitchellpierson sorry for sending a wall
Dylan Murphy
@dmurphy5
Dec 13 2016 21:02
I feel like its gonna be a simple solution, but when I click for a new quote, sometimes it cycles through a bunch before landing on one. It did it to the point of crashing the page once. http://codepen.io/dylanmurphy/pen/BQOMEO
Chris Rutherford
@cjrutherford
Dec 13 2016 21:03
@dmurphy5 do you have a loop somewhere? You really shouldn't need one for this project
Dylan Murphy
@dmurphy5
Dec 13 2016 21:03
Nope.
Chris Rutherford
@cjrutherford
Dec 13 2016 21:05
@dmurphy5 I think your problem stems from the fact you have a call to your getQuote() function inside your getQuote() function.
@dmurphy5 yep, just move your jquery button click call outside and it works fine
Justin Pierson
@jpmitchellpierson
Dec 13 2016 21:08
$("#newQuote").text[Math.floor(Math.random()*quoteList.length)]
should the Math.floor be in parentheses rather than brackets? @cjrutherford
Jason Luboff
@JLuboff
Dec 13 2016 21:09
@johnshelb Hey sorry, I had stepped away, but yes thats all there is to it
@jpmitchellpierson No, it should be in parenthesis
Chris Rutherford
@cjrutherford
Dec 13 2016 21:10
@jpmitchellpierson the .text function should have parentheses instead of brackets, and the random number should be used as an index on an array (which is in brackets)
Justin Pierson
@jpmitchellpierson
Dec 13 2016 21:12
@cjrutherford ok. I took out the quoteList[...].quote because it's an object made up of an array
now it looks like .text(Math.floor[Math.random()*quoteList.length])
Chris Rutherford
@cjrutherford
Dec 13 2016 21:13
@jpmitchellpierson yeah, it should look like this. `.text(quoteList[Math.floor(Math.random()*quoteList.length)]);
Jason Luboff
@JLuboff
Dec 13 2016 21:13
@jpmitchellpierson Thats not going to work. Its Math.floor() not Math.floor[]. All that you're going to get at this point is a number with that
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:14
I could use some advice. I'm at the Build Your Own Portfolio challenge and I just feel LOST. Should I just use a BS template and if so, which one. There only seems to be a few on the BS site. Then I see 3 CDN links for a basic template and wonder how to use them. And the example that they give for a potfolio site built in codepen by a Camper is so far ahead of what I have been taught so far.
Chris Rutherford
@cjrutherford
Dec 13 2016 21:15
.text is a function which needs () quoteList is an array and you can specify which part of the array by supplying an integer in [] immediately after. The reason I have been recommending doing your random number generation inside the array brackets is to skip a line.
here is the more readable approach:
```var seed = Math.floor(Math.random * quoteList.length);
.text(quoteList[seed]);
two lines much easier to read.
var seed = Math.floor(Math.random()*quoteList.length); $().text(quoteList[seed]);
if that makes sense....
Justin Pierson
@jpmitchellpierson
Dec 13 2016 21:18
@cjrutherford I think so
Chris Rutherford
@cjrutherford
Dec 13 2016 21:19
@CantWeAllJustGitAlong this playlist might help you with getting together a process instead of just "Getting to the code" this guy is great!
https://www.youtube.com/watch?v=sJhhLvW-Xvg&list=PLqGj3iMvMa4KeBN2krBtcO3U90_7SOl-A
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:19
Thanks. I'll check it out!
Dylan Murphy
@dmurphy5
Dec 13 2016 21:19
@cjrutherford I moved it out of the function and now I'm getting an unexpected identfier
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:20
I just started the portfolio project too. I'm using the Bootstrap enabled setting in Codepen.
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:21
@Lorrie01 Oh right. I forgot that if I use the checkbox, I don't have to paste the CDN in the hml
Chris Rutherford
@cjrutherford
Dec 13 2016 21:21
@dmurphy5 I would click the menu and choose analyze JS.... that'll tell you where the unexpected identifier is coming from. I would be careful with your indentation. Your code had this issue when I looked at it and it was thinking the close of your $(document).ready() function was too early.
brb taking care of business.
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:22
there is so much to learn and remember...i need a 2nd notebook already
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:22
@Lorrie01 Are you using a template or from scratch?
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:22
scratch
i've sort of sketched out what I want, so now i'm attempting to code it.
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:23
@Lorrie01 I know what you mean. What makes it difficult is when they use code in the sample projects that thye havent tought us.
Justin Pierson
@jpmitchellpierson
Dec 13 2016 21:23
@cjrutherford it still doesn't work. could it have something to do with my newQuoteButton id being in the div rather than the button tag?
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:24
@CantWeAllJustGitAlong we can do this!
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:24
So if I wanted to use a Nav bar that I found in BS, did I just copy and paste it in the html? Or is it something I have to download?
Yes we can!
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:25
i found this link to help me with creating the nav bar http://www.w3schools.com/css/css_navbar.asp
Chris Rutherford
@cjrutherford
Dec 13 2016 21:25
@CantWeAllJustGitAlong you can copy it, or you can look at the sample to make it your own
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:26
@Lorrie01 w3 is pretty cool. I'll check it out. I look forward to seeing yours :smile:
Chris Rutherford
@cjrutherford
Dec 13 2016 21:26
@jpmitchellpierson it might be. I would put the class/Id on what you're actually clicking.
Lorrie Pearson
@Lorrie01
Dec 13 2016 21:26
sounds great!
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:27
@cjrutherford Thanks
CamperBot
@camperbot
Dec 13 2016 21:27
:cookie: 309 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
cantwealljustgitalong sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
Jeff
@CantWeAllJustGitAlong
Dec 13 2016 21:27
@Lorrie01 Thanks!
CamperBot
@camperbot
Dec 13 2016 21:27
cantwealljustgitalong sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @lorrie01 |http://www.freecodecamp.com/lorrie01
Dylan Murphy
@dmurphy5
Dec 13 2016 21:28
@cjrutherford Thanks, I didn't know codepen had that. Very useful.
CamperBot
@camperbot
Dec 13 2016 21:28
dmurphy5 sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Chris Rutherford
@cjrutherford
Dec 13 2016 21:33
@dmurphy5 no problemmo
Amit Patel
@AmitP88
Dec 13 2016 21:34
hey guys, I'm almost done with my client site but I'm trying to get the carousel captions to appear below the slide images instead of next to them. I tried using display: flex and display:inline-flex but neither are working. https://amitp88.github.io/Khmer-Family-Cafe/
Chris Rutherford
@cjrutherford
Dec 13 2016 21:35
@CantWeAllJustGitAlong no problem!
@AmitP88 I think this might be the problem. You may want to override this to be either 90% or Bottom: 0;
blob
In chrome's dev tools you can modify the CSS in browser. Just tested changing the value to 90% and 100% and it works the way I think you want it
Amit Patel
@AmitP88
Dec 13 2016 21:40
@cjrutherford hmmm, I tried adding that class manually and adding top: 90%; but it didn't do anything
Chris Rutherford
@cjrutherford
Dec 13 2016 21:41
@AmitP88 hmmm try using the selector .flickity-pref-next-button to make the change.
Amit Patel
@AmitP88
Dec 13 2016 21:43
eh, that didn't really do anything either
Chris Rutherford
@cjrutherford
Dec 13 2016 21:44
hmmm....
Amit Patel
@AmitP88
Dec 13 2016 21:45
I don't know if flickity's carousel is interfering with this as it's the first time i've used it
Chris Rutherford
@cjrutherford
Dec 13 2016 21:46
yeah... you could try bootstrap's carousel, but I'm not too familiar. did you try making the change in the dev tools?
Amit Patel
@AmitP88
Dec 13 2016 21:47
I was having trouble finding the .flickity-prev-next-button class in dev tools
which element did you select?
Chris Rutherford
@cjrutherford
Dec 13 2016 21:48
oh, if you click the element selector tool, then click on the circle around the arrow, you'll get the right element
Amit Patel
@AmitP88
Dec 13 2016 21:49
sorry, I still don't get about the circle part
Chris Rutherford
@cjrutherford
Dec 13 2016 21:50
when you click this
blob
and hover over this
blob
be sure to click the circle, not the arrow, and you'll get to the right element, then
Amit Patel
@AmitP88
Dec 13 2016 21:51
oh that circle lol. sorry, I was confused for a moment hah
Chris Rutherford
@cjrutherford
Dec 13 2016 21:51
the CSS that effects that element will show
lol all good @AmitP88
and I love your font choices
Igor Amidzic
@igoramidzic
Dec 13 2016 21:52
Can someone help me with my jquery problem?
I found this smooth scroll function on google, but it doesn't seem to work properly. Anyone know why?
http://codepen.io/amidzicigor/pen/Roejgy
Amit Patel
@AmitP88
Dec 13 2016 21:52
@cjrutherford thanks! :) however, when I changed the top property to 90%, it just moved the circle down but it didnt affect the carousel slide
CamperBot
@camperbot
Dec 13 2016 21:52
:cookie: 311 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
amitp88 sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
Tom
@moT01
Dec 13 2016 21:54
@amidzicigor seems to be working i think
Igor Amidzic
@igoramidzic
Dec 13 2016 21:55
@moT01 When you click on portfolio, and then click on contact, it scrolls up, but contact is at the bottom of the page
Tom
@moT01
Dec 13 2016 21:56
it scrolls down to contact for me
Igor Amidzic
@igoramidzic
Dec 13 2016 21:57
@moT01 even after you click on portfolio?
Jason Luboff
@JLuboff
Dec 13 2016 21:57
@amidzicigor It works fine for me
It does not change the active tab though, which is a bit misleading. You may want to look into Bootstraps "Scrollspy"
Tom
@moT01
Dec 13 2016 21:58
yes
hey, anyone wanna help me with some js
Igor Amidzic
@igoramidzic
Dec 13 2016 21:59
@JLuboff Should I be manually changing the active tab in jquery, or is there something in bootstrap for that?
Jason Luboff
@JLuboff
Dec 13 2016 21:59
@amidzicigor Scrollspy achieves both, the smooth scrolling and the active tab
Tom
@moT01
Dec 13 2016 22:00
i built a string to use as a test in a loop, but i dont think it works cause its a string, ...is there a method or something to be able to just use it like any other test
Igor Amidzic
@igoramidzic
Dec 13 2016 22:00
@JLuboff Okay thank you
CamperBot
@camperbot
Dec 13 2016 22:00
amidzicigor sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @jluboff |http://www.freecodecamp.com/jluboff
Tom
@moT01
Dec 13 2016 22:00
i think thats my problem
Jason Luboff
@JLuboff
Dec 13 2016 22:00
@moT01 Whats your code your working with?
Tom
@moT01
Dec 13 2016 22:01
javascript, ...doing smallest common multiple
Jason Luboff
@JLuboff
Dec 13 2016 22:01
@moT01 I meant post what you have so far
Tom
@moT01
Dec 13 2016 22:02
k%1 === 0 && k%2 === 0 && k%3 === 0 && k%4 === 0 && k%5 === 0 heres the string i made, ..let me put it on a pen
i may have to find another way to go about it
Jason Luboff
@JLuboff
Dec 13 2016 22:09
@moT01 Hmmm ya I'm not to sure on that
Tom
@moT01
Dec 13 2016 22:11
bummer, well thanks @JLuboff anyway
CamperBot
@camperbot
Dec 13 2016 22:11
mot01 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @jluboff |http://www.freecodecamp.com/jluboff
Peter Steele
@PeterHSteele
Dec 13 2016 22:17
After I finished the twitch streaming app a couple of weeks ago I went back and tried to use it and it doesn't work anymore. When I look at the console it seems like there's a problem with the FCC api workaround. anyone else noticed anything like this?
Tom
@moT01
Dec 13 2016 22:19
@PeterHSteele yea something changed that you need to change, ...maybe the url, ...saw a message on here about it a while ago and a person or two who had that problem. not sure exactly what happened but if i had to guess it's just a different url
Peter Steele
@PeterHSteele
Dec 13 2016 22:25
@moT01 you're right - different url. Thanks
CamperBot
@camperbot
Dec 13 2016 22:25
peterhsteele sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @mot01 |http://www.freecodecamp.com/mot01
abm130
@abm130
Dec 13 2016 22:42

Hi just for fun I am trying to get some animation out of CSS without (!) using javascript.
Does anyone have an idea how to move the buildungs pixel by pixel? Because now as soon as they reach the right end, they fully appear on the left. Thats not really what I want :D i want them to smoooothly enter the picture

http://codepen.io/Lexington23/pen/qqJPLZ

Tom
@moT01
Dec 13 2016 22:52
you need to bring them in from off of the screen
@abm130
@keyframes mymove {
    from {left: -200px;}
    to {left: 1900px;}
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Dec 13 2016 22:55
Hi everyone, I'm searching some "Ding sounds" .mp3 files online, do you know where I can find them ?
abm130
@abm130
Dec 13 2016 22:57
@moT01 thx so simple haha
CamperBot
@camperbot
Dec 13 2016 22:57
abm130 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @mot01 |http://www.freecodecamp.com/mot01
aRtoo
@artoodeeto
Dec 13 2016 23:18
good day family. how would i remove the arrow on date type in <input type="date"/> ?? thanks
Jason Luboff
@JLuboff
Dec 13 2016 23:20
@artoodeeto What do you mean by remove the arrow?
aRtoo
@artoodeeto
Dec 13 2016 23:21
@JLuboff http://codepen.io/artoo/pen/ZBbYyM?editors=1100 hover your mouse on the date. theres an arrow
Aida Woldegiorgis
@aow003
Dec 13 2016 23:21
Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.
what does this mean ^^^
how can i target invisible anchor elements if they are invisible
lmao
Jason Luboff
@JLuboff
Dec 13 2016 23:22
@artoodeeto I think you sent the wrong project. @TylerMoeller mentioned might be what you want otherwise, just change the input type
Jim Edward
@ElpsySec
Dec 13 2016 23:22
Has anyone ever had problem accessing headers on axios response interceptors?
Aida Woldegiorgis
@aow003
Dec 13 2016 23:22
i sound stupid but I really don't understand
Tyler Moeller
@TylerMoeller
Dec 13 2016 23:23
@aow003 Not sure where you are reading that, but to open links in codepen, use target="_blank" in your hyperlinks. http://www.w3schools.com/tags/att_a_target.asp
Jason Luboff
@JLuboff
Dec 13 2016 23:24
@artoodeeto Got it. Ya, thats becuase of the input type. See what @TylerMoeller posted, it may help. Otherwise, you can change your input type and it will get rid of it. Currently, in Firefox, it just looks like a normal text field anyways.
aRtoo
@artoodeeto
Dec 13 2016 23:26
@JLuboff if i change the tpe to text they can input text. but thanks ill try
CamperBot
@camperbot
Dec 13 2016 23:26
artoodeeto sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Dec 13 2016 23:28
@artoodeeto But thats already the case in Firefox, along with Safari, and Internet explorer (but works in Edge)
aRtoo
@artoodeeto
Dec 13 2016 23:28
@JLuboff ohh. thanks i might change
CamperBot
@camperbot
Dec 13 2016 23:28
:warning: artoodeeto already gave jluboff points
artoodeeto sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
Aida Woldegiorgis
@aow003
Dec 13 2016 23:35
@TylerMoeller ahhh i see, so i just add it at the end of my anchor tag thingy
Tyler Moeller
@TylerMoeller
Dec 13 2016 23:35
@aow003 Yes, that's correct. I don't know what they mean by "invisible anchor element", doesn't seem like a very common phrase
Mike Neuman
@mikeneumannd
Dec 13 2016 23:55
Hi guys, when typing text on Codepen, everything I type replaces whatever is next to it. How do you enter insert mode?
Tom
@moT01
Dec 13 2016 23:59
@mikeneumannd i havent had that problem with codepen, ...u sure it's not your keyboard setting