These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Apr 2017
WillTheCruzan
@WillTheCruzan
Apr 25 2017 00:06 UTC
http://codepen.io/WillTheCruzan/pen/qmaBvP
How do I make the nav bar functional?
3gimpfingers
@3gimpfingers
Apr 25 2017 00:12 UTC
@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 UTC
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 UTC
@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 UTC
@3gimpfingers : which check out and let you know
3gimpfingers
@3gimpfingers
Apr 25 2017 00:21 UTC
@shivsagar1 And you might have to display both inline too.
Chuck Hoffman
@rhoffman219
Apr 25 2017 00:24 UTC
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 UTC
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 UTC
@OrangeKulture With those endpoints they give us, if you're online, you are streaming something.
3gimpfingers
@3gimpfingers
Apr 25 2017 00:26 UTC
@rhoffman219 border-radius: 50%
Gulsvi
@gulsvi
Apr 25 2017 00:27 UTC
@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 UTC
@SkyCoder01 awesome, yeah thanks .. i was just thinking I might be assuming a lot here
CamperBot
@camperbot
Apr 25 2017 00:28 UTC
:star2: 1177 | @skycoder01 |http://www.freecodecamp.com/skycoder01
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Apr 25 2017 00:29 UTC
@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 UTC
@3gimpfingers your a life saver!
WillTheCruzan
@WillTheCruzan
Apr 25 2017 00:34 UTC
@3gimpfingers so how exactly would I do it?
Michael Duh
@mikaeloduh
Apr 25 2017 01:10 UTC
is there anyway to reload entire $(document).ready() ?
Michael Duh
@mikaeloduh
Apr 25 2017 01:19 UTC
I want to stop all the javascript process and reset/initialise everything
Gulsvi
@gulsvi
Apr 25 2017 01:21 UTC
@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 UTC
ditto
Jaizon Carlos
@Jaizon
Apr 25 2017 01:26 UTC
Can someone experienced help me really fast?
Gulsvi
@gulsvi
Apr 25 2017 01:29 UTC
I'm a student like everyone else here, but happy to try @Jaizon
JD Tadlock
@jdtdesigns
Apr 25 2017 01:36 UTC
@Jaizon What's the question?
Michael Duh
@mikaeloduh
Apr 25 2017 01:39 UTC
@SkyCoder01 I also wish can stop all the running process/timer immediately
Gulsvi
@gulsvi
Apr 25 2017 01:40 UTC
@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?
i did
Gulsvi
@gulsvi
Apr 25 2017 01:44 UTC
I'm guessing no mobile support is by design?
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 UTC
I keep getting killed lol
its all random
Jaizon Carlos
@Jaizon
Apr 25 2017 01:46 UTC
@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 )
best to find some weapons and collect some health before fighting
Jaizon Carlos
@Jaizon
Apr 25 2017 01:46 UTC
Really got stuck on this one
Gulsvi
@gulsvi
Apr 25 2017 01:47 UTC
@moT01 I'll play around with it and let you know if I spot any bugs. Must feel good to finish!
it needs a little bit of tweaking
JD Tadlock
@jdtdesigns
Apr 25 2017 01:48 UTC
@Jaizon Progress bar? Not sure what you need a progress bar for.
to king is too hard at the end, ...other than that its pretty good
JD Tadlock
@jdtdesigns
Apr 25 2017 01:48 UTC
@moT01 Just played it and died on the first enemy lol
Gulsvi
@gulsvi
Apr 25 2017 01:49 UTC
@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
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 UTC
Needs multiplayer and in game chat :p
co-op mode
yea
ill add that tomorrow
Gulsvi
@gulsvi
Apr 25 2017 01:50 UTC
sure :+1: lol
just hit 'M' the map is huge
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 UTC
I was surprised, really cool
Jaizon Carlos
@Jaizon
Apr 25 2017 01:53 UTC
@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 UTC
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1179 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 01:55 UTC
@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 UTC
@SkyCoder01 yes
Jaizon Carlos
@Jaizon
Apr 25 2017 02:01 UTC
I'm studying them right now :) @SkyCoder01
A simple way from scratch
Keon Samuel
@keonsam
Apr 25 2017 02:22 UTC
Sky react vs angualar?
Jaizon Carlos
@Jaizon
Apr 25 2017 02:29 UTC
@jdtdesigns look my work around http://codepen.io/jaizon/pen/LyRjVQ
there's nothing responsive there
JD Tadlock
@jdtdesigns
Apr 25 2017 02:31 UTC
@Jaizon You have a rogue <p> in your level2 div
those rogue elements always be creepin
Jaizon Carlos
@Jaizon
Apr 25 2017 02:34 UTC
@jdtdesigns ty, found that
CamperBot
@camperbot
Apr 25 2017 02:34 UTC
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 UTC
I hate using another editor
blob
And that'show my about section is looking
Jaizon Carlos
@Jaizon
Apr 25 2017 02:43 UTC
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 UTC
@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 UTC
Kewl
Ugggggghhh
Illness sucks
Jaizon Carlos
@Jaizon
Apr 25 2017 02:58 UTC
@jdtdesigns I know nothing about js, lol
Goodnight all, is too late here o Brazil
JD Tadlock
@jdtdesigns
Apr 25 2017 03:00 UTC
@Jaizon What better time to learn :P
Jaizon Carlos
@Jaizon
Apr 25 2017 03:01 UTC
true hhah
Quoc Anh Nguyen
@quocanh261997
Apr 25 2017 03:08 UTC
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 UTC
@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 UTC
currently stuck at the quote generator challenge
JD Tadlock
@jdtdesigns
Apr 25 2017 03:11 UTC
The browser console is your best friend when learning/debugging web sites/apps. Ctrl J @quocanh261997
Khoa Le
@Zacele
Apr 25 2017 03:11 UTC
donsn't know how to handle the Jquery yet
JD Tadlock
@jdtdesigns
Apr 25 2017 03:12 UTC
@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 UTC
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 UTC
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 UTC
@graciolli-f Do you have a codepen link? You need some kind of loop.
Gulsvi
@gulsvi
Apr 25 2017 03:50 UTC
@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()
Gulsvi
@gulsvi
Apr 25 2017 03:50 UTC
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 UTC
Oh, I see... it gives you one quote per call. Well, forget about the loop then... :D
Gulsvi
@gulsvi
Apr 25 2017 03:52 UTC

@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 UTC
@SkyCoder01 I tried to change that. The search still isn't working. :/
graciolli-f
@graciolli-f
Apr 25 2017 03:56 UTC
@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 UTC
@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 UTC
@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 UTC
Yeah, I am really new at this... I have no idea how to do that.
graciolli-f
@graciolli-f
Apr 25 2017 03:59 UTC
Ahhh!! That worked. Thank you so much @SkyCoder01
CamperBot
@camperbot
Apr 25 2017 03:59 UTC
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 UTC
No problem - have fun coding the rest
Nikki L.R.
@nikkilr88
Apr 25 2017 04:00 UTC
@SkyCoder01 Thanks for checking! I am using chrome too. I have no idea what is going on.
CamperBot
@camperbot
Apr 25 2017 04:00 UTC
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 04:01 UTC
@nikkilr88 Keep up the good work :) love the concept so far.
Nikki L.R.
@nikkilr88
Apr 25 2017 04:01 UTC
@SkyCoder01 Was it the second one? (add faves)
Gulsvi
@gulsvi
Apr 25 2017 04:02 UTC
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 UTC
@jdtdesigns and how would I go about doing that?
Gulsvi
@gulsvi
Apr 25 2017 04:03 UTC
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 UTC
@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 UTC
@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 UTC
@khaduch Thank you!
CamperBot
@camperbot
Apr 25 2017 04:10 UTC
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 UTC
@khaduch I'll have a look.
Roxroy
@roxroy
Apr 25 2017 04:11 UTC
@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 UTC
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 UTC
Yup!
Gulsvi
@gulsvi
Apr 25 2017 04:13 UTC
@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 UTC
@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 UTC
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 04:17 UTC
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 UTC
@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 UTC
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 UTC
@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 UTC
@jdtdesigns Thanks! I'll save it and try to figure it out tomorrow.
CamperBot
@camperbot
Apr 25 2017 04:51 UTC
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 UTC
@jdtdesigns I appreciate the help!
JD Tadlock
@jdtdesigns
Apr 25 2017 04:54 UTC
@nikkilr88 Welcome ;)
Matt
@Misaiah
Apr 25 2017 05:29 UTC
Hey guys, can someone help clarify a PHP/MySQL question?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:37 UTC
@Misaiah I can try to help
Matt
@Misaiah
Apr 25 2017 05:38 UTC

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 UTC
@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 UTC
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 UTC
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 UTC
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 UTC
Are you wanting to learn web dev or mainly desktop stuff?
Matt
@Misaiah
Apr 25 2017 05:53 UTC
@jdtdesigns
web dev for sure
JD Tadlock
@jdtdesigns
Apr 25 2017 05:54 UTC
@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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
But isnt PHP primarily used to connect servers to your site?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:58 UTC
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 UTC
but you can use php with java, .net, c++, etc right?
JD Tadlock
@jdtdesigns
Apr 25 2017 05:59 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
so Laravel is a branch of PHP?
JD Tadlock
@jdtdesigns
Apr 25 2017 06:06 UTC
Laravel is a framework that handles the backend/frontend/database interaction/security/authentication/ect.
Matt
@Misaiah
Apr 25 2017 06:07 UTC
....great....as if things weren't confusing enough lol
JD Tadlock
@jdtdesigns
Apr 25 2017 06:07 UTC
so it's a "full stack" framework
Matt
@Misaiah
Apr 25 2017 06:07 UTC
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 UTC
Laravel is php lol
Matt
@Misaiah
Apr 25 2017 06:08 UTC
aaaahahhahaha!!! Sorry @jdtdesigns ....dont hate me
JD Tadlock
@jdtdesigns
Apr 25 2017 06:08 UTC
no worries
Matt
@Misaiah
Apr 25 2017 06:08 UTC
I really do appreciate your help! Thanks @jdtdesigns !!!
CamperBot
@camperbot
Apr 25 2017 06:08 UTC
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 UTC
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 UTC
Im out for the evening. Have a fantastic rest of your day @jdtdesigns !
JD Tadlock
@jdtdesigns
Apr 25 2017 06:10 UTC
You too ;)
Matt
@Misaiah
Apr 25 2017 06:11 UTC
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 UTC
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 UTC
not recommended, but some people used it, so I guess its ok
Bogdan
@oblanao
Apr 25 2017 06:48 UTC
@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 UTC
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 UTC
@thinkC post a link to your pen please
Bogdan
@oblanao
Apr 25 2017 06:52 UTC
@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 UTC
@oblanao says cannot read property 'channel' of undefined
Bogdan
@oblanao
Apr 25 2017 07:03 UTC
@thinkC please post a link to your pen
thinkC
@thinkC
Apr 25 2017 07:03 UTC
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 UTC
@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 UTC
ok....will try that now ...thanks
Bogdan
@oblanao
Apr 25 2017 07:06 UTC
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 UTC
oh....checking...
Khoa Le
@Zacele
Apr 25 2017 07:12 UTC
hey guys
could you check at generate quote project
Why is not generate anything
thinkC
@thinkC
Apr 25 2017 07:16 UTC
@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 UTC
I have recreate the Quote Generator website
Daniel Madej
@dmadej
Apr 25 2017 07:35 UTC
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 UTC
thanks @kirbyedy
CamperBot
@camperbot
Apr 25 2017 07:46 UTC
thinkc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2038 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
thinkC
@thinkC
Apr 25 2017 07:52 UTC
@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 UTC
that should be correct
thinkC
@thinkC
Apr 25 2017 07:57 UTC
surprise my self
thinkC
@thinkC
Apr 25 2017 08:08 UTC
pls can anyone check out why data.channels.display_name does not work for this api url ?
thinkC
@thinkC
Apr 25 2017 08:29 UTC
guys it's working now
Neil
@NNeil1
Apr 25 2017 09:05 UTC
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 UTC
@NMC96 and what is the question ?
or you are just moaning :D
Neil
@NNeil1
Apr 25 2017 09:08 UTC
im moaning
either that or id end up breaking something lmao
kirbyedy
@kirbyedy
Apr 25 2017 09:08 UTC
ah ok :laughing:
Neil
@NNeil1
Apr 25 2017 09:09 UTC
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 UTC
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 UTC
how do I make the simon game things?
Neil
@NNeil1
Apr 25 2017 09:23 UTC
@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 UTC
I am thinking about the design.
nvm I think I can figure it out.
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 UTC
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 UTC

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?
because when the statement is true function reaches return;
Keon Samuel
@keonsam
Apr 25 2017 09:49 UTC
@Czpl how did you learn to design so good?
h1tag
@h1tag
Apr 25 2017 09:50 UTC
@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 UTC
@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 UTC
what the difference between REST API and AJAX?
Bogdan
@oblanao
Apr 25 2017 10:02 UTC
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 UTC
@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 UTC
@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 UTC
@fortMaximus thanks! Glad to hear it works for you as well
CamperBot
@camperbot
Apr 25 2017 10:10 UTC
oblanao sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 741 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 25 2017 10:11 UTC
@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 UTC
@fortMaximus OK, I will create a function that won't allow multiple consecutive operators
Jesse Jafa
@awareness481
Apr 25 2017 10:58 UTC
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 UTC
@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 UTC
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 UTC
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 UTC
@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 UTC
tstusr441 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @heroiczero |http://www.freecodecamp.com/heroiczero
aceroAD
@aceroAD
Apr 25 2017 11:15 UTC
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 UTC
$('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
@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 UTC
@Czpl how do i set that up?
that api basically returns a function (called myCallback in that case)
aceroAD
@aceroAD
Apr 25 2017 11:34 UTC
@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 UTC
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 UTC
@Czpl thank u, it was that i have them in wrong order
CamperBot
@camperbot
Apr 25 2017 11:37 UTC
aceroad sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @czpl |http://www.freecodecamp.com/czpl
@keonsam border-top-left-radius: 100%; for #first-box
Keon Samuel
@keonsam
Apr 25 2017 11:41 UTC
@Czpl man you are good thanks.
CamperBot
@camperbot
Apr 25 2017 11:41 UTC
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 UTC
@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 UTC
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 UTC
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 UTC
@UnovaXan what api are you trying to use?
Federico Dente
@fez994
Apr 25 2017 12:00 UTC
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 UTC
are you keeping track of player turns?
Federico Dente
@fez994
Apr 25 2017 12:01 UTC
@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 UTC
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 UTC
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 UTC
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 UTC
do you have an array of numbers?
Federico Dente
@fez994
Apr 25 2017 12:19 UTC
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 UTC
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 UTC
why when i float one div it goes out off their parent div?
Brandon Blackwell
@Radlerz1
Apr 25 2017 12:21 UTC
im not sure honestly aha Im on an ipad. hard to read your code
Federico Dente
@fez994
Apr 25 2017 12:22 UTC
@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 UTC
@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 UTC
the clear i have it, clearfix no, thank you. i didnt know that
Alexander Domikov
@AlexanderDom
Apr 25 2017 12:27 UTC
you're welcome bootstrap has a class for it https://v4-alpha.getbootstrap.com/utilities/clearfix/
aceroAD
@aceroAD
Apr 25 2017 12:28 UTC
now my div is inside its parent but no inline with the other div :(
use bootstrap grid
Alexander Domikov
@AlexanderDom
Apr 25 2017 12:44 UTC
@aceroAD i gonna see that
omarraza
@omarraza
Apr 25 2017 12:55 UTC
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 UTC
if your bloc haven't display: flex or inline-flex it's normal
omarraza
@omarraza
Apr 25 2017 13:04 UTC
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 UTC

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

SyntaxError: Unexpected end of input

anyone help me out, please?

gulptech
@gulptech
Apr 25 2017 13:10 UTC
@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 UTC

$("#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 UTC
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 UTC
@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 UTC
@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 UTC
thank you everyone
omarraza
@omarraza
Apr 25 2017 13:20 UTC
@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 UTC
@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 UTC
@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 UTC
@omarraza thanks...i will do it like that only now on...
CamperBot
@camperbot
Apr 25 2017 13:24 UTC
:cookie: 267 | @omarraza |http://www.freecodecamp.com/omarraza
21stnomad sends brownie points to @omarraza :sparkles: :thumbsup: :sparkles:
gulptech
@gulptech
Apr 25 2017 13:25 UTC
@omarraza do you have a pen somewhere ?
omarraza
@omarraza
Apr 25 2017 13:25 UTC
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 UTC
@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 UTC
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 UTC
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 UTC
@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 UTC
html,body {height:100%;}
.container {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
omarraza
@omarraza
Apr 25 2017 13:50 UTC
what's the difference between html, body { ...} and body {...] ?
that worked!
@gulptech thank you
CamperBot
@camperbot
Apr 25 2017 13:53 UTC
omarraza sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @gulptech |http://www.freecodecamp.com/gulptech
omarraza
@omarraza
Apr 25 2017 14:00 UTC
@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 UTC
how would you center the middle circle in this app?
omarraza
@omarraza
Apr 25 2017 14:02 UTC
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 UTC
@WillTheCruzan Sorry I ran off. Did you get it figured out?
Khoa Le
@Zacele
Apr 25 2017 14:35 UTC
really frustrated in doing the weather challenge website
I have the correct key API
but it keep set that error 401 occur
@Zacele got a pen?
Khoa Le
@Zacele
Apr 25 2017 14:39 UTC
haven't put on pen yet
working at my laptop
stuck for almost a day
paste the js up
Khoa Le
@Zacele
Apr 25 2017 14:40 UTC
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 UTC
most of it from the demoCode
struggle my own code because my API key is till not working
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 UTC
the console just said that my URL is unauthorized
and the app just didn't show me anything else
will the url work when you add 'imperial' at the end like that?
Khoa Le
@Zacele
Apr 25 2017 15:01 UTC
I deleted that and still giving me that unauthorized error
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 UTC
of course it have
we call the ip-api to extract the lon and lat first
k
maybe remove jsonp?
you able to console.log the location data?
gulptech
@gulptech
Apr 25 2017 15:12 UTC
@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 UTC
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 UTC
how do I make the actual portfolio part of my portfolio page?
Sandesh Shrestha
@UnovaXan
Apr 25 2017 15:42 UTC
@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 UTC
nvm
Gulsvi
@gulsvi
Apr 25 2017 15:50 UTC

@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.

you saying he copied
Gulsvi
@gulsvi
Apr 25 2017 15:52 UTC
Search for this in codepen: // When the documet finished loading call the Location API
Christina
@geekyinsights
Apr 25 2017 15:52 UTC
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)

  });

});
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 UTC
@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 UTC
hey wazzup guys, good morning/afternoon ... night? possibly?
Kevin Robertson
@kevnbot
Apr 25 2017 15:56 UTC
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
@geekyinsights there's some good examples in their api docs https://quotesondesign.com/api-v4-0/
Gulsvi
@gulsvi
Apr 25 2017 15:58 UTC
@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 UTC
kicking it from early in the morning, i see .. @SkyCoder01
Gulsvi
@gulsvi
Apr 25 2017 16:00 UTC
9am :) I've been up
Christina
@geekyinsights
Apr 25 2017 16:01 UTC
@moT01 I @skycoder01 @UnovaXan Thanks. It was the missing "s" on the http call.
CamperBot
@camperbot
Apr 25 2017 16:01 UTC
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 UTC
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 UTC
lol, I wish I had a dog
Jorge
@flawedLogic506
Apr 25 2017 16:01 UTC
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 UTC
I prefer cats myself
Gulsvi
@gulsvi
Apr 25 2017 16:02 UTC
That's what I have at the moment...easier to take care of
Paradox5
@Paradox5
Apr 25 2017 16:02 UTC
But I do love walking
Gulsvi
@gulsvi
Apr 25 2017 16:02 UTC
dog back home with the family though
Paradox5
@Paradox5
Apr 25 2017 16:02 UTC
Hmmm
Jorge
@flawedLogic506
Apr 25 2017 16:02 UTC
ohh yah! i love this dude to death .. dogs are awesome
Paradox5
@Paradox5
Apr 25 2017 16:02 UTC
Hello Sky hello Jorge
How are yall doing
Jorge
@flawedLogic506
Apr 25 2017 16:02 UTC
whats happening dude? all good?
Paradox5
@Paradox5
Apr 25 2017 16:03 UTC
Im good
Gulsvi
@gulsvi
Apr 25 2017 16:03 UTC
Feeling better?
Paradox5
@Paradox5
Apr 25 2017 16:03 UTC
With enough advil and benedril you do feel better
Gulsvi
@gulsvi
Apr 25 2017 16:04 UTC
no fun
Paradox5
@Paradox5
Apr 25 2017 16:04 UTC
Nope
Has anything interesting happened
Jorge
@flawedLogic506
Apr 25 2017 16:05 UTC
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 UTC
mail it to yourself?
gulptech
@gulptech
Apr 25 2017 16:06 UTC
@OrangeKulture email the pic from your phone...who uses cable anymore
Gulsvi
@gulsvi
Apr 25 2017 16:06 UTC
^^
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 UTC
Yea
"Codepen is going all https"
Jorge
@flawedLogic506
Apr 25 2017 16:08 UTC
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 UTC
just get one off of google images, we won't know the difference lol
Paradox5
@Paradox5
Apr 25 2017 16:09 UTC
yea
Jorge
@flawedLogic506
Apr 25 2017 16:09 UTC
at least i didnt notice
so you are auto directed to the https ?
Gulsvi
@gulsvi
Apr 25 2017 16:10 UTC
yes: http://codepen.io/pen/ becomes https://codepen.io/pen/
Jorge
@flawedLogic506
Apr 25 2017 16:11 UTC
oh yeah! that's right .. awesome
Gulsvi
@gulsvi
Apr 25 2017 16:11 UTC
it's early....
still
Jorge
@flawedLogic506
Apr 25 2017 16:12 UTC
fckn weather app :joy:
Gulsvi
@gulsvi
Apr 25 2017 16:12 UTC
lol
Paradox5
@Paradox5
Apr 25 2017 16:12 UTC
Oh thats unfortunate for weather apps
Http support only for free
Gulsvi
@gulsvi
Apr 25 2017 16:13 UTC
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 UTC
That is why my weather app works with https and http :)
Gulsvi
@gulsvi
Apr 25 2017 16:16 UTC
had to rewrite mine :/
Paradox5
@Paradox5
Apr 25 2017 16:16 UTC
I have a new favorite font
Dosis
Keon Samuel
@keonsam
Apr 25 2017 16:17 UTC
heyllo
Paradox5
@Paradox5
Apr 25 2017 16:17 UTC
Hey Keon
Hows your day doing
Keon Samuel
@keonsam
Apr 25 2017 16:18 UTC
hey remember that?
Paradox5
@Paradox5
Apr 25 2017 16:18 UTC
Ofc i do
Keon Samuel
@keonsam
Apr 25 2017 16:18 UTC
lol
Gulsvi
@gulsvi
Apr 25 2017 16:18 UTC
how's tic tac toe going
Paradox5
@Paradox5
Apr 25 2017 16:19 UTC
Toe tic tacing
Keon Samuel
@keonsam
Apr 25 2017 16:19 UTC
I created a random computer AI then skip it.
alpox
@alpox
Apr 25 2017 16:19 UTC
Tic-tac-tic-tac---OUCH MY TOE
Gulsvi
@gulsvi
Apr 25 2017 16:19 UTC
lol, I broke my toe last week. True for me
Paradox5
@Paradox5
Apr 25 2017 16:20 UTC
Ouch
Toe breaks arnt fun
Gulsvi
@gulsvi
Apr 25 2017 16:20 UTC
sucks, just have to ride it out 4-6 weeks
alpox
@alpox
Apr 25 2017 16:20 UTC
@SkyCoder01 :o oh sry
Paradox5
@Paradox5
Apr 25 2017 16:20 UTC
I recommend 50ccs of hot cocoa and good movie
Gulsvi
@gulsvi
Apr 25 2017 16:21 UTC
advil for now, beer on the weekends
alpox
@alpox
Apr 25 2017 16:21 UTC
Lots of coding
gulptech
@gulptech
Apr 25 2017 16:21 UTC
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 UTC
@€€
¿^¤©
Kevin Robertson
@kevnbot
Apr 25 2017 16:25 UTC
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 UTC
@kevnbot Are you using the twitter widget .js code too?
Paradox5
@Paradox5
Apr 25 2017 16:26 UTC
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 UTC
I guess no, I dont think I have anything in the json file
Gulsvi
@gulsvi
Apr 25 2017 16:27 UTC
nvm, this is javascript in your HTML: encodeURIComponent('currentQuoteTweet')
Kevin Robertson
@kevnbot
Apr 25 2017 16:27 UTC
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 UTC
Im going to be working though a tragedy with my wikipedia viewer when I get home
gulptech
@gulptech
Apr 25 2017 16:28 UTC
&text=
Gulsvi
@gulsvi
Apr 25 2017 16:28 UTC
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 UTC
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 UTC

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 UTC
ok.
so thatll be a function?
gulptech
@gulptech
Apr 25 2017 16:30 UTC
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 UTC
how do I use javascript to set this up?
just that single line?
Gulsvi
@gulsvi
Apr 25 2017 16:30 UTC
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 UTC
Oh ive made a terrible terrible mistake
Vamp
@the-vampiire
Apr 25 2017 16:41 UTC
any idea how to trigger a navtab to be active aside from clicking the tab itself?
Gulsvi
@gulsvi
Apr 25 2017 16:41 UTC
@the-vampiire You can add the class "active" to the tab to manually make it active
Vamp
@the-vampiire
Apr 25 2017 16:42 UTC
well ya lol
Gulsvi
@gulsvi
Apr 25 2017 16:42 UTC
.addClass()
Vamp
@the-vampiire
Apr 25 2017 16:42 UTC
hm
but I would then need to remove the current tab active class
Kevin Robertson
@kevnbot
Apr 25 2017 16:43 UTC
is this the logic that grabs the current quote to be tweeted out?
Vamp
@the-vampiire
Apr 25 2017 16:43 UTC
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 UTC
```
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 UTC
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 UTC
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 UTC
and the #tweet is what points it to the button?
@SkyCoder01 what are you trying to show me there, ...someone copied me?
Gulsvi
@gulsvi
Apr 25 2017 16:45 UTC
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
i would copy it too, its beautiful
Gulsvi
@gulsvi
Apr 25 2017 16:46 UTC
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 :)
ha, it works, ...not my best
Gulsvi
@gulsvi
Apr 25 2017 16:48 UTC
@kevnbot Yes, #tweet would represent an element with the ID of tweet.
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 UTC
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.
that seems pretty sensitive, aren't you allowed quite a few calls
Fabian Rosen Karlsson
@bablet
Apr 25 2017 16:50 UTC
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 :)
nice, maybe i should something like that
Gulsvi
@gulsvi
Apr 25 2017 16:51 UTC
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
could be i guess
Gulsvi
@gulsvi
Apr 25 2017 16:52 UTC
@bablet lots of people use eval() just be careful with it :) I'm going to try to use this: http://mathjs.org/
isn't there something like https://wind-bow.glitch.me/ but for the weather api? ;d
Gulsvi
@gulsvi
Apr 25 2017 16:53 UTC
That's for Twitch. Wish they did the same for the weather API :)
ya that's what im asking
Fabian Rosen Karlsson
@bablet
Apr 25 2017 16:54 UTC
Thanks! @SkyCoder01
CamperBot
@camperbot
Apr 25 2017 16:54 UTC
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 UTC
ok im just gunna start over from where I started this morning. my twitter button links to twitter. please guide me from here.
by the way I made my twitch thingy today https://codepen.io/czpl/full/BRLEwX/
Gulsvi
@gulsvi
Apr 25 2017 16:54 UTC
Nice work @Czpl I like the buttons
Kevin Robertson
@kevnbot
Apr 25 2017 16:59 UTC
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
just the twitter left? @kevnbot
Kevin Robertson
@kevnbot
Apr 25 2017 17:01 UTC
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 UTC

@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 UTC

Hello

Why does it skip number 9?

https://repl.it/HX87/2

Please have a look :/

@kevnbot yea, it all works for me cept that
Waqas Abbasi
@Waqas909
Apr 25 2017 17:03 UTC
https://twitter.com/intent/tweet/?text=" + $(".quote").text() + " " + $(".author").text()
thats what i used
Vamp
@the-vampiire
Apr 25 2017 17:03 UTC
@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 UTC
@moT01 and its not working?
it works
thats what i used on my project
Waqas Abbasi
@Waqas909
Apr 25 2017 17:05 UTC
@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 UTC
you used that in the A HREF?
yes
Waqas Abbasi
@Waqas909
Apr 25 2017 17:06 UTC
@the-vampiire See this one https://repl.it/HX87/2
Jorge
@flawedLogic506
Apr 25 2017 17:06 UTC
@Czpl looking good!
Waqas Abbasi
@Waqas909
Apr 25 2017 17:07 UTC
Yea the code is allover the place, because I'm just playing around
Vamp
@the-vampiire
Apr 25 2017 17:07 UTC
I am just not following the logic
maybe someone else can
Kevin Robertson
@kevnbot
Apr 25 2017 17:07 UTC
what is your .quote from? another part of your project?
yea, those are variables, ...you will want to put your own in there
Kevin Robertson
@kevnbot
Apr 25 2017 17:08 UTC
ok thats what I was thinking.
Vamp
@the-vampiire
Apr 25 2017 17:09 UTC
@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;

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

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 UTC
@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 UTC
Hey..
Anybody knows when beta.freecodecamp.com will come out of beta?
Waqas Abbasi
@Waqas909
Apr 25 2017 17:15 UTC

@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 UTC
ah clever man
good work!
Waqas Abbasi
@Waqas909
Apr 25 2017 17:16 UTC
@the-vampiire I couldnt think of another way to make a timer
@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 UTC
@the-vampiire Thanks
CamperBot
@camperbot
Apr 25 2017 17:16 UTC
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 UTC
can someone explain me array.prototype.filter ? i tried to understand it but i failed
Moisés Man
@moigithub
Apr 25 2017 17:21 UTC
[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 UTC
@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 UTC
[1,2,3,4,5].filter(num => num > 3) // [4,5]
a27-suryansh
@a27-suryansh
Apr 25 2017 17:25 UTC
Thanks @moigithub
CamperBot
@camperbot
Apr 25 2017 17:25 UTC
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 UTC
@moigithub Just had to lol
Vamp
@the-vampiire
Apr 25 2017 17:26 UTC

@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');

  });
@kevnbot those are my variables, ...they wont work for you
Kevin Robertson
@kevnbot
Apr 25 2017 17:26 UTC
I understand that. I thought I changed the variable I needed to the function
that won't work putting it in the html
Vamp
@the-vampiire
Apr 25 2017 17:27 UTC
@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
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 UTC
put that in the js?
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 UTC

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 UTC
@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 UTC
nikkilr88 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 923 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
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 UTC
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 UTC
ok cool. so I need to fix this line?
  document.getElement(<a>).href = "https://twitter.com/intent/tweet/?text=" +  "$("newQuote()").text()"
that the one
@aps120797 looks good
not sure if the background is awesome or too much
JD Tadlock
@jdtdesigns
Apr 25 2017 17:43 UTC
@nikkilr88 Sure
MonstaMinerX
@MonstaMinerX
Apr 25 2017 17:50 UTC
hi
hi
Kevin Robertson
@kevnbot
Apr 25 2017 17:54 UTC
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
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.
ha
i know the feeling
how could you figure this out
Kevin Robertson
@kevnbot
Apr 25 2017 18:03 UTC
Alright well ive been stuck on this since Dec 8th. so im just done.
gimme a couple minutes
youre close
Vamp
@the-vampiire
Apr 25 2017 18:08 UTC
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 UTC
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 UTC
right. Ok I was using the function name, not the variable.
ok at least its opening twitter again
now get a quote and author to show up when the page loads
Kevin Robertson
@kevnbot
Apr 25 2017 18:23 UTC
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 UTC
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 UTC
you should also run newQuote() as soon as the page loads.
Kevin Robertson
@kevnbot
Apr 25 2017 18:30 UTC
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.
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 UTC
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 UTC
kevnbot sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 637 | @mot01 |http://www.freecodecamp.com/mot01
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 UTC
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 UTC
@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 UTC
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 UTC
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 UTC
yea ok. I see that now
Vamp
@the-vampiire
Apr 25 2017 18:51 UTC
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 UTC
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 UTC
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 UTC
ya the whole point of using a variabel init
Kevin Robertson
@kevnbot
Apr 25 2017 18:53 UTC
which is why I had such a hard time understanding. I didnt get that.
Vamp
@the-vampiire
Apr 25 2017 18:53 UTC
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 UTC
yup makes sense
Vamp
@the-vampiire
Apr 25 2017 18:54 UTC
ok go make it work
show me
Kevin Robertson
@kevnbot
Apr 25 2017 18:54 UTC
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 UTC
cool man
Kevin Robertson
@kevnbot
Apr 25 2017 18:56 UTC
would it be cleaner to assign quotes[randomNumber] to a different variable?
Vamp
@the-vampiire
Apr 25 2017 18:56 UTC
nope
Kevin Robertson
@kevnbot
Apr 25 2017 18:56 UTC
like var currentQuote = quotes[randomNumber]
Vamp
@the-vampiire
Apr 25 2017 18:56 UTC
oh i guess sure
Kevin Robertson
@kevnbot
Apr 25 2017 18:56 UTC
or is that just muddying it up
Vamp
@the-vampiire
Apr 25 2017 18:56 UTC
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 UTC
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 UTC
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 UTC
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 UTC
@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 UTC
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 UTC
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
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 UTC
@PolarisTLX Btw. go sure to use the proxy urls from freecodecamp - https://wind-bow.gomix.me/
omarraza
@omarraza
Apr 25 2017 19:17 UTC
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
are those accurate classes? should there be a md in there or somethign
omarraza
@omarraza
Apr 25 2017 19:19 UTC
https://v4-alpha.getbootstrap.com/layout/grid/ seems to suggest those are good class names
pen?
alpox
@alpox
Apr 25 2017 19:23 UTC
@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 UTC
@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 UTC
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 UTC
@usamacjs Can you show us your pen or your page in some other way?
Usama Mahmood
@usamacjs
Apr 25 2017 19:32 UTC
Screen Shot 2017-04-25 at 10.32.36 PM.png
alpox
@alpox
Apr 25 2017 19:34 UTC
@usamacjs Also the place where you are adding your icon?
Usama Mahmood
@usamacjs
Apr 25 2017 19:35 UTC
Screen Shot 2017-04-25 at 10.35.08 PM.png
omarraza
@omarraza
Apr 25 2017 19:35 UTC
@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 UTC
omarraza sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 975 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 25 2017 19:36 UTC
@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 UTC
@alpox actually, adding that to .container and removing display: flex didn't center everything
Usama Mahmood
@usamacjs
Apr 25 2017 19:37 UTC
@alpox do you know what i should do?
omarraza
@omarraza
Apr 25 2017 19:37 UTC
its all at the top of the page, and i kept height: 100%
alpox
@alpox
Apr 25 2017 19:37 UTC
@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 UTC
but the rows do work now!
alpox
@alpox
Apr 25 2017 19:37 UTC
@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 UTC
@alpox oh god, THANK YOU SO MUCH!!!!
CamperBot
@camperbot
Apr 25 2017 19:38 UTC
usamacjs sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 976 | @alpox |http://www.freecodecamp.com/alpox
omarraza
@omarraza
Apr 25 2017 19:38 UTC
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 UTC
@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 UTC
hey how to fit image into div container
anybody here
stuck with my first assignment
alpox
@alpox
Apr 25 2017 19:48 UTC
@SSheorain
<div>
   <img src="...">
</div>
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:52 UTC
tried that @alpox but the image is going beyond the div
alpox
@alpox
Apr 25 2017 19:54 UTC
@SSheorain Do you have a pen showing that?
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:54 UTC
yes
and one more doubt regarding columns and rows in bootstrap
alpox
@alpox
Apr 25 2017 19:58 UTC
Well can you show it?
SAURABH SHEORAIN
@SSheorain
Apr 25 2017 19:59 UTC
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 UTC
@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 UTC
@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 UTC
@alpox i used img-responsive earlier..
is there difference between responsive and fluid
alpox
@alpox
Apr 25 2017 20:07 UTC
@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 UTC
ok thanks @alpox :smile:
CamperBot
@camperbot
Apr 25 2017 20:09 UTC
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 UTC
@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 UTC
@khaduch thanks :+1:
CamperBot
@camperbot
Apr 25 2017 20:10 UTC
ssheorain sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2792 | @khaduch |http://www.freecodecamp.com/khaduch
overkill
@0verk1ll
Apr 25 2017 20:13 UTC

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 UTC
@ImSeth Try to make the nav display: block
@ImSeth Inline elements ignore margin attributes
overkill
@0verk1ll
Apr 25 2017 20:18 UTC
@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 UTC
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 UTC
@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 UTC
@alpox Thank you for your help. It is centered correctly now.
Usama Mahmood
@usamacjs
Apr 25 2017 20:31 UTC
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 UTC
@usamacjs Manipulating the scroll behaviour is usually not good for the user-experience
Usama Mahmood
@usamacjs
Apr 25 2017 20:33 UTC
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 UTC
@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 UTC
thank you :)
alpox
@alpox
Apr 25 2017 20:36 UTC
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 UTC
@alpox thanks a bunch man :) :smile:
CamperBot
@camperbot
Apr 25 2017 20:39 UTC
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 UTC
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 UTC
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 UTC
@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 UTC
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 UTC
@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 UTC
@mdmpdx lotta self learning and lotta help when you ask questions
Matt
@mdmpdx
Apr 25 2017 21:19 UTC
@khaduch thanks -- I'll revisit it. And thanks for the tip re: Bootstrap 4 vs 3
CamperBot
@camperbot
Apr 25 2017 21:19 UTC
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 UTC
ummmmm, can somebody help me too?
Henry
@GitHub-Henry
Apr 25 2017 21:21 UTC
@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 UTC
@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 UTC
@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 UTC
@GitHub-Henry i am uploading it, you can have a look
Henry
@GitHub-Henry
Apr 25 2017 21:24 UTC
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 UTC
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 UTC
@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 UTC
so learn via codepen.io to figure out how to use bootstrap
Usama Mahmood
@usamacjs
Apr 25 2017 21:26 UTC
if you can have a look and tell me why the scroll spy is not working :(
Henry
@GitHub-Henry
Apr 25 2017 21:30 UTC
@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 UTC
thank you :)
JD Tadlock
@jdtdesigns
Apr 25 2017 21:31 UTC
@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 UTC
@jdtdesigns okay :)
Paradox5
@Paradox5
Apr 25 2017 21:47 UTC
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 UTC
@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 UTC
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 UTC
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 UTC
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 UTC
https://karumba15.github.io/Portfolio/ why me portfolio dont load the css at the github?
my"
KatSaldivar
@KatSaldivar
Apr 25 2017 22:27 UTC
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 UTC
@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 UTC
@OrangeKulture thanks.
CamperBot
@camperbot
Apr 25 2017 22:27 UTC
katsaldivar sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @orangekulture |http://www.freecodecamp.com/orangekulture
Gulsvi
@gulsvi
Apr 25 2017 22:28 UTC
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 UTC
@OrangeKulture is there any for a quick fix?
Jorge
@flawedLogic506
Apr 25 2017 22:29 UTC
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 UTC
Hey guys :D
Jorge
@flawedLogic506
Apr 25 2017 22:29 UTC
i believe Dark Sky allowed jsonp? Sky ? that might solve the problem
Gulsvi
@gulsvi
Apr 25 2017 22:29 UTC
For weather :)
KatSaldivar
@KatSaldivar
Apr 25 2017 22:29 UTC
@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 UTC
waahaha .. im going crazy
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:29 UTC
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 UTC
@Karumba15
https://karumba15.github.io/Portfolio/ why my portfolio dont load the css at the github?
Gulsvi
@gulsvi
Apr 25 2017 22:30 UTC
@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 UTC
It was easy to make with JS Objects...but I´m completly lost with the API functions...
Jorge
@flawedLogic506
Apr 25 2017 22:31 UTC
@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 UTC
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 UTC
@LucasSchneiderRS quotes are working
KatSaldivar
@KatSaldivar
Apr 25 2017 22:32 UTC
@SkyCoder01 Thanks
CamperBot
@camperbot
Apr 25 2017 22:32 UTC
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @skycoder01 |http://www.freecodecamp.com/skycoder01
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:33 UTC
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 UTC
@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 UTC
@LucasSchneiderRS ahhh ok ! gotcha
KatSaldivar
@KatSaldivar
Apr 25 2017 22:34 UTC
@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 UTC
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 UTC
@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 UTC
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 UTC
@LucasSchneiderRS you can google it .. just go famous quotes API or something along those lines
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:35 UTC
"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 UTC
forismatic is one, altho there's problem with the HTTPs thing
Gulsvi
@gulsvi
Apr 25 2017 22:36 UTC
@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 UTC
quotes on design is pretty decent
Gulsvi
@gulsvi
Apr 25 2017 22:36 UTC
If you want something unique, there are lots of others out there
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:36 UTC
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 UTC
If you like Chuck Noris, there is also this one :) http://www.icndb.com/api/
Jorge
@flawedLogic506
Apr 25 2017 22:38 UTC
yeah im gonna have to basically re write all the pens :S
Gulsvi
@gulsvi
Apr 25 2017 22:39 UTC
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 UTC
@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 UTC
botstatus
CamperBot
@camperbot
Apr 25 2017 22:39 UTC
All bot systems are go!
botVersion: 0.0.12
env: prod
botname: camperbot
alpox
@alpox
Apr 25 2017 22:39 UTC
oilbot
Gulsvi
@gulsvi
Apr 25 2017 22:40 UTC
rawgit is great
Jorge
@flawedLogic506
Apr 25 2017 22:41 UTC
awesome, Sky .. cbot is closer and closer to being the next Jarvis
Gulsvi
@gulsvi
Apr 25 2017 22:41 UTC
I'll have to build my own Skynet some day :)
alpox
@alpox
Apr 25 2017 22:42 UTC
@SkyCoder01 I don't even know what that is :D
Jorge
@flawedLogic506
Apr 25 2017 22:42 UTC
yeah for sure haha
Gulsvi
@gulsvi
Apr 25 2017 22:43 UTC
It's from the Terminator movies :)
Jorge
@flawedLogic506
Apr 25 2017 22:43 UTC
AI seems a lot of fun
alpox
@alpox
Apr 25 2017 22:43 UTC
Ah i've never seen these :D
Gulsvi
@gulsvi
Apr 25 2017 22:43 UTC
Arnold is Austrian though, I think, not Swiss
:)
alpox
@alpox
Apr 25 2017 22:43 UTC
Aha :D i thought he was american
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:43 UTC
one question: why FCC don´t put a link for this APi websites?
KatSaldivar
@KatSaldivar
Apr 25 2017 22:44 UTC
@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 UTC
Sure
Gulsvi
@gulsvi
Apr 25 2017 22:46 UTC
@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 UTC
ok
Gulsvi
@gulsvi
Apr 25 2017 22:47 UTC
@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 UTC
@SkyCoder01 I'm still getting undefined for some reason
Paradox5
@Paradox5
Apr 25 2017 22:49 UTC
Any suggestions for what to do next
Gulsvi
@gulsvi
Apr 25 2017 22:49 UTC
@KatSaldivar make sure the URL is https:
KatSaldivar
@KatSaldivar
Apr 25 2017 22:50 UTC
@SkyCoder01
@SkyCoder01 Thank you!
CamperBot
@camperbot
Apr 25 2017 22:50 UTC
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 22:50 UTC
@Paradox5 test it out - look at those titles returned
No problem, Kat
Paradox5
@Paradox5
Apr 25 2017 22:51 UTC
Well everything is correct now new goal make those titals links to the wikipedia page
Gulsvi
@gulsvi
Apr 25 2017 22:52 UTC
image.png
I searched for "hello" and got "e", "l", "l", and "o" for article titles
Paradox5
@Paradox5
Apr 25 2017 22:52 UTC
yea
just searched for something other then a
hmmm
oh
im a fool
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:52 UTC
@SkyCoder01 :D
Paradox5
@Paradox5
Apr 25 2017 22:52 UTC
i know what i did
LucasSchneiderRS
@LucasSchneiderRS
Apr 25 2017 22:53 UTC
next step: how to personalise my quotes? hehehehe :D
(in the API site) hehehe
KatSaldivar
@KatSaldivar
Apr 25 2017 22:53 UTC
@SkyCoder01 hmm, interesting.... Do I need to change the ID number to get new quotes?
Paradox5
@Paradox5
Apr 25 2017 22:55 UTC
Try now sky
Gulsvi
@gulsvi
Apr 25 2017 22:55 UTC
@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 UTC
m-m-mobile
there are things other then pcs
and macs
KatSaldivar
@KatSaldivar
Apr 25 2017 22:57 UTC
@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 UTC
Well its about the same
Gulsvi
@gulsvi
Apr 25 2017 22:59 UTC
@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 UTC
babel?
Gulsvi
@gulsvi
Apr 25 2017 23:01 UTC
It's for older browsers, so they understand ES6
Paradox5
@Paradox5
Apr 25 2017 23:01 UTC
ah
TIL
KatSaldivar
@KatSaldivar
Apr 25 2017 23:01 UTC
@SkyCoder01 thanks. I added it but now it doesn't work. lol
CamperBot
@camperbot
Apr 25 2017 23:01 UTC
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Gulsvi
@gulsvi
Apr 25 2017 23:02 UTC
@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 UTC
oh and thanks @SkyCoder01 for helping me realize what was wrong
CamperBot
@camperbot
Apr 25 2017 23:03 UTC
paradox5 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 25 2017 23:03 UTC
Sure, np
KatSaldivar
@KatSaldivar
Apr 25 2017 23:03 UTC
@SkyCoder01 Yay! Thanks a million! :D
CamperBot
@camperbot
Apr 25 2017 23:03 UTC
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Matt
@mdmpdx
Apr 25 2017 23:09 UTC
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 UTC
Ive got a terrible habit
for never leaving a single comment
aRtoo
@artoodeeto
Apr 25 2017 23:13 UTC

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 UTC
@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 UTC
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 UTC
@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 UTC
@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 UTC
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 UTC
@mdmpdx the "border: 0;" overrides the "height: 1;
Matt
@mdmpdx
Apr 25 2017 23:22 UTC
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 UTC
well, you can use bootstraps for that, or jquery,
Matt
@mdmpdx
Apr 25 2017 23:31 UTC
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 UTC
@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 UTC
DUN DUN DUN
DUNDUNDUNDU
Jaizon Carlos
@Jaizon
Apr 25 2017 23:40 UTC
The css here is not required, just for you to see the difference, clearly .
Paradox5
@Paradox5
Apr 25 2017 23:41 UTC
Its official
blanchedalmond is my new favorite color
Matt
@mdmpdx
Apr 25 2017 23:42 UTC
@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 UTC
@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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
yeah, i'll show you
jayjohns
@jayjohns
Apr 25 2017 23:48 UTC
or will it be a lot of googling...?
Matt
@mdmpdx
Apr 25 2017 23:48 UTC
@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 UTC
@mdmpdx awesome! ill give it a try!
Jaizon Carlos
@Jaizon
Apr 25 2017 23:50 UTC
@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 UTC
@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 UTC
@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 UTC
@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 UTC
mdmpdx sends brownie points to @jaizon :sparkles: :thumbsup: :sparkles:
:warning: mdmpdx already gave jaizon points
Jaizon Carlos
@Jaizon
Apr 25 2017 23:53 UTC
@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 UTC
QueryOfJ
jayjohns
@jayjohns
Apr 25 2017 23:55 UTC
@Jaizon oh ok good tips!
Henry
@GitHub-Henry
Apr 25 2017 23:56 UTC
If you'd like to see your repo as a website on github you should be familiar with this https://pages.github.com/