before
Hello all!
I was wondering if you guys could provide some insight to an assingment I have, I would highly highly appreciate it...
I've got to provide JavaScript code which would make the following changes, not modify the code, but add to it...
At https://registration.ft.com/signup/register
I have to attach a tracking event to the form...
Tracking code is to be: var cfTrack = function(val) { alert("Tracked "+val) };
When the form gets submitted that function to be called should be...
cfTrack(103);
The form should still submit and validate correctly, and I've got to give code that I would use to track the track the submission of this form.
Could someone PLEASE take a look at it and provide me some insight? I barely know where to begin...
What's up, all? Working on my "portfolio" project. Trying to change the font color of my nav pills. Unfortunately font-color and color are not doing anything when added to my CSS class for .nav-pills.
Hey @SlouchingToast , try targeting the navpills <a> elements
Not sure what this is, @gbsimon87
.nav-pills > .active > a, .nav-pills > .active > a:hover {
background-color: red;
.nav-pills > .active > a, .nav-pills > .active > a:hover {
background-color: red;
What's with the '>'
Am I supposed to give the pills class the "active" class? I don't understand.
Well using it didn't do anything, @gbsimon87 "/
@SlouchingToast the greater than sign is known as the direct child selector basically selects the elements that are direct children of that element
@SlouchingToast
the > sign is a child selector...say you have...
h3 > strong {
color: blue;
}It will give all <strong> elements whose parent elements are <h3> the color of blue
have some time to help me out with my wikipedia viewer project ?
I can
I can't* get any response from the api
although I checked my the link I provided for the getJSON
use jsonp
slouchingtoast sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
@1ucid user
1ucid sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
@Harry97 make sure inside the click function is when you get the value of search field
your api doesn't give me any errors in the console but
for some reason I can't see the object returned
harry97 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 673 | @gregatgit |http://www.freecodecamp.com/gregatgit
so that my getJSON function would recognize it as not making public would've made it an undefined variable
@Harry97 everything you have should be put inside
$('#getit').click(function() {
var values = $("#searchfield").val();
console.log(values);
$.getJSON(...// and the rest
});
Is there any reason why the body element has 1px of padding all the way around. When I try to make a header, there is whitespace
When I look at other websites it doesn't seem that they take this extra padding into account
it just isn't there..
yes it is css and bootstrap
@1ucid I get that that image that you are trying to center is it having any other css properties that might interfere with the positioning of it using .center-block ?
eh if you can't center it using .center-block try to use the method mention in the 1st part of the 1st answer here http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3
I get that but the*
Or make it so that the image constrains itself to the width of the page?
1ucid sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
What am I doing wrong with this code? I cannot get the bg color or the bg image to appear...
.aboutpage{
background-color: grey;
background-image: url:("https://i.imgur.com/UYwpBpl.jpg")
}
finally finished my weather app. can anyone look it over and tell me what they would change or add. My creative gene is bad
I am referencing it in HTML via:
<div class="aboutpage">
<p>Hello, world</p>
</div>
David can you share the link to where the image is located?
@SlouchingToast
background-image: url(https://i.imgur.com/UYwpBpl.jpg)
can you share the code pen page though? I'm normally better at trouble shooting things when i can do the inspector view :)
@mrburks thanks :) I'm trying to really learn the ajax calls and such.. Need a new job :)
wendyr21 sends brownie points to @mrburks :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @mrburks |http://www.freecodecamp.com/mrburks
@SlouchingToast to what selector are you applying the "background-image"?
when i went on your code pen the background url wasn't listed not sure why
Look at what I pasted
can I see the html for the page where you're trying to set the image?
@SlouchingToast so are your trying to make it the back ground image for that section of the page?
Yes, I am attempting the portfolio project. You click a navbar item and it scrolls down to that "page". I'm currently on the "About" page and want to make the background image appear on that page only.
^ @mrburks
i know in the past i had to pass sizes to make background images in divs works
ok, gimme a sec
try adding a width and height for fun to the css.. might not fix it and not even sure if its the right way but i have added it in the past and was able to view background
It worked before, but the image was displaying at full pixel (so you could only see about a corner of the image), so I uploaded the image again at a smaller res and now it's not displaying at all.
dontcha just love when that stuff happens.. its enough to drive you nuts
Google has nothing for me
Check now. Image showed up. Looks like crap though
@SlouchingToast yes, I tested your code in brackets. you should try removing the quotations from the url in the styleshee
Got any ideas how to make the image not look like crap, @mrburks ?
I've updated the codepen
@SlouchingToast did you change the name of the pen?
post it again please
No, and I've made a bunch of changes trying to figure it out too
what changes did you make?
Hey everybody. Just finished my pomodoro clock. Any feedback much appreciated. http://codepen.io/jer244/pen/mEwwGE
@SlouchingToast OK, try setting width and height for that particular div
@SlouchingToast be sure to reference the image size properties from the location where you snagged it.
Okay, I referenced the pixels, and it's not showing again
@SlouchingToast ah yes I see you did. try using actual measurements see what that does
@SlouchingToast you tried width="x-imagewidth" and such for height?
@SlouchingToast actually, don't do that...
Can anyone help me out here. Working on the wikipedia viewer and having some trouble getting a result displayed. Any idea why when I type in something like "car" into the search it isn't displaying the search from the api in the paragraph? http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
@SlouchingToast try specifying a smaller image dimension on your image call in css
tricky tricky
Well, colors aren't working either...
@SlouchingToast I think you'll have to edit the image so that it's smaller. It's really huge
do you have Photoshop?
@SlouchingToast I managed to get it to show in full but it over runs the boundaries of the view port
Roger, @mrburks. Am I setting up my div class for "aboutpage" properly?
How do I know what size the page is?
@SlouchingToast That's a good question...depends on screen res, browser res and such. first check your monitor screen res. but I would advise looking for a more standardized way of checking.
http://www.webpagefx.com/tools/whatsmybrowsersize/ @SlouchingToast
that link will tell you yours
but remember when you're developing you'll be developing for a multitude of devices so, the practice you use should be gear toward something that covers all
Hey, I am working on the make your Portfolio page, I am having trouble trying to find what libraries that can be useful to work on the project. I tried searching for them but it was always the downloads not a list of libraries I can use>
I've given up on the image, @mrburks. It's something wrong in my HTML. My div isn't even showing up. Can you look at it again?
I don't understand what I should do with rule#2 Please any help? link:<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
@SlouchingToast I see this...
trouble is not in the html, it's in the css
oh yes it's the html. you P tag is outside its parent div
Just don't understand it, @mrburks. Been working on this for over an hour.
@SlouchingToast oh yes it's the html. you P tag is outside its parent div
@SlouchingToast <div class="aboutpage">
</div>
<p>Hello, world</p>
</div>
take out the first </div?
</div>
@SlouchingToast get red of ... display:block;
how do i add transparency to a background? i already have a picture set as the background so i cause use rgba
I need help please! This is my first project on html and according to the rule I was asked to "fulfill the below :user stories: To be frank I don't what to do. here is the link: https://www.freecodecamp.com/challenges/build-a-tribute-page
@SlouchingToast well that's because you removed the content from the div
@SlouchingToast put in some Lorem Ipsum
@mrburks - it required this:
background-size: cover;
height: 800px;
background-size: cover;
height: 800px;
@SlouchingToast if you're gonna do in-line css spec. you have to use Style=""
@SlouchingToast I see this....
@SlouchingToast still this is what I'm seeing
you're lorem ipsum is missing the opening h1 tag
Currently try to mess with h1 padding to see if that gets it to show up. :(
hm try setting the div padding to 1px
see what that does
@Ekene96 ok, rule 2... it just means follow what the user story requirements say
@SlouchingToast hangon, dude i'm gonna resize your image for ya. what size do you need?
@SlouchingToast 1024x768?
^ @mrburks
I'd send you a screenshot, but not sure how to in this chat room haha
hit printscreen on the browser page, then click in the chat and hit ctrl-v
Besides the white line under the navbar, and nothing in my aboutpage div showing up, it looks good haha
I just don't know how people do this with the limited things we've learned this far in. :(
@SlouchingToast {I just don't know how people do this with the limited things we've learned this far in. } -well yeah, I b*tched and moaned about that in the beginning but what they are really wanting you to do is to get used to doing research and self education. the founder learned that way so he assumes everyone can. and to some degree that is true. but when you get stuck you have to ask some one. That get's iffy, but that's how we learn...That really how college is..
the lecture is a bit better in college but the meat is in the research and study.
Hey question does anyone have advice for trying to make thumbnails, what i find is more advanced than I understand, and don't just want to copy code and not know what i am doing
@SlouchingToast In case you didn't know or don't already have an account, if you check the website for your local library, it's possible that you can get a free account at Lynda.com. I know that the Houston public library gets me access to Lynda.com with my Library Card.
@SomeRandom42 are you trying to create a gallery or just thumbnail images?
@SomeRandom42 can I see the code? so I can we what you've done so far?
@mrburks the still image was just me messing with hyerlinking a photo will not be there in final
@SomeRandom42 ok so where exactly are you having trouble? sizing? placement? because that's basically what thumbnailing is. sizing.
You can specify the size of an image when you call the image in the html. or in css
so you have to decide what size you want the image(s) to be
@mrburks ah I might have misunderstood the thumbnail image of the User-story, I was assuming it meant a dynamic thumbnail of the website/project itself, I guess the still photo is one.
@SomeRandom42 yeah there is no need for dynamics unless you want it. but it's not required.
@mrburks thanks for the feed back, one question what is the best way to try and control placement of text? I want to try and have the "Billy May Tribute Page " above the image not beside it
somerandom42 sends brownie points to @mrburks :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @mrburks |http://www.freecodecamp.com/mrburks
However if you wanted dynamics you can check out things like animate and click in the css lessons on w3schools.com
anybody know a way to get your menu to collapse after a link is clicked in mobile?
I added a data-toggle to the links and it works great on mobile, but on a desktop it has some weird behaviour
Howdy guys. I'm trying to use <iframe></iframe> on codepen.io but it won't work
I've been told it's blocked. Is there a way to override this?
Hello! I'm doing the 'Build a Random Quote Machine' challenge and I'm stuck in a rut. I need to pass a Javascript string variable into the 'data text' field below. What do I need to write to pass in the variable?
<a class="twitter-share-button"
type="button"
id='myTweet'
href="https://twitter.com/share"
data-size="large"
data-url="http://codepen.io/GCrofut/pen/PzJkKm"
data-related="twitterapi,twitter"
data-hashtags="WWIIQuotes"
data-count='vertical'
data-text="CHANGE THIS">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>@SomeRandom42
(
@mrburks thanks for the feed back, one question what is the best way to try and control placement of text? I want to try and have the "Billy May Tribute Page " above the image not beside it
mrburks sends brownie points to @somerandom42 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @somerandom42 |http://www.freecodecamp.com/somerandom42
@SomeRandom42 to answer your question it's about the placement of the text in the html document first.
but if you're following the rules of semantic coding in html, then css can help with placement.
@SomeRandom42 you could simply add <br> between the Billy Mays text and the image
I have a Javascript string variable I'd like to pass into the tag below. How can I do that? So far, replacing "CHANGE THIS" in the below example with a function treats my function as a string (i.e. writes "myFunction()" when I want it to write the contents of my string.
<a class="twitter-share-button"
...
...
data-text="CHANGE THIS">
Hey guys, I’m having a weird issue on my tribute page. I’m using bootstrap’s grid system and was nesting h2 text within my div elements but it seems that the h2 text bleeds into the next div element’s grid space and I’m not quite sure why. Anyone have any input? Here is my codepen: http://codepen.io/csteingraber/pen/AXrwra
@csteingraber Do you want the text "Tesla bdkvbdkbvkd vkdjbv etc" to be above the pictures?
@csteingraber It is expected behavior, HTML won’t break the word for you. Your column is simply too narrow for that font size/word length.
mrburks sends brownie points to @ronaldrdguez :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @ronaldrdguez |http://www.freecodecamp.com/ronaldrdguez
Here's one way to do it: Replace the class="col-xs-3" from your div tag with id="demo"
Then add this in your CSS:
#demo {
margin-right: 20%;
margin-left: 20%;
}
Play around with the percentages until it looks the way you want.
Thanks guys! I appreciate the advice. I guess it’s more of the behavior of HTML not breaking up the words for me then. Another thing, I’m new and I’m not aware on how to award brownie points.
@Owl-Exterminator You could build the anchor tag as a string in JavaScript:
'<a class="twitter-share-button"
...
...
data-text=“‘ + myfunc() + '”>'
To give brownie points, click the name of the person you want to award them to. This will put their handle in your message. Then put "thanks" or "Thank you" somewhere in your message!
@ronaldrdguez So "empty string + function call + empty string"? Thanks! I think that'll work!
owl-exterminator sends brownie points to @ronaldrdguez :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @ronaldrdguez |http://www.freecodecamp.com/ronaldrdguez
csteingraber sends brownie points to @ronaldrdguez :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @ronaldrdguez |http://www.freecodecamp.com/ronaldrdguez
csteingraber sends brownie points to @owl-exterminator :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @owl-exterminator |http://www.freecodecamp.com/owl-exterminator
Yay! My first brownie point for solving someone's code issue!
I had a question about the Cat Photo App at challenge 79
@ronaldrdguez That didn't actually work for me. I wrote a test function that returned a string and called it like this:
data-text="" + myFunc() + "">But all I got was an empty string as a result.
Specifically, the test is supposed to be: "Nest all of your radio buttons within a <div class="row"> element. Then nest each of them within a <div class="col-xs-6"> element."
The thing is, the code already has a <div class="row"> element already
and a closing tag after the butttons
I tried both using it, and wrapping these with another div, and neither solves one of the checks looking for it
Hi, Pat. Please copy and paste what you have between and including the <div class="row"> element and it's closing tag. Type
on one line, then paste your code, then another line
I mean begin and end your code with a ``` line
Oh, ok. First, let me state, for two bullets, that the "stock" code, already had a <div> wrapping all the buttons, with a stock code detail of a xs-4 that you could change to a xs-6 , so here is that modified xs-4 to xs-6.
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
@Owl-Exterminator Looking at your code… what I meant was to build the whole
<a> tag in JavaScript. Calling mQ() from HTML won’t work since it doesn’t know its dealing with JS code. You can set the data-text attribute. This works:var theButton = document.getElementById('myTweet');
theButton.setAttribute('data-text', ’tweet text goes here’);
@patwalt Ah, ok. It's telling you to modify the radio buttons, not those block buttons.
Look for the buttons with type="radio"
The two bullets were:
- Nest all of your radio buttons inside one div with the class row.
- Nest each of your radio buttons inside its own div with the class col-xs-6.
I did modify the individuals from col-xs-4 to col-xs-6
I wasn't trying to get out of any work, it's just that an additional <dev> tag enclosing all of them seems redundant
Am I wrong?
You're looking at the wrong set of buttons. The radio buttons are the "Indoor" and "Outdoor" buttons, not the "Like" "Info" and "Delete" buttons. Leave those as they are
@ronaldrdguez Ok, I see what you mean now. Thank you!
owl-exterminator sends brownie points to @ronaldrdguez :sparkles: :thumbsup: :sparkles:
:warning: owl-exterminator already gave ronaldrdguez points
I'm sorry, I must seem like an idiot
I will leave it alone and do the other ones. I can't believe I missed it.
I need input from someone that knows and understands bootstraps navbar,,, anyone?
xhey guys! im working on my twitch api right now but i am having some trouble with getting the ajax to iterate through my array. if any one has some suggestions that would be extremely helpful! http://codepen.io/dguh/pen/kXGLwY?editors=1011
Hello folks ... I have a few questions about my project, if anyone could take a look at it. It's getting a quote, but it's not placing it in the page (checked with an "alert();" call), and also, it is caching the request [could that be a CodePen thing?], when I didn't ask it to. http://codepen.io/artifex-latrans/pen/LkzgKO
@fox-tails I'm able to get your quote to append this way:
$.getJSON(request_url, function(data) {
alert(data[0]["content"]+data[0]["title"]);
$('#main_quote').append(data[0]["content"]);
});
(it also alerts, of course)
I do see it in the alert, it is on the page I can't get it to show.
Oh wait a moment ... let me try that.
For the alert, I wonder if you have them disabled for that page?
If I take out the alert, it doesn't change the behavior. I just don't know that it is doing anything, especially as it is caching the request, so I won't see network traffic.
@fox-tails build a block of html with the quote inside it - then add the block to your html
Hmm, append does make it appear in page, but old stuff stays there.
Ok, .html works on that. Now, as to why it caches the results of the call, even when the method is called by clicking on the button, that is still unclear to me.
Do I have to change any settings in codepen for my css to work? Any code written in the css block is not working?
someone good at css, plz explain me this,
http://codepen.io/buiphuking/pen/Mewwjp?editors=1100
.wrap-in{
position: relative;
top:12px;
}why 12 is fit at center?
@bhargavi2497 it should work. Can you post your pen here?
could someone help me get my code to iterate through the rest of my array? it's only working with the first element
Hmm, Ok, mostly done with the behavio(u)r part ... but I can't get CodePen to not rewrite my link for the 'Tweet This' part of the assignment. Even after I do a removeEventListener ... if I put the remove before the adding the URL to link, nothing gets added; after, and CodePen still rewrites the URL. http://codepen.io/artifex-latrans/pen/LkzgKO .. suggestions, folks?
function palindrome(str) {
// Good luck!
var exp=/[a-z]|[0-9]/gi;
var arr=str.match(exp);
for(var i=0;i<arr.length/2;i++){
if(arr[i]!=arr[arr.length-i-1]){
return false;
}
}
return true;
}
palindrome("eye");//note:palindrome("A man, a plan, a canal. Panama") should return true.
@wn7067509 I think I just split it apart into an array and then joined it again. Not that efficient, perhaps, but it worked.
Also, your RegExp will not match any non-lowercase alpha/numeric
once you get the quote and fill your html with it
on tweet click just load the tweet from that div, and you are done
My problem is not maniuplating the HTML; it's making CodePen not rewrite the target URL. I found a page on it, and it looked like using target="_blank" would stop that behavior; but it didn't.
If you check the DOM, it is constructed fine (the link looks right in there)
Oh, I think I see what you mean. Don't use a regular href= for the link, but supply it via JavaScript?
@fox-tails oh,yes, and then, i can use string.reverse().thank you!
@kirbyedy Thanks. I'll check that next time I study. It's after midnight in my time zone.
fox-tails sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1212 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@buiphuking because in your class="wrap" u have text-align: center; and wrap-in is inheriting it or do you reffer to vertical alignment?
Anyone here experienced with the Simon Game project? I'm struggling with making displaying the color sequenced in timed intervals
@buiphuking your wrap has a height of 472px and your wrap-in has a height of 452px. so to habe the wrap-in perfectly centered within wrap you have to make top: 472-452/2=10px
Currently working on the Twitch.tv API project
do I need to do a query for random users to put on my list, or am I just going to make my own list of users to put on my page?
I ask because if I want to get random streams or info on my page, I think I need to request an authorization key, and they ask about your authentication service which I have not learned about yet
@Torgian if you want here are some users
var users = ["ESL_SC2", "ESL_CSGO", "freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brunofin", "comster404", "test_channel", "cretetion", "sheevergaming", "TR7K", "OgamingSC2", "monstercat", "pink_sparkles"];
For the front end project Show the Local Weather project, is there a way to get the lat,long co-ords without using https
@Lantare
$.ajax({
url: "http://ip-api.com/json",
success: function(data) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?lat=" + data.lat + "&lon=" + data.lon + "&APPID=e48ee4aaa640e2c29127ac3ccddb675c",
success: function(data) {
}
});
}
});lantare sends brownie points to @deadpool37 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @deadpool37 |http://www.freecodecamp.com/deadpool37
Please help me with my wikipedia viewer
The search links show fine but disappear after a second
I need a way for them to stay
The console has the expected output
i am done with the portfolio project but my page is not responsive..i mean it messes up with the change in the window size..
can anybody help?
I mean it is not in the codepen setting
where ?
@Gauravtolani hey i have a question since you seem a bit knowledgable
@Gauravtolani no, you have to add jquery and bootstrap in the javascript section
@smariecode ?
my scroll spy doesnt work unless i have that top script line in the main code for some reason and i dont understand why
so you have to load both of them
you load it vice versa
check your codepen settings
I think :)
@kirbyedy added the jquery link..still it gets converted into crap on decreasing the window size
i guess i m doing something wrong..can you check
@kirbyedy THANK YOU so much i have been stumped on that one! and thank you too @Gauravtolani, that did the trick!
smariecode sends brownie points to @kirbyedy and @gauravtolani :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @gauravtolani |http://www.freecodecamp.com/gauravtolani
:star2: 1213 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
you have to correct yours because you are not following that rule
in the jumbotron?
thank you @kirbyedy
gauravtolani sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1214 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
then slowly convert it to your needs
Hey guys, I've been struggling with django auth for couple of days. I installed allauth and for the time being I just want to create a user registration form and a login page. I cannot find the information I need. I have tried different tutorials, but they are for social login only
here is the link to m codepen for Weather app http://codepen.io/meow414/pen/rLGkWv
I am getting weather data as json,I want to use the keys like weather and temperature from that data to show weather.How to do it? Here is an exmple of the api response I am getting
I am getting weather data as json,I want to use the keys like weather and temperature from that data to show weather.How to do it? Here is an exmple of the api response I am getting
{
"coord": {
"lon": 0.78, "lat": 0.25
}
,
"weather":[ {
"id": 803, "main": "Clouds", "description": "broken clouds", "icon": "04d"
}
],
"base":"cmc stations",
"main": {
"temp": 296.934, "pressure": 1030.02, "humidity": 100, "temp_min": 296.934, "temp_max": 296.934, "sea_level": 1030.01, "grnd_level": 1030.02
}
,
"wind": {
"speed": 5.22, "deg": 191.003
}
,
"clouds": {
"all": 76
}
,
"dt":1468231605,
"sys": {
"message": 0.0047, "country": "YE", "sunrise": 1468216709, "sunset": 1468260392
}
,
"id":8282146,
"name":"Font Al-Da'da",
"cod":200
}
Does anyone know why hitting 'Enter' clears my input box? I've tried using a couple different ways for it to load the results when you use enter rather than click the search button but with no luck
@Iadetunji Chrome won't let you access an http:// api anymore, you need to use https. As openweather doesn't have an https endpoint, use something like crossorigin.me
open weather won't work with google chrome if you are using html5 location data
forecast.io works over https, so you can use that, and you won't run into any CORs issues
help format
:point_right: code formatting [wiki]
Multi line Code
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
Single line Code
This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
$(document).ready(function() {
/*
$('#searchBox').keyup(function(key) {
if (key.keyCode == 13 || key.which == 13) {
//$('#searchBtn').click();
getResults();
}
})
*/
$(document).keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
$('#output').empty();
getResults();
};
});
$('#searchBtn').on('click', function() {
$('#output').empty();
getResults();
});
});db001 sends brownie points to @doko85 :sparkles: :thumbsup: :sparkles:
:cookie: 409 | @doko85 |http://www.freecodecamp.com/doko85
a friend designer just told me to make more easily recognizable every call to action in this project
what is your opinion guys?
your copyright is bigger than the actual search
hi all, i have a problem with my script for the twitch api. For some reason the name of streamer doesn't come through. Here is my code pen: http://codepen.io/Shinrayi/pen/RRkAKK?editors=1011
@kirbyedy I can't seem to be able to increase the label font-size
ok wait.. freaking frameworks and the !important needed to bypass them
Any suggested tutorials for using APIs? I am completely stumped on building my Random Quote Machine. How exactly do I use an API so that its contents display on my webpage? Haven't been able to find a decent tutorial and the freecodecamp one feels like only a cursory introduction. Thanks in advance!
@marvokdolor each api has its own documentation, search for one that you like and read through
Thanks @kirbyedy! Thing is that so far reading through the documentation hasn't been helpful. I feel like I don't have enough of an understanding of APIs and how they work (on a detailed level) to be able to make sense of the documentation.
marvokdolor sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1215 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Buen dia, saludos alguien sabe como entrarle a este proyecto?
https://codepen.io/FreeCodeCamp/full/ONjoLe/
https://codepen.io/FreeCodeCamp/full/ONjoLe/
@marvokdolor normally API allows you to access information. It will be either through a function call or a ajax call to a url. Sometimes you will need a api key(which you can get from api provider's website). The call to API returns a json object or xml which you will be using in your program to parse it and display the information.
@gitgenie one suggestion, change the cursor to a pointer on hover, jsut so people know it's clickable
@spot1000 thanks, I shall do that @kirbyedy Please let me know if you are not able to see the city below "weather"
gitgenie sends brownie points to @spot1000 and @kirbyedy :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @spot1000 |http://www.freecodecamp.com/spot1000
:star2: 1216 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
well, it's close to my city...
@spot1000 there is a problem with the geolocation api I am using. It is not fetching the accurate location since morning. @kirbyedy May I know your location
@gitgenie Thank you! I'm finally understanding the link between APIs and all that array work we did in Basic Algorithmic Scripting.
marvokdolor sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @gitgenie |http://www.freecodecamp.com/gitgenie
Hello everyone I'm stuck at the Quote Machine Project, I'm not able to figure out how can I grow the size of the container to accommodate a larger quote.. I don't want a couple of scroll bars to appear
@marvokdolor these links might help: http://jsonapi.org/format/#document-jsonapi-object https://labs.omniti.com/labs/jsend/wiki
rizwanahmed19 sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @gitgenie |http://www.freecodecamp.com/gitgenie
@nilsvoorkamp check out the bootstrap documentation on navbars, http://getbootstrap.com/components/#navbar
yeah is saw that but how can i acces different parts of my site for different buttons
like you want it to scroll down to those sections when you click on the buttons?
<a href="#tagID"> and then put theid of the tag you want to scroll to
nilsvoorkamp sends brownie points to @spot1000 :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @spot1000 |http://www.freecodecamp.com/spot1000
Please help me with the Wikipedia Viewer
I have two problems with it
First, I have to search 4-5 times for it to start searching.
@spot1000 do i have too say id=... or just fill in the id?
@nilsvoorkamp it has to be like
<a href="#" id="my_id">
...
</a>nilsvoorkamp sends brownie points to @deadpool37 :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @deadpool37 |http://www.freecodecamp.com/deadpool37
Second, The search links disappear after a second. How do I make them stay?
somebody help me
how i make a zoom carousel?? help me
@Deadpool37 dont use submit, you are not really submitting anything to the api
@Deadpool37 just use .click and make the button a regular button,
@Deadpool37
$(document).ready(function() {
$("#search").click(function(event) {
var $input = $("input");
var search = $input.val();
$.ajax({
type: 'POST',
url: 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + search + '&limit=10&exsentences=1&namespace=0&format=json',
dataType: 'jsonp',
success: function(data) {
for (var i = 0; data[1][i]!= null ; ++i) {
console.log(data[1][i] + data[2][i] + '\n'+data[3][i]);
var html = "<a href=\"" + data[3][i] + "\" target=\"_blank\"> <div id=\'"+i+"\'><strong><h2>" + data[1][i] + "</h2></strong><h3>" + data[2][i] + "</h3></div></a><br>";
$(html).prependTo("#r");
}
}
});
});
});
@wearenotgroot i did that the first time but didn't work
In the console it just reloades the page
In the console it just reloades the page
@Deadpool37 also this line
var $input = $(event.target).find('input'); //<------ just use $("input"); or give the <input> an id
Anyone take a look at my Quote Generator and give feedback? http://codepen.io/gagecastro/pen/YWAqWx/
deadpool37 sends brownie points to @wearenotgroot and @spot1000 :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @spot1000 |http://www.freecodecamp.com/spot1000
:star2: 1210 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@wearenotgroot also if you could tell me how can I tell it to search by clicking the button and also through form?
@GCastro51 first thing i notice is that the text is the same color as the background, maybe try changing it to a different color?
@Deadpool37 well .click just applys an event listener to that button, meaning it tells the program to wait for an event such as click by the user
@Deadpool37 anything inside the callback function in the .click will be executed
Can anyone tell me that how to add pictures as html in codepen.
hi everyone , i need some help in random quote machine project. i dont know what im wrong in my js code . why i click 2,3 times then quote change. p/s sorry my eng too bad.
`
`
@Deadpool37 as for forms, forms are used if you require the user to fill in info like signing up as a member of a site, just like real form in real life
my code
$(document).ready(function(){
function getQuote(){
var quote =["Hello World","Abcd","asdasd"];
var author=["khanh","duy","bui"];
var back = ["yellow","pink","blue"];
var random = Math.floor(Math.random()*quote.length);
var randomQuote = quote[random];
var randomAuthor = author[random];
var randomBack = back[random];
$("body").css({"background-color":back[random],"transition":"background-color 0.6s ease-in-out"});
$(".quote").text(randomQuote);
$(".author").text(randomAuthor);
};
$(".btn").on("click",function(){
getQuote();
});
});
i dont know what im wrong
@wearenotgroot you know like when your search on Google you can press enter or the button
@Deadpool37 oh well you can detect the enter key by keyevent just like adding a listener to a button
maybe in my Math.random
@Deadpool37 or
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});btw 13 is the keycode for the enter key
@khanh19934 it seems to be correct
@khanh19934 if you add more quotes it will be fine
khanh19934 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1211 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@khanh19934 oh another thing, if you are using vabriant color as background, you could try changing the text color to a much lighter color .
@Iadetunji any specific question?
@wearenotgroot i know that, i fix this now :D thank you for your recommen
khanh19934 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: khanh19934 already gave wearenotgroot points
@wearenotgroot The click event is fine but the when I press enter the links come and go
Hi guyz
This message was deleted
I want to change my quotes color it appears white and i cant read them thx for u helps
nevermine i got it lol
@wearenotgroot ,i need a good algorithm to setup the JS section of the project
@Deadpool37 change the target to
$("input").keypress.. instead of document
@Deadpool37 also change the type in $.ajax to GET instead of POST
Can u guyz give me some review about this quote machine
@Iadetunji another thing is the way you are appending parameters for the openweather api is incorrect as well
=))
@Deadpool37 change the form to div instead and change the type of $.ajax to GET instead of POST
@Deadpool37 line 23 and line 24
type: 'GET', //<-------- instead of POST
@NixonRichard toi lam roi nhung k lam bang api @@ hoc trong nay cung van chua hieu ro lam . mac du biet api la json r =='
@khanh19934 ban tao array chua may cai quotes dung hk ?
bam vao cai link duoi cung ay thaysaidso ak
copy cai code api trong do vo
@Iadetunji try logging the result of the ip-api in the dev console and study the returned object from your query
@NixonRichard minh tao array T.T cho nhanh xong r cay lai api sau T.T
Not able to get my Tic Tac Toe game to work. Any help would be greatly apprecieated:
http://codepen.io/juwdohr/pen/XKbbEZ
http://codepen.io/juwdohr/pen/XKbbEZ
@khanh19934 b muon lam bang api hk minh chi cho nhanh lam paste codepen cua ban qua day
Hello. I'm working on the calculator project. I try to change the value of my textbook after pressing a button on the calculator, but in vain. Anyone can help me with this issue? Thank you!
@wearenotgroot ,i think i need a more elaborate pseudocode approach to get this done , can you help with that, a more structural approach i mean
@NixonRichard increase the post-per-page count then you'll get an array
@NixonRichard de bai sau y . chu bai nay thi lam cach nao cung xong ma :D bai sau dung api minh se hoc ky lai :D
@NixonRichard you can then use Math.random to generate random index for that array
@Iadetunji structure is not really the problem, is just getting use to using $.getJSON and reading and studying the api itself(what the object in response how to access what info you need)
@khanh19934 b cung chua lam bai sau ak ? minh cung dang lam :smile:
@NixonRichard chua, minh mai lam may bai tap js nen hoi luoi T.T
@NixonRichard toan hoc trc quen sau T.T
@wearenotgroot what do u mean get an array i see it s working normally
@NixonRichard try changing the text color or background? so we can see the text much clearly
@wearenotgroot the text color s different from the background color i changed it
but if u can help me change the color of the machine anytime i click the new quote button that wuold be great
@Deadpool37 yeah if you dont change the <form> to div the page will "submit" the form whenever the enter key is pressed thus updating the page everytime the response from the api is received
@NixonRichard yeah it's different but need more contrast(hard to read because they are both light and similar in color)
deadpool37 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
i did (
(=
@NixonRichard try this color-------> #33cccc since you have a similar color scheme
@NixonRichard ừ làm mấy cái đó luyện não tý . hướng theo back-end chứ front-end ngu như bò T.T toàn đi ăn cắp thì nhanh=))
m moi xong dc basic zzz
@NixonRichard ms làm đc 4 bài thôi , còn chưa kể 1 tấn bài bên w3resource T.t
@Iadetunji if not try and study the result of the first api query by logging the result in the dev console
$.getJSON("http://ip-api.com/json", function(json1) {
console.log(json1);
});the response from the api will be an object with a bunch of property but the ones you are after is lon and lat.
json1.lat //to access the value
json1.lon //to access the valueyou can either store them in some variables or just append them correctly into the next api url
here is your original api url for openweather
original url: "https://api.openweathermap.org/data/2.5/weather?lat=json1.latitude&lon=json1.longitude&APPID=6949c3c3aab774e328f0072aee66d40d"correct way to append the result from the variable to the url is
"http://api.openweathermap.org/data/2.5/weather?lat=" + json1.lat + "&lon=" + "json1.lon" + "&APPID=6949c3c3aab774e328f0072aee66d40d"another thing about the openweather api is that the https connection is for paid version of the api-key, so you just have to settle for http instead.
Now dealing with the crossorigin issue that you'll get, you'll have to append
&callback=?to your url so it will turn into jsonp
"http://api.openweathermap.org/data/2.5/weather?lat=" + json1.lat + "&lon=" + "json1.lon" + "&APPID=6949c3c3aab774e328f0072aee66d40d&callback=?"
@NixonRichard mấy bài đầu cũng bt , có bài roman hơi khó chịu vì phải đổi sang số la mã mệt lắm
@Juwdohr Thank you. I try with #("display").val = ....
but still not work.
but still not work.
i-liszt sends brownie points to @juwdohr :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @juwdohr |http://www.freecodecamp.com/juwdohr
Hi there! I think name of
item parameter in https://www.freecodecamp.com/challenges/stand-in-line needs to be changed as number. So it will be easier to understand. What do you think?
Or something like that, maybe
num.
@NixonRichard bh sang bài weather . bài máy tính xong r chỉnh tý style cho đẹp la xong =)))
http://codepen.io/khanh1993/full/VjroKk/
http://codepen.io/khanh1993/full/VjroKk/
@Iadetunji putting them together will look like this(console.log to view the result in the dev console)
function gettingJSON() {
$.getJSON("http://ip-api.com/json", function(json1) {
console.log(json1);
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+json1.lat+"&lon="+json1.lon+"&APPID=6949c3c3aab774e328f0072aee66d40d&callback=?", function(json2) {
console.log(json2);
});
});
}if you are not used to appending the url parameters that way you can add an object that contains the url parameters instead in the $.getJSON. like so!
function gettingJSON() {
$.getJSON("http://ip-api.com/json", function(json1) {
console.log(json1);
$.getJSON("http://api.openweathermap.org/data/2.5/weather?callback=?",
{
lat: json1.lat,
lon: json1.lon,
APPID:'6949c3c3aab774e328f0072aee66d40d'
}, function(json2) {
console.log(json2);
});
});
}
I use query to select #display, so to set the value, it should be written as $("#display").val(....)
Not $("#display").value = ....
This is for the original JavaScript
This is for the original JavaScript
hi why canbt i change the font ?
@NixonRichard You haven't imported the font from google. You need something like this:
<link href='https://fonts.googleapis.com/css?family=Cinzel+Decorative:700|Orbitron:700' rel='stylesheet' type='text/css'>
When you clik on your gear for HTML under Stuff for <head>
nhu vay ha @khanh19934 )=
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Cinzel+Decorative:700|Orbitron:700' rel='stylesheet' type='text/css'>
<h1 style="font-family:lobster">A WEATHER APP</h1>
</head>
</html>
you guys what do you use for twitch's api mine always return the same thing
{
"stream": null,
"_links": {
"self": "https://api.twitch.tv/kraken/streams/CinCinBear",
"channel": "https://api.twitch.tv/kraken/channels/CinCinBear"
}
}
@uniforlyff Are you using a for loop to request or process your requests? Is CinCinBear your last entry in an array?
zzz
@uniforlyff here is my twitch app: http://s.codepen.io/sorinr/debug/EymkWr take a look afterwards at the http://s.codepen.io/sorinr/pen/EymkWr to see the code
my array is
var users = [
'OMGitsfirefoxx',
'Dinglederper',
'MissPetrai',
'CinCinBear',
'Lilchipmunk',
'LegendaryLea',
'DizzyKitten',
'Phinklestein',
'freecodecamp'
];
@sorinr okay
@uniforlyff Interesting I would have thought CinCinBear would be the last entry. hmm I was going to suggest this link, but not so sure.
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
@sjames1958gm ok thanks ill check on and thank you for sharing @sorinr
uniforlyff sends brownie points to @sjames1958gm and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1787 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:cookie: 447 | @sorinr |http://www.freecodecamp.com/sorinr
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<h1 style="font-family:lobster">A WEATHER APP</h1>
</head>
</html>
is there more elegant solution for this task?
const func = (str) => {
return Array.prototype.map.call(str.split(' '), (word) => {
return word[0].toUpperCase() + word.slice(1);
}).join(' ');
};
func('hello! is it me you looking for?'); // 'Hello! Is It Me You Looking For?'
Anyone willing to help an absolute beginner with the portfolio project?
Getting things in the right places, I spent a few hours looking around online but the things I have found have not been working.
The on page links also do not work, I looked at the HTML website and I appear to have set it up the way they say,
@twickster think like this: you will need a navigation at the top of the page. then, you will need to show the content. at the end you will have a footer
Yea, I set it up that way but the links are not working. I have used the a href="#id" setup from the HTML webste
@twickster second. why do you nest tags like this:
<button type="button" class="btn btn-default navbar-btn">
<a href="#portfolio">Portfolio</a>
</button> ? instead just write <a class="btn btn-default blablabla" href="#portfolio">
Because I want the link to be inside the button and for it to say portfolion
*portfolio
And the bootstrap thingy I am using says to do it this way on the website
@twickster this <a class="btn btn-default blablabla" href="#portfolio"> will do exactly the same. what do you think will happen if i have this: <button onclick="doThis()"><a href="gothere">My Button</a></button> ?
I was only trying to use the basic HTML and CSS as I can not even get to grips with that yet. That other stuff adds a layer of complexity I cant deal with yet.
@twickster just try and see. write in js a function like: function doThis(){alert('button triggered')}; and make your href="google.com"
I have not done JS that lesson comes after the portfolio activity, did code camp put the lessons up in the wrong order?
It won't let me go to the JS until I mark the portfolio complete, I suspect that means they want me to do it without this JS.
totally stuck in with "Show the Local Weather” project. How on earth do you work store a JSON dataset and reuse it with another function?
@twickster think ur missing the jquery part before the Basic Front End Developments projects
I did that, but it did not touch on any of these things, just adding some animations.
I tried your line anyway for the portfolio button and nothing happened
@twickster jquery is a library that facilitate writing javascript in a more easier way
So I must use it to make the button go to a different point on the same page? Why does the HTML site not mention this?
It just says I can link to another element on the page with <a href="element_id">Link</a>
I click the link and nothing moves
@twickster things do move when you click relevant links, your portfolio button does however take you to google.com I am assuming its meant to go to id="portfolio"
That part, I changed it on a suggestion to see how it works, it did not :(. But I click the contact button and it does not go to the contact section
@twickster must be your browser mate, its working on my end (Chrome and firefox) also works in safari
Do I need to delete my firefox and install again?
@twickster download chrome mate, its better to just use that for now as you can be 100% sure that it supports most of the modern code
then when you get a bit m ore confortable with your ability you can play around with different browsers
Thankyou sorin and nick. Downloading chrome now it says 25 minutes so will be back after then.
@twickster as @twickster said why not install chrome just for testing.
@twickster no worries, you wouldnt imagine the browser frustration i had when i first started! wont be the first wont be the last haha just pick a tool you trust and stick with it
Any one can help me out. I am struggling storing JSON data I pulled from a server in a variable
Sorin, I am downloading now, but it is gonna take almost 30m so will be away from the computer for that time. Thanks again to you and Nick for helping.
@trip16661
Guys who ever have time please review my pomodoro app :)
http://codepen.io/Trip1666/full/rLzzXX/
Guys who ever have time please review my pomodoro app :)
http://codepen.io/Trip1666/full/rLzzXX/
back and sorry but chrome won't install. I am stuck with firefox. Is it really that bad?
@trip16661 Nice work! It looks pretty good, and the keys-control system I think it is very confortable to work with
@trip16661 I have noticed that clicking at "profiles" you show 3 types of pomodoros, but the length of each bar is not proportioned.
@trip16661 I mean that, at "profile relaxed" for example, the bar showing 25 minutes work is almost as long as the bar showing 15 minutes rest. I would suggest giving the bar a length related with the length of the work/break time
@trip16661 But everything else looks awesome! :)
Hi, I'm working on my weather app. I found Erik Flowers' weather icon cdn, and I see that the icons were previously mapped to openWeatherMaps id statuses. Is there an easy way to plug this list ( https://erikflowers.github.io/weather-icons/api-list.html) into a switch case?
@trip16661 it would be cool to make 'work', 'break', etc buttons to click on
hello all
can anyone help me how to use vertical alignment in table correctly? I'm having trouble to make it work in my tic tac toe board game
can anyone help me how to use vertical alignment in table correctly? I'm having trouble to make it work in my tic tac toe board game
@trip16661 looks awesome man!
Is there option to adjust the break time?
@stephepush you dont need to make a switch case
you can simply concatenate it
oh
into the css?
via jQuery?
for instance, in my code, I simply retreive the icon ID and and when I want to append it, I did as so: "wi wi-owm-" + iconID
let me open up my code..
yes I used jQuery
$.getJSON(weatherURL, function(weatherInfo){
var iconID = weatherInfo.weather[0].id;
var imageURL = "wi wi-owm-" + iconID;
here is where I get the icon ID
i created variable imageURL to concantacte with it
then I select the element I want to append to and it should pick the correct icon
I used Awsome Font
ex:
$("#icon p").html("<i class='" + imageURL + "'></i> ");
@Danoso89 Thanks I also think it looks unbalanced but im fighting against my own logic xD and y not only that but you have the option to store your own custom profiles
trip16661 sends brownie points to @danoso89 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @danoso89 |http://www.freecodecamp.com/danoso89
@Neotriz what do you mean with adjust the break time?
if you press the key B on your keyboard you can see the break mode and adjust it to whatever length you want it to be
if you press the key B on your keyboard you can see the break mode and adjust it to whatever length you want it to be
and you can also add that profile with / button
"/"
then nvm. all looks good :)
@stephepush right that's what I used
what API are you retrieving the weather info?
Open Weather?
so let me rephrase again..
when you use openWeatherMaps, you will get an object. Inside that object, you can retrieve the icon ID
you use that icon ID to select the appropiate icon to append in your page
for instance: wi-owm-200. That number 200 is the icon ID you retrieve from the JSON object
Hey, I'm having a bit of trouble with using a google font on codepen, can I get some help?
is freecodecamp website down?
What can I do
says in my mac
@Axamin you just need to link them like <link rel="stylesheet" href="https://www.google.com/fonts#UsePlace:use/Collection:Raleway:400,600,900" />
this doesn’t happen to any of you guys ??
@DuskyPixel Here is what I have <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> This matches what is shown in the tutorials, it is in the CSS window on codepen, yet the font does not show up. I have tried with different fonts as well, yet none have worked
stephepush sends brownie points to @neotriz :sparkles: :thumbsup: :sparkles:
@Neotriz , wait why would you put the code representing the symbol as a class? Wouldn't it be text in thehtml?
@dashdummy finally got chrome to work, I had a problem with my partitions took a lot of work and reading but I did it.
Hello, I am on the Build a Tribute Page challenge. This may be a silly question but how do you save a project you are working on to come back to at a latter date.
@wthomason In CodePen? There is a save button at the top of the screen. If you have not changed setting there is also an autosave.
@twickster Yes I saw that, so then how do you find that project after you have saved it?
wthomason sends brownie points to @jiteshpabla :sparkles: :thumbsup: :sparkles:
:cookie: 187 | @jiteshpabla |http://www.freecodecamp.com/jiteshpabla
@wthomason I just go into my profile and click on public. Admitedly as a fellow new user I find CodePen navigation unintuative and I had to click around a bit to learn how to find things. I suggest you keep you project open and then open Codepen again in a new tab to experiment with looking around for things.
i'm having trouble figuring out how to use APIs
Thank you @twickster Im not liking how code pen is set up. Ironically Im attending a codepen seminar with people from codepen later this month and may bring it up.
wthomason sends brownie points to @twickster :sparkles: :thumbsup: :sparkles:
Hi there ! I'm currently working on the Tribute project, and I have difficulties aligning 3 images in a row. Eventhough I'm using the "img-responsive" command, it doesn't work. Can anyone tell me what I'm missing ? https://codepen.io/JueKe/pen/NAwPKb
@disjfa Oh ? Well, I guees I need to read the Bootstrap class again then :/ Thanks !
jueke sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @disjfa |http://www.freecodecamp.com/disjfa
disjfa sends brownie points to @twickster :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @twickster |http://www.freecodecamp.com/twickster
@Jueke just replace the commas with hyphens. so it'll be : col-md-4
ahh ok, in that case there are a couple of people I need to send some points too ...need to go back to find their names first!
Thanks @sorinr
twickster sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @sorinr |http://www.freecodecamp.com/sorinr
twickster sends brownie points to @dashdummy :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @dashdummy |http://www.freecodecamp.com/dashdummy
Everything is new to me :( I have never used things like twitter....and this is my first time using a chat program.
jueke sends brownie points to @jiteshpabla :sparkles: :thumbsup: :sparkles:
:cookie: 188 | @jiteshpabla |http://www.freecodecamp.com/jiteshpabla
@trip16661 a good tutorial? i'm not able to work it out with the challenges given for JSON and AJAX
@jiteshpabla the good ones i have seen i don't remember the source
What project are you on?
@disjfa no, link please?
i remember to have watched that one
but i think the one who clarified me the most were some short videos from treehouse
jiteshpabla sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @trip16661 |http://www.freecodecamp.com/trip16661
coffeebeanzz sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @trip16661 |http://www.freecodecamp.com/trip16661
yes @JakobPapirov I might not can answer but if someone else can they will
"One of your radio buttons should have the label indoor. "
I'm working on the portfolio but I'm stuck on how to do thumbnail for projects under the portfolio section of the website with picture and names
this is what i have so far
.nav-pills{
padding-left: 10px;
padding-right: 10px;
position: fixed;
width: 100%;
font-size: 25px;
font-family: cursive;
margin-left: -20px;
margin-right: -20px;
background-color: black;
}
.nav-pills li a{
color: gray;
}
body{
background-color: white;
}
.pageOne{
background-image: url(http://pixelhub.me/pixelhub1/images/uploads/1385467739background_portfolio.jpg);
background-size: cover;
height: 850px;
margin-top: -70px;
margin-left: -15px;
margin-right: -15px;
}
.pageTwo{
background-color: white
background-size: cover;
height: 800px;
margin-left: -15px;
margin-right: -15px;
}
.pageThree{
background-color: gray;
background-size: cover;
height: 800px;
margin-left: -15px;
margin-right: -15px;
}
.pageFour{
background-color: white
background-size: cover;
height: 950px;
margin-left: -15px;
margin-right: -15px;
}
header{
padding: 200px;
color: white;}
header h1{
font-size: 100px;}
header p{
font-size: 35px;}
header2{
color: black;
padding: 15px;}
header2 h1{
font-size: 100px;}
header2 p{
font-size: 35px;}
header3{
color: black;
padding: 15px;}
header3 h1{
font-size: 100px;}
header3 p{
font-size: 35px;}
header4{
color: black;
padding: 15px;}
header4 h1{
font-size: 100px;}
header4 p{
font-size: 35px;}
footer{
background-color: gray;
text-align: center;
font-size: 25px;
color: black;
}
.nav-pills{padding-left: 10px;padding-right: 10px;position: fixed;width: 100%;font-size: 25px;font-family: cursive;margin-left: -20px;margin-right: -20px;background-color: black;}.nav-pills li a{color: gray;}body{background-color: white;}.pageOne{background-image: url(http://pixelhub.me/pixelhub1/images/uploads/1385467739background_portfolio.jpg);background-size: cover;height: 850px;margin-top: -70px;margin-left: -15px;margin-right: -15px;}.pageTwo{background-color: whitebackground-size: cover;height: 800px;margin-left: -15px;margin-right: -15px;}.pageThree{background-color: gray;background-size: cover;height: 800px;margin-left: -15px;margin-right: -15px;}.pageFour{background-color: whitebackground-size: cover;height: 950px;margin-left: -15px;margin-right: -15px;}#header{padding: 200px;color: white;}#header h1{font-size: 100px;}#header p{font-size: 35px;}#header2{color: black;padding: 15px;}#header2 h1{font-size: 100px;}#header2 p{font-size: 35px;}#header3{color: black;padding: 15px;}#header3 h1{font-size: 100px;}#header3 p{font-size: 35px;}#header4{color: black;padding: 15px;}#header4 h1{font-size: 100px;}#header4 p{font-size: 35px;}footer{background-color: gray;text-align: center;font-size: 25px;color: black;}
@coffeebeanzz I figured it out just now when I copypasted the example code
trying to send the web thing keep on sending wrong things
what they meant by labeling is to put it between the tags like the link text in <a>text</a>
:point_right: code formatting [wiki]
Multi line Code
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
Single line Code
This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
i need help with portfolio thumbnail part and dont know how to do it
to show of what i did
and wrap it on a "a" tag
if you have an actual adress to do it
if you dont have nothing
just use a placeholder
yes but i dont know how to mve the picture under the portflio header
what do you want
when i put a image it just place it right next to the word portfolio but not under it
on my website
i tried that but it doesnt place it underneath the word portfolio
unless i place it in the wrong place
this is what it does when i do that
hey guys, can someone help me quick. I am working on the wikipedia viewer. Can someone tell me why this is only displaying the last index and value of the array instead of every index and value from the array. I am copying the jQuery documentation for it and I'm still having trouble. http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
@liu2yamichael The issue is the
pull-left class. use text-left if you want it left aligned. <h1 class="text-left">Portfolio </h1>. Pictures will show up under the heading after you make that change.
or does it need to be change
at differnt parts
@lukenetti3 use
.append() instead of .html() - you are overwriting the html with every loop of your $.each
@liu2yamichael Main issue I see is the use of
pull-left and pull-right instead of text-left or text-right.
for words
@liu2yamichael It depends on if you want it aligned to the left or the right. You can read more about Bootstrap Typography at: http://getbootstrap.com/css/#type
@TylerMoeller Thanks so much! Should have thought of that myself just couldn't figure it out.
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 660 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lukenetti3 np, I should have mentioned - don't forget to clear the HTML first when you do a search or every repeated search will just append more and more html :)
tyler
sorry
@TylerMoeller How would I do that? Just some kind of clear when my function is first called to remove whatever else is there?
so bootstrap buttons are just a tags
the funtionality is the same as any other button
and no
@lukenetti3 yeah, before you enter the $.each, you could use .empty() or .html('')
buttons dont work for that unless you explicitally says to do something
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave tylermoeller points
I myself never used it for learning purposes
but that's me
whats easier to get into front-end or back-end for web development
as a job
starting out
But im not an expert myself so who knows
i finished it like 1 month ago
being useless and slow to remake my projects so havent been able to do anything else
After 2.5 days lots of reading and a HDD partition move and resize here it is! What do you think?http://codepen.io/twickster/pen/akLKyk?editors=1100
the last contact me looks a bit messy
and the placeholder of the websites are aswell not positionated
I could not get exact positions, making it better for one size made it worse for another
<section id="contact">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
you might aswell just have
from what I gather the bootstrap is split into 12 coloums, the row class starts a new row and then you have to set a "col" class in the next div to set the size of the coloum
I did not use it for everypart as I did not need rows and coloums so I did not make those div classes to keep it as clean as I could.
I would appreciate it if you could give me some advice on how to get the contact buttons to stack vertically