http://codepen.io/WillTheCruzan/pen/qmaBvP
How do I make the nav bar functional?
How do I make the nav bar functional?
@WillTheCruzan You put your id where you want it to go to in your href attribute.
@WillTheCruzan Does that make sense to you?
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
@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.
@3gimpfingers : which check out and let you know
@shivsagar1 And you might have to display both inline too.
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
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
@OrangeKulture With those endpoints they give us, if you're online, you are streaming something.
@rhoffman219
border-radius: 50%
@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.
@SkyCoder01 awesome, yeah thanks .. i was just thinking I might be assuming a lot here
:star2: 1177 | @skycoder01 |http://www.freecodecamp.com/skycoder01
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
@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.
@3gimpfingers your a life saver!
@3gimpfingers so how exactly would I do it?
is there anyway to reload entire
$(document).ready() ?
I want to stop all the javascript process and reset/initialise everything
@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.
ditto
Can someone experienced help me really fast?
I'm a student like everyone else here, but happy to try @Jaizon
@Jaizon What's the question?
hows my game? https://mot01.github.io/FCC-Rogue-Dungeon-Game/
@SkyCoder01 I also wish can stop all the running process/timer immediately
@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
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
I keep getting killed lol
its all random
@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
Really got stuck on this one
@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
@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
@moT01 Just played it and died on the first enemy lol
@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
Needs multiplayer and in game chat :p
co-op mode
yea
ill add that tomorrow
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
I was surprised, really cool
@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
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1179 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@Jaizon Are you talking about something like this pen? http://s.codepen.io/jmasked/pen/RKYXNG
@SkyCoder01 yes
I'm studying them right now :) @SkyCoder01
A simple way from scratch
Sky react vs angualar?
@jdtdesigns look my work around http://codepen.io/jaizon/pen/LyRjVQ
there's nothing responsive there
@Jaizon You have a rogue <p> in your level2 div
those rogue elements always be creepin
@jdtdesigns ty, found that
jaizon sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 920 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
I hate using another editor
And that'show my about section is looking
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
@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
Kewl
Ugggggghhh
Illness sucks
@jdtdesigns I know nothing about js, lol
Goodnight all, is too late here o Brazil
@Jaizon What better time to learn :P
true hhah
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
@quocanh261997 Openweather only supports https if you have a premium account. You can use a service like weatherunderground that supports https for free.
currently stuck at the quote generator challenge
The browser console is your best friend when learning/debugging web sites/apps. Ctrl J @quocanh261997
donsn't know how to handle the Jquery yet
@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.
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
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);
});
});
});
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);
});
});
});
@graciolli-f Do you have a codepen link? You need some kind of loop.
@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()
@nikkilr88 https://codepen.io/fgraciolli/pen/GmjXLK
You can also use $.ajaxsetup to change caching settings with getJSON: https://api.jquery.com/jquery.ajaxsetup/
Oh, I see... it gives you one quote per call. Well, forget about the loop then... :D
@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)
@SkyCoder01 I tried to change that. The search still isn't working. :/
@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
@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.
@nikkilr88 You literally make around 20 ajax requests in your code. You should create a function that runs a request and clean that up.
Yeah, I am really new at this... I have no idea how to do that.
Ahhh!! That worked. Thank you so much @SkyCoder01
graciolli-f sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1181 | @skycoder01 |http://www.freecodecamp.com/skycoder01
No problem - have fun coding the rest
@SkyCoder01 Thanks for checking! I am using chrome too. I have no idea what is going on.
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@nikkilr88 Keep up the good work :) love the concept so far.
@SkyCoder01 Was it the second one? (add faves)
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
@SkyCoder01 https://codepen.io/nikkilr88/pen/YVWoyQ Right?
@jdtdesigns and how would I go about doing that?
No, it was the one you put in that forum post - FCC Twitch w/ Live Search :)
@SkyCoder01 Yeah, that one is working... After that I shared the link I just sent.
The second one got messed up somehow
@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!
@khaduch Thank you!
nikkilr88 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2791 | @khaduch |http://www.freecodecamp.com/khaduch
@khaduch I'll have a look.
@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) ...
I always let people get it working first, then let them have it during the code review :)
That was graciolli's code, I think
Yup!
@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) {
@SkyCoder01 Thanks... Yeah, I am looking at the errors now. I just have no idea how to fix any of this.
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
You'll have to check if it has the property before checking the value of it.
@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
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?
@nikkilr88 Here's an example of how to set it up. ;) https://codepen.io/jdtadlock/pen/dWpamy?editors=0010
@jdtdesigns Thanks! I'll save it and try to figure it out tomorrow.
nikkilr88 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 921 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns I appreciate the help!
@nikkilr88 Welcome ;)
Hey guys, can someone help clarify a PHP/MySQL question?
@Misaiah I can try to help
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
@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
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
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.
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?
Are you wanting to learn web dev or mainly desktop stuff?
@jdtdesigns
web dev for sure
@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
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
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
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
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.
But isnt PHP primarily used to connect servers to your site?
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
but you can use php with java, .net, c++, etc right?
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
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
All programmers/devs will have their favs. There's hardly a 'better' one. They all have their ups and downs.
I know PHP has been around for a long time, and to me that screams reliability...but again, I know nothing at this point
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
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?
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.
so Laravel is a branch of PHP?
Laravel is a framework that handles the backend/frontend/database interaction/security/authentication/ect.
....great....as if things weren't confusing enough lol
so it's a "full stack" framework
haha....Im sure I will start to understand at some point
so Larvel is incorporated in PHP?
Laravel is php lol
aaaahahhahaha!!! Sorry @jdtdesigns ....dont hate me
no worries
I really do appreciate your help! Thanks @jdtdesigns !!!
misaiah sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
You're welcome ;)
If you're expecting to be up and running quick with Laravel, you're in for a sad reality lol
Im out for the evening. Have a fantastic rest of your day @jdtdesigns !
You too ;)
lol yeah, im certain theres a ton to it just like anything else in web dev....Thanks again!!!
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
not recommended, but some people used it, so I guess its ok
@kirbyedy if input is restricted to only numbers, wouldn't that make eval() safe?
numbers and +,-,* etc. that is
Hi Guys...I',m trying to console log twitchtv api ...using data.logo but says "cannot read property logo"
@thinkC post a link to your pen please
@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
@oblanao says cannot read property 'channel' of undefined
@thinkC please post a link to your pen
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
@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
ok....will try that now ...thanks
np
and also, you missed a letter at "var y = data.stream.channel.logo" , not var y=data.steam.channel.logo
oh....checking...
hey guys
could you check at generate quote project
Why is not generate anything
@oblanao do u know why https://wind-bow.gomix.me/twitch-api/freecodecamp cannot display the json file ?
I have recreate the Quote Generator website
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
thanks @kirbyedy
thinkc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2038 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@kirbyedy to console.log display_name...I used data.channels.display_name but says cannot read property display_name
pls can u check?
that should be correct
surprise my self
pls can anyone check out why data.channels.display_name does not work for this api url ?
guys it's working now
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
@NMC96 and what is the question ?
or you are just moaning :D
im moaning
either that or id end up breaking something lmao
ah ok :laughing:
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
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
how do I make the simon game things?
@keonsam gonna have a look later when I get back to PC. Although that looks like a nav hide system
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 >_<
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 ?
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 ?
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?
@princila can you post a snippet of it?
because when the statement is true function reaches return;
@Czpl how did you learn to design so good?
@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
@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
what the difference between REST API and AJAX?
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
@oblanao I like the design. All the functions you mentioned in ur post are working fine. Good job! :+1:
@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
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
@fortMaximus thanks! Glad to hear it works for you as well
oblanao sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 741 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
@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
@fortMaximus OK, I will create a function that won't allow multiple consecutive operators
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
@tstusr441 here are some examples of centering things: https://www.w3.org/Style/Examples/007/center.en.html
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; ...
div {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<div>
@tstusr441 you need a width to center a block
@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 :)
tstusr441 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @heroiczero |http://www.freecodecamp.com/heroiczero
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
$('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);
});
});
});
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
@Czpl how do i set that up?
that api basically returns a function (called myCallback in that case)
@Czpl i have them now and they still dont work
i would try this api instead: https://random-quote-generator.herokuapp.com/api/quotes/random
@aceroAD it should work, I tested it. Just go to the settings on top and in javascript tab quick-add jquery and bootstrap scripts
https://codepen.io/keonsamuel/pen/xdRxVb someone tell me how to get the blue square inside the main circle.
@Czpl thank u, it was that i have them in wrong order
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
@Czpl man you are good thanks.
keonsam sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @czpl |http://www.freecodecamp.com/czpl
@Czpl i'm still getting the same error
@czpl changed the dataType to json
got the results
Thanks! :D
got the results
Thanks! :D
unovaxan sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @czpl |http://www.freecodecamp.com/czpl
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
@UnovaXan what api are you trying to use?
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
I don't know why but sometimes it generates multiple random numbers, when it should generate just 1
are you keeping track of player turns?
@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
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.
if I am "X" for eg: and place a move playersTurn variable would equal "O". when "O" makes a move playersTurn would equal "X". **
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
do you have an array of numbers?
Nope, the random number is generated randomly with the function
function generateRandomNumber() {
random = Math.floor(Math.random() * 9) + 1;
}
make an array
arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9,]
than generate the numbers from there. that may fix it
why when i float one div it goes out off their parent div?
im not sure honestly aha Im on an ipad. hard to read your code
@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?
@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
the clear i have it, clearfix no, thank you. i didnt know that
you're welcome bootstrap has a class for it https://v4-alpha.getbootstrap.com/utilities/clearfix/
now my div is inside its parent but no inline with the other div :(
use bootstrap grid
@aceroAD i gonna see that
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
if your bloc haven't
display: flex or inline-flex it's normal
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
$("#right-well").children().css("color", "orange");
SyntaxError: Unexpected end of input
anyone help me out, please?
@aceroAD you should only be using 1 of the bootstrap css...there is no need to have bootstrap 3 and bootstrap 4
$("#right-well").children().css("color", "orange");
but output is showing : SyntaxError: Unexpected end of input
i am struck here..please help me out..
Color: orange
Not comma
And you dont need the quotes
Wait thats jQuery
Hold up a second
May i jusy have a link
@21stnomad there is nothing wrong with that line. Put up a codepen please.
@21stnomad you removed }); from the end of the document.ready function
thank you everyone
@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
@aceroAD if you have bootstrap...you could be using its container system to do all that
@omarraza i know bootstrap 4 is using flexbox
@gulptech so container, row and col are already display: flex ? I tried not including that and it still doesn't work
@omarraza thanks...i will do it like that only now on...
:cookie: 267 | @omarraza |http://www.freecodecamp.com/omarraza
21stnomad sends brownie points to @omarraza :sparkles: :thumbsup: :sparkles:
@omarraza do you have a pen somewhere ?
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
http://codepen.io/omarraza/pen/BRQoxP?editors=1000
@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
brb...need to work for 1 sec
@omarraza this page should help --> http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically
2 things u need 1. html,body css part, 2, change your .col to .container add 100% height, and display:flex not flexbox
Please help, i cannot see the problem "Random Quote Machine". I'm not getting the quote. https://codepen.io/KalnuErelis/full/QvGbEp/
@gulptech ah yeah silly me, flex not flexbox -_- however, I did put in those changes and still no dice
html,body {height:100%;}
.container {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
what's the difference between html, body { ...} and body {...] ?
that worked!
@gulptech thank you
omarraza sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @gulptech |http://www.freecodecamp.com/gulptech
@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?
how would you center the middle circle in this app?
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
@WillTheCruzan Sorry I ran off. Did you get it figured out?
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?
haven't put on pen yet
working at my laptop
stuck for almost a day
paste the js up
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')
})
})
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?
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?
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?
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?
@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)
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)
how do I make the actual portfolio part of my portfolio page?
@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
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
nvm
@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
Search for this in codepen:
// When the documet finished loading call the Location API
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
@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/
https://random-quote-generator.herokuapp.com/
hey wazzup guys, good morning/afternoon ... night? possibly?
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/
@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:
kicking it from early in the morning, i see .. @SkyCoder01
9am :) I've been up
@moT01 I @skycoder01 @UnovaXan Thanks. It was the missing "s" on the http call.
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
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:
lol, I wish I had a dog
what about me geeky? now i get to watch all of these guys eating brownie while i have nothing ...
I prefer cats myself
That's what I have at the moment...easier to take care of
But I do love walking
dog back home with the family though
Hmmm
ohh yah! i love this dude to death .. dogs are awesome
Hello Sky hello Jorge
How are yall doing
whats happening dude? all good?
Im good
Feeling better?
With enough advil and benedril you do feel better
no fun
Nope
Has anything interesting happened
trying to find a pic of my dog .. i cant be bother with taking one and connecting the phone to the computer and all ..
mail it to yourself?
@OrangeKulture email the pic from your phone...who uses cable anymore
^^
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.
Yea
"Codepen is going all https"
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
just get one off of google images, we won't know the difference lol
yea
at least i didnt notice
so you are auto directed to the https ?
yes:
http://codepen.io/pen/ becomes https://codepen.io/pen/
oh yeah! that's right .. awesome
it's early....
still
fckn weather app :joy:
lol
Oh thats unfortunate for weather apps
Http support only for free
Guess it's been a week since they did that: https://blog.codepen.io/2017/04/19/update-2-codepen-going-https/
That is why my weather app works with https and http :)
had to rewrite mine :/
I have a new favorite font
Dosis
heyllo
Hey Keon
Hows your day doing
hey remember that?
Ofc i do
lol
how's tic tac toe going
Toe tic tacing
I created a random computer AI then skip it.
Tic-tac-tic-tac---OUCH MY TOE
lol, I broke my toe last week. True for me
Ouch
Toe breaks arnt fun
sucks, just have to ride it out 4-6 weeks
@SkyCoder01 :o oh sry
I recommend 50ccs of hot cocoa and good movie
advil for now, beer on the weekends
Lots of coding
i was going to say whisky
why does my internet slow down as soon as i load kodi @#$@#$#
@€€
¿^¤©
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>
<!--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>
@kevnbot Are you using the twitter widget .js code too?
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
I guess no, I dont think I have anything in the json file
nvm, this is javascript in your HTML:
encodeURIComponent('currentQuoteTweet')
thats the same boat im in, ive been stuck for over a month. taking my weekly stab at it.
Im going to be working though a tragedy with my wikipedia viewer when I get home
&text=
can't put javascript in your HTML and you can't have a button inside a link <a>
uhg alright. im so confused. Ive looked at like 4 different ways to try and make this work. its not making sense
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.
ok.
so thatll be a function?
I use this --> $('#tweetThis').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + data.quote + '" -- ' + data.author));
how do I use javascript to set this up?
just that single line?
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
Oh ive made a terrible terrible mistake
any idea how to trigger a navtab to be active aside from clicking the tab itself?
@the-vampiire You can add the class "active" to the tab to manually make it active
well ya lol
.addClass()
hm
but I would then need to remove the current tab active class
is this the logic that grabs the current quote to be tweeted out?
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
```
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());
});
});
correct, remove the "active" class from the current tab, and then add the "active" class to the one you want to activate.
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)
and the #tweet is what points it to the button?
@SkyCoder01 what are you trying to show me there, ...someone copied me?
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
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
@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?
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
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
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
@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
That's for Twitch. Wish they did the same for the weather API :)
ya that's what im asking
Thanks! @SkyCoder01
bablet sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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/
Nice work @Czpl I like the buttons
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
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
@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
@kevnbot yea, it all works for me cept that
https://repl.it/HX87/3 -- Updated
https://twitter.com/intent/tweet/?text=" + $(".quote").text() + " " + $(".author").text()
thats what i used
@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
@moT01 and its not working?
it works
thats what i used on my project
@the-vampiire It's a timer It counts down to 0
I've set the time Interval to 50ms so it counts down fast
you used that in the A HREF?
yes
@the-vampiire See this one https://repl.it/HX87/2
@Czpl looking good!
Yea the code is allover the place, because I'm just playing around
I am just not following the logic
maybe someone else can
what is your .quote from? another part of your project?
yea, those are variables, ...you will want to put your own in there
ok thats what I was thinking.
@Waqas909
What is your goal in this block?
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
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'
@SkyCoder01 Ah I got it! Man this is going to be one fugly piece of code but at least I got it working statically..
Hey..
Anybody knows when beta.freecodecamp.com will come out of beta?
Anybody knows when beta.freecodecamp.com will come out of beta?
@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
ah clever man
good work!
@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
@the-vampiire Thanks
waqas909 sends brownie points to @the-vampiire :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @the-vampiire |http://www.freecodecamp.com/the-vampiire
can someone explain me array.prototype.filter ? i tried to understand it but i failed
[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..
@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>[1,2,3,4,5].filter(num => num > 3) // [4,5]
Thanks @moigithub
a27-suryansh sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3159 | @moigithub |http://www.freecodecamp.com/moigithub
@moigithub Just had to lol
@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
I understand that. I thought I changed the variable I needed to the function
that won't work putting it in the html
@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.....";
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
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>
@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!
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
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
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
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
@nikkilr88 Sure
hi
hi
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
idk what i broke
https://codepen.io/Kshawrob/pen/vyQPKm?editors=1010
https://codepen.io/Kshawrob/pen/vyQPKm?editors=1010
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.
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
Alright well ive been stuck on this since Dec 8th. so im just done.
gimme a couple minutes
i typed this
javascript change href into google, and found this http://stackoverflow.com/questions/4365246/how-to-change-href-of-a-tag-on-button-click-through-javascript
youre close
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
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
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
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.
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?
you should also run newQuote() as soon as the page loads.
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
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!
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
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.
@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'
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.
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
https://twitter.com/intent/tweet?text=see+I+can+write+the+word+dildo+here+and+it+still+works
click that link
yea ok. I see that now
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.
yea I wasnt understanding and thought I had to run my function again in order to get the correct string.
I understand now that once the function is fun, I can just grab the variable and concatenate it
*run
ya the whole point of using a variabel init
which is why I had such a hard time understanding. I didnt get that.
every time it runs the function it will store a new value to that variable and thus your link will have a new quote
yup makes sense
ok go make it work
show me
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.
cool man
would it be cleaner to assign quotes[randomNumber] to a different variable?
nope
like var currentQuote = quotes[randomNumber]
oh i guess sure
or is that just muddying it up
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
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
kevnbot sends brownie points to @the-vampiire :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @the-vampiire |http://www.freecodecamp.com/the-vampiire
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.
@PolarisTLX They shouldn't be so hard to handle. You have several options to try:
- Use jsonp
- Use crossorigin.me
- 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
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.
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?
@PolarisTLX Btw. go sure to use the proxy urls from freecodecamp - https://wind-bow.gomix.me/
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
https://v4-alpha.getbootstrap.com/layout/grid/ seems to suggest those are good class names
pen?
@omarraza nvm my last comment, didn't see your meta section
@omarraza You put
Flexbox has the property to order its children by default in a row
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
@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%);
}
hello people, can ayone please help me, i am trying to use font awesome but the icons are appearing as small empty boxes
@usamacjs Can you show us your pen or your page in some other way?
@usamacjs Also the place where you are adding your icon?
@alpox thank you! what does transform: translate accomplish? I've used top: and left: before but never transform:
omarraza sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 975 | @alpox |http://www.freecodecamp.com/alpox
@omarraza If you do
With
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
@alpox actually, adding that to .container and removing display: flex didn't center everything
@alpox do you know what i should do?
its all at the top of the page, and i kept height: 100%
@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?
but the rows do work now!
@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
@alpox oh god, THANK YOU SO MUCH!!!!
usamacjs sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 976 | @alpox |http://www.freecodecamp.com/alpox
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
@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
or
text-align: center;on the containeror
<div class="col text-center"> if you only need to center single cols or elements
hey how to fit image into div container
anybody here
stuck with my first assignment
@SSheorain
<div>
<img src="...">
</div>
tried that @alpox but the image is going beyond the div
@SSheorain Do you have a pen showing that?
yes
and one more doubt regarding columns and rows in bootstrap
Well can you show it?
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
@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
@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
@alpox i used img-responsive earlier..
is there difference between responsive and fluid
@SSheorain
It got replaced with
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
ok thanks @alpox :smile:
ssheorain sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 977 | @alpox |http://www.freecodecamp.com/alpox
@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.
@khaduch thanks :+1:
ssheorain sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2792 | @khaduch |http://www.freecodecamp.com/khaduch
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;
}
@ImSeth Try to make the nav
display: block
@ImSeth Inline elements ignore margin attributes
@alpox The only way I know to center things is by using margins. How else can I center my <nav> element?
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%);
@alpox I tried using
display: block; already.
@alpox That centered it, but it made my <li> elements stack on top of each other.
@alpox Thank you for your help. It is centered correctly now.
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?
@usamacjs Manipulating the scroll behaviour is usually not good for the user-experience
i appreciate your advice :)
can you help me add scroll spy then?
i can provide link to my github repository
@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/
thank you :)
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
@alpox thanks a bunch man :) :smile:
usamacjs sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 978 | @alpox |http://www.freecodecamp.com/alpox
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
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
@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.
i need help, scrool spy is not working,
urghhhhhh :(
*scroll
@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.)
@mdmpdx lotta self learning and lotta help when you ask questions
@khaduch thanks -- I'll revisit it. And thanks for the tip re: Bootstrap 4 vs 3
mdmpdx sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2793 | @khaduch |http://www.freecodecamp.com/khaduch
ummmmm, can somebody help me too?
@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
@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
@usamacjs that's what the documentation you were provided is for
remember the links you were given
@GitHub-Henry i am uploading it, you can have a look
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
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...
@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
so learn via codepen.io to figure out how to use bootstrap
if you can have a look and tell me why the scroll spy is not working :(
@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
thank you :)
@usamacjs It should be index.html instead of folio.html ;)
The browser loads any index/main files by default as the 'home' page
@jdtdesigns okay :)
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
@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...)
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
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)
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
https://karumba15.github.io/Portfolio/ why me portfolio dont load the css at the github?
my"
I wonder if its just my computer. can someone tell me if it's working for them please?
@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
@OrangeKulture thanks.
katsaldivar sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @orangekulture |http://www.freecodecamp.com/orangekulture
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)
@OrangeKulture is there any for a quick fix?
what Sky said .. might be the API, might be a combination .. you would have to make sure you get a correct response
Hey guys :D
i believe Dark Sky allowed jsonp? Sky ? that might solve the problem
For weather :)
@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=?
waahaha .. im going crazy
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
@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
It was easy to make with JS Objects...but I´m completly lost with the API functions...
@Karumba15 console says 404 .. probably a bad route to where you store your css
@LucasSchneiderRS you mean for the tweet? or ..
Can someone give some advice or some source to get some information about? Cound´t get it with FCC documentation :(
@LucasSchneiderRS quotes are working
@SkyCoder01 Thanks
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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
@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).
Codepen will enforce HTTPS starting June 1, so you'll want to use APIs that support HTTPS moving forward. (Forismatic does not).
@LucasSchneiderRS ahhh ok ! gotcha
@SkyCoder01 Do I have to use Codepen? Is there another site that is more stable? what do you recommend?
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
@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.
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?
@LucasSchneiderRS you can google it .. just go famous quotes API or something along those lines
"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
forismatic is one, altho there's problem with the HTTPs thing
@LucasSchneiderRS Lots of people use this one - and they have code samples: https://quotesondesign.com/api-v4-0/
quotes on design is pretty decent
If you want something unique, there are lots of others out there
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/
If you like Chuck Noris, there is also this one :) http://www.icndb.com/api/
yeah im gonna have to basically re write all the pens :S
Mine should be okay, luckily. The first week of June will be busy here, better start working on those cbot updates
@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)
botstatus
All bot systems are go!
botVersion: 0.0.12
env: prod
botname: camperbot
botVersion: 0.0.12
env: prod
botname: camperbot
oilbot
rawgit is great
awesome, Sky .. cbot is closer and closer to being the next Jarvis
I'll have to build my own Skynet some day :)
@SkyCoder01 I don't even know what that is :D
yeah for sure haha
It's from the Terminator movies :)
AI seems a lot of fun
Ah i've never seen these :D
Arnold is Austrian though, I think, not Swiss
:)
Aha :D i thought he was american
one question: why FCC don´t put a link for this APi websites?
@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);
});
Sure
@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.
ok
http://codepen.io/Paradox5/pen/GmpJjG check this out
@LucasSchneiderRS I think they want to make us suffer a little with every challenge to make us better coders :)
Good start @Paradox5
@SkyCoder01 I'm still getting undefined for some reason
Any suggestions for what to do next
@KatSaldivar make sure the URL is
https:
@SkyCoder01
@SkyCoder01 Thank you!
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
@Paradox5 test it out - look at those titles returned
No problem, Kat
Well everything is correct now new goal make those titals links to the wikipedia page
I searched for "hello" and got "e", "l", "l", and "o" for article titles
yea
just searched for something other then a
hmmm
oh
im a fool
@SkyCoder01 :D
i know what i did
next step: how to personalise my quotes? hehehehe :D
(in the API site) hehehe
@SkyCoder01 hmm, interesting.... Do I need to change the ID number to get new quotes?
Try now sky
@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 :)
m-m-mobile
there are things other then pcs
and macs
@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.
Well its about the same
@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
babel?
It's for older browsers, so they understand ES6
ah
TIL
@SkyCoder01 thanks. I added it but now it doesn't work. lol
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
@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();
oh and thanks @SkyCoder01 for helping me realize what was wrong
paradox5 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Sure, np
@SkyCoder01 Yay! Thanks a million! :D
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
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
Ive got a terrible habit
for never leaving a single comment
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,
@mdmpdx it should be working already, but try put the hr outside your p, just for a trying
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
@mdmpdx lol, yor hr, on the css file has a border: 0;
@mdmpdx change it to a higher size
@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
mdmpdx sends brownie points to @jaizon :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jaizon |http://www.freecodecamp.com/jaizon
@mdmpdx the "border: 0;" overrides the "height: 1;
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
well, you can use bootstraps for that, or jquery,
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"
@mdmpdx , I don't know wich one is best for you, in my case I would use bootstraps for
DUN DUN DUN
DUNDUNDUNDU
The css here is not required, just for you to see the difference, clearly .
Its official
blanchedalmond is my new favorite color
@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?
@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
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?
on the h2 I used a class to hide it on medium (md) and up screens, it is a bootstrap class
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
i need the best resource for everything html! Im on the first project, which is to build a tribute page..
yeah, i'll show you
or will it be a lot of googling...?
@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
@mdmpdx awesome! ill give it a try!
@jayjohns https://www.w3schools.com/html/ best source for me
@mdmpdx https://codepen.io/jaizon/pen/bWBaBy here is my example
@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
@mdmpdx if there's anything you don't understand tell me, in jQuery might be better, but Idon't know jquery well,
@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!
mdmpdx sends brownie points to @jaizon :sparkles: :thumbsup: :sparkles:
:warning: mdmpdx already gave jaizon points
@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
QueryOfJ
@Jaizon oh ok good tips!
If you'd like to see your repo as a website on github you should be familiar with this https://pages.github.com/