Hello guys, i searched on internet and i can't find the way to put Berry Chuck picture under Huey Lewis picture please
https://codepen.io/Atalaa/pen/ezpgzM?editors=1100
https://codepen.io/Atalaa/pen/ezpgzM?editors=1100
if you are talking about the first picture not lining up with whats below it, I would use offest columns. you can find it in the bootstrap documentation it allows you to basically create fake columns for positioning .
if they are all in the same column you could add margins or padding to the img by asigning it an ID
thank u anyways
How do I put these three buttons in the same row using bootstrap grid system
@miciah123 you already have- change md to xs if you want them to always stay in the same row
?
@miciah123 the grid system has default values - so if your screen is lg - because there is not lg set it defaults to md - which you set
miciah123 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 573 | @gregatgit |http://www.freecodecamp.com/gregatgit
@miciah123 but because the smallest setting you put was md - when the screen got smaller than md it has a default setting of col-xs-12 which kicked in
@miciah123 because you're using code pen - cut and paste everything in the styles tag into the css tab
if you want to add any librarys or js using the setting button
tags
thanks
@GregatGit
Why does the computer start making such weird noises?
hey guys can anyone help me figure out how to make this responsive??
http://codepen.io/tadake/pen/gMadEz
http://codepen.io/tadake/pen/gMadEz
@aryandua because you have an interval that plays the sound over and over every 300th of a second
tadake sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@aryandua - probably the
setInterval timer that you use is just repeating - it will never stop until you clear the interval timer.
hey y'all I've got a few (maybe dumb) questions.. I'm working on the "Random Quote Generator" project. I've finally got my API to work!!! yeheyy!! but now I'm trying to clean up my messy code
first is a jQuery question.. why doesn't this call back the function when I click my button?
$(".newQuoteBtn").on("click", pullUpQuote());
why not use .click? it should do the job your wanting. heres the docs https://api.jquery.com/click/ @aidansven
@tadake ah wow thanks! I didn't know that shortcut existed :) :) pleasant surprise haha!
aidansven sends brownie points to @tadake :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @tadake |http://www.freecodecamp.com/tadake
@aidansven it's fine to use .on(). Just call it like this instead .on('click', pullUpQuote);
ah ok ok
http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click <-- Reasons to use .on()
I dont know why the Berry Chuk caption is a link target to youtube please help
looks like its after where you added the youtube link. @Atalaa
yeah at the end of line 80
atalaa sends brownie points to @tadake :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @tadake |http://www.freecodecamp.com/tadake
Thanks to you too @jdtdesigns !!
now my other question is about the function itself
function pullUpQuote() {
$.ajax({
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
type: 'GET',
data: {},
dataType: 'json',
success: function(data) {
document.getElementById("quoteText").innerHTML = data.quote;
document.getElementById("quoteAuthor").innerHTML = data.author;
},
error: function(err) {
alert(err);
},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "bDEv0VpVECmshUX66t2sGsVFSWu9p1056UNjsnQJsAJeqaqksI");
}
});
}aidansven sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 455 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
your welcome !! @Atalaa back to the future is the best! keep up the good work! :+1:
do I have to call all of that every time I want to pull a new quote?
@tadake yes its my favorite movie im glad that you approve hahah
you can pull like 50 quotes and store them in an array and use that as your api for the app
@aidansven
@jdtdesigns ok great thanks. so just to verify-- when I'm using the .click(function), all that code needs to be run again with every click?
aidansven sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: aidansven already gave jdtdesigns points
@aidansven it depends on how much the api lets you pull data
if it limits you to a certain amout of queries then storing the quotes on one click and them using the array for getting a random one is a better idea
so basically when the app loads, you get a bunch of quotes from the api and store them in an array, then just use your click function to pull a random one from the array. ;)
fortunately (as far as I know) this API doesn't have a limit
and if they do it's way higher than we'll be using :P
there's my project so far.. the twitter button isn't working yet
but the quotes are ;)
I was thinking I want to get the twitter and facebook buttons closer together, but they are where the bootstrap columns automatically put them
a strict prototyping framework
it's not great for custom design
float is so 2000
i can do 10 things that make things fall beside each other
and all never use floats :P
Hi guys, can you help me with the Arguments Optional bonfire? I don't know how to do the single argument part.
ok ok I will read on that..lol excited to learn this now! thanks @jdtdesigns
aidansven sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: aidansven already gave jdtdesigns points
function addTogether(first, second) {
/*
function sumTwoAnd(num){
return number+num;
}
if(addTogether.length==1){
return sumTwoAnd()
var number=addTogether(argument[0]);
}
*/
if(typeof first=="number"&& typeof second=="number"){
return first+second;
}
else{
return undefined;
}
}
addTogether(2,3);
the thing in the comment part I was just trying thing around
is it just asking you to add the 2 arguments?
ah, i just looked it up
so if the second argument is a function call (2)(3), you have to return a function that adds the first argument with the argument that's passed into your returning function
@leanhduy1998 a little tricky, but it's straightforward
return function(arg) {// some code that you can figure out :P };
Hey guys , do you have any clue how I would pass a var say "weather" into the URL in the $.getJSON?
@jdtdesigns if you do it like that, a function call (2)(3) will work right?
to be honest, it's the first time I see this form
i know in ruby something related to that would be www.stuff.com?#{weather}
@leanhduy1998 it's weird because we're so used to returning a value and not a function
i think i finished my twitch streamer! but i want to add buttons to categorize the streams. http://codepen.io/pawan92/full/ezpjgM/
needsmorecoffee sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
leanhduy1998 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
```js
function smallestCommons(arr) {
var num=0;
var i;
var j;
var args = Array.prototype.slice.call(arguments[0]);
var args1=args[0];
var args2=args[1];
while ( i!== j);{//While Args1 doesnt equal args2
for( i=args1;;i++){ //increment args1 by itself
for( j=args2;;j++){ //ditto
}
num=i;//This should be where the while loop has stopped so num == i where i = j
break;
}
}
return num;
}
smallestCommons([2,7]);
@123xylem I ended up creating a function that returns the greatest common and then using that to get the least common
@jdtdesigns interesting... that maybe a better way.. Any idea why my loops arent changing value of num?
Plus you break out of it after one iteration
I thought it says while theyre not equal let them ++ eachother
@123xylem can you explain to me why are you doing this : var args = Array.prototype.slice.call(arguments[0]); ?
individually
So what is my while loop doing wrong then? Ive moved break down a bracket
@123xylem tbh, i don't know what those loops are supposed to do lol
So the forloops run through the multiples of arg1 and 2 and when they match the while loop is complete
@123xylem I would suggest looking at a different approach .There are two main ways to get the least common multiple, using GCD or prime factorization. I suggest GCD, since it's easy to understand and implement.
hello! for the quote machine project did you guys use a quote api?
@123xylem what @Zerazera said. I tried multiple routes and the gcm was the easiest
@disofu234 yes
@disofu234 Hello ! yes I did, but many people hardcode them with arrays
guys I have a little question about jquery that I havent been able to solve myself
and so forth :P
@disofu234 There are a few you don't have to pay for. Try forismatic, or advice slip. I think there's a Chuck Norris one too.
While on the subject, has anyone tried to use CodePen Pro to host a JSON object on their pens?
function smallestCommons(arr) {
var num=0;
var i;
var j;
while ( arr[0]!== arr[1]){//While Args1 doesnt equal args2
for( i=arr[0];;i++){ i+=i;//increment args1 by itself and add it to args1 value
for( j=arr[1];;j++){ j+=j; //ditto
num=i;} //This should be where the while loop has stopped so num == i where i = j
}break; // Not sure why i have this.. trying to break loop
}
return num;
}
smallestCommons([2,7]);
I dont get what its missing tho
It says while i!=j increment i and j by itself (multiples) until they are equal...
Yes. @jdtdesigns Right now I'm trying to figure out what the JSON were teaching by reading up the MDN refs, but I wanted to try to write my own JSON files and post them in CodePen's asset serv.
I have a dynamically added element with a button to exit that element
the thing is that to target that element i need to look up for the closest element and then search down
then thing is when i want to access
the thing is that to target that element i need to look up for the closest element and then search down
$("body").on("click", ".theDivToClose button", call back);then thing is when i want to access
this it just don't select the element so I cant do this $(this).parent() or $(this).closest("div") mby im doing something wrong?
@123xylem Take a look at Euclid's algorithm. https://en.wikipedia.org/wiki/Greatest_common_divisor It can be programmed very succintly if you use recursion.
@Benmhz firebase.google.com is way better for cloud database storage
@Zerazera recursion lol. don't overload the poor guy :P
@Zerazera Man im sure theres a better way but I really Want to know Why this wont work as it looks to me like it works... I dont see whats missing even though its just simple for loops
while someting not true.. make multiples
when both multiples are equal
return the value
@jdtdesigns It can be a bit overwhelming, but I actually think the recursive solution to this is easier to understand than the iterative solution
Cool, thanks @jdtdesigns, I'll save this for later. I'm just trying to handcode this stuff so I can get my feet wet and brain wrapped around what's happening between the page and the JSON obj.
benmhz sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@trip16661 add the element and then use a callback after you add it to set up the listener
@123xylem Your code is incrementing both at the same time. Frankly it's not that great an approach. Let's take 2 and 3, for example. You would be comparing 2 and 3, and 4 and 6, and 6 and 9, etc. when the lcd is 6
@Benmhz I actually did that awhile back, which is why i knew what you were doing lol
but I see what ur saying
if i gets to 15 before j will it skip to the next number
15 being the lowest shared multiple
@123xylem Which is why you should just use the GCD method
$('#parent').append(
'<div id="main">' +
'<h1>Title</h1>' +
'<button id="exit">Exit</button>' +
'</div>');
$('#exit').on('click', exit);
function exit() {
$('#main').hide();
}
@trip16661
because it's a dinamically added element you need to do a search up first
make sure you set the listener up after you append the element
so when you try to access it it will just wont read it because its not initialized
when the page loaded
$(".dashboard").on("click", ".city-wraper button", (e) => {
var id = $(this).attr("class");
console.log(id);
});
@trip16661 you have to think in order of what you are doing
you can't set listeners on elements that aren't there yet
you have to set up the order by which things happen when you add code to the DOM
I have a function that create divs with class city-wrapper and inside of that it has a city and a button
the js wont know the dom element is there
it's about order
const displayWeather = (weather) => {
let div = document.createElement('div')
const thisId = weather.weatherdata.location.name;
const country = weather.weatherdata.location.country;
let thisDiv = `#${thisId}`
console.log(weather.weatherdata);
weather = weather.weatherdata.forecast.time;
$(div).addClass("city-wraper")
.attr("id", thisId)
.appendTo(".dashboard");
$(thisDiv).append(
$("<div/>").addClass("city"),
$("<button/>")
.text("X")
);
$(thisDiv + " .city").append(
$("<div/>").addClass("weather-icon")
.html('<img src="http://megaicons.net/static/img/icons_sizes/8/178/256/weather-sun-icon.png">'),
$("<div/>").addClass("city-name days")
.html(`<h2>${thisId}, ${country}</h2>
<h1>${Math.floor(weather[0].temperature["@day"])}</h1>`)
)
for (let i = 1, leng = weather.length; i < leng; i++) {
$(thisDiv + " .city").append(
$("<div/>").addClass("days")
.html(`<h3>${weekDay(weather[i]["@day"])}</h3>` +
`<h2>${Math.floor(weather[i].temperature["@day"])}</h2>`)
);
}
}
@trip16661 after the for loop, add the function that sets the listener
pretty standard order of operations ;)
let me check xD
yes
$(".close").on("click", (e) => {
var id = $(this).attr("class");
$(this).closest("div").hide();
console.log(id);
});
Can anyone tell me how to style the contents of a Bootstrap menu after it drops down?
Not a dropdown menu per se, but the mobile toggle menu contents
I've got my navbar links positioned to the right side, but when in a viewport size that changes them to a button, they drop down on the left side of the page
hey guys im trying to style a buttons color. ive done this a million times so i must be overlooking someting small
why is this
#red{
color:#f44336;
}not styling this
<div class='col-xs-6'>
<button id='red' class='btn'></button>
</div>
@tadake at a guess that wil only effect any text you write within the button tags
else
#red{
background-color:#f44336 !important;
}
ahhhhhhhhhhhh ok ! i totally forgot about that ! thanks @mutantspore @trip16661
tadake sends brownie points to @mutantspore and @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @trip16661 |http://www.freecodecamp.com/trip16661
:star2: 1727 | @mutantspore |http://www.freecodecamp.com/mutantspore
it threw 10 errors even with es6 turned on
@jdtdesigns y i tried to do this as well
$(".close").on("click", (e) => {
var id = $(this);
console.log($(this).parent(".city-wraper").attr("class"));
$(this).hide();
console.log(id.attr("class"));
});
and both return undefined
@jdtdesigns well its because the code is more than what i sent xD
oh yeah
i missed two
i want to put a responsive embed ender Bloopers, but it doesnt show, please someone?
@jdtdesigns I trully have no idea of whats going on because the button itself works and worked outside of the function but in both cases
$(this) is not working or returning the element itself
so i cant do $(this).closest(".parent")
or $(this).parent(".parent")
in fact not even $(this).hide()
which means that what im getting in this is not exactly the item itself
in fact not even $(this).hide()
which means that what im getting in this is not exactly the item itself
I wish i knew how the object that i return with log($(this)) work like so i could know what the f im getting on $(this)
this doesnt make any sense at all
it works removing the arrow function ahaha
I have no idea of whats going on xD
@Atalaa the bloopers works, you click bloopers the video appears looks good, btw if you move the code to the sides, you can see how the page looks on different screens
yeah because i fix it, i made a mistake i put directlythe youtube link instead of embed link hahah
@tuliodnw thnak u
@tuliodnw thank u
atalaa sends brownie points to @tuliodnw :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @tuliodnw |http://www.freecodecamp.com/tuliodnw
basic process of how i would do it
Can anyone explain why the bottom of my page is acting up? I'm missing a logo on the top because I didn't hotlink the image, I was coding natively on atom.io
@jdtdesigns what am i looking here?, i didnt post any project
@tuliodnw sorry, wrong person lol
Hello everyone. I'm having a bit of trouble with Bootstrap. The issue is with getting my content to not overlap or "push" each other. I understand the grid system can help me, but after watching several youtube videos I don't understand how to position with bootstrap.
can anyone tell me how to add a online,offline,NA filter? i can create the buttons but im not sure about the logic. http://codepen.io/pawan92/pen/ezpjgM
@jdtdesigns y i just found out that was the arrow function that was screwing and changing the value of this therefore it was never the element but something else (which im not sure what it is)
hey anyone have any suggestions on how I can get the project images to center ont he page ? http://codepen.io/BZanZ/full/OXyyMN/
Hello everyone. I'm having a bit of trouble with Bootstrap. The issue is with getting my content to not overlap or "push" each other. I understand the grid system can help me, but after watching several youtube videos I don't understand how to position with bootstrap.
@dismister Position with bootstrap is pretty much done using the grid system http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
@jdtdesigns it was giving back an object, it wasn't because the event handler was outside of the function that creates dinamically add divs but
@Zerazera This is exactly the detailed tutorial I was looking for thank you!
dismister sends brownie points to @zerazera :sparkles: :thumbsup: :sparkles:
it was all because the arrow function, i will try to post that on stack to see why would that be
and if there is a ES6 walk around
@jdtdesigns really thanks btw without you suggesting about ES5 i wouldnt have tried xD
trip16661 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@trip16661
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
welcome ;)
arrow functions scope differently
@trip16661 Arrow notation is really best used for short, simple functions. Think of it as syntactically similar to a lambda.
@Zerazera you mean is a bad practice to use it on bigger functions?
@pawan92 in line 15, of the js change the append for prepend, and you will have online first
hey anyone have any suggestions on how I can get the project images to center ont he page ? Id prefer to have them centered with the project class I created instead of adjusting margins and padding on each one individually
http://codepen.io/BZanZ/full/OXyyMN/
http://codepen.io/BZanZ/full/OXyyMN/
@trip16661 In general, yes. Arrow notation, like lambdas, is meant for small, anonymous functions.
@pawan92 you added a class the online ones, also add a class to the offline, the you make a button that all it does is, $(".offline").hide(); $(".online").show();
@Zerazera in that case it would be perfectly fine to use it on an event handler
@tuliodnw thanks! that puts the NA first, online, then all the offline
pawan92 sends brownie points to @tuliodnw :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @tuliodnw |http://www.freecodecamp.com/tuliodnw
@tuliodnw yea i just changed it haha. so if i wanted to add buttons and filter how can i do that
@pawan92 btw on big screen the wallpaper doesnt cover all, and in small screens the margins are too big and the box looks odd
@pawan92 like this
$("#online").click(function online() {
$(".hueco").show();
$(".sacalo").hide();
});
for you hueco would be online, you must make an offline one, also give it to the na,
and #online is the id of the button
@pawan92 i used this in the css where the wallpaper is, should fix it
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
using Bootstrap how do I keep a title within a row from being overlapped by a col of content ?
just finished my portfolio ! if anyone would care to check it out I would love some feedback, there is kind of a bug with the nav bar to where it does not float on top of other elements :S
also I used boiler text for the about and i dont have any projects or photos yet so imagine there are beautiful projects pictured :P
How do I keep my buttons from running into each other and overlapping?
Any tips of making my skills section more appealing? Right now I feel like the headings aren't exactly centered right compared to the Icons. https://codepen.io/sanchit13/pen/yJYKbP
@sanchit13 i would make it much smaller, its not really a focual point, just something saying hey, i know these
I see, do you have any advice on getting the text's midpoint to be the same midpoint as that of the icons? it looks like the text is slightly offcenter compareed to the icons @bscyrpt
say the div is height:30px; set your line-height:30px; and text will center in div vertically, then set the icons position:relative; then nudge up/down with top:+/-px
@Rouque to make your buttons not overlap you need to not have them as float elements.
How do I get my port class to go down? i'm trying to reposition with bootstrap
@Rouque instead of col-sm-1 as the class make a new class and put in
.cssclass{
display:inline-block;
margin-left:somenumber;
}should make the elements flow inline and you can space them apart with the margin-left.
like 30px
So @bscyrpt How do I get my little box moved down away from the header?
you need to add margin-top:000px; to the container they are in
and the Text block
I have a mysterious few <br> tags showing up before my header (when I inspect the output in Firefox I see them) but they aren't in the CodePen code. Any idea where they are coming from and how to get rid of them?
Is there a way to get say a .col-md-4 css block to display it's content differently than .col-sm-12 if an element has both classes applied to it? Like I want the same content to be positioned differently when it's on a wide screen and on a phone
@kirbyedy Yeah where I say "My name Is Nic" the box around that is touching the green header. How do I separate them
@sanchit13 Depending on what the inner content is, you can either nest columns inside to position, or use absolute/relative positioning with percents
@Rouque where your div row is, and a class named 'about' for example, and than add margin-top to that about class
Okay
could be anything... I just made that up
margin-top
Also worth mentioning the menu doesn't work on mobile. For some reason I can't click the button to expand and show all of the menu's content if it's collapsed.
btw in the codepen setting add jquery and bootstrap with quick add but in the javascript section
If I change the page size it mashes everything together.
jquery and bootstrap
I'm having trouble moving my description to be even with my picture can someone help please? http://codepen.io/dismister/pen/xVBOKa
col.xs.12
first time I see it...
@kirbyedy omg that's where I messed up no wonder it wasn't working
its suppose to be - not .
lol
thank you @kirbyedy
dismister sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1090 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@dismister also in the codepen setting add jquery and bootstrap in that order
in the javascript section
hmm I fixed the code but my text is still not in line with my picture
@dismister check out the vertical-align css property
@jarenescueta731 Thank you
dismister sends brownie points to @jarenescueta731 :sparkles: :thumbsup: :sparkles:
not sure how good are you with flexbox, that is the easiest way
also if you have time it would be good to learn it
dismister sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: dismister already gave kirbyedy points
Guys I want to append the numbers in the screen in pure JS
need help
function append()
so i've been stuck for almost a week on the wikipedia viewer project, my attempts to debug using .html() are inconclusive. i can't tell if my program is getting the value from the input field at all, i'm pretty sure the .getJSON() parameter is correct. the problem is that i don't know what happens when i click my Search button because nothing happens, except clearing the input field. http://codepen.io/jarenescueta/pen/VjLvgm
@Whiplash5057 i haven't reached that project yet, but have you looked at the .append() method of jQuery?
@jarenescueta731 I'm actually trying to do this project using js only...hehe...!! Want to learn
hence no jQuery
well it's a library of js, but i see what you mean i guess
@Whiplash5057 or a set of js libraries rather
@jarenescueta731 its because the search btn is submiting the <form>. try to prevent this default behavior
jarenescueta731 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @sorinr |http://www.freecodecamp.com/sorinr
Would anyone mind checking out my Simon game and giving constructive criticism? https://codepen.io/fourbits/full/rLxYPr/
I've set it to let you win if you get to 10 so it can be tested faster.
@Fourbits that's awesome! i haven't reached this project yet, what's the strict button for?
@jarenescueta731 If it's not in strict mode, when you press the wrong button, it will repeat the pattern and let you try again.
If it's in strict mode, you will lose and have to restart the game again.
@Whiplash5057 first thing i would do is make the text black, so you can see it. I was trying all sorts of things untill i realised it was white text on a white box lol
@jarenescueta731 gotcha. also, just aesthetic, not important, but it would be cool if the on/off switch moves when you toggle it. that's what i expected it to do at first
@jarenescueta731 It moves for me in Chrome. What browser are you using?
I guess I should check for cross-browser compatibility.
OK, I'll see what's wrong. It seems it doesn't move in Edge, either.
@ivanvillacreative
This message was deleted
thanks @ivanvillacreative
whiplash5057 sends brownie points to @ivanvillacreative :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ivanvillacreative
Guys check it out ...!!! I'm done!!
@Fourbits
facing problem related to asynchronous nature of api calls
i believe we have to make two api calls
@chethanbhat You need to be able to keep track of which user's information you're querying in your callback function. one way to do that is to put the callback inside a closure:
(function(target) {
return function(data) {
// data == JSON data
// target == the user you are querying
}
})(target)
The data variable is provided by the system, but you need to define the target variable yourself.
the code here will only run if checkWin() returns something, right?
if (checkWin()) {
checkWin();
gameOver = true;
}
if (checkWin()) {
checkWin();
gameOver = true;
}
whoops:
if (checkWin()) {
checkWin();
gameOver = true;
}
@ctataru True or anything not falsy so any non-zero number, non-empty string, non-empty object, etc
@ctataru Not sure you need to call checkWin() twice.
@ctataru @Fourbits hi guys
can you guys suggest me a best infinte scroll plugin
for large amount of data in case
can you guys suggest me a best infinte scroll plugin
for large amount of data in case
@ctataru @Fourbits hi guys
i was cheking on http://jscroll.com/,https://github.com/cubiq/iscroll and clusterize.js
any suggestion
i was cheking on http://jscroll.com/,https://github.com/cubiq/iscroll and clusterize.js
any suggestion
@sjames1958gm well right now the function just returns a
http://codepen.io/wise/pen/dXbqMK?editors=0010
confirm(). would that count?http://codepen.io/wise/pen/dXbqMK?editors=0010
@ctataru So yes
ctataru sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 1507 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@sjames1958gm i just don't understand why i get a draw message after my win message, then. if there is a win or loss on the last block (and every block is filled) then it gives me both messages. shouldn't my if/else on line 201 only give me the win message? possibly even twice, seeing as i call it in the function and the code block inside it
Any idea on how i can vertically align the text in the middle column?
https://codepen.io/Steps/pen/Vjemer
https://codepen.io/Steps/pen/Vjemer
@kirbyedy hahah... awesome, alright ill try it out. Do i have to do anything special? Like should i follow the instructione here? http://v4-alpha.getbootstrap.com/getting-started/flexbox/
I would suggest searching for the flexbox youtube video tutorial, which explains how it works
it will make things more clear
st3ps sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1094 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@ankur1163
can someone tell me
how do i align image
in center
http://screencast.com/t/kaTUcsyWV
.outerbox{
background-color:#EEEEEE;
height:1000px;
border-style: none;
margin:80px;
}
.image{
width:100px;
}
.name{
text-align:center;
color:black;
font-family:arial;
font-size:50px;
}
.edu{
font-size:20px;
}
.blue-text{
color:red;
}
</style>html code
<html lang="en">
<link rel="stylesheet" href="awesome.css">
<div class= "container-fluid">
<div class = "row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="outerbox">
<div class="name">
Kiran Bedi
<div class="edu">
She is the first woman to join the Indian Police Service
</div>
<div class="image">
<img src="kiran bedi.jpg" alt="" />
</div>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</html>
then why this image is so big
I'm working on the Random Quote Generator, and trying to add the click to Tweet button. I can't figure out where in the function to pass data.QuoteText and data.QuoteAuthor. Can anyone help me identify that?
var tweet = function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
@gerarddawson your code is confusing to me, but here is an easy way to do what you want
@kirbyedy yes, i am having trouble making sense of the Twitter API, so it's confusing to me, too unortunately
@kirbyedy thank you for sharing. this is a much simpler solution.
gerarddawson sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1095 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
just wanted to put that out there
@jarenescueta731 also I've found putting a console.log(somevalue); in your jquery is invaluably useful in debugging on codepen, there's a console button on the bottom pane- helps keep track of var changes or api data output etc
Hello Everyone,
Please review my quote machine and suggest ways to improve on my work.
https://codepen.io/Zubenna/full/EyPvyz/
Thanks.
hi guys. could anyone explain why
http://codepen.io/wise/pen/dXbqMK?editors=1100
margin: 100px auto isn't aligning the box vertically too?http://codepen.io/wise/pen/dXbqMK?editors=1100
Urgently need help for angularJS. Is my custom service correct?
myApp.service('myLocation',['$resource',function('$resource'){
this.getLocation = function(city){
var location = $resource("http://ipinfo.io",
{ callback: "JSON_CALLBACK" },
{ get: { method: "JSONP" }});
return location.get({city: city })
}
}]);
@ctataru I don't know, maybe because of flexbox. I did try to edit your pen and came with a solution. Wrap everything in a div and give it { display: flex; justify-content: center;}
@jdpunk1 @jarenescueta731 - console.log is very valuable for debugging, and if the CodePen console doesn't show it (it only handles a limited amount of output - I think that they tell you when it cannot handle it) pop up the browser developer tools and the console tab is where you'll find it. You can also use the console to do javascript testing. Firebug (a firefox add-on) has a neat feature in the console to "pretty print" - fix the indentations in your javascript that you enter. That's handy at times. Happy coding!
ctataru sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1293 | @khaduch |http://www.freecodecamp.com/khaduch
@ctataru Hey, You used my solution so why don't you thank me?
karolinakluz sends brownie points to @ctataru :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @ctataru |http://www.freecodecamp.com/ctataru
@karolinaKluz i thanked the wrong person.. thanks
ctataru sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Hey everybody! For the calculator can anyone help me figure out how to get the clear button to be on the same line as the results box? http://codepen.io/Twood/pen/NrPQgJ
'''var api = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID=95cb066d694049e32c48e0101817e622&callback=JSON_CALLBACK";
$(document).ready(function() {
$.getJSON(api, getTemp);
});
var getTemp = function(data) {
$("#temp").text(data.main.temp);
};'''
Can anyone help me with getting my weather API set up. Just trying to load the temperature at the moment and this code isn't working
var api = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID=95cb066d694049e32c48e0101817e622&callback=JSON_CALLBACK";
$(document).ready(function() {
$.getJSON(api, getTemp);
});
var getTemp = function(data) {
$("#temp").text(data.main.temp);
};
anyone here using vvv to develop wordpress sites? im a little bit confused about my setup
@JamesRiall I changes your url to this and it seemed to work for me
var api = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID=95cb066d694049e32c48e0101817e622&callback=";
I just deleted the
JSON_CALLBACK at the end of it
@Belax8 @jdtdesigns thanks very much both, been banging my head against a wall trying to figure out even the basics of using APIs but i think it's starting to make sense
jamesriall sends brownie points to @belax8 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @belax8 |http://www.freecodecamp.com/belax8
:cookie: 460 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Think building the rest of it now should be relatively straightforwards.
Think I'm finally done with my Random Quote Generator. Thanks everyone for help:
can you recommend a good tutorial/article about API basics?
I want to start coding the Weather App but I have trouble figuring out where to start
and how to proceed ;D
@hea-hea I had exactly the same problem. I found this helpful: https://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/
hea-hea sends brownie points to @jamesriall :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @jamesriall |http://www.freecodecamp.com/jamesriall
@hea-hea and also videos from this guy, playlist here: https://www.youtube.com/watch?v=rJaXOFfwGVw&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r&index=1
its actually not that complicated, it's just that there don't seem to be many good guides on setting up the API call. Once you have the JSON data loaded, it's a simple case of working with the object data
now I have something to watch over the weekend :D thx again
hea-hea sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @belax8 |http://www.freecodecamp.com/belax8
Isn't it better to learn Javascript itself instead of jQuery only?
hi guys, do you know how to set it didnt spacing after enter in brackets editor?
"JQuery is used by 96.1% of all the websites whose JavaScript library we know. This is 70.3% of all websites." So jQuery is still super important https://w3techs.com/technologies/details/js-jquery/all/all
@Belax8 Guess im talking to all experienced developers here as a student front-end dev
@Belax8 But if you are really good in Javascript you dont need jQuery I guess, and not using it saves space on the website
@Yannickhj Yes, but jQuery also simplifies a lot of things. You can write less code to get things done. Also, if you are using a framework like Bootstrap, you need jQuery on your site anyways, so you might as well take advantage of it if it is there. But every project is different.
@GregatGit @jdtdesigns here is my pen https://codepen.io/mcorby17/pen/xOwBzB?editors=0011 Should I use http://api.openweathermap.org/data/2.5/weather? as the API url then? there's no /json in the call
@Belax8 Hmm yea true, guess it depends on the framework and project etc. Also just saw jQuery 3 is released today and they say its faster etc. https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
Hey y'all. I'm currently working on my wiki viewer. Can anyone help me figure out how to move the div containing the text 'made by tonye' to the next line. I want to position it underneath the search/submit area. Here is a link to my project http://codepen.io/tiyalla/pen/XKXegj/
I made my API call to open weather map, and then I printed the stringified results to a div I have on my page, but nothing shows up. Did I make the api call correctly?
https://codepen.io/CameronBurkholder/pen/mEegGq
https://codepen.io/CameronBurkholder/pen/mEegGq
@Cameron-Burkholder i think you might need the "http://" before your api call
@tiyalla if you're using bootstrap you could place the elements in rows?
no wiki entry for:
on this please scroll spy is not working whats wrong httpcodepeniotbuglcpenzbvzrm
@mcorby17 It still didn't work. At least its good to know someone is suffering through the same thing.
True. If one of us figures this thing out, he needs to help the other one. @mcorby17
@tbuglc you need to change your
<body> tag to this <body data-spy="scroll" data-target=".navbar"> and then you need to add jquery and bootstrap.js to your pen
tbuglc sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @belax8 |http://www.freecodecamp.com/belax8
tiyalla sends brownie points to @jdpunk1 :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @jdpunk1 |http://www.freecodecamp.com/jdpunk1
Hello. I'm working on my personal portfolio webpage, and I have no clue on what to do in regards to navigating a single page using jquery. Specifically, I have no clue as to how I click on a nav button and move on the screen.
@KevinRiv I think w3schools.com might have something about that under jQuery
I'd look myself but i'm a bit busy at the moment
I'll take a look, thanks for the info. Just feeling overwhelmed by jquery and javascript, so I'm looking for any bit of info I can. Thanks again!
@KevinRiv there is a way to do it without jquery or javascript. Here is an example http://codepen.io/Belax8/pen/NrxBNG
var lat = 0;
var long = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
$("#location").html("latitude: " + lat + "<br>longitude: " + long);
});
}
console.log(lat);
console.log(long);
Any idea why lat and long still end up being 0?
@Belax8 Thank you for the reply! Is that just the normal HTML a usage (by just naming the div the same as the a link, it jumps to it?
kevinriv sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @belax8 |http://www.freecodecamp.com/belax8
@pae4557 Because the getCurrentPosition is asynchronous and your console.log's happen before the callback from getCurrentPosition
@KevinRiv Yep I think it only works with IDs. I don't think it works with classes, but I'm not sure. It's a super basic way to do it, but it works if you don't want to get super fancy.
@Belax8 I definitely don't! Trying to teach myself Javascript to go on top of my HTML/CSS and I was getting overwhelmed by JS and jQuery so I'll try that. Thanks again!
kevinriv sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:warning: kevinriv already gave belax8 points
@Belax8 I still can't get it to work correctly. At this point, I'm assuming my HTML is all screwy somewhere so it's not gonna work in my current set-up. But thanks for the info.
kevinriv sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
@KevinRiv If you share the link, I'll take a look at it and see if I can get it to work.
@Belax8 I'm thinking I've screwed something up in my fight to try and use Bootstrap when I don't really know it as well.
@KevinRiv I think it looks good except that you forgot to link to your About paragraph
@KevinRiv It'll work. You need to add
z-index: 100; to your CSS in your .nav this will make sure your nav stays on top of the page.
and like @KoniKodes said you need to add a div with the id of
about
@Belax8 Thanks for the z-index: 100 to stay on top. I didn't know that.
konikodes sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @belax8 |http://www.freecodecamp.com/belax8
@Belax8 @KoniKodes Thanks for the info. I added the z-index and the id to my about, but the nav buttons still aren't working. I think I'm gonna take a break and look at it with fresh eyes.
kevinriv sends brownie points to @belax8 and @konikodes :sparkles: :thumbsup: :sparkles:
:warning: kevinriv already gave belax8 points
:cookie: 286 | @konikodes |http://www.freecodecamp.com/konikodes
@KevinRiv Sorry. Let me look again.. I know you can do this.
Hey guys, so just yesterday my quote machine project was working fine, but today none of the quotes are showing. Do any of you know why?
@disofu234 What is your codepen?
@KoniKodes Still nothing. I can only assume it's my wonky HTML/Bootstrap creation that something isn't where it's supposed to be?
it just worked when i clicked on it lol
Does anyone know how to make the weather icons show up as icons and not text?
I'm trying to make a button with an <i> </i> tag, as in icon.. how can I do that without making the text italicised?
@aidansven <button class="btn-primary"><i class="fa fa-facebook"><a href="#">Facebook</a></i> That's what I have for a Facebook button. My text isn't italicised.
<i>
@disofu234 I've been reading that we now need to link to secure servers. https - that is a recent development.
ah ok.. I'm trying to use i instead of <button> because I currently have button and there's an annoying outline that stays after it is clicked
apparently that's a chrome/ff accessibility feature to outline buttons from what I read
and even when I try outline:nonel it doesn't go away
disofu234 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @konikodes |http://www.freecodecamp.com/konikodes
@KevinRiv It seems to be working for me. I think the problem is that each div is really short, so it's hard to see the change. If you added more content I think it would be more noticeable
@KoniKodes thanks for your help too!!
belax8 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @konikodes |http://www.freecodecamp.com/konikodes
@Belax8 Hmm, strange. I had kinda thought that might be an issue, but I can't even make it scroll from the about(top) to the contact portion. I might throw in some test <br> and see if I can notice then.
I agree with @Belax8 . I can now go to about from the contact and portfolio.
@Belax8 Thank you. I have learned alot by watching your responses to the other campers.
konikodes sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:warning: konikodes already gave belax8 points
@KoniKodes Thanks for the help. I'm still not seeing anything move on my end, but I might have to keep playing with it.
kevinriv sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: kevinriv already gave konikodes points
I am having a problem. Whenever I copy and navigator code provided by FreeCodeCamp and place it in Codepen.io it does nothing. Is anyone else having this issue?
@RoniqueRicketts Do you have https:// in the codepen url in your browser?
That was my problem
@KoniKodes @Belax8 I just tried it on a different browser and it worked! Apparently I need to clear my Firefox cache and see if it works as well. Thanks so much!
kevinriv sends brownie points to @konikodes and @belax8 :sparkles: :thumbsup: :sparkles:
:warning: kevinriv already gave belax8 points
roniquericketts sends brownie points to @mcorby17 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @mcorby17 |http://www.freecodecamp.com/mcorby17
@KoniKodes Thanks, you too. I'm sure I'll be back in the chat for a multitude of other reasons as I continue attempting to learn javascript/jquery.
kevinriv sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: kevinriv already gave konikodes points
I want it to look similar to the one at w3 schools: http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
nobody?
@Belax8 :-)
people twi questions, one how can i make the this divs to overlap to make the simon game, 2 how can i remove the center of the 1/4 circles so i can put the start/counter in the game
miciah123 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1115 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
I need help with my portfolio, when click any of the navbar I want make sure it moves to right <div>
@miciah123 if you want to put them to the right just add
navbar-right
@mtkilic first, add bootstrap and fonts inside your codepen settings. Then make your targets id instead of class.
@mtkilic your links need to look the this
<a href="#home">Home</a> and you need to add a div with the ID of home and that link will send you there
@miciah123 I know, it's those pesky little details that get me.
@KoniKodes @miciah123 dont worry when you are working in real developement you have IDE and other tools to help you avoid most obvious mistake
@wearenotgroot :-) Yes, until then thank goodness for the kindness of campers
konikodes sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1116 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
mtkilic sends brownie points to @konikodes and @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @konikodes |http://www.freecodecamp.com/konikodes
:cookie: 404 | @belax8 |http://www.freecodecamp.com/belax8
Hey guys, I have a problem with the weather app. My getJSON isn't responding. I have access codepen like https because otherwise I can't access my localitation, but I think that's the reason why getJSON isn't respondind, because the weather app query is http. How can I solve this?
@isaacgg I have the same problem. https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
I think we can choose the country of the person by ip information
and how are you getting coordinates? navigator.geolocation?
@isaacgg Your console shows the lon/lat. http://forum.freecodecamp.com/t/openweathermap-api-has-some-issues-over-https/5028 addresses this. I use wunderground and it seems to work.
you can't use https with openweathermap if you have free account
they only give you non-secure i.e. http
and you can't mix a non-secure protocol (openweatherapp) inside a secure connection (https on codepen)
if wunderground gives you free https access you can do it that way, or get your coordinates a different way
some people have used
http://ip-api.com/json to get coordinates, for example
@isaacgg Yes, I think you should change the api in this case.
this would prevent the need to use https at all and you can still use openweathermap
katgeek sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1120 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
isaacgg sends brownie points to @coymeetsworld and @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @konikodes |http://www.freecodecamp.com/konikodes
:star2: 1121 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Hi I am buliding my first web app using javascript and fetching data using API from www.openweathermap.org/ I have used the API key as mentioned in the documentation still it is giving an error of unauthorization. Can there be any other reason for this error while calling a function or so . Thank you in advance.
var APPID = "21d131e2d9af8ec17907e9ef18a79fd2";
var temp;
var loc;
var icon;
var wind;
var humidity;
var direction;
function updateByZip(zip){
var url = "http://api.openweathermap.org/data/2.5/weather?" +
"zip = " + zip +
"&APPID =" + APPID ;
sendRequest(url);
}
@ngoyal100894 you should look at using the getJSON function instead of sendRequest
Yeah but I was following a youtube a tutorial where he did the same
https://www.youtube.com/watch?v=TGFozfL0D9o&list=PL7C8fMD-89DLXOLuwjofJJ9smB_LmVGeu&index=2
Then what could be the possible reason that i am getting it wrong
https://www.youtube.com/watch?v=TGFozfL0D9o&list=PL7C8fMD-89DLXOLuwjofJJ9smB_LmVGeu&index=2
Then what could be the possible reason that i am getting it wrong
sendRequest makes a more generic GET request but getJSON will do alot of things for you to simplify the process
dont know why that person did it that way
so you would have to review that video again to see what they did, but getJSON will be much simpler to do
Yeah I will explore this one ..So we can get error while sending request right?
error:401
how's it looking to you guys?
any design tweaks you would make?
whoops forgot my unselectable class in my codepen version
function sendRequest(url){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readystatechange == 4 && xmlhttp.status == 200){
var data = JSON.parse(xmlhttp.responseText) ;
weather = {};
weather.wind = data.wind.speed;
weather.direction = data.wind.deg;
weather.loc = data.name;
weather.temp = data.main.temp;
weather.icon = data.weather[0].id;
weather.humidity=data.main.humidity;
update(weather);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
@coymeetsworld
I am not familiar with using XMLHttpRequest, so I can't really help out any further
@ngoyal100894
i will suggest again, use getJSON
much simpler code that way, and you already have exposure to it in previous challenges
not to mention professional companies are migrating away from xml pretty quickly
well
i guess the data format is still json right
but xml requests work different across browsers which is why jquerys getJSON is so good
because it is consistent
I remember like 10 years ago XML was all the rage and everyone was saying that XML would take over the world, everything was going to be an XML document, etc.
lol
not so much the point though, that API returns data with JSON
so why not use a function that will expect and process it for you? Much less code needs to be written and the code you have to write will be much cleaner
If I remember correctly there are like 3 versions of XMLHttpRequest you have to call to account for browser differences... or you could use jQuery, which abstracts all that away
thanx everyone ..
though i will warn you not to use the .filter method of arrays show you to use (a pretty bad oversight) since your api isnt likely to return an array
yes getJSON is a jQuery function, also much cleaner to write than an .ajax call
Anyone can suggest me a reference study link or something for getting data with getJSON
@ngoyal100894 docs----------->http://api.jquery.com/jquery.getjson/ as for getting data that will depend on the api
ngoyal100894 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1119 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Hello there!
I’m currently working on my portfolio page and I’m trying to add a dropdown nav button to it. I’ve messed around with the code for a little while, but I can’t seem to get why the dropdown menu won’t actually pop up. I can get the list of buttons to appear on their own, and the dropdown button itself, but it does nothing when I click it. I was wondering if anyone knew how I could get it to work?
<nav>
<div class="container-fluid" id="myNav">
<ul class="nav nav-pills pull-right">
<!-- Dropdown Button -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-list fa-2x" aria-hidden="true"></i>
</a>
<!-- Buttons Inside -->
<ul class="dropdown-menu">
<li><a href="#aboutTitle">Who Am I?</a></li>
<li><a href="#">What Do I Know?</a></li>
<li><a href="#">What Have I Done?</a></li>
<li><a href="#">How To Reach Me</a></li>
</ul>
</li>
</ul>
</div>
</nav>
@SyntaxErrorless I’m sure you have bootstrap.css loaded but it needs 2 other files added. jQuery.js and bootstrap.js (in that order) in the JS settings in codePen. so you need 3 files
@SyntaxErrorless what @mutantspore said. It's probably that you don't have all the files and yes, jquery then bootstrap in the JS menu
I had all of those added except Bootstrap.min.js on the JS menu. Derr. Thanks, @mutantspore and @dhcodes !
syntaxerrorless sends brownie points to @mutantspore and @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1728 | @mutantspore |http://www.freecodecamp.com/mutantspore
:cookie: 987 | @dhcodes |http://www.freecodecamp.com/dhcodes
hooray
Yup! Now the button is too far to the right, so the buttons inside move away from the screen, but I know how to fix that. Again, thanks!
like if I don't want my links to be by default blue but something like orange ?
people im starting the simon challenge, first time using audio, do i put the sound when color is clicked or div is active?
tips welcome
and what if i dont want it underlined when i mouseover it?
Can someone help me with a margin issue. I didn't set any right or left margins on my header or following images. What is causing this http://codepen.io/jreinke10/pen/ZOQMwd
@meetmangukiya -------->http://www.w3schools.com/css/css_link.asp
@jreinke10 Add bootstrap
thats cool man!
thanks @wearenotgroot
meetmangukiya sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1121 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
How do we make width of a row in bootstrap grid equal?
for example:
<div class="row">
<h1 class="col-md-4"></h1>
<nav class="col-md-8">
<a href=# class="col-md-4">{Placeholder}</a>
<a href=# class="col-md-4">{Placeholder}</a>
<a href=# class="col-md-4">{Placeholder}</a>
</nav>
</div>
@jreinke10 Try making your image width:100% and height: auto
now what happens is that the height of
h1 and the height of nav are different, how do we fix it?
@meetmangukiya Can you give your pens link?
@vinay-jaju actually I think I made a mistake in the example that actually solved my problem
I didn't use a div to wrap heading and nav together
I just used
class="row" inside the header tag which I wrapped around the h1 and nav
@jdpunk1 @khaduch thanks! i can't believe i haven't spotted the console tab this whole time
jarenescueta731 sends brownie points to @jdpunk1 and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @jdpunk1 |http://www.freecodecamp.com/jdpunk1
:star2: 1294 | @khaduch |http://www.freecodecamp.com/khaduch
Here the link text of the nav bar isn't in center vertically, so I decided to use padding
I used
a{
padding: 10% 0 10% 0;
}
But it turns out that it take 10 % of the page and not 10 % of the nav's height
How do I make it 10 % of nav's height?
Can anyone answer a quick question about the Twitchtv project?
someone will pick it up
@meetmangukiya maybe 10vh as your unit?
instead of 10%
I need some help again. Really hating codepen right now!!!
OK, let me know if this is phrased poorly, it's a tad confusing. Most of the channels that aren't streaming will have 'null' listed as their game, but some that aren't streaming have 'Creative' or 'Programming' listed as their game. Does 'Creative' or 'Programming' being listed as the game indicate that the channel isn't streaming?
@RoniqueRicketts codepen is a bit frustrating to use sometimes
I have gotten my location based on the previous code that FCC gave us, I have added a few Jquery and now I am totally stuck nothing is happening
```
@gphalen i remember having to do two json calls to two different api locations to get all the info i needed
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&appid=2e79b0a46ce5ad9212eed4ea9f4cd8d6';
$.getJSON(api, function(json) {
$('#data').html('Lat:' + lat +'<br>Lon:'+ lon);
alert(json.coord.long);
});
});
}
});
@gphalen to determine if a channel is streaming you need to use /stream
punchymango sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 990 | @dhcodes |http://www.freecodecamp.com/dhcodes
@dhcodes yeah, I have to do one to the streams and one the the channel one.
This is my code. given that #data is a a div <h3> tag
@dhcodes not really. because the output of 10vh is nowhere close to 10% of nav's height
@gphalen if you want info on the channel then use /channel (will not tell you if the stream is online or offline) otherwise all the info on that channel will be there
@meetmangukiya have you tried
vertical-align: middle;
vertical-align: middle;
Let me try to explain better. The following gives me correct information at present:
$.getJSON('https://api.twitch.tv/kraken/channels/'+members[i], function(data2) {
if (data2.game==null || data2.game=='Creative' || data2.game=='Programming'){ body2.append(data2.display_name.link(data2.url)+ "is not currently streaming" + "<br>");
}
else
body2.append(data2.display_name.link(data2.url)+ "is currently streaming" + data2.game + "<br>");
}
)}
@RoniqueRicketts you won't be able to get html5 location via chrome
well, you can get the location but not pass it to the api
because the api is unsecured
I'm just wondering if there are instances where channels with "creative" or "programming" as their game are sometimes streaming, because then I have to find something else.
and chrome now only allows html5 location to be passed over https channels @RoniqueRicketts
@gphalen what's an example of a user with that?
ok so how will I pass my location to my api so that I can get my current weather?
@gphalen what listed in the game doesnt tell you if they are online
@meetmangukiya well boo
@dhcodes the "streams" channel says they're not streaming, the channel says they have a game("Creative")
roniquericketts sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 991 | @dhcodes |http://www.freecodecamp.com/dhcodes
@gphalen so why not use the streams channel to determine if they are online or not?
@dhcodes ok so I have to use that ip-api and based on the location the api gives i'd pass that to myweather api?
i'll go look at your codepen
one sec
@dhocdes the streams channel will print the ones that are streaming, but won't print the ones that aren't streaming for some reason.
thanks much man I have been stuck on this challenge for 3 week. omg. I even went to learn about xml and apis and even took another Jquery curse OH MY FREAKING GOSH!!!
@gphalen only /streams will tell you if they are streaming
then you need to test the stream
then you need to test the stream
$.getJSON('https://api.twitch.tv/kraken/streams/'+members[i], function(data) {
if(data.stream !== null)
{
}
Got so frustrated I thought I wasn't actually learning anything. But now it all makes sense. AUUUGH!!!!. I could so punch google chrome right now if I could. :D
@RoniqueRicketts they should really put a note on the project page
maybe i'll submit an issue for you
and then it can be my first commit :shipit:
@wearenotgroot the following code will print the ones that are streaming, but not the ones that aren't streaming.
@dhcodes can I get tagged to that Issue? I wanna follow it. I am the only one that reach this far in FCC in my city so I would like to give this info to those that are behind so that don't have to go through the problem I went through.
if (data.stream!==null) {
body.append("<br>" + data.stream.channel.display_name.link("https://www.twitch.tv/"+ data.stream.channel.display_name)+"is currently streaming" + data.stream.game + "on Twitchtv." +"<br>");
}
else
body.append("<br>" + data.stream.channel.display_name.link("https://www.twitch.tv/"+ data.stream.channel.display_name)+"is not currently streaming");
}
@RoniqueRicketts https://github.com/FreeCodeCamp/FreeCodeCamp/issues
i'm in the middle of portfolio task
@RoniqueRicketts i know they know about it, but maybe your issue could say that for the time being they should at least update the instructions
if I click about Us, how can it scroll down to that specific div?
@gphalen if the stream is null then you cant access
data.stream.channel
@Narendro you pretty much give your section About Us and id="about"
and then your href on your button would be #about
and it should jump it there
narendro sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
@gphalen what you can do is do a /channel first then store the data some how then do a /stream to determine if they are online
@gphalen update the status
@wearenotgroot OK, I've been doing /stream first, maybe that will work, thanks
gphalen sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1124 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@gphalen another thing you might want to create a more generalized functions. look for things that do the same things multiple times
people im really stuck in the simon project, i dont know where to start the jquery, if someone can lend me a hand i will appreciate http://codepen.io/tuliodnw/pen/ZOQjRr?editors=0010
@meetmangukiya so i looked at how bootstrap does it. They set a height for the navbar and then add px padding to top and bottom. I did it and it works
so for ex.
nav {
dang
one sec
Thanks for articulating that @wearenotgroot , finally got this one figured out
punchymango sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
#nav {
height: 50px;
}
#nav nav a {
padding-top: 15px;
padding-bottom: 15px;
}
@tuliodnw do you mean you need help thinking about how to generate the functionality?
Hi all, I’m looking to add a delay and a fade in animation to the function that populates the results in my wikipedia viewer project. Can I add something to .foreach to achieve this?
what's the best way to .fadeIn() my main content box? I put fadeIn at the end of my function, but right now the box still fades in before the text loads from the api
@qckpckt you mean you want them all to fade in at once or individually at diff. rates?
is there a way to make sure that text loads before it fades in?
@Narendro you might get better feedback in the codereview room, but I like it. It's hard to read the text on some divs though because of the bright backgrounds in the pictures