These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Apr 2017
WillTheCruzan
@WillTheCruzan
Apr 25 2017 00:06
http://codepen.io/WillTheCruzan/pen/qmaBvP
How do I make the nav bar functional?
3gimpfingers
@3gimpfingers
Apr 25 2017 00:12
@WillTheCruzan You put your id where you want it to go to in your href attribute.
@WillTheCruzan Does that make sense to you?
Shiv M
@shivsagar1
Apr 25 2017 00:17
I have a quick question, i was working css bootstrap and i used <h2> some heading</h2> <ul><li ng-repeat=" "> </li> </ul> ,the question is simple i want the ul or li elements aligned to "Some heading", i have class attribute and in that class i am override the <li> to margin-left: 0px, and its not working . As i want the ul elements to be aligned to "some heading". Help would be appreciated
3gimpfingers
@3gimpfingers
Apr 25 2017 00:20
@shivsagar1 Try li {display: inline;} Then float both your ul and heading left.
Or if you want your li stacked, just float both ul and heading left.
Shiv M
@shivsagar1
Apr 25 2017 00:21
@3gimpfingers : which check out and let you know
3gimpfingers
@3gimpfingers
Apr 25 2017 00:21
@shivsagar1 And you might have to display both inline too.
Chuck Hoffman
@rhoffman219
Apr 25 2017 00:24
does anyone know how to round an img in codepen? I have looked up every line of code to try and round a photo and nothing is working. i don't know if its an issue with code pen or what
anyone help?
i have bootstrap loaded and have tried rounding it in html and in css, nothing is working
Jorge
@flawedLogic506
Apr 25 2017 00:25
hey ... so i haven't used twitch myself, basically if you are not streaming, you are offline? or can you be online and not streaming?
i guess you can.. cuz why wouldn't you, right
Gulsvi
@gulsvi
Apr 25 2017 00:26
@OrangeKulture With those endpoints they give us, if you're online, you are streaming something.
3gimpfingers
@3gimpfingers
Apr 25 2017 00:26
@rhoffman219 border-radius: 50%
Gulsvi
@gulsvi
Apr 25 2017 00:27
@rhoffman219 You may have Bootstrap 4 set up in your codepen. If you're using img-circle and that isn't working, try rounded-circle as your class name instead.
Jorge
@flawedLogic506
Apr 25 2017 00:28
@SkyCoder01 awesome, yeah thanks .. i was just thinking I might be assuming a lot here
CamperBot
@camperbot
Apr 25 2017 00:28
:star2: 1177 | @skycoder01 |http://www.freecodecamp.com/skycoder01
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Apr 25 2017 00:29
@veronicarbulu The same problem happens with my portfolio - but only in "Full" mode. Codepen does some overriding of links for security purposes. Try opening your page in debug mode instead and the links will work. I noticed in your code, however, that you are using <a name= and that is no longer supported in HTML5. Use id= instead of name= for your in-page link instead.
Chuck Hoffman
@rhoffman219
Apr 25 2017 00:29
@3gimpfingers your a life saver!
WillTheCruzan
@WillTheCruzan
Apr 25 2017 00:34
@3gimpfingers so how exactly would I do it?
Michael Duh
@mikaeloduh
Apr 25 2017 01:10
is there anyway to reload entire $(document).ready() ?
Michael Duh
@mikaeloduh
Apr 25 2017 01:19
I want to stop all the javascript process and reset/initialise everything
Gulsvi
@gulsvi
Apr 25 2017 01:21
@mikaeloduh You can call a function in document.ready that can be called again when needed. So, take the code you have in document.ready() now, make a function out of it, and then call that whenever it's needed.
uiharu
@uiharu-s
Apr 25 2017 01:21
ditto
Jaizon Carlos
@Jaizon
Apr 25 2017 01:26
Can someone experienced help me really fast?
Gulsvi
@gulsvi
Apr 25 2017 01:29
I'm a student like everyone else here, but happy to try @Jaizon
JD Tadlock
@jdtdesigns
Apr 25 2017 01:36
@Jaizon What's the question?
Michael Duh
@mikaeloduh
Apr 25 2017 01:39
@SkyCoder01 I also wish can stop all the running process/timer immediately
Gulsvi
@gulsvi
Apr 25 2017 01:40
@mikaeloduh That can all be a part of the initialization function you run in document.ready
It's about managing the state of your web application and ensuring that when you initialize the page, the state is always consistent
@moT01 I love it lol :) can't wait to get to that challenge!! You must have spent weeks on it.
How do I level up?
Tom
@moT01
Apr 25 2017 01:44
i did
Gulsvi
@gulsvi
Apr 25 2017 01:44
I'm guessing no mobile support is by design?
Tom
@moT01
Apr 25 2017 01:45
yea, i didnt have mobile in mind
no keyboard
you can find xp (the coins)
or beat enemies
hover to see what you will win
Gulsvi
@gulsvi
Apr 25 2017 01:45
I keep getting killed lol
Tom
@moT01
Apr 25 2017 01:45
its all random
Jaizon Carlos
@Jaizon
Apr 25 2017 01:46
@SkyCoder01 @jdtdesigns this is my codepen, I just can't find a way to put some progress bar (css like, div on top of div with text in the same line )
Tom
@moT01
Apr 25 2017 01:46
best to find some weapons and collect some health before fighting
Jaizon Carlos
@Jaizon
Apr 25 2017 01:46
Really got stuck on this one
Gulsvi
@gulsvi
Apr 25 2017 01:47
@moT01 I'll play around with it and let you know if I spot any bugs. Must feel good to finish!
Tom
@moT01
Apr 25 2017 01:48
it needs a little bit of tweaking
JD Tadlock
@jdtdesigns
Apr 25 2017 01:48
@Jaizon Progress bar? Not sure what you need a progress bar for.
Tom
@moT01
Apr 25 2017 01:48
to king is too hard at the end, ...other than that its pretty good
JD Tadlock
@jdtdesigns
Apr 25 2017 01:48
@moT01 Just played it and died on the first enemy lol
Gulsvi
@gulsvi
Apr 25 2017 01:49
@Jaizon If you're maybe trying to show skill levels in different languages, a lot of people use these: https://v4-alpha.getbootstrap.com/components/progress/#how-it-works
Tom
@moT01
Apr 25 2017 01:49
hmmm, ...yea there's three levels of enemies, ...you need to fight the easy ones first to level up
Gulsvi
@gulsvi
Apr 25 2017 01:49
Needs multiplayer and in game chat :p
co-op mode
Tom
@moT01
Apr 25 2017 01:50
yea
ill add that tomorrow
Gulsvi
@gulsvi
Apr 25 2017 01:50
sure :+1: lol
just hit 'M' the map is huge
Tom
@moT01
Apr 25 2017 01:51
that's pretty easy to tweak
can make it a little smaller with more rooms by changing a couple numbers, its random - sometimes you get one thats a little weird looking
Gulsvi
@gulsvi
Apr 25 2017 01:52
I was surprised, really cool
Jaizon Carlos
@Jaizon
Apr 25 2017 01:53
@jdtdesigns it is just some kind of visual effect, a lot of people use that but they've either used the ones from bootstraps page or using jQuery, I was just wondering if there's a way of organizing divs on top of other divs and side by side with texts like "CSS3" and stuff.
@SkyCoder01 ty, I'll look into that
CamperBot
@camperbot
Apr 25 2017 01:54
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1179 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 01:55
@Jaizon Are you talking about something like this pen? http://s.codepen.io/jmasked/pen/RKYXNG
image.png
Jaizon Carlos
@Jaizon
Apr 25 2017 01:56
@SkyCoder01 yes
Jaizon Carlos
@Jaizon
Apr 25 2017 02:01
I'm studying them right now :) @SkyCoder01
A simple way from scratch
Keon Samuel
@keonsam
Apr 25 2017 02:22
Sky react vs angualar?
Jaizon Carlos
@Jaizon
Apr 25 2017 02:29
@jdtdesigns look my work around http://codepen.io/jaizon/pen/LyRjVQ
there's nothing responsive there
JD Tadlock
@jdtdesigns
Apr 25 2017 02:31
@Jaizon You have a rogue <p> in your level2 div
those rogue elements always be creepin
Jaizon Carlos
@Jaizon
Apr 25 2017 02:34
@jdtdesigns ty, found that
CamperBot
@camperbot
Apr 25 2017 02:34
jaizon sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 920 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Jaizon Carlos
@Jaizon
Apr 25 2017 02:35
I hate using another editor
blob
And that'show my about section is looking
Jaizon Carlos
@Jaizon
Apr 25 2017 02:43
Yeah, that's what I was saying, I wasn't worried about responsiveness, but when I pass it from my editor to the code pen it goes all wrong
JD Tadlock
@jdtdesigns
Apr 25 2017 02:53
@Jaizon Here's how to make it dynamic using data properties and a little js. Makes it easy to create a bunch of bars without having to figure out delay times and add color classes. Same concept as Bootstrap, but less code. ;) http://jsbin.com/kawuku/edit?html,js,output
Paradox5
@Paradox5
Apr 25 2017 02:54
Kewl
Ugggggghhh
Illness sucks
Jaizon Carlos
@Jaizon
Apr 25 2017 02:58
@jdtdesigns I know nothing about js, lol
Goodnight all, is too late here o Brazil
JD Tadlock
@jdtdesigns
Apr 25 2017 03:00
@Jaizon What better time to learn :P
Jaizon Carlos
@Jaizon
Apr 25 2017 03:01
true hhah
Quoc Anh Nguyen
@quocanh261997
Apr 25 2017 03:08
hey guys, here's my codepen for the weather project, but somehow, the API doesn't seem to work. any suggestions? https://codepen.io/quocanh261997/pen/jrqPaj
JD Tadlock
@jdtdesigns
Apr 25 2017 03:10
@quocanh261997 Openweather only supports https if you have a premium account. You can use a service like weatherunderground that supports https for free.
Khoa Le
@Zacele
Apr 25 2017 03:11
currently stuck at the quote generator challenge
JD Tadlock
@jdtdesigns
Apr 25 2017 03:11
The browser console is your best friend when learning/debugging web sites/apps. Ctrl J @quocanh261997
Khoa Le
@Zacele
Apr 25 2017 03:11
donsn't know how to handle the Jquery yet
JD Tadlock
@jdtdesigns
Apr 25 2017 03:12
@Zacele Did you peek at the example code? There's not anything wrong with peeking as long as you go through and figure out what everything means and does.
Nikki L.R.
@nikkilr88
Apr 25 2017 03:45
If anyone could help me out, I would really appreciate it! Here is my post on the FCC forums: https://forum.freecodecamp.com/t/twitch-project-codepen-https-js-not-loading/109171
graciolli-f
@graciolli-f
Apr 25 2017 03:47
Would someone please tell me what I'm doing wrong?? Every time I click the button I get the same quote even though the url params are set to random. $(document).ready(function() {
var url = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=";
$('button').on('click',function(){
$.getJSON (url, function(data){
console.log(data);
$('#title').text(data[0].title);
$('p').html(data[0].content);
});
});
});
Nikki L.R.
@nikkilr88
Apr 25 2017 03:49
@graciolli-f Do you have a codepen link? You need some kind of loop.
Gulsvi
@gulsvi
Apr 25 2017 03:50
@graciolli-f That API caches the response, so you will need to disable cache with getJSON when you make the API call. One way to bypass caching is to add a random number to the end, like a timestamp: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=' + $.now()
graciolli-f
@graciolli-f
Apr 25 2017 03:50
Gulsvi
@gulsvi
Apr 25 2017 03:50
You can also use $.ajaxsetup to change caching settings with getJSON: https://api.jquery.com/jquery.ajaxsetup/
Nikki L.R.
@nikkilr88
Apr 25 2017 03:51
Oh, I see... it gives you one quote per call. Well, forget about the loop then... :D
Gulsvi
@gulsvi
Apr 25 2017 03:52

@nikkilr88 I'm getting this error in the console:

Mixed Content: The page at 'https://s.codepen.io/nikkilr88/pen/JNKLPK?editors=0010' was loaded over HTTPS, but requested an insecure resource 'http://player.twitch.tv/?channel=tsm_dyrus&autoplay=true&muted=true'. This request has been blocked; the content must be served over HTTPS.

You'll want to call https://player.twitch.tv if you can

(line 262)
Nikki L.R.
@nikkilr88
Apr 25 2017 03:56
@SkyCoder01 I tried to change that. The search still isn't working. :/
graciolli-f
@graciolli-f
Apr 25 2017 03:56
@SkyCoder01 I like the idea of adding a timestamp at the end... but it doesn't seem to be working. Would you mind checking my codepen and making sure I added it to the correct place? https://codepen.io/fgraciolli/pen/GmjXLK
Gulsvi
@gulsvi
Apr 25 2017 03:57
@nikkilr88 I must be misunderstanding because the search worked fine for me - even before making that http/https change to the video. Maybe a different browser? I'm on Chrome
@graciolli-f You'll have to add a new time stamp every time you click the button, move the URL into your button click function and it should get you a new quote every time.
JD Tadlock
@jdtdesigns
Apr 25 2017 03:58
@nikkilr88 You literally make around 20 ajax requests in your code. You should create a function that runs a request and clean that up.
Nikki L.R.
@nikkilr88
Apr 25 2017 03:58
Yeah, I am really new at this... I have no idea how to do that.
graciolli-f
@graciolli-f
Apr 25 2017 03:59
Ahhh!! That worked. Thank you so much @SkyCoder01
CamperBot
@camperbot
Apr 25 2017 03:59
graciolli-f sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1181 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 04:00
No problem - have fun coding the rest
Nikki L.R.
@nikkilr88
Apr 25 2017 04:00
@SkyCoder01 Thanks for checking! I am using chrome too. I have no idea what is going on.
CamperBot
@camperbot
Apr 25 2017 04:00
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 04:01
@nikkilr88 Keep up the good work :) love the concept so far.
Nikki L.R.
@nikkilr88
Apr 25 2017 04:01
@SkyCoder01 Was it the second one? (add faves)
Gulsvi
@gulsvi
Apr 25 2017 04:02
It was the search icon at the top, right. If I click that and search for someone, it takes me to their information and plays a video
Nikki L.R.
@nikkilr88
Apr 25 2017 04:02
@jdtdesigns and how would I go about doing that?
Gulsvi
@gulsvi
Apr 25 2017 04:03
No, it was the one you put in that forum post - FCC Twitch w/ Live Search :)
Nikki L.R.
@nikkilr88
Apr 25 2017 04:04
@SkyCoder01 Yeah, that one is working... After that I shared the link I just sent.
The second one got messed up somehow
Ken Haduch
@khaduch
Apr 25 2017 04:10
@nikkilr88 - I was looking at your pen, and commenting in the javscript room. It looks like you removed your section of code with the usernames? I don't really know how the first version was working and perhaps you were trying to change something here? I just dropped in here and saw that you were discussing it... I'm not going to be hanging around because it's late - hope you get it working!
Nikki L.R.
@nikkilr88
Apr 25 2017 04:10
@khaduch Thank you!
CamperBot
@camperbot
Apr 25 2017 04:10
nikkilr88 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2791 | @khaduch |http://www.freecodecamp.com/khaduch
Nikki L.R.
@nikkilr88
Apr 25 2017 04:10
@khaduch I'll have a look.
Roxroy
@roxroy
Apr 25 2017 04:11
@nikkilr88 , don't forget to cleanup your code. Add assign the string to the url variable,
  $('button').on('click', function() {
    var url = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + $.now()
    $.getJSON(url, function(data)  ...
Gulsvi
@gulsvi
Apr 25 2017 04:11
I always let people get it working first, then let them have it during the code review :)
That was graciolli's code, I think
Nikki L.R.
@nikkilr88
Apr 25 2017 04:12
Yup!
Gulsvi
@gulsvi
Apr 25 2017 04:13
@nikkilr88 Definitely more errors in the debug console with this one.
Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

I think the main one might be along the lines of what Ken said - something with how you are getting user data, because of this error:

Uncaught TypeError: Cannot read property 'channel' of undefined

I remember that in my twitch project - when you try to access a JSON property that doesn't exist
Seems to be coming from this line: if (data.follows[i].channel.logo === null) {
Nikki L.R.
@nikkilr88
Apr 25 2017 04:16
@SkyCoder01 Thanks... Yeah, I am looking at the errors now. I just have no idea how to fix any of this.
CamperBot
@camperbot
Apr 25 2017 04:16
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 04:17
You'll have to check if it has the property before checking the value of it.
Nikki L.R.
@nikkilr88
Apr 25 2017 04:19
@SkyCoder01 Well, with that one, all of them have 'logo'... it either has a url listed or it says 'null'.
So, I don't know :D
Edward Huang
@edwardGunawan
Apr 25 2017 04:33
is it better to create multiple link tags but has media type on it to prevent blocking render on CSS or put all media type of css into one file to make it load faster?
JD Tadlock
@jdtdesigns
Apr 25 2017 04:50
@nikkilr88 Here's an example of how to set it up. ;) https://codepen.io/jdtadlock/pen/dWpamy?editors=0010
Nikki L.R.
@nikkilr88
Apr 25 2017 04:51
@jdtdesigns Thanks! I'll save it and try to figure it out tomorrow.
CamperBot
@camperbot
Apr 25 2017 04:51
nikkilr88 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 921 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Nikki L.R.
@nikkilr88
Apr 25 2017 04:53
@jdtdesigns I appreciate the help!
JD Tadlock
@jdtdesigns
Apr 25 2017 04:54
@nikkilr88 Welcome ;)
Matt
@Misaiah
Apr 25 2017 05:29
Hey guys, can someone help clarify a PHP/MySQL question?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:37
@Misaiah I can try to help
Matt
@Misaiah
Apr 25 2017 05:38

Hello again @jdtdesigns ! Okay, so im getting into the PHP language and noticed there is MySQL....

am I correct in saying that you can use PHP without MySQL, but you cant use MySQL without PHP?

I have the code from earlier.....

'''<form action="https://formspree.io/email.com" method="POST">
Text <input type="text" name="name">
Email <input type="email" name="_replyto">
<input type="submit" value="Send">
</form>'''

but am thinking that PHP will be more reliable and appropriate for a database full of users
@jdtdesigns
JD Tadlock
@jdtdesigns
Apr 25 2017 05:42
@Misaiah If you're building a full stack app, then I'd definitely recommend creating your own email script. Otherwise, if it's just a front end site that needs to send a contact form to an email, then i'd just use formspree.
MySQL is just a sql database. It doesn't require PHP
Matt
@Misaiah
Apr 25 2017 05:44
Its all very confusing at the moment. I am trying to create a "sign up" form
where the user would place in their email, and other informaion that when submitted, will go either to my email, or a database. whichever is best
JD Tadlock
@jdtdesigns
Apr 25 2017 05:50
You're just hitting the wall everyone faces when you reach a certain point in learning. The "holy crap, there's a ton a stuff I don't know" stage. :P
@Misaiah
Full stack dev is no joke. It will take you quite a while to get to a point where you're comfortable creating an app that has a front, back and uses a database.
Matt
@Misaiah
Apr 25 2017 05:52
Aaahahahha.....Thats exactly what this is. Ive just gotten comfortable with HTML, CSS, and JavaScript and some Java....now PHP is a different beast
Im fairly new to the game, but I really enjoy being able to see my work come to life immediately. Its addicting actually
Did it take you a while? are you self taught or did you go to school for this?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:53
Are you wanting to learn web dev or mainly desktop stuff?
Matt
@Misaiah
Apr 25 2017 05:53
@jdtdesigns
web dev for sure
JD Tadlock
@jdtdesigns
Apr 25 2017 05:54
@Misaiah I'm a mix of all, which most everyone is. I didn't attend a college for this, but I have taken 14 billion courses and have done 100 zillion tutorials.
I'm 7 years in and still feel like a noob all the time :D
Matt
@Misaiah
Apr 25 2017 05:55
I have gotten desperate enough to want to try a bootcamp somewhere....however, I think that teaching myself will help me retain and learn better
Im pretty sure that with web dev, there will always be something to learn
JD Tadlock
@jdtdesigns
Apr 25 2017 05:56
If you're wanting to focus on web dev, I'd leave Java behind and focus on JS full stack or PHP/JS full stack
@Misaiah 100% guaranteed you will never know it all lol
Matt
@Misaiah
Apr 25 2017 05:57
And I will take your advice on focusing towards PHP/JS full stack. I really have grown to enjoy this...theres so much you can do
but right now, my biggest concern is PHP. I have noticed that it is written similar to HTML
so that may help me a little
JD Tadlock
@jdtdesigns
Apr 25 2017 05:57
I will say, you can probably get going quicker with JS focus only since you deal with the same language for front and back.
The php route will be harder and take more time for sure.
Matt
@Misaiah
Apr 25 2017 05:58
But isnt PHP primarily used to connect servers to your site?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:58
php is just one of many backend languages
it's web focused so it has a lot of features that work well with web apps
Matt
@Misaiah
Apr 25 2017 05:59
but you can use php with java, .net, c++, etc right?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:59
you wouldn't use php with them lol
if you told a Java dev that he had to "work with php", he'd quit :D
Matt
@Misaiah
Apr 25 2017 05:59
would you say that php is more diverse than any other back end language? is there one thats considered the best?
its that hard, huh? lol
Im in for some trouble then
JD Tadlock
@jdtdesigns
Apr 25 2017 06:00
All programmers/devs will have their favs. There's hardly a 'better' one. They all have their ups and downs.
Matt
@Misaiah
Apr 25 2017 06:01
I know PHP has been around for a long time, and to me that screams reliability...but again, I know nothing at this point
JD Tadlock
@jdtdesigns
Apr 25 2017 06:01
Java is intense and requires learning Object Oriented Programming. So, for a learning curve, PHP should be easier to learn.
I say "should", but that's up to the learnee lol
Matt
@Misaiah
Apr 25 2017 06:02
lol, I completely understand. everyone learns this differently and theres a ton to it. Would you say that all back end languages do the same?
would PHP be able to perform all the functions that the other back end languages can?
JD Tadlock
@jdtdesigns
Apr 25 2017 06:04
An application is what it is. It can either handle users and data or just handle data. Building the app in whatever language stack is where you can create your own 'way' of how it happens.
But creating your own way is kinda silly these days. We have great frameworks for all language stacks.
PHP has Laravel which is my fav right now.
Matt
@Misaiah
Apr 25 2017 06:05
so Laravel is a branch of PHP?
JD Tadlock
@jdtdesigns
Apr 25 2017 06:06
Laravel is a framework that handles the backend/frontend/database interaction/security/authentication/ect.
Matt
@Misaiah
Apr 25 2017 06:07
....great....as if things weren't confusing enough lol
JD Tadlock
@jdtdesigns
Apr 25 2017 06:07
so it's a "full stack" framework
Matt
@Misaiah
Apr 25 2017 06:07
haha....Im sure I will start to understand at some point
so Larvel is incorporated in PHP?
JD Tadlock
@jdtdesigns
Apr 25 2017 06:08
Laravel is php lol
Matt
@Misaiah
Apr 25 2017 06:08
aaaahahhahaha!!! Sorry @jdtdesigns ....dont hate me
JD Tadlock
@jdtdesigns
Apr 25 2017 06:08
no worries
Matt
@Misaiah
Apr 25 2017 06:08
I really do appreciate your help! Thanks @jdtdesigns !!!
CamperBot
@camperbot
Apr 25 2017 06:08
misaiah sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Apr 25 2017 06:09
You're welcome ;)
If you're expecting to be up and running quick with Laravel, you're in for a sad reality lol
Matt
@Misaiah
Apr 25 2017 06:09
Im out for the evening. Have a fantastic rest of your day @jdtdesigns !
JD Tadlock
@jdtdesigns
Apr 25 2017 06:10
You too ;)
Matt
@Misaiah
Apr 25 2017 06:11
lol yeah, im certain theres a ton to it just like anything else in web dev....Thanks again!!!
Bogdan
@oblanao
Apr 25 2017 06:46
Hello, guys! Is it OK to use .eval() function for JS calculator ? I know it is not recommended but I want to know if you guys used it or not
kirbyedy
@kirbyedy
Apr 25 2017 06:47
not recommended, but some people used it, so I guess its ok
Bogdan
@oblanao
Apr 25 2017 06:48
@kirbyedy if input is restricted to only numbers, wouldn't that make eval() safe?
numbers and +,-,* etc. that is
thinkC
@thinkC
Apr 25 2017 06:48
Hi Guys...I',m trying to console log twitchtv api ...using data.logo but says "cannot read property logo"
Bogdan
@oblanao
Apr 25 2017 06:49
@thinkC post a link to your pen please
Bogdan
@oblanao
Apr 25 2017 06:52
@thinkC just looked through my TWITCH project, and please be aware that if the user is streaming, then logo is actually data.stream.channel.logo
thinkC
@thinkC
Apr 25 2017 07:01
@oblanao says cannot read property 'channel' of undefined
Bogdan
@oblanao
Apr 25 2017 07:03
@thinkC please post a link to your pen
thinkC
@thinkC
Apr 25 2017 07:03
blob
blob
I'm running it on my text editor....
@oblanao did u see the error...I get the data from d api , but cannot access them
Bogdan
@oblanao
Apr 25 2017 07:06
@thinkC try to use https://wind-bow.gomix.me/twitch-api/ instead of the normal https://api.twitch.tv/kraken
for ajax url
twitch tv api now requires a key
thinkC
@thinkC
Apr 25 2017 07:06
ok....will try that now ...thanks
Bogdan
@oblanao
Apr 25 2017 07:06
np
and also, you missed a letter at "var y = data.stream.channel.logo" , not var y=data.steam.channel.logo
thinkC
@thinkC
Apr 25 2017 07:09
oh....checking...
Khoa Le
@Zacele
Apr 25 2017 07:12
hey guys
could you check at generate quote project
Why is not generate anything
thinkC
@thinkC
Apr 25 2017 07:16
@oblanao do u know why https://wind-bow.gomix.me/twitch-api/freecodecamp cannot display the json file ?
blob
Khoa Le
@Zacele
Apr 25 2017 07:33
I have recreate the Quote Generator website
Daniel Madej
@dmadej
Apr 25 2017 07:35
Hi everyone, could someone help me with my portfolio page, I can't get the navigation bar to change links as I scroll through the page. https://codepen.io/dmadej/pen/WjxPOd
thinkC
@thinkC
Apr 25 2017 07:46
thanks @kirbyedy
CamperBot
@camperbot
Apr 25 2017 07:46
thinkc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2038 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
thinkC
@thinkC
Apr 25 2017 07:52
@kirbyedy to console.log display_name...I used data.channels.display_name but says cannot read property display_name
pls can u check?
kirbyedy
@kirbyedy
Apr 25 2017 07:56
that should be correct
thinkC
@thinkC
Apr 25 2017 07:57
surprise my self
thinkC
@thinkC
Apr 25 2017 08:08
pls can anyone check out why data.channels.display_name does not work for this api url ?
thinkC
@thinkC
Apr 25 2017 08:29
guys it's working now
Neil
@NNeil1
Apr 25 2017 09:05
this css got me angry rn
example what I need it like - https://codepen.io/anon/pen/aWmgaZ
so my nav doesn't overlap my content
probs spent around 6 hours trying figure out solution
more chance of me winning the lottery than solving this
kirbyedy
@kirbyedy
Apr 25 2017 09:08
@NMC96 and what is the question ?
or you are just moaning :D
Neil
@NNeil1
Apr 25 2017 09:08
im moaning
either that or id end up breaking something lmao
kirbyedy
@kirbyedy
Apr 25 2017 09:08
ah ok :laughing:
Neil
@NNeil1
Apr 25 2017 09:09
who doesn't like a challenge tho
ME THATS WHO
all seriousness I'm probs gonna leave this till tomorrow or some time in the future
Neil
@NNeil1
Apr 25 2017 09:10
I dont wanna use any frameworks
this is a personal project
so hand coding every single thing
down to the respoinsive media points
that's what is stopping me using bootstrap or something
Keon Samuel
@keonsam
Apr 25 2017 09:15
how do I make the simon game things?
Neil
@NNeil1
Apr 25 2017 09:23
@keonsam gonna have a look later when I get back to PC. Although that looks like a nav hide system
Keon Samuel
@keonsam
Apr 25 2017 09:24
I am thinking about the design.
nvm I think I can figure it out.
Czpl
@Czpl
Apr 25 2017 09:32
twitch api project done! https://codepen.io/czpl/full/BRLEwX/
opinions? :D
finally finished my random quotes machine.
i can't see quotes >_<
Princila
@princila
Apr 25 2017 09:44
Hi Guys
I have some code written inside document .ready. I also have written a piece of code outside of it. But the outside code gets executed first and it depends on the code written inside document.ready. What do I do ?
Cengiz Gonen
@cetico
Apr 25 2017 09:45

If i keep a key button like A or S pressed down all the time, eventually the transform effect (yellow border appearing) doesn't go away. If i simply tap A a class of Playing is added and then removed. I noticed that if i comment out a certain statement it works like it's supposed to. Why?

https://codepen.io/anon/pen/dWpxqg

@princila can you post a snippet of it?
Czpl
@Czpl
Apr 25 2017 09:49
because when the statement is true function reaches return;
Keon Samuel
@keonsam
Apr 25 2017 09:49
@Czpl how did you learn to design so good?
h1tag
@h1tag
Apr 25 2017 09:50
@Czpl nice design! I like the animations :+1: I would like to see an animation for the transition from all to online, to offline ... maybe
Cengiz Gonen
@cetico
Apr 25 2017 09:51
@Czpl i don't understand. It's there to filter out all the event firing. It works but just doesn't work if i hold A instead of tapping it.
@Czpl remove comments to try
RakeshNerkar
@Rakesh18754
Apr 25 2017 10:00
what the difference between REST API and AJAX?
Bogdan
@oblanao
Apr 25 2017 10:02
Hi guys, working on the JS calculator project. Please take a look at my pen: https://codepen.io/oblanao/full/WjGBdE/ Just want to say a few things: Firstly, I used the eval() function but input is limited to digits, numbers and operators. Secondly, I created a function to check if last number has any decimal point (.) so no multiple decimals in the same number allowed (please test). Finally, I also used a function to trim the result if it is longer than 13 characters. Please also test. I know it is a lot to ask, but please, if you have the time, give me some feedback. Thanks all
h1tag
@h1tag
Apr 25 2017 10:09
@oblanao I like the design. All the functions you mentioned in ur post are working fine. Good job! :+1:
Princila
@princila
Apr 25 2017 10:09
@hyrosian I get this error btw
Uncaught TypeError: el.getContext is not a function
at Skycons.add (https://rawgit.com/darkskyapp/skycons/master/skycons.js:660:21)
at Skycons.set (https://rawgit.com/darkskyapp/skycons/master/skycons.js:680:12)
at pen.js:151:7
Bogdan
@oblanao
Apr 25 2017 10:10
@fortMaximus thanks! Glad to hear it works for you as well
CamperBot
@camperbot
Apr 25 2017 10:10
oblanao sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 741 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 25 2017 10:11
@oblanao I've been told there are some other limitations that are related to eval too (if you like to handle them too), like: 2--2
this is the one I know
Bogdan
@oblanao
Apr 25 2017 10:13
@fortMaximus OK, I will create a function that won't allow multiple consecutive operators
Jesse Jafa
@awareness481
Apr 25 2017 10:58
I'm clueless as to what I should be doing to center horizontally the elements in my <div id="#main>. Could please provide any directions? http://codepen.io/tstusr/pen/ZKpXQx?editors=1111
heroiczero
@heroiczero
Apr 25 2017 10:59
@tstusr441 here are some examples of centering things: https://www.w3.org/Style/Examples/007/center.en.html
Jesse Jafa
@awareness481
Apr 25 2017 11:01
Should I be trying to center all the elements together or each individually? I've tried using #main { margin: 0 auto;} and #main {text-align: center;} which both seemed to do nothing
@heroiczero Damn, ignore my question, I was using .main instead of #main :/
It worked with just text-align: center; ...
heroiczero
@heroiczero
Apr 25 2017 11:03
div {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<div>
something like this @tstusr441
@tstusr441 you need a width to center a block
Jesse Jafa
@awareness481
Apr 25 2017 11:05
@heroiczero I was using the class selector in my css code instead of the id selector. Instead of a #main I used .main carelessly and nothing was working. Thanks a lot for your help though, the link you provided and code were very helpful :)
CamperBot
@camperbot
Apr 25 2017 11:05
tstusr441 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @heroiczero |http://www.freecodecamp.com/heroiczero
aceroAD
@aceroAD
Apr 25 2017 11:15
hi, i will like to know why my collapse menu doest target my menu when i click the button http://codepen.io/aceroAD/pen/dWpMZo
Sandesh Shrestha
@UnovaXan
Apr 25 2017 11:27
$('document').ready(function () {
                $('#get-quote').on('click', function(e) {
                    $.ajax({
                        url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
                        dataType: 'jsonp',
                        success: function(response) {
                            console.log(response);
                        },

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

            });
Anyone know what's wrong with the code? I get the object when i fire it right from the address bar on the browser. But when i use the button only the fail() runs
the request status return 200 ok
The site returns valid json as well. I verified through jsonlint
Czpl
@Czpl
Apr 25 2017 11:28
@aceroAD you need jQuery and Bootstrap scripts
@UnovaXan to use jsonp from that api you need &_jsonp=myCallback parameter
Sandesh Shrestha
@UnovaXan
Apr 25 2017 11:33
@Czpl how do i set that up?
Czpl
@Czpl
Apr 25 2017 11:34
that api basically returns a function (called myCallback in that case)
aceroAD
@aceroAD
Apr 25 2017 11:34
@Czpl i have them now and they still dont work
@aceroAD it should work, I tested it. Just go to the settings on top and in javascript tab quick-add jquery and bootstrap scripts
Keon Samuel
@keonsam
Apr 25 2017 11:36
https://codepen.io/keonsamuel/pen/xdRxVb someone tell me how to get the blue square inside the main circle.
aceroAD
@aceroAD
Apr 25 2017 11:37
@Czpl thank u, it was that i have them in wrong order
CamperBot
@camperbot
Apr 25 2017 11:37
aceroad sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @czpl |http://www.freecodecamp.com/czpl
Czpl
@Czpl
Apr 25 2017 11:39
@keonsam border-top-left-radius: 100%; for #first-box
Keon Samuel
@keonsam
Apr 25 2017 11:41
@Czpl man you are good thanks.
CamperBot
@camperbot
Apr 25 2017 11:41
keonsam sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @czpl |http://www.freecodecamp.com/czpl
Sandesh Shrestha
@UnovaXan
Apr 25 2017 11:43
@Czpl i'm still getting the same error
@czpl changed the dataType to json
got the results
Thanks! :D
CamperBot
@camperbot
Apr 25 2017 11:44
unovaxan sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @czpl |http://www.freecodecamp.com/czpl
Sandesh Shrestha
@UnovaXan
Apr 25 2017 11:44
I would still like to know how to work with the other API though
i tried 3 apis and got the same error on all of them
JD Tadlock
@jdtdesigns
Apr 25 2017 11:52
@UnovaXan what api are you trying to use?
Federico Dente
@fez994
Apr 25 2017 12:00
HI guys, i'm working on the tic tac toe project http://codepen.io/fez994/pen/GmjBEy and i have this problem: sometimes the AI puts multiple "X" or "O" into the grid when it should just put one, can any of you help me out figuring out why?
I don't know why but sometimes it generates multiple random numbers, when it should generate just 1
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:00
are you keeping track of player turns?
Federico Dente
@fez994
Apr 25 2017 12:01
@Radlerz1 What do you mean? Simple after the player choose where to put "X" or "O" i execute the aiMove function
then is player turn again
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:02
i did something like this
if I am "x" for eg: and place a move playersTurn variable would equal "O". when "O" makes a move playersTurn would equal "O"; so in a if statement after adding that you could put if playersTurn equals "x" which is you than it allows you to place a move than if playersTurn equals Ai than ai places a move
kind of bad at explaining things but thats what I did.
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:07
if I am "X" for eg: and place a move playersTurn variable would equal "O". when "O" makes a move playersTurn would equal "X". **
Federico Dente
@fez994
Apr 25 2017 12:10
mm i understand what you mean but doesn't solve the problem
The problem is: The ai should generate ONE random number ( Going from 1 to 9) . I have 9 <td> in my table, each one with an id going from id = "1" to id = "9"
Then the funciton loop throught the table until it reach the td with the id of the same value of the number generated
If the <td> is empty (Doesn't have an "X" or "O" in it) it will place the "X" , else, it start all over again until it find an empty <td>
The main problem is that sometimes it generates multiple numbers not just one. With console.log(random) you can see exactly what i mean
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:18
do you have an array of numbers?
Federico Dente
@fez994
Apr 25 2017 12:19
Nope, the random number is generated randomly with the function
function generateRandomNumber() {
    random = Math.floor(Math.random() * 9) + 1;
}
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:19
make an array
arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9,]
than generate the numbers from there. that may fix it
aceroAD
@aceroAD
Apr 25 2017 12:21
why when i float one div it goes out off their parent div?
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:21
im not sure honestly aha Im on an ipad. hard to read your code
Federico Dente
@fez994
Apr 25 2017 12:22
@Radlerz1 what difference should it make? it's always randomly generated, nothing should change
van someone tell me how to put that div insde its parent?
Alexander Domikov
@AlexanderDom
Apr 25 2017 12:25
@aceroAD when you div is floating you need something to reset tihs float, for exemple clearfix on parent or clear css attribute on a next element
aceroAD
@aceroAD
Apr 25 2017 12:26
the clear i have it, clearfix no, thank you. i didnt know that
Alexander Domikov
@AlexanderDom
Apr 25 2017 12:27
you're welcome bootstrap has a class for it https://v4-alpha.getbootstrap.com/utilities/clearfix/
aceroAD
@aceroAD
Apr 25 2017 12:28
now my div is inside its parent but no inline with the other div :(
Czpl
@Czpl
Apr 25 2017 12:40
use bootstrap grid
Alexander Domikov
@AlexanderDom
Apr 25 2017 12:44
@aceroAD i gonna see that
omarraza
@omarraza
Apr 25 2017 12:55
In bootstrap are container, row and col all flexbox's?
I'm trying to follow the documentation for the grid system, but giving my row align-items-center or my col justify-content-center doesn't seem to be doing anything
Alexander Domikov
@AlexanderDom
Apr 25 2017 13:02
if your bloc haven't display: flex or inline-flex it's normal
omarraza
@omarraza
Apr 25 2017 13:04
so you still need to set the display: flex ? The documentation is strangely worded then, makes it sound like all these classes are already flexbox containers
Srinivas
@21stnomad
Apr 25 2017 13:09

$("#right-well").children().css("color", "orange");

SyntaxError: Unexpected end of input

anyone help me out, please?

gulptech
@gulptech
Apr 25 2017 13:10
@aceroAD you should only be using 1 of the bootstrap css...there is no need to have bootstrap 3 and bootstrap 4
Srinivas
@21stnomad
Apr 25 2017 13:12

$("#right-well").children().css("color", "orange");
but output is showing : SyntaxError: Unexpected end of input

i am struck here..please help me out..

Paradox5
@Paradox5
Apr 25 2017 13:14
Color: orange
Not comma
And you dont need the quotes
Wait thats jQuery
Hold up a second
May i jusy have a link
Srinivas
@21stnomad
Apr 25 2017 13:16
@Paradox5
https://www.freecodecamp.com/challenges/target-the-children-of-an-element-using-jquery#?solution=%0Afccss%0A%20%20%24(document).ready(function()%20%7B%0A%20%20%20%20%24(%22%23target1%22).css(%22color%22%2C%20%22red%22)%3B%0A%20%20%20%20%24(%22%23target1%22).prop(%22disabled%22%2C%20true)%3B%0A%20%20%20%20%24(%22%23target4%22).remove()%3B%0A%20%20%20%20%24(%22%23target2%22).appendTo(%22%23right-well%22)%3B%0A%20%20%20%20%24(%22%23target5%22).clone().appendTo(%22%23left-well%22)%3B%0A%20%20%20%20%24(%22%23target1%22).parent().css(%22background-color%22%2C%20%22red%22)%3B%0A%24(%22%23right-well%22).children().css(%22color%22%2C%20%22orange%22)%3B%0Afcces%0A%0A%3C!--%20Only%20change%20code%20above%20this%20line.%20--%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch3%20class%3D%22text-primary%20text-center%22%3EjQuery%20Playground%3C%2Fh3%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23left-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22left-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target1%22%3E%23target1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target2%22%3E%23target2%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target3%22%3E%23target3%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23right-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22right-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target4%22%3E%23target4%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target5%22%3E%23target5%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target6%22%3E%23target6%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
gulptech
@gulptech
Apr 25 2017 13:16
@21stnomad there is nothing wrong with that line. Put up a codepen please.
@21stnomad you removed }); from the end of the document.ready function
aceroAD
@aceroAD
Apr 25 2017 13:19
thank you everyone
omarraza
@omarraza
Apr 25 2017 13:20
@21stnomad don't paste the link, just paste the code. And if you wrap it in ``` above and below it will display nicely in here
like so:
my code here
gulptech
@gulptech
Apr 25 2017 13:21
@aceroAD if you have bootstrap...you could be using its container system to do all that
@omarraza i know bootstrap 4 is using flexbox
omarraza
@omarraza
Apr 25 2017 13:24
@gulptech so container, row and col are already display: flex ? I tried not including that and it still doesn't work
Srinivas
@21stnomad
Apr 25 2017 13:24
@omarraza thanks...i will do it like that only now on...
CamperBot
@camperbot
Apr 25 2017 13:24
:cookie: 267 | @omarraza |http://www.freecodecamp.com/omarraza
21stnomad sends brownie points to @omarraza :sparkles: :thumbsup: :sparkles:
gulptech
@gulptech
Apr 25 2017 13:25
@omarraza do you have a pen somewhere ?
omarraza
@omarraza
Apr 25 2017 13:25
Here's the pen. Right now the elements are in one row, and the padding seems too large (i thought it was only 15px default). Centering is also not working
http://codepen.io/omarraza/pen/BRQoxP?editors=1000
aceroAD
@aceroAD
Apr 25 2017 13:26
@gulptech i know but i dont like how it works with row the col. and at the end i have to change many things of the css
gulptech
@gulptech
Apr 25 2017 13:28
brb...need to work for 1 sec
2 things u need 1. html,body css part, 2, change your .col to .container add 100% height, and display:flex not flexbox
KalnuErelis
@KalnuErelis
Apr 25 2017 13:44
Please help, i cannot see the problem "Random Quote Machine". I'm not getting the quote. https://codepen.io/KalnuErelis/full/QvGbEp/
omarraza
@omarraza
Apr 25 2017 13:48
@gulptech ah yeah silly me, flex not flexbox -_- however, I did put in those changes and still no dice
gulptech
@gulptech
Apr 25 2017 13:49
html,body {height:100%;}
.container {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
omarraza
@omarraza
Apr 25 2017 13:50
what's the difference between html, body { ...} and body {...] ?
that worked!
@gulptech thank you
CamperBot
@camperbot
Apr 25 2017 13:53
omarraza sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @gulptech |http://www.freecodecamp.com/gulptech
omarraza
@omarraza
Apr 25 2017 14:00
@gulptech Its still not clear to me why I needed to set the height of html for the flexbox to work. Isn't body the only portion that is seen/interacted with by an end-user on a webpage?
Keon Samuel
@keonsam
Apr 25 2017 14:01
how would you center the middle circle in this app?
omarraza
@omarraza
Apr 25 2017 14:02
Inspecting the page, without having html height = 100% I can see that the region is tiny and therefore so all child elements will be. But it doesn't make sense as to why. I guess I never thought of the html element as being something that needed any styling applied to it
3gimpfingers
@3gimpfingers
Apr 25 2017 14:03
@WillTheCruzan Sorry I ran off. Did you get it figured out?
Khoa Le
@Zacele
Apr 25 2017 14:35
really frustrated in doing the weather challenge website
I have the correct key API
but it keep set that error 401 occur
Tom
@moT01
Apr 25 2017 14:38
@Zacele got a pen?
Khoa Le
@Zacele
Apr 25 2017 14:39
haven't put on pen yet
working at my laptop
stuck for almost a day
Tom
@moT01
Apr 25 2017 14:39
paste the js up
Khoa Le
@Zacele
Apr 25 2017 14:40
have to put on the demo code to make sure it work then I'll tweak it later
var getLocation = function (data) {
    var lat=data.lat;
    var countryCode = data.countryCode;
    var lat= data.lat;
    var lon=data.lon;
    var city= data.regionName;
    //The URL is missing imp
     url = 'http://api.openweathermap.org/data/2.5/weather?' + 'lat=' + lat + '&lon=' + lon + '&APPID=fb063f0689099c757d885cb93e0a077c';

var units = 'imperial';
// Function to get the Weather info and display it.
  getWeather = function (data) {
    var temp = data.main.temp;
    var tempUnit = units === 'metric' ? 'C' : 'F';
    var windUnit = units === 'metric' ? ' meters/s' : ' miles/h';
    var description = data.weather[0].description;
    var code = data.weather[0].icon;
    var wspeed = data.wind.speed;
    // Create custom HTML to display all the information gathered.
    var html = '<img src="http://openweathermap.org/img/w/' + code + '.png" alt="Weather Icon">' + '<p> ' + Math.round(temp) + ' ' + tempUnit + ', ' + description + '<br> Wind Speed: ' + wspeed + windUnit + '</p><p>' + city + ', ' + state + '</p>'
    // Displays the custom HTML
    $('#weather').html(html)
// Checks what kind style of temperature was used for dynamic background image.
    switch (tempUnit) {
      case 'F':
        var temps = [90, 70, 32]
        break;
      case 'C':
        temps = [32, 21, 0]
        break;
    }
    // Array of background images.
    var imgs = ['url("https://i.ytimg.com/vi/BQxBh-Oen1w/maxresdefault.jpg")', 'url("http://desertairproducts.com/application/files/2114/3352/6836/desert-palms.jpg)', 'url("http://i.imgur.com/voCuONs.jpg")', 'url("http://i.imgur.com/5tFHSKa.jpg")']
    // Select custom background image according to temperature range.
    if (temp >= temps[0]) {
      $('body').css('background-image', imgs[0])
    } else if (temp < temps[0] && temp >= temps[1]) {
      $('body').css('background-image', imgs[1])
    } else if (temp < temps[1] && temp >= temps[2]) {
      $('body').css('background-image', imgs[2])
    } else if (temp < temps[2]) {
      $('body').css('background-image', imgs[3])
    }
  }
  // Calls the Weather API
  $.getJSON(url + 'imperial', getWeather, 'jsonp')
}
// When the documet finished loading call the Location API
$(document).ready(function () {
  $.getJSON('http://ip-api.com/json', getLocation, 'jsonp')
  // Handler for opetion between Metric and Imperial style temperature
  $('input[type=radio][name=farenheit-celcius]').change(function () {
    if ($('#f').is(':checked')) {
      units = 'imperial'
    } else {
      units = 'metric'
    }
    $.getJSON(url + units, getWeather, 'jsonp')
  })
})
Khoa Le
@Zacele
Apr 25 2017 14:45
most of it from the demoCode
struggle my own code because my API key is till not working
Tom
@moT01
Apr 25 2017 14:51
i dunno man
what did you start with, ...was the get location working then stopped when you added the get weather?
Khoa Le
@Zacele
Apr 25 2017 14:58
the console just said that my URL is unauthorized
and the app just didn't show me anything else
Tom
@moT01
Apr 25 2017 14:59
will the url work when you add 'imperial' at the end like that?
Khoa Le
@Zacele
Apr 25 2017 15:01
I deleted that and still giving me that unauthorized error
Tom
@moT01
Apr 25 2017 15:01
from both spots
you call the getJSON with the url, and then the getWeather() function, ...but the url doesn't have the lat and long filled in yet?
Khoa Le
@Zacele
Apr 25 2017 15:07
of course it have
we call the ip-api to extract the lon and lat first
Tom
@moT01
Apr 25 2017 15:12
k
maybe remove jsonp?
you able to console.log the location data?
gulptech
@gulptech
Apr 25 2017 15:12
@Zacele you have a few things wrong
some of your images are not available vie https
add this to the end of your url: &units= so it won't fail with the wrong api code (which is why you get a 401)
gulptech
@gulptech
Apr 25 2017 15:18
if you look at the link in console...you see that is adds imperial to the app id
@Zacele here are your steps to fix
1. Fix your images (make sure they can be retreived via https) (it seems to work with http..but only after i view the image in a seperate window)
2. Add &units= to the end of the url = line (after your app id)
3. You city should point to  data.city;
4. You are missing:  var state = data.region;  after the var city = data.city (once changed)
WillTheCruzan
@WillTheCruzan
Apr 25 2017 15:41
how do I make the actual portfolio part of my portfolio page?
Sandesh Shrestha
@UnovaXan
Apr 25 2017 15:42
@WillTheCruzan have a section that says about yourself
another for the works you've done
if you don't have any currently you can use placeholders
and another section to your social media links
WillTheCruzan
@WillTheCruzan
Apr 25 2017 15:47
nvm
Gulsvi
@gulsvi
Apr 25 2017 15:50

@Zacele You need to start simple with your own code. Those misspelled comments are in several codepen weather projects.

// get the location when the document is ready
$(document).ready(function() {
  getLocation();
});

// Get the location and then get the weather when complete
function getLocation() {
  $.getJSON('http://ip-api.com/json', getWeather);
}

function getWeather(position) {
  // the position variable has all the location data from ip-api.com
  console.log(position);

  // add the lat and lon to the URL
  var url = 'http://api.openweathermap.org/data/2.5/weather?' + 
            'lat=' + position.lat + '&lon=' + position.lon + 
            '&APPID=fb063f0689099c757d885cb93e0a077c&units=imperial'

  // use getJSON with the URL above to get the weather data and study the JSON in the console to parse it
  $.getJSON(url, function(weatherData) {
    console.log(weatherData);

    // Basic example of showing the temperature in your city
    $('body').append('The temperature in ' + weatherData.name + ' is ' + weatherData.main.temp + 'F');
  });
}

This is a very basic starter, learn how to parse the data that comes back and how to display it on your web page. Go one step at a time from there.

Tom
@moT01
Apr 25 2017 15:52
you saying he copied
Gulsvi
@gulsvi
Apr 25 2017 15:52
Search for this in codepen: // When the documet finished loading call the Location API
Christina
@geekyinsights
Apr 25 2017 15:52
I'm trying to make a random quote generator using the quotes by design api. I've looked up a few tutorials on it and I'm still not sure what I'm doing wrong. I would really appreciate a second pair of eyes.
<body>
  <div class="container"> 
    <div class ="row justify-content-center">
      <div class="quote-box container">
        <div class="row" id=view-quote>

        </div>

        <div class="row justify-content-between btn-row ">
              <div class="col-md-4">
                <button type="button" class="btn btn-primary"> tw </button>
               </div>
              <div class="col-md-4">
                <button class="btn btn-primary" id=new-quote> Get New Quote </button>
              </div>
          </div>
      </div>
    </div>  
  </div>
 </body>
$("#new-quote").on('click',function(){

  $.ajaxSetup({cache:false});
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data) {
  $("#view-quote").html(data[0].content + "— " + data[0].title)

  });

});
Tom
@moT01
Apr 25 2017 15:53
ill take that as a yes
@geekyinsights console.log some stuff, ...see where you're getting
put one right after the new-quote click, and see if it shows up, ..after that works, put one after your .getjson, and when that doesn't show up you know where things are going wrong
Sandesh Shrestha
@UnovaXan
Apr 25 2017 15:56
@geekyinsights I had the same problem. With the API you're currently using you need to have a callback function. Use this API instead.
https://random-quote-generator.herokuapp.com/
Jorge
@flawedLogic506
Apr 25 2017 15:56
hey wazzup guys, good morning/afternoon ... night? possibly?
Kevin Robertson
@kevnbot
Apr 25 2017 15:56
hello, im working on the build a random quote machine project and I am having a lot of trouble figuring out how to tweet out the current quote. can someone point me to some documentation or offer some help?
you can get the quote text with the json object of the api you used
Tom
@moT01
Apr 25 2017 15:57
@geekyinsights there's some good examples in their api docs https://quotesondesign.com/api-v4-0/
Gulsvi
@gulsvi
Apr 25 2017 15:58
@geekyinsights Your code works great for me - you might want to add quotes around your ID names in your HTML - and use https for the URL in your getJSON call.
$("#new-quote").on('click', function() {
  $.ajaxSetup({cache: false});
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data) {
    $("#view-quote").html(data[0].content + "— " + data[0].title)
  });
});
Morning @OrangeKulture :wave:
Jorge
@flawedLogic506
Apr 25 2017 16:00
kicking it from early in the morning, i see .. @SkyCoder01
Gulsvi
@gulsvi
Apr 25 2017 16:00
9am :) I've been up
Christina
@geekyinsights
Apr 25 2017 16:01
@moT01 I @skycoder01 @UnovaXan Thanks. It was the missing "s" on the http call.
CamperBot
@camperbot
Apr 25 2017 16:01
geekyinsights sends brownie points to @mot01 and @skycoder01 and @unovaxan :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @unovaxan |http://www.freecodecamp.com/unovaxan
:star2: 1184 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 636 | @mot01 |http://www.freecodecamp.com/mot01
Jorge
@flawedLogic506
Apr 25 2017 16:01
haha nice! yeah im more productive in the mornings.. that's until my dog starts acting crazy wanting me to take him out on walks :anger:
Gulsvi
@gulsvi
Apr 25 2017 16:01
lol, I wish I had a dog
Jorge
@flawedLogic506
Apr 25 2017 16:01
what about me geeky? now i get to watch all of these guys eating brownie while i have nothing ...
Paradox5
@Paradox5
Apr 25 2017 16:02
I prefer cats myself
Gulsvi
@gulsvi
Apr 25 2017 16:02
That's what I have at the moment...easier to take care of
Paradox5
@Paradox5
Apr 25 2017 16:02
But I do love walking
Gulsvi
@gulsvi
Apr 25 2017 16:02
dog back home with the family though
Paradox5
@Paradox5
Apr 25 2017 16:02
Hmmm
Jorge
@flawedLogic506
Apr 25 2017 16:02
ohh yah! i love this dude to death .. dogs are awesome
Paradox5
@Paradox5
Apr 25 2017 16:02
Hello Sky hello Jorge
How are yall doing
Jorge
@flawedLogic506
Apr 25 2017 16:02
whats happening dude? all good?
Paradox5
@Paradox5
Apr 25 2017 16:03
Im good
Gulsvi
@gulsvi
Apr 25 2017 16:03
Feeling better?
Paradox5
@Paradox5
Apr 25 2017 16:03
With enough advil and benedril you do feel better
Gulsvi
@gulsvi
Apr 25 2017 16:04
no fun
Paradox5
@Paradox5
Apr 25 2017 16:04
Nope
Has anything interesting happened
Jorge
@flawedLogic506
Apr 25 2017 16:05
trying to find a pic of my dog .. i cant be bother with taking one and connecting the phone to the computer and all ..
Gulsvi
@gulsvi
Apr 25 2017 16:06
mail it to yourself?
gulptech
@gulptech
Apr 25 2017 16:06
@OrangeKulture email the pic from your phone...who uses cable anymore
Gulsvi
@gulsvi
Apr 25 2017 16:06
^^
iPhone though...if I want to record anything I do, have to have it plugged in... maybe I'll switch to Android next
I noticed codepen won't let you start a new project over HTTP anymore. Have to save it first and then switch to HTTP after that.
Paradox5
@Paradox5
Apr 25 2017 16:08
Yea
"Codepen is going all https"
Jorge
@flawedLogic506
Apr 25 2017 16:08
yeah .. emailing might be good its fine, i found one when he was a pup, that's a good one
ohh really? thats recent tho, right
Gulsvi
@gulsvi
Apr 25 2017 16:09
just get one off of google images, we won't know the difference lol
Paradox5
@Paradox5
Apr 25 2017 16:09
yea
Jorge
@flawedLogic506
Apr 25 2017 16:09
at least i didnt notice
so you are auto directed to the https ?
Gulsvi
@gulsvi
Apr 25 2017 16:10
yes: http://codepen.io/pen/ becomes https://codepen.io/pen/
Jorge
@flawedLogic506
Apr 25 2017 16:11
oh yeah! that's right .. awesome
Gulsvi
@gulsvi
Apr 25 2017 16:11
it's early....
still
Jorge
@flawedLogic506
Apr 25 2017 16:12
fckn weather app :joy:
Gulsvi
@gulsvi
Apr 25 2017 16:12
lol
Paradox5
@Paradox5
Apr 25 2017 16:12
Oh thats unfortunate for weather apps
Http support only for free
Gulsvi
@gulsvi
Apr 25 2017 16:13
Guess it's been a week since they did that: https://blog.codepen.io/2017/04/19/update-2-codepen-going-https/
gulptech
@gulptech
Apr 25 2017 16:15
That is why my weather app works with https and http :)
Gulsvi
@gulsvi
Apr 25 2017 16:16
had to rewrite mine :/
Paradox5
@Paradox5
Apr 25 2017 16:16
I have a new favorite font
Dosis
Keon Samuel
@keonsam
Apr 25 2017 16:17
heyllo
Paradox5
@Paradox5
Apr 25 2017 16:17
Hey Keon
Hows your day doing
Keon Samuel
@keonsam
Apr 25 2017 16:18
hey remember that?
Paradox5
@Paradox5
Apr 25 2017 16:18
Ofc i do
Keon Samuel
@keonsam
Apr 25 2017 16:18
lol
Gulsvi
@gulsvi
Apr 25 2017 16:18
how's tic tac toe going
Paradox5
@Paradox5
Apr 25 2017 16:19
Toe tic tacing
Keon Samuel
@keonsam
Apr 25 2017 16:19
I created a random computer AI then skip it.
alpox
@alpox
Apr 25 2017 16:19
Tic-tac-tic-tac---OUCH MY TOE
Gulsvi
@gulsvi
Apr 25 2017 16:19
lol, I broke my toe last week. True for me
Paradox5
@Paradox5
Apr 25 2017 16:20
Ouch
Toe breaks arnt fun
Gulsvi
@gulsvi
Apr 25 2017 16:20
sucks, just have to ride it out 4-6 weeks
alpox
@alpox
Apr 25 2017 16:20
@SkyCoder01 :o oh sry
Paradox5
@Paradox5
Apr 25 2017 16:20
I recommend 50ccs of hot cocoa and good movie
Gulsvi
@gulsvi
Apr 25 2017 16:21
advil for now, beer on the weekends
alpox
@alpox
Apr 25 2017 16:21
Lots of coding
gulptech
@gulptech
Apr 25 2017 16:21
i was going to say whisky
why does my internet slow down as soon as i load kodi @#$@#$#
Paradox5
@Paradox5
Apr 25 2017 16:24
@€€
¿^¤©
Kevin Robertson
@kevnbot
Apr 25 2017 16:25
im still having trouble getting the quote to show up in the tweet. here is what I have
<div>
<!--Changes size of button-->
<div class="col-xs-4">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?status=" +encodeURIComponent('currentQuoteTweet') target="_blank"><button class="btn btn-block btn-social"><i class="fa fa-twitter"></i></button></a>
</div>
</div>
Gulsvi
@gulsvi
Apr 25 2017 16:26
@kevnbot Are you using the twitter widget .js code too?
Paradox5
@Paradox5
Apr 25 2017 16:26
Ugh the tweet button made me so maf
It took me longer to get the tweet button working then it took me to get the quote machne working
Kevin Robertson
@kevnbot
Apr 25 2017 16:27
I guess no, I dont think I have anything in the json file
Gulsvi
@gulsvi
Apr 25 2017 16:27
nvm, this is javascript in your HTML: encodeURIComponent('currentQuoteTweet')
Kevin Robertson
@kevnbot
Apr 25 2017 16:27
thats the same boat im in, ive been stuck for over a month. taking my weekly stab at it.
Paradox5
@Paradox5
Apr 25 2017 16:28
Im going to be working though a tragedy with my wikipedia viewer when I get home
gulptech
@gulptech
Apr 25 2017 16:28
&text=
Gulsvi
@gulsvi
Apr 25 2017 16:28
can't put javascript in your HTML and you can't have a button inside a link <a>
Kevin Robertson
@kevnbot
Apr 25 2017 16:29
uhg alright. im so confused. Ive looked at like 4 different ways to try and make this work. its not making sense
Gulsvi
@gulsvi
Apr 25 2017 16:29

Start with this HTML:

<a class="btn btn-block btn-social" href="https://twitter.com/intent/tweet?status=" target="_blank"><i class="fa fa-twitter"></i></a>

Then use javascript to update the HREF value.

Kevin Robertson
@kevnbot
Apr 25 2017 16:29
ok.
so thatll be a function?
gulptech
@gulptech
Apr 25 2017 16:30
I use this --> $('#tweetThis').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + data.quote + '" -- ' + data.author));
Kevin Robertson
@kevnbot
Apr 25 2017 16:30
how do I use javascript to set this up?
just that single line?
Gulsvi
@gulsvi
Apr 25 2017 16:30
If you're using jQuery, you would use
$('.btn-social').attr('href', 'https://twitter.com/intent/tweet?status=' + encodeURIComponent(currentQuoteTweet));
Needs to be in the same function where you write the quote to the page
Going to get more coffee... :p
Paradox5
@Paradox5
Apr 25 2017 16:35
Oh ive made a terrible terrible mistake
Vamp
@the-vampiire
Apr 25 2017 16:41
any idea how to trigger a navtab to be active aside from clicking the tab itself?
Gulsvi
@gulsvi
Apr 25 2017 16:41
@the-vampiire You can add the class "active" to the tab to manually make it active
Vamp
@the-vampiire
Apr 25 2017 16:42
well ya lol
Gulsvi
@gulsvi
Apr 25 2017 16:42
.addClass()
Vamp
@the-vampiire
Apr 25 2017 16:42
hm
but I would then need to remove the current tab active class
Kevin Robertson
@kevnbot
Apr 25 2017 16:43
is this the logic that grabs the current quote to be tweeted out?
Vamp
@the-vampiire
Apr 25 2017 16:43
im so close to getting this working the way I want. im just running into this issue of making the actual tab active. i have the content showing as expected but the tab remains active from the original tab. never changes
Kevin Robertson
@kevnbot
Apr 25 2017 16:43
```
getQuote();
  //$("#newquote").on("click", getQuote());
  $("#newquote").click((e) => getQuote());  

  $("#tweet").on("click", function() {
      window.open("https://twitter.com/intent/tweet/?text=" + $(".quote").text() + " " + $(".author").text());             
  }); 
});
Gulsvi
@gulsvi
Apr 25 2017 16:43
correct, remove the "active" class from the current tab, and then add the "active" class to the one you want to activate.
Vamp
@the-vampiire
Apr 25 2017 16:44
ya the problem here is going to be building a function to do this
because it needs to be dynamic
I tried a few solutions I found of similar questions on SO but none of them worked. i think I am conflicting with the standard behavior (which I dont want to change, just replicate)
Kevin Robertson
@kevnbot
Apr 25 2017 16:45
and the #tweet is what points it to the button?
Tom
@moT01
Apr 25 2017 16:45
@SkyCoder01 what are you trying to show me there, ...someone copied me?
Gulsvi
@gulsvi
Apr 25 2017 16:45
I don't know how you would dynamically associate an image with a tab, but you could use an object to map which image corresponds to each tab and update the object every time you have a new image.
I think that was a fork @moT01 just saw it as I was browsing around
Tom
@moT01
Apr 25 2017 16:46
i would copy it too, its beautiful
Gulsvi
@gulsvi
Apr 25 2017 16:46
had my weather API key revoked recently because it was used by 5 others who copied my weather app, so a little sensitive to this right now.
And yes, it is beautiful :)
Tom
@moT01
Apr 25 2017 16:47
ha, it works, ...not my best
Gulsvi
@gulsvi
Apr 25 2017 16:48
@kevnbot Yes, #tweet would represent an element with the ID of tweet.
Tom
@moT01
Apr 25 2017 16:48
no api key on that one, so im good
but yea, i hear that
so you went and made a new key?
Gulsvi
@gulsvi
Apr 25 2017 16:50
Yeah, I had to generate a new one, then I replaced some letters in it and use .replace() to put them back when building the URL.
Tom
@moT01
Apr 25 2017 16:50
that seems pretty sensitive, aren't you allowed quite a few calls
Fabian Rosen Karlsson
@bablet
Apr 25 2017 16:50
Hello everybody! Is it okay to use the global function eval() in the calculator project or am I supposed to make my own algorithm? Just making sure so I do not fail the project :)
Tom
@moT01
Apr 25 2017 16:50
nice, maybe i should something like that
Gulsvi
@gulsvi
Apr 25 2017 16:51
I think I get 10 calls a minute, had something like 5,000 calls in one day reported so they revoked it
guessing someone screwed up and had a nasty loop
Tom
@moT01
Apr 25 2017 16:51
could be i guess
Gulsvi
@gulsvi
Apr 25 2017 16:52
@bablet lots of people use eval() just be careful with it :) I'm going to try to use this: http://mathjs.org/
Czpl
@Czpl
Apr 25 2017 16:52
isn't there something like https://wind-bow.glitch.me/ but for the weather api? ;d
Gulsvi
@gulsvi
Apr 25 2017 16:53
That's for Twitch. Wish they did the same for the weather API :)
Czpl
@Czpl
Apr 25 2017 16:53
ya that's what im asking
Fabian Rosen Karlsson
@bablet
Apr 25 2017 16:54
Thanks! @SkyCoder01
CamperBot
@camperbot
Apr 25 2017 16:54
bablet sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Kevin Robertson
@kevnbot
Apr 25 2017 16:54
ok im just gunna start over from where I started this morning. my twitter button links to twitter. please guide me from here.
Czpl
@Czpl
Apr 25 2017 16:54
by the way I made my twitch thingy today https://codepen.io/czpl/full/BRLEwX/
Gulsvi
@gulsvi
Apr 25 2017 16:54
Nice work @Czpl I like the buttons
Kevin Robertson
@kevnbot
Apr 25 2017 16:59
Im sorry, its just that your project is so different looking from mine I cant really even tell whats going on
but you probably think the same about mine
Tom
@moT01
Apr 25 2017 17:00
just the twitter left? @kevnbot
Kevin Robertson
@kevnbot
Apr 25 2017 17:01
yea, I mean im pretty sure my quote machine works. Ive tried it and it works. it could use some polishing up, but I absolutely cannor figure out the tweet function. I can get the button to launch to twitter, and even tweet a defaulted text, but I cant figure out how to make it tweet the displaying Quote
Vamp
@the-vampiire
Apr 25 2017 17:01

@SkyCoder01 so I tested omething out

$('#Tab_Trigger1').click(function(){
     var target = $(this).attr('href');
     $('#Overview-Tab').removeClass('active');
     $(target).addClass('active');

  });

where TabTrigger1 is an id I put on the image div. active class never gets removed. active class never gets added. It is working though because if I change `$(target).empty()’ it does indeed empty that tab content

Waqas Abbasi
@Waqas909
Apr 25 2017 17:02

Hello

Why does it skip number 9?

https://repl.it/HX87/2

Please have a look :/

Tom
@moT01
Apr 25 2017 17:02
@kevnbot yea, it all works for me cept that
Waqas Abbasi
@Waqas909
Apr 25 2017 17:03
Tom
@moT01
Apr 25 2017 17:03
https://twitter.com/intent/tweet/?text=" + $(".quote").text() + " " + $(".author").text()
thats what i used
Vamp
@the-vampiire
Apr 25 2017 17:03
@Waqas909 mate I have no idea what youre trying to do..
the code is all over the place doesn’t make much sense to me. maybe add an explanation of your goal and add some comments to the code to get more targeted help
Kevin Robertson
@kevnbot
Apr 25 2017 17:05
@moT01 and its not working?
Tom
@moT01
Apr 25 2017 17:05
it works
thats what i used on my project
Waqas Abbasi
@Waqas909
Apr 25 2017 17:05
@the-vampiire It's a timer It counts down to 0
I've set the time Interval to 50ms so it counts down fast
Kevin Robertson
@kevnbot
Apr 25 2017 17:06
you used that in the A HREF?
Tom
@moT01
Apr 25 2017 17:06
yes
Waqas Abbasi
@Waqas909
Apr 25 2017 17:06
@the-vampiire See this one https://repl.it/HX87/2
Jorge
@flawedLogic506
Apr 25 2017 17:06
@Czpl looking good!
Waqas Abbasi
@Waqas909
Apr 25 2017 17:07
Yea the code is allover the place, because I'm just playing around
Vamp
@the-vampiire
Apr 25 2017 17:07
I am just not following the logic
maybe someone else can
Kevin Robertson
@kevnbot
Apr 25 2017 17:07
what is your .quote from? another part of your project?
Tom
@moT01
Apr 25 2017 17:08
yea, those are variables, ...you will want to put your own in there
Kevin Robertson
@kevnbot
Apr 25 2017 17:08
ok thats what I was thinking.
Vamp
@the-vampiire
Apr 25 2017 17:09
@Waqas909
What is your goal in this block?
else{

      for(var i = 3; i>=0 ;i--){

        if(arr[i]!==0){
          arr[i]--;


          for(var x = i+1; x<5;x++){
            if(x%2===0){

              arr[x]=5;

            }else{

              arr[x]=9;

            }
          }
Czpl
@Czpl
Apr 25 2017 17:10
@Waqas909 arr[5]--;
it's decrementing the last digit before console.log
Kevin Robertson
@kevnbot
Apr 25 2017 17:12

I only have two variables. maybe thats my problem. where are those variables you are using @moT01

function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

This is my function and my only other variable is an array of quotes called 'quotes'

Vamp
@the-vampiire
Apr 25 2017 17:13
@SkyCoder01 Ah I got it! Man this is going to be one fugly piece of code but at least I got it working statically..
Abhijeet Singh
@abhijeetps
Apr 25 2017 17:13
Hey..
Anybody knows when beta.freecodecamp.com will come out of beta?
Waqas Abbasi
@Waqas909
Apr 25 2017 17:15

@the-vampiire
@Czpl

Fixed it :) Turns out it was doing arr[5]--, twice when it equals 9

@the-vampiire

It's hard to rather explain but the way it works is, if arr[4] = 0; then it's going to find the first non-zero and it's going to replace all the numbers after that first non-zero into either 5 or 9

So 00:10:09

When that "09" hits "00" It will find the first non zero, Which is that 1, it will reduce it by 1 and set the rest to either 5 or 9 so, 00:09:59

Vamp
@the-vampiire
Apr 25 2017 17:16
ah clever man
good work!
Waqas Abbasi
@Waqas909
Apr 25 2017 17:16
@the-vampiire I couldnt think of another way to make a timer
Tom
@moT01
Apr 25 2017 17:16
@kevnbot in your case an easy way to go might be to change the href attribute when you click new quote
Waqas Abbasi
@Waqas909
Apr 25 2017 17:16
@the-vampiire Thanks
CamperBot
@camperbot
Apr 25 2017 17:16
waqas909 sends brownie points to @the-vampiire :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @the-vampiire |http://www.freecodecamp.com/the-vampiire
a27-suryansh
@a27-suryansh
Apr 25 2017 17:17
can someone explain me array.prototype.filter ? i tried to understand it but i failed
Moisés Man
@moigithub
Apr 25 2017 17:21
[1,2,3,4,5].filter( function(num){
            return true;
} );

result [1,2,3,4,5]

[1,2,3,4,5].filter( function(num){
            return false;
} );

result []

[1,2,3,4,5].filter( function(num){
       if (num > 3) {
            return true;
       } else {
            return false;
       }
} );

result [4,5]

@a27-suryansh check those examples..
Kevin Robertson
@kevnbot
Apr 25 2017 17:25
@moT01 Im not sure how to do that. Ive trid before. I but the same function that populates the quote in the href where the variable should be and it doesnt work
<div class="col-xs-4">
     <a href=https://twitter.com/intent/tweet/?text=" + $("newQuote()").text() + " " + $(".author").text() 
 target="_blank"><button class="btn btn-block btn-social"><i class="fa fa-twitter"></i></button></a> 
    </div>
  </div>
<!--button for new quote-->
  <div>
    <div class="col-xs-8">
      <button class="btn btn-block" onclick="newQuote()">New Quote</button>
        <!--<script src="javascript.js"></script>-->
      </div>
    </div>
JD Tadlock
@jdtdesigns
Apr 25 2017 17:25
[1,2,3,4,5].filter(num => num > 3) // [4,5]
a27-suryansh
@a27-suryansh
Apr 25 2017 17:25
Thanks @moigithub
CamperBot
@camperbot
Apr 25 2017 17:25
a27-suryansh sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3159 | @moigithub |http://www.freecodecamp.com/moigithub
JD Tadlock
@jdtdesigns
Apr 25 2017 17:26
@moigithub Just had to lol
Vamp
@the-vampiire
Apr 25 2017 17:26

@SkyCoder01 muahaha solved

So to each project card (image with link) in the overview section I added the class “Overview_Tab”
Then built this JS

 $('.Overview_Tab').click(function(){
     var target = $(this).attr('href')+'-Tab';
     var target_parent = $(target).parent();

     $('#Overview-Tab').parent().removeClass('active');

     target_parent.addClass('active');

  });
Tom
@moT01
Apr 25 2017 17:26
@kevnbot those are my variables, ...they wont work for you
Kevin Robertson
@kevnbot
Apr 25 2017 17:26
I understand that. I thought I changed the variable I needed to the function
Tom
@moT01
Apr 25 2017 17:27
that won't work putting it in the html
Vamp
@the-vampiire
Apr 25 2017 17:27
@SkyCoder01 the key was that the target that needed the class “active” was not the tab itself but the list item that it was contained in thats why I ahd to use parent
Tom
@moT01
Apr 25 2017 17:27
do what i said, ...in the same way you display the quote in the div or whatever you have - change the href for the <a>, probly want to give it an id
so something like, ...document.getElement(<a>).href = "twitter.com.....";
Kevin Robertson
@kevnbot
Apr 25 2017 17:29
put that in the js?
Tom
@moT01
Apr 25 2017 17:29
yes
in the newquote function
so anytime a new quote is generated, the href will also change to the correct link
that syntax i shared won't work, ...the concept will
Kevin Robertson
@kevnbot
Apr 25 2017 17:32

ok this is finally starting to make sense. my new function in js looks like this:

function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  document.getElement(<a>).href = "twitter.com/intent/tweet/?text=" + $("newQuote()").text() "
}

now how do I update the html to talk to this correctly? I still have this:

div class="col-xs-4">
     <a href=https://twitter.com/intent/tweet/?text=" + $("newQuote()").text() + " " + $(".author").text() 
 target="_blank"><button class="btn btn-block btn-social"><i class="fa fa-twitter"></i></button></a> 
    </div>
  </div>
Nikki L.R.
@nikkilr88
Apr 25 2017 17:33
@jdtdesigns I don't know if your still around... I am slowly figuring out the code you sent me. Would you mind if I sent a PM if I have a question? Thanks again!
CamperBot
@camperbot
Apr 25 2017 17:33
nikkilr88 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 923 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Tom
@moT01
Apr 25 2017 17:34
remove the href in the html, ...make it href="#"
and when the button get clicked it will change to the right link
after you fix the rest
Abhijeet Singh
@abhijeetps
Apr 25 2017 17:36
Hey guys,
Meanwhile, while learning how Front End WebD from FCC, I built a little website for our college event's. Please check it out here : http://atrang.org
Kevin Robertson
@kevnbot
Apr 25 2017 17:40
ok cool. so I need to fix this line?
  document.getElement(<a>).href = "https://twitter.com/intent/tweet/?text=" +  "$("newQuote()").text()"
Tom
@moT01
Apr 25 2017 17:40
that the one
@aps120797 looks good
not sure if the background is awesome or too much
JD Tadlock
@jdtdesigns
Apr 25 2017 17:43
@nikkilr88 Sure
MonstaMinerX
@MonstaMinerX
Apr 25 2017 17:50
hi
Tom
@moT01
Apr 25 2017 17:52
hi
Kevin Robertson
@kevnbot
Apr 25 2017 17:54
I keep getting an unexpected identifier
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  document.getElementById('tweetCurrentQuote').href = "https://twitter.com/intent/tweet/?text=" +  "$("newQuote()").text();
}
and its now pointing to my own page when i click on it and not twitter
Tom
@moT01
Apr 25 2017 17:55
you filled the quote div with your random quote
how you gonna put the same random quote in the url
This is absolutely ridiculous. why is mine so different than everything Ive seen and why is this so hard?
I dont understand whats happening at all. it seems like it should be pretty easy to just assign the quote as the text that is displayed when you click the link.
Tom
@moT01
Apr 25 2017 18:02
ha
i know the feeling
how could you figure this out
Kevin Robertson
@kevnbot
Apr 25 2017 18:03
Alright well ive been stuck on this since Dec 8th. so im just done.
Tom
@moT01
Apr 25 2017 18:03
gimme a couple minutes
youre close
Vamp
@the-vampiire
Apr 25 2017 18:08
just put the twitter link and at the end concatenate + quotes[randomNumber]
it handles spaces and line breaks on its own
like this
here is my code for that project
// ----- Ajax Request and DOM input ----- //

    $('#New_Quote').click(get_data);

    function get_data(){

        $.get("http://www.stands4.com/services/v2/quotes.php?uid=5663&tokenid=dvaVN4cQXhJcfkk9&searchtype=RANDOM", function(data) {
            $(data).find('result').each(function(){
                var quote = $(this).find('quote').text();
                var author = $(this).find('author').text();

                $('#quote').html(quote);
                // optional add link to wikipedia for author...
                // $('#author-link').attr('href','https://en.wikipedia.org/wiki/'+author);
                $('#author').html(author);
                $('#Tweet-Link').attr('href', "https://twitter.com/intent/tweet?text="+quote);

            });
        });

    }
$('#Tweet-Link').attr('href', "https://twitter.com/intent/tweet?text="+quote);
this is what im talking about in particular
Kevin Robertson
@kevnbot
Apr 25 2017 18:15
my function is very different from that. I dont use an outside website I use an array. It seems like im the only one who did it that way. So I dont have the variables 'quote' and 'author'
I think thats why im having such trouble figuring it out.
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
//  document.getElementById('tweetCurrentQuote').href = "https://twitter.com/intent/tweet/?text=" +  "$("newQuote()").text();
   document.getElementById("tweetCurrentQuote").onclick = newQuote() 

    document.getElementById("tweetCurrentQuote").href= "https://twitter.com/intent/tweet/?text=" +  "$("quoteDisplay").text(); 
    return false;
  };
}
this doesnt make sense to me. I feel very far away from figuring this out
those were my variables, ...they used jquery, you arent using that, and you dont have the same variables, or elements
Kevin Robertson
@kevnbot
Apr 25 2017 18:20
right. Ok I was using the function name, not the variable.
ok at least its opening twitter again
Tom
@moT01
Apr 25 2017 18:22
now get a quote and author to show up when the page loads
Kevin Robertson
@kevnbot
Apr 25 2017 18:23
Oh yes! ok Thanks. Let me look at this harder. Im sure ill have a couple questions
ok so its just pulling the same variable. idk why I though it had to run the function again to populate that variable. I think thats where I got hung up.
Kevin Robertson
@kevnbot
Apr 25 2017 18:28
so when newQuote() function runs. it populates quotes[randomNumber] which then displays, as well as added on to the twitter link. and somehow, when you add that variable at the end of the href twitter link in js, it populates the tweet when twitter opens
am I following the logic?
gulptech
@gulptech
Apr 25 2017 18:30
you should also run newQuote() as soon as the page loads.
Kevin Robertson
@kevnbot
Apr 25 2017 18:30
oh ok right, so it doesnt have the default text
Yea I still have a some cleaning up. especially my css. I hate that the button moves depending on the size of the quote. Ive got some fixes to do. I just couldnt understand the tweeting part.
Tom
@moT01
Apr 25 2017 18:32
your quotes variable is already populated with quotes, ...it get the quote at the index of randomNumber and puts the content into the html, and yes it creates a url with the content in it as well, that opens a tweet with the content in it
you should think about moving all the style to the css section
Kevin Robertson
@kevnbot
Apr 25 2017 18:36
oh...! THAT makes sense ok yea it pulls the quote from the index based on the randomNumber, right.
Yea, im bad about that. it made more sense to have it in the HTML. but I should do it correctly and move it to the CSS section
I appreciate your patience with me @moT01 Thanks!
CamperBot
@camperbot
Apr 25 2017 18:37
kevnbot sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 637 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 25 2017 18:39
wont always be someone to help ya out for an hour and a half, ...gotta be able to utilize those search engines
Kevin Robertson
@kevnbot
Apr 25 2017 18:40
I understand. Im still learning what to even google. Believe it or not I have spent many many hours reading through pages trying to figure this out.
Vamp
@the-vampiire
Apr 25 2017 18:44
@kevnbot I am not suggesting you copy my code. I am showing you how it will work
in my case I have the variable quote
in your case you have the variable quote[randomNumber]
the concept is the same. concatenate your quote [‘quote’ for me, ‘quote[randomNumber]’ for you] onto the end of the twitter url that you have set as an href on your twitter button
the url is a string
your quote is a string
you can add them together using the ‘+’ operator which is called concatenation of strings
my function is very different from that. I dont use an outside website I use an array. It seems like im the only one who did it that way. So I dont have the variables 'quote' and 'author'
Kevin Robertson
@kevnbot
Apr 25 2017 18:47
Yea I understand that. I was having a hard time understanding how yours worked since it has a link instead of an array. that made it more difficult to understand how to get the quote in the tweet. now that I understand, your suggestion makes perfect sense. I wasnt understanding how the variable was populated.
Vamp
@the-vampiire
Apr 25 2017 18:47
I could have used the variables “dildo” and “horse” and it would still work. its just a name what matters is what is assigned to it. you have assigned a quote which is a string. my quote string comes from an API yours comes from an internal dictionary. doesnt matter the source
they are both strings. they can both be concateanted onto the end of the link. want proof?
https://twitter.com/intent/tweet?text=see+I+can+write+the+word+dildo+here+and+it+still+works
click that link
Kevin Robertson
@kevnbot
Apr 25 2017 18:51
yea ok. I see that now
Vamp
@the-vampiire
Apr 25 2017 18:51
so what you want is a fixed part of your url
and anything you add after that will turn into the full url. so the fixed part is the “base” if you will and you are adding onto it with a variable which is storing a string value of a quote.
Kevin Robertson
@kevnbot
Apr 25 2017 18:52
yea I wasnt understanding and thought I had to run my function again in order to get the correct string.
Kevin Robertson
@kevnbot
Apr 25 2017 18:52
I understand now that once the function is fun, I can just grab the variable and concatenate it
*run
Vamp
@the-vampiire
Apr 25 2017 18:53
ya the whole point of using a variabel init
Kevin Robertson
@kevnbot
Apr 25 2017 18:53
which is why I had such a hard time understanding. I didnt get that.
Vamp
@the-vampiire
Apr 25 2017 18:53
every time it runs the function it will store a new value to that variable and thus your link will have a new quote
Kevin Robertson
@kevnbot
Apr 25 2017 18:54
yup makes sense
Vamp
@the-vampiire
Apr 25 2017 18:54
ok go make it work
show me
Kevin Robertson
@kevnbot
Apr 25 2017 18:54
Ive got it working now.
here is my function
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  document.getElementById('tweetCurrentQuote').href = "https://twitter.com/intent/tweet/?text="+ quotes[randomNumber];
}
but im using the quotes variable with the randomNumber arrow.
Vamp
@the-vampiire
Apr 25 2017 18:55
cool man
Kevin Robertson
@kevnbot
Apr 25 2017 18:56
would it be cleaner to assign quotes[randomNumber] to a different variable?
Vamp
@the-vampiire
Apr 25 2017 18:56
nope
Kevin Robertson
@kevnbot
Apr 25 2017 18:56
like var currentQuote = quotes[randomNumber]
Vamp
@the-vampiire
Apr 25 2017 18:56
oh i guess sure
Kevin Robertson
@kevnbot
Apr 25 2017 18:56
or is that just muddying it up
Vamp
@the-vampiire
Apr 25 2017 18:56
no its good practice to assign a variable or function for anything that is repeated in your code
so go ahead
good job man I’m out of here
Kevin Robertson
@kevnbot
Apr 25 2017 18:57
ah ok then yea. ive got it in two places, so i should do that.
thanks so much. I have been stuck on this embarrassingly long. probably spent 50 of the 100 hours for this section on that one part!
thanks @the-vampiire
CamperBot
@camperbot
Apr 25 2017 18:57
kevnbot sends brownie points to @the-vampiire :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @the-vampiire |http://www.freecodecamp.com/the-vampiire
Paul Rail
@PolarisTLX
Apr 25 2017 18:59
Really struggling with the TwitchTV JSON API challenge because of the security updates. I did the first 3 API challenged (which were also a struggle due to the same security updates). Anybody have any recommendations? I am thinking of just skipping this one, at least for now, and just move onto the Intermediate Front End Development Projects.
alpox
@alpox
Apr 25 2017 19:03
@PolarisTLX They shouldn't be so hard to handle. You have several options to try:
  1. Use jsonp
  2. Use crossorigin.me
  3. Try only http requests (Inside of a pen accessed by http) <--- if they didn't yet change codepen to use https only
@PolarisTLX You can surely post your pen here and we take a look at it to help you out
Paul Rail
@PolarisTLX
Apr 25 2017 19:09
Alrighty, I'll try putting a couple more hours into to see if I can finally solve it. Thanks for the offer, I might post the pen here is I feel I cant get there.
omarraza
@omarraza
Apr 25 2017 19:14
Can someone help me with Bootstrap problem? I'm trying to have 2 rows with two elements in row 1 and one element in row 2, but all three are displaying in row 1 for some reason. Here's the HTML:
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <input id="search" size="40" min="1" max="120" placeholder="Search for an article...">
        </input>
      </div>
      <div class="col">
        <button id="icon"><i class="fa fa-search"></i>
      </button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button>Go to a random article
          </button></a>
      </div>
    </div>
  </div>
</body>
using Bootstrap v4
Tom
@moT01
Apr 25 2017 19:16
im not a bootstrap expert, but maybe set a size to each row
if you set the size of the row to take up the whole width of the grid, the next one should move down?
alpox
@alpox
Apr 25 2017 19:17
@PolarisTLX Btw. go sure to use the proxy urls from freecodecamp - https://wind-bow.gomix.me/
omarraza
@omarraza
Apr 25 2017 19:17
I tried that by doing col-6 and col-6 for the first two elements but that didn't seem to do it
The documentation says each row is 12 blocks wide. And each row is made up of columns
Tom
@moT01
Apr 25 2017 19:18
are those accurate classes? should there be a md in there or somethign
omarraza
@omarraza
Apr 25 2017 19:19
https://v4-alpha.getbootstrap.com/layout/grid/ seems to suggest those are good class names
Tom
@moT01
Apr 25 2017 19:19
pen?
alpox
@alpox
Apr 25 2017 19:23
@omarraza nvm my last comment, didn't see your meta section
@omarraza You put display: flex on the container. This removes the bootstrap styling of the container and changes the behaviour of the children of the container totally.
Flexbox has the property to order its children by default in a row
So if you put display: flex on the container - both divs with the row class, will be put in one row
alpox
@alpox
Apr 25 2017 19:30
@omarraza If you just want to achieve the positioning in the middle of the page you can do:
.container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Usama Mahmood
@usamacjs
Apr 25 2017 19:31
hello people, can ayone please help me, i am trying to use font awesome but the icons are appearing as small empty boxes
alpox
@alpox
Apr 25 2017 19:31
@usamacjs Can you show us your pen or your page in some other way?
Usama Mahmood
@usamacjs
Apr 25 2017 19:32
Screen Shot 2017-04-25 at 10.32.36 PM.png
alpox
@alpox
Apr 25 2017 19:34
@usamacjs Also the place where you are adding your icon?
Usama Mahmood
@usamacjs
Apr 25 2017 19:35
Screen Shot 2017-04-25 at 10.35.08 PM.png
omarraza
@omarraza
Apr 25 2017 19:35
@alpox thank you! what does transform: translate accomplish? I've used top: and left: before but never transform:
CamperBot
@camperbot
Apr 25 2017 19:35
omarraza sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 975 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 25 2017 19:36
@omarraza If you do left: 50% the left side of the element ends up in the middle of the page - which is not what you want.
With transform: translate you can move the element according to its own dimensions
omarraza
@omarraza
Apr 25 2017 19:36
@alpox actually, adding that to .container and removing display: flex didn't center everything
Usama Mahmood
@usamacjs
Apr 25 2017 19:37
@alpox do you know what i should do?
omarraza
@omarraza
Apr 25 2017 19:37
its all at the top of the page, and i kept height: 100%
alpox
@alpox
Apr 25 2017 19:37
@usamacjs Looks fine so far. Did you try to replace the url of the font awesome css with one of a CDN for testing if your css is corrupted or not loaded right?
omarraza
@omarraza
Apr 25 2017 19:37
but the rows do work now!
alpox
@alpox
Apr 25 2017 19:37
@usamacjs https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
@omarraza Yes they do, because now, the display property is not applied which would change the positioning behaviour of the children of the container
Bootstrap can now do its work as its used to :D
Usama Mahmood
@usamacjs
Apr 25 2017 19:38
@alpox oh god, THANK YOU SO MUCH!!!!
CamperBot
@camperbot
Apr 25 2017 19:38
usamacjs sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 976 | @alpox |http://www.freecodecamp.com/alpox
omarraza
@omarraza
Apr 25 2017 19:38
But the elements are not centered vertically or horizontally anymore
nvm I guess I had to get rid of height: 100% from .container
Trying to understand how anything works in CSS is like trying to penetrate to the center of a nebula
God i miss visual basic
alpox
@alpox
Apr 25 2017 19:40
@usamacjs You're welcome :D what a outburst ^^ Be aware that you may not want to keep this url in your page because its HOSTED and you maybe want to have all your sources together in your project
If this url works, your css is probably wrongly linked or broken
@omarraza CSS is quite cryptical for newcomers :D
@omarraza Your children inside the rows are positioned inline so you can use text-align: center;on the container
or <div class="col text-center"> if you only need to center single cols or elements
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:43
hey how to fit image into div container
anybody here
stuck with my first assignment
alpox
@alpox
Apr 25 2017 19:48
@SSheorain
<div>
   <img src="...">
</div>
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:52
tried that @alpox but the image is going beyond the div
alpox
@alpox
Apr 25 2017 19:54
@SSheorain Do you have a pen showing that?
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:54
yes
and one more doubt regarding columns and rows in bootstrap
alpox
@alpox
Apr 25 2017 19:58
Well can you show it?
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:59
is it necessary to declare a row-column div if we want every div element to be vertical in our web page.. one after another
please help me out how to insert screenshots in chat
alpox
@alpox
Apr 25 2017 20:00
@SSheorain Well, it wouldn't be totally necessary to make it work - but bootstrap suggests to put only rows into containers and only columns into rows
@SSheorain Just copy-paste the url of your pen here
alpox
@alpox
Apr 25 2017 20:04
@SSheorain Aha for the image you can add the attribute class="img-fluid" to the image: https://v4-alpha.getbootstrap.com/content/images/#responsive-images
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 20:06
@alpox i used img-responsive earlier..
is there difference between responsive and fluid
alpox
@alpox
Apr 25 2017 20:07
@SSheorain img-responsive is from boostrap v3. You are using boostrap v4 (new version) in your pen so img-responsive does not work anymore.
It got replaced with img-fluid
Always go sure which version you are using and use the right documentation to find what you need
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 20:09
ok thanks @alpox :smile:
CamperBot
@camperbot
Apr 25 2017 20:09
ssheorain sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 977 | @alpox |http://www.freecodecamp.com/alpox
Ken Haduch
@khaduch
Apr 25 2017 20:09
@SSheorain - if you are going to stick with Bootstrap V4, and already know Bootstrap V3, you want to keep a bookmark for this document: https://v4-alpha.getbootstrap.com/migration/ - shows the major changes from Bootstrap V3 to V4.
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 20:10
@khaduch thanks :+1:
CamperBot
@camperbot
Apr 25 2017 20:10
ssheorain sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2792 | @khaduch |http://www.freecodecamp.com/khaduch
overkill
@0verk1ll
Apr 25 2017 20:13

I am working on a Web design project and am unable to get the menu bar on my site to display properly. I need the menu bar to be centered, but the code below doesn't work.

nav {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

My HTML code:

<!doctype html>
<html lang="en-US">

<head>

  <title>Table Template</title>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet" type="text/css">

</head>

<body>
  <div class="fluid">

    <!--Copy the navigation bar to any new pages under '<div class="fluid">'.-->
    <!--Navigation Bar-->
    <nav>
      <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
          <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
              <a href="#">Platforms ↓</a>
            <ul class="hidden">
                <li><a href="#">Android</a></li>
                <li><a href="#">OS's w/ Dark Theme</a></li>
                <li><a href="#">Windows</a></li>
            </ul>
          </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!--End Navigation Bar-->

    <div id="services">
      <table>
        <caption>Lorem</caption>
        <tr>
          <td><strong>App</strong></td>
          <td><strong>Open Source</strong></td>
          <td><strong>Source Code</strong></td>
        </tr>
        <tr>
          <td><a>Ipsum</a></td>
          <td>Yes/No</td>
          <td><a href="" title="">Source Code</a></td>
        </tr>
      </table>
    </div>
    <!--End services-->

    <!--Copy the footer to any new pages just before the last </div>-->
    <!--Footer-->
    <footer>
      <ul>
        <li><a href="https://github.com/ImSeth/Dark-Theme-Everywhere" title="Dark Theme Everywhere on Github"><img src="assets\GitHub-Mark-Light-64px.png" alt="Github Mark" /></a></li>
      </ul>
    </footer>
    <!--End Footer-->

  </div>
  <!--end fluid-->
</body>

</html>

My CSS:

.fluid {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    float: none;
    display: block;
    background-color:#222;
}

/*These styles control the appearence of the navigation bar for all pages.*/
nav {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

/*Strip the ul of padding and list styling*/
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}

/*Create a horizontal list with spacing*/
nav li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
nav li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
nav li:hover a {
    background: cadetblue;
}

/*Style for dropdown links*/
nav li:hover ul a {
    background: aquamarine;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
    background: cadetblue;
    color: #fff;
}

/*Hide dropdown links until they are needed*/
nav li ul {
    display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: cadetblue;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
nav input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
    display: block;
}
alpox
@alpox
Apr 25 2017 20:16
@ImSeth Try to make the nav display: block
@ImSeth Inline elements ignore margin attributes
overkill
@0verk1ll
Apr 25 2017 20:18
@alpox The only way I know to center things is by using margins. How else can I center my <nav> element?
alpox
@alpox
Apr 25 2017 20:18
I believe the margin should work if you make the nav be displayed as block.
If its inline as now, you can put text-align:center to its parent
Another way to center things is:
position: relative;
left: 50%;
transform: translateX(-50%);
overkill
@0verk1ll
Apr 25 2017 20:20
@alpox I tried using display: block; already.
@alpox That centered it, but it made my <li> elements stack on top of each other.
overkill
@0verk1ll
Apr 25 2017 20:27
@alpox Thank you for your help. It is centered correctly now.
Usama Mahmood
@usamacjs
Apr 25 2017 20:31
hello people, i am new to development, i have just created my portfolio, my first website ever, it's 90% complete, can anybody help me add javascript (which i have just started learning) which enables smoother scrolling and i need help in adding scroll spy. anyone up for this?
alpox
@alpox
Apr 25 2017 20:32
@usamacjs Manipulating the scroll behaviour is usually not good for the user-experience
Usama Mahmood
@usamacjs
Apr 25 2017 20:33
i appreciate your advice :)
can you help me add scroll spy then?
i can provide link to my github repository
alpox
@alpox
Apr 25 2017 20:34
@usamacjs You can stick to the documentation for that : http://getbootstrap.com/javascript/#via-javascript-2
@usamacjs You also find an example here: http://jsfiddle.net/aVBUy/7/
Usama Mahmood
@usamacjs
Apr 25 2017 20:36
thank you :)
alpox
@alpox
Apr 25 2017 20:36
Hmm second one has a flaw though
@usamacjs Actually w3c has an example with scrollspy and smoothscroll for the transition: https://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp
Usama Mahmood
@usamacjs
Apr 25 2017 20:39
@alpox thanks a bunch man :) :smile:
CamperBot
@camperbot
Apr 25 2017 20:39
usamacjs sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 978 | @alpox |http://www.freecodecamp.com/alpox
DJ Schofield
@djschofield5
Apr 25 2017 20:58
What is the easiest way to add animations to a website? Example: fading in divs when you scroll to that part of the page. I feel like it's kind of the new trend
Matt
@mdmpdx
Apr 25 2017 21:16
hello room, trying to complete the "Build a Tribute Page" exercise
did I miss something between the lessons and this challenge? This has jumped from a single scale iphone mockup to a responsive full-size layout without any lessons on how to account for various viewports
Ken Haduch
@khaduch
Apr 25 2017 21:17
@djschofield5 - probably using jquery, although you can do a lot with CSS itself. I like this site - here is a page with animation information and there is a list of links in the https://css-tricks.com/almanac/properties/a/animation/#article-header-id-5 section of that page.
Usama Mahmood
@usamacjs
Apr 25 2017 21:17
Screen Shot 2017-04-26 at 12.04.51 AM.png
i need help, scrool spy is not working,
urghhhhhh :(
*scroll
Ken Haduch
@khaduch
Apr 25 2017 21:18
@mdmpdx - no, but the bootstrap grid information that was at least briefly touched on is the way to account for responsive behavior on the page. Take the time to review that and it should help you. The page doesn't have to be too complicated, and the bootstrap basics go a long way to making it fairly simple. Just make sure that you use Bootstrap v3, because that is what the lessons are based on (CodePen currently defaults to Bootstrap V4, which has quite a few changes.)
Henry
@GitHub-Henry
Apr 25 2017 21:19
@mdmpdx lotta self learning and lotta help when you ask questions
Matt
@mdmpdx
Apr 25 2017 21:19
@khaduch thanks -- I'll revisit it. And thanks for the tip re: Bootstrap 4 vs 3
CamperBot
@camperbot
Apr 25 2017 21:19
mdmpdx sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2793 | @khaduch |http://www.freecodecamp.com/khaduch
Usama Mahmood
@usamacjs
Apr 25 2017 21:20
ummmmm, can somebody help me too?
Henry
@GitHub-Henry
Apr 25 2017 21:21
@usamacjs i actually looked at your site, it was an empty repo
but it was when you asked for help a bit ago, not sure what's happened since
Usama Mahmood
@usamacjs
Apr 25 2017 21:22
@GitHub-Henry i haven't uploaded it yet, it is in my laptop, trying to figure out how the scroll spy will work, will upload it
Henry
@GitHub-Henry
Apr 25 2017 21:23
@usamacjs that's what the documentation you were provided is for
remember the links you were given
Usama Mahmood
@usamacjs
Apr 25 2017 21:23
@GitHub-Henry i am uploading it, you can have a look
Henry
@GitHub-Henry
Apr 25 2017 21:24
as an exercise for yourself, why not try to duplicate the example, then transfer it to your website
codepen.io makes stuff like that easy
Will Foster
@Will5592
Apr 25 2017 21:25
Is it possible to change the background color of an an anchor element? I have set a { background-color: green;} but it's done nothing...
Usama Mahmood
@usamacjs
Apr 25 2017 21:25
@GitHub-Henry sorry man, i am dumb when it comes to using github :(
@GitHub-Henry here is a link to my github repo, https://github.com/usamacjs
Henry
@GitHub-Henry
Apr 25 2017 21:26
so learn via codepen.io to figure out how to use bootstrap
Usama Mahmood
@usamacjs
Apr 25 2017 21:26
if you can have a look and tell me why the scroll spy is not working :(
Henry
@GitHub-Henry
Apr 25 2017 21:30
@usamacjs i just peeked in, gotta go soon, perhaps someone with more time, in the the mean time, you can use codepen.io to duplicate the example in the documentation, then transfer what you learn to your website
doing that, you will learn and figure it out, if you do it
Usama Mahmood
@usamacjs
Apr 25 2017 21:31
thank you :)
JD Tadlock
@jdtdesigns
Apr 25 2017 21:31
@usamacjs It should be index.html instead of folio.html ;)
The browser loads any index/main files by default as the 'home' page
Usama Mahmood
@usamacjs
Apr 25 2017 21:40
@jdtdesigns okay :)
Paradox5
@Paradox5
Apr 25 2017 21:47
Hey
For the wikipedia viewer
If the word we search isent in the title but in the body
Do we have to return that article as well
Ken Haduch
@khaduch
Apr 25 2017 21:50
@Paradox5 - I would say no, but you can do whatever you want. Maybe you can even make it an option? Is there anything describing that in the statement of the problem, or the user stories? Maybe if you find no hits in the titles, but in the text of the article, you'd want to post them? (Just coming up with more ideas...)
naughtybodywash
@naughtybodywash
Apr 25 2017 22:09
good afternoon. Would anyone mind taking a look at my "portfolio" and seeing if it looks up to snuff/
I couldn't get scrollspy to highlight which section the user is viewing, but that's my only quarrel with it at the moment
Matt
@mdmpdx
Apr 25 2017 22:20
I have the Tribute Page project largely working... I am unsure why the hr tag is not displaying at the bottom, though: https://codepen.io/mdmpdx/pen/gWLWer
(I used the example's content to not have to spend a lot of time gathering content and writing copy)
KatSaldivar
@KatSaldivar
Apr 25 2017 22:24
last week my quote machine worked. now it doesn't. I've been looking at it, but I can't seem to figure out why. https://codepen.io/KatSaldivar/pen/KWZQzp
Vinicius Otacilio
@Karumba15
Apr 25 2017 22:26
https://karumba15.github.io/Portfolio/ why me portfolio dont load the css at the github?
my"
KatSaldivar
@KatSaldivar
Apr 25 2017 22:27
I wonder if its just my computer. can someone tell me if it's working for them please?
Jorge
@flawedLogic506
Apr 25 2017 22:27
@KatSaldivar i think it has to do with codepen changing to HTTPS
mine is the same, it doesn't work .. i have to re write the code
KatSaldivar
@KatSaldivar
Apr 25 2017 22:27
@OrangeKulture thanks.
CamperBot
@camperbot
Apr 25 2017 22:27
katsaldivar sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @orangekulture |http://www.freecodecamp.com/orangekulture
Gulsvi
@gulsvi
Apr 25 2017 22:28
Honestly, I think forismatic is broken. None of the quote machines using forismatic are working anymore @KatSaldivar
(Or they made a change and haven't updated the documentation)
KatSaldivar
@KatSaldivar
Apr 25 2017 22:28
@OrangeKulture is there any for a quick fix?
Jorge
@flawedLogic506
Apr 25 2017 22:29
what Sky said .. might be the API, might be a combination .. you would have to make sure you get a correct response
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:29
Hey guys :D
Jorge
@flawedLogic506
Apr 25 2017 22:29
i believe Dark Sky allowed jsonp? Sky ? that might solve the problem
Gulsvi
@gulsvi
Apr 25 2017 22:29
For weather :)
KatSaldivar
@KatSaldivar
Apr 25 2017 22:29
@SkyCoder01 it looks like the api is working when I put it in the browser http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?
Jorge
@flawedLogic506
Apr 25 2017 22:29
waahaha .. im going crazy
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:29
Actually, I have some trouble with my "randon quote website"
It was quite easy to make the website: https://codepen.io/lucasschneider/full/pPjqga/
BUT, I´m in trouble with the API
Vinicius Otacilio
@Karumba15
Apr 25 2017 22:30
@Karumba15
https://karumba15.github.io/Portfolio/ why my portfolio dont load the css at the github?
Gulsvi
@gulsvi
Apr 25 2017 22:30
@KatSaldivar Might just be a server configuration with forismatic. Not sure. All of the forismatic Quote machines on codepen seem to be broken: http://codepen.io/search/pens/?q=forismatic&limit=all&type=type-pens
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:31
It was easy to make with JS Objects...but I´m completly lost with the API functions...
Jorge
@flawedLogic506
Apr 25 2017 22:31
@Karumba15 console says 404 .. probably a bad route to where you store your css
@LucasSchneiderRS you mean for the tweet? or ..
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:32
Can someone give some advice or some source to get some information about? Cound´t get it with FCC documentation :(
Jorge
@flawedLogic506
Apr 25 2017 22:32
@LucasSchneiderRS quotes are working
KatSaldivar
@KatSaldivar
Apr 25 2017 22:32
@SkyCoder01 Thanks
CamperBot
@camperbot
Apr 25 2017 22:32
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @skycoder01 |http://www.freecodecamp.com/skycoder01
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:33
Quotes are! BUT the quotes are in JS script! I wanna make like the another sites that take the quotes from an external site...I got a little confused with this
Gulsvi
@gulsvi
Apr 25 2017 22:33
@KatSaldivar Maybe try this API? https://quotesondesign.com/api-v4-0/
Codepen will enforce HTTPS starting June 1, so you'll want to use APIs that support HTTPS moving forward. (Forismatic does not).
Jorge
@flawedLogic506
Apr 25 2017 22:33
@LucasSchneiderRS ahhh ok ! gotcha
KatSaldivar
@KatSaldivar
Apr 25 2017 22:34
@SkyCoder01 Do I have to use Codepen? Is there another site that is more stable? what do you recommend?
Jorge
@flawedLogic506
Apr 25 2017 22:34
yeah looks like you haven't included any calls to the API .. @LucasSchneiderRS you have to find one, that's the first thing. Then check documentation for the end point, which is the URL you will be using
Gulsvi
@gulsvi
Apr 25 2017 22:35
@KatSaldivar I use codepen - it's very stable, it's just going to require HTTPS for all projects (a secure, good best practice). The only alternative I know of for free website hosting is Github Pages and they already require HTTPS.
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:35
I cound´t find it in FCC :( I saw tha mashable website, but I´m still lost with it....any site with a "How to" or somethink like that? or where the peolple get information about this?
Jorge
@flawedLogic506
Apr 25 2017 22:35
@LucasSchneiderRS you can google it .. just go famous quotes API or something along those lines
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:35
"Then check documentation for the end point, which is the URL you will be using" this is ok...I think I got it! But I´m lost wiht the API website
Jorge
@flawedLogic506
Apr 25 2017 22:36
forismatic is one, altho there's problem with the HTTPs thing
Gulsvi
@gulsvi
Apr 25 2017 22:36
@LucasSchneiderRS Lots of people use this one - and they have code samples: https://quotesondesign.com/api-v4-0/
Jorge
@flawedLogic506
Apr 25 2017 22:36
quotes on design is pretty decent
Gulsvi
@gulsvi
Apr 25 2017 22:36
If you want something unique, there are lots of others out there
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:36
ok, thanks!!!
I will try it! I make some google search but didn´t find this ones ;(
This one it´s nice and easy to get with!!! :D https://quotesondesign.com/api-v4-0/
Gulsvi
@gulsvi
Apr 25 2017 22:38
If you like Chuck Noris, there is also this one :) http://www.icndb.com/api/
Jorge
@flawedLogic506
Apr 25 2017 22:38
yeah im gonna have to basically re write all the pens :S
Gulsvi
@gulsvi
Apr 25 2017 22:39
Mine should be okay, luckily. The first week of June will be busy here, better start working on those cbot updates
alpox
@alpox
Apr 25 2017 22:39
@SkyCoder01 For free website hosting, github is always good thats right. Some content has to be delivered through https://rawgit.com/ then (This actually is good for stable content delivery)
Gulsvi
@gulsvi
Apr 25 2017 22:39
botstatus
CamperBot
@camperbot
Apr 25 2017 22:39
All bot systems are go!
botVersion: 0.0.12
env: prod
botname: camperbot
alpox
@alpox
Apr 25 2017 22:39
oilbot
Gulsvi
@gulsvi
Apr 25 2017 22:40
rawgit is great
Jorge
@flawedLogic506
Apr 25 2017 22:41
awesome, Sky .. cbot is closer and closer to being the next Jarvis
Gulsvi
@gulsvi
Apr 25 2017 22:41
I'll have to build my own Skynet some day :)
alpox
@alpox
Apr 25 2017 22:42
@SkyCoder01 I don't even know what that is :D
Jorge
@flawedLogic506
Apr 25 2017 22:42
yeah for sure haha
Gulsvi
@gulsvi
Apr 25 2017 22:43
It's from the Terminator movies :)
Jorge
@flawedLogic506
Apr 25 2017 22:43
AI seems a lot of fun
alpox
@alpox
Apr 25 2017 22:43
Ah i've never seen these :D
Gulsvi
@gulsvi
Apr 25 2017 22:43
Arnold is Austrian though, I think, not Swiss
:)
alpox
@alpox
Apr 25 2017 22:43
Aha :D i thought he was american
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:43
one question: why FCC don´t put a link for this APi websites?
KatSaldivar
@KatSaldivar
Apr 25 2017 22:44
@SkyCoder01 can you take a look to see what I'm doing wrong? its coming up undefined
   var url= "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback";

    $.getJSON(url, function(data){
      console.log(data.title);
});
Gulsvi
@gulsvi
Apr 25 2017 22:45
Sure
Gulsvi
@gulsvi
Apr 25 2017 22:46
@KatSaldivar
   var url= "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";

    $.getJSON(url, function(data){
      console.log(data[0].title);
No callback needed at the end unless you want to direct it to a callback function in your code. The next issue you'll hit is that you will get the same quote every time due to caching. Will let you ask for help on that if needed.
Paradox5
@Paradox5
Apr 25 2017 22:46
ok
Gulsvi
@gulsvi
Apr 25 2017 22:47
@LucasSchneiderRS I think they want to make us suffer a little with every challenge to make us better coders :)
Good start @Paradox5
KatSaldivar
@KatSaldivar
Apr 25 2017 22:49
@SkyCoder01 I'm still getting undefined for some reason
Paradox5
@Paradox5
Apr 25 2017 22:49
Any suggestions for what to do next
Gulsvi
@gulsvi
Apr 25 2017 22:49
@KatSaldivar make sure the URL is https:
KatSaldivar
@KatSaldivar
Apr 25 2017 22:50
@SkyCoder01
@SkyCoder01 Thank you!
CamperBot
@camperbot
Apr 25 2017 22:50
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 22:50
@Paradox5 test it out - look at those titles returned
No problem, Kat
Paradox5
@Paradox5
Apr 25 2017 22:51
Well everything is correct now new goal make those titals links to the wikipedia page
Gulsvi
@gulsvi
Apr 25 2017 22:52
image.png
I searched for "hello" and got "e", "l", "l", and "o" for article titles
Paradox5
@Paradox5
Apr 25 2017 22:52
yea
just searched for something other then a
hmmm
oh
im a fool
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:52
@SkyCoder01 :D
Paradox5
@Paradox5
Apr 25 2017 22:52
i know what i did
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:53
next step: how to personalise my quotes? hehehehe :D
(in the API site) hehehe
KatSaldivar
@KatSaldivar
Apr 25 2017 22:53
@SkyCoder01 hmm, interesting.... Do I need to change the ID number to get new quotes?
Paradox5
@Paradox5
Apr 25 2017 22:55
Try now sky
Gulsvi
@gulsvi
Apr 25 2017 22:55
@KatSaldivar The quotes get cached, there a few different ways to work around it. Wasn't sure if you wanted the answer or not or wanted to try and search around a bit first.
Better @Paradox5 Now, try it on mobile :)
Paradox5
@Paradox5
Apr 25 2017 22:55
m-m-mobile
there are things other then pcs
and macs
KatSaldivar
@KatSaldivar
Apr 25 2017 22:57
@SkyCoder01 Normally I'd want to search around for it, but I was hoping to use this site for a "show and tell" event at my job and I'm under a time crunch.
Paradox5
@Paradox5
Apr 25 2017 22:57
Well its about the same
Gulsvi
@gulsvi
Apr 25 2017 22:59
@KatSaldivar Add a timestamp to the end of your API URL so it is unique every time it is called:
var url= "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1" + $.now();
Here's an example / tutorial with that API: https://codepen.io/skycoder/pen/mWLYrw
Paradox5
@Paradox5
Apr 25 2017 23:01
babel?
Gulsvi
@gulsvi
Apr 25 2017 23:01
It's for older browsers, so they understand ES6
Paradox5
@Paradox5
Apr 25 2017 23:01
ah
TIL
KatSaldivar
@KatSaldivar
Apr 25 2017 23:01
@SkyCoder01 thanks. I added it but now it doesn't work. lol
CamperBot
@camperbot
Apr 25 2017 23:01
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 23:02
@KatSaldivar I didn't see you removed callback= that's still needed :)
var url= "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="+ $.now();
Paradox5
@Paradox5
Apr 25 2017 23:03
oh and thanks @SkyCoder01 for helping me realize what was wrong
CamperBot
@camperbot
Apr 25 2017 23:03
paradox5 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 23:03
Sure, np
KatSaldivar
@KatSaldivar
Apr 25 2017 23:03
@SkyCoder01 Yay! Thanks a million! :D
CamperBot
@camperbot
Apr 25 2017 23:03
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Matt
@mdmpdx
Apr 25 2017 23:09
hello room, I'm trying to get a simple HR to work at the bottom of this project... https://codepen.io/mdmpdx/pen/gWLWer
Above the credit at the bottom. I'm confused why it's not working
I have googled CSS for HR and got a lot of wildly different answers to the question but nothing I've tried has worked
Paradox5
@Paradox5
Apr 25 2017 23:10
Ive got a terrible habit
for never leaving a single comment
aRtoo
@artoodeeto
Apr 25 2017 23:13

hi guys. can someone explain to me how this code works and why is it displaying a pyramid. code is:


 for (var i = 0; i < 5; i++ ){ 
   for(var c = 0 ; c <= i; c++){ 
     document.write("*");
   } 

   document.write("<br>");
 }


output: 

*
**
***
****

like im confused how did the computer or the code knows that it should display 2 stars on the second row, 3 stars on the row and so on. i know the <br> is in there to make a line after the loop. but like why is it displaying 2 stars together 3, 4,

Jaizon Carlos
@Jaizon
Apr 25 2017 23:15
@mdmpdx it should be working already, but try put the hr outside your p, just for a trying
Matt
@mdmpdx
Apr 25 2017 23:16
i just modified the CSS another time and got it working. I had to use border-color and border-top to get it showing up
Jaizon Carlos
@Jaizon
Apr 25 2017 23:17
@mdmpdx lol, yor hr, on the css file has a border: 0;
@mdmpdx change it to a higher size
Matt
@mdmpdx
Apr 25 2017 23:18
@Jaizon thanks, as I said I found a lot of differing opinions in my searches and I had a hard time knowing what was correct... got it working now thanks
CamperBot
@camperbot
Apr 25 2017 23:18
mdmpdx sends brownie points to @jaizon :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jaizon |http://www.freecodecamp.com/jaizon
Jaizon Carlos
@Jaizon
Apr 25 2017 23:20
@mdmpdx the "border: 0;" overrides the "height: 1;
Matt
@mdmpdx
Apr 25 2017 23:22
One thing I haven't figured out here is how to get the H1 and H2 elements to resize with the layout: https://codepen.io/mdmpdx/pen/gWLWer
Jaizon Carlos
@Jaizon
Apr 25 2017 23:30
well, you can use bootstraps for that, or jquery,
Matt
@mdmpdx
Apr 25 2017 23:31
i'm trying to use bootstrap... i have the H1 and H2 now housed in a col-xs-12 ... and that is nested within a div class="row"
Jaizon Carlos
@Jaizon
Apr 25 2017 23:31
@mdmpdx , I don't know wich one is best for you, in my case I would use bootstraps for
Paradox5
@Paradox5
Apr 25 2017 23:39
DUN DUN DUN
DUNDUNDUNDU
Jaizon Carlos
@Jaizon
Apr 25 2017 23:40
The css here is not required, just for you to see the difference, clearly .
Paradox5
@Paradox5
Apr 25 2017 23:41
Its official
blanchedalmond is my new favorite color
Matt
@mdmpdx
Apr 25 2017 23:42
@Jaizon I'm not sure if i understand... I already have H1, H2, H3, H4 all styled for usage in the page... in that case, how would I define different sizes?
Jaizon Carlos
@Jaizon
Apr 25 2017 23:42
@mdmpdx look the class I added to each of my element
on the h1 I used a class to hide it when on small (sm) and down screens
Matt
@mdmpdx
Apr 25 2017 23:44
in the event that h1 h2 h3 h4 are all already styled to various sizes to be used in the same layout (all displayed), would I create custom classes instead?
Jaizon Carlos
@Jaizon
Apr 25 2017 23:44
on the h2 I used a class to hide it on medium (md) and up screens, it is a bootstrap class
Matt
@mdmpdx
Apr 25 2017 23:44
basically what I mean is that I cannot just swap h1 for h2
in that case would i just have custom classes: h1.xs
vs. h1.md
jayjohns
@jayjohns
Apr 25 2017 23:45
i need the best resource for everything html! Im on the first project, which is to build a tribute page..
Jaizon Carlos
@Jaizon
Apr 25 2017 23:46
yeah, i'll show you
jayjohns
@jayjohns
Apr 25 2017 23:48
or will it be a lot of googling...?
Matt
@mdmpdx
Apr 25 2017 23:48
@jayjohns I am just finishing up that same project... this has proven invaluable to me: http://getbootstrap.com/css/
Lots of Bootstrap stuff was not necessarily covered in what precedes the first project. The stuff about responsive grids especially made more sense to me seeing it in context on the bootstrap resource
jayjohns
@jayjohns
Apr 25 2017 23:50
@mdmpdx awesome! ill give it a try!
Jaizon Carlos
@Jaizon
Apr 25 2017 23:50
@jayjohns https://www.w3schools.com/html/ best source for me
@mdmpdx https://codepen.io/jaizon/pen/bWBaBy here is my example
Matt
@mdmpdx
Apr 25 2017 23:51
@jayjohns Someone also mentioned here that CodePen will try to get you to use Bootstrap 4, and we've been learning Bootstrap 3. So you'll want to use Bootstrap 3 in the CSS Settings, not what they auto-populate
Jaizon Carlos
@Jaizon
Apr 25 2017 23:52
@mdmpdx if there's anything you don't understand tell me, in jQuery might be better, but Idon't know jquery well,
Matt
@mdmpdx
Apr 25 2017 23:52
@Jaizon Ah! I see -- using IDs to distinguish separate instances... I overlooked that
@Jaizon Yes, I realize jquery might do the job as well, but i am even less familiar with jquery right now :)
@Jaizon thanks!
CamperBot
@camperbot
Apr 25 2017 23:53
mdmpdx sends brownie points to @jaizon :sparkles: :thumbsup: :sparkles:
:warning: mdmpdx already gave jaizon points
Jaizon Carlos
@Jaizon
Apr 25 2017 23:53
@mdmpdx I didn't use that on the first example, srry :) but i'm not good with jquery at all
@mdmpdx by the way, I'm building everything with bootstraps 4, better this way since everyone is using it now on the web development field, well, not everyone, but still, they will, so we can just start using it now
Paradox5
@Paradox5
Apr 25 2017 23:55
QueryOfJ
jayjohns
@jayjohns
Apr 25 2017 23:55
@Jaizon oh ok good tips!
Henry
@GitHub-Henry
Apr 25 2017 23:56
If you'd like to see your repo as a website on github you should be familiar with this https://pages.github.com/