@tommygebru
@KevinStaufy what do you think about having a HelpDesign channel as an extension of HelpFrontEnd chatroom?
@ExhibitArts
@KevinStaufy nice video and illustration the 4 is harder to make out but still great and sempa is really impressive :smile:
@KevinStaufy what do you think about having a HelpDesign channel as an extension of HelpFrontEnd chatroom?
kevinstaufy sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 268 | @mca62511 | http://www.freecodecamp.com/mca62511
tommygebru sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 269 | @mca62511 | http://www.freecodecamp.com/mca62511
mca62511 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 622 | @tommygebru | http://www.freecodecamp.com/tommygebru
Hi, working on the "No repeats please" challenge and the hint mentions to start the recursive call with the following:
perm(0, nothing used yet, empty new string (or array the same size as str);
I'm not following that last piece, the array the same size as str, why would it be an empty new string or an array the same size as str? Anyone able to clear that up for me? Thanks.
.thing-a-ma-bob {
width: 100px;
}
something like that could work
kevinstaufy sends brownie points to @tommygebru and @mca62511 :sparkles: :thumbsup: :sparkles:
:warning: kevinstaufy already gave mca62511 points
:star: 623 | @tommygebru | http://www.freecodecamp.com/tommygebru
<img class="thing-a-ma-bob" src="http://example.com/image.png" alt="A smiley narhwal">
<style>
h1 { font-size: 46px;
}
.smaller-image{
width: 300px;
}
.center-image{
}
</style>
<h1 class="text-center"> Bill Gates </h1>
<img class="smaller-image center-image" src="https://upload.wikimedia.org/wikipedia/commons/1/19/Bill_Gates_June_2015.jpg"></img>
.>
>.>
zeiadwsabra sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 272 | @mca62511 | http://www.freecodecamp.com/mca62511
@zeiadwsabra weird my blockquote doesnt have that vertical line for quotes
example quote
@KevinStaufy and what I was going to say before actually does work.
The "text-center" class and using class="text-align: center;" centers things INSIDE an element. There's nothing inside an img element, the img is the element itself. So you'll want to put the image inside a div, add "text-center" to the div, and THAT will center the image.
<style>
body {
background-color: #000000;
}
</style>
pzl
<style>
body {
background-color: #000000;
}
</style>
@KevinStaufy At the top you can see what I mean about centering the things inside the div instead of adding "text-center" to the img itself.
Below that, you can see what I was saying about using margin: 0 auto; to align a div. I made a red div box as an example.
interstellaridea sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 290 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
kevinstaufy sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 291 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
kevinstaufy sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:warning: kevinstaufy already gave jayuhasz points
divaweb sends brownie points to @idietmoran and @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 298 | @idietmoran | http://www.freecodecamp.com/idietmoran
:star: 292 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
The /= operator
divides a variable by another number.
myVar = myVar / 5;
Will divide myVar
by 5
. This can be rewritten as:
myVar /= 5;
:pencil: read more about challenge assignment with divided by equals on the FCC Wiki
So first put it in a div
<div>
<!-- your tribute page -->
</div>
And then in your css, style the div's width, margins, and/or padding to make it display how you'd like.
div {
width: 70%;
margin: 0 auto;
}
Would be a simple way to do it
CSS
.site-wrapper {
padding: 2em;
width: 100%;
}
.redbox {
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}
HTML
<div class="site-wrapper">
<p>This is my website! Look at this red box.</p>
<div class="redbox"></div>
</div>
If you write,
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. </p>
Then it'll display as
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
However, if you write,
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. </p>
Then it'll display as
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
kevinstaufy sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 273 | @mca62511 | http://www.freecodecamp.com/mca62511
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
initThings();
});
so actually, I need some help.
I moved the project portfolio page to my actual domain (and removed the projects for now until I have better stuff to show)
http://michaelcharl.es/aubrey
However, on mobile, it isn't rendering properly. It is showing the full webpage, zoomed out, as opposed to the smaller gird version.
The col-xs elements appear properly on a small sized window on the computer, they just don't show properly on a similarly sized phone window.
Any thoughts?
<a href="http://www.example.com" target="_blank">This is a link!</a>
What that does it makes it open in a new window, instead of trying to open in the same window.
$('placeYoureDisplayingThat').empty().append(whatYouWantToDisplay)
$('placeYoureDisplayingThat').text(whatYouWantToDisplay)
I'm not that far yet, but couldn't you just use jquery to change the text within an element to display what you want to display?
$(".score").html("You have " + varScore + " lives left.");
Something like that?
jovjohnson sends brownie points to @qualitymanifest and @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 966 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
:star: 275 | @mca62511 | http://www.freecodecamp.com/mca62511
successfunction
successfunction
, lat
and long
are undefined
kevinstaufy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 856 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@KevinStaufy Well... If you're following the map, at this point you've covered basic HTML5 and CSS, the basics of using Bootstrap for responsive design, and you've been shown how to manipulate the DOM in jquery. That's really all you need to make something like that.
If you
1) Review the lessons you've already done, or use something like codeacademy for review.
2) Google things you don't know.
3) Ask for help after that fails you
Then you can definitely do it. You'll need to use HTML, CSS, Bootstrap, and jQuery to pull off the portfolio page (everything you've learned so far).
gords sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star: 967 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
tommygebru sends brownie points to @evaderei :sparkles: :thumbsup: :sparkles:
:star: 385 | @evaderei | http://www.freecodecamp.com/evaderei
qualitymanifest sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 277 | @mca62511 | http://www.freecodecamp.com/mca62511
id
for your on click
event instead of class.
@brettfelts you can do something like outside the ajax
$('button').click(function(e){
var id = e.target.id;
if(id === 'celsius')
{
console.log('celsius');
//convert();
}
else
{
console.log('fahrenheit');
//convert();
}
});
then just have a convert function that gets the value of the #temp display and converts it to celsius and fahrenheit then re-display the converted values
$( "#btn1" ).click(function() {
$( ".message" ).toggle();
});
This an inline `<paste code here>
` code formatting with a single backtick(`) at start and end around the code
.
```js ⇦ Type 3 backticks and then press [shift + enter ⏎]
(type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]
``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
?callback=?
but possibly more ..still looking
The pos
seems to have the same value after the if statement.
function miniMax(movesSign, sign, pos) {
var scoreGame = score();
if (scoreGame) {
return [scoreGame, pos];
}
console.log(pos);
var multi = sign === aiSign ? 1 : -1;
var moves = possibleMoves();
var bestScore = -100;
var positions = [pos];
var thisScore;
var oppSign = sign === "O" ? "X" : "O"; // opponent's sign
while (moves.length > 0) {
var newPosition = moves.pop();
var newBoard = movesSign.slice();
newBoard[newPosition] = sign;
var result = miniMax(newBoard, oppSign, newPosition);
thisScore = multi * result[0];
// Choose the best possible move
if (thisScore === bestScore) {
positions.push(newPosition);
} else if (thisScore > bestScore) {
bestScore = thisScore;
positions = [newPosition];
}
}
// Choose a move at random from the best moves
var randomMove = Math.floor(Math.random() * positions.length);
return [multi * bestScore, positions[randomMove]];
};
Can you guys please help me with this?
https://en.wikipedia.org/w/api.php?callback=?
to add in teh callback
@mlawson3691 as @mutantspore suggested above, the problem is that when the form is submitted it reloads the entire page, so you'll never get the results back from the API (when the page reloads, they're wiped). prevent the form from submitting:
$('#form').submit(function(event) {
event.preventDefault();
var input = $('#search').val();
$.ajax({
// the rest of your code as is
and yeah, you're missing a closing </form> tag in your HTML as well
the ajax call as such is working fine
Uncaught RangeError: Maximum call stack size exceeded
error. Don't know why. Please help.mlawson3691 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1413 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
mlawson3691 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1126 | @mutantspore | http://www.freecodecamp.com/mutantspore
newPosition
value is not being passed in the recursive calls.
mlawson3691 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 861 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
var newPosition = moves.pop();
The value is not changing. It pops the last free box number and it keeps looping on the same box number.
hey guys, i have a lil challenge, making a timer that counts down, if I put the window.interval method in my function it obeys the click event but misbehaves but if it's declared outside the countdown function it works fine but starts running onload without click event initiating it, how can I correct this, this is my js fiddle
@Lumexralph here you go:
var time = 1200; // in secs
var clockDisplay = document.getElementById('sessionCount'); // target the div
var myTimer; // stores the interval id
function startCountdown () { //countdown by decreasing time at inttervals of 1 second
myTimer = setInterval(function() {
time--;
displayTime();
}, 1000);
}
function displayTime () { //updates the div anytime time decreases
var min = Math.floor(time / 60); //convert time to mins
var secs = Math.floor(time % 60); //convert time to secs
if(secs == 0) { //make secs 59 if it's 0
min--;
secs = 59;
}
//clockDisplay.textContent = min + 'm' + ':' + secs + 's';
clockDisplay.textContent = min + 'm' + ':' + secs + 's';
}
//adding a click event on the div
clockDisplay.addEventListener('click', startCountdown);
function mainAlgoMove() { // *********** bug happens because it finds multiple winnning computer combinations. Sometimes the one it finds comes up with the container being taken by an x. In this event
if (move == 0 && playerArray.length == 0 && compArray.length == 0){ //This will trigger when the board is cleared and the player had the last turn. The computer will go first and have a random move
computerFirst();
}
if (move == 0 && ( (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(24) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(34) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(27) !== -1) ||(pattern.indexOf(2) !== -1 && pattern.indexOf(3) !== -1) || (pattern.indexOf(5) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(7) !== -1)) && $('#container-1').html() == "") {
compArray.push(1);
$('#container-1').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.indexOf(5) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(1) !== -1 && pattern.indexOf(3) !== -1) ||
(pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1)) && $('#container-2').html() == "") {
compArray.push(2);
$('#container-2').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(16) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(26) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(29) !== -1) ||(pattern.indexOf(1) !== -1 && pattern.indexOf(2) !== -1 ) || (pattern.indexOf(5) !== -1 && pattern.indexOf(7) !== -1 ) || (pattern.indexOf(6) !== -1) && pattern.indexOf(9) !== -1) && $('#container-3').html() == "") {
compArray.push(3);
$('#container-3').html(compSymbol).css({'background-color': compColor});
move = 1;
}
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;
}
if (move == 0 && ((pattern.indexOf(1) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(3) !== -1 && pattern.indexOf(7) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(6) !== -1)) && $('#container-5').html() == "") {
compArray.push(5);
$('#container-5').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.indexOf(3) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(5) !== -1)) && $('#container-6').html() == "") {
compArray.push(6);
$('#container-6').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(48) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(49) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(18) !== -1) || (pattern.indexOf(1) !== -1 && pattern.indexOf(4) !== -1) || (pattern.indexOf(3) !== -1 && pattern.indexOf(5) !== -1) || (pattern.indexOf(8) !== -1 && pattern.indexOf(9) !== -1)) && $('#container-7').html() == "") {
compArray.push(7);
$('#container-7').html(compSymbol
if (move == 0){
for (var i = 1; i <= mainArray.length - 1; i++){
for (var j = 0; j <= mainArray[i].length - 1; j++){
if ((pattern.indexOf(mainArray[i][j][0]) !== -1) && ((pattern.indexOf(mainArray[i][j][1]) !== -1)) && ($('#container-'+i).html() == "")){
$('#container-' + i).html(compSymbol).css({'background-color': compColor});
move = 1;
return;
console.log('--------------------------------------------------------------------------------------------------------------------mainArray' + mainArray[i][j]);
console.log('------------------------------------------------------pattern ' + pattern );
console.log('----------------------------------------------------------- i ' + i);
}
}
}
}
}
pattern
before it runs the second time
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1414 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
brainyfarm sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 301 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
rozana78 sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 309 | @mca62511 | http://www.freecodecamp.com/mca62511
em
. font-size: 1em;
manojansh sends brownie points to @pedronfigueiredo :sparkles: :thumbsup: :sparkles:
:star: 298 | @pedronfigueiredo | http://www.freecodecamp.com/pedronfigueiredo
codernoob sends brownie points to @pedronfigueiredo :sparkles: :thumbsup: :sparkles:
:star: 299 | @pedronfigueiredo | http://www.freecodecamp.com/pedronfigueiredo
$.JSON()
method?
hman1911 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 866 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
$(document).ready(function(){
var api_url="https://en.wikipedia.org/w/api.php?action=opensearch&search=api&limit=10&namespace=0&format=jsonfm";
$(window).load(function(){
$.ajax({
url: api_url,
method: 'GET',
success: function(data) {
document.getElementById("display").innerHTML = "TEST!";
// $('#display').html("test!");
}
});
});
});
callback
function.
var api_url="https://en.wikipedia.org/w/api.php?&callback=?&action=opensearch&search=api&limit=10&namespace=0&format=jsonfm";
opensearch
&callback=?&
$(document).ready(function(){
var api_url="https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&search=api&limit=10&namespace=0&format=json";
$.ajax({
url: api_url,
method: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
});
pedronfigueiredo sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:star: 334 | @codernoob | http://www.freecodecamp.com/codernoob
background: url("http://wallpapershdfine.com/wp-content/gallery/engineering-background-images/hse_background.jpg") 0 0/100% 100% fixed no-repeat;
. and remove the background-size property
box-sizing: border-box
<div ...inline... ></div>
<div ...inline...></div>
will not work
new-line
character between the two elements, or comment out the space between them, or set -4px negative margin-left to their class
<div ...inline...></div><!--
--><div ...inline...></div>
classact1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1415 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@ZeeMax I put a $(body).css() code at line 95, which wasn't working ie I was not able to change the background on refresh.
My previous code:
$("body").css("background", bckgImg);
But I just got a soln which works
$("body").css("background-image", 'url('+bckgImg+')');
neeraj-lad sends brownie points to @zeemax :sparkles: :thumbsup: :sparkles:
:star: 237 | @zeemax | http://www.freecodecamp.com/zeemax
neeraj-lad sends brownie points to @zeemax :sparkles: :thumbsup: :sparkles:
:warning: neeraj-lad already gave zeemax points
color
:).myElement {
color: red;
}
pistacue sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 303 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
johndeegs sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 304 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
does anyone know hwy this isn't working?
function sym(args) {
arr = arguments[0];
for (i = 1; i < arguments.length; i++){
arr = arr.concat(arguments[i]);
i += 1;
}
return arr;
Is should return [1, 2, 5, 2, 3, 5, 3, 4, 5] when passed sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), but only return [1,2,5,2,3,5]
rustydragonfly sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 305 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
I'm very close to getting the Symmetric Difference Algorithm.
function sym(args) {
arr = arguments[0];
lengths = [arguments[0].length];
for (i = 1; i < arguments.length; i++){
lengths.push(arguments[i].length);
arr = arr.concat(arguments[i]);
}
var o = {};
var output;
output = arr.reduce(function(prev, current) {
var key = '$' + current;
if (o[key] === true){
index = prev.indexOf(current);
prev.splice(index,1);
}
if (o[key] === void 0) {
prev.push(current);
o[key] = true;
}
return prev;
}, []);
// write back the result
return output;
}
sym([1, 2, 5], [2, 3, 5], [3, 4, 5]);
Any advice? The function works when only two arguments are passed in, but when there are more than two I can't figure out how to create a new array for the previous two, I tried using the reduce method inside a for loop but the program told me not to do that
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
I guess
anyone managed to figure out Style Text Inputs as Form Controls my code
<
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<div>
<form>
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
<button type="button" class="btn btn-primary">primary</button>
trying to do this Give the submit button in your form the classes btn btn-primary.
Add a <i class="fa fa-paper-plane"></i> within your submit button element.
Give the text input in your form the class form-control.#
?
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
<button type="button" class="btn btn-primary">primary</button>
ichirped sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1416 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
<button type="button" class="btn btn-primary">primary</button>
vexleir sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1417 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
<input type="text" form-control placeholder="form-control">
. shouldn't it be class="form-control"
ednamode sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1418 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
json.weather[0].icon
and json.weather[0].description
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&appid=80f8b2429407d4784a3e920826f54555&units=metric', function(json) {
console.log(json);
console.log(json.main.temp);
updateWeather = json;
});
&units=metric or imperial
@wearenotgroot
<p id="myTemp">Temp: </p>
$("#myTemp").append(json.main.temp);
like that?
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
console.log('hello');
}
xhr.withCredentials = true;
xhr.send();
please what is wrong with this piece of code that xhr fails with no-access-control-allow-originvar xhr new xmlhttprequest xhropenget httpss3amazonawscomfreecodecampsimonsound1mp3 true xhrresponsetype arraybuffer xhronload function consoleloghello xhrwithcredentials true xhrsend
connected via http
? @wearenotgroot
[Object {
description: "broken clouds",
icon: "04d",
id: 803,
main: "Clouds"
}]
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 868 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
<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" 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">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<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" 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">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<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" 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">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
weatherAPIQuery = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitudeQuery + "&lon=" + longitudeQuery;
console.log(weatherAPIQuery);
});```
$(document).ready(function(){
var weatherAPIKey = "6a8f3fff2528a34f3bc0896626b63742";
var longitudeQuery = 0;
var latitudeQuery = 0;
var weatherAPIQuery = "";
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
longitudeQuery = position.coords.longitude;
latitudeQuery = position.coords.latitude;
console.log(longitudeQuery);
weatherAPIQuery = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitudeQuery + "&lon=" + longitudeQuery +'&appid=' + weatherAPIKey;
console.log(longitudeQuery);
$.getJSON(weatherAPIQuery).done(function(weather){
console.log(weather);
})
.fail(function(){
console.log("error");
});
});
}
});
gladdos sends brownie points to @mutantspore and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 869 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
:star: 1129 | @mutantspore | http://www.freecodecamp.com/mutantspore
var arr;
var url;
var lat;
var lon;
var str;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
lon = position.coords.longitude;
lat = position.coords.latitude;
url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=44db6a862fba0b067b1930da0d769e98&units=imperial";
runFun(); //<---------------as mentioned call this here to insure the lat and lon are set
});
}
function runFun() {
$.getJSON(url, function(json) {
console.log(json);
arr = json; //<-------------no need for this
str = JSON.stringify(json); ///<-----------no need for this
//move here to reach the json/data
$("#test").html("City: " + json.name + "<br>Temp: " + json.main.temp + "<br>Wind: " + json.wind.speed + " MPH from " + json.wind.deg + " degrees" + "<br>Weather Conditions: " + json.weather[0].main);
});
//<---------------couldnt reach the variable from here move it up
};
<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" 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">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: clarkarnold already gave wearenotgroot points
You can add Bootstrap to any app just by including it by adding the following code to the top of your HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: clarkarnold already gave wearenotgroot points
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1419 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
urobert sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2500 | @saintpeter | http://www.freecodecamp.com/saintpeter
drsebic sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1133 | @mutantspore | http://www.freecodecamp.com/mutantspore
var latitude = Math.round(position.coords.latitude);
var longitude = Math.round(position.coords.longitude);
fuzyon sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1134 | @mutantspore | http://www.freecodecamp.com/mutantspore
flex
wyattwade sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1135 | @mutantspore | http://www.freecodecamp.com/mutantspore
wyattwade sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 177 | @fuzyon | http://www.freecodecamp.com/fuzyon
Guys, I am doing the calculator and I find this curios thing.
Is there something in the text input that makes the string appear inverse?
I display the same string somewhere in the html webpage, inside a div I mean. And also, the same string inside the input text, and It appears inversed.
Is there smt I have to know in order to solve it?
http://codepen.io/DiazPedroAbel/pen/pgRXWv?editors=1010
forget about memo_inv, I was trying to redo the string but inverse to sove the problem but I couldn't for the moment.
@ExhibitArts
are you trying to center it on full screen?
@ExhibitArts
check this
http://i.imgur.com/Nsndksk.png
look at the changes made below, might have to mess with it some more to center it but that's what you're looking for i believe