<div class="bg-overlay2">
<div class="container-fluid">
jharrowmortelliti sends brownie points to @wyattwade :sparkles: :thumbsup: :sparkles:
:star: 253 | @wyattwade | http://www.freecodecamp.com/wyattwade
$(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;
adancode sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 473 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
adancode sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:warning: adancode already gave alexanderkopke points
@ExhibitArts i cant even look at it. im getting this message This web page is not available
DNS_PROBE_FINISHED_NXDOMAIN
$(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;
}
}
});
});
exhibitarts sends brownie points to @williambowen :sparkles: :thumbsup: :sparkles:
:star: 271 | @williambowen | http://www.freecodecamp.com/williambowen
<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>
// 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">
var a = [];
doesn't tell me anything. var userMoves = [];
makes me immediately grasp what it's about
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1390 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@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
$('.field').click(function () {
var fieldId;
fieldId = this.attr('id');
clickFunction(fieldId.substr(fieldId.length - 1));
});
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
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: wyattwade already gave h4r1m4u points
$('.field').click(function () {
var fieldId;
fieldId = this.attr('id');
clickFunction(fieldId.substr(fieldId.length - 1));
});
('.field')
I think I need ('.container')
@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>
target="_blank"
attribute, otherwise the links won't open properly (it's a codepen thing)
fieldId = this.attr('id');
to fieldId = $(this).attr('id');
this
in $(this).attr('id')
refers to the element that you clicked on (because it's inside the click handler)
attr()
method on it and get the id
$(this).attr('class')
it would refer to each button in the class?
$(this).attr('class')
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: wyattwade already gave h4r1m4u points
// 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
whiplash5057 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1391 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@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.
greatdanton sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1393 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
greatdanton sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: greatdanton already gave h4r1m4u points
avanbox sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 912 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
getTotal()
function
$("#1").on("click", function() {
buttonClicked(1);
});
// or using vanilla JS
document.getElementById("1").onclick = function() { buttonClicked(1) };
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.
avanbox sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: avanbox already gave mattyamamoto points
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);
}
secondsTimer
call. so setInterval(function() {
secondsTimer(sec[j++]);
},1000);
j = 59;
and then in your secondsTimer
function decrement j each time.
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 sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 913 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
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;
}
});
<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>
manojansh sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 914 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
trueskawka sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 915 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
drawGrid()
call to the top of your code (like to line 48), so that the "O" gets drawn on top of the board.
rilejon sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 461 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
zeemax sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1394 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
philosophist sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 916 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
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>
@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.
jackedwardlyons sends brownie points to @pradeepce :sparkles: :thumbsup: :sparkles:
:star: 316 | @pradeepce | http://www.freecodecamp.com/pradeepce
max77p sends brownie points to @jrroman :sparkles: :thumbsup: :sparkles:
:star: 272 | @jrroman | http://www.freecodecamp.com/jrroman
jrroman sends brownie points to @max77p :sparkles: :thumbsup: :sparkles:
:star: 312 | @max77p | http://www.freecodecamp.com/max77p