These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Sep 2017
Tom
@moT01
Sep 22 2017 01:49
@Feldbot i tackled that one by counting down, starting at the number givin
using a bunch of `if`'s or maybe a switch
`if (num > 1000) { answer += "M" num -= 1000 }`
Daniel Feldman
@Feldbot
Sep 22 2017 02:07
@moT01 Thanks Tom, not sure I get that. I'll keep it in mind though
CamperBot
@camperbot
Sep 22 2017 02:07
feldbot sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 859 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Sep 22 2017 02:09
so if i recall you get a number, right?
make a loop with that statement in it
or something close to it
that statement, and some other statements
if (num > 100) { answer += "D" num -= 100 }
is D 100?
piteto
@piteto
Sep 22 2017 02:13
C is 100, D is 500
one approach is to have a "map" of what all the values equal - loop through the map from largest to smallest
Markus Kiili
@Masd925
Sep 22 2017 05:12
@Feldbot It is also a good idea to put the letters and numbers on arrays, so you don't spread them around the code. That way you can also avoid the if jungle.
Ebinezar Dhanaraj
@Ebiislearning
Sep 22 2017 10:15
I am trying to inject a button when a particular webpage loads using Tamper Monkey. I get the value of the button from the page. The code that I wrote inserts the button even before the page loads fully, so the label is empty. How do I set a time delay and get the value and then insert the button.
``````//Getting data from the page
jQuery(document).ready(function (){
\$(window).load(function() {
var inferB = jQuery("label:contains('Infer Bucket')").next().text().trim();

// Creating the inset
var input=document.createElement("input");
input.type="button";
input.value=inferB;

// Setting the CSS attributes
input.setAttribute("style", "color:#fff;font-size:13px;font-weight:400;border-radius:3px;background-color:#ffa800;border-color:transparent;position:absolute;top:70px;right:135px;z-index:800;touch-action:manipulation;");
document.body.appendChild(input);
\$(input).hover(function(){
\$(this).css("box-shadow", "0 1.5px 1.5px rgba(0,0,0,.1)");
}, function(){
\$(this).css("box-shadow", "0 0px 0px rgba(0,0,0,.0)");
});
});
});``````
Markus Kiili
@Masd925
Sep 22 2017 10:22
@Ebiislearning Having both document ready and window load there seems redundant. Just using the window load part would do the same.
Ebinezar Dhanaraj
@Ebiislearning
Sep 22 2017 10:23
I get it. I did try with both of them alone. Still not working :(
rscales02
@rscales02
Sep 22 2017 11:19
@Ebiislearning try `setTimeout(function(){ alert("Hello"); }, 3000);` ? https://www.w3schools.com/jsref/met_win_settimeout.asp
Ebinezar Dhanaraj
@Ebiislearning
Sep 22 2017 11:37
@rscales02 Hi. Thanks I did try that, it is still inserting the button before the data is loaded.
CamperBot
@camperbot
Sep 22 2017 11:37
ebiislearning sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @rscales02 |http://www.freecodecamp.com/rscales02
rscales02
@rscales02
Sep 22 2017 11:40
Did you try putting the whole button code in the timeout function? Just a complete guess on my part though...
Ebinezar Dhanaraj
@Ebiislearning
Sep 22 2017 11:43
@rscales02 Actually my bad. I had been calling the wrong function from the settimeout. Thanks :)
CamperBot
@camperbot
Sep 22 2017 11:43
ebiislearning sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
api offline
rscales02
@rscales02
Sep 22 2017 11:43
No problem! Glad it helped!
Eric Von Stephan
@EricVon
Sep 22 2017 12:05
can any see why menu anf the backgroung pic are not working on my project https://codepen.io/ericvstephan/pen/aLNVKY so i am new at this
korzo
@korzo
Sep 22 2017 12:07
@EricVon you have space between url and (
line 9 in css box
rscales02
@rscales02
Sep 22 2017 12:11
@EricVon ibb.co has been blocked by Malwarebytes for spreading ransomware, just FYI
Eric Von Stephan
@EricVon
Sep 22 2017 12:12
oh time tomfind a new sitw
Eric Von Stephan
@EricVon
Sep 22 2017 12:19
ok inchange the site nownit wpnt load again good do imhate code pen some times
Hills
@Hillsie
Sep 22 2017 12:20
Hi Guys, I wonder if someone could explain why you would use a css rule reset.
@Masd925 Markus, I’ve been tackling react and I love it! It does the dom manipulation for you and the coding style is to discourage dom manipluation leaving it up to react.
Markus Kiili
@Masd925
Sep 22 2017 12:24
@Hillsie By default, there are some differences on how different browsers show a web page. A css reset makes those differences smaller.
Hills
@Hillsie
Sep 22 2017 12:26
Thanks @Masd925 I have been finding that css in react requires me to know it a bit better, so I have picked up the css study material again.
CamperBot
@camperbot
Sep 22 2017 12:26
hillsie sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4496 | @masd925 |http://www.freecodecamp.com/masd925
Hills
@Hillsie
Sep 22 2017 12:28
One little problem I have got is putting a colour overlay on an image. Finally landed up with .-filter{}, but I don’t know how to change an image overlay colour. I don’t want to include the image in css, I want to have the image tag and manipulate the image with css. Any pointers welcome. I’ll post some code in a bit.
Hills
@Hillsie
Sep 22 2017 12:34
``````/* Partial code ... */
<img id='try' src="../assets/myimg.png"> </img>
/*then the css is as follows*/
#try{
filter: grayscale(0.5) blur(10px) hue-rotate(180deg);/* the other stuff works here,
but how to a get a colour over lay like a strong blue */
color: rgba(168, 28, 28, 0.85); /* # this has no impact*/
background-color: rgba(168, 28, 28, 0.85); /* # this has no impact*/
opacity:0.8;
z-index:-1;
}``````
korzo
@korzo
Sep 22 2017 12:38
@Hillsie wrap image in div and use either :after or another element as overlay
Hills
@Hillsie
Sep 22 2017 12:39
@korzo with a background-color ?
korzo
@korzo
Sep 22 2017 12:39
@Hillsie yes
Hills
@Hillsie
Sep 22 2017 12:40
let me try thanks @korzo
CamperBot
@camperbot
Sep 22 2017 12:40
hillsie sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Sep 22 2017 12:42
Hills
@Hillsie
Sep 22 2017 12:44
@korzo I’ve tried the div with an `id` and `background-colour: rgba(168, 28, 28, 0.85);` still not working. I’m not sure if it’s a react thing or a css thing. Somthing is overriding it. Let me take a look at your code.
Your’s works great
Let me try translate that over to what I am doing.
Hills
@Hillsie
Sep 22 2017 12:57
Wohoo!! Thanks @korzo , been trying that for a bit now. Such a simple thing right, but been pulling some of my hair out.
CamperBot
@camperbot
Sep 22 2017 12:57
hillsie sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
Hills
@Hillsie
Sep 22 2017 12:58
It was really a good thing, because I realised I have to swot some more css.
Hills
@Hillsie
Sep 22 2017 13:03
Where does SASS, Less and Styl fit into the css process?
I guess the questions leads into , how do I master CSS and what new stuff is out there to do CSS?
korzo
@korzo
Sep 22 2017 13:26
@Hillsie Into the build process
Lone programmer?
@MateoCzyzewski
Sep 22 2017 13:43
Is there anyone fsmilira
Sorry, it is not supposed to be here.
ehutchllew
@ehutchllew
Sep 22 2017 13:52
@Hillsie Look into SASS and flexbox or grid layout
Daniel Feldman
@Feldbot
Sep 22 2017 13:54
@moT01 @piteto @Masd925 Thanks for the suggestions, very helpful. I still am trying to think through this... I do have two arrays, one with the Roman numerals as strings, the other with their "decimal" equivalents ("I" is 1, "X" is 10, "C" is 100), but still not sure how to map the values to each other. Does the conversion to numbers happen at the end or along the way? Is the idea that the loop targets the range that the given number fits in and then applies rules applicable to that range? For example, if the number is 4 the loop stops on an if statement that targets values 1 through 5, then applies the rules for that range (if value is smaller/larger than previous index add or subtract), or does it just decrement until it hits the number? Why should the loop run from largest to smallest? Lots of questions, yikes!
CamperBot
@camperbot
Sep 22 2017 13:54
feldbot sends brownie points to @mot01 and @piteto and @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4497 | @masd925 |http://www.freecodecamp.com/masd925
:cookie: 860 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 139 | @piteto |http://www.freecodecamp.com/piteto
Hills
@Hillsie
Sep 22 2017 13:56
thanks @ehutchllew will do.
CamperBot
@camperbot
Sep 22 2017 13:56
hillsie sends brownie points to @ehutchllew :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @ehutchllew |http://www.freecodecamp.com/ehutchllew
ehutchllew
@ehutchllew
Sep 22 2017 14:01
@Hillsie sorry didn't answer the first part of your 2nd question. CSS usually just takes a lot of practice, but some good resources are css-tricks.com and I also love the YouTube channel DevTips, he's a genius.
Hills
@Hillsie
Sep 22 2017 14:02
:+1:
Mohamed Mohamed Said
@MohamedMohamedSaid
Sep 22 2017 14:07
Anybody here can help me with HTML, CSS and JavaScript tests? its 30 questions each...??
Daniel Feldman
@Feldbot
Sep 22 2017 14:19
@ehutchllew Thanks for the tip on DevTips, just checked out a video, that looks great! I'm a designer making the transition into development, so this is an inspirational person for me to learn from.
CamperBot
@camperbot
Sep 22 2017 14:19
feldbot sends brownie points to @ehutchllew :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @ehutchllew |http://www.freecodecamp.com/ehutchllew
Marko Rajkovic
@marko88ks
Sep 22 2017 14:23
does anybody now how to animate scroll-down-page with "mouse wheel" , from top of the page to first section down?? like in this web : https://www.weblounge.be/
pls help anybody who knows .. thanks : )
rscales02
@rscales02
Sep 22 2017 14:23
@Feldbot still working on that roman numeral problem?
Daniel Feldman
@Feldbot
Sep 22 2017 14:26
@rscales02 Yep, having a really hard time conceptualizing what needs to happen
rscales02
@rscales02
Sep 22 2017 14:27
do you have your map in one variable or 2?
Daniel Feldman
@Feldbot
Sep 22 2017 14:32
@rscales02 2... this is as far as I am, just creating infinite loops at the moment :-)
``````function convertToRoman(num) {
var decimalArr = [1, 5, 10, 50, 100, 500, 1000];
var romanArr = ["I", "V", "X", "L", "C", "D", "M"];
var tempArr = [];
for (var i = decimalArr.length -1; i < decimalArr.length; i--) {
console.log(i);
}``````
rscales02
@rscales02
Sep 22 2017 14:34
I would change the order of your arrays... have you thought about using a `while` loop?
You will also save yourself some headache if you add in things like 4, 9, 40,...
Markus Kiili
@Masd925
Sep 22 2017 14:36
@Feldbot Solution with those arrays is quite complex. Much easier with `var NUM = [1000,900,500,400,100,90,50,40,10,9,5,4,1];`
Daniel Feldman
@Feldbot
Sep 22 2017 14:36
@rscales02 Meaning start with M, D, C, etc.? Then I can loop through normally, that is helpful. Oh now I see what the 4, 9, 40 means. I didn't get that until now that that should be hard-coded in there.
rscales02
@rscales02
Sep 22 2017 14:38
and `while` `num` is bigger than `decimalArr[0]` it can do something... making sense now?
Daniel Feldman
@Feldbot
Sep 22 2017 14:38
@Masd925 I don't know how I ever would intuit something like that! That is definitely part of the problem, I'm trying to think about how to simultaneously convert the number and the Roman conventions.
rscales02
@rscales02
Sep 22 2017 14:40
Yeah, I'd be lying if I said I didn't google ideas on the solution before I had an idea of where to start :shipit:
Daniel Feldman
@Feldbot
Sep 22 2017 14:41
@rscales02 Yes, definitely starting to make more sense. I haven't worked with while very much, how would you know to go there rather than a standard for loop?
rscales02
@rscales02
Sep 22 2017 14:43
I figured it out when my for loop left `num = 7` instead of `0`
Fabien SHAN
@X140hu4
Sep 22 2017 14:48
Some algorithms are pretty tough....
Just finished smallest common multiple, had to peek at the basic solution after days of trying... i had problems with infinite loops...
rscales02
@rscales02
Sep 22 2017 14:55
It is actually really hard to not cheat at them, google a specific proplem in the algorithm and boom there is someone's complete solution to the algo, not just the answer to your problem
Daniel Feldman
@Feldbot
Sep 22 2017 14:57
@marko88ks Try checking out a few codepen examples for ideas perhaps.
@rscales02 I hear you about not cheating. That is in part why I like asking people here vs. googling. It's nice to be able to have a conversation about the problems vs. just making a bee line for answers. I now have enough to think about to try and roughly solve it which is great. Thanks again.
CamperBot
@camperbot
Sep 22 2017 15:00
feldbot sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @rscales02 |http://www.freecodecamp.com/rscales02
rscales02
@rscales02
Sep 22 2017 15:00
@Feldbot my pleasure
Nick
@AloeandNatural
Sep 22 2017 15:04
Hey all!
Daniel Feldman
@Feldbot
Sep 22 2017 15:07
@rscales02 Speaking of alternate coding approaches, do you ever go to FCC meetups in Denver? I'd like to work on coding with people live, I think that would be great.
Nick
@AloeandNatural
Sep 22 2017 15:08
I'm just completing my Wiki Search, however I'm having trouble displaying results when user hits "enter", or when user clicks the "submit" button. Everything works fine when user clicks on an autocomplete suggestion. Any ideas of what I'm doing wrong, or missing?? Thanks! Wiki Search
rscales02
@rscales02
Sep 22 2017 15:09
I never had time when I was in Denver, always working or looking for work (or playing in the mountains to hang on to what little sanity I had left) I have been in Europe for the last 2 months, finding small towns with little distraction to focus.
piteto
@piteto
Sep 22 2017 15:10
@AloeandNatural when using a <form> element, it will refresh the page when data gets submitted. To prevent this default behavior, use the `preventDefault()` method
``````  \$('.form-wrapper').submit(function(event) {
event.preventDefault();
});``````
You could also remove the <form>
Or, put everything inside the submit() and get rid of `\$('#search').on('input', function(){`
Lots of options!
rscales02
@rscales02
Sep 22 2017 15:12
Does anyone know what the little red dot is when it returns?
Daniel Feldman
@Feldbot
Sep 22 2017 15:13
@rscales02 Hard to find the time for sure. Okay, I'll let you focus ;-) I need to do that too... Off to Rome.
piteto
@piteto
Sep 22 2017 15:13
the little red dot?
Daniel Feldman
@Feldbot
Sep 22 2017 15:14
@AloeandNatural Cool design! Looks like Longs peak.
rscales02
@rscales02
Sep 22 2017 15:16
Daniel Feldman
@Feldbot
Sep 22 2017 15:17
@rscales02 Someone behind you with a laser pointer? Never seen that one, weird!
rscales02
@rscales02
Sep 22 2017 15:19
in the console it logs as a blue circle with the number 2 in it...
also, for some reason that particular function logs 5 times, and I do not understand why...
Nick
@AloeandNatural
Sep 22 2017 15:28
@Feldbot Thank you! And I have no idea where that image is from? =)
CamperBot
@camperbot
Sep 22 2017 15:28
aloeandnatural sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @feldbot |http://www.freecodecamp.com/feldbot
Nick
@AloeandNatural
Sep 22 2017 15:38
@piteto Thank you! Works great on "enter", now I still have to figure out when the user hits the "submit" button
CamperBot
@camperbot
Sep 22 2017 15:38
aloeandnatural sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 141 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 22 2017 15:39
@AloeandNatural If you move all of the code you currently have inside `\$('#search').on('input', function(){` into that .submit() function, your submit button will work and your input will work on enter
otherwise you have to have a click handler for the button and an input handler for the input field
Nick
@AloeandNatural
Sep 22 2017 16:09

@piteto When I move all the code into the .submit() function, everything still works accordingly, but when I click on the "submit" button I just get the results from autocomplete, and not the actual Wikipedia "results".

Sorry still new to this.... :worried:

Yaer
@eMe-404
Sep 22 2017 16:56
I find canvas really hard to responsive with the browser resizing, do you have any advice?
Nick
@AloeandNatural
Sep 22 2017 17:08
@eMe-404 Here's a helpful article. Resizable HTML5 Canvas
George Kemp
@gkemp94
Sep 22 2017 17:08
Hello, I have a quick question about the twitch.tv api project. I'm using .forEach method on a userid array with a function that populates the results onto the page. It's working fine except for the fact that each time I refresh, it's populated in a different order. However, if I revert to using a for loop, I have issues with the print outs. I think the solution is probably to use callbacks, but I haven't got much experience with them yet, and they kind of baffle me. Is there anybody that can help me?
Eric Von Stephan
@EricVon
Sep 22 2017 17:11
hi can someone tell me why my background image is not loading https://codepen.io/ericvstephan/pen/aLNVKY?editors=1100
George Kemp
@gkemp94
Sep 22 2017 17:11
@EricVon You're linking to a website not a picture
try replace it with https://i.imgur.com/MvG3yWS.jpg
then you'll need to resize it and use other css attributes to have it act like you want it too
Eric Von Stephan
@EricVon
Sep 22 2017 17:14
George Kemp
@gkemp94
Sep 22 2017 17:16
@EricVon try remove the space between the url and the opening parenthesis
Eric Von Stephan
@EricVon
Sep 22 2017 17:18
oh gos tank you i hate wsteing y limited time. you save me on angle star for you
piteto
@piteto
Sep 22 2017 17:58
@gkemp94
``````  userIds.forEach(function(user) { //loop through users

// code here will run immediately - in the order of the userIds array

\$.getJSON(api + user + apiEnd, function(data) {

// results of code run here will come back whenever the server gets it for you

});
});``````
It's more complicated than the comments state
but, you basically would have to create a `'<div id="' + user + '></div>'` before your getJSON and then in your getJSON, populate that div with `\$('#' + user).html()`
@AloeandNatural not sure if you got it working yet - I'm not too familiar with jquery-ui's .autocomplete() method
you might want to try and get it working without autocomplete first, then add the feature in later
Nick
@AloeandNatural
Sep 22 2017 18:05
@piteto I gave up on it, for now. I may just try your suggestion, keep it simple.
George Kemp
@gkemp94
Sep 22 2017 18:20
@piteto Ok, thanks. I think I'd be able to carry that out
CamperBot
@camperbot
Sep 22 2017 18:20
gkemp94 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @piteto |http://www.freecodecamp.com/piteto
Liam Docherty
@ldocherty1
Sep 22 2017 18:25
@lydatech @Feldbot @krckyboy Thanks for solving my issue the other day.
CamperBot
@camperbot
Sep 22 2017 18:25
ldocherty1 sends brownie points to @lydatech and @feldbot and @krckyboy :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @krckyboy |http://www.freecodecamp.com/krckyboy
:star2: 2461 | @lydatech |http://www.freecodecamp.com/lydatech
:cookie: 305 | @feldbot |http://www.freecodecamp.com/feldbot
Liam Docherty
@ldocherty1
Sep 22 2017 18:31
Can anyone explain to me why when I use my JS below it makes my website "lag"
``````\$(() => \$(window).scroll(() => \$.each(\$(".section-heading"), animateWhenScrolledTo)));
\$(() => \$(window).scroll(() => \$.each(\$(".section-subheading"), animateWhenScrolledTo)));``````
Liam Docherty
@ldocherty1
Sep 22 2017 18:38
when I take the above code it works fine
piteto
@piteto
Sep 22 2017 18:43
@ldocherty1 You might try this instead:
``\$(window).scroll(() => \$.each(\$(".section-heading, .section-subheading"), animateWhenScrolledTo))``
I'm no jquery expert, but seems you are monitoring on scroll twice, running two loops, and calling the same function for every duplicate loop and scroll event
aRtoo
@artoodeeto
Sep 22 2017 18:55
fam im setting up a new value for the first name but it not returing the value from the parameter that i set.
``````var Person = function(firstAndLast) {
// Complete the method below and implement the others similarly
// this.getFullName = function() {
//   return "";
// };

var first = firstAndLast.split(' ')[0];
var last = firstAndLast.split(' ')[1];
var fullName = first + ' ' + last;

return  {
getFullName: function() {
return fullName;
},

getFirstName: function() {
return first;
},

getLastName: function() {
return last;
},

setFirstName: function(newFirst) {
first = newFirst;
},

setLastName: function(newLast) {
last = newLast;
},

setFullName: function(newFullname) {
firstAndLast = newFullname;
}
};
};

var bob = new Person('Bob Ross');

bob.setFirstName('check');
bob.getFullName();``````
Liam Docherty
@ldocherty1
Sep 22 2017 19:04
@piteto Thanks, but it's still lagging :(
CamperBot
@camperbot
Sep 22 2017 19:04
ldocherty1 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 143 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 22 2017 19:06
@ldocherty1 feel free to share it here - you can also use your dev tools to analyze what's going on https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:42
hello.. since it's so not busy.. let me ask this question
what happens if you omit semi-col (";") in javascript ?
as seen in the persons code above
piteto
@piteto
Sep 22 2017 19:46
For the most part, semi-colons are not needed. They are automatically inserted by the javascript interpreter @Kowalatam
but....automatic insertion can mess up sometimes, so it's usually best to use semi-colons explicitly
``````function add() {
return
1 + 2;
}

add(); // undefined``````
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:47
i kinda insert manually... what automatically editor adds it :)
piteto
@piteto
Sep 22 2017 19:48
editors let you install extensions called linters that will automatically add missing semi-colons
but they can fail too...just like the interpreter
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:48
ohh i see..
piteto
@piteto
Sep 22 2017 19:48
ESLint is a common one for javascript, also JSHint
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:48
i think i once noticed it caused troubles in my css when i did add it
except maybe i noticed wrong lol.. but for javascript... i haven't seen it's use
piteto
@piteto
Sep 22 2017 19:49
There are separate ones for CSS, like CSSLint, and for HTML like HTMLHint
and they can get all messed up when you mix html/css/js in one file
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:49
never heard of those lol ...
one more question.. i now see most ppl using "let" instead of "var"
piteto
@piteto
Sep 22 2017 19:50
codepen uses a library called code-prettify if you've ever selected "Tidy JS" in codepen
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:50
whats up with that
whats the difference and when is it appropriate
piteto
@piteto
Sep 22 2017 19:51
var is pretty much obsolete now, better to start using const and let
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:51

no. i haven't used that yet..

codepen uses a library called code-prettify if you've ever selected "Tidy JS" in codepen

why ?.. reasons if u don't mind

var is pretty much obsolete now, better to start using const and let

piteto
@piteto
Sep 22 2017 19:52
there's a down arrow in the top, right-hand corner of your JS section in codepen, select "Tidy JS" and you'll see your code get automatically formatted with missing semi-colons added and more
const is for variables that don't need to re-defined. let is for variables you want to redefine
it's good to understand scope in JS to get an idea of when to use let
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:53

i will try this and see

there's a down arrow in the top, right-hand corner of your JS section in codepen, select "Tidy JS" and you'll see your code get automatically formatted with missing semi-colons added and more

piteto
@piteto
Sep 22 2017 19:55
``````const a = 42;
a = 40;  // error``````
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:55
yeah, i think thats about variables that are not easily accessible.. like variables in functions right ...
global and ... smthing smthing lol
don't remember :)
piteto
@piteto
Sep 22 2017 19:55
global, block, lexical
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:57
i gat a lot of tiny detail things to check on i see
piteto
@piteto
Sep 22 2017 19:57
There are lots of terms to define scope
Elizabeth Paul
@Kowalatam
Sep 22 2017 19:58
i shall check up on it though.. the let and cons... so i can join civilization lol
piteto
@piteto
Sep 22 2017 19:58
try to stop using var - it's a good way to learn how const and let work
Elizabeth Paul
@Kowalatam
Sep 22 2017 20:00
i will do so after this project i'm on lol..
piteto
@piteto
Sep 22 2017 20:00
:)
Elizabeth Paul
@Kowalatam
Sep 22 2017 20:00
i don't honestly wanna add more stuff i need to check im using wrong or right to the current list lol
piteto
@piteto
Sep 22 2017 20:01
luckily const and let are new, so var isn't "wrong" necessarily
Elizabeth Paul
@Kowalatam
Sep 22 2017 20:02
seriously.. humans have gat to calm down with new stuff lol
it messes with the current flow of things :)
piteto
@piteto
Sep 22 2017 20:03
if we designed everything perfectly from the start, we'd have nothing left to do :)
Elizabeth Paul
@Kowalatam
Sep 22 2017 20:04
true that ...
piteto
@piteto
Sep 22 2017 20:05
I have to get work done....it's nice I found this place last month, but it's been a bit of a time vampire lol
Elizabeth Paul
@Kowalatam
Sep 22 2017 20:09
it's actually usually empty of blood
Stonlen
@Stonlen
Sep 22 2017 20:32
Any Mods online?
Pieter Stokkink
@forkerino
Sep 22 2017 20:38
@Stonlen check the admin room https://gitter.im/FreeCodeCamp/admin
Stonlen
@Stonlen
Sep 22 2017 20:38
@forkerino thanks
CamperBot
@camperbot
Sep 22 2017 20:38
stonlen sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 2936 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Sep 22 2017 20:40
@Stonlen it is for reporting violations of the Code of Conduct and emergency bannings only, otherwise, check the contributors room https://gitter.im/FreeCodeCamp/Contributors
Stonlen
@Stonlen
Sep 22 2017 20:42
ok
Daniel Feldman
@Feldbot
Sep 22 2017 20:46
I still can't figure out the basic premise of the Roman numeral conversion problem. I've got the array to stop looping before the given number, but then what? If I set a conditional or a loop, what am I trying to determine? So far it seems like I'm just trying to find out how to keep decrementing until I hit the given number, but why? Even if I do that, I don't know how that code could be applied to Roman numeral map. Having a really tough time with this one.
``````function convertToRoman(num) {
var decimalArr = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
var romanArr = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
var i = 0;
while (num < decimalArr[i]) {
console.log(decimalArr[i]);
var value = decimalArr[i]; // 40
i++;
if (value > num) {
value--;
}
} console.log(value);
}
convertToRoman(35);``````
Jorge
@OrangeKulture
Sep 22 2017 21:42
hey guys
nobody home i guess
piteto
@piteto
Sep 22 2017 21:43
hey Jorge
@Feldbot You'll want the while loop to go inside a for loop
that way, you can analyze each roman numeral and loop over and over as long as its decimal equivalent is less than num
keanusuasuasuasuasuas
@keanusuasuasuasuasuas
Sep 22 2017 21:47
Hey! I'm trying to make a gradient background (going diagonal). This works: background: linear-gradient(to right, red, yellow); but this doesn't: background: linear-gradient(to bottom right, red, yellow); when I try this, the backgorund just starts repeating.
piteto
@piteto
Sep 22 2017 21:50
@keanusuasuasuasuasuas add a height to the element you're adding the background to, for example:
``````body {
background: linear-gradient(to bottom right, red, yellow);
min-height: 100vh;
}``````
Jorge
@OrangeKulture
Sep 22 2017 21:51
oh hey! @piteto .. hows it going?
piteto
@piteto
Sep 22 2017 21:51
It's going okay, how about you? @OrangeKulture
I'm trying to get through these tedious front end projects :p finished pomodoro, now time for calculator then simon....and I can finally do dataviz
Jorge
@OrangeKulture
Sep 22 2017 21:53
doing pretty good .. been working on some fun projects
dataviz is just the projects in here, right?
there's no actual tutorials or anything?
@piteto
piteto
@piteto
Sep 22 2017 21:54
I don't know, haven't looked too closely at the map, but lots of "coming soon" exercises it seems
Jorge
@OrangeKulture
Sep 22 2017 21:55
right .. yeah
i guess they have some in the beta
have u done any backend?
piteto
@piteto
Sep 22 2017 21:56
not here, no, but that's a goal
I have some minimal node.js work experience, definitely need to study it more
Jorge
@OrangeKulture
Sep 22 2017 21:57
i love node .. it's really fun
piteto
@piteto
Sep 22 2017 21:58
looks so much nicer compared to PHP
Jorge
@OrangeKulture
Sep 22 2017 21:58
ive been working on a sockets chat, with facebook authentication .. all done in node n express
piteto
@piteto
Sep 22 2017 21:58
wow, sounds awesome
like a bot for facebook posting?
Jorge
@OrangeKulture
Sep 22 2017 21:58
nah not really no .. more like a UI for people to chat
piteto
@piteto
Sep 22 2017 21:58
or messenger?
Jorge
@OrangeKulture
Sep 22 2017 21:59
yeah
piteto
@piteto
Sep 22 2017 21:59
ahh, I didn't know we could do that with facebook. I deleted it from my phone when all my friends started spewing hate about politics lol
Jorge
@OrangeKulture
Sep 22 2017 22:00
haha yeah .. i dont use it that much tbh .. but it's just so that you can connect and be authenticated. This way the data persists without the need to create accounts
Daniel Feldman
@Feldbot
Sep 22 2017 22:00
@piteto Thanks for the tip, I've been trying all kinds of things nested inside the while with no luck. Seemed like I would need a loop but didn't know it would be on the outside.
CamperBot
@camperbot
Sep 22 2017 22:00
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 144 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 22 2017 22:00
show me your dogs and what you ate last night, I'll get my news on Twitter thanks
Jorge
@OrangeKulture
Sep 22 2017 22:00
facebook pisses me off to no end
millennials and their need for validation :joy:
piteto
@piteto
Sep 22 2017 22:01
haha, that's over on reddit more I think
all these shitposts for karma
Jorge
@OrangeKulture
Sep 22 2017 22:01
no offense intended
piteto
@piteto
Sep 22 2017 22:01
internet karma, yay :joy:
Jorge
@OrangeKulture
Sep 22 2017 22:02
ohh yeah for sure haha .. its kinda crazy. I dont really do much social media. Its one of the most misused, useful tools ever created
piteto
@piteto
Sep 22 2017 22:02
very well said!
keanusuasuasuasuasuas
@keanusuasuasuasuasuas
Sep 22 2017 22:02
thanks!
piteto
@piteto
Sep 22 2017 22:02
@Feldbot I could explain more, but don't want to risk giving the answer away!
Daniel Feldman
@Feldbot
Sep 22 2017 22:04
@piteto No, that is great to just get a little bit at a time, then I can spend hours breaking things and learning what doesn't work! I have a feeling I'll be back for more help on this one for sure.
Jorge
@OrangeKulture
Sep 22 2017 22:05
yeah that one was a lot of fun
lots of thinking .. also the one where u need to find factorial, i think it was ..
no not that one
hmmm ..
smallest common multiple maybe
piteto
@piteto
Sep 22 2017 22:08
I liked binary agents - even though it ended up being straightforward in the end
never really thought about how to convert hex to binary and vice versa
sum all primes was interesting too
Jorge
@OrangeKulture
Sep 22 2017 22:11
yeah binary was kinda crazy
Henry
@GitHub-Henry
Sep 22 2017 23:12
George Kemp
@gkemp94
Sep 22 2017 23:13
Anybody have any idea of why I can't access things within an array that I created? It's an array of dictionary objects?
https://codepen.io/gkemp94/pen/ZXpMBK?editors=1010
Liam Docherty
@ldocherty1
Sep 22 2017 23:19
I'm looking for a JS smooth scrolling template on codepen or another website. Can anyone recommend me one?
piteto
@piteto
Sep 22 2017 23:29
@gkemp94 You're trying to access `dataArray` before it is populated. To verify, add this to the end of your second getJSON call:
``if(dataArray.length === userIds.length) console.log(dataArray);``
George Kemp
@gkemp94
Sep 22 2017 23:49
@piteto I don't think that's the problem. If you look at my current set up you can see that it is populated, but I can't access any of the elements through methods such as dataArray[0] etc.
mpontus
@mpontus
Sep 22 2017 23:52
Is this a right channel for mongodb questions?
George Kemp
@gkemp94
Sep 22 2017 23:53
@mpontus I'm not trying to use mongodb. I'm just trying to do this without a database. Is that possible or am I out of scope?
mpontus
@mpontus
Sep 22 2017 23:54
Oh, I was not referring to your question. I was going to ask a mongo question myself :)
Let me see if I can help you out
Ruchika Sharma
@ruchika90
Sep 22 2017 23:55
@Manish-Giri I solved it, ty
CamperBot
@camperbot
Sep 22 2017 23:55
ruchika90 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6565 | @manish-giri |http://www.freecodecamp.com/manish-giri
mpontus
@mpontus
Sep 22 2017 23:56
@gkemp94 How do I trigger the error?
George Kemp
@gkemp94
Sep 22 2017 23:57
I'm trying to print to the console the first element in the array "dataArray"
and I can't figure out how to do it.
because the next step is to print out to the console the a specified dictionary object contained within the dataArray
That's an updated pen
mpontus
@mpontus
Sep 22 2017 23:58
piteto is right, you need to wait until all requests have finished before trying to access the array.
George Kemp
@gkemp94
Sep 22 2017 23:59
How can I make sure all requests have finished?
mpontus
@mpontus
Sep 22 2017 23:59
You could use Promise.all
`Promise.all(arrayOfPromises).then(functionToInvokeAfterAllPromisesHaveBeenFulfilled)`