@Nachlawi Let me see . . . what does a jumbotron do?
But I think that is what I want . . .
@coymeetsworld Ohhhhhh, I get it! The sneaky [] around the {} got me :D
thanks.
thanks.
nachlawi sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
yeah im not sure why thats setup that way @Nachlawi
Ah hah - yes indeed.
im guessing for more advanced api calls it may include multiple objects, idk. But yeah, sneaky :)
Thanks @Nachlawi
coder7215 sends brownie points to @nachlawi :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @nachlawi |http://www.freecodecamp.com/nachlawi
if anybody can help above with my weather app, I'd really appreciate it! been stuch for quite a bit now, and I've worked with Angular before, so I'm not sure what the issue is. It's been a while though
stuck*
@coder7215 No problem :D
@alexdecapri I'm making my weather app at the moment. Been making it for like a day :s I don't know angualar though. I'm using jQuery.
hi guys, I've a question about browser's image caching
can yuo help me?
@Nachlawi dang.. yeah AJAX calls via jQuery were new to me, but I used that for the random quote machine.. I like Angular better for API calls, but of course now I can't get it to work haha
@coymeetsworld So how do you call if there are two arrays? conditions. and display_location.full ?
@alexdecapri The show example used angular. Try looking at its code: http://codepen.io/FreeCodeCamp/pen/bELRjV
two arrays where @KoniKodes ?
@coymeetsworld using wunderground api, I have the conditions and I also have the location calling for the full city/state as one statement.
@Nachlawi I am, but I am using a service rather than a factory/I think some of their stuff is coded more advanced than what we are supposed to have learned up to this point
let me take a look @KoniKodes, not familiar with that API
@coymeetsworld https://codepen.io/KoniKodes/pen/gMOWpb obviously I'm a little lost...
@alexdecapri It definitely is. I have no idea about angular at all!
looks its an object of objects @KoniKodes, and they're referenced by an String id (i.e. response, current_observation, display_location, etc)
so its not really an array
@coymeetsworld How do I call them out and put them in their proper places?
also just took a quick look at your code I would recommend using the getJSON function instead of making get request
@coymeetsworld Yes, working on that.
code will be much simpler, and I don't have too much experience with that
@coymeetsworld Thank you
konikodes sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1090 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
but to get the information say if the object were stored in a variable named json
it would be something like json.response.conditions, and json.display_location.full
json.response is this:
"response": {
"version": "0.1",
"termsofService": "http://www.wunderground.com/weather/api/d/terms.html",
"features": {
"conditions": 1
}
response is the id of that object, so response.conditions would return 1, I believe
have you looked at this documentation?
https://www.wunderground.com/weather/api/d/docs?MR=1
https://www.wunderground.com/weather/api/d/docs?MR=1
function convertHTML(str) {
str=str.split("");
for(i=0;i<str.length;i++)
{switch(str) {
case "&" :
str[i]= "&";
break;
case "<":
str[i]= "<";
break;
case ">":
str[i]= ">";
break;
}
}
// :)
return str;
}
convertHTML("Dolce & Gabbana");?
look at the switch statement
also just a tip, you should use regex instead @123xylem
@coymeetsworld the only reason i can think for that is so that I can use 1 regex to conver them to html entities
Is there a html enttity convert regex?
its also much less code to write
you don't have to split up your string (and join it back which was also forgotten)
regex is the same function with or without html
you can use the replace method for String
@123xylem switch (str[i]) -
@GregatGit @coymeetsworld thanks
123xylem sends brownie points to @gregatgit and @coymeetsworld :sparkles: :thumbsup: :sparkles:
:cookie: 569 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1091 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
SO ive completed the challenge
But your right coy
I should develop good practive
@123xylem but @coymeetsworld is right - you should try implementing regex -
yeah what you had wasn't bad, just needed to fix switch and also i think join the array back right?
and add a few more cases
but with regex you use much less lines
hey everyone
and while not a big deal in these toy examples its more efficient to use regex instead of splitting up the string like that
having some trouble with the local weather app
im trying to query a json geoip locator and it wont work
it works fine on jsbin
@fgarcia-student use
http:// for your codePen
it works then
@fgarcia-student look in teh browser dev tools console and you can see teh error
can anyone tell how do I paste my code here, I need hep with an exercise
@mutantspore :thumbsup:
heh it says blocked by client
lol
Quick question: On the portfolio webpage pen, why is the class .navbar-header necessary? It doesn't seem to change anything
help format
:point_right: code formatting [wiki]
Multi line Code
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
Single line Code
This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
ok i got it it needed https://
@fgarcia-student well you had mixed content. either use http for the codePen page ot use https for the api call if it’s possible . (which it seems it is)
any thoughts?
can anyone help me with an algorithm?
This is for the truncate string algo. It passes all of the tests except for the last one:
This is for the truncate string algo. It passes all of the tests except for the last one:
truncateString("Absolutely Longer", 2) should return "Ab...".function truncateString(str, num) {
// Clear out that junk in your trunk
if (str.length>num && str.length>3){
str = str.slice(0, num-3) + "...";
} else if (num <= 3) {
str = str.slice(0, num) + "...";
//} else if (num <= 3 && num === 2) {
//str = str.slice(0, 2) + "...";
}
return str;
}
truncateString("A-tisket a-tasket A green and yellow basket", 11);
still having angular difficulties... receiving error in console of "cannot read property 'then' of undefined" - somebody please help haha http://codepen.io/alexanderdd/pen/aZvKmW
do i need to use a promise? i don't think so... but not sure why I can't get the zipcode to display...
mutantspore @mutantspore is not someone who can help with Angular.
@coder7215 it has to do with bootstrap's class styles http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
khaduch @khaduch - also is not able to help with angular...
thanks @alexdecapri
coder7215 sends brownie points to @alexdecapri :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @alexdecapri |http://www.freecodecamp.com/alexdecapri
alright, I figured it out - just had to return my $http request. 1.5hours later.. haha
@stephepush you are not using the slice method appropriate
Can anyone help me out, i think I'm having trouble using return values from one function in another function:
@stephepush the second argument must be negative.
the trouble seems to be in displayLocation() using the result of getLocation()
but i'm not sure
@mutantspore no success yet http://codepen.io/freekngdom/pen/VjvBZg?editors=1010
@Luiko, when you say the second argument, do you mean the second parameters for the instances I'm using the slice method
@stephepush yes
hello css gods can someone help me understand why my 3 column bootstrap layout is broken http://codepen.io/nsieber/pen/gMpQXL?editors=1100
@freekngdom which browser are you using?
chrome
And I use Brackets as IDE
@freekngdom well it won’t work in chrome unless you use https:// on your pen. but then the OWM api won’t be able to be used as http
hey guys , any one know how to get out of the codepen view with the save button ?! did a bunch of editing now i dont know how to save it . haha
I get the alert('success') then the function creates a new Locatino called "city" and returns it
@freekngdom yes.. if you use https it does. .. though your link was http
@nsieber - I think that you might have closed your
row div after the first column? Or had an extra </div> tag there on or about line 13
@khaduch You sire are correct! Thank you
nsieber sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
@needsMoreCoffee are you logged?
:star2: 1281 | @khaduch |http://www.freecodecamp.com/khaduch
@needsMoreCoffee what view do you want
I have no links in this pen, I'm just trying to pass location from one function to another @mutantspore
the one that shows me the save button haha . trying to hit back throws the warning about losing my code .
@mutantspore is that what you meant, the actual link I posted here: https://codepen.io/freekngdom/pen/VjvBZg?editors=1010
@freekngdom well I see what you are asking but the geolocate won’t work at all unless you reference your pen using https://
I’ll look fo ryour issue now
I’ll look fo ryour issue now
@freekngdom yes
👍🏼
shoot i think I got it . I used the preview link them picked the editoer mode from it and saved. seemed to work .
@freekngdom you need put a return in the getlocation scope.
Hi everyone! I have a quick question: Any idea why the click event on JS line 72 isn't firing? http://codepen.io/micahbales/pen/MegRqm?editors=0010
@Luiko I return city in the success function in the getLocation function
@freekngdom i think that city obj is not going any where.
@micahbales I tried adding a new button to create a simple alert and that wouldn't work
@micahbales -hello - I think that it is "hidden" behind something - I deleted a couple of the elements that seem to be on top of it, and then I could get the cursor change... I was trying z-index settings on it, but that didn't seem to work, either. I don't know about the svg element and stuff? still tinkering...
@micahbales - did you move it? I just reloaded your codepen project and now the center circle is shifted off to the right and down? But I can click the button...
@micahbales - and now it seems to be working?
Hey guys do you know if there is a property that is the opposite of onclick? i want a function to execute when the mouse is released rather than when pressed down
@NewtonXu mouseup :)
@James-H33 Thanks!
newtonxu sends brownie points to @james-h33 :sparkles: :thumbsup: :sparkles:
:cookie: 40 | @james-h33 |http://www.freecodecamp.com/james-h33
hello guys i have a situation, i read on website w3school as well but im stuck
here my tribute project
https://codepen.io/Atalaa/pen/ezpgzM?editors=1000
I want to make my "Facts" button be like a Collapsible button that show a big text, but when i click on it nothing happen
maybe something wrong in my button element
@Atalaa you need to add in jQuery.js and bootstrap.js to make things like that work in bootstrap.
https://codepen.io/MutantSpore/pen/zBvLXb?editors=1000
https://codepen.io/MutantSpore/pen/zBvLXb?editors=1000
i already add bootstrap but i dont know how to add jquery in codepen, also i dont think we need jquery in this 1st project no ?
@mutantspore i already add bootstrap but i dont know how to add jquery in codepen, also i dont think we need jquery in this 1st project no ?
trying to import a font in CodePen for my Portfolio page project. Do I need the link script? Or can that just go in the JS box?
@mutantspore can u tell me how u did that please
@Atalaa go to the JS settings to add them. As I said it’s bootstrap that needs jQuery and bootstrap.js.. nothing to do with if you used them directly or not. See my fork of your pen. There are 3 files to add. bootstrap.css in the CSS section and jQuery.js and bootstrap.js in the JS section (in that order)
@Rouque if you can find a CDN of the font you can add them into your CSS section or add a <link> to the header section in the settings
@mutantspore thank u so much it works. so everytime for a web project i should add jQuery.js and bootstrap.js and bootstrap.css ?
atalaa sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1719 | @mutantspore |http://www.freecodecamp.com/mutantspore
Hello all .
@Atalaa if you use Bootstrap… not all boostrap features need the JS files but many do.. The collapsing menu for mobile devices is one.
any clue how to escape my title so it will work ?
why the order is important please ?
@mutantspore why the order is important
@Atalaa bootstrap.js requires jquery.js to run ..so therefore jquery must be loaded first
@mutantspore thank u for your help !
atalaa sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: atalaa already gave mutantspore points
@Rouque - if you get the link for the font from google fonts, paste it in your CSS "External Resources" in the CSS config panel.
@needsMoreCoffee one way is to use the character codes . I assume this is what you wanted
</Resume>
@mutantspore I remember these . thanks a ton .
needsmorecoffee sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1720 | @mutantspore |http://www.freecodecamp.com/mutantspore
Thanks @khaduch
rouque sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1282 | @khaduch |http://www.freecodecamp.com/khaduch
can anyone help me figure out why when you mouse over elements of the nav bar, they dont change color?
btw click the link to see a better picture, it doesnt look very neat in the chat room...
Hey I'm working on this. How do I center my buttons?
@JackLeb130111 it’s
color not font-color
@JackLeb130111 Also, you need to do your css like so: ``` $('li:hover').css({'color':'red'});
$('li:hover').css({'color':'red'});
@N-Upchurch @mutantspore thank you very much
jackleb130111 sends brownie points to @n-upchurch and @mutantspore :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @n-upchurch |http://www.freecodecamp.com/n-upchurch
:star2: 1721 | @mutantspore |http://www.freecodecamp.com/mutantspore
@N-Upchurch you only need the
{} syntax if you want to do more than one at time
@JackLeb130111 Quite welcome
@mutantspore Didn't know that, thanks. The hover selector will prevent all <li>s from turning red at once tho.
n-upchurch sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1722 | @mutantspore |http://www.freecodecamp.com/mutantspore
@N-Upchurch just answering his question.. I can see that it’s not the final solution for what he’s trying to do though.
No sarcasm / etc implied, genuinely didn't know that the braces were unnecessary. Thanks for letting us know.
@N-Upchurch lol it’s ok .. I’m just jumping fromone task to another … :)
Anyone know how to align buttons with your text?
hey guys, what does the function array.filter(Boolean) mean?
@quocanh261997 , filter the falsy values and return only the true Boolean ...
@shusil123 so that means Boolean is also a function?
@quocanh261997 Boolean is a type of variable. It returns either true or false.
Array.filter(Boolean) seems to be a function that looks for Booleans in the given array.
@quocanh261997 , Not a function . .filter() is a method and Boolean is a type .filter (Boolean) search for true Booleans.
Anyone know how to align buttons with text in a header?
thanks @shusil123
quocanh261997 sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @shusil123 |http://www.freecodecamp.com/shusil123
@mutantspore hi are you here
@Atalaa lol perhaps
@mutantspore haha can u help me for one more thing please
i’ll give it a go
i put a button with a target blank, the previous one, works but for one reason the last one doesnt work
oh ok
@mutantspore when u have time, dont worry
it’s
target=“_blank”
@Rouque try add some padding-top of 40px to the buttons div. it works but i don't like this solution. let me drink my morning coffee
@Atalaa underscore blank
but for other one i didnt put underscore how come it works
@mutantspore i just underscor it , it doesnt work
doesnt work @mutantspore
@mutantspore ? which thing are you having trouble with ?
@Atalaa th ebox office one?
@mutantspore yes when i clik on it i want it bring me to youtube trailer, but it doenst work , its weird because i did the same thing earlier ans it works for another link
@Atalaa it works. @mutantspore made the fix for you. but why do you nest a button with an a tag? just keep <a > tag and give it a class="btn bla bla bla"
@Atalaa if it’s teh box office one ..what you do is get rid of teh button an dput button classes in the <a> tag .. it wil look like a button then . I made those changes ..
@Atalaa yes as @sorinr has also said
ohhhh right guys
@sorinr @mutantspore thank u guys it works very good now, i dont know why i nested button element
atalaa sends brownie points to @sorinr and @mutantspore :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1723 | @mutantspore |http://www.freecodecamp.com/mutantspore
Is the a way to execute some script only when all getJSON request are complete? I am making multiple getJSON calls in my project
hey can anyone tell me where to look to find out how to make the shape of the simon board ??
@nerocool996 https://www.youtube.com/watch?v=obaSQBBWZLk
Thanks @sorinr
rouque sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @sorinr |http://www.freecodecamp.com/sorinr
morning
hi guys, i do basic tic tac toe,
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
i stuck one thing, how can i remove one click event when you or computer and click PLAY AGAIN ?
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
i stuck one thing, how can i remove one click event when you or computer and click PLAY AGAIN ?
I can't make a move when I choose O @buiphuking
after first game
Hey, I'm about finished up with the pomodoro timer. My up arrow on break doesn't work anymore and I can't figure out why. Can someone help me out? http://codepen.io/imtylerland/pen/wWaPao?editors=1010
@imtylerland
if (num > 30) {
break starts at 5
Oh ok, thank you.
np
I had that at 60 and changed it to 30. I'm so tired right now.
Is there anything I should improve on my pomodoro timer?
thanks @coymeetsworld
imtylerland sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1096 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
np @imtylerland
guys how should i retrieve the information of the location node in this json object
https://api.teleport.org/api/locations/10.4682215,-66.5997956
https://api.teleport.org/api/locations/10.4682215,-66.5997956
I've been trying with following the path but it says undefined on location
@trip16661 are u working on local weather?
@sorinr y well a neww version of what i already had before
using ES6 and implementing a design
@trip16661 ok if you need some inspiration check my pen here: https://codepen.io/sorinr/pen/xOGdYz
@sorinr nice, but why on initial load the temp. does not have decimal and then when I click to change I get 2 decimal for fahrenheit and also for celsius if I click again
@kirbyedy strange because i get also decimals even on load.
Any good json api for random quote generator?
hmmm
@vinay-jaju try this one http://api.forismatic.com/api/
same in the firefox, and in safari does not even work :(
@kirbyedy you should try it only on https not http
Sure @sorinr
hey everyone, check out my Simon game http://s.codepen.io/jdtadlock/debug/EyVbOM :)
@vinay-jaju and its still not working over https on firefox?
For the tribute page how am I supposed to center my list items?
@sirjeth post your pen link to be able to help you
https://codepen.io/jeffmatchett/pen/vKNzod i believe?
In the example given the guy has all of his dates listed aligned but whenever I try to use col-xs or something my containers get messed.
@sirjeth they are centered.
Yes but I mean in the example they are centered but all aligned.
So the leftmost text lines up. While still being basically center.
@jdtdesigns goes a bit berserk. when you click a on wrong button for the second choice it seems to play the first one twice on replay
@mutantspore ah, bout to fix it
@mutantspore Hi Bruce. Can you test please if this link its working for you: https://codepen.io/sorinr/pen/xOGdYz
@sorinr yes works on Safari and chrome on a Mac.. a bit slow. You could probably only have 1 decimal place or even none
@mutantspore thats why i have asked a second opinion. somebody told me that during loading it shows no decimals but afterwards if you click on units it shows both C and F in two decimals
@sorinr shows 2 on load for me
@mutantspore then i will take care and optimize the background photo loading time
@mutantspore what version of safari are you using ?
9.1.1 you hve to have wi-fi on to get it to work but that’s normal
nice feature
now its showing double location for me
and wrong
Brussells
and I am about 3000km away :D
@kirbyedy blame google for their api geolocation not me. i just hope you feel good where u are :) this is just an "homework" if u know what mean
Button click for random quote not working on codepen. Please help
http://codepen.io/vinay_jaju/pen/jrbvJR
http://codepen.io/vinay_jaju/pen/jrbvJR
On refresh it generates a new quote
@vinay-jaju
$("#getMessage").on("click", getRandomQuote);
Thanks a lot! @mutantspore
vinay-jaju sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1724 | @mutantspore |http://www.freecodecamp.com/mutantspore
@mutantspore why some people prefer #id.on("click") to trigger an event instead of onclick="myfunction()" within the tag ?
@sorinr it keeps the JS in the JS file rather than spread about.
@sorinr I guess it’s like putting style tags in teh HTML.. not really done these days
Hello! I am quite a new user here using Wordpress.org ^_^ Does anyone know how I could create a frontage that requires users to type in contact details before being able to access the website?
@mutantspore anyway the code still goes finally to js. but for me it means more when I'm reading for example a button tag to understand from the begging what it does. what is his action when triggered. so i can go that particular function and fix it if it is needed
How to share quote on twitter? https://codepen.io/rabibsust/pen/QEjywB
https://twitter.com/intent/tweet?text= add on the quote to that and put the lot into the URL in your button using the Jquery .attr method
@rabibsust take a look at my pen here: https://codepen.io/sorinr/pen/VaJKrw
@sorinr Thanks
rabibsust sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @sorinr |http://www.freecodecamp.com/sorinr
This message was deleted
Sup peeps, sharing some awesome HTML, CSS and Javascript challenges: http://goo.gl/VuC3VX
Folk please help me implement filter feature for "Twitch TV" project???
hi people, can anyone help me with browser's image caching?
is it possible, when offline, provide the user a cached image for offline browsing?
@rabibsust welcome
Hi, anybody familiar with setting the api header for the wikipedia search page challenge? my queries are getting bounced by wikipedia with the following msg in the console:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
@jdpunk1you can set a callback function in the API call, there's a link to an example of this in the next challenge(twitch TV) which shows a pattern for how to do this. You can also try requesting
jsonp if you're using an AJAX call. Changing the datetype requested worked for me.
I'm using AJAX, I'll give it a try..
Hello! Does anybody know how to make the menu fixed at top when the Wordpress theme doesn't allow that?
This message was deleted
Hi how can make a page scroll to a section in page when I click on a link???
http://codepen.io/purnendu/full/YWXBBM/
http://codepen.io/purnendu/full/YWXBBM/
hi there can u test this weather pen for functionality. for me without doing nothing stopped returning weather data: https://codepen.io/sorinr/full/xOGdYz/
it is working fine foe me
for*
@sorinr
@purnendutiwari great. also the geolocation?
Hi can someone explain to me why my div with the id background-white is effecting my h1 and h2 elements. https://codepen.io/Ketchypie/pen/mEeQZr
yes
@sorinr
@purnendutiwari thank you for your feedback.
sorinr sends brownie points to @purnendutiwari :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @purnendutiwari |http://www.freecodecamp.com/purnendutiwari
@sorinr :smile:
Anyone here have recommendations for resources about using javascript or jquery for making api reqeusts? I know this is a big topic. I am working on the random quote generator and I seem to find so many different ways to write the code, not sure if there is a best practice or just preferences.
Basically, there are so many examples of the random quote generator out here, but I don't want to copy the code, I want to understand what each line that I'm writing actually does/means.
usually there is a documentation provided with each api
@kirbyedy yes, true. I know those are a good starting point. For example, I look at this API docs: http://forismatic.com/en/api/ and there appears to be so much left out. So, I'm wondering if there are any good resources out there for understanding the structure of making API requests.
@Ketchypie no need to put h1 and h2 in <div class="row">
@purnendutiwari think i was exceeding limit on my free http://maps.google.com/ account. solved that problem. created a new free account :)
@sorinr : great :smile:
@purnendutiwari can u please retest the app?
@Ketchypie try this
<body>
<div class="container-fluid">
<div class="jumbotron">
<div>
<div >
<h1 class="text-center">Mark Lawrence</h1>
<h2 class="text-center">NOVELIST & RESEARCH SCIENTIST</h2>
</div>
</div>
<div id="background-white">
<img id="mark-lawrence" class="center-block img-responsive " src="http://www.experimento42.com.br/experimento42/wp-content/uploads/2015/04/mark-lawrence-experimento42.jpg">
<h4 class="text-center text-muted">Mark Lawrence chilling<h4>
</div>
</div>
</div>
</body>
@purnendutiwari ohhh thanks thats fixed it
ketchypie sends brownie points to @purnendutiwari :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @purnendutiwari |http://www.freecodecamp.com/purnendutiwari
@purnendutiwari do you mind explaing why the col-md-12 class was making the white background effect it also?
how do i get the jQuery UI to work?
@silver537 load it in js settings part
@Ketchypie : as both you class="col-md-12" and h1 and h2 were falling in same row as they were both under class="row"
class="col-md-12" was not required
i think you'll never need to put "col-md-12"
as 12 max value you can put that mean it is occupying the whole row
this a page as a grid consisting of 12 columns and 'n' number of rows
@purnendutiwari ye I don't really know why I did it lol. I still don't understand why a "self contained" div the one with white bg would effect another "self contained" div the one with col-md-12 though.
i mean visualize a page as grid consisting of 12 columns and 'n' number of rows
both the div's you are mentioning were under single <div class="row">
so the div's were affecting each other
that is why i removed class="row"
ahh so if I had just removed the row div would it of fixed it?
yes
ahh thanks a lot that's helped understand it .
my pleasure ")
:smile:
NVM IT WAS A FREAKING TYPO! >.<
@purnendutiwari What's the best way to get a background for the img and h4 now that I've solved that problem the white background stretches to far to the right and left.
@Ketchypie : i didn't get you!!!
if are asking for background for image, why would you need
you can put border around image
sorry I didn't explain myself very well see in the example https://codepen.io/FreeCodeCamp/full/NNvBQW/ the img and comment has a white bg I'm trying to get something like that.
it's not a background
just search how you can put "images in bootstrap
if I tell you will know the solution nut you won't know other ways to put the image
to me it looks like the class "well" but when I do that it still reaches to the far right and left
search "image with caption in bootstrap"
oki
the text below image is called cation, it tell you different ways to have an i,age in bootstrap
@purnendutiwari ok if i use thumbnail I get the right look but I cant get it to fit correctly around the image and text.
don't work! why?
@media screen and (max-width: 720px) {
.b-main-menu__item {
line-height: 100px;
}
}
@IvanBot it depends how you test it
in browser Opera
@IvanBot and u wanna see how behaves on mobile?
@Ketchypie : do a bit more research :+1:
@jdtdesigns You replied this to JonSnow08: Sometimes we tend to overthink things. It's really very simple. You just set the href of the link to this 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' and concat the quote onto the end. Thanks, I found it really helpful. I don't know AJAX yet, so your code in your random quote generator is new to me. I almost figured out the Twitter intent. If you have time, can you please take a look at my code? I can't figure out why pressing the Tweet button makes another extra window with the code generator in addition to the Tweet window. http://codepen.io/chrissyalbert/pen/xOwGMz
chrissyalbert sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@chrissyalbert when you have this on the a-tag attribute target="_blank" it will open a new window/tab
<a href="#" target="_blank"></a> //<-------from that it will open a new tab/window when ever the link/button with link is click
this one will require you to access the href attribute of the a-tag in js by concatenatingyou can also do this by this method
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
@Ketchypie : I am stuck at the next challenge "build your portfolio", we will do it together
Sup peeps, sharing some awesome HTML, CSS and Javascript challenges: http://goo.gl/VuC3VX
hello i'm having a problem with ajax/an api. the datatype is set to json but the data i get back appears to be plaintext.
$.ajax({
url: "https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous",
type: "GET",
datatype: "JSON",
success: function(data) {
$("#text").html(data.quote);
$("#author").text(data);
console.log(data);
},
@Ketchypie I'm fighting with the build your portfolio as well
Anyone have any luck getting scrollspy to work correctly?
@Alecglas maybe to add format: json ?
@wearenotgroot Greg, thank you so much! That fixed it. Honestly, I first started with the Twitter share button and then realized that it just tweets the webpage it bounced from, not the quote. Then I read the Twitter intent documentation and put that in, but didn't take out the target _blank. I appreciate the additional Mozilla documentation!
chrissyalbert sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1110 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@kirbyedy just tried, didn't work. I've found other people using the same api with nearly identical code to mine and it works fine :worried:
link ?
@chrissyalbert :+1:
@Alecglas link your codepen?
@wearenotgroot
hey guys, I just finished my Random Quote Generator, anybody willing to help me get it more UI\UX comfortable? http://codepen.io/doko/details/OXyOPV/
@Alecglas it should be dataType with a big T
@wearenotgroot Wow... that fixed it, thanks
alecglas sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1111 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@Alecglas :smile:
I can get my nav links to switch to active class on click, but they won't update on scroll. It will remove the active class, but it won't assign it.
Ok, scratch that, it's not even removing active class now...
Hey is anyone working on the random quote generator?
me
Alright.
hey guys. i'm almost done with my tic tac toe game, but i have an issue with differentiating between win/lose and draw. if every block is filled and the game is won or lost by the lost block being filled, i get a "You win!/You lost! "message AND a "Draw!" message.
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
Hi guys, I don't understand why my alert doesn't appear... It seems to be a problem with my .getJSON, but I don't know what
@NatixDev i'm looking into it
@dhcodes Ty !
natixdev sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 978 | @dhcodes |http://www.freecodecamp.com/dhcodes
@NatixDev you still here?
i think i found the issue
How do you embed a codepen into the chat
Yep i'm here
@Cameron-Burkholder You only have to link it
No special ticks or anything? @NatixDev
@Cameron-Burkholder Nope :)
Ok. I've been working on random quote generator and my solution was to create an array with 10 quotes, and then every time the button is clicked to change the p element to that quote using a counter to reference inside the array.
http://codepen.io/CameronBurkholder/pen/OXyGNj
http://codepen.io/CameronBurkholder/pen/OXyGNj
But it doesn't work.
@NatixDev So your code is mostly set up right and will work with a few changes on firefox
the issue with chrome is that chrome won't allow html5 location over http
it requires https
now to get it working on firefox, you need to include your json call in your if statement
so you need to move your closing brackets to the bottom before you close document.ready
then it should work on firefox/safari
It will get the location on chrome over https as it is currently doing but because the openweather api is http, this is called "mixed content" and codepen won't allow it
you can see that error in your console on chrome now
alright it's official, I hate wiki API.. with a passion. Been working on this one on & off for a week now and I finally got good responses from the wiki api back to my endpoint (shown by firebug) but for some reason when I try to store or display or just log the JSON It errors out or gets misinterperted somehow client-side. I have tried using different request such as: ajax method, jQuery getJSON, jQuery GET, etc.. but nothing seems to be interpereting the JSON response correctly. Hope y'all can help me out:
http://codepen.io/devopsec/pen/grEVBv?editors=1011
http://codepen.io/devopsec/pen/grEVBv?editors=1011
@Cameron-Burkholder you here?
Ok, I suspected that was a chrome problem, now I'm sure ! Thank you dude ! @dhcodes
natixdev sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: natixdev already gave dhcodes points
@NatixDev well don't forget to fix your if statement too
@NatixDev if you want it to work on chrome you can use ip location
something like ip-api.com
Yeah I'm here @dhcodes
anyone here working on "Build a Personal Portfolio Webpage" challenge???
@NatixDev also for it to work currently on firefox after the changes, you need to remove the s in your url when you connect to codepen
http
I've done it @purnendutiwari
@Cameron-Burkholder so i think you're on the right track but you need to enable jquery on codepen.
click the settings button at the top
then javascript
then quick-add jQuery
@Cameron-Burkholder that will get "Hey girl" to show up
as for the function you wrote, I think instead of a counter, you should get a rounded random number between 0 and the quote array length and then use that to change your quote
how did you do scroll function? I copied JS code from some site tried to do it
@Cameron-Burkholder
i think I am not approach is wrong
Thanks. I didn't realize you had to link in JQuery. @dhcodes
:cookie: 979 | @dhcodes |http://www.freecodecamp.com/dhcodes
cameron-burkholder sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
@dhcodes Move like I did now ?
By scrolling feature do you mean that when you click the links it smooth scrolls down to the section @purnendutiwari
@Cameron-Burkholder you have to link any API's you use in your doc, basically anything that is not "vanilla" html, css, or javascript
?
@Cameron-Burkholder use the random number to get your quote too
@NatixDev what?
oh
let me go look
Oh ok. Thanks @devopsec @dhcodes
cameron-burkholder sends brownie points to @devopsec and @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: cameron-burkholder already gave dhcodes points
:cookie: 284 | @devopsec |http://www.freecodecamp.com/devopsec
@NatixDev yep works now
@Doomflake i'm not sure you can chain like this:
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
@devopsec i'll take a look at your wiki site
@dhcodes But only in firefox ?
@Cameron-Burkholder other than that and adding some responsive classes for you div containers (you should remember that one from bootstrap tutorial) looks great
i have a very quick question about my quote machine. im trying to disable my new quote button while my quote animation is animation is happening to prevent multiple clickings of the button with this code
$('a').click(function () {
if ($(':animated').length) {
return false;
}
});
does :animated apply to something that is using the fadeTo jquery method?
@NatixDev right
it won't work in chrome unless you use ip location
or does it have to be using .animate()?
I already put my divs in responsive containers like container, row, and col-sm-4 @devopsec . Are there other types that I should be using?
@Grizvok i don't think your if statement doesn't test anything
@Grizvok check out these below:
$("#btn-phone").click(function(e) {
e.preventDefault();
});
/ non-stick buttons :) /
$(".btn-default").mouseup(function(){
$(this).blur();
})
you could use the first with a trigger then re-enable (kind of round-about way) or use the second I created non-sticky buttons
@devopsec your api call isn't actually yielding data
let me get you a url
@dhcodes seems to work. found it on stackoverflow
@dhcodes I tried on firefox, but Alert doesn't pop :/
ok then
well according to the answers it works havent tried it myself
Geolocation works, but the alert with .getJSON doesn't @dhcodes
@dhcodes I can seem to get my endpoint receiving it, I tried all the requests I knew lol but my api call works when I throw it up in my browser:
do you think it could have something to do with my pen being http and trying to throw get requests at wiki api which is https protocol?
can you paste your url @NatixDev
@devopsec naw, i'm working on it. I've found a few errors so far but haven't been able to fix it
yeah still have a few odds ad ends in there to finish but I was scratching my head on the api response
guys, I have a problem.. somehow I screwed up my code and the div class=well is not fitting the whole box size as before
can anybody try to help me fix it please?
@NatixDev you need to remove the s from your codepen url
on firefox for it to work
remove the s from http
hey guys. i'm almost done with my tic tac toe game, but i have an issue with differentiating between win/lose and draw. if every block is filled and the game is won or lost by the lost block being filled, i get a "You win!/You lost! "message AND a "Draw!" message.
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
since when I implemented bootstrap col-md-x functionality everything got messed up in my code
but I'm sure every div is closed properly I just don't get why that "well" is acting weird
@devopsec well i got it to work if you enter the same thing twice...
lol
@Doko85 paste your codepen
it's a little above my messages
@chrissyalbert You're using window.open() which will open a new window. It's actually good to do that on codepen, because you can't load links to other sites in the same tab as codepen or it will through an error. An easier way to do it would just be to add target="_blank" to your link ;)
@dhcodes that's wiki api for ya.. lol maybe the server doesn't handle responses automatically and I need to send it post request? this is why you should never use php on your servers.. hahaha
@devopsec no it's an issue with the function running before searchURL is defined
hmmm what about this has an unexpected identifier?
if $(".quote-content").is(":animated") {
return false
}
with a semiconol
semicolon*
lol
@dhcodes I had to change a few button IDs because the quote button and the new social ones I added after the twitter one had the same ID resulting in the quote generator not working at all.. but the container problem still exist
@dhcodes I think your right it shouldn't be sending as an async request but looks like it is by what firebug is showing
lol got it working
did something like this
if ($quotecontent.is(":animated")) {
return false;
}
prevents mashing of the button
@dhcodes It works, ty !
natixdev sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: natixdev already gave dhcodes points
@dhcodes I tried adding a nested conditional before the request and right before the function and no change..
@devopsec what's the issue again if you don't mind repeating
@korn3l @Belax8 Thanks :)
cyb3rsalih sends brownie points to @korn3l and @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @korn3l |http://www.freecodecamp.com/korn3l
:cookie: 396 | @belax8 |http://www.freecodecamp.com/belax8
@jdtdesigns I am sending a get request to wiki api and receiving what seems to be misinterpereted data client-side.. I can paste the request in the browser and I get a JSON file like expected, but something is going wrong with the success function or the response to my endpoint: http://codepen.io/devopsec/pen/grEVBv?editors=1011
@devopsec still trying
@dhcodes I've been trying several methods to get scroll spy to work. I think I need to blow out all the scripting and start from scratch. I've been trying to get it to work for at least a well
don't need to encode URI
it was emptying the query
also, your url was not correct in some way or another
I've never seen an if in a json call param, so not sure about it. It was the first thing i saw in the console though ('Unexpected if').
@jdtdesigns yeah I was trying to debug the logical error by nesting the function in a conditional, but that seems right, only thing I will have to do then is replace spaces and incompatible URI char's before sending it up right? I thought that was what the encode URI method was doing but I guess it was changing the data type as well
lol when the example project is broken...
doesn't show my city, the temp is definitely off and no background picture
@Doomflake check out my scrollspy here: https://codepen.io/devopsec/pen/yOjbRO
@devopsec You can just send the url with your input value concatenated on and you're fine. Wikipedia does the escaping and encoding for you
I have absolutely no idea how to use the weather API to access weather information. Everything I see on the site uses commands when you already know the city, but I am not sure how to plug in the city that is dependent on the user's location.
@Cameron-Burkholder there's a lesson for that if i remember correctly
From what I remember the lesson was mostly copy and paste the correct code, but I'll check it out.
@Cameron-Burkholder Get Geolocation data
@JonSnow08
@jdtdesigns did you get it working
it takes a few tweaks to get working @Doomflake & @jdtdesigns Oh I didn't know that, thanks for the tip! Will wiki handle special char's like: ?!@$& I believe some of those would mess with the api call if they were sent to the url var, due to being reserved char's for URI
devopsec sends brownie points to @doomflake and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:cookie: 132 | @doomflake |http://www.freecodecamp.com/doomflake
@Cameron-Burkholder yeah but it should get you an idea
Alright. Thanks @JonSnow08
cameron-burkholder sends brownie points to @jonsnow08 :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @jonsnow08 |http://www.freecodecamp.com/jonsnow08
@Cameron-Burkholder sorry wish I could be of more help but im literally just starting the same project
Thats ok @JonSnow08
Hey I figured out how to store the Latitude and Longitude in variables, if you need it @JonSnow08
@devopsec finally got it
sigh
@Cameron-Burkholder sure man how?
@devopsec
@JonSnow08
$("document").ready(main);
var long;
var latt;
function main() {
//This gets the users location and stores it in already defined globals
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
long = position.coords.longitude;
latt = position.coords.latitude;
});
}
}
For me it popped up asking for location access, so I think it should work. @JonSnow08
@dhcodes @devopsec You guys do realize that codepen loads js from the bottom which is standard practice these days. You don't need a .ready() call. I would set up the code functionally though so it's readable and easily understood later on. ;)
<p data-height="265" data-theme-id="0" data-slug-hash="beVJXO" data-default-tab="html,result" data-user="miciah1" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/miciah1/pen/beVJXO/">beVJXO</a> by Micah (<a href="http://codepen.io/miciah1">@miciah1</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
How do I share a copy of my pen code
?
@Cameron-Burkholder geolocation only works on https in chrome. If someone loads your pen in http or doesn't put anything in front (copepen.io/sldfk), it won't work. A good option is to do a check for chrome (window.chrome) and use an ip locator in that case, otherwise use geolocation.
@dhcodes @jdtdesigns thanks for all your help guys I like how y'all set up your functions as events to capture the var's at specific times in the script very cool. I am still a little unsure which api call params I will use cuz i hadn't used the generator before, looks pretty slick but i'll mess with it and try to get the data with loops or map method and I actually had no idea it read from bottom up lol I wish freecodecamp had more of the supplemental info and theory behind the code instead of applying it blindly :P
devopsec sends brownie points to @dhcodes and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 980 | @dhcodes |http://www.freecodecamp.com/dhcodes
:warning: devopsec already gave jdtdesigns points
How do I share my pen code to this chat?
@miciah123 copy/paste the link
@kirbyedy Thanks
miciah123 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1084 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@dhcodes i like it. but i would give to the class="round green" some padding. but if that was your intention from the begging just leave it that way. nice
@devopsec Not from the bottom up. It just puts your js file right above the closing body tag (</body>), which means the html will load then fire your js. Which is the same thing as document.ready. ;)
Can someone tell me why my picture won't match the page's size
I added the class "img-responsive" to my image element but it hasn't done anything
ressources javascript
@miciah123 yep. make it width:100%
hey, what was that command to find the JS ressources?
@sorinr What do you mean by that?
@miciah123 Are you trying to make the image a background?
No
I just want it to fit the width of the page
@jdtdesigns
@miciah123 add a class to your img like .full-width{
width: 100%;
}
width: 100%;
}
Is there a way to do it with bootstrap? @sorinr
@miciah123 You can't make it span the full width of the page if you want to maintain aspect ratio. Max-width keeps the ratio intact. If you take that off, it will stretch the image to fit the full width, but it will be ugly. ;)
What would you recommend to fix the HTTP issue with geo location? @jdtdesigns
@miciah123 with images don't think so
@jdtdesigns Thanks!
miciah123 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 450 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@sorinr Okay thanks
miciah123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @sorinr |http://www.freecodecamp.com/sorinr
@jdtdesigns Ahhh I understand what saying, I had to reformat some of my docs when I exported them to throw um on a server because that same reason :+1:
@Cameron-Burkholder go to https like this: https://codepen.io/sorinr/pen/xOGdYz
@Cameron-Burkholder Here is a way to do it. http://jsbin.com/firobo/edit?js,console
@all is here a experienced webdeveloper / designer that can give me some input on how to approach the first freelancer job?
@Andi-Lo Quite a lot of info to go into, but look up first freelance job on youtube and you'll get some great videos.
@sorinr so did you set up openweather on your own https server?
any body here done with random quote generator?
@Andi-Lo what is the job
@sorinr looks nice btw
@dhcodes yes i needed to do it because of cors.
I've got to do some redesign work for a customer (it is a photo-festival website) @dhcodes
@jdtdesigns Thanks for the hint, I just wanted some links to maybe articles or something where I get an idea of how you structure the process with the client. Like what should be discussed in the first meeting and so on.
:cookie: 451 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
andi-lo sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
using jade ... I cant get font awesome icons to appear.... :worried: :worried:
@Andi-Lo you can pm me. I'm not super experienced but i'd be happy to talk you through different approaches based on what they are wanting
@dhcodes if you need that php file let me know and i'll change it to also accept api keys as parameters not only lat and lon
@sorinr i used ip location, but your thought makes me wonder if FCC couldn't just build an api that accepts openweather api keys and then hosts the results of an https server to get around the chrome issue
@dhcodes I believe fcc is going https with their own version of codepen pretty soon
you will be able to save your projects and code on their site instead of using codepen or others
@jdtdesigns interesting...how'd you hear that?
probably wouldn't be insanely difficult
given all the open source options for editors
@dhcodes yep. we are always encountering cors problems on codepen
@Andi-Lo Just make sure you have everything they want written out and agreed upon and signed. Any revisions other than the agreed upon details will cost extra.
@dhcodes I have spoken with one of the fcc founders recently in regards to one of my projects. ;)
@jdtdesigns I'm more like interested in the question like: "how am I doing a good job with my client".
what should be discussed in the first meeting. Does and Don'ts and stuff like that
@jdtdesigns you can run already all of your projects over https://codepen.io
@Andi-Lo
1) get to know client/needs. Find out what's most important to him/her about his/her site. Look for red flags (wants to make all the design decisions, likely to ask for things not promised, etc.)
2) ask for access to code/backend.
3) say you'll take a look and send a follow-up email or call to ask more specific questions, perhaps using some other sites as evidences of design
1) get to know client/needs. Find out what's most important to him/her about his/her site. Look for red flags (wants to make all the design decisions, likely to ask for things not promised, etc.)
2) ask for access to code/backend.
3) say you'll take a look and send a follow-up email or call to ask more specific questions, perhaps using some other sites as evidences of design
@Andi-Lo You need to approach it like you have a product you're selling and the client is your customer buying your product. You need to know how to do what the client needs or you will sound unprofessional and disorganized. The basic principal is to 'sell' yourself and your product. Give examples of what you can do and make the customer confident in your abilities. Once they have agreed on using you, get EVERYTHING in writing down to the very small details. I say this from experience. It is extremely important. You can set up checkpoints that must be reached to show your client your organization skills and build a trust with them.
@sorinr yeah, but there are mixed content errors because many of teh apis are http
so you have to run http://codepen not https://codepen for them to work
@sorinr Also, cors errors which require returning jsonp or proxying
@dhcodes you are right. in my case i just improvised something to work
right but most don't have their own server/host
for now
@dhcodes yes yes. agree
@dhcodes so why wait for fcc to do something. lets put up an api for the need of all
Media query is working in Chrome but not in mobile browsers and Uc browser.How can i solve this problem?
@sorinr because i'm on "create a timestamp api service" on the backend challenges lol
so i'm a little novice at this point
@dhcodes some kind of moment.js ? :)
@sorinr i mean this: https://www.freecodecamp.com/challenges/timestamp-microservice
@dhcodes i've imagined what you r talking about. thats why i said about moment
yeah but i have to build it myself ;)
@dhcodes yes i know. i was just kidding about reinventing the wheel but this is how we learn working with different types of data
word. I think a lot about the same. Even to the point of : if something is already a free service, is it worth making a clone just to open source it?
probably worth it
@dhcodes we all thank to the free coders over there and we will join them soon
sorinr sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 981 | @dhcodes |http://www.freecodecamp.com/dhcodes
hey guys, Im working on the pomodoro clock project and im a little intimidated on where to start. so far i have it counting down from 10
i was hoping for some advice on how to break it down
hello
@gxrobb can you get it to count down from 10 and when it reaches 0 it restarts at 10?
http://codepen.io/gxrobb/pen/zBvoRE?editors=1011 this is as far as i am @Heyjp
I'm trying to set background image for page.
With t his code
body {
background-image: url ("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/tweed.png") ;
}
but it is not working
@gxrobb I'd start at trying to loop it so it goes from 0 to 10 and then on starting and stopping the interval.
@Heyjp thanks, ill try that
gxrobb sends brownie points to @heyjp :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @heyjp |http://www.freecodecamp.com/heyjp
Hey guys, not sure if is just me or the Wikipedia API documentation is confusing
@esayago I'm finding all of the API documentation confusing. Are there any simple explanations out there?
How do you do inline code in chat?
@KoniKodes true, I've been trying to find something easier to read but no luck...
''''
$("document").ready(function() {
$(".img").click(function() {
$(".caption").show();
});
});
'''
Praying that worked Anyone know what's wrong with this? I can't see anything wrong but it's not working?
$("document").ready(function() {
$(".img").click(function() {
$(".caption").show();
});
});
'''
Praying that worked Anyone know what's wrong with this? I can't see anything wrong but it's not working?
:bulb: to format code use backticks! ``` more info
@ocarno5 try the same with ```
$("document").ready(function() {
$(".img").click(function() {
$(".caption").show();
});
});
@esayago Please feel free to share if you do find it :-) I've stuck on this for awhile now.
@KoniKodes what challenge are you working on
Yeah I realised after I used the wrong ones haha :')
@esayago I'm on the weather app. I think I can finally get the weather to show up, now I'm searching for the icons.
ive been doing the same @KoniKodes codecademy has some api stuff. it helped me out with getJSON.
@KoniKodes you can get some inspiration over here: https://s.codepen.io/sorinr/debug/xOGdYz
@tadake Json is one tricky guy. I like codeacademy and udacity too. I'll check them out.
@sorinr Thank you sorinr - I love your work! I'm just not php savvy and so I'm trying the js way for now.,
konikodes sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @sorinr |http://www.freecodecamp.com/sorinr
@sorinr do you have a premium codepen account?
@esayago nope. why?
@sorinr https
@esayago what do you mean?
@esayago haha. thats why i've made my own php file to resolve cors problems
it helped me out alot on the weather project !!!! @KoniKodes
@tadake Thank you. I'll go take a look.
konikodes sends brownie points to @tadake :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @tadake |http://www.freecodecamp.com/tadake
@sorinr that's out of my scope of knowledge at the moment
=)
@KoniKodes what weather API are you using?
heres some good weather icons @KoniKodes if you need them https://erikflowers.github.io/weather-icons/
@esayago take your time. just code and enjoy it
@sorinr I love it, and hate it at the same time lol
@tadake yep i'm using them
http://codepen.io/caitlinsophia/pen/rLOPgG
When you click the image the caption should slide in, but it doesn't, any ideas?
When you click the image the caption should slide in, but it doesn't, any ideas?
@gxrobb - a couple other tips for your pomodoro clock project:
- do not keep separate values for minutes and seconds - it is much easier to just count down with seconds and set the display to the number of minutes and seconds when you output the value
- you should keep your time values in JavaScript variables, not in DOM locations - that is a general rule not to use the DOM (for example, your
<div>values) to store data, and have to read it from the DOM. Keep it in variables and access it that way - One thing to pay attention to is the way you start your interval timer - even though you aren't doing that, a common problem is that people don't have any way to prevent multiple timers from being started when a "start" button is used. It's just a good idea to keep that in mind.
I hope those help you!
@tadake man, that seems like adding a lot of variables.
@khaduch that makes a lot of sense, thank you
gxrobb sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1283 | @khaduch |http://www.freecodecamp.com/khaduch
@ocarno5 its not for me on chrome if that helps
Fixed it now, all is well
yeah lol @esayago
@ocarno5 add an onclick event to the img that will add an animation youwant to your caption
@tadake mine was plain and simple http://codepen.io/esayago/pen/gMbwjq
icons are not pretty at all but the api handles then very well
@ocarno5 yep. its working now but try changing the pointer when you hover the img so the user will know that something "can happen"
looks nice @esayago this is mine !
@sorinr I was using jQuery, I realised I had it linked to the wrong thing so instead of clicking the image you had to click the list :')
Any advice on what API to use for the quote machine? I can't make any work :/
@tadake nice!
@pae4557 google anything that you like and make it work... I'll show you mine
@ocarno5 great. now its working. don't forget to make a link to some external page
just wanted to confirm this is working outside of Illinois, can someone let me know when they click on the link if it's showing their location and temperature. https://codepen.io/larsuniverse/full/dXYePG/
Works for me @Oppenheimer1
@Oppenheimer1 same here, looking good
cool thx.
18.89 degrees celsius, it's very precise haha
@Oppenheimer1 not quite only because of geolocation, but its ok for the api you are using
cool, good to know.
@sorinr we don't know how to write our own php yet ;)
Hi everyone...I'm working on my portfolio page and I'm still a bit confused on how to determine if I want to use col-sm-/col-md-/col-lg-*....does anybody have any good tips or good reading on this? I read one thing mentioning to think about it in a way of when you want things to stack in relation to the screen size but it didnt necessarily have a description on how to determine the best time to use each..
@khaduch im having trouble converting the time from seconds into minutes and seconds. my start time is 25:15
@gxrobb - well, you take the number of seconds and divide by 60 to get the number of minutes. That will result in a fraction - but you can use the
Math.floor() function to get the whole number of minutes, and then the remainder function seconds % 60 to get the number of seconds left over. But it just makes it easier overall - you don't have to check both minutes and seconds to see if you're down to 0, and you don't have to get complicated about tracking the number of minutes and seconds and testing that each time.
@JLuboff start with -md for desktop display and you can add the rest later and see how it looks as you re-size your browser
@khaduch thanks, math isnt my strong suit, i was not sure how the % worked
gxrobb sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: gxrobb already gave khaduch points
@esayago Thanks, I'll take a look at the link and appreciate the advice
jluboff sends brownie points to @esayago :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @esayago |http://www.freecodecamp.com/esayago
@esayago that php was only to bypass the https vs http problems. u are free to use it but you can only pass lat and lon as parameters. if you wanna test first I would recommend to grab an json response use it as var mytestweather = grabed_json and play with it until you are happy with your design and functionality
@sorinr I'll try that, I want to revisit that challenge and make it better
How do I make my aboutme section more responsive
Can someone give me some feedback on my tribute page? https://codepen.io/joshuafaggion11/pen/zBYrZz
@sanchit13 what do u mean by more responsive?
@sorinr the aboutme section doesn't scale properly when i resize my browser
@joshfaggion11 nice and clean from my pov but you should work on the mobile part
@sorinr Thanks!
:cookie: 342 | @sorinr |http://www.freecodecamp.com/sorinr
@sanchit13 go to your css settings, click on quick-add and select bootstrap
joshfaggion11 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@sanchit13 your problem is the img
@sorinr yeah, how do I fix that exactly?
@joshfaggion11 Change the background colour, personal preference but I think the colour isn't very appealing and makes the text harder to read
@ocarno5 Okay!
@sanchit13 your .myPicture class has a top and left position. it's like fixing your image on the screen. this is what u want?
@sorinr I was trying to position it
@sorinr what's a better approach
@sanchit13 You'll also want to remove your fixed width settings from your CSS. If you set it to 900px wide, for example, it will still be 900px wide on a mobile device.
Let bootstrap handle the widths for you
@TylerMoeller Gotcha, thanks. I just don't the picture cover the text when I resize it is all
sanchit13 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 580 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@sanchit13 Yeah, remove the width setting from this and your picture won't cover up the about me text:
#aboutMe p{
position:relative;
left:10%;
color:#999999;
text-align: left;
width:900px;
}
In general, try to use bootstrap for positioning to keep it responsive. They have offset classes so you don't need to do
left: 10%for example. http://getbootstrap.com/css/#grid-offsetting
Oh gotcha, that makes a lot more sense @TylerMoeller . So rather than use absolute positioning, I can just move the grid?
@sanchit13 Yes - that's the best way to do it with bootstrap. Here are some good examples of different layouts with the grid: https://getbootstrap.com/examples/grid/
@sanchit13 what do you want to achieve? try explain. I cant have your vision on the design. its yours
@sorinr Nvm I figured it out, it's fine
Anyone know any good resources for bootstrap? I've always coded mobile sites from scratch and trying to learn it is getting to me
@TylerMoeller What do you think of the design/color-palette btw
hey guys. i'm almost done with my tic tac toe game, but i have an issue with differentiating between win/lose and draw. if every block is filled and the game is won or lost by the lost block being filled, i get a "You win!/You lost! "message AND a "Draw!" message.
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
@sanchit13 I like the dark colors! Unfortunately, I'm slightly color blind, so may not be the best person to ask lol
hehehe alrighty, thanks a lot for your help.
I rely on color pallete generators for my color schemes: http://www.colourlovers.com/
@sanchit13 ok. but your picture is still over the aboutme text
@sorinr I fixed it in the native platform I'm working on, didn't update the codepen hahaha
If you're trying to make a colour pallette try using https://color.adobe.com/create/color-wheel/
Can someone give me feedback on my first front end project
@miciah123 put the css from the style into the css tab, though it doesn't matter now search engines look badly on styling being in a html document instead of its own file
@ocarno5 Okay I just changed it
Also, if you put it all in a div with class container it will get rid of the white bar at the top @miciah123 But it's looking good for your first project! Keep it up
@miciah123 @ocarno5 yep. u can even get rid of the <style> tag its automatically added by codepen
@ocarno5 Ohhhhh.. Yeah I was wondering about that white bar. Thanks!
miciah123 sends brownie points to @ocarno5 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @ocarno5 |http://www.freecodecamp.com/ocarno5
Has anyone done the project where you get the local weather
@miciah123 also, change text-align to center in your center class as it's now at the left
@miciah123 Looks good! I would say a good next step would be to take a deeper look into css layout/box model/ positioning to help bring more structure to your page. Here's a god tutorial on it: http://learnlayout.com/
@RHCPsnow take a look here for inspiration: https://codepen.io/sorinr/pen/xOGdYz
@ocarno5 I added the "container" class to my over-arching div and it messed it up http://codepen.io/miciah1/pen/beVJXO
@miciah123 what do you mean messed it up? It looks the same from what I remember, to center the list change the text align from left to center
@ocarno5 Nvm I got it
@sorinr thanks for the link.
rhcpsnow sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @sorinr |http://www.freecodecamp.com/sorinr
@miciah123 ```.center{
width: 200px;
margin: auto;
display: block;
}
width: 200px;
margin: auto;
display: block;
}
Fml, I'm so bad at that, anyways, to centre the list change your .center to that^^
Can someone help me figure out where I'm going wrong with the Random quote machine? https://codepen.io/zarker24/pen/qNOVzB?editors=1010
The API call seems to not be working.
hey,can anyone look out to my personal portfolio challenge? the texts are getting beyond the parent element and i have tried multiple things but nothing seems working :worried: here is the link- https://codepen.io/srishti-learner/pen/VjLXML
@pae4557 Lower-case 'd' in 'Id':
document.getElementById("displayQuote").innerHTML = data.quote;
wow....
I spent two days trying to figure that out lol
@TylerMoeller Thanks so much!
pae4557 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 581 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@RHCPsnow welcome
@srishti-learner line 18 "container fluid" should be "container-fluid"
@pae4557 Press F12 when you run into problems like that. Your browser has built in development tools that will show you the error.
@srishti-learner give your #para{
padding-top: 10px;
} some padding
padding-top: 10px;
} some padding
thanks a lot @ocarno5 i didn't know how i missed it :smile: it worked!
srishti-learner sends brownie points to @ocarno5 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @ocarno5 |http://www.freecodecamp.com/ocarno5
what do i do with an api key
@ocarno5 can you please tell the same for the portfolio section? i am stuck on this from two days.
You can fix the portfolio to an extent by changing their container class to fluid container
container-fluid*
@ocarno5 i did that but didn't worked!
Save your changes and I'll have a look
okay :+1:
@srishti-learner line 42 container should be container-fluid too,
I'm not sure why they aren't moving into single column at a certain point because I'm pretty new to bootstrap sorry
@ocarno5 ya, i have tried to both the elements but that didn't worked either.
it's all fine..thanks
anyone else please
navigator.geolocation only works in secure sites?
Trying to use it in codepen and I need to use
https to get it to work, otherwise no go.
function create(arg) {
var createdArr = myData.query.search;
$(createdArr).each(function(index, value) {
$(this).fadeIn('1000', function() {
$('.wikiInfo').append('<a href="https://en.wikipedia.org/wiki/' + value.title + '"><div class="eachEntry">' + value.title + '<br>' + value.snippet + '</div></a>');
});
});
};fadeIn() fade in each iteration of the .wikiInfo??!!
@jorgemoya , yes.I think it's a new feature on google chrome
@jorgemoya You can just make a conditional that uses an ip locator for chrome and navigator for other browsers
if ( window.chrome ) will work
Ok cool, thanks
@waynebunch post your codepen and i'll have a look
Hello everyone. I've just finished my tic tac toe game. what do you think? thanks for any feedback!- http://codepen.io/sciencecoder/full/PNrjyM/
@sciencecoder it doesn't work for me?
I'ts because my model is'nt showing on the embed. It works on codepen.
Hello :)
What is the fastest way to make 2 100% height and 50% width columns layout??
I'm looking at it on the codepen site, the 9 black squares are there but nothing happens? Windows 7, Chrome - If that helps
@sciencecoder - looks good, working for me on Chrome, windows 7, at least so far.
In an unordered list, how do I specify the padding/margin between the various li elements? Trying to make a list of fontawesome icons.
@sanchit13 - you can add a CSS style rule for
li { padding: 10px; margin: 10px; } if the default padding and margin isn't suitable? IS that what you're after?
Thanks @khaduch and @ocarno5 .
sciencecoder sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1284 | @khaduch |http://www.freecodecamp.com/khaduch
http://codepen.io/waynebunch/pen/QEbaNJ @jdtdesigns thanks!
waynebunch sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@sciencecoder Great work! Only recommendation is to analyze your code in codepen. (Settings -> CSS/JS -> Analyze). Quite a few (minor) issues in the CSS and one suggestion in the JS.
@sciencecoder I apologise, it must be an add-on or something I have that is stopping it from working
Thanks @TylerMoeller .
sciencecoder sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 582 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Thanks @ocarno5 . But I think it will work if you go on codepen.
sciencecoder sends brownie points to @ocarno5 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @ocarno5 |http://www.freecodecamp.com/ocarno5
@sciencecoder https://imgur.com/0RWfeqN That's all I'm getting haha so it must be something wrong on my end
could someone help me out with my Quote Generator?
I can't get my twitter button to work for some reason...
@JSmurf my first thought would be you would need an onclick=tweetIt() to actually run the function
nevermind, I didn't see the jquery
How would i go about making a navigation bar that's transparent but dark?
so if there was a background image, it'd be a darker segment of it
background-color: rgba(0,0,0,0.5); fiddle with that last number to get the right transparency (alpha)
sweet, thanks!
@sanchit13 I have this on another project
.navbar {
background-color: rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7);
}
what does the box-shadow thing to?
@sanchit13 my navbar has a shadow to make it look above the rest
@esayago I'm using wunderground.
@tadake Thank you. I've just been looking at that :-)
konikodes sends brownie points to @tadake :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @tadake |http://www.freecodecamp.com/tadake
@mutantspore check yo pms
your welcome !!! @KoniKodes
I believe that bootstrap has a dark navbar already set up for the use...
something like nav navbar-inverse or something like that
hello
sorry, but I'm a new camper
i am having a small problem with handlebars template
can I ask my questions here, or is there somewhere else I should go?
sorry, but I'm a new camper
i am having a small problem with handlebars template
can I ask my questions here, or is there somewhere else I should go?
I'm not familiar with handlebars. What is your question, though. Someone in here may be able to help.
so i have this data.js where I put all my content
and test.js where I put my Javascript to display the content
and test.html to actually display the content
but then the content does not display at all
i'm thinking that the problem lies in how i refer to the js files
because if I put all the js script into the html file (instead of separating into 2 different js files), it works fine
here's the head tag
<head>
<script src="js/jquery.js"></script>
<script src="js/handlebars-v3.0.3.js"></script>
<script src="test.js"></script>
<script src="data.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/gallery.css" rel="stylesheet">
</head>
sorry for the long question
thanks @KoniKodes
vinhloc30796 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @konikodes |http://www.freecodecamp.com/konikodes
@vinhloc30796 are you linked to both js files? Is your test.js pulling your data.js? How are you calling the data to the html? You'll want to separate those files out. Do you have a codepen?
@KoniKodes in the html file, I did link to test.js and data.js
but then is it necessary that I link test.js with data.js? how can I do that?
but then is it necessary that I link test.js with data.js? how can I do that?
can someone check the tic-tac-toe, the ai is not super hard nor super easy
http://codepen.io/tuliodnw/pen/OXVYvL?editors=1000
if you found bugs please tell thanks
http://codepen.io/tuliodnw/pen/OXVYvL?editors=1000
if you found bugs please tell thanks
@KoniKodes and no, i don't have a codepen
looking it up right now
looking it up right now
Anyone done the 'Seek and Destroy' algorithm challenge
?
looks nice @tuliodnw I like how after you choose the board pops up!
@tadake thanks
tuliodnw sends brownie points to @tadake :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @tadake |http://www.freecodecamp.com/tadake
@Shwrndasink I vaguely remember it.
anyone knows a keyless weather API? I've been looking for one, but haven't found a decent one yet..
@m-oliv all the ones I found need keys
@m-oliv As far as I know, there isn't one. But most of the api keys are free.
but I found one that is free w/750 hits a day
aeris api i think it was
@StephenMansfield @KoniKodes I've been using a key from the recommended API (openweathermap), but I'm not keen on leaving my key out in the open..
@m-oliv You can hide in a variable, so it's not too obvious when you get your info.
Can someone tell me why my menu doesnt appear when you resize it and click the menu icon?
@StephenMansfield thanks for the tip, btw. I'm checking out aeris api
m-oliv sends brownie points to @stephenmansfield :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @stephenmansfield |http://www.freecodecamp.com/stephenmansfield
@KoniKodes that's what I'm doing. just to play it safe, I'm also using str.replace to ofuscate a little bit of the key
@m-oliv That's a good move. I hope you find the one you like best.
@KoniKodes ideally, I'd try to implement some crypto, but I think it might be overkill in this case... (all the crypto code would run to encrypt and decrypt the key and that would make user experience awful)
Hi! Can't put side by side .align-left2 and .align-right2 there is something i can't get why doesn't work https://s.codepen.io/DonFilip/debug/PzqBMJ Can u help?
@KoniKodes thanks for the suggestion, btw
m-oliv sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @konikodes |http://www.freecodecamp.com/konikodes
I didn't even link the bootstrap.js I'm an idiot :')
@ocarno5 :ok_hand:
@coymeetsworld I'm new to bootstrap okay? :')
I know, just kidding :). I tried looking didn't know what the problem was either
@m-oliv It's true that we need to consider the user experience too. But I think as long as we're just sharing on codepen and with the other campers, we should be fairly secure with our projects.
Yeah I'm making it in Brackets instead of codepen so I forgot to link loads in the pen anyway haha @coymeetsworld
I cant make this wiki api work
oh i see, yeah sometimes I forget to add jQuery in there and wonder why my code isn't working
what am I doing wrong
@KoniKodes thanks
vinhloc30796 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: vinhloc30796 already gave konikodes points
@esayago you are using a form.. that causes the page to reload on submit. You can stop that by adding
event.preventDefault() in your click handler $("#submit").on("click", function(event){
event.preventDefault();
var search = $("#search").val();
I found why doesn't work, didnt read well :)
@mutantspore you wizard, thanks a lot
esayago sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1726 | @mutantspore |http://www.freecodecamp.com/mutantspore
@mutantspore so if not a form what else could I use
well you can use it.. just have to stop the submit bit.. you could just change the <form> tag to a div and I think that would stop it too
@mutantspore got it
@esayago if you look at my fork of your pen again (refresh it) you’ll also see that i’ve cut back and altered your .ajax call (and url) . You had a callback in your url but in the case of .ajax you can remove that and use dataType jsonp to achieve the same thing. also you had success and .done. they are the same thing though success has been depreciated recently. and .done is preferred.
@mutantspore I saw that it looks much cleaner, I need to do more reading on AJAX
I will go with the change you made
@esayago yes I also just took teh stuff out of the url and put them in a data object.. very easy to read and work with
refresh again just in case
So i just found this and more and more im getting ideas for how to use javascript . http://getfirebug.com/dom
@mutantspore so let me see if I understand, what goes in data{ } follows after api.php (in the url) ?
i popped open firebug and found the DOM stuff.
@esayago yes .. it’s all in the .ajax docs .. you don’t have to get involved with & and ? and trying to concatenate it yourself
@mutantspore its easier to read like that thanks again
esayago sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: esayago already gave mutantspore points
@esayago you can also do a very similar thing with getJSON to clean it up too
@mutantspore getJSON did not work for me in the scenario that's why I went with AJAX
@esayago that’s ok.. I like .ajax
@mutantspore I like you website -
@esayago it does work though but you have a solution now.. just keep going :)
:)
@mutantspore I mean your http://2am.ninja/ site
yes I realized :) ty
looks awesome
well I'll get back to the code, thanks again
work in progress.. I’m thing about a skills section but I do’t like the progress lines and circle charts people use. they look good but I feel they are meaningless. so I’m just at pen/paper stage of thinking :)
I need some help with a JSON call
can I show someone my code pen?
@mutantspore Love your http://2am.ninja/ ! Where are the values in your object??
{
designer :
coder :
biologist :
astronomer :
educator :
}
Great site! I need to work on mine
looking for some front end help with a JSON OBJECT
@GregatGit @mutantspore can one of you help? I am trying to iterate the var listStreamers so the data populates automatically on my pen. However, when I used for (var i = 0; i < listChannels.length, i++), the console displays _link {object.... 20 times. Can either of you help me get the listChannels variable to display automatically on my pen? Here is the link, if you don't mind. https://codepen.io/millsdee42/pen/MewLzv?editors=1111
just linik the codepen
@millsdee74 did you delete the $(document).ready part of the function?
@bscyrpt it is automatically coded in the program so you don't have to keep typing it.
@millsdee74 for your url its be be like this for each person you want to pull data from
https://api.twitch.tv/kraken/streams/ESL_SC2 <- name of streamer then call api to get single object back
https://api.twitch.tv/kraken/streams/ESL_SC2 <- name of streamer then call api to get single object back
I think I really need to focus on design in order to make my pages look half way decent.research is in order.
@mutantspore Can I see that weather app you made and linked to on your page?
You obviously come from a design background.
@needsMoreCoffee for webdesign anyways spacing, alignment, typography and basic color theory are good places to start
@bscyrpt can you elaborate a little more?
@millsdee74 sure
then you add on endpoints found here https://github.com/justintv/twitch-api
so
or
url='https://api.twitch.tv/kraken/' is base url,then you add on endpoints found here https://github.com/justintv/twitch-api
so
url + 'stream/<yourstreamer>or
url + 'chat/<yourstreamer>/emoticons' etc... each returns object with data in it.
@bscyrpt when I entered, let's say, freecodecamp, the console now displays 8 results(which is what's needed) of what I described earlier. It doesn't populate on the pen itself.
yep web dev isn't all comp sci, a knowledge of aesthetics is essential too
Hey ya'll! Can anyone help me, Im stuck on the profile lookup challenge. Help me see what im not seeing at this point!
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
function lookUpProfile(firstName, prop){
// Only change code below this line
for (var i=0; i<contacts.length;i++){
for (var j=0; j<contacts[i].length;j++){
if (contacts[i][j].hasOwnProperty(firstName) ===true)
{if (contacts[i][j].hasOwnProperty(prop) ===true){
return contacts[firstName][prop];
}else return "No such property";
}else return "No such contact";
}//for loop j close
}//for loop i close
// Only change code above this line
}
// Change these values to test your function
lookUpProfile("Akira", "address");
@bscyrpt my computer console gave this error code as well. HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
Anybody have some guidance on how to update the data-text field to the random quote currently on screen (on the twitter API)?
you have to take the recieved data and put it into the html, instead of just logging to console. so the $(selector).html or $(selector).append etc... you prob. have a bad url then, still working on my end using your old codepen
tic-tac-toe is done, critics, advices and bugs findings are welcome
http://codepen.io/tuliodnw/pen/OXVYvL
http://codepen.io/tuliodnw/pen/OXVYvL
@tuliodnw works well, though my eyes are bleeding from the red :)>
@bscyrpt all my proyects always become shade of blue, so i wanted to change it
https://flatuicolors.com/ <--------------
Hello all- two questions on the wiki viewer challenge. 1. Does anyone know why there is weird whitespace within my results boxes? 2.Is there a good way to "clear" the html when someone enters a new query? At the moment it just gets added to the bottom under the html from a previous query. Thanks!http://codepen.io/lahowitt/pen/MeKWzG
@IJACOBS - profile lookup. First thing - you do not need a nested for loop - one for loop is sufficient. Your outer loop will iterate through the array of contacts, which are objects, and the body of the code in the forloop will access the objects one at a time to check for the property (which you are using .hasOwnProperty for, perhaps not correctly at this time.) So you can start there by removing that inner for and then see where you're at.
The first thing that you want to check for is a match between the firstName argument to the function, and the firstName property in the contact under examination. Each object has a firstName property, so that is a straightforward comparison, no need for .hasOwnProperty there.
@pae4557 When I was doing that challenge, I had to make sure that my current quote was stored as a global variable outside the click function. I needed to make sure it was declared at the beginning (var quote) and then filled later, and then I could call it later to twitter.
@lahowitt So create the variable in html, then reference it in the twitter buttons javascript?
@lahowitt you need to put your search input in a <form> so you can submit the form by hitting enter after typing instead of just hitting button. your .result has 20px padding on all sides along with 20px margin on all sides <-- where space is comming from
@pae4557 still create it in javascript, just make sure when it is declared it is a global variable (outside any functions) and then use the function to assign a value to the already-created variable (var quote;
$("#test2").on("click", function(){ quote="blah"})
)
$("#test2").on("click", function(){ quote="blah"})
)
oh okay I see
@lahowitt
Hey guys, im having trouble keeping my simon pieces in the layout I made when the browser size changes. how can i make it responsive?
http://codepen.io/NewtonXu/full/xOwpPZ/
http://codepen.io/NewtonXu/full/xOwpPZ/
Just doing a little customer research for a project me and another camper are trying to build. Question: Do you remember what # _ in the FCC Basic Javascript curriculum had you stomped?
@NewtonXu if you are trying to do layouts like that i recommend against using floats like you are doing as right floats act weird when you collapse page to far. if you want to change elements to do responsive you need to use `@media screen (min/max-width:768px){ } and change your css classes inside of those brackets
@bscyrpt thank you ill take a look
newtonxu sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @bscyrpt |http://www.freecodecamp.com/bscyrpt
@bscyrpt The margin edits fixed it. Thank you. However when I make my search input a form, it completely stops working.
lahowitt sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @bscyrpt |http://www.freecodecamp.com/bscyrpt
@Cameron-Burkholder thank you for the geolocation code
jonsnow08 sends brownie points to @cameron-burkholder :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @cameron-burkholder |http://www.freecodecamp.com/cameron-burkholder
@bscyrpt so would i be defining different floats for each of the screen-size classes?
@NewtonXu A good way to do it is use absolutes with percentages for the buttons and media queries for smaller sizes to reduce the game size.http://codepen.io/jdtadlock/pen/EyVbOM
@NewtonXu
@media screen (min-width:768px){
.cssclass {width:somesize;}
}
}
@media screen (min-width:1024px){
.cssclass{width:differentsize;}
}
}
etc... so this anything between 768-1023 would be the first, the others would be the second and so one
i haven't used media queries, but you can see how easy it would be
thanks guys
@bscyrpt Any recommendations on how to make the <form> work?
@lahowitt after you put both input and button in form, button has to type="submit" so it can submit the form
@bscyrpt that doesn't seem to do anything but make the page refresh. Do I need to change the $.click javascript?