These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Jan 2018
Kaz Baig
@kbaig
Jan 09 2018 00:08
@tesla809 you can, just add the following line to the top:
// jshint esversion:6
eliecerthoms
@eliecerthoms
Jan 09 2018 00:57
Hello anyone ever done a react component that pops up and remains set even if routes change? Or is this an impossibility?
I am talking about something resembling Flash Notifications.
Or more like Toast notifications on mobile. That appear and remain shown regardless of user input on the app. Only dissapearing after a time interval
Kaz Baig
@kbaig
Jan 09 2018 02:11
@eliecerthoms if you want to do flash notification/modal type stuff, look into createPortal
German Gamboa Gonzalez
@germangamboa95
Jan 09 2018 02:27

guys can I get a review on my answer to find the longest word challenge?
function findLongestWord(str) {
var x = 0;
var num;
var array = str.split(' ');
array.forEach(function(item, x){
var y = item.length;

if(y > x){
  x = y;
  num = x;
}

});
console.log(num);
return num;
}

findLongestWord("The quick brown fox jumped over the lazy dog");

Eric Weiss
@eweiss17
Jan 09 2018 02:34
function findLongestWord(str) {
var x = 0;
var num;
var array = str.split(' ');
array.forEach(function(item, x){
var y = item.length;

if(y > x){
  x = y;
  num = x;
}
});
console.log(num);
return num;
}

findLongestWord("The quick brown fox jumped over the lazy dog");
German Gamboa Gonzalez
@germangamboa95
Jan 09 2018 02:40
@eweiss17 thanks! I had no idea how format it!
CamperBot
@camperbot
Jan 09 2018 02:40
germangamboa95 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 600 | @eweiss17 |http://www.freecodecamp.org/eweiss17
Jack Howard
@JackHowa
Jan 09 2018 02:56
Working on stylizing my tribute page in React Bootsrap. It works locally but oddly not on codepen. any thoughts? I've been looking at the stylesheets that's included on other projects and can't figure it out https://codepen.io/JackHowaa/pen/XVVWVW/
David Belmares
@DavidBelmares
Jan 09 2018 03:14

I'm working on the Caesar's Cipher challenge on FCC. I'm really stuck... again...

function rot13(str) { // LBH QVQ VG!
  str = str.toUpperCase();

  var output = [];
  for (i = 0; i < str.length; i++){
    if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
      output.push(str.charCodeAt(i));
    } else {
      output.push(str.charAt(i));
    }

  }

  var outputString = "";
  var changedCodeTemp = 0;

  // this for loop will actually adjust the characters 13 spaces
  for (j = 0; j < output.length; j++){
    if (output[j] >= 65 && output[j] <= 90) {

      if (output[j] >= 78){
          changedCodeTemp = output[j] + 13;
          changedCodeTemp = 65 + (changedCodeTemp - 90); 
        } else {
          changedCodeTemp = output[j] + 13;
        }
      output[j] = String.fromCharCode(changedCodeTemp);
      }


  }
  return output.join("");
}

I believe the fault could be in line 23 but when I think through it, it makes sense. It's supposed to go back to the beginning of the 65-90 range and continue if it exceeds a value of 90

David Belmares
@DavidBelmares
Jan 09 2018 03:21
line 23 is this btw
changedCodeTemp = 65 + (changedCodeTemp - 90);
Ian
@toianw
Jan 09 2018 03:22
@JackHowa Check the developer tools javascript console in your browser. You'll see this message:
Uncaught ReferenceError: ReactBoostrap is not defined at pen.js:16
unfortunately, the line numbers never seem to be right when using codepen, but it can help you track down the problem.
Kaz Baig
@kbaig
Jan 09 2018 03:25

@eweiss17 in

if(y > x){
  x = y;
  num = x;
}

What is the purpose of x = y;?

Also, it would be better to have more declarative variable names
Jack Howard
@JackHowa
Jan 09 2018 03:27
@toianw oh brilliant thank you. of course dev tools would work; hadn't thought the obvious
CamperBot
@camperbot
Jan 09 2018 03:27
jackhowa sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 506 | @toianw |http://www.freecodecamp.org/toianw
Kaz Baig
@kbaig
Jan 09 2018 03:28
instead of num, maybe longest. Instead of x maybe i which is often short for index. y could become currentLength
Ian
@toianw
Jan 09 2018 03:28
@JackHowa no problem, I think you'll find a couple of other problems after you correct those typos, but the console should help you figure them out.
Kaz Baig
@kbaig
Jan 09 2018 03:29
@germangamboa95 oops meant to tag you, please see above
Jack Howard
@JackHowa
Jan 09 2018 03:30
@toianw holy hell. hardly spelled ReactBootstrap right once
Kaz Baig
@kbaig
Jan 09 2018 03:31
@germangamboa95 Lastly, a more advanced solution:
function findLongestWord(str) {
  return Math.max(...str.split(' ').map(word => word.length));
}
Jack Howard
@JackHowa
Jan 09 2018 03:38
brilliant thanks for the brief look @toianw https://codepen.io/JackHowaa/pen/XVVWVW
CamperBot
@camperbot
Jan 09 2018 03:38
jackhowa sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
api offline
Ian
@toianw
Jan 09 2018 03:39
@JackHowa good job :+1:
Andrew
@A-coding116
Jan 09 2018 03:42
so I'm on code pen building a tribute page and I'm using jquery for animations but on my page it brings this up //# sourceURL=pen.js what do I do to get rid of this or am I just doing something wrong
German Gamboa Gonzalez
@germangamboa95
Jan 09 2018 03:44
@kbaig thanks! ah I got a bit lazy with the var names. I keep forgetting there is libraries such as Math that I use thus I have a horrible habit coming up with weird stuff. and the y = x part was my way of sorting the max by compering the current value to the past value and checking it against the last value.
CamperBot
@camperbot
Jan 09 2018 03:44
germangamboa95 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @kbaig |http://www.freecodecamp.org/kbaig
David Belmares
@DavidBelmares
Jan 09 2018 03:57

I'm working on the Caesar's Cipher challenge on FCC. I'm really stuck... again...

function rot13(str) { // LBH QVQ VG!
  str = str.toUpperCase();

  var output = [];
  for (i = 0; i < str.length; i++){
    if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
      output.push(str.charCodeAt(i));
    } else {
      output.push(str.charAt(i));
    }

  }

  var outputString = "";
  var changedCodeTemp = 0;

  // this for loop will actually adjust the characters 13 spaces
  for (j = 0; j < output.length; j++){
    if (output[j] >= 65 && output[j] <= 90) {

      if (output[j] >= 78){
          changedCodeTemp = output[j] + 13;
          changedCodeTemp = 65 + (changedCodeTemp - 90); 
        } else {
          changedCodeTemp = output[j] + 13;
        }
      output[j] = String.fromCharCode(changedCodeTemp);
      }


  }
  return output.join("");
}

I believe the fault could be in line 23 but when I think through it, it makes sense. It's supposed to go back to the beginning of the 65-90 range and continue if it exceeds a value of 90

Kaz Baig
@kbaig
Jan 09 2018 04:01
@germangamboa95 if you just compare with num, you can do that
function findLongestWord(str) {
  return str.split(' ').reduce((a, b) => Math.max(a.length, b.length));
}
this is a better solution actually
though I think the previous one I wrote would be more efficient...
German Gamboa Gonzalez
@germangamboa95
Jan 09 2018 04:07
it makes sense. I keep forgetting about spread syntax. I like having someone review my code since it gives me new tools to use. Since I'm just starting I only have a hammer thus everything is a nail lol @kbaig
David Belmares
@DavidBelmares
Jan 09 2018 04:41
If anyone was trying to help me above, I figured it out. I was supposed to be using the modulus operator
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 09 2018 06:29
@DavidBelmares Can you explain what this part of your code should do?
    if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
      output.push(str.charCodeAt(i));
    } else {
      output.push(str.charAt(i));
    }
Soumyojyoti Majumdar
@SoumyoNawab8
Jan 09 2018 07:34
can anyone help me with CORS cross origin issue? my request is getting blocked...while the same thing working perfectly on firefox only chrome presenting that issue
kirbyedy
@kirbyedy
Jan 09 2018 08:03
we have to see your code dude, I told you on the other channel
link your codepen
Xapuu
@Xapuu
Jan 09 2018 08:06
@SoumyoNawab8 i assume that you are creating your oun front and back end am i right?
Javier Pons
@JavierPons
Jan 09 2018 08:21
any help for JS?
Xapuu
@Xapuu
Jan 09 2018 08:21
What is the problem
Markus Kiili
@Masd925
Jan 09 2018 08:22
:ear:
Javier Pons
@JavierPons
Jan 09 2018 08:24
I have this code. I need to set up event listener and pass the value to an other function
I type:
function init () { const ini = document.getElementByTagName("input").addEventListener("click", check); }
<form>
<input type="text" name="number">
<button>Submit</button>
</form>
any suggestion?
Markus Kiili
@Masd925
Jan 09 2018 08:26
@JavierPons You wan't to use inputted text inside check function?
Javier Pons
@JavierPons
Jan 09 2018 08:27
check is the next function that accept the value
Joshua Frias
@Juke-Magic
Jan 09 2018 08:28
guys
$("#result").text(myArray[i]);
this just outputs the last object in the array
how do I output everything in the array?
Markus Kiili
@Masd925
Jan 09 2018 08:30
@JavierPons Try function check(event){...use event.target.value for getting the clicked input value}
@Juke-Magic Append those elements to some variable inside the loop result += myArray[i] and then after the loop $("#result").text(result);
Vidžius
@sursider
Jan 09 2018 08:36
good morning people, maybe someone can tell me what can be - when I have my jscript inside index file, everything works good, but if it's in other file (.js) i get unexpected token ; error
Javier Pons
@JavierPons
Jan 09 2018 08:38
@sursider try to put on the top "use strict"; and lets see what happen. Or maybe you have given wrong pass. ../file. or ./file
@Masd925 do you suggest that the code inside init is wrong or lack of something?
Markus Kiili
@Masd925
Jan 09 2018 08:42
@JavierPons Not sure what you are trying to do there.
Joshua Frias
@Juke-Magic
Jan 09 2018 08:42
@Masd925 thanks man
CamperBot
@camperbot
Jan 09 2018 08:42
juke-magic sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4641 | @masd925 |http://www.freecodecamp.org/masd925
Javier Pons
@JavierPons
Jan 09 2018 08:44
@Masd925 (Im not very clever at ES5 I prefer much ES6.) But... what would you suggest to set up event listener and pass the value to an other function?
Soumyojyoti Majumdar
@SoumyoNawab8
Jan 09 2018 08:45

@Xapuu

yes,I am creating my front and back end

Xapuu
@Xapuu
Jan 09 2018 08:52
@SoumyoNawab8 https://github.com/expressjs/cors add this to your middleware
Javier Pons
@JavierPons
Jan 09 2018 08:53
any suggestion to this code? Can somebody comment? :)

'let targetNumber = Math.floor(Math.random() * 10) + 1;

function init () {
const ini =
document.getElementByTagName("input").addEventListener("click", check);
}

function check (event) {
if ( event.target.value == targetNumber) {
showWin();
} else if(event.target.value !== targetNumber){
showError();
}
else if ( (event.target.value !== targetNumber) && (ini >5) ) {
showLoss();
}'

sorry I dont remember how to put the code well ;)
Marianissimus
@Marianissimus
Jan 09 2018 08:57
@JavierPons Im not sure about the formatting; however, the last condition will never be reached // else if ( (event.target.value !== targetNumber) && (ini >5)
it needs to be first
or above the event.target.value !== targetNumber condition, at least
Javier Pons
@JavierPons
Jan 09 2018 08:58
@Marianissimus I see
Marianissimus
@Marianissimus
Jan 09 2018 08:59
because if that condition is met, the function exits there - so it will never check for the 2 conditions in the last else if
Javier Pons
@JavierPons
Jan 09 2018 09:00
@Marianissimus :+1: :fire:
@Marianissimus thanks
CamperBot
@camperbot
Jan 09 2018 09:01
javierpons sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @marianissimus |http://www.freecodecamp.org/marianissimus
Javier Pons
@JavierPons
Jan 09 2018 09:25
Again me :)
why that doesn't work well but there is not any error en console.?

let targetNumber = Math.floor(Math.random() * 10) + 1;

function init () {
const ini =
document.getElementByTagName("input").addEventListener("click", check);
}

function check (event) {
if ( (event.target.value !== targetNumber) && (ini >5) ) {
showLoss();

} else if(event.target.value !== targetNumber){
showError();
}
else if ( event.target.value == targetNumber)
{
showWin();
}

function showWin () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'You win!';
}

function showError () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'You make a mistake!';
}

function showLoss () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'Game Over!';
}

init();

is the logarithm of first function init() wrongly typed?
comments are Wellcome :worried:
Marianissimus
@Marianissimus
Jan 09 2018 09:29
how does it not work well? @JavierPons can you make a pen? it could really help
Javier Pons
@JavierPons
Jan 09 2018 09:29
sure
Marianissimus
@Marianissimus
Jan 09 2018 09:34
it's a curly bracket. it's always a curly bracket
so, first, add one after the function check }
Javier Pons
@JavierPons
Jan 09 2018 09:36
@Marianissimus yes I added but... :worried: when I type some number doesn't does anythig
Marianissimus
@Marianissimus
Jan 09 2018 09:36
then try to correct every other error
Javier Pons
@JavierPons
Jan 09 2018 09:36
:+1:
Marianissimus
@Marianissimus
Jan 09 2018 09:38
try to get rid of the get element by tag name selector (the spelling was wrong, too)
use getElementById, plus, as you try to get a value, a value
document.getElementById('id_name').value
Vidžius
@sursider
Jan 09 2018 09:42
@JavierPons use strict worked, thanks!
CamperBot
@camperbot
Jan 09 2018 09:42
sursider sends brownie points to @javierpons :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @javierpons |http://www.freecodecamp.org/javierpons
Javier Pons
@JavierPons
Jan 09 2018 09:47
@Marianissimus no yet :worried:
the problem, I think, is that the code doesn't get the input (the number)
Javier Pons
@JavierPons
Jan 09 2018 09:52
Im going to delete addEventListener and add .value
Marianissimus
@Marianissimus
Jan 09 2018 09:53
yes, you need to say: hey, when the form is submitted, get the value of the input and store it in a variable, say userinput
then do your comparisons
alpox
@alpox
Jan 09 2018 09:55
@JavierPons 1. : <input type="text" name="number" id"input">---> <input type="text" name="number" id="input"> (you missed the = in the attribute. The input could not be found in the javascript because of this. 2.: When you put a button in a form, the submission will reload the page and thus stop your javascript execution (And remove all results from before) You can prevent this by either removing the form from the html or adding event.preventDefault() into the check function
@JavierPons And 3. you try to access ini inside of the function check but ini is not defined in that context - because it was defined locally only in the function init
Also, the variable ini is undefined even there, because you assign the return value of addEventListener to it - which is undefined (It has no return value)
If you want a global variable which refers to the input, you can at the beginning of your js add:
const input = document.getElementById("input");
And later refer to its value by: input.value
Javier Pons
@JavierPons
Jan 09 2018 09:59
@alpox :+1:
alpox
@alpox
Jan 09 2018 10:00
document.getElementByTag does not exist btw. Its document.getElementByTagName
Javier Pons
@JavierPons
Jan 09 2018 10:11
@alpox I dont have clear where to add event.preventDefault()
inside check function
:worried:
Javier Pons
@JavierPons
Jan 09 2018 10:16
1 of the problems is in ini. Im going to try to solve
Aditya
@ezioda004
Jan 09 2018 10:40
@JavierPons What's this line suppose to do? elem.parentNode.removeChild("dele");
FYI input.value.addEventListener is just wrong, you want event listener on submit
gayathrisara
@gayathrisara
Jan 09 2018 11:39
can I develop my project in glitch and mention that url for getting fcc front end developer certificate
Ivan Ngundela
@ingundela
Jan 09 2018 11:46
Hi everyone…. may you please help with my portfolio website.. I’m not happy with the way my hero image is loading https://ingundela.com/
there is a grey color before the images load, how can I fix this.. I’m tryed so many thing to optimize the hero image but still the grey color comes first for a few seconds before the image loads.. Thank in advance
Markus Kiili
@Masd925
Jan 09 2018 11:58
@ingundela You can try preloading the images in memory before the dom is created. Not sure if it helps but you can try it.
Ivan Ngundela
@ingundela
Jan 09 2018 12:00
@Masd925 How to I go about preloading the image in memory mate?
Sweet Coding :)
@SweetCodingInc
Jan 09 2018 12:00
@ingundela are you using any ui side framework?
Markus Kiili
@Masd925
Jan 09 2018 12:04
@ingundela A script like this on the head section (outside any load event callback) should cache the images before the dom is processed:
Ivan Ngundela
@ingundela
Jan 09 2018 12:04
@SweetCodingInc no
Markus Kiili
@Masd925
Jan 09 2018 12:04
var images = [];
var sources = ["pic1.jpg","pic2.jpg"];
sources.forEach(function(source){
    var img = new Image();
    img.src = source;
    images.push(img);
});
Ivan Ngundela
@ingundela
Jan 09 2018 12:05
@Masd925 Thanks let me add it to my js file
CamperBot
@camperbot
Jan 09 2018 12:05
ingundela sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4642 | @masd925 |http://www.freecodecamp.org/masd925
Ivan Ngundela
@ingundela
Jan 09 2018 12:09
@Masd925 but should I add it to my index.html or js file?
Markus Kiili
@Masd925
Jan 09 2018 12:16
@ingundela If the js file link is on the head section, you can put that at the start of the js file outside any load or ready callback
Ivan Ngundela
@ingundela
Jan 09 2018 12:16
@Masd925 yes… OK
Daniel Narilton
@spaganger
Jan 09 2018 12:19
why does this always happen whenever I use boostrap 3 for making columns of different heights: https://codepen.io/anon/pen/zpRNLg
Markus Kiili
@Masd925
Jan 09 2018 12:22
@Vigariuoluvi You could make a row with two columns and then another row with two columns etc.
Ivan Ngundela
@ingundela
Jan 09 2018 12:24
@Masd925 it’s not quite solving it.. have upload the source code to my Github page https://ingundela.github.io/myportfolio/ .. are you able to help from here? there is this grey color appearing for a few second on a first page load
Markus Kiili
@Masd925
Jan 09 2018 12:26
@ingundela The script is not on the head section, but on the end of body.
So adding it doesn't do anything. It might affect something on the head.
primuscovenant
@primuscovenant
Jan 09 2018 12:31
@heroiczero thx
CamperBot
@camperbot
Jan 09 2018 12:31
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2131 | @heroiczero |http://www.freecodecamp.org/heroiczero
Ivan Ngundela
@ingundela
Jan 09 2018 12:34
@Masd925 added it to the end of body
1rjun
@1rjun
Jan 09 2018 12:35
https://codepen.io/1rjun/pen/rpwrdw?editors=1111 my css properties are not applying to my body tag
dhuber666
@dhuber666
Jan 09 2018 12:36

Hi guys, I'm going through the ES6 beta curriculum and can't continue because I can't solve "Destructing Assignment".
Here is the example:

function getLength(str) {
  "use strict";

  // change code below this line
  const length = 0; // change this
  // change code above this line

  return len; // you must assign length to len in line

}

I don't even know where to begin

Markus Kiili
@Masd925
Jan 09 2018 12:36
@ingundela As I said earlier, the script I posted needs to on the head section, not at the end of body.
dhuber666
@dhuber666
Jan 09 2018 12:38

This is what I should do:

Use destructuring to obtain the length of the input string str, and assign the length to len in line.

1rjun
@1rjun
Jan 09 2018 12:39
can anyone please tell my when i change the background using javascript dom manipulation then why isnt my css not applying to that tag?
like i did in body background where i change the background url using javascript queryselector but in css its background-repeat propety is not working?? why so
@Masd925 help
Ivan Ngundela
@ingundela
Jan 09 2018 12:42
@Masd925 but it should look like this right ‘''<script>
var images = [];
var sources = ["b1.jpg","parallex.jpg"];
sources.forEach(function(source){
var img = new Image();
img.src = source;
images.push(img);
});
</script>’’'
sehban
@sehban
Jan 09 2018 12:43
Hey, need help.
Markus Kiili
@Masd925
Jan 09 2018 12:43
@ingundela Yes, try putting that script element inside head element.
Ivan Ngundela
@ingundela
Jan 09 2018 12:43
@Masd925 changed the omg names to the ones I have ...
sehban
@sehban
Jan 09 2018 12:44
My page gets scrolled even after the content gets over
I don't require Width Scrolling bar
I even tried max-width:100%; but it didn't work
Ivan Ngundela
@ingundela
Jan 09 2018 12:45
@Masd925 OK.. done it…. but see much of a change when loading….
@Masd925 are you able to try it from your end?
sehban
@sehban
Jan 09 2018 12:46
@ingundela Need help
Ivan Ngundela
@ingundela
Jan 09 2018 12:46
@Masd925 maybe I’m doing something wrong..
@sehban yes… @ingundela
Hi everyone…. may you please help with my portfolio website.. I’m not happy with the way my hero image is loading https://ingundela.com/
there is a grey color before the images load, how can I fix this.. I’m tryed so many thing to optimize the hero image but still the grey color comes first for a few seconds before the image loads.. Thank in advance
CamperBot
@camperbot
Jan 09 2018 12:48
ingundela sends brownie points to @sehban :sparkles: :thumbsup: :sparkles:
:cookie: 55 | @sehban |http://www.freecodecamp.org/sehban
sehban
@sehban
Jan 09 2018 12:50
@camperbot Will you pls help me out?
Markus Kiili
@Masd925
Jan 09 2018 12:51
@ingundela If you look at some commercial websites with pictures, there is always some loading time before the picture is rendered.
alpox
@alpox
Jan 09 2018 13:02
@JavierPons Doesn't matter where you put the event.preventDefault() except it has to be in the outermost block of the function - not in an if or so. I'd put it in the beginning of the function or the end
Ivan Ngundela
@ingundela
Jan 09 2018 13:38
@Masd925 OK..
Kaz Baig
@kbaig
Jan 09 2018 15:31
@dhuber666 they want you to assign the constant length the length property of str
To use destructuring to assign a constant with a property:
const obj = { fname: 'Kaz',  lname: 'Baig' };
const { fname, lname } = obj;
console.log(fname + ' ' + lname); // 'Kaz Baig'
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:50
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var count=0;
            $('#commentForm').submit(function(event) {
                count++;
                $('#countContainer').append('Total comments:'+ count);
                $('#commentsContainer').append('<div style="background-color:green">'+$(newCommentText).val()+'</div>');
            });
        });
    </script>
    <style type="text/css">
    #newCommentContainer {
        /border-color: black;
        border-style: solid;
        border-width: 1px;
        margin: 4% 24% 1% 24%;
        padding: 1% 1% 1% 1%;
    }

    #commentsContainer {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        margin: 0% 24% 1% 24%;
        padding: 0% 1% 1% 1%;

    }

    #countContainer {
        text-align: left;
    }

    #newCommentAuthor {
        margin-bottom: 5px;
    }
    </style>
    <title></title>
</head>
<body>
    <div class="commentWidgetContainer">
        <div id="newCommentContainer">
            <form id="commentForm">
                  <input id="newCommentAuthor" type="text" name="name" placeholder="Name" autofocus><br>
                  <textarea id="newCommentText" rows="4" cols="50" name="comment-box" placeholder="Enter your comment here"></textarea><br>
                  <input type="submit" value="Submit">
            </form>
        </div>
        <div id="commentsContainer">
            <div id="countContainer"></div>
        </div>
    </div>
</body>
</html>
Hello can someone please tell why the html generated by append function does not stay. I mean it run properly but the generated html blinks when the code is run
Tom
@moT01
Jan 09 2018 15:54
what exactly blinks? does the stuff get appended and show on the page?
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:54
Yes it gets appended but it does not stay
Tom
@moT01
Jan 09 2018 15:55
so it disappears?
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:55
yes
Tom
@moT01
Jan 09 2018 15:55
when
Matej Bošnjak
@mbosnjak01
Jan 09 2018 15:55
I guess you mean it dissapears when you refresh your page
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:56
no it disappears right after like 1 second
please run the code
Tom
@moT01
Jan 09 2018 15:57
do you have a working example
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:58
that is the one i made
Tom
@moT01
Jan 09 2018 15:59
but we cant run that without rebuilding your project
Zulfan Hameed
@zlfnhmd
Jan 09 2018 15:59
the idea is to add the contents of the textarea to the newly appended div
its just .html file
Tom
@moT01
Jan 09 2018 16:00
perhaps this would get it working
   $("#formid").submit(function (e) {
e.preventDefault();
Zulfan Hameed
@zlfnhmd
Jan 09 2018 16:01
it's on submission of a form. By default, when you submit a form, your page reloads. To prevent this, add this as the first line in the callback passed to the submit method you're calling
event.preventDefault();
got this from the other chat
Aftab Parvez
@aftabparvez
Jan 09 2018 16:02
Hi everyone! Is anyone familiar with browser-sync?
Zulfan Hameed
@zlfnhmd
Jan 09 2018 16:02
@moT01 @mbosnjak01 thanks
CamperBot
@camperbot
Jan 09 2018 16:02
:cookie: 949 | @mot01 |http://www.freecodecamp.org/mot01
zlfnhmd sends brownie points to @mot01 and @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 216 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Aftab Parvez
@aftabparvez
Jan 09 2018 16:02
I’m having a few issues trying to watch a folder.. would appreiciate any help!!!
Tom
@moT01
Jan 09 2018 16:04
what exactly is the problem
im not very familiar but if you explain your problem better someone might have a suggestion
Aftab Parvez
@aftabparvez
Jan 09 2018 16:05
Sure - I’m trying to watch a folder, the server starts perfectly fine, however, it isn’t tracking any changes made to the files in the folder
Screen Shot 2018-01-09 at 9.34.17 PM.png
Kaz Baig
@kbaig
Jan 09 2018 16:06
@aftabparvez Are the html files in a subdirectory or in the root folder
Aftab Parvez
@aftabparvez
Jan 09 2018 16:07
It’s in the folder I’m currently in
Screen Shot 2018-01-09 at 9.37.09 PM.png
Tom
@moT01
Jan 09 2018 16:09
i assume you can set what to watch - perhaps if you added a star ./* - to like watch all the files maybe
Kaz Baig
@kbaig
Jan 09 2018 16:09
@aftabparvez https://browsersync.io/docs/command-line based on this, looks like the files flag is to specify a directory, not files
Tom
@moT01
Jan 09 2018 16:09
not sure how it works
Kaz Baig
@kbaig
Jan 09 2018 16:09
What if you just got rid of that flag
or seems you could also do --files="*.html"
@aftabparvez
Aftab Parvez
@aftabparvez
Jan 09 2018 16:13
@kbaig Unfortunately “—files=“*.html” is also not working
Screen Shot 2018-01-09 at 9.43.00 PM.png
Kaz Baig
@kbaig
Jan 09 2018 16:14
And if you just get rid of the flag altogether?
Aftab Parvez
@aftabparvez
Jan 09 2018 16:15
Screen Shot 2018-01-09 at 9.44.46 PM.png
Nothing even if I remove the flag
Kaz Baig
@kbaig
Jan 09 2018 16:19
Hmm not sure
I would have thought the original attempt works
Aftab Parvez
@aftabparvez
Jan 09 2018 16:25
Yeah.. I’m not sure what I’m doing wrong.. I’ve uninstalled and reinstalled browser-sync, restarted the system, used different text editors, used/removed —directory, —files and everything under the sun to see if this was going to start working. I’m giving up on this for today… Already spent over an hour trying to figure this thing out…
Thank you so much for your time though!!! Really appreciate it :-)
Thanks @kbaig @moT01
CamperBot
@camperbot
Jan 09 2018 16:26
aftabparvez sends brownie points to @kbaig and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 950 | @mot01 |http://www.freecodecamp.org/mot01
Aftab Parvez
@aftabparvez
Jan 09 2018 16:27
@moT01 I did try watching all the files with “”, “.” and “.html, .css, .js"
Nothing seems to be working :-(
1rjun
@1rjun
Jan 09 2018 16:51
Kaz Baig
@kbaig
Jan 09 2018 16:52
@1rjun gonna have to be more specific than that bud
1rjun
@1rjun
Jan 09 2018 16:53
actually previously it was working properly but now i dont know why it isnt changing the dom
and showing the temprature
could anyone please help my to identify the error
i tried so hard
to identify ,now need anyone help
Kaz Baig
@kbaig
Jan 09 2018 16:54
It's showing the temperature for me
1rjun
@1rjun
Jan 09 2018 16:55
what
then why dont for me?
previously it was working properly now what happened
Stephen James
@sjames1958gm
Jan 09 2018 16:56
I am seeing the temperature (hard to see with those colors)
Are you seeing any errors in the devtools console (not the codepen console)
1rjun
@1rjun
Jan 09 2018 16:57
but i am not able to see
why so
1rjun
@1rjun
Jan 09 2018 17:03
:(
Sorin Ruse
@sorinr
Jan 09 2018 17:07
@1rjun have u disabled in your browser, or do u have something that is blocking your location? coz for me the pen its working
@sjames1958gm he will not get any errors in the console if he doesn't have a fallback else clause for if (navigator.geolocation){.......
Stephen James
@sjames1958gm
Jan 09 2018 17:13
@sorinr If he is using the same browser then that if should not change - that is only testing the existence of the function not whether the location is blocked or not
David Belmares
@DavidBelmares
Jan 09 2018 17:13
@Otto-AA in response to the following message: that code is supposed to convert the current letter to unicode if it is an uppercase A-Z, otherwise push the actual character to the array. later on if it was an uppercase A-Z the program will change it accordingly
image.png
Sorin Ruse
@sorinr
Jan 09 2018 17:17
@sjames1958gm yes but if the browser asks you if you allow to disclose your location(and u block it by browser), the further code will not work otherwise in an else clause you call somekind of ip location api
texirv0203
@texirv0203
Jan 09 2018 17:18
hi,
  • using the below example, I am trying to implement appDyanmics in my code.
    https://github.com/derrekyoung/appd-sampleapp-angular2
  • but for some reason its not going inside constructor code constructor(public appRoutes:Router) {
  • I kept debugger and saw in the if statement still it didnt go inside.
  • can you tell me how to fix it.
  • providing my code below
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { Base } from './components/base/base';

import { LoadingsWithOverlaps } from './components/Loading/Loadings-with-overlaps';
import { AiringFOXInfoPopup } from './components/Loading/airing-FOXinfo-popup';

import { Listings } from './components/listings/listings';

import { ScoringsMain } from './components/Scorings/ScoringsMain';
import { ScoringFOXTBA } from './components/Scorings/ScoringFOXTBA';
e';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'jumping',
        pathMatch: 'full'
    },

    {
        path: 'FlyingManagement',
        component: FlyingsHeader,
        children: [
            { path: '', redirectTo: 'FlyingSearch', pathMatch: 'full' },
            { path: 'FlyingSearch', component: FlyingSearch },
            {
                path: 'FlyingMain/:id', component: FlyingMain,
                children: [
                    { path: '', redirectTo: 'Base', component: FlyingCreateFill, pathMatch: 'full' },
                    { path: 'FlyingCreateFill', component: FlyingCreateFill, canDeactivate: [CanDeactivateGuard] },

                ]

            }
        ]

    },
    {
        path: 'Playing',
        component: Development

    },


];


export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
//export class AppRoutingModule { }
declare var ADRUM: any;


@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: []
})

export class AppRoutingModule {

   vpView: any;

//   // Subscribe to the Router URL changes.
  constructor(public appRoutes:Router) {
      console.log("appDyanmics-sample-constructor");
      this.appRoutes.events.subscribe((event:Event) => {
              if (event instanceof NavigationEnd) {
                console.debug('NavigationEnd: '+event.url);

                this.vpView.markViewChangeEnd();
                this.vpView.markViewDOMLoaded();
                this.vpView.markXhrRequestsCompleted();
                this.vpView.markViewResourcesLoaded();
                this.vpView.end();
                ADRUM.Scoring(this.vpView);

              } else if (event instanceof NavigationStart) {
                console.debug('NavigationStart: '+event.url);

                this.vpView = new ADRUM.events.VPageView();
                this.vpView.start();
                this.vpView.markViewChangeStart();
              }
          });
  }
}
Sorin Ruse
@sorinr
Jan 09 2018 17:19
@sjames1958gm if you passthe same browser from normal to icognito the app will not work anymore
@sjames1958gm will not work for the user on icognito
Stephen James
@sjames1958gm
Jan 09 2018 17:24
@sorinr True, but that doesn't change if (navigator.geolocation){....... from being true
Sorin Ruse
@sorinr
Jan 09 2018 17:26
@sjames1958gm so u say that navigator.geolocation always evaluate to true?
Stephen James
@sjames1958gm
Jan 09 2018 17:27
@sorinr Well - not false - as it is testing the existence of the function, not whether the function will work onr not.
Sorin Ruse
@sorinr
Jan 09 2018 17:29
@sjames1958gm not false = true
Stephen James
@sjames1958gm
Jan 09 2018 17:29
@sorinr Yeah, you did say evaluate to true
Sorin Ruse
@sorinr
Jan 09 2018 17:33
@sjames1958gm lol
@sjames1958gm i would use. anyway, an alternative else clause for in case navigator.geolocation evaluates to false
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 09 2018 17:46
Why we can not make a style for the options inside the select element ?
Kaz Baig
@kbaig
Jan 09 2018 17:48
@ahmed-issa-mohd I believe they're native to the browsers, just like the scrollbars
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 09 2018 17:51
how we can make this , do you know ?
Kaz Baig
@kbaig
Jan 09 2018 17:53
Make what
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 09 2018 17:54
make style for the option
As if you want to define the border
Kaz Baig
@kbaig
Jan 09 2018 17:56
You said it yourself
You can't
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 09 2018 18:00
no
thanks
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 09 2018 18:20
@ahmed-issa-mohd I don't know how up-to-date this article is, but yeah... could be interesting anyway
https://css-tricks.com/dropdown-default-styling
But I would not recommend it in general
eliecerthoms
@eliecerthoms
Jan 09 2018 19:13
@kbaig you're a lifesaver. thanks!
CamperBot
@camperbot
Jan 09 2018 19:13
eliecerthoms sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 09 2018 19:14
@eliecerthoms what did I do again haha
eliecerthoms
@eliecerthoms
Jan 09 2018 19:15
I didn't have the slightest idea Portals existed in React
Kaz Baig
@kbaig
Jan 09 2018 19:15
Ah yes someone had a question about it some time ago but until then, I didn't either :)
It's a newer feature
Just so you know, they follow the component hierarchy on the virtual DOM, but not necessarily the same hierarchy on the actual DOM
eliecerthoms
@eliecerthoms
Jan 09 2018 19:19
so they would inevitably re-render on route change too, right?
or would that be avoidable?
Kaz Baig
@kbaig
Jan 09 2018 19:24
Not necessarily
neovks
@neovks
Jan 09 2018 19:34
Hey, I just finished the tribute page project, how can I check if there are any errors and if it's gonna pass ?
Ariel Loza M
@ArielLoza
Jan 09 2018 19:35
where?
Zulfan Hameed
@zlfnhmd
Jan 09 2018 19:37
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var count=0;
            $('#commentForm').submit(function(event) {
                event.preventDefault();
                count++;
                $('#countContainer p').append(count);
                $('#commentsContainer').append('<div id="comment'+count+'" style="background-color: #f1f1f1; padding: 5px 5px 5px 5px; margin-bottom: 5px; border-color: grey;border-style: solid;border-width: 1px; overflow: auto;"><div>'+$(newCommentAuthor).val()+' commented:</div><div>'+$(newCommentText).val()+'</div><hr><p class="replyArea"></p><textarea class="replyText" rows="4" cols="50" name="reply-box" placeholder="Enter your reply here"></textarea><br><button class="replyButton">Reply</button></div>');
                $('.replyButton').click(function(event) {
                    $(this).siblings('.replyArea').prepend($(this).siblings('.replyText').val()+'<br>');
                });
            });

        });
    </script>
    <style type="text/css">
    #newCommentContainer {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        margin: 4% 24% 1% 24%;
        padding: 1% 1% 1% 1%;
    }

    #commentsContainer {
        border-color: black;border-style: solid;border-width: 1px;
        margin: 0% 24% 1% 24%;
        padding: 0% 1% 1% 1%;

    }

    #countContainer {
        text-align: left;
    }

    #newCommentAuthor {
        margin-bottom: 5px;
    }
    </style>
    <title></title>
</head>
<body>
    <div class="commentWidgetContainer">
        <div id="newCommentContainer">
            <form id="commentForm">
                  <input id="newCommentAuthor" type="text" name="name" placeholder="Name" autofocus><br>
                  <textarea id="newCommentText" rows="4" cols="50" name="comment-box" placeholder="Enter your comment here"></textarea><br>
                  <input type="submit" value="Submit">
            </form>
        </div>
        <div id="commentsContainer">
            <div id="countContainer"><p>Total comments: </p></div>
        </div>
    </div>
</body>
</html>

Guys so there is bug which causes extra replies in the previous comment when new comments are added. the replies get multiplied from top to bottom.
So when i make the first comment and make replies to it, it works perfectly.
When I make the second comment, the replies in second comment work perfectly but when i reply to the first comment the reply is added twice and son on

Please help me out

Eric Weiss
@eweiss17
Jan 09 2018 19:38
@neovks if it's a tribute page.... you passed
neovks
@neovks
Jan 09 2018 19:39
oh.... ok then thanks
Eric Weiss
@eweiss17
Jan 09 2018 19:39
I don't believe they actually review your projects until you hit the front end certification
neovks
@neovks
Jan 09 2018 19:40
@eweiss17 thanks
CamperBot
@camperbot
Jan 09 2018 19:40
neovks sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 601 | @eweiss17 |http://www.freecodecamp.org/eweiss17
Kaz Baig
@kbaig
Jan 09 2018 19:40
@zlfnhmd would be a lot easier to help if we had a live version to play with
Zulfan Hameed
@zlfnhmd
Jan 09 2018 19:41
@kbaig is there any way i can get it live?
Kaz Baig
@kbaig
Jan 09 2018 19:41
codepen
Eric Weiss
@eweiss17
Jan 09 2018 19:42
You should put your script after your html
or under the body anyway
@eweiss17 will do
Kaz Baig
@kbaig
Jan 09 2018 19:46
@eweiss17 they don't review till you get to the nonprofit projects
Zulfan Hameed
@zlfnhmd
Jan 09 2018 19:57

https://codepen.io/zlfnhmd/pen/BJYPwZ
Guys so there is bug which causes extra replies in the previous comment when new comments are added. the replies get multiplied from top to bottom.
So when i make the first comment and make replies to it, it works perfectly.
When I make the second comment, the replies in second comment work perfectly but when i reply to the first comment the reply is added twice and son on

Please help me out

Eric Weiss
@eweiss17
Jan 09 2018 19:59
People on here are more helpful on projects based off of freecodecamp.... as this room is intended for that.
Zulfan Hameed
@zlfnhmd
Jan 09 2018 20:01
I'm sorry I didnt know that. But i'd be grateful if someone helped me out
Kaz Baig
@kbaig
Jan 09 2018 20:05
@zlfnhmd I haven't been able to figure out the solution yet but I know your click handler for the reply is firing multiple times in that situation
@zlfnhmd I think each time you add a reply, you're adding the listener to each reply button
Zulfan Hameed
@zlfnhmd
Jan 09 2018 20:08
@kbaig Yes i think its because when n number comment is created there will be n siblings with the specified class. I can't figure out a way to fire the event only once
Kaz Baig
@kbaig
Jan 09 2018 20:08
So there's 2 click listeners on the first reply when there are 2 comments
Zulfan Hameed
@zlfnhmd
Jan 09 2018 20:09

@zlfnhmd I think each time you add a reply, you're adding the listener to each reply button

Do you mean each time I add a comment?

Kaz Baig
@kbaig
Jan 09 2018 20:10
@zlfnhmd each time you add a comment yeah
quick fix is adding the following line to your comment submit listener before appending the comment: $(".replyButton").unbind('click');
Zulfan Hameed
@zlfnhmd
Jan 09 2018 20:11
let me try that
@kbaig That was intense. Thanks again mate
CamperBot
@camperbot
Jan 09 2018 20:12
zlfnhmd sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 09 2018 20:13
You're welcome
Zulfan Hameed
@zlfnhmd
Jan 09 2018 20:15
This is for a job interview
Jacob Stewart
@JacobStewart1
Jan 09 2018 20:43
hello does anybody have much knowledge on CMS stuff?
Harut
@harut-g
Jan 09 2018 20:47
@JacobStewart1 I'm familiar with WordPress
Brian
@BrianCodes33
Jan 09 2018 20:50
can y’all give me some design input
Jacob Stewart
@JacobStewart1
Jan 09 2018 20:52
@harut-g Im working for a client that already has a hosting service and I was wondering if its posible to make a website with wordpress then take the files and put it with there hosting service
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 09 2018 20:53
@BrianCodes33 Maybe some hover effect for the new quote button (e.g. darken background color, maybe use transition for that)? Also I'd make the quote container smaller in width
Kaz Baig
@kbaig
Jan 09 2018 20:53
@JacobStewart1 as in you want to still use wordpress on the client's host? It's possible to migrate
Jacob Stewart
@JacobStewart1
Jan 09 2018 20:54
@kbaig how would I do that?
Kaz Baig
@kbaig
Jan 09 2018 20:55
Just look up wordpress deployment
Jacob Stewart
@JacobStewart1
Jan 09 2018 20:56
@kbaig ok thanks also can that be done with other cms's or just wordpress?
CamperBot
@camperbot
Jan 09 2018 20:56
jacobstewart1 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 09 2018 20:56
I'm sure other CMSs have ways to develop locally and deploy
Jacob Stewart
@JacobStewart1
Jan 09 2018 20:56
@kbaig ok thanks again
CamperBot
@camperbot
Jan 09 2018 20:56
jacobstewart1 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Gilbert
@GilTorch
Jan 09 2018 23:46
Guys do u know website that hire junior developers to develop small projects but that pays? :smile: