These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Jul 2016
Greg Duncan
@GregatGit
Jul 14 2016 00:00
@mrinalusp Great page - (top subject pick) - I recommend giving the title a different font - you can browse through google fonts to see the one you think would suit
Elbert Cortez
@trip16661
Jul 14 2016 00:00
what on blur event do is that it deletes the element
Carlos Vigil
@carlosvigil
Jul 14 2016 00:07

Redoing my FCC projects. I couldn't then and can't now get this navbar dropdown to work. (You have to be in narrow view) https://codepen.io/Cairos/pen/MyGJoE?editors=1000

Can't tell if it's a codepen issue?

Greg Duncan
@GregatGit
Jul 14 2016 00:08
@carlosvigil just add jquery and bootstrap.js (in that order) and it will work
in the js settings
@trip16661 what part of you code is not firing?
Dan Stockham
@DanStockham
Jul 14 2016 00:10
Anybody gotten good at React yet? Because I'm stumped :confused:
Carlos Vigil
@carlosvigil
Jul 14 2016 00:14
ok, thanks @GregatGit
CamperBot
@camperbot
Jul 14 2016 00:14
carlosvigil sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 685 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 14 2016 00:14
@carlosvigil :+1:
Elbert Cortez
@trip16661
Jul 14 2016 00:25
@GregatGit it's not really that is not firing it's more than:
-clicks on element {
  -hide element
  -opens an input text(to edit the element)
  -focus the input
  - on blur or submit  changes the element and remove the input
}
but if you add this new event :
- click anywhere in the container {
  -focus the hidden calculator input (so it can use keybinding)
}
it ends firing the blur even without letting the user edit it first because
its activating the second event
Xavier Velez
@JonSnow08
Jul 14 2016 00:30
anybody have some experience with the openweather api and have a moment to help
Elbert Cortez
@trip16661
Jul 14 2016 00:31
so it's either skipping the focus part of the first block
or the focus of the second block is activating after the focus on the first one
@JonSnow08 what do you exactly need?
Xavier Velez
@JonSnow08
Jul 14 2016 00:32
@trip16661 well I've gotten as far as getting the longitude and latitude
Elbert Cortez
@trip16661
Jul 14 2016 00:33
so?
Xavier Velez
@JonSnow08
Jul 14 2016 00:33
@trip16661 but now once I call the .getJSON i'm assuming I'm going to have to write an if statement to fulfill the user stories
and I'm also confused as to how my API key plays into this. Does it go into the .getJSON
the short couple exercises that you get from codeacademy aren't exactly huge with helping me
i mean from FreeCodeCame
Camp*
Elbert Cortez
@trip16661
Jul 14 2016 00:35
the api key is part of the url
you can't access the open weather without it
Xavier Velez
@JonSnow08
Jul 14 2016 00:35
I even went as far as to go through codeacademy for about a month before coming back here
I have a better understanding of HTML, CSS, JS, and jQuery now
but I still am not sure how to use an API
Elbert Cortez
@trip16661
Jul 14 2016 00:36
and you have to put an url where you put the url + query pattern (in your case lat lon) and then the api key
I suggest you to read open weather documentation
for more detail
Xavier Velez
@JonSnow08
Jul 14 2016 00:36
I did it's not that helpful
I see how I'll get my information back
but when I try to get the example code
I get returned an error
or well the example api call
{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}
this error to be specific
Elbert Cortez
@trip16661
Jul 14 2016 00:38
post the link you have so far
also did you really get an api key?
Xavier Velez
@JonSnow08
Jul 14 2016 00:38
$("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;
        });
      }
  $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + latt + "&lon=" + long)
}
yes I signed up and everything
Elbert Cortez
@trip16661
Jul 14 2016 00:40
@JonSnow08 ok watch this video and when you finish it tell me if something else is missing
https://www.youtube.com/watch?v=ecT42O6I_WI
as far as i see you are missing the api key on your link
Xavier Velez
@JonSnow08
Jul 14 2016 00:40
@trip16661 thank you
CamperBot
@camperbot
Jul 14 2016 00:40
jonsnow08 sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @trip16661 |http://www.freecodecamp.com/trip16661
Elbert Cortez
@trip16661
Jul 14 2016 00:41
as they show in the example code in the weather app documentation
Juan Moraza
@Morazajuan
Jul 14 2016 00:41
can anybody tell me why my pen is not working properly anymore? yesterday was working, when i pressed the button it changed quote but today i press it and nothing happens... here is my pen https://codepen.io/morazajuan/pen/zBPAqJ
Elbert Cortez
@trip16661
Jul 14 2016 00:44

cors problems read the console log @Morazajuan
try to serve it on https instead

https://myApiProvider.something

instead

Juan Moraza
@Morazajuan
Jul 14 2016 00:48
@trip16661 sorry, i dont quite understand what you told me. I have the API source as, "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" thats what you are talking about?
Mrinal Patwardhan
@mrinalusp
Jul 14 2016 00:52
@GregatGit Thank you! I will improvise on the font
CamperBot
@camperbot
Jul 14 2016 00:52
mrinalusp sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @gregatgit |http://www.freecodecamp.com/gregatgit
Elbert Cortez
@trip16661
Jul 14 2016 00:58
@Morazajuan check the differences
the http vs https
change it and see if it works
it's because of cors
Gabriel Ramos
@GabrielusR
Jul 14 2016 01:10
Https uses ssl encrypytion protocol as an osi moral
Model service level service
OR service layer service
Presentation layer actually haha
Juan Moraza
@Morazajuan
Jul 14 2016 01:18
@trip16661 yeah it worked! thanks man1
CamperBot
@camperbot
Jul 14 2016 01:18
morazajuan sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 409 | @trip16661 |http://www.freecodecamp.com/trip16661
Trevor
@tr3v0rrr
Jul 14 2016 01:31
I'm doing the first project and I'm trying to adjust the div around my img & text to be slightly larger than the picture all the way around, but longer on the bottom (so the text would fit there). I've looked through the Bootstrap library and can't seem to find anything that would give me that control. Is there something else I should be doing? Here is my code:
<div class="text-center" id="picture">
  <img src="http://kentuckybasketballforum.com/uploads/images/kentucky-national-champs.jpg" alt="John Calipari with his championship team">
  <p>
John Calipari, middle-left, holding his first National Championship trophy in 2012</p>
    </div>
Oh, I also have divs around the entire set of elements (including the divs in the code I just pasted)
willcodes
@willcodes
Jul 14 2016 01:36
Hi Guys.. I am starting the random quote generator but I am a little lost, it looks very complex
I feel like I am not prepared on how to do this, but I don't want to look at the source code to figure it out? any suggestions on how to get started? I guess I can do the html and css for it first
Erik
@erik-sn
Jul 14 2016 01:40
@willcodes first step is to figure out how you're going to get your quotes
which api you will use, and how you will implement it
willcodes
@willcodes
Jul 14 2016 01:41
so just google random quote api?
and to implement it I guess I only have the option of javascript using json
Erik
@erik-sn
Jul 14 2016 01:44
yep that's a starting point
willcodes
@willcodes
Jul 14 2016 01:45
ok basically this isn't going to be easy lol
Erik
@erik-sn
Jul 14 2016 01:45
read their documentation, implement a button that when you click it uses jquery's ajax methods to pull data from the api
willcodes
@willcodes
Jul 14 2016 01:45
okay so first I will maybe make a simple html/css style for a single pager
Erik
@erik-sn
Jul 14 2016 01:45
it's not supposed to be :P but you'll get it
willcodes
@willcodes
Jul 14 2016 01:45
what is ajax, i feel like i never learned that
I know enough about jquery to make something happen when I hit click, but I want to write everything myself
Erik
@erik-sn
Jul 14 2016 01:47
it's in the json apis section
on the map
willcodes
@willcodes
Jul 14 2016 01:47
oh i see
okay so I did that
but I didn't really understand the code, it just told me to write it in
I looked at it, but really? hahahah
Erik
@erik-sn
Jul 14 2016 01:47
now's a good time to learn haha
but basically it's how a web site retrieves data - you will use it in all of the other intermediate projects
willcodes
@willcodes
Jul 14 2016 01:50
I understand what it does... but looking at the code is bleh
I guess I'll try and do it very simply first
Erik
@erik-sn
Jul 14 2016 01:51
just break the problem into smaller parts - find the api you want to use, call the api on a button click, then get it to console.log the data response, then figure out how to reach the data you need
willcodes
@willcodes
Jul 14 2016 01:56
ok so i picked an api
and basically it loads when the script is loaded
so create a function that reloads that when clicked?
willcodes
@willcodes
Jul 14 2016 02:17
anyway @kiresuah thanks bud
CamperBot
@camperbot
Jul 14 2016 02:17
willcodes sends brownie points to @kiresuah :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @kiresuah |http://www.freecodecamp.com/kiresuah
J. Kelley
@jothetraveler
Jul 14 2016 02:22
Evening! I'm trying to add twitter and facebook icons to the bottom of my page. I copied the code from a site and tried to tweak it accordingly but the icons remain blank and the links aren't working. http://codepen.io/jothetraveler/pen/MeWjKK
willcodes
@willcodes
Jul 14 2016 02:23
@jothetraveler the links are working
@jothetraveler let me look
@jothetraveler you dont have the source for the icons in those buttons
@jothetraveler you need to find the links to the images of the facebook/twitter icons and put them in your html
J. Kelley
@jothetraveler
Jul 14 2016 02:26
oooo ok. thanks @willcodes
willcodes
@willcodes
Jul 14 2016 02:27
@jothetraveler let me know if you need more help
Daniel Sousa
@dgsousa
Jul 14 2016 02:35
hey there guys, I'm building my first Angular app and I was wondering if anyone knows whether or not you can pass $scope through a dependency array in a service?
Sid.
@SidneyCMoore
Jul 14 2016 02:39
hey guys, very random question but i can't get codepen to show my code, any suggestions? It keeps saying loading
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:44
can somebody help me with resizing and image for the tribute page you have to make?
Erik
@erik-sn
Jul 14 2016 02:51
@Ale-Carrera-97 are you trying to resize it when the window changes or just set the size?
@SidneyCMoore can you link the codepen?
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:51
@kiresuah I'm just trying to change the size of the image. How do I link the codepen?
oh sorry.
Erik
@erik-sn
Jul 14 2016 02:52
np np, so you can set the width or height in the <img> tag
so <img src="urlToImage" height="50" />
or you can use CSS
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:53
Thats the problem. I don't know if im using just CSS or HTML alone. I mean, Everything that I ideantify as HTML, I write in the HTML window and everything that I ideantify as CSS, I write in the CSS window. I'll copy/paste my code here so that you can see it.

<img src="http://i5.photobucket.com/albums/y182/subhuman31/Disney-ozzy.jpg" class=.smaller-image> I have this in the HTML window

<style>
.smaller-image{
length=50px
}
</style>

^and I have that in the CSS window.
Erik
@erik-sn
Jul 14 2016 02:55
you need to put the html class in quotes, class="smaller-image"
with no dot
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:55
okay. thanks @kiresuah !
CamperBot
@camperbot
Jul 14 2016 02:55
ale-carrera-97 sends brownie points to @kiresuah :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @kiresuah |http://www.freecodecamp.com/kiresuah
Erik
@erik-sn
Jul 14 2016 02:55
and instead of "length=50px" try "width: 50px"
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:56
@kiresuah cool. thanks again. I'm still learning how all those affect and image.
CamperBot
@camperbot
Jul 14 2016 02:56
ale-carrera-97 sends brownie points to @kiresuah :sparkles: :thumbsup: :sparkles:
:warning: ale-carrera-97 already gave kiresuah points
Erik
@erik-sn
Jul 14 2016 02:56
no problem, just part of the process
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:57
wait.... nothing changed.
Erik
@erik-sn
Jul 14 2016 02:58
one more thing I just saw, try adding a closing tag "/>" on the end
instead of just ">"
do you want to link the codepen? just paste the url in here
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 02:59
oh, yeah, of course. damn, never thought i'd forget about that lol
nothing still changed. lol
I'm thinking that maybe if I take what I have written down in the CSS window, and place it at the top of my code in the HTML window, then maybe it will run like it does in the console for freecodecamp.
Erik
@erik-sn
Jul 14 2016 03:02
it's easier to help troubleshoot if you can link the codepen
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 03:02
how do i do that?
Erik
@erik-sn
Jul 14 2016 03:02
just paste the url in here
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 03:03
oh. will do.
Xavier Velez
@JonSnow08
Jul 14 2016 03:05
$("document").ready(main);



function main() {
      //This gets the users location and stores it in already defined globals
      if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
         var long = position.coords.longitude;
         var latt = position.coords.latitude;
        });
      }
 var weatherData =  $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + latt + "&lon=" + long + "&appid=ca1580d2338e3d7f84fec44abbe30b11")

}
Erik
@erik-sn
Jul 14 2016 03:05
well it seems like it doesn't like the style tags @Ale-Carrera-97 in the CSS
Xavier Velez
@JonSnow08
Jul 14 2016 03:05
I get an error when I console.log(weatherData)
it seems it's not loading the json
Erik
@erik-sn
Jul 14 2016 03:06
<img src="http://i5.photobucket.com/albums/y182/subhuman31/Disney-ozzy.jpg" class="smaller-image" /> for html and only .smaller-image{
width: 50px
} in the css
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 03:06
okay. ill try it out.
Xavier Velez
@JonSnow08
Jul 14 2016 03:06
actually now I get nothing in my console
Alejandro Carrera
@Ale-Carrera-97
Jul 14 2016 03:07
still not happening. jeez. I think ill try my hand at loading fonts now lol
Xavier Velez
@JonSnow08
Jul 14 2016 03:08
I keep hitting run and nothing in the console
J. Kelley
@jothetraveler
Jul 14 2016 03:08
Back again....How can I decease the space between my page break and title "Portfolio"? http://codepen.io/jothetraveler/pen/MeWjKK
Subroto
@Shub1427
Jul 14 2016 03:10
@ronaldrdguez That's what makes me totally confused.... so many frameworks n so much to learn for full stack... Can excelling only in JavaScript and Jquery and some kind of preprocessor for JavaScript will suffice??? I am a beginner, so please do not get frustrated with all my such noob questions..
Syah Hakam Ibrahim
@h4km
Jul 14 2016 03:34
1.jpg
Ed Nunes
@Nunie123
Jul 14 2016 03:35
Can anyone help me out with getting my Random Quote Generator to read my JSON link?
Syah Hakam Ibrahim
@h4km
Jul 14 2016 03:35
I have a problem,why this image small? what else in my code?
2.jpg
can anyone help me?
Ed Nunes
@Nunie123
Jul 14 2016 03:36
 $(document).ready(function() {
    $("#getMessage").on("click", function(){
      //$(".message").html("Here is the message");
      $.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function(json) {
        //$(".message").append(json[0]);
        var html = "";
        json = json.filter(function(val) {return (val.id == 44);
                                         });

          html = json.quote

        $(".message").text(html);
      });
    });
  });
CamperBot
@camperbot
Jul 14 2016 03:36
:bulb: to format code use backticks! ``` more info
Ed Nunes
@Nunie123
Jul 14 2016 03:38
I've put the JSON link into an online JSON parser and data appears
But I cannot get it to appear on my codepen page
ronaldrdguez
@ronaldrdguez
Jul 14 2016 03:47

@Shub1427 I’m also learning, most people here are. This is my very personal opinion:

  • If you have no previous programming experience. Learn the principles of programming and good software engineering. I don’t believe FCC does a good job on that regard.
  • Learn JavaScript the language, including the latest additions to the standard. The language sucks, but there’s no other choice. I don’t think is a good first language to learn. It is not beginner friendly, it is not even professional friendly.
  • Learn jQuery, it is a nice complement to must frameworks and makes handling the DOM portable and easy.
  • Choose one JS framework and learn it well, once you know JS and programming, the process is a lot easier than it looks.
  • Last but not least, pick your dev stack, this includes learning a vcs (github), a task runner(grunt, gulp, etc), a module loader, npm, yeoman, the list goes on and on… you’ll find yourself downloading a shitload of plugins to get anything done.

Just stick at it, it gets easier, more so once you have the fundamentals covered. At first is always overwhelming.

Lauren Moore
@moorelau
Jul 14 2016 03:49
@ronaldrdguez I'm starting to work on my portfolio webpage, but I'm really struggling to make anything decent even though I understand all the lessons that came before it. Should I skip this for now? Do you have any recommendations for other sites that might help me? You're right, it's definitely overwhelming.
buiphuking
@buiphuking
Jul 14 2016 03:55
$('#start').off('click');
this mean we can click but no function run, am i right ?
Xavier Velez
@JonSnow08
Jul 14 2016 03:56
@moorelau I loved codeacademy
@moorelau I even pay the $20/month to do the pro, the advisors are really helpful
Lauren Moore
@moorelau
Jul 14 2016 03:57
@JonSnow08 thank you :)
CamperBot
@camperbot
Jul 14 2016 03:57
:cookie: 277 | @jonsnow08 |http://www.freecodecamp.com/jonsnow08
moorelau sends brownie points to @jonsnow08 :sparkles: :thumbsup: :sparkles:
Xavier Velez
@JonSnow08
Jul 14 2016 03:57
@moorelau I even took a month off this program and went through the HTML, CSS, javascript, and jquery programs
@moorelau I have a much better understanding of what I learned here
ronaldrdguez
@ronaldrdguez
Jul 14 2016 03:57
@moorelau I’m not big at design, I try to keep it simple and mostly stick to predefined styles on a CSS framework like bootstrap or materialize. I really like the head first series books, nice approach to teaching.
Xavier Velez
@JonSnow08
Jul 14 2016 03:57
I think this is good for the practice it gives you
But as far as learning, codeacademy does a better job IMO
Lauren Moore
@moorelau
Jul 14 2016 03:58
Ok thanks I'll check those books out.
and codeacademy ofc
Xavier Velez
@JonSnow08
Jul 14 2016 03:58
@ronaldrdguez what's head first?
@ronaldrdguez is it specific to CSS and HTML or do they have other books?
ronaldrdguez
@ronaldrdguez
Jul 14 2016 04:01
Head First HTML/CSS & Head First HTML5, they have books on other stuff as well. Don’t let the drawings fool you, they are serious books and the authors not only know the material, they know how to teach it right.
Xavier Velez
@JonSnow08
Jul 14 2016 04:03
@ronaldrdguez how basic/advanced are we talking?
@ronaldrdguez I honestly don't even know if I'm starting in the right place. I'm doing this so I can maybe get some work/experience in the field before I graduate college. A lot of CS majors are rookie programmers and I don't want to be another one. But sometimes I feel like everybody says these languages aren't super representative of the others and it makes me worry im wasting time
ronaldrdguez
@ronaldrdguez
Jul 14 2016 04:12
@JonSnow08 HTML/CSS, basic but right, covers box model, page flow and layout which is nice, the CSS you need to know, no tricky manipulations or shiny effects, but it puts you in a position to understand every trick out there. The one on HTML5 covers plain browser JS, the web apis: geolocation, storage, web workers etc, ajax calls and the best jsonp explanation I’ve read. Not sure what you mean by languages not super representative of the others...
Xavier Velez
@JonSnow08
Jul 14 2016 04:13
I mean that HTML, CSS, JS aren't very much like python, swyft, c#, c++
and so on
I wanted to get a good base for my career, but I'm not sure this is the place to do it. Web development would be a pitstop, not my ideal end all be all
Subroto
@Shub1427
Jul 14 2016 04:14
@ronaldrdguez I have some experience with C++, Java and Python. Thanks for such a nice answer... I am struggling only with full stack web development, coz it's a very big platform to dive into
CamperBot
@camperbot
Jul 14 2016 04:14
shub1427 sends brownie points to @ronaldrdguez :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @ronaldrdguez |http://www.freecodecamp.com/ronaldrdguez
Subroto
@Shub1427
Jul 14 2016 04:15
It takes a lot of time to get ready!!😂
Daniel Sousa
@dgsousa
Jul 14 2016 04:17
hey there, does anyone know stuff about angular JS?
I'm trying to build the wikiapp using angular, and im having trouble using get requests on a dynamic URL
Subroto
@Shub1427
Jul 14 2016 04:18
@JonSnow08 your thought matches mine.... You feel so becoz u haven't decided what u want to learn these programming stuffs for... Being a Web developer is quiet complicated, You will have to just give it a try to find it out... It seems frustrating at frst... but being in touch with people here and other groups.. sometimes helps in ur learning curve...
Xavier Velez
@JonSnow08
Jul 14 2016 04:20
@Shub1427 yeah definitely it's helped no doubt but I get so frustrated sometimes
well idk I guess it'll work itself out
im heading to bed night guys
Mrinal Patwardhan
@mrinalusp
Jul 14 2016 04:26
I finally gpt the solution...i had not confirmed the email of my codepen account..so it was not letting me cross the tribute level
Subroto
@Shub1427
Jul 14 2016 04:39

congrats @mrinalusp !

Can anyone tell me what's the diff between "\r" (carriage-return) and "\n" (newline)

Subroto
@Shub1427
Jul 14 2016 05:11
@h4km , Image's height always sets to auto by default if not set, so in your code the Image height will be set according to the width of the col-md-3 division inside which it is. To make it's height different (which will change the image dimesions), you can either set some min-height, or use :before and :after psuedo elements to make the <p> element have a full height as your col-md-3 container and set height: 100%
&:before, &:after{
  display: table;
  content: " ";
  clear: both;
}
Vyvojar123
@Vyvojar123
Jul 14 2016 07:32
hello. I have html table which is output of PHP function, so I cannot edit it. I need to add a column to this table. Is it possible to do it? This table is without <table> and </table>
Christina
@baishusama
Jul 14 2016 07:40
Hello. I'm looking for help while doing my Intermediate Front End Development Projects and get stuck in Project #1 - Build a Random Quote Machine Incomplete. How do I get all the quotes? Was I supposed to save all quotes ( copied from net ) in an object in JavaScript ? Or any other idea ??...
Greg Duncan
@GregatGit
Jul 14 2016 07:47
@baishusama you can either use your own quotes by making an array of quotes or use an api to download quotes.
Christina
@baishusama
Jul 14 2016 07:49
@GregatGit Many thanks!
CamperBot
@camperbot
Jul 14 2016 07:49
baishusama sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 688 | @gregatgit |http://www.freecodecamp.com/gregatgit
checkmate-bitch
@checkmate-bitch
Jul 14 2016 07:55
Hi everyone! I've just completed Tribute Page challenge. I was wondering if you could look at it and give me some feedbacks. Don't be shy with negative criticism, I'm shameless. Anything from the coding style to what to use and not to use., anything and everything is appreciated! http://codepen.io/flash_code/full/JKroEZ/
Nathaniel Nasarow
@Torgian
Jul 14 2016 08:06
hey all
@checkmate-bitch nice, I like it. Simple and informative, good vibe.
Dhruv Kumar
@IMDhruv
Jul 14 2016 08:26
@checkmate-bitch The background and text color doesn't look good together.., Both are dark and darker.
nhidev
@nhidev
Jul 14 2016 08:32
@checkmate-bitch agree with @IMDhruv and it doesn't look good on small screen
DG
@galatzan
Jul 14 2016 08:42
Hey Guys,
quick question with regards to the calculator exercise. I was thinking to use eval() to get it done quickly, but I hear a lot to stay away from eval altogether. what are your thoughts on this matter?
anyone? would love to hear more advanced people's thoughts
Tyler
@TychoCRD
Jul 14 2016 08:48
@galatzan lots of people use eval... apparently the issue is "eval" uses the user's machine to process the contents, so dangerous as an access to malware/hacking
but, I think I read if you used regexp to filter it for safe expressions, before processing, it should be fine for use in a calculator
I personally had already started pursuing a design not using eval before learning about it and decided to finish it without eval
DG
@galatzan
Jul 14 2016 08:52
Thanks @TychoCRD I see how it could be done using other patterns, but it seems much easier the eval way. Your opinion is much appreciated!
CamperBot
@camperbot
Jul 14 2016 08:52
galatzan sends brownie points to @tychocrd :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @tychocrd |http://www.freecodecamp.com/tychocrd
Tyler
@TychoCRD
Jul 14 2016 08:54
Yeah, I would also add building it out without eval and writing it thinking about dealing with combinations of 0s, decimals and whatnot had some good lessons for both the math functions, code/function organization, and accounting for edge case user behavior
if there are any CSS/html layout experts, I just finished my Simon game, but one thing is bothering me: the "Strict mode" toggle seems to be off-center, not sure why
Dhruv Kumar
@IMDhruv
Jul 14 2016 09:03
@TychoCRD Remove the <br> after START div and add display: block; to #start div
Tyler
@TychoCRD
Jul 14 2016 09:04
@IMDhruv thanks! I should have considered that, I knew <br> was a hacky move and probably screwing it up
CamperBot
@camperbot
Jul 14 2016 09:04
tychocrd sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @imdhruv |http://www.freecodecamp.com/imdhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 09:04
:+1:
checkmate-bitch
@checkmate-bitch
Jul 14 2016 09:14
@nhidev yeah agree, I tried different zooms on it and the results were not good. What are your best suggestions to deal with this?
@IMDhruv I liked it. Not the best but works. What do you propose I should have done?
Dhruv Kumar
@IMDhruv
Jul 14 2016 09:18
google for color patterns in web design
lleander
@lleander
Jul 14 2016 09:20

Hello everybody!
I have a question regarding the Show Local Weather App project
Is there a special way on hot to prevent this error message:

"getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details."

Thank you.

Abhisek Pattnaik
@abhisekp
Jul 14 2016 09:20
Who is Dhruv?
@IMDhruv
;)
Dhruv Kumar
@IMDhruv
Jul 14 2016 09:21
@abhisekp ME :D
kirbyedy
@kirbyedy
Jul 14 2016 09:23
@lleander using ip-location instead geolocation, or use different weather api, like wunderground
Dhruv Kumar
@IMDhruv
Jul 14 2016 09:32
@lleander The reason i used crossorigin.me in the url https://crossorigin.me/http://api.openweatherma..... is because openweatherapi doesnt support HTTPS and if its not HTTPS then it wont work on Chrome.
Nathaniel Nasarow
@Torgian
Jul 14 2016 09:53
use forecast.io
you can use https with that one
also, I recommend using the ajax call formatting and not getJSON
this way you can use geolocation with google chrome
nhidev
@nhidev
Jul 14 2016 09:59
@checkmate-bitch i would like to use bootstrap.css
Nathaniel Nasarow
@Torgian
Jul 14 2016 10:00
then use it
lleander
@lleander
Jul 14 2016 10:10
@IMDhruv I am actually using crossorigin. In codepen, it does not work. Yesterday, it was working.
Dhruv Kumar
@IMDhruv
Jul 14 2016 10:11
@lleander Is the CodePen open via HTTP or HTTPS
lleander
@lleander
Jul 14 2016 10:11
@kirbyedy, I've read about ip-geolocation.
@Torgian, I've created a free account in Forecast.io but preferred to use OpenWeatherMap
the doer
@ewathedoer
Jul 14 2016 10:14
Should pomodoro clock stop after one cycle?
lleander
@lleander
Jul 14 2016 10:15
@IMDhruv, Oh! I tried using https://codepen.io and my app is working. Thank you for that reminder to use https://codepen.io
CamperBot
@camperbot
Jul 14 2016 10:15
lleander sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:cookie: 70 | @imdhruv |http://www.freecodecamp.com/imdhruv
lleander
@lleander
Jul 14 2016 10:16
@IMDhruv, I don't know why suddenly it became http://codepen.io and not the https
Dhruv Kumar
@IMDhruv
Jul 14 2016 10:18
@lleander Maybe thats how they have coded their website.., If its not HTTPS just add HTTPS
lleander
@lleander
Jul 14 2016 10:18
@IMDhruv, Upon checking my bookmarks, my entry just says codepen.io and it might be the reason why it didn't open the https version of codepen.io Thanks!
CamperBot
@camperbot
Jul 14 2016 10:18
lleander sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:warning: lleander already gave imdhruv points
Dhruv Kumar
@IMDhruv
Jul 14 2016 10:19
@lleander That makes sense. :smile:
lleander
@lleander
Jul 14 2016 10:20
@IMDhruv :smile:
Shivam Mehta
@shivam13
Jul 14 2016 10:27
can any one tell me how to use bootstrap classes in html code???
Nathaniel Nasarow
@Torgian
Jul 14 2016 10:28
you're going to be using the col- classes
read up on that. Best to experiment with it to get to know it
Shivam Mehta
@shivam13
Jul 14 2016 10:30
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="quote.css">
</head>
i am use like this but its not working
can any one help me
kirbyedy
@kirbyedy
Jul 14 2016 10:52
@shivam13 you need to load the jquery as well
bootstrap can not work without it
Shivam Mehta
@shivam13
Jul 14 2016 10:53
ok
its still not working @kirbyedy
Nathaniel Nasarow
@Torgian
Jul 14 2016 11:00
cool
finished up my twitch.tv, can you guys take a look?
Martynas
@Marjanus
Jul 14 2016 11:05
I need advice which free cloud servers you are using for game sounds hosting? Dropbox creates laggy sound effect
Nathaniel Nasarow
@Torgian
Jul 14 2016 11:10
If it's for a game, it might be best to load them on the client side to remove the lag
but I don't know if that's the best way to do it
kirbyedy
@kirbyedy
Jul 14 2016 11:11
@shivam13 I will have to see your whole code, only two lines with links dont tell much
Shivam Mehta
@shivam13
Jul 14 2016 11:12
in code pen i add external css of bootstrap but it cant show me an icon of twitter
Martynas
@Marjanus
Jul 14 2016 11:12
@Torgian it looks nice, but I would advice using more self-explaining variable names. "ch" and especially "cc" are not the best choices. Moreover, if you plan, that certain elements will be frequently selected as event handlers, read about jQuery 's .closest() and .find()
Shivam Mehta
@shivam13
Jul 14 2016 11:12
@kirbyedy
Nathaniel Nasarow
@Torgian
Jul 14 2016 11:15
@Marjanus thanks mate, I'll bookmark those
CamperBot
@camperbot
Jul 14 2016 11:15
torgian sends brownie points to @marjanus :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @marjanus |http://www.freecodecamp.com/marjanus
anurag
@anuragparmar
Jul 14 2016 11:16
https://www.freecodecamp.com/challenges/style-text-inputs-as-form-controls#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-8%22%3E%0A%20%20%20%20%20%20%3Ch2%20class%3D%22text-primary%20text-center%22%3ECatPhotoApp%3C%2Fh2%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22img-responsive%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-running-cats%22%20class%3D%22img-responsive%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-primary%22%3E%3Ci%20class%3D%22fa%20fa-thumbs-up%22%3E%3C%2Fi%3E%20Like%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-info%22%3E%3Ci%20class%3D%22fa%20fa-info-circle%22%3E%3C%2Fi%3E%20Info%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-danger%22%3E%3Ci%20class%3D%22fa%20fa-trash%22%3E%3C%2Fi%3E%20Delete%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cp%3EThings%20cats%20%3Cspan%20class%3D%22text-danger%22%3Elove%3A%3C%2Fspan%3E%3C%2Fp%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%20%20%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%20%20%3Col%3E%0A%20%20%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%20%20%3C%2Fol%3E%0A%20%20%3Cform%20fccfaa%3D%22%2Fsubmit-cat-photo%22%20class%3D%22form-control%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Indoor%3C%2Flabel%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Outdoor%3C%2Flabel%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Loving%3C%2Flabel%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Lazy%3C%2Flabel%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Crazy%3C%2Flabel%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%20required%3E%0A%20%20%20%20%3Cbutton%20type%3D%22submit%22%20class%3D%22btn%20btn-primary%22%20%3E%3Ci%20class%3D%22fa%20fa-paper-plane%22%3E%3C%2Fi%3E%20%20Submit%3C%2Fbutton%3E%0A%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A
help me with this
CamperBot
@camperbot
Jul 14 2016 11:16
no wiki entry for: me with this
anurag
@anuragparmar
Jul 14 2016 11:16
@camperbot wt
codercooooder
@codercooooder
Jul 14 2016 11:38
Hey all, I could use some help positioning some animated css Divs. I found a tutorial for books that animate on hover..but I want to create them so the books are on both sides of the page, one which is aligned left (identitical to the one in the tutorial I got it from), another which is aligned right. I'm almost done, but if you look you'll see I can't figure out how to align the spine of the right book - can you help me figure out what I am doing wrong?:http://codepen.io/ihatecoding/pen/BzJoJZ
shweta rajput
@ShwetaRajput
Jul 14 2016 11:42
hello everyone i am doing my wikipedia project. this is my link: https://codepen.io/shwetarajput012/pen/AXbOJQ?editors=1010
gitgenie
@gitgenie
Jul 14 2016 11:43
@codercooooder working fine for me if i remove right:0
shweta rajput
@ShwetaRajput
Jul 14 2016 11:43
would you please help me to link my search button with results of wikipedia?
codercooooder
@codercooooder
Jul 14 2016 11:44
@gitgenie which line?
gitgenie
@gitgenie
Jul 14 2016 11:45
rightBookDiv
remove from css this class rightBookDiv
codercooooder
@codercooooder
Jul 14 2016 11:46
sorry, which line in the css @gitgenie
but you realize @gitgenie that it is important to me that the book is floated right
shweta rajput
@ShwetaRajput
Jul 14 2016 11:46
@AllanFox could you help me with my wikipedia project? i want to link my search button with wikipedia results...https://codepen.io/shwetarajput012/pen/AXbOJQ?editors=1010
codercooooder
@codercooooder
Jul 14 2016 11:47
@gitgenie I want the right book pushed completely toward the right side of the screen
gitgenie
@gitgenie
Jul 14 2016 11:47
@codercooooder line 88. ot will be aligned right
codercooooder
@codercooooder
Jul 14 2016 11:48
@gitgenie it is algned left if I do that
@gitgenie I want the book to float right
I just implemented your fix if you want to see @gitgenie
@gitgenie you can reload
gitgenie
@gitgenie
Jul 14 2016 11:52
i tried too. is working for me.
codercooooder
@codercooooder
Jul 14 2016 11:53
@gitgenie can you fork and show me... I think you don't realize the book is not ALL THE WAY RIGHT.
@gitgenie it is on the right side of the screen if i apply your fix, but it is still aligned left in the div if I apply it.
gitgenie
@gitgenie
Jul 14 2016 11:54
codercooooder
@codercooooder
Jul 14 2016 11:54
@gitgenie , that is aligned left in the div
@gitgenie don't you see the space on the right next to the book. no bueno
gitgenie
@gitgenie
Jul 14 2016 11:55
oh i see what you mean
codercooooder
@codercooooder
Jul 14 2016 11:56
@gitgenie that is why i have that right: 0 there, it helps but I need the spine to also move right..
.bk-left is the spine
more specifically .bk-left .rightBookDiv
Hassan ben haj
@Hassanbhb
Jul 14 2016 12:06
$(document).ready(function(){
    var key_api = "1f87fb77d263be74b2888a5974bf89cd";
    var baseUrl = "http://api.openweathermap.org/data/2.5/weather?";
    var lat;
    var lon;
    var country;
    var city;
    var LocationData="";
    //get the longtitude and latitude and displaying the location
    $.getJSON("http://ip-api.com/json", function(data){
        lat = "lat="+data.lat;
        lon = "lon="+data.lon;
        country = data.country;
        city = data.city;
        LocationData += "<p class ='Location'>"+country+" / "+city+ "</p>";
        $(".info").html(LocationData); 
        $.ajax({
            url: baseUrl+lat+"&"+lon+"&"+key_api,
            dataType: 'jsonp',
            success: function(info) {
                console.log(info);
               }
        })
    })        


})
the console gives me an error , why?
sleh
@MarlboroGrammer
Jul 14 2016 12:14
Hello
I need helo with wikipedia viewer
Matthew Hand
@mmhand123
Jul 14 2016 12:15
@Hassanbhb what error is it giving?
Stephen James
@sjames1958gm
Jul 14 2016 13:13
@Hassanbhb Don't you need something in front of your api key like appid= or something -
One
@JunLargo
Jul 14 2016 13:15
Hello World
CamperBot
@camperbot
Jul 14 2016 13:15

welcome to FreeCodeCamp @JunLargo!

Krishna Sai Gullapalli
@Krish2704
Jul 14 2016 13:21
@Hassanbhb cehck if your URL is working
Joshua
@hughes92
Jul 14 2016 13:37
Hi every one I'm not sure if this is the right group to post this in but looking to get some help on my portfolio page. I cant seem to figure out why my content is overlapping the bottom of my jumbotron div https://codepen.io/Joshua92/full/KzOagO/
NixonRichard
@NixonRichard
Jul 14 2016 13:39
hi guyz
@hughes92 i see nothing s wrong with ur app
This message was deleted
hi guyz this s my weather app so far
Joshua
@hughes92
Jul 14 2016 13:42
you have to open it in full desktop view to see the issure
issue*
i dont know why it wont show me the weather
@hughes92 i think it looks good
what do the jumbotron class do thug ?
Joshua
@hughes92
Jul 14 2016 13:45
@NixonRichard On my end the intro paragraph and photo stick outside the bottom of the jumbotron div
NixonRichard
@NixonRichard
Jul 14 2016 13:46
well
@hughes92 hey maybe u can smaller the img size
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:08
Did anyone here have the same problem as me with the Wikipedia Viewer assignment? "XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access."
Richard Howell
@RichardHowell879
Jul 14 2016 14:36
Hey everyone. I'm new to HTML and I'm doing the Tribute Page activity. I'm trying to get a picture of this guy for my page, but none of the links I've tried work. The only image I can get to work is the relaxed cat from a previous activity. Here's an example of what I've been doing : <img src="https://en.wikipedia.org/wiki/File:Aneurin_Bevan_and_his_wife_Jenny_Lee_in_Corwen_(15368872658).jpg" alt="aneurin bevan">
Ive tried loads of different links and images. What am I doing wrong?
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:37
@RichardHowell879 strange
Richard Howell
@RichardHowell879
Jul 14 2016 14:39
Yup
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:39
@RichardHowell879 got it
@RichardHowell879 the page you were trying to access in the img was protected I guess
@RichardHowell879 I just followed the link in your original post and clicked the image itself and got the this link
@RichardHowell879 perhaps it was not protected, but it was not a link to an image, you see? even though it ended in jpg it was a link to a page that showed the image, but also showed other things, so your <img> tag got confused
Richard Howell
@RichardHowell879
Jul 14 2016 14:42
@hvuntokrul Thanks. I obviously have plenty to learn!
CamperBot
@camperbot
Jul 14 2016 14:42
richardhowell879 sends brownie points to @hvuntokrul :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @hvuntokrul |http://www.freecodecamp.com/hvuntokrul
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:42
@RichardHowell879 don't we all :)
Richard Howell
@RichardHowell879
Jul 14 2016 14:43
lol I geuss I just sent some brownie points!
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:44
@RichardHowell879 it does automatically if you thank someone
CamperBot
@camperbot
Jul 14 2016 14:44
hvuntokrul sends brownie points to @richardhowell879 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @richardhowell879 |http://www.freecodecamp.com/richardhowell879
Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:44
@RichardHowell879 you see, I used that word in a message you were tagged in and the bot automatically transferred one from me to you
Daniel Sousa
@dgsousa
Jul 14 2016 14:50
hey if anyone knows anything about angularjs, would you mind explaining to me why this isn't return the get request? http://codepen.io/danielmooncloud/pen/GqOzWv?editors=1011
Ken Haduch
@khaduch
Jul 14 2016 14:52

@RichardHowell879 - some sites just won't allow cross-linking of images - imgur is one that won't, for example. Lots of people try to use URLs to reference images from there. In their Terms of Service, they say something like "we don't want to be the host for your images" (that you're trying to use on your websites.) I'm willing to bet that other photo sites are going to block access, too. Oh, one thing about imgur photos, for example, is that if you are logged in to their site, you can see the pictures on the computer that you are logged in on. I guess that is one reason to have other people test the functionality of your site, because conditions vary.

It is helpful, when you're having access problems, to check the developer's console in the browser and see if it is flagging errors of some type.

Yuriy Medentsii
@hvuntokrul
Jul 14 2016 14:53
@danielmooncloud sorry, no idea
anyone can help me out with understanding why the Wikipedia API is not working on my page?
Ken Haduch
@khaduch
Jul 14 2016 14:54
@RichardHowell879 - BTW, there are sites that you can use for photos, such as http://postimg.org/ - if you have photos that you want to use (and, I imagine, the rights to use them.)
@danielmooncloud - I don't know angular, but I'm willing to take a look, just to see if anything jumps out at me?
Leo Sizaret
@Bungou
Jul 14 2016 15:00
Hello, I have a Z issue! :D
I'd like the flowers (which are a fixed background image) to appear behind certain elements, behind the purple div for example.
I tried z-index but no luck .. :(
http://codepen.io/Bungou/pen/xOpGvR
Adetunji Iyaniwura
@Iadetunji
Jul 14 2016 15:00
http://codepen.io/Iadetunji/pen/AXQaaN,having issue with the location display
Ken Haduch
@khaduch
Jul 14 2016 15:01

@danielmooncloud - this might not be a breakthrough, but I did add one thing to your code, to invoke the function:

    $scope.wikiviewer = function() {
      return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/emails-api/emails.json')
        .success(function(data) {
          $scope.list = data;
        })
    }
    $scope.wikiviewer();  // <<<----  I added this

And it dumped output to the screen.

@danielmooncloud - but I'm not sure if you should have had to do that, or if Angular should have automatically invoked that? As I said, I don't know Angular, or know very little about it... watched a couple videos a while ago?
Daniel Sousa
@dgsousa
Jul 14 2016 15:09
hmm yeah i dont think you usually invoke the function in angular like that
also it should already be triggered with a click event
Ken Haduch
@khaduch
Jul 14 2016 15:13
@Bungou - I did a number of things to your page - I cleaned up HTML code that sould not be there on CodePen - eliminating the <html>, <head> and <body> tags (and the corresponding closing tags, and necessary sections of code), then I added the z_index:-1 to your .wrapper-all class, and it seems that the background image does go "behind" the purple div. I'll post a screen shot next...
blob
Leo Sizaret
@Bungou
Jul 14 2016 15:15
@khaduch Indeed it does, tried it off codepen! Ty :)
CamperBot
@camperbot
Jul 14 2016 15:15
bungou sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Jul 14 2016 15:15
@Bungou - the CodePen way of posting code is that you cannot put the <html>, <head> and <body> tags in the HTML panel. There are places for the links, CSS code, etc in the other panels. CodePen populates a template that already contains those tags. I'm not sure if the changes that I made to your HTML helped with the z-index behavior?
CamperBot
@camperbot
Jul 14 2016 15:15
:star2: 1440 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 14 2016 15:16
@Bungou - great!
Leo Sizaret
@Bungou
Jul 14 2016 15:16
@khaduch My issue is this: When I set the flowers' z-index to 1, and any other element's z-index higher than 1, they still are in front.
@khaduch which I don't understand D:
Ken Haduch
@khaduch
Jul 14 2016 15:22
@Bungou - well, the interesting thing is that usually when you use a background image, it is usually behind everything? I haven't really studied your code (and I don't use Sass, so I'm not sure if there are any idiosyncrasies there?) If you assigned the background image to the body element - would that be what you want? As I see it (I still have your project opened with my changes) the flower background image is now behind everything - the text down below appears in front of it where they overlap? What am I missing?
Adetunji Iyaniwura
@Iadetunji
Jul 14 2016 15:25
http://codepen.io/Iadetunji/pen/AXQaaN, need urgent help on this project
Leo Sizaret
@Bungou
Jul 14 2016 15:25
@khaduch Nothing, I am probably making a fuss for nothing haha. I'm simply looking to understand why my first attempt didn't work (set flower z to 1, and other stuff greater than 1)
Ken Haduch
@khaduch
Jul 14 2016 15:26
@Bungou - I don't really know too much about z-index, I've never messed around with it to any great extent? But Im trying to set the purple div button-wrapp to a z-index of 5. It is interesting.
Richard Howell
@RichardHowell879
Jul 14 2016 15:27
Anyone know how to put a border around some text without it taking up the entire screen width?
Ken Haduch
@khaduch
Jul 14 2016 15:27
@Bungou - perhaps this from w3schools.com - Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). would be an indication of why this isn't working?
Leo Sizaret
@Bungou
Jul 14 2016 15:28
@khaduch Oh great point! The purple div probably has position:none?
Ken Haduch
@khaduch
Jul 14 2016 15:29
@Bungou - I just put position: relative on it, in the browser dev tools, and it does pop it on top of the flower background....
Leo Sizaret
@Bungou
Jul 14 2016 15:30
@khaduch You're amazing, thank you very much :D It's clear now
CamperBot
@camperbot
Jul 14 2016 15:30
bungou sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: bungou already gave khaduch points
can someone tell me why my code doesnt work ?
it doesnt return the weather
Hector Garcia
@augmt
Jul 14 2016 15:48
@NixonRichard to use geolocation on chrome you need to be on https
but if you try it on https, the console will complain about mixed content
Dom Hackl
@lotusbob
Jul 14 2016 15:50
guys what do you think of my tribute page http://codepen.io/lotusbob/pen/WxdxJN
Hector Garcia
@augmt
Jul 14 2016 15:51
@lotusbob i like it, looks great to me
Ananay
@ananaymital
Jul 14 2016 15:54
@NixonRichard try this
$.ajax({
  url : "http://ip-api.com/json",
    success: function(data) {

    }
});
open the link in new tab
use the position coord from data to make another ajax call with the openweather url
greg
@wearenotgroot
Jul 14 2016 15:59
@Iadetunji you've got an error Referenceerror: weatherCondition that's why the code stops and doesnt display the location, if you comment out the switch for a moment you'll see the location displays
Ananay
@ananaymital
Jul 14 2016 16:00
This message was deleted
@wearenotgroot please help me with twitch.tv please http://codepen.io/Deadpool37/pen/XKzpjr?editors=0010
greg
@wearenotgroot
Jul 14 2016 16:04
@Deadpool37 what seem to be the problem?
Ananay
@ananaymital
Jul 14 2016 16:04
it is super slow and offline doesn't work
greg
@wearenotgroot
Jul 14 2016 16:09
streams?stream_type=all do you know what it does?
greg
@wearenotgroot
Jul 14 2016 16:16
@Deadpool37 i think you better just create your own list of channel
@Deadpool37 and adding offline and online classes on the div of each channel then using jquery to hide and show them
Adetunji Iyaniwura
@Iadetunji
Jul 14 2016 16:24
@wearenotgroot ,the comment out did not work
greg
@wearenotgroot
Jul 14 2016 16:26
@Iadetunji btw using firefox as chrome doesnt work with geolocation on http
function switchImg() {
  /*switch (main) {
    case "Thunderstorm":
      document.getElementById("image").src = weatherCondition.thunderstorm;
      break;
    case "Drizzle":
      document.getElementById("image").src = weatherCondition.drizzle;
      break;
    case "Rain":
      document.getElementById("image").src = weatherCondition.rain;
      break;
    case "Snow":
      document.getElementById("image").src = weatherCondition.snow;
      break;
    case "Clear":
      document.getElementById("image").src = weatherCondition.clear;
      break;
    case "Clouds":
      document.getElementById("image").src = weatherCondition.clouds;
      break;
    case "Extreme":
      document.getElementById("image").src = weatherCondition.extreme;
      break;
  }*/
  $("#location").text(name + ", " + country);
  $("#main").text(main);
  $("#span").prepend(temp);
  $("#pressure").append(pressure + " hPa");
  $("#humidity").append(humidity + " %");
  $("#wind").append(windSpeed + " m/s");
}
@Iadetunji what is weatherCondition anyways? and where is it from?
@Iadetunji some sort of object with bunch or url for images? or icons?
Adetunji Iyaniwura
@Iadetunji
Jul 14 2016 16:30
@wearenotgroot , Thank You am getting results
CamperBot
@camperbot
Jul 14 2016 16:30
iadetunji sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1218 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Jul 14 2016 16:32
@Iadetunji just pay attention to the erros, they will indicate which line of code is causing it(not accurate sometimes)
Adetunji Iyaniwura
@Iadetunji
Jul 14 2016 16:32
@wearenotgroot ,i will take note
vaibhav sharma
@vaibsharma
Jul 14 2016 16:45
Hello everyone . Currently I am working on a Whether App. I want to whether in ajax we can do things like this or not
// $.ajax({
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:45
@vaibsharma you can do everything you want to get the result/desired solution.
vaibhav sharma
@vaibsharma
Jul 14 2016 16:46
url : ""http://api.openweathermap.org/data/2.5/weather?q=" +"Delhi"+"&&units=metric&APPID=061f24cf3cde2f60644a8240302983f2&callback=";
@IMDhruv no , like adding string in the url of the ajax
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:47
Yes, something like
$.getJSON("https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon="+ longitude + "&APPID=" + APP_ID + "&callback=", callbackFuncWithData);
}
vaibhav sharma
@vaibsharma
Jul 14 2016 16:48
yes
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:48
replace/define those variables though...
vaibhav sharma
@vaibsharma
Jul 14 2016 16:48
check my pen
@IMDhruv
and also please check getweatherURL() function too . @IMDhruv
Martti123
@Martti123
Jul 14 2016 16:51
hey all im really noob to coding and stuff.. im struggling to add picture for my tribute page
where do you get them
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:52
@vaibsharma I am checking your codepen, you check https://jsfiddle.net/dedfjppc/18/
vaibhav sharma
@vaibsharma
Jul 14 2016 16:52
Add { background : url(" ") ; } in your@Martti123
Martti123
@Martti123
Jul 14 2016 16:52
url is the problem i have tried many jpg urls and they dont work
all it shows is link on a work tabel and no picture
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:53
vaibhav sharma
@vaibsharma
Jul 14 2016 16:56
@IMDhruv Thanx a lot for correcting my pen but I couldn'y understood the difference between these two pen . I mean they both were correct in their approach
CamperBot
@camperbot
Jul 14 2016 16:56
vaibsharma sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:cookie: 76 | @imdhruv |http://www.freecodecamp.com/imdhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:57
@vaibsharma Yes, both are different but does the same Job., Yours uses ipinfo to get the data whereas other uses Users browser to get the location data., I just wanted you to see the other code..
checkmate-bitch
@checkmate-bitch
Jul 14 2016 16:59
I have a query. How do you create spaces (vertical) around div elements when using bootstrap. Right now I'm implementing custom css to accomplish this task. Is there a standard way to do this?
Dhruv Kumar
@IMDhruv
Jul 14 2016 16:59
@checkmate-bitch Usually you just use margin and padding for those., You can write your own helper class for spacing
vaibhav sharma
@vaibsharma
Jul 14 2016 17:00
@IMDhruv Yes I got your code . But I am talking about the one which you corrected .
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:01
Ok, well the issue was 1. you were setting data for #temp but it was defined as a class .temp in the html
checkmate-bitch
@checkmate-bitch
Jul 14 2016 17:01
@IMDhruv I'm using margin. But both margin and padding are custom. I wanted something standard like offset for horizontal. Isn't helper class a fancy name for custom css?
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:02
@vaibsharma you were calling city_country(); main(); together on document ready, So both functions were called even before the API call was made from city_country() so that was the issue.
@checkmate-bitch I don't think so, but they might have added it recently.. let me Google
checkmate-bitch
@checkmate-bitch
Jul 14 2016 17:04
@IMDhruv I googled but nothing everything was custom.
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:04
@checkmate-bitch Officially theres not class to add the spacing, but you can do something like https://coderwall.com/p/0jezca/vertical-spacing-for-bootstrap-columns
yes
vaibhav sharma
@vaibsharma
Jul 14 2016 17:05
No in city_country() I provided the string to city and later called getweatherURL() in the same function . So that when the call comes to main() both my variable city and URL are ready .
@IMDhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:06
Yes, the thing is your code called bot the functions together, So while the API call was being made, main() function was called but the URL was not yet defined
You should have called main() after getting the data from ipinfo and after setting the URL variable.
vaibhav sharma
@vaibsharma
Jul 14 2016 17:07
It was @IMDhruv . You can edit the code and check it other function and display it .
It was perfectly getting the desired code but why it was not working in url : of ajax
Tomáš Kalný
@Sleepy-guy
Jul 14 2016 17:08
hello quick question so I need a little help :D I need to create div using Jquery and then to that div add other divs but the problem is I need to do this while looping well I am using .map cuz its array and I need to do this in map function so i cant create div with some class and then select it $('.something') cuz it will add divs to every div with class something :D
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:08
@vaibsharma What i did was on document ready, call city_country() once it gets the data call getweatherURL(); which sets the URL and then calls main(), Doing this way main() has all the data it needs to make the API call.
Tomáš Kalný
@Sleepy-guy
Jul 14 2016 17:08
I dont know if you get me probably not
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:10
@Sleepy-guy you can maybe generate random numbers and use that with div names, you can also use the index of the current loop and use that as div class
vaibhav sharma
@vaibsharma
Jul 14 2016 17:12
I got your approach and it is correct but I am not getting what I did wrong . You just see I made certain changes in earlier code
And it is now showing the URL
@IMDhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:16
@vaibsharma thats because you are showing the URL in the code.,
Tomáš Kalný
@Sleepy-guy
Jul 14 2016 17:17
@IMDhruv I tried that but I am not sure if I am sellecting it properly then :D well i have var index which stores current index and div class with that index but then is it like this $('.'+index).append(); ?
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:18
do something like $('.class_'+index).append(); you cannot start a class name with a number
@Sleepy-guy you can do something like .a324354890 but not .1sdfdfgfd
Tomáš Kalný
@Sleepy-guy
Jul 14 2016 17:19
@IMDhruv oh ... thanks :D
CamperBot
@camperbot
Jul 14 2016 17:19
sleepy-guy sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:cookie: 78 | @imdhruv |http://www.freecodecamp.com/imdhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:20
@vaibsharma What do you want your code here to do? http://codepen.io/techobist/pen/xOpEkz
vaibhav sharma
@vaibsharma
Jul 14 2016 17:22
yes I changed it in that way but I thought , I am disturbing you from a while now :P
I got what you did in my code but didn't got what was wrong in my code . That's it . I want to know this thing only. Each and everything is working ,URL has got a value, but why isn't it doing its job in ajax url statement
@IMDhruv
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:25
Ok, so do you have the original code... how it was originally so i can go through it again?
vaibhav sharma
@vaibsharma
Jul 14 2016 17:25
yeah I do have
one min
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:25
Awesome, share it
checkmate-bitch
@checkmate-bitch
Jul 14 2016 17:26
Here is my pen. Could someone please review?
vaibhav sharma
@vaibsharma
Jul 14 2016 17:26
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:26
@checkmate-bitch Lot better than earlier
you've improved a lot
@checkmate-bitch add some space between navigation and the content, it might look even better
checkmate-bitch
@checkmate-bitch
Jul 14 2016 17:28
@IMDhruv A lot of custom was killing me. Bootstrap helped a lot. Thanks!
CamperBot
@camperbot
Jul 14 2016 17:28
:cookie: 79 | @imdhruv |http://www.freecodecamp.com/imdhruv
checkmate-bitch sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:29
@camperbot but you learn a lot doing it custom
David Clark
@DavidDoes
Jul 14 2016 17:29
Anyone have some ideas for placeholders for the portfolio project?
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:30

@vaibsharma So the problem is exact same as i said, remove the main() from

$(document).ready(function(){
  city_country();
  // main();
});

and place it in

{
 URL = "http://api.openweathermap.org/data/2.5/weather?q="+city+ "&&units=metric&APPID=061f24cf3cde2f60644a8240302983f2&callback=";
    main();
}

@vaibsharma It is not working because

$(document).ready(function(){
  city_country();
  main();
});

is called together, so main needs the URL variable to call the URL, but since main() is called just after city_country(); the URL is empty and so the error

So, what your code is doing is calling city_country(); and main(); at the same time, not like first call city_country(); and then main();
vaibhav sharma
@vaibsharma
Jul 14 2016 17:34
Oh that means isn't it doing like the compilers do in the C++ ?
I thought it should do that way !
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:34
:worried:
No, it follow top-down approach like PHP does
If you get the hang of this, i..e code/fucntions will be called at the same time and not one after another then Node JS will become lot easier for you.
vaibhav sharma
@vaibsharma
Jul 14 2016 17:36
okay thanx a lot @IMDhruv . Nice talking to you .
CamperBot
@camperbot
Jul 14 2016 17:36
vaibsharma sends brownie points to @imdhruv :sparkles: :thumbsup: :sparkles:
:warning: vaibsharma already gave imdhruv points
vaibhav sharma
@vaibsharma
Jul 14 2016 17:37
?? CamperBot you should give him brownie points . He cleared my another doubt :P
Dhruv Kumar
@IMDhruv
Jul 14 2016 17:38
Lol, you're welcome., Ask here if you have more doubts/issues.
vaibhav sharma
@vaibsharma
Jul 14 2016 17:38
Sure :)
Johnathan Mullen
@MrJkmullen
Jul 14 2016 18:08

need help displaying my second image on my second page display

http://codepen.io/jkmullen/pen/WxXQqo?editors=1100

Martynas
@Marjanus
Jul 14 2016 18:19
@MrJkmullen your image link goes nowhere.
David Clark
@DavidDoes
Jul 14 2016 18:22
I did it! It took a few days, but dang it looks good, I think!
http://codepen.io/SlouchingToast/full/VjryZk/
MikeBeers
@MikeBeers
Jul 14 2016 18:27
Looking for some help with bootstrap.
I have nested columns and a img in each column. As I resize my screen one of the heading goes from one line to two lines. Looking for advice on a fix for this issue
This makes my images get out of line
David Clark
@DavidDoes
Jul 14 2016 18:30
@MikeBeers Use text-size:%vm;
Emerson Havener
@ehavener
Jul 14 2016 18:30

Hey so I'm still working on the wikipedia project. Can anyone tell me why this works:

 $.ajax( {
      url: "https://api.github.com/users/mralexgray/repos",
      dataType: 'json',
      success: function(data) {
         console.log("git ajax ran");
      },
      error: function(textStatus, errorThrown){
         console.log(errorThrown);
      }
    } );

but this errors:

 $.ajax( {
      url: "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json",
      dataType: 'json',
      success: function(data) {
         console.log("git ajax ran");
      },
      error: function(textStatus, errorThrown){
         console.log(errorThrown);
      }
    } );

One's a github json file, the other is from the mediawiki api doc. Both display fine in my browser but I can't http get the wikipedia page.

David Clark
@DavidDoes
Jul 14 2016 18:30
Where % is, insert a numerical value for a % of the viewport window. @MikeBeers
Stephen James
@sjames1958gm
Jul 14 2016 18:30
@ehavener Check your devtools console for errors.
MikeBeers
@MikeBeers
Jul 14 2016 18:31
@SlouchingToast thanks
CamperBot
@camperbot
Jul 14 2016 18:31
mikebeers sends brownie points to @slouchingtoast :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @slouchingtoast |http://www.freecodecamp.com/slouchingtoast
David Clark
@DavidDoes
Jul 14 2016 18:31
No problem! It'll auto-scale your text :)
Johnathan Mullen
@MrJkmullen
Jul 14 2016 18:36
trying to get my img or the right side of the page http://codepen.io/jkmullen/pen/WxXQqo
Martynas
@Marjanus
Jul 14 2016 18:38
@MrJkmullen you can use col-offset of the grid system http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
Johnathan Mullen
@MrJkmullen
Jul 14 2016 18:43
thanks @Marjanus
CamperBot
@camperbot
Jul 14 2016 18:43
mrjkmullen sends brownie points to @marjanus :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @marjanus |http://www.freecodecamp.com/marjanus
Chris
@chriswhurd20
Jul 14 2016 18:43
Hi I am struggling trying to figure something out code wise
Chris
@chriswhurd20
Jul 14 2016 18:49
can i get some help?
Tristan Larsin
@tlarsin
Jul 14 2016 18:49
Hey everyone I am having issues with my CSS and Safari. For some reason the border covers all 4 sides instead of just one. Here is the code. http://codepen.io/tlarsin/pen/KrkNbE
Chris
@chriswhurd20
Jul 14 2016 18:50
Tristan how do you send your Pen like that a
or did you just cope paste the url?
Tristan Larsin
@tlarsin
Jul 14 2016 18:51
@chriswhurd20 You just oaste the url
paste
Chris
@chriswhurd20
Jul 14 2016 18:51
ok thanks
I am having touble get the "PRIME Consulting" onto the grey border line, any suggestions?
Tristan Larsin
@tlarsin
Jul 14 2016 18:54
@chriswhurd20 #logo h2 {
padding-top:40px;
}
Chris
@chriswhurd20
Jul 14 2016 18:55
Tristan, I appreciate it man!
Tristan Larsin
@tlarsin
Jul 14 2016 18:55
@chriswhurd20 No problem!
Sebastien Robitaille
@sssmc
Jul 14 2016 19:00
Hey, I'm having trouble getting all the social icons on the same row in my collapsed navbar menu. Any ideas why? (note: I am using two sets of icons: one for in the collapsed navbar and one for the normal one)
Daniel Sousa
@dgsousa
Jul 14 2016 19:07
hey im working on the wikiproject. I've figured out how to get the list of query results, but im still working on how to get the first snippet of the article. Does anyone know?
Kunal Gupta
@kunalgupta05
Jul 14 2016 19:13
I proudly present to you my wiki viewer, i was short of design inspiration for this project so i went for the design of the most popular search engine in the world-Google, hope i did justice to its design. Would really appreciate any kind of feedback, i would love to hear from you guys:)
Here's the link -- http://codepen.io/Kunal05/full/vKZNzo/
willcodes
@willcodes
Jul 14 2016 19:16
I want to add fadeIn to my random quote generator, but once I added the function it no longer works -_-, I'm obviously way off on this one, can someone help me out?
function randomQuote() {
 var random = quotes[Math.floor(Math.random() *quotes.length)];
 $("#thisquote").text(random.quote);

  $("#thisauthor").text("-" +random.author);



};
  function changeColor() {
    var change = colors[Math.floor(Math.random() *colors.length)];
    $('body').css("background", change);
    $('#getQuote').css("background", change);
  };
  function fader() {
    $("#thisquote").fadeIn( "slow", function() {

  });
});


  $('.btn').click(function() {

    randomQuote();
    changeColor();


});

});
@kunalgupta05 wow cool man
Kunal Gupta
@kunalgupta05
Jul 14 2016 19:17
@danielmooncloud you can check out my code to figure it out how you can retrieve the snippet
@willcodes thanks :)
CamperBot
@camperbot
Jul 14 2016 19:18
kunalgupta05 sends brownie points to @willcodes :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @willcodes |http://www.freecodecamp.com/willcodes
willcodes
@willcodes
Jul 14 2016 19:20
@kunalgupta05 do you know how I could add the click to my random quote generator? to make the text fadeIn?
function randomQuote() {
 var random = quotes[Math.floor(Math.random() *quotes.length)];
 $("#thisquote").text(random.quote);

  $("#thisauthor").text("-" +random.author);



};
  function changeColor() {
    var change = colors[Math.floor(Math.random() *colors.length)];
    $('body').css("background", change);
    $('#getQuote').css("background", change);
  };
  function fader() {
    $("#thisquote").fadeIn( "slow", function() {

  });
});


  $('.btn').click(function() {

    randomQuote();
    changeColor();


});

});
i called the fader function but that didn't work lol
Gavin Broekema
@GavinGoneWild
Jul 14 2016 19:22
Can someone help me out with this one??
function mutation(arr) {
  var letters1 = arr[1].toLowerCase().split("");

  for (var i = 0; i <= letters1.length; i++) {
    if (arr[0].toLowerCase().indexOf(letters1[i]) !== -1) {
      return true;
    } else {
      return false;
    }
  }

}

mutation(["hello", "hey"]);
Kunal Gupta
@kunalgupta05
Jul 14 2016 19:24
@willcodes why don't you use the simple fadeIn with just the "slow " as an argument, omit that function part
@please share your codepen link i will check it out
willcodes
@willcodes
Jul 14 2016 19:27
@kunalgupta05 I revised it but still didnt work
Kunal Gupta
@kunalgupta05
Jul 14 2016 19:46
Actually @willcodes its working now
you gotta understand one thing fadeIn will work only if your quote is not present or if it is hidden in the first place so that when you change its state you can see the fadeIn effect in work
willcodes
@willcodes
Jul 14 2016 19:49
@kunalgupta05 thanks
CamperBot
@camperbot
Jul 14 2016 19:49
willcodes sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @kunalgupta05 |http://www.freecodecamp.com/kunalgupta05
willcodes
@willcodes
Jul 14 2016 19:49
@kunalgupta05 I want it to fade though, maybe I could animate it haha
Kunal Gupta
@kunalgupta05
Jul 14 2016 19:50
@willcodes i forked your project, you can check out the javascript in the editorial view -- http://codepen.io/Kunal05/full/qNpRVV/
@willcodes tell me if you have any questions, i will be happy to explain it to you
Evan Davis
@davisec52
Jul 14 2016 19:55

@someone - I am re-making my portfolio page but not using
bootstrap, only css3 and html5.

Right now I am trying to make a button with three
horizontal icon-bars, much like the bootstrap
button that indicates a collapsed menu.

For some reason, the button only displays a
single icon-bar. I would appreciate someone
explaining why and how to fix.

The codepen link: http://codepen.io/davisec52/pen/pbdBwW?editors=1100

    ```
    html for button:

    <div class="navbar-head">
      <button type="button" class="nav-toggle" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"</span>
        <span class="icon-bar"</span>
        <span class="icon-bar"</span>
      </button>
    </div> <!-- .navbar-head -->

    ```

    ```
    css for the icon-bar:

      .icon-bar {
      display: block;
      width: 30px;
      height: 3px;
      margin: 0 auto;
      background-color: #111;
      border-radius: 1px;
    }

    ```
Luke
@lukenetti3
Jul 14 2016 19:58
Can someone please take a look at this for me quick. When I search something and then click on the link, why does it open in codepen and not open a new tab? I followed the same instructions as I did for my tribute page, but for some reason it won't work. http://codepen.io/lukenetti3/pen/akwEQk
Kunal Gupta
@kunalgupta05
Jul 14 2016 20:03
@lukenetti3 you forgot to put target=_blank attribute to the anchor tag where you are appending your wiki data to the $resultsec variable
that should easily fix the issue
Luke
@lukenetti3
Jul 14 2016 20:15
@kunalgupta05 I tried that and it still doesn't seem to work. http://codepen.io/lukenetti3/pen/akwEQk?editors=1000
Thompson Ike
@hubhubace
Jul 14 2016 20:17
i need help with php
anyone?
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jul 14 2016 20:24
@hubhubace I'm a beginner in PHP but you can still ask !
Spartano
@Spartano
Jul 14 2016 20:25
Hy, i am doing the Game of Life React Challenge, and i was just wondering what is the purpose of this challenge? What sould we learn? Why dont we use Canvas for this challenge?
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 20:25
@lukenetti3 your random entry is opening up in a different browser because you've got target="_blank". The problem with you search results is that, when you append your data results, you've got them in an <a> tag but you haven't included target="_blank" on those <a> tags
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jul 14 2016 20:28
@Spartano That's funny, I was about to ask the same question
I assume it's in order to master React
Kunal Gupta
@kunalgupta05
Jul 14 2016 20:29
@lukenetti3 You still haven't written target='_blank' in the anchor tag where you append your data that's why it is not working
Spartano
@Spartano
Jul 14 2016 20:29
This message was deleted
@thomlom i was thinking about performance
@thomlom cuz you will be creating a lots of divs
:)
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jul 14 2016 20:30
@Spartano Yes indeed!
Spartano
@Spartano
Jul 14 2016 20:31
@thomlom have you finished the chalenge?
Luke
@lukenetti3
Jul 14 2016 20:31
@kunalgupta05 Sorry, misunderstood what you were saying. I got it now. Thanks!
CamperBot
@camperbot
Jul 14 2016 20:31
lukenetti3 sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @kunalgupta05 |http://www.freecodecamp.com/kunalgupta05
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jul 14 2016 20:32
No, I'm at the very beginning of the challenge! And you?
Spartano
@Spartano
Jul 14 2016 20:32
@thomlom wanna pair?
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jul 14 2016 20:33
@Spartano Why not!
Spartano
@Spartano
Jul 14 2016 20:34
@thomlom i send you a private message
Evan Davis
@davisec52
Jul 14 2016 20:35

Hi. I'm trying to make a button with three horizontal icon-bars
to indicate a collapsed menu. For some reason only one icon-bar
appears on the button.

Any chance someone could take a quick look at this?

I've included the html and css below. I'll
be happy to post the codepen link upon request.

    ```
    <div class="navbar-head">
      <button type="button" class="nav-toggle" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"</span>
        <span class="icon-bar"</span>
        <span class="icon-bar"</span>
      </button>
    </div> <!-- .navbar-head -->


      .icon-bar {
      display: block;
      width: 30px;
      height: 3px;
      margin: 0 auto;
      background-color: #111;
      border-radius: 1px;
    }

    ```
Chris Rutherford
@cjrutherford
Jul 14 2016 20:38
@khaduch ah that explains so much!
Ken Nawrocki
@nawrockp
Jul 14 2016 20:42
@davisec52 you need to put">"s after "icon-bar"s
You opening span tag isnt complete
Evan Davis
@davisec52
Jul 14 2016 20:45
@nawrockp Aiiiiiiii.
Thank you. Jeez, just couldn't see it.
I new it was something silly and stupid. Many thanks @nawrockp
CamperBot
@camperbot
Jul 14 2016 20:46
davisec52 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @nawrockp |http://www.freecodecamp.com/nawrockp
Ken Nawrocki
@nawrockp
Jul 14 2016 20:46
Np
Evan Davis
@davisec52
Jul 14 2016 20:49
@nawrockp Actually, I closed up the span tags but there is still only one icon-bar showing.
Ken Nawrocki
@nawrockp
Jul 14 2016 20:51
@davisec52 do you have a link?
I am on my phone so hard to inspect. But perhaps a margin below each span would help.
Evan Davis
@davisec52
Jul 14 2016 20:53
coming up
Ken Nawrocki
@nawrockp
Jul 14 2016 20:56
Yeah try margin:3px auto;
Evan Davis
@davisec52
Jul 14 2016 20:56
@nawrockp yes, adding the margin does the trick.
Ken Nawrocki
@nawrockp
Jul 14 2016 20:56
You might have to play with the margin
Adam Jacks
@AdamHJ123
Jul 14 2016 20:59
Guys, I'm trying to use jQuery and animate.css to make one image zoom out and another image zoom in when a button is clicked but it's only showing the second image zooming in, any idea why?
Evan Davis
@davisec52
Jul 14 2016 20:59
@nawrockp much appreciated. I'm using percents, so I have something like: margin: 15% auto;
Adam Jacks
@AdamHJ123
Jul 14 2016 20:59
Here's the project:
http://codepen.io/AdamHJacks/pen/bZokzp
Take note, I have only written the code for the right arrow so far
Anyone have any ideas how I can fix that?
disjfa
@disjfa
Jul 14 2016 21:09
You add a $("#img-1").hide(); on the images to hide them. Dont hide them and change your setup
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:12
@AdamHJ123 I think the problem is that you're hiding the image immediately after you set the animation class (that has a delayed transition for the effect to work). Try throwing some delay time onto your hide()s and show()s so everything has time to run?
@AdamHJ123 I played around with it myself and I think some delay time on your hide()s will give you what you want. I'm not entirely clear on what you want the overall effect to be, so maybe if you play around with it
Chris Rutherford
@cjrutherford
Jul 14 2016 21:16
hmmm.... trying to figure out why it's now not working properly.... I can't see where my lines should end in code pen.....
disjfa
@disjfa
Jul 14 2016 21:17
hit tidy in the pulldown
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:20
@cjrutherford You just haven't closed some functions properly. Doing what @disjfa suggested really helps with finding those kinds of errors
Chris Rutherford
@cjrutherford
Jul 14 2016 21:20
@FreyaRhianna yeah, and code pen isn't really doing a good job when tidying...
disjfa
@disjfa
Jul 14 2016 21:21
Use a editor and edit on your computer. Just keep in mind what codepen needs
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:22
@cjrutherford I feel you, the cramped display can get real confusing. @disjfa that's a really good idea.
Adam Jacks
@AdamHJ123
Jul 14 2016 21:23
@FreyaRhianna Thank you very much
CamperBot
@camperbot
Jul 14 2016 21:23
adamhj123 sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:23
@cjrutherford the little arrows on the side of the display are really helpful too. If you can't collapse a function using an arrow, you can tell that you haven't closed it properly
Chris Rutherford
@cjrutherford
Jul 14 2016 21:23
@FreyaRhianna that works! thanks
CamperBot
@camperbot
Jul 14 2016 21:23
cjrutherford sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
Tyler Moeller
@TylerMoeller
Jul 14 2016 21:23
@cjrutherford You're missing lots of closing brackets. Paste your javascript into this website and go through the errors reported one at a time until you close all the open brackets and parentheses. http://jshint.com/ (edit: chat lag - sorry for the duplicate response)
Adam Jacks
@AdamHJ123
Jul 14 2016 21:23
I've also found this to be the issue however I'm not sure a wait would be the best thing for it
Does anyone know how to detect when an animate.css animation finishes?
Chris Rutherford
@cjrutherford
Jul 14 2016 21:25
@TylerMoeller okay now that's awesome! thanks!
CamperBot
@camperbot
Jul 14 2016 21:25
cjrutherford sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 664 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adam Jacks
@AdamHJ123
Jul 14 2016 21:25
Like the callback function on the .animate() function?
disjfa
@disjfa
Jul 14 2016 21:25
animate in jQuery had a timeout
animatecss does not
But that is not the issue
just how all your images and add the classes one by one withoud hiding
Adam Jacks
@AdamHJ123
Jul 14 2016 21:27
I've changed it around a little, I'm confident it is the fact that the images are being hid immediately after the class is added
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:28
@AdamHJ123 is it a precision problem that you don't want to use a delay capability? Because by adding hide(1000) I got an effect that seems to me like what you want. (Unless I'm missing something, which I usually am)
Chris Rutherford
@cjrutherford
Jul 14 2016 21:28
it's still not loading though....
nvm missed a curly brace
Adam Jacks
@AdamHJ123
Jul 14 2016 21:29
@FreyaRhianna I'll try it out, I just want to keep my code as clean as possible which is an issue for me haha
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:30
@AdamHJ123 oh! I get that. Adding a 1000 to your brackets might be the cleanest way you can do it though. It's not as satisfying as pulling a precise time variable from somewhere (like you might get from a callback function, if there is one) but, in personal experience, when I fall down those kinds of rabbit holes, I end up having to hack my way back to working code.
Adam Jacks
@AdamHJ123
Jul 14 2016 21:32
@FreyaRhianna if I add the 1000 into the brackets it doesn't seem to hide the image at all
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:32
@AdamHJ123 really? I'm adding it myself to your codepen, and it's working for me. Where are you adding the 1000s? Is it in the hide brackets?
Tyler Moeller
@TylerMoeller
Jul 14 2016 21:32
@cjrutherford You're getting close now. One more closing bracket at the very end and it will work.
disjfa
@disjfa
Jul 14 2016 21:34
Not quite there yet
Adam Jacks
@AdamHJ123
Jul 14 2016 21:34
@FreyaRhianna Nevermind, it is working however the next image is stretching the height of the div before shrinking into place
disjfa
@disjfa
Jul 14 2016 21:34
hit next a couple of times
Adam Jacks
@AdamHJ123
Jul 14 2016 21:37
@FreyaRhianna if you look at the effect how it is now on 10,000 you'll see that the second image isn't just appearing as I had hoped but sliding into place instead...
disjfa
@disjfa
Jul 14 2016 21:37
check my pen @AdamHJ123 ;)
Chris Rutherford
@cjrutherford
Jul 14 2016 21:38
got it now, just need to get the nav buttons working.
Adam Jacks
@AdamHJ123
Jul 14 2016 21:39
@disjfa Looking now
@disjfa Damn you man haha fair paly
MikeBeers
@MikeBeers
Jul 14 2016 21:40
Question on bootstrap. I am resizing my browser and when I get below 768 the images move to a single column on the screen. Issue is that the heading of these images are pushed to the right. I feel like they should directly above the image.
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:40
@AdamHJ123 oh yeah "/ hang on. I'm going to poke at your code for a bit and see if there's any way to easily counterbalance it. It may be that you have to rethink your approach. @disjfa has a nicely working one, but you'd have to restructure your carousel.
Adam Jacks
@AdamHJ123
Jul 14 2016 21:42
@disjfa Does the image.index find every image with the image class?
Chris Rutherford
@cjrutherford
Jul 14 2016 21:43
would someone please look over my procOff() function?
Adam Jacks
@AdamHJ123
Jul 14 2016 21:43
@FreyaRhianna This has been a good bit of experience for me haha
Chris Rutherford
@cjrutherford
Jul 14 2016 21:43
not sure why it's not working right now.
disjfa
@disjfa
Jul 14 2016 21:43
index is a jQuery function for the index in a div (i added 1 div)
And i fixed the first slide bug now
quick and nasty
Adam Jacks
@AdamHJ123
Jul 14 2016 21:47
Trying to work it out haha
I take it finding the active image through the box div would be bad considering that class is being used multiple times
disjfa
@disjfa
Jul 14 2016 21:49
I just set the images to position absolute so they are always shown. The animatecss classes do the rest
yes this is a quickfix for 1 box and 3 kittens
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:50
@AdamHJ123 the best things are learnt by trial and error :P I spent about four hours yesterday trying to work out why my (in my opinion flawless) algorithm didn't work and kept getting stuck in browser-breaking infinite loops, only to discover that floating point numbers aren't to be trusted. It was a painful lesson but I'm never going to trust them again. As god intended it.
disjfa
@disjfa
Jul 14 2016 21:51
lol
i had something like that when i got to the understanding that javascipt is CaseSensitive
Adam Jacks
@AdamHJ123
Jul 14 2016 21:52
I made a game in Java a while back, I was working on AI attacking a player when it was in one of the 4 tiles around the player
MikeBeers
@MikeBeers
Jul 14 2016 21:52
Question on bootstrap. I am resizing my browser and when I get below 768 the images move to a single column on the screen. Issue is that the heading of these images are pushed to the right. I feel like they should directly above the image
disjfa
@disjfa
Jul 14 2016 21:53
@MikeBeers again with the question and not posting a codepen as example
Adam Jacks
@AdamHJ123
Jul 14 2016 21:53
Problem was the AI was attacking the player when it was diagonal to the player because I used floats for coordinates which was giving the AI a location such as #.1*
MikeBeers
@MikeBeers
Jul 14 2016 21:53
lol. I did last time also
Bad timing on pasting in link
disjfa
@disjfa
Jul 14 2016 21:55
@MikeBeers img-responsive have a display block so they start from the left. You should just create larger images and switch the responsive classes on your items
or just remove the img-responsive and thumbnail from the images, they are no use for these small images
MikeBeers
@MikeBeers
Jul 14 2016 21:58
alright. Will see what that does
disjfa
@disjfa
Jul 14 2016 21:58
(and add the text-center to the col-sm div around it)
MikeBeers
@MikeBeers
Jul 14 2016 21:58
Ahh
Ok
Freya Sheer Hardwick
@FreyaRhianna
Jul 14 2016 21:59
@AdamHJ123 @disjfa It's the crushing disappointment of being let down by a language you trusted
Adam Jacks
@AdamHJ123
Jul 14 2016 21:59
@FreyaRhianna Yep haha
Muhammad Hasham
@MohammadHasham
Jul 14 2016 22:03
Anybody can help me with bonfires??
CamperBot
@camperbot
Jul 14 2016 22:03
type bonfire name to get some info on that bonfire. And check HelpBonfires chatroom
Muhammad Hasham
@MohammadHasham
Jul 14 2016 22:04
bonfire name
CamperBot
@camperbot
Jul 14 2016 22:04
Sorry, can't find a bonfire called name. [ Check the map? ]
disjfa @disjfa lights a bonfire :fire:
MikeBeers
@MikeBeers
Jul 14 2016 22:05
:( without image responseive the images overlap
disjfa
@disjfa
Jul 14 2016 22:07
change containing div to to col-md-8 col-md-offset-2 :P
or just use larger images and fix it will always fit
or add max-width: 100%; to .rounded_border
or delete your pen and find another hobby :hand:
MikeBeers
@MikeBeers
Jul 14 2016 22:14
Deleted
disjfa
@disjfa
Jul 14 2016 22:16
I only hope you did not just install pokemon go
MikeBeers
@MikeBeers
Jul 14 2016 22:17
Oh yeah. I just found my new hobby
Adam Jacks
@AdamHJ123
Jul 14 2016 22:31
I already have it haha
Vik
@vvang044
Jul 14 2016 23:07
Hello all. Can anyone suggest good open souce tool to create website usinf html,css and javascript????
crossoveranx
@crossoveranx
Jul 14 2016 23:30
Hey, I'm designing the personal portfolio webpage. Would it be more full featured if I create it on my PC instead of codepen?
Ken Haduch
@khaduch
Jul 14 2016 23:39
@crossoveranx - well, you should be able to do most everything on CodePen that you can do on your homepage - but there are advantages to putting it on a "cloud" based editor. If you want to ask for help, it's a lot easier if people can go and directly examine your code and make suggestions. After you finish the project, you want it to be accessible on the web, so you have to upload it to an ISP or something - it cannot just stay on your PC. So CodePen is a good, or reasonably good, solution. It also provides a lot of helpful things such as making it easy to include libraries, etc. (Not a real compelling reason to use it, because you eventually have to know how to do all of that anyway.) You can also generate the page on your PC and upload it to codepen later. I would say CodePen is a reasonable choice. Although you can also come up with a hybrid solution - use a local editor for your HTML, then copy and paste into the CodePen UI, etc. Just my opinion.
crossoveranx
@crossoveranx
Jul 14 2016 23:51
Thanks for the answer Ken, I guess I just wanted to use things like font awesome for icons and stuff, so I didn't know that was compatible with codepen