These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Jan 2018
Tobias Leinss
@Caruso33
Jan 11 2018 00:16
]=-0987654321234567890-
Cristian
@GummyGod
Jan 11 2018 00:35
Hello everyone! I’m on the weather project,however,something’s wrong,my “App” should atleast show the temperature in celsius or w/e but ,it doesn’t even asks me if it can use my location. thoughts?https://codepen.io/GummyGod/pen/WdzgzL?editors=1111
Aditya
@ezioda004
Jan 11 2018 00:45
@GummyGod Console shows this error Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. You need to add jquery before bootstrap js
Sorin Ruse
@sorinr
Jan 11 2018 00:48
@GummyGod your geolocation code is inside the function function getLocation() that never get called
Cristian
@GummyGod
Jan 11 2018 00:48
ic
so..what should i do?
where should i call it i mean
Sorin Ruse
@sorinr
Jan 11 2018 00:50
@GummyGod also you are trying to compose the var api with the lat and lon before you have this values. you must restructure all your js code
Cristian
@GummyGod
Jan 11 2018 00:50
fuck this shit. aight.lemme try @sorinr thanks
CamperBot
@camperbot
Jan 11 2018 00:50
gummygod sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1386 | @sorinr |http://www.freecodecamp.org/sorinr
Juan Marin
@JuanMP429
Jan 11 2018 02:44
lol
Hemakshi Sachdev
@hemakshis
Jan 11 2018 04:02
@khaduch Thank you so much! :)
The "title" for the inline-style shows up when you keep your cursor over the link, a title "Google's Homepage" would show up. It's just like the "title" attribute of our "anchor" tag.
CamperBot
@camperbot
Jan 11 2018 04:02
hemakshis sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3671 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Jan 11 2018 04:04
@hemakshis - oh - I didn't realize that... let me check again, I was thinking that it would be like a regular anchor tag where the anchor text shows up (usually with underline or a different font color)... I see now, I think of that as a "tooltip" when something shows up whe you hover. That's good!
Hemakshi Sachdev
@hemakshis
Jan 11 2018 04:05
@khaduch No problem. Even I thought so when I first read it :laughing:
primuscovenant
@primuscovenant
Jan 11 2018 05:08
@heroiczero thx
CamperBot
@camperbot
Jan 11 2018 05:08
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2133 | @heroiczero |http://www.freecodecamp.org/heroiczero
Waleed Assaf
@Jinxlaw
Jan 11 2018 10:03
hey
just wondering
<style>
body {
background: url(https://i.imgur.com/MJAkxbh.png);
}
</style>
Is that uncorrect?
Razvan Jackson
@RazvanJackson
Jan 11 2018 10:04
i think that url must be the path in your pc to the photo
Joseph Joe
@JoeTinnySpace
Jan 11 2018 10:04
Put a single quotesinside the brackets
Waleed Assaf
@Jinxlaw
Jan 11 2018 10:06
@JoeTinnySpace The single quote worked, thanks.
CamperBot
@camperbot
Jan 11 2018 10:06
waleed39 sends brownie points to @joetinnyspace :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @joetinnyspace |http://www.freecodecamp.org/joetinnyspace
Riadh
@KWFE
Jan 11 2018 11:30
@waleed39 وليد ضع الكود هكذا
<style>
body {
background: url(https://i.imgur.com/MJAkxbh.png

);
}
</style>
<style>
body {
background: url('https://i.imgur.com/MJAkxbh.png');
}
</style>
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 11 2018 11:59
Why the transition property does not work with the display property, what is the reason?
Vidžius
@sursider
Jan 11 2018 12:26
hello people, how to make .html(value).fadeIn('slow') to start working only after fadeOut finishes? Now the content changes, fades out and fades in.
Razvan Jackson
@RazvanJackson
Jan 11 2018 12:28
@sursider maybe invert them?
.html(value).fadeIn('slow')
Vidžius
@sursider
Jan 11 2018 12:37
@RazvanJackson Now just does .html() with no effect :/
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 11 2018 12:40
Why when we do float for the items inside the list, then the height of the list becomes zero, why should we add the overflow property with(hidden or auto) of the list?
Roman Struna
@RomchyFCC
Jan 11 2018 12:40
@ahmed-issa-mohd are you asking this for css?
Razvan Jackson
@RazvanJackson
Jan 11 2018 12:42
@sursider
<div id='foo'>
  hey
</div>

<script>
  $(document).ready(function(){
    $('#foo').html('go').fadeOut();
  });
</script>
for me this is working
Kaz Baig
@kbaig
Jan 11 2018 12:43
@ahmed-issa-mohd if you want a fade in effect using transition, you should work with visibility rather than display, the latter being more for element structure rather than direct visual styling
Razvan Jackson
@RazvanJackson
Jan 11 2018 12:44
@sursider the text has to be fadeout or (display none) to fade in.
Roman Struna
@RomchyFCC
Jan 11 2018 12:46
@sursider oh yes, a simple if condition should make it work
if hidden {}
else if visible {}
Brandon Blackwell
@Radlerz1
Jan 11 2018 14:44
Hello, I can't seem to get passport-twitter to work on my project. Even though I have used it many times before with no problems so I don't no what the problem is.
dinesh
@1532j0004kg
Jan 11 2018 14:45
#include <bits/stdc++.h>

using namespace std;

int simpleArraySum(int n, vector <int> ar) {
       // Complete this function
    for(int i = 0 ; i < n ; i++)
        res += ar[i];

    return res;
    }

int main() {
    int n;
   int res = 0;

    cin >> n;

    vector<int> ar(n);
    for(int ar_i = 0; ar_i < n; ar_i++){
       cin >> ar[ar_i];
    }
    int result = simpleArraySum(n, ar);
    cout << result << endl;
    return 0;
}
in this when i giving the res=0 globally its not working can u please tell y?
Kaz Baig
@kbaig
Jan 11 2018 14:46
uhhh that's not js
dinesh
@1532j0004kg
Jan 11 2018 14:46
it show error msg like res is not declared.
@kbaig s
Kaz Baig
@kbaig
Jan 11 2018 14:47
?
dinesh
@1532j0004kg
Jan 11 2018 14:47
its hacker rank problem
Kaz Baig
@kbaig
Jan 11 2018 14:47
Okay but that's not JS and this is front end
dinesh
@1532j0004kg
Jan 11 2018 14:47
jus asked!
Marc
@MWBauer
Jan 11 2018 14:55
Hi everyone
Kaz Baig
@kbaig
Jan 11 2018 15:00
:wave:
Tom
@moT01
Jan 11 2018 15:05
:octocat:
dinesh
@1532j0004kg
Jan 11 2018 15:10
:smile:
Sorin Ruse
@sorinr
Jan 11 2018 15:11
@1532j0004kg not sure coz i haven't used c++ for too many years but i think declaring your res var as external int res=0 might help
dinesh
@1532j0004kg
Jan 11 2018 15:12
yes its working when i declared inside the function.
but i want to know it's not worked when i giving at start of main.
like my code i posted above
Sorin Ruse
@sorinr
Jan 11 2018 15:15
@1532j0004kg because your simpleArraySum function doesn't have access to that var that is limited in scope to the main function
dinesh
@1532j0004kg
Jan 11 2018 15:16
ohh ok
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:16
move your int res = 0; inside simpleArraySum function
dinesh
@1532j0004kg
Jan 11 2018 15:16
@SweetCodingInc its working
but i want to know it's not worked when i giving at start of main.
Sorin Ruse
@sorinr
Jan 11 2018 15:17
@SweetCodingInc nope. that will make it equal zero everytime you call that functiion
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:17
because when you go inside simpleArraySum you no longer have access to scope of main function
@sorinr : Isn't that expected?
dinesh
@1532j0004kg
Jan 11 2018 15:18
there is no touch with simpleArraySum and main right?
but function is inside the main right?
then y?
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:19

but function is inside the main right?

No.

Function is called from main, but it doesn't reside in main

Sorin Ruse
@sorinr
Jan 11 2018 15:20
@SweetCodingInc not sure what @1532j0004kg want to achieve. haven't took a close look at his code :)
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:21
fair enough
dinesh
@1532j0004kg
Jan 11 2018 15:23
can u pls tell what is reside?
meaning
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:23
oh dear! :laughing:
dinesh
@1532j0004kg
Jan 11 2018 15:23
:smile:
pls :smile:
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:24
in other words, main and simpleArraySum are two entirely different functions
they're not related to one another
simpleArraySum is defined OUTSIDE of main. Not INSIDE
so they both have different scopes
dinesh
@1532j0004kg
Jan 11 2018 15:25
got it!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :+1:
@SweetCodingInc thanks
Sorin Ruse
@sorinr
Jan 11 2018 15:25
@SweetCodingInc its just a small eng language understanding. it happens also to me sometime to missunderstand something as the eng its not my first lang
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:28
@sorinr From what I assume, @1532j0004kg is Indian. (like me) and I know very well the prowess (or lack thereof) of Indians when it comes to English ;)
@1532j0004kg :+1:
Sorin Ruse
@sorinr
Jan 11 2018 15:30
@SweetCodingInc i have some singaporean friends and i know how it sounds the singlish compared to "normal" english :)
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:31
@1532j0004kg
#include <bits/stdc++.h>

using namespace std;

int simpleArraySum(int n, vector <int> ar) {
   // Complete this function
  int res = 0;
  for(int i = 0 ; i < n ; i++){
    res += ar[i];
  }
  return res;
}

int main() {
    int n;
    cout << "Total Number of Elements: ";
    cin >>  n;
    vector<int> ar(n);
    cout << "Please enter " << n << " numbers" << endl;
    for(int ar_i = 0; ar_i < n; ar_i++){
      cout << "Please enter element at index " << ar_i << " : ";
      cin >> ar[ar_i];
    }
    int result = simpleArraySum(n, ar);
    cout << "Total : " << result << endl;
    return 0;
}
consider indenting your code and add appropriate messages wherever you deem necessary
dinesh
@1532j0004kg
Jan 11 2018 15:31
:fire:
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:32
@sorinr :+1:
Sorin Ruse
@sorinr
Jan 11 2018 15:36
@1532j0004kg indenting your code means aligning your code inside functions to be easy readable. adding comments to the code help others understand what your part of the code is supposed to do
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:37

@sorinr

to be easy readable

Correct - to be easily readable

:P

Sorin Ruse
@sorinr
Jan 11 2018 15:38
@SweetCodingInc its against forum policy to tell u something ..... :)
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:38

@sorinr also

adding comments to the code help others

should be adding comments to the code helps others

@SweetCodingInc its against forum policy to tell u something ..... :)

hahaha

Sorin Ruse
@sorinr
Jan 11 2018 15:39
@SweetCodingInc are u my eng teacher? :)
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:39
God forbid, I'm not... :laughing:
Sorin Ruse
@sorinr
Jan 11 2018 15:39
@SweetCodingInc did you understood what i wanted to tell?
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:40
No, If I understood you correctly, you wanted to say that the whole purpose of indenting code is to mess it up :P
Sorin Ruse
@sorinr
Jan 11 2018 15:41
@SweetCodingInc you R absolutely right. so no one will want to copy paste your code coz they don't understant it :)
Sweet Coding :)
@SweetCodingInc
Jan 11 2018 15:42
:laughing:
Zulfan Hameed
@zlfnhmd
Jan 11 2018 15:53
<!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 commentCount = 0;
            var commentArray = [];
            function Comment(cName, cComment){
                var dateStamp = new Date();
                console.log(dateStamp) //Console.log displays the date
                commentCount++;
                var cid = "comment"+ commentCount;
                var upvoteCount = 0;
                var downvoteCount = 0;
                var replyCount = 0;
                var replyArray = [];
                this.cName=cName;
                this.cComment=cComment;

                function cReply(rName, rComment){
                    replyCount++;
                    var rid = "reply"+ replyCount;
                    this.rName=rName;
                    this.rComment=rComment;
                    replyArray.push(rid, rName, rComment);
                 }

                 commentArray.push(cid, cName, cComment, upvoteCount, downvoteCount, dateStamp, replyArray);

                 function upvote(){
                     upvoteCount++;
                 }

                 function downvote(){
                     downvoteCount++;
                 }


            };

            $('#commentForm').submit(function(event) {
                event.preventDefault();
                var commentAuthor = $('#newCommentAuthor').val();
                var commentText = $('#newCommentText').val();
                var comment = new Comment(commentAuthor, commentText);
                console.log(comment.dateStamp); // Console.log displays undefined
                var newCommentMarkup = '<div id="'+comment.id+'" style="background-color: #f1f1f1; padding: 5px 5px 5px 5px; margin-bottom: 5px; border-color: grey;border-style: solid;border-width: 1px; overflow: auto;"><div>'+comment.cName+' commented:</div><div>'+comment.cComment+'<br><p style="text-align:right;">'+comment.dateStamp+'<button class="upvoteBtn" style="margin-right:5px;">Upvote</button><button class="downvoteBtn">Downvote</button></p></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>'; 
                $('#countContainer').empty().append('Total comments: '+commentCount);
                $('#commentsContainer').append(newCommentMarkup);
            });
        });
    </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%;
    }

    #newCommentText {
        width: 100%
    }

    #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" 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>

Guys so I made and object using constructor, the dateStamp property of the object is assigned value of Date(). Why is it that the property says undefined when I try to access that property outside? i have added console.log() once after it is defined and once when is it accessed.

Please help

Sorin Ruse
@sorinr
Jan 11 2018 15:56
@zlfnhmd same issue. dateStamp is limited in scope only to the function where you declare it that is the Comment function
Kaz Baig
@kbaig
Jan 11 2018 15:56
@zlfnhmd you haven't set a dateStamp property, only a variable within the function. You set properties using the this keyword, as you did further down the function
Zulfan Hameed
@zlfnhmd
Jan 11 2018 16:15
@kbaig thank you
CamperBot
@camperbot
Jan 11 2018 16:15
zlfnhmd sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 508 | @kbaig |http://www.freecodecamp.org/kbaig
Zulfan Hameed
@zlfnhmd
Jan 11 2018 16:19

@zlfnhmd you haven't set a dateStamp property, only a variable within the function. You set properties using the this keyword, as you did further down the function

So that means I will have to create a date variable and pass it as constructor argument?

Kaz Baig
@kbaig
Jan 11 2018 16:23
@zlfnhmd no, you're not limited to using this on constructor arguments
Stephen James
@sjames1958gm
Jan 11 2018 16:25
@zlfnhmd As a note
function downvote(){
this function is not available outside the constructor
you need
this.downvote = function() {
}
Zulfan Hameed
@zlfnhmd
Jan 11 2018 16:35
Thanks again guys
JBallin
@JBallin
Jan 11 2018 18:03
Why did the author of this login form use a bottom margin on the label/input instead of just putting bottom padding on the fieldset (which already has duplicate padding on top, right, left)? I'm assuming it's something semantic but I fail to see how this is better. Thanks! https://codepen.io/shayhowe/pen/dCehs
referring to this part of the CSS (lines 23-31)
.account-info {
  padding: 20px 20px 0 20px;
}
.account-info label {
  color: #395870;
  display: block;
  font-weight: bold;
  margin-bottom: 20px;
}
Kaz Baig
@kbaig
Jan 11 2018 18:06
@JBallin Well that bottom margin exists for both labels, so it's consistent
It's not that they put in the bottom margin to add spacing between the input field area and the submit button area, it's that the margin is for spacing between the labels and whatever comes after them
Sorin Ruse
@sorinr
Jan 11 2018 18:11
@JBallin in my opinion there is nothing semantic in using margins or padding that only gives space around to an element
@JBallin its just pure styling
JBallin
@JBallin
Jan 11 2018 18:13
ah right thank you @kbaig . should've noticed the lost spacing between the input fields (when removing bottom-margin).
CamperBot
@camperbot
Jan 11 2018 18:13
jballin sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @kbaig |http://www.freecodecamp.org/kbaig
Jin
@jin99
Jan 11 2018 18:26
<p  <a href="http://freecatphotoapp.com"> cat photos</a> </p>
where I am going wrong with the anchor tag?
Kaz Baig
@kbaig
Jan 11 2018 18:27
@jin99 you haven't closed your p tag
Jin
@jin99
Jan 11 2018 18:27
I have, at the end
Kaz Baig
@kbaig
Jan 11 2018 18:28
<p <a...
there
<p vs <p>
Jin
@jin99
Jan 11 2018 18:29
oh I get it now, thanks
JBallin
@JBallin
Jan 11 2018 18:37

In above codepen, why does author float both elements (left) in the account-action class ("login" btn + "stay signed in" checkbox)

.account-action .btn {
  background: linear-gradient(#49708f, #293f50);
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  float: left;
  padding: 8px 16px;
}
.account-action label {
  color: #7c7c80;
  font-size: 12px;
  float: left;
  margin: 10px 0 0 20px;
}

https://codepen.io/shayhowe/pen/dCehs

there's a slight change when i remove the floats but it's so small I'm curious what's the reasoning behind it
Arria2017
@Arria2017
Jan 11 2018 18:39
Hello All, I'm new to Free Code Camp, also the Code Community. Looking for any sound advice. I've completed my first 100 challenges including my tribute page which I'm sure needs fine tuning. However, the profile challenge has truly thrown me into a place of unknown. I don't know where to start to make my profile work properly, although I can get my background set, also place certain words and buttons on the page, I feel like my code style is all over the place also having trouble starting second page.
Kaz Baig
@kbaig
Jan 11 2018 18:43
@JBallin if you inspect the label, you'll see that the top margin doesn't go into effect unless both elements in that div are floated
Tom
@moT01
Jan 11 2018 18:43
@Arria2017 take a look at some example codes - make it pretty simple and move on - you will want to go back and change/add stuff as you do more projects
Simey de Klerk
@simeydk
Jan 11 2018 18:43

@VaseJS @krisb1220 you are both right, and my 'JS is only good for two things' rant was wrong. In retrospect I should probably not even have mentioned the CLI.

I was mainly trying to help @JuanMP429 (who I'm guessing is pretty new to all this based on his questions) understand how HTML and Javascript fit together, and particularly why it's worthwhile for him to keep learning HTML even though Javascript is where most of the really cool stuff happens in terms of web development.

Arria2017
@Arria2017
Jan 11 2018 18:44
@moT01 Oh thanks for the speedy response! will do
CamperBot
@camperbot
Jan 11 2018 18:44
arria2017 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 955 | @mot01 |http://www.freecodecamp.org/mot01
Simey de Klerk
@simeydk
Jan 11 2018 18:45
@sjames1958gm I've seen your name so many times while working on the FCC Leaderboard challenge, I feel like I know you :)
Tom
@moT01
Jan 11 2018 18:45
@Arria2017 concentrate on a few sections - a nav, and body (or maybe projects), and maybe a footer
Simey de Klerk
@simeydk
Jan 11 2018 18:49
Has anyone here worked with ES6 modules beyond the obligatory usage as part of React? I've been trying it out lately, and really liking it. However, I was really bummed to discover that extending builtins including extends Array does not work in Babel, which sucks. Is there a way to get the same behavior without using ES6 modules?
Kaz Baig
@kbaig
Jan 11 2018 18:52
@simeydk Do you mean ES6 classes?
Simey de Klerk
@simeydk
Jan 11 2018 18:52
yes ES6 classes
Kaz Baig
@kbaig
Jan 11 2018 18:52
modules are the import/export syntax
Simey de Klerk
@simeydk
Jan 11 2018 18:52
my bad
Kaz Baig
@kbaig
Jan 11 2018 18:53
You could do it the old fashioned way by tacking things onto Array.prototype
Arria2017
@Arria2017
Jan 11 2018 18:53
@moT01 https://codepen.io/Arria2017/pen/LeeXeG <---- this is mine so far, however I'm gonna erase and start over. I checked yours out looks great!
JBallin
@JBallin
Jan 11 2018 18:53
@kbaig wow that's interesting. why is that? I noticed the left/right margins won't apply either.
My deduction from that is that they were floated left to allow for control on placement. Is that common/best practice?
Kaz Baig
@kbaig
Jan 11 2018 18:54
@Arria2017 imo if you're a beginner, the beginner challenges, especially the portfolio project, are only worth giving a fair shot based on your current abilities. You can come back to them once you've improved a lot after finishing/arriving at the final projects
Simey de Klerk
@simeydk
Jan 11 2018 18:55
@kbaig, I ideally want special kinds of 'sets' that will always contain certain types of objects, and then I want to add methods to the special array that are aware of the type of the children, but I don't want this to apply to all arrays
Arria2017
@Arria2017
Jan 11 2018 18:56
@kbaig Wow! I feel so much better - was feeling pressured to finish the Portfolio before I moved on to other challenges.
Tom
@moT01
Jan 11 2018 18:56
@Arria2017 thanks, yours is on the right track - take note of how i indent my code - sort of a universal way to do it
CamperBot
@camperbot
Jan 11 2018 18:56
mot01 sends brownie points to @arria2017 :sparkles: :thumbsup: :sparkles:
:cookie: 102 | @arria2017 |http://www.freecodecamp.org/arria2017
Kaz Baig
@kbaig
Jan 11 2018 18:57
@JBallin It's probably better to ditch float in favor of flexbox in most cases. Float works kind of unintuitively imo
Simey de Klerk
@simeydk
Jan 11 2018 18:57
but I suppose you're right. What I ended up settling for is 'demoting' the array to a property of the object. But now my syntax for interacting with the array elements is not as pretty -> specialArray.array[2] instead of specialArray[2]
Kaz Baig
@kbaig
Jan 11 2018 18:57
@Arria2017 You're welcome to do the curriculum in any order
JBallin
@JBallin
Jan 11 2018 18:57
@kbaig got it thanks! i gotta get into flexbox soon
CamperBot
@camperbot
Jan 11 2018 18:57
jballin sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Arria2017
@Arria2017
Jan 11 2018 18:57
@moT01 ok Perfect I will take note of the indent of your code
Kaz Baig
@kbaig
Jan 11 2018 18:59
@simeydk The ES6 class syntax is really just syntactic sugar over the ES5 way of doing things
Simey de Klerk
@simeydk
Jan 11 2018 19:00
@kbaig Thanks, let me try that
CamperBot
@camperbot
Jan 11 2018 19:00
simeydk sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 510 | @kbaig |http://www.freecodecamp.org/kbaig
Arria2017
@Arria2017
Jan 11 2018 19:01
@moT01 Simon, Nice! haha I remember that game! Brings back memories...
JBallin
@JBallin
Jan 11 2018 19:03
@kbaig @simeydk can't you just do the following:
let specialArray = new Array();
specialArray[0] = "a";
specialArray[1] = "b";
specialArray[1] // b
thanks @kbaig (said api offline last time)
CamperBot
@camperbot
Jan 11 2018 19:04
jballin sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
JBallin
@JBallin
Jan 11 2018 19:04
hmm still says that for me. is there a limit to how many thanks i can give one person in a certain time period?
@simeydk my understanding is that extending is not best practice
Kaz Baig
@kbaig
Jan 11 2018 19:05
@JBallin that is indeed why it says api offline
JBallin
@JBallin
Jan 11 2018 19:06
a more descriptive error message would be good, not sure who's in charge of that
Kaz Baig
@kbaig
Jan 11 2018 19:06
@JBallin I suspect they've just set "api offline" as the only error message, rather than it being an inappropriate one for this specific error
@JBallin @simeydk I believe he wants to create an object which is arrays but with extra methods, so it's not a problem of changing its values
Sorin Ruse
@sorinr
Jan 11 2018 19:16
@kbaig they set it up this way, so if somebody thanks twice on the same subjects the other party don't get the brownie points. this is what i think
CamperBot
@camperbot
Jan 11 2018 19:16
sorinr sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @kbaig |http://www.freecodecamp.org/kbaig
Sorin Ruse
@sorinr
Jan 11 2018 19:17
@kbaig thanks
CamperBot
@camperbot
Jan 11 2018 19:17
api offline
sorinr sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
Kaz Baig
@kbaig
Jan 11 2018 19:19
@sorinr right no I think that enforcement is fine. I'm just commenting on the error message
Sorin Ruse
@sorinr
Jan 11 2018 19:21
@kbaig what would u like the bot to say?
its just a "neutral" message
Tom
@moT01
Jan 11 2018 19:21
'sorry, im out of brownies'
Sorin Ruse
@sorinr
Jan 11 2018 19:22
@moT01 go buy some :) i'll give the beer
Kaz Baig
@kbaig
Jan 11 2018 19:23
@sorinr well "api offline" isn't quite indicative of the reason for the error
Sorin Ruse
@sorinr
Jan 11 2018 19:24
@kbaig i know. we r just kidding around here
Kaz Baig
@kbaig
Jan 11 2018 19:25
:D
Sorin Ruse
@sorinr
Jan 11 2018 19:26
making fun of the bot
Zulfan Hameed
@zlfnhmd
Jan 11 2018 19:26

https://codepen.io/zlfnhmd/pen/opdGWp

So guys I have a problem again, I cant figure out why the replies dont appear unless the comment to be replied has a comment under it. That is if there are n comments I can only reply to n-1 comments.

Please help me out.
I must say I have learnt a great deal since i started this project

Sorin Ruse
@sorinr
Jan 11 2018 19:28
@zlfnhmd NO COMMENT! :) JUST KIDDING. I'LL TAKE A LOOK AND IF I CAN HELP i HELP
Kingsley
@Kingwindie
Jan 11 2018 19:43
why is my code running before i type in any number

``
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessSubmit = document.querySelector('.guessField');
var guessCount = 1;
var resetButton;
function checkGuess(){
var userGuess = Number(guessField.value);
if(guessCount = 1){
guesses.textContent = "Previous guesses";
}
guesses.textContent += userGuess + " ";

if(userGuess === randomNumber)
{
lastResult.textContent = "Congratulations! You got it right!";
lastResult.style.backgroundColor = "gray";
lastResult.style.color = "limegreen";
lowOrHi.textContent = " ";
setGameOver();
}

else if(guessCount === 10)
{
lastResult.textContent = "THE GAME IS OVER!";
setGameOver();
}

     else{
    lastResult.textContent = "Wrong Guess!"; 
    lastResult.style.backgroundColor = "red";
    lastResult.color = "white";
    if(userGuess < randomNumber)
        {
            lowOrHi.textContent = "The last guess was too low!";
        }
    else if (userGuess > randomNumber)
    {
        lowOrHi.textContent = "The last guess was too high";
    }
}
guessCount++;
guessField.value = "";
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);

``

``<h1>Number Guessing Game</h1>

<p>We have selected a randome number between 1 and 100.See if you can guess the number in 10 turns or less</p>
<br>
<p>We will tell you if your guess is too high or too low</p>

<div class="form">
<label for="guessField">Enter a guess:</label><br>
<input type="text" id="guessField" class="guessField">
<input type="submit" class="guessSubmit" value="Submit Guess">
</div>

<div class="resultParas">
<p class="guesses"> </p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>``

``

<h1>Number Guessing Game</h1>

<p>We have selected a randome number between 1 and 100.See if you can guess the number in 10 turns or less</p>
<br>
<p>We will tell you if your guess is too high or too low</p>

<div class="form">
<label for="guessField">Enter a guess:</label><br>
<input type="text" id="guessField" class="guessField">
<input type="submit" class="guessSubmit" value="Submit Guess">
</div>

<div class="resultParas">
<p class="guesses"> </p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
``

<h1>Number Guessing Game</h1>

<p>We have selected a randome number between 1 and 100.See if you can guess the number in 10 turns or less</p>
<br>
<p>We will tell you if your guess is too high or too low</p>

<div class="form">
    <label for="guessField">Enter a guess:</label><br>
    <input type="text" id="guessField" class="guessField">
    <input type="submit" class="guessSubmit" value="Submit Guess">
</div>

<div class="resultParas">
    <p class="guesses">    </p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
</div>
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit'); 
var guessSubmit = document.querySelector('.guessField'); 
var guessCount = 1;
var resetButton;
function checkGuess(){
var userGuess = Number(guessField.value);
 if(guessCount = 1){
 guesses.textContent = "Previous guesses";
 }
 guesses.textContent += userGuess + " ";

 if(userGuess === randomNumber)
        {
         lastResult.textContent = "Congratulations! You got it right!";
lastResult.style.backgroundColor = "gray";
lastResult.style.color = "limegreen";
lowOrHi.textContent = " ";
 setGameOver();
 }

   else if(guessCount === 10)
        {
            lastResult.textContent = "THE GAME IS OVER!";
            setGameOver();
        }

         else{
        lastResult.textContent = "Wrong Guess!"; 
        lastResult.style.backgroundColor = "red";
        lastResult.color = "white";
        if(userGuess < randomNumber)
            {
                lowOrHi.textContent = "The last guess was too low!";
            }
        else if (userGuess > randomNumber)
        {
            lowOrHi.textContent = "The last guess was too high";
        }
    }
    guessCount++;
    guessField.value = "";
    guessField.focus();
    }
    guessSubmit.addEventListener('click', checkGuess);
can someone help me with this,the code runs before i type in the number
VaseJS
@VaseJS
Jan 11 2018 19:50
@Kingwindie thats a lot of copied and pasted code!
Kingsley
@Kingwindie
Jan 11 2018 19:51
@VaseJS and you're saying that because?
VaseJS
@VaseJS
Jan 11 2018 19:51
i found it
Kingsley
@Kingwindie
Jan 11 2018 19:51
on MDN?
VaseJS
@VaseJS
Jan 11 2018 19:52
the effort it look like it took to do it
either way, you have invoked your code at the start, and that’s why its running.
function checkGuess(){
wait…no thats not it
JBallin
@JBallin
Jan 11 2018 20:18
@kbaig @simeydk
Simey de Klerk
@simeydk
Jan 11 2018 20:18
Sorry I disappeared for a while
JBallin
@JBallin
Jan 11 2018 20:18
what about
function SpecialArray(array) {
    this.arr = array;
}

SpecialArray.prototype.printAllValuesObjs = function() {
    this.arr.forEach(function(obj) {
        for (key in obj) {
            console.log(obj[key]);
        }
    })
}

var special = new SpecialArray([{a:1, b:2}, {c:3, d:4}]);

special.printAllValuesObjs()
// 1
// 2
// 3
// 4
Simey de Klerk
@simeydk
Jan 11 2018 20:18
why do you say extending's not great?
JBallin
@JBallin
Jan 11 2018 20:20
i guess that doesn't really solve your problem though hmm
Simey de Klerk
@simeydk
Jan 11 2018 20:21
what I want is something like this
class SetofElements extends Array {
  hasValues() {
    return this.filter(element => element.value)
  }
}
I want the convenience of set[i] = foo and set.push(foo) and all the other array goodness, but with the ability to add my own custom methods which describe my "business logic"
Aditya
@ezioda004
Jan 11 2018 20:24

@Kingwindie Its running because of this

var guessSubmit = document.querySelector('.guessSubmit'); 
var guessSubmit = document.querySelector('.guessField');

so the .guessField is overwriting and therefore running when clicked.

JBallin
@JBallin
Jan 11 2018 20:28
@simeydk you know what, i'm not sure why i said that. i'm not as familiar with JS classes, so disregard that.
Simey de Klerk
@simeydk
Jan 11 2018 20:28

My current scenario is this:
I am writing a sudoku solver. As part of this, I have the idea of a row/column/block, which primarily consists of 9 cells, so an array is a good fit. I then want a function that says "find all the numbers which haven't been entered in this row, and for each of them find all the cells that can possibly be that value".

I can do this in an external function, but the niftiest implementation, in my opinion is the extends Array with methods

because function is so tightly coupled with the object type
@JBallin I'm using them for the first time at the moment. What i know I learnt from https://eloquentjavascript.net/06_object.html. It's a pretty good book
and it's free
Kingsley
@Kingwindie
Jan 11 2018 20:32
@ezioda004 thanks
CamperBot
@camperbot
Jan 11 2018 20:32
kingwindie sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @ezioda004 |http://www.freecodecamp.org/ezioda004
JBallin
@JBallin
Jan 11 2018 20:33
@simeydk what about just compiling the code to native JS yourself using babel?
Aditya
@ezioda004
Jan 11 2018 20:34
@Kingwindie :thumbsup:
Simey de Klerk
@simeydk
Jan 11 2018 20:35
@JBallin Babel is the problem. My code works in node and in chrome directly. Babel supports class extends, unless you extend a 'buitin' such as Array
Kingsley
@Kingwindie
Jan 11 2018 20:35
@ezioda004 it's carzy what a typo can do
Simey de Klerk
@simeydk
Jan 11 2018 20:36
if you run the (transpiled) babel code, it returns an object of type Array which does doesn't have the extra methods and properties of the custom class
Aditya
@ezioda004
Jan 11 2018 20:40
@Kingwindie Yeah, its crazy, atleast js is not strict about ;. I get Java PTSD.
Kaz Baig
@kbaig
Jan 11 2018 20:41
@ezioda004 Yeah JS engines automatically put in the semicolons for you. There's a school of thought that chooses to not use them in JS at all
Simey de Klerk
@simeydk
Jan 11 2018 20:42
@JBallin here are two pens that show the issue:
Babel on: https://codepen.io/simeydk/pen/ZvovQV
Babel off: https://codepen.io/simeydk/pen/PEeEzj
JBallin
@JBallin
Jan 11 2018 20:44
@simeydk I see. Not sure what else to suggest, good luck though!
Simey de Klerk
@simeydk
Jan 11 2018 20:44
hehe, thanks
Aditya
@ezioda004
Jan 11 2018 20:44
@kbaig Thats interesting, but I'm too oldschool to stop using semicolons in js :D
Kaz Baig
@kbaig
Jan 11 2018 20:48
The youtube channel funfunfunctions writes JS that way and made a whole video about it to calm people down
Stephen James
@sjames1958gm
Jan 11 2018 20:50

@simeydk If you do

const e = new Extender()
console.log(e)

in the console

Extender []
length: 0__
proto__: Array

Which seems to imply that Extender is derived from Array

Aditya
@ezioda004
Jan 11 2018 20:51
Actually I've been watching his videos, he explains quite well and just fun to watch. I'll definitely check it out
JBallin
@JBallin
Jan 11 2018 20:51
@ezioda004 @kbaig semicolons are sometimes required (obscure cases), i wrote more about it here and the inspiration was from funfunfunction (video linked at end)
Kaz Baig
@kbaig
Jan 11 2018 20:52
@JBallin oh interesting. He was actually my source haha on the topic haha. Thanks for sharing
CamperBot
@camperbot
Jan 11 2018 20:52
kbaig sends brownie points to @jballin :sparkles: :thumbsup: :sparkles:
:cookie: 25 | @jballin |http://www.freecodecamp.org/jballin
Simey de Klerk
@simeydk
Jan 11 2018 20:53
@sjames1958gm did you run all the code in the console, or run it in the codepen with babel on? If I run it in the codepen with babel on, I get Array in the console
I need to use Babel since I want to use React, but Babel breaks extends Array, so I can't have both at the same time
Stackoverflow discussion on Babel not supporting extends array https://stackoverflow.com/questions/33832646/extending-built-in-natives-in-es6-with-babel
Leonardo de Melo
@Leonardo-demeloweb
Jan 11 2018 20:55
I just need a little help to undestand whats is wrong here. I want to proceed the value gotten on input and pass through the function:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  numberFormat = '';

  ngOnInit(): void {
    console.log(formatedNumber(12121212));
    formatedNumber(this.numberFormat);
  }
}

function convertNumber(num){
  return new Intl.NumberFormat().format(Math.round(num*10)/10);
}

function formatedNumber(num){
  if(num >= 1000000)
    return convertNumber(num/1000000)+'M';
  if(num >= 1000)
    return convertNumber(num/1000)+'k';
  return convertNumber(num);
}
<div class="wrapper">
  <input type="number" name="name" id="name" [ngModel]="numberFormat" #number />
  <label for="name" (click)="ngOnInit(number.value)">prettify</label>
</div>
Aditya
@ezioda004
Jan 11 2018 20:58
@JBallin That was an interesting read, so using ; is just better. Thanks for sharing
CamperBot
@camperbot
Jan 11 2018 20:58
ezioda004 sends brownie points to @jballin :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @jballin |http://www.freecodecamp.org/jballin
JBallin
@JBallin
Jan 11 2018 20:59
@ezioda004 @kbaig thanks for reading! glad you found it interesting. I wouldn't say using semicolons is "better", it's a preference. I like using them but others like the minimalism of omitting them.
CamperBot
@camperbot
Jan 11 2018 20:59
jballin sends brownie points to @ezioda004 and @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 374 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Kaz Baig
@kbaig
Jan 11 2018 21:00
@JBallin For me, I like using them as a means to mark up different things happening in my code - kind of improves readability for me
JBallin
@JBallin
Jan 11 2018 21:03
@kbaig can you expand on that? do you mean separating "instructions"/statements?
Aditya
@ezioda004
Jan 11 2018 21:03
@JBallin I meant better in the sense that other than the cases you mentioned it always makes the code more readable. I like them using anyway cause it reminds me of java
Kaz Baig
@kbaig
Jan 11 2018 21:06
@JBallin Things like function declarations vs assignments and statements yeah
JBallin
@JBallin
Jan 11 2018 21:08
@ezioda004 gotcha, just clarifying. i use them everywhere besides the places i mentioned (function declarations, if/else statements, loops)
JBallin
@JBallin
Jan 11 2018 21:18
@moT01 why did your codepen link have an "s" at the front of it? maybe so gitter won't show a preview? https://s.codepen.io/moT01/pen/vgOaoJ
fvdave2017
@fvdave2017
Jan 11 2018 21:36
Hello; I have not been on for a very long time. I have been doing mine own projects. I am hoping that I can get some help though!
Kaz Baig
@kbaig
Jan 11 2018 21:37
@fvdave2017 for sure!
fvdave2017
@fvdave2017
Jan 11 2018 21:37
I have been working with functions through javascript. here is the function; $("#submit").on('click', function typeSubmit(){
var H = document.querySelector('#horseText').value;
var bHorse = ['A','C','F','G','M','P','Q','S','T'];
// var fHorses =['aHorse()', 'cHorse()', 'fHorse()', 'gHorse()', 'mHorse()', 'pHorse()', 'qHorse()', 'sHorse()', 'tHorse()'];
var tHorse = ['A','C','M','P','R'];
var breedHorse, typeHorse;
if(H =="breed" || H == "Breed" || H == "breeds" || H == "Breeds"){
           breedHorse += "<button id='aHorse' class='btn-default btn-sm'>A</button>";
           breedHorse += "<button class='btn-default btn-sm' id='cHorse'>C</button>";
           breedHorse += "<button class='btn-default btn-sm' id='fHorse'>F</button>";
           breedHorse += "<button class='btn-default btn-sm' id='gHorse'>G</button>";
           breedHorse += "<button class='btn-default btn-sm' id='mHorse'>M</button>";
           breedHorse += "<button class='btn-default btn-sm' id='pHorse'>P</button>";
           breedHorse += "<button class='btn-default btn-sm' id='qHorse'>Q</button>";
           breedHorse += "<button class='btn-default btn-sm' id='sHorse'>S</button>";
           breedHorse += "<button class='btn-default btn-sm' id='tHorse'>T</button>";

          /*
          for(var i=0; i < fHorses.length; i++){
               for(var j=0; j < bHorse.length; j++){
              breedHorse += "<ul class = 'btn-toolbar oneToolbar list-unstyled'>";
              breedHorse += "<li><button class = 'btn-default btn-sm' id = ''><a href='" + fHorses[j] +"'>" + bHorse[i] + "</a></button>";
          }
          }

          breedHorse += "</ul>";
          */
          document.getElementById("Horses").innerHTML = breedHorse;

      }
       else if(H =="type" || H == "Type" || H == "types" || H == "Types"){
          for(var k=0; k < tHorse.length; k++){
              typeHorse += "<ul class = 'btn-toolbar oneToolbar list-unstyled'>";
              typeHorse += "<li><button class = 'btn-default btn-sm' id = ''>" + tHorse[k] + "</button>";
          }
          typeHorse += "</ul>";
          document.getElementById("Horses").innerHTML = typeHorse;
       }
  });
I can get the buttons to show up on the page I want them to but to call any other function from any of the buttons will not work. I am calling the functions from each button through the id indicator but nothing is happening. Also I get an 'undefined' showing up at the beginning of the buttons. I have no idea where the 'undefined' is coming from as I do not see literately no information in the google development tools for the 'undefined'. Any thoughts?
fvdave2017
@fvdave2017
Jan 11 2018 22:09
@kbaig . are you needing more information?
Zulfan Hameed
@zlfnhmd
Jan 11 2018 22:39

https://codepen.io/zlfnhmd/pen/opdGWp

So guys I finally completed my project. Big thanks to @kbaig @cmccormack @sjames1958gm

CamperBot
@camperbot
Jan 11 2018 22:39
zlfnhmd sends brownie points to @kbaig and @cmccormack and @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
api offline
api offline
Stephen James
@sjames1958gm
Jan 11 2018 22:56
@simeydk I ran the code from the js portion of codepen
@simeydk Oh, well I would not recommend extending built-ins regardless
@fvdave2017 You are using += on an unitialized value so you will get "undefined<button . . ."
@fvdave2017 How are you linking these new buttons to javascript?
David Belmares
@DavidBelmares
Jan 11 2018 23:01
I'm trying to do the "Show The Local Weather" challenge on FCC. However my code does absolutely nothing. Does someone have some tips? https://codepen.io/daveb02/pen/qpYoLG I have looked at the following pages already:
http://api.jquery.com/jquery.getjson/
https://stackoverflow.com/questions/3983088/javascript-error-uncaught-syntaxerror-unexpected-end-of-input
By the way, I am just trying to get the code to display output from the API at all, I'm not trying to make it detect the user's location yet
Stephen James
@sjames1958gm
Jan 11 2018 23:05
@DavidBelmares Your callback function needs a parameter so it can receive the json from the API request
@DavidBelmares Also you need quotes around your id in the HTML
David Belmares
@DavidBelmares
Jan 11 2018 23:06
Alright, but how would I use the parameter
Stephen James
@sjames1958gm
Jan 11 2018 23:09
@DavidBelmares Assume the parameter was json which will be an object containing the returned data
    $("#weather-container").text(JSON.stringify(json));
Use stringify to put it in a form that can be displayed
David Belmares
@DavidBelmares
Jan 11 2018 23:48
@sjames1958gm Thanks!
CamperBot
@camperbot
Jan 11 2018 23:48
davidbelmares sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8847 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 11 2018 23:49
@DavidBelmares :+1: