These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Jul 2016
Nick Irvine
@irvin3
Jul 01 2016 00:27
anyone else have a problem loading the FCC twitch page?
like on twitch.tv?
nvm
Elbert Cortez
@trip16661
Jul 01 2016 00:57
I made a few fixed, would be nice if you guys check it out (it doesn't work in chrome because of cross-origin :\ )
(so it's http only)
http://codepen.io/Trip1666/full/beEvRp/
Moaad
@moaad22
Jul 01 2016 01:11
I'm on the challenge of building a tribute page with Codepen
how am i supposed to build the codepen.io app withouth looking at the example project code?
need some guidance
Tyler
@Thiggs
Jul 01 2016 01:14

Hey all, I'm losing my mind with the last part of the Quote Machine challenge. I've got it generating new quotes and creating a tweet with the first quote generated, but when I update the quote , it won't update the tweet text. Any hints in the right direction?

http://codepen.io/thiggs/pen/BjMdyz?editors=1011

@moaad22 If you look here https://codepen.io/FreeCodeCamp/full/NNvBQW/ you are supposed to try to re-create a site like that in code pen. Not sure if that's what you were asking.
I think what they don't want you to do is open it up in editor view and copy the code.
Shawn Williams
@Shawn-Williams
Jul 01 2016 01:27
@Thiggs What I did was dynamically change the twitter link with a the data.quotelink value. I had to use encodeURIComponent as well. Here is my link code...
function update(response) {
   $('#quote-text').html("<i class='fa fa-quote-left'></i> " + response.quoteText + " <i class='fa fa-quote-right'></i>");
   $('#author').html("~ " + response.quoteAuthor);
   $('.fb').html('<a href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(response.quoteLink) + '" target="_blank"><i class="fa fa-facebook-square"></i></a>');
   $('.twitter').html('<a href="https://twitter.com/home?status=' + encodeURIComponent(response.quoteLink) + '" target="_blank"><i class="fa fa-twitter-square"></i></a>')
Moaad
@moaad22
Jul 01 2016 01:41
@Thiggs I am currently just doing it all from the back of my head i have manage to include the <h1> element under it the <img src with url> and the caption under the img i've also created a UL and listed all the years putting the years in bold and text normal Like such <li><b>1930</b> - he did this and that </li>
thou what i'm trying to access is the library where i can actually transfer the codes
where can i access the library?
Tyler
@Thiggs
Jul 01 2016 01:54
@moaad22 I'm not sure really what you mean, but I'm very much a beginner also. For example, I've been spending the last 20 mins trying to figure out what @Shawn-Williams 's code means :-) The projects are a lot different from the other thing because you are building it from scratch. I think it helps to go back to previous lessons to pull information that you might have overlooked. When you get frustrated, do what you can and go on to some of the other lessons. I've found that sometimes when learning something, something in the past starts to click. And sometimes I think you don't have all of the tools for some of the projects until later. I'm not sure at all what you mean by library though.
I relied a lot on the bootstrap lessons for the tribute page though
Also, thanks @Shawn-Williams! I'll figure out what quoteLink means eventually :-)
CamperBot
@camperbot
Jul 01 2016 01:58
thiggs sends brownie points to @shawn-williams :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @shawn-williams |http://www.freecodecamp.com/shawn-williams
Moaad
@moaad22
Jul 01 2016 02:01
@Thiggs :+1:
awesome bro
thanks
its challenging
Tyler
@Thiggs
Jul 01 2016 02:01
If you want me to take a look at your codepen, let me know. Like I said I'm a beginner, but maybe we could help each other.
Moaad
@moaad22
Jul 01 2016 02:02
i guess we could for sure!
how do i send it you?
@Thiggs
Tyler
@Thiggs
Jul 01 2016 02:03
@moaad22 you just post the link here. http://codepen.io/thiggs/pen/BjMdyz?editors=1011
Moaad
@moaad22
Jul 01 2016 02:03
alright
thanks
as you're gonna see it looks messed up lol
Tyler
@Thiggs
Jul 01 2016 02:08
You've actually got all the elements in there!
Moaad
@moaad22
Jul 01 2016 02:09
The one thing i'm trying to get done and i've forgotten how is linking
hyperlink to Wikipedia between text
i forgot how to do that
@Thiggs
Moaad
@moaad22
Jul 01 2016 02:11
@Thiggs Thank you so much!
CamperBot
@camperbot
Jul 01 2016 02:11
moaad22 sends brownie points to @thiggs :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @thiggs |http://www.freecodecamp.com/thiggs
Tyler
@Thiggs
Jul 01 2016 02:13

The only other thing I see is centering the text at the top. That should just be a google away. Feel free to customize it and honor anyone you want. I picked Euler.

https://codepen.io/thiggs/pen/VeRwbd

Moaad
@moaad22
Jul 01 2016 02:15
Awesome!
thats pretty cool
Tyler
@Thiggs
Jul 01 2016 02:16
It's pretty basic, but I'm proud of it. I've seen some people post some pretty amazing tribute pages to the freecodecamp facebook and reddit pages.
I'm more of a "let's get it done and come back later to make it pretty" sort of guy, for better or worse.
Manny
@Alloffices
Jul 01 2016 02:47
Hey guys, just updated my side project - a mobile phone with pure css: http://codepen.io/aystarz52/pen/VjpBob?editors=1100 any code refactor recommends?
Tushar Mehta
@tushar-mehta
Jul 01 2016 02:57
@Alloffices I am a complete beginner so I dont know much about HTML/CSS. I was looking into CSS and was wondering why there are two style rules named body and .body ?
I did not see any class with name body.
Dan Logajan
@hiltydiggs
Jul 01 2016 03:01
@tushar-mehta in CSS body would style the body element and .body would style elements with the class body. If none exist, it's an unused style rule or a mistake.
Tushar Mehta
@tushar-mehta
Jul 01 2016 03:05
@hiltydiggs great! I thought so it will be unused. But just wanted to make sure if unused style gives any error or not. thanks :)
CamperBot
@camperbot
Jul 01 2016 03:05
:cookie: 565 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
tushar-mehta sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
Cross Richards
@crossrichards
Jul 01 2016 03:05
find portfolio
CamperBot
@camperbot
Jul 01 2016 03:05
find portfolio
nothing found
Manny
@Alloffices
Jul 01 2016 03:19
@tushar-mehta class .body is on line:18
@tushar-mehta body in the CSS is targeting the <body></body>
John Alcher
@alchermd
Jul 01 2016 03:31
Hey mates. Can anyone check if the sample weather app is working for you? It doesn't show anything on my screen. http://codepen.io/FreeCodeCamp/full/bELRjV
Dan Logajan
@hiltydiggs
Jul 01 2016 03:31
@alchermd works perfect for me!
John Alcher
@alchermd
Jul 01 2016 03:32
@hiltydiggs any idea what's wrong? I have my chrome settings "allow geographic location" enabled.
Tushar Mehta
@tushar-mehta
Jul 01 2016 03:35
@alchermd its working fine for me too. I am using chrome 51.0.2704.106
Dan Logajan
@hiltydiggs
Jul 01 2016 03:37
@alchermd it's weird. I have the same problem with my own weather project when using Chrome, but it works fine in Firefox. But your weather project works just fine in Chrome for me.
John Alcher
@alchermd
Jul 01 2016 03:37
@hiltydiggs It's the sample project, not mine :D Are you running a linux distro?
Dan Logajan
@hiltydiggs
Jul 01 2016 03:39
@alchermd oh. No Win10 Chrome52.0...
John Alcher
@alchermd
Jul 01 2016 03:39
@hiltydiggs ahh it's not an OS issue then.
Dan Logajan
@hiltydiggs
Jul 01 2016 03:40
@alchermd do you have Firefox installed? My project and the sample project both work in FF.
John Alcher
@alchermd
Jul 01 2016 03:42
@hiltydiggs I tried it in Firefox, it works on full screen but not on codepen preview. Is that the same case for you?
tbc13315
@tbc13315
Jul 01 2016 03:44
Yeah I'm not sure of the specifics but I read somewhere about how you had to use https with google and couldn't use http because they were trying to protect location privacy
John Alcher
@alchermd
Jul 01 2016 03:45
@tbc13315 lmao my current location is like a dozen cities away from my real physical location. Should this be a concern for me? Haha
Dan Logajan
@hiltydiggs
Jul 01 2016 03:46
@alchermd preview and fullscreen work
John Alcher
@alchermd
Jul 01 2016 03:46
@hiltydiggs by preview I mean the small window here in chat? that works as well?
hmmmmm
tbc13315
@tbc13315
Jul 01 2016 03:47
haha when I did that zipline challenge sometimes the navigator went a little wonkers and gave me erroneous locations as well. Never did figure out why
Dan Logajan
@hiltydiggs
Jul 01 2016 03:47
@alchermd it might be using ip location api
greg
@wearenotgroot
Jul 01 2016 03:47
@alchermd it's normal ip-api is not accurate.
John Alcher
@alchermd
Jul 01 2016 03:48
@hiltydiggs @tbc13315 My first thought was I was getting duped by my ISP :D
greg
@wearenotgroot
Jul 01 2016 03:48
@alchermd depending on the network traffic your ip can be bounce further from your current location
tbc13315
@tbc13315
Jul 01 2016 03:50
Does anybody have any advice for the wikipedia viewer challenge? I getting very confused messing around with the wikimedia api sandbox.
Dan Logajan
@hiltydiggs
Jul 01 2016 03:50
@alchermd check out geolocation api
John Alcher
@alchermd
Jul 01 2016 03:51
@wearenotgroot thats a relief to know. But the thing is, you know when you're logging in / out your facebook acount on windows into linux, facebook sends an email where you're account is logged in somewhere? I was getting locations way far from me. Is that the same concept here?
greg
@wearenotgroot
Jul 01 2016 03:51
@alchermd i believe so
John Alcher
@alchermd
Jul 01 2016 03:52
@hiltydiggs thx for the resource. bookmarked for late.r
CamperBot
@camperbot
Jul 01 2016 03:52
alchermd sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 567 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
John Alcher
@alchermd
Jul 01 2016 03:53
@wearenotgroot wait a minute, if that's the case, why does the weather app on my smartphone give me an accurate location?
@wearenotgroot oh nvm, it asks for a specific location upon installing. haha
Dan Logajan
@hiltydiggs
Jul 01 2016 03:54
@tbc13315 https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' +searchTerm+ '&format=json&callback=?
@alchermd np
tbc13315
@tbc13315
Jul 01 2016 03:55
Hey @hiltydiggs. Thank you! I'm also trying to understand it, and I am kind of lost.
CamperBot
@camperbot
Jul 01 2016 03:55
tbc13315 sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 568 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
tbc13315
@tbc13315
Jul 01 2016 03:57
How did you come to that? The action=query part I get as well as the format=json. But how did you figure out to use the rest of the terms?
Dan
@dcgoings
Jul 01 2016 04:03
"Minimum of two years college with at least ten years involvement in systems programming on IBM mainframes"
seriously? SERIOUSLY?
why even bother with the college requirement at that point
buncha clowns
Young Jeong
@youngjeong46
Jul 01 2016 04:18
i got a question for local weather project
i have this code that takes in the weather id and creates a url for the icon that im using
var weatherIcon = function(status) {
var icon = "http://openweathermap.org/img/w/";
console.log(status);
if (status < 300) {
return icon + "11d.png";
} else if (300 <= status < 500 || 515 < status < 535) {
return icon + "09d.png";
} else if (500 <= status < 505) {
return icon + "10d.png";
} else if (status === 511 || 599 < status < 700) {
return icon + "13d.png";
} else if (700 < status < 800) {
return icon + "50d.png";
} else if (status === 800) {
return icon + "01d.png";
} else {
return icon + "03d.png";
}
}
i checked that the status is 801 for my location, but when it goes into the if loop, i return 09d, not 03d
any idea as to why it seems to be going to the wrong condition?
Dan Logajan
@hiltydiggs
Jul 01 2016 04:24
@youngjeong46 you have 3 comparisons in some
Coy Sanders
@coymeetsworld
Jul 01 2016 04:41
you can't do a range like that @youngjeong46 300 <= status < 500
actually, don't think you even need this
the json object should return the icon name in it, shouldn't it?
you don't need to do a mapping like this
Nathaniel Nasarow
@Torgian
Jul 01 2016 04:47
yo
Ken Nawrocki
@nawrockp
Jul 01 2016 05:23
This is ok:
Sorin Ruse
@sorinr
Jul 01 2016 05:25
@youngjeong46 maybe a look here: http://openweathermap.org/weather-conditions will help you. I am using a weather web font and made some mappings between the icons. Here is my pen for inspiration: https://codepen.io/sorinr/pen/xOGdYz
David Copley
@davidcopley
Jul 01 2016 05:42
Hey people, I working on the wikipedia viewer app. I was wondering whether there is a way to animate the search results' display without changing my current approach to the problem. e.g. the results slide in, change opacity etc...
http://codepen.io/CopoC/pen/xOdXzJ
David Copley
@davidcopley
Jul 01 2016 05:49
@sorinr thanks this looks very neat
CamperBot
@camperbot
Jul 01 2016 05:49
dfordavid sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 01 2016 05:51
@dfordavid just add class="animated youranimationtype" to whichever element you wanna animate
Tim
@t1flanagan
Jul 01 2016 06:09
So I have no idea what I'm doing with this Weather App. I've signed up to open weather map, gotten a key and have a link for the API. Then I put the geolocation code in and beyond that I'm lost. Any guidance?
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:10
javascript MDN and jQuery. learn about JSON calls and such. You'll have to append certain data, such as longitude / latitude or city name, etc. You'll also run into API problems with JSON.
first, I'll save you some trouble. Don't use open weather map. You'll run into problems with location data with Chrome
Sorin Ruse
@sorinr
Jul 01 2016 06:11
@t1flanagan can you post your pen link here?
Tim
@t1flanagan
Jul 01 2016 06:11
Oh okay, what's the best alt?
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:11
api.forecast.io
thanks @Torgian
CamperBot
@camperbot
Jul 01 2016 06:11
t1flanagan sends brownie points to @torgian :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @torgian |http://www.freecodecamp.com/torgian
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:11
get a key, make sure it's served over secure server, as well as your codepen
and add this to the end of your API call
?callback=?
Took me a couple days to figure that out, the freecodecamp tutorial doesn't really cover this at all
Tim
@t1flanagan
Jul 01 2016 06:12
Yeah, that's what I'm fingind
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:12
beyond that, you learned everything else you'll need to do this
It's taking me a longer time because I want to add animations and shit
because I'm somewhat artsy I guess
Tim
@t1flanagan
Jul 01 2016 06:13
Yeah, I'm just worried about getting it functioning right now. I have some design ideas I'd like to implement but hose will come second
Sorin Ruse
@sorinr
Jul 01 2016 06:14
@t1flanagan you have this $("#data").html("latitude: " + lat + "<br>longitude: " + long); in your js part but no html tag with the id="data" to display it on
Tim
@t1flanagan
Jul 01 2016 06:16
right sorry, that was basically leftover from an earlier attempt
Dan
@dcgoings
Jul 01 2016 06:42
hey @Torgian
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:42
hey whats up man
Dan
@dcgoings
Jul 01 2016 06:43
i wanted to ask you last night about hover effects
:D
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:43
yeah what's the question?
Dan
@dcgoings
Jul 01 2016 06:43
so im not sure how you did yours, but i was using figure and figcaption
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:44
oh, on the webpages I made for those companies?
Dan
@dcgoings
Jul 01 2016 06:44
i wanted the background to be .8 opacity but the caption to be 1. i couldnt get it to work for the life of me
yeah
brb overwatch match >_>
ill swap back and forth, but yeah
Nathaniel Nasarow
@Torgian
Jul 01 2016 06:46
I've never actually messed with opacities yet for hover effects. Mostly animations or transitions
Best guess, you'll have to apply :hover to your element, then have a "translate" to change opacity to 8 for the background-color
if you cant do it in one element, you can surround your text element with another element.
<div class="box">
    <div class="text">
        <p>text</p>
</div
</div>
something like that
and have the class "box" have your background color and your "text" contain the text
but I think you might be able to change both background color and text opacity in one element, would just take a bit of research into translate and transition effects in CSS
and I'm sure javascript can help too
Sorin Ruse
@sorinr
Jul 01 2016 07:00
@dcgoings something like background-color: rgba(0,0,0,.5)? of course you can change the values to suit ur needs
Nathaniel Nasarow
@Torgian
Jul 01 2016 07:01
@dcgoings yeah @sorinr that would be the best way to go about it
WangTao
@sagomm
Jul 01 2016 07:11

Hi,everybody;

I want to use a event proxy to control input tag,

if i click li then the input checked ,if i click again then input not checked

so i got this code:
'''

<li>
<input type='checkbox'/>
some word here~

<li>

li.addEventlister('click',function (e) {
input.checked = !input.checked;
},ture);
'''
If i click li tag , it run good ,But if i click the input tag , that tag is not be checked ,
I don't know how to do , can anybody help me out ?

CamperBot
@camperbot
Jul 01 2016 07:11
:bulb: to format code use backticks! ``` more info
Rajdeep Roy
@RajdeepRoy
Jul 01 2016 07:20
I was doing the challenge on reverse the string and I did some kind of mistake and the browser fails whenever I open the challenge.What should I do?Please help
UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:22
@sagomm ture or true?
help autorun
CamperBot
@camperbot
Jul 01 2016 07:22

:point_right: freecodecamp disable code autorun [wiki]

Disable Code Auto Run on Free Code Camp

By default, the Free Code Camp site automatically loads and runs your last recorded solution. If you have accidentally created an infinite loop or other irrecoverable error or simply don't trust the code, you can disable code auto-run by putting the following in your URL: run=disabled

:pencil: read more about freecodecamp disable code autorun on the FCC Wiki

UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:22
@RajdeepRoy ^^^
Rajdeep Roy
@RajdeepRoy
Jul 01 2016 07:27
@UtkarshShukla7 That takes me back to map but I still can't open the challenge
UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:29
@RajdeepRoy copy and paste your link here
buiphuking
@buiphuking
Jul 01 2016 07:30
codepen disable code autorun
UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:32
@RajdeepRoy you can also open that challenge in different browser and write new code there
and this isn't the link of your solution
@buiphuking any problem with autorun in codepen?
Settings>Behaviour>auto update preview disable it
buiphuking
@buiphuking
Jul 01 2016 07:34
@UtkarshShukla7
when i code pomodoro , i code something wrong, and my project freeze, i can't access, so i delete my account and make a new one
UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:35
@buiphuking no you can always delete the pen if you want
buiphuking
@buiphuking
Jul 01 2016 07:35
i've just asked , if i'll get this situation
UtkarshShukla7
@UtkarshShukla7
Jul 01 2016 07:36
@buiphuking no it must be js error
and you won't get this situation
buiphuking
@buiphuking
Jul 01 2016 07:36
i think soo
buiphuking
@buiphuking
Jul 01 2016 07:42
anyone good at audio html 5, i wanna ask something ?
deepakSpatil
@deepakSpatil
Jul 01 2016 07:46
Screenshot from 2016-07-01 13:12:19.png
I want to convert UL LI structure into a nested accordian by only using jqlite, css , javascript, Angular JS.
but no JQUERY.
buiphuking
@buiphuking
Jul 01 2016 07:52
what happen if i put 3 addEventListener in one id???????????/
seekslider.addEventListener("mousedown", function(event){
        seeking=true;
        seek(event);
      });

      seekslider.addEventListener("mousemove", function(event){
        seek(event);
      });

      seekslider.addEventListener("mouseup", function(){
        seeking=false;
      });
Maxim Zalata
@zlatin
Jul 01 2016 07:52
@deepakSpatil try nesting up like in this questionhttp://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list
@buiphuking it's OK. Proper functions will be called on each event
Gaurav Tolani
@Gauravtolani
Jul 01 2016 07:58
can anyone help me with a bug in the portfolio project..
?
:worried:
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:00
hmm
Gaurav Tolani
@Gauravtolani
Jul 01 2016 08:00
i am trying to change the color of text in my navbar..but it isnt working
can you check..where am i making the mistake
i am trying to change the font color to white...but it isnt changing...
jcob95
@jcob95
Jul 01 2016 08:01
Hi, I'm trying to produce a random image as well as a random quote during a click event. At the moment I have an array with the url of the different pictures, How would one go about creating the image tag and updating it?
Sorin Ruse
@sorinr
Jul 01 2016 08:04
@Gauravtolani what do u want to achieve?
Gaurav Tolani
@Gauravtolani
Jul 01 2016 08:06
just trying to change the color of font in the list
which is appearing in navbar
DJ
@qualitymanifest
Jul 01 2016 08:06
@jcob95 once you get the randomizing sorted out you can use http://api.jquery.com/attr/ to change the src of the image
jcob95
@jcob95
Jul 01 2016 08:08
@qualitymanifest , I have the random generating mechanism but it's using the url to display the iamge
so something like this? $("#img").src("url")
Maxim Zalata
@zlatin
Jul 01 2016 08:10

@Gauravtolani .navbar-default a{

color: white;color: white !important;
}

not elegant, but it works ๐Ÿ˜€ @Gauravtolani
DJ
@qualitymanifest
Jul 01 2016 08:11
@jcob95 more like $(imageElementSelector).attr("src", put your random image variable here)
Dan
@dcgoings
Jul 01 2016 08:11
@Torgian @sorinr spent 20 minutes trying to get rgba to work but couldnt figure out why. finally realized i was changing the wrong element's background color. rip.
@Torgian @sorinr thanks guys.
CamperBot
@camperbot
Jul 01 2016 08:11
dcgoings sends brownie points to @torgian and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 282 | @torgian |http://www.freecodecamp.com/torgian
Sorin Ruse
@sorinr
Jul 01 2016 08:12
@dcgoings lol. it happens
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:12
@dcgoings sigh. Cmon bra. Stop making those stupid mistakes. :p
Dan
@dcgoings
Jul 01 2016 08:12
bad cop good cop, eh?
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:12
Oh hey, btw, debug backwards
Dan
@dcgoings
Jul 01 2016 08:12
:p
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:12
it'll help
Dan
@dcgoings
Jul 01 2016 08:13
what do you mean?
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:13
start from the bottom of your problem, not the top
or your code rather
and say stuff out loud
Dan
@dcgoings
Jul 01 2016 08:13
ah yeah
i should probably do that.
Sorin Ruse
@sorinr
Jul 01 2016 08:13
@dcgoings go on. make a lot of mistakes and u'l learn a lot more :)
buiphuking
@buiphuking
Jul 01 2016 08:13
i create audio html5 , i want to use console.log to show JUST duration attr, how i do this ?
Dan
@dcgoings
Jul 01 2016 08:13
lmao
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:14
indeed
jcob95
@jcob95
Jul 01 2016 08:16
@qualitymanifest I'm not sure what I should replace imageElementSelector by. Something like this? $('#img').attr("src",picArr[randNum]));
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:17
@dcgoings how's overwatch?
jcob95
@jcob95
Jul 01 2016 08:17
got it, I didn't id tag it. Thanks for the help!
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:17
my friend works at Blizzard, says it's pretty good.
Dan
@dcgoings
Jul 01 2016 08:17
i tilted, so im back to coding ;)
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:17
tilted? XD
Dan
@dcgoings
Jul 01 2016 08:18
yep! sometimes i just need to call it a night and stop playing lol. plus it's 4am, so that plays a little part of it.
Sorin Ruse
@sorinr
Jul 01 2016 08:19
@dcgoings @Torgian g night guys. have a rest :)
Dan
@dcgoings
Jul 01 2016 08:19
same to you, night
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:19
ah i see
It's 4pm here! XD
Sorin Ruse
@sorinr
Jul 01 2016 08:19
is 11:19 am here :)
Nathaniel Nasarow
@Torgian
Jul 01 2016 08:20
mmm yummy arrays
himanshu
@himanshuraja
Jul 01 2016 08:25
hello world
CamperBot
@camperbot
Jul 01 2016 08:25

welcome to FreeCodeCamp @himanshuraja!

himanshu
@himanshuraja
Jul 01 2016 08:26
i have done my front-end projects when i will get my cerificate?
Sorin Ruse
@sorinr
Jul 01 2016 09:00
@himanshuraja already ?
@himanshuraja your pens are just fake. :)
Krishna Sai Gullapalli
@Krish2704
Jul 01 2016 09:07
about @himanshuraja
CamperBot
@camperbot
Jul 01 2016 09:07
:cookie: 337 | @himanshuraja |http://www.freecodecamp.com/himanshuraja
DVladimirov
@dvladimirov
Jul 01 2016 09:09
Hello guys. I'm in a bit of a pickle with one of the functionalities in the challenge "Build a random quote generator". I've managed to get the random quote up and running but been stuck on getting the twitter button to get the text from my generated quote. Here is a link to my code-pen. If any could just point me in the right direction i will gladly continue to try :) - http://codepen.io/BlackAng3l/pen/EymPOW
*any one
Sorin Ruse
@sorinr
Jul 01 2016 09:12
@dvladimirov here is how i did it. use it just for inspiration: http://codepen.io/sorinr/pen/VaJKrw
DVladimirov
@dvladimirov
Jul 01 2016 09:13
well in yours it doesn't prefill the tweet with the current quote
or at least it is not happening for me
i think that is what is supposed to happen
or am i wrong ?
John Alcher
@alchermd
Jul 01 2016 09:17
@dvladimirov I did it by getting the whole quote, split each word into an array, then join it back into a string with %20 in each word. After that I combined it with
https://twitter.com/intent/tweet?text=
and used that as the link for the twitter button.
my work for reference:
http://codepen.io/chermandu/pen/LZWXdG
View it in full screen, codepen preview is wonky in gitter chat.
DVladimirov
@dvladimirov
Jul 01 2016 09:18
ye :) figured it out now :D
John Alcher
@alchermd
Jul 01 2016 09:18
I'm 100% sure there is an easier and "more correct" way to do this, but hey it works :D
DVladimirov
@dvladimirov
Jul 01 2016 09:19
ye but u still managed to do it
so cheers :)
thanks for the idea i will keep working on it :)
John Alcher
@alchermd
Jul 01 2016 09:19
@dvladimirov indeed. and I have no plan on repeating it now that I have a better grasp on json/api :D goodluck!
DVladimirov
@dvladimirov
Jul 01 2016 09:21
@sorinr sorry for telling you that yours didn't work :) Didn't know the gitter chat had problems with codepen :)
John Alcher
@alchermd
Jul 01 2016 09:25

Hey mates. Why does this

var url = "www.website.com/api";
$.getJSON(url, function(JSON){
    $("h1").append(JSON.name); //assuming JSON has a name property
});

doesn't work? What I mean is, I could append url into an html element to get "website.com/api" , but when passed to getJSON as its argument, it doesn't work?

relevant codepen: http://codepen.io/chermandu/pen/RRVjbN
line 10 on javascript.
Ken Nawrocki
@nawrockp
Jul 01 2016 09:40
@alchermd first of all add// before the url
Then try changing your codepen url to https
John Alcher
@alchermd
Jul 01 2016 09:41
@nawrockp what do you mean by "adding // before the url" ?
Ken Nawrocki
@nawrockp
Jul 01 2016 09:43
Webste.com.api will not work
John Alcher
@alchermd
Jul 01 2016 09:43
Just to clear up what my problem is:
url = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=" + id;
      $(".loc").append(url); // This works

      $.getJSON(url, function(weather) { // this doesn't
        $(".loc").empty().append(weather.name);
      });
@nawrockp
Ken Nawrocki
@nawrockp
Jul 01 2016 09:44
Needs to be http://webste.com or https://
Try both. Usuallyy problems with those apis are related to https
If you open chrome developer tools you might see an error telling you what the problem is
The console in codepen does not show errors
avonemme
@avonemme
Jul 01 2016 09:50
Hey everyone, not sure if this question is better suited for backend but: I have no idea how to write the Tic Tac Toe AI
Sorin Ruse
@sorinr
Jul 01 2016 09:52
@dvladimirov sorry. was away. for me it prefills the tweet with the current quote
DVladimirov
@dvladimirov
Jul 01 2016 09:52
ye it does :)
just not in the chat :)
and i didn't open it in full page the first time :)
Sorin Ruse
@sorinr
Jul 01 2016 09:53
@dvladimirov ok
Greg Duncan
@GregatGit
Jul 01 2016 09:54
@avonemme this is the right place
John Alcher
@alchermd
Jul 01 2016 09:57

I think I need to back up a little. Can anyone guide me on how to make a getJSON request?

var url = "api.website.com";
$.getJSON(url, function(JSON) {
    $("h1").append(JSON.id) // appends the value of [id] from JSON into h1
});

Is the code above correct?

Greg Duncan
@GregatGit
Jul 01 2016 09:57
@avonemme you could use a little more jQuery
document.getElementById('SV7').innerHTML = "";
$('#SV7').html("");
@alchermd no - it should have http:// or https:// at the start
Sorin Ruse
@sorinr
Jul 01 2016 09:59
@alchermd just $.get( url, function( data ) {console.log(data)}); will go just fine but if u wanna have full control on the request and response i would use $.ajax
avonemme
@avonemme
Jul 01 2016 10:00
@GregatGit thanks
CamperBot
@camperbot
Jul 01 2016 10:00
avonemme sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 642 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 01 2016 10:07
@avonemme instead of looking everytime - you could have an array that starts with " " - and everytime you move it checks that one square and puts and X or O if its " "
Sorin Ruse
@sorinr
Jul 01 2016 10:09
@avonemme as @GregatGit said i would go for a matrix (array) and will check that the sum of col, rows or diagonal is eather 0 or 3. not sure if it is the best solution. supposing 0 for X and 1 for O. or whatever. u got the idea
John Alcher
@alchermd
Jul 01 2016 10:17

Now I'm sure I'm really lost :worried: Here's the relevant code:

url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=" + id;
 /* the value of url can be 
copy-pasted into the browser 
and it'll show a JSON object*/
      $(".loc").append(url); //successfully appends the url to .loc 

      $.getJSON(url, function(weather) {
        $(".loc").append(weather.name); /*this should append weather[name] to .loc, but it doesn't */
      });

Here's the pen:
https://codepen.io/chermandu/pen/RRVjbN

What am I doing wrong?
Sorin Ruse
@sorinr
Jul 01 2016 10:20
@alchermd what is the reason for doing this? $(".loc").append(url); what you want to achive?
John Alcher
@alchermd
Jul 01 2016 10:21
@sorinr debugging that the url is properly assigned
Robert Uivarosi
@URobert
Jul 01 2016 10:22
VM415 jquery-2.2.4.min.js:4 Mixed Content: The page at 'https://codepen.io/chermandu/pen/RRVjbN?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=47.05434150000001&lon=21.9321832&APPID=d59d2aa357c3cd8a0cc48a9b48d95b6e'. This request has been blocked; the content must be served over HTTPS.
Sorin Ruse
@sorinr
Jul 01 2016 10:22
@alchermd then why not just a console.log(lat,long) ?
Robert Uivarosi
@URobert
Jul 01 2016 10:22
@alchermd that is your problm
Greg Duncan
@GregatGit
Jul 01 2016 10:26
@alchermd your problem is you have to use https to use navigator.geolocation.getCurrentPosition but to use the open weather your page has to be http (not https) so the solution is to make your page http and to get your lat and long use http://ip-api.com/json
John Alcher
@alchermd
Jul 01 2016 10:27

@sorinr I think I'm not following correctly. I just want to make sure that I have a working url that returns a JSON. Whatever gets appended to $(".loc") is a working url.

Now what's confusing me is why does the var url appends a working url to $(".loc") , but it fails when used as the link for getJSON.

@GregatGit Oh, that's neat. I'll work on it and I'll get back to you. THanks!
CamperBot
@camperbot
Jul 01 2016 10:29
alchermd sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 643 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 01 2016 10:32
@alchermd :+1: - Just make sure that the openweather getJSON call is inside the http://ip-api.com/json getJSON call - or it won't work
Robert Uivarosi
@URobert
Jul 01 2016 10:37
@GregatGit for some reason this stopped working
var url = 'http://ip-api.com/json/?callback=?';
$.getJSON(url, function(json) {
currentLat=json.lat;
currentLong=json.lon;
getCurrentWeatherParameters();
});
although in my own pen in still works
Greg Duncan
@GregatGit
Jul 01 2016 10:39
@URobert who's pen stopped working?
John Alcher
@alchermd
Jul 01 2016 10:41
@GregatGit hey. I still can't make it work. Where do you think I went wrong?
$.getJSON("http://ip-api.com/json", function(weather1) {
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + weather1.lat +"&lon=" + weather1.lon + "&APPID=" +id;
    $(".loc").append(url);
    $.getJSON(url, function(weather2) {
      $(".loc").append(weather2.name);
    })
  });
Robert Uivarosi
@URobert
Jul 01 2016 10:41
@GregatGit my still works but when I wanted to add the code to @alchermd ' s pen I got
'''
CamperBot
@camperbot
Jul 01 2016 10:41
:bulb: to format code use backticks! ``` more info
Robert Uivarosi
@URobert
Jul 01 2016 10:41
'https://codepen.io/chermandu/pen/RRVjbN?editors=0010' was loaded over HTTPS, but requested an insecure script 'http://ip-api.com/json/?callback=jQuery22407765145453611957_1467369665261&_=1467369665262'. This request has been blocked; the content must be served over HTTPS.
which is fairly odd
Greg Duncan
@GregatGit
Jul 01 2016 10:42
@URobert in chrome https wont load http api's
take the https off the front and see if it works
Robert Uivarosi
@URobert
Jul 01 2016 10:44
ah
i can't
unless I make a fork
Greg Duncan
@GregatGit
Jul 01 2016 10:45
@alchermd is your pen http or https?
Robert Uivarosi
@URobert
Jul 01 2016 10:45
@GregatGit was htttps
John Alcher
@alchermd
Jul 01 2016 10:45
@GregatGit I'm currently working on an http pen
Robert Uivarosi
@URobert
Jul 01 2016 10:45
@GregatGit thanks
CamperBot
@camperbot
Jul 01 2016 10:45
urobert sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 644 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 01 2016 10:45
@URobert just remove it from the url for now
Krishna Sai Gullapalli
@Krish2704
Jul 01 2016 10:46
@URobert since your api is http and your site address is https, your api won't work
Greg Duncan
@GregatGit
Jul 01 2016 10:46
@alchermd can you post you pen
John Alcher
@alchermd
Jul 01 2016 10:46
Robert Uivarosi
@URobert
Jul 01 2016 10:47
@GregatGit @Krish2704 i was testing @alchermd first link which was on https
@alchermd here is a bit of code that you might find useful :
var city,country,temp,wind,windKm,wIcon,wIconDisplay,wDescription;
var appId = "01ffc2b8227e5302ffa7f8555ba7738e";
var units = "metric" , unitDisplay = "โ„ƒ" , counter = 1; var temp;
var wUnit = " Km/h";
var weatherApiUrl;
var currentLat, currentLong;

//GET GeoLocation
var url = 'http://ip-api.com/json/?callback=?';
  $.getJSON(url, function(json) {
    currentLat=json.lat;
    currentLong=json.lon;
    getCurrentWeatherParameters();
  });

  function getCurrentWeatherParameters() {
  weatherApiUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' +    currentLong  + "&units=" + units + "&APPID=" + appId;

    $.getJSON(weatherApiUrl, function(json) {
    //console.log(json.weather[0].description);
    city = json.name; // get City
    country = json.sys.country; // get Country
    temp = json.main.temp;  //get Temperature
    wind = json.wind.speed; // get Wind Speed
    wIcon = json.weather[0].icon; //get Weather ICON
    wDescription = json.weather[0].description; //Weather description
    wDescription = wDescription.charAt(0).toUpperCase() + wDescription.slice(1);  

    console.log(json);
       });
    }
Greg Duncan
@GregatGit
Jul 01 2016 10:48
@alchermd it working - you are just using your json incorrectly
John Alcher
@alchermd
Jul 01 2016 10:48
@GregatGit enlighten me, please.
Greg Duncan
@GregatGit
Jul 01 2016 10:49
@alchermd put this in the first line of your weather getJSON
console.log(weather2);
Sorin Ruse
@sorinr
Jul 01 2016 10:50
@GregatGit going for ip like using:http://ip-api.com didn't works for me because i'm having a dynamic ip. so the reported results for geolocation are wrong. to overcome this and the cors problems I've used this solution: https://codepen.io/sorinr/pen/xOGdYz thats working only on https. i had to put up on my server a weather.php with the right headers to work
John Alcher
@alchermd
Jul 01 2016 10:52
@GregatGit you want me to check what the value of the returned JSON is? I'm getting an "ERR_BLOCKED_BY_CLIENT" on the console
Greg Duncan
@GregatGit
Jul 01 2016 10:53
@alchermd $(".loc").text(weather2.name);
John Alcher
@alchermd
Jul 01 2016 10:55
@GregatGit That should change the text right? It doesn't work for me. I'm thinking of restarting from scratch...
Greg Duncan
@GregatGit
Jul 01 2016 10:56
@alchermd I just loaded you page and it worked
close your page then open it up again
Jun Kiat Tan
@junkiattan
Jul 01 2016 10:57

Guys I am running into abit of trouble with my navigation bar using Bootstrap. I have no idea why It doesnt drop down when I pressed "Explore".

https://codepen.io/junkiattan/pen/jrBNMB(http://)

Would be glad if anyone could help me. I have been stuck wondering for 2 days haha

Greg Duncan
@GregatGit
Jul 01 2016 10:59
@alchermd It even told me my local city
John Alcher
@alchermd
Jul 01 2016 10:59
@GregatGit lmao I just lost all my code I accidentally saved it white trying out from scratch.
Sorin Ruse
@sorinr
Jul 01 2016 10:59
@junkiattan @junkiattan add bootstrap.js to you pen :)
John Alcher
@alchermd
Jul 01 2016 11:00

@GregatGit I think its better this way so I could really understand how everything works. For example

$.getJSON("http://ip-api.com/json", function(item) {
    $(".loc").text(item.city);
  });

Why the heck is the code above not working haha

Greg Duncan
@GregatGit
Jul 01 2016 11:00
@alchermd
var lon;
var lat;
var url;
var id = "d59d2aa357c3cd8a0cc48a9b48d95b6e";
$(document).ready(function() {
  $.getJSON("http://ip-api.com/json", function(weather1) {
    console.log(weather1);
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + weather1.lat +"&lon=" + weather1.lon + "&APPID=" +id;
    $(".loc").append(url);
    $.getJSON(url, function(weather2) {
      console.log(weather2);
      $(".loc").append(weather2.name);
      $(".loc").text(weather2.name)
    })
  });
});
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:01
@sorinr I thought I did that under settings>>CSS>Quick Add? Why is it still not working?
Greg Duncan
@GregatGit
Jul 01 2016 11:01
@junkiattan but make sure you add jQuery.js then bootstrap.js (in that order)
John Alcher
@alchermd
Jul 01 2016 11:03

@GregatGit oh there is my code thanks! I'd comment it out for now. I want to make sure I understand everything. Again, would you mind explaining why this

$(document).ready(function() {
  $.getJSON("http://ip-api.com/json", function(item) {
    $(".loc").text(item.city);
  });
});

is not working?

CamperBot
@camperbot
Jul 01 2016 11:03
alchermd sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
Greg Duncan
@GregatGit
Jul 01 2016 11:03
@alchermd don't forget control z to get stuff back
CamperBot
@camperbot
Jul 01 2016 11:03
:warning: alchermd already gave gregatgit points
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:03
@GregatGit why is there a need to place them in such an order? Pardon me as i just started this haha
Greg Duncan
@GregatGit
Jul 01 2016 11:04
@junkiattan not sure but it is important
John Alcher
@alchermd
Jul 01 2016 11:04
@junkiattan I think its because some of bootstraps functionality depends on jquery, so jquery needs to be loaded first.
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:06
@GregatGit @alchermd @sorinr Thanx guys!! The suggestion fixed the problem;)
CamperBot
@camperbot
Jul 01 2016 11:06
junkiattan sends brownie points to @gregatgit and @alchermd and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @alchermd |http://www.freecodecamp.com/alchermd
:cookie: 413 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 645 | @gregatgit |http://www.freecodecamp.com/gregatgit
Ken Haduch
@khaduch
Jul 01 2016 11:20
@junkiattan it is good to get familiar with the developers console in the browser, it shows an error for this case if you load bootstrap.js and not jquery. Or load them in the wrong order. It is a useful tool!
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:22
@khaduch Thanx alot! I just saw the console for the first time haha;)
CamperBot
@camperbot
Jul 01 2016 11:22
junkiattan sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1387 | @khaduch |http://www.freecodecamp.com/khaduch
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:25
Guys I have another problem. I am trying very hard to make my site responsive. And generally most of it is. But one problem is in the profile image (the one with my face) and the welcome message directly below it. I have no way of making it responsive together with the image at the back.
After trying for very very long, I used CSS margin and absolute positioning to manually place it there. But i believe that there is definitely a better solution that makes it responsive. Can anyone teach me? I searched for hours and hours and implemented many online methods but dun seem to know what I am doing.
Sorin Ruse
@sorinr
Jul 01 2016 11:32
@junkiattan when you give your class .profile-image-text{position: absolute ... it will stay that way no matter on mobile or desk. you can use @media query on how you want that class behave on smaller screens
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:42
@sorinr Is that the only method? Cause from what I understand media query wont give full responsiveness because if say i shrink the webpage from large to just before the max-width for medium size. So im guessing what will happen is that it will still come out of proportion before going back to centre upon passing the max-width mark for the next smallest size
Sorin Ruse
@sorinr
Jul 01 2016 11:45
@junkiattan with @media (max-width:lets say 600px;){ here you can modify what the f..king classes or id or properties u want. and only that. the rest remains the same as on desktop} hope u get what i mean
Jun Kiat Tan
@junkiattan
Jul 01 2016 11:46
@sorinr Ill give it a try thanx!
CamperBot
@camperbot
Jul 01 2016 11:46
junkiattan sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: junkiattan already gave sorinr points
Sorin Ruse
@sorinr
Jul 01 2016 11:53
@junkiattan welcome. dig into it. @media its just a very powerful tool. you can change your entire site by using it wisely. for ex you can move your top nav from top to bottom on mobile, change font sizes to be more appropiate for reading on mobile, ecc
sahil chahar
@sahil1995
Jul 01 2016 12:48
hi i have just finished my tribute page http://codepen.io/sahil95/pen/MeJMXM
any sugesstion for improvement are appriciated
Alexander Schuneman
@AxSch
Jul 01 2016 12:51
Can anyone help me sort out my navbar on the portfolio page please? For some reason its not collapsing
Been racking my brain about it for the past couple of days
This message was deleted
Alexander Schuneman
@AxSch
Jul 01 2016 13:03
^^Sorted it nevermind, was a silly typo
ilntrmrs
@ilntrmrs
Jul 01 2016 13:03
Does anyone else have issues implementing google fonts or typekit into their pen? I've tried pasting the codes everywhere, even literally just copied what other people did and fro templates, but it's just not working.
Its annoying
Farhad
@fhdhsni
Jul 01 2016 13:22
@sahil1995 I can't view in full page. Verify your email address.
quenonoscaguen
@quenonoscaguen
Jul 01 2016 13:38
Hey guys could anyone help me with the first front end project "tribute"?
I dont get how to apply css commands in codepen.
If I write them in the <style--.. in the HTML box it doest interpret them.
And if I write them in the CSS box, when I class call them in the html box neither.
greg
@wearenotgroot
Jul 01 2016 13:38
@quenonoscaguen link your pen
greg
@wearenotgroot
Jul 01 2016 13:45
@quenonoscaguen remember when adding classes on elements you dont have to add the . selector
@quenonoscaguen you also have some syntax error
@quenonoscaguen some of the element attribute you added, you forgot to enclosed them with ""
@quenonoscaguen example line 4 in the html part, img-tag src
@quenonoscaguen another one is buttons dont have href attribute, what you can do is use an anchor-tag and apply the button class
<a href="your link" class="btn btn-block...">some text...</a>
LordYamanouchi
@LordYamanouchi
Jul 01 2016 13:50
I feel like I don't know what I'm doing
avonemme
@avonemme
Jul 01 2016 13:51
@LordYamanouchi what are you doing
quenonoscaguen
@quenonoscaguen
Jul 01 2016 13:52
@wearenotgroot Thank you so much!! I'll look right in to in
CamperBot
@camperbot
Jul 01 2016 13:52
quenonoscaguen sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1193 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
LordYamanouchi
@LordYamanouchi
Jul 01 2016 13:52
I want to make a good looking tribute-page. Keep restarting cause I can't get everything together.
greg
@wearenotgroot
Jul 01 2016 13:53
@quenonoscaguen just remove the style section in the html and put thos stylings in the css section of code pen. (check for missing semicolons)
quenonoscaguen
@quenonoscaguen
Jul 01 2016 13:56
thanks @wearenotgroot
CamperBot
@camperbot
Jul 01 2016 13:56
quenonoscaguen sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: quenonoscaguen already gave wearenotgroot points
Xavier Sumba
@cuent
Jul 01 2016 14:58
Hello I am working on Simon's game. I'd like to do a circle and divide in a quarter. How could I do that with CSS?
Something like this:
http://www.growingtreetoys.com/img/cache/product/1897-2__.jpg
Jenish
@jenishm
Jul 01 2016 15:00
Hi friends, anyone using codepen here?
Davide
@DavOnGit
Jul 01 2016 15:01
@jenishm almost all....
ricevind
@ricevind
Jul 01 2016 15:01
hello,
i have snippet : http://codepen.io/Ricevind/pen/yJbEko
The link supposed to slide and show another two links. It works when I try it locally on chrome yet it doesn't work on codepen.io.
any one knows wyh ?
Jenish
@jenishm
Jul 01 2016 15:01
@DavOnGit great!
Davide
@DavOnGit
Jul 01 2016 15:03
@cuent i've made it with 4 div elements with floats........(and border radius )
Xavier Sumba
@cuent
Jul 01 2016 15:03
@ricevind You forgot to add Bootstrap.js
Jenish
@jenishm
Jul 01 2016 15:03
@DavOnGit I need a help..when I export the zipfile from codepen..how would I make it work on my desktop
Xavier Sumba
@cuent
Jul 01 2016 15:04
@ricevind I added and It works. Go to Settings-> and add this: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
ricevind
@ricevind
Jul 01 2016 15:05
@cuent Thank You so much... i thought it will add bootstrap.js automatically... wasted 1 hr on it :(
CamperBot
@camperbot
Jul 01 2016 15:05
ricevind sends brownie points to @cuent :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @cuent |http://www.freecodecamp.com/cuent
Davide
@DavOnGit
Jul 01 2016 15:05
use atom or sublime text3 and then u make separate files for html css javascript (then just copy/paste) @jenishm
Xavier Sumba
@cuent
Jul 01 2016 15:05
@ricevind hahaha Should happen!! Now you never going to have the same problem haha
Farhad
@fhdhsni
Jul 01 2016 15:06
For the Show the "Local Weather project" should I use navigator.geolocation (which is more accurate but it asks for user's permission) or should I find user's location based on their IP address (which needs its own AJAX request and it's not that accurate)? Which one is better? Or maybe there is another option?
Xavier Sumba
@cuent
Jul 01 2016 15:07

@DavOnGit
I have this:

HTML

    <div class="container">
        <div class="green">
          green
        </div>
        <div class="red">
          red
        </div>
        <div class="center">
          center
        </div>
        <div class="yellow">
          yellow
        </div>
        <div class="blue">
          blue
        </div>
    </div>

CSS

.container{
  border: solid 1px black;
  width: 10%;
  height: 50%;
  border-radius: 100%;
}

.green{
  background-color: green;
  border-radius: 50%;
}

.red{
  background-color: red;
}

.center{
  background-color: black;
}

.yellow{
  background-color: yellow;
}

.blue{
  background-color: blue;
}
Jenish
@jenishm
Jul 01 2016 15:08
@DavOnGit i did that using notepad ++ .. however js file is not working
Xavier Sumba
@cuent
Jul 01 2016 15:09
@fhdhsni You should have user's permission to get the localisation otherwise I think is too invasive... hahaha I recommend you to use: navigator.geolocation
Farhad
@fhdhsni
Jul 01 2016 15:11
@cuent :)
Davide
@DavOnGit
Jul 01 2016 15:11
@cuent have u properly linked your css and js file in html <head>?
Jenish
@jenishm
Jul 01 2016 15:12
@DavOnGit yes I did
Xavier Sumba
@cuent
Jul 01 2016 15:13
@DavOnGit Yep just my css. I have done anything in JS yet.
Davide
@DavOnGit
Jul 01 2016 15:19
@cuent mmm strange, the index and css files are in the same folder?
basically u have 2 files, for ex. index.html and style.css
into index.html <head> u have to link to the style.css.
Xavier Sumba
@cuent
Jul 01 2016 15:22

@DavOnGit Yes, my CSS is linked with my HTML. This is my <head>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Simon Game</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="mystyle.css">
  </head>

I am struggling to have the form of a circle with a quarter for each color.

@jenishm show me your head pls....
Rajee Jones
@rajeejones
Jul 01 2016 15:43
Hey guys, I could use some help centering a ul with bootstrap. Each time I do it, it doesn't display correctly
blob
<!-- Fixed Container for Responsive Web -->
<div class="container">
    <!-- Jumbotron for grey background -->
    <div class="jumbotron">
        <!-- Title -->
        <h1 class="text-center" id="page-title">Dr. Norman Borlaug</h1>
        <h3 class="text-center" id="page-subtitle"><em>The man who saved a billion lives</em></h3>
        <!-- Thumbnail for image and caption -->
        <div class="thumbnail" id="main-thumbnail">
            <img id="tribute-image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"></img>
            <div class="caption" id="tribute-caption">
                <p class="text-center" id="photo-description">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
            </div>
        </div>
        <!-- Timeline -->
        <h3 class="text-center" id="timeline-header">Here's a time line of Dr. Borlaug's life:</h3>
        <div id="timeline-div">
            <ul id="timeline-list">
                <li id="year-1914"><strong>1914</strong> - Born in Cresco, Iowa</li>
                <li id="year-1933"><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
                <li id="year-1935"><strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
                <li id="year-1937"><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
                <li id="year-1938"><strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
                <li id="year-1941"><strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
                <li id="year-1942"><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
                <li id="year-1944"><strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat
                    - including different varieties for each major climate on Earth.</li>
                <li id="year-1945"><strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
                <li id="year-1953"><strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</li>
                <li id="year-1962"><strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
                <li id="year-1970"><strong>1970</strong> - receives the Nobel Peace Prize</li>
                <li id="year-1983"><strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields</li>
                <li id="year-1984"><strong>1984</strong> - becomes a distinguished professor at Texas A&M University</li>
                <li id="year-2005"><strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because
                    "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
                <li id="year-2009"><strong>2009</strong> - dies at the age of 95.</li>
            </ul>
        </div>
    </div>
</div>
Davide
@DavOnGit
Jul 01 2016 15:51
@rajeejones seems to work properly to me!
Rajee Jones
@rajeejones
Jul 01 2016 15:51
can you paste a screenshot? on my screen the bullet point is pinned to the left, but the text is centered
@DavOnGit
Davide
@DavOnGit
Jul 01 2016 15:58
sample.jpg
@rajeejones
Rajee Jones
@rajeejones
Jul 01 2016 16:03
ah, I forgot to save @DavOnGit
Davide
@DavOnGit
Jul 01 2016 16:03
@jenishm the head tag of your local index.html
Jenish
@jenishm
Jul 01 2016 16:03
@DavOnGit how do I send it here
Davide
@DavOnGit
Jul 01 2016 16:04
This message was deleted
CamperBot
@camperbot
Jul 01 2016 16:04
no wiki entry for: embed code
Davide
@DavOnGit
Jul 01 2016 16:05
help syntax
CamperBot
@camperbot
Jul 01 2016 16:05

:point_right: sass syntax and tools [wiki]

SASS Syntax and Tools

"An artist is only as good as his tools."

That's not necessarily true, but the tools we use can sure make our lives easier and our tasks more managable. Imagine writing code with no keyboard shortcuts or snippets available! Not the end of the world, but you get the gist.

The "tools", or more commonly refered to as directives, we will be discussing are actually built-in features that come bundled with Sass and can help us as developers to write DRY-er (Don't Repeat Yourself) and cleaner code.

If you would like to follow along in your own text editor, I recommend installing a Sass syntax-highlighter. Atom and Sublime Text as well as a few other editors support these.

:pencil: read more about sass syntax and tools on the FCC Wiki

Kelsey
@kcdilla
Jul 01 2016 16:05
Hello! I'm working on my Personal Profile project. I think I'm doing ok when it comes to designing it for my current screen size but I'm having trouble making it responsive for smaller screens. I'm using Bootstrap but maybe not correctly/enough? My current focus is on getting the picture to be responsive (and ultimately go under the text when the screen gets too small) http://codepen.io/kcdilla/pen/RRWmbQ
resizing the picture is also an option. I'm trying to follow the example pretty closely before I totally redesign it
another note: currently the picture IS moving under the text, but it's not centered.
Hristijan Gjorgjievski
@hristijankiko
Jul 01 2016 16:10
@kcdilla I think you should use the bootstrap "thumbnail" class for the image
@kcdilla and i think you need to use it in <img> tag for it to work
Dylan
@dhcodes
Jul 01 2016 16:11
@kcdilla you can get the img to shrink in bootstrap by adding the class "img-responsive" to your img
@kcdilla looks like it does go under the text on small screens so you got that part
dhuddleston
@dhuddleston
Jul 01 2016 16:12
Getting some undefined values from the Twitch API. Any advice? http://codepen.io/dhuddleston/pen/dXoZrX?editors=0011
It looks like it's only happening to channels that are offline (or never existed). Online channels are giving the correct results.
Kelsey
@kcdilla
Jul 01 2016 16:13
thanks @hristijankiko and @dhcodes , I'll try your suggestions. Stay tuned...
CamperBot
@camperbot
Jul 01 2016 16:13
kcdilla sends brownie points to @hristijankiko and @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @hristijankiko |http://www.freecodecamp.com/hristijankiko
:star2: 1149 | @dhcodes |http://www.freecodecamp.com/dhcodes
Kelsey
@kcdilla
Jul 01 2016 16:22
@hristijankiko Ok, I tried your suggestion. It might be a little more responsive now but now the edges aren't rounded (it's not a circle) and it's not centering when it goes below the text. http://codepen.io/kcdilla/pen/RRWmbQ
Oops, made some changes. Now it seems like I'm back where I started??
Hristijan Gjorgjievski
@hristijankiko
Jul 01 2016 16:25
@kcdilla It is round on my screen
Kelsey
@kcdilla
Jul 01 2016 16:25
I think what I need to know is: how do I keep minimum margins around the photo, how do I keep it a circle (not an oval) regardless of screen size, how can I make it smaller to fit the screen, and how do I make sure it's centered when it moves below text?
I am glad that you helped me prevent it from moving outside the border of the section! that was really bugging me
Hristijan Gjorgjievski
@hristijankiko
Jul 01 2016 16:31
@kcdilla In .photo img {} type margin: 0 auto;
@kcdilla It will center the image
Kelsey
@kcdilla
Jul 01 2016 16:33
@hristijankiko That worked! Awesome!
It's still turning into an oval before it goes below.
also I was missing a closing } because of course I was
Hristijan Gjorgjievski
@hristijankiko
Jul 01 2016 16:49
@kcdilla I cant find a way to keep it a circle
@kcdilla The only way you can keep it a circle is if you set the width and height of the image to 12em instead of 15em
Kelsey
@kcdilla
Jul 01 2016 16:59
Hm, that does work but I'd really like the picture to be bigger.
sparcut
@sparcut
Jul 01 2016 17:00
Hey guys, I've been trying to find a solution that doesn't involve a table, would be great if you could take a look. The table is under .about-wrap. http://codepen.io/sparcut/pen/046ca7e13b2544f8a4f17a833a49e66e
Hristijan Gjorgjievski
@hristijankiko
Jul 01 2016 17:07
@sparcut Use an Unordered list?
sparcut
@sparcut
Jul 01 2016 17:07
Not for the .about section
Nick Irvine
@irvin3
Jul 01 2016 17:13
hey does anyone know why using jquery to call on an image from an api might lead to the image not loading and instead displaying as a small non-image thumbnail
I can post my code, I feel like someone who has done the Twitch.tv project would understand what i am talking about
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 17:19
Can anyone help me with this layout?? It seems to misbehave sometimes and has proper layout only in mid size screens .
http://codepen.io/chaitanyamukka/pen/akWKOy
Zeek wilborn
@himuraTV
Jul 01 2016 17:24
could i get some help with exercise 63. i have all the colors the right way but its still saying im wrong

<style>
.red-text {
color: rgb(225,0,0);
}
.orchid-text {
color: rgb(218,112,214);
}
.sienna-text {
color: rgb(160,82,45);
}
.blue-text {
color: rgb(0,0,225);
}
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="orchid-text">I am orchid!</h1>

<h1 class="sienna-text">I am sienna!</h1>

<h1 class="blue-text">I am blue!</h1>

Zeek wilborn
@himuraTV
Jul 01 2016 17:29
i got it . i found the typo i made.
Adetunji Iyaniwura
@Iadetunji
Jul 01 2016 17:45
can anyone guide me on how to go about developing the random quote machine
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 17:47
@Iadetunji What I tried to do is create a array of quotes and used random() to get a random quote
The one in the example supposedly uses an API which I couldn't comprehend :P
Adetunji Iyaniwura
@Iadetunji
Jul 01 2016 17:49
@mukkachaitanya , ill give it a try
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 17:50
Also you may try to search for APIs which provide random quotes for free. Which I couldn't :(
Yeah sure. If you want to check out mine here it is.
http://codepen.io/chaitanyamukka/pen/akWKOy
^still under devlopment
Adetunji Iyaniwura
@Iadetunji
Jul 01 2016 17:52
@mukkachaitanya , though not complete but is still looking cool
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 17:53
Thanks :smile:
Adetunji Iyaniwura
@Iadetunji
Jul 01 2016 18:01
can anyone recommend a good resource for understanding color theory
Amr Al-Dumaini
@amroooz
Jul 01 2016 18:09
guuuyys iam realllyyy struggeling with the Portfolio Thing, i havn#t learned anything about that :
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:10
@amroooz Can you explain your problem??
Daniel
@DanielMW34
Jul 01 2016 18:12
Hello Everyone. I have an issue with a <div> height. Essentially, I have two <div class="well"> sitting side by side in a <div class="row"> The left well is used for people to enter their contact info, the right well contains my contact info... all I want is the right well to match the left in terms of height... not sure how to do this without giving each a fixed height... anybody care to help me create a solution which allows the well containing my contact info to become "responsive" to the height of the other well (containing the form for people to enter their contact info)? http://codepen.io/Daniel_Widrich/pen/GZLGQX
Amr Al-Dumaini
@amroooz
Jul 01 2016 18:12
i just dont really know how to do all that fancy stuff, like getting that boder at the top with the buttons etc.
michael-wise
@michael-wise
Jul 01 2016 18:15
I have a strange issue--I have a bootstrap carousel image (slider) and need to apply background-size:cover, background-position: center bottom; and background-repeat: no-repeat; -- but the images from BS carousel are <img> :(
any wisdom/hints?
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:16
@amroooz It's kinda intuitive when it comes to designing and fancies. I would recommend you to go through the basics again. Like margin, padding, bootstrap basics. You can also checkout the references and examples at w3school. It helps a lot.
Hope you can do you your best :D .
Amr Al-Dumaini
@amroooz
Jul 01 2016 18:17
@michael-wise thanks
CamperBot
@camperbot
Jul 01 2016 18:17
amroooz sends brownie points to @michael-wise :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for michael-wise
himanshu
@himanshuraja
Jul 01 2016 18:17
@Krish2704
Krishna Sai Gullapalli
@Krish2704
Jul 01 2016 18:18
@himanshuraja yeah?
Daniel
@DanielMW34
Jul 01 2016 18:20
p-p-p-please.... :)
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:24
@DanielMW34 You can try using Tables if it works.
test away
:D
Any feedback is much appreciated
himanshu
@himanshuraja
Jul 01 2016 18:25
about sprinr
CamperBot
@camperbot
Jul 01 2016 18:25
you need to ask about @someone!
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:26
@ivangeorgiew Its good :D
:+1:
himanshu
@himanshuraja
Jul 01 2016 18:26
Krishna Sai Gullapalli
@Krish2704
Jul 01 2016 18:26
@himanshuraja there's no one names sprinr
himanshu
@himanshuraja
Jul 01 2016 18:26
oops
my bad
Daniel
@DanielMW34
Jul 01 2016 18:27
@mukkachaitanya thank you ... I will look into that
CamperBot
@camperbot
Jul 01 2016 18:27
danielmw34 sends brownie points to @mukkachaitanya :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @mukkachaitanya |http://www.freecodecamp.com/mukkachaitanya
himanshu
@himanshuraja
Jul 01 2016 18:29
@Krish2704 can i resubmit my pens
Krishna Sai Gullapalli
@Krish2704
Jul 01 2016 18:29
@himanshuraja yup
just open the challenge again and you can submit them again
himanshu
@himanshuraja
Jul 01 2016 18:30
thank you @Krish2704
CamperBot
@camperbot
Jul 01 2016 18:30
himanshuraja sends brownie points to @krish2704 :sparkles: :thumbsup: :sparkles:
:cookie: 571 | @krish2704 |http://www.freecodecamp.com/krish2704
Daniel
@DanielMW34
Jul 01 2016 18:35
@amroooz Pretty much, the basic stuff you need to know is all contained in the waypoints on freeCodeCamp ... you just need to string it all together. As for the buttons at the top, make them a link <a href="insertThe_ID_ofTheElementYouWantToLinkToHere">insertTheTextYouWantToServeAsTheLinkHere:aka"bio""contact""etc"</a>
Robert
@Quadrob
Jul 01 2016 18:39
I heed help with task 106 I have been stuck the whole day? Please could someone just give me some advice?
r2d2
@UsamaHameed
Jul 01 2016 18:39
What are some frameworks/software that you guys' would recommend for front end web dev? (Besides your preferred text editors)
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:39
@Quadrob Could you expand the problem statement?
Robert
@Quadrob
Jul 01 2016 18:42
@mukkachaitanya yeah it's when we have to use jQurey to add different classes
We have to use the 3 selectors button .btn and #target1 @mukkachaitanya
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:45
@Quadrob Can you checkout the challenge number from the map option from upper right
Robert
@Quadrob
Jul 01 2016 18:46
Yeah it's number 106 @mukkachaitanya
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:47
Sorry I meant the name :sweat_smile:
Cause I can't see the numbers anywhere :(
Robert
@Quadrob
Jul 01 2016 18:50
Target the same element with multiple jQuery Selectors @mukkachaitanya
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:51
@Quadrob Ok. Can you explain whats your problem ??
DumeD
@DumeD
Jul 01 2016 18:53
i want to put on projects section of my portfolio page an mage of my tribute page. how can i do it? where i have to put the image so codepen could read it?
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:53
@Quadrob The answer seems to be quite simple.
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>
Robert
@Quadrob
Jul 01 2016 18:56
@mukkachaitanya to e honest I have no clue I have tried it every way possible like I said I spent the whole day on it ๐Ÿค” Now I typed that exact answer like 4 times now and it still won't move on๐Ÿ˜• Do you think it might have something to do with my browser?
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 18:57
@Quadrob Try reset button on the left and try out the code I sent.
michael-wise
@michael-wise
Jul 01 2016 18:57
@meeeeee myself got it solved--simply attach background-image to the div instead of putting an img source inside that div
Robert
@Quadrob
Jul 01 2016 18:59
@mukkachaitanya thanks so much for the help bud d๐Ÿ‘๐Ÿป
CamperBot
@camperbot
Jul 01 2016 18:59
quadrob sends brownie points to @mukkachaitanya :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @mukkachaitanya |http://www.freecodecamp.com/mukkachaitanya
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 19:00
@Quadrob So it worked??
Robert
@Quadrob
Jul 01 2016 19:01
Yeah I had to reset the whole thing @mukkachaitanya
Chaitanya Mukka
@mukkachaitanya
Jul 01 2016 19:01
@Quadrob Cool. Hope you also understood the logic behind the required answer. (Though it was mechanical :P ).
Robert
@Quadrob
Jul 01 2016 19:03
Yeah I did thanks @mukkachaitanya ๐Ÿ˜
CamperBot
@camperbot
Jul 01 2016 19:03
quadrob sends brownie points to @mukkachaitanya :sparkles: :thumbsup: :sparkles:
:warning: quadrob already gave mukkachaitanya points
Amr Al-Dumaini
@amroooz
Jul 01 2016 19:27
hey guys i have a Problem with my Portfolio, how do i get more then one Image as my Background so i am able to see them by Scrolling down?
uniforlyff
@uniforlyff
Jul 01 2016 19:33
@amroooz create another element with a different background
Amr Al-Dumaini
@amroooz
Jul 01 2016 19:34
ah ok and how can i size my background?
uniforlyff
@uniforlyff
Jul 01 2016 19:34
you can use cover
Amr Al-Dumaini
@amroooz
Jul 01 2016 19:34
how?
uniforlyff
@uniforlyff
Jul 01 2016 19:35
background: color url() repeat position/size attachment
or background-size: cover
you can use that instead ^
Amr Al-Dumaini
@amroooz
Jul 01 2016 19:35
ahok thanks
uniforlyff
@uniforlyff
Jul 01 2016 19:36
:+1:
Amr Al-Dumaini
@amroooz
Jul 01 2016 19:39
and should it be fixed too? meanfor the attachment?
uniforlyff
@uniforlyff
Jul 01 2016 19:40
if you want it to be
Xavier Sumba
@cuent
Jul 01 2016 20:14
@DavOnGit Awesome thanks!
CamperBot
@camperbot
Jul 01 2016 20:14
cuent sends brownie points to @davongit :sparkles: :thumbsup: :sparkles:
:cookie: 537 | @davongit |http://www.freecodecamp.com/davongit
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:16
Hey guys, does anybody know how to fix js scroll to the top of elements. When the anchor link is clicked, the page scrolls to the middle of the element, cutting of the top of the element: https://codepen.io/tylerprosper/pen/yJVRXj
Dan
@dcgoings
Jul 01 2016 20:39
@tylerprosper i had that issue on mine as well. i had a js script that did normal scrolltop minus navbar height
if your navbar stays the same height no matter what, you can just minus #px. mine was a little different because my navbar had three different heights based off screen width. so i was able to do something like
blah blah blah - $(".navbar-default).height()
Amr Al-Dumaini
@amroooz
Jul 01 2016 20:41
wait whats the navbar?
Dan
@dcgoings
Jul 01 2016 20:42
?
like a navigation bar
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:44
This message was deleted
so you have to subtract the height of the nav bar in px
Dan
@dcgoings
Jul 01 2016 20:44
that's what i did, yes
because it's fixed.
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:45
How did u write that? I didn't quite get your last example?
Dan
@dcgoings
Jul 01 2016 20:45
if the nav bar wasn't there, it would look fine. it IS scrolling properly the way it is, as far as i can tell, it's just hidden behind the navbar.
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:45
@dcgoings can u paste ur code
Dan
@dcgoings
Jul 01 2016 20:45
not sure if it'll work for you
    $(".scroll").click(function(event) {
        event.preventDefault();
        $("html,body").animate({
            scrollTop: $(this.hash).offset().top - $(".navbar-default").height()
        }, 1000);
    });
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:48
@dcgoings thanks, i'll give it a try
CamperBot
@camperbot
Jul 01 2016 20:48
tylerprosper sends brownie points to @dcgoings :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @dcgoings |http://www.freecodecamp.com/dcgoings
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:49
@dcgoings I'm not seeing where you subracted the height of the nav bar in that script tho
Dan
@dcgoings
Jul 01 2016 20:49
scrollTop: $(this.hash).offset().top - $(".navbar-default").height()
tylerprosper
@removed~tylerprosper
Jul 01 2016 20:50
oh ok
great gotcha
gideonlee
@gideonlee
Jul 01 2016 21:13

Hi I'm working on the Random Quote Machine and I'm having issues with Forismatic. Can someone help me? I'm not sure why these lines of code do not work:

$.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?', function(json){
quote = json.quoteText;
author = json.quoteAuthor;
$('.quote').text(quote);
$('.author span').text(author)
});

This line of code works in Sublime Text but when I move it to codepen it creates this error.
Daniel Cartรญn
@Danielcv93
Jul 01 2016 21:20
http://codepen.io/Danielcv_93/pen/pbeYax?editors=0100 anyone knows why the background-color is repeting?
uniforlyff
@uniforlyff
Jul 01 2016 21:20
This message was deleted
@Danielcv93 ill take a look
@Danielcv93 that's because you didnt set a height for the body
Bruce Young
@mutantspore
Jul 01 2016 21:24
@gideonlee at a guess you are calling your codepen page as https://. the quotes api url you are using is only http:// which is a security issue
uniforlyff
@uniforlyff
Jul 01 2016 21:24
@Danielcv93 height: 100vh
will work
Bruce Young
@mutantspore
Jul 01 2016 21:25
@gideonlee just use http:// when you view your codepen site
gideonlee
@gideonlee
Jul 01 2016 21:34
@mutantspore I'm not too familiar with APIs. Can you explain to me what this means and some ways to go about it?
@mutantspore I'll try it
Bruce Young
@mutantspore
Jul 01 2016 21:39
@gideonlee from what you have posted itโ€™s simply that you have a called/ used your codepen site with https (secure) and have http (insecure) content inside it. Thatโ€™s just not allowed. So you either have to use your codepen page as http or use https on your quotes api if they allow it (probably not). This is not really an api issue. itโ€™s about dragging in insecure content into a secure web site. Doing this locally you are probably only using http (or nothing which defaults to http) when you view the page.
@gideonlee can you paste in here the url of your codepen site that you are using?
gideonlee
@gideonlee
Jul 01 2016 21:41
@mutantspore You're a lifesaver. Thanks! My code works now
CamperBot
@camperbot
Jul 01 2016 21:41
gideonlee sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1732 | @mutantspore |http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Jul 01 2016 21:41
:)
gideonlee
@gideonlee
Jul 01 2016 21:42
@mutantspore Thank you for the explanation as well.
http://codepen.io/Gideonlee/pen/OXWLbR/
CamperBot
@camperbot
Jul 01 2016 21:42
gideonlee sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: gideonlee already gave mutantspore points
gideonlee
@gideonlee
Jul 01 2016 21:43
@mutantspore let me save the changes and send the new one. http://codepen.io/Gideonlee/pen/OXWLbR/
JD Tadlock
@jdtdesigns
Jul 01 2016 21:48
@gideonlee add 'transition: background .7s;' to the body in the css for a little surprise ;)
Any idea about mocha-chai unit testing
?
Ian
@IJACOBS
Jul 01 2016 22:18
If anyone wants to look at my weather app and tell me what they think, here it is!Thanks! http://codepen.io/ianjacobs/full/wWooNy/
Zeek wilborn
@himuraTV
Jul 01 2016 22:51
can someone help me with"Use Responsive Design with Bootstrap Fluid Containers"
i have no idea where to place the <div>
i got it thanks anyways
Luke
@lukede
Jul 01 2016 23:17
How do you keep the navbar from cutting off the top of the body? I've added padding to the body, but when I click the link in the navbar, it cuts of part of that section (e.g. the about, portfolio, or contact section)
michael-wise
@michael-wise
Jul 01 2016 23:18
Guessing its a problem with position: attributes
make sure you're not using static navbar
actually unsure about that last part. post the code?
Luke
@lukede
Jul 01 2016 23:19
hmm, yeah that sounds right
Zeek wilborn
@himuraTV
Jul 01 2016 23:19
so it wants me to put an image below the current one and to me it looks right below it. can anyone see anything wrong?
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<img src=https://bit.ly/fcc-running-cats img-responsive>
its in "Make Images Mobile Responsive" in front end.
Luke
@lukede
Jul 01 2016 23:19
Do I just copy and paste code?
Bruce Young
@mutantspore
Jul 01 2016 23:22
@lukede body { padding-bottom: 50px; }
Luke
@lukede
Jul 01 2016 23:23
@mutantspore thank you. Would that go in my CSS?
CamperBot
@camperbot
Jul 01 2016 23:23
lukede sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1733 | @mutantspore |http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Jul 01 2016 23:23
@lukede yep :)
Luke
@lukede
Jul 01 2016 23:24
nice
Luke
@lukede
Jul 01 2016 23:29
This works, but when I click on a navbar link to go to a section within the page, it cuts off the top part. line up. I'm thinking I create a CSS class that adjusts the links 50px too.
Tyler Moeller
@TylerMoeller
Jul 01 2016 23:31

@lukede The bootstrap docs say to use:

body { 
  padding-top: 70px; 
}

https://getbootstrap.com/components/#navbar-fixed-top

This may also be helpful for the link issue you're referring to: http://stackoverflow.com/questions/13555709/how-do-i-offset-where-my-fixed-nav-bar-takes-me
Susan
@tmmggmmdld
Jul 01 2016 23:35
Would someone take a look at my tribute page and give me some feedback? http://codepen.io/triggerdaley/pen/bZWQJL
Luke
@lukede
Jul 01 2016 23:39
@TylerMoeller Thanks. This link looks to address the navbar links linking to part of the page that cuts off top 50px
CamperBot
@camperbot
Jul 01 2016 23:39
lukede sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 637 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Luke
@lukede
Jul 01 2016 23:41
Does everyone have this problem that tries to create a page based off the Portfolio example? It seems like a silly problem
for a navbar
Susan
@tmmggmmdld
Jul 01 2016 23:46
@himuraTV I think you are distracted by the <a href. Try taking that part out.