jttyeung sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jttyeung already gave tylermoeller points
init_hi_turn()
, you are adding another click handler for the .class
elements. If you just condition it so that you add the click handler only one time, it seems to clear up that problem. To test it, I just added a flag variable that is global, and initialize it to false
. Just before setting the click handler, test that flag, if it is false, add the handler, then set that variable to true
. Problem solved!
@kenobijr - the snippets of code that I added:
var clickAdded = false; // the global variable
and this around the click handler code:
//get HI choice
if ( ! clickAdded ) {
$(".cell").click(function(){
if (game.turn === "HI" && game.status === "running"){
var position = Number($(this).attr("data-pos"));
$(".cell").removeClass("click_now");
// add x or o on ui and board
if (game.ai_is_x){
$(this).text("O");
game.board[position] = "O";
advance_turn();
} else {
$(this).text("X");
game.board[position] = "X";
advance_turn();
}
}
});
clickAdded = true;
}
i wrote this to test if javascript was working but it doesn't work. Do any of you guys see something wrong with this code?
var df=1;
function checker() {
if (df==1) {
return true;
} else {
return false;
}
}
checker();
It's not picking up that df is a variable.
df
should be a variable that is in scope for your function? Why do you think, @pbgnz that it shouldn't? I haven't tried this yet in a browser...
emamador sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1812 | @khaduch |http://www.freecodecamp.com/khaduch
function main() {
// this won't work because these variables will only be available inside this function
// move them outside all your functions at the top of your code
var author;
var quote;
// you can still set them inside this like you're doing
$.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?&lang=en', function (data) {
author = data.quoteAuthor ? data.quoteAuthor : 'Unknown';
quote = data.quoteText;
});
// this won't work because like my animation shows you have to either set the html inside the getJSON or call a function that sets the
// the html from inside the getJSON
// You can use .done() or .on('done', setHTML) at the end of the getJSON as well
$('#quote').html(
'<p>"' + quote + '"</p>' +
'<span>- ' + author + '</span>'
)
}
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 714 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
col-sm-8
, col-sm-4
, etc? xs
, sm
, md
, lg
if I remember them all correctly...
<h1 class="text-center" class="col-s-8" >
, it should be written as <h1 class="text-center col-sm-8" >
, with a correction to the class for the column. Each class in the same attribute, space-separated.class="container"
div as the parent for all of your row
and col
divs. It probably won't work the other way around.
<style>
section from your HTML panel. It might just mess with your page because of the way CodePen loads things...
<h1>
nested inside of those divs. It might avoid some other problems, such as conflicting style settings on the <h1>
compared to the column class settings? (I'm not sure that there are, but that's a "for instance"...)
col-sm-6
grid. I am trying to put captions underneath each image. I've been adding these tags immediately after '<img>', <div class="caption text-center">
. But does not seem to work. It looks okay in mobile but on desktop the caption slides over on top of the 2nd image . Any suggestions?
Never mind guys, I learned it
<a href="url" target="_blank"> ....</a>
@media screen and (max-width:400px) {
.brand-logo {
color: red;
}
}
otto-aa sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
<div class="text-center"
<div class="text-center">
A quick question - How do i change the font style of a <span> within the .brand-logo having the class as "desc"?
.brand-logo {
font-family: 'Rochester', cursive;
}
.desc {
font-family: monospace;
font-size: 15px;
}
The above code does not work. Here's the HTML:
<a href="#" class="brand-logo center" id="fLogo">
Brand Logo goes here
<span class="hide-on-small-only" class="desc">Small description goes here</span>
</a>
.nav-pills{
z-index:1;
}
iansmit7 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
.nav-pills{
z-index:1;
font-size: 20px;
background-color: saddlebrown;
margin-bottom: 9%;
color: white;
@F22rapt this is the css.nav-pills{
z-index:1;
font-size: 20px;
background-color: saddlebrown;
margin-bottom: 9%;
color: white;
devd01 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@F22rapt this is html<div class="pageOne text-center">
<ul class="nav nav-pills">
<li><a href="#">Ian Smit</a></li>
<li class="pull-right"><a href="#">Contact</a></li>
<li class="pull-right"><a href="#">Portfolio</a></li>
<li class="pull-right"><a href="#">About Me</a></li>
</ul>
text-decoration: none;
#navbar a{
font-size:40px;
text-decoration: none;
}
skfwnelf sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1816 | @khaduch |http://www.freecodecamp.com/khaduch
position: fixed
?
left: 12.5%;
#navbar-wrapper{
width:100%;
height:100px;
background-color:white;
padding-bottom:20px;
opacity:0.7;
position:fixed;
margin: 0;
on the body :)
mangoking-iv sends brownie points to @nitinnair89 and @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @otto-aa |http://www.freecodecamp.com/otto-aa
:cookie: 292 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@sycrat hey that's cool! Not about links on codepen: do it like that
<a href="http://somecoolshit.com" target="_blank" alt="blahblah">click here</a>
TARGET BLANK - it's important otherwise your links will not open
@pkshreeman Could be an issue with specificity of the elements. Associating the image with a class like this:
<img src="https://raw.githubusercontent.com/pkshreeman/pkshreeman.github.io/master/Blackcircle.png" class="imageOverlay">
Then apply these style to that class
.imageOverlay {
position: absolute;
top: 120px;
left: 135px;
}
sycrat sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @kurumkan |http://www.freecodecamp.com/kurumkan
@sycrat hey that's cool! Not about links on codepen: do it like that
<a href="http://somecoolshit.com" target="_blank" alt="blahblah">click here</a>
TARGET BLANK - it's important otherwise your links will not open
browser will try to open the link in the same page unless the "target" value is explicitly specified. Hence, codepen might block any external links while the browser attempts to open it inside codepen itself. :)
.imageOverlay{
position: absolute;
top: 120px;
left: 135px;
margin: 0 auto;
width: 50%;
}
.imageOverlay{
position: absolute;
top: 120px;
left: 135px;
width: 50%;
}
pkshreeman sends brownie points to @jmstubiera :sparkles: :thumbsup: :sparkles:
:cookie: 95 | @jmstubiera |http://www.freecodecamp.com/jmstubiera
pkshreeman sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
kenobijr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1817 | @khaduch |http://www.freecodecamp.com/khaduch
li a {
font-size: 30px;
}
line-height:25;
does not mean you are adding a blank space. It just determines the space between two lines
<html><body>
<nav>
Your navigation things go here
</nav>
<section>
<header>Heading for that section</header>
<div>Content</div>
</section>
</body></html>
Follow the above approach, if you can :)
@Y-Taras <p data-height="265" data-theme-id="0" data-slug-hash="rrkKWz" data-default-tab="js,result" data-user="Y-Taras" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/Y-Taras/pen/rrkKWz/">Tic-Tac-Toe</a> by Taras (<a href="http://codepen.io/Y-Taras">@Y-Taras</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
@prattheev I want that header to be right upon the table
<header>
<h2>Tic Tac Toe Game</h2>
</header>
<div>
<h2 style="text-align:center">Tic Tac Toe Game</h2>
<table class="gameTable">
<tr>
<td id="a1"></td>
<td id="a2"></td>
<td id="a3"></td>
</tr>
<tr>
<td id="b1"></td>
<td id="b2"></td>
<td id="b3"></td>
</tr>
<tr>
<td id="c1"></td>
<td id="c2"></td>
<td id="c3"></td>
</tr>
</table>
</div>
y-taras sends brownie points to @prattheev :sparkles: :thumbsup: :sparkles:
:cookie: 8 | @prattheev |http://www.freecodecamp.com/prattheev
Hi guys I'm working on personal portfolio and I've got problem with gradient in my progress bar
This is how I want to look like: http://codepen.io/dawidb/pen/amPgaQ
This is how it looks like : http://codepen.io/dawidb/pen/dpGbVB
@media
rule check that if you resolve those , your progress bar will be gradient colored. And also your .progress-bar
styles are inside media query .
@NitinNair89 oh okay is there any UX issue if its greyed out ??
Less readability
p1
tag instead of p
tag in HTML and inside your ul
you gave a closing div
remove that.
div
is block level element and two div's like below create two rows <div>row 1</div>
<div>row 2</div>
overflow: hidden
it will remove horizontal scroll bars body{
overflow: hidden;
}
overflow-x
overflow:vertical
overflow-x: hidden
body{
overflow-x: hidden;
}
.row {
margin-right: 0;
margin-left: 0;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
}
<section>
and give that section width:100%
?
head
settings and in css
panel settings
var test;
function setTest() {
test = 2;
}
declared outsidetext
outside your ajax call before even ajax req completes. so test
is undefined, this may be correct if i guessed your problem
shullmb sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 634 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
ricky11 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
ricky11 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 780 | @sorinr |http://www.freecodecamp.com/sorinr
Sorry to popup. I had this in handy - <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
@ricky11
ricky11 sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @emamador |http://www.freecodecamp.com/emamador
<div data-toggle="something in here" data-target="some other thing in here" etc ></div>
?
<input type='submit'>
:cookie: 781 | @sorinr |http://www.freecodecamp.com/sorinr
ndzhingarova sends brownie points to @nitinnair89 and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@NitinNair89 http://i.share.pho.to/d69f6f7a_o.png
so I have to use https but if i do the api doesn't work. it's something with the api itself because it says Err connection refused.
function weatherApp (){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID=d20ca486d73723c50174e1b7564caf53", function(a) {
$(".appbg").html(a);
});
}
weatherApp();
Why is the responseText always just ""?
var searchArticles = function(searchText){
//console.log("searching");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == XMLHttpRequest.DONE){
console.log("yay");
console.log(xhr.responseText);
}
};
xhr.open('GET', "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchText + "&limit=8&namespace=0&format=json", true);
xhr.send(null);
};
When I go to https://en.wikipedia.org/w/api.php?action=opensearch&search=anime&limit=8&namespace=0&format=json directly in my browser, it shows an okay json.
Codepen at http://codepen.io/porygonj/pen/KrOBZv/?editors=1111
:warning: ndzhingarova already gave nitinnair89 points
ndzhingarova sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
var x = parseInt(comp2);
var y = parseInt(comp);
console.log(x);
console.log(y);
only displays the last digit
So I've been working on tic tac toe, and I can get it so that the player can choose the number of players, and I copied the code for the x's or o's, but that doesn't work.
honesty1997 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Reassignment of 'game', which is is a function. Use 'var' or 'let' to declare bindings that may change.
$("#o h3").click(function() {
player = "o";
games();
});
$("#x h3").click(function() {
player = "x";
games();
});
pkshreeman sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Hi,
Can somebody help me please what am I doing wrong? It seems my code always true and not working for the false cases.
function mutation(arr) {
//create two variables for the first string and the second string
//lowercase them
//split each arrays to letters
firstArray= arr[0].toLowerCase().split('');
targetArray=arr[1].toLowerCase().split('');
//looping through the array
//check if the letters in the target string are in the first string, order doesn't matter
for (var i = 0; i<firstArray.length; i++){
for (var j = 0; j<targetArray.length; j++){
if (j!==i){
return false;
}
else{
return true;
}
}
}
//return firstArray + ", " + targetArray;
}
mutation(["Mary", "Aarmy"]);
amarillia sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
I have code that should run you through two sets of buttons, the first set sets the number of players, and the second lets you choose if you want to be x or o. The first set works properly, but the second set doesn't do anything that its supposed to on click.
code here
W3.CSS is a modern CSS framework with built-in responsiveness:
:)