I will need a key, right?
Hi guys.. wt is the best way to move projects from codepen to github?
is it by exporting as github gist or by downloading it to PC and then pushing up to github..
thanks
is it by exporting as github gist or by downloading it to PC and then pushing up to github..
thanks
@mzedlach http://codepen.io/MessiaHack/pen/JbMbja
can someone point out what I've done wrong with my SASS variable declarations on my pomodoro clock project?
$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: $yankeesBlue;
}
@MessiaHack I'm sorry I'm not sure of how much help I can be. What are you tryign to do ?
@mzedlach perhaps in the meantime you could help me? haha
@mzedlach in pen mode, the star in the background shows up right behind my logo. However, in full mode, it shows up below and out of sight. I prefer the way it looks in pen mode
How do I center my text for this challenge? do I need to create a style element?
For the paragraphs and headings
@zamora88 eveni want to know he same
set the text align property to
text-align: center for whichever element needs the text center @zamora88
@MessiaHack I am tempted to say that it is either because of this: background-size: cover; or " position: relative;" although, I think ti's the background-size:cover
@MessiaHack If you want that image the be the same every time, I think you have to make it so that the size is fixed and not relative to teh window size
which is what I think the "cover" does
@jrandallhansen Do I need to do <style> and then that?
@MessiaHack As for specific code, I'm not sure... background-height: ##px?
@jrandallhansen I wish I could try adn help, but your code is beyond my ability.
@zamora88 I suppose so but you should have a separate style sheet (CSS) file
@mzedlach Ya me too apparently lol. I tried to look at that star question as well. I am not sure either. I would have to do some Googling
hi guys. i have a bootstrap and i cant adjust my cellspacing on my tables. is there a way to adjust it?? i even tried overriding it. but still no luck
@MessiaHack Another tip ~ put it in full mode and then re-adjust your windwo size. See how everythign is adjusting to the window? If you want it fixed, you need to set more strict values to the height and/or width.
thanks for the tips @mzedlach
messiahack sends brownie points to @mzedlach :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @mzedlach |http://www.freecodecamp.com/mzedlach
@MessiaHack I really hope that was helpful.
maybe you can help me on one other thing. In the porfolio, for some reason, the third column in the row wants to move to the next line.
@MessiaHack Use background-position combined with media queries to set up how it looks on different screen sizes. You could also just screenshot it with your logo on top and then use that as your header image.
okay. thanks for the tip @TylerMoeller
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1085 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller I'm just looking for the link to put in. Where did you find: https://api.wunderground.com/api/<<<Your API Key>>>/conditions/q/autoip.json
oh!
i got it i got it.
I can't read apparently.
Sorry.
:)
@jrandallhansen So all of my text and my photo is aligned to the left of screen. I put that suggestion in my css box but nothing happened.
@TylerMoeller So I don't actually understand where you go this from: https://api.wunderground.com/api/<<<Your API Key>>>/conditions/q/autoip.json
I'm looking at hte side, but how did you know to change htat last bit?
The example they give is for a spot in CA
oh man... clicking the link, it says i have to have cookies enables... and i cannot find cookies in chrome.
I'm starting to reach peak frustration.
lol
jsfiddle how do i escape the apostrophe (') and count "I'm" as one word
i'm about to lose my mind alkdsjfoiuqwerpuj
I see no cookie icon like the one I found in google.
apparently my cookies are enables...
enabled**
oh, there it goes.
for no reason.
I think I'm done for the night.
lol]
is there a way to override a bootstrap to have have a cellspacing?
okay. I've hit a bit of snag again in my code. in my portfolio section, I cannot get the 3rd column in the row to display inline with the rest of the code, and I can't get the image to center inside the block. I've tried every property and tag I know, but am at a loss and need some guidance.
http://codepen.io/MessiaHack/pen/JbMbja
http://codepen.io/MessiaHack/pen/JbMbja
@TylerMoeller every link that i use pins me to California
every single one.
http://codepen.io/artoo/pen/ZBbYyM?editors=1000
hello is there a way that i could separate my tables? tried using cellspacing but it is being ignore because of the bootstrap. tried over riding it nothing happens. thank you!
@TylerMoeller I'm using this: http://api.wunderground.com/api/key/geolookup/q/37.776289,-122.395234.json which is for logn and lat. And I replace "key" with my api key.
@mzedlach See those two numbers at the end before
.json? Those are the latitude and longitude
Try this URL instead: https://api.wunderground.com/api/key/conditions/q/autoip.json (replace 'key' with your API key)
So why is the documentation for "geolocation for long, lat type" giving me a specific link
They're just giving an example I believe
Looks like they give San Francisco as the example: https://maps.googleapis.com/maps/api/staticmap?center=37.776289,-122.395234&zoom=10&size=200x200&scale=2
So where did you get htis from?
I just don't get it. There is all this documentation and I read it, but I just dont' feel like I find anything.
I believe it was from their Test Console: https://apigee.com/resources/wunderground?apig_cc=1
I don't understand how you found it from there. I've been tinkering with that for at least half an hour.
I guess i didn't pick the right one.
I see where you got it from now.
Okay
So, once I put this in, this will tell the js where to get the lat, long info from, right?
That's all this does?
@mzedlach Yes, try this:
var api = 'https://api.wunderground.com/api/<<KEY>>/conditions/q/autoip.json';
$.getJSON(api).done(function(data) {
$('body').append(JSON.stringify(data))
});You can then copy/paste the output into a tool like this to make it easier to read: http://codebeautify.org/jsonviewer
Click the "Beautify" button to see it better
I finished my tribute page but how do I get the code pin to enter to move on>
@TylerMoeller Nothing in generating. " Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'"
And why .done?
What does that do?
Nevermind I got it.
The .done() fires after the API call is complete. From: http://api.jquery.com/jquery.getjson/
$.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
.... I am so lost
I have to include all of that in the code as well?
Dude
I don't understand any of it.
Let's start from something simple
It completely changes anything that i had from before.
okay, so you only added:
$('body').append(JSON.stringify(data))
$('body').append(JSON.stringify(data))
I changed
/geolookup/ in your URL to /conditions/ and then added $('body').append(JSON.stringify(data)) so the data would print to the page
why did you change it to conditions?
what's the difference.
Try it out - replace
/conditions/ with /geolookup/ and see how the data prints differently
I just don't understand HOW you get all this information from teh FCC lessons and from documentation.
it's just beyond me
It's seriously been a month I"ve been on this API stuff.
A month
and every time I sit down to figure thigns out, I end up more frustrated and more confused
Because every person I ask has a different way of doing it, it seems like.
I'm sorry, I'm venting. I'm just so frustrated.
The documentation is never geared for beginners unfortunately, so it's an iterative process of learning, trying, failing, learning from those failures, and moving forward.
I'm just so lost with JSON that I don't even know where to place the console.log.
lol
:)
So, changing that bit to geolocation generates A LOT more information.
$.getJSON(api, function(data) {
});function(data)?
yes :)
That's called an anonymous function
All the information that comes back from that URL gets stored in
data
okay
You can then do console.log(data) inside the anonymous function to view the information stored in the
data variable
You can also write it to the <body> of your page like we're doing
$('body').append(JSON.stringify(data))
Okay, so... that line says .... from the api variable (which is a link) call on a function which removes all that data into a variable called data?
is that right?
So, it's more like:
$.getJSON(api, function(data) {
// do something with the information stored in the data variable
});
okay
So
$('body').append(JSON.stringify(data))
is the same as
$.getJSON(api, function(data) {
console.log(data)
});
in terms of.... it will print all the info in "data"
wait...
Yes, those are different ways of printing the data. One way adds it to the <body> element of your web page, the other way logs it to your browser console.
okay
So, what is hte benefit of using this
$('body').append(JSON.stringify(data))
especially if all you need to work with is the data from taht json?
And, slightly unrelated ~~ the web info I gave you.. can peopel now see where I live based on the key code?
okay
No, only Weather Underground and Codepen Admins will know where you live
I'm sure they have better things to do :)
Lots of weather apps running on those servers
LOL
So, I thought that THIS bit of code is what changes the text :
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
I mean, orginally that's what I though. Although, I'm thinking that's not the case anymore.
For the Build a Personal Portfolio Webpage challenge, am I starting with blank template like the first challenge , Make a Tribute Page?
Yeah, that code isn't needed any more. You have one URL that gives you location + weather all in one
@zamora88 Yes :) Unless you'd like to carry over things from your tribute page
@TylerMoeller So, how do I do it so that that string of code IS used?
So, wait... that entire IF statement is unecessary?
@mzedlach Remember the URL you had before that was always showing you california? You would replace the final two numbers at the end of that URL with
position.coords.latitude and position.coords.longitude
That URL isn't needed any more though.
@mzedlach Ok. Is it the same idea with the HTML, CSS, and JS boxes?
I don't see a link for a blank template to build the portfolio.
@zamora88 Go into your codepen, click on the box head on teh top right and select "new pen"
@TylerMoeller I don't understand what that means.
Tyler, than you for all of your help.
@mzedlach Gotcha. Just found it.
@mzedlach Did you learn code on this program?
I was going to go along with that video because it was something that I thought could help me from start to finish. I think I just need one show-me-exactly-how-to-do-everything-from-start-to-finish video or guide and it will help me get out of this rutt of non-comprehension. @TylerMoeller
@mzedlach When you were using navigator.geolocation, it returned your Latitude and Longitude
I don't see how someone is suppose to be equipped to build a portfolio page with only the training up to this point.
@TylerMoeller right and I was going with that becuase its' what htey taught us.
I know there are A LOT of differnet ways to do things~ that's where I get hung up with these challenges.
Just like we got all the weather information in a
data variable, you got latitude and longitude in a position variable.
right
Has anyone one here done the "Build a Personal Portfolio Webpage" challenge?
@TylerMoeller Reallly, thank you so much for all the help. I would send a hundred cookies if I could.
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1086 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@zamora88 It can all be overwhelming at first, but if you have finished all the challenges leading up to the portfolio project, you know the basic vocabulary to start searching the web and reading documents. Expect to spend 20-30hrs on it.
Lol, no worries. I do need to get to my Seahawks game soon though :) :football:
@TylerMoeller Watching the game right now.
I'm just so lost. I thought the video would help and I coudl get additional help wtih taht on here... but I just feel like I'm back to square one. .
I am a hardcore Panther fan but they are trash this season.
I do enjoy watching Wilson play though.
@TylerMoeller sort of. You were just showing another way of doing it. But, really thank you for trying. :)
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mzedlach already gave tylermoeller points
@TylerMoeller So I can search Google and coding websites to figure out how to do this?
@mzedlach Now that you have the API call working though, you can just parse the data the same as in this challenge: https://www.freecodecamp.com/challenges/accessing-objects-properties-with-bracket-notation
Goodnight everyone! Off to bed. Up at 4 am to teach.
Then write it to HTML as in this challenge: https://www.freecodecamp.com/challenges/convert-json-data-to-html
Oh, for sure! They are missing a lot of opportunities this season.
@zamora88 Yes, you can search and read all the documents needed. Take your time - you can always go back and make it nicer later when you learn more.
They could have won last week against the Raiders but couldn't execute
omg... i don't even see how that is related to this challenge.
LOL
:(
I'm running to bed at this point.
I know.
I know...
lol
It's all about getting JSON, parsing it, and writing it to the page in the end.
:sweat_smile:
Gotcha!
head exploding .... head exploding....
:boom:
goodnight! :D
Are there any particular websites or pages I could use for research? @TylerMoeller
Hello can anyone explain do I need to choose sass or scss?
@zamora88 Probably best to start here: http://getbootstrap.com/css/
It's hard to read all of that though....I did my portfolio one step at a time. Started with the Navbar, then a Header, then different sections, and finally a footer.
Anyway, I gtg
@TylerMoeller thanks, man! enjoy the game!
zamora88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1087 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
http://codepen.io/artoo/pen/ZBbYyM?editors=1000#0
hello need help guys. i have a form by default theyre displayed on column and since i need to customize them to look clean i position them absoluty and gave them a top and left specific position. the problem is when i switched to landscape from portrait it jumbled my work. you have experienced this before??
Hi guys! Can you let me know if my weather app works for you? I'm thinking I might get weird temperature values but I'm in China at the moment so that might be why.
http://codepen.io/Diane106/full/qqxNBe/
http://codepen.io/Diane106/full/qqxNBe/
looks good to me from California @106Ch213, what are the 2 measurements below? high/low for the day?
at least for the main temp my project also shows the same values
does anyone know how to access the info on this page? the 2 paragraphs?
for the twitch api project
@coymeetsworld awesome thanks for the feedback! Yes it is :)
106ch213 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1577 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
np @106Ch213, you may want to indicate that somewhere on the page just so there's no confusion
@coymeetsworld Good point I'll add it
Hi everyone! Quick ? Our tribute page can be on anyone right?
yes @CSims20
@coymeetsworld okay awesome! Thanks!
csims20 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1579 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
seen some people do fictional characters that should be fine too if you're thinking about it
@artoodeeto - absolute positioning is very difficult to use for good responsive behavior, at least that is what I think. If you are trying to do something like this, perhaps using the Bootstrap grid would be helpful?
@khaduch yea. thats what i thought. i changed it. thanks'
artoodeeto sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2032 | @khaduch |http://www.freecodecamp.com/khaduch
@tommygebru - do you mean just getting the text?
@106Ch213 - hello Diane - looks good for me, although I'm seeing a background of what appears to be a hurricane, so I don't know if that is supposed to reflect the weather here? We are supposed to be getting some snow, but I don't think a hurricane is in the forecast... :) But the location and weather info appears to be correct.
hey guys i have a form that needs to be submitted to a private email and currently im using free version of formspree, do you have any other 3rd party party services that i could handle form? dont know how to use php yet and ruby on rails so. hit me up. thanks
@khaduch hello thanks for the feedback! The picture isn't linked to the local weather but I see why this is confusing so I think I'll change it :)
106ch213 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2033 | @khaduch |http://www.freecodecamp.com/khaduch
How to write a function that will accept the below Json as input and will output the below formatted json
var jsonArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];
How to write a function that will accept the above Json as input and will output the below formatted json
var jsonData = [{
"tagValueName" : "PCI",
"type": "priorityAlertsCount",
"count": "20",
},
{
"tagValueName" : "PCI",
"type": "investigationAlertsCount",
"count": "140",
},
{
"tagValueName" : "PCI",
"type": "incidentAlertsCount",
"count": "100",
},
{
"tagValueName" : "PCI",
"type": "otherAlertsCount",
"count": "40",
},{
"tagValueName" : "ABC",
"type": "priorityAlertsCount",
"count": "100",
},{
"tagValueName" : "ABC",
"type": "investigationAlertsCount",
"count": "60",
}];
an input, you mean you want to add it to the bottom JSON data?
can you explain the task a bit more please @Rakesh18754
you will need to slice the array , and rename the key's to match the keys in the json below
@JackEdwardLyons I want to write a function that will accept the first var as input and then will format the json and output it in the format which i have mentioned
can u provide some code...actulaay i am new to JS....
so, the input for the first variable is an array with two objects
yes right
it can conatin n number of object...
so to access the first object you would write
jsonArray[0]
for all objects
iwould use a forEach loop
one second
how many inputs do you have?
only one array which can have n number of objects
@JackEdwardLyons but all have the same sructure
this jsonArray
is different to the below arrays, does that matter?
var jsonArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];is different to the below arrays, does that matter?
@JackEdwardLyons
var jsonInputArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];output should be
var jsonData = [{
"tagValueName" : "PCI",
"type": "priorityAlertsCount",
"count": "20",
},
{
"tagValueName" : "PCI",
"type": "investigationAlertsCount",
"count": "140",
},
{
"tagValueName" : "PCI",
"type": "incidentAlertsCount",
"count": "100",
},
{
"tagValueName" : "PCI",
"type": "otherAlertsCount",
"count": "40",
},{
"tagValueName" : "ABC",
"type": "priorityAlertsCount",
"count": "100",
},{
"tagValueName" : "ABC",
"type": "investigationAlertsCount",
"count": "60",
}];
weird..
what do you need this for?
what do you need this for?
@JackEdwardLyons actually i am trying to plot a chart
and my chart requires data in that specific format
ok, well im probably the wrong person to ask, this is weird how the above array is so varied from the second array, in terms of key value pairs... they are totally different
In ikipedia
In Wikipedia Viewer， what kind of thing should I learn?
@Rakesh18754
var jsonData = [];
var keysToDrop = ['tagValueName', 'tagValueId'];
jsonArray.forEach(function(json){
Object.keys(json).forEach(function(key){
if(keysToDrop.indexOf(key) === -1){
jsonData.push({
tagValueName : json.tagValueName,
type : key,
count : json[key]
})
}
});
});
@khaduch yeah is it possible to get the text? or is that not available through the api?
Hi all, I'm trying to create a button that toggles through 2 alternating options. This is my code:
Thing is, the code inside the comments only runs once. Any pointers?
$("h3 a").on("click", function() {
counter += 1;
console.log(counter % 2);
/*
switch(counter % 2) {
case 0:
$("h3").html(Math.round(data.main.temp * 1.8 + 32) + "<a href='#'>°F</a>");
case 1:
$("h3").html(Math.round(data.main.temp) + "<a id='temp' href='#'>°C</a>");
}
*/
});Thing is, the code inside the comments only runs once. Any pointers?
$("h3 a").on("click", function() {
counter += 1;
console.log(counter % 2);
/*
switch(counter % 2) {
case 0:
$("h3").html(Math.round(data.main.temp * 1.8 + 32) + "<a href='#'>°F</a>");
case 1:
$("h3").html(Math.round(data.main.temp) + "<a id='temp' href='#'>°C</a>");
}
*/
});
Anyone?
@swatbone85 I don't get what are you trying to do but..... why aren't there
break; after switch cases ??
@swatbone85 uh.. nevermind seems those are commented out ... hard to fiqure via IRC
@swatbone85 oh, so you were asking about commented out code lol
@swatbone85 so my question remains ~
@Mr-Kumar-Abhishek Yes, because the console.log works fine, but when I remove the comments the code only runs once...
@swatbone85 so my question remains why not using
break; after switch cases ??
@Mr-Kumar-Abhishek Because I forgot them, and added them after. Thanks for that! The code still only runs once though...
swatbone85 sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@swatbone85 hmm... okay so after breaks what is the error here...
@swatbone85 is this over codepen ??
@Mr-Kumar-Abhishek I'm working on the local weather challenge. I'm trying to alternate between C and F, so the button needs to toggle between the two. No this is pasted from Atom
@swatbone85 i see.. let me fiddle it around https://jsfiddle.net/ then..
is it possible to make a getjson call within another getjson call?
@tommygebru I put a .ajax inside the success function of another .ajax and it worked fine!
@tommygebru So I reckon the same should work for getJSON :)
ok :smile:
@tommygebru : Yes you can.
im really confused right now though
regStreamers.map(function(val) {
$.getJSON(twitchAPI + streams + val + callback, function(data1) {
if (data1.status === 404) {
$(".wrap").append("<div class='streamers offline delete'><span class='i-fix'><i class='ion-close'></i><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'></span><div class='info'><span>" + val + " </span><span>does not exist</span></div></div>");
$(".offline i").click(function() {
$(this.closest(".delete")).remove();
});
} else if (data1.status === null) {
$.getJSON(twitchAPI + channels + val + callback, function(data2) {
$(".wrap").append("<a href=" + data2.url + "><div class='streamers offline'><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'><div class='info'><span>" + val + " </span><span>is currently offline</span></div></div></a>");
});
} else {
$(".wrap").append("<a href=" + data1.stream.channel.url + "><div class='streamers online'><img src=" + valData.stream.channel.logo + "><div class='info'><span>" + val + " </span><span class='game'>streaming " + valData.stream.game + "</span><span>" + valData.stream.viewers + " viewers</span></div></div></a>");
} //ELSE
}); //data1
});//map
@swatbone85 probably your html structure messes around after the first run your script
@Mr-Kumar-Abhishek Yeah that may be it. I'll dig a little deeper, thank you!
swatbone85 sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:warning: swatbone85 already gave mr-kumar-abhishek points
@swatbone85 after js changes your html it should still maintain
<h3><a>your text</a></h3> no texts between h3 and a
@swatbone85 I making js fiddle to show you ...
@Adi2Point0 @swatbone85 basically i was able to get all working but when i mixed the jsons together only 2/3 conditions would execute code not all 3 though...
data1 is pulling from this json https://wind-bow.hyperdev.space/twitch-api/streams/ESL_SC2
data2 is pulling from this json https://wind-bow.hyperdev.space/twitch-api/channels/ESL_SC2
I want to be able to create anchor links and wrap divs...
however because some streamers are offline... I have to change the api call to get the url from a different json
data2 is pulling from this json https://wind-bow.hyperdev.space/twitch-api/channels/ESL_SC2
I want to be able to create anchor links and wrap divs...
however because some streamers are offline... I have to change the api call to get the url from a different json
oops ok i fixed some of it
but still the same problem
but still the same problem
regStreamers.map(function(val) {
$.getJSON(twitchAPI + streams + val + callback, function(data1) {
if (data1.status === 404) {
$(".wrap").append("<div class='streamers offline delete'><span class='i-fix'><i class='ion-close'></i><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'></span><div class='info'><span>" + val + " </span><span>does not exist</span></div></div>");
$(".offline i").click(function() {
$(this.closest(".delete")).remove();
});
} else if (data1.status === null) {
$.getJSON(twitchAPI + channels + val + callback, function(data2) {
$(".wrap").append("<a href=" + data2.url + "><div class='streamers offline'><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'><div class='info'><span>" + val + " </span><span>is currently offline</span></div></div></a>");
});//data2
} else {
$(".wrap").append("<a href=" + data1.stream.channel.url + "><div class='streamers online'><img src=" + data1.stream.channel.logo + "><div class='info'><span>" + val + " </span><span class='game'>streaming " + data1.stream.game + "</span><span>" + data1.stream.viewers + " viewers</span></div></div></a>");
} //ELSE
}); //data1
}); //map
@tommygebru I wish I could help. But the APIs seem to have been blocked at my work proxy
so can't get the data
@Adi2Point0 ok no worries...
i am not sure it has to do with the api links maybe has to do with the logic of the if statement?
i am not sure it has to do with the api links maybe has to do with the logic of the if statement?
@swatbone85 is this is how you have done conceptually ? https://jsfiddle.net/st7qaeu2/8/
@swatbone85 https://jsfiddle.net/st7qaeu2/11/ ... new...
@Mr-Kumar-Abhishek Yes. Maybe something changes in the html. I tried using a button to convert instead of the text, and then it works fine. Although I'd rather not use a button, but click the text like I'm doing here.
@tommygebru as far as i know, the twitch api from august or so, requires you get an registered user key. its free but you have to register
I think fcc did something about that twitch api, I saw couple of times people using some hyperdev link
to bypass that client-id process
i posted the links earlier @kirbyedy @sorinr
@kirbyedy yep. u r right. read about it somewere
this screenshot shows that the first if condition passes and the last else condition passes.....
but then that leaves the second condition else if, which does not pass
@tommygebru i think here else if (data1.status === null) is the problem. it shouldn't be data1.status but data.stream or something like this
@sorinr omg you are a god :angel:
@tommygebru if you console.log(data1.status) will probably get 200,404 etc
that did it
yeah
im using atom right now its so difficult!!!
using atom too and i feel very comfortable with it
@sorinr you devs with all the big nasty machines .. I have to resort to using vim, emacs or at most geany
::p
:p
@Mr-Kumar-Abhishek i don't like atom when using big css files. it moves too slower but i open the file in notepadqq and edit it there
@sorinr some say sublime text is lighter .... I don't know... tried using it ??
oh yeah atom is super slow and other issues too
@tommygebru I haven't used sublime text... but was thinking of compiling 'lime text' instead
also sublime its quite nice. i suspect my issue with atom is the pigment package i'm using for colors
@sorinr yes atoms needs a lot of work in optimisation .... I may as well look its source code ...
@sorinr yes atom needs a lot of work in optimisation .... I may as well look its source code ...*
https://github.com/atom/atom this is too much history :/
so i am done! I just have to fix some of the new errors on the github version tomorrow
@tommygebru :+1:
Hey guys, that's a noob question, but what's the way to make a page design like this?
Sublime is fast and people like to use it.
I myself prefer Visual Studio Code quite much to all of the others because it has better IDE possibilities
(Git integration, Integrated Plugin System, Debugger...)
And its as fast as Sublime Text
https://code.visualstudio.com/?utm_expid=101350005-35.Eg8306GUR6SersZwpBjURQ.0&utm_referrer=https%3A%2F%2Fwww.google.de%2F
I myself prefer Visual Studio Code quite much to all of the others because it has better IDE possibilities
(Git integration, Integrated Plugin System, Debugger...)
And its as fast as Sublime Text
https://code.visualstudio.com/?utm_expid=101350005-35.Eg8306GUR6SersZwpBjURQ.0&utm_referrer=https%3A%2F%2Fwww.google.de%2F
Oh, thanks, didn't notice that the editor view is available
@alpox I was trying to install intelij a few hours ago nearly burnt my computer doing that.... I have to make my own editor some day it seems lol
@Mr-Kumar-Abhishek I wasn't talking about intellij, but intellij is usually a good choice too, but you're right, it is not what i would call lightweight :D. Works well on my computer though
@Mr-Kumar-Abhishek I can always recommend VIM though. That would be one of the most leightweight, though powerful editors. I use it for a lot of stuff and i cannot program faster with any other editor
uh...... how should a weather app should look like any examples ?/
does someone want to do the local weather project with me?
@Mr-Kumar-Abhishek whatever you like, sky is the limit
the nicer the better
@kirbyedy got it then first a basic design and functionality weather app ... afterwards enhancements :)
@kirbyedy got it then first with basic design and functionality weather app ... afterwards enhancements :) *
yep
hey abhishek are you done with the project or are you just beginning?
@Mr-Kumar-Abhishek
@ivangeorgiew I started working on weather project ... doing it on github... it is a better workspace in organising what to do, I sometimes get blank what to do next so... scrum style helps ~
@Mr-Kumar-Abhishek great
i do my projects in github also
do you want to do the project together?
@ivangeorgiew as in to code pair ?/
the weather one
yeah
we can talk via discord or smthg
and make the project faster this way
@ivangeorgiew sure , but I don't receive any offline messages in github so you have to email me for that .. I could receive gitter messages when I am online
@ivangeorgiew sure , but I don't receive any offline messages in gitter* so you have to email me for that .. I could receive gitter messages when I am online
do you have google hangouts account?
@ivangeorgiew nope I stay away from google ...it is not a problem for me .. I will set up offline gitter to IRC bridge
but we can't screen share this way
@ivangeorgiew we could share the code , and... lets see there is gist ... and js fiddle ... (work like a pro )
its not about the code man
i can do the project on my own
i want someone to talk it through
i dont have problems with the code itself
its just that i get bored doing it on my own
@ivangeorgiew you could send the pictures in gitter (blob) and I .... sorry can't help with video conference mine is a hand made computer ,
ok nvm then :)
@ivangeorgiew built it from scratch ~
good for you :D
yeah did all the kernel hack for the new hardware etc... it became a nice prototype
Regarding the "Build a Tribute" front end challenge, how exactly am I suppose to approach this. Am I suppose to use bootstrap? Or am I using css and html?
What constitutes a pass or a fail. I feel like I could make a very basic website with just html and css in a couple of hours, yet there's 50 hours set aside for this
@Samudabamu use whatever you are comfortable with.. and always learn something new while doing it
@Mr-Kumar-Abhishek thanks for the response. Is there something I should really strive towards understanding?
samudabamu sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@Samudabamu if you are already experienced in making simple web pages make this quickly and add your unique creativity to it. The hours you save would be utilised in the later projects .
@Mr-Kumar-Abhishek I actually know nothing! : P
@Samudabamu then make the webpage `~ and see how it goes :) and enhancements afterwards , hours saved will be helpful in future projects ..
@Samudabamu strive to understand css and html and bootstrap.. learn how to use them at best
@Samudabamu key is to learning how to use them and not learning the whole html css and bootstrap .
@Samudabamu learning the whole stuff takes time and often not that productive at the start.. being practical matters while in code camp
@Samudabamu learnt while doing projects makes a good understanding
hello )) help me ) i do not understand , how i can make NAV-BAR
When reducing the screen horizontally )) now i have this : https://smefinka.github.io/module-test/bright/
When reducing the screen horizontally )) now i have this : https://smefinka.github.io/module-test/bright/
(You can push the "Start" button to start the game.)
does anyone want to pair-program on the advanced front-end projects?
@Smefinka why not use bootstrap's navbar ??
hello....am at the portfolio website project, help with placeholder, i got no prior websites
placeholders ....?
U can use different ways
like @evan17gr ...
U can either put photos or actual placeholders
okay thank you, thought placeholders was a class
U can do button type=placeholder
http://codepen.io/Waqas909/pen/yVooZE
Why doesnt the Search Box and Random Article transition?
up
they have transition feature but it moves up instead of transition
When u mean transition u mean that it should move when u click it?
when u press enter
it transitions slowly up
instead of instantly
so when Enter is pressed, search box and random article title gets a moveup class (which has property to move it up)
U use @keyframes for that
no no, it was working fine
but idk why not anymore
so it transforms to a position up a bit
with a transition
so it's not instantly
Oh k
I don't know then
Does anyone need help here?
yea .-.
me @Alfarissaoud
hello everyone! can someone help me with Twitchtv JSON API task? it says "No 'Access-Control-Allow-Origin' header is present on the requested resource", when i'm trying to get json from https://wind-bow.hyperdev.space/
@kolyambo add "&callback=?" end of ur Api link
@Waqas909 just it? "callback=?" without any info?
@Waqas909 You seem to have loads of conflicting classes (transform effects).
i'm asking, because it shows me other error :\ but it fixed cross domaing request for sure
@JohnnyBizzel But I only have 1 transform effect, others are transitions?
@Waqas909 Is this what you are attempting? http://codepen.io/JohnnyBizzel/full/YpaNqz
@JohnnyBizzel I see no difference .-.
@Waqas909 I don't know what you are attempting to be honest
@JohnnyBizzel Actually none of my transitions work
@JohnnyBizzel Could it be my browser?
@Waqas909 Try a different browser
@JohnnyBizzel Okay you know how the search bar expands
as you focus on it
that expansion is suppose to happen with a transition, so it looks nice :sa:
@Waqas909 Works for me - about 0.5 secs
And the random article and input box move up the page in about the same time.
On FireFox and Chrome browsers.
And the random article and input box move up the page in about the same time.
On FireFox and Chrome browsers.
Yea it expands
but it instantly
@JohnnyBizzel Yea, The problem is my Transition properties arent working
@Waqas909 What is it meant to do?
@JohnnyBizzel Slow the expansion, so it's a smooth expansion (Search box)
@Waqas909 How slow do you want it?
1s .-.
@Waqas909 Done: http://s.codepen.io/JohnnyBizzel/debug/YpaNqz
@JohnnyBizzel It's still instant for me
nvm
it's my browser
so what did u change?
@Waqas909 Which browser?
Mozilla
@Waqas909 version?
@JohnnyBizzel I just downloaded it yesterday .-.
@JohnnyBizzel Did u change anything?
@Waqas909 http://caniuse.com/#search=transform
Try a different browser. View the source to see what I changed.
Try a different browser. View the source to see what I changed.
the code you sent, I'm unable to ch ange view to editor mode
@JohnnyBizzel Nvm
@JohnnyBizzel Thanks Man! So my transition properties were wrong i guess
waqas909 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:cookie: 929 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
@TheTessaMurphy thx after two days, I read your message
lawfets sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 261 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
$(document).ready(function(){
$("#testWeer").on("click", function(){
var data = $.getJSON("http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0", function(data){
$("arrayWeather").html(JSON.stringify(data));
});
});
});
why don't I get any output with this function?
oh, btw, good evening , everyone
@lawfets did you check the console for errors?
no errors showing
@lawfets You need to add "&callback=?"
to the api link
@Waqas909 xcuse me???
@lawfets btw
arrayWeather are you missing a #
after the key?
oeps yes,
yea
``
http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
@lawfets also make sure to check errors from Inspect element console
@Waqas909 @oppiniated nothing yet
can you share the link ? @lawfets
@lawfets You need to add Jquery!
is json jquery?
@lawfets From the settings, that could be the reason why
@Waqas909 I'll try it out
"$" = Jquery
Short way of writing Jquery
@lawfets json != jquery
Json = JavaScript Object Notation
Hey guys I would like some feed back on my tribute page if possible.Please be as harsh as possible. thanks http://codepen.io/Tron2097/pen/QGMJML
json is a data representation format.
Jquery is just a tool
this is a book
yes but why do I have to add jquery then?
and btw, it doesn't work
Because Jquery is not a built-in tool
and I added jquery in the html file
@lawfets jquey is a js library
no, you need to add it through setting @lawfets
I did, but it still doesn't work
Save it
So we can see .-.
@lawfets do you have a link we can see?
@oppiniated how do you mean? I gave you the codepen link
@lawfets Why are you using ".html"
.html is used to add html
because I tried everything and nothing seems to work
I even tried return data;
and I saw in the challenge they did it that way, so I tried
in the challenge they do it because they add html
@lawfets Create a <p id="#test> </p>
then use .text
target test
if I use Id i have to use # in the javascript not in the p tag
@lawfets I see the problem
yes, please??
@lawfets The link is an Http link
yes???
so naturally codepen blocks http links
because they are not secure, preferably you want to use api's with have https links
so if I try it on my local server it should work?
Yup
but
there's a way around this
I went through the same problem
@Waqas909 @oppiniated please tell me, because I've been searching for two days, even missed my streak yesterday, because of it.
@lawfets https://crossorigin.me/
add that before your api
so
@lawfets load your pen over http not https and you will get a response
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
@sorinr how do I load my pen over http?
@Waqas909 I'll try that one out
@lawfets change the url in the browser search bar and cut https from it
@lawfets for future reference, find api's with https links
nope, not working either way
if I try the url itself it works right a way, but not in my code
I'm sure, it'll be something stupid again that I didn't do or see
morning guyz
@lawfets Btw this isnt related to your problem., but i see that you're using bootstrap classes, so you should add bootstrap in the CSS settings
@Waqas909 yeah, I know, but I want to solve this problem first, the rest is peanuts
please help me with this ----> how do i navigate to different sections of the webpage by clicking buttons in the navigation.
@lawfets The APi you are requesting
is too large
<p id="#test> </p> // close the id tag
@Waqas909 how do i navigate to different sections of the webpage by clicking buttons in the navigation.
@Waqas909 how do I shorten it?
@lawfets I think you're using the wrong API. Are you using the API, the challenge provides
@bitcoinabdi I'm not sure exactly, but this is a popular question. So you should be able to find alot about it
@Waqas909 yes, I am
@lawfets If i' not wrong, You are suppose to find the weather of the user's location? instead of some city?
no, it says, your city or close to it
@lawfets User Story: I can see the weather in my current location.
https://openweathermap.org/current#geo
See the example Api call
@Waqas909 wel, I have to see the weather in my current location
I did check it out
@lawfets So you should be getting what is in the Example Api Respond, Try using City name or lattitude or longittude instead of id
if it's Longitude and lattitute, then you can make it so it tells the weather of the person using it
@Waqas909 I did, still doesn't work
but I'll first try another way of activating the call
@lawfets You should be only getting this much
{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}
@Waqas909 If I test it out now, with bruges, it only gives that amount, if I try it in the code, it gives nothing
@Waqas909 as I said, the url is not the problem now I use the city name, it's something in the code that goes wrong
maybe now I'll try to add that https line before the http
nope, nothing yet, I'll copy my code to brackets and put it on my local server and see what I get there
@lawfets try the crossorigin
and put your api link right afte rit
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
Get your api call from that link
@Waqas909 I did, doesn't work
can u link me? ur project?
@lawfets Yes indeed there is a problem in your code
you need a callback function, if it is succesfull in getting the JSON you want it to get
~~~
$(document).ready(function(){
$("#testWeer").on("click", function(){
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=", function(data){});
});
});
oops
$(document).ready(function(){
$("#testWeer").on("click", function(){
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=", function(data){
});
});
});
I used the function data all the time and It didn't matter
function(data) // The data is the JSON it got
try it :)
nope , not working
@lawfets You are using "https"
for your api link
@lawfets openweather doesnt support that, it's http
@Waqas909 yes, just saw it, it's because I just tried https, but it doesn't work with http either
@lawfets Like I said add
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?instead of
https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback="
you have to use crossorgiin.me
it doesn't work
to make codepen.io think it's a secure connecting you're getting your JSON from
@lawfets example
var data = $.getJSON("https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?", function(data){return $(".arrayWeather").html(data);})
it's really weird
@lawfets Remove
&callback=? from the url and try again
nope, not working
@lawfets Yea I think you should go with @sorinr 's approach to this. it seems the website is offline
@lawfets Try it without crossorigin.me?
you know what, it doesn't work
@lawfets change your pen from https to http. have you tried my example?
@alpox @sorinr @Waqas909 thank you, I don't know what the difference was between sorins and my line (tried to write it exactly the same) but when I copy pasted the line, it worked
lawfets sends brownie points to @alpox and @sorinr and @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @waqas909 |http://www.freecodecamp.com/waqas909
:cookie: 674 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 895 | @sorinr |http://www.freecodecamp.com/sorinr
@lawfets It works :-) but your problem is what @sorinr says. Access codepen from http and make the call without
callback=? and without crossorigin.me
@lawfets The difference was probably that part:
function(data){html(JSON.stringify(data));
});the function html doesn't exist. there should have been some jquery selector before it
oh, now I see, html is between {}
nope, that was the same, my mistake
oh, it doesn't put it in the arrayWeather class div
that's why I used .html because I used{ (".arrayWeather").html
but why does it work in the third challenge of JSON api
@lawfets nothe that $(".arrayWeather").html... must be within the scope of function(data). the data response is not avilable out of scope
@sorinr I understand but watch this
$("#getMessage").on("click", function(){
// Only change code below this line.
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
here they use .message").html
@lawfets you can your your own class. they have just used .message
@sorinr yes, but if I use my own class, it doesn't work
@lawfets and you have to close } this function(json) {
@sorinr yes, that's something I always check for with the debugger
so, I tried it again with my own class now, but I'll have to wait for some time before it comes available again (free account 10 minutes waiting)
but have to go to the doctor anyhow, so i'll check when I come back
thanks a lot, you made my day people, I'll understand it after a while
@lawfets :+1:
:point_up: December 5, 2016 6:19 PM but if you use your own class don't forget that you also need an html element with the same class in order to work @lawfets
@sorinr but I do, that's what I don't understand, so now I'm using id instead but I cannot get any result. only your method seems to work, I'll ask about it on the forum because I really need to know why it works in the challenge and not in the task I'm performing now
hey people need help pls
this is my code working in a portfolio scroll page and after i use bootsrap this happened
this is my code working in a portfolio scroll page and after i use bootsrap this happened
@mohamedsaieed whats the problem
@moT01 if u run the code the header is overlapping
still not sure what you mean
the little picture, you want it down more?
no the navigation bar isnt n the wright track
you want the links to be right aligned?
does anyone have an alternative to transitions for IE 8?
yes @moT01
How to convert an array of objects into an array of arrays
I want to write a function that will accept var data and give output as transformed data
I want to write a function that will accept var data and give output as transformed data
input:-
var data = [
{
"name": "HTTP: IIS newdsn.exe File Creation",
"score": "100.0"
},
{
"name": "HTTP: Guestbook Execute Command Attempt",
"score": "45.0"
}
];
output:-
var transformedData = [
["HTTP: IIS newdsn.exe File Creation" , 100.0],
["HTTP: Guestbook Execute Command Attempt" , 45.0]
]
your code is not properly indented, ...makes it harder for people to help, or properly nested
your css is targeting id of #nav, ...there is nothing with that id
i put <nav class="navbar navbar-default navbar-fixed-top">
I cant get out of Build a Tribute Page
@Rakesh18754 create arrays, push the data to one of them, then push that array to 'transformed data'
https://codepen.io/NnamdiV/pen/yVppJN hey guys i'm not sure what's wrong but my navbar isn't showing quite well
@NnamdiV its your positioning
Hey
@moT01 how should i position it?
take out the position: fixed; in your css
@dcruz87 hey
so how do i make my navbar position fixed when i scroll the page? @moT01
@NnamdiV here is an example: https://getbootstrap.com/examples/navbar-fixed-top/
looking for a little help. Trying to get my contact form to be transparent except for a bottom border. However, even with how I currently have it coded, you can still slightly see the outline of the input fields and text area. Any advice?
http://codepen.io/MessiaHack/pen/JbMbja
http://codepen.io/MessiaHack/pen/JbMbja
@MessiaHack not quite following... what do you want to do exactly ?
who has completed the twitch.tv project i have used the new api but am not seeing the status of fcc like i should. it just doesnt work
practically compiled this IRC client and bridged with gitter only to find there is a forum has been developed then discovered forum is too heavy for my system :x
I'm wanting the text field to be invisible except for the bottom border.
@kirbyedy
this is my js code//////RUN JQUERY
$(document).ready(function(){
//STATUS AND API CALL FOR FREE CODE CAMP
var url='https://wind-bow.hyperdev.space/twitch-api/streams/?callback=?';
$.getJSON(url, function(data1){
if(data1.stream===null){
$("#fccStatus").html("Free Code Camp is OFFLINE");
}
else{
$("#fccStatus").html("Free Code Camp is ONLINE");
}
});
var followerURL="https://wind-bow.hyperdev.space/twitch-api/channels/freecodecamp/follows/";
$.getJSON(followerURL, function(data2){
for(var i=0;i<data2.follows.length;i++){
var displayName=data2.follows[i].channel.display_name;
console.log(displayName);
}
});
});
hello, Im about to start the intermediate projects, where can I get the apis?
@0sk4rgp they are given in the instructions or you can google as well
@MessiaHack
#message {
background-color:rgba(255,255,255,0);
border: none;
}
try with this for start, then develop from there
but there must be a more elegant way
actually, that's the code I pretty much have, but the input field still has a slight outline.
@kirbyedy
@kirbyedy I think that works fine , or
background: transparent;
funny thing, I have something similar
but as I am looking into the code its actually inside materialize library :D
@MessiaHack tried this ?
background: transparent;
oh
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
this does the trick apparently
lol. maybe I just have really good eyesight, because it's still the same thing lol @kirbyedy
@MessiaHack yes, I do see it as well :)
I need some motivation ~ later :)
@MessiaHack can you link materialize.css library to your codepen and tell me the result
It should automatically do it the way you wan it ;)
almost :D
need help pls
crap... there is still the hairline border on the textarea... arghhhh
navigation bar float is not right any helpl
@kirbyedy the contact form that's a good example is http://codepen.io/hallaathrad/pen/vNEPpL
http://codepen.io/moohibrahim/pen/MbJEVm
need help pls
@mohamedsaieed You have some errors in your css, I saw 2 places 0 px, I believe it should go together (0px) and also, if it's 0, you dont need to write px.
Also, for the margin right in #navdiv ul li, you wrote marigin instead of margin
Also, for the margin right in #navdiv ul li, you wrote marigin instead of margin
@MessiaHack To remove the small outline remaining, use
box-shadow: none;
Make sure you test out input modifications on all browsers though, they all handle these CSS properties a little differently.
I don't know if the people are still online who helped me out but guess what, it's not working anymore
is anyone trying to work on the weather project because I had some code that worked 2 hours ago and now it doesn't work anymore
can any body help me with this line of code function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
can any body help me with this line of code
what it is mean ?
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }what it is mean ?
@lawfets hi. it says invalid api key. log on to openweather api and generate a new key
@lawfets read here: http://openweathermap.org/faq#error401
@lawfets i would also recommend to disable autosaving and autorun in general pen settings coz each time you change even a dot in the code the pen autosaves and run and ofc will make a call to the api
@sorinr I did, and weird fact, now the first code I made that didn't work now works
@lawfets my example should work too if you change the old api key
@sorinr with the {html instead of $("#someId").html? because that doesn't work anymore and I've been said, it's because html is not defined as a function
@lawfets nope. this example but you have to replace the api key with the new one and it should work
@sorinr oh, that one, that's exactly what I did and now it works. thanks for all the help
:cookie: 896 | @sorinr |http://www.freecodecamp.com/sorinr
lawfets sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@lawfets here how i do when testing apis that have a limited plan. make just a few calls to the api until i'm satisfied with the returned result, grab that result store it in a variable and work on that variable until i'm satisfied with the layout and general design and then just switch back to api calls
@kirbyedy @TylerMoeller Thanks for all your help!
messiahack sends brownie points to @kirbyedy and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1616 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:star2: 1088 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@MessiaHack i would also offset the scrolling to the sections counting also the height of the navbar.
@MessiaHack or just do it by css
@sorinr what do you mean?
@MessiaHack now when you click on the menu for portfolio lets say the title portfolio goes beyond the navbar
@MessiaHack and its not fully visible
@sorin, I'm not having that issue in my browser. Using firefox. are you on mobile or using a different browser?
@MessiaHack here what i mean on chrome
ah. okay. lol. Thanks. That one is not my site. I linked that one as an example of something I was trying to accomplish. Here is mine:
http://codepen.io/MessiaHack/pen/JbMbja @sorinr
http://codepen.io/MessiaHack/pen/JbMbja @sorinr
@MessiaHack lol. sorry
no prob. thanks for the heads up though. If I ran into that issue, how would I offset it?
@MessiaHack i use scrolltop .offset().top-64 where 64 is the height of the navbar or just use a margin-top or padding-top 64px for each of your sections. witch one suites your needs
thanks for the tip @sorinr
messiahack sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @sorinr |http://www.freecodecamp.com/sorinr
@MessiaHack np
guys, I have my background and my logo image, the problem that my logo is behind the background image! here's my code
<main>
<!-- My logo image here-->
<div class="container">
<div class="row">
<a href="#">
<img class="img-responsive smaller-logo col-xs-12" src="http://i.imgsafe.org/5ba22bc802.png">
</a>
</div>
</div>
<!--My background image here-->
<div class="container">
<div class="row">
<seaction id="About">
<img class="img-responsive col-xs-12" src="http://i.imgsafe.org/5af5e14134.jpg">
</div>
</div>
</main>
any one can help?!
@MessiaHack and i would use in portfolio section instead of
<div class="col-xs-4 port-col"> something like `<div class="col-xs-12 col-md-4 port-col"> because now when you shrink the display you still have 3 pics on a row that have the class img-responsive so they get smaller and smaller
Hi again all! Thank you so much for your previous help. I am on the build a tribute page challenge. I have been searching for answers both in the forum and around the interwebs and everything I find says I should be using CSS with HTML.
I thought for this challenge we were to use only HTML. Can we also use CSS?
@McRobbah Yes, you can even use JavaScript if you want. The main idea is to practice using some of the concepts you have learned in the Free Code Camp challenges leading up to this project.
Those included both CSS and HTML
@TylerMoeller Okay, thank you!
mcrobbah sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hey people need help pls
the logo isnt in the left
@mohamedsaieed its because of the floats. comment this line float:right; in div.scrollmenu a {
@mohamedsaieed true, it floats on the right
maybe you can split it up, and have smth float on the left, and the buttons float on the right?
@sorinr when i did that all the navigation bar in the left
@mohamedsaieed thats normal
i want the button in the right
@mohamedsaieed if you keep the float: right in there you will notice that all menu links are all reversed
@mohamedsaieed because you have only one element, and it's either on the right OR on the left
argh, make two divs already:)
@sorinr @Marianissimus what can i do :D ?
so, one solution: make one div that contains the logo - and float it to the left; and another div that contains the buttons - and float it to the right.
as long as they are together, they move together. :)
@mohamedsaieed just for fun let the float: right active and change the order of defining html elements. move logo down below the about and so on. so your first link its actually the last one. hope it makes sense
@sorinr that won't change much. he wants the logo on the left and the buttons on the right, right?
@Marianissimus yes
@Marianissimus using that float: right in there its just like a RTL menu so if you want a LTR you have to define elements in a reverse order
I think he wants them separated, not together. @mohamedsaieed explain
@Marianissimus yes like any navihgatin the logo in left and button in right
like this. two divs
http://codepen.io/marianissimus/pen/gLeoEB
http://codepen.io/marianissimus/pen/gLeoEB
http://stackoverflow.com/questions/31276220/cors-header-access-control-allow-origin-missing when stackoverflow doesn't gives you answers :(
@Marianissimus excactly like this
@Marianissimus i wll send you pm
well, I split it into 2 divs... what other way is to do it?:)
@TylerMoeller are you up ?
I don't what i am doing up at 2 at night , should have used another API ~
okay later...
how do i add bootstrap to my codepen?
@Mr-Kumar-Abhishek Yes, I'm up. Lunchtime here
@oluchristian98 there are two quick add-ons in the option menu
one for js, one for css
ok. so where is bootstrap there?
i see stuffs like css base, css processor blah blah
quick add
the last menu, down
so codepen already has a pre-installed bootstrap?
that means i dont need to link my bootstrap file
@oluchristian98 By choosing that option, codepen is linking it for you. Take the codepen tour and it might make more sense. http://codepen.io/pen/tour/welcome/start
no, you don't. just make sure to link the css AND the js
i guess i should take a tour. i didnt do that when i was requested
cookies? :cry:
Whoops :( that tour doesn't show settings options any more....
@Marianissimus lol, just as bad to not give cookies as to ask for them
Thanks @Marianissimus you can have one from me :)
tylermoeller sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @marianissimus |http://www.freecodecamp.com/marianissimus
Well, thanks @TylerMoeller
marianissimus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1090 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
lol
Oops, I'm careless:)
I'm already getting fat here waiting for more react courses :)
wao am happy am back at FCC. i missed this place. i feel FCC is becoming part of me
@TylerMoeller lol
Twitch API Pass-through is not working for me. It just goes back to that page.
@TylerMoeller in a way react its just xml rendering with that virtual dom js part
@sorinr Yes, like inferno and vue.js
@lleander what do you mean by "Pass-through" ? i just got a free key and its working
Is anyone else having issues with the FCC Twitch API Pass-through? It looks like it is not working.
@TylerMoeller i like a lot vue for its learning curve. never looked into inferno :)
@TylerMoeller only the name scare the sh* out of me :)
Inferno is like an 8kb faster version of react :)
@sorinr FCC made some changes to the Twitch project. They advised us to use the FCC Twitch Pass-Through : https://wind-bow.hyperdev.space/twitch-api instead of https://api.twitch.tv/kraken so that we do not have to create an account in Twitch to have a key.
Can't believe they changed the URL for that...
@lleander yep. remembered i've seen some info on that.
@lleander but if someone wants to develop a real production app probably it should go for a registered key
@sorinr I agree but like me, I want to finish the projects first before diving into creating apps.
@Marianissimus pls take a look at this pen. i try moving the twitter share button to the bottom left and my efforts are futile. i av added bootstrap but still dont know whats wrong https://codepen.io/kristian98/details/JbNPXW/
@TylerMoeller i think i would dive into inferno a little :)
@oluchristian98 the margins are quite big, they mess up everything: 550px and so on
then, in order for position: relative to take effect, you must assign position: absolute to its parent
that means .quote-container position: absolute; .twitter-share position: relative;
last step, position your .twitter-share as you wish - just like this left: 10px
This message was deleted
Oh my gawd!!! I finally finished my calculator project. need some feedback:
http://codepen.io/emmanuelamador/full/bBLvgo/
It works well on mobile it's just that if you go smaller than that it gets messed up but who's gonna do that. lol
@oluchristian98 i would never ever use margins left or right of more then 20-25px. this will force you to write also media queries for lower screens. you can think in using for margins L or R at least in %
@emamador love your calculator. can u also make it in pink?:) just kidding
where to get good images ??
@Marianissimus lol i was thinking a few colors including pink but then i got lazy.
@emamador looks good, though i can input 98.3.3 successfully
@emamador if you chain operations
where royalty free , no copyright images ??
it doesn't work
where to get royalty free , no copyright images ??
it lets the previous number on the screen
@mosaic-greg yeah lol but it wont evaluate that into anything cause it doesn't make sense
Please help me out I'm just trying to make a simple grid and when i remove text/ or add it it wrecks it all
@sorinr i couldnt think of a better way to position my .quote-container in the center thats why i used that kind of margin
@sorinr is there any other way i can position it in center?
@Marianissimus i did as you typed. i still havent gotten out of it
@oluchristian98 i got it to work:) remove the big margins first, because you can't work like that - you need to scroll horizontaly :(
@Robertb4 what's up with that? the tic-toe challenge?:)
@Marianissimus av done that
@Robertb4 suggests to use
float while arranging boxes
@Robertb4 however I am just telling from design point or view , don
@Robertb4 however I am just telling from design point or view , haven't done anything on tic tac toe
@sorinr It definitely seems worthy of a closer look - performance benchmarks are pretty amazing
I am working on the twitch tv challenge and apparently the api is broken
I went to the example and it is broken due to the api issue
https://wind-bow.hyperdev.space/twitch-api/streams/habathcx just redirects me to the index
@Mr-Kumar-Abhishek All sorts of stock resources, categorized by license here: https://github.com/neutraltone/awesome-stock-resources
I will use float but now i wanna know why it is behaving this way in this specific case
Any ideas? I guess I could copy a JSON example and host it myself on my website
@idahogurl Looks like the URL changed: https://wind-bow.gomix.me/twitch-api/channels/freecodecamp
Change
https://wind-bow.hyperdev.space to https://wind-bow.gomix.me
Can't believe they changed that :(
@TylerMoeller thanks .. do you know what to do with this CORS error ?? https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
mr-kumar-abhishek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1091 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
CORS issue with css?
I usually use CDNs when I reference Bootstrap and other 3rd Party stuff
@Mr-Kumar-Abhishek You may want to create a link to avoid spamming chat with that huge image :)
[link text](http://url)
You probably need to paste the css from the file
Into the CodePen css area
@TylerMoeller sorry i am bridging through IRC.. I know get know what gitter is doing with the links
Thanks Tyler. The api link needs to be updated.
@TylerMoeller sorry i am bridging through IRC.. I don't know get know what gitter is doing with the links
@TylerMoeller sorry i am bridging through IRC.. I don't know what gitter is doing with the links *
@Mr-Kumar-Abhishek Now it's double posting...
@TylerMoeller is this small enough ??
It seems the cross origin proxy is not passing the data correctly to the API or the proxy has a technical issue at the moment. It isn't working
@Mr-Kumar-Abhishek You can verify by visiting manually in your browser: https://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json
@Mr-Kumar-Abhishek I'm sorry to repeat it again, but I think you need a different Quotes API that works over HTTPS so you don't have to rely on the proxy.
@TylerMoeller yes , :( I suppose I have no choice left ... couldn't find answers in stackoverflow too
@Robertb4 i had a similar issue with my calculator. But i had the opposite issue. every time i removed text from a div and it was empty it would add a bottom margin to the div. so i ended up placing the html entity code
which represents a space. kind of like a placeholder and it would go back to normal.
@idahogurl codepen is too heavy for my system for any sort of development
@TylerMoeller thanks for the help :)
mr-kumar-abhishek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mr-kumar-abhishek already gave tylermoeller points
@Robertb4
div or any similar tags don't take css dimensions unless you put something in them ~
I am getting an 522 error on direct access ..
I am getting a 522 error on direct access .. *
@Mr-Kumar-Abhishek unless u use min-height or min-width
or you can define dimensions in the css - height, width
@Marianissimus if nothing is div tags css height and width doesn't work... as far as I know ~
@Mr-Kumar-Abhishek min-.... its working
@sorinr yes min- ... works
@Marianissimus could you chat me up privately? am stuck!
height and width also work, don't worry. don't need min
@oluchristian98 sure
@Marianissimus okay I will recheck ~
@Marianissimus yep but if you use fixed dimensions you may have an overflow to deal with. sometimes this is preferred sometimes no
Hey guys do do you know if I need to add a callback to the API url for the wikipedia viewer project?
@Marianissimus so min-... and max-.... combination sometime can be another solution
@Marianissimus yes, now these things depends over
display I suppose... whatever its default value is for the browser
Anybody have experience with the jQuery plugin "alphanum"?
@JLuboff http://jsfiddle.net/fb0zgxaj/2/ ??
@Mr-Kumar-Abhishek Ya. I'm trying to use it to allow colons (:) but doesn't seem to work. MAybe I need to structure how that example is...
@Mr-Kumar-Abhishek Ya, I was using that, but wasn't working for some reason. In that fiddle, its allowing alpha characters which I don't want but I'll mess around a bit more with it. Thanks
jluboff sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
hello every one , how to go to next challenge when I finished my Tribute Page ? I don't know how to submit my Tribute page .
you click
ive completed the challenger
challenge
@Rose901 there should be a button to finish the challenge , click
@Rose901 click "i've completed this challenge" and then youre going to add the link to the tribute page
http://codepen.io/frankmaayn/full/QGQPew/ can i get some feedbacks.. I toned down the red background so that its not too bright
@frankmaayn I find the red to still be a bit..rough on the eyes. It contrasts strongly against the dark background
@JLuboff any color suggestions?
@frankmaayn https://coolors.co/d1c6ad-bbada0-a1869e-797596-0b1d51 Check this out. You can plug in a color and then it gives you suggestions on colors that work well with it
@frankmaayn for eg
rgb(102, 90, 88) but find better ~
@Mr-Kumar-Abhishek i think that works
does codepen prevent you from having a fully functional contact form?
@frankmaayn
rgb(102, 90, 88) doesn't matches with anchor link though ...
@MessiaHack unless the contact form data is sent in get request ... codepen will now allow it probably
@MessiaHack unless the contact form data is sent in get request ... codepen will not allow it probably *
@MessiaHack post request will not work in codepen probably
@MessiaHack don't think so. if you use in the <form action="mailto:..."> it should still work
@Mr-Kumar-Abhishek I am currently using Jquery. how do send it via "get request"
http://codepen.io/MessiaHack/pen/JbMbja
http://codepen.io/MessiaHack/pen/JbMbja
to campers working on the twitch streamers challenge : Hyperdev has been renamed to gomix. The new twitch api pass-through base url is https://wind-bow.gomix.me/twitch-api. Please update your projects.
@MessiaHack don't need much jquery to do a get request .... what is server ?/ nodejs / php / ruby or jsp ?
@MessiaHack don't need much jquery to do a get request .... what is the server ?/ nodejs / php / ruby or jsp ?
@MessiaHack use this much easier https://formspree.io/
@MessiaHack wait it only accepts post ... must use get in codepen so... better make or find another server
@Em-Ant thanks im gonna have to try this i am seeing errors I dont understand or cant address for my project
https://tommygebru.github.io/twitch-streamer/
https://tommygebru.github.io/twitch-streamer/
:cookie: 573 | @em-ant |http://www.freecodecamp.com/em-ant
tommygebru sends brownie points to @em-ant :sparkles: :thumbsup: :sparkles:
@MessiaHack do you have a dedicated server for backend scripting ? I didn't find any pre-set server for it (in get ), I could make one though
xP it is a nice pet project lol ...
@tommygebru I just updated my project, and it works now. Your project is great btw :+1: :clap:
@Em-Ant thanks wait until im done though :wink:
okay later... have to go.
@Em-Ant salve. come va?
@Em-Ant im confused im still seeing the same errors as before even with the new api url
@tommygebru you can register and get an api key. its free. here my twitch working pen
@sorinr very fun app!
@sorinr are the errors i shared above :point_up: all coming from the api call?
because i cant find an extra "<" in my code
nevermind
@tommygebru have you used promises in your js code?
i refreshed and it works now but im still getting a specific error
https://usher.ttvnw.net/api/channel/hls/freecodecamp.m3u8?token=%7B%22adblo…tre=true&player_backend=html5&p=5766567&expgroup=regular&baking_bread=true Failed to load resource: the server responded with a status of 404 (Not Found)
https://usher.ttvnw.net/api/channel/hls/freecodecamp.m3u8?token=%7B%22adblo…tre=true&player_backend=html5&p=5766567&expgroup=regular&baking_bread=true Failed to load resource: the server responded with a status of 404 (Not Found)
@sorinr i cant be sure... idk promises just yet