These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Oct 2016
Ken Haduch
@khaduch
Oct 28 2016 00:00
@DanielMW34 - the browser developer console would help you with non-existent functions like this. Open it up when you are using the site
Risa Fletcher
@risafletcher
Oct 28 2016 00:00
@DanielMW34 Let's run through your bugs. If you give us a list, I'm sure we're all happy to help identify and tackle them
Daniel
@DanielMW34
Oct 28 2016 00:00
@risafletcher I corrected the indexOf and that apparently has made a difference however, the program is not executing as I would like it. First thing I noticed.. this section is not effecting the display...
if (ticTacToe.length == 3) {
          playerOneScore += 1;
          winner = "Player1";
          $("#test7").html(playerOneScore);
          $("#1").html("Y");
          $("#2").html("O");
          $("#3").html("U");
          $("#4").html("-");
          $("#5").html("-");
          $("#6").html("-");
          $("#7").html("W");
          $("#8").html("I");
          $("#9").html("N");
          break;
        }
Risa Fletcher
@risafletcher
Oct 28 2016 00:02
=== are best instead of just two
Daniel
@DanielMW34
Oct 28 2016 00:02
@risafletcher bug #2, computer went first, I went second, computer then picked 3rd and 4th... apparently there is a bug which is not waiting its turn for me
@risafletcher how do you want me to send these bugs to you? A private message list?
Risa Fletcher
@risafletcher
Oct 28 2016 00:03
@DanielMW34 Sure! I'm actually in class so if you need immediate help, I'm sure someone online right now can take over
Daniel
@DanielMW34
Oct 28 2016 00:04
@risafletcher Let me get the list made, that alone would help me identify what all needs fixing. Will you be free after your class? If so, around what time / timezone ?
Risa Fletcher
@risafletcher
Oct 28 2016 00:04
so, it sounds like you need the computer's turn/function to hand off to user input each time
I'm in PST. I'll be out in about an hour :/
Ken Haduch
@khaduch
Oct 28 2016 00:07
@DanielMW34 - it looks like it is allowing about two moves, and then it clears the screen of X and O marks? Are you seeing that?
Daniel
@DanielMW34
Oct 28 2016 00:08
@khaduch I have seen MANY different variations of mistakes, including that one.
Ken Haduch
@khaduch
Oct 28 2016 00:09
@DanielMW34 - or it's doing something else... i have a theory, if I didn'tn't already find this for you?
Daniel
@DanielMW34
Oct 28 2016 00:09
@khaduch I wish I could send you a screen shot of what I currently see.... computer has top 3, bottom 3, left side all marked out... took about 4 squares at once...
@khaduch I would love to know your theory
Ken Haduch
@khaduch
Oct 28 2016 00:15
@DanielMW34 - I think that in the playerTurn function, you are assigning multiple click handlers on your squares #1, #2, etc. The behavior that I just saw, where a couple clicks worked and then it seemed to linearly increase in the number of marks put on the board fits a pattern that I have seen a couple times recently. You do not want to assign $("#1").on("click", function() {and all of the following each time you run that playerTurn function, if it is invoked multiple times. One time to assign the click handler should be all that you do. You might want to have a flag that will tell you that youve already set a click handler and not do it again. Does that make sense? I didn't try to test it, but that's my theory... I'll be back in a while
lacey irvin
@laceyIrvin
Oct 28 2016 00:17
how can i achieve this for my portfolio. I really love the simplicity but I don't know where to start
http://josephgochua.com/
Daniel
@DanielMW34
Oct 28 2016 00:19
@khaduch I think I see where you are going, wondering if I should restructure this so instead of playerTurn() containing all the click functions, the click functions would exist outside playerTurn() and, perhaps, playerTurn() simply runs an analysis to see what squares have been used and, if they have been used, disables their "clickability" or, vice versa, they are "un-clickable" by default and, only playerTurn() can make them "clickable"
Ken Haduch
@khaduch
Oct 28 2016 00:25
@DanielMW34 - that might be the best way to go - the thing is that you have some variables in that function and they might not be in scope if you define the click handlers outside? I guess that's one problem that I can foresee? You can probably figure out a way around that to make those values accessible. The main thing is that you do not want to create multiple click handlers. You can probably do it all in one with other checks to determine which cell was clicked - fetch the ID value and get the number, use that to index into an array to get information related to that square, etc. You aren't disabling any of them at this point, are you? That might be something helpful once you have a cell occupied...
trying to get this to iterate over the object
Daniel
@DanielMW34
Oct 28 2016 00:32

@khaduch
"the thing is that you have some variables in that function and they might not be in scope if you define the click handlers outside?" ---- do you mean this might be the case if I change the design to have each <div> clicker call an individual function?

"The main thing is that you do not want to create multiple click handlers." ----- I'm not 100% clear on what multiple click handlers are...?

"You aren't disabling any of them at this point, are you?" ---- correct, I am not disabling anything at this point. (even some of the things I thought I was disabling are not disabling). In order to disable something, the example below should work AND, the line beneath would "re-enable" the clicking correct?

$("#playX").attr("disabled", "disabled");
$("#playX").removeAttr("disabled");
Ken Haduch
@khaduch
Oct 28 2016 00:33
@DanielMW34 - I'll get back to you soon, okay?
Daniel
@DanielMW34
Oct 28 2016 00:34
@khaduch yes, I am going to head out for 20 mins to print out some of this code on paper so I can look at it in it's entirety.
@khaduch just message me whenever you are ready, and thank you
CamperBot
@camperbot
Oct 28 2016 00:34
danielmw34 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: danielmw34 already gave khaduch points
Risa Fletcher
@risafletcher
Oct 28 2016 00:51
@laceyIrvin I'm on mobile; can you S/s me the desktop? The appeal seems to be mostly the typeface he is using
Rafael Mateo
@rafaelmateo
Oct 28 2016 00:55
hello
Howdo I put a navigation bar in the front end project?
Ghost
@ghost~56c733f2e610378809c24d2c
Oct 28 2016 01:10
Rafael Mateo
@rafaelmateo
Oct 28 2016 01:12
The thing about that is that I dont wanna use links, I want people to click on it and go do THAT section down the page, because it is just 1 page
@travisboss
@travisboss but thanks!
CamperBot
@camperbot
Oct 28 2016 01:12
rafaelmateo sends brownie points to @travisboss :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @travisboss |http://www.freecodecamp.com/travisboss
Ghost
@ghost~56c733f2e610378809c24d2c
Oct 28 2016 01:13
@rafaelmateo you would be looking at #tags this is done with bootstrap
Rafael Mateo
@rafaelmateo
Oct 28 2016 01:14
okks
Ill google it!
thanks for the info!!
Rafael Mateo
@rafaelmateo
Oct 28 2016 01:16
hahahha I love this! thnks @travisboss
Ghost
@ghost~56c733f2e610378809c24d2c
Oct 28 2016 01:17
its a big complicated to explain over gitter so it is usually easier to give a link to. so you can see you are using div classes and calling those out within nav. I have it on an old site and is pretty easy.
Yaroslav Newman
@YaroNew
Oct 28 2016 01:37
Guys
Help with assignment pls.
CamperBot
@camperbot
Oct 28 2016 01:38
no wiki entry for: with assignment pls
Yaroslav Newman
@YaroNew
Oct 28 2016 01:38
function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line

for ( var i=1; i> arr.lenght; i+5) {
  for (var j=0; j< arr[i].lenght; j++);
}

  // Only change code above this line
  return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);
Modify function multiplyAll so that it multiplies the product variable by each number in the sub-arrays of arr
Ken Haduch
@khaduch
Oct 28 2016 01:44
@YaroNew - you have misspelled ".length" in two places... And you are not doing any multiplications - you should be multiplying the individual array elements (in your inner loop) times the product variable to get a value to return. Because the provided code does return product;
Yaroslav Newman
@YaroNew
Oct 28 2016 01:48
@khaduch can you give an example
Ken Haduch
@khaduch
Oct 28 2016 01:54
@YaroNew - a couple questions - do you have an explanation why your outer for loop has a variable that is initialized to 1, and then adds 5 as the iteration value? (There is a problem there, in my opinion.) Secondly - how would you access the elements of the two-dimensional array - there should be a lesson that describes and teaches that. "Access MultiDimensional Arrays With Indexes " is the lesson. The hint is that in your inner loop, you would need a statement that uses the syntax arr[ something1 ][ something2 ]; where the two different somethings are values that you generate to index into the multi-dimensional array.
Walid Ashri
@walidashri
Oct 28 2016 01:55
@YaroNew
var arr=[[1,2],[3,4],[5,6,7]];
arr[0][1]= 2;
Yaroslav Newman
@YaroNew
Oct 28 2016 02:01
@khaduch Yeap. Thanks for reminding.
CamperBot
@camperbot
Oct 28 2016 02:01
yaronew sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1843 | @khaduch |http://www.freecodecamp.com/khaduch
Yaroslav Newman
@YaroNew
Oct 28 2016 02:08
@khaduch so I need to turn all code in else\if statements
?
@khaduch

function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line


for ( var i=0; i < arr.length; i++) {
  for (var j=0; j< arr[i].length; j++);
}

  // Only change code above this line
  return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);
here is how my code looks like now
Walid Ashri
@walidashri
Oct 28 2016 02:18
@YaroNew inside 2nd for loop
product *=arr[i][j]
Yaroslav Newman
@YaroNew
Oct 28 2016 02:20
@walidashri
function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line


for ( var i=0; i < arr.length; i++) {
  for (var j=0; j< arr[i].length; j++);
  product *=arr[i][j];
}

  // Only change code above this line
  return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);
Walid Ashri
@walidashri
Oct 28 2016 02:21
@YaroNew :+1:
Yaroslav Newman
@YaroNew
Oct 28 2016 02:22
Doen't wokr
work
multiplyAll([[1],[2],[3]]); should return 6
multiplyAll([[1,2],[3,4],[5,6,7]]) should return 5040
multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]);) should return 54
it returns null
Yaroslav Newman
@YaroNew
Oct 28 2016 02:29
@walidashri any ideas?
Walid Ashri
@walidashri
Oct 28 2016 02:30
@YaroNew
for ( var i=0; i < arr.length; i++) {
  for (var j=0; j< arr[i].length; j++){
  product *=arr[i][j];
}
}
u are missing some {}
Yaroslav Newman
@YaroNew
Oct 28 2016 02:32
@walidashri thx man!
CamperBot
@camperbot
Oct 28 2016 02:32
yaronew sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @walidashri |http://www.freecodecamp.com/walidashri
Ken Haduch
@khaduch
Oct 28 2016 02:35
@YaroNew - just came back - in your post here: :point_up: October 27, 2016 10:20 PM it was really the ; at the end of the line for (var j=0; j< arr[i].length; j++); that was causing the problem. If you just removed that erroneous semicolon from the end of that for loop line, it would have worked fine, extra braces not necessary (but a good idea to have them for clarity.)
Yaroslav Newman
@YaroNew
Oct 28 2016 02:37
@khaduch Thanks
CamperBot
@camperbot
Oct 28 2016 02:37
yaronew sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: yaronew already gave khaduch points
Walid Ashri
@walidashri
Oct 28 2016 02:37
@khaduch thanks that's work, but how in earth the for loop knows its block end with out {}
CamperBot
@camperbot
Oct 28 2016 02:37
walidashri sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1844 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 28 2016 02:42
@walidashri - if you do not open a block of code with {} braces, then the next single line of code will be the body of the for loop. In this case, having the ; there was essentially setting up a "null" code statement to execute. If that wasn't there, then the single line that performed the multiplication would be the for loop's body.
@walidashri - but if you read coding guidelines, they'll tell you not to do that single-line block, and use braces to make it clear where the code body begins and ends.
Walid Ashri
@walidashri
Oct 28 2016 02:47
@khaduch so
for(whatever)
do some// gonna be executed 
do some 2 // won't be excuted?
Rex Smith Jr.
@rsmith731
Oct 28 2016 02:49
has anyone used Kendo Ui before?
sharkantropo
@sharkantropo
Oct 28 2016 02:55
Hello, anyone could help me to figure out a current issue I have with an intermediate frontEnd challenge
Ken Haduch
@khaduch
Oct 28 2016 02:59
@walidashri - yes, the first do some would be executed the number of times that the for loop dictates, and the do some 2 would be executed after that loop finished, most likely only one time (unless it was another for loop, for example.)
Walid Ashri
@walidashri
Oct 28 2016 03:00
@khaduch :+1:
Ken Haduch
@khaduch
Oct 28 2016 03:01
@sharkantropo - post your question and we'll try to help. Link to your code, explain what you are having an issue with, etc.
sharkantropo
@sharkantropo
Oct 28 2016 03:04
@khaduch https://codepen.io/Sharkantropo/full/jrpbqX/ Alright, my Jquery code seems to work, but everytime I request to search wiki pages by putting the keyword and afterwards press enter, the page displays the results below but it autorefresh immediately and clean everything. ( nevermind the css and html, they are just there for staple)
Ken Haduch
@khaduch
Oct 28 2016 03:06
@sharkantropo - are you using a <form for your page? Clicking the submit button on a form submits and reloads the page. You can put a method preventDefault() in your code to prevent the default action, which is to submit the page back to the server. There are other ways to do it, too - let me go check out your code page.
Ken Haduch
@khaduch
Oct 28 2016 03:14

@sharkantropo - if you modify your code to add that line event.preventDefault(); in this place:

          if(event.which == 13)
               {
                  var searchTerm = $("#searchWord").val();
                  if (searchTerm !== "") {
                              ajaxAgent(searchTerm);
                            event.preventDefault();
                                  } 
                   else {

I believe that it will fix your problem.
(Pardon the sloppy indentation.)

sharkantropo
@sharkantropo
Oct 28 2016 03:16
@khaduch No problem, I can understand it well enough. I'll add it right away.
@khaduch It worked, thanks !.
CamperBot
@camperbot
Oct 28 2016 03:16
sharkantropo sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1845 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 28 2016 03:29
@sharkantropo - great! You're welcome - good luck with the project!
Mark
@vinarius
Oct 28 2016 03:37

Hey guys, any ideas on why my background-image will not fill the entire div it is currently in? I am looking at ID: 'space_1_HeroSection_2'

http://codepen.io/vinarius/pen/XjELAK?editors=1100

it only displays the image as far as there is text
Ken Haduch
@khaduch
Oct 28 2016 03:42
@vinarius - I'm not seeing an image at all - it is giving me a network error something to the effect of this: NetworkError: 403 Forbidden - https://photos-1.dropbox.com/t/2/AACQbonHAQBC7QYPL8rj0GTY7OQ2mrXltHocKAZTTvKUXA/12/342555477/jpeg/32x32/1/_/1/2/conference%20room.jpg/EPDI0tYCGMUCIAIoAg/dfk-NckShDZqECnhwWS11EMF2VxBylYCfc9JnMEiAug?size=2048x1536&size_mode=3" - I think that there is a different way to get the URL for a dropbox image? I mean for public sharing? I forget how to do that, but I was able to find something on the dropbox interface to get a URL for sharing?
Mark
@vinarius
Oct 28 2016 03:43
hmmm
JD Tadlock
@jdtdesigns
Oct 28 2016 03:43
use photobucket.com
Sorin Ruse
@sorinr
Oct 28 2016 03:53
@vinarius i can see the img and its full width of the container. only you have applied that bg on a col-xs-3 div
Mark
@vinarius
Oct 28 2016 03:54
@sorinr that's probably the mk design img. that's supposed to be that way. it's the conference room that im trying to fix.
Sorin Ruse
@sorinr
Oct 28 2016 03:56
@vinarius you get a 403 forbidden response. recheck the url maybe something wrong there
Mark
@vinarius
Oct 28 2016 03:59
ill ha ve to look into that
not sure why
ah
figured that out. had to replace www with dl
Sorin Ruse
@sorinr
Oct 28 2016 04:03
@jdtdesigns just pm-ed you
c0d0er
@c0d0er
Oct 28 2016 04:09

i used the following code for settimeout

var timer;
$("#twitchSearch").on("input", function() {
    if (timer) { clearTimeout(timer); }
  $("#twitchDiv").empty();
    timer =  setTimeout(loadTwitch, 150);  
});

and the following code to set up loadtwitch (very little change in the beginning)

function loadTwitch(){  
  var search=$('input').val();

the result still the same with flashing, any way to improve?
this is my code: http://codepen.io/c0d0er/pen/RGLxpQ?editors=0010

Sorin Ruse
@sorinr
Oct 28 2016 04:09
@vinarius and why do you camelcase classes and ids ?. in html and css these attributes are case insensitive
Mark
@vinarius
Oct 28 2016 04:10
@sorinr that is incorrect information
they are case sensitive
c0d0er
@c0d0er
Oct 28 2016 04:10
the flashing is when i input anything in the search field
Sorin Ruse
@sorinr
Oct 28 2016 04:12
@vinarius sorry. u r right
Michael Karpinski
@karpimpski
Oct 28 2016 04:45
hey guys, I need a bit of help. the basic layout for my site is this: boxes that link to something. then there are 2 links within those boxes that let you edit the object and delete the object. I had to use JavaScript to achieve this because it required Ajax. my problem is this: when I delete something I have it confirm that you want to delete that object. but if you hit cancel then it directs you to the object (because of the box's event listener). how can I stop this? here are the listeners:
var boxes = document.querySelectorAll('.filled.box');
for(var i = 0; i < boxes.length; i++){
    boxes[i].addEventListener('click', function(){
        window.location='/tips/' + findId(this);
    });
    boxes[i].querySelector('.edit').addEventListener('click', function(){
        window.location='/tips/' + findId(this.parentElement.parentElement) + '/edit';
    });
    boxes[i].querySelector('.destroy').addEventListener('click', function(){
        var id = findId(this.parentElement.parentElement);
        if(confirm("Are you sure?")){
            $.ajax({
                url: '/tips/' + id,
                type: 'DELETE',
                success: function(result) {
                    window.location='/tips';
                }
            });
        }
        else{
            window.location='/tips';
        }
    });
}
Michael Karpinski
@karpimpski
Oct 28 2016 04:52
nevermind, simple fix! just stopPropogation()
Adolfo Saenz
@AdoSae1
Oct 28 2016 06:32
hello im trying to add 3 background images for three different pats of my page but it only shows 2
fijeko
@fijeko
Oct 28 2016 07:13
better put background in css , check whit developer tools in your browser the size of body element on page, if your body has no elements its height is 0
catalin560
@catalin560
Oct 28 2016 07:42
Hello! So I want to build a Simon Says App and I need some help. What I want is when I click start, after a time period the green button will turn white and then back to green after which JS will wait for the event where the user will press the green button. How do I write this in code?
$('.start').click(function(){
  setTimeout(function(){
  $('.btn-green').css("background-color","white");
   },1000);
});
Abhishek Saini
@sainiabhi
Oct 28 2016 08:04
@catalin560 hi not getting what you are trying to do. Do you have any example? or put your code in codepen
catalin560
@catalin560
Oct 28 2016 08:05
not mine
and I don't want to make it so complex
I don't know how to explain it any more simpler
Abhishek Saini
@sainiabhi
Oct 28 2016 08:06
can we go point by point:
  1. when you click start, the green should turn to white
then?
catalin560
@catalin560
Oct 28 2016 08:06
after clicking start green will flash white > JS will wait for user to press the green button
then execute the next function
Abhishek Saini
@sainiabhi
Oct 28 2016 08:07
ok
catalin560
@catalin560
Oct 28 2016 08:07
so instead of changing the bg color I will use animate
anyway
how do I tell JS to WAIT for an event?
Abhishek Saini
@sainiabhi
Oct 28 2016 08:08
see to run some function after some time use setTimeout function
catalin560
@catalin560
Oct 28 2016 08:10
ok so what setTimeout does is it executes a function after a time period
that isn't waiting for a event...
@sainiabhi
Abhishek Saini
@sainiabhi
Oct 28 2016 08:11

@catalin560 yes do one thing

```

$('.start').click(function(){
  setTimeout(function(){
  alert("In set time out function");
   },1000);
});
so you can see after 1 second alert will run
1000ms = 1s
catalin560
@catalin560
Oct 28 2016 08:13
@sainiabhi yes I know that... after 1 second an alert will pop up
thats not what I'm looking for...
oh I think I got it!
Abhishek Saini
@sainiabhi
Oct 28 2016 08:14
@catalin560 great :P
catalin560
@catalin560
Oct 28 2016 08:14
can a button get a active property after being clicked?
@sainiabhi ?
Abhishek Saini
@sainiabhi
Oct 28 2016 08:15
by active you mean what? @catalin560 are you trying to disable the button first?
catalin560
@catalin560
Oct 28 2016 08:15
by active I mean its being clicked
Abhishek Saini
@sainiabhi
Oct 28 2016 08:17
every button is supposed to be clicked :P
catalin560
@catalin560
Oct 28 2016 08:29
@sainiabhi other question then... can it gain a "certain" property after being clicked?
Abhishek Saini
@sainiabhi
Oct 28 2016 08:30
@catalin560 yes it can
@catalin560
$('button').attr('active', 'vfsdd');
catalin560
@catalin560
Oct 28 2016 08:39
@sainiabhi nice! finally something I can use!
Abhishek Saini
@sainiabhi
Oct 28 2016 08:39
@catalin560 keep going
:)
catalin560
@catalin560
Oct 28 2016 08:44
@sainiabhi another problem
$('.start').click(function(){
        $(".btn-green").animate({bottom: "+=10px"});
    setTimeout(function(){
       $(".btn-green").animate({bottom: "0"});
    },200);
});
why wont it animate?
Abhishek Saini
@sainiabhi
Oct 28 2016 08:46
@catalin560 let me check will let you know
Abhishek Saini
@sainiabhi
Oct 28 2016 08:52
@catalin560 it's because you should give .btn-green{position: absolute;}
similarly set position:absolute for other buttons too
catalin560
@catalin560
Oct 28 2016 09:15
@sainiabhi I found a way to animate colors for each button wanna give it another try and tell me what you think? :)
@catalin560 press start then press each button that flashes white
Abhishek Saini
@sainiabhi
Oct 28 2016 09:16
@catalin560 sure
catalin560
@catalin560
Oct 28 2016 10:32
@sainiabhi hey you still there?
Abhishek Saini
@sainiabhi
Oct 28 2016 10:40
@catalin560 yeah tell me?
catalin560
@catalin560
Oct 28 2016 10:42
@sainiabhi I have a question
I've made this basic, very rudimentary Simon Says app
now what I want to do is make it so that it happens at random
can I declare those click()functions as variables and make them run thru a rand() function or something like that?
like
var colors=[green,red,yellow,blue]
var green=function(...)
etc
call rand(colors)???
Abhishek Saini
@sainiabhi
Oct 28 2016 10:44
you want to randomly pick colors?
catalin560
@catalin560
Oct 28 2016 10:45
@sainiabhi yes
Abhishek Saini
@sainiabhi
Oct 28 2016 10:49
var colors = [green,red,yellow,blue];  //array
var num = Math.ceil(Math.random() * 3);  // as we have 4 items in the array, we will throw random numbers to select a number randomly 

var randomColor = colors[num];  //It will take colors randomaly from array colors
@catalin560
catalin560
@catalin560
Oct 28 2016 10:50
@sainiabhi thanks :)
CamperBot
@camperbot
Oct 28 2016 10:50
catalin560 sends brownie points to @sainiabhi :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @sainiabhi |http://www.freecodecamp.com/sainiabhi
Abhishek Saini
@sainiabhi
Oct 28 2016 10:51
@catalin560 welcome
Brandon
@bd1887
Oct 28 2016 10:59
Hi everyone. I'm having a problem where one of my CSS elements is losing its font-size style when I use JS to feed it content. I've written comments above the problem sections:
http://codepen.io/bd1887/pen/kkQVjy?editors=0110
catalin560
@catalin560
Oct 28 2016 11:00
@sainiabhi Isn't this the correct way of declaring a function?
$('.start').click(green);

var green=$('.btn-green').click(function(){
  $('#text').html('test green!');
  $(".btn-red").css('cssText', 'background: white; transition: background 1s ease;');
  setTimeout(function(){
      $(".btn-red").css('cssText', 'background: red; transition: background 1s ease;');
  }, 600);  
});
Abhishek Saini
@sainiabhi
Oct 28 2016 11:02
@catalin560 i think this should be the correct way, I'm not sure please run the code and confirm
var green = function() {
$('.btn-green').click(function(){
  $('#text').html('test green!');
  $(".btn-red").css('cssText', 'background: white; transition: background 1s ease;');
  setTimeout(function(){
      $(".btn-red").css('cssText', 'background: red; transition: background 1s ease;');
  }, 600);  
});

}
catalin560
@catalin560
Oct 28 2016 11:03
@sainiabhi tried it that way also :) it doesn't work :(
Abhishek Saini
@sainiabhi
Oct 28 2016 11:04
what you are trying to do? @catalin560
catalin560
@catalin560
Oct 28 2016 11:07
@sainiabhi
$('.start').click(green);
I'm trying to test it
Abhishek Saini
@sainiabhi
Oct 28 2016 11:08
$( ".start" ).click(function() {
  green();
});
try this
I think syntax is incorrect
Ramesh
@rnallu
Oct 28 2016 11:08
Guys, i'm newbie. Can you please tell me how to get the data from this api. Link: http://api.forismatic.com/api/1.0/
sorry, refer this link http://forismatic.com/en/api/
Abhishek Saini
@sainiabhi
Oct 28 2016 11:10
@rnallu bro if you are working with jquery then
$.ajax({
    headers:{
      'X-Mashape-Key':'LJgziTt4comshsPvkQ53wDltTjJRp1BtUA1jsnFeZf6GUpcBq9',
      Accept: 'application/json',
      'Content-Type' : 'application/x-www-form-urlencoded'  
    }, 
    url: 'put api url',
    success: function(data){
      data //It's the api data
    }
  });
$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
    success: function(data){
      data //your api result
    }
  });
Ramesh
@rnallu
Oct 28 2016 11:14
@sainiabhi Thanks bro, but pls help with reference to the above link. so that i can understand how to call JSON with jquery.
CamperBot
@camperbot
Oct 28 2016 11:14
rnallu sends brownie points to @sainiabhi :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @sainiabhi |http://www.freecodecamp.com/sainiabhi
Abhishek Saini
@sainiabhi
Oct 28 2016 11:22
$.ajax({
    url: 'http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en',
    success: function(data){
      console.log(data);
    }
  });
@rnallu Run this code and open your console to see the result
Ramesh
@rnallu
Oct 28 2016 11:52
@sainiabhi not worked
David Pickup
@davidpickup
Oct 28 2016 12:40
Completing the challenge "No repeats please”, and it says that all but the first test have failed. When I manually test each of the tests individually, I get the correct output. I therefore don’t know why the automated tests fail!
kirbyedy
@kirbyedy
Oct 28 2016 12:46
ok and ?
David Pickup
@davidpickup
Oct 28 2016 12:47
So is this a bug on the page? The “what to do if you find a bug” instructions say to ask for help here before reporting an issue.
kirbyedy
@kirbyedy
Oct 28 2016 12:47
are you sure your code is correct ?
David Pickup
@davidpickup
Oct 28 2016 12:48
When I manually call my function with each of the test calls, the correct result is returned.
kirbyedy
@kirbyedy
Oct 28 2016 12:50
what you can do is copy that code somewhere, and try to reset the code and clear the cache of your browser
then paste in the code again and try
assuming your code is correct, the issue should be solved
David Pickup
@davidpickup
Oct 28 2016 12:54
OK, done that and the issue is still there. Would it be possible to post the code here and you/someone to test it on that challenge page?
kirbyedy
@kirbyedy
Oct 28 2016 12:56
sure
actually you might post it in the javascript room
David Pickup
@davidpickup
Oct 28 2016 12:56
ok, will do
Pedro Gomes
@pedrouid
Oct 28 2016 12:56
hey guys
kirbyedy
@kirbyedy
Oct 28 2016 12:56
more people there at the moment
Pedro Gomes
@pedrouid
Oct 28 2016 12:57
is it ok to post some jQuery here
need to trigger Bootstrap carousel controls
with left and right arrow keys
```
$(document).keydown( function(e) {
    if( e.which==37) {
        e.preventDefault();
      $('.prev').trigger( "click" );
      console.log('left');
    } else if(e.which==39) {
        e.preventDefault();
      $('.next').trigger( "click" );
      console.log('right');
    }
    });
```
lol just ignore this non-sense
I got it
Gaston Kirsman
@gastikirs
Oct 28 2016 13:42
Guys, how can i reduce the width of the search box and make it still in the center?
Because i dont know why if i set the width to X px, it goes to the left.
kirbyedy
@kirbyedy
Oct 28 2016 13:46
@gastikirs did you try with: width: 80%; for example
Gaston Kirsman
@gastikirs
Oct 28 2016 13:46
@kirbyedy Yes. it also goes to the left
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 13:47
@gastikirs Try it with this:
  float: none;
  margin: 0 auto;
Gaston Kirsman
@gastikirs
Oct 28 2016 13:48
@Otto-AA Genious!! that worked.
@Otto-AA Can you explain me why?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 13:48
@gastikirs and display:block if you want it in an own row
Gaston Kirsman
@gastikirs
Oct 28 2016 13:49
@Otto-AA Ty, got it :)
CamperBot
@camperbot
Oct 28 2016 13:49
gastikirs sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @otto-aa |http://www.freecodecamp.com/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 13:49
@gastikirs I guess the default bootstrap input has float: left which causes it to move to the left. And margin: 0 auto will center it :)
Gaston Kirsman
@gastikirs
Oct 28 2016 13:50
@Otto-AA Ty mate. Its being a little hard for me the css stuff haha
CamperBot
@camperbot
Oct 28 2016 13:50
gastikirs sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: gastikirs already gave otto-aa points
Ramesh
@rnallu
Oct 28 2016 13:53
Guys, i'm newbie. Can you please tell me how to get the data from this api. Refer this Link for more details: http://forismatic.com/en/api/
Miczysko
@Miczysko
Oct 28 2016 13:57
@rnallu $.getJSON('api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en', function(){})
refer to this thread
https://www.reddit.com/r/FreeCodeCamp/comments/4b1fox/free_api_for_random_quote_machine/
Shawn Kemp
@official-shawnkemp
Oct 28 2016 14:21
may i ask something u guys? is it ok that im going to host my os as linux and ill pursue the front-end dev?
Aditi Roy
@AlluringAditi
Oct 28 2016 14:51
Hey guys I want to know how can I add a small line in my html code,
to be more specific: So there is quote and below it is the name of the person who wrote than quote and I want to add a small continuous line in front of that persons name how can I do that.
Parvinder Kumar
@parvinder09
Oct 28 2016 15:02
Hi Campers Need your some help, I just started making TicTacToe and facing some issue.
Here is my codepen http://codepen.io/parvinder09/pen/LRogZE
I tried to change classes using addClass in jquery but using new class name , click function is not working.
After clicking on 'O' page should show blank page as per now as I set the text of divs to null.
Note: As of now only Two Player and 'O' is clickable .
Shawn Kemp
@official-shawnkemp
Oct 28 2016 15:17
may i ask whats your preferable OS by performing front end?
Ramesh
@rnallu
Oct 28 2016 15:19
@DevD01 Have you tried <hr>
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:26
@parvinder09 maybe try something like $('yourSelector').addClass("theClass");?
Aditi Roy
@AlluringAditi
Oct 28 2016 15:27
@rnallu <hr> is for a complete line I don't want a full single line
I need a short bold line placed in front of the name
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:27
@DevD01 what about a div with border-bottom? You can set the div to the specific width
@Otto-AA or just add a border to your quote/author
Ramesh
@rnallu
Oct 28 2016 15:30
@DevD01 use css properties to modify as you like
Aditi Roy
@AlluringAditi
Oct 28 2016 15:30

@Otto-AA Okay See this:

<blockquote>"Live as if you were to die tomorrow; learn as if you were to live forever." <br/>
Mohandas karamchand Gandhi</blockquote> now I want a line in front of 'Mohandas Karamchand Gandhi' how will I do that?

Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:30
@DevD01 Can you link it?
Mark
@vinarius
Oct 28 2016 15:31

I'm attempting to loop through 3 different photos in #space_1_HeroSection_2 but I can't quite figure out the syntax. Any ideas? :)

http://codepen.io/vinarius/pen/XjELAK

Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:33
@vinarius what about the good old for-loop? for (var i = 0; i < heroImages.length; i++)
Parvinder Kumar
@parvinder09
Oct 28 2016 15:33
@Otto-AA I did but not able to use new class with click function
Mark
@vinarius
Oct 28 2016 15:34

I have the counting down in function fadeDivs() {
i = i < images.length ? i : 0;
$('#space_1_HeroSection_2').fadeOut(500, function(){
$(this).attr('background-image:url'), images[i].fadeIn(500);
})
i++;
}

I just don't know if .attr is what i'm looking for

Gaston Kirsman
@gastikirs
Oct 28 2016 15:34
Guys, what do you think about the front end of my wikipedia pen?
Any suggestion?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:37
@DevD01 Try this:
<span class="author">
  Mohandas karamchand Gandhi</span>
_____

.author {
  border-top: 1px solid black;
}
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:42
@vinarius I don't think that you can fadeIn background-pictures like this (see there for more info http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements)
And I think the attr should be like that: $(this).attr('background-image', 'url("'+yourLinkVar+'"'));
Aditi Roy
@AlluringAditi
Oct 28 2016 15:44
@Otto-AA Not working, I mean not doing what Exactly I want, Please see this image:
http://www.mixpixx.com/wp-content/uploads/2015/05/An-ounce-of-practice-is-worth-more-Mahatma-gandhi-quotes.jpg
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:45
@DevD01 Oh, that before O.o
Aditi Roy
@AlluringAditi
Oct 28 2016 15:45
@Otto-AA Yeah
@Otto-AA I'm also unable to figure how can I shift the name at the end of the quote, I mean if you see here http://codepen.io/DDeveloper/full/LRoXNx/ the name just below the starting of the quote and I want it to be shifted towards the end of the quote.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:52
@DevD01 you can take a look there for the line: http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/

@DevD01 Got it now :)
HTML

<blockquote>"Live as if you were to die tomorrow; learn as if you were to live forever."<cite>Mohandas karamchand Gandhi</cite></blockquote>

CSS

blockquote {
  display: inline-block;
}
blockquote cite {
  text-align: right;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}
@Otto-AA Try to understand it so you really learn something :P
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 28 2016 15:59
@DevD01 (font-size and margin aren't really neccessary but look better imo)
Bye guys
Aditi Roy
@AlluringAditi
Oct 28 2016 16:01
@Otto-AA Thank You.
You made my day thanks a lot :) :)
CamperBot
@camperbot
Oct 28 2016 16:01
devd01 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @otto-aa |http://www.freecodecamp.com/otto-aa
Mark
@vinarius
Oct 28 2016 16:24

@Otto-AA this is what i was going for

http://codepen.io/vinarius/full/XjELAK/

Faefnir
@Faefnir
Oct 28 2016 16:45
how do i center an img on the page using div ?
JD Tadlock
@jdtdesigns
Oct 28 2016 16:48
making a twitch bot www.twitch.tv/codeclash
Kamil Malek
@KamilMalek
Oct 28 2016 17:03
@Faefnir margin: 0 auto; ?
I'm not sure if that will work with your request
Muhammad Hasham
@MohammadHasham
Oct 28 2016 17:14
blob
My JS file is not working can anyone tell me where am i wrong
i am using dreamweaver
Rimi.
@Codevotee
Oct 28 2016 17:15
@MohammadHasham <script src=""></script>, you forgot the >
Muhammad Hasham
@MohammadHasham
Oct 28 2016 17:17

@APRim05 i am using

$(document).ready(function() {
    alert("This is working");
});

but nothing is working.

Rimi.
@Codevotee
Oct 28 2016 17:19

@MohammadHasham

<script src="JS/JS.js"</script>

Should be:

<script src="JS.js"></script>
Muhammad Hasham
@MohammadHasham
Oct 28 2016 17:20
is it as if Javscript is not loading in the page
am i doing it right by using that in head tag
@APRim05
Rimi.
@Codevotee
Oct 28 2016 17:24
@MohammadHasham sometimes it doesn't load, but the browser should show a message like "scripts blocked", on Chrome it's at the top right
@MohammadHasham idk why it doesnt work if you fixed that code
Muhammad Hasham
@MohammadHasham
Oct 28 2016 17:25
@APRim05 thanks for showing concern.
CamperBot
@camperbot
Oct 28 2016 17:25
mohammadhasham sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @aprim05 |http://www.freecodecamp.com/aprim05
Emily Sperry
@sperrye
Oct 28 2016 17:38
I'm working on the portfolio project. How do I make an e-mail form with codepen? I know you usually have to use php, right?
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 17:39
Hello World! :)
CamperBot
@camperbot
Oct 28 2016 17:39

welcome to FreeCodeCamp @NitinNair89!

Nitin Chandran Nair
@NitinNair89
Oct 28 2016 17:42
@sperrye You can use <a href="mailto:your_email_id_here" as an hyperlink in your send button. This will open the default mail client for the user. It is sufficient for codepen.
Emily Sperry
@sperrye
Oct 28 2016 17:50
thanks @NitinNair89
CamperBot
@camperbot
Oct 28 2016 17:50
sperrye sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 17:55
You're welcome @sperrye :)
Steve Giampa
@sg-birch
Oct 28 2016 18:22

Hey all. I'm trying to have a jQ link open in a new tab and I'm not sure how to add the "target='_blank'" to this line:

$('#output').prepend("<li><a href= "+data[3][i]+ ">"+data[1][i] + "</a><p>"+data[2][i]+"</p></li>");

Sorry ```
$('#output').prepend("<li><a href= "+data[3][i]+ ">"+data[1][i] + "</a><p>"+data[2][i]+"</p></li>");
gah! $('#output').prepend("<li><a href= "+data[3][i]+ ">"+data[1][i] + "</a><p>"+data[2][i]+"</p></li>");
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 18:38
Add it just after a before the href.
@sg-birch
Steve Giampa
@sg-birch
Oct 28 2016 18:42
@NitinNair89 Like so? Doesn't seem to work.
$('#output').prepend("<li><a target= "_blank" href= "+data[3][i]+ ">"+data[1][i] + "</a><p>"+data[2][i]+"</p></li>");
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 18:43
<a target='_blank' ...
Can't see your code, hope you wrote it this way @sg-birch
Steve Giampa
@sg-birch
Oct 28 2016 18:43
@NitinNair89 ah, single quotes. Thank you!
CamperBot
@camperbot
Oct 28 2016 18:43
sg-birch sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 18:44
Hope it works! :)
lacey irvin
@laceyIrvin
Oct 28 2016 18:48
I found a great snippet to use for my portfolio but I cant figure out how to add to it. I thought I could just build the containers within the blocks but nothing happens when I add anything. what am i doing wrong. http://codepen.io/lirvin88/pen/amwALP
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 18:54
What issue are you facing? The scrolling works when you click the links.
@laceyIrvin
lacey irvin
@laceyIrvin
Oct 28 2016 18:56
@NitinNair89 I know but I cant add anything into the blocks. Ive tried making and using bootstrap columns to add content but nothing happens when I do
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 18:57
Where did you try to add content?
@laceyIrvin Did you try in all the div?
The content in the first div (block) will not be seen to you because it guides behind the navbar. So try adding margin-top:100px to that div tag. You can change the margin value as per your choice. I just gave an example.
lacey irvin
@laceyIrvin
Oct 28 2016 19:01
@NitinNair89 here is a better sample
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 19:01
*hides behind the navbar
lacey irvin
@laceyIrvin
Oct 28 2016 19:02
@NitinNair89 Why wont my h3 center?
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 19:06
@laceyIrvin wrap a div around your h3 and give margin:0 auto; to that div
Nitin Chandran Nair
@NitinNair89
Oct 28 2016 19:18
Bye World! Cya
Muhammad Hasham
@MohammadHasham
Oct 28 2016 19:46
I have a question that might be off topic but i don't know any other forum of developers other than this.
Are there any career opportunities if one tries to become a front end or full stack developer and an android developer as well? if so than what would be his designation ?
Adel
@AdelMahjoub
Oct 28 2016 20:09
@MohammadHasham "a fancy designation to impress"
@MohammadHasham used to be called hacker, now it is coder, any other designation has no sense
Brandon
@Deet3r
Oct 28 2016 21:33
Hello fellow campers, OK, so I just reached the "Build a Personal Portfolio Webpage" and I'm not going to lie, I have no idea where to start! (Keep in mind my total experience coding ='s the 117 modules that I completed before this, so I'm a total noob!) Anyways, we have not covered allot of the material that will be needed to complete this challenge. Does anyone have any input on resources that will help me get going? Thanks in advance.
Emily Sperry
@sperrye
Oct 28 2016 21:38
http://codepen.io/sperrye/pen/RGmoYV Can anyone tell me how to pad the right side of the form DIV so that it matches the quote div?
@Deet3r coolors.com for color palette, pexels.com for free stock photos, 000webhost.com for hosting files, google fonts for importing fonts, w3schools for css tweaks, bootstrap website.
Emily Sperry
@sperrye
Oct 28 2016 21:46
000webhost is actually kind of a pain but it's what I'm using.
sorry, coolors.co
Brandon
@Deet3r
Oct 28 2016 21:50
@sperrye Great, thanks so much! Ill go check those out and see what I can find.
CamperBot
@camperbot
Oct 28 2016 21:50
deet3r sends brownie points to @sperrye :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @sperrye |http://www.freecodecamp.com/sperrye
Emily Sperry
@sperrye
Oct 28 2016 22:01
I managed to get it straight on both sides, but how do I get a gutter between the quote and the contact form?
Gaston Kirsman
@gastikirs
Oct 28 2016 22:08
Guys, any idea how to center the twitch icon at the end?
http://codepen.io/gastonk/full/ORYepw/
I cant center it
Also the search box seems to work well when the pen is in full size, but in editor mode it justs breaks
the width
Jay
@blackbluecaribou
Oct 28 2016 22:15
heys
Risa Fletcher
@risafletcher
Oct 28 2016 22:45
@gastikirs , why is your icon in an <i> tag?
Aleksey
@Xaz16
Oct 28 2016 22:47
@gastikirs or you can do like this
#twitch-logo{
  display: block;
  margin: 0 auto;
}
@gastikirs didn't understand what are you wanna do with search box?
Tony Miri
@TonyMiri
Oct 28 2016 23:50
Does anyone know what the difference is between something like
$('#btn').click(function() {
blah blah});

//and

$('#btn').on('click' function() {
blah blah});
?
emamadordev
@emamadordev
Oct 28 2016 23:55
@FatTone225 i think it does the same thing
looks like .on is the better choice
emamadordev
@emamadordev
Oct 28 2016 23:57
@FatTone225 interesting
@FatTone225 i had an issue earlier this month where i created a new element wih the same class but it wasn't binding to a jquery command so i see how on click can help me with this issue.