Anyone pretty good with Vue? I need help with adding some conditional transitions
hey all! i'm trying to use flexbox to vertically center something to extend the full height of the screen, and i succeeded, except now there's little things where the corners of the divs are
(see picture--they're little gray things in the bottom right hand corner)
does anyone know how to get rid of those? or at least make them transparent or something?
never mind! figured it out. :)
@txsrangers
var sound = new Audio('your audio url');
sound.play();
Can someone help me figure out why some of my transitions and stuff are triggering before others?
Once the games over, the winning row should highlight green and THEN bounce out. But for some reason the bounce transition is going first when it shouldn't
If I take out the Vue transition altogether, the row will turn green like its supposed to, just not with the transition
are they both set to the element? cause it's that bubble effect.
stop propagation
something like that
nawww, ones on the indiv squares, and the others on the entire rendering itself
which doesn't make sense, bc it should be executed in the order of the code
but the indiv are nested in the entire thing. so the animation will happen first, then the indiv thing
Anyone know anything about this ^
Hey people, How do I make a JSON call from the Weather API suggested by the challenge? I attempted to do something similar to the JSON call of cats photo API, but it doesn't show me the data at all.
@sharkantropo are you using JSON-P
@sharkantropo link the codepen
?
You just use a $.getJSON with the url and a function for what it returns
@sharkantropo are you using JSON-P Dunno. @Dirtier https://codepen.io/Sharkantropo/full/GjQjoj/
@sharkantropo Ok instead of function(json) make it like function(data)
Then try console.log(data) to see if it returns
that wouldn't matter
it's the stringify.
you might not need it.
@sharkantropo openweathermap API wont work over HTTPS , you can see that error in chrome/browser console. So load your pen over http and try
@Dirtier you didn't use a key? for the app?
oh shit yea I think you do need one for openweathermap
cant remember
Yea you do
you didn't though
That's why it just gave me the connection denied when I tried in your pen @sharkantropo
Yea I did
the APPID
@sharkantropo the url u r using is wrong
@Dirtier oooh so then you signed up huh?
Yea its free lol who cares
EMAIL DOES!!! SPAM
sheesh
cmon man
@walidashri you mean http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=a770e7212e57fea87e81775715e3be0d ?? @Dirtier I'm using the JSON format+a free key to show current weather data.
@Dirtier you dick.
-.-
@sharkantropo you probably also need to input your location too. im not sure. im barely starting this one too
@silver537 No. The code should show you the current weather from your geolocation, you don't need to input anything as user.
@sharkantropo You still having issues?
@jdtdesigns Yes, what I want is that by pressing the button, in the well a data like this is displayed: {"coord":
{"lon":145.77,"lat":-16.92},
"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],
"base":"cmc stations",
"main":{"temp":293.25,"pressure":1019,"humidity":83,"temp_min":289.82,"temp_max":295.37},
"wind":{"speed":5.1,"deg":150},
"clouds":{"all":75},
"rain":{"3h":3},
"dt":1435658272,
"sys":{"type":1,"id":8166,"message":0.0166,"country":"AU","sunrise":1435610796,"sunset":1435650870},
"id":2172797,
"name":"Cairns",
"cod":200}
{"lon":145.77,"lat":-16.92},
"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],
"base":"cmc stations",
"main":{"temp":293.25,"pressure":1019,"humidity":83,"temp_min":289.82,"temp_max":295.37},
"wind":{"speed":5.1,"deg":150},
"clouds":{"all":75},
"rain":{"3h":3},
"dt":1435658272,
"sys":{"type":1,"id":8166,"message":0.0166,"country":"AU","sunrise":1435610796,"sunset":1435650870},
"id":2172797,
"name":"Cairns",
"cod":200}
This is from openweathermaps
@sharkantropo test ur pen in Firefox or remove the s in https in ur adress bar if u r using chrome
@sharkantropo Yeah, just remove https and it'll work fine
@jdtdesigns @walidashri It worked. Thanks
sharkantropo sends brownie points to @jdtdesigns and @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @walidashri |http://www.freecodecamp.com/walidashri
:cookie: 676 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns I think it'll fail also in Firefox?
@walidashri nope
pretty soon all browsers will not support the navigator in http, but for now it's just chrome
mixed content fail in all I think
well, he's not even using navigator lol
so it was just mixed content
which you can't do in any browser unless the server allows it
what navigator
:smile:
@silver537 It's the built in gps locator in browsers
@jdtdesigns thanks
walidashri sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 677 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
if you didn't know, any site used to be able to just grab your location without asking
then they started confirming it with a pop up
ooooh yea thats true.
now chrome only allows it if you have a secure sever
server*
which is what the s is in https
correct
use geoplugin
I tell everyone to, makes it a lot easier. You can get lat long, city, country, anything. They don't even need to give you permission
@jdtdesigns Hey now that you're here, would you be able to figure out why my transitions in Vue are executing out of order?
@Dirtier that's what any ip locator does, but the navigator is more accurate which is why devs prefer it
what issue are you having?
@jdtdesigns why is the navigator more accurate? Also, I thought it required you to allow it permission to use your location?
geoplugin can get the exact same lat/long from your IP on desktops, gps on mobile devices
Anyway, ok so in my tic tac toe game, when the game is over it should highlight the 3 winning boxes (this works if I dont use the transition afterwards) and then the entire 'app' should 'bounce out'. But for some reason, it is bouncing out before the boxes are highlighted
@Dirtier the navigator has some intense algorithms to determine your location
And even before the winning mark is displayed
ip locators use your generated ip
which can be pretty off sometimes
That's what I was saying, it uses your IP if you aren't on mobile
Otherwise it uses GPS
Idk mine works fine, it gives me my lat long on my cell phone no matter where I am
not sayin it doesn't work fine
just sayin the navigator tends to be more accurate ;)
the exact same lat long that navigator gave me lol
maybe the difference is performance?
Who knows, maybe it is more accurate sometimes but for me it's been the same
just that geoplugin was a lot easier to use
lol, navigator is the easiest if you're on a secure server
@jdtdesigns Ok so the only way I can make them execute in the correct order
Is with a a setTimeout
But I feel like it should work without it
you're probably not setting you v-if logic correct
I think it is
Ok I just saved it with the set timeout, so click re-run and you'll see what its supposed to do
It isnt finished yet, when I run into problems that I cant solve I tend to just stop until its fixed lol
so do i.
most people do that
not a very good habit. -.-
Lol yea makes it take way longer, but I can't really do the other stuff without this working
Bc its going to transition from rendering the board to a different screen
it's good to debug when you have an issue
they can stack up otherwise
Oooohh while I've got you, anyone know of a way to bind the height to always equal the width?
So I have a responsive square?
.display: flex;
Yea the problem is I can't really debug if I don't know what I'm looking for
display: flex;*
just wrap whatever elements you need to be the same height in a div and set that containing div to display: flex;
and your set
easy as that
@Dirtier trust me, flec box will save you a lot of trouble.
Hmm ok, so if the inner element is col-xs-4, the outside will always be that height?
Althought I don't think I can even do that here.... Considering it's a table
the columns don't seem to want to work
if it's a table, they should all be the same height anyway
table cells naturally conform to the same height as their siblings
Yea idk, idk if I'm just over complicating things, but it seems like its harder to style it when its rendered w/ a v-for
if it was a static table it wouldnt even be a problem
Anyway were you able to figure out why they were executing out of order?
It seems like they should just execute from top to bottom
But they wont without setTimeout for some reason
from what i see @Dirtier you can probably create another data var like complete and if over and complete are true, close the board
otherwise just show the highlighted row
Yea I was thinking about making a 2 step process, I tried doing it with a local variable and it didnt work
but I havent tried it with another data yet
Is there any reason not to use setTimeout?
i don't see any reason not to with such a simple thing lol
Ok cool. I still don't see why it doesn't work like it should without it though
I've run into that a few times, where the focus seems to skip
And I can never figure out why. A debugger that would show me the focus as it runs through the code would be awesome
it's a problem with all the frameworks
certain things run slower than in vanilla/jQuery
others are faster
so the logic has to be handled differently
I've seen people have the same problem in jquery and vanilla though
some guy posted his tic tac toe with the same question like a weekish ago
jQuery has great things like .then() or .done()
;)
Yea lol I love those. Well that kind of sucks. Just some random bug that you can't anticipate
you mean promises?
Yea .then is for async api calls
in jquery
err I guess it isn't jquery, its just plain js
lol so yes promises
promises are es6
which are awesome
but still not fully supported
Yea but so is .then
I thought it was jquery too but it's actually part of the es6 promises
.then() was already in jQuery before es6
I can't find it lol
jQuery created functionality to be able to use .then() with backwards support
maybe they got rid of it when es6 came out
all I can find for jquery is deffered.then()
which is kind of the same thing
"Add handlers to be called when the Deferred object is resolved, rejected, or still in progress."
it's a promise
but you can use .then() with jQuery and it won't throw support errors
Ah
If I had col-xs-4 to td it just makes 3 separate columns
Grrrr
anybody interested and doing a dev war on jsfiddle?
seemed like a good place to do it
@jdtdesigns :flags:
@Dirtier Did you see the new simon i built?
tried to pair pro, but everybody was scared lol
No I dont think so link it
Lol nice. I just got to 10 and remembered why I hate that game
haha
my wife beats it everytime without even trying
lol I just stopped, thats one of those types of games where if I keep going I'll be sitting there all night getting sucked into it
what does strict do?
if strict is on, you can't mess up
it will restart if you miss one
Oh I thought thats how it always was
nope, normal will repeat the sequence when you mess up
same as the original simon
I didnt know you could even beat simon lol I thought it just kept going. I remember we used to have simon competitions in music class in elementary school hah
Ahh havent played it in so long
20 was the original win amount
but they had different versions that had levels
Yea like the damn Bop-It did
hate those fckn games
bop it! pull it! screw it! SMASH IT
i loved bop it lo
Lol so did I, I have no idea why though but games like that stress me out haha
Posted this in Data Viz, but starting to think it might be more of a Front End question. Not sure. Basically I'm curious as to why this works when I statically put my data into an array, but it doesn't render when I read in the data through the API. http://codepen.io/dhuddleston/pen/RGjzQW?editors=0010
I'm sure it's a simple answer - I just haven't figured it out yet.
Why there are so many col- classes in one div element?
@kpbro Bootstrap columns were designed to work with divs. You can get some odd behavior if you put them in other types of tags.
@dhuddleston USERS isn't updated outside getJSON function check this
@walidashri Oh man! I didn't know that.
@walidashri Thanks!
dhuddleston sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @walidashri |http://www.freecodecamp.com/walidashri
@walidashri Any tips on how to change it up? I'm stuck as far as how I'd implement the React way of doing it.
@dhuddleston gemy a min
@walidashri Ok
@jdtdesigns You still here? Having trouble with another transition haha
@dhuddleston u still there?
@walidashri Yep!
@walidashri Thank you so much!!!
:warning: dhuddleston already gave walidashri points
dhuddleston sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
Hi, could anybody help?
function whatIsInAName(collection, source) {
var arr = [];
var i;
var prop;
var p1;
for(i=0; i<collection.length; i++){
for(prop in collection[i]){}
for(p1 in source){}
//console.log(collection[i][prop])
console.log(prop)// it should show a b c d, why only show a b d?
if(collection[i].hasOwnProperty(p1)===true&&source[p1]===collection[i][prop]){
arr.push(collection[i])
}
}
return arr;
}
whatIsInAName([{ "a": 1 }, { "b": 2 }, { "c": 3, "d": 4 }], { "a": 1 })
/*
whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" }) should return [{ first: "Tybalt", last: "Capulet" }].
whatIsInAName([{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }], { "a": 1 }) should return [{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }].
whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 }) should return [{ "a": 1, "b": 2 }, { "a": 1, "b": 2, "c": 2 }].
whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "c": 2 }) should return [{ "a": 1, "b": 2, "c": 2 }].
*/console.log(prop)// it should show a b c d, why only show a b d?
@c0d0er Did you made
for(prop in collection[i]) {}on purpose? Because there is no code inside this loop
@Otto-AA this is for
&&source[p1]===collection[i][prop])
@c0d0er So you want the 3rd for loop to call
prop in collection[i]times?
Hey guys im working on this lesson and its saying that I need to make sure that I am making my text-decoration set to none. Need help thanks. here is a link to the code. https://gist.github.com/17c6bc9fbfec659db9cb31b056145938
@Otto-AA do you know why
console.log(prop)// it should show a b c d, why only show a b d?
hold up
some code got cut out
@ryguy858 pornhub ? seriously ?
ya man the guy that owns that site is a multi millionaire
im looking into creating my own type of site
its funny that you noticed that
@c0d0er Well, if write
for(prop in collection[i])
for(p1 in source)
console.log(prop)it will work
@Otto-AA confused, could you show me the whole code in which the console.log will work?
@c0d0er If you write a for-loop without
{}after it the next statement will be called [for]times
You are trying to make another pornhub
lmfao
@c0d0er
function whatIsInAName(collection, source) {
var arr = [];
var i;
var prop;
var p1;
for(i=0; i<collection.length; i++){
for(prop in collection[i])
for(p1 in source)
console.log(prop)// it should show a b c d, why only show a b d?
if(collection[i].hasOwnProperty(p1)===true&&source[p1]===collection[i][prop]){
arr.push(collection[i])
}
}
return arr;
}
whatIsInAName([{ "a": 1 }, { "b": 2 }, { "c": 3, "d": 4 }], { "a": 1 })
@ryguy858 I have a curse, either I see mistakes in any text they give me to read, or I see some crazy stuff
Lol pornhub isn't owned by anyone though, it's a collection of a ton of websites. The guy who owned it at the start sold it to a corporation
and that guy is a millionaire :)
I think thats the point
Idk, he sold it way before it was as big as it is now lol
but another site with the same idea... I dont think it will work
It wont work lol at least not in porn
every business or company ever made started from the very bottom
if you create something it will grow and gro
Well yea but that market is way too saturated brotha
grow
They have a straight monopoly on that shit
very true
There's a reason why every other porn site joined it
can someone answer my original post
lol
a {
text-decoration: none;
color: black;
font-family: Times;
{
text-decoration: none;
color: black;
font-family: Times;
{
thats the rest of the code that got cut off
What do you need to do?
its a lesson for codeacademy
im trying to simply add a link to a div and style in in css
you just pasted your answer though
my instructions are to give the text-decoration none
a { text-decoration: none } is the answer
codecademy can be buggy sometimes
which i thought i did but i guess not
that will make it so no links have text-decoration
codecademy makes you be really specific
with your answers
@Otto-AA thanks still checking
c0d0er sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @otto-aa |http://www.freecodecamp.com/otto-aa
so if its saying to make something specific have no decoration
then don't use a
use the exact selector they want you to use
try div a {text-decoration: none }
@Otto-AA why it shows a b c d? without {} after for loop means what?
for(var i = 0; i < collection[i]; i++){
for(p1 in source){
if(collection[i].includes(p1))
arr.push(collection[i]
}
}
@c0d0er Try that
@Dirtier thanks!
:cookie: 249 | @dirtier |http://www.freecodecamp.com/dirtier
c0d0er sends brownie points to @dirtier :sparkles: :thumbsup: :sparkles:
@c0d0er If you write a for-loop without brackets it is the same as with brackets around the next statement. Here a little example:
for (var i = 0; i < 2; i++) {
console.log('inside_1');
}
console.log('outside_1');
for (var i = 0; i < 2; i++)
console.log('inside_2');
console.log('outside_2');
// Output: inside_1 inside_1 outside_1 inside_2 inside_2 outside_2
@c0d0er only if you have one statement. if you have multiple, you would have to use brackets.
@silver537 thanks
c0d0er sends brownie points to @silver537 :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @silver537 |http://www.freecodecamp.com/silver537
can any one lookat at my page?
https://beerdrinker.github.io/Bootstrap-3-Landing-Page-002/
I have an error there
please help me to correct it
https://beerdrinker.github.io/Bootstrap-3-Landing-Page-002/
I have an error there
please help me to correct it
@Otto-AA still checking... thanks for your example!
c0d0er sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave otto-aa points
@BeerDRinker Can you clarify what the error is?
@Otto-AA go to the page
@Otto-AA and open development tools in browser
there is an error
ok im trying to use
navigator.geolocation.getCurrentPosition but it doesn't work.
@Otto-AA I do not know why browser can not to laod one CSS file...
@silver537 Use this - https://developers.google.com/maps/documentation/geocoding/intro?hl=ru
@silver537 for wether data better to user https://darksky.net/dev/
@BeerDRinker which file? (I didn't find the error in the development tools))
@Otto-AA how I can send you the screenshot?
@BeerDRinker its relative path problem your css file is accessible through https://beerdrinker.github.io/Bootstrap-3-Landing-Page-002/css/jquery.bxslider.css
but in html you linked https://beerdrinker.github.io/css/jquery.bxslider.css
but in html you linked https://beerdrinker.github.io/css/jquery.bxslider.css
@BeerDRinker Press control-shift-m for the markdown-help (Image: 
)
But I have to go now, so I can't help you right now :/
But I have to go now, so I can't help you right now :/
@vinaypuppal How I should solve this problem?
@Otto-AA ok
@vinaypuppal here is my code <link href="/css/jquery.bxslider.css" rel="stylesheet">
@vinaypuppal what I should do wuth my HTML?
Add
./css/jquery.bxslider.css @BeerDRinker and check if it works
Am i allowed to post of my progress on my build a tribute page?
Can anyone tell me why my animation is occurring at a different position than the element? O.o
@vinaypuppal thank you
beerdrinker sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 598 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Anyone? It looks awful when it does this
@Dirtier U mean the {{winner}} wins covers up the {{box}}?
does anybody know how to manually turn the status of gitter to absent?
@kat-mag When someone wins, the board should slide out to the right. But instead it slides from the bottom rather than its current position
Try it on the real codepen, it doesn't work well in here. At least not for me
$(document).ready(function(){
var secondsDwn = 10;
var minsDwn;
function interval(i) {
document.getElementById('secsDisplay').textContent = i;
setInterval(function() {
var getDoc = document.getElementById('secsDisplay');
getDoc.textContent = i;
i--;
if (i === -1) {
i = secondsDwn;
}
return interval(i);
}, 1000)
}
interval(secondsDwn);
});
@kat-mag See what I'm saying?
Yeah. clicked around. It gets pushed down by incoming win announcement...
It shouldn't
Bc they're set up to only go after the other one completely ends
This message was deleted
I'm working on my first front end challenge: the tribute page. I was trying to mimic the look and feel of the sample, but when I looked at other campers pages, wow. Did I miss something. I thought replicating the look and feel of the sample was the assignment.
@parleydk no its not, you can do whatever you want
Thanks @kirbyedy . I guess my creativity side hasn't kicked in, yet. I'm so used to just taking user specifications and giving them what they asked for. Maybe I should have taken more art classes in school.
parleydk sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1436 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
hey guys, do you think my portfolio is good enough to get an entry level job in front end web development? https://amitp88.github.io/New-Portfolio/
I'm gonna see if I can do some pro bono work, but I've been applying to jr dev jobs in california
applied to 15 jobs since last friday and haven't heard anything yet, so I dunno
I'm gonna see if I can do some pro bono work, but I've been applying to jr dev jobs in california
applied to 15 jobs since last friday and haven't heard anything yet, so I dunno
@AmitP88 A week isn't that long. Some companies reply after a month ;d but I'd remove that 'udemy project' bits from your site and try to do some more projects that center around displaying different data and working with multiple APIs.
@AmitP88 , @kat-mag is right. One job I got was 6 months after applying.
@kat-mag I was thinking of that, but then these are my Udacity projects lol. I didn't want it to be misleading by not including that part in there.
omg O_O
I'm also just recently doing Free Code Camp since it emphasizes open source/non-profit/real world projects
I'm just wondering if it will actually help me get a job though once I complete it (which might take a while)
the Udacity program itself took me a little over a year to complete (due to life circumstances and working a lot)
@AmitP88 There's no difference really. They don't care if it was for some weird bootcamp ;d they care about the code you wrote. And I do advise you (for a front-end dev), to pick up a framework you like. Because they're kind of pushing it on us.
@kat-mag yeah, I'm actually trying to brainstorm a webapp I can make using a combination of reactJS (since it's only the "view") and angularJS. If not, I'll have to make an app for each of them
I know I got asked to maintain Angular project by myself when applying for a junior front end dev position.
So knowing even a little of some framework helps
it's hard because I've been working crazy amount of hours at my job (12 hr shifts 5-6 days per week for the past 2 weeks)
but I'm still trying to keep at it
even if I dont sleep, I dont care lol
@AmitP88 that's the spirit ;D
as for applying for jobs though, I'm kinda discouraged because it's like even junior level roles (which there aren't many compared to mid-sr level ones) want at least 1-2 years exp. and all my work history & references are in an unrelated field
They do that mostly when they don't have time/resources to teach someone. Or they need you to hop in on a project, because other dev left... But I'd apply anyways if I were you. You never know what a company actually wants
ah ok. yeah, I've applied to 15 so far in california (state where I live). I'll try to apply to maybe 5 more tonight
god I hope I get somewhere though, i'm really tired of my current job lol
I just wouldn't send out black&white resume that looks like a page from the docs :D
@kat-mag oh I see. lol actually the advice I got was to keep my resume plain but organized for readability
to keep it "professional"
Mine was organized... Looked like an JS object ;D
the fact is - if it's plain & boring -> they won't look at it more as to check the exp & skills.
even if I have my portfolio site linked to it? lol
I also made an online interactive resume alongside my pdf one
which was a JS project
When you enter a site you look around to see if you like it... Then u search more info if it cliks, right? :D boring resume => not clicking sh*t
@AmitP88 If I may add, you have higher chances with small companies, or startups.
You can beat other candidates at you knowledge about the company, and passion (that you Need to have) for coding, or/and their work.
Also, a well-written resume really helps. Use this format: http://uk.businessinsider.com/elons-musk-resume-all-on-one-page-2016-4?r=US&IR=T It's a free service called Novoresume, which will allow you to create an AWSEMOME looking resume! Best of luck
You can beat other candidates at you knowledge about the company, and passion (that you Need to have) for coding, or/and their work.
Also, a well-written resume really helps. Use this format: http://uk.businessinsider.com/elons-musk-resume-all-on-one-page-2016-4?r=US&IR=T It's a free service called Novoresume, which will allow you to create an AWSEMOME looking resume! Best of luck
well I mean, the program I graduated from (Udacity) also did resume and cover letter reviews
I just, it gets really confusing as to what advice to take lol
@manu-4216 don't
@manu-4216 what's the point of applying for a front-end dev if you can't bootstrap your own resume and make it look cool?
I mean I really want to get a dev job asap. that's all I really want for now, just so that I can get exp and get better
Ditto on knowledge about the company. The job I have now, one of the questions they asked during my interview was, "what do you know about us?". I had read almost every single word on their website and wikipedia page. I think I knew more than the interviewer. He was visibly impressed.
yeah, I've been looking into some of the companies I've applied to and observed what they do, just in case they ask me "why do you want to work for ___ ?"
@parleydk haha, yeah. That's actually important ;D
man, I really hope it won't take me long to get into this field already. I've been doing this since last may
Ahh. the reason I stopped by. I'm working on my first challenge. http://codepen.io/pdkennelly/full/mApqyk/
I'll fill out the timeline once I have the formatting right. I'm currently using .container .row . col-xs-* for the timeline piece, but it's not as responsive as the sample provided by Quincy. Any hints?
Once I've got his sample replicated, I'll fork it and make a pretty one.
I'll fill out the timeline once I have the formatting right. I'm currently using .container .row . col-xs-* for the timeline piece, but it's not as responsive as the sample provided by Quincy. Any hints?
Once I've got his sample replicated, I'll fork it and make a pretty one.
@kat-mag do you think I should still keep going with the Free Code Camp program since I completed the Udacity Front End one? or should I just try to find pro bono work while working on the reactJS and AngularJS project(s)?
that's where I'm kinda conflicted right now as to what my best move would be
@AmitP88 you might try Craigslist for jobs. They will be one off's but might lead to something bigger. It will also help you build your portfolio.
@parleydk are you sure? lol dunno if I would get responses on there, but I'll look into it
I know it's hard if you're already working 12+ hours a day.
@parleydk yeah, I mean, I'm hoping that won't last long since the main reason why is because we had a new trainee my coworker and I were training
@AmitP88 I think you should do FCC. You already know stuff from Udacity so it'll be a breeze. And more pet-projects => more entries on your website
he should be on his own next week so we might only work 10hrs, then after that, we should be back on 8s
where do you work ?
@kat-mag yeah, I was thinking that too. like I was actually just blasting through the html exercises and kinda stopped it since it seemed like a waste of time lol
I work in a lab in an orange factory testing orange and lemon juice. yeah, it's bad lol
but it pays enough to where I can save at least a bit of money
any job that brings food to the table is a good job
@kirbyedy yeah. I have a few k saved and building on top of that so that if I were to get a job in LA or San Diego or whereever tech is big (those are about 3-4 hrs away from me) then I can afford to relocate there
providing I get a dev job there of course
How close are you to SLO?
@AmitP88 there is this: http://slo.craigslist.org/web/5802223920.html
@parleydk about 2 hrs and 17 mins
@parleydk hmmm, the only thing is I don't know PHP and SQL, although I do want to learn them eventually after I learn react/angular
I wouldn't touch php with a 10m stick ;d
why?
flashbacks from highschool ;D
@kat-mag lol I had a brief look at php and it honestly looks a little bit like JS (principle-wise at least)
then again I could be wrong, I just had a quick look at it
I know nobody wants to touch PHP. But if it works...
Anyway. Khan academy has this for SQL: https://www.khanacademy.org/computing/computer-programming/sql
Anyway. Khan academy has this for SQL: https://www.khanacademy.org/computing/computer-programming/sql
it's weird though, because I've seen a lot of jobs that ask for php, sql, mysql, etc on top of the regular front end techs
@kat-mag PHP in high school. Wow. I was doing BASIC on a TRS-80 in high school.
https://en.wikipedia.org/wiki/TRS-80
https://en.wikipedia.org/wiki/TRS-80
@parleydk that's fancy :D
my friend is a php dev and he is asking around for more people like him, there is shortage of php devs
@parleydk lol me too, basic :D
PHP got a bad reputation, so now everybody is focused on the new stuff. It's going to be the new COBOL. :)
lol
This message was deleted
btw my dad uses cobol, and although he is retired people keep calling him :D
lol
funny thing, many banks in germany still use cobol
because it just works :D
and its to expensive to change that crap now :D
ugh, I never thought figuring out what to learn in web dev could be so confusing lol.
Yep. I keep reading, that if you want a dev job for the rest of you life, learn COBOL.
it's like "learn this, employers are asking for it" then "no no, that's bad, learn this instead"
ugh
Just find your stack. You're gonna learn something else eventually...
@AmitP88 , you just have to stop chasing the carrot. Learn web development. Once you have a solid foundation, you can pick up the peripheral stuff much easier. That's why FCC is good even for seasoned developers. Always learning, always growing.
@kat-mag eh, screw it, I'm just gonna focus on getting better at these: html, css, bootstrap, js, jquery, responsive design. then learn this: react, angular
@parleydk lol it's hard not to chase the carrot when I hate my current job and I'm nearly 30 =P
but yeah, I get what you're saying
@parleydk so does FCC really focus on real world projects? and are doing the courses/tutorials really necessary to get the certifications, or can we just tackle the projects themselves headon?
Hey, I'm 44. I get it. I love my job now. I'm doing database reporting for hospital EMR systems. But, I didn't start this career until I was 40. I'm doing FCC to expand my horizons.
@parleydk :+1:
@parleydk ah I see. yeah, I started the Udacity program (front end) and coding in general last may. my background is in bio/chem =P
although I feel like I've always been more of a computer person, it's just that growing up i've been intimidated by programming
@AmitP88
@parleydk so does FCC really focus on real world projects? and are doing the courses/tutorials really necessary to get the certifications, or can we just tackle the projects themselves headon?
The force flows through all living beings. It is what makes universe works. Look deep within your feelings and you will most certainly know the right answer. :)
I should've been doing this 10 years ago =P
I had been using databases since 1985 (I was 13) I didn't figure out people would pay me for playing with a computer until 2012. Until then I did it for free. I mean, why would they pay me to play with data all day. Eh, I'm weird though.
@AmitP88 you should do the fcc projects and put them on portfolio
@adityaparab dunno if I should take advice from someone called Darth Skywalker. just kidding, I appreciate your guidance =P
weather, twitch, wiki, calculator
@kirbyedy yeah, I was thinking of that. are the fcc real world projects though?
as long as they're real world projects that people will actually use, I'm in
you can make them to be real world projects
what do you mean?
how?
well for example if you make the weather app, and later on change it to be usable on android people will use it
@AmitP88 : Darth Skywalker is just a label to represent the actual existence of balance between the light side and the dark side of the force. The force is force, It doesn;t have
sides in and of itself. Side is determined by the intentions of the force user ;) In that, what you want to use the force for ;)
they might use it if they download it that is...
The whole purpose of FCC is not to task you to build the the projects that people will use. The purpose of FCC is to make you confident in your own ability that you can take on real world projects.
and anyway that particular project shows your future employer, that you can use apis
FCC is but a PIR therapy ;)
@kirbyedy well I mean, FCC emphasizes on non-profit real world projects that people would actually use regardless. Since I already have the Udacity projects which are the program projects themselves, I'm really looking for real world projects, since it's that lack of real world exp that's kinda killing my game when it comes to applying to jobs
@adityaparab ah ok, so that's pretty much like Udacity then (just preps you to do real world stuff)
@adityaparab oh yeah, as for your name, I was just messin' with ya. just giving you a hard time =P
Oh! Don't worry.. I take on any opportunity to start stand up philosophy :P
I've also found maybe 1-2 companies that do pro bono dev work for non-profits and I emailed them saying that I wanted to do pro bono work for them, so I might do that instead of contacting local businesses to offer them free websites lol
@adityaparab lol now there's an interesting sub-field in the comedy industry =P
So, I think your question might be answered here:
To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
In order to earn the certificates, you must complete all items on the map with an *
@parleydk ahhh I see. that clears things up a lot. so if I were to get those 3 certifications, I can start the nonprofit (real world) projects on FCC?
yeah
yep. though they are non-paid
as for pro bono work... You don't need to do that. You can do your own pet project
So, if you already have a handle on all the material you can skip straight to the * items.
@parleydk ah I see
well, I mean the other reason why I wanted to do pro bono projects for other people/small businesses is to also get good references for applying to jobs, since my only references are for my current and past jobs which are all lab-tech related
I mean ultimately, I'm pretty much aiming for whatever will help me get hired in the industry the most
so you need to realize that it not always works like that in IT. IT is all about what you like doing. Dev that hates his job because he gets to work with files that are 18k in lines... is going to quit (my friend lately...) ;D
So doing a website for something you like, making it a big app that has the fancy features... Is actually better than getting a boring as f project that nobody's going to look at, from a guy that nobody knows. And you get something to talk about at the job interview ;P
well I mean, right now I love working on anything that's html,css,bootstrap, responsive design stuff, as well as css animations (since I've been sharpening up on those for the past two months), but I also wanna get back into javascript mode and making better webapps using react & angular
@AmitP88 , what about building Web App that would address/relieve some pain points of your current position. (of course don't give away company IP).
@parleydk lmao so basically an app that talks trash about my current job? =P
No. one that would make your current job easier.
well I mean, my current job is pretty straightforward, it's just long hours
it's just extracting and testing orange or lemon juice for pH, acidity, and brix and doing an oil test at the end, along with a few other minor tasks I have to do during my shift
I guess what I'm getting at is.
- pick something you know
- make it better
I understand. I mean, I do have chem and bio knowledge, so maybe I can do maybe an educational app with that using react and angular
although that can be pretty difficult lol
Exactly.
but I'll give it a shot
maybe an app that can tell you the product of two chemicals reacting together?
although that would be realllly freakin difficult haha. or maybe not, I dunno. gotta brush up on my organic chem for that =P
Yep, maybe start with an interactive Periodical table of the elements,
oh, nvm, it's already been done: https://itunes.apple.com/us/app/chemistry-solve-reactions/id493558583?mt=8
damn lol
Just make it better.
do you know how many calculator apps there are? or how many web browsers? or Linux distributions.
lol true
Arch Linux <3
The first thing about software dev is realizing that one size DOES NOT fit all.
it really doesn't matter whether something has been done already
so it's ok if I have an app idea and someone has already made it? like an employer won't mind?
You might want to check your employment contract. you don't want to make something and then your employer owns it.
so don't do it on work time or work equipment for sure.
well I mean, I'm brainstorming app ideas that use chemistry, biology, or something in between. something simpler like an encyclopedia-type app for the different important chemicals that your body needs, or something like that
oh for sure
I'm only going to dev at home
sounds like you've got a start. :+1:
I'm trying to think of the simplest, but interesting idea for an app that would use react and angular lol
that is chemistry/bio related =P
maybe a simple interactive app where you get to play around/build with atoms and molecules and when you make something that exists irl, it'll show you info about that molecule
although that sounds like it would be hard as hell lol
@AmitP88 I want to do some clicking around when you're done with it! :D
@kat-mag lmao thanks. yeah, hopefully I have the coding chops to pull it off =P
amitp88 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @kat-mag |http://www.freecodecamp.com/kat-mag
I'll see if I can find a molecule encyclopedia to base it off of or something like that
yeah, it could be educational. just start simple, make it modular so it can expanded easily.
@parleydk for sure. I think this app will take some time, but I'm gonna take it in stages. like my first objective is to just make the objects (atoms) and interface (the plane where you can put atoms) and the functionality (connecting the atoms correctly)
first it's a proof of concept then an MVP. So start with only a handful of elements and molecules.
true. I'll start with like 5 basic/most common elements and see if I can make an interface to connect them
oh also, is it ok to list an in-progress project/app on your resume and portfolio site to show to employers?
I would say as long as what you have works.
@parleydk ah ok, so maybe I can list on there what I'm trying to achieve and as long as I have a basic model down it's ok to list it?
That's what I would think. So, you get those first molecules working, then you have a viable project.
ah ok, I gotcha
Before that it's just an idea.
idea are as real as their manifested counterparts ;)
so I mean, my time is limited due to my current job, so should I try to work on this idea and FCC certifications at the same time or just focus on the app?
That is a question only you can answer.
@adityaparab "that's some quantum stuff right there" - Kevin Hart (Scary Movie 3)
@parleydk well I mean, I'm trying to think of what would be better for getting a job lol
What do you use to make colors fit each other? I want to use the color from the photo that will be on the website and fit the rest, any apps you use to make it look well and choose great sets?
@AmitP88 don't know about you... but I can't work on one thing for a long time. So I use fcc as a break ;)
@ewathedoer coolors.co
I mean on one hand, with FCC I would get more projects for my portfolio, but on the app idea, it's only one project, but more complex and it will use the more in-demand frameworks
@kat-mag ah I see lol
hmmm, so maybe a bit of both lol
right, when you get stuck on one, take a break by working on the other.
@AmitP88 I get bored super fast so there's no other way for me ;D
@kat-mag yeah, I got kinda the same way with the Udacity map project, but since I was paying a monthly fee, I wanted to get it done asap, especially since it was a tough one
one more question, do you think FCC is really beneficial for getting hired?
I've only been active for a couple days, so I can't say for sure.
@AmitP88 as beneficial as any other stuff you devote yourself to. It shows that you want to learn and can do projects - it counts in the IT
If I were hiring I would say it is lower than say a real project
I've read Quora posts from people that said that they got hired either during or after finishing the program, but since I've read that about other programs as well, I feel like the majority will still have a hard time getting a foot in the door without pro exp
@sjames1958gm ah ok
Everything, I've read about it would indicate that if you stick to it, you'll get a job. Apparently no one has finished all 2080 hours because they got hired first.
@parleydk really? wow
@AmitP88 : Are you originally from India?
remember 2080 is one year of full-time work
@adityaparab nah, although I am indian, I was born in UK and raised in california lol
@AmitP88 : Raised by Indian parents?
can anyone tell me why my css code not working for body. it seems stupid to me
http://codepen.io/nirmalannu/pen/gwvWgK
http://codepen.io/nirmalannu/pen/gwvWgK
I mean, parent who grew up in India?
@AmitP88
@parleydk ah I see. yeah, and I'd have to do it part-time due to my job, but since I did the Udacity program, I might be able to blast through it faster
@adityaparab well, my parents didn't grow up in india, but they are of indian decent yes
@AmitP88 : You're very much westernized to be asking such questions. It's typical Indian shit. Only contemplation and no action
:P
Just make up your mind and run with it :D
that's the only way to get shit done. You'll never bring anything to completion otherwise
@adityaparab lmao that's true. yeah, I guess I'm just really desperate to get into a dev company and start building that work exp. that's why I'm trying to find the most efficient way to get there ;)
The Udacity program took me a little over a year (due to life circumstances and working a ton of hours), so it's like yeah, I want to get in maybe in the next 6 months or so if I can
I don't want it to be like 5 years before I can get an entry level job lol
@annunirmal , I don't see where you're telling the button to submit what's in the text box.
@annunirmal remove the script, head, body tags from your code. Add bootstrap as a quickadd in css tab
and don't do <body> tag. make it a div, reload a page. It'll work ;d
@kat-mag okay let me try
I'll be honest @AmitP88
There will be millions of debates on efficiency. None of them will be applicable to you. (and neither for me). Those are just points of view of those who come up with it and will be applicable only to their own lives.
The most efficient way for YOU will be to do what "feels" right. Things usually sound so seductive logically that people tend to go through the motions of doing things and be under the illusion of productivity.
If you're not enjoying it, you won't get it done in your entire lifetime.
So just sit down, calm your thoughts down and think of an ideal circumstances. You won't find trouble conjuring that proverbial motivation
@annunirmal as for your font, add it in the settings of HTML tab as a <link> tag
@adityaparab that's why I kept talking about doing projects you actually like ;d
@kat-mag : You sound like a good guy.
adityaparab @adityaparab lowers down his American gun
awww, thank you https://media.giphy.com/media/nBSVfmth2t6iQ/giphy.gif
@adityaparab you know what, after reading that, I'm just gonna focus on the angular/react app, since that's honestly what I want to do first. the FCC just feels like more going through the motions since I've already done the Udacity projects. I'm still brainstorming ideas for the app, but once I study more of what react and angular are all about, I should be able to solidify a precise idea to go forward with. Thank you so much for your honesty though, it really helped me sort of come together on a decision +)
amitp88 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 699 | @adityaparab |http://www.freecodecamp.com/adityaparab
=)
@kat-mag color worked but not the font
@adityaparab and hopefully I can make the app good enough to get noticed somewhere =)
@annunirmal <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet"> dis. In your html settings tab
@AmitP88 show it here when you're done. still want to click :D
@kat-mag thansk
@AmitP88 :You're welcome mate! :)
I'd suggest you go with React as of now.
it worked
@annunirmal yay
@kat-mag lol first I gotta map out this idea on how I'm gonna do it. the more I think about the rules of how atoms bond together and make molecules and how I'm going to make rules for the app, the more complicated it seems to be. but, what I'll do is see if something similar is out there (odds are there is) and see how they constructed their app and follow their logic, except make it better of course ;)
I personally love Angular but Angular seems to be inducing confusion in people's mind as to whether to go for Angular 1 or Angular 2. Angular 2 is the future, but if you're not really comfortable with JS, Type Script would feel like too much pain.
@adityaparab hmm, but from what I've read, React is only the "view" of the MVC model, from what I've read it doesn't have any functionality added to it. so would I just use React with just Javascript functionality?
@AmitP88 Did you get any responses to your job submissions?
@sjames1958gm so far not yet, but it's only been since last friday
@AmitP88 React / Redux
@sjames1958gm so Redux is the functionality to use with React?
@AmitP88 : Yes. It's just view. However, you can combine React+Redux to make a full blown app.
ahhh I see
Even more, you can use RxJS too
@AmitP88 As you said, your time is limited, so must use it efficiently. I feel that you need to learn more, so the question is how. FCC has been a great answer for me and many other people around.
But it's up to you to take on the challenge and give it your own personal meaning. One way of looking at it is as a 'path' towards < your vision >
What is cool about FCC is that it alows you to work on your projects at your own pace. No pressure, no money involved. And to solve those projects, you'll naturally Have to explore a lot on your own. It's a self-discovery jurney. You'll learn a lot by doing those little projects one by one.
After a while, you'll feel much confident about your ability, and you'll have nicer and nicer things to show. Even if small or imperfect, you need to feel proud about them.
Then it will be much easier to talk to potential employers (in fact I'm in the process of doing I do now)
@AmitP88 Do you have someone you know that might be in the business who can review your resume to make sure you have the right things there?
Too much irrelevant information or fluff can turn off someone reviewing a resume
Too much irrelevant information or fluff can turn off someone reviewing a resume
@AmitP88 : Another advice is - Throw away that outdated notion of Ready-Aim-Fire (RAF)
Just follow Ready-Fire-Aim. (RFA)
Surprisingly, the lower impact things (shooting a gun) need RAF approach. If you take a look at all the high impact things like Rockets that carry sattelites, nukes, explosives etc they follow RFA approach
@sjames1958gm we talked about that today ;d
@sjames1958gm actually, the program I graduated from (Udacity Front End Dev) offers resume/cover letter reviews, which I did and passed
You can always course correct on your journey
Just start with the idea and improve it along the way
I bet founders of google never had the vision of turning google into what it is today on the day they started.
@adityaparab so basically I should stop stalling and just code already =P
@AmitP88 : Actaully, yes :D
@manu-4216 yeah, I think you're right. I mean, I took the past two months post grad to focus more on html,css, bootstrap, responsive design to get much better at it (which I think I have), so now I wanna get back into JS app mode ;)
@manu-4216 so I think to strengthen my knowledge/abilities, I'll just power through FCC
and when I need a break from that, I'll work on my app ;)
Hey guys, there's a white border that won't go away on my banner image
not sure what's causing it, any ideas?
ok, I know what to do now for sure lol. Thank you guys so much for being patient with me =P
I just needed a clear direction, and now I think I have it
@Joshuaswift it's padding/margin
@Joshuaswift u can add reset css in your css tab
@Joshuaswift : Put this in your CSS section
body{
margin:0;
padding:0;
}
one last thing though, what do you guys think of my portfolio site so far? https://amitp88.github.io/New-Portfolio/ (on a scale of 1-10)
I'm still working on the responsiveness and optimization parts, but I'd say it's about 80-90% done
@AmitP88 : Looks good to me! :D
The more projects you do (hobby or professional) would add more to the impressiveness of the site
@adityaparab is it fully responsive? I wanna make sure it doesn't look messed up on certain widths
@kat-mag @adityaparab thanks that worked a treat!
joshuaswift sends brownie points to @kat-mag and @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @kat-mag |http://www.freecodecamp.com/kat-mag
:cookie: 700 | @adityaparab |http://www.freecodecamp.com/adityaparab
@adityaparab for sure. in fact, my page will probably look really long afterwards =P
@AmitP88 I'm gonna say this again so you remember 'OUT with the udacity bits' :D
@kat-mag lmao ok ok. I'll remove them ;P
but, I will keep them on my resume ok?
@AmitP88 : It will be, for sure :)
It's up to you. I'd remove that all together. It's important that you made something. not why/for who
As for the responsiveness, I believe you font size is too small for mobile devices
@AmitP88 Ok, you may work on this 'app' if you wish to do so. Just make sure it shows the right things about your, idealy one of your passion. If you make it about chemistry and atoms, might not look good, imo.
You may want to focus on your future new life. Sure, except if chemistry is truly one of your passions
would be great if you can increase it a bit for mobile devices
The current discussion brings us to the much misunderstood topic of
passion :D
@adityaparab well tbh, I had to decrease the font size a bit to make the section completely fit on mobile devices, especially when the browser address bar would still be visible
i see. I don't like to pretend to be the UX expert so I won't have much to add to the topic of "look and fee" and "usability" :D
but it's good. Overall.
@kat-mag I mean, the only reason why I feel I should leave the Udacity part on my resume is because I feel if I removed that part from my projects that they employer would be like "so what did you do at Udacity?"
as a developer, you can get away with it.
If you can find a UX designer to help you create the VDs, I'm sure you'll come up with much appealing pages
@adityaparab thanks. and yeah, tbh I did want to increase the font size a tad, but it was difficult to get everything to fit on the page without the scrolldown, demo/repo buttons to appear cut off on a phone
amitp88 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave adityaparab points
@AmitP88 u might be right if you're doing a boring-resume-route
@manu-4216 yeah, I hear ya. I mean, I did really enjoy organic chem in college, and actually at the time I was thinking it would be cool if someone made an app that could show/interact with atoms to make molecules
@kat-mag I see lol. ok, i'll remove the Udacity part from the project sections and just keep it mentioned in the education section only
I definitely don't want my resume to be boring
@AmitP88 as for UX... I don't want to scroll all the way down to see the box with your skills. 'to much scrolling to do, no time, neeed to review another hundred resumes'
@kat-mag do you mean the skills section on my portfolio site?
yep
@kat-mag ah ok, I might move that to the home page then and have it slide-in animation instead
@kat-mag how's the responsiveness though? is that good to go?
I wasn't able to use bootstraps grid system without the layout messing up so I had to rely mostly on media queries, that's why I wanna make sure I got it right
it's responsive enough.
@kat-mag ok, that's good. my worst fear was that I believe it's fully responsive but then when an employer views it on his computer the layout is slightly messed up
@AmitP88 as for the future... you gonna learn that anyways... good idea is building your own grid system with some css framework. Like doing sass & susy grid
@AmitP88 that takes a couple of hours of learning and two hours of coding and helps with your resume (bonus points ;3)
sass & susy is only an example. You can do it in less or <insert other frameworks> too ;D
I actually viewed it on my work computer and on width 1200px there was slight overlap with the demo/repo buttons over the paragraph text, but when I would fix it on my laptop in dev tools, it would be fine at first but overlap when I made the adjustments
I still have to learn sass, less, and suzy lol
lol god, I feel so behind when it comes to what I have to learn
@AmitP88 if you know one you can learn another quickly
sass & less are quite similar
why is that important ?
I think is better to be expert in css
gotta learn react, angular, wordpress, sass, less, stylus, get better at JS , get better at Jquery, learn gulp, node.js , learn tlakjdflakdlfnaodif
lol
oh well, maybe in 1 more year I'll be ready for an entry level position, hopefully =P
those sassis and lesses are neah...
does FCC teach you react and angular?
when you see a bloated css file... you feel the need to clean this up. sassy lessy sh*t works wonders
@AmitP88 react sections are comming up
@kat-mag awesome. and angular is already on there I think right?
@AmitP88 no angular yet
oh ok
angular is scraped
why did they scrap it? O_o
react is coming for about 6 months as far as I rememeber
angular out, react in
@kirbyedy 9 months, i think ;d
that's weird, I've seen a lot of employers ask for angular exp
angular 2 is out, and I think it was angular 1.x
so there was no point
@kat-mag lol, even worse
lol eh, I've found free online courses for react so I'll start there ;P
the shitty part is that angular 1.x and 2 are quite different :(
ok, well, I better quit stalling and better get coding. I'm gonna blast through some FCC
so I can just do the projects on FCC and skip the tutorial parts for the certifications?
I think I even made the random quote project with angular for fun
@AmitP88 you need to do all challenges with a star
@kat-mag ah ok
I'll just do those ones and do the required projects too
I wanna blast through this thing lol
and get to the good stuff ;)
@AmitP88 some projects like tic tac toe, twitch & wiki are going to get moved to extra projects... so you might put off doing these and wait for the update.
the update was suppose to be pushed on 1.sept. if I recall well
but it got stuck somewhere
@kat-mag ah good to know, thanks for the info! :)
amitp88 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @kat-mag |http://www.freecodecamp.com/kat-mag
sorry the aim was 16.09.
any other projects I should put off? I just wanna focus on the most important ones for now
leave simon game
@kat-mag you mean don't do that one?
DO: calc, pomodoro, quotes, portfolio, tribute.. Don't remember about weather app... WHERE IS THIS shit git repo that had info ;D
how about you start from the first one, dont think and plan the last ones :)
@AmitP88 JUST GET STARTED! :)
hell yeah
lmao ok ok. I'll get to work on those projects right now haha
@AmitP88 I am sorry, but I see a lot of analysis paralysis here, I know your time is limited :)
@sjames1958gm for sure =)
ok, bye guys! gotta get to it! :D
@AmitP88 Good luck -
So, who's down for a 3v3 dev war? Two teams with an html, css and js person on jsfiddle streamed live for all to see?
@jdtdesigns be ready get yo ass handed to you!
haha, i hope
I'm down
it's weekend coming up so I will have free time as well
i'm thinking we can at least find 4 more right?
yeag
*yeah
have to have at least an intermediate understanding of html/css/js
@jdtdesigns : This room looks like a right room for topic at hand
thanks
@jdtdesigns : I'll be off now. Do keep me updated on the progress over PM
@adityaparab alrighty
Love to see what you guys think of my Portfolio website
You guys have any thoughts
made an update
lookin good @grantknaver
2 days of FFC and already completed 81 challenges :)
all of the html/css and part of responsive design. I hope I can move this fast with the jquery/JS sections ;)
@AmitP88 Unless you're already a programmer, the js is where it gets more difficult
also, fcc doesn't teach you any html/css for the most part
so when it comes to building the app challenges, you'll have to learn a lot more of those two
so it gets pretty hard ;)
@jdtdesigns for sure. the Udacity front end program was hard towards the end, and I definitely need to sharpen up/get better at the JS/jquery stuff
@jdtdesigns I'm glad that FCC is still challenging though, that's how we get better right? ;)
@AmitP88 The only way ;)
you have to code to know how to code
exactly ;)
I was told that no one has really completed all the hours in the program since they get hired on before they finish lol
maybe that was a bit of an exaggeration, but I think that's pretty awesome :D
@AmitP88 It's more that people quit and don't come back, but yes a lot of people have gotten jobs and moved on
this stuff is only for a select few
the reality of professional level dev is it's a hard life
@jdtdesigns that's good. I really wanna level up my dev skills (especially in the webapp dept)
for sure. I mean, I've gone through a lot doing the Udacity program and there's still a ton I need to learn
would you say this program is better than doing pro bono work?
for experience I mean
@AmitP88 you'll never 'know' enough, but once you have a strong understanding in programming/data engineering, you'll be more comfortable learning new things
html/css are a must if you want to be a web dev
and css alone can take years to master
@AmitP88 FCC has pro bono work if you make it to the 3rd section i believe
i'd say code apps from home as much as you can
continue to push yourself
absolutely. I mean, I've only been doing this since last may, and I still feel like I have a long way to go before I'm good enough for a jr position.
here's my portfolio if you're interested. it's not finished yet, but it's what I've accomplished so far: https://amitp88.github.io/New-Portfolio/
@jdtdesigns ah ok, that's perfect actually. saves me hunting for it lol. for sure, I'm actually gonna learn react and angular soon and see what they do to come up with an app idea
nice portfolio @AmitP88
@jdtdesigns thank you :)
amitp88 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
I still need to add more animations, fix the responsiveness for certain browsers, and optimize the loading speed. but it's coming along I think
I'm still not sure when I'll be ready to get a jr dev job (I've applied to about 15 places since last friday but haven't heard back yet), but hopefully maybe after or within 6 months depending on how fast I get through the projects
@AmitP88 Junior positions are becoming more difficult to get these days
@jdtdesigns yeah, tell me about it. even freelance work is getting way more competitive
junior used to mean an intermediate understanding of html/css/jQuery
now it's html/css/jQuery/react/sass/gulp/terminal/git/ect. :D
@jdtdesigns I'm hoping that once I make a good react & angular app (or an app for each tech), plus advanced projects in FCC, that maybe i'll be able to land an entry-level role
lol yeah, and it's like I've used grunt, git terminal, knockout.js, etc a little bit for past projects, but I need to get better to fully understand how they work
@AmitP88 React and angular would be separate.
@sjames1958gm oh yeah, I forgot, it's react+redux
@AmitP88 A solid understanding of git/github used to be a plus, now more of a must.
@sjames1958gm for sure. I have a bad habit of using GitHub's paste function on their site instead of pushing commits via the Git command line, although I plan on getting back into that soon
the only thing I struggle with conceptually is branching out on there
that stuff gets pretty deep in itself
@AmitP88 branching is actually simple once you do it a few times
it becomes second nature with bigger projects
ah ok. I might do that once I start working on my app
oh yeah, with FCC, so a lot of people quit because it's too difficult?
@AmitP88 If you are looking to learn React+Redux this course is very good, and they discount them often
https://www.udemy.com/the-complete-react-web-app-developer-course/learn/v4/overview
Covers React, a little webpack, Redux, component testing, he uses git throughout the course (no branching so far)
a little heroku.
https://www.udemy.com/the-complete-react-web-app-developer-course/learn/v4/overview
Covers React, a little webpack, Redux, component testing, he uses git throughout the course (no branching so far)
a little heroku.
@AmitP88 And i'd dive into the terminal now. It'll be required for 99% of the jobs nowadays.
once you use the terminal for a month or so, you'll love it and use it constantly
i find myself browsing my comp in terminal all the time lol
@jdtdesigns ah ok. yeah, I'll change my habit then. I need to get comfortable with branching too. so when is the most appropriate time to branch compared to just making a commit?
lol that's awesome
real hacker-like =P
there's also cool things that you can do with bash
and just using Git Bash is ok right? or do I need to be familiar with Windows terminal too?
shortcuts and stuff
lol windows terminal
never use that
lol ok
that's probably more for software engineers huh?
for old school geeks more like it
windows is now switching to linux based terms
ahh I see
conemu is great for windows
I use cygwin on windows to get bash, now bash on windows 10
i use cygwin to run some terminal progs like Profanity
cygwin is also my X server on windows
yeah, last year I tried to install Ubuntu linux because I wanted to start using it when I was first learning dev, but even after I partitioned my C drive when it asked me to when I restarted it it wouldn't let me choose between Windows and Linux, it would just load up windows like normal
lol Profanity
@AmitP88 Just run ubuntu in a virtual box
@AmitP88 How powerful is your machine - maybe virtualbox running ubuntu for learning
@jdtdesigns :+1:
@jdtdesigns how do I do that?
o boy lol
look up virtual machine ubuntu on youtube
@jdtdesigns I even have one of the newer Raspbery Pi that I use for linux work.
lol ok, will do :)
@sjames1958gm nice
i had a college group ask me to program their Pi
i don't know python :/
well, i could learn it in a week
man, I don't know how devs don't get overwhelmed with all this stuff to learn, and you still have to get good at what you already learned
but i'm too busy lol
@AmitP88 we do get overwhelmed
you just learn to cope
yeah, I mean, I've never been that quick of a learner, but I am making an effort to pick up things quickly and just use them to make better things
My brother brews beer so I set up a web page on his Pi that hooked into the temp. sensors on the board - that was fun. Its some ugly code cause it was before I started learning alot of this stuff
build a theme and plugin from scratch in WP and you'll know what overwhelmed feels like :D
omg, I still have to learn WordPress lol
Hopefully FCC will help me learn things quicker
I feel like Udacity was kind of a ripoff compared to that
but oh well, it's done now
@AmitP88 FCC doesn't teach you anything unfortunately. It just challenges you.
@jdtdesigns well that's still good though. I need to be pushed so that I can get better
So, who's down for a 3v3 dev war? Two teams with an html, css and js person on jsfiddle streamed live for all to see?
I mean I've done JS-heavy projects including working with APIs and frameworks, but honestly at the time I needed a little help with it when I got stuck. hopefully I can get good enough to where I can just figure it out on my own when I hit a wall and just get it done
omg lol
that's insane
We have 2 js. We just need 2 html, 2 css. Who's down?
I need to take a small nap actually, been up all night and I'm on 12 hr shifts all week
and last week lol
Any more takers for a Dev War? We need 2 html coders and two css.
@jdtdesigns Maybe if I was better :D
well then lol
so who wants to challenge me to make an app and watch the chaos ensue?
@jdtdesigns can u pm me the details?
Alright people. We can do 2v2 where one person does html/css and the other does js. We have 3 people so far. Need one more. Who's down?
Hosting a 3v3 or 2v2 Dev War. We have 3 people. Need 1 or 2 more. Who's ready for a challenge?
@jdtdesigns what's the timeframe and what's the project??
it'll be an hour long challenge
the project will be to create a web app with a list of requirements in the hour
So in real time? That's tough for me until sunday
Sounds awesome though
@AdventureBear Yep, streamed live. The teams will be on https://jsfiddle.net collab
Hello Friends i need some help with the scroll if you click on the navigation you will see it takes different parts of the section but just not showing the tittle of each section, just hiding the h2 tittle, i add the #section1 2 3 in section so i thought it was gong to take me just before each block, it was not working before adding the jquery code so i assume is not jquery is targeting the proper block many thanks http://rogemateos.com
@RogeMateos That's because your getting the scroll top of the element. It needs to be offset by around 50 or so to not scroll past the top
http://codepen.io/SharkEvan/pen/jrkzZm
Can somebody please help me figure out why this isn't displaying the data, I have tried pretty much everything. Thanks
Can somebody please help me figure out why this isn't displaying the data, I have tried pretty much everything. Thanks
@SharkEvan navigator no longer works on http with chrome. You can use an ip locator http://ip-api.com/json to get the location in chrome and use navigator for other browsers.
@jdtdesigns that's a pain, might just use it in microsoft edge, thank you
sharkevan sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 679 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@SharkEvan It's actually pretty easy. ;)
@jdtdesigns Haha yeh
https://codepen.io/ajayt365/pen/LRzNmq . why my input tag is not taking any input ?
@ajayt365 because you have
click handler on .icon so when ever you click on input it is replacing contents inside .icon with again <input type="text"> so you can add below code to avoid it and get the behaviour you want$('.icon i').on('click',function(){
$(this).parent().html('<input type="text">');
});
http://codepen.io/mikail1998/pen/VKmwwE?editors=1111 Guys Im trying to write down "win" in console if either side wins, couldnt manage
who streams on twitch?
@mikail1998 might need some refactoring in your logic ;)
@jdtdesigns was really ambitious about my idea
but it seems like it wont work
@vinaypuppal thanks man . can u also help with font-family ? 'Raleway' is working on button but not with div ?
ajayt365 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 599 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@ajayt365 don't know why but if i remove font link from
head and add it in CSS tab below your font-awesome link, then the font in rendered HTML seems to work
Anyone got an idea how can i sort this problem out?
@vinaypuppal If you're using codepen, put your css/js links in Settings
@jdtdesigns i know :smile: but
headin my answer refers to Stuff for <head> in HTML tab of setting :wink:
@mikail1998 Is your idea that a 9 element array matches the board?
@ajayt365 in
head -> Stuff for <head> also its working but you need to have rel attribute on link <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
@vinaypuppal kk
but how come it was working with button and not other divs ?
yes exactly @sjames1958gm
so there are 7 combinations to win
3 from up to down
3 on the sides
and 2 cross
and im sorry 8 combos
thats equal to 8 elements in the array
@ajayt365 :smile: its not working its just your eyes thinking its Raleway font, write
W in button and check as W differs in Raleway font
If you reed the code carefully you will get what i mean easily
@mikail1998 So you need a function something like this
function (board) {
if (board[0] == board[1] && board[1] == board[2]) {
return board[0];
}
else if (board[3] == board[4] && board[4] == board[5]) {
return board[3];
}
else if ...
}
// repeat for other combos
// this could be return for
return board.indexOf("") == -1 ? "draw" : "";
}
This assumes that "" means unused the responses are "X", "O", "draw" and "" for X wins, O wins, draw and no winner or draw
@sjames1958gm why doesnt my loop work for the board instead
@mikail1998 To be honest I could't really follow what you had, not sure how you are using .push
@sjames1958gm never mind
@sjames1958gm thank you anyway
mikail1998 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3732 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@mikail1998 yw
@mikail1998 If you want to debug why your loop/code is not working you can place some
debugger statements, setup some breakpoints and step through your code line by line and find whats missing . If you dont know how to debug code in chrome search in google you will find many videos and articles.
Hi everyone. Working on the random quote machine. I've got it to where when I hit the button, the correct query of the https://quotesondesign.com/api-v4-0/ API pops up where the quote should. I need to figure out how to get the actual quote from that query string
@vinaypuppal well maybe its working but my logic is not
i dont see any errors or anything
@mikail1998 not errors i mean you can check why your logic is not working by pausing execution of each line and manually executing yourself step by step. Chrome Debugger allows you to do that so once see a video or an article about it you will understand what i mean.
<script>
$(document).ready(function() {
var html = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
$("#getMessage").on("click", function(){
// Only change code below this line.
// $(".message").html("Here is the message");// Only change code above this line.
$(".message").html(html);
});
});
</script>
@daytonpe are you working locally or on codepen ?? And you need to make AJAX call with that URL , you can find an example here https://quotesondesign.com/api-v4-0/ about how to use
$.getJSON().
@vinaypuppal oh okay thank you
mikail1998 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 600 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@daytonpe If you working on codepen move your JavaScript (without
script tags)to JS Panel of your codepen . And if your new to codepen read this article to learn how to codepen https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
@vinaypuppal Thanks for help:) I'm working locally, and i've been looking at that site, but am still confused about what's going on with the AJAX call.
daytonpe sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 601 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@vinaypuppal I should be changing the line that talks about body to my html bit?
@daytonpe sorry i did not understand your above question
but you need to make a call to API to get quotes like
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
});After executing above line you will see a response in chrome/browser console.
function(response) {
console.log(response);
}The above part is called callback we are telling $.getJSON to call this callback function after it receives a response from API as AJAX calls are Asynchronous i.e may take a while to complete
@vinaypuppal ohhhh. okay cool! thank you. I'll play around with it
daytonpe sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: daytonpe already gave vinaypuppal points
@daytonpe more precisely like this
$("#getMessage").on("click", function(){
// Only change code below this line.
// $(".message").html("Here is the message");// Only change code above this line.
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});response is an Array so you can access your quote like response[0].content you will get idea how to access required data from response once you see the console.log of response
and if you want to learn more about AJAX follow this course https://www.udacity.com/course/intro-to-ajax--ud110
@vinaypuppal When i put this in, I get: XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
Googled it and it got pretty complicated very quickly.
@daytonpe don't know how your opening your html file in browser but it works here http://jsbin.com/jipaqu/1/edit?html,js,console,output
@vinaypuppal I'm opening it in chrome. The files are hosted locally on my computer.
<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Random Quote Generator</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</body>
</html>
and i'm trying to use the one you sent me in JS bin, and i'm not seeing anything pop up in console when i hit the button. Not sure what's going on :/
thanks again for helping me out
@daytonpe yeah getting same error
null if i open your code locally in my browser. Still finding what's happening
@daytonpe okay i found it you need to add
? after callback= in AJAX URL and need to run a local server since CORS does not work over normal file opening in browser as i read in this. http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin
hey everyone, i'm on the twitchTV zipline and can't get past the iframe sandbox issue, does anyone know how i can get the twitch page to load after someone clicks on the link?
@daytonpe Which editor are you using , if Atom/Brcakets/Sublime they have some plugins to run your files with local server easily .
@spark72018 target="_blank" in your link
hm iv'e set the href value to target="_blank" in the <a> tag but all it does is open a new tab, then load the background but stops there. the stream itself doens't load
@daytonpe have you tried jsonp? (page Quote on design mention to use it for passing the "cross origin thing"
@spark72018 Yes saw same behaviour in chrome browser previously its TwitchTV issue as you can see bunch of errors in console
@homerrowsky yeah the
callback= in URL makes it JSONP call but he is opening html file directly in browser so CORS is not working
@homerrowsky he needs to run a localserver then it will work
@vinaypuppal Thanks man. I' using Sublime
daytonpe sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: daytonpe already gave vinaypuppal points
thanks @homerrowsky
daytonpe sends brownie points to @homerrowsky :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @homerrowsky |http://www.freecodecamp.com/homerrowsky
hey with .map(), how do you get the index value?
yeah i saw the errors but was hoping there is a way around this issue T_T, i guess i'll just table this project for now
@spark72018 check in Firefox it will work
@eemebarbe second argument to
map is index
@vinaypuppal I added that ? and now i'm getting: Refused to execute script from 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…_page]=1&callback=jQuery18305606229390975579_1475867186116&_=1475867189607' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
so i want to store the index as an id as im cycling through the array
how would i refer to it?
@vinaypuppal used a local server as well
@daytonpe okay let me check , give me a min
just array.index?
@eemebarbe like this
[1,22,3].map(function(item,index){
console.log('item: ', item);
console.log('index: ', index);
});
@vinaypuppal I'm about to lose internet. not sure if it'll come back on, but thanks again.
daytonpe sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: daytonpe already gave vinaypuppal points
I can't figure out why my background color for my quote class isnt showing up grey? http://codepen.io/jkmullen/pen/pbKByY?editors=1100
@daytonpe okay still i am also getting same error, lets ask someone else if they can help you @jdtdesigns or @sjames1958gm if you guys around can you check why this error is occuring :point_right: October 8, 2016 12:08 AM
Its working here http://jsbin.com/jipaqu/1/edit?html,js,console,output but not when viewing local HTML file in browser
Its working here http://jsbin.com/jipaqu/1/edit?html,js,console,output but not when viewing local HTML file in browser
@MrJkmullen because you have this in HTML
<div class "quotes">
i need to delete that? @vinaypuppal
@MrJkmullen no just add
= like <div class="quotes">
ok thank you @vinaypuppal
mrjkmullen sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
https://codepen.io/ajayt365/pen/LRzNmq i am trying to make a CORS request. what should be my headers here in ajax request ?
@mikail1998 You asked for a way to do it. Here's a simple solution to check for winners. ;) http://jsbin.com/fitihik/edit?js,output
@daytonpe well it worked after i added
something= at end of URL instead of callback=. But still did not understood why , one more thing i noticed if I add something=? its not working @jdtdesigns @sjames1958gm
@daytonpe further searching I found adding like this
something=JSON_CALLBACK would work
@vinaypuppal okay I'll try that (got internet again working again)
@vinaypuppal These quote apis seem to implement jsonp in many different ways -
@vinaypuppal still getting: XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&something=JSON_CALLBACK. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&something=JSON_CALLBACK", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});
});
</script>
@sjames1958gm yeah its difficult to follow if they don't maintain a standard but learned few new things with this question :smile:
Ok, so how many people are ready for a Dev War? It will be 3v3 or 2v2 if not enough people. The teams will compete to create a one page app using html, css and js following these requirements:
- Desktop/Mobile Nav Bar/Menu
- Slider with at least 3 slides
- 3 column list of at least 9 dynamically generated products
- At least one parallax effect
- Footer with animated text
@vinaypuppal :+1: It's a win then :)
@daytonpe Can you post your codepen?
@daytonpe well its working for me, are you running a local server ??
@jdtdesigns he is working locally
@vinaypuppal oops no. i'll try it again with the local server
@vinaypuppal ya same error
there's your access error @daytonpe ;)
are you trying to get api data?
yes i am
doing the random quote project
can you post your js?
<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&something=JSON_CALLBACK", function(response) {
console.log(response);
$(".message").html(response[0].content);
});
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Random Quote Generator</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</body>
</html>
there's everything
@daytonpe see screen shots :point_up:
what specifically should I be looking at in these?
@jdtdesigns i just copy and pasted your code in a file, edited link to
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&something=JSON_CALLBACK and used pushstate-server to serve files using a localhost
@daytonpe as you can see i get response with content and status
200 with no error as we got previously,
i will try to run that server and see if i can replicate
@daytonpe
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=",
function(response) {
$(".message").html(response[0].content);
});
works fine
your code had an error in it somewhere
i just copy/pasted from the api doc
@daytonpe i think its cache issue or something else try using
&something=something it will work , i mean something can any word as long as browser thinks its unique/different from previous failed call
HAHA! thanks guys. cache issue it was
thanks @jdtdesigns
daytonpe sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 680 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
ah, nice
@daytonpe so it worked finally right ??
welcome @daytonpe
yessir
in an incognito tab
:smile: @daytonpe
and python -m SimpleHTTPServer 8000
php -S locahost:3000
shorter :P
thanks!
forgot to ask, why do i have to run my own server to make this work? Seems kinda wonky
without a server the header is set to null which will be denied by the api server @daytonpe
I'm googling as well, but can you explain what a header being set to null means?
Hello, everyone. I finally finished my Pomodoro Clock. Let me know what you think: http://codepen.io/txsrangers/full/LRZjxp/
it's all about CORS(Cross origin resource sharing). If you run a standard api request, the browser will send it as CORS request. If you're deving locally and you run an api request, the request will try to echo back the contents of the origin header. The contents will be null if you're on file://. If you run a server, it will not be null. That's as simple as i can make it lol. @daytonpe
@txsrangers Looks good mate
Thank you, @eweiss17.
txsrangers sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @eweiss17 |http://www.freecodecamp.com/eweiss17
How did you get that extreme hd background photo? I'll return the cookie for doing nothing @txsrangers thanks
eweiss17 sends brownie points to @txsrangers :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @txsrangers |http://www.freecodecamp.com/txsrangers
Ok, so how many people are ready for a Dev War? It will be 3v3 or 2v2 if not enough people. The teams will compete to create a one page app using html, css and js following these requirements:
- Desktop/Mobile Nav Bar/Menu
- Slider with at least 3 slides
- 3 column list of at least 9 dynamically generated products
- At least one parallax effect
- Footer with animated text
@eric weiss https://unsplash.com/
awesome site for hd images
Didn't know about that site, thanks!
@daytonpe as you can see in below screenshot when using
In Request Headers section the origin is
file://.In Request Headers section the origin is
null but from above section you can you got response from API correctly. But browser thinks request is made from unknown server and rejects its with the error you got previously, so when localhost is used it works perfectly because browsers think localhost as valid origin host.
My JS isn't working could someone help me http://codepen.io/jkmullen/pen/pbKByY?editors=1010
@MrJkmullen You have few errors like
$(document).ready(function){ it should be $(document).ready(function(){ andfunction(getquote){ this should be like this function getquote(){
I am trying to animate the first-letter of the quote in the Random Quote Generator using keyframes in CSS. But Im not sure what I am missing..could someone please help. Here is a sample codepen i created to test it out https://codepen.io/dsilvadeepal/pen/WGrjxP?editors=1100
@vinaypuppal switched it and still not working http://codepen.io/jkmullen/pen/pbKByY?editors=1010
@MrJkmullen still a typo
$(document).ready(function)(){ look this $(document).ready(function(){$(document).ready(function)/*<-- here it should not be there*/(){
@dsilvadeepal i think
:first-letter is not animatable as some elements in CSS are only animatable so i added a span around first letter of you quote and tried the animation worked <p class="quote"> <span>T</span>esting some text here</p>.quote span{
animation-name: changesize;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
@keyframes changesize {
0% {
font-size: 2em;
color: black;
}
100% {
font-size: 4em;
color: red;
}
}
@vinaypuppal Thanks for the info! I didn't realize it. That's something i need to figure out how to implement as the quote will keep changing.
dsilvadeepal sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@dsilvadeepal you can add a span tag to just
firstletter of quote using some JS String/Array [like Capitalise string exercise in FCC JS Challenges] functions and append quote to html.
@vinaypuppal That sounds great! Im gonna try it out..
which (or does it even matter) api to use for random quote machine project?
@mayurpande you can just use Array of your own Quotes and select randomly one from that and show for every
New Quote button click.
@mayurpande or if you prefer API you can use any quotes API
@dsilvadeepal :+1:
@vinaypuppal ah ok didn't realise your allowed to use your own quotes, thought it had to be done with and api to work with json files
@mayurpande yeah but none of user stories mentioned to use an API so your free to use anything that works for you. But in later challenges like Weather project and Twitch Project it is mentioned to use an API (also mentioned which API) in user stories. So i think these challenges are for working with AJAX and JSON
cool thanks @vinaypuppal will check it out
mayurpande sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 604 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Hey everybody, I'm working with bootstrap for my tribute page, the first project
bootstrap's grid system isn't working as I expected:
http://codepen.io/allanpooley/pen/pEadrp
I intended for the image to be on the left, however it is on the right?
http://codepen.io/allanpooley/pen/pEadrp
I intended for the image to be on the left, however it is on the right?
Anyone able to see what I did wrong here?
@AllanPooley you have unclosed img tag check that and do you want image to be on left side and blockquote be on right side of image??
@vinaypuppal Exactly! Can't believe I missed that!
@vinaypuppal Thank you so much :smile:
allanpooley sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 605 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Reworking my tribute page and when testing my background color in Firefox and Chrome, the color is fine in Chrome (blue), but shows as a pale beige in Firefox. Is there something I'm doing wrong here? I've tried switching my hex code to rgb.
@AllanPooley educational purposes: There are only 12 columns in a row in bootstrap grid, btw. And yours adds up to wayy above that number. And doing a design only for medium screens is not very responsive. Unless I'm blind ;o
@tmmggmmdld link your pen?
Oh right! How might I make this website more responsive @kat-mag , should I specify multiple col sizing in each of my grid columns?
@AllanPooley yes, you add col-xs-whatevernumber & col-lg-whatevernumber. Make it so it adds up to 12 per row
for each screen/device size
(hate bootstrap btw, but welp) ;d
Thank you @kat-mag
allanpooley sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @kat-mag |http://www.freecodecamp.com/kat-mag
@AllanPooley no need of that many nested div's as you have just use below html structure to get side by side when on medium and up screen and stacked content when on small screen
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<img class="img-responsive img-thumbnail" src="http://vignette2.wikia.nocookie.net/firstlaw/images/d/d0/LogenNinefingers-GraphicNovel.png/revision/latest/scale-to-width-down/270?cb=20160523165747" alt="Logen Ninefingers - a long-haired, beaten man, covered in robes kneels in the snow." />
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<blockquote>
<p>"Once you've got a task to do, it's better to do it than live with the fear of it."</p>
<footer>Logen Ninefingers in <cite title="Source Title">The Blade Itself</cite></footer>
</blockquote>
</div>
</div>
Ok cool :smile: thanks again. I'll see what it looks like on my phone too
@vinaypuppal thanks again :smile:
allanpooley sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: allanpooley already gave vinaypuppal points
@tmmggmmdld it's blue in both ff & chrome on my machine. (u might want to clean up your code tho)
maybe you have some user stylesheet on FF that's overriding the bg? (doubt that, but). Or there's sth I'm not seeing ;o
Hey everyone, please check out my local weather project. I know my css sucks tho. lol. Thank you. http://codepen.io/sayrah901/pen/qaAzxP
@kat-mag thanks!
tmmggmmdld sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @kat-mag |http://www.freecodecamp.com/kat-mag
@sayrah901 Crap, it's cold outside ;D
you have your div tags messed up, and remove the <body> tag - don't need that on codepen
Oh, it was an unclosed span tag, not div.
@kat-mag okay, lemme work on that
Thanks for checking it out. I'm going over it again to practice while I'm slowly making my way through JavaScript.
@tmmggmmdld no prob ;)
@kat-mag I used the body tag to change the background image of the page for each weather description. I can change that to a div element and probably control it using an ID but I'm too tired to do that right now. I'll probably do that later. Thanks for checking it out.
sayrah901 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @kat-mag |http://www.freecodecamp.com/kat-mag
@sayrah901 you can target body tag in css even if it doesn't exist in your codepen html tab :)
ooh.. really? I never knew that.
codepen magic ;d
I just removed it.
thanks
Hello again guys :smile:
Say I have a bootstrap grid column (<div class="col-md-6 col-sm-12 col-xs-12">), and I want it in the center of the center of the screen
What is the easiest way to do so? it's not having surrounding, padding columns right?
@AllanPooley try adding text-center to your class
To the row or column Sarah?
there's
.center-block too, as far as I remember... again not a bootstrap fan
To the row, if you want it to apply to the whole row, or to a column if you want it to apply to a specific column
@kat-mag why are you not a bootstrap fan?
It's better, but still not quite dead center!
Looks generic, nobody wants to override the defaults... It's fat... ;d
But you can always override the defaults if you want to.
@AllanPooley I can't view your page clearly to see the problem. Can you send a link to your page?
Sure Sarah: http://codepen.io/allanpooley/pen/pEadrp
what do u want to be centralized?
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
@AllanPooley
and u got crap </img> that shouldn't exist ;P
aaand a typo in a button class, aaand <link> tag should go into settings in codepen html tab. But it's ok ;p
Sorry guys I was in the shower! Thanks for the feedback
I was hoping to get the button centralized
let me have a tinker around with kat-mag's fixes :smile:
Ok looking better now @kat-mag , @sayrah901 , thanks :smile:
allanpooley sends brownie points to @kat-mag and @sayrah901 :sparkles: :thumbsup: :sparkles:
:warning: allanpooley already gave kat-mag points
:cookie: 265 | @sayrah901 |http://www.freecodecamp.com/sayrah901
But! the button is still not exactly what I had envisioned
It's centered, but I'd like to have it span wider... Perhaps this is a job for padding left and right, or adjusting the width?
But how would I do this in a responsive way?
I'd like the button to have approximately twice its current width?
Here it is again: http://codepen.io/allanpooley/pen/pEadrp
@AllanPooley you can set the width in
ems. It'd be responsive enough I suppose
I'm out tho, 2 am :wave: have fun ;D