These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Feb 2016
Aaron Kazah
@AaronKazah
Feb 01 2016 00:00
@keccakec hopefully I get it right, sorry I couldn't help though
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 00:01
I already know I'm gonna feel pretty dumb once I figure out what I did wrong with my button.
@AaronKazah It's all good! And as long as you recognize whatever you do wrong and try to make sure it doesn't happen again, getting things wrong at first is never a bad thing.
Blauelf
@Blauelf
Feb 01 2016 00:02
@keccakec If you want to show either F or C, you could create both (and set their values as soon as your API call returns), and hide one or the other, and toggle these states on button click
Otherwise, you would have to re-add the listener each time you re-create the element... (or add one listener to an outer element that does not change)
just finished my calculator
you guys mind checkign it out
and giving me feedback?
Maddah Anass
@unlimiworks
Feb 01 2016 00:18
Try codeReview room
Bruce Young
@mutantspore
Feb 01 2016 00:19
@AaronKazah allow multiple decimal points
Aaron Kazah
@AaronKazah
Feb 01 2016 00:20
@mutantspore
isn't ?
allow multiple decimal points
ohh crap, it's a bug
Bruce Young
@mutantspore
Feb 01 2016 00:21
allows lol
yes a bug
Aaron Kazah
@AaronKazah
Feb 01 2016 00:21
I'll solve it tomorrow morning, have school
but thanks though
anything else?
Bruce Young
@mutantspore
Feb 01 2016 00:22
the colours may be a but … well white letters on a light blue background … not enough contrast
sean9
@sean9
Feb 01 2016 00:25
hey how do i set margins so my somethings arent covered by my bar at the top
Aaron Kazah
@AaronKazah
Feb 01 2016 00:26
thanks for the input, but I feel like that's the way to go for the color @mutantspore didn't want too much contrast
CamperBot
@camperbot
Feb 01 2016 00:26
aaronkazah sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1064 | @mutantspore | http://www.freecodecamp.com/mutantspore
Aaron Kazah
@AaronKazah
Feb 01 2016 00:26
wanted it to feel overly light
Aaron Kazah
@AaronKazah
Feb 01 2016 00:26
ahh, I'm not really a fan of material deign
sean9
@sean9
Feb 01 2016 00:26
tried it in css and js but not too sure what the problem is
Aaron Kazah
@AaronKazah
Feb 01 2016 00:26
design
but thanks though
I'll look it up
Bruce Young
@mutantspore
Feb 01 2016 00:27
@AaronKazah yes but it gives some good color combinations. I u=nderstand what you are trying to do
Aaron Kazah
@AaronKazah
Feb 01 2016 00:28
Ahh I see, it's certainly easier as everything is there. I've never really seen this page before, the document I saw was more of a tutorial
I'll give it a read tomorrow
thanks for your input though
kiel barry
@kielbarry
Feb 01 2016 00:48
function convert(num) {
  num = num.toString();
  var newArray = num.split('');
  var len = num.length;
  var romNum = [];

var single = function(x){
    switch (x) {
      case 1: 
        romNum.push("I");
        break;
      case 2: 
        romNum.push("II");
        break;
      case 3: 
        romNum.push("III");
        break; 
      case 4: 
        romNum.push("IV");
        break;
      case 5: 
        romNum.push("V");
        break;
      case 6: 
        romNum.push("VI");
        break;
      case 8: 
        romNum.push("VIII");
        break;
      case 9: 
        romNum.push("IX");
        break;
    }
  };

var double = function(x){
    switch (x) {
      case 1: 
        romNum.push("X");
        break;
      case 2: 
        romNum.push("XX");
        break;
      case 3: 
        romNum.push("XXX");
        break; 
      case 4: 
        romNum.push("XL");
        break;
      case 5: 
        romNum.push("L");
        break;
      case 6: 
        romNum.push("LXX");
        break;
      case 8: 
        romNum.push("LXXX");
        break;
      case 9: 
        romNum.push("XC");
        break;
    }
  };

var triple = function(x){
    switch (x) {
      case 1: 
        romNum.push("C");
        break;
      case 2: 
        romNum.push("CC");
        break;
      case 3: 
        romNum.push("CCC");
        break; 
      case 4: 
        romNum.push("CD");
        break;
      case 5: 
        romNum.push("DC");
        break;
      case 6: 
        romNum.push("DCC");
        break;
      case 8: 
        romNum.push("DCCC");
        break;
      case 9: 
        romNum.push("CM");
        break;
    }
  };

  if (len == 3){
    romNum.join(triple(newArray[0]), double(newArray[1]), single(newArray[2]));
  }
  else if(len == 2){
    romNum.join(double(newArray[0]), single(newArray[1]));
  }
  else if(len == 1){
    romNum.join(single(newArray[1]));
  }

  return romNum;
}

convert(36);
not passing any tests
Blauelf
@Blauelf
Feb 01 2016 00:53
Not exactly a FrontEnd problem. Maybe 80cm in front of screen problem :P
If you are going that way, you might need to use case "1": and so on.
kiel barry
@kielbarry
Feb 01 2016 00:54
?
i have to stringify in a switch?
Blauelf
@Blauelf
Feb 01 2016 00:55
Looks like the elements you test are actually strings. Or use switch (+x) {, which converts x to a number.
kiel barry
@kielbarry
Feb 01 2016 00:57
alright, i added in the +x and it still doesnt work
Blauelf
@Blauelf
Feb 01 2016 00:59
Also, you'll need to first call triple, double, single, then do a romNum = romNum.join("")
Or you change triple, double, single to returning instead of pushing, and simply replace join in your second part with push, and return romNum.join("");
kiel barry
@kielbarry
Feb 01 2016 01:25
@Blauelf thanks
CamperBot
@camperbot
Feb 01 2016 01:25
declanpaz sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star: 1078 | @blauelf | http://www.freecodecamp.com/blauelf
kiel barry
@kielbarry
Feb 01 2016 01:32
if (len == 3){
   romNum = romNum.join(triple(newArray[0]), double(newArray[1]), single(newArray[2]));
  }
  else if(len == 2){
    romNum = romNum.join(double(newArray[0]), single(newArray[1]));
  }
  else if(len == 1){
    romNum = romNum.join(single(newArray[1]));
  }


 return romNum.join('');
}
romNum.join is not a function
is the error
Dan Stockham
@DanStockham
Feb 01 2016 01:36
I'm not sure why my users are coming back null when I passed my i to getChannel()
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:38
@declanPaz I'm not sure what the point of the .join() inside the if statements are... first, you are not using join() as you should there, I think maybe you meant .concat(), but second, that's not necessary as single, double, and triple, are functions that manipulate the array romNum, those functions don't return anything.
@DanStockham asynchronicity issues. You need to put that code in your for loop inside a function that takes an argument of i, then call that function in your for loop.
Bruce Young
@mutantspore
Feb 01 2016 01:39
@DanStockham i made the initial for loop you have a .forEach .. @MattYamamoto will tell you something about making it a function to esentially do teh same thing
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:39
hahaha....
Bruce Young
@mutantspore
Feb 01 2016 01:39
hahahah lol
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:40
Actually, I think I much prefer the .forEach method... I always try to avoid for loops when I can.
Dan Stockham
@DanStockham
Feb 01 2016 01:41
@MattYamamoto I don't understand, I need to move my getChannel() function in the for loop?
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:42
@DanStockham no, let me explain what is happening so you'll understand what I'm suggesting you do.
Dan Stockham
@DanStockham
Feb 01 2016 01:42
@MattYamamoto I'm all ears...
a fork of yours
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:46
If you'd like to see what is going on, put a console.log(i) inside the getJSON's success function. You'll see the console print out the same i, which is actually the last value that i had after the loop was over. That's because getJSON is asynchronous. So the for loop starts runnning and i is 0, then it sends off this getJSON request during that loop. Well the code doesn't wait for the response from that getJSON (it's asynchronous), so it keeps executing... so now the loop increments i to 1 and runs again. Well the loop runs through all the values really fast, so it eventually finishes. Then, at some later time the getJSON requests start to come back. The first one finishes and it looks at it's success function (where you expect i to be 0), and it says, "oh, I need to use this i value, let me go get that"... well now i isn't 0, that was a long time ago (in computer time), i is in fact whatever the last value was for the loop. And since all other returning getJSONs are coming after, they encounter the same i value
@DanStockham
Dan Stockham
@DanStockham
Feb 01 2016 01:47
@MattYamamoto So I need to have the loop wait till the getJSON() request in complete before iterating again?
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:49

But if you use a function that takes an argument

for(...i stuff..){
  myFunction(i)
}

myFunction(iterator) {
  $getJSON(....)  // do stuff that references passed in iterator
}

then that function gets i as a locally scoped var... so in essence it will save the value of the correct i value that you pass in.

Bruce Young
@mutantspore
Feb 01 2016 01:50
or… use a .forEach as I have in the fork of yours above @DanStockham .. same sort of thing
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:51
@DanStockham So to clarify on what you just said... what you need is the getJSON to know which i it needs to reference. If you had your code wait then you'd run into blocking issues. I mean, what if the server takes 5 minutes to respond...would you want your code to hang for 5 minutes? That's why we want the asynchronous behavior, so that these requests don't stop our code from executing. But, that just means we need to be mindful of the state of variables. I agree with @mutantspore that the forEach is more elegant here; however, it's good to understand why this is happing and how to work around it as you might run into this type of thing later in a different context.
Trey Russell
@PenguinOfTheSky
Feb 01 2016 01:52
tic-tac-toe cruel and unusual punishment...
function predict(current, counter, player) {

  var path = [];
        function next(a, b, c) {
          var minipath = [];
          var player = c;
          var counter = b;
          var current = a;
          for (var x = 0; x < a.length; x++) {
            for (var i = 0; i < a[x].length; i++) {
              if (a[x][i] === 0) {
                var rabbit = test(current);
                if (player !== computer && rabbit !== undefined) {
                  rabbit = !rabbit;
                }
          if (counter == 9 && rabbit === undefined) {

            return minipath;
          } else if (rabbit === true) {
            if (computer == "X") {
              minipath.push([x, i]);
            } else {
              path = [];
            }
            return minipath;
          } else if (rabbit === false) {
            if (computer == "O") {
              minipath.push([x, i]);
            } else {
              minipath = [];
              break;
            }
          //  return minipath;
          } else {
            counter += 1;
            if (player == "O") {
            a[x][i] = -1;
              player = "X";
            } else if (player == "X") {
              a[x][i] = 1;
              player = "O";
            }
            minipath.push([x, i]);
            path.push(minipath);
            return next(a, counter, player)
          }      
          }
                }
              }
        }

console.log(next(current, counter, player));
}
ne idea where I'm going wrong?
Dan Stockham
@DanStockham
Feb 01 2016 01:53
@MattYamamoto That's what I was about say, trying to create a separate function will probably help me understand what is going on.
@MattYamamoto @mutantspore Here is the code I revised: http://codepen.io/DanStockham/pen/pgEYGw?editors=0010
Matt Yamamoto
@MattYamamoto
Feb 01 2016 01:56
@DanStockham The complicating/confusing aspect here is that you are nesting getJSON calls (which is needed). Anyway, looks good and seems to be working. :smile:
Bruce Young
@mutantspore
Feb 01 2016 01:56
@DanStockham I think you are ammassing a huge HTML variable and putting it up all every loop
you should set it to “” each loop and use .append
Dan Stockham
@DanStockham
Feb 01 2016 01:58
@mutantspore @MattYamamoto Thanks guys.
CamperBot
@camperbot
Feb 01 2016 01:58
danstockham sends brownie points to @mutantspore and @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 899 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 1065 | @mutantspore | http://www.freecodecamp.com/mutantspore
Austin Blundell
@Blund002
Feb 01 2016 01:59
I'm on the "Target HTML Elements with Selectors Using jQuery" lesson right now and I was wondering how to use the Animate.css library on my computer to experiment with. How do I link to it?
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:01
@PenguinOfTheSky do you have that in codepen? it'll be easier to take a look at it that way.
Bruce Young
@mutantspore
Feb 01 2016 02:02
@DanStockham ok then but as I just said th eway you are using the var html and .html you are actuall printing the list to the screen fully (as far as the loop is) for each user … not just adding one on the end to what is already on the screen
Dan Stockham
@DanStockham
Feb 01 2016 02:08
night guys
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:08
@PenguinOfTheSky Found you on codepen... I'll take a look for you, I think it's fun to troubleshoot the minimax algo. But it might take me some time. Just as a suggestion, you should really get in the habit of commenting your code and using var names that are descriptive... that's especially helpful for others when reading your code.
@DanStockham good night... your work is looking good so far, keep it up!
Alex Evans
@alex-evans
Feb 01 2016 02:21
I'm struggling with a few things with the Simon Game. Looking for pointers on any of the following:
  1. Getting my inner white circle to sit in the middle of the game.
  2. Getting the audio to work correctly, right now the loop works but it plays the sound over and over again, I want it to be one long beep.
  3. General Javascript question, would it be wiser to create the color buttons as objects?
    Any advice would be highly appreciated. Thanks.
    http://codepen.io/alcatrats/pen/VerPVY?editors=0010
Scott
@Gangezilla
Feb 01 2016 02:23
Hello! Weird question, I'm trying to just set up a CodePen pen, and am getting this error "Bootstrap's JavaScript requires jQuery". jQuery is definitely enabled in my document, and Bootstrap is in CSS and JS. Has anyone seen this before? Any pointers?
Andre Alonzo
@paycoguy
Feb 01 2016 02:23
@Gangezilla can you link your pen?
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:23
@Gangezilla make sure that jQuery is loading before the bootstrap js
I know it's just something dumb, but I don't really know what it is haha
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:24
yeah, just change the load order
grab the three bars on the left and drag in the js window
Scott
@Gangezilla
Feb 01 2016 02:26
Ahh, okay, that seems to have stopped it from popping up. Easy. Thanks, @MattYamamoto!
CamperBot
@camperbot
Feb 01 2016 02:26
gangezilla sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 900 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:27
@alcatrats regarding #1, bootstrap may not be helpful for you here (at least, their grid system). You probably want (need?) to use absolute positioning to get your white circle to be in the middle, but I think you'll some issues with using the grid system.
Trey Russell
@PenguinOfTheSky
Feb 01 2016 02:33
@mattYamamoto very much thanks. I think I'm done for the day but if I haven't solved it by tommorrow night perhaps I'll comment the code and post the codepen here again
CamperBot
@camperbot
Feb 01 2016 02:33
penguinofthesky sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 901 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Joseph Morse
@jnmorse
Feb 01 2016 02:33
rewriting my profile in react https://www.josephmorse.me/, code is at https://github.com/jnmorse/josephmorse.me Any thoughts? think gonna have to redo some of my api projects again to since some of them have become broken on codepen..least in my desktop browsers.
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:34
@PenguinOfTheSky okay, well I'm taking a look at it, I'll PM you if I come up with anything.
Trey Russell
@PenguinOfTheSky
Feb 01 2016 02:34
oh kk, aweseome
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 02:41
http://codepen.io/keccakec/pen/yeEQXr
I'm pretty much done with my weather app, but there's a weird bug I can't figure out the cause of.
After 2 conversions, C drops less than a degree.
And then it doesn't do it from there on.
Bruce Young
@mutantspore
Feb 01 2016 02:42
@keccakec I end up with NaN for the temp after a few clicks
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 02:43
@mutantspore Huh. That's weird. I can't reproduce that. I guess I'll see if I can find a way to see exactly what the html value is after a few clicks
Bruce Young
@mutantspore
Feb 01 2016 02:43
@keccakec perhaps you should just do the conversion once ..store the answers
sean9
@sean9
Feb 01 2016 02:45
so i have this weird problem where my codepen looks different on my laptop and desktop
some images load but others dont
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 02:45
@mutantspore That.. is definitely a lot simpler than what I did. Thanks.
CamperBot
@camperbot
Feb 01 2016 02:45
keccakec sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1066 | @mutantspore | http://www.freecodecamp.com/mutantspore
sean9
@sean9
Feb 01 2016 02:45
anyone have any idea whats happening?
Bruce Young
@mutantspore
Feb 01 2016 02:46
@sean9 you’ll have to show us the pen
Matt Yamamoto
@MattYamamoto
Feb 01 2016 02:47
@keccakec the issue that caused the NaN was that you were missing indextemp = $("#temperature").text().indexOf("°"); in your toF() function. I think that would have solved your other issue too...
sean9
@sean9
Feb 01 2016 02:48
@mutantspore i have both of them open and my desktop only loads one image i have set
they are just images from imgur
Bruce Young
@mutantspore
Feb 01 2016 02:48
ooo then that’s it
don’t use imgur as they have been enforcing their terms of service.. you shouldn’t use them as a image server
tons of campers have had that issue
sean9
@sean9
Feb 01 2016 02:49
i see
Bruce Young
@mutantspore
Feb 01 2016 02:49
buss loads?
sean9
@sean9
Feb 01 2016 02:50
thanks, i was just testing my formating but i guess ill use something else
is there a way to use local images?
Bruce Young
@mutantspore
Feb 01 2016 02:50
so you need to store them somewhere else. if you have dropbox that will work if it’s made publically available
sean9
@sean9
Feb 01 2016 02:50
ah ok ill just use db then, thanks @mutantspore
CamperBot
@camperbot
Feb 01 2016 02:50
sean9 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1067 | @mutantspore | http://www.freecodecamp.com/mutantspore
BDMayhem
@BDMayhem
Feb 01 2016 02:51
The example portfolio page uses Tumblr. I don't know their TOS, but I've used them to host a couple small things.
Bruce Young
@mutantspore
Feb 01 2016 02:52
i’m told http://postimage.org/ works
I heard that som eeven use Flikr
sean9
@sean9
Feb 01 2016 02:52
Also i asked a question like 2 hours ago so im not sure if anyone answered but how do i adjust margins so my page isnt partial hidden by my persistent bar?
Bruce Young
@mutantspore
Feb 01 2016 02:53
the bootstrap page on nav says something about border-top: 50px;
for body
i’ll check
sean9
@sean9
Feb 01 2016 02:54
so how im doing it is wrong then
Bruce Young
@mutantspore
Feb 01 2016 02:54
body { padding-top: 70px; }
just use 50
from their page
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
yes it works I can now see your lovely message lol
sean9
@sean9
Feb 01 2016 02:56
thanks thanks
I was using margin-top
Bruce Young
@mutantspore
Feb 01 2016 02:57
yes I can never remember.. i either look it up agaon or look at my previous work lol
sean9
@sean9
Feb 01 2016 02:57
i hate how they just throw you into making a website
Bruce Young
@mutantspore
Feb 01 2016 03:00
yes it’s been discussed on the curriculum channel. @SaintPeter was chatting about the oder of things. It wasn’t always this order. there wasn’t even a portfolio to do. It’s a known issue and hopefully some extra steps or order change might occur
BDMayhem
@BDMayhem
Feb 01 2016 03:00
What can I do to stop my page from being able to scroll a tiny bit to the right?
Also, is there anything I can do to stop the navbar from stacking on small screens like that?
Bruce Young
@mutantspore
Feb 01 2016 03:02
@BDMayhem for the stacking.. you have to have jquery load before bootstrap in the JS cog and also you don’t seem to actually have added the html for the mobile collapse menu
Herman Fassett
@HermanFassett
Feb 01 2016 03:03

@BDMayhem when you add two classes it's like

<section class = "about container-fluid" id="about">

not

<section class = "about" "container-fluid" id="about">
That should remove the side scrolling
If you fix all the times you add classes like that
BDMayhem
@BDMayhem
Feb 01 2016 03:06
@HermanFassett Thank you!
CamperBot
@camperbot
Feb 01 2016 03:06
bdmayhem sends brownie points to @hermanfassett :sparkles: :thumbsup: :sparkles:
:star: 1512 | @hermanfassett | http://www.freecodecamp.com/hermanfassett
BDMayhem
@BDMayhem
Feb 01 2016 03:07
@mutantspore Thanks. I'll look into that.
CamperBot
@camperbot
Feb 01 2016 03:07
bdmayhem sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1068 | @mutantspore | http://www.freecodecamp.com/mutantspore
BDMayhem
@BDMayhem
Feb 01 2016 03:10
Is there a good reference for what collapse does and what each part actually means? https://getbootstrap.com/components/#navbar doesn't explain much.
Herman Fassett
@HermanFassett
Feb 01 2016 03:11
@BDMayhem well collapse itself is explained better here https://getbootstrap.com/javascript/#collapse
Alex Evans
@alex-evans
Feb 01 2016 03:13
Getting closer but still frustrating far from getting the Simon Game looking correct. Multiple people have said using the bootstrap grid will be tough with the Simon Game and that makes sense but really it seems like all I need to do is place the inner circle on top of the grid. Anyone know how to do this if that makes sense? http://codepen.io/alcatrats/pen/VerPVY?editors=1100
Andre Alonzo
@paycoguy
Feb 01 2016 03:22
@alcatrats I didn't use boostrap as well for my simon game
@alcatrats I also didn't make my game look responsive, so all my sizes are in pixels, not percentages
Alex Evans
@alex-evans
Feb 01 2016 03:24
It just seems strange that everything leading up to that point has been done with bootstrap and then the final one people are saying don't use it for the Front End.
Andre Alonzo
@paycoguy
Feb 01 2016 03:25
@alcatrats yah bootstrap doesn't do well on the game type projects
Jareth MacArthur
@Jtmaca9
Feb 01 2016 03:31
Hey guys! just started work on the pomodoro clock and am having trouble trying to figure out how to get the circle taht slowly fills up as time goes on, anybody here know what i am talking about that can push me in the right direction? :)
Bruce Young
@mutantspore
Feb 01 2016 03:33
make a circle from a div by playing with the border, overlay another div and set it’s height to zero. increase the height with the secs. you’ll need to stop the extra bits of the top div showing.
Jareth MacArthur
@Jtmaca9
Feb 01 2016 03:35
Ah i see, very clever, thank you very much! how do you overlay the divs? i have never actually done that before.
Bruce Young
@mutantspore
Feb 01 2016 03:35
@Jtmaca9 you’ll need overflow: hidden; to keep it contained
and look at position: absolute
i have a demo codepen of it if you want to look. though have a go first
Jareth MacArthur
@Jtmaca9
Feb 01 2016 03:37
Awesome! Thanks again! very helpful :)
Bruce Young
@mutantspore
Feb 01 2016 03:37
@Jtmaca9 i used HTML5 Canvas but I thought I’d also see how to do the demo timer method for interest
Maddah Anass
@unlimiworks
Feb 01 2016 03:41
Hello guys
http://codepen.io/UnlimiWorks/pen/GoyBLJ
This is my portfolio assignment, I'm having a problem in small dimensions actually toggling the navbar button to expand/collapse the navigation menu. What i'm I doing wrong ?
Bruce Young
@mutantspore
Feb 01 2016 03:44
@UnlimiWorks you have to also add jquery to the JS cog. bootstrap requires it. make sure it’s before the bootstrap.js
Maddah Anass
@unlimiworks
Feb 01 2016 03:45
I see, thanks @mutantspore
CamperBot
@camperbot
Feb 01 2016 03:45
unlimiworks sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1069 | @mutantspore | http://www.freecodecamp.com/mutantspore
Maddah Anass
@unlimiworks
Feb 01 2016 03:45
Second question : Is using viewport units for font-size really a good idea considering it also changes on desktop depending on the browser's actual dimensions ?
Bruce Young
@mutantspore
Feb 01 2016 03:47
you could use media queries as well . also do things like set a max-width on your page etc.
Maddah Anass
@unlimiworks
Feb 01 2016 03:47
(In other words, should I stick to bootstrap's way of changing the font-size with media-queries with the condition being related to actual screen size ?)
I see. That answers a lot of my questions. What are things i should set on my page besides what's already there ? For what purpose ? (You're mentioning max-width for example). Sorry i'm kinda new to front-end matters :)
If there is an article or such to spare you from writing a long paragraph, i'll gladly take it
Bruce Young
@mutantspore
Feb 01 2016 03:53
i’ve just mixed stuff to get what I want. There is a topic called responsive typography
a quick search brings up this
http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
and a quick scroll though it .. it seems to be the sort of thing you are after
Maddah Anass
@unlimiworks
Feb 01 2016 03:54
I see. Thanks a lot, I will be sure to read that
BDMayhem
@BDMayhem
Feb 01 2016 03:55
Is there a way to keep a navbar from collapsing so soon? There's plenty of room for all my pills and the brand button, but it insists on collapsing.
Maddah Anass
@unlimiworks
Feb 01 2016 03:56
Another quick question. Are there any plugins end-user wise that need to be there for the toggle to work ? The toggle doesn't work on my mobile and adaptatve view when in full mode, but works as expected using pen mode
@BDMayhem you'll need to change the mobile navbar breakpoint using @grid-float-breakpoint
The default size is 768px
Maddah Anass
@unlimiworks
Feb 01 2016 03:58
It's stated in bootstrap : http://getbootstrap.com/components/#navbar
BDMayhem
@BDMayhem
Feb 01 2016 04:08
I've read a few answers to this, and I understand that I have to change the grid-float-breakpoint, but I can't for the life of my figure out how to do it.
It's probably not worth stressing over at this point. Right now, I'm pretty happy that my portfolio meets the minimum User Stories. :)
Maddah Anass
@unlimiworks
Feb 01 2016 04:50
Yes. Really too much hassle. You either need to use a recompiled bootstrap in which you have already changed the grid-float-breakpoint variable value in variables.less file, or write ~100 lines to redefine rules for a bunch of bootstrap classes.
Clearly not worth the effort :)
Brett
@BLayman
Feb 01 2016 05:55

Anyone know why this isn't working for the "Seek and Destroy" challenge? I wasn't sure how to incorporate array.filter(), which was in the "helpful links" section, but I thought this would work:

function destroyer(arr) {



  for (i = 1; i < arguments.length; i++){
    for (j = 0; j < arguments[0].length; j++){
     if(arguments[i] === arguments[0][j]){

       arr.splice(j,1);
     }

    }  

  }

  return arr;
}

destroyer([3, 5, 1, 2, 2], 2, 3, 5);

It returns [1,2]

sean9
@sean9
Feb 01 2016 06:40
So when i click my links it takes me to my different bio but its partially hidden under my top bar, how to fixxxxxxxxx
kirbyedy
@kirbyedy
Feb 01 2016 07:14
@sean9 well the whole page is a bit messy, I don`t really understand your question
Taras Yaremkiv
@Y-Taras
Feb 01 2016 07:43
Hello everyone. Please give me some hint about "Quote machine". I 've got an array of strings, so every time when I click button "new quote" there should be displaying another quote. I can't figure it out how to realize that thing.
http://codepen.io/Y-Taras/pen/XXYogR
Robert Uivarosi
@URobert
Feb 01 2016 07:53
@Y-Taras You can use Math.random() : http://www.w3schools.com/jsref/jsref_random.asp when the button is clicked. You use the method to give you a random number withing the length of your array. Then you use that number to pick an element from that position from the array and display it on the screen... thus getting a random quote on the screen for each button press
Taras Yaremkiv
@Y-Taras
Feb 01 2016 07:59
@URobert I've already thought about it. The thing is - I want to learn, how to do it by changing quote one by one using itteration.
Robert Uivarosi
@URobert
Feb 01 2016 08:04
@Y-Taras what do you mean exactly?
@Y-Taras you simply want to go through each element in the order they are placed in your array ?
Taras Yaremkiv
@Y-Taras
Feb 01 2016 08:05
@URobert yes
Robert Uivarosi
@URobert
Feb 01 2016 08:05
@Y-Taras well, where will the randomness be then ?
@Y-Taras once you loop through your whole array the and start from the beginning, the elements will be in the same order unless you change them up
@Y-Taras anyway
@Y-Taras for what your asking you can use a counter. ex: var counter = 0; on click you will run a function that increases the counter: counter++; and picks the element from the array and changes the html accordingly
@Y-Taras does that help ?
Taras Yaremkiv
@Y-Taras
Feb 01 2016 08:09
@URobert all that, is clear to me. I ' m just can't figure it out how to realize that in JS
Robert Uivarosi
@URobert
Feb 01 2016 08:10
which part/
Robert Uivarosi
@URobert
Feb 01 2016 08:15
HTML
<button id="myButton"> Click me </button>
<p id="IDofElementWhereYouPlaceYourQuote">Your quote will be displayed here </p>

JS
$(#myButton).click(DoStuff);

function DoStuff(){
counter++;
theQuote= array[counter];

 $("#IDofElementWhereYouPlaceYourQuote").html(theQuote); //displaying the new quote in the designated section on your page
@Y-Taras Now in a broad line that should be it... but you have to make sure your counter, theQuote and your array is set up correctly... and you use the ids for the right elements in your html (above is just an example). Also make sure jquery is loaded to your JS in codepen... and ofc you have your $(document).ready(function(){});
@Y-Taras Helpful enough?
Taras Yaremkiv
@Y-Taras
Feb 01 2016 08:21
thanks @URobert )
CamperBot
@camperbot
Feb 01 2016 08:21
y-taras sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 540 | @urobert | http://www.freecodecamp.com/urobert
Robert Uivarosi
@URobert
Feb 01 2016 08:25
@Y-Taras yw
@Y-Taras happy coding
sean9
@sean9
Feb 01 2016 08:25
@kirbyedy yes its messy, what do you want me to do about it? when you click any of the buttons on the top instead of jumping to "about me", "about me" is partially hidden under the persistent bar
Maddah Anass
@unlimiworks
Feb 01 2016 08:28
@sean9 You could add a margin-top if you use a fixed navbar
margin/padding - one of these should work
kirbyedy
@kirbyedy
Feb 01 2016 08:29
maybe to make containers for each section, put any color inside, just to distinguish them
that way you will see where is your container actually
also you don`t have much text, so its even harder to do a proper form
sean9
@sean9
Feb 01 2016 08:30
@UnlimiWorks i have padding set for the nav bar, where else do i need padding?
kirbyedy
@kirbyedy
Feb 01 2016 08:30
use Lorem ipsum text for start, just to put inside your containers random text, you will change it later on
I would add padding for each container, so that your section title is a bit lower from the container edge, and at the same time the navbar wont cover it
Maddah Anass
@unlimiworks
Feb 01 2016 08:32
@sean9 I meant the margin-top of your h1, setting it to anything superior to 50px will make it visible
Or you could do the same for the padding-top of the block containing it. Your call, just stay consistent when doing it for the other sections
Also, you have a <div100>, I doubt there is a html element with that name :)
I also see.. <h7>s and <h8>s. These elements don't exists
sean9
@sean9
Feb 01 2016 08:38
yeah some dont exist, but having them there for now isnt bad right? also i do have div100 is css and js but probably isnt set up right
Maddah Anass
@unlimiworks
Feb 01 2016 08:38
You're certainly confusing elements with css selectors
There is only <div>, and <h1> to <h6>, if you want to target them specifically, you should give them classes and/or ids
sean9
@sean9
Feb 01 2016 08:41
ahha, so i shouldnt make or use div100 or the hNumbers?
i thought it would be ok since we did it in the tutorials
Maddah Anass
@unlimiworks
Feb 01 2016 08:42
<div class="div1" id="specialDiv">
    <p>Some paragraph</p>
</div>
This is a div with both an id and a class that you can target in css, you target classes using a dot before them, and ids using # before them such as this
.div1 {
    background-color: red;
}

#specialDiv {
    color: white;
}
note the special characters before the class name and id name
I strongly advise you to re-do the html challenges in the beginning of the course, you seem to be misunderstanding some key concepts. It'll be so much easier once you understand how things work
sean9
@sean9
Feb 01 2016 08:44
ahha, if there isnt a class already with x name i can just make my own,
Thanks @UnlimiWorks a bunch
CamperBot
@camperbot
Feb 01 2016 08:45
sean9 sends brownie points to @unlimiworks :sparkles: :thumbsup: :sparkles:
:star: 285 | @unlimiworks | http://www.freecodecamp.com/unlimiworks
Maddah Anass
@unlimiworks
Feb 01 2016 08:46
Exactly, you give class names to one or more html elements to style them with css later. The difference between class and id is you can give the same class name to many elements, while the id name must be unique
You're welcome @sean9, have another go at the html challenges before tackling the portfolio project, it's tough :)
sean9
@sean9
Feb 01 2016 08:47
im really dreading this challenge.
Maddah Anass
@unlimiworks
Feb 01 2016 08:48
It'll be a piece of cake once you build the foundation ground. Don't worry
Zion
@learnor
Feb 01 2016 09:04
Could someone please help me with my tic tac toe project. I have been working on this for several days. still cannot figure it out.
Aung Myo Kyaw
@AungMyoKyaw
Feb 01 2016 10:00
any body help me about random quote machine
i get stuck
fluffystub
@RakshithNM
Feb 01 2016 10:14
hey guys
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">rakshith Bellare</a>

      <ul class="nav navbar-nav">
        <li class="navbar-right"><a href="#"><span>ABOUT</span></a></li>
        <li class="navbar-right"><a href="#">SOCIAL</a></li>
        <li class="navbar-right"><a href="#">LEARNING</a></li>
        <li class="navbar-right"><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
  </div>
i want to right align on the nav bar...
i have used the navbar-right class it doesnt work!!
any suggestions
kirbyedy
@kirbyedy
Feb 01 2016 10:17
you have to use .pull-right
fluffystub
@RakshithNM
Feb 01 2016 10:17
@kirbyedy how do i learn all those??
any specific link or something?
kirbyedy
@kirbyedy
Feb 01 2016 10:18
bootstrap ?
fluffystub
@RakshithNM
Feb 01 2016 10:21
@kirbyedy yess
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">rakshith Bellare</a>

      <ul class="nav navbar-nav ">
        <li class=".pull-right"><a href="#"><span>ABOUT</span></a></li>
        <li class=".pull-right"><a href="#">SOCIAL</a></li>
        <li class=".pull-right"><a href="#">LEARNING</a></li>
        <li class=".pull-right"><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
  </div>
even this doesnty work
kirbyedy
@kirbyedy
Feb 01 2016 10:22
remove the dot, my mistake
http://www.tutorialspoint.com/bootstrap/ there are many online sources like this
fluffystub
@RakshithNM
Feb 01 2016 10:24
thank you @kirbyedy
CamperBot
@camperbot
Feb 01 2016 10:24
rakshithnm sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 383 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Feb 01 2016 10:24
http://www.tutorialspoint.com/bootstrap/bootstrap_helper_classes.htm for example here is the problem you were facing
pull-right
skigo
@skigo
Feb 01 2016 11:11
Hello guys
I am using Uikit frame work and i want to create a javascript that when i add portofolio.html#modal-1 that opens the modal with <code> Href="#modal-1" </code>
Tomáš Kalný
@Sleepy-guy
Feb 01 2016 12:01
http://codepen.io/Sleepy-guy/pen/adqjjq?editors=1010 I have a problem parseInt returns NaN anything else I could replace it with ?? oh and also line 27 js isnt working when don't you know why ?
sigursiguros
@sigursiguros
Feb 01 2016 12:19
Can someone tell me why my twitter "hello world" api is not working? http://codepen.io/Sigursiguros/pen/mVxxXQ?editors=1000
Blauelf
@Blauelf
Feb 01 2016 12:57
@sigursiguros I get a twitter window with the link to your codepen (why not tweet the quote instead?)
kirbyedy
@kirbyedy
Feb 01 2016 13:02
Screen Shot 2016-02-01 at 15.01.47.png
you have a small problem with those buttons
sigursiguros
@sigursiguros
Feb 01 2016 13:03
@Blauelf I added the tweet using an HTML anchor, no javascript code as of yet
and I'm trying to figure out how to add the javascript code so as to append the quote and author
Blauelf
@Blauelf
Feb 01 2016 13:03
@kirbyedy Wow, did not look that much off for me.
@sigursiguros You can change that element's href attribute in JS, every time you generate a quote.
sigursiguros
@sigursiguros
Feb 01 2016 13:05
would it look like something like this:
$("twitterButton").on("click", function() {
var myUrl = 'https://twitter.com/intent/tweet?text=' + newQuote + ' ' + newAuthor;
window.open(myUrl, 'twitter');
return false;
});
kirbyedy
@kirbyedy
Feb 01 2016 13:05
it is actually good when I see it on full screen, but once you try to reduce the windows size, the whole responsiveness falls apart
Blauelf
@Blauelf
Feb 01 2016 13:07
Not .on and window.open, more $("#twitterButton").attr("href",myUrl); (with your link's id being twitterButton)
That way not a script opens the new page, but the click by the user.
looks like it works now
however my codepenlink authomatically shows up in my twitter box
how do I get rid of it?
Joseph Morse
@jnmorse
Feb 01 2016 13:18
@sigursiguros http://codepen.io/jnmorse/pen/eJjYrO just was messing with it, basically the code has to go in twttr.ready(function () { //code here });
Blauelf
@Blauelf
Feb 01 2016 13:20
So that's probably how the widget works.
sigursiguros
@sigursiguros
Feb 01 2016 13:21
@jnmorse the link is still showing in the tweet in your fork
@Blauelf looks like I can override it using data-url=none
thanks @Blauelf @jnmorse guys
CamperBot
@camperbot
Feb 01 2016 13:23
:star: 1081 | @blauelf | http://www.freecodecamp.com/blauelf
sigursiguros sends brownie points to @blauelf and @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 354 | @jnmorse | http://www.freecodecamp.com/jnmorse
sigursiguros
@sigursiguros
Feb 01 2016 13:24
@Blauelf how that I have the code in my codepen, what's the easiest way for me to migrate my code to a real domain?
@Blauelf I'm about to move on to the JS calculator zipline, will you have any tips for me?
Andrew1024
@Andrew1024
Feb 01 2016 13:33
Hi, in the first challange "Portfolio", the guy created background-images, which will change if I will scroll? How can I do this too?(Sorry for my unclear english)
Joseph Morse
@jnmorse
Feb 01 2016 13:37
@sigursiguros little confusing cause it says the first argument is the url, or can pass a empty string, but also looks like if you pass 'false' it doesn't add the url shrugs doesn't actually say that though
Joseph Morse
@jnmorse
Feb 01 2016 13:44
@Andrew1024 If i'm understanding you, the background image doesn't actually change, its just sorta the appearance you get if you set background-attachment: fixed makes the background not scroll with the page, and there is a different background image or color on each other section
sigursiguros
@sigursiguros
Feb 01 2016 13:46
@jnmorse I really have to idea how to start with the javascript calculator
don't think I've grasp the concepts to make one
do you have any suggestions?
Joseph Morse
@jnmorse
Feb 01 2016 13:52
@sigursiguros basically you need to think about how to store the calculation, I largely did it just generating a string and using Javascript eval to do the calculation, or you can store each operation as part of an array, just keep in mind that you want to make sure the user can't do things they aren't suppose to be able to do like having more then one decimal place, or can't ++ etc. Also if you add percent you might want to calculate the percent right off
far as binding the click events to your buttons rather then assigning a click handler to each individual button you can assign one to the parent, and use the even param that is passed to get the target of what was clicked inside it.
$('#parent').on('click', function(e) {
  var target = e.target;
  // do other  stuff
});
venkatesh prabhu
@venkateshprabhu2
Feb 01 2016 14:20
Hello all
I need help with 'Record collection' challenge in JS
kirbyedy
@kirbyedy
Feb 01 2016 14:21
what kind of help?
venkatesh prabhu
@venkateshprabhu2
Feb 01 2016 14:22
I am unable to figure out how to access nested property value
I am new to JSON

// Setup
var collection = {
2548: {
album: "Slippery When Wet",
artist: "Bon Jovi",
tracks: [
"Let It Rock",
"You Give Love a Bad Name"
]
},
2468: {
album: "1999",
artist: "Prince",
tracks: [
"1999",
"Little Red Corvette"
]
},
1245: {
artist: "Robert Palmer",
tracks: [ ]
},
5439: {
album: "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function update(id, prop, value) {

if((collection[id].prop[value])!=="")
return 0;

return collection;
}

// Alter values below to test your code
update(5439, "artist", "ABBA");

I tried collection[id][prop][value]
Blauelf
@Blauelf
Feb 01 2016 14:41
@venkateshprabhu2 You are meant to compare variables prop and value with certain constants (like empty string or "tracks"), and operate on collection[id][prop] (note that dot notation would take "id" or "prop" literally and not use the variables of those names)
Also, this is not exactly the right channel, you should have asked in HelpJavaScript instead. And one last thing:
wiki code format
CamperBot
@camperbot
Feb 01 2016 14:42

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

David Weedmark
@DavidWeedmark
Feb 01 2016 14:49
I think my calculator is about done http://codepen.io/weedmark/pen/obydBd
Y4T9Code
@Y4T9Code
Feb 01 2016 14:55
@DavidWeedmark if you type extra numbers, it goes out of the caluclator
Otherwise seems good :)
@DavidWeedmark add overflow:hidden;
Theodore Han
@hanq08
Feb 01 2016 15:10
Hi which famous quotes api you're using for
the random quote challenge
Blauelf
@Blauelf
Feb 01 2016 15:11
I think most are hardcoding tweetable (<140 characters including author name) quotes in an array.
David Weedmark
@DavidWeedmark
Feb 01 2016 15:26
@Dukbcaaj thanks!
CamperBot
@camperbot
Feb 01 2016 15:26
davidweedmark sends brownie points to @dukbcaaj :sparkles: :thumbsup: :sparkles:
:star: 382 | @dukbcaaj | http://www.freecodecamp.com/dukbcaaj
Dustin
@Key-Banger
Feb 01 2016 16:02
Will someone look at this? The problem I am having is actually doing the math.
var answer = "";
var input1 = [];
var input2 =[];
var math = [];
var inputString1 = "";
$("#ac").click(clear); 
function clear(){
input1 = [];
math = [];
inputString1 =""; 
}
  $('#ce').click(function(){
  $('#output').empty();
  input2.pop()
  });
$(".numbers").click(function() {
  $('#output').append($(this).attr('value'));
  input1.push(Number($(this).attr('value')));
  inputString1 = input1.join('');
  input2 = inputString1.split(/[-+=%/*]/);
});
$('.functions').click(function() {
  $('#output').empty();
  input1.push($(this).attr('value'));
  math.push($(this).attr('value')); 
});
$('#equal').click(function(){
 for (i=0; i <= input2.length; i++) {
   for (j = 0; j <= math.length; j++) {
     answer = i + j + i;
     console.log(answer);
     break;
   };
 };
});
Tomáš Kalný
@Sleepy-guy
Feb 01 2016 17:31
http://codepen.io/Sleepy-guy/pen/adqjjq?editors=1010 Can someone help with line 27 and also I dont know with what can I replace parseInt cuz it cannot return number
Trey Russell
@PenguinOfTheSky
Feb 01 2016 17:37
tic-tac-toe is impossible... been rewriting this same function for 3 days now....

```function predict(current, counter, player) {
function next(a, counter, player) {
var minipath = [];
var win;

      for (var x = 0; x < a.length; x++) {
        if ( win === false) { return -10}
        for (var i = 0; i < a[x].length; i++) {
                       var current = a;
          if (current[x][i] === 0) {
            if (player == "O") {
              current[x][i] = -1;
            } else {
              current[x][i] = 1;
            }

            var rabbit = test(current, player);          
            console.log(rabbit)
            if (rabbit === true) {
        if (player == computer) {

          minipath.push([x, i]);

          return minipath;
        } else {
          console.log('fail')
      win = false;
          break;
        } 
      } else if (rabbit === false) {
        if (player == computer) {
          minipath.push([x, i]);           
          return minipath;
        } else {
          win = false; 
          break;
        }          
      } else if (rabbit === undefined && counter == 9) {
        minipath.push([x, i])
      } else{
        var nextPlayer;  
        if (player == 'O') {
          nextPlayer = "X"
        } else {
          nextPlayer = "O";
        }
        var alpha = next(current, counter + 1, nextPlayer);

          if (alpha != -10) {                

            minipath.push([x, i]);
        return minipath.concat(alpha)              
      } else if (alpha == -10) {
        win = false; 
        break;
      } 

      }
      }
            }
          }
      if (minipath == []) {
        return -10;
      } else {

          console.log(current)
            return minipath;



      }
    } //end next

var t = next(current, counter, player);
return t;
}```

function predict(current, counter, player) {
        function next(a, counter, player) {
          var minipath = [];
          var win;

          for (var x = 0; x < a.length; x++) {
            if ( win === false) { return -10}
            for (var i = 0; i < a[x].length; i++) {
                           var current = a;
              if (current[x][i] === 0) {
                if (player == "O") {
                  current[x][i] = -1;
                } else {
                  current[x][i] = 1;
                }

                var rabbit = test(current, player);          
                console.log(rabbit)
                if (rabbit === true) {
            if (player == computer) {

              minipath.push([x, i]);

              return minipath;
            } else {
              console.log('fail')
          win = false;
              break;
            } 
          } else if (rabbit === false) {
            if (player == computer) {
              minipath.push([x, i]);           
              return minipath;
            } else {
              win = false; 
              break;
            }          
          } else if (rabbit === undefined && counter == 9) {
            minipath.push([x, i])
          } else{
            var nextPlayer;  
            if (player == 'O') {
              nextPlayer = "X"
            } else {
              nextPlayer = "O";
            }
            var alpha = next(current, counter + 1, nextPlayer);

              if (alpha != -10) {                

                minipath.push([x, i]);
            return minipath.concat(alpha)              
          } else if (alpha == -10) {
            win = false; 
            break;
          } 

          }
          }
                }
              }
          if (minipath == []) {
            return -10;
          } else {

              console.log(current)
                return minipath;



          }
        } //end next

var t = next(current, counter, player);
return t;
}
brenthildebrand
@brenthildebrand
Feb 01 2016 17:58
Hello, I am working on my local weather map, and having a very hard time figuring out how to call the weather API. I don't even know where to begin, whether to call it inside a function or just at the top of my javascript document, and what to do with an API key... Can anyone suggest a good resource for someone who kind of understands the concept of an API, but can not quite grasp how to make use of them?
Clark Arnold
@clarkarnold
Feb 01 2016 18:14
Hi all, I am struggling to figure out how to make a Pomodoro timer for the front end development projects. I got through the others ok but I have no idea where to even start with this one.
kirbyedy
@kirbyedy
Feb 01 2016 18:18
did you try to search for an example ?
Clark Arnold
@clarkarnold
Feb 01 2016 18:23
Yes, I searched on google and found an example, but just looking at their code didn't seem to give me any great ideas.
It seemed like this is a big leap to using objects and I have always struggled a bit with that. Any resources that might give me a starting point?
brenthildebrand
@brenthildebrand
Feb 01 2016 18:34
@clarkarnold it's probably easier than you think. Read up on setInterval() and clearInterval()
Clark Arnold
@clarkarnold
Feb 01 2016 18:36
@brenthildy Will do thank yuo!
CamperBot
@camperbot
Feb 01 2016 18:36
clarkarnold sends brownie points to @brenthildy :sparkles: :thumbsup: :sparkles:
:star: 282 | @brenthildy | http://www.freecodecamp.com/brenthildy
GangstaCoder
@GangstaCoder
Feb 01 2016 18:57
Can someone using Codepen please advise on this error message in the Js window: "Unexpected token <"
Jonathan
@jxvo92
Feb 01 2016 19:02
feel free to share your thoughts my portfolio so far: http://codepen.io/jxvo/pen/RryVVG
it took me a while to get started initially, but i'm pleased with the end result.
kirbyedy
@kirbyedy
Feb 01 2016 19:05
@jxvo92 looks ok :thumbsup: , the only problem is that strong blue color you used, its a bit hard to look at it, some less agressive colour would be more appropriate
Jonathan
@jxvo92
Feb 01 2016 19:43
thanks. i chose this blue because it has an interesting blue/purple blend effect from on some monitors.
any thoughts in regards to functionality?
sean9
@sean9
Feb 01 2016 19:47
question, why does my header text not center?
kirbyedy
@kirbyedy
Feb 01 2016 19:52
you have to style it in CSS, add the align center atribute
sean9
@sean9
Feb 01 2016 19:53
text-align: center;
kirbyedy
@kirbyedy
Feb 01 2016 19:54
yes, for that class, or id
sean9
@sean9
Feb 01 2016 19:54
Already have it
kirbyedy
@kirbyedy
Feb 01 2016 19:55
no you dont
sean9
@sean9
Feb 01 2016 19:55

.theseHeaders {
font-size: 80px;
text-align: center;

}

kirbyedy
@kirbyedy
Feb 01 2016 19:55
in that #aboutme you have only the picture
sean9
@sean9
Feb 01 2016 19:55
am I doing it wrong?
kirbyedy
@kirbyedy
Feb 01 2016 19:55
which is not showing btw
yes
you have to target the #aboutme
sean9
@sean9
Feb 01 2016 19:56
I have the class
<h class="theseHeaders"> About Me </h>
kirbyedy
@kirbyedy
Feb 01 2016 19:56
what is h ?
h does not exist... It can be H1, H2... to H6...
that is wrong
sean9
@sean9
Feb 01 2016 19:59
do the other ones such as p and a need a number as well?
kirbyedy
@kirbyedy
Feb 01 2016 20:14
no <p> is a paragraph
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:27
Does anyone else have issues with codepen.io opening links?
rphares
@rphares
Feb 01 2016 20:28
@keccakec , yes
codepen doesn't like links,
its best to have them open a new window/tab
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:28
I have an a link that opens in a new tab, but the link just gets added onto codepen.
How would I go about that?
KingxBanana
@KingxBanana
Feb 01 2016 20:28
@keccakec You should add target="_blank" in your <a>, that will open it in a new tab
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:28
I found new-target, but that isn't supported
Yeah, it just opens a weird version of the link
I'll get an example
And that's what's in the href with a target
But when I click it, codepen does that
rphares
@rphares
Feb 01 2016 20:30
mm, i can't open you pen...
@KingxBanana ,you got this? :blush:
KingxBanana
@KingxBanana
Feb 01 2016 20:31
Guess ill try, send the link to your codepen @keccakec
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:31
http://codepen.io/keccakec/full/zrLryP/ This is the pen in progress. It's ironic that links is the thing that would get me stuck
Should probably do something about the loading that the page has to do, too, though.
KingxBanana
@KingxBanana
Feb 01 2016 20:32
@keccakec So what is the problem in your pen?
which links open weird?
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:32
Does it not open weird for you?
The author links. Opening it in the chat doesn't seem to load any of the page for whatever reason
KingxBanana
@KingxBanana
Feb 01 2016 20:33
Which links? When you press on names?
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:33
Yeah
KingxBanana
@KingxBanana
Feb 01 2016 20:33
WHen i press the author it just goes to their fcc page for me
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:33
Huh. Is it just because it's my pen for whatever reason?
KingxBanana
@KingxBanana
Feb 01 2016 20:34
Hm I dont know, thats weird
Kevin Elser
@CoffeeCodeKevin
Feb 01 2016 20:34
I just get that codepen 404 with the link I sent earlier. Oh well, as long as the end user doesn't get it, I guess that's fine. I'm glad it wasn't something on my end. Thanks @KingxBanana
CamperBot
@camperbot
Feb 01 2016 20:34
keccakec sends brownie points to @kingxbanana :sparkles: :thumbsup: :sparkles:
:star: 674 | @kingxbanana | http://www.freecodecamp.com/kingxbanana
Syed Isam Hashmi
@prosdkr
Feb 01 2016 20:54
Hi, I am currently doing the pomodoro clock, and I was wondering how to make the system delay one second between times, and how to use a loops without affecting it...
Mohamud Gedi
@Mogedi
Feb 01 2016 20:56
Got my Camper News Website done!!! :smile: Would love some feedback! Feel free to rip me apart. http://codepen.io/Mahadgd94/full/KVBMjj/
Bruce Young
@mutantspore
Feb 01 2016 21:15
@prosdkr look up setInterval() and clearInterval()
Joseph Morse
@jnmorse
Feb 01 2016 21:26
@Mogedi still can't figure out why I can't get mine or yours to load in chrome, works in Vivaldi though which uses chromium, its interesting but not sure having the titles only show on hover is a good idea really. no hover state on mobile / touch devices
Syed Isam Hashmi
@prosdkr
Feb 01 2016 21:39
@mutantspore AHHHH THANK YOU SO MUCH I LOVE YOU! <3
CamperBot
@camperbot
Feb 01 2016 21:39
prosdkr sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1070 | @mutantspore | http://www.freecodecamp.com/mutantspore
Michael Poutre
@M1kep
Feb 01 2016 21:55
heeeeey, so how do i begin on the self portfolio pagee???
JackeL
@jackel27
Feb 01 2016 21:55
Michael Poutre
@M1kep
Feb 01 2016 21:56
But I mean like I dont know anything about making it all look cool
Syed Isam Hashmi
@prosdkr
Feb 01 2016 21:58
@mutantspore I came across a slight problem, the interval doesnt run when alt tabbed :(
Mohamud Gedi
@Mogedi
Feb 01 2016 22:08
@jnmorse Thank you for pointing out that hover doesn't work on mobile devices
CamperBot
@camperbot
Feb 01 2016 22:08
mogedi sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 355 | @jnmorse | http://www.freecodecamp.com/jnmorse
Jonah Chason
@lemmydog
Feb 01 2016 22:26
Can someone recommend a free text editor for windows? I got stuck with notepad 2 ...
Clark Arnold
@clarkarnold
Feb 01 2016 22:28
Hey all, Ive been stuck on the pomodoro all weekend, anyone want to take a look or have any advice?
Bruce Young
@mutantspore
Feb 01 2016 22:28
@egyptobot https://atom.io/
Jonah Chason
@lemmydog
Feb 01 2016 22:29
Thanks ms! It's not going to blow my computer or anything?
Bruce Young
@mutantspore
Feb 01 2016 22:31
no lol.. I use it on a Mac and a PC. It’s quite popular here . You can also look up Brackets and Sublime Text
Syed Isam Hashmi
@prosdkr
Feb 01 2016 22:34
@clarkarnold I just got good advice, try looking into setInterval() and clearInterval() :)
Clark Arnold
@clarkarnold
Feb 01 2016 22:34
@prosdkr I got that advice earlier as well, I'm stumped!
Syed Isam Hashmi
@prosdkr
Feb 01 2016 22:34
@clarkarnold sure, tell me where your problem is, and I might be able to help :)
Trey Russell
@PenguinOfTheSky
Feb 01 2016 22:35
any advice would be much appreciated
Syed Isam Hashmi
@prosdkr
Feb 01 2016 22:35
http://codepen.io/prosdkr/pen/XXqOJP?editors=1010
Here's mine, as you can see, it plays a sound and all, just haven't gotten to the break stuff yet :(
But it's getting there
@clarkarnold
Bruce Young
@mutantspore
Feb 01 2016 22:35
@prosdkr yes if the app is in the background it’s not accurate. Some campers have also referenced the actual system clock to keep it accurate but most have just used setInterval
Syed Isam Hashmi
@prosdkr
Feb 01 2016 22:36
@mutantspore as long as it works for the certification, it's cool with me I guess...
Michael Poutre
@M1kep
Feb 01 2016 22:55
any suggstions on where to learn what i need to know to make a portfolio pages thats even half as good as the example?
Clark Arnold
@clarkarnold
Feb 01 2016 23:10
@M1kep w3 schools has some good bootstrap/CSS tutorials that help out
I used a scroll spy that I learned from w3
zyyucla
@zyyucla
Feb 01 2016 23:13
Hi everyone I am working on the simon game, and wondering where you could get the audio file for when user enter wrong button or when the game is over sound ?
I could only download the audio file to my own PC, but after that I don't know how to allow the code to access my home folder and play the sound
Brittany
@brittanyleigh
Feb 01 2016 23:15
Hi FCC friends. I'm working on the random quote machine, and I finally got my tweet button to open a new window and populate the current quote. But the tweet button now also opens a second window of my original quote machine page. How do I stop that from happening?
http://codepen.io/brittanyleigh/pen/EPEezr
Christian-Peter
@cpheimbach
Feb 01 2016 23:20
@brittanyleigh Hi I try to replicate your bug but only one window opens for me
Brittany
@brittanyleigh
Feb 01 2016 23:24
@cpheimbach Weird! I just tried it on another browser too and I'm still getting two windows. :/
Christian-Peter
@cpheimbach
Feb 01 2016 23:24
ah hold on
I tried it on codepen direct and I have no issue
I do it here in the little window and it happens
when I click the embed here in the chat I actually get a 404
so first things first.
Not sure it is cheating but one thing you could consider is disabling the tweet button and only enable it once the inspire button was clicked
because it seems the issue happens when there is nothing to tweet
Christian-Peter
@cpheimbach
Feb 01 2016 23:30
@brittanyleigh alright. I think this section here makes the problem
mmacedo
@mmacedoeu
Feb 01 2016 23:31
hey guys how can I get thumnails from codepen for the portfolio project ?
Christian-Peter
@cpheimbach
Feb 01 2016 23:31
  var twitter = newQuote + ' --' + newAuthor;
  $('.tweet').click(function(){
window.open('https://twitter.com/intent/tweet?text=' + twitter)
  });
Brittany
@brittanyleigh
Feb 01 2016 23:33
okay... so what exactly is wrong with it??
Christian-Peter
@cpheimbach
Feb 01 2016 23:33
@brittanyleigh I am also just starting to code so I hope someone else chimes in but looking at the code above
the window open function will get missing data to build the actual link
mmacedo
@mmacedoeu
Feb 01 2016 23:33
about @cpheimbach
CamperBot
@camperbot
Feb 01 2016 23:33
:star: 269 | @cpheimbach | http://www.freecodecamp.com/cpheimbach
Brittany
@brittanyleigh
Feb 01 2016 23:34
oh wait i think i got it! @cpheimbach i still had an <a> link in the html, i got rid of that and i think that fixed it
Christian-Peter
@cpheimbach
Feb 01 2016 23:35
@brittanyleigh congrats
no error anymore on my end
Brittany
@brittanyleigh
Feb 01 2016 23:38
@cpheimbach Thanks!
CamperBot
@camperbot
Feb 01 2016 23:38
brittanyleigh sends brownie points to @cpheimbach :sparkles: :thumbsup: :sparkles:
:star: 270 | @cpheimbach | http://www.freecodecamp.com/cpheimbach
Christian-Peter
@cpheimbach
Feb 01 2016 23:38
yay cheers for the brownies
@mmacedoeu maybe a simple screenshot
mmacedo
@mmacedoeu
Feb 01 2016 23:40
@cpheimbach what about a real-time screenshot
Christian-Peter
@cpheimbach
Feb 01 2016 23:41
that’s a good idea
I took a screenshot and used this to upload
I guess the shrinktheweb is cool when you have no scroll pens to show but they can get very long if you code a longer page
you then have a skyscraper effect of your portfolio page image
mmacedo
@mmacedoeu
Feb 01 2016 23:44
looking at codepen.io profile page, it uses an iframe for their "thumbnail"
maybe use the same feature as gitter