These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Jun 2016
shivamsonu29
@shivamsonu29
Jun 12 2016 00:00
$.getJSON(api,function(data){

 $("#data").html("kklj");

});
writing anything under getJSON function is not working/giving output..why??
Dan
@dcgoings
Jun 12 2016 00:01
anyone here use visual studio code?
Greg Duncan
@GregatGit
Jun 12 2016 00:02
@RadEdje I have found wikipedia's api explaination difficult to understand - I know a lot of campers have spent hours just trying to get a simple search happening. I think for now its better to just figure out the complexities of the json rather than trying to figure out their api structures
Greg Duncan
@GregatGit
Jun 12 2016 00:10
I am struggling to get the four colored squares to be centered - can anyone help? http://codepen.io/gregoverhere/pen/JKGvdQ
Ethan Chandler
@Ethanlchandler
Jun 12 2016 00:12
good call @twoBrokenThumbs. Thanks for the help. Good Luck!
CamperBot
@camperbot
Jun 12 2016 00:12
ethanlchandler sends brownie points to @twobrokenthumbs :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @twobrokenthumbs |http://www.freecodecamp.com/twobrokenthumbs
Kikelomo
@queennectarine
Jun 12 2016 00:13
This message was deleted
Greg Duncan
@GregatGit
Jun 12 2016 00:13
@shivamsonu29 if the api call is not successful nothing will get executed there
Kikelomo
@queennectarine
Jun 12 2016 00:14
hey @shivamsonu29 , i had this problem last night i think. someone told me that the site isn't set up to handle cross-origin requests for json. we found that using a proxy site for the json worked. the one we used was "https://jsonp.afeld.me/?callback=?&url=" + whatever the url of the json you're trying to reach.

@shivamsonu29 so if api is a variable for the url, your code would look like this

$.getJSON("https://jsonp.afeld.me/?callback=?&url=" + api, function(data){

 $("#data").html("kklj");

});

hope this helps!

Greg Duncan
@GregatGit
Jun 12 2016 00:17
@shivamsonu29 You can use this to get lat and long http://ip-api.com/json
Noahz
@MrNoahz
Jun 12 2016 00:26
Any of you guys mind reviewing my Tribute Page project?
shivamsonu29
@shivamsonu29
Jun 12 2016 00:26
@GregatGit this api is great, so there is no need of geolocation coding??
Noahz
@MrNoahz
Jun 12 2016 00:27
@GregaGit Put your four squares in a div and set display as flex
shivamsonu29
@shivamsonu29
Jun 12 2016 00:28
@queennectarine i tried but not working with that, it's working well with api http://ip-api.com/json, i am using geolocation code before this which stops the processing of getJSON function..
Micah
@miciah123
Jun 12 2016 00:29
How come my iframe will not align to the middle of my well
In the css I added a style: "align:middle;"
Noahz
@MrNoahz
Jun 12 2016 00:30
IFrames are really annoying in general
Micah
@miciah123
Jun 12 2016 00:31
@MrNoahz is there a better way to display a thumbnail image of a page I made?
Noahz
@MrNoahz
Jun 12 2016 00:32
A screenshot?
Try using flex box
Eldorian
@Eldorian
Jun 12 2016 00:38
So this is driving me a little crazy. When the page loads, it will call getQuote twice, once in the document ready and then it hits my .click as well. But when I actually click the button that the id is tied to, nothing happens. Why is it working twice on load and not working at all when I click? http://codepen.io/Eldorian/pen/qNbQgv
I know I'm missing something obvious but been trying to troubleshoot for 30 minutes now with no idea
Noahz
@MrNoahz
Jun 12 2016 00:45
For some reason your button doesn't seem to register clicks at all
Weird
Eldorian
@Eldorian
Jun 12 2016 00:47
exactly
I thought maybe I was missing a parenthesis somewhere, I've tried renaming the id, it shouldn't even be triggering the .click on page load and it somehow does
Noahz
@MrNoahz
Jun 12 2016 00:53
I even tried using onclick
not working
I really can't figure out why
Eldorian
@Eldorian
Jun 12 2016 00:53
well now I don't feel as bad, lol
Jan Ong
@JETZero3
Jun 12 2016 00:54
@Eldorian I kinda have a janky solution for your pen. I moved the "$('#quotebutton').click(getQuote());" into the getquote function itself, and replaced getQuote with function. Difficult to explain, but I forked the pen here: http://codepen.io/JETZero3/pen/MeyWVv
I'm not sure it solved the original problem you were looking at though =/
Stephen James
@sjames1958gm
Jun 12 2016 00:55
@Eldorian You supply click a function, but you are calling the function.
@Eldorian $('#quotebutton').click(getQuote);
Eldorian
@Eldorian
Jun 12 2016 00:55
oh man
that's what it was @sjames1958gm thank you
CamperBot
@camperbot
Jun 12 2016 00:56
eldorian sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 1528 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Jun 12 2016 00:56
@Eldorian :+1:
Eldorian
@Eldorian
Jun 12 2016 00:56
I knew it had to be something dumb
Jeremy
@jer244
Jun 12 2016 01:00
Hey all... I just finished updating my JS calculator from feedback I got here a couple days ago.. Would appreciate any and all feedback on the updated version. Thanks. http://codepen.io/jer244/pen/yJLrmM
Noahz
@MrNoahz
Jun 12 2016 01:04
@jer244 Works good. Don't see any issues.
Jeremy
@jer244
Jun 12 2016 01:05
@MrNoahz thanks for testing it out
CamperBot
@camperbot
Jun 12 2016 01:05
jer244 sends brownie points to @mrnoahz :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @mrnoahz |http://www.freecodecamp.com/mrnoahz
Noahz
@MrNoahz
Jun 12 2016 01:06
@jer244 No problem
Adam Urberg
@aurberg
Jun 12 2016 01:16
@jer244 Looks great, the only small issue I saw is that you can type in things like 1++++++++1
but it does return Error so thats good
Jeremy
@jer244
Jun 12 2016 01:19
@aurberg ok cool. Thanks for the feedback.
CamperBot
@camperbot
Jun 12 2016 01:19
jer244 sends brownie points to @aurberg :sparkles: :thumbsup: :sparkles:
:cookie: 160 | @aurberg |http://www.freecodecamp.com/aurberg
Sean Wilson
@seanc
Jun 12 2016 01:20
anyone here used vue-validator?
buiphuking
@buiphuking
Jun 12 2016 01:20
hi guys, how can i test ai tic tac toe step by step code by recursive ?????????????
Dan
@dcgoings
Jun 12 2016 01:20
is anyone really familiar with git?
that i can ask a few things?
Noahz
@MrNoahz
Jun 12 2016 01:21
@dcgoings Possibly
Dan
@dcgoings
Jun 12 2016 01:21
good enough
Dylan
@dhcodes
Jun 12 2016 01:21
i'm exactly novice +1
Dan
@dcgoings
Jun 12 2016 01:21
so im trying to transition to an editor and away from using codepen. i decided to pick up visual studio code.
not even relevant i dont think.
anyways
so let's say i have ALL my code/projects in D:/code
Dylan
@dhcodes
Jun 12 2016 01:22
let's say it
Dan
@dcgoings
Jun 12 2016 01:22
how.. exactly do i manage this? like.. i dont know how to even ask this. every repo should be considered it's own project, right?
Dylan
@dhcodes
Jun 12 2016 01:22
correct
Sean Wilson
@seanc
Jun 12 2016 01:22
yea
kwittig
@kwittig
Jun 12 2016 01:22
How do I Label Bootstrap wells?
Dan
@dcgoings
Jun 12 2016 01:22
so if i want all my projects in D:/code
Dylan
@dhcodes
Jun 12 2016 01:22
@dcgoings have a diff folder for each project in D:/code
Dan
@dcgoings
Jun 12 2016 01:22
i should be able to push and pull whatever i want
hmm
ok
Dylan
@dhcodes
Jun 12 2016 01:23
and then cd into each folder
and git init
Dan
@dcgoings
Jun 12 2016 01:23
AHH
ok
Dylan
@dhcodes
Jun 12 2016 01:23
so a subfolder for each of your projects
Dan
@dcgoings
Jun 12 2016 01:23
so i definitely need to change directories for every commit and pull and push and blah blah
Sean Wilson
@seanc
Jun 12 2016 01:23
does git create a hidden .git file on windows too?
Dan
@dcgoings
Jun 12 2016 01:23
yes
because
Dylan
@dhcodes
Jun 12 2016 01:23
brb
Dan
@dcgoings
Jun 12 2016 01:23
my dumbass
intialized a fuckin repo on my entire c drive
had no idea wtf was going on because im a scrub
Sean Wilson
@seanc
Jun 12 2016 01:24
haha
Noahz
@MrNoahz
Jun 12 2016 01:24
XD
Dan
@dcgoings
Jun 12 2016 01:24
took me like 30 min of googling
Noahz
@MrNoahz
Jun 12 2016 01:24
Just delete the git file
Sean Wilson
@seanc
Jun 12 2016 01:24
oh that's right windows does support dotfiles
Dan
@dcgoings
Jun 12 2016 01:24
yeah, finally got that
haha
Sean Wilson
@seanc
Jun 12 2016 01:24
tfw you use linux for too long :P
Noahz
@MrNoahz
Jun 12 2016 01:24
wait Windows doesn't support it?
Sean Wilson
@seanc
Jun 12 2016 01:24
it does
Noahz
@MrNoahz
Jun 12 2016 01:24
oh sorry. read it wrong
Sean Wilson
@seanc
Jun 12 2016 01:24
:P
Adam Urberg
@aurberg
Jun 12 2016 01:24
That would have been fun if you pushed your entire C drive to github :smile:
Noahz
@MrNoahz
Jun 12 2016 01:24
:P
Sean Wilson
@seanc
Jun 12 2016 01:24
that would be interesting
Noahz
@MrNoahz
Jun 12 2016 01:24
@aurberg I actually did that
Dan
@dcgoings
Jun 12 2016 01:25
well thank god it was lagging me like hell
so i knew something was up
Noahz
@MrNoahz
Jun 12 2016 01:25
To temporarily back up my computer
Sean Wilson
@seanc
Jun 12 2016 01:25
i use backblaze for computer backups
Noahz
@MrNoahz
Jun 12 2016 01:25
Was switching from Ubuntu to Arch so wiped the drive.
Simple git pull to retrieve everything.
Eh. Backblaze costs money
Sean Wilson
@seanc
Jun 12 2016 01:25
and i've got a private server coloed for ~$130/mo for all the backups i need
yeah
Dan
@dcgoings
Jun 12 2016 01:26
so wait
Adam Urberg
@aurberg
Jun 12 2016 01:26
@MrNoahz How many gigs was that?
Dan
@dcgoings
Jun 12 2016 01:26
what should my master git bash dir be?
Noahz
@MrNoahz
Jun 12 2016 01:26
I don't have that many important files. Not important enough for them to be constantly backed up.
Sean Wilson
@seanc
Jun 12 2016 01:26
my only important folder is ~/projects
Noahz
@MrNoahz
Jun 12 2016 01:26
Same
kwittig
@kwittig
Jun 12 2016 01:26
<div class="row">
<div class="col-xs-6" <h4>#left-well></h4>

<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6" <h4>#right-well</h4>

<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
Noahz
@MrNoahz
Jun 12 2016 01:26
Well mine is called dev
Sean Wilson
@seanc
Jun 12 2016 01:26
but then again most of that is already on github
Noahz
@MrNoahz
Jun 12 2016 01:27
Well I still need to build up my github portfolio. Quite empty at the moment
Sean Wilson
@seanc
Jun 12 2016 01:27
what's your gh?
nvm found it :P
Dan
@dcgoings
Jun 12 2016 01:28
so let's say ive been messing around with a couple random projects. like the tribute page, for example. and now i want to push it to gh. do i need to actually go into gh and make a blank repo for that? or can i somehow just push from bash/VCS and it'll auto create?
Sean Wilson
@seanc
Jun 12 2016 01:28
love your site :)
Noahz
@MrNoahz
Jun 12 2016 01:28
Thanks!
Sean Wilson
@seanc
Jun 12 2016 01:28
yes
you'll have to go to github or whatever platform you're using
and create a repo
then in your project folder
git init
git remote add origin <git url>
probably better than either of us could explain
Sean Wilson
@seanc
Jun 12 2016 01:30
yeah xD
ugh i really want to switch back to mint
Dan
@dcgoings
Jun 12 2016 01:30
how long before i get used to this life :(
Noahz
@MrNoahz
Jun 12 2016 01:30
Arch 4 lyfe
Dan
@dcgoings
Jun 12 2016 01:30
(the webdev life)
Adam Urberg
@aurberg
Jun 12 2016 01:30
OS X is the best :P
Noahz
@MrNoahz
Jun 12 2016 01:30
You can always just download the Cinnamon DE
Sean Wilson
@seanc
Jun 12 2016 01:30
i have been thinking about checking arch
i hated the cinnamon DE
seemed so bloated xD
i love mate.
Noahz
@MrNoahz
Jun 12 2016 01:31
Or Mate
Arch is nice. Though it's a HUGE hassle to install
Sean Wilson
@seanc
Jun 12 2016 01:31
the os i'm using right now use pantheon for its DE
Noahz
@MrNoahz
Jun 12 2016 01:31
Pantheon is nice
Sean Wilson
@seanc
Jun 12 2016 01:31
which unfortuantely is a bit buggy, they've tackled a few of the bugs but.. there's still those quirks.
Noahz
@MrNoahz
Jun 12 2016 01:32
Isn't this Gnome
Sean Wilson
@seanc
Jun 12 2016 01:32
nope pantheon :P
unless pantheon
is a fork of gnome?
or am i mixing stuff up.
Noahz
@MrNoahz
Jun 12 2016 01:33
Nope
But how you have it just looks exactly like Gnome
Might be pantheon. Just a weird theme installed
Sean Wilson
@seanc
Jun 12 2016 01:33
i'm using arc for my theme
Noahz
@MrNoahz
Jun 12 2016 01:34
Arc is nice. One of the best themes.
I've switched to Adapta recently. Really nice
Sean Wilson
@seanc
Jun 12 2016 01:34
never heard of it :o, time for google fingers.
ooo that looks quite nice
rip pantheon ._.
Noahz
@MrNoahz
Jun 12 2016 01:35
:P
Sean Wilson
@seanc
Jun 12 2016 01:35
oh well i'll star for the future.
once my nas firmware has updated, i'll backup and install arch or perhaps go back to mint :P
Noahz
@MrNoahz
Jun 12 2016 01:36
You will hate Arch if you've never used it before
Just install Antergos or Manjaro. Prepackages arch for you
Sean Wilson
@seanc
Jun 12 2016 01:36
alright sounds good
Noahz
@MrNoahz
Jun 12 2016 01:36
Since with Arch you need to install from the ground up.
Sean Wilson
@seanc
Jun 12 2016 01:36
ah,. yeah that does sound like a pain in retrospect
Noahz
@MrNoahz
Jun 12 2016 01:36
like total ground. You start with the kernel basically
Sean Wilson
@seanc
Jun 12 2016 01:37
that's like..
not even ground xP
Noahz
@MrNoahz
Jun 12 2016 01:37
Unless you want to waste an entire weekend and potentially screwing up installation (like I did like 3 times), then just install Manjaro or Antergos
Or Archbuilder
Anways, yea
Sean Wilson
@seanc
Jun 12 2016 01:40
haha alright
really wish skype would look into updating linux :(
Dylan
@dhcodes
Jun 12 2016 01:41
@aurberg it's called macOS now
lol
Noahz
@MrNoahz
Jun 12 2016 01:41
Skype on Linux looks like crap
*May be called macOS
Dylan
@dhcodes
Jun 12 2016 01:45
@MrNoahz if they used it in apple docs, it probably will be
Sean Wilson
@seanc
Jun 12 2016 01:46
yeah, web wskype was promising, but it still doesn't provide stuff like calling which is a huge tradeoff.
Noahz
@MrNoahz
Jun 12 2016 01:46
@dhcodes Probably
Dan
@dcgoings
Jun 12 2016 01:47
so get this shit
the reason i was so confused earlier about gh and visual code studio
vcs doesnt allow for multiple projects to be opened
gg
rip
Noahz
@MrNoahz
Jun 12 2016 01:48
Sublime Text is a thing
that does that
and has semi-github integration
Dan
@dcgoings
Jun 12 2016 01:48
i know, i know. literally everything does that.
except vsc.
also, im dumb and been saying visual code studio and it's visual studio code
man, im having a bad day.
Noahz
@MrNoahz
Jun 12 2016 01:49
:P
Dylan
@dhcodes
Jun 12 2016 01:49
pick a new text editor
no big
use vim
then you can spend all day customizing it
Dan
@dcgoings
Jun 12 2016 01:49
i just got the hang of vsc :(
Dylan
@dhcodes
Jun 12 2016 01:49
on all your computers
Dan
@dcgoings
Jun 12 2016 01:50
im actually coming from atom. i dont even know why i switched really. just wanted to change it up.
Noahz
@MrNoahz
Jun 12 2016 01:52
Just try them all
Personally, Sublime Text is my favorite
Dylan
@dhcodes
Jun 12 2016 01:52
i like to use textedit
like the challenge of it
no syntax checker
no color codes
no js lint
lol
Noahz
@MrNoahz
Jun 12 2016 01:54
But WHY
kwittig
@kwittig
Jun 12 2016 01:55
How do you lable Bootstrap wells?
Ken Haduch
@khaduch
Jun 12 2016 01:56
@GregatGit - did you get your boxes aligned? I was just tinkering with it, and took the float off the .colorBox, and took off a lot of other classes from the divs, and changed the .colorBox to display: inline- block; Then they "magically" popped into the middle of the screen. I'll save a fork of this, in case just doing that with your other classes (like the "row" classes, etc.) are also affecting the display. No - just making that change, removing the float and setting display: inline-block; on the .colorBox works.
Dylan
@dhcodes
Jun 12 2016 02:05
@kwittig do you mean how do you make a well?
class="well"
kwittig
@kwittig
Jun 12 2016 02:06
No
Adam Urberg
@aurberg
Jun 12 2016 02:07
Like adding a title to the well?
kwittig
@kwittig
Jun 12 2016 02:08

<div class="col-xs-6" <h4>#left-well</h4>

  <div class="well" id="left-well">
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
  </div>
</div>

<div class="col-xs-6" <h4>#right-well</h4>
supposed to create an H4 element with the text #rightwell w/i the div class="col-xs-6"

Ken Haduch
@khaduch
Jun 12 2016 02:10
@kwittig - you just do not have the <div class="col-xs-6" properly closed with a > and there should be a matching </div> somewhere out there. (Formatting is not correct in your post - hard to determine where things are.) At least that is one thing that I can see that is probably not correct with what you posted.
kwittig
@kwittig
Jun 12 2016 02:11
I did that. Just did not include it in the text
Ken Haduch
@khaduch
Jun 12 2016 02:12
@kwittig - it looks like two places, now that I look at your previous post again? Sorry if I'm just not seeing things properly there.
Andy
@Zubenna
Jun 12 2016 02:13
$(document).ready(function(){

  var api = "http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=842d42ec9f0e133fdc3e63af12488e6e";

    $.getJSON(api, function(data){
    alert(data.coord.lat);
  });
});
My code could not retrieve information from the openweathermap.org site. What have done wrong please or is there any seeting to be done on my codepen before this would work?
kwittig
@kwittig
Jun 12 2016 02:13
Yeah. I figured if I found out how to do the #rightwell text, I could just do the same thing for the #leftwell
Dylan
@dhcodes
Jun 12 2016 02:13
@Zubenna are you using chrome?
Andy
@Zubenna
Jun 12 2016 02:14
yes
Dylan
@dhcodes
Jun 12 2016 02:14
that is why
Andy
@Zubenna
Jun 12 2016 02:14
do I use another browser?
Dylan
@dhcodes
Jun 12 2016 02:14
@Zubenna so html5 location only works over https on chrome
David
@Nachlawi
Jun 12 2016 02:14
@kwittig
<div class="col-xs-4">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-4">
      <h4>#right-well</h4>
Dylan
@dhcodes
Jun 12 2016 02:14
so it may get the location but to pass it to openweather, which is http://, well it' can't
@Zubenna
so yeah, it may work on safari or firefox, or you can use ip location
and then pass that location to openweather
ip location would still work on chrome
Andy
@Zubenna
Jun 12 2016 02:16
@dhcodes ok. let me try it. Thanks
CamperBot
@camperbot
Jun 12 2016 02:16
zubenna sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 999 | @dhcodes |http://www.freecodecamp.com/dhcodes
Ken Haduch
@khaduch
Jun 12 2016 02:16
@kwittig - I was just about to post the same thing as @Nachlawi posted - probably want to have those <h4> elements on a separate line, depending on the testing code and what they are looking for. But he has col-xs-4, so make sure that you are sticking with col-xs-6 as the exercise is looking for?
kwittig
@kwittig
Jun 12 2016 02:17
@Nachlawi Thank you so much!!
CamperBot
@camperbot
Jun 12 2016 02:17
kwittig sends brownie points to @nachlawi :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @nachlawi |http://www.freecodecamp.com/nachlawi
Michael Karpinski
@karpimpski
Jun 12 2016 02:48
can anybody answer a question i have about grids? i'm not sure why they won't display in-line unless i manually set width. i'd like it to work like bootstrap, where they are automatically inline
[class*='col-'] {
  float: left; }

.col-1 {
  width: 8.333333333%; }

.col-2 {
  width: 16.6666666667%; }

.col-3 {
  width: 25%; }

.col-4 {
  width: 33.3333333333%; }

.col-5 {
  width: 41.6666666667%; }

.col-6 {
  width: 50%; }

.col-7 {
  width: 58.3333333333%; }

.col-8 {
  width: 66.6666666667; }

.col-9 {
  width: 75%; }

.col-10 {
  width: 83.3333333333%; }

.col-11 {
  width: 91.6666666667%; }

.col-12 {
  width: 100%; }

.grid:after {
  content: "";
  display: table;
  clear: both; }

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

[class*='col-'] {
  padding-right: 20px; }

[class*='col-']:last-of-type {
  padding-right: 0; }

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif; }

.head {
  font-size: 2em; }

/*# sourceMappingURL=style.css.map */
<head>
<title>Pomodoro Clock</title>
<link rel="stylesheet" href="../styles/css/style.css">
</head>



<body>

<div class="grid center">
    <div><h2>Pomodoro Clock</h2></div>
    <button>Hello</button>
</body>
JD Tadlock
@jdtdesigns
Jun 12 2016 02:54
@karpimpski Floats are basically out of date at this point. Use flex-box ;)
Michael Karpinski
@karpimpski
Jun 12 2016 02:55
@jdtdesigns I would rather use flex, but anything besides the newest IE doesn't have support
within the IE spectrum, I know other browsers have support
JD Tadlock
@jdtdesigns
Jun 12 2016 02:57
@karpimpski microsoft has basically deprecated 8 and below so you should be fine
if somebody's using 9 or below, they 99% probably won't be viewing your site or anything like our work
Michael Karpinski
@karpimpski
Jun 12 2016 02:58
@jdtdesigns how could i save this code to make it a flex grid? or should i start from scratch to do flex?
JD Tadlock
@jdtdesigns
Jun 12 2016 03:00
.row, .column {
  display: flex;
}

.column {
  flex-direction: column;
}

.col-1-2 {
  width: 50%;
}

.col-1-3 {
  width: 33.333%;
}

.col-1-4 {
  width: 25%;
}
@karpimpski it's really that easy
.center-row {
  justify-content: center;
}

.center-col {
  align-items: center;
}
Michael Karpinski
@karpimpski
Jun 12 2016 03:01
what about gutters?
JD Tadlock
@jdtdesigns
Jun 12 2016 03:01
flex accounts for margin and will keep the content on the same row
unless you declare flex-wrap: wrap;
so the sky is the limit ;)
Michael Karpinski
@karpimpski
Jun 12 2016 03:02
<div class="row">
    <h2>Pomodoro Clock</h2>
    <button>Hello</button>
</body>
this still sets them on separate lines
do i need to set columns in rows no matter what?
JD Tadlock
@jdtdesigns
Jun 12 2016 03:02
.row { display: flex; }
in css
Michael Karpinski
@karpimpski
Jun 12 2016 03:03
yeah, i updated it. my problem was i forgot to set me watcher for my sass files, so it didn't preprocess it
Sam Nave
@shrapnel2012
Jun 12 2016 03:04
Does anyone know how to give buttons the ability to scroll on a one page portfolio?
JD Tadlock
@jdtdesigns
Jun 12 2016 03:04
once you go flex, you never go back
@shrapnel2012 a little jquery and you're good to go
robertky
@robertky
Jun 12 2016 03:04
Hi, I have a question about the code of this website, how in the world do they delay the transition between quotes and make the background fade out and in? I want to attempt to do something similar for my project, but am unclear what that is even called or how to do it.
CamperBot
@camperbot
Jun 12 2016 03:04

welcome to FreeCodeCamp @robertky!

Michael Karpinski
@karpimpski
Jun 12 2016 03:04
yeah i learned flex a WHILE ago and i really loved it, but i was always told that you shouldn't use it for your whole site because of how little legacy support it has
Anyone know how to do the above like that?
Michael Karpinski
@karpimpski
Jun 12 2016 03:05
@robertky setTimeout()
robertky
@robertky
Jun 12 2016 03:05
As in do the fade in and color transition like that?
Michael Karpinski
@karpimpski
Jun 12 2016 03:05
and some jquery fade action
robertky
@robertky
Jun 12 2016 03:06
I will try that, not sure how those work.
Michael Karpinski
@karpimpski
Jun 12 2016 03:06
make a function for generating the new quote. when the user clicks the button, call the function and use a jquery fadeout with a certain amount of time and a jquery fadein with a certain amount of time. then, at the end of your setTimeout() function, put the same time you put with your fadein
setTimeouts are simple, they work like this:
robertky
@robertky
Jun 12 2016 03:07
Ok, reading :).
Michael Karpinski
@karpimpski
Jun 12 2016 03:07
setTimeout(function(){
  code here
}, time here)
oops forgot my semi-colon
Kyle W Pilkinton
@tadake
Jun 12 2016 03:09
hey guys im working on the simon project and i have a function named plan that gives me a new pattern from 0 to 20 to follow. Im clueless on how to actually implement the game play though. can anyone help me with this? maybe some psudocode on how i should implement this?
robertky
@robertky
Jun 12 2016 03:09
@karpimpski , ok I will give it a shot and see what happens.
@karpimpski, I'm trying it with this, but doesn't seem to be working:
$(document).ready(function(){
      $("#getMessage").on("click", function(){
        random();
      });
    });

function random()
{
  quote=quotes[Math.round(Math.random()*7)];  
    $(".message").html(quote);
}
I put setTimout around the first function work.
Word*.
Like this:
$(document).ready(setTimeout(function(){
      $("#getMessage").on("click", function(){
        random();
      });
    }, 3));
But, doesn't seem to work, any thoughts :/?
Michael Karpinski
@karpimpski
Jun 12 2016 03:13
@robertky don't do the setTimeout on document ready
JD Tadlock
@jdtdesigns
Jun 12 2016 03:13
@robertky http://jsbin.com/sudola/edit?html,css,js,output There ya go. Much easier route than jquery. ;)
Michael Karpinski
@karpimpski
Jun 12 2016 03:13
$("#getMessage").on("click", function(){
        setTimeout(function(){)
        random();
      });
```
$("#getMessage").on("click", function(){
        setTimeout(function(){
         random();
}, 300);

      });
```
something closer to that
sorry about the code, it's pretty messy. i just typed it in chat
@jdtdesigns that's really cool! i had no idea css had a transition definition!
robertky
@robertky
Jun 12 2016 03:16
$(document).ready(function(){
      $("#getMessage").on("click", setTimeout(function(){
        random();
      }, 1));
    });
JD Tadlock
@jdtdesigns
Jun 12 2016 03:16
@karpimpski css has transitions and animations ;)
robertky
@robertky
Jun 12 2016 03:16
I tried that one, but nothing happens now :/.
Michael Karpinski
@karpimpski
Jun 12 2016 03:17
@robertky don't do that, that's one millisecond. and you didn't do it the way i said
robertky
@robertky
Jun 12 2016 03:17
I tried 300 though too.
Michael Karpinski
@karpimpski
Jun 12 2016 03:17
also, your random function isn't right i don't think
robertky
@robertky
Jun 12 2016 03:17
It wont do anything either.
Let me try the CSS route :/.
Michael Karpinski
@karpimpski
Jun 12 2016 03:17
you don't need to do that
just move your random function into the settimeout and put your settimeout within the listener function
@jdtdesigns you're like the css guru man :P I'm not that into it, i'm learning backend rn but i like my pages to look nice so i like to know a little
Elbert Cortez
@trip16661
Jun 12 2016 03:19
@robertky its better if you wrapp it so you can kill set time out whebever you click it
robertky
@robertky
Jun 12 2016 03:19
Ok trying javascript again.
Elbert Cortez
@trip16661
Jun 12 2016 03:19
otherwise when the user clicks more than one it will be a mess
JD Tadlock
@jdtdesigns
Jun 12 2016 03:19
@robertky Really overkill using setTimeout for this guys
Michael Karpinski
@karpimpski
Jun 12 2016 03:20
@jdtdesigns when i did it, if i didn't use setTimeout to re-print the quote, it showed up before the transition and looked messy
JD Tadlock
@jdtdesigns
Jun 12 2016 03:20
let me code it out real quick
Elbert Cortez
@trip16661
Jun 12 2016 03:20
that's what promises are for
but once again not sure what are you guys coding xD
Ok, well the above is what I have before setTimeOut.
JD Tadlock
@jdtdesigns
Jun 12 2016 03:22
you can join the jsbin http://jsbin.com/sudola/edit?html,css,js,output and watch as i code if you would like guys ;)
robertky
@robertky
Jun 12 2016 03:22
NOW, I will try to do the time out.
Really, the end goal is to just have it fade in.
And then transition slowly, are you sure setTimeout is best way?
Michael Karpinski
@karpimpski
Jun 12 2016 03:23
@robertky for the transition, no. for re-filling the quote, i think so but i'm sure JD has a better way
Elbert Cortez
@trip16661
Jun 12 2016 03:24
@jdtdesigns why are you using a mix of jquery and vanila js?
robertky
@robertky
Jun 12 2016 03:24
I'll give @jdtdesigns way a try.
@jdtdesigns , I guess I'm confused where in your code is actually delaying everything?
Michael Karpinski
@karpimpski
Jun 12 2016 03:25
@jdtdesigns also, what's the advantage of using var functionName = function() over function functionName()?
robertky
@robertky
Jun 12 2016 03:25
And causing it to fade in.
and out?
robertky
@robertky
Jun 12 2016 03:37
I guess I'm just going to forget the fade thing for now lol.....
The only question I really have at this point is...does anyone know how to get the twitter bird on the button that says "tweet"? I have tried everything with bootstrap, and it won't put a bird on the button :/.
That is my last questoin.
Honestly lol :).
robertky
@robertky
Jun 12 2016 03:44
  <button id="tweet" class="btn btn-primary pull-left">
    <i class="fa fa-twitter fa-4x"></i>
  </button>
I have tried the above, for example, but it wont do anything :/.
Pawan
@pawan92
Jun 12 2016 03:51
finished my twitch let me know what you guys think: http://codepen.io/pawan92/full/ezpjgM/
JD Tadlock
@jdtdesigns
Jun 12 2016 03:53
Lars
@Oppenheimer1
Jun 12 2016 03:54
This message was deleted
robertky
@robertky
Jun 12 2016 03:55
@jdtdesings, thanks :).
CamperBot
@camperbot
Jun 12 2016 03:55
robertky sends brownie points to @jdtdesings :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jdtdesings
robertky
@robertky
Jun 12 2016 03:56
I will try to look at it, but afraid I may leave mine as is. We will see though.
@jdtdesigns, only big question I have though, do you know how to make bootstrap button as a twitter bird?
I tried the below, and it wont work :/?:
This message was deleted
Lars
@Oppenheimer1
Jun 12 2016 03:56

I'm trying to work on the Diff Two Arrays problem and my code seems to work but it's not passing 3 of the tests. Here' s my code. Any help would be greatly appreciated.
function diffArray(arr1, arr2) {

var z = [], newArr = [];

for (var i = 0; i < arr1.length; i++) {
    z[arr1[i]] = true;
}

for (var i = 0; i < arr2.length; i++) {
    if (z[arr2[i]]) {
        delete z[arr2[i]];
    } else {
        z[arr2[i]] = true;
    }
}

for (var x in z) {
    newArr.push(x);
}

return newArr;
}

robertky
@robertky
Jun 12 2016 03:57
Any thoughts lol?
JD Tadlock
@jdtdesigns
Jun 12 2016 03:57
@robertky did you add font awesome in the settings->css ?
robertky
@robertky
Jun 12 2016 03:57
<button id="tweet" class="btn btn-primary pull-left"> <i class="fa fa-twitter fa-4x"></i> </button>
tommy
@tommygebru
Jun 12 2016 03:57
Understanding Comparison Operators & Switch Statements...
my code should work & print to the html :smile: please take a look
http://codepen.io/gebrutommy/pen/rewmpB?editors=0011
robertky
@robertky
Jun 12 2016 03:58
no, I will try though?
Lars
@Oppenheimer1
Jun 12 2016 03:58
The input for [1, 2, 3, 5], [1, 2, 3, 4, 5] and [1, "calf", 3, "piglet"], [1, "calf", 3, 4] and [1, "calf", 3, "piglet"], [7, "filly"] aren't passing
robertky
@robertky
Jun 12 2016 03:59
@jdtdesigns , no, stupid question, what is the link for that even?
I google, but they dont really give link for font awesome and it doesn't default for codepen :/.
But I had to look at someone elses code pen to even find that link.
Yeah, just tried it with the above link @jdtdesigns , no dice :/.
on codepen, you go to settings->css, then in one of the boxes, just start typing font awesome and click on it
then you're set
i'll let you figure out the link thing :P
robertky
@robertky
Jun 12 2016 04:04
Yeah, that did it, thanks :).
I had it right, but the font awesome library wasn't linked in codepen.
lol.
@jdtdesings, how did you learn to do this stuff so fast?
Do you have experience doing this a lot or somethign?
JD Tadlock
@jdtdesigns
Jun 12 2016 04:07
2
@robertky been using html/css/js for 4 years now
just recently started programming though
mainly used jquery until the past year
tommy
@tommygebru
Jun 12 2016 04:09

I need help with this.......

Understanding Comparison Operators & Switch Statements...

http://codepen.io/gebrutommy/pen/rewmpB?editors=0011

Kyle W Pilkinton
@tadake
Jun 12 2016 04:14
hey guys can anyone tell me why only this only triggers one function instead of triggering them in order ?
 computer_position = 4;

  function computer_turn(){

    for(var pos = 0; pos < computer_position; pos++){

      var temp = sequence[pos];

     setTimeout(function(){

      if(temp == 'red'){
        red();
      }

       if(temp == 'blue'){
        blue();
      }

       if(temp == 'green'){
        green();
      }

       if(temp == 'yellow'){
        yellow();
      }

     },200);

    }

  }
JD Tadlock
@jdtdesigns
Jun 12 2016 04:17
@tadake You have a value temp and if it matches one of your if queries it fires that function inside the if
so it's only going to fire one of the functions
robertky
@robertky
Jun 12 2016 04:17
IC, thanks.
JD Tadlock
@jdtdesigns
Jun 12 2016 04:18
setTimeout only fires once
setInterval fires over and over until cleared
Elbert Cortez
@trip16661
Jun 12 2016 04:18
@tadake you are basically saying, if this temp is red display red
but the second one is still red so it wont match os it will never fire same as the next and the next
cuz the value of temp havent change inside of that function
Kyle W Pilkinton
@tadake
Jun 12 2016 04:20
so how would i fix this?? @jdtdesigns @trip16661
Elbert Cortez
@trip16661
Jun 12 2016 04:21
@tadake what do you want?
You have to say what do you want with your code exactly what do you want it to do
Tulio Natale
@tuliodnw
Jun 12 2016 04:22
hey @jdtdesigns , i finished the simon game, just wanted to thank you, http://codepen.io/tuliodnw/pen/ZOQjRr
CamperBot
@camperbot
Jun 12 2016 04:22
tuliodnw sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
robertky
@robertky
Jun 12 2016 04:23
@tuliodnw , only the green and red light up.
Elbert Cortez
@trip16661
Jun 12 2016 04:24
@tuliodnw i see a glitch
robertky
@robertky
Jun 12 2016 04:24
Nevermind, did it again and the colors changed.
@trip16661 , what glitch?
Elbert Cortez
@trip16661
Jun 12 2016 04:24
you can click buttons even without the pattern to be displayed
Tulio Natale
@tuliodnw
Jun 12 2016 04:24
@trip16661 what>
JD Tadlock
@jdtdesigns
Jun 12 2016 04:25
@tuliodnw good job ;)
Kyle W Pilkinton
@tadake
Jun 12 2016 04:25
im working on the simon project @trip16661 im wanting this to display whats in my array.
Tulio Natale
@tuliodnw
Jun 12 2016 04:25
@trip16661 you can, but they dont count, only after the sequence ends do it starts recording the pattern
Elbert Cortez
@trip16661
Jun 12 2016 04:26
@tuliodnw plus when i dont press anything there is nothing that tell me i have to
y but the user dont know that
robertky
@robertky
Jun 12 2016 04:26
@trip16661 , your second point isn't a glitch.
That is how the game works in real life.
It's "common sense"
This is a well known game.
Elbert Cortez
@trip16661
Jun 12 2016 04:27
@robertky not on young generations.
I never played this game in my life
until i saw it on fcc xD
robertky
@robertky
Jun 12 2016 04:27
Welp, I have played it in real life.
How old are you?
Tulio Natale
@tuliodnw
Jun 12 2016 04:27
@trip16661 not sure what do do with the first point, because the change of color is in the css
Elbert Cortez
@trip16661
Jun 12 2016 04:27
24
robertky
@robertky
Jun 12 2016 04:28
Yeah, it was out when you were alive.
You just never played it.
Elbert Cortez
@trip16661
Jun 12 2016 04:28
@tuliodnw you can just dissable the buttons
@robertky ummm ofc it was out it has like 50 y xD
Tulio Natale
@tuliodnw
Jun 12 2016 04:29
btw people the game ends with 15, and there is an awesome easter bonus
i really like
Elbert Cortez
@trip16661
Jun 12 2016 04:29
the thing is that people like me never knew this game was like that
and my friends didn't know about it either
i had to even explain them how to play on mine own simon game xD
robertky
@robertky
Jun 12 2016 04:31
Dont know what to say.
The intructions weren't required for the storyline.
Tulio Natale
@tuliodnw
Jun 12 2016 04:32
@trip16661 i didnt have that problem, they even knew the name
Elbert Cortez
@trip16661
Jun 12 2016 04:33
@tadake you can just make a function called color that gets a color as a parameter and then you map through your arr and use the color function
the color function will just use vars that you previously initialized
or the way i like most
Tulio Natale
@tuliodnw
Jun 12 2016 04:34
@trip16661 i can, but that would make hard mode easier, it you try it now, when the sequence play, the color appears, but when you click, i have the to opacity 0.8, the black remains
JD Tadlock
@jdtdesigns
Jun 12 2016 04:35
@tulio http://codepen.io/jdtadlock/pen/EyVbOM?editors=0010 Here's the disabled button method
Elbert Cortez
@trip16661
Jun 12 2016 04:38
myColors = {
red = "red", 
blue= "blue"
...
}


myArrOfColors.map(function(elem){
  display(myColors[elem]);
})
@tadake like that is another way
Tulio Natale
@tuliodnw
Jun 12 2016 04:39
@jdtdesigns i think i implement the disabled part just know , but didnt work, does disable prevents also the button:active?
Elbert Cortez
@trip16661
Jun 12 2016 04:40
@tuliodnw yes
it works with mine thats what i did
Tulio Natale
@tuliodnw
Jun 12 2016 04:42
@trip16661 @jdtdesigns my colors are not buttons are divs with click functions, i think thats why the disable isnt working
can those be disabled
mine is not pretty or that well made
i will fix a few minor details when i implement the style on it
Tulio Natale
@tuliodnw
Jun 12 2016 04:44
@trip16661 yep that was it, the colors are now disabled just need know to fix 2 things with the css
@trip16661 try now, the buttons are now disabled
Elbert Cortez
@trip16661
Jun 12 2016 04:46
@tuliodnw new link
Elbert Cortez
@trip16661
Jun 12 2016 04:47
@tuliodnw it works good now :)
@trip16661 with this way the user knows oh i have to wait till its over
dumbprof
@tuliodnw one thing i have to say is I dont think "hard" would be a quite good name for that implementation since its not really making it that hard
you can call it "blind"
Tulio Natale
@tuliodnw
Jun 12 2016 04:49
@trip16661 i like that idea
Elbert Cortez
@trip16661
Jun 12 2016 04:50
hard would be if you change the color position and remains in black
that would be challenging af
in that way you will have to remember the pattern and also the position every time the pattern is displayed xD
Tulio Natale
@tuliodnw
Jun 12 2016 04:51
@trip16661 but if you see , is not full black, the sequence is in color.
Elbert Cortez
@trip16661
Jun 12 2016 04:51
y i know thats what i mean
when you open the game you know the position of the colors
you memorize them easily
and you will remember it
but what if the colors rotate? :)
if green that was in the right is in the left on the second sequence :P
Tulio Natale
@tuliodnw
Jun 12 2016 04:53
@trip16661 i doubt anybody would play hard mode, i just made it because why not
@trip16661 did you saw the ending? if you don want to play it go to line 85 of the js, and change the 19 to 2 or 3, and play it
Elbert Cortez
@trip16661
Jun 12 2016 04:58
@tuliodnw lol the code spoiled me but that was a nice touch xD
btw you shouldnt mix english and spanish when coding xD
I used to do that xD
Tulio Natale
@tuliodnw
Jun 12 2016 04:59
@trip16661 yeah, i gotta improve on that, ty
CamperBot
@camperbot
Jun 12 2016 04:59
tuliodnw sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @trip16661 |http://www.freecodecamp.com/trip16661
Chris Cullen
@123xylem
Jun 12 2016 05:38
QUICK QUESTION: Can you tell me how to run this while loop untill arr[0] is true instead of me using break too early as I am doing.. Basically I dont know hwo to avoid an infinite loop here without an early break...
function dropElements(arr, func) {

for(i=0;i<arr.length;i++){ while(arr.filter(func,arr[0]===false)){
   arr.shift();
break;}
 } 



  return arr;
}

dropElements([1, 2, 3, 9, 2], function(n) {return n >2; });
lcassettai
@lcassettai
Jun 12 2016 05:53
@123xylem do you still here?

i think you are trying to make this

function dropElements(arr, func) {
  return  arr.filter(func);
  }
dropElements([1, 2, 3, 9, 2], function(n) {return n >2; });

filter function iterates between all array elements automatically @123xylem

Chris Cullen
@123xylem
Jun 12 2016 05:57
@lcassettai yes but
I need to remove only the first ones that fail and return the rest
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:03
@123xylem try this
function dropElements(arr, func) {
// Drop them elements.
for(i=0;i<arr.length;i++){ while(func(arr[i])){
arr.shift();
i=0;
break;}
}
return arr;
}
dropElements([1, 2, 3, 9, 2], function(n) {return n >2; });
Chris Cullen
@123xylem
Jun 12 2016 06:09
@UtkarshShukla7 that didnt work.. It looks like thats saing while arr i IS TRUE shift...
saying*
andreas2249
@andreas2249
Jun 12 2016 06:18

Good evening, Campers. I have a CSS transition effect reduces text size on a hover event. I would like to have this effect occur after page loads -- rather than on a hover event.

Is this possible only in CSS without resorting to js or jq?

Thanks in advance. Here's my codepen so far... https://codepen.io/andreas2249/full/yJOLya/

(Ideally, am looking for a second or two of the black text -- and then start the transition to the other color + smaller text -- without having to do a mouse hover.)
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:20
@123xylem yes that was wrong . I had't read the instruction carefully .This will work
function dropElements(arr, func) {
// Drop them elements.
for(i=0;i<arr.length;i++){ if(!func(arr[i])){
arr.shift();i=-1;
}else break;
}
return arr;
}
dropElements([1, 2, 3, 9, 2], function(n) {return n >2; });
Chris Cullen
@123xylem
Jun 12 2016 06:26
@UtkarshShukla7 why does i have to equal something at the end?
im interested to see how you stop the while loop
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:27
@123xylem because you are performing shift on the same arr you are using to check
@123xylem are you talking about the earlier method
Chris Cullen
@123xylem
Jun 12 2016 06:27
no the solition here
so it loops once and shifts the first element off
What happens after that?
What does I do?
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:28
@123xylem you want me to do it with while instead of for?
Chris Cullen
@123xylem
Jun 12 2016 06:28
o yea I thought that was while
either way I dont understand what i-1 does
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:29
@123xylem after shift your arr becomes [2,3,9,2] but i will become 1 for the next iteration so we have to make it 0 which is done by doing i=-1
Chris Cullen
@123xylem
Jun 12 2016 06:30
ahhh
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:31
@123xylem just to confirm the elements aren't skipped we are using i=-1
Chris Cullen
@123xylem
Jun 12 2016 06:31
gotya
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:31
@123xylem :+1:
Chris Cullen
@123xylem
Jun 12 2016 06:31
I thought it was something to do with ending a loop
@UtkarshShukla7 thanks it makes sense
CamperBot
@camperbot
Jun 12 2016 06:31
123xylem sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 618 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 06:32
@123xylem np
Aj Tafoya
@AjTafoya
Jun 12 2016 06:51
Hey guys so i'm a little confused as to why you have to put a var = to your factor or it creates an infinite loop. i.e why can't i say function factorialize(num) {
return num;
}
then add a for loop into the function like for(var i = 1; i < num; i++)...
why do i have to add a variable = num for the for loop??
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:04
@AjTafoya can you paste your whole code .I am unable to understand it like this
Aj Tafoya
@AjTafoya
Jun 12 2016 07:06

function factorialize(num) {
// create a var for the for loop
var count = num;
//if the num is 0 return 1
if(count=== 0){
return 1;
}
//create for loop to iterate through num
else{
for(var i = 1; i < count; i++){
//num is num iteration
num = num
i;
}
}
return num;
}

factorialize(5);

I'm just wondering why i have to create a var count to put in my for loop. because my logic is count = num why can't i just use num
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:07
@AjTafoya well let me see .I think you can use just num .
Aj Tafoya
@AjTafoya
Jun 12 2016 07:09
It tells me that i'm creating an infinite loop when i use num if that helps. I solved the problem i was just curious
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:10
@AjTafoya got it ,you can't use num inside your for loop because you are modifying the value of num which is also your test condition
@AjTafoya so you get an infinite loop as num value will always increase after each iteration
so no more i< 5 ,it will become i<10,then i<30and so on
Aj Tafoya
@AjTafoya
Jun 12 2016 07:12
Oh okay so if i used num the iteration would just keep going?
steve84
@raynor84
Jun 12 2016 07:13
hey,
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:13
@AjTafoya yep
@raynor84 hi
Aj Tafoya
@AjTafoya
Jun 12 2016 07:13
I get it @UtkarshShukla7 thanks!!! @raynor84 Hello
CamperBot
@camperbot
Jun 12 2016 07:13
ajtafoya sends brownie points to @utkarshshukla7 and @raynor84 :sparkles: :thumbsup: :sparkles:
:cookie: 620 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
:cookie: 292 | @raynor84 |http://www.freecodecamp.com/raynor84
steve84
@raynor84
Jun 12 2016 07:13
to get the location for the project show local weather... how can i get the location first
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:13
@AjTafoya np
@raynor84 use ip-api.com
Quoc Anh Nguyen
@quocanh261997
Jun 12 2016 07:15
Hey guys, I'm now starting the Current Weather project and wondering where and how to start. On the page, it suggests that I use "OpenWeather API", but I don't know how to use it. Any suggestion?
Aj Tafoya
@AjTafoya
Jun 12 2016 07:15
@quocanh261997 You have to set up an account and get an api key and they should provide you with a url to use in your project
steve84
@raynor84
Jun 12 2016 07:16
@UtkarshShukla7 thx
CamperBot
@camperbot
Jun 12 2016 07:16
raynor84 sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 621 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 07:16
@raynor84 np
Quoc Anh Nguyen
@quocanh261997
Jun 12 2016 07:19
@AjTafoya I got the keys, now what :D?
Aj Tafoya
@AjTafoya
Jun 12 2016 07:21
Well that really depends on where you are in the project, could i see?
Can*
Quoc Anh Nguyen
@quocanh261997
Jun 12 2016 07:23
well, I'm from scratch and haven't done anything yet, still figuring out how to get the url
Aj Tafoya
@AjTafoya
Jun 12 2016 07:25
http://openweathermap.org/api check their site out it gives you the option to decide which api you want to use just create and account to get your api key and they should have information on how to use it on the site as well.
If your are using google chrome it won't allow you to pull your geolocation into unsecured locations though so i would use ip-api.com to gather that info
rahildar
@rahildar
Jun 12 2016 07:26
@quocanh261997 check api section in their website . You will get what url you have to use but you should be well versed with ajax calls to get something useful ..
Koustuv Sinha
@koustuvsinha
Jun 12 2016 07:48
anyone can help me setup semantic-ui within scss file? In my main.scss file I have the following line : @import 'semantic-ui-css/semantic.css';, as I have installed the css only repo. Now webpack bundling cant find the file from the node_modules.. any tips?
Chris Cullen
@123xylem
Jun 12 2016 07:50

function steamrollArray(arr) {
  // I'm a steamroller, baby
 var newArr=[];
var sortedArr=[];
  var flatten=function(arg){

    if(!Array.isArray(arg)){
      newArr.push(arg);
    }
    else    { for (var a in arg){
      flatten(arg[a]);}
    }
};  
  arr.forEach(flatten);

  for (var i=0;i<newArr.length;i++){
    if(newArr[i]==/[0-9]/){    //These 3 lines I try to remove the nulls...
        sortedArr.push(newArr[i]);
    }
  }
return sortedArr;
  }
steamrollArray([1, [2], [3, [[4]]]]);
For some reason my code returns 12 null null 34 null
How do I remove nulls/ why does it even have them .. My answer is the same as the github answer
trần nguyễn minh anh
@Anntran2222
Jun 12 2016 08:25
i wonder: when we build a project, we will build a project that the same to the one they give us or just similar to it
UtkarshShukla7
@UtkarshShukla7
Jun 12 2016 08:46
@Anntran2222 you have to just fulfill the user stories (functionalities) for the project .You can add more functionalities and design it as you want.
Nikhil Goyal
@ngoyal100894
Jun 12 2016 09:17
Hi campers I was working on this local weather project. I was thinking to get data for 7 day forcast .. how many elements should my html contain .. like for each of differen day different elements or what .. I know that should not be the right way .. how do i put whatever data is responded back in these ..
I am using openweathermap.org API
This message was deleted
Nikhil Goyal
@ngoyal100894
Jun 12 2016 09:23
Anybody ?
Sorin Ruse
@sorinr
Jun 12 2016 09:34
@ngoyal100894 use foreach in your js and inject the html template you want into your dom
shivamsonu29
@shivamsonu29
Jun 12 2016 09:54
how to solve cross origin resource sharing problem in weather project??
Nudg
@Nudg
Jun 12 2016 10:22
hi guyz i am new here i was wondering if i can assist in something or get help!
Waleed Assaf
@Jinxlaw
Jun 12 2016 10:40
need help
i have no idea where to start with the portfolio webpage and i dont have anything to add on it
advice anyone?
Shraddha Parab
@Shraddha99
Jun 12 2016 11:00
@UtkarshShukla7 What exactly ? like create a similar page they have provided of Dr. Norman Borlaug or can we take someone else as well?
greg
@wearenotgroot
Jun 12 2016 11:16
@Shraddha99 no you decide what you create. doesnt have to be like the example. but make sure that the requirements are there
Sorin Ruse
@sorinr
Jun 12 2016 11:23
@shivamsonu29 add appropriate headers to your request. You can read more on cors here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Greg Duncan
@GregatGit
Jun 12 2016 12:14
@khaduch Thanks - no I hadn't got them lined up - I'll see how it goes with your tips
CamperBot
@camperbot
Jun 12 2016 12:14
gregatgit sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1302 | @khaduch |http://www.freecodecamp.com/khaduch
Greg Duncan
@GregatGit
Jun 12 2016 12:15
@shivamsonu29 http://ip-api.com/json
Arsalan Sabir
@aayanqazi
Jun 12 2016 12:42
Hey how to add weather api ??
Help me
CamperBot
@camperbot
Jun 12 2016 12:42

:point_right: adding environment variables [wiki]

Adding Envirioment Variables in Windows

Via GUI

  1. Download Varpanel.
  2. Open Varpanel.
  3. In PATH variable, add the relevant path (for example).

Via Command Line

Refer to this answer on Super User.

:pencil: read more about adding environment variables on the FCC Wiki

Arsalan Sabir
@aayanqazi
Jun 12 2016 12:43
How TO Use Current Longitude and latitude in weather api ??
Arsalan Sabir
@aayanqazi
Jun 12 2016 12:53
????
Rune Bak Jacobsen
@runebakjacobsen
Jun 12 2016 12:54
@aayanqazi Thats how you get it. Do you mean how to use it with the API?
Arsalan Sabir
@aayanqazi
Jun 12 2016 12:56
But i can get the latitude and longitude but dont know about how to use weather api :/
Rune Bak Jacobsen
@runebakjacobsen
Jun 12 2016 12:57
@aayanqazi So you are already getting the latitude and longtitud? Store each of them in a variable
Here is the api to the weather api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
Where {lat} you set your latitude variable and some for {lon} just with the longtitude variable '
Greg Duncan
@GregatGit
Jun 12 2016 13:00
@aayanqazi you have to register at openweathermap.org to get a key (it's free)
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:01
But how we display on html ??
I declare variable longitude and latitude and put in link ...
but i dont know about how to display on screen ?
Greg Duncan
@GregatGit
Jun 12 2016 13:02
@aayanqazi did you do freecodecamp json exericise with the cat photos?
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:03
yeah i COmpleted ..
Greg Duncan
@GregatGit
Jun 12 2016 13:03
same thing - just with the weather conditions
have you downloaded the right json yet?
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:09
yes
Greg Duncan
@GregatGit
Jun 12 2016 13:13
@aayanqazi can i see your pen?
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:14
Yeah ..
greg
@wearenotgroot
Jun 12 2016 13:16
@aayanqazi so you have both ip-api and geolocation?
Greg Duncan
@GregatGit
Jun 12 2016 13:16
@aayanqazi if you use this http://ip-api.com/json/?callback=? you don't need this navigator.geolocation.getCurrentPosition(success, error)
greg
@wearenotgroot
Jun 12 2016 13:16
@aayanqazi what you can do is make the other one a fallback if the other one doesnt work
Greg Duncan
@GregatGit
Jun 12 2016 13:17
but once you have the lat and long you have to do a weather api call
@aayanqazi if you go here you can sign up and get an api http://openweathermap.org/appid
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:19
i want to use weather api to use navigator.geolocation
Yeah i sing Up
@GregatGit I use ip-api for complete info of User.
Greg Duncan
@GregatGit
Jun 12 2016 13:21
@aayanqazi that doesn't give you the weather - just your location - which you need to get the correct weather
It API is Correct For Weather ??
Greg Duncan
@GregatGit
Jun 12 2016 13:27
yes - its fine
@aayanqazi
$(document).ready(function() {
    $.getJSON("http://ip-api.com/json/", function(data) {
      // get lat
      // get long
      // build api with lat and long
      $.getJSON(apiUrl, function(json){
        // build html
      });
    });
});
you just have to put the the lat and long in and you'll be away
Arsalan Sabir
@aayanqazi
Jun 12 2016 13:41
ok i try
Jas K
@jask84
Jun 12 2016 14:11
hi all. I have pretty much completed the simon game project now after several weeks. I was just cleaning up and using media query to make it resize properly on smaller screens. Doesn't seem to be working although similar media queries have worked on previous projects. Any idea what I'm doing wrong/overlooking? http://codepen.io/jask/pen/ezJjbr?editors=0100
DonFilip
@DonFilip
Jun 12 2016 15:43
Can somebody help about make potfolio page responsive?
Dan
@dcgoings
Jun 12 2016 15:49
@BerkeleyTrue what's with the bans?
Jonathan
@JonKaric
Jun 12 2016 15:53
@DonFilip you here?
Andrew Charlebois
@andrewchar
Jun 12 2016 15:53
@DonFilip made with bootstrap?
Marc Vesper
@marcvesper
Jun 12 2016 16:06
This message was deleted
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jun 12 2016 16:26
Anyone here who knows React well or has done the recipe box project ?
Amelia Pang
@AMPANG
Jun 12 2016 16:31
Hey there! I’m trying to create a similar design but I don’t quite understand it. Can someone explain how the image of this bird was uploaded without img src? http://codepen.io/Hastalavistababy/pen/WxbwMp
Karolina Kluz
@karolinaKluz
Jun 12 2016 16:35
@AMPANG it's made with CSS like the title says
Amelia Pang
@AMPANG
Jun 12 2016 16:35
Thanks :) @karolinaKluz. I didn’t know CSS can make images. I’ll look into that.
CamperBot
@camperbot
Jun 12 2016 16:35
ampang sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 188 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Karolina Kluz
@karolinaKluz
Jun 12 2016 16:36
@AMPANG you can make fairly simple shapes and combine them together
Amelia Pang
@AMPANG
Jun 12 2016 16:37
@karolinaKluz Oh I see
Karolina Kluz
@karolinaKluz
Jun 12 2016 16:37
@AMPANG but I personally prefer making svg in html
Ken Haduch
@khaduch
Jun 12 2016 16:39
@AMPANG - I found this site that has some interesting use of CSS to generate background textures - you might want to look at it to see if it gives you any insight. http://lea.verou.me/css3patterns/ At least it is interesting if you don't know about these kinds of things...
Franco Correa
@francocorreasosa
Jun 12 2016 16:40
Hi!, How do I go to the next challenge of "Say Hello to HTML Elements"??\
I already know about the basics
Amelia Pang
@AMPANG
Jun 12 2016 16:40
@karolinaKluz fascinating! Shanks
Ken Haduch
@khaduch
Jun 12 2016 16:43
@jask84 - I think that you have to have the media query after your other CSS, because it is order dependent as to what takes effect in the CSS application to your HTML code. It looks like moving that block of CSS with the media query down to the bottom of the CSS panel makes it work?
DonFilip
@DonFilip
Jun 12 2016 16:45
@JonKaric @andrewchar yes with bootstrap but i don't know why anything i tried didn't work, execly in chrome inognito everythink is ok but when i open in IE it douesn't work ok
Jonathan
@JonKaric
Jun 12 2016 16:46
@DonFilip IE has a lack of support for a lot of things if youre using version 9 or less, could you post a codepen so i can see?
DonFilip
@DonFilip
Jun 12 2016 16:47
i relize that i can make similar page with bootrap scroll spy but i don't wanna make everythin from begening
just a sec i will send you link
Jas K
@jask84
Jun 12 2016 16:49
@khaduch thanks. I will try that now. I'm sure I had the media queries on top previous times I have used it but there must be a reason for that. I'll look into it.
CamperBot
@camperbot
Jun 12 2016 16:49
jask84 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1303 | @khaduch |http://www.freecodecamp.com/khaduch
DonFilip
@DonFilip
Jun 12 2016 16:50
@JonKaric @DonFilip
i relize that i can make similar page with bootrap scroll spy but i don't wanna make everythin from begening
just a sec i will send you link
https://s.codepen.io/DonFilip/debug/PzqBMJ
Jas K
@jask84
Jun 12 2016 16:50
@khaduch works perfectly. thanks again
CamperBot
@camperbot
Jun 12 2016 16:50
jask84 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: jask84 already gave khaduch points
Jonathan
@JonKaric
Jun 12 2016 16:51
@DonFilip Could you send us the link for the edit mode?
@JonKaric in chrome evertyhin is ok, but ie desroy everything :)
*destroy
Jonathan
@JonKaric
Jun 12 2016 16:54
@DonFilip I can imagine IE usually destroys anything it touches. I reccomend using bootstrap because it will allow you to better understand how responsive design is done. there are quite a lot of styling errors at the moment.
DonFilip
@DonFilip
Jun 12 2016 16:55
then better option is to use bootstrap scrollspay and made similar page i think?
Jonathan
@JonKaric
Jun 12 2016 16:56
@DonFilip I definitely recommend using bootstrap and start from the beginning
DonFilip
@DonFilip
Jun 12 2016 16:56
can't fix this page? @JonKaric
Jonathan
@JonKaric
Jun 12 2016 16:57
@DonFilip there are too many things that are breaking your page so i cant really help you. for example you are styling your portfolio items in your HTML which you should never do
DonFilip
@DonFilip
Jun 12 2016 16:58
yes so bootstrap from begining :)
Kashif Mohammed
@Spyreo
Jun 12 2016 16:58
Can you help me Don?
What does this mean
myStr should have the escape sequences for backslash tab tab carriage-return new-line separated by spaces
DonFilip
@DonFilip
Jun 12 2016 16:59
?
Jonathan
@JonKaric
Jun 12 2016 16:59
@DonFilip Yeah :) once you understand how a responsive web page should be build in bootstrap its easy after that
Kashif Mohammed
@Spyreo
Jun 12 2016 16:59
Sorry, got it
DonFilip
@DonFilip
Jun 12 2016 17:00
@JonKaric Thnks
Ian Quain
@Ian-Quain
Jun 12 2016 17:08
I'm trying to place my img with a line of descriptive text in a centered box on the page, the box needs to have a thin black border and a white background to it, how should I code this in?

http://codepen.io/Ian-Quain/pen/MeyKoq

You can see the picture and the text that need to be in said box :/

Jas K
@jask84
Jun 12 2016 17:10
Hi all. I have come to the end of all the Front End development projects for FCC. However, looking back on my weather app project, the data from the openweathermap api seems to now be empty. I had it all working before. Console now says "getCurrentPosition() and watchPosition() are deprecated on insecure origins". Any ideas on whats happened?
Ronique Ricketts
@RoniqueRicketts
Jun 12 2016 17:16
Hello everyone. Can I make a jQuery background image height 7 width be 100% ?
here is my code
$("body").css({
              "background-image": 'url(' + additional + ')'
            });
additional is a varable with the url
Gilbert Adu-Sefah
@gadusefah
Jun 12 2016 17:20
why are you commenting out the url?
Ronique Ricketts
@RoniqueRicketts
Jun 12 2016 17:40
I didn't comment it out. @gadusefah
Gilbert Adu-Sefah
@gadusefah
Jun 12 2016 17:41
What I am thinking is that because we have two single quotes surrounding the url(, it will assume that is a string
you will probably have to escape the single quote using double quotes
have you fixed it yet
Ronique Ricketts
@RoniqueRicketts
Jun 12 2016 17:42
the image is picking up as the background so its working however I want to make the image fixed and also stretch to 100%
Gilbert Adu-Sefah
@gadusefah
Jun 12 2016 17:46
you might have to use background-size
try this and lets see background-size: either cover or contain
Diego Herrera
@d-herrera
Jun 12 2016 17:49
Hi guys, need some help with a Jquery script, can I ask for help in this room?
Shusil Banjade
@shusil123
Jun 12 2016 17:53
@d-herrera , Yes, you can . What's the problem ?
Diego Herrera
@d-herrera
Jun 12 2016 18:01
ok firts of all, thanks for your time. I need to target the I that contains the ion icon to be manipulated forward in Jquery

the html section :

<div class="col-sm-4 social">
<i class="ion-social-whatsapp acc-icc"></i>

the script:

$(".acc-icc").mouseover(function(){
$(this).addClass("animated pulse");
$(this).css("color","yellow");
$(this).mouseleave(function(){
$(this).removeClass("animated pulse");
$(this).css("color","#ffa19d");
});
});

I know its uggly written feel free to make the comments if the sintaxis of the script is a sh**t :P
Diego Herrera
@d-herrera
Jun 12 2016 18:10
the addClass is not working the rest the script works well
Mihók Balázs
@mihokbalazs
Jun 12 2016 18:10
Hi, I got stucked guys :(
"Add an h4 element to each of your <div class="col-xs-6"> elements."
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">

<div class="well" id="left-well">
<h4>#left-well</h4>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">

<div class="well" id="right-well">
<h4>#right-well</h4>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
What's the problem
Kyle W Pilkinton
@tadake
Jun 12 2016 18:36
heres you code formatted @Crazal
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">

<div class="well" id="left-well">
<h4>#left-well</h4>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">

<div class="well" id="right-well">
<h4>#right-well</h4>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
Ronique Ricketts
@RoniqueRicketts
Jun 12 2016 18:49
Hello Guys please check this our http://codepen.io/Ronique/full/vKYbpY/
Is it finding current location? Idk if I did it correctly.
Ray Liu
@mania7539
Jun 12 2016 18:57
Hello @/all , Woohoo! I've just finished my weather app, if you are available , can you let me know your opinion about it? Would like to hear thoughts and comments from you guys! The link here: http://codepen.io/mania7539/pen/ezYvoG
Diego Herrera
@d-herrera
Jun 12 2016 19:06
Guys I need a help
KatGeek
@KatGeek
Jun 12 2016 19:30
How can I manage an error in $.getJSON as we can do with $.ajax??? There are solutions on google but there are things deprecated and i am not sure if i can use them. What is a good solution?
Dylan
@dhcodes
Jun 12 2016 19:42
@KatGeek i think you can pass an err parameter to the getJSON call
and then if (err) { console.log(err) } or soemthing
@KatGeek scratch that
you can use .fail
there is an example here: http://api.jquery.com/jquery.getjson/
Dylan
@dhcodes
Jun 12 2016 19:51
@d-herrera what's up
@mania7539 i like it, especially that animation. Only thing I would change is that it says "Time on your PC" and I'm on a mac
maybe "time on your system"?
silly macs be all like "I'm not a PC silly"
@mania7539 also thanks for reminding me it's 95 degrees outside
CamperBot
@camperbot
Jun 12 2016 19:52
dhcodes sends brownie points to @mania7539 :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @mania7539 |http://www.freecodecamp.com/mania7539
Dylan
@dhcodes
Jun 12 2016 19:52
yeesh
KatGeek
@KatGeek
Jun 12 2016 20:03
thanks @dhcodes! I didnt saw the last part of that document. I thinks I need a rest XD
CamperBot
@camperbot
Jun 12 2016 20:03
katgeek sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1006 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jun 12 2016 20:05
netflix time :tv:
Daniel
@clevadani
Jun 12 2016 20:08
Guys in the simon game, how do I make the computer wait for the player moves before executing computer move
Dylan
@dhcodes
Jun 12 2016 20:10
@clevadani write a function for the player and hten have it go to the player function after the computer's turn
?
Daniel
@clevadani
Jun 12 2016 20:15
@dhcodes don't really get you
jdoichy
@jdoichy
Jun 12 2016 20:16
Hey everyone. I am just starting my tribute page and want to start good habits early on. What are some good ways to plan out and organize projects like these?
Dylan
@dhcodes
Jun 12 2016 20:17
@clevadani what does the computer turn do? in short
oh
@clevadani do you mean it won't wait for each click of the player
as in, the player clicks one button and the computer goes again?
niks3
@niks3
Jun 12 2016 20:18
code
Daniel
@clevadani
Jun 12 2016 20:19
@dhcodes yes. It kinda fires after a player click
Dylan
@dhcodes
Jun 12 2016 20:19
@clevadani my computer turn added a random color to an array, so then the player turn added the player's clicks to an array, so I had an if statement that said if the player's click array is < the computer's array, the player goes again
essentially
else, computer's turn
idk how yours is set up exactly but maybe that helps?
Karolina Kluz
@karolinaKluz
Jun 12 2016 20:20
@jdoichy HI. I would suggest using bootstrap. If you don't know how it works and what to use, read it here http://getbootstrap.com/
Daniel
@clevadani
Jun 12 2016 20:20
@dhcodes yea it helps
@dhcodes lemme try that out
Dylan
@dhcodes
Jun 12 2016 20:21
@jdoichy i like to write out what all the functionality is. Even for a basic site you can still make an outline (ex. how many divs, what's in them, etc.)
godspeed @clevadani
niks3
@niks3
Jun 12 2016 20:24

hi can somone help me with this idk whatd wrong but it keeps telling me that I need an a element that leads to http://freecatphotoapp.com

<p> hers a link

<a href="http://freecatphotoapp.com">
cat photos </a>

</p>

jdoichy
@jdoichy
Jun 12 2016 20:24
@karolinaKluz I mean before the coding even begins
Karolina Kluz
@karolinaKluz
Jun 12 2016 20:26
@jdoichy Before? Collect your assets, images and text
@jdoichy there's nothing more for a tribute page
jdoichy
@jdoichy
Jun 12 2016 20:28
@karolinaKluz yes i know, but I am talking for all projects what are good habits to form, good ways to plan the layout etc. I wanna start doing this now, so when projects get more complex I already have the skills formed
Karolina Kluz
@karolinaKluz
Jun 12 2016 20:32
@jdoichy I guess you will learn more not from planning a project but from making mistakes. I've just remembered something that maybe helpfull...
this guy goes from the very beginning of building a website
Tjasa Kravcar
@TDandelion
Jun 12 2016 20:37
@jdoichy i am also a beginner and i agree with @karolinaKluz .. learning-by-doing ist the best piece of advice you can get + not avoiding problems, but rather trying to solve them (exactly that what i was trying to avoid, came sooner or later back at me) - so I guess there are no shortways..
Tonye Iyalla
@tiyalla
Jun 12 2016 20:49
Hey everyone, i just finished my wikipedia viewer. Have a look and pls give me some feedback http://codepen.io/tiyalla/full/XKXegj/
M Phillips
@melluvia
Jun 12 2016 20:51
ok can someone tell me why when I make the window size small the social media link buttons in the top right don't have the hover effect?
http://codepen.io/melluvia/pen/BzNxNr
Jonathan
@JonKaric
Jun 12 2016 20:53
@melluvia Hey just taking a look now
M Phillips
@melluvia
Jun 12 2016 20:53
@tiyalla looks good but maybe put the cursor a little to the right of the search graphic instead of on top of it (not sure if that's just because of my screen size or not) btw love your portfolio site that it links to! very cool
Jonathan
@JonKaric
Jun 12 2016 20:57
@melluvia Hey Melissa, there are quite a few problems with your code. Im gonna write them here as i find them:
line 6: you called it .row-sm-.. just call it row
M Phillips
@melluvia
Jun 12 2016 21:01
ok thanks so much @JonKaric
CamperBot
@camperbot
Jun 12 2016 21:01
melluvia sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
Jonathan
@JonKaric
Jun 12 2016 21:01
Line 17: enclosed buttons inside a paragraph tag. To be sematically correct just put them inside a div element
line 42-56: no such thing as container element, use div instead
Tonye Iyalla
@tiyalla
Jun 12 2016 21:06
@melluvia oh right. cool i'll change that
@melluvia thanks!
CamperBot
@camperbot
Jun 12 2016 21:07
tiyalla sends brownie points to @melluvia :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @melluvia |http://www.freecodecamp.com/melluvia
M Phillips
@melluvia
Jun 12 2016 21:08
no problem!
ty for looking thru all my code @JonKaric I'm making the changes as you find them
CamperBot
@camperbot
Jun 12 2016 21:09
melluvia sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
kwittig
@kwittig
Jun 12 2016 21:11
How do you target HTML elements with selectors using jQuery?
<script>
$(document).ready(function()$("button").addClass("animated bounce"); {

});
</script>
Karolina Kluz
@karolinaKluz
Jun 12 2016 21:12
@kwittig you've got brackets {} in the wrong place
JD Tadlock
@jdtdesigns
Jun 12 2016 21:14
@kwittig $('button').addClass('animated bounce'); should be all you need
kwittig
@kwittig
Jun 12 2016 21:14
oh
Alex Myers
@qckpckt
Jun 12 2016 21:39
Can anyone tell me where to find the URLs for the search results from my wikipedia JSON call? I cant seem to find how to do this. Feel like I’m missing something pretty obvious. Other feedback welcome too, here’s a link to my pen http://codepen.io/qckpckt/pen/BzNxEb
mcorby17
@mcorby17
Jun 12 2016 21:46
Hey guys, does anyone know how if the "icon" in the JSON provided by the openweathermap API is an actual icon I can display on my page somehow? It doesn't look like an image link... just 3 letters/numbers...
{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}
It's under "weather"
Alex Myers
@qckpckt
Jun 12 2016 21:53
Hi @mcorby17. The icon will simply be a text string. You can make a database of your own icons, and then use the icon string to select the correct image and assign it to the page.
@mcorby17 I decided to go with background images, so I made a CSS class for each possible icon type, and then made a switch statement in my code that took the icon output from the JSON call and used that to assign the correct class to the background.
I can post my pen if it helps
mcorby17
@mcorby17
Jun 12 2016 21:55
@qckpckt Ok that's a good idea! I'll try to do it myself first, thanks!
CamperBot
@camperbot
Jun 12 2016 21:55
mcorby17 sends brownie points to @qckpckt :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @qckpckt |http://www.freecodecamp.com/qckpckt
Alex Myers
@qckpckt
Jun 12 2016 21:56
no problem :)
Nikhil Goyal
@ngoyal100894
Jun 12 2016 21:57
{"cod":"200","message":0.0032,
"city":{"id":1851632,"name":"Shuzenji",
"coord":{"lon":138.933334,"lat":34.966671},
"country":"JP"},
"cnt":10,
"list":[{
    "dt":1406080800,
    "temp":{
        "day":297.77,
        "min":293.52,
        "max":297.77,
        "night":293.52,
        "eve":297.77,
        "morn":297.77},
    "pressure":925.04,
    "humidity":76,
    "weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],}
        ]}
I want weather forcast for 7 days
This is the response format from open weather map for json
if I use list[0].weather.description , that will show me the description for today right
Now i want same thing for tomorrw
should it be list1.weather.description or
list.weather1.description
correction
list[1].weather.description or list.weather[1].description
@qckpckt ? can you help
mcorby17
@mcorby17
Jun 12 2016 22:00
@ngoyal100894 hmm well I don't think there's any JSON in there for the next day
Drew
@andrewp89
Jun 12 2016 22:00
anyone doing calculator
Nikhil Goyal
@ngoyal100894
Jun 12 2016 22:01
openweather should return data for 7 days if i ask for it @mcorby17
thats the format that i got from its documentation
in this cnt = 10 this one is for 10 days .. so there should be more in list right ? for the next 9 days
mcorby17
@mcorby17
Jun 12 2016 22:03
@ngoyal100894 that would make sense... is this JSON for the 10th day?
Alex Myers
@qckpckt
Jun 12 2016 22:04
sorry @ngoyal100894 I didnt use open weather for my project. I used forecast.io
so im not sure if i can be much help
Has anyone worked on the wikipedia project? I cannot seem to find a way to grab the URLs of the pages i’m searching for. I’m pretty close to just cheating and looking at the example projects source code at this point
Nikhil Goyal
@ngoyal100894
Jun 12 2016 22:06
They have not said anything .. they have just marked it with a heading example of API respond for JSON
np @qckpckt
RompePC
@RompePC
Jun 12 2016 22:07
Hey there, some help would be grateful here.
I'm trying to do a "magical" menu that toggles in height when clicked (mobile version), so it shows dinamically its options or not (if the menu is collapsed you don't see them of course).
The problem I'm facing is that using display: block shows the elements faster than the menu toggling, and setting z-index in some way would achieve the same result I think.
The problem is that I wanna show the elements at the same time they are inside the menu's height (so the last element cannot be seen until it fully toggles down). Its hard to understand, but the concept is easy (something like an accordion).
The code is here https://codepen.io/RompePC/pen/YWyLOx
@qckpckt Something like https://codepen.io/RompePC/full/XKJmzv/ ?
Nikhil Goyal
@ngoyal100894
Jun 12 2016 22:12
@mcorby17 ?? see my doubt is if list had more data for the next 9 days .. how would i access descroption for tomorrow ?
list[1].weather.description or list.weather[1].description
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:15
Hey I'm trying to get my images on my portfolio (image coming soon) to be side by side with bootstrap.. what am i doing wrong? http://codepen.io/ThomasBurgess2000/pen/EyKKwg
Alex Myers
@qckpckt
Jun 12 2016 22:16
@RompePC I see you used an ajax call, which is a different approach than I took. I used the .getJSON selector. But, I think I have the answer in what you did as I have been using query and not opensearch. Looks like that’s what’s been causing all of my issues!
so thanks @RompePC
CamperBot
@camperbot
Jun 12 2016 22:16
:cookie: 308 | @rompepc |http://www.freecodecamp.com/rompepc
qckpckt sends brownie points to @rompepc :sparkles: :thumbsup: :sparkles:
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:18
@ThomasBurgess2000 I'm not sure if your row with images is nested inside "container-fluid"? have you checked all of divs opening and closing tags if theres any missing maybe?
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:19
can I create a new container-fluid class just around them to make sure? @karolinaKluz
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:19
@ThomasBurgess2000 sure
@ThomasBurgess2000 but you need to make sure that they are not inside another container
because you cant nest container inside container if Im remembering correctly
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:21
@karolinaKluz ok let me check...
Ok I need to go back through all my divs because they are a mess, let me get back to you @karolinaKluz
mcorby17
@mcorby17
Jun 12 2016 22:25
@ngoyal100894 yeah idk if there's more data it should be in the JSON
Nikhil Goyal
@ngoyal100894
Jun 12 2016 22:26
they might have cut it to keep the doc short .. 9 listings would consume the page size
mcorby17
@mcorby17
Jun 12 2016 22:26
Does anyone know how I could make my town, icon, weather, and button be aligned vertically when the page isn't wide enough? http://codepen.io/mcorby17/pen/xOwBzB?editors=1010
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:26
Ok I think there is only one container fluid now @karolinaKluz . I had 4. But it's still not working.
mcorby17
@mcorby17
Jun 12 2016 22:28
Also i'm not sure why it doesn't run properly in the codepen I just posted... it works fine in my actual codepen window
for my doubt ..;)
kwittig
@kwittig
Jun 12 2016 22:30

<script>
$(document).ready(function()
$("button").addClass("animated")
$(".btn").addClass("shake")
$("#target1").addClass("animated shake btn-primary"); {

});
</script>
How do you target the same element with multiple jQuery selectors?

Karolina Kluz
@karolinaKluz
Jun 12 2016 22:31
@ThomasBurgess2000 let me check. There are other issues. Let me point them out. 1st: I found that in some places you open h1, and then close as h2.
and you didn't close h3 at the bottom
maybe the last closing div doesnt work because of it
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:32
Oops. Thank you, I fixed that, but it's still not working for some reason. @karolinaKluz
CamperBot
@camperbot
Jun 12 2016 22:32
thomasburgess2000 sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 204 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
mcorby17
@mcorby17
Jun 12 2016 22:34
@ngoyal100894 Yeah that makes more sense. Did you not show us all of the json?
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:35
@ThomasBurgess2000 omg, I've finally found it
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:35
YAY @karolinaKluz
mcorby17
@mcorby17
Jun 12 2016 22:35
because if it's structured like that then you should be able to just change the index of forecast[index] according to which day you want @ngoyal100894
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:35
its "col-sm-6" not "col-s-6"
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:36
omg
let me try that
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:36
and later not col-m-6
col-md-6
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:36
that fixed it. thank you so much @karolinaKluz
CamperBot
@camperbot
Jun 12 2016 22:36
thomasburgess2000 sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:warning: thomasburgess2000 already gave karolinakluz points
Thomas Burgess
@ThomasBurgess2000
Jun 12 2016 22:36
I had been trying stuff for half an hour
never would have known that
Karolina Kluz
@karolinaKluz
Jun 12 2016 22:37
@ThomasBurgess2000 no problem, I've made that mistake myself before
Nikhil Goyal
@ngoyal100894
Jun 12 2016 22:38
okay .. @mcorby17 thanx.. I think I got it ..
CamperBot
@camperbot
Jun 12 2016 22:38
ngoyal100894 sends brownie points to @mcorby17 :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @mcorby17 |http://www.freecodecamp.com/mcorby17
mcorby17
@mcorby17
Jun 12 2016 22:50
@ngoyal100894 Awesome!
Ken Haduch
@khaduch
Jun 12 2016 22:51
@kwittig - are you just asking the question about what this means? or is something not working? "Targeting the same element with multiple jquery selectors"
Ken Haduch
@khaduch
Jun 12 2016 22:58

@kwittig - the element that is being "targeted" in three different ways is this: <button class="btn btn-default target" id="target1">#target1</button>

  • The $("button") selector will select all button elements, including the one I listed
  • the $(".btn") selector will select all elements that have the class btn, including this one
  • the $("#target1") selector is for an ID, and only this element has the ID = target1 - and ID values have to be unique.

So it is perhaps somewhat misleading to say "target the same element" because many other elements are also being targeted, but this particular one is being "targeted" in three different ways, due to the use of the ID selector. NOW - there might be one thing that you have incorrect in that you are only supposed to "Add the btn-primary class to the button with id #target1" - given that the first two selectors target the element in question, you only need to add the btn-primary class in the third selector, the other two classes are already added through the action of the first two selectors.

Greg Duncan
@GregatGit
Jun 12 2016 23:08
@khaduch thanks for your tips to get my boxes centered and lined up - totally worked
CamperBot
@camperbot
Jun 12 2016 23:08
gregatgit sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1304 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 12 2016 23:10
@GregatGit - you're welcome. I saw someone else comment about using flexbox - I haven't any experience with that, but after seeing it mentioned so many times, it might be worthwhile to consider learning about it? But I'm glad that my suggestion helped you - some of these things, centering and strange margins, etc. - are certainly difficult to figure out, I like to try and do it to see if I can ever get consistently good results with debugging them!
Jonathan
@JonKaric
Jun 12 2016 23:13
@GregatGit @khaduch Defo learn traditional positioning before diving into flexbox
Ken Haduch
@khaduch
Jun 12 2016 23:16
@JonKaric - what is your reasoning? I could see, potentially, that there are many more sites using more traditional positioning strategies, and it is necessary to know them? Any other lines of reasoning - I'm curious? Thanks for the comment, because I've been wondering about how important flexbox would be to learn!
CamperBot
@camperbot
Jun 12 2016 23:16
khaduch sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
Ken Haduch
@khaduch
Jun 12 2016 23:17
@JonKaric - I don't know why it didn't send a brownie point? Thanks - let's see if it works this time?
CamperBot
@camperbot
Jun 12 2016 23:17
khaduch sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
Jonathan
@JonKaric
Jun 12 2016 23:20
@khaduch Well the new flexbox pretty much takes over almost all traditional positioning strategies. I personally think that flexbox shouldnt be used commercially untill the end of this year because of browser support. So its a good idea to get your head round traditional first because flexbox will soon take over much of what you do with the old technology. if that makes sence. and no worries! i can't recive brownie points for some reason
Lyba M
@lybamahenti
Jun 12 2016 23:22
if i submitted my build a tribute page but then i made changes can i resubmit it?
Ken Haduch
@khaduch
Jun 12 2016 23:23
@lybamahenti - I think that if you keep the same URL, you won't have to resubmit (but you probably could). If you change the URL, for example, a new COdePen project, then definitely resubmit.
Lyba M
@lybamahenti
Jun 12 2016 23:23
@khaduch k thnx
CamperBot
@camperbot
Jun 12 2016 23:23
lybamahenti sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1305 | @khaduch |http://www.freecodecamp.com/khaduch