@mav1283 sooo
#results-container{
display:none !important; /// <<< REMOVE !important
}
#results-container.active{ // <<<< fix TYPO `contianer`
display:block;
}
I'm well on my way to completion of the Use theTwitchtv JSON project. I just need someone to assist me if they can thanks! Here you go:http://codepen.io/codeabode20/pen/vKXxbO?editors=0010
@matthew3454 You have some errors with your closing of blocks
@jdtdesigns just gathering resources prior to beginning, was checking to see if anybody has sites they used to help with layout/transitions/style/general helpful code
@jdtdesigns or help with navigation styles, button styles for social media links
@usyyy I usually go to pinterest/behance/cssawwards for inspiration
The code is knowledge you must obtain
i don't use any resources for frontend code
there are frameworks like react/angular/vue that will give you great control/organization
@jdtdesigns i am just starting out, therefore if i dont know how to say implement a navigation bar, i will need to google it, but i do understand that it needs to be learnt, not copied
@usyyy Yeah, that is stuff you need to learn if you want to do anything in this field. The sad truth is that this stuff takes quite a lot of time to learn despite what the youtube videos and ads will tell you.
And when i say quite a lot of time, i mean years ;)
@jdtdesigns i have just graduated college (university), this is a almost a summer project to see if i have a genuine desire to continue on. If i do, i will apply for a MSc in computer science next year which should help the process
@jdtdesigns graduated with a BSc in mathematics
@usyyy Then you have a great head start on knowing the process of learning. Just be aware that no matter your smarts, it is still a huge load of info to take in and process/remember/understand
when they say 'language' it is exactly what it sounds like
@jdtdesigns thanks for the advice, i am currently applying the same principles i used during my degree, i.e notetaking (pocketbook) any queries i have, so i have an index to go to for simple issues
usyyy sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 521 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
hi guys, how to send a variable from js to html , i build simon game
angular , i thnk
just like learning a different speaking language, it is a huge undertaking
@usyyy
I'm the reality guy btw. I'm so tired of people being scammed by the videos and fake ads
it's the pyramid scheme of the 2000s
@buiphuking I would hold off on using angular and use something more procedural(easy to understand) like jQuery
huge load of code to process if you don't even understand basic js
buiphuking sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 522 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
usyyy sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 655 | @ndburrus |http://www.freecodecamp.com/ndburrus
@jdtdesigns yes i appreciate your honesty, how far would FCC's front end certification go towards at least acquiring an entry level position
@usyyy Not far at all unfortunately. The main way you land a job from FCC is not because of the certification, but because you build your portfolio and knowledge of js.
The certification is not 'certified'. It's just a way of pushing you to learn.
plz someone share me a link to learn augular online, and basic for newbie, thanks guys!!!!!!!
@jdtdesigns so the MSc in CS would go further, i understand the importance of producing good work along the FCC journey
@usyyy That will be good for your resume, but the main thing companies look for is good examples of work you've done in the specifications they require such as angular/php/oop/ajax and so forth.
They most likely will test you very deeply before you land the job.
@jdtdesigns so as far as learning the basics, FCC is a good way to ease in
@usyyy FCC is great in the sense that is pushes you to build working apps. The main way you learn this stuff is to do it. You will hit wall after wall, but the more you mess up and repeat, the more you will learn and remember.
Other course sites will just give you videos to watch and very little challenge to actually code.
Anybody knows what is the difference between "git checkout -b..." and "git checkout -a" ?
@jdtdesigns the thing that i enjoy most so far, is the learning by doing, which is something i have never done before (mathematics is theory then apply), my only worry is developing a reliance on the chat rooms for help
commit -a is to commit all changes
@usyyy I will say, having the math down will be a huge help for you. When it comes to programming, especially game dev, math is essential.
I myself, struggle with math lol
@jdtdesigns Thanks! What about -b, and where can I find this info? Git documentation?
said that above ;)
holish sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 523 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
-f is to force the switch to another branch even if you haven't commited changes on your current branch
the default behavior is to make you commit changes before switching
@Holish
@Holish do you have a git repository initialized on your comp?
holish sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: holish already gave jdtdesigns points
@Holish I do, im doing the angular tutorial, and they used 'checkout -b' first and the they switched to '-f' so I was wandering what's the diffrerence
@jdtdesigns, do you have a moment to look at something? I can't seem to get my 'Contact' link to jump to the contact section. This is after a complete rewrite verify everything I could... Thanks in advance if you have the time. Here's the rewrite:
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 524 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
emilypmendez sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@Holish
( @jdtdesigns, it's jumping to the 'Portfolio page for some reason...)
@emilypmendez your welcome ;)
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
@andreas2249 Your containers floats aren't cleared. Basically means for every left to right row of content, you need a .row class
@jdtdesigns, pardon my total ignorance: I have no idea what that means. Are you saying that I need a
.row class after each of those three .containers in the 'About' section?
@jdtdesigns, i.e. wrap the stuff in the inside the
.containers with <div class="row"> ?
@andreas2249 If you inspect the code using the browser inspector, you'll see that the contact section goes all the way up to the about section in height. That is causing the link to go to the top of the about sections instead because the contact begins where the about begins.
@andreas2249 I see a lot of containers
you should only need one container-fluid for the page
the rest of the content will be layed out using rows and columns
@khaduch thanks for the response! I can't seem to get a grid layout to work - setting the width to 50% for 2 elements just creates a line break instead of two elements on that line.
faeller sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1350 | @khaduch |http://www.freecodecamp.com/khaduch
@faeller - do you have a link to post for help? Setting the width to 50% (If you're trying to use the bootstrap grid) isn't the way it works. but if you post the link, we can check it out.
Ohhhh... Only one container-fluid. Humbled here. Didn't know that. I'll start there getting rid of those containers then look at the inspector.
I had thought that I needed a container for the groups of text + pics in the 'About' section. Your comment now makes sense. They are ALREADY in columns by virtue of having a single container-fluid class. Makes a lot of sense.
( @jdtdesigns )
@faeller It is because display:inline-block takes into account white-space in the html.
Try to edit your html and remove spaces
@Holish I've already tried removing them by using the white-space: nowrap - didn't change anything (except for text line breaks to stop)
@Holish Thank you, though. Very appreciated.
faeller sends brownie points to @holish :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for holish
An image example would be great. ;)
The tablet breakpoint should look like that. First two sections would get 50% and the last one 100%; Alignment of the first two is the thing I'm trying for about
three hours now^^
that should get you started :P
faeller sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 526 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@faeller - well, the
section.menu-item elements have a fixed-width margin of 20px on all sides, so that takes away 80px across the width. if you reduce the width of the elements where you have 50% to 45%, then it lays out along the lines of your proposed plan (although the third div is at the same width contraint, so it won't lay out as you've planned.
no need for widths when using flexbox and box-sizing: border-box
just put the items in a flexbox and use margin on them
@faeller - changing the margin changes it (with your original design as the base) @jdtdesigns gave a completely different take on it using flexbox layout. So you can decide which you'd rather work with.
been doing css for 5 years
@jdtdesigns Never heard of the concepts of flexbox's - I'll look into it
@khaduch removing / resetting the margin didn't work (http://i.imgur.com/1pwB6is.jpg)
If element1_width + element2_width <= parent_element_width - shouldn't it align properly?
function diffArray(arr1, arr2) {
var newArr = [];
var newArr2= [];
var newArr3= [];
var newArr4= [];
var indexOfi;
var indexOfj;
// Same, same; but different.
function crop(val){
return val!==arr1[indexOfi];}
function crop2(val){
return val!==arr2[indexOfj];}
var len1=arr1.length;
var len2 =arr2.length;
for(var i=0;i<len1;i++)
{
for(var j=len1;j<len2;j++)
{
if(arr1[i]===arr2[j])
{
indexOfi=arr1.indexOf(arr1[i]);
indexOfj=arr2.indexOf(arr2[j]);
newArr2=newArr2.push(arr1.filter(crop));
newArr3=newArr3.push(arr2.filter(crop2));
}
}
}
newArr4=newArr2.concat(newArr3);
return newArr4;
}
diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);@faeller - I removed the margin, and I also changed the breakpoint that you were using for your wider-width window because you had a max-width on the media query of 991px on it, and then I think you changed to 25% width about 992px?
I don't really understand why, but setting the margin on the elements to 0, the body margin to 0 and leaving the width at 50% does not generate the type of alignment that you want, but changing the width to 49% does generate the alignment that you are looking for on the first two boxes.
Hey guys can I get some help with some css. https://jsfiddle.net/tlarsin/phhuunyb/ I cannot get the two divs to float to the right. I have the 4 left divs correct but I want the other two to float to the right
@shivamsonu29 - I'm not following everything that you're trying to do, but this:
newArr2=newArr2.push(arr1.filter(crop)); does not look like the proper way to use .push() - you would only need to do newArr2.push() to push the element on that array - no further assignment needed.
@khaduch arguments can be provided in .push which you want to push in the array, it is also mentioned in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
This message was deleted
is anybody have idea about how to find difference of 2 arrays and to give output the array having elements which are neither in 1st array or 2nd array...
@shivamsonu29 You can concat the 2 arrays together then filter the array to remove values that are the same
guys, before do something we need to draw a flow chart, right?
so how i know if i draw right?
so how i know if i draw right?
@jdtdesigns, I removed the extra
containers like you had suggested. So far, so good -- but still a bit confused. In the 'Contact' section, if there's no new container, how can I get the social icons into their own "section" so that they're vertical and to the left of the contact form? Thanks in advance. Here's the CodePen: https://codepen.io/andreas2249/full/MejrMG/
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 527 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@shivamsonu29 - I think that what I said was that you can do
newArr2.push(arr1.filter(crop)), but then assigning that result back to newArr2 would clobber the value in newArr2, because the returned value from the .push() is the new length of the array.
how i know my algorithm i use is right when i build simon game , guys ?
@buiphuking break the game down into steps and see if the game will work on paper
@buiphuking you're first attempt might not work - but maybe your 4th of 5 will. I did 3 or 4 versions of simone before I got it to go
@khaduch thanks, the error is not coming but not giving correct output..
shivamsonu29 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1351 | @khaduch |http://www.freecodecamp.com/khaduch
Can someone please tell me why border-radius is not working here
http://codepen.io/kingdezz/pen/MejQQL click 'Share' and then hover to see the problem
@buiphuking flow charts are a bit more technical than that - have a look here -http://www.computerhope.com/jargon/f/flowchar.htm
Finally I feel like I am making some headway! Just need to sort for online or offline now. I assume using hide & show is a reasonable solution
Thanks @GregatGit ...getting closer. Got a toggle going at least. Did you write different click handlers for each of all , online & offline?
adventurebear sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 609 | @gregatgit |http://www.freecodecamp.com/gregatgit
@AdventureBear You might want to put target='_blank' for the href
Couple more formatting things, but I got all the functionality working. FINALLY.
@GregatGit is that so the links open in codepen?
So...I started this twitch TV codepen in May of 2015.
Finished...13 months later. Sigh.
Boom chica! I moved forward but this one really buggedme. I think b/c the get request was somewhat intricate. differeint pieces of data from different calls.
I am having problems running jquery's $.getJSON() method on code pen
function diffArray(arr1, arr2) {
var newArr=[];
var ind=[];
var fArr=[];
newArr=arr1.concat(arr2);
var idx;
function crop(val){
for(var i=0;i<ind.length;i++)
return val!==arr[ind[i]];
}
for(var i=0;i<newArr.length;i++)
{
do
{
idx=newArr.indexOf(newArr[i]);
ind.push(idx);
idx=newArr.indexOf(newArr[i],idx+1);
}while(idx!=-1);
if(ind.length>1)
{
fArr.push(newArr.filter(crop));
}
}
return fArr;
}
diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
@cdaiga FCC has a help page about the get JSON method. what challege are you on? Trying to remmeber how / where I found the help page.
text going behind <header>. How to get it below the Header
@cdaiga maybe this article helps? https://www.freecodecamp.com/wiki/en/front-end-project-use-twitchtv-json-api/
I finally started my wikipedia viewer page. http://codepen.io/AdventureBear/pen/GqjxrG
@shivamsonu29 not quite understand but you are assigning -1 to idx ? what does that do ?
@shivamsonu29 If newArr has 2 elements of the same value, it will loop forever.
@kirbyedy when indexOf function don't get position of element, then it returns -1..please see the link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
@Rickkwa https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf in this link one program is given which finds the no. of occurences of elements of an array, so what to do for removing the error of infinite loop..
Dose anyone know how to set a maximum size for an image but still keep it responsive so if the page gets smaller it will scale down?
I need some help, I want to style my buttons after I pressed it. http://codepen.io/nerocool996/pen/KMgmxb here is my pen. After pressing the start button ,it stops following my btn properties
Hi guys, I am currently in the front end section. I was wondering..... Is it possible to complete all the front end Projects without completing the Algorithms? I mean do the projects require that I complete the algorithms?
@jubayerevan not really, you only have to do the algorithms marked with *
@kirbyedy I haven't yet done JS or jQuery. I mean can I just finish the projects first and then the algorithms?
jubayerevan sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1133 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
gregatgit sends brownie points to @tony-tosp :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @tony-tosp |http://www.freecodecamp.com/tony-tosp
User Story: I can view a tribute page with an image and text.
User Story: I can click on a link that will take me to an external website with further information on the topic.
what is to b done for these two user stories???
can anybody help
what does these mean??
Can someone tell me why hover is not working here? http://codepen.io/kingdezz/pen/MejQQL I want to change colour of 'Share', 'Report' and 'Hide' on hover
@96street just use this simply:
.settingsMenu ul li a:hover {
border-radius: 5px 5px 0 0;
background-color: #666;
}
click 'Share' and you'll see what i mean
@nerocool996 hi, not sure if anyone answered, but if you use mouseUp in jquery and then add or remove a class it'll style the button- I'm also doing the pomodoro clock and have a question- what method did you use for the countdown, I'm currently trying setInterval, but it's a bit problematic?
@nerocool996 it's $("#id").on('mouseup', function(){change class here});
@jdpunk1 I fixed my problem, it was just a typo. I also used setInterval for my clock , I have completed the project and I didn't really had any trouble with that function.
What problem do you have?
clearInterval doesn't seem to be working- so it subtracts 1 second, 2 seconds, then 3 and so on for each cycle. I just need more coffee I think! @nerocool996
@jdpunk1 Do you store the intervalID before calling setInterval?
Load denied by X-Frame-Options: https://www.twitch.tv/esl_sc2
does not permit cross-origin framing------why iam getting this while doing twitch .tv json.......tia
hello
does not permit cross-origin framing------why iam getting this while doing twitch .tv json.......tia
hello
Hi guys, a little problem with my Local Weather app, it works fine but when I change the location with my input button, my weather icon doesn't change, the problem comes from :before that I use to display the content (Icons are displayed by a font), does anyone know a fix ? https://codepen.io/NatixDev/pen/beVdPp
Hello, guys, Is there in js function for start another function only after first is success done? some thing like that: fuinction().success(otherFUctnion()) ?
hey there! can somebodey check this for errors? is this enought good to make the next lession?
am I the only one who thinks that the JSON "course" on FCC is not that much explainatory? I just ran it AGAIN to see if I could understand it a bit better for the intermediate projects yet I don't know what to do
it just says "copy and paste this code to see how it works", it doesn't explain why you are doing that
https://utkarshbhimte.github.io/DashBoard-Prototype
I dont know why I am getting that blank space in my nav bar, Any Suggestions?
I dont know why I am getting that blank space in my nav bar, Any Suggestions?
@legyolo You can do better dude
is this better?
for (var i = 0; i < collection.length; i++) {
for ( var key in source ) {
if (collection[i].hasOwnProperty(source[key]));
}
}@shivamsonu29
sorry
for (var i = 0; i < collection.length; i++) {
for ( var key in source ) {
if (collection[i].hasOwnProperty(source[key])); {
}
}
}
@legyolo It does need more work, but you can continue with the other challenges and keep improving it
@go2bed read up on Promises https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
@Doko85 If FCC doesn't have what you need you have to go searching asking.
I don't know how to proceed to interact with a api url.
I mean, I "load" the url into an ajax method and then what?
I mean, I "load" the url into an ajax method and then what?
what are the commands that will help me extract the json data from that api url? what do they do?
these stuffs aren't covered on the FCC progam
I used the dev tools only to check margin and padding of html elements before tbh
this will get you started
var api = "http://ip-api.com/json";
$.getJSON(api, function(json){
console.log(json);
});
press control + shift + i - then look at the console for 'Object' - if it works you should be able to find the lat and long of your location
now I store them into two vars I suppose
yes - you now you can go to openweather and register to get their weather api that uses lat and long to retrieve the local weather in a similar mannor
but if I declare a local "lat" (or "long") variable into that function, it wouldn't be accessible into the other one, am I wrong?
so I m going to create another getJSON function into that one in order to keep using those data
yes - because you have to wait for that one to return the data before you can make the next getJSON call
I have to go now but good luck - and don't worry if you get stuck - its all part of it
doko85 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 610 | @gregatgit |http://www.freecodecamp.com/gregatgit
Hi, i'm trying to complete my tribute page, but it seems that i have some problems with bootstrap, the site is not well displayed in mobile devices, can you please help me?:) here's the site https://codepen.io/SystX/full/BzLmaO/
This message was deleted
pleeeees ser
pleeeeaaas
@urketadic
it didnt update
codepen was offline so it probably didnt update my code
hold on
ok can u check now
man wtf is wrong with this
wont update
ok gotta work now
On the tribute page project I am working on, my bootstrap directives won't work like they did on the freeCodeCamp editor. Any ideas?
@urketadic on your for your #buttonclick function try
$(“#buttonclick”).on(“click”, function(……
@jaimeNunez if you're using codepen, you likely need to add bootstrap in the settings menu under CSS and JS
under Javascript, quick add jQuery first, then bootstrap
@jaimeNunez if you're not using codepen, you still need to reference the bootstrap CDN in your head
jaimenunez sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1073 | @dhcodes |http://www.freecodecamp.com/dhcodes
guys,im doing the javascript calculator and trying to calculate the expression using
http://codepen.io/vichus1995/pen/NxLqyb
eval() .but it is not working.please help me.http://codepen.io/vichus1995/pen/NxLqyb
@ifeanyidavid opacity: 0.5;
or any number 0-1
@ankur01oct
in random quote machine challenge while referencing twitter getting error : Refused to display 'https://twitter.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
please help
in random quote machine challenge while referencing twitter getting error : Refused to display 'https://twitter.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
please help
@ifeanyidavid if you want to fadeOut while hovering just use img { opacity: 1 } img:hover { opacity: 0 } but with JavaScript you get a better result since you can specify how much time it takes the transition to occur
I don't know if css transition property works fine for that purpose
I never tried actually
@ifeanyidavid That's the correct way to do it. No need for js with basic transitions
I got it fixed now, i now am trying to figure out how to add a tweet button
So it tweets the text that is currently shown on quote div
@ankur01oct
@urketadic @ankur01oct fwiw, I had to make my own tweet button to get it to update when the quote changed
you may have to too
@urketadic in random quote machine challenge while referencing twitter getting error : Refused to display 'https://twitter.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
..... here is my pen http://codepen.io/ankur01oct/pen/QEERjr/?editors=1010
..... here is my pen http://codepen.io/ankur01oct/pen/QEERjr/?editors=1010
@dhcodes @urketadic please check ... if you can comment on error
will save me from googling too much :)
urketadic sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1077 | @dhcodes |http://www.freecodecamp.com/dhcodes
i dont know tho i never got that erorr
read the top
oh.. okay.. thanks for stackoverflow link.. hv gone through that already..didn't help
and it works
oh...wow it does.. can you please tell me the logic behind adding that?
@dhcodes : any link / reading material to know that logic?
@ankur01oct target="_blank" tells the browser to open the link in a new tab or window; for some reason codepen only allows outside links to open in new windows
@ankur01oct you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hi campers! I'm looking for a good react tutorial for beginners... any suggestions?
@ankur01oct maybe but your link wouldn't work with either unless you open in new window. I tried both
and Im looking at the response I get from an offline stream and an online stream
and they look identical
im currently calling
should I be checking for streams instead?
ok @dhcodes ..... no .. if you use "http://twitter.com/" it somehow redirects to https://twitter.com/' in console
for me it worked like that.. please correct me if i am wrong @dhcodes
guys I'm trying to fix my zindex of my quote navigation buttons when the height of the browser is less than 500px but its not working
when you have a height lower than 500 px
the arrows will be down
under a div that hold s the main two buttons
and because of that it's not clickable
on load
did you open code pen on a tab?
i mean there is some text and arrows, but those get immediately covered by the quote
and then are inaccessible
what browser are you on?
Hi guys,when I try to write something in my divs
they are moving down
I dont have any idea why
im using chrome and ff
it dont work on IE
@UgurKurt you have to set the height of the divs
to 100px
they are still moving down
i have to run
sorry
you have to push the element in arr and then remove the first value from it
@JackEdwardLyons i don't have any knowledge about some statements such as var key in source, source[key]..what are that?? i have made this program without using these statements..and have you tried to run this??
@UgurKurt add
vertical-align: top; to the .one class.
I am most likely overlooking something simple, but I can't seem to make my "if" statements print if 422 or 404. Any ideas? http://codepen.io/randallfine/pen/BzjGvL
@Randallfine remove the line
var link = data._links.self; and it works. It throws an invalid error.
randallfine sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 540 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
@vichus1995 Sorry. The problem is on line 21, you override your answer with the contents of the arr immediately after displaying it.
@Randallfine probably even better to use a boolean in this case
var links = data._links.self || false;.
is anybody here practical with the weather icons css framework?
Question: I am creating my personal portfolio page. Where do you find images?
melanieleann sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Could Anyone help me figure out how to line up the 'Project 1' - 'Project 4' names directly under the picture I've tried multiple methods and just cant get them to line up. Any help would be greatly appreciated.
@tbuglc do you have a second to help me find the cause of an issue on my weather app html?
I don't get why it suddenly shows four times the °F icon and why the bottom text is so big
it shouldn't be
@finkbeca : this guy may help you to do that
https://www.youtube.com/results?search_query=thewebsiteboy+gallery+
https://www.youtube.com/results?search_query=thewebsiteboy+gallery+
can anyone help me?
it was ok before, now everything is bigger
also there are "°F" everywhere in the project and I don't know why
In the div with the id 'switch'
The switch still doesn't work, but the sizes etc are back to normal when you change that
thanks guys that solved the problem
there s still a lot of work to do on this project...
https://codepen.io/TAM007/pen/MejmMN for loop in the start button isn't working properly. (check the JS file)
hello everyone! http://codepen.io/roshma/full/QEbwKo/ Please give your feedbacks for my random quote machine
@TAM360 Before the js, I would change the svg to just a plain div and use height, width, ect.
The svg is totally broken and unnecessary.
Good morning, Campers. Can someone please identify why the link to the 'Contact' section is not going to the top of the 'Contact' page as it does with the 'Portfolio' and 'About' links? (i.e. linking to that page still shows some of the prior page at the top of the screen.)
Here's my CodePen: https://codepen.io/andreas2249/pen/MejrMG Many thanks in advance. :)
@jdtdesigns thanks dude, I'm still trying to figure it out how you made the button stand in between the <i>s
doko85 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 528 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@Doko85 I removed the absolute from it. Absolute takes the element out of the doc structure.
@andreas2249 Same issue as before. The contact section is expanding into the about section.
@TAM360 I can't even see what the screen is supposed to do right now lol. If you fix the html and css, i'll check it out. And btw, it's a while loop.
@jdtdesigns, what does "section is expanding mean" and how do I solve it, please? (I removed the extra
containers as you had suggested yesterday. Got some improvement.)
@TAM360 when i gets to 0 it only runs the else loop and i stays at 0
@jdtdesigns, I can put an anywhere in that doc and link to it and have it go to the top of the page. I'm confounded about what I've incorrectly coded here that's caused this "three-day, single-issue horror" :(
@andreas2249 Lol, we've all gone through it. I'll fix it up in a minute.
@hiltydiggs it suppose to remain at 0 because the time has finished. my problem is that the while loop is suppose to work automatically after i click the start button. but it's not working!
( @jdtdesigns and @hiltydiggs, I'm sure of that. Thanks for saying it, too. It's making me a bit nutso coz professionally, I develop automated trading systems for institutional traders that's 1,000x more complicated than this... I really want to learn this "properly" -- If I can't identify my error, can't learn from it. :)
andreas2249 sends brownie points to @jdtdesigns and @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:cookie: 541 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
Hello guys
I am trying to leave a gap of 10px between the "outer div" and the "length1" div. What I mean is that I need to have a margin of 10px on the top and bottom of the "length1" div. I worked out the side margins (I am making a simple rectangle inside the outer div). However, I cannot figure out how to leave a gap 10px on top and bottom. Here is my code
I am trying to leave a gap of 10px between the "outer div" and the "length1" div. What I mean is that I need to have a margin of 10px on the top and bottom of the "length1" div. I worked out the side margins (I am making a simple rectangle inside the outer div). However, I cannot figure out how to leave a gap 10px on top and bottom. Here is my code
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
body{
margin:10px 0px;
}
div.outer{
height:400px;
width: 500px;
margin:100px auto;
margin-top: 130px;
background-color:red;
}
div.length1{
height:380px;
width:30px;
margin:10px 470px 10px 0px;
background-color:blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="length1"></div>
<div class="breadth1"></div>
<div class="length2"></div>
<div class="breadth2"></div>
</div>
</body>
</html>
@jdtdesigns, yes, thanks for that reminder. Drop down on shrink is in there. It's broken for the time being.
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
@TAM360 something like
$("#minutes").text(i);
$("#seconds").text(sec);
window.setTimeout(function() {}, 1000);
@hiltydiggs my codepen file isn't displaying any syntatic error regarding setTineout
let me check 1st
@TAM360 open the browser console and hit the start button on your project again.
@andreas2249 There is quite a lot of errors in the code. :/
@jdtdesigns, Great! That's what I want to hear. Honestly. Where do I start, please?
You still have container-fluid across the html over and over
that is for wrapping your page content
row is used to wrap column dividers
<div class="row">
<div class="col-xs-6">
<h1>A Header</h1>
<p>Some paragraph text</p>
</div>
<div class="col-xs-6">
<h1>Another Header</h1>
<p>Some more paragraph text</p>
</div>
</div>
@jdtdesigns, OMG -- I took them out last night as you'd suggested. Looks like I didn't save. Lemme do that again first. Thanks for finding that. :+1:
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
Also, your animated text up top needs to be spans, not divs
Hi there. I've just finished my wikipedia viwer. Can you please give me some feedback on this pen: http://codepen.io/sorinr/full/LZVqmJ/
@andreas2249 Go through and make sure all of your content is placed correctly inside of rows/columns. The columns inside a row should always equal to 12 , no matter how much you have in the column.
Perfect, @jdtdesigns. Great distinction on columns should always = 12. I'll start there fix those. Thanks for that code snippet, too. Really simplifies my understanding of containers vs. rows.
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
@jdtdesigns, you're a Prince. Thank you for getting me started on the right track here... :)
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
@hiltydiggs thank you. maybe i should only add and on click event for the X in the search to clear all imput
sorinr sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
@sorinr also, small bit, but it will run through the searches for every iteration of the word you're typing if you type search term quickly.
@hiltydiggs i can make a debounce for that. i saw myself whats happening when you type quicly but i didn't wont to make it on enter. to change the code its just adding .enter to @keyup like @keyup.enter
$('#allChan').prepend("<img src='data2.logo'/>"); @hiltydiggs
I wanna print out an image logo on the html but this wont print it. any suggestion
This is the test website http://codepen.io/Ronique/pen/wWMxpG?editors=1010
@sorinr or wrap the searchWiki in a 500ms timeout or something
@RoniqueRicketts $('#allChan').prepend("<img src='" + data2.logo + "'/>");
@hiltydiggs no need vue.js already has a delay function called "debounce" that does same thing
@jdtdesigns I will come back to you with another concern but for now. Thanks much
roniquericketts sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@sorinr Just clear the timeout before starting the next one
That will fix the content loading over the top of the previous problem
@jdtdesigns this is the actual thing i want to have
$('#allChan').prepend(<a href='url'><li><img src='" + data2.logo + "'/>+ some text </li></a>);$('#allChan').prepend(
'<a href="' + url + '">' +
'<li><img src="' + data2.logo + '">Some Text</li>' +
'</a>'
);
@RoniqueRicketts
nice thanks. I have an issue placing the '' at the correct place @jdtdesigns
roniquericketts sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: roniquericketts already gave jdtdesigns points
Hey guys, good afternoon! Wiki viewer is coming along nicely. I have my wiki api request that seems to be workign but there is no content returned in the json result. I print the request to the console but cannot drill down to the actual page content. Please try it...what am I missing or where should i look?
hi,i have completed random quote machine and it's working fine but initially there's no quote shown. it starts when the button to get new quote is clicked. it would be nice if anyone helps or any kind of feedback! here-https://codepen.io/srishti-learner/pen/WxrKrr
@wearenotgroot thanks, you mean when I drill down..."data.query.pages" in the return object? That is there but i'm not getting the "content" that the api seems to refer to.
adventurebear sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1143 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
check this page of json results...I'm only getting the pge title and some other stuff.
wait...
then I replace it when I click on the button
ugh...I'll come back in a few hours with a fresher mind.
@Doko85 so,there is no way to get it dynamically? but then the first quote will always be same! :worried:
thanks for the reply
nope, I used an api and it gets a random quote from the JSON file
@srishti-learner line 34 colors instead of colos
@greg ya..thanks man! that was an error also! :+1:
@Doko85 okay...but if anyone could tell how to get dynamic quote at first then it would be highly appreciated.
@wearenotgroot okay. thanks
srishti-learner sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1144 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@wearenotgroot my quote is still not changing the color? can u please tell why?
Hello! I’m beginning to learn html 5 now. I keep getting an error message that says “expected script to have an attribute src” Here are my link and script tags: ```js
<link rel="stylesheet" href="style.css">
<script src="script.css"></script>
```
<link rel="stylesheet" href="style.css">
<script src="script.css"></script>
@srishti-learner but personally you should have the same color text with background
@srishti-learner it should stay white/light color for contrast
ampang sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 543 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
so it should be this?
<link rel="stylesheet" href="style.js">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
@AMPANG no. A stylesheet usually has .css (cascading style sheet) as an extension. Javascript usually uses the .js extension.
@AMPANG and are they in the same folder as the HTML?
I’m actually doing a codecademy exercise. They don’t need to exist at this point.
can someone tell me why the channels are duplicating?
@greg ya, i didn't changed it either. it was good the same way. just to learn. :smile: thanks again btw!
srishti-learner sends brownie points to @greg :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for greg
CamperBot
Hi, I'm CamperBot! I can help you in this chatroom :smile:
Basic Commands:
find TOPICfind all entries about topic. e.g.find jswiki TOPICshow contents of topic pagethanks @usernamesend brownie points to another userabout @usernameshows info on that userAlgorithm BONFIRENAMEinfo on a Algorithm
meet CamperBot in 
It’s probably a glitch. In the next exercise they have the exact same code. https://www.codecademy.com/en/courses/web-intermediate-en-R6bnc/0/4#
@hiltydiggs
@AMPANG strange. I tried it in another browser, too. Still no luck.
@jdtdesigns or @hiltydiggs, I've placed myself in self-imposed "container vs. row" school... :)
I was instructed earlier: "Go through and make sure all of your content is placed correctly inside of rows/columns. The columns inside a row should always equal to 12 , no matter how much you have in the column."
So does that mean if I want to put another section of content below the 'Row 1' and 'Row 2' boxes (which are 4 columns each), I should put an "empty" div of 4 columns to the right of the 'Row 2' box so that total count in row = 12? Here's my sandbox: http://codepen.io/andreas2249/pen/VjKqVo?editors=1100
Tell me what I did wrong why it is duplicating.
@andreas2249 first thing I see is
.row and .col-xx-4 should not be on the same element.
@andreas2249 columns should be nested in rows.
@andreas2249 Bootstrap grid system documentation
Is anyone here able to help me with one of the challenges?
Thank you, kindly, @hiltydiggs. Gonna go memorize that page you sent. :)
andreas2249 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 544 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
@RoniqueRicketts the pen isn't working for me, but most likely it's an async problem.
@RoniqueRicketts the link works, but the JS is broken and the preview doesn't load so I can't replicate.
@ethana99 html element?
@andreas2249 documentation is your best friend!
Yes. @RoniqueRicketts This is what I have
<button class="btn btn-default target1"></button>
@ethana99 id is an attribute just like class, so to add an id
<button class="btn btn-default target1" id="your-id-name"></button>
@RoniqueRicketts Because you have two for-loops inside each other, you call the API / generate your divs way more often than you should
Hey campers, I just run into issue that using a infinite loop so the freecodecamp walkthru page are stuck, how can I stop the program and make it editable if you have some thoughts?
Not really! You just need to take the second for loop out, but then find a way to make sure that you pass
i into your callback properly (otherwise it will always be the last value, returning undefined)
@mania7539 You need to delete the answer from that page from your local storage.
@ethana99
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default" id="target1"></button>
<button class="btn btn-default" id="target2"></button>
<button class="btn btn-default" id="target3"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default" id="target4"></button>
<button class="btn btn-default" id="target5"></button>
<button class="btn btn-default" id="target6"></button>
</div>
</div>
</div>
</div>
set each target as an id might help with that challenge.
ethana99 sends brownie points to @roniquericketts and @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
:cookie: 299 | @roniquericketts |http://www.freecodecamp.com/roniquericketts
@RoniqueRicketts agree on what @sannek said. This is a very important thing to learn and you'll need it over and over. Take the time to try and understand it.
@hiltydiggs been fighting this challnge for days and still coming up short. Auugh. frustrated!
@sannek so how can i do that? Would be clearing all cookies and data from browser?
@RoniqueRicketts yeah. This concept took me a while to get, as well. Here's a read to start stackoverflow.
@hiltydiggs, I agree. I think I'd been there, glossed over it, thought I understood it -- and now know I hadn't... I appreciate your patience with questions. :)
@hiltydiggs good thanks. I have removed the second loop but as @sannek said its returning undefined but I will work on it. So going forward its best not to use a loop within a loop in cases like this so that we don't encounter a duplication problem?
roniquericketts sends brownie points to @hiltydiggs and @sannek :sparkles: :thumbsup: :sparkles:
:cookie: 424 | @sannek |http://www.freecodecamp.com/sannek
:cookie: 546 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
@RoniqueRicketts the loops keep going and changing the value of i before the callback occurs. I would copy/paste your javascript or fork or create a new pen and follow the example provided in the stackoverflow solution and see if you can get it working with the twitch api.
@hiltydiggs I am actually doing that atm I create my pen using a test pen and the original pen
Can anyone show me how I would go about making the background colors fade in on each click? Here is my code.
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
There's some doc I'm not sure exactly.
$( "#newQuote" ).click(function() {
$( "#body" ).fadeIn( "slow", function() {
// Animation complete
});
});
$( "#body" ).fadeIn( "slow", function() {
// Animation complete
});
});
something like that in the JS
@lukenetti3 or just
.background {transition: background-color 2s;}
@lukenetti3 in your css
@hiltydiggs Thank you so much! I figured it didn't have to be that complicated but I couldn't get it working correctly. So that is just transitioning my color which I have changing on each click, correct? Want to make sure I understand my own code
lukenetti3 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 547 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
I'm working on my portfolio, almost ready to send it out using jQuery tabs UI, but the content aligns below the menu, not next too it. Any ideas? I think it's something with the .container declaration of the CSS http://codepen.io/DersHolm/pen/jrbadz
@lukenetti3 transition just waits for a change on whatever attribute you pass it. It says experimental on MDN, but if you look at caniuse it's fully supported.
lukenetti3 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave hiltydiggs points
@anders-rydholm if you add
display: inline-block; to ul it works.
@anders-rydholm Small typo: Line 73 of your css should be
float instead of loat
Nice, I went back to the tabs spec here https://jqueryui.com/tabs/#vertical and pasted the head in that also worked.
Hi. I have a button issue on Chrome on android. When I press my clock (button element), I get this semi-transparent blue rectangle on top: https://goo.gl/photos/4EmQRQi68EDjkocLA
Anyone knows how to get rid of it?
Here is my code: http://codepen.io/manu4216/full/JKKLLp/
Anyone knows how to get rid of it?
Here is my code: http://codepen.io/manu4216/full/JKKLLp/
anders-rydholm sends brownie points to @hiltydiggs and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 548 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
:cookie: 613 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@pidugusundeep
heyy any one worked with file uploading in php ?
please help me in storing images uploaded by the users, and i need to store the images in a location and then i need to store the temporary location in the database is that so then please let me have some sources to go through
heyy any one worked with file uploading in php ?
please help me in storing images uploaded by the users, and i need to store the images in a location and then i need to store the temporary location in the database is that so then please let me have some sources to go through
@hiltydiggs Good try, but that didn't fix it. "outline: none" is for another issue
@manu-4216 it would be something like:
$( "*" ).click(function(){
this.blur();
});
@manu-4216 Add this to #clock in your CSS:
More info: https://groups.google.com/forum/#!topic/phonegap/OmmCuTotZI4
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);More info: https://groups.google.com/forum/#!topic/phonegap/OmmCuTotZI4
@manu-4216 but I can't replicate the problem on Chrome Beta 52.0/Android 5.1, so I'm not sure.
manu-4216 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@hiltydiggs It worked with that -webkit-tap-highlight-color: rgba(255, 255, 255, 0); fix Thank you anyway :)
manu-4216 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 549 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
Can some one help me center something I've been trying for a long time. I have caption label "project 1" -"project 4" under picture that are in the bootstrap grid format but I can't get the caption "project 1-4" to become center under it. I've tried text-align: center. If someone could please look it would be so greatly appreciated. http://codepen.io/buddyfinkbear/pen/YWXLPZ
@hiltydiggs, I've read here to only use one
.container class in a page. On StackOverflow, mixed opinions on using multiple containers (everyone does agree to never nest them). Bootstrap's own websites do use multiple containers. What's your opinion and practice? Single or multiples? Thanks in advance.
andreas2249 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 550 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
So I am trying to get these quotes to be wrapped in quotation marks. I can only get the quotation mark to be above and below the quote, not before and after. It is on line 12. For some reason when I do the "<span" without the ending it works for the first part, pretty sure this isn't right but not sure how to fix it. Here is my code.
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
@finkbeca The text is centered correctly, but you'll need to use a larger column size, like col-xs-3 to get the text to center under the image. The image is currently overflowing out of the grid, while the text wraps within. To debug, try this in your css:
* {
border: 1px solid black;
}
@andreas2249 I don't see any problem with it. You can use containers to group related rows. But it seems redundant unless you need to put something outside of a container in between two containers. I don't use bootstrap a ton, so I'm probably not the best to answer.
andreas2249 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave hiltydiggs points
finkbeca sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 615 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
that* haha
@lukenetti3, although not a direct answer to your question, you can use bit.ly or tinyurl.com to shorten those very long links. It'll make your code easier to read...
@lukenetti3 Wrap your q tags in a paragraph:
<p><q><span" + quote.content + "</q></p>
:point_right: adding snippets to sublime text [wiki]
Adding Snippets To Your Sublime Text Installation
If you are a user of sublime text (I hope you are, it kicks ass. You can get it here), then you may have already noticed some of the tab completion capabilities. For example, when you are opening an html tag such as <p>, it automatically closes the tag as soon as you type /. You can get similar functionality for pieces of code you end up re-writing over and over, and it's surprisingly easy!
Here's an example, which activates after typing div and then tab:
:pencil: read more about adding snippets to sublime text on the FCC Wiki
Np @finkbeca good luck, hope that helped. col-xs-3 seems to work well for getting the text centered.
I am in wikipedia viewer project but i dont know about how to use wikipedia aPi ?
please Help me
@TylerMoeller That makes more sense. Why does the span not have an end to it? The beginning span element I mean.
@lukenetti3 That is odd - it must be the browser trying to be smart. In this case, it fixed the issue for you :)
Browsers do well at handling incorrect HTML
@lukenetti3 @TylerMoeller yeah. You should definitely add a closing, though.
@hiltydiggs When I add a closing though it messes up where the quotes are. For some reason this worked.
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
recently i used location api and Weather APi in last project ..
@TylerMoeller I have done what you said but I am still having problems. I put the borders around it and I can see the problem , however I have no idea on how to fix it. I have used text-align: center and it just seem to make it more off. Please Help!
@finkbeca You're very close, remove the offsets you have in the second div of each row. It wouldn't hurt to do a brief review of Bootstrap's grid system again to get a better hang of this: http://getbootstrap.com/css/#grid
@aayanqazi They have an example URL for the API on that page. You can also test different URLs in their sandbox: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
@aayanqazi Once you get the URL you want, it will be very similar to getting the weather
@TylerMoeller The second offset? then they wont line up in the places I wanted?
@finkbeca Check out the examples at the bottom of this page and notice how they do the offsets: https://getbootstrap.com/examples/grid/
@finkbeca This is also a great explanation of how offsets work: http://getbootstrap.com/css/#grid-offsetting
@TylerMoeller @hiltydiggs I think I will just remove the quotes. Not sure why its doing that. I tried it on google chrome and its doing the same thing.
@TylerMoeller @hiltydiggs Thanks for the help guys
lukenetti3 sends brownie points to @tylermoeller and @hiltydiggs :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave hiltydiggs points
:cookie: 616 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lukenetti3 Yeah, just add them in manually I guess. I couldn't figure it out lol
with json apii ... will i use .each for fetching data in html table
?
@TylerMoeller I've followed what you've said. I read the bootstrap guide. I still have no idea why caption and the image won't both center in the images
Hey all. This is my code for Profile Lookup. It's not working, and I wonder why. Any insights?
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function lookUpProfile(firstName, prop){
// Only change code below this line
var entry = 0;
var record = "";
var result = "";
while (entry < contacts.length) {
if (firstName !== contacts[entry].firstName) {
if (entry === contacts.length) {
return "No such contact";
}
else {
entry++;
}
}
else if (firstName === contacts[entry].firstName) {
if (prop !== contacts[entry][prop]) {
return "No such property";
}
else if (prop === contacts[entry][prop]) {
result = contacts[entry][prop];
return result;
}
}
}
// Only change code above this line
}
// Change these values to test your function
lookUpProfile("Akira", "likes");
@lukenetti3
$quotes.html("<p>\"<span>" + quote.content + "</span>\"</p>" + '<b>' + '<p style="color:grey">' + '- ' + quote.title + '</p>'); and .quote p {display: inline;} work
@lukenetti3 even better
$quotes.html("<p>"<span>" + quote.content + "</span>"</p>" + '<b>' + '<p style="color:grey">' + '- ' + quote.title + '</p>');
@TylerMoeller I understand stand how to center the columns , my question is how Do I center INSIDE the column for the image and caption to both be center. Thanks
finkbeca sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: finkbeca already gave tylermoeller points
@finkbeca You'll want to offset by 3 instead of 2, but your CSS also seems to be affecting it. Let me see if I can dive in a little more closely and see
finkbeca sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@hiltydiggs Okay I got that working but now my author part is inline as well. In my CSS I have .quote p... Is that right?
@lukenetti3 I just noticed you switch from double quote to single quote halfway through this function. Hold on.
Hey all. This is my code for Profile Lookup. It's not working, and I wonder why. Any insights?
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function lookUpProfile(firstName, prop){
// Only change code below this line
var entry = 0;
var record = "";
var result = "";
while (entry < contacts.length) {
if (firstName !== contacts[entry].firstName) {
if (entry === contacts.length) {
return "No such contact";
}
else {
entry++;
}
}
else if (firstName === contacts[entry].firstName) {
if (prop !== contacts[entry][prop]) {
return "No such property";
}
else if (prop === contacts[entry][prop]) {
result = contacts[entry][prop];
return result;
}
}
}
// Only change code above this line
}
// Change these values to test your function
lookUpProfile("Akira", "likes");
@lukenetti3
$quotes.html('<p>"<span>' + quote.content + '</span>"</p>' + '<br /><b><p style="color:grey">' + '- ' + quote.title + '</b></p>');
@hiltydiggs Thanks! It works. What should I be using when it comes to single quotes or double. Didn't even realize I did that.
lukenetti3 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 551 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
@hiltydiggs And can you explain a little by what the " was doing?
@finkbeca Here's a fork to show you one way to fix it: http://codepen.io/TylerMoeller/pen/gMwEMz?editors=1100
You had fixed widths for your images which was interfering with responsiveness. To keep them from overlapping, you can use width: 100% in the fork. And, if you like that 250px width, just do this:
You had fixed widths for your images which was interfering with responsiveness. To keep them from overlapping, you can use width: 100% in the fork. And, if you like that 250px width, just do this:
.image {
width: 100%;
max-width: 250px;
}
@Dave
you can make a new solution
you can make a new solution
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function LookUp(name , prop){
var items = contacts.filter(function(item){
if(item.firstName === name ){
return item;
}
});
if(item.length){
return item[0][prop];
}
}
@BeingDS
you can make a new solution
you can make a new solution
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function LookUp(name , prop){
var items = contacts.filter(function(item){
if(item.firstName === name ){
return item;
}
});
if(item.length){
return item[0][prop];
}
}
@TylerMoeller Thank you again for taking your time to show me what I was doing wrong. I learned a lot, and I greatly appreciate it.
finkbeca sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: finkbeca already gave tylermoeller points
beingds sends brownie points to @besara :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @besara |http://www.freecodecamp.com/besara
@lukenetti3 you can use either single or double, but just try to be consistent. There are arguments for/against both.
" just helps avoid errors from escaping characters and creating valid html. Here's a character chart
lukenetti3 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave hiltydiggs points
@BeingDS
// this array of objects
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
// this function to return the object or field in object from contacts array
// @name : search in firstName in array by this params
// @prop : that is what you need function to return from found item it is optional if you dont provide it the entire object will return
function lookUp(name , prop){
var found = null;
// if no name return null
if(!name){
return found;
}
// make filter to array and search for item has fristName == name
// item var it is array
var item = contacts.filter(function(iteminArray){
// if firstname == name return the item in item array
if(iteminArray.firstName === name) {
return iteminArray;
}
});
// if item arary has length then waht you search about it is found
if(item.length){
/*
if(prop ){
found = item[0][prop];
}else{
found = item
}
*/
found = (prop) ? item[0][prop] : item[0];
}
return found;
}
// invoke the function
var xx = lookUp('Akira','likes');
console.log(xx); // this array of objects
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function lookUp(name , prop){
var found = null;
if(!name){
return found;
}
var item = contacts.filter(function(iteminArray){
if(iteminArray.firstName === name) {
return iteminArray;
}
});
if(item.length){
/*
if(prop ){
found = item[0][prop];
}else{
found = item
}
*/
found = (prop) ? item[0][prop] : item[0];
}
return found;
}
var xx = lookUp('Akira','likes');
@BeingDS
// this array of objects
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function lookUp(name , prop){
var found = null;
if(!name){
return found;
}
var item = contacts.filter(function(iteminArray){
if(iteminArray.firstName === name) {
return iteminArray;
}
});
if(item.length){
/*
if(prop ){
found = item[0][prop];
}else{
found = item
}
*/
found = (prop) ? item[0][prop] : item[0];
}
return found;
}
var xx = lookUp('Akira','likes');
Hello Campers. I have a dilemma. I'm working on the Twitch.tv project. It shows I'm connecting to the api. I also ran loop which displays the number of users, but none of their data is showing from the backend. Can anyone tell me how to get the data to populate? I appreciate the help. https://codepen.io/millsdee42/pen/ZOpPjW?editors=1111
@millsdee74 your ajax call would have to be inside of the each loop with a dynamically created url for each user.
@hiltydiggs can you specify when you say "ajax call would have to be inside of the each loop"?
On that "Build a Tribute Page", am I just supposed to find some historic figure to write about? That's not clear. B/c anybody I'd want to write a tribute to either doesn't have a "Read More" link available or doesn't have any photos licensed in such a way that I could use them.
I have a problem with css positioning
@Doko85 That contradicts the defined requirements listed in the instructions. It's defined as a tribute page and state that you need an image, text, and a link to an external website with further information.
@millsdee74 something like:
$.each(users, function(i, users){
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/users/' + user,
headers: {
'Client-ID': 'qubvi0p9dicv87g9a4s7etay32x6504'
},
success: function(data) {
use response data here...
});
@UgurKurt So your problem is that square that's outside the box?
@Carradee it's "obvious" that that person\thing has to be "famous" enough
it is okay when the divs are empty
they change their position
@millsdee74 it's not exactly correct, but you have to go through each of the users in your users array and make the request based on that users unique url. Sorry, I wish I could help out more but I have to go.
they have some margin
@UgurKurt I think I have a fix. Now let me figure out how to share it with you.
this is my new version
when I type anything in my divs,they change their position
@hiltydiggs 'https://api.twitch.tv/kraken/users/' + user, the url is another issue. The api will not communicate when I have "/users/' +user" in the url. And, I appreciate the suggestion but that didn't make a difference. The api is connected. The data for each user is not displaying. it comes back like this on my webpage......name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
•name: undefined, logo: undefined
@UgurKurt Old version was a better foundation. You want the wrapper box.
There are other ways to do it, but that one was the simplest with how you set it up.
thanks,I still cant figure out why my version didnt work but thanks ! :)
@Carradee thanks
ugurkurt sends brownie points to @carradee :sparkles: :thumbsup: :sparkles:
:cookie: 222 | @carradee |http://www.freecodecamp.com/carradee
one more question,how can I veritcally center the text inside .one divs ?
Hello Campers. I have a dilemma. I'm working on the Twitch.tv project. It shows I'm connecting to the api. I also ran loop which displays the number of users, but none of their data is showing from the backend. Can anyone tell me how to get the data to populate? I appreciate the help. https://codepen.io/millsdee42/pen/ZOpPjW?editors=1111
how to use api
Hey, i am kinda done with my quote machine for now, i know it looks terrible in comparison to the example but i need help with media queries
http://codepen.io/urketadic/pen/zBKppa
Basically when i lower the screen, the quote box gets messed up. Can someone give me a hand?
@UgurKurt Ah. You're gonna have to use another method altogether for that.
@Carradee Is there a reason you're not using a table for this?
@millsdee74 I'll see if I can get it fixed. Back now.
@sorinr It's still not clearing each timeout. Each time you type, it starts a new timeout that gets results. This causes a stack of timeouts that fire one after another. You need to clear the timeout each time the user starts typing before creating the timeout to get results. ;)
@andreas2249 Did you figure it out?
@urketadic I'd recommend adding another 10 quotes to your array if you're going to do it like that. With only 10, you sometimes get the same quote over and over due to the Math.random() firing the same number. If you have a large list of numbers to choose from, it will have less chance of choosing the same. ;)
yea il add some more later, right now im just trying to fix media querries, but i dont know how
when you resize the window, you will see how quote box just disapears right
@millsdee74 here check this out:
var $users = $('#users');
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var onlineChannels = [];
var offlineChannels = [];
var url = 'https://api.twitch.tv/kraken/streams/jsonp';
$.each(users, function(index, value){
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/users/' + value,
success: function(data) {
console.log(data);
$users.append('<li>name: '+ data.name +', logo: '+ data.logo + '</li>');
}
});
});@media screen and (max-width: 700px) {
#quote {
margin: 50px 100px 0;
}
}
@media screen and (max-width: 460px) {
#quote {
margin: 50px 20px 0;
}
}
@urketadic just add that below the #quote in the css
@millsdee74
data.logoreturns an image URL, so you'll have to put that into an <img /> element.
@millsdee74 Why is there a random table element in your html?
Can someone tell me why the responsive navbar is not working in this http://codepen.io/mrmatt1877/pen/rLMjKj?editors=1000
@mrmatt1877 take the jquery-ui out and add twitter-boostrap instead
in the Settings->Javascript Tab
urketadic sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 531 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
3 lines of code html,css,javascript? I am struggling to figure out what else to add to my page I know I need a picture and a quote? https://codepen.io/CodingKaz/pen/ZOpqVN
@jdtdesigns: (a) took out all those extra containers; (b) put myself in a full day's worth of Remedial Container-vs.-Column-vs.-Row school; (c) drank a tall glass of chilled vodka and walked the dog; (d) after all that, found the problem: The .wellat the bottom of the 'About' page (above the 'Contact' page) needed to be inside a row.
After that, everything just fit together and started working. Other stuff I couldn't align before, aligned. CSS that wasn't working, started working. The sun came out. Etc., etc. :)
@andreas2249 Nice! Take the <head> stuff out of the html though. The <html><head><body> tags are all added automatically by codepen. To add the css, go into Settings and under the HTML tab, paste the <link> in the 'Stuff for head' box. Also, since you figured out the rows/columns, now go in and use the col classes from Bootstrap to create the responsiveness on the page. For small screens use col-xs-<number> (usually 12 for full width of screen), and for larger use col-md or col-lg. Your column divs will have classes like this: class="col-lg-4 col-md-6 col-xs-12" for the most part.
hey guys im having trouble setting up my code for the where art thou algorithm scriping, heres my code
function whereAreYou(collection, source) {
// What's in a name?
var arr = [];
for ( var i = 0; i < collection.length; i++ ) {
for ( var j = 0; j < source.length; j++ ) {
if ( collection[i].hasOwnProperty(source[j]) ) {
console.log("testing");
}
}
}
/*
var newCollection = Object.keys(collection);
var newSource = Object.values(source);
if (newCollection.hasOwnProperty()) {
console.log("hello");
}
console.log(collection);
console.log(newSource);
*/
// Only change code above this line
return arr;
}
whereAreYou([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
any ideas?
the console.log doesnt work
@andreas2249 one more bit is the
padding-bottom: 600px; on #main-content
You're a Prince, @jdtdesigns. I did learn about your last suggestion in my study today. Even practiced all day in this Sandbox I created: http://codepen.io/andreas2249/pen/VjKqVo/
You're right, I did notice how awful it starts looking at smaller sizes. Gonna make a copy of what I have before I attempt that.
@jdtdesigns thank you again for your considerable time and effort getting me steered back on course. :) :+1:
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ha, there you are, @hiltydiggs. I wanted to thank you, as well, for getting me over this hump. Learned a LOT ! Thank you so much. :) :+1:
andreas2249 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 552 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
check out my pomodoro counter and let me know what you guys think. there are a couple bugs but the general idea is there. http://codepen.io/Jesse989/full/ezdBvX/
@andreas2249 no problem! Glad to help!
@JackEdwardLyons wait, that's not it.
@hiltydiggs, that 600px was to "push down" the rest of the content to only show the home page image -- the the rest could be scrolled up like a screen to cover that image.
I knew the effect I wanted. Took a shot in the dark that was the way to make it work.
Do you have a better idea on that?
@Jesse989 That's pretty cool. I might suggest adding an alarm that goes off when it's break time and when it's time to start a new session. Good job!
jesse989 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 533 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@JackEdwardLyons sorry. Looking at it now.
@codingisfun11
what does javascript do for a tribute page
3 lines of code html,css,javascript? I am struggling to figure out what else to add to my page I know I need a picture and a quote? https://codepen.io/CodingKaz/pen/ZOpqVN
what does javascript do for a tribute page
3 lines of code html,css,javascript? I am struggling to figure out what else to add to my page I know I need a picture and a quote? https://codepen.io/CodingKaz/pen/ZOpqVN
guys, anybody know why when I try adding <i class="fa fa-linkedin-square"></i> nothing shows up on my page?
appreciate any help on this, been struggling for a while
@Ammardinho You probably haven't added font awesome to Settings->CSS
@hiltydiggs, oddly enough, changing that padding to min-height "breaks" the contact page again, i.e., linking to 'Contact' page shows prior section's content. (That section is cursed!)
To use min-height, does that mean I just need more content (or space) in that page? If so, how do I add dummy space to accommodate correctly using min-height?
@Ammardinho open the Settings tab in codepen and under CSS paste this link > https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css
and then save
ammardinho sends brownie points to @doko85 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @doko85 |http://www.freecodecamp.com/doko85
@JackEdwardLyons these are the key, values you're looking to compare:
var testKey = Object.keys(source)[0];
console.log(testKey);
var testValue = source[testKey];
console.log(testValue);
your getting all the keys from the object
it could have multiple
@jdtdesigns do you know how to actually design an icon like the ones in the right chat menu that have a little circle showing the online status? I want to design that inner circle...
jackedwardlyons sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 553 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
am I doing something like this ? @hiltydiggs
for ( var i = 0; i < collection.length; i++ ) {
if ( collection[i].hasOwnProperty(testValue) ) {
console.log("test");
}
}
@JackEdwardLyons use
var testKeys = Object.keys(source); as @jdtdesigns said. I'm working through it myself. It's been changed since I did it last.
@JackEdwardLyons sorry. Didn't mean to lead you astray.