@jharrowmortelliti
delete lines 42 and 43 in your html
these ones
<div class="bg-overlay2">
<div class="container-fluid">
they conflict with your css
fixed the problem for me
often times bootstrap and css combined creates problems.
i thought bootstrap was a set of css styles
right
that's why there can be conflicts when you're using both of them
@jharrowmortelliti did it work for you?
@wyattwade yeah thanks!
jharrowmortelliti sends brownie points to @wyattwade :sparkles: :thumbsup: :sparkles:
:star: 253 | @wyattwade | http://www.freecodecamp.com/wyattwade
Hey everyone! Happy Friday :P
I am a bit confused about $.getJSON - why does it return some things encoded? (i.e. a comma sent in the query is returned as though I had encoded it as %2C) Is there a way to stop this?
@Lewis65 my understanding of getJSON is that it simply returns an object in JSON format. Why are you getting your query back?
Guy, any tips on what to read to be able to complete the Wikipedia Viewer? I've been stuck on it for like a week or two, and I can't seem to make any progress.
@Adancode what are you having trouble with?
I just would like to know what sources I can read to understand how to solve it. The API documentation is not doing it for me. If that's all there is, then I guess I can keep hacking futilely at it, lol.
I understand. The API didn't do it for me either at first.
@Adancode are you using getJSON to make GET requests?
Yeah, I can't get it to work with pure javascript, here's the code I have so far, I got the JSON code from some Bauer site
$(document).ready(function() {
$("#searchMe").click(function() {
searchTerm = $('#typeMe').val();
});
$.getJSON('http://en.wikipedia.org/w/api.php?action=parse&page='+ searchTerm + '&prop=text&format=json&callback=?', function(json) {
console.log(searchTerm);
$('#wikiInfo').html(json.parse.text['*']);
$("#wikiInfo").find("a:not(.references a)").attr("href", function(){ return "http://www.wikipedia.org" + $(this).attr("href");});
$("#wikiInfo").find("a").attr("target", "_blank");
});});
var searchTerm;
And that makes a wikipedia page for "undefined" appear (because searchTerm is set to undefined on page load).
But I want to be able to put the value from the .click into the getJSON
And no matter how I place it, inside the .click function, outside, I can't get the variable to transfer from the click to the get JSON. It does capture it on the click, so searchTerm does hold the text entered into the search box.
ok you can make a function with getJSON inside that takes a search parameter
Can someone help me understand why when I click on my button in the calculator the value appears in the input area and disappears immediately?
http://codepen.io/emillion/pen/mVaGQm?editors=0010
http://codepen.io/emillion/pen/mVaGQm?editors=0010
this function you can call within your .click function with searchTerm as the argument
Hmmmm...all right, I'll try that, thanks @alexanderkopke !
adancode sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 473 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
Working on it...I'll check back if I can't get the variable to flow through!
This doesn't make any sense http://jsfiddle.net/rtoal/ThPEH/ If you are using a score based system, wouldn't the taken spots that don't relate to the "3-in-a-row" just skrew the score?
@Adancode heading to bed but basically keep the code you have but 'wrap' a function around the getJSON code you have: function searcher(srch){$.getJSON etc} and in your click you add: searcher(searchTerm); at the buttom. I tried the action=parse method too but the info it returned wasn't usable to me. action=query was the way I went.. $.getJSON('https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ item+'&format=json&callback=?', function(json) {etc
Thanks @alexanderkopke! I was aways from the screen, but just saw this, it's a HUGE help!
adancode sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:warning: adancode already gave alexanderkopke points
I'm trying to create a smooth scroll for my anchor link. I can't get my js code to work and it says "Unexpected token <". I don't see any typos. Anyone know what it could be? - https://gist.github.com/anonymous/7fa4ec423416281b67cb
Anyone know why my image isn't centering within a column in bootstrap?
it's the image with the chinese characters
http://codepen.io/kaizen7/pen/BjOQoB
you can see what I mean when you resize the window small
it's the image with the chinese characters
http://codepen.io/kaizen7/pen/BjOQoB
you can see what I mean when you resize the window small
its the image of the chinese characters in the navbar
@MindfulBell sorry, I should clarify that where the JSON object returns the url for something, it returns the url as if it had been encoded.
So the actual context is using the twitch api, when I send a multiple-channel query e.g. /streams?channel=test_channel,test_channel2,storbeck&callback=? - the link that is returned in the JSON object is /streams?channel=test_channel%2Ctest_channel2%2Cstorbeck&callback=?
And no streams are returned in my JSON object, which makes me think that something about my code is being encoded before it hits the twitch API, and I think that this thing could be the $.getJSON method... any thoughts? (Anyone?)
So the actual context is using the twitch api, when I send a multiple-channel query e.g. /streams?channel=test_channel,test_channel2,storbeck&callback=? - the link that is returned in the JSON object is /streams?channel=test_channel%2Ctest_channel2%2Cstorbeck&callback=?
And no streams are returned in my JSON object, which makes me think that something about my code is being encoded before it hits the twitch API, and I think that this thing could be the $.getJSON method... any thoughts? (Anyone?)
FeelTheBern
whoa they added and changed a bunch of stuff in the curriculum
hmm they took the calculator and put it into advanced project
ive been studying jQuery to do it for the past day and a half lol
@andrewchar it's better that way, i think the calc, simon, and tictactoe were a bit advanced for where they were
This message was deleted
i think it's good. i didnt feel that i had the skills to code a calculator. @idietmoran
which is why i decided to learn more jQuery and build it with jquery
working on the calculator now :)
i just came back to start making it and now i see its all changed lol
dammit, they moved calculator again?
i think i will finish the project thou. its already started anyway
I have a problem with my anchor link. I want make an anchor point to smooth scroll to a certain div on my page. I can't seem to get my js code to work with my anchor point. Please help? I have a problem with my anchor link. I want make an anchor point to smooth scroll to a certain div on my page. I can't seem to get my js code to work with my anchor point. Please help? http://www.codepen.com/ExhibitArts/pen/jWdPPQ
I like that @QuincyLarson did the tribute page to Norman Borlaug, great choice :)
im thinking about what to do for the tribute
dont think it will take me more then 2 hours to do it.
Calculator is still a valid FrontEnd ... they only removed one project, about stylizing Camper News -- News is being retired in favor of having a subreddit
i kinda liked that they had us make a portfolio first. im happy i did that first now i can put all my stuff in it. and i have my portfolio linked to my social media to show it off
@ExhibitArts I don't think you need the script tags when using codepen
@ExhibitArts i cant even look at it. im getting this message This web page is not available
DNS_PROBE_FINISHED_NXDOMAIN
no idea what that means, i dont have a firewall or anything.
link should be .io, not .com
oh
@ExhibitArts Yeah, once you remove the script tags and fix some of the whitespace, it looks like it's working
@WilliamBowen Okay, but when I run it in Chrome or any browser for that matter it doesn't give me an error but for some reason it still doesn't work.
@WilliamBowen Could you send me the code you edited?
just a second
$(function() { // This will select everything with the class smoothScroll // This should prevent problems with carousel, scrollspy, etc...
$.smoothScroll('.smoothScroll').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $.smoothScroll('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 100); // The number here represents the speed of the scroll in milliseconds
return false;
}
}
});
});
@WilliamBowen Thanks!
exhibitarts sends brownie points to @williambowen :sparkles: :thumbsup: :sparkles:
:star: 271 | @williambowen | http://www.freecodecamp.com/williambowen
your welcom
welcome
@ExhibitArts did that fix your issue?
On my end it doesn't seem to be working. I need the licence link at the top right to scroll to the bottom. I can get it to do that but it needs some smooth scroll to make it look better.
That I don't know, but nitpicking should that be "license"?
Ok, breaktime over. I have to go back to work now. :sad:
That script was written by someone else. I just searched for smooth scroll scripts and found it. You said it works on your end but other people who have also tried to use it have said that they had the same problem I'm having now. I'm wandering if it has to do with my HTML?
This message was deleted
This message was deleted
I am not sure why my carousel isn't working. I know this is a long bit. But anything would be appreciated. It will not change items. It is stuck on the first slide.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://guardianlv.com/wp-content/uploads/2013/10/steve-jobs-650x365.png" alt="Steve Jobs">
</div>
<div class="item">
<img src="http://www.wired.com/images_blogs/gadgetlab/2011/10/apple_II_01.jpg" alt="Apple II">
</div>
<div class="item">
<img src="http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2015/05/01/102641316-steve-jobs.1910x1000.jpg" alt="Iphone">
</div>
<div class="item">
<img src="http://www.centerforworklife.com/cfwl-content/uploads/2013/10/30953-Steve-jobs-change-quote-HVwq.jpeg" alt="Focus">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
@zacharyhyder did you load the bootstrap.js into the file?
Can anyone help me with AI design for tic tac toe ?
three images in the thumbnail dont apear what could be the reason
please help
@RakshithNM remove the '~original' bit at the end of the img URLs:
// nay
<img id="work-image" src="http://i1077.photobucket.com/albums/w466/bellare545/quora-icon_zpsg9r04m01.png~original" alt="quora">
// yay
<img id="work-image" src="http://i1077.photobucket.com/albums/w466/bellare545/quora-icon_zpsg9r04m01.png" alt="quora">
Hey! @h4r1m4u
@wyattwade hey dude, how's it hanging?
Good man
glad to hear that
Been working on this tic tac toe ai all week -_-
Finally done, it was 450 lines of code at first
Got it down to 280.... There are some giant lines still tho
Anyway... Can't wait to get on to another project
How's it going with you man ? @h4r1m4u
nice! my entire JS for the tic-tac-toe is around 300 lines. the AI was quite challenging
i'm good. kinda busy with work and actual projects at the moment, so not much time to pursue FCC
Game design right?
not at the moment. all web stuff
Good man
Using node?
was thinking about it for one of the new projects i have on the table, but i probably won't in the end. i need more time to experiment with it. i'll probably use django instead
Python is really cool
I used Ruby on Rails for about half a year or so
Noticed I was using a ton of 'magic' tho
yeah, i like python. it's been a while since i wrote something in it, so i'll need a refresh on the syntax, but it'll probably still be faster than trying to do it in node
thats how I feel too. It can be a pain when you're already familiar with one framework
from what i read, node also doesn't seem to be particularly amazing for traditional CRUD websites which is what this project is, so django seems to make more sense overall
Is node better for single page applications?
Yeah rails is rly good for crud as well
Rails scaffold - half of its done for you
yeah, rails and django is basically the same thing, just different languages (and i prefer python to ruby). yeah, node seems to be more suited for real-time concurrent operations apps (like chat)
this is a pretty good summary on the topic: http://blog.apcelent.com/why-use-nodejs-tutorial.html
I wonder if a js framework that's more suited for crud will be built
I'll check that out, thanks
yeah, that's what i looked at as well. there are some good efforts in the area being made and i'm particularly excited by http://www.keystonejs.com which is what i strongly considered initially, but it's nowhere as proven and stable as django
Are you working on any fix projects right now?
fix?
Fcc**
iPhone autocorrect --
oh. no, not at the moment. work got in the way. i finished the entire front-end section and did a couple of the challenges from the backend section. then they restructured that and i haven't had time to go back to it yet
I wonder why they took angular out
And yeah they keep doing that
A blessing and a curse
because angular 1 is slowly being phased out and angular 2, which is going to be quite different from what i hear, is not out yet
i'm kinda glad. i used angular for one of my projects and didn't like it one bit
I've heard such mixed things about it
More than about just any other js framework
And yeah to make things works they did that to angular 2
yeah. i think people got really excited about it and started using it and now they're heavily invested in it and it'd be difficult to swap to something else.
react.js has me more excited, but i haven't actually tried it out. just read a bunch of stuff about it.
Exited for fcc's tutorials on it
Kinda waiting for that
yeah. that's one thing that keeps me from progressing on FCC. everything after the frontend is basically just different projects to work on without any tutorials/guidance. i might as well work on actual projects/things i'll use and learn/figure out stuff that way
kinda no point to do the ziplines just for the sake of the ziplines, if you know what i mean
Yeah like client projects or your own ideas
exactly
I'd love to start making mobile dating apps
Lol
:)
Or games or some shit
that market's pretty saturated
Game dating
hard to come up with something new
Rly saturated
Yeah, there's still stuff out there tjo
Tho
Hey man I kind of have a question out of left field
I'm starting to apply for jobs and try tailoring code for other ppl to read
What's a pet peeve of yours when reading other people's code
the biggest one - not enough comments
comment your code heavily, it makes understanding it so much easier
number 2) - name your variables and functions, so that i can understand what they're for just from the name.
Screenshotted that
var a = []; doesn't tell me anything. var userMoves = []; makes me immediately grasp what it's about
Thanks man @h4r1m4u
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1390 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Even when looping?
yeah, no worries
For example - for (var i = 1
no, that's pretty standard. changing it would actually make it more difficult to understand :)
got it
i = iterator
Wrote that jumblefuck of code
Excuse my French
I'm applying for an apprenticeship and they want to see it
I'll take your recommendations into consideration when fixing it up tomorrow @h4r1m4u
personal preference, I like to see function explanations just above the function, rather than inside them.
If anyone in this channel wants to give the harshest criticism possible be my guest. It needs to be fixed.... It works but I need to improve it
@wyattwade yeah, add more comments. comment each of the function and explain what it does. another problem that i see with that particular code is that you repeat yourself a lot. for example:
$('#container-1').click(function () {
clickFunction(1)
});
$('#container-2').click(function () {
clickFunction(2)
});
$('#container-3').click(function () {
clickFunction(3)
});
$('#container-4').click(function () {
clickFunction(4)
});
$('#container-5').click(function () {
clickFunction(5)
});
$('#container-6').click(function () {
clickFunction(6)
});
$('#container-7').click(function () {
clickFunction(7)
});
$('#container-8').click(function () {
clickFunction(8)
});
$('#container-9').click(function () {
clickFunction(9)
});this could be quite easily optimized into 3 or 4 lines of code
@wyattwade ha! you knew I was playing!
don't like the colors...that's all, let me keep playing
I was trying to find away around that with a for loop today
@lpix yeah gonna change the colors first thing tomorrow
@h4r1m4u I was trying to find a way around that today. The repetition of the click functions
@wyattwade you could change the ids to a class and then write only one click handler for the class. then inside the click handler you could get the value of the id or some data field and send that to the clickFunction instead
does that make sense?
it almost does
I've tried something similar
I have a container class
And each container Id (1 -9) is part of that class
But when I direct the click handler to the class, each of the nine containers fire
Rather than 'this' .container
something like this should work:
$('.field').click(function () {
var fieldId;
fieldId = this.attr('id');
clickFunction(fieldId.substr(fieldId.length - 1));
});
whereby
field is the class on each of your board squares
on that note, these code blocks are also very repetitive and difficult to understand:
if (move == 0 &&((pattern.indexOf(1) !== -1 && pattern.indexOf(7) !== -1) || (pattern.indexOf(5) !== -1 && pattern.indexOf(6) !== -1 ) || (pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(6) !== -1)) && $('#container-4').html() == "") {
compArray.push(4);
$('#container-4').html(compSymbol).css({'background-color': compColor});
move = 1;
}there should be a way to optimize that somehow
@h4r1m4u Thank you!!!!
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: wyattwade already gave h4r1m4u points
just logged on to my comp
right @h4r1m4u those code blocks are the biggest challenge I face
@h4r1m4u I can condense the code by at least 50% by creating nested for loops
and it's easier to understand
yeah. or some sort of a function
the only problem is that I get bucks
right
*bugs
i don't have a quick fix for these, i'd need to spend more time on understanding what's going on there, but do try to refactor that code before you send it over to the potential employer
that was definitely my biggest concern
those blocks
yeah, right on
was on the fence about fixing it but now i'll fix it for sure
thanks man
don't worry about looking too far into it. I'll do a complete refactor
you're most welcome
keep me posted how it goes in terms of your internship/employment. i want to know when you land something!
thank you man!
I'm stoked on you making games
that was a while ago. still hoping to get into it, but right now it's all web stuff
if you're still thinking about it that is
(which i enjoy too)
gotta do what you've gotta do
same here
yeah
is there any type of app that you're interested in
for your own purposes?
*interested in building
i've got a few ideas for web apps. i'd love to build some data analytics / stats app for dota, but the dota api is real shit. and there's an app that i want to build for a newsletter service that i use which allows you to manage their webhooks.
the project that i'm working on now is a donation tracker for charities which is pretty interesting as well
I have a buddy that works for blizzard
in cali
nice! what does he do?
i should tell him their apis are shit
lol
he's an business analyst
entry level
dota is valve's baby now :)
that's cool
ahhhh didn't realize that
well I don't see why they would have trouble fixing that
considering the intricacy of some of their other dev
well, valve is infamous for keeping the dev teams really small and they've got other stuff to work on. i don't think the api is a priority for them. it works, but it's just really complicated and poorly documented
makes sense
well it's good to hear they're upkeeping the game to an extent
miss that sh*t
got such terrible grades when I played it. But man, nothing teaches you strategy and teamwork like dota / TFT
yeah. they do constantly keep pushing it forward, the game's changing a lot. i'm stoked by the entire e-sports industry development, it's really exciting for me to see
hahaha, easy to sink a lot of time into it
do you have a personal twitch account?
did you know that ESPN launched a dedicated e-sports channel couple of weeks ago?
i do, but i don't stream. only watch other streams
I hear you
i'd love to get in on a game. I'd just have to install it
probably suck now....
it'd take you some time getting back into it, but if you played it before, i'm sure it'd be quick
yeah, I'd need to relearn hotkeys etc
This message was deleted
This message was deleted
$('.field').click(function () {
var fieldId;
fieldId = this.attr('id');
clickFunction(fieldId.substr(fieldId.length - 1));
});
almost have this thing working
what's the issue that makes it not work?
so rather than
('.field') I think I need ('.container')
tried that
hey guys .... why can I not add any links to my project <a href > tag isn't working
PLS PLS PLS PLS help!!
each container id ( #container-1 , #container-2....) also falls under .container
@Whiplash5057 which links are not working?
@Whiplash5057 they seem to be fine
facebook twitter instagram etc
you haven't put an a tag
I put them in the button ...wait ... I just removed it
i'll Put them back
@Whiplash5057 don't nest the <a>s inside <button>s. change the <button>s to <a>s with the .btn class applied :
<button class="btn col-md-2" style="background-color : #21759b">Codecademy</button>to
<a class="btn col-md-2" style="background-color : #21759b" href="http://codecademy.com" target="_blank">Codecademy</a>
don't forget the
target="_blank" attribute, otherwise the links won't open properly (it's a codepen thing)
open it in a new tab thingy
with _blank
@wyattwade yeah, you'd have to use .container instead of .field. i didn't check your HTML before when i gave you that example
yeah got container in there
it's late here, probably missing something small
@h4r1m4u isn't there a closing tab for <a> ??
i've got it on line 30
@Whiplash5057 oops, yeah. oversight on my part. fixed above
never used .substr so it's a little new to me
looking it up now
@wyattwade ah, i'm a retard. change
fieldId = this.attr('id'); to fieldId = $(this).attr('id');
@h4r1m4u And in the change to ..part of your code don't i need to use the button tag ??
YES!!!!!!
that's fking awesome!!
@Whiplash5057 no, you don't need to use <button>. we're using <a> instead (which is what should be used for links) and styling the <a>s to make them look like buttons with the .btn class
earlier in the day I was trying to implement that
@wyattwade :D
@h4r1m4u OK let me try that !!
wasn't sure it was possible to use .this in a jquery class to refer to a specific id
awesome
you are very intelligent thank you again man
wow.........
@wyattwade just to explain, the
this in $(this).attr('id') refers to the element that you clicked on (because it's inside the click handler)
that's why we can then call the
attr() method on it and get the id
got it
so if you stated
$(this).attr('class') it would refer to each button in the class?
woops
*
$(this).attr('class')
that would get you the value of the class attribute, yeah. in your case 'container'
which is the same for each of the squares
@h4r1m4u It still isn't working
can't thank you enough man @h4r1m4u
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: wyattwade already gave h4r1m4u points
@wyattwade no worries, man
ok i'll be back in 10
@Whiplash5057 you forgot to add the target attribute as i mentioned above
that's why codepen prevents the links from opening
// nay
<a class = "btn col-md-2" style = "background-color : #00aced" href = "https://mobile.twitter.com/account">Twitter</a
// yay
<a class = "btn col-md-2" style = "background-color : #00aced" href = "https://mobile.twitter.com/account" target="_blank">Twitter</a
AAAAWWWWWWWWWWEEEEEEEEEESSSSSSSSSSOOOOOOOOOMMMMMEEEEEEE!!!!! @h4r1m4u
thanks @h4r1m4u IT bloody worked !!!
whiplash5057 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1391 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
:D you're welcome
you should be famous mate @h4r1m4u
got a youtube or a twitter that you post on?
lol. i'm not that good :)
i'll PM you
thanks man
you're a good teacher tho
not many are knowledgeable and good teachers
i feel like... you know how wealthy old business men play golf together
wouldn't mind getting a round of dota lol
hahaha. if you get back into dota, let me know. i'd be happy to play together, though my ping on the US servers is not amazing
i'll do an chinese server
Dota seems to be everywhere :P
i may not be carrying much weight anyway. How much worse could a little lag make it
hahaha
@pradeepce no escaping from it!
if you ahve any install recommendations let me know
i'll do a search now
@wyattwade you just need steam (from valve), then install it from it. it's completely free
@h4r1m4u Play on! :)
on it @h4r1m4u
:thumbsup:
stoked on your site
build this thing from scratch>???
dotas almost running
shit it's late here.....
it runs on wordpress. i used an off-the-shelf theme but heavily modified it
what's your bandwidth?!? it's like a 6GB install
right. it still has a ways to go actually
gonna be afk 10 mins and mb when i get back
haha ok :)
brb
k it installed
i'll get demolished in a few rounds tomorrow
in the meantime I better catch some zzzz's
have a good day man @h4r1m4u
@wyattwade you too bud!
peace!!!!
ah I still can't get new game button to work correctly. If anyone has an idea how to escape from a game() function [line 202] when I click on new game button [line 273], let me know: http://codepen.io/GreatDanton/pen/VeVBPN?editors=0010
@GreatDanton don't put the square handler inside the game() function. as a matter of fact, you don't need the game() function at all. restructure the code like this:
$('#oImg').click(function() {
selected = imgO;
comp = imgX;
$('.modal').fadeOut(500);
$('.overlay').fadeOut(350);
//game();
});
$('#xImg').click(function() {
selected = imgX;
comp = imgO;
$('.modal').fadeOut(500);
$('.overlay').fadeOut(350);
//game();
});
$('.square').click(function() {
if (selected == imgX) {
// X is first, AI plays when .squared is clicked;
$(this).append('<img class="no-select" src="'+ selected + '"/>');
$(this).addClass('disabled');
// get id of the clicked square and return last number
var move = $(this).attr('id');
// get number of
move = move.substr(move.length - 1);
userMoves.push(parseInt(move));
notAllowedMoves.push(parseInt(move));
if (state(userMoves) == 'won') {
$('.info').html('You won the game');
return;
}
// AI should wait for your first move
if (userMoves.length > computerMoves.length){
// pick random number of the left moves and append picture at that position.
play();
if (state(computerMoves) == 'won') {
$('.info').html('You lost the game');
return;
}
} // end of usermoves if
// if the game is not over, its a draw!
if (notAllowedMoves.length >= 9){
$('.info').html("it's a draw!");
return;
}
}
// #################### PICK O ############################
else if (selected == imgO) {
// AI makes first move
play();
$(this).append('<img class="no-select" src="'+ selected + '"/>');
$(this).addClass('disabled');
// get id of the clicked square and return last number
var move = $(this).attr('id');
// get number of
move = move.substr(move.length - 1);
userMoves.push(parseInt(move));
notAllowedMoves.push(parseInt(move));
if (state(userMoves) == 'won') {
$('.info').html('You won the game');
return;
}
// computer move
play();
if (state(computerMoves) == 'won') {
$('.info').html('You lost the game');
return;
}
if (notAllowedMoves.length >= 9){
$('.info').html("It's a draw!");
return;
}
}
});i got rid of the game() function and moved out the click handler outside of it. that way the game is waiting for the user click, until it happens.
this almost fixes it. it works properly if you're playing and starting new games as X. when you play as O, it's a little bit bugged (the computer plays twice in each round), but i'll let you take a stab at figuring out what's causing that
I can't use the HTMLelement.remove() function in a promise. Does anyone know why?
Hey Guys, I was planning the contact portion of the portfolio zipline and was wondering if I add a form there is going to be no backend hence it would not be functional was curious to how others approached this
looking for some ideas
Hi everyone, I was wondering about how we should structure our document. I've looked at a few video tutorials on youtube, and they seem to be structuring the web using CSS only. Features like float left, margin auto, etc etc. While on my first project, I only use Bootstrap's <div class="container"> and it seems to be doing all the work for me.
As a beginner, this confuses me. Am I doing anything wrong ?
Here's the link to my first project : http://codepen.io/AntonWibowo/full/gPqzYb/
As a beginner, this confuses me. Am I doing anything wrong ?
Here's the link to my first project : http://codepen.io/AntonWibowo/full/gPqzYb/
@h4r1m4u thanks it's working for x. The reason why it doesnt work for O it's because of the structure of the program. I called play() first and then wait for user input, however if we put everything inside the square click function first play() is only called when the user clicks on the .square and after that another play() is called ( = 2moves for ai). I will try to solve that later ;)
greatdanton sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1393 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@AntonWibowo that's the beauty of bootstrap!
This message was deleted
greatdanton sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: greatdanton already gave h4r1m4u points
anyone got a sec to look at my calculator? I cant get my total function working properly and i cant figure out why
sure, let's have a look.
@avanbox you need to break after each case in your switch statement.
hmmm. thanks @MattYamamoto ill take a look must have missed some.
avanbox sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 912 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
@avanbox in your
getTotal() function
i appreciate your time!
@avanbox no problem. And if I might offers some advice, it's better practice keep your HTML and JS as seperate as possible. So do the click bindings in the JS file/section as opposed to the HTML. It makes it easier to maintain, debug, and read. But functionally it obviously still works as you have it.
is they a way to explain what you mean or point me in the right direction of some reading material? So your saying not to use onclick="buttonClicked(1)" for example?
@avanbox correct, put that functionality with the rest of your JS. Since you have jQuery loaded you could do
$("#1").on("click", function() {
buttonClicked(1);
});
// or using vanilla JS
document.getElementById("1").onclick = function() { buttonClicked(1) };
The idea, though, is to keep the structure and functionality speperated.
thank you. Im so far down on the beginner scale. Im just throwing things together at this point. I will take your advice!
You're welcome. And no worries, we all started where you are. Like I said, what you have is working, so feel free to run with it. But I just want you to be aware that there may be better ways to accomplish things. The more you see the more you learn.
You should also be aware that trickier bindings for multiple elements if you want. For example, instead of using the unique ID for each button and assigning click function for each one, we could use the class that they all share. Then use jQuery's $(this) to reference the element that was clicked.
$(".calc-but").on("click", function() {
var btnTxt = $(this).text();
// have to do this since your buttonClicked doesn't handle the equals sign
if(btnTxt != "="){
buttonClicked($(this).text());
}
});that would take care of all the buttons in one fell swoop.
My adivce is to keep doing what you're doing, but at some point experiment with different ways of doing the click bindings.
best of luck!
@GreatDanton cool. yeah, i didn't investigate why it wasn't working for O. left that as a homework for you :)
Thanks again @MattYamamoto
avanbox sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: avanbox already gave mattyamamoto points
FCC have changed their curriculam???
@MattYamamoto need help sir
@manojansh sure, what's up?
I want my value of sec to decrease after every 1 second. Heree is my code...
$('.border').click(function(){
var j=0;
var sec=[];
for(var i=59;i>=0;i--)
sec.push(i);
console.log(sec);
setInterval(secondsTimer(sec[j++]),1000);
});
function secondsTimer(sec)
{
$('#time2').replaceWith('<p id="time2">'+sec+'</p>');
console.log(sec);
}
what is wrong?
how am I supposed to do the first project? the tribute page one. I can't remember how to do such things with HTML after 50 hours of Javascript bonfires
@manojansh you need to use an anonymous function to wrap your
secondsTimer call. so setInterval(function() {
secondsTimer(sec[j++]);
},1000);
also, I don't thinik you need to use the array to store the vlaues. why not just set
j = 59; and then in your secondsTimer function decrement j each time.
@MattYamamoto why do i need an anonymous function? I thought window.setInterval is a predefined function.
@avivlan yes, that's the fun of it isn't it? No time like the present to go back and review!
@MattYamamoto really hard to do without looking at their code
when you do setInterval(myFunction(), 1000) you are invoking the function myFunction immediately since that's what the () does. So that function runs and then whatever it returns is what setInterval will fire each time. You can do setInterval(myFunction, 1000) (note the lack of () there), but then that doens't work if you need to pass a parameter to myFunction. So you need to use the anonymous wrapping function. which allows you to do whatever you need inside.
setInterval(function() {
//can call functions and do whatever else you need to in here.
}, 1000);alternatively you could create another function which takes no parameter and use that
function wrappedSecondsTimer() {
secondsTimer(sec[j++]);
}
setInterval(wrappedSecondsTimer, 1000);
@avivlan no, I m meant go back through the FCC HTML and CSS stuff
but I suggest you just div in and start playing around... when you get stuck go back through the FCC challenges (or whatever they call them now) and/or ask for help in here.
@MattYamamoto thanks
avivlan sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 913 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
I can’t get the .mp3 sounds for Simon Game to play on button click
var one = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var two = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var three = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var four = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
$(".sound").on("click", function(){
switch ($(this).prop('id')){
case "red":
one.play();
console.log("a");
break;
case "green":
two.play();
break;
case "yellow":
three.play();
break;
case "purple":
four.play();
break;
}
});
do I need a different library for audio? I’m using jQuery
the console.log was just to check the switch implementation
it doesn’t work with any .mp3 files, it does work with .wav, but I just wanted to use the source files from description without having to convert and reupload them somewhere
oh, and the html is:
<button class="btn sound" id="red">red</button>
<button class="btn sound" id="green">green</button>
<button class="btn sound" id="yellow">yellow</button>
<button class="btn sound" id="purple">purple</button>
@trueskawka that should be correct, in fact I pasted that into jsbin and it works fine.
do you have that in codepen?
can it be a Chromium thing?
I’ve never used it for .mp3 :)
regular Chrome doesn’t play well with my laptop
@MattYamamoto - thanks alot sir, you explained it so beautifully
manojansh sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 914 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
yeah, just checked on my other computer, it’s Chromium
thanks @MattYamamoto
trueskawka sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 915 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
@trueskawka strange. well, gald you got if figured out.
apparently “mp3 is not a fully open format” ^^
well, that's good to know.
@FreeCodeCamp319 Yes I saw that about the Camper News challenge just after I'd got about half way through. Oh well, learned something anyway!
Would anyone be able to help me figure out what happened to fillText() in my code. it stopped working at some point and I can't find out why it's glitching on me. I've followed the operation of the code and tried the same functions in other pens to test each one. The code s running but right at that command, it fails. I'd love to learn about a means of looking even closer at what's happening so that I can figure it out. http://codepen.io/Philosophist/pen/ZQvJym?editors=0010
Is there a lesson on making certian words in a <li> bold?
@rilejon put them inside a span, make the span bold
(via class)
@Philosophist I know very little about the HTML canvas, but it apperas to be a layering issue. You're game board is being drawn over your "O". Move your
drawGrid() call to the top of your code (like to line 48), so that the "O" gets drawn on top of the board.
@rilejon use <strong>
@kirbyedy I'm a little lost can i see an example
Hello everyone I need help with the #Twitchtv zipline
I am able to display online users with their logo pics however I still do not know how to display offline users with their logos
Here is my link http://codepen.io/ZeeMax/pen/WrJvoM
any sugestions ??
@ZeeMax you need to make two different API calls for each streamer - one to the streams API (which is what you already have) and then another to the users API (which is where you can get the logo from, regardless of whether the stream is online or offline)
@kirbyedy Thanks
rilejon sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 461 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@h4r1m4u is the API for the users https://api.twitch.tv/kraken/streams/
@ZeeMax nope, that's the streams API. the users API is https://api.twitch.tv/kraken/users/
@h4r1m4u Thanks I'l l try it
zeemax sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1394 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@MattYamamoto Thanks! that looks like it's definitely whats happening now that you point it out. Once I operate drawGrid(), it fails to do text after that. Your suggestion of rearranging drawOX didn't fix it, but this does give me a great lead.
philosophist sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 916 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
hey
soo
can anyone help
html```
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
```
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>its says your page should have 2 radio button elements
Hey guys I finished my tribute page, but I have a problem with my JumboTron
My jumbotrong gets cut out at the very bottom of the page, leaving out a little bit of blue background
I want my jumbo tron to cover the entire vertical screen
I got it
@MattYamamoto jeez. Been working on this problem for days and it turned out the fillStyle() in the drawGrid() function turned the color of my text to the color of the background. It was camouflaged, but there.
hey guys I am using flexbox.... and one of the child elements(flex-item) is an image ..... how do i get the image to stop stretching with the flex-container?
hey guys looks like the quote web project was moved to intermediate and new project "tribute page" was added
in the user stories it says use whatever api or libraries we need...but this page doesn't require api or anything right?
it seems like a very basic static page
@max77p all of the projects say that. You might want to use an API for some random image or a color generations library, etc
@max77p you dont need an api for that page unless you're trying to do something like import data from wiki or something.
also bootstrap/jquery/angular are libraries and other things of that nature.
thanks @pradeepce hmm yeah im not sure whats going on either... i put the values in but i dont think that is the issue
jackedwardlyons sends brownie points to @pradeepce :sparkles: :thumbsup: :sparkles:
:star: 316 | @pradeepce | http://www.freecodecamp.com/pradeepce
Just "finished" the weather project. The icons need to be sharpened (I found free ones online that get blurry when scaled up). The icon and background color changes depending on the weather. I'm probably gonna update the javascript to use a switch statement instead of an if/else block. Constructive criticism would be greatly appreciated! my codepen
I am working on the Random quote generator. I have made an object to hold all of my quotes, but i dont know how to make the twitter button post only the quote content. Would i have to $document.getElementById('#tweet') ect.. here is a link to my codepen. http://codepen.io/jrroman/pen/ZQVPXy
any help is very much appreciated
can someone help me with this, i can't seem to change the color for the navbar text at the top
@max77p in your css try .navbar{ details here}
@jrroman that doesn't seem to work
@max77p sorry .navbar .nav > li > a{ color:black} for instance
@jrroman why do i have to go like that?
hey guys, can anyone help me?? I am doing my random quote generator and i cant figure out how to make my "new quote" button do somehting
right now i just want it to print out hi to the console log just so i know it works but its not working
does anyone know how to use java script to make an html button work?
@max77p
@max77p i misread and thought you were referring to the background of your navbar. You adjust it like that because you are targeting the element you are trying to change.
@max77p did that accomplish what you were looking for?
@jrroman ohh what is the !important used for?
@max77p it can be used to override inline styling, but where do you see !important?
@jrroman oh ok thanks!
max77p sends brownie points to @jrroman :sparkles: :thumbsup: :sparkles:
:star: 272 | @jrroman | http://www.freecodecamp.com/jrroman
@max77p I dont use it because it can become very confusing to me. That is just my opinion though im sure it has its time and place
@max77p thanks! :)
jrroman sends brownie points to @max77p :sparkles: :thumbsup: :sparkles:
:star: 312 | @max77p | http://www.freecodecamp.com/max77p
Okay, I've been beating my head against the wall for four days. When my tic-tac-toe game resets, it cleans the board....then for some reason it adds back the most recent move by the player and the most recent move by the computer. I have no idea why. Can someone take a look, please, and see what's going on? This version is not AI, by the way, it just plays a random square. Thanks! http://codepen.io/macengr/full/eJrBvb/
The weather app is so damn frustrating:( You have to create such an app at a point where you know almost nothing about APIs and JSON...
Hello, is this where I would come to ask some CSS questions? By any chance? I'm kind of stuck with something I want to do