@mremotoo okay so if you change the col-xs-8 to col-xs-7 and also col-xs-offset-1 it should look pretty centered
I have a issue with thumbnails
@mremotoo @lpy1994 to get your navbar working here is an excellent page - I highly recommend going through all their bootstrap and using what you can to get your portfolio firing http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
thanks @GregatGit
lpy1994 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @gregatgit |http://www.freecodecamp.com/gregatgit
@mremotoo @lpy1994 to get bootstrap working properly you have to add jQuery.js and bootstrap.js (in that order) to the javascript in settings
@lpy1994 You can check out w3schools bootstrap thumbnails - they have far better advice than I can give
Anyone have an idea how to set the min-height of a div to fill the screen? I'm having trouble making it work for my portfolio http://codepen.io/ampersamd/pen/LNzBQW
@Adam-Collier You can leave the link in the html to whatever page you want, add a class to all the elements and change that class to an image in javascript
@ampersamd WHat div are you trying to fill the screen with?
try height: 100vh which would be 100% of th eviewport height
Will try that
http://codepen.io/GMATom/pen/BzAOQE/?editors=1010 can somebody please tell me why this isn't working? I tried making a function to getWeather and then call it with the parameters (lat,lon) but whatever I do I just can't get the function to populate my "temp" span
@ampersamd I like your page though, I always liked the parallax scrolling
Thank you @iAmNawa! It seems to work on my end. I was trying "100%" instead of 100vh. Noted for the future. Would you mind opening up my page again and telling me if my title page with my name "J. Sam Robertson" fills the screen and you can't see the beginning of the darker section below it? I want to test with different resolutions http://codepen.io/ampersamd/pen/LNzBQW
ampersamd sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @iamnawa |http://www.freecodecamp.com/iamnawa
so i'm about to embark on the random quote machine...feel decently confident with using jquery/apis/ajax after A LOT of video watching today, but one thing i don't really know/understand: would it be better to get a single random quote from the url in the .getJSON (which the api i'm using has a link for, and i don't completely understand it) or to get the entire array and then pick a random one later in the code?
@TomGM
$.getJSON is case-sensitive. $.getJson won't work. You also need a .done(function(weather)) on that weather getJSON. After you get that working, you'll find that weather.description is undefined, so you'll need to console.log(weather), look at the JSON, and figure out how to parse it to get the weather description. Hopefully this helps you get back on track :) didn't want to just give you the code.
@bethqiang It will be easier to use the API's random functionality rather than implementing your own. With that said, it isn't too hard to generate a random number, so in the end, it's all up to you
help here, m trying to figure out how to center my elements in the row,
no wiki entry for:
here m trying to figure out how to center my elements in the rowhttpcodepeniomremotopennayjrd
@TylerMoeller that makes sense, hah. I just haven't been able to understand exactly how the API's url for a random quote was created so I'm a little more hesitant about using it. :)
When using bootstrap framework is it okay/common to use multiple containers for one page...not nested but just multiple?
@bethqiang console.log() is your friend :) once you get the API Call working, you can look at how changing the URL changes the data returned.
@TylerMoeller I forget that exists quite frequently haha. Will do for sure--thanks! :)
@ssgriffen It is okay to use multiple, non-nested containers. Sometimes you want text to be in a container followed by an image that takes the full width of the screen (no container), followed again by more text in another container.
Hey everyone, got a question regarding the Map The Debris exercise of FCC. It's actually more of a "logic" question, or math question, what-have you...
For context:
"Return a new array that transforms the element's average altitude into their orbital periods.
The array will contain objects in the format {name: 'name', avgAlt: avgAlt}.
The values should be rounded to the nearest whole number. The body being orbited is Earth."For more context, the link to my code: https://repl.it/Cef1/1
While i managed to solve it, i did look up the hints, because i was losing myself over what the actual formula consisted of, namely of the 'a' value, the semi-major axis in meters of the orbital period
It's stated that the semi-major axis is the average altitude of the orbitting object + earth's radius. Ok, but i don't understand how the 'average' is the right value to find the semi-major axis.
Shouldn't it be the highest altitude point of the orbitting object + earth's radius that actually defines the semi major axis's distance?
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 685 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@mremotoo the
text-center class will center your text in a row. To center images, you can use the bootstrap grid system, or just leave the image in a row and define margin: 0 auto; in your CSS
@TylerMoeller , still not centering what seems to be wrong or missing here hmmm?
@mremotoo Looks like you're trying to center the #brand on your navbar. You'll have to do some customization to make that work - I wouldn't recommend it for your first personal portfolio. If you really want it centered, you could do something like this: http://www.bootply.com/mQh8DyRfWY#. Just make sure it looks okay on all different screen sizes.
no , not the navbar @TylerMoeller . the text and the image in the grey background
@mremotoo oh i see the issue now.
@mremotoo You need to use
text-center to center that text. <div class="col-sm-7 text-center">
And margin: 0 auto; on the image in your CSS
im trying to create calculator buttons using bootstrap.. first off why are the boxes different sizes? And how do i make them all line up evenly?
http://codepen.io/duel_drawer8/pen/rLygWG
http://codepen.io/duel_drawer8/pen/rLygWG
@Dueldrawer8 i used actual buttons instead of span. that may be one way to help get started.
@Dueldrawer8 however, i did not use bootstrap button classes.
@jwoo92 yeah, i was trying to avoid the button route bc the bootstrap buttons all look generic
in the callback (in this case, click) function of .getJSON (for the random quote machine, not sure if that makes a difference)...how do i reference the object i got from the api? it doesn't have a name (that i know of?)...is there some way to name it so i can access the properties?
@Dueldrawer8 what i like to do is simplify the project first. start with a basic look where you can start your functionality. once everything works, you can go back and tidy up the look :) this is my own preference though sometimes.
@Dueldrawer8 use buttons and style them your own way :)
dueldrawer8 sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @jwoo92 |http://www.freecodecamp.com/jwoo92
need some help here http://codepen.io/GMATom/pen/BzAOQE/?editors=1010
I need to alter the value of global variables lat and lon from within the function, is that possible? What am I doing wrong? later on I will use those global variables in a new function within the document ready one
Anyone wanna give me some feedback on my new and improved quote generator?
http://codepen.io/woofiewilly/full/KrqGwP/
http://codepen.io/woofiewilly/full/KrqGwP/
@mremotoo
Actually, this is what I'm trying to achieve:
https://codepen.io/FreeCodeCamp/full/YqLyXB/
and this is my code:
http://codepen.io/mremoto/full/NAYjRd/
Please notice the text and the image on my code. it doesn't seem that it's centered in the div properly...
@TomGM - hello there. Right now (and I might have just caught it during editing) you have a syntax error in your code, a
var api = with no ending?
@TomGM - if I comment that line out, it looks like it gets the location correctly?
@TomGM - another thing that you have slightly incorrect is that you are declaring the variables as "globals", but then you are re-declaring them within your
.done(function(){}. If you just want to use them as globals, remove the var from the two declarations inside your function. Otherwise that is making a locally-scoped variable with the same name, but you won't set the global values.
how to get my image to center even when screen resizes?
@woofiewilly - I like it, but your "Tweet" quote is one behind from the one that you are showing at the time. But I like the design of the site. One other thing that you could improve is that if your quote is too long to tweet, you could truncate it, kind of like that one freecodecamp exercise putting
... at the end. Just a thought...
@khaduch in the end I decided to just nest the ajax function, but I still can't get it to retrieve data properly, would you take a look? If this worked, alert(data.weather.main) should give me something, but it doesn't
here's the api call = api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&appid=71515d3ce7d65a06962c9ca092e37177
I just couldn't set my global lat and lon variables to the info I retrieved from the first api within the function, tried multiple ways... someone told me to try promises but I've no idea how they work yet
@khaduch Thanks! I just noticed those problems, so I'm gonna try to fix them
woofiewilly sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1470 | @khaduch |http://www.freecodecamp.com/khaduch
@TomGM - and you need this:
data.weather[0].main because the weather is an array, location [0] is where you find the first object.
not the same as figuring it out for myself
but thanks
it's been 3 hours
@TomGM - actually, there are two different "main" - the one inside
weather[{}] and then one that you can access as data.main.temp, data.main.pressure, etc. Hard to read that long string of JSON data... :)
@TomGM - found this site: http://codebeautify.org/jsonviewer, where you can paste a JSON string and it will format it into something a little more readable...
because I was about to jump out a window
@TomGM - happy to help - yeah, firefox has a lot of helpful addons... so, I hope you're on the way and don't hesitate to ask questions again!
well my only issue now is the fact whatever code I write, I have to nest within the previous nest, so I feel like it's going to be a mess
wonder if I should learn about "promises" and use that instead to make a better app
@TomGM - you can still make those variables global. I don't know if I was clear on my other message. I'm adding another note.
@TomGM these may be useful: :sparkles:
if you look at my current code http://codepen.io/GMATom/pen/BzAOQE/?editors=1010, how should I change it so that lat and lon are global variables? I tried declaring them with the var method right after the document ready function and it didn't work
that way I can avoid nesting the 2nd ajax function
@TomGM - you just need to do this:
$(document).ready(function() {
var lat, lon;
GET_LOCATION_HERE ( function(data) {
lat = data.latitude;
lon = data.longitude;
call the get_the_weather function
};
function get_the_weather() {
etc.
}
)};you could do promises - I watched a video on that, it didn't seem to be that difficult? But I haven't tried it yet.
I'll try that again, maybe last time I was doing something else wrong
@TomGM - you still need to wait for the location to be returned, but you can at least make the weather function separate so you don't have to nest all of the code in there, just a call to the function. And at that point, you can even pass
lat and lon as arguments to the function, so the global variables really aren't necessary.
was about to break the code again lol
try the fetch api
it works with promises
@mremotoo - looks like you got your image centering on a narrow screen?
now that I got the queries working it's time to melt my brain over celsius-farenheit and icons
fixed
took me a minute to figure that out lol
thank you
Hi guys,I have built a basic first website,pls help me to make it better
Im actually playing around grid in bootstrap
what Im actually curious about is, when i scale the screen to full size of my laptop, the elements in the row seem to not evenly center themselves properly.
@grace1120chen it's seems nice. You can make your elements to center for a better view
@grace1120chen use text-center if you're using bootstrap or center-block for images
@lpy1994 cover the whole background with the picture is that what you mean?
Im actually trying to center the elements evenly on full screen
Im actually trying to center the elements evenly on full screen
@lpy1994 when you scale it down, it seems to center fine
Hi guys, I'm really stuck on getting the background to change for my local weather app. Could someone take a look and help out?
https://codepen.io/William-cabell/pen/WxkajL
https://codepen.io/William-cabell/pen/WxkajL
@lpy1994 the point is, I'm trying to center the image and the text evenly on full screen
@wbac88 what background would you like to change?
@mremotoo The background of the entire page. I've tried selecting the body and html in jquery, but it ends up pasting the picture over everything else on the page.
hey guy can you find a problem? I can't get my
streamers rendered and at the same time i haven't been thrown an error in console. Can you figure this out? the pen itself
hey guys, where can I see the different possible values for each property of the result I get from querying the weather api? I want to display different icons according to the weather description using the switch method but I don't know which cases to use
@wbac88 you could try to analyze your script, there's seem to be errors.
@mremotoo Nope, the errors just have to do with a jquery plugin I was trying to use to fix the error.
*fix the problem I'm having
@mremotoo Or, I should say the errors having to do with the log in dev tools in chrome
@wbac88 I was kind of figuring out the same thing actually. Worse is, I've deleted it to make a new one
@mremotoo Oh no! Yeah, I was assuming the weather API was going to be the hard part of this project, but no, it's the pretty pictures!
@wbac88 true. I actually starting over since I jumped a lot lol. Now I feel very noob trying to figure out these bootstrap grids lol
was looking at your code, are you sure 100,200,300,400,500,600 are the points at which weather description changes? where can I see that for myself? going to add clouds now
@mremotoo Yeah, I'm going to go to bed ans see if it makes any more sense tomorrow.
@TomGM Are you talking to me? It says it all on the open weather site
ty
@mremotoo you should check out shoelace.io, it helps alot with setting up bootstraps divs
@TomGM I did the same thing that you're planning, just without the icons. I like that you were planning on using a switch, I forgot about those! I chained a whole bunch of if/else if
@lpy1994 Did you style them with CSS to give them new colors, etc?
@lpy1994 Oh yeah, I see. Hmm
@lpy1994 you also need to add tis to your html <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
@lpy1994 yup, that fixed it
@Byzgig Im actually playing around grid in bootstrap
what Im actually curious about is, when i scale the screen to full size of my laptop, the elements in the row seem to not evenly center themselves properly.
http://codepen.io/mremoto/full/NAYjRd/
what Im actually curious about is, when i scale the screen to full size of my laptop, the elements in the row seem to not evenly center themselves properly.
http://codepen.io/mremoto/full/NAYjRd/
@wbac88 try switch and > <, should do the trick, you can even take it further and use a case for each and every condition including tornadoes etc
@lpy1994 it wasnt in the pen you posted, i added it and now the font awesome icons are showing up
@mremotoo tough to say without being able to see what its doing, it looks good on my 22" monitor
@Byzgig it's not evenly centered unlike this one,
wbac88 sends brownie points to @tomgm :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @tomgm |http://www.freecodecamp.com/tomgm
lpy1994 sends brownie points to @byzgig :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @byzgig |http://www.freecodecamp.com/byzgig
@mremotoo the only difference i see is that it looks like you are centering the text while the other page you posted looks to be right aligned
everybody take a look, is there anything, any part that look abnormal or unecessary??
New to the forums! Hello!
I'm trying to do the twitchTV project in vanillaJS.
When I connect to the twitch api I get the wrong info (confirmed by placing the url in Postman).
Can someone please help me figure out whats wrong?
Here's my code
function httpGet(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
console.log(xhr);
}
httpGet('https://api.twitch.tv/kraken/streams/esl_sc2');
can anyone help me here? http://codepen.io/GMATom/pen/WxzYpK it's giving me the default case even though cond=800, so it shows the rainbow pic instead of the clear sky one where did I break my code?
nvm can't use comparison op erators,
@TomGM use else and else if - i just did that on your pen and it works
uh how do you add a class or something to a body tag in codepen?..
fixed it http://codepen.io/GMATom/full/WxzYpK/ anything I could've done better? Trying to minimize bad habits as I move forward
any method I should know of that would've made my code simpler? someone told me to use promises but I had no idea how to, would that code be acceptable as it is?
@TomGM everything seems fine to me, I wouldnt worry too much about absolutely perfecting everything
@TomGM you will learn as you go, and the easiest way to learn is to keep doing new projects
@Benalron thanks :), I just try to get as much as possible out of these, I want to become "better than good" at this eventually
tomgm sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @benalron |http://www.freecodecamp.com/benalron
@TomGM my personal opinion is that the best way to do that is come up with unique ideas and things to try in addition to the FCC projects
@Benalron I'll get to that I guess, I was thinking of stopping once I'm done with the front end cert and get some books or whatever on front-end development before I move on to back-end
yeah, front end development can have a lot of depth to it... I think there won't be a shortage of things to learn for a long time
@Benalron also I feel like it might be hard for me to become an actual full-stack dev without some proper training on software engineering, and the career I picked in college is information systems (much more management oriented, only one coding course and it's meh), but I might be wrong there
front-end I can probably do with just time and some design training
@TomGM im only 4 months in
but I feel like theres a TON of front end stuff to learn, and I enjoy it a lot
I really like the UX aspect of it, and that alone is a valid career path at least where I live
yeah same... I am not the best at design related stuff yet, but I really enjoy working with it
on a side note: I love this chat, pairing gitter+coding challenges I feel like I'm making real life progress and connections
if only those 15.000 gaming hours were freecodecamp hours :p
I put more effort into hitting Diamond in league a year ago than I have put into coding so far : \
and coding makes me feel 10x more satisfied
but yeah, a friend picked up coding at 15, we're 24 now, and all I can say is " he's doing well"
@Benalron i have it so it updates the existing inventory, but i can't figure out how to add the new items
@Byzgig you just need to push the new item into the array if it doesnt exist
i know, but in my for loop it adds it 3 times because it doesnt match that many times
ive been trying to remove thematches and then push it after it has the array has been reduced but cant quite get there
hey so i am working on the personal portfolio webpage and i used img src with my drop box links to my pictures but nothings popping up does anyone know what im doing wrong
Hi! Can someone give me a good course on 'Multivariable Calculus' from a good university. I know its off topic, but I need it.
@zaynsantiago i don't know if you can hotlink to a dropbox url like that. maybe use a photosharing site
like photobucket or imgur
ill try someone actuallly suggested it to me but what site would u recommend
@badc0ded
i think either of those would work, or you can even use puush
i usually post images to my own domain, but i use puush for a lot of quick sharing
anyone know why my buttons wont display side by side on my calculator?
http://codepen.io/duel_drawer8/pen/rLygWG
http://codepen.io/duel_drawer8/pen/rLygWG
I am on the "build personal portfolio page" challenge. I am trying to run this code outside of Codepen, but am hitting a wall. It has to do, I think, with enabling Bootstrap.js and/or jQuery. Here's what I've got in the '<head>':
'''
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="https://scontent.ford1-1.fna.fbcdn.net/v/t1.0-1/p160x160/11267355_936873989705417_1124143444860752719_n.jpg?oh=b3cad97689918a0aa3fa095b816c2cbf&oe=581F1ABF" type="image/jpg">
<title>My Portfolio Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]-->
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<!--[endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" async></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" async></script>
</head>
'''
I am on the "build personal portfolio page" challenge. I am trying to run this code outside of Codepen, but am hitting a wall. It has to do, I think, with enabling Bootstrap.js and/or jQuery. Here's what I've got in the
<head>:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="https://scontent.ford1-1.fna.fbcdn.net/v/t1.0-1/p160x160/11267355_936873989705417_1124143444860752719_n.jpg?oh=b3cad97689918a0aa3fa095b816c2cbf&oe=581F1ABF" type="image/jpg">
<title>My Portfolio Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]-->
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<!--[endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" async></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" async></script>
</head>
Did you guys find the bootstrap framework to start with or what?
Thank you
I mean, my body markup works in Codepen
My
<body> markup works in Codepen
@codemonkey4 this line here:
<script src="../../assets/js/ie-emulation-modes-warning.js"> try closing that script tag
@augmt No dice.
Notepad++: still learning it.
I've completed Show Local Weather which worked well for me when run from a http-server -c-1 local server environment. So I placed my project on Codepen.io but now i notice that when i open it from Codepen.io it really is not doing what it should do for example the image does not show up and the Celsius/Fahrenheit conversion formula has stopped working. This is very strange because - all these worked perfectly well until copied to Codepen.io Have you seen this problem before and what could it be?
Please advice me why this is happening and how can I fix it.
@codemonkey4 oh, ok. you can check the console and see what it's saying.
ctrl + shift + j if you're on chrome, i believe
@augmt OH SNAP i've got NoScript installed :-1:
@codemonkey4 so it's blocking jquery and bootstrap?
@augmt - i can clearly see that it is working for you (on the link you provided) ...
@Annis-Monadjem codepen's currently accessible through http and https
the openweatherapi is http only unless you pay for https
@augmt - got it thanks @augmt thanks great !!! Thanks
annis-monadjem sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 422 | @augmt |http://www.freecodecamp.com/augmt
and if you access codepen through https you can't access openweatherapi through http unless you use a proxy
if you want to show the weather when on https you can either use a proxy or use a different weather api
@augmt - now what is a proxy and how I would use a proxy (or at least where i could find more about it please).
@codemonkey4 so it's blocking jquery and bootstrap?
getting a lot of these errors in console
blockquote flashctrl:Object { message: "The operation is insecure.", lineNumber: 51, stack: "main@resource://gre/modules/commonj…", name: "SecurityError" }
@augmt i'm getting closer, thanks to your console clue.
codemonkey4 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @augmt |http://www.freecodecamp.com/augmt
it'll redirect your api request so it'll seem like your request was directed to an https source rather than an http source
gah, my markdown skills are nonexistent. i'm so newb at this
@codemonkey4 nice! i've never dealt with NoScript, but i'm glad i could help at least a bit
annis-monadjem sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave augmt points
@Annis-Monadjem in case you'd like to look at different weather apis, there's forecast.io, wunderground, and the yahoo weather api, among others
I suppose just in the interests of moving on, I'll have to drop my dislike of Codepen and stick with it because then at least the code works. I'll have to figure out, eventually, how to get my code to work outside of it
I need ur help
im a little bit confused about setInterval functions, I want mine to start on click, but it is firing right out the gate?
@augmt Hey, I finally figured it out, although I don't know why it worked. I moved the
<script> tags for the Bootstrap and jQuery js libs out of the <head> to the end of the <body
@codemonkey4 i am a little confused about basic front end development what i will do in this
@codemonkey4 we will write a code or learn the different things.
@AbdusSamiPatel I'm just as new at this as you. Going to bed now... namaste
@Benalron am a little confused about basic front end development what i will do in this. We will write a code or learn the different things.
grace1120chen sends brownie points to @mremotoo and @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @lpy1994 |http://www.freecodecamp.com/lpy1994
:cookie: 116 | @mremotoo |http://www.freecodecamp.com/mremotoo
@camperbot I am a little confused about basic front end development what i will do in this. We will write a code or learn the different things.
for Build a Personal Portfolio Webpage this project
where should I start?
Thanks
@grace1120chen you can start with the html markup to fulfill the user stories given, using the sample portfolio page
the sample portfolio page is on codepen,right?
@grace1120chen if u have any doubts let me know
@grace1120chen yep. You can view it in codepen. You have finished the tribute page challenge right?
Thank you
u can take this as an example
and this also
Any good courses you'd recommend to learn 'Data Structures & algorithms' and 'assembly language'?
possibly this too
@faisal1337 check coursera and edx. They have several courses.
@siyafazila I am a little confused about basic front end development what i will do in this. We will write a code or learn the different things.
grace1120chen sends brownie points to @nixonrichard :sparkles: :thumbsup: :sparkles:
@AbdusSamiPatel You will learn the basic technologies, languages and frameworks in web development. HTML, CSS, JS, Etc
have any of you worked on the simon game? the sample mp3 sounds they provided us don't seem to be great quality
I have a beginner question
<a href="www.link.com.au" target="_blank">Designed by....</a>
This should open the address in a new link. But i have the problem it just adds the target web address to the end of the current websites
This is my result : http://mywebsite.xyz/www.link1.com.au
it results in an error and it cant show the website
Hi, I'm stuck again! I'm working on the twitchtv challenge and am having the most problem trying to get the data into the DOM...my code attaches the ul for each json object as I wanted, but the data doesn't populate it. I think it might be about parsing the json but every script I try for doing that doesn't work - can anyone help? Code is at http://codepen.io/callyB/pen/RRrOVY
$(document.createElement('li')).text(item)
where does it come from ?
I kinda hoped it was the text from each item in the object (that maybe should be an array)? Obviously it's not hto
oops - sorry @kirbyedy - finger slipped!
@flyyyperth not sure y its not wrking. Where is this markup actually in?
http://businessdemo1.xyz/ the link in the footer
yup @Benalron - any advice gratefully received! (that was a yes!)
@flyyyperth did you contact the ppl at your web host?
@flyyyperth I think its something that needs to be fixed from their end.
@kirbyedy - will try that as soon as i get this client off the phone - thanks!!!
callyb sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1269 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
flyyyperth sends brownie points to @siyafazila :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @siyafazila |http://www.freecodecamp.com/siyafazila
@flyyyperth do check the error log in the cpanel, it might shed some light as to what failed in execution.
@kirbyedy it didn't seem to work - was it to replace my whole code block? I tried that and then just replacing the last line - sorry if I'm being dense!
Hey can some one help can't continue after signing up for the forum the link to continue isn't active
Yayyyyy! (I just frightened the dogs - oops!) Thank you!!!!!!!! @kirbyedy - very elegent solution!!! (wish I'd thought of it)....
callyb sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: callyb already gave kirbyedy points
Hey guys, Could some one give me some feedback on my Random Quote Generator before i submit it ? http://codepen.io/aisforanti/pen/oLqoAG
Hello guys ! can any one of you can find Why $("id").val() ; is not returning anything. in my code?https://codepen.io/techobist/pen/dXmZwQ
*in the console
@vaibsharma
$('#search2').click(function() {
var result = $('#search1').val();
console.log(result);
why did you put value instead of val() ?
errr !! I am sorry . Thanks a lot . btw why calling a function from those parenthesis wasn't the correct way ?
@kirbyedy
@kirbyedy
vaibsharma sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1271 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
val() yes
Yo guys, currently on the Personal Portfolio web page design. Just wondering, is it bad practice to use a fair amount of divs?
@DylanSatelle its not bad practice as long as you use it only as generic container. in some cases to be more semantic you can use sections, articles, aside, header ecc
@DylanSatelle what @sorinr said. HTML5 has some pretty good tags, so pure div is not always necessary.
I've ran into a little problem though. I'm trying to style my <p> tags.
All of them, to be the same.
Sigh... not very much.. .damn typos.
Fixed it :P
on tribute page
It is getting wrapped around the floated elements
hello?
@rashmiagar be patient. it can take some time for someone to look through your code and figure out what's going on. in your css for the
#history selector, change float: clear; to clear: both;
rashmiagar sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1564 | @0x0936 |http://www.freecodecamp.com/0x0936
@0x0936 just wondering if you could tell me how the code is looking on my portfolio website attempt?
o, brb.
Hey, does anyone know why this isn't working?
function mutation(arr) {
var arrOne = arr[0].toLowerCase();
var splitTwo = arr[1].toLowerCase().split("");
for(var i = 0; i < splitTwo.length; i++){
if(splitTwo[i].indexOf(arrOne) === -1){
return false;
}
return true;
}
}
mutation(["Mary", "Aarmy"]);
@DylanSatelle the
h2 with id of contact needs to be fixed - I'll see if you can spot the problem. <img> tags don't require a closing </img> tag. The general rule is that if content cannot be added to the tag, don't use a closing tag. The <center> tag is no longer supported in HTML5, use CSS instead. It's a good start :+1:
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1565 | @0x0936 |http://www.freecodecamp.com/0x0936
@LordYamanouchi your
if condition is asking if this letter contains this string swap those. also, return true should be outside, after the loop
@0x0936 Same problem when I do it like this.
function mutation(arr) {
var arrOne = arr[0].toLowerCase();
var splitTwo = arr[1].toLowerCase().split("");
for(var i = 0; i < splitTwo.length; i++){
if(splitTwo[i].indexOf(arrOne) === -1){
return false;
}
}
return true;
}
mutation(["Mary", "Aarmy"]);
@LordYamanouchi you didn't swap your letter and string variables
@LordYamanouchi You need to swap arrOne and splitTwo in your indexOf
@LordYamanouchi No you want all letters of
arr[1] to be arr[0]
@LordYamanouchi you want all the letters from
arr[1] to be in arr[0]. You're correctly iterating over the letters in arr[1] but the check needs to be if arrOne contains the current letter splitTwo[i]
@0x0936 awesome.. and last thing... of course im trying to do it from scratch but I keep relating to previous challanges and bootstrap / css cheat sheets.. is that ok?
@DylanSatelle of course. use any and all reference material that you can to help. none of us have everything memorized
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:warning: dylansatelle already gave 0x0936 points
Oh yeah, and @0x0936 I wanted to ask, Am I using divs correcrtly?
okay so I am trying to get the button on the right to image swap when hovered over using JQuery (like the one on the left turning blue) but it doesnt seem to be working, can anyone help? heres the pen https://codepen.io/AdamCollier/pen/OXvwAw?editors=1010
what are such type of pages called, where the current view of the page have a full screen image covering the background, you scroll a little and then there's another image and another page type of thing?
How do all the images fit all lengths of screen perfectly :confused:
@meetmangukiya If so, Travis Nielson did a great video on it.
it has two parts, similarly there'd be many more.
@DylanSatelle searching for a example of parallax now, will let you know if it is what I was searching for :)
@meetmangukiya they are called a single page apps. You can set height/min-height of <div> to 100% in css. Just don't forget to give those values to body as well
@DylanSatelle yeah, you are right, parallax scrolling is what I was looking for
thanks
@Marjanus yeah, but I still wonder how'd it not blur, if it is not stretched in its natural aspect ratio(assuming .svg, with something different it'd be even worse)
"Build a Wikipedia Viewer" is giving me headache! I don't understand how to use the Wikipedia API!
There are so many parameters for the Wikipedia API! This is going to be a long TRIAL and ERROR process.
@DylanSatelle it's hard to use divs incorrectly - with exception being if there's an HTML semantic tag that would make more sense in place of the div. For example, you have distinct sections: portfolio, about, and contact. It may be more semantically correct to use
<section></section> tags here instead of divs - this begins to touch on accessibility for both the user and web crawlers. The only other issue I noticed is that you're using inline-css styles. Try to place all of your css inside codepen's css section - or if developing locally, put all css inside a *.css file and add a link to it in the head tag.
I just hope that checking other resources such as StackOverflow is not a form of cheating.
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1566 | @0x0936 |http://www.freecodecamp.com/0x0936
@lleander that's not cheating. copy/pasting (plagiarizing) someone's project and presenting it as your own is cheating.
Hello ! can anyone of you can help me why I am not able to get json file from ajax .https://codepen.io/techobist/pen/dXmZwQ
@Adam-Collier - I think that your selector just isn't correct. I made a change and added a class "funnyButton", and then used that in the selector, and it works. This is what I changed
$("a.button").html("<img class='funnyButton' src='https://65.media.tumblr.com/7510be5ac587b09cbf38e7dd3b968b04/tumblr_oaot6lEtzA1uupkrso1_75sq.png'>");
$(".funnyButton").mouseover(function(){
// etc.
Thank you very much @khaduch it works! how come it didn’t work with that selector though?
adam-collier sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1471 | @khaduch |http://www.freecodecamp.com/khaduch
@Dave1089 yeah I found the error but I am not finding what I am missing? Its saying Cross-Origin Request Blocked: (Reason: CORS header 'Access-Control-Allow-Origin' missing).
@vaibsharma your URL only needs this much
https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+searchStr+"&limit=10&callback=?
don't forget callback=?
I wouldn't use ajax, when I have pretty short and simple jquery .getJSON() method
okay ! I will keep that in my mind , but I with the URL that I have in my code I am getting a json file from the address bar without any error ?
so why its creating problem when I am calling it from th ajax? @Dave1089
how can i make my wind symbol inline with weather?
http://codepen.io/Mohammad_Hasham/pen/QEQzjw?editors=1100
http://codepen.io/Mohammad_Hasham/pen/QEQzjw?editors=1100
for bootstrap you need to wrap everything inside a container class
@vaibsharma may be because callback was missing , not sure I didn't look thoroughly
@MohammadHasham - "Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable."
i am looking into the exact issue now.
Please help me correct my how to reverse a string code. Thanks
function strReverse(str) {
var reverseStr = str.split(' ').reverse().join();
return reverseStr;
}
var reverseStr = str.split(' ').reverse().join();
return reverseStr;
}
What is wrong?
@matthew3454 If you split with ' ' it will reverse words not characters
@matthew3454 Also the default join without a parameter will put commas between the letters
var myVar = 87;
// Only change code below this line
myVar = ++myVar;
having problem
myVar = myVar should be changed
@shenoyabhijith The example show i = i + 1 replaced with ++i - you should make the same replacement
myVar holds 88 r8
?
@shenoyabhijith Not sure how to. You had myVar = myVar + 1; replace this
@sjames1958gm
shenoyabhijith sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2092 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@MohammadHasham - couple of other fixes - use background-size:cover
mohammadhasham sends brownie points to @user-sarang :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @user-sarang |http://www.freecodecamp.com/user-sarang
and then when you setup your rows let the column widths be 100% that is do not use col-md-* classes
for nwo
now
get all of views aligned
and then apply these classes for mobile compatability
do u mean to say that with row i dont have to use col-md-*
?
@user-sarang Please help me i am eager to make it responsive
@MohammadHasham http://codepen.io/user_sarang/pen/WxJZpR
i put in some quick fixes
yes col-lg-4 are classes that are used to get multiple columns
if i am not wrong/
Thanks alot body i'll look forward to it.
the actual specification is given in BS documentation
take a look at this http://codepen.io/user_sarang/pen/WxJZpR
@Adam-Collier - you're welcome. I just came back and saw your reply. That selector just didn't select the
img, so I thought I would try a slightly different one, and this seems to work, too: $("a.button img").mouseover(function(){ it finds the child img that is nested in that anchor tag.
if you look at it full screen then you will see 3 columns
as you reduce the size of the screen(browser) you will see it gets shifted to one column
so we have to use <div class = "row"> andd then <div class = "col-->
am i right?
yep both of them should be wrapped within the container class
so the pen you have sent after editing is the correct one without any major mistake i shall look forawrd to it?
@user-sarang
@MohammadHasham - i did only minor revisions, I did not check anything else.
Hi. Simon's finished. Can you guys have a look? (code mostly) .
*You can test the win by changing the config.nrOfWinningSequences
http://codepen.io/manu4216/full/AXyBJE/
*You can test the win by changing the config.nrOfWinningSequences
http://codepen.io/manu4216/full/AXyBJE/
can anyone suggest me that what i should improve technically? is it mobile responsive?
@manu-4216 I really like that intro for your game and the shading. I noticed one problem. at stage 2 the a.i. selected yellow, yellow and I intentionally chose a wrong color (that sound for wrong selection is a bit jarring), then the a.i used a different sequence for me at stage two yellow, blue.
@manu-4216 pressing the start button while the game is active - and awaiting user input - simply advances the user to the next stage for free
Hi, I am a web developer with 9 years of experience, I want to work on some responsive design sites, my skills are HTML5, CSS, Javascript, Jquery, AngularJS, Bootstrap, Zurb-foundation. I want PSDs with 12 grid design, I will work for free as I want to build my portfolio.
@Bhushan933 please can you review my pen and tell guide me if there are no mistakes
@Bhushan933 not to blame but honest curiosity how is that in your 9 y of experience you never worked with responsive site?
@MohammadHasham - looking at your weather app. I think that it looks very nice. I have a few comments:
- "Fahrenheit" is misspelled in your button. And did it play a song the first time I clicked it? (There must be something else going on on my computer.)
- The first time I click the
C / Fbutton, it doesn't do anything. After that, it works. - on CodePen, you should not have the
<html>and<body>tags in your HTML panel. The Codepen template supplies those tags. You can make abodyCSS selector to fill in your background image. And you should also setbackground-size: cover;because on a wide screen, your image started to repeat on the right hand side - I like the background image, but it doesn't really "fit" with my physical surroundings - I wish it did! It's beautiful... Not sure what it would take to make backgrounds that more accurately reflect the weather or physical surroundings of the user.
It looks great - just a couple little things, as I noted. Nice work!
wordBlanks("dog", "big", "ran", "quickly") should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).
wordBlanks("cat", "little", "hit", "slowly") should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).
wordBlanks("cat", "little", "hit", "slowly") should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).
hey guys. i am working on my first project and need help. http://codepen.io/JonathanWbn/pen/AXVgkL here is the link of my pen. my problem happens when i hover over my heading (Jonathan Wieben). i wanna exclude this heading from the css i did for li a:hover. may someone helpful. i would appreciate it a lot.
@manu-4216 - the look of the game is very nice! It seems to play well, too. Very good! I ran the "Analyze JS" function on it - it calls out a lot of things, many of which might be "noise", but I don't know if you'll find anything that will help you?
Once again - good work!
Hey guys, I need some help figuring out how to get my logo to fit only the background of the #contactMe <div> and not the background of the whole page. Any ideas?
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}any idea of why, or how to work around it? I guess i can just simplely add a conditional or a setTime function to delay it but if you ask me it sound cheap :(
Also, not mobile friendly but the container-fluid class does not address that
@JonathanWbn - just change the
<a > </a> tags to <span> </span>, and maybe you need to adjust the margin a bit?
@khaduch yeah, it worked! thanks a lot. i really do appreciate it.
jonathanwbn sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1472 | @khaduch |http://www.freecodecamp.com/khaduch
@vinarius right now its just the contact me div not other divs
it dont worth nothing
its a reputation system withing the comunity
it's given everytime you get or give a thanks
vinarius sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @trip16661 |http://www.freecodecamp.com/trip16661
jonathanwbn sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @trip16661 |http://www.freecodecamp.com/trip16661
This message was deleted
$('.scrollToAbout').click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
$('.scrollToAbout .scrollToPortfolio').click(function() {
$('html, body').animate({
scrollTop: 400
}, 800);
return false;
});
$('.scrollToContact').click(function() {
$('html, body').animate({
scrollTop: 1185
}, 800);
return false;
}); $('.scrollToAbout .scrollToPortfolio, .scrollToContact').click(function() {
$('html, body').animate({
scrollTop: 1185
}, 800);
return false;
}); $('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});@vinarius - I tried adding a few settings to your #contactMe div - it made a difference, not sure if it is what you are trying to achieve:
background-size: contain;
background-repeat: no-repeat;It is aligned to the left, but I kind of like it that way?
and set it inline
background: url() no-repeat contain;etc
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}any idea of why, or how to work around it? I guess i can just simplely add a conditional or a setTime function to delay it but if you ask me it sound cheap :(
@meetmangukiya - looks like you are using an image from imgur - that doesn't work (unless you are logged into an imgur account, I think?) They have a policy against cross-linking of images, if you check their terms & conditions. You have to get your image from some other site.
@trip16661 a ocean like background image is supposed to be in the background.
@meetmangukiya sorry late reply, like ken said its a cors problem
"http://imgur.com/HTf7ylN.jpg
the link is in http and you are calling from https
the link is in http and you are calling from https
so it causes troubles
if u want to see(just for testing)
try to deprecate the codepen link to http
try to deprecate the codepen link to http
you will see how it will work
can anyone help me with my random quote machine? I'm trying to use the twitter web intent but I'm not sure how to add the quote and author. I'm having a scope issue
http://codepen.io/labanch/pen/oLEVGW?editors=0010
http://codepen.io/labanch/pen/oLEVGW?editors=0010
@meetmangukiya thank you! took me forever and I had to look at the example code :( for a small part but I'm pretty proud of it
labanch sends brownie points to @meetmangukiya :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @meetmangukiya |http://www.freecodecamp.com/meetmangukiya
meetmangukiya sends brownie points to @labanch :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @labanch |http://www.freecodecamp.com/labanch
I really like it!
do you know how to use the twitter web intent?
This is what my tweet button code is
<a href="https://twitter.com/share" class="twitter-share-button" data-text="hi whats up" data-show-count="false" data-size="large" id="tweet">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
@labanch you gotta edit the
data-text attribute to whatever message it should look like by default
@labanch not sure if this is what you were looking for, but anyways here it is :point_up:
Keep getting error saying that my topmost img doesnt have the required element..am i missing something?
its for the Cat photo app, is there somewhere i should looking, thats the name of it at the top
@meetmangukiya what does that code do? I'm trying to make mine like the example. Where the quote and author is placed inside the 'tweet box' ready for anyone to tweet. Like this:
https://codepen.io/FreeCodeCamp/pen/ONjoLe?editors=0010
https://codepen.io/FreeCodeCamp/pen/ONjoLe?editors=0010
help format @bnelton
- using
Shift+enterwill give you additional line feeds (space) for pasting your code. also, the backticks (`) key is located to the left of the number one (#1) key. - further, you may find the two buttons (chat/compose & markdown - the chat/compose button alternates modes) to the right of the text entry area helpful.
- you can also edit text after it's been entered by clicking on the three (3) dots to the right of the text entry area (it will appear when you hover to the right of the time stamp).
: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
@ndburrus
@labanch the code I pasted here, does the same things
The tweet message that you'd like to be already present in the tweet box should be the value of the
data-text attribute
@bnelton can you post code? see, here: :point_up: July 22, 2016 5:31 PM and here: :point_up: July 22, 2016 5:31 PM
try
$(selector).attr('data-text', "<your tweet message here>") @labanch
And I'd suggest you to enclose this statement inside the onClick event handler of the
Quote button, but I think you'd have figured almost all of this yourself :+1:
@meetmangukiya I'm trying it now. Taking a deep breath because I have been looking at this for a few hours now lol
@ndburrus what are you needing ? i can post my whole code if you want me to
finally got it to work
@ndburrus thanks
bnelton sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1081 | @ndburrus |http://www.freecodecamp.com/ndburrus
@bnelton excellent! nice job :palm_tree:
...you may want to practice posting code. it may come in handy! :)
...you may want to practice posting code. it may come in handy! :)
http://codepen.io/luis4flames/pen/grvvqx Can someone help me understand why my linear gradient will only reach as low as my last element rather than wrapping the entire background image I have it on
@luis4flames - you are doing some unusual things with your margins and I wonder if that isn't what's causing your problem? It seems that you are forcing a lot of your placement that way, I don't think that I've seen that before. But I cannot say for sure that it's a problem, it just sends up some red flags for me.
Yea, the problem is i have no idea how to place my elements where i want them on the page. Which commands am i suppose to use to move things around? Appreciate any tips! It's been a pain to move them around and I knew i was doing something wrong. @khaduch
@luis4flames - other things that I see - you have a closing
</div> tag at the top, with no opening. You should not have the <body> tag in your HTML panel - you can put that styling that you want directly on the body element in your CSS. You don't have a closing </div> tag for your <div class="row home-container">. You are using <center> tags, which are obsolete.
@luis4flames - in Bootstrap, there is a "text-center" class that should help with centering things. You might need some margins to help with adjustment, but as I said, you seem to have "too much." I'm seeing if I can get a handle on how to format your page in a different way... I don't have a lot of time, but maybe I can figure out something to help...
@luis4flames - oh, yeah, you should not have the
<head> tag (and its closing partner) in there, either. That could be part of the problem... I spaced out on that one.
@khaduch so what should i be using to align buttons and elements where i want them on a page?
@luis4flames - the
text-center class usually seems to do that fairly well. I'm just trying to untangle some of the things that are there now, it's still looking a little jumbled in my edited version.
I dont want you to finish it up completely, its okay. Ill figure it out I just want some what of an idea of how i should be doing things
@khaduch
will text-center work with the buttons also? I applied text-center to the first div tag to apply to all and it didnt affect it at all
@luis4flames - I'm not going to finish it completely, for sure! But I just took some stuff out of the CSS, your
.services class with that negative top margin was just breaking the flow of the <h1> and <h2>. That should have been a lot smoother to just put them in order. I'll see if I can stop after I give you some ideas of what I did... :)
@khaduch
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}any idea of why, or how to work around it? I guess i can just simplely add a conditional or a setTime function to delay it but if you ask me it sound cheap :worried:
@luis4flames - I think that the fastest way to share this is by forking your project, here is my URL for it - I added asecond div to see if the gradient is working, and I think it looks better. You can compare to yours, and make changes as you see fit. Let me know and I can remove my forked copy when you're done.
Good luck!
@luis4flames - I just made one minor tweak to add
background-size: cover; in thebody` element CSS rules. In case you started looking...
luis4flames sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1473 | @khaduch |http://www.freecodecamp.com/khaduch
Hey guys. I just did the quote generator. Could you give me a feedback?
@luis4flames - great! You're welcome. One thing about positioning things like that, normally you don't have to work too hard to get things to flow on a page in a straightforward way. There are always exceptions, of course, but that type of page should be pretty much block-oriented, and the bootstrap grid (or other similar use of CSS) should handle most things fairly easily. I've also seen folks on here advocate the flexbox CSS styles for layout - it does handle some things nicely, but I haven't used it for anything yet, still learning about it. Have fun!
why does that keep returning the same quote
(you have to refresh the page to try again, havent set it up to be able to run more than once)
hmm, id doesnt even run in the chat
it*