anyone know any web teach AI in javascript, plz share with me
how do i center my text from top to bottom in a <p></p> in a responsive div?
check this out Ethan
stackoverflow.com/questions/2743989/how-to-vertically-center-divs
@Ethanlchandler
stackoverflow.com/questions/2743989/how-to-vertically-center-divs
@Ethanlchandler
@StayGoldDylan bootstrap is very useful... :+1: Introduction to Bootstrap, Features of BootStrap Framework for Responsive Design
Hi all. I have a general question. Would it be worth the effort learning AngularJS 1 as opposed to AngularJS 2? I started with 2 and find going through tutorials for ver.1 really confusing.
@wrblack i think it would depend on you goal for learning angular. specifically, what do you want to do with the knowledge?
@ndburrus ultimately it's just to get basic experience of SPAs.
@wrblack what is SPAs? service package applications? oh, ok... if your interest is developing them, and there are no restrictions, then i would go with whichever you want (probably the newer version). if you goal is to understand existing apps, and they need to stay in a certain version - then i would inform the decision accordingly... if you want to convert previous version apps to a/the current version - then maybe both are needed...
wrblack sends brownie points to @mbarmawi :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @mbarmawi |http://www.freecodecamp.com/mbarmawi
hi guys, tic tac toe
if i pick X play win, pick O, it go wrong,
http://codepen.io/buiphuking/pen/JKoEZG
help me guys
if i pick X play win, pick O, it go wrong,
http://codepen.io/buiphuking/pen/JKoEZG
help me guys
@wrblack angularjs 2 is the new version have all of good things ,code written by typescript and from now all the tutorial you will found will be on angularjs 2 with typescript so keep this in mind so my advice to to keep going with the new version as always
@mbarmawi thanks! I really prefer angularjs 2. Learning typescript has been a blast and I find documentation is a little better.
wrblack sends brownie points to @mbarmawi :sparkles: :thumbsup: :sparkles:
:warning: wrblack already gave mbarmawi points
Hey all. I'm working on https://www.freecodecamp.com/challenges/stand-in-line and I cannot for the life of me figure out what the third of the four criteria is asking for. This is overall a very confusing challenge, since it's so vaguely worded and unclear as to what it's asking for. Can anyone help?
@BeingDS you add item to the back of the array and remove an item from the front
the item that gets removed from the arr is returned
Hi every body,
after finishing responsive design whith bootstrap, I am working on Build a Personal Portfolio Webpage, but the problem it needs more Knowledge than what I learned in Previous lessens, can every body explain me ?
after finishing responsive design whith bootstrap, I am working on Build a Personal Portfolio Webpage, but the problem it needs more Knowledge than what I learned in Previous lessens, can every body explain me ?
@BeingDS Sometimes the way a challenge is written can be quite bewildering and other times so simple - but once you get your head around what they are asking you'll be fine
@FouadRachedi the portfolio is very challenging and developes one of the keys skills you need - figuring things out that are out of your depth. It is very challenging but while you are working on it you can continue with the other challenges - here is a good template to get it started http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp - I highly recomend going through all of w3schools bootstrap materials and put what you can in your portfolio
anyone ever code AI???????? i need some advice guys ???????????
Does anybody finished coding the portfolio? i need some help
@GregatGit I want to add a picture of my project, how should I get it?
@Anakin771 where can you get pictures or where can you store pictures?
@GregatGit i usually find on google but i don't have a picture storage from what i know...
@Anakin771 check out dropbox - amazon - MS - google - and all the others to see if you can get some free cloud storeage http://www.makeuseof.com/tag/dropbox-free-unblockable-image-storage-blog/
How do you make an element in a div that uses flex inline?
On CodePen the link tag doesn't seem to work. I am working on my tribute page.
@jonaguiar You need to add target="_blank" to the link
@jdtdesigns I want my fontawesome element to act as a toggle for an accordion element. I figured it out though. Thanks
danstockham sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 505 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
I made the weather app a few weeks ago and it was working fine, but now for some reason it's not doing anything. Has anyone had any problems with the open weather API at all?
only way to work with openweather is to use an ip locator for chrome and navigator for other browsers
Hi guys. For the Inventory Update bonfire, how do you sort the items alphabetically?
@jdtdesigns it will sort the front of the array, the numbers. I'm looking for the way to sort the back of the array
*sort using the front of the array
Hi JD, so I was looking more into this and I thought I could just put an "S" to make the API call "HTTPS" thinking it would solve the issue, but alas, it did not.
So do you have any tips? Thanks again!
@tbc13315 like i said, you can't use https with openweather unless you pay for premium
so you will need to use an ip locator api for chrome
you can't mix the two together (https for codepen, http for openweather) or it will throw an error
@leanhduy1998 haven't worked with the advanced algorithms in awhile. let me look it over for a minute
Ohhhhh ok. I'll check that out! I'm still a noob, so I guess I just have to do more research on https and http to understand it better. Thanks again!
anakin771 sends brownie points to @gregatgit and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1344 | @khaduch |http://www.freecodecamp.com/khaduch
@jdtdesigns so I saw this code on the internet, and it seems to work, but I don't understand how.
function Comparator(a, b) {
if (a[1] < b[1]) return -1;
if (a[1] > b[1]) return 1;
return 0;
}
if (a[1] < b[1]) return -1;
if (a[1] > b[1]) return 1;
return 0;
}
myArray = myArray.sort(Comparator);
@leanhduy1998 it looks like they are just using an array...
@leanhduy1998 there are 3 conditions that determine the output... the -1,0, and 1 are the possible output values...
leanhduy1998 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @ndburrus |http://www.freecodecamp.com/ndburrus
leanhduy1998 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 506 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
hey guys i made my first webpage ever for the 'build a tribute page' challenge and im feeling accomplished, anyone want to take a look?
can i give you some advice?
Good evening, Campers. I'm trying to limit a scrolling action so that it doesn't scroll over the menu at the top of the page. Can someone point me in the right direction, please? (Is this a z-index issue?)
Thanks in advance. Here's my CodePen: http://codepen.io/andreas2249/pen/rLMOPw/
Very nice, @JKilk. I especially like the choice of / colors coordination. :)
@andreas2249 i dont undertand what you want... can you be more explicit ? its not your bad hah im not good at english
@buiphuking i don't know what you mean by actived... function always are waiting for you to call them :P
Thank you for your prompt reply @lcassettai. I want to keep the menu at top of the page visible at all times. Right now, when someone scrolls my page or clicks a link, the content covers up the menu.
andreas2249 sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @lcassettai |http://www.freecodecamp.com/lcassettai
Are you wondering if your code is "seeing" the function?
@lcassettai
http://codepen.io/buiphuking/pen/JKoEZG?editors=0011
if($(this).html() == ''){
$(this).append(player);
checkWin(player);
if($('#myModal3').is(':visible'))
{
return;
}
if($('#' + computerMove).html() == ''){
$('#' + computerMove).append(computer);
}else{
return false;
}
//if(checkWin(computer)) return false;
}else{
return false;
}i pick X, if i win, O stop picking
Yes, @lcassettai. I'm looking for some kind of "margin" or something so that all of the content can never get higher than the bottom of the logo and menu (plus some extra margin). Thanks. :)
andreas2249 sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave lcassettai points
@andreas2249 np! add navbar-default o navbar-inverted if you want what i send in the pic
<nav class="navbar navbar-fixed-top navbar-default">
@buiphuking i take a look !
@lcassettai, that's brilliant! Thank you for your time and consideration. Best wishes. :) :+1:
andreas2249 sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave lcassettai points
I have a set of divs with multiple links in them. I would like to make it so the entire div is clickable and triggers the first link. I tried
$('.collection-item').click(function() {
window.location = $(this).find('a').first().attr('href');
return false;
});It works, but the other links within the div are no longer clickable. Any suggestions?
@leanhduy1998 the 1, 0, or -1 was probably referring to the sort function correct?
although, I don't know why they would use 0
@buiphuking in your html you have a buttom that call function called first() , but in your js you don't have the function first
<button id="X" onclick="first()" type="button" data-toggle="modal" data-target="#myModal2" data-dismiss="modal" class="btn btn-info">X</button>
<button id="O" onclick="first()" type="button" data-toggle="modal" data-target="#myModal2" data-dismiss="modal" class="btn btn-info">O</button>
@adzam5 can you send your pen?
@jdtdesigns I tried it, but it still didn't work
@leanhduy1998 you can use a nested .map() to iterate through the arrays and compare the values
arr2.map(function(comparison) {
arr1.map(function(output) {
if ( comparison[1] == output[1] ) console.log(comparison[1]);
});
});
try that
then work with it to figure out a solution ;)
@lcassettai The project is mainly written in PHP. Give me a minute to copy what I am talking about into a pen
@lcassettai, one thing I noticed about your solution is that
navbar-default adds the white color to the background. I'd like use your solution -- but not have it add the background color. Any suggestions to override that effect? Thanks in advance. :)
andreas2249 sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave lcassettai points
difference between return and return false ?????????????????
@jdtdesigns oh, I think you misunderstood my question. I got everything works out great, but this bonfire requires everything in alphabetic order.
@leanhduy1998 .sort() will compare each value in an array to the next, starting from the first one.
so you can run it on the arr1 to compare each word to the next word
@lcassettai, actually, no color. I'd like it so that the text is floating there on top of the image as it's shown in this example. In other words, have the text scroll up -- but not cover what's there now.
arr1.sort(function(a, b) {
// if the string in a is greater than the string in b, return true, else return false
});
// if the string in a is greater than the string in b, return true, else return false
});
@leanhduy1998
little pseudo code
@lcassettai, I did try to overwrite some of the
navbar-default class with this -- but it didn't work:.navbar-default {
background-color:teal;
}
@jdtdesigns I tried using sort, but it returns sth like this: [a,b,c,d,a]. It sorts out everything next to each other, but if there's an "a" at the end, it doesn't do so.
@leanhduy1998
@lcassettai Yes! Only each div will have more than 1 link. I want clicking on the div to be able to trigger the first link in the div. I was just putting together a pen.
@leanhduy1998 change the end to this return arr1.sort(Comparator);
and you're good i think :P
Haha, didn't know there was a
transparent type of method... Tried it. Not quite working: http://codepen.io/andreas2249/pen/rLMOPw/
Can you think of a more "generic," non-Bootstrap way of writing some CSS that will protect that area from having text scroll over the logo and menu?
@jdtdesigns you see, the result order have sth like this: ... hair pin, microphone, half-eaten apple ... . It's not in order, even though the rest of them are in order.
@leanhduy1998 I see the problem. The compare function isn't written right.
(I'm not looking for someone to write the code for me... But I don't know how to ask the question the right way that will lead me to learn about a solution. :) )
// Needs to be this
function Comparator(a, b) {
if (a[1] > b[1]) return true;
return false;
}
@leanhduy1998
@leanhduy1998 You're returning an array inside the last two arrays
something is off in your code above
[ [ 88, 'Bowling Ball' ],
[ 2, 'Dirty Sock' ],
[ 3, 'Hair Pin' ],
[ 5, 'Microphone' ],
[ [ 3, 'Half-Eaten Apple' ] ], // double nested
[ [ 7, 'Toothpaste' ] ] ] // double nested
fixing that would fix the problem
leanhduy1998 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 508 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@andreas2249 but if you don't use a background your menu will be always above the content of the page but it will mix with the text (pic)
can anyone give me a few ideas about my twitch TV feed project?
Here's my pen. The trouble I'm having is that it's a double .get call depending on whether the person is streaming or not. And when I return al lthe data I can't get the output to line up nicely. I want the logo, then the name then the stream condition to be all in one row.
this has been bending my mind for months. I'm so frustrated I can't figure it out but this is the best i've done so far.
if you're willing to change your code ;)
@lcassettai, yes, agree. And that's what I'm trying to solve. So I think your idea of using a transparent background might be the right idea. But when I added it to the CSS section, as follows, the background become transparent (most of it did) -- but now the text covers that area again.
This is what I added:
.navbar-default {
background-color: transparent;
}Does adding this mess up up the rest of the navbar-default class?
can i post my tribute page here? i'm not sure how to fix the video issue
@jdtdesigns I'm certainly willing to change...I'd prefer to be given a hint so i can learn.
@andreas2249 try with this and play with the properties, int the background the (0.3) its the opacity you can make 1 to 100% o 0 to 0%
.navbar{
z-index:999 !important;
top:0px;
left:0px;
position:fixed;
background:rgba(256,265,256,0.3);
border-bottom:1px solid;
box-shadow: -2px 7px 19px -3px rgba(0,0,0,0.75);
}
but if you mean writing it in angular or react I'd like to figure it out in straight HTML first, then rewrite in another view.
@andreas2249 and @jdtdesigns say he have a solution maybe he undertand more what you need
@jdtdesigns I'm headed to bed, but if you can help with a hint or three, please share or PM. I appreciate any tips. thank you
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@lcassettai, wow! That is a GORGEOUS effect! Thanks for that. I'm keeping that. The only thing I'd like to solve is that when text scrolls up, that it will appear not to go any higher than the bottom of the shadow of that navigation bar at the top of the screen.
They way it is now (very much improved :) ), the main content still shows thru the logo and nav menu when scrolling. Thanks!
andreas2249 sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave lcassettai points
rhawkthrone sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @lcassettai |http://www.freecodecamp.com/lcassettai
@jdtdesigns thanks, but my data doesn't seem to get returned like that. When I try to output the logo outside of the inner get request I get a 404 error and a broken image link
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: adventurebear already gave jdtdesigns points
I'm on my mobile phone now so can't go in and reproduce for you
Is the logo available in the first json request? It is such a confusing feed to me for some reason
@AdventureBear The main purpose of my code was to show you how to put the elements in a 'row' and align them correctly
it sounds like you're setting some stuff before the data is received
@andreas2249 lcassettai-navbar haha awww love that ! i fork your project and add a cool style with js you can see here http://codepen.io/lucho_casse/pen/YWGwdP
@AdventureBear Here's my twitch app. I commented where i get the logo url from. https://codepen.io/jdtadlock/pen/MyoyLW?editors=0010
Oh, definitely, @lcassettai. I give credit where credit is due. I appreciate all of your effort very much. :)
I like this new change the way that pops up. Very nice. Here's what is still happening:
@lcassettai, I guess you could say that I'm looking for any scrolling to go "behind" the menu. I think your z-index idea helped steer this in the right direction...
@andreas2249 if you're menu bar is fixed, just give it a high z-index
@jdtdesigns got it, thank you. I'll take a look at your code!
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: adventurebear already gave jdtdesigns points
@andreas2249 yep but that will always happen if you don't make the background color solid, in this case i use opacity you can take of opacity and play with the colors but if you don't put a background solid you will have that problem. Your menu is above but visualy will mix with the text behind!
Thank you @jdtdesigns. @lcassettai came up with this which gave it a
z-index of 999:.lcassettai-navbar{
z-index:999; !important;
top:0px;
left:0px;
position:fixed;
background:rgba(256,265,256,0.3);
border-bottom:1px solid;
box-shadow: -2px 7px 19px -3px rgba(0,0,0,0.75);
}andreas2249 sends brownie points to @jdtdesigns and @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @lcassettai |http://www.freecodecamp.com/lcassettai
:cookie: 510 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@lcassettai and @jdtdesigns, it's quite possible that I'm asking for something that can't be done -- and only because I don't know better yet... :)
@andreas2249 You have a semi-colon after 999 which shouldn't be there ;)
@andreas2249 Can you post your pen again? I'll check it out.
@jdtdesigns, here's the one with @lcassetai's first brilliant suggestion:
@andreas2249 or maybe i don't understand very well your issue hah
@jdtdesigns, and there's this one that opens up a cool "trap door" effect when scrolling text is getting closer:
@lcassettai, don't say that, please. Your suggestions are just brilliant!
@jdtdesigns I think my issue has been the. /streams. Vs the /channel urls. I thought the were dependent on each other but not really. Just 2 different ones. Very elegant code.
jdtdesigns sends brownie points to @adventurebear :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @adventurebear |http://www.freecodecamp.com/adventurebear
@andreas2249 hah
@jdtdesigns, when text scrolls up, I'd like to go "behind" or "underneath" the logo and nav items to prevent this effect: example of content showing in menu bar...
(That's a funny pic, @lcassettai. I appreciate your patience with me.)
@andreas2249 I would just give the navbar a solid background at the point where you fade it in.
Sounds good to me, @jdtdesigns. I'm still a newbie at this. How do I sense that or detect that in code? Would that become part of the javascript @lcassettai added there in this pen? http://codepen.io/lucho_casse/pen/YWGwdP?editors=1010
I just moved the HTML into the inner channel request and it seems to work now. Not saved as I'm on my phone but at least I can sleep. Night all. Thanks again this is a fantastic resource
.lcassettai-navbar{
transition:1s;
z-index:999; // Don't need important
top:0px;
left:0px;
position:fixed;
background: #fff; // Don't need important
border-bottom:1px solid rgba(0,0,0,03);
box-shadow: -2px 5px 19px -3px rgba(0,0,0,0.75);
}
@andreas2249
@jdtdesigns and @lcassettai, thank you again for your considerable time and patience with my issue. I really appreciate it. :)
andreas2249 sends brownie points to @jdtdesigns and @lcassettai :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave lcassettai points
:warning: andreas2249 already gave jdtdesigns points
@andreas2249 no problem! =D I expect to see the final result!
Good night people! im going to sleep here is 2:35 am haha have a great morning
Hi there. I'm using https://erikflowers.github.io/weather-icons/ on my weather app. I can't get the yahoo mappings to work on codepen. What I need is to get an icon of the form
http://codepen.io/ronaldrodguez/pen/MeyGVq
<i class="wi wi-yahoo-##> to display. Here's the link with the app so far. Any help much appreciated.http://codepen.io/ronaldrodguez/pen/MeyGVq
I think I have my simone js down - if anyone can see any problems that would be cool - I have alot of work to do on the html/css - the array down the bottom is for test and you win in12 moves http://codepen.io/gregoverhere/pen/WxxZxy
I tried adding underline animations on my heading link which I would later use as an anchor link but it doesn't work.
http://codepen.io/anugrah/pen/bewEwp
http://codepen.io/anugrah/pen/bewEwp
Dang , I suck at coding. Still trying to figure out how im gonna get lat / long to feed to my weather API.
Keep looking it over.
just fyi searching codepen gives many examples of weather apps.
i definitely will thanks .
Guys how should i make the Build a Personal Portfolio like the example if i never learned this? span never learned, javascript too
You don't need JavaScript. and I just googled and learnt as I go along.
I think that's the whole point of the exercise.
@IulianCrudu It's a very hard challenge. Just start doing what you can. You can keep doing the the Free code Camp ciriculumn and challenges as well. If you cant build a great portfolio, build a simple one and make it better as you go along.
But will i learn what i need for a great portfolio in the future on fcc?
*learn
@IulianCrudu you'll have to learn how to find resources across the net - here is a good one for this challenge http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
no one place will have it all
Can you help me with my bottom function. It takes a value from till and takes that off change needed.. I commented it up.. Its crashing my browser at the minute though... I think I need somethin with---- chgArr.push(i)--- But possibly some other changes aswell..
function checkCashRegister(price, cash, cid) {
var val;
var cost=arguments[0];
var money=arguments[1];
var till= arguments[2];
var count=0;
var arr=[];
var change= money-cost;
if(change<0){
change=Math.abs(change);}//this makes change positive if its negative value
else change=change;
for(i=0; i<till.length;i++){
count+=till[i][1];}
if(change>count){
return "Insufficient Funds";
// Make a count that totals till values. If change is more than till then say so
} else{
var chgCount=0;
var chgArr=[];
for(i=till.length-1;i<till.length;i--){ //go through till from highest to lowest
while(change>chgCount){//while change is more than 0
chgCount+=till[i][1]; //add number to change from till
chgArr.push(till[i]);//put that in an array
change-=till[i][1];//Take that number off change.
}return chgArr;
}
}
}
checkCashRegister(2000.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);the last else is the problem
@GregatGit maybe i can use that link to make my portfolio but i won't understand what am i doing
IS this an infi loop ?
for(i=till.length-1;i<till.length;i--)
I am starting the TwitchTV challenge. I can present data, but if i click on the link, I just get part of the twitch page. If I right click and select open in new tab, the page works. Any obvious errors here?
http://codepen.io/tony_tosp/full/yJaeWj/
By the way, the FCC example page does the same thing
http://codepen.io/tony_tosp/full/yJaeWj/
By the way, the FCC example page does the same thing
How long is till? If till is finite, then results should be finite.
Can anyone send me this solved challenge code....Target a Specific Child of an Element Using jQuery
@endencia thankyou
microcyberz sends brownie points to @endencia :sparkles: :thumbsup: :sparkles:
:cookie: 10 | @endencia |http://www.freecodecamp.com/endencia
is anyone able to please help me with a <UL> problem for my tribute page ?
please *
Hi Everybody, I’m having difficulties with the Pomodoro Project.
Problem 1: My variable „sessionLength“ is initially set to 25 (line 4) and then should be changed by the functions „minSession“ (line 42) and „plusSession“ (line 54) and then affect the variable „time“ in line 65. But somehow it stays at the initial value of 25.
Problem 2: Also, if I pause the countdown and then restart it again it gets faster each time I do that.
Where is my mistake?
Here is my code: http://codepen.io/Holic101/pen/mEPazO
I need help badly .. please review my code.. This is about local weather app, the api call is returning back 404 error but when i paste the api url in the address bar, it is giving me json result. please tell me where am going wrong
function loadDoc(url, cfunc){
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadychanged=function(){
if(xhttp.status==200 && xhttp.reasyState==4){
cfunc(xhttp);
}
};
xhttp.open("GET",url,true);
xhttp.send();
}
function location(xhttp){
document.getElementById("out").innerHTML=xhttp.responseText;
}
loadDoc('ip-api.com/json', location);
Just finishing up my "Random Quote Generator" trying to get the twitter button to work. I was using the developer documents as a guide. But, obviously, I'm not doing it correctly. It seems like you don't need to add more javascript since it plugs into the html.
Here is the code:
http://codepen.io/flindip/pen/mEEjXa
@Holic101 You need your clearInterval(clock). Why did you comment it? Otherwise, when you press the clock again, a new interval is initiated, thus you'll have time-- twice every second....
im trying to poll an API with jquery with .getJSON(API, function data) . And in there I want to assign the data to a global variable
but I cant and I dont know why
@manu-4216 thank you, I changed that and now this problem is solved, but I found another bug: when I reduce the sessionTime counter down to the lowest possible number (5 at the moment) and then try to add time again, this time is added as a string. So I get 0555:00 for example. Could you help me with that too?
holic101 sends brownie points to @manu-4216 :sparkles: :thumbsup: :sparkles:
@Holic101 For the other problem (the timer starting always at 25), you should set time = sessionLength * 60; right after updating the value (plus or minus)
@manu-4216 right, because I’m making it a string with the added „0“. thank you!!
holic101 sends brownie points to @manu-4216 :sparkles: :thumbsup: :sparkles:
:warning: holic101 already gave manu-4216 points
@Holic101 Yeah, you should in fact call that 'checkTime' only when you're setting the html, like so: .innerHTML = checkTime(...)
@manu-4216 I solved it with: sessionLength = parseInt(checkTime(sessionLength)); But I like your solution better
Yeah. checkTime is more like a formatTime function, that you should call only when displaying.
@Martialis39 Give us a link to your code
@Martialis39 Declare the variable outside the getJSON call - then change its value in the getJSON call
Is anyone familiar to implement a twitter button for the Random Quote Generator?
Hi everyone!
Can someone tell why this isn't working with width less than 700px? (max-width)
It aplies just the css that is for 700px at least. (min-width)
I'm using Chrome for testing.
```<link rel="stylesheet" type="text/css" media="(max-width: 700px)" href="styles-400.css">
<link rel="stylesheet" media="(min-width: 700px)" href="styles-700.css">```
Alright, I am working on the "Random Quote Generator." I think I found a method to make it work that is pretty simple using widgets and web intent: Still trying to make it work.
Here are the methods I'm using:
https://dev.twitter.com/web/tweet-button/web-intent
https://dev.twitter.com/web/tweet-button/javascript-create
Here is my code:
http://codepen.io/flindip/pen/mEEjXa
given the example of the widget I'm not sure if I need to anchor the twitter button.
I have some problems in understanding the challenge Build a Personal Portfoflio Webpage but I don't understand the rule #2 and I see other personal portfolio webpage that are using languages that are not explayned in what I learn until now.
@stblack rule 2 is just to fulfill the user stories it lists below
you don't have to make it anything fancy to start out with. What I did was make a simple portfolio page that fulfilled the user stories and looked decent, and then came back once I had learned more and made it look better.
@stblack hi. i am also at this point right now, am ending this challenge. I thing other users might have been either "advanced" with more knowledge or they came back later and change it, after they have learned something new
@TDandelion exactly. My original page didn't look much different than my tribute page but now it's got all kinds of neat things added.
@buckshot307 nice. I am thinking right now either to go on on the next challenge or "pimp" my portfolio page. All user stories are completed, it is quite decent outcome, but I am disovering so many new things, i would like to test them all... But I guess i will not come quite far if i keep doing changes, right?
@TDandelion Yeah I would go on! By the time you complete the course you will have learned so much more and may even completely redo your portfolio. I have the one I did originally, but it never quite looked the way I wanted so I've restarted and made a more simple looking one. It will be more complex though because I know more CSS and jquery now.
tdandelion sends brownie points to @buckshot307 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @buckshot307 |http://www.freecodecamp.com/buckshot307
guys i need some help plzz... how can i make my cards display in a 2x2 layout? http://codepen.io/Ferdyboy81/pen/PzzqGE?editors=1100
stblack sends brownie points to @buckshot307 and @tdandelion :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for tdandelion
:cookie: 326 | @buckshot307 |http://www.freecodecamp.com/buckshot307
Can someone help me implement the twitter button with the "Random quote Machine"?
@flindip
href="https://twitter.com/intent/tweet?text=Hello%20world" is the basic link to compose a tweet. That's a good place to start. Not sure how far along you are.
@hiltydiggs the approach I'm taking is using a widget:
https://dev.twitter.com/web/tweet-button/javascript-create
https://dev.twitter.com/web/tweet-button/web-intent
Here is the code:http://codepen.io/flindip/pen/mEEjXa
I'm just trying to figure out if I need to anchor the button. I'm not sure If its necessary or not
@hiltydiggs Yeah but its not really functioning. Seems like it should be easy to implement. I thought by the instructions
@Ferdyboy81
You can use:
min-height: 200px;
min-width: 150px;
display: inline-block;
But I really encourage you to research on display: block, inline, and inline-block
@flindip, nice page there. Haven't seen Stuart Smalley in years. :)
does anyone use yeoman to generate boilerplates for html, react, angular? yeoman seems like a lifesaver, is it similar to rails generate ?
@hiltydiggs @andreas2249 thanks. Just trying to get that twitter button finished
flindip sends brownie points to @hiltydiggs and @andreas2249 :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
:warning: could not find receiver for andreas2249
@hiltydiggs Hmm, I may go look into a different channel then. Thanks for trying though
flindip sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave hiltydiggs points
@flindip what's the issue?
@jdtdesigns the approach I'm taking is using a widget:
https://dev.twitter.com/web/tweet-button/javascript-create
https://dev.twitter.com/web/tweet-button/web-intent
Here is the code:http://codepen.io/flindip/pen/mEEjXa
https://dev.twitter.com/web/tweet-button/javascript-create
https://dev.twitter.com/web/tweet-button/web-intent
Here is the code:http://codepen.io/flindip/pen/mEEjXa
@flindip why not do what they recommend now and use the twitter intent url?
Hi there, coders. I'm trying to make this "Show the Local Weather" app, but I encountered problems right at the beginning. Basically, what I'm trying to do is use $.getJSON method to retrieve data from this Open Weather API, but it's not working. Plain insertion of API calls found there as getJSON url parameter, even with http:// beforehand, doesn't seem to do the trick. I even tried to insert page address as url and API call as data, to no avail. Anyone has any ideas? Thanks in advance!
@flindip https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text= and just concat the quote on the end you're done
@flindip one more thing, even though it's not working right now, it looks like the tweet text is only set once on page load so when a new quote is called for
twttr.widgets.load() will update the tweet text according to documentation. It would have to called each time a new quote is requested.
@mikser73 possibly
https://?
anyone can tell me why divs with class button in div class math-calculations doesnt work ?
http://codepen.io/uRTLy/pen/gMwwyw
http://codepen.io/uRTLy/pen/gMwwyw
@mikser73 IYou need a key from openweather to use their api
you have to sign up to get the key
also, js goes in the js tab, and the only html that goes in the html tab is the stuff between the <body> tags
@mikser73
@jdtdesigns OMG, thanks! I'll give it a try. As for those tags, it is just a habit I picked up while coding in Dreamweaver - writing everything in one place :)
mikser73 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns I implemented it with an anchor. But I'm trying to get it to display the randomQuote(val)element...
Do I have to write a function for it?
href=https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text="randomQuote(val)"><button type="button" class="btn btn-primary" id="btn2">Tweet</button></a>
@flindip I wrote a few functions for mine to percent encode and trim. Not the best code, but maybe an example to look at: random quote pen.
adiljawad sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
I am working on my TwitchTV app but I am stuck. I need help
$(document).ready(function() {
var channel = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://api.twitch.tv/kraken/streams/';
$.getJSON(api, function() {
for (var i = 0; i < channel.length; i++) {
$.getJSON(api + channel[i],function(data){
//console.log(data.stream);
if (data.stream===null){
console.log(channel[i]+' is currently Offline');
}
else{
console.log(channel[i]+' is Online');
}
});
}
});
});
any suggestions?
@RoniqueRicketts you're calling
$.getJSON twice. As you have it, it should iterate through channel and call $.getJSONfor each.
@hiltydiggs so $.getJSON(url).forEach()
@RoniqueRicketts
$(document).ready(function() {
var channel = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://api.twitch.tv/kraken/streams/';
for (var i = 0; i < channel.length; i++) {
$.getJSON(api + channel[i],function(data){
//console.log(data.stream);
if (data.stream===null){
console.log(channel[i]+' is currently Offline');
}
else{
console.log(channel[i]+' is Online');
}
});
}
});Something like that
@RoniqueRicketts not sure if I removed the correct end brackets.
please help me i am confused when we write within double and single quotes "'something'"
<div ng-include="'about.html'">
@hiltydiggs that didn't work. How does the forEach() works in this scenario?
@hiltydiggs yeah, its a different approach from my page. You went with arrays. I went with Switch. Maybe I can reverse engineer some things. Thanks
flindip sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
@RoniqueRicketts
forEach() is just another way to iterate throught the channel var. channel.forEach(function(){$.getJSON...})
I tried for it but didn't know how the $getJSON() comes into play
using only double quotes
@RoniqueRicketts you have an asynchronous problem. The current step of channel needs to be stored in a variable.
$(document).ready(function() {
var channel = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://api.twitch.tv/kraken/streams/';
for (var i = 0; i < channel.length; i++) {
var current = channel[i];
$.getJSON(api + current,function(data){
if (data.stream===null) {
console.log(current +' is currently Offline');
}
else {
console.log(current ' is Online');
}
});
};
});
@RoniqueRicketts still not quite right. Still working on it.
@hiltydiggs the current code you have only outputs the Last channel's name.
@RoniqueRicketts
$(document).ready(function() {
var channel = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://api.twitch.tv/kraken/streams/';
for (var i = 0; i < channel.length; i++) {
var currentStreamer = channel[i];
var eachURL = 'https://api.twitch.tv/kraken/streams/' + currentStreamer + '?callback=?';
(function(i, eachURL, currentStreamer) {
$.getJSON(eachURL, function(response) {
if (response.status === 422) {
console.log('Error!');
} else if (response.stream !== null) {
console.log(currentStreamer + ' is online');
} else if (response.stream === null) {
console.log(currentStreamer + ' is offline');
}
});
})(i, eachURL, currentStreamer);
}
});
thanks much thats makes sense. So first asign the channels to a variable then concat it onto the api and from there I just search each api for the information that I want?
I have a div which contains multiple links. I would like to make it so clicking anywhere in the div triggers the first link. I have tried
$('.collection-item').click(function() {
window.location = $(this).find('a').first().attr('href');
return false;
});But the other links in the div are no longer clickable. Any suggestions?
@adzam5 not sure but I think you'd have to add the event argument and add
event.stopPropagation(); to all of the other links.
@adzam5 event.stopPropagation
@adzam5
$('.collection-item a').click(function(event){event.stopPropagation();});
@RoniqueRicketts yeah. You can replace each
console.log() with a function that handles each situation and appends it to the page.
adzam5 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
MikeBeers @MikeBeers 10:34
I am looking for help on pushing an onclick element to an array inside an object. If I take the array out of the object I can add to the array no problem. Just wonding if I can get a little help figuring this out.
<div id="green" class="quarter green" onmousedown="display.gDown(this)" onmouseup="display.gUp(this)" onclick="game.player(this)">object
var game = {
player: function(obj) {
var playerArr = [];
alert("obj " + obj.id);
playerArr.push(obj.id);
alert("player " + playerArr);
},MikeBeers @MikeBeers 10:40
here is the PEN
https://codepen.io/MikeBeers/pen/MeejWE?editors=0010
How can I build Build a Personal Portfolio Webpage.? We have not taught all the things included in that yet.
@hiltydiggs i think I found out why. I was setting array back to empty every time I clicked a color
@MikeBeers is the problem that it clears the array each time? Yes exactly.
@matty22 I haven't, but what are you FTP'ing to? What FTP client?
@microcyberz We haven't built all the projects yet that you would display on there, but you just build the layout and design and can use temporary images as placeholders for the projects. As you complete projects you will add them to your portfolio
@hiltydiggs ya I know how to get that part going. I just wanted to get the main function to work so I can complete the project
hi everybody! I have just finished my portfolio page. Can you give me some feedback, please?
Um, what should I put in to link for my randomQuote call in the href text input for my twitter button?
Here is the code:
http://codepen.io/flindip/pen/mEEjXa
It seems every example is using Jquery to do it. A lot are using arrays which I didn't use.
@TDandelion looks good. one thing you may or may not want to do is add target="_blank" to your links to github etc. that way they open up. codepen doesn't allow them to open as is.
@flindip I'd really focus more on html/css before moving to js. Your page is literally unreadable. Just some advice from someone who deals with this issue a lot. ;)
Hello Room :) I am trying to add some links on my codepen portfolio page to other pens and, in the future, other websites I am working on. I am wondering if anyone can offer any guidance as to how I add a link to another pen while displaying the pen as an image in my portfolio, seemingly identical to my profile page on codepen. Anyone want to work with me on this?
@TDandelion can you please help me with my question above? You seem to have accomplished what I want to do
<a href="http://anotherpen.com" target="_blank">
<img src="http://image.link" alt="">
</a>
@DanielMW34
@jdtdesigns understood you said earlier to concave quote in the href where the text is. How do I get the JS call to do that?
@mattboland thanks for your feedback. I will ad this to my links, although If I do the right-mouse click and open in another tab, than it seems to work..
tdandelion sends brownie points to @mattboland :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @mattboland |http://www.freecodecamp.com/mattboland
@jdtdesigns thank you. I will experiment with this. The image link though, where does it come from? Do I have to take a screen shot of the page and then use that as the image?
danielmw34 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@TDandelion cool, yeah, not necessary but it was just one thing i thought of when i looked
@kksrini89 Hi..thanks for trying...But I figured it out myself...appendchild of div works only once.we need to clone the div to append it to other divs.
@hiltydiggs I figured it out...kind of. I just
npm start the project so that webpack runs. Then I open the app in localhost. Then I right click, inspect source, and grabbed the code from the Dev tools. Created new folder with that code, and FTP'd that with Filezilla. Worked, my React app is up on the web, but there must be a better way.
Also how can anyone tell if I used Sass or not? I have to FTP CSS, not Sass, so there isn't any evidence that I even used Sass or is there and I'm just not aware?
@DanielMW34 hmm... I think I don´t understand you exactkly what kind of guidance do you need. But hey, if you say it seems like I have accomplished it, than we just have to identify the issue, i will be glad to help
document.getElementById('get-quote').addEventListener('click', showQuote);
var showQuote = function() {
var quote = data.quote, // Refers to the quote in your quotes list
tweetLink = document.getElementById('tweet'); // Refers to the tweet link
tweetLink.setAttribute('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + quote);
};
@flindip
You will also need to make sure the link has the target="_blank" attribute set
flindip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
<a href="url" target="_blank">Tweet</a>
@jdtdesigns just curious the getElementbyId(get-Quote)do I have to nest that into the button id?
it's just referring to the id you gave your button that will get a new quote
Hey! Could anyone join me on Google Hangouts and help me make my portfolio page mobile-friendly? :blush:
Hey guys i'm working on the wikipedia viewer project and i'm kinda lost in how to use the wiki API... How am I supposed to get a url to a page from something searched? I found a way to get the URL to appear in the API response but I can't use it because the url appears under a page id that changes depending on what I search...
I've been stuck on this for days :(
here's all I have so far http://codepen.io/mcorby17/pen/vKGPmQ?editors=1011
what am i doing wrong??????
I think it must be the API call somehow... I put in a simple http://ip-api.com/json call and was able to print that but can't print https://en.wikipedia.org/w/api.php?action=query&format=json&prop=info&inprop=url&titles=hitler even though it comes up in my browser
boy this is great talking to myself
IS there any way no matter how large be it will be contained in the col-xs-4
hello ? anyone
@mcorby17 Why are you searching for a value with onclick? Shouldn't you be searching for a string?
@KoniKodes what is your codepen?
who ho it looks completly diffrent than in my editor
@KoniKodes it's messed up
@sumitsrbh try setting your background to 100%, with a max-width. The row stretches out to 100% of the body.
Guys, when i make the page bigger for my pen, everything gets messed up
https://codepen.io/AdilJawad/pen/PzGWNd
https://codepen.io/AdilJawad/pen/PzGWNd
@sumitsrbh Also, in the setting you are calling the same bootstrap twice. I may confuse it...
@AdilJawad you can chain your classes : <div class="jumbotron row col-md-2"> Why is your row 2 columns out of 12? You haven't set your jumbotron background color yet.
ok. is there any way to auto adjust it ?
according to col-4 size
@sumitsrbh You only want to cover 1/3 of the page. So maybe make your image 427x320. It's better to have your original reset.
@sumitsrbh or try "img responsive" and see if that works.
@KoniKodes i got it dear better use img-responsive class and cut the hassle. thnx dear for ur time. bcz i hv become comfortably numb
sumitsrbh sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @konikodes |http://www.freecodecamp.com/konikodes
Making progress on my twitch streamer app. Thanks for last night's help @jdtdesigns and a couple thers. Here is the current progress. My issue at the moment is why my bootstrap rows are now wrapping around each column element. As a result I cant get the formatting to look right with backgrounds coded as per the example app.
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Still some other things to do and refactor but it feels great to make progress!
Alright, I'm trying to implement the twitter button for my "Random Quote Generator". One of the campers helped me earlier and with giving me a pathway. I dissected it and put in the corresponding parameters that were for my code. I still can't quite get to work.
can someone take a look at it?
http://codepen.io/flindip/pen/mEEjXa?editors=1010
can someone take a look at it?
http://codepen.io/flindip/pen/mEEjXa?editors=1010
@KoniKodes ha ha. now i gonna change my track to "knocking on heaven's door gun's and roses " . Oh i love it.
I guess I could also try the JS widget approach but I couldn't quite get that to work either
@flindip Aside from the buttons being too dark to read - I thought I was getting a quote, but I tweeted instead - It worked for me, pulling up different quotes. It is a little larger than my viewport but, what is the problem you are having?
@KoniKodes so the twitter button is working for you? Its just giving me a box with #quotes on the twitter page
@KoniKodes Pretty much I'm just doing the tasks and then I'm going to rework the project down the road.
@flindip Oh you are right, it didn't pull the quote in, just showed me my avatar and quote# inside the box. Let me look again.
@KoniKodes just to tell you. I didn't use Jquery. I didn't use arrays. Its a switch function so I'm using straight javascript
@KoniKodes also I put in comments for the JS code to give you what the values are. Val is basically data.quote etc
@KoniKodes thanks for looking btw
flindip sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @konikodes |http://www.freecodecamp.com/konikodes
@flindip That's ok. You will need to open your window on button 2, and go to "https://twitter.com/intent/tweet?text=" +randomQuote + "
@KoniKodes you mean href?
@KoniKodes Mine is called randomQuote. Yours would be "mirror" Make a function when you call button2
I keep hitting me.. @flindip no href inside the function but the page for tweet. Ok then, you need the name of the variable for the quote .
random quote.. struggling with retrieving quotes :smile:
@flindip Good. Then make the btn2 onclick function call to the twitter/intent/tweet with val.
@oxide94Git What is your codepen?
button2 that is
itz quite dirty now :smile:
i want the form element and magnify in center of container
having trouble doing this
@oxide94Git "Request Failed: error, error". You have cross-security issue. Your codepen is at https, but you are calling to http. It should be http.
@oxide94Git You need to add a callback function to your request
oxide94git sends brownie points to @konikodes and @thomlom :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @thomlom |http://www.freecodecamp.com/thomlom
:cookie: 308 | @konikodes |http://www.freecodecamp.com/konikodes
@KoniKodes Still not functioning. Do you want to see the code again?
@flindip yes please @oxide94Git Great! Thank you for the brownies
konikodes sends brownie points to @flindip and @oxide94git :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @flindip |http://www.freecodecamp.com/flindip
:cookie: 280 | @oxide94git |http://www.freecodecamp.com/oxide94git
@max77p You should use the bootstrap's grid system (col-md-5, ...)
I'm doing a project and i wanted to know how can I put placeholder images for my portfolio
?
@thomlom ahh ok...also one more question...whenever i click the magnify glass the "click icon to search" text moves a bit
i like www.placehold.it
@oxide94Git Thank you. A little better each time I learn something new.
konikodes sends brownie points to @oxide94git :sparkles: :thumbsup: :sparkles:
:warning: konikodes already gave oxide94git points
flindip sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave konikodes points
can anyone help?
Any suggestions for my bootstrap question? Row closing doc tag showing up in the wrong place. Link above
@KoniKodes I used .val() to get the user input from the input box
Or should I collect all the data in an abject rather than build the HTML as i go?
just the positioning of the search button and the form ?
or more .. ?
@designviacode hey the search button, form and one thing i noticed when i click the search button the "click icon to search" text moves a bit when the form field shows
i don't want it moving at all, but staying central right below the form field
@designviacode i am not sure if i am using the container/grid right in mine though
@max77p so you wish to do the following :
- align all text in center
- align the search form - center
- the search button and input both should be visible by default
Hello ! I have a little problem with arrays. Can someone help me ? My code and problem explanations are just here: https://jsfiddle.net/stq5hvth/ Thanks a lot !
@designviacode if you can walk me through the positioning that would be wonderful...i think i confused myself with using grid or not to use grid and to use container or not to use container lol
for text alignment
set the css property text-align on body element
set the css property text-align on body element
@designviacode oh right, that works, but i also get the results of the search getting centered...for the results i would like to have it left most
do I have to use ajax?
i tried with getJSON..while possible..was little trickier
@mcorby17 its not bad actually...just play with the .ajax read up on similar problems
for me i found getting the damn search was the easiest part
aligning everything on the page has been stupid frustrating lol
even though positioning is probably the easiest part
@max77p
using a container is just fine ..
but the things you should fix are :
using a container is just fine ..
but the things you should fix are :
- provide either an id or class to the header section (the one with the form and headings and classname=container)
- now set text-align property on that class or id : for.eg : #header {text-align: center;}
this will prevent the search results from any alignment changes
like where it says "wikipedia viewer"?
@designviacode one thing i want to know is when you click the magnify icon the text below moves a bit as the form field comes into view
why is that
in the example pen they provided that doesnt happen
how can i click on a button to navigate to particular segment in that page
@mcorby17 yea i deleted the css for it for now, wasn't working what i was trying to do
@sumitsrbh use ids .. and specify the href property of the anchor tag as the id
for.eg:
<div id="page-1">
Section 1
<a href="#page-2">Goto Section 2</a>
</div>
<div id="page-2">Section 2</div>
@designviacode any idea why the text is moving when the form box comes to view?
I've been trying and trying to get this carousel to work...any ideas why it might not be functioning? http://codepen.io/dennisharger64/pen/MejeMJ/?editors=1000
I need some help with JS; I have to retrieve the photos from a public album on a facebook page, but using facebook's graph API I should expose the access token in the code. Is there a way to do this without using an access token or without the api?
@jlouiss Did you set the key into a separate variable and then call that key in api?
@jlouiss yes, someone else offered a solution once, let me check.
jlouiss sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @konikodes |http://www.freecodecamp.com/konikodes
@jlouiss From another camper re: api key :: Can't be helped on codepen, but you should never put your apikey in public (codepen is public). It's like a password. People write programs that scan the internet for apikeys, so it's not good to have them there. In this case, I guess it's not a big deal, but it's good to start thinking about this. If you want, you could generate a new one, and think about a simple way to encode it (like multiply it by 2 or anything easy), and then you could declare the variable with an encrypted key and your pen could decode it.
@jlouiss with php forms I tend to hide it in the init file, but I don't know if that is possible in js.
@max77p what is the problem?
jlouiss sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: jlouiss already gave konikodes points
for whatever reason, when you click the magnifying glass icon, and the form field appears, the text below "click icon to search" is moving down
i want to keep it steady in one spot..what is causing this? and how do i fix it?
:point_up: June 18, 2016 5:35 PM
Even though nobody was able to help, I'll tell you that the solution was making sure that the jquery and bootstrap libraries were loaded not just on the CSS tab of the pen settings, but also the JS tab http://puu.sh/pxBm1/46a31262b3.png
I need some advice about my portfolio
http://darksmurf.github.io
What project should I remove under "Portfolio"
http://darksmurf.github.io
What project should I remove under "Portfolio"
@max77p I'm trying to understand your logic. It seems to me that you are asking me to click on the magnifying glass to search, and then click on the X (which is usually recognized as Close the box) to submit the request. My search brought up ten on the far left. Perhaps you could have your search box set up with the magnifying glass attached, and the magnifying glass is the submit button?
@Darksmurf I would say wikipedia or weather. They both sort of prove the same thing, that you can use an API
nice site btw
darksmurf sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1060 | @dhcodes |http://www.freecodecamp.com/dhcodes
@Darksmurf Why do you need to remove any of them? Perhaps with a thumbnail you could showcase all of them.
@KoniKodes the search itself works perfectly...i am just wondering why the text below which says "click icon to search" moves a bit when user clicks the magnifying glass
@KoniKodes I did thumbnails at one point, but I didn't like that.
and how do i stop it from moving and stay fixed
@max77p I think it's because the input form is taller than the icon
@max77p What size is each one? The magnifying glass seems smaller than the search box, and so the new search box needs more room. Try making them both the same size (4 em)
@Darksmurf That makes sense.
@dhcodes Good to see you again :-)
@KoniKodes not sure i understand, shouldn't it be smaller than search box?
@KoniKodes trying to understand deeper level to this, why would the icon being smaller cause it to move?
@max77p The space for the smaller box will be over-ridden by the larger div and push the next line down. Keep the containers the same size
@max77p the divs properties apply to anything in it. So the default padding will make the div change if they are different heights
@dennisharger64 Yes, somtimes we forget that we need the js version of bootstrap.
@KoniKodes so breaking this down, sorry little slow right now lol.....my form is at height:2em
so i should make the magnify height 2 em as well?
@max77p Yes, exactly. That way they won't change size when switched.
@KoniKodes so another user in the help section as well, mentioned that if i put a height on the entire form element it keeps the same height regardless of what is added or removed in the jquery
so i just put a 1em height for the entire form class and the text doesnt move
is that understanding correct? because height will change depending on what is added or removed dynamically in jquery?
Can anyone tell me how I would access the 'fullurl' in this wikipedia api call? https://en.wikipedia.org/w/api.php?action=query&prop=info&pageids=18630637&inprop=url
@max77p It didn't move too much, more like recognizing a change is happening. The list is now centered too. You want to keep it responsive, so perhaps a percentage... 1em is not going to be enough for the whole form. You don't need to create a new codepen each time, unless you are tracking your versions - you can simply save it.
@mcorby17 I'm sorry, I'm still trapped on weather
max77p sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @konikodes |http://www.freecodecamp.com/konikodes
max77p sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1061 | @dhcodes |http://www.freecodecamp.com/dhcodes
for the api call?
@mcorby17
where searchQuery is your input from the user
@jdtdesigns but what about the number after 'pages'? Don't I have to include that?
it's different for every query so I don't get how i'm supposed to be able to get the url for different searches
but pages isn't an array is it?
mcorby17 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
now I need to figure out why I can't make the api call with getJSON
I hard-coded getJSON for now
Hi, could anyone help me with re-sizing images with CSS/Bootstrap? I want to match the image size with the text in the adjacent column of the grid. http://codepen.io/tonnamb/pen/bewBEY?editors=1100
@GregatGit @jdtdesigns thank you so much guys!! Could I also ask, why do I need &callback?
mcorby17 sends brownie points to @gregatgit and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: mcorby17 already gave jdtdesigns points
:cookie: 605 | @gregatgit |http://www.freecodecamp.com/gregatgit
@mcorby17 That is the param to tell the api to return jsonp. Codepen doesn't allow json to be returned when the No Access header is on the api resource.
jsonp is a more insecure form of json
@tonnamb before you do anything you have to add jquery.js and bootstrap.js to the javascript in settings
Like if I was coding this using my own text editor or something would I still need to use the callback?
tonnamb sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 606 | @gregatgit |http://www.freecodecamp.com/gregatgit
@mcorby17 It's codepen and a few others. They do it for security reasons. If you were devving locally, you wouldn't need to do it.
@GregatGit Face palms
Myself..
tonnamb sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: tonnamb already gave gregatgit points
Hey guys, is it important to use proper tags when doing stuff? Like headers and footers and what not? Is that good practice or does it not really matter? Like why should I or shouldn't I care about that?
even if we don't need to have something when using codepen, do it anyway
because when you are employed or working on real world projects its important to do all that in order
I thought it also helped with like website readers for blind people?
hey, I'm wondering how Quincy Larson got the line just above his footer on this tribute page: https://codepen.io/FreeCodeCamp/pen/NNvBQW
Good afternoon, Campers. I'm trying to find out how to add some margin to a Bootstrap .well class. My anchor tags for 'Portfolio" and 'About' links have padding so that there's some white space between those sections and the menu at the top of the page.
I'm struggling to add the same amount of padding / white space to the 'Contact' page div which has a Bootstrap .well class. Can someone please have a look at my CodePen and offer a starting point to resolve this? Thanks in advance. :) http://s.codepen.io/andreas2249/debug/PzGNZm#
Wrong link to Pen. Sorry: http://codepen.io/andreas2249/pen/PzGNZm/
@AdilJawad, it might be part of Bootstrap's
.jumbotron class. If you remove line 2 and refresh, that line spans the width of the viewport. How it's done might be "buried" in Bootstrap.
hello everyone i have a question, i have accordion menu in here, but well, it seems like i cant really find myself with styling it, does anyone have any example on nicely styled menu of this kind?
http://imgur.com/89K30pm
http://imgur.com/89K30pm
@andreas2249 I like the design you have started there. Well done.
andreas2249 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
Any idea how to get some space above that
.well@hiltydiggs ? Stumped here.
@andreas2249 between the wells and the "Portfolio" heading?