These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Feb 2016
Brett Guillory
@kurzninja
Feb 10 2016 00:15
@zackluckyf just copy/paste your code into the appropriate sections in codepen
html to the html, css to the css, etc
what would you need to fix?
Dan Stockham
@DanStockham
Feb 10 2016 00:18
Is there a higher order function that can test if all the items in an array of arrays is the same?
Brett Guillory
@kurzninja
Feb 10 2016 00:23
like a built in function? I don't believe so
Dan Stockham
@DanStockham
Feb 10 2016 00:23
Right
Brett Guillory
@kurzninja
Feb 10 2016 00:23
there might be on in a library like underscore or lodash
maybe even jQuery
*one
Dan Stockham
@DanStockham
Feb 10 2016 00:25
I keep seeing underscore. What is that?
Brett Guillory
@kurzninja
Feb 10 2016 00:25
It's a utility library
for doing things similar to what you're asking for
Dan Stockham
@DanStockham
Feb 10 2016 00:26
Is it similar to jQuery?
I mean how fast can I pick up on it?
Brett Guillory
@kurzninja
Feb 10 2016 00:26
just include it in your page, search the docs for the type of function you're looking for
Dan Stockham
@DanStockham
Feb 10 2016 00:27
gotcha
Brett Guillory
@kurzninja
Feb 10 2016 00:27
It uses the underscore as it's main variable, like jQuery uses $
Dan Stockham
@DanStockham
Feb 10 2016 00:29
I'm looking at the docs. Looks handy.
Brett Guillory
@kurzninja
Feb 10 2016 00:30
:)
sigursiguros
@sigursiguros
Feb 10 2016 00:42
@jondcoleman how do I fix the rest of the elements?
Brett Guillory
@kurzninja
Feb 10 2016 00:45
anyone here that can help me with a bit of advanced function writing? I want to overload a function like jQuery does, where supplying an argument sets a private variable, but not supplying an argument retrieves the previously saved variable
zackluckyf
@zackluckyf
Feb 10 2016 01:02

@kurzninja well all of the images I used are on my computer and coded under that assumption + I'm sure many other potential problems. I decided to just submit it through git which works so unless a reviewer has a problem with that it's good to go

https://rawgit.com/zackluckyf/portfolio/master/index.html

Brett Guillory
@kurzninja
Feb 10 2016 01:38
@zackluckyf you could upload your images to imgur and link to them from there
zackluckyf
@zackluckyf
Feb 10 2016 01:40
@kurzninja Yeah I probably will eventually, it just doesn't seem that important right now honestly.
Brett Guillory
@kurzninja
Feb 10 2016 01:41
I think there's also a way to link them to Github as well, if you've already uploaded them into a repository there
zackluckyf
@zackluckyf
Feb 10 2016 01:50
Hmm couldn't seem to find any information on that. I did see that someone else apparently has done it in a similar fashion to how I did with just using github for everything so if I can avoid codepen I'll just stick to that as long as they don't make me change it!
Brett Guillory
@kurzninja
Feb 10 2016 01:54
I have one of my projects all in Github as well, I didn't know you could submit a Github repo as a solution
that's very useful lol
not that I need to, I only have code, not images
but still
zackluckyf
@zackluckyf
Feb 10 2016 01:57
hmm actually I need to figure out a way to do it better because technically I didn't link the repo I linked the website as a preview... hmm maybe I should just link the repo and include a file that says click me to preview lol
Brett Guillory
@kurzninja
Feb 10 2016 02:02
that's a good idea
sigursiguros
@sigursiguros
Feb 10 2016 02:41
Hi guys, I'm working on the pomodoro clock zipline.
I'd like to know whether I need a date time function to get the job done?
Alex Evans
@alex-evans
Feb 10 2016 02:49
@sigursiguros I would recommend not using date time functions and instead taking a look at setInterval() method. http://www.w3schools.com/jsref/met_win_setinterval.asp
sigursiguros
@sigursiguros
Feb 10 2016 02:50
@alcatrats what's the difference between using setTimeout and setInternal
setInterval*
Alex Evans
@alex-evans
Feb 10 2016 02:52
setTimeout will run once after the elapse time, setInterval will continue to run every interval of time until clearInterval is called.
Can someone help me out with the "Exact Change" challenge? I'm confused by how it is pointing me towards using Global Objects. I'm sure there is a reason as I'm writing the answer without them currently and it is ugly but I'm not grasping how the Global Objects will help simplify it. Any pointers?
Alex Evans
@alex-evans
Feb 10 2016 02:58
For example I currently have the following:
function drawer(price, cash, cid) {
  var change = cash - price;
  var total = cid[0][1] + cid[1][1] + cid[2][1] + cid[3][1] + cid[4][1] + cid[5][1] + cid[6][1] + cid[7][1] + cid[8][1];

  if(total < change) {
    return "Insufficient Funds";

  } else if(total == change) {
    return "Closed";

  } else {
   return ...;    // will determine exact change at this point and things get very very messy 
  }
}

drawer(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);
JackeL
@jackel27
Feb 10 2016 03:23
So, I finished the calculator challenge.. spent around 4 hours on it.. but could use a few fixes on layout adjustment....
Brett Guillory
@kurzninja
Feb 10 2016 03:32
currently working on the Calculator myself
Sam Reeves
@smreeves
Feb 10 2016 03:36
Also just finished the calc challenge. Starting to feel pretty comfortable with jQuery now...
Salman Shahid
@salman-shahid
Feb 10 2016 03:37
The calculator is annoying.. a lot of error checking
JackeL
@jackel27
Feb 10 2016 03:41
@mynameissal what type of error checking?
Brett Guillory
@kurzninja
Feb 10 2016 03:44
I'm just starting to work on the value entry logic
trying to figure out how I want to do this
Salman Shahid
@salman-shahid
Feb 10 2016 03:45
@kurzninja I made 2 plans then I decided to #yolo
Brett Guillory
@kurzninja
Feb 10 2016 03:46
lol
Salman Shahid
@salman-shahid
Feb 10 2016 03:46
@jackel27 Mostly math logic
JackeL
@jackel27
Feb 10 2016 03:47
@mynameissal check out eval
Salman Shahid
@salman-shahid
Feb 10 2016 03:47
and things like character limit checks, checks to see if there are no operators back to back..
JackeL
@jackel27
Feb 10 2016 03:47
hmm
Salman Shahid
@salman-shahid
Feb 10 2016 03:47
I am using eval but I have to make sure I don't have things like 1++1
JackeL
@jackel27
Feb 10 2016 03:47
good point. I did not do that, I figured taking the string into an expression and returning it back would be fine... even if it was 6**6
Salman Shahid
@salman-shahid
Feb 10 2016 03:49
Really.. hmm
Brett Guillory
@kurzninja
Feb 10 2016 03:49
I'm thinking about implementing some kind of event subscription to determine what button is being pressed, and passing the value of that button to an assignment controller
so if it's a number, it possibly goes into or replaces the current operand
if it's an operator, it goes into my currOp function
var currOp = function() {

        if (arguments[0]) {
            this.value = arguments[0];
            return;
        } else {
            return this.value;
        }
    };
Salman Shahid
@salman-shahid
Feb 10 2016 03:50
@jackel27
console.log(eval("1--1"));
SyntaxError: invalid decrement operand 1--1
@kurzninja I see, also depends on how you want your calculator works.
JackeL
@jackel27
Feb 10 2016 03:51
@mynameissal good point.. I will have to work on that myself
Salman Shahid
@salman-shahid
Feb 10 2016 03:52
E.g. do you want to display the whole line of calculations and evaluate when user presses = or evalulate after an operation..
Brett Guillory
@kurzninja
Feb 10 2016 03:52
that's what I was wondering too
it looks like in the example, it doesn't evaluate until you hit =
but different calculators work differently
Salman Shahid
@salman-shahid
Feb 10 2016 03:53
I think the second option is easier but each have their own difficulties.
Yeah, I am going with first option
JackeL
@jackel27
Feb 10 2016 03:53

heres mine.. need to work on a few things though.. best viewed in browser...

http://codepen.io/Jackel27/pen/obQoRN

Brett Guillory
@kurzninja
Feb 10 2016 03:54
if you want a real challenge, try implementing the user being able to type in the numbers on their keyboard as well as clicking on the page ;)
JackeL
@jackel27
Feb 10 2016 03:55
@kurzninja how about voice recognition
Salman Shahid
@salman-shahid
Feb 10 2016 03:55
@jackel27 Looks good this is the errors I pick up: multiple decimal places and the one I mentioned earlier.
Brett Guillory
@kurzninja
Feb 10 2016 03:55
hahaha
JackeL
@jackel27
Feb 10 2016 03:56
@mynameissal yeah, I noticed that also. I will have to do a check on last char in string
Salman Shahid
@salman-shahid
Feb 10 2016 03:56
How about blinks from webcam
Brett Guillory
@kurzninja
Feb 10 2016 03:56
set up a variable that checks to see if the current operation has had a decimal input, and ignore any after that
JackeL
@jackel27
Feb 10 2016 03:57
@kurzninja can't do that. cause user could type 24.4 * 43.92
@kurzninja well, in my code anyways. I could get away with blocking consecutive decimals... but what if user has 24.4.4.4 lol
Brett Guillory
@kurzninja
Feb 10 2016 03:58
well once an operator is selected, it's a new operand being entered
so that shouldn't be a problem
Salman Shahid
@salman-shahid
Feb 10 2016 03:59
The way I combated that was set a current variable. So I check if there is a dot in the current variable. If none set dot. When a user clicks an operator the current variable is reset.
Brett Guillory
@kurzninja
Feb 10 2016 03:59
Hmmm
JackeL
@jackel27
Feb 10 2016 03:59
hmm. I'll have to improve my calculator to be more FP
Salman Shahid
@salman-shahid
Feb 10 2016 04:00
Current variable is seperate from finalevaluation string
Brett Guillory
@kurzninja
Feb 10 2016 04:00
I think I might do this with a simple array
pikachu
@misonam03
Feb 10 2016 04:01
Add a new album to the myMusic JSON object. Add artist and title strings, release_year number, and a formats array of strings.

var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
// Add record here
];

var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
// Add record here
];

Can anyone help me?
I don't understand this prob
when I add code, it keep saying ] is expected.
Franco Zapata
@Francozt01
Feb 10 2016 04:04
@misonam03 u just have to add a new album , whatever u want following the structure of the array myMusic

var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
// Add record here
];

var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
},
// Add record here
];

Salman Shahid
@salman-shahid
Feb 10 2016 04:04
@misonam03 I think instructions are to add a new album. The array structure is [ {}, {}]
Franco Zapata
@Francozt01
Feb 10 2016 04:05
wrong....
send what i copied
lol
pikachu
@misonam03
Feb 10 2016 04:06
@Francozt01 tried to add new album,
it says they expect ]
not strings
Franco Zapata
@Francozt01
Feb 10 2016 04:06
@misonam03 give me the link to the exercise
Salman Shahid
@salman-shahid
Feb 10 2016 04:07
@misonam03 Here's an explanation of the myMusic structure. [ {albumEntry1}, {albumEntry2} ]
Franco Zapata
@Francozt01
Feb 10 2016 04:07
@misonam03 look at what @mynameissal wrote
Salman Shahid
@salman-shahid
Feb 10 2016 04:07
You make up a new second album using the previous albumEntry structure
pikachu
@misonam03
Feb 10 2016 04:08
so, is it like {albumEntry1,artistp[]}, {albumEntry2,artist[]}
gotta try again
Salman Shahid
@salman-shahid
Feb 10 2016 04:09
No
Franco Zapata
@Francozt01
Feb 10 2016 04:09
var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}, {here goes ur album with the same structure } ];
Salman Shahid
@salman-shahid
Feb 10 2016 04:09
They want you to do is make up a new album and add it to the myMusic array.
Franco Zapata
@Francozt01
Feb 10 2016 04:10
var myMusic = [ {album1 is the first object}, {album2 is the secon object} ];
Salman Shahid
@salman-shahid
Feb 10 2016 04:10
help channel
CamperBot
@camperbot
Feb 10 2016 04:10
no wiki entry for: channel
pikachu
@misonam03
Feb 10 2016 04:10
I figured out with you guys help!
Franco Zapata
@Francozt01
Feb 10 2016 04:10
cool
good luck :+1:
pikachu
@misonam03
Feb 10 2016 04:10
it was little tricky to me.
:D
Now I can go to bed
Franco Zapata
@Francozt01
Feb 10 2016 04:11
you will get used to it.
hahah gn8
pikachu
@misonam03
Feb 10 2016 04:11
I hope so
Salman Shahid
@salman-shahid
Feb 10 2016 04:12
:smile: For next time, If you click the help button when you're doing your challenge you'll be directed to the correct chat to ask your question. This chat is for front end dev project help.
pikachu
@misonam03
Feb 10 2016 04:12
oops
Didn't know that
first time using help
srry about that
Franco Zapata
@Francozt01
Feb 10 2016 04:13
np :D
Lewis
@Lewis65
Feb 10 2016 04:42
Does anyone have a minute to help me with the twitch api project?
I'm kind of confused how my json is being called successfully but is undefined when a method tries to go through it and append things to the document
the json retrieved is stored in a global var so it shouldn't be out of scope... and I included a ?callback=?... other than that I don't know what could cause that
Omar Richardson
@omie86
Feb 10 2016 04:53
Stuck on something here guys - http://screencast.com/t/HfaBs4XU
I'm supposed to only add one class with each of the three selectors? Isn't that what I've done?
<script>
  $(document).ready(function() {
  $("button").addClass("animated");
  $(".btn").addClass("shake");
  $("#target1").addClass("animated shake btn-primary");
  });
</script>
nvm got it
Daniel Ross
@gainiacster
Feb 10 2016 05:05
hello all
Brett Guillory
@kurzninja
Feb 10 2016 05:19
@Lewis65 it depends on where you are trying to access that global variable from. It has to be accessed from inside the AJAX callbacks, or it will come back as undefined because the rest of your code will be called before the AJAX call is finished
you need to define a function that is used as the callback to the AJAX function
Cody Cooper
@Cody-Cooper
Feb 10 2016 05:23
Anyone here who wants to help me understand link_to in rails? :smile:
Brett Guillory
@kurzninja
Feb 10 2016 05:26
you might be in the wrong place for that @Cody-Cooper
I don't know if you'll find much Rails help here
Cody Cooper
@Cody-Cooper
Feb 10 2016 05:29
@kurzninja Fair enough, I wasn't quite sure if rails was considered front-end or back-end. Thanks anyways!
CamperBot
@camperbot
Feb 10 2016 05:29
cody-cooper sends brownie points to @kurzninja :sparkles: :thumbsup: :sparkles:
:star: 398 | @kurzninja | http://www.freecodecamp.com/kurzninja
Sidharth Kriplani
@sidkrip
Feb 10 2016 06:08
Hello, I need some help with the portfolio zipline
how to divide the whole webpage into sections?
and how to associate each section with a button?
kaizen711
@kaizen711
Feb 10 2016 06:09
try using rows if you are going to use bootstrap
to seperate into sections
Sidharth Kriplani
@sidkrip
Feb 10 2016 06:10
and then associating each section with buttons?
Will using bootstrap make my webpage look like the one they have shown in the example?
kaizen711
@kaizen711
Feb 10 2016 06:11
using bootstrap allows you to use a grid to lay down elements of your page
and it helps make your page responsive so when you resize
things stay where you want them to be
you can try using anchors <a ....> for the buttons
Sidharth Kriplani
@sidkrip
Feb 10 2016 06:12
Oh alright. thanks @kaizen711
CamperBot
@camperbot
Feb 10 2016 06:12
sidkrip sends brownie points to @kaizen711 :sparkles: :thumbsup: :sparkles:
:star: 272 | @kaizen711 | http://www.freecodecamp.com/kaizen711
kaizen711
@kaizen711
Feb 10 2016 06:13
no problem @sidkrip
Martin Maza
@87maza
Feb 10 2016 06:20
@Cody-Cooper i'm a little rusty with rails. "link_to " is an embedded ruby thing on the html side of things (index.html turns into index.erb(embedded ruby). Similar to jade for javascript. You can look at it like an <a href> tag.
Cody Cooper
@Cody-Cooper
Feb 10 2016 06:51
@87maza
Sidharth Kriplani
@sidkrip
Feb 10 2016 06:54
@kaizen711 since this is my first zipline on codepen, I have these three workspace areas, html, css and JS. What do I do if i need to change them to something else?
something else like bootstrap
kirbyedy
@kirbyedy
Feb 10 2016 06:59
in the settings you attach bootstrap with the quick add option
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:13
thanks @kirbyedy
CamperBot
@camperbot
Feb 10 2016 07:13
sidkrip sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 431 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:13
how to get the twitter, github and all icons? I dont remember which tutorial it was exactly
kirbyedy
@kirbyedy
Feb 10 2016 07:14
I am not sure what are you asking...
you mean the font awesome ?
bitgrower
@bitgrower
Feb 10 2016 07:15
@sidkrip -- you can usually get them from the sites themselves ...
I know twitter has a page where you can download a twitter icon to be used for twitter buttons ...
Jenn Hardy
@smokeyLilac
Feb 10 2016 07:16
@sidkrip
kirbyedy
@kirbyedy
Feb 10 2016 07:16
this line should be included in your head <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Jenn Hardy
@smokeyLilac
Feb 10 2016 07:16
you can also do a search for them on an engine
under glyphicons
bitgrower
@bitgrower
Feb 10 2016 07:17
yeah, just be careful you have rights to use ... .not everything you find is freely available to use ...
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:19
thanks @kirbyedy @bitgrower @JennHardy
CamperBot
@camperbot
Feb 10 2016 07:19
sidkrip sends brownie points to @kirbyedy and @bitgrower and @jennhardy :sparkles: :thumbsup: :sparkles:
:warning: sidkrip already gave kirbyedy points
:star: 264 | @jennhardy | http://www.freecodecamp.com/jennhardy
:star: 432 | @bitgrower | http://www.freecodecamp.com/bitgrower
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:27
okay so I did include the link tag to use font awesome but I still dont know how to use the twitter icon in a button
Also, any idea on how to build the quote generator?
bitgrower
@bitgrower
Feb 10 2016 07:32
LOL, I'm surprised twitter doesn't literally have the code directly on their site ...
you HAVE done similar things in some of the earlier html/css exercises, I believe, @sidkrip
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:33
yes I have. I will have to find it out again, it's just that.
bitgrower
@bitgrower
Feb 10 2016 07:35
you can also find similar code on probably just about any button on any webpage on the web ...
:)
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:38
:D thanks again.
bitgrower
@bitgrower
Feb 10 2016 07:40
yw ... happy coding !
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:46
err because of curiosity, what exactly happens after the front end development certificate?
kirbyedy
@kirbyedy
Feb 10 2016 07:47
you can start the backend
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:47
and when do we get a job?
kirbyedy
@kirbyedy
Feb 10 2016 07:48
when you find it
just to be clear, this site is not a recruitment site, you need to find it yourself
this site just gives you opportunity to learn coding for FREE
for all the other sites you will have to pay between 5000-20000$
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:51
yes, I know that. But this site atleast gives the coders the opportunity to build their CVs by helping them find free NGO projects
kirbyedy
@kirbyedy
Feb 10 2016 07:52
exactly
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:52
:)
kirbyedy
@kirbyedy
Feb 10 2016 07:52
so the better your ziplines are, the better your chances are you will find a job
Sidharth Kriplani
@sidkrip
Feb 10 2016 07:52
how to know exactly what kind of ziplines will score?
i mean, what exactly is a good zipline?
kirbyedy
@kirbyedy
Feb 10 2016 07:54
It depends what is your future employer looking for
good design and good code = good zipline
kirbyedy
@kirbyedy
Feb 10 2016 07:59
here is an example
if you are an employer, which of this two guys you would call for the interview ?
AyonMKhan
@AyonMKhan
Feb 10 2016 09:23
hello everyone! I need some help with the wikipedia viewer
my code is not making getJSON request or it is getting cancelled
please help!
http://codepen.io/AyonKhan/pen/jWarPy?editors=0010
Jack Lyons
@JackEdwardLyons
Feb 10 2016 09:34
hey guys I am just having a bit of trouble with my select feature on my clock... any tips?
AyonMKhan
@AyonMKhan
Feb 10 2016 09:49
@JackEdwardLyons please comment your code like I'm 5
Sidharth Kriplani
@sidkrip
Feb 10 2016 10:04
@kirbyedy the second one
Sidharth Kriplani
@sidkrip
Feb 10 2016 10:20
is there any way to fade the background image?
kirbyedy
@kirbyedy
Feb 10 2016 10:21
transparency
Sidharth Kriplani
@sidkrip
Feb 10 2016 10:30
Okay, I will google that. How to import external fonts?
kirbyedy
@kirbyedy
Feb 10 2016 10:33
link to the font goes to the head
Sidharth Kriplani
@sidkrip
Feb 10 2016 10:37

this link?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

also, the way these sections are made without any <hr>, how do I replicate them?
kirbyedy
@kirbyedy
Feb 10 2016 10:41
yes
hr is the horizontal line if I am not mistaken
sections are made from divs
Sidharth Kriplani
@sidkrip
Feb 10 2016 10:56
and how to align he buttons to one side of the webpage?
*the
Raphaël Beaugiraud
@impucky
Feb 10 2016 11:01
Hey, I could use some help on the tic tac toe, specifically on checking for win conditions. There's something wrong with my loop that I can't figure out: http://codepen.io/impucky/pen/PZXoJq?editors=1011
Elliott McNary
@bighitbiker3
Feb 10 2016 11:01
@sidkrip try float: right;
h4r1m4u
@h4r1m4u
Feb 10 2016 11:02
@AyonMKhan your problem at the moment is that the you're using a form with a button that doesn't have a type attribute specified. a button inside a form without type is automatically a submit button, so what happens when you click on the Search button is that it submits the form and reloads the page. there are two possible solutions to the problem: a) you can prevent the form from submitting with javascript, or b) you can add a type attribute to the button to make it not a submit button: <button type="button" class="btn btn-default" id="search"><span class="glyphicon glyphicon-search"></span>Search</button>. the latter is a better approach
@AyonMKhan once you've done that, you'll realize that the API call is still not working properly because of the cross-domain request issue, but i'll let you take a stab at it yourself first.
Elliott McNary
@bighitbiker3
Feb 10 2016 11:03
@impucky I’m not familiar with angular, but does the $scope.board method check the contents of that space?
I’d think you’d need to do something like $scope.board[0][1].html() if using jQuery
Jenn Hardy
@smokeyLilac
Feb 10 2016 11:10
hi all, just wondering if anyone can help me figure out why my CSS background image for the body is not working
Raphaël Beaugiraud
@impucky
Feb 10 2016 11:14
@bighitbiker3 This is actually my first angular project so I'm not super familiar with it either. $scope.board is just a 2D array. My problem is with the checkWin function, it only works on the first row and last column
h4r1m4u
@h4r1m4u
Feb 10 2016 11:14
@impucky the issue is that you're setting the board to be empty here:
$scope.board = [[' ', ' ', ' '],[' ', ' ', ' '],[' ', ' ', ' ']];
so the value of each of the squares is an empty string.
in your checkWin function you then do this:
if ($scope.board[i][0] === $scope.board[i][1] && $scope.board[i][1] === $scope.board[i][2]) {
this will always evaluate to true, because the empty strings are equal to each other. you should be checking that the square values are equal AND not an empty string
the same goes for your if statement that checks the colums
Raphaël Beaugiraud
@impucky
Feb 10 2016 11:15
@h4r1m4u Yes!! Thank you, I knew it was something simple
CamperBot
@camperbot
Feb 10 2016 11:15
impucky sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1387 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 10 2016 11:15
also, don't forget that you can also win with 3 Xs/Os diagonally
my pleasure
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:20
@bighitbiker3 thanks
CamperBot
@camperbot
Feb 10 2016 11:20
sidkrip sends brownie points to @bighitbiker3 :sparkles: :thumbsup: :sparkles:
:star: 377 | @bighitbiker3 | http://www.freecodecamp.com/bighitbiker3
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:21
how does JS and html play together? I mean i know that JS is a kind of listener for events which take place on html components but how to write the code for that?
h4r1m4u
@h4r1m4u
Feb 10 2016 11:22
@JennHardy the issue is that the link for the image that you're using (http://postimg.org/image/5bq73kwcf/) is the link to the page with the image. the actual image URL is: http://s19.postimg.org/kkg4hcq0x/White_feathers_copia.jpg
change background-image: url("http://postimg.org/image/5bq73kwcf/"); to background-image: url("http://s19.postimg.org/kkg4hcq0x/White_feathers_copia.jpg/"); and you'll be golden
Jenn Hardy
@smokeyLilac
Feb 10 2016 11:24
thakns @h4r1m4u !
This message was deleted
CamperBot
@camperbot
Feb 10 2016 11:24
jennhardy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1388 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Jenn Hardy
@smokeyLilac
Feb 10 2016 11:27
still isn't working @h4r1m4u
蒲公英の生活
@fewspider
Feb 10 2016 11:27
@sidkrip from my point of view,js like soul,html like body,haha
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:29
@fewspider that's the theoretical part. I want to know how to implement it. I mean, how to write the code in js for html parts
Also, how to make all of the buttons of the same size?
Jenn Hardy
@smokeyLilac
Feb 10 2016 11:35
got it!
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:39
Okay so I want some help from you guys related to the QUote MAchine zipline. I want to create a kind of brain silhouette inside which will go dark for a second when the user will press for a new quote and then a light will turn on when the quote will appear. Will it be possible?
*Quote Machine
also, if I want to see the codepens of other users, how can I do that?
Elliott McNary
@bighitbiker3
Feb 10 2016 11:44
@sidkrip anything is possible…it’s just up to the programmer to figure out how
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:45
And I dont know how to figure it out
:/
Elliott McNary
@bighitbiker3
Feb 10 2016 11:46
a simple way to do that would be to add a class when the button is pressed to make the light go black, then use setTimeout to spit out the quote and change the light to look like it’s on
that’s if you’re doing the array method. If you’re using an api and actually have to make an ajax call then you can change the class to one by using a success promise
Sidharth Kriplani
@sidkrip
Feb 10 2016 11:49
I am sure that is of some great help but i didnt get any of it. WIll figure out something for sure. Thanks @bighitbiker3
CamperBot
@camperbot
Feb 10 2016 11:49
sidkrip sends brownie points to @bighitbiker3 :sparkles: :thumbsup: :sparkles:
:warning: sidkrip already gave bighitbiker3 points
Raphaël Beaugiraud
@impucky
Feb 10 2016 12:06
Before I get too crazy with my tic tac toe AI, is something like this: http://programmers.stackexchange.com/a/213570 realistic to implement?
PS
@patricksevat
Feb 10 2016 12:13
@impucky yes it is. It took me a massive amount of 'if-else'-statements but it is possible
in my experience I needed to hardcode the first 4 moves
Thomas
@Motass
Feb 10 2016 12:13
@impucky it is possible but it is easier and cleaner to implement the minimax algorithm: https://en.wikipedia.org/wiki/Minimax#Pseudocode
PS
@patricksevat
Feb 10 2016 12:14
after that I wrote a function if there is a possibility for human\computer win to block or play a winning move
@motass that goes beyond me, can I see your code to see how that works?
Raphaël Beaugiraud
@impucky
Feb 10 2016 12:16
@patricksevat @Motass Thanks, I'll look at the minimax alg and if I can't figure it out I'll go with the long way
CamperBot
@camperbot
Feb 10 2016 12:16
impucky sends brownie points to @patricksevat and @motass :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Feb 10 2016 12:16
:star: 307 | @patricksevat | http://www.freecodecamp.com/patricksevat
:star: 310 | @motass | http://www.freecodecamp.com/motass
Thomas
@Motass
Feb 10 2016 12:19
There's an exercise about recursive algorithm in the "Advanced Algorithm Scripting" part, that will help to understand the minimax algorithm
PS
@patricksevat
Feb 10 2016 12:26
allright, thx. Having a hard time understanding it now, however your code looks MUCH cleaner than mine
Thomas
@Motass
Feb 10 2016 12:36
That might be useful: http://neverstopbuilding.com/minimax
PS
@patricksevat
Feb 10 2016 12:43
@motass thx grabs coffee and starts reading
CamperBot
@camperbot
Feb 10 2016 12:43
patricksevat sends brownie points to @motass :sparkles: :thumbsup: :sparkles:
:star: 311 | @motass | http://www.freecodecamp.com/motass
Grant Langlois
@langwa
Feb 10 2016 14:28
I've gotta agree here, the jump from "use asynchronous requests" to "program an unbeatable AI" was quite jarring for me, too. I still haven't done it.
Because you can totally beat the AI on the FCC example. It seems weird as a "front-end" project.
Jan Pribošek
@GreatDanton
Feb 10 2016 14:35
@langwa I agree.
Thomas
@Motass
Feb 10 2016 14:35
@langwa Indeed
rphares
@rphares
Feb 10 2016 14:41
the examples were made before that was a requirement...
Grant Langlois
@langwa
Feb 10 2016 14:42
@rphares Fair enough, I've definitely completed Ziplines before the big update this year and I'll have to go back and add stuff.
rphares
@rphares
Feb 10 2016 14:44
:blush: they are mostly good things to know, and will also likely be easier going back ~
Grant Langlois
@langwa
Feb 10 2016 14:48
@rphares For sure
Aengus
@ShinyGreenCode
Feb 10 2016 14:51
CSS drives me crazy! I want to have a div with low opacity but with the text inside the div to keep full opacity. Should be simple right? I've put a span around the text but I can't override the parent div. How do I do this?
Grant Langlois
@langwa
Feb 10 2016 14:52
@BadLang Why don't you change the background to a transparent color? Instead of setting opacity.
Aengus
@ShinyGreenCode
Feb 10 2016 14:58
@langwa Ha, cool! Did not know you could do that. Thanks!
CamperBot
@camperbot
Feb 10 2016 14:58
badlang sends brownie points to @langwa :sparkles: :thumbsup: :sparkles:
:star: 346 | @langwa | http://www.freecodecamp.com/langwa
Grant Langlois
@langwa
Feb 10 2016 14:59
@BadLang No prob!
LennixM
@LennixM
Feb 10 2016 15:47
Hey guys, can you have a look at my random quote generator. I know I should add a few more colors and quotes but the overall functionality should be fine. What do you think?
http://s.codepen.io/LenniXM/debug/GowqZR
Thomas
@Motass
Feb 10 2016 15:55
@LennixM Looks good. I would just check that the new quote is different than the one already displayed.
NiekPas
@NiekPas
Feb 10 2016 15:59
@LennixM I would also recommend checking that the new colour palette is different from the one already displayed.
LennixM
@LennixM
Feb 10 2016 16:03
Yeah you are right. I should certainly fix that. Thanks for the feedback @Motass @NiekPas
CamperBot
@camperbot
Feb 10 2016 16:03
lennixm sends brownie points to @motass and @niekpas :sparkles: :thumbsup: :sparkles:
:star: 312 | @motass | http://www.freecodecamp.com/motass
:star: 6 | @niekpas | http://www.freecodecamp.com/niekpas
Nelly Ruiz
@ruiznelly
Feb 10 2016 16:31
@LennixM Hi! look nice... look much better with the background chanching
Franco Zapata
@Francozt01
Feb 10 2016 16:45
@LennixM full screen looks very good, the effect of changing background and quotes color is really nice! you wrote "By" under the generator, but it doesn't have your name. and when you make the window smaller, the quote generator is not fully responsive, the button isn't ok
Maciej Bembenista
@macbem
Feb 10 2016 16:45
@LennixM if i were you, i'd make the Facebook and Twitter buttons separate - at least by using a border.
Franco Zapata
@Francozt01
Feb 10 2016 16:45
blob
batman137
@batman137
Feb 10 2016 17:33
How can I make the image bigger the second section? http://codepen.io/batman137/pen/vLQZJB
i still have to make it responsive, so i'm referring to the full-size page
Clark Arnold
@clarkarnold
Feb 10 2016 17:49
help sum all odd fibonacci
CamperBot
@camperbot
Feb 10 2016 17:49

:point_right: algorithm sum all odd fibonacci numbers [wiki]

Explanation:

You will need to gather all the Fibonacci numbers and then check for the odd ones. Once you get the odd ones then you will add them all. The last number should be the number given as a parameter if it actually happens to be an off Fibonacci number.

:pencil: read more about algorithm sum all odd fibonacci numbers on the FCC Wiki

Maciej Bembenista
@macbem
Feb 10 2016 17:50
Create an array, filter even numbers, sum array with a for loop - easy :)
zackluckyf
@zackluckyf
Feb 10 2016 17:51

function quote(){
document.getElementById("quote-button").style.backgroundColor = "blue";
}

this exact function works properly when I use it under the script tag in my html. Is the issue syntax for a .js file or is there something I'm missing

Robert Uivarosi
@URobert
Feb 10 2016 18:11
@zackluckyf seems to work fine
@batman137 example bellow:
#image1{
  height:500px;
  width:500px;
}
Brett
@BLayman
Feb 10 2016 18:14
I'm working on my Promodoro Clock, and I'm starting by making a simple countdown timer. I'm trying to use the Date constructor, but without any luck. I think I must be using it incorrectly, but I just can't figure out what to do. Here's what I have so far:
http://codepen.io/BrettPen/pen/xZQROd
Roberto Di Lillo
@koop4
Feb 10 2016 18:23
Hi! I'm trying to add a gradient Background to my portfolio, and wrote the following code which... doesn't work xD
any help?
.background-2 { background: -moz-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -o-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -ms-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); }
whoops sry
batman137
@batman137
Feb 10 2016 18:23
thanks @URobert ... i wonder why this didn't work earlier :-/ probably i just had to refresh the page, instead of trying to find the reason for the problem :smile:
CamperBot
@camperbot
Feb 10 2016 18:23
batman137 sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
zackluckyf
@zackluckyf
Feb 10 2016 18:23
@URobert hmm strange can you look at another bit of my code maybe the issue is there?
<button id="new-quote" onclick="quote()">
                    <div id="quote-button">
                        <h4 class="quote-button-text">New quote</h4>
                    </div>
                </button>
Roberto Di Lillo
@koop4
Feb 10 2016 18:24
.background-2 { background: -moz-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -o-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -ms-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255)); }

...
CamperBot
@camperbot
Feb 10 2016 18:24
:star: 568 | @urobert | http://www.freecodecamp.com/urobert
Roberto Di Lillo
@koop4
Feb 10 2016 18:24
.background-2 { 
  background: -moz-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255));
 background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255));
 background: -o-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255));
 background: -ms-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255));
 background: -webkit-linear-gradient(-90deg, rgba(11,136,255) ,rgba(149,238,255));
 }
the above code doesn't render any background, i thought it should render the gradient from color 1 to color 2
what am i missing?
Loren Baca
@vbroskas
Feb 10 2016 18:25
Morning guys! When someone is free, could they maybe help me conceptualize how each part (HTML, CSS, Bootstrap, and jquery) come together and when they should be used when designing a website? I just got to the 'Build your own portfolio' exercise for reference?
Roberto Di Lillo
@koop4
Feb 10 2016 18:27
essentially, html is the structure of your page, also the text;
with CSS you change the aspect of your text and structures;
Javascript is used to manage events or dynamic changes to your CSS/HTML
Robert Uivarosi
@URobert
Feb 10 2016 18:27
@batman137 np. tw
@batman137 yw
batman137
@batman137
Feb 10 2016 18:30
?
Robert Uivarosi
@URobert
Feb 10 2016 18:31
@batman137 no problem, you are welcome
@zackluckyf what exactly do you want to achieve ? When you click the button you want it's background to change to blue ?
Loren Baca
@vbroskas
Feb 10 2016 18:33

k I understand that, I guess I mean more along the lines of when you are designing it...ok, for example, during all the exercises leading up to the first algorithm set, they would introduce a tool, say CSS, I would learn about it, but then later on, they would be like 'OK now ditch the CSS for bootstrap!'

So what I mean is, as Im making this portfolio, do I need to use CSS, or do I just use bootstrap? I guess I'm just confused with all the different methods they introduced, and how I should bring them all together

Brett
@BLayman
Feb 10 2016 18:34
@vbroskas HTML creates the basic framework, or structure of your site. CSS allows you to style the HTML elements as identified by class or ID. Bootstrap provides you with some additional CSS templates in the form of classes, so you don't have to make all of your own CSS. Personally, I had the hardest time grasping the connection between html and javaScript, since the tutorials don't really cover how the two interact. Jquery is one way of facilitating that interaction. It allows you to take things from HTML, modify them with Javascript functions, and plug them back into your html. You can also do this with HTML DOM methods, although they are a bit more wordy.
zackluckyf
@zackluckyf
Feb 10 2016 18:35
@URobert yes, I just want to use js to be able to change backgrounds with specific ones and then I'll eventually make them random if I can
Brett
@BLayman
Feb 10 2016 18:35
Yeah it's kind of false to say, "ditch CSS for bootstrap" when bootstrap is just prepackaged CSS classes.
Robert Uivarosi
@URobert
Feb 10 2016 18:35
@zackluckyf for some reason I can't make it work with onclick; so i went with jquery instead
Brett
@BLayman
Feb 10 2016 18:36
@vbroskas You can even modify your bootstrap classes by changing their CSS.
Robert Uivarosi
@URobert
Feb 10 2016 18:36
@zackluckyf also went with some simplifications (removing that unnecessary div - inside your buttons tags
@zackluckyf here : https://jsfiddle.net/x8v27wyu/
HTML
<button id="quote-button">New quote </button>

JS/jquery

$("#quote-button").click(quote);

function quote(){
document.getElementById("quote-button").style.backgroundColor = "blue";
}
Loren Baca
@vbroskas
Feb 10 2016 18:38

@BLayman ok cool, yeah I'm super confused by the HTML/JS interaction as well, but I didnt want to bring that up yet lol. Your explanation helps a lot.

Do you usually write the basic website framework in just HTML first and then come back and start adding in bootstrap classes, and javascript, or do you add everything together as you go?

Brett
@BLayman
Feb 10 2016 18:39
@vbroskas I usually start with the HTML so I have a framework.
zackluckyf
@zackluckyf
Feb 10 2016 18:39
@URobert haha thats unfortunate it wouldn't work with onclick I thought that was a cool feature. Thanks for the help! That seems to have fixed things
CamperBot
@camperbot
Feb 10 2016 18:39
zackluckyf sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 569 | @urobert | http://www.freecodecamp.com/urobert
Loren Baca
@vbroskas
Feb 10 2016 18:39
@BLayman ok cool, thanks for all the help man, much appreciated!
CamperBot
@camperbot
Feb 10 2016 18:39
vbroskas sends brownie points to @blayman :sparkles: :thumbsup: :sparkles:
:star: 267 | @blayman | http://www.freecodecamp.com/blayman
Brett
@BLayman
Feb 10 2016 18:42
@vbroskas with the exception of adding some built in bootstrap classes like "col-md-4" , so that the html is organized into columns.
Robert Uivarosi
@URobert
Feb 10 2016 18:44
@zackluckyf yw
@zackluckyf should work with onclick too, i'm probably missing something but I`m pretty damn tired
Alexander Køpke
@alexanderkopke
Feb 10 2016 18:47
when get request failed(404) inside a for loop, is it done with that iteration? In the error handler I can't access the element it iterated, it just says undefined
Amir Ghafouri
@amirghafouri
Feb 10 2016 18:49

Can someone help me with setting up a session length change user interface for the pomodoro timer?

The only button that is coded to work is the minus sign for work length, and it works in reducing the number on the HTML element, but then that change isn't recognized on the clockface.

http://codepen.io/amirghafouri/pen/MKPvRa/

Brett
@BLayman
Feb 10 2016 18:51

@vbroskas For future reference, if you'd like some information on the JS, HTML interaction, I found these sites helpful:

jQuery:
http://api.jquery.com/html/ (how to select and modify the html of an element)
https://api.jquery.com/click/ (how to make something happen when you click on an element)
http://try.jquery.com/levels/1/challenges/1 (a basic introduction and guide to jQuery)

Basic JS DOM manipulation:
http://www.w3schools.com/js/js_htmldom.asp
http://www.w3schools.com/js/js_htmldom_methods.asp

Personally, I use jQuery because it's easier, but it wouldn't hurt to learn both.

Alexander Køpke
@alexanderkopke
Feb 10 2016 18:53
@amirghafouri how do you get 7 to appear in the circle? I mean where does it get the 7 from?
Jonathan Coleman
@jondcoleman
Feb 10 2016 18:55
@amirghafouri you need to modify your global variables holding the associated values as the time is incremented and decremented and you need to update the UI when that happens - so with jQuery setting the text value of the clockface time element
Loren Baca
@vbroskas
Feb 10 2016 18:55
@BLayman dang nice! Thanks for all the good info. I'll start going over everything. Hope this first project isnt a complete disaster haha
CamperBot
@camperbot
Feb 10 2016 18:55
vbroskas sends brownie points to @blayman :sparkles: :thumbsup: :sparkles:
:warning: vbroskas already gave blayman points
Jonathan Coleman
@jondcoleman
Feb 10 2016 18:56
then also when you start the clock you need to pull from those global variables for the countdown time (which you may have already)
@alexanderkopke do you have some code or a link for the GET request question?
Thomas
@Motass
Feb 10 2016 18:57
@BLayman did you fix your issue with the timer ?
Brett
@BLayman
Feb 10 2016 18:59
@vbroskas Good luck. The first project is all about experimenting with HTML and CSS, so just have fun with it. The jquery will come in handy for the quote generator.
@Motass Not yet, still scratching my head on that one.
Thomas
@Motass
Feb 10 2016 19:00
@BLayman you should put $("#min").html(minutes);
$("#sec").html(seconds); inside your updateTimer function
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:02
var uArr = ["freecodecamp", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","jonsandman", "kanalkarnaval", "Bbrunofin"];
for(i = 0; i < uArr.length; i++){
$.getJSON('https://api.twitch.tv/kraken/streams/'+uArr[i], function(js){
// some code

.error(function(){

  $("#closed").html("<ul><li><img src='http://s21.postimg.org/4klc5ll6b/question.png'><a target=\"_blank\" href='http://www.twitch.tv'>"+uArr[i]+"</a></li>");});

};
@jondcoleman its the uArr[i] that doesn't work.. it is still inside the for loop tho. Left out the chuck of code that does work when the GET works.
Brett
@BLayman
Feb 10 2016 19:05
@Motass Wow, I can't believe that was all I had to do. I guess that makes sense that it needs to continually update the html. Thanks!
CamperBot
@camperbot
Feb 10 2016 19:05
blayman sends brownie points to @motass :sparkles: :thumbsup: :sparkles:
:star: 313 | @motass | http://www.freecodecamp.com/motass
Thomas
@Motass
Feb 10 2016 19:05
You're welcome :)
zackluckyf
@zackluckyf
Feb 10 2016 19:05
   <body>
        <section class="quote-box row">
            <div class="row">
                <h2 id="quote"><i class="ion-quote quotes-icon"></i>Words have meanings! Or so people tell me I'm not sure!</h2></div>
            <div class="row"><h4 class="author">- Zack Fanning</h4></div>
            <div class="row buttons">
                <button id="twitter-button"><a href="https://twitter.com/intent/tweet"><i class="ion-social-twitter twtter-button-icon"></i></a></button>
                <button id="new-quote">New quote</button>
            </div>
        </section>
        <section class="created-by row">
        <h4>By Zack Fanning</h4>
        </section>

    <script>
        $("#quote-button").click(quote){
        function quote(){
        document.getElementById("quote-button").style.backgroundColor = "blue";
        }
        };
    </script>
my new quote button doesn't turn blue, I can't seem to figure out why
Jonathan Coleman
@jondcoleman
Feb 10 2016 19:07
@alexanderkopke looking now
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:07
@zackluckyf not sure but it seems the quote function is inside the click brackets.
<script>
        $("#quote-button").click( function(){
        document.getElementById("quote-button").style.backgroundColor = "blue";
           });
    </script>
maybe that would work
Loren Baca
@vbroskas
Feb 10 2016 19:11
is a <br> statement the proper way to add white space?
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:11
<br> line breaks
but if that is what you want then you can do that
Loren Baca
@vbroskas
Feb 10 2016 19:12
what is the better way to add white space? @alexanderkopke
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:12
@vbroskas well, if you mean space between elements? Then you can use css with margin
Amir Ghafouri
@amirghafouri
Feb 10 2016 19:13

@amirghafouri you need to modify your global variables holding the associated values as the time is incremented and decremented and you need to update the UI when that happens - so with jQuery setting the text value of the clockface time element

This is what I thought that would look like:

// GLOBAL VARIABLES
// the time in seconds that you want to show with the full clock face
var workSeconds = $("#workLength").text();
var breakSeconds = $("#breakLength").text();
var workTimerSeconds = workSeconds;
var breakTimerSeconds = breakSeconds;

// a counter, decremented at one second intervals by setInterval
var countDown = workTimerSeconds;

// ADJUST SESSION DURATIONS

$("#reduceWork").on("click", function() {
  var workLength = $("#workLength").text(); 
  $("#workLength").text(workLength - 1);
  workSeconds = workSeconds - 1;
});

But it doesn't work. The clock worked perfectly fine when I had hardcoded my global variables workSeconds & breakSeconds so the issue is only pertinent to the above lines of code. Is my approach (above) fundamentally wrong?

Jonathan Coleman
@jondcoleman
Feb 10 2016 19:13
@alexanderkopke yeah I'm seeing the same behavior
@alexanderkopke I'm not sure what the best solution is off the top of my head
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:14
@jondcoleman thanks for looking. I will try a workaround of some sort
CamperBot
@camperbot
Feb 10 2016 19:14
alexanderkopke sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 519 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
zackluckyf
@zackluckyf
Feb 10 2016 19:16
@alexanderkopke tried the code you provided but it didn't work either, hmm it's strange because I had it working earlier
Loren Baca
@vbroskas
Feb 10 2016 19:16
@alexanderkopke ok ill try that. I mostly just meant for visually adding white space between text when the viewer is looking at the page
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:19
@jondcoleman got it.. right after the for loop started but before the GET I did: var user = uArr[i]; I was able to use user in the error handler. :)
Jonathan Coleman
@jondcoleman
Feb 10 2016 19:19
@alexanderkopke can I see?
Sam Reeves
@smreeves
Feb 10 2016 19:20
Hey guys! Working on the Pomodoro clock and was really curious how they are only doing partial transitions in the circle. Obviously I dont want to/required not to look at the code, but I've tried a few things myself and can't seem to figure out the CSS for it, (I'll know how to use javascript to change it later, but the whole only changing so part of the circle is a different color is where I'm getting stuck). out of curiosity I thought they might have used linear-gradient, but I just ran it in cross browser testing for IE 9 and it works there too, which according to the docs from w3schools says linear-gradient doesn't work for IE before 10. Any hints to what I should be looking into would be great!
Jonathan Coleman
@jondcoleman
Feb 10 2016 19:21
@alexanderkopke interesting. I still don't know why that works
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:22
This message was deleted
Amir Ghafouri
@amirghafouri
Feb 10 2016 19:23

@sreeves89 There are two different HTML elements: one is the round "clock face" and the other is a "fill" (which initially has height/width/opacity/whatever of 0. As your "countdown" variable decrements, a "filler" function runs every seconds that changes the CSS of the "fill" to increase it's height/width/opacity/whatever in proportion to the countdown

The "clockface" has overflow: hidden, if it didn't, you would see that the "fill" moving up/down is actually a rectangle with the parts outside of the circular clock face hidden

bitgrower
@bitgrower
Feb 10 2016 19:27
I asked this the other day and forgot to log the answer and got torn away ... which are the exercises that talk about using codepen ? Thanks!
Sam Reeves
@smreeves
Feb 10 2016 19:28
Thanks @amirghafouri! I will look into that and see if I can't replicate it.
CamperBot
@camperbot
Feb 10 2016 19:28
sreeves89 sends brownie points to @amirghafouri :sparkles: :thumbsup: :sparkles:
:star: 234 | @amirghafouri | http://www.freecodecamp.com/amirghafouri
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:30
@bitgrower must be ziplines
bitgrower
@bitgrower
Feb 10 2016 19:32
hmmm ... @alexanderkopke -- I'm pretty sure the answer I got the other day wasn't a zipline ...
ahh ... I have an idea ... I can search for my name ... might get my answer back ...
Sam Reeves
@smreeves
Feb 10 2016 19:33
Yep, the overflow: hidden was exactly what I was missing!
bitgrower
@bitgrower
Feb 10 2016 19:34
Just before the front end projects <-- the answer ...
Alexander Køpke
@alexanderkopke
Feb 10 2016 19:42
:+1:
Katya
@bonifacyj
Feb 10 2016 20:17

hey everyone :) I cant make my javascript click event work! I checked and tested everything like 1 000 times, but cant figure out where is the problem. It's a Random Quote Zipline, here is my code so far: http://codepen.io/bonifacyj/pen/wMewZq

that's JS piece:

$(document).ready(function() {

var arr = [quote1, quote2, quote3, quote4, quote5, quote6, quote7, quote8, quote9];

$('.btn').click(function() {
var quote = Math.floor(Math.random()*10);

$('.space').text(arr[quote]);

});

this is html piece:

<...>
<p class="space">A quote

        </p>

   < ....>

  <button class = "btn"><p>Press me</p></button>

<...>

Alexander Køpke
@alexanderkopke
Feb 10 2016 20:32
@bonifacyj the array is made of variables?
Katya
@bonifacyj
Feb 10 2016 20:35
@alexanderkopke I'm not sure I understand the question.. they are static values that are gonna be strings (quotes for Quote Machine), but for now they are just quote 1, quote 2 etc for simplicity
Alexander Køpke
@alexanderkopke
Feb 10 2016 20:38
@bonifacyj ok good. But for now put ' ' around each of them, because javascript doesn't understand empty variables.
@bonifacyj I just did it and now your quote machine works :)
var arr = ['quote1', 'quote2', 'quote3', 'quote4', 'quote5', 'quote6', 'quote7', 'quote8', 'quote9'];
Katya
@bonifacyj
Feb 10 2016 20:40
really?? I'll try now
omg!! it's unbelievable.
Alexander Køpke
@alexanderkopke
Feb 10 2016 20:42
good work!
Katya
@bonifacyj
Feb 10 2016 20:42
but I tryed to do it without an array, at some point it looked like
$('.btn').click(function() {

  $('.space').text('any'); 

  });
and it didn't work
what could be the reason?
thank you @alexanderkopke !
CamperBot
@camperbot
Feb 10 2016 20:44
bonifacyj sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
api offline
Alexander Køpke
@alexanderkopke
Feb 10 2016 20:55
@bonifacyj ah ok, yes the reason it didn't work before was because of the array with empty variables. When javascript has an error it stops working. So it stopped at the array and therefore the $('.space').text('any'); didn't work because javascript never got that far.
@bonifacyj if you change it now to $('.space').text('any'); it will work because the array is ok now and will not show error
Loren Baca
@vbroskas
Feb 10 2016 21:34

guys, quick question about buttons and rows. Im doing the design your portfolio project and I'm trying to get the row of buttons along the top that has contact,home,portfolio etc

I was trying to get all the buttons shifted over to the right, and noticed that when I used col-xs-offset-8 on the first button, it shifted all 4 over the right hand side nicely

the other 3 got moved just because the first one was offset so far. Is this the proper way to move a group of buttons over to the right?
when I try to use offset on each button, the all get evenly spaced out along the row, instead of having all 4 buttons nicely grouped over to the right
wait nevermind, just read that i fucked up by not putting them all in the same button group, you can disregard that question
Kevin Han
@kevhan94
Feb 10 2016 22:09
Hi can someone please review my Portfolio website and tell me why the jumbotron isnt extending all the way to the right of the screen? My codepen is http://codepen.io/kevhan94/pen/qbLjPJ
Bruce Young
@mutantspore
Feb 10 2016 22:12
@kevhan94 add in to the css for the jumbotron background-size: cover;
Alique Williams
@AliqueWilliams
Feb 10 2016 22:13
I'm trying to access the form data then display the form entry on the page. But every time I click enter, the web refreshes. Any way to handle this?
Franco Zapata
@Francozt01
Feb 10 2016 22:18
@kevhan94 -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Jan Pribošek
@GreatDanton
Feb 10 2016 22:20
Hi, I finished tictactoe game, but I need a bit of help. When I press new game button [line 273], I suspect the function game() [line 202] runs again, and therefore placing two XX / OO in the same rectangle (making two moves). Any idea how to prevent this?
http://codepen.io/GreatDanton/pen/VeVBPN?editors=0010
Franco Zapata
@Francozt01
Feb 10 2016 22:22
@kevhan94 replace ur CSS code in you jumbotron for this one
background: url('https://images.unsplash.com/photo-1416339442236-8ceb164046f8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0c68baec38ad565c4503c6635682d1c7') no-repeat center center fixed;
height: 800px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Amir Ghafouri
@amirghafouri
Feb 10 2016 22:31

@mutantspore Could you please look at this: http://codepen.io/amirghafouri/pen/MKPvRa/?editors=1010

Trying to set up the session length change user interface. The only button that is coded to work is the minus sign for work length, and it works in reducing the number on the HTML element, but then that change isn't recognized on the clockface.

CFCF
@CFCF
Feb 10 2016 22:41
@GreatDanton line 206 $(this).append('<img class="no-select" src="'+ selected + '"/>'); is the pulprit
@GreatDanton It should be $(this).html('<img class="no-select" src="'+ selected + '"/>');. The same thing happens in lines 25 and 245.
Jan Pribošek
@GreatDanton
Feb 10 2016 22:43
@CFCF correct
the 245 should be the same as 206 because it's for different side
and line 25 is used for showing computer move
CFCF
@CFCF
Feb 10 2016 22:52
@amirghafouri Add $('#time').text(workSeconds); to the #reduceWork on click event actions, after line 74. Currently only the value in workSeconds is changed - that does not affect the text in the #time element.
@GreatDanton Cool!
Amir Ghafouri
@amirghafouri
Feb 10 2016 23:01

Thanks @CFCF but that doesn't entirely work either. It changes #time for a momentary second but #time is always reverting back to the variable countDown based on the function showCount() running every interval in the function decTime()

I can tell that my problem is in a lack of understanding how my global variables interact: var countDown is the key variable

CamperBot
@camperbot
Feb 10 2016 23:01
amirghafouri sends brownie points to @cfcf :sparkles: :thumbsup: :sparkles:
:star: 341 | @cfcf | http://www.freecodecamp.com/cfcf
Bruce Young
@mutantspore
Feb 10 2016 23:05
rooms
CamperBot
@camperbot
Feb 10 2016 23:05

rooms

See all the FreeCodeCamp rooms at gitter.im/FreeCodeCamp/rooms
Or check this wiki article for a shortlist
Matthew Bailin
@mdbailin
Feb 10 2016 23:12
Hey all I'm on the first frontEnd project to design your portfolio
and I'm having trouble getting the spacing right for the images that will stand for future projects
specifically I can't write a caption under the image with an image on the next line covering it up
Bobby Mulligan
@rpmullig
Feb 10 2016 23:21
Is there a way to have a portal to a live webpage? I'm trying to get out of hosting my image of a screenshot of my github for the portfolio webpage
<img src="A_link_to_live_webpage" class="img-thumbnail" alt="my_gibhub">
something like that...
I'm looking at the HTML5 crossorigin attribute
not sure if that's what it does
Andrew Charlebois
@andrewchar
Feb 10 2016 23:56
anyone know of an image hosting site that allowed me to select my own width x lenght
allows *