These are chat archives for FreeCodeCamp/HelpJavaScript

11th
Jan 2018
Vasiliy Pokotylo
@asyntrail
Jan 11 2018 04:44
Hi all!
Please, tell me! Why do I get result 1 instead of 2 in this loop?
var myArr = [[2],[2]];
var total = 0;
for (var i = 0; i < myArr.length; i++) {
total += i;
}
console.log(total);
Bryan Reese
@breese8009
Jan 11 2018 05:06
@asyntrail cause i is 0 indexed
starts at 0
Bennett Elder
@bennett-elder
Jan 11 2018 07:16
The first time through the loop it adds 0 to 0
The second time it adds 1 to 0
RISHABH SETH
@coding70
Jan 11 2018 09:20

hi,
need help in writing a regex

I want to highlight the text when it is searched.
But I'm unable to write a proper regex. Basically, my search term is present within the <span> tags as a class name and also the text is there outside the <span> tags.

On search of that term it is highlighting the text within the <span> also due to which the span tags opens up and breaks.
So I wrote this regex -> var searchRegExp = new RegExp('(' + searchTerm + ') +"(?!([^<]+)?>)"', 'gi');
Now the problem is that if my search term is having > ,this also is not highlighted when searched.
Help me with the Regex.

This is my Regex which is not working properly -> var searchRegExp = new RegExp('(' + searchTerm + ') +"(?!([^<]+)?>)"', 'gi');

the search term is passed into the javascript to highlight and that search term traverse over the texts to find the search term and highlights that term if present. Now I want the search term to exclude those sections of the texts where the search term is present within the <span> tags and don't want to highlight those. for that i wrote the Regex, but that regex is excluding the search term if that search term is present with the > in the texts where i want to highlight.

Unwana Essien
@afixoftrix
Jan 11 2018 09:58
Got a Media Query problem. The app I am building doesnt change when I adjust the viewport in chrome via the console/browser separator slider.
import styled from 'styled-components'

const smallWidth = '400px',
tabWidth = '700px',
width = '1060px',// width of a desktop question container
height = '750px',// height of question container
smallMageHt = '240px',// height of a mobile image answer
smallMageWd = '190px',// width of a mobile image answer
tablet = '1060px',//tablet width delimiter
mobile = '700px';//mobile width delimiter

/*
AnswerContainer deals with handeling NON-IMAGE answer layout.
*/
export const AnswerContainer = styled.div `
    font-size: 20px;
    margin: 0 auto;
    height: ${height};
    width: ${width};
    display: grid;
    grid-template-rows: 200px 50px 50px 50px 50px 50px 200px;
    grid-row-gap: 10px;

/**
 * Mobile Manipulation
 */
    @media only screen and (min-device-width: ${mobile}) {
        width: ${smallWidth};
        background: palevioletred;
    }

/**
 * Tablet Manipulation
 */
    @media only screen and (min-device-width: ${tablet}) {
        width: ${tabWidth};
        background: palevioletred;
    }
`;
It only adjusts to the tablet view.
I need it to adjust to the mobile view
alpox
@alpox
Jan 11 2018 10:01
@afixoftrix Didn't you want max-device-width instead of min-device-width?
Unwana Essien
@afixoftrix
Jan 11 2018 10:02
I had it at max-width initially. It didnt help. Maybe adding device might help.
alpox
@alpox
Jan 11 2018 10:03
max-width was usually enough for me
Maybe also exchange the order of the mobile and tablet media queries
I think thats the main problem
Unwana Essien
@afixoftrix
Jan 11 2018 10:05
yea it still doesnt change to mobile width.
alpox
@alpox
Jan 11 2018 10:05
Even with reordering?
Can you show what you have?
Unwana Essien
@afixoftrix
Jan 11 2018 10:05
Oh wait i haven’t reordered
alpox
@alpox
Jan 11 2018 10:06
I believe if you put max-device-width it will not show right on a computer screen
Unwana Essien
@afixoftrix
Jan 11 2018 10:07
Ok it was the order, sorry about confusion.
alpox
@alpox
Jan 11 2018 10:07
Okay, np :-)
Yea the thing is that the definitions for the tablet always hold also on mobile size. CSS gets evaluated top down
So the mobile styles apply - and get overridden by the tablet styles
If you reorder as you did now, the mobile styles override the tablet styles for all sizes in which it applies
Unwana Essien
@afixoftrix
Jan 11 2018 10:11
I see thanks.
Quantomistro3178
@Quantomistro3178
Jan 11 2018 11:09
So I was practising JS before diving into the projects (or rather putting those projects off cuz I'm lazy) and I made this:
https://codepen.io/Quantomistro3178/pen/qpoaaN
so i was wondering, how can i make the transitions of the colours (and even fonts if possible) without using css animations?
i mean, make the transitions smoother without css @keyframes
Blauelf
@Blauelf
Jan 11 2018 11:33
@Quantomistro3178 You mean something like transition: background-color 2s ease;?
On transition, see for example https://css-tricks.com/almanac/properties/t/transition/
Christopher
@bradley1492
Jan 11 2018 11:41

@Masd925 Hey,
yesterday I showed some code relating counting occurences in an array.

You suggested manipulating the array itself, instead of creating an object.

But on google, I can only find explanations, where people create objects in order to count value occurences in arrays.

Could you give me a further tip here, or an example? Thanks :)

Here's the example:
https://codepen.io/bradley1492/pen/eyMgpr

Would that be where reduce comes into place?

CamperBot
@camperbot
Jan 11 2018 11:41
bradley1492 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4648 | @masd925 |http://www.freecodecamp.org/masd925
Markus Kiili
@Masd925
Jan 11 2018 11:46
@bradley1492 Instead of counting, you could first get rid of repeating elements in the arrays. That is to leave one of each number there. That way rest of the problem is easier to solve. Then you first need to figure out how to make symmetric difference of two arrays. You will then generalize it to several arrays. With two arrays, you could concat the arrays and remove those numbers that are not single. You could use filter method on both phases and reduce on generalizing from two to several arguments (arrays).
Christopher
@bradley1492
Jan 11 2018 12:16
@Masd925 Thanks for your detailed explanation. I will try to build something up, as I am myself not satisfied, with the current code being messy :)
CamperBot
@camperbot
Jan 11 2018 12:16
bradley1492 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Christopher
@bradley1492
Jan 11 2018 13:08
@Masd925 Just out of interest, couldn't I concat both arrays at the beginnning, and then look for duplicates?
Markus Kiili
@Masd925
Jan 11 2018 13:08
@bradley1492 No, because original arrays can have duplicates which is different from two arrays having the same number.
Christopher
@bradley1492
Jan 11 2018 13:09
@Masd925 Thx thats clear :)
CamperBot
@camperbot
Jan 11 2018 13:09
bradley1492 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4649 | @masd925 |http://www.freecodecamp.org/masd925
Quantomistro3178
@Quantomistro3178
Jan 11 2018 13:56
@Blauelf thanks mate!
CamperBot
@camperbot
Jan 11 2018 13:56
quantomistro3178 sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star2: 4672 | @blauelf |http://www.freecodecamp.org/blauelf
Keon Samuel
@keonsam
Jan 11 2018 15:17
Is it me or is github down?
Kaz Baig
@kbaig
Jan 11 2018 15:19
not loading for me either @keonsam
Keon Samuel
@keonsam
Jan 11 2018 15:19
right when I made a long pull request comment.
Christopher
@bradley1492
Jan 11 2018 15:23
Hey, why is this filter function returning such funny values such as only 4 here?
https://codepen.io/bradley1492/pen/vpjyez?editors=0011
It should log out all the numbers in the array, as there are no duplicates
Kaz Baig
@kbaig
Jan 11 2018 15:24
@bradley1492 you've got the callback's parameters backwards
the value is the first param and the index is the second
Christopher
@bradley1492
Jan 11 2018 15:25
@kbaig thanks :)
CamperBot
@camperbot
Jan 11 2018 15:25
bradley1492 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 507 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 11 2018 15:27
@bradley1492 consider Array.includes though
to use within your callback
Also, it would technically be better to use the filter callback's third param, the original array, within the callback rather than the global array reference
Christopher
@bradley1492
Jan 11 2018 15:51
@kbaig how would I include Array.includeshere into the callback?
Kaz Baig
@kbaig
Jan 11 2018 15:51
rather than calling Array.indexOf
hmm actually if you're trying to do uniques, indexOf might be the best approach nvm
Zulfan Hameed
@zlfnhmd
Jan 11 2018 15:54
<!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

Christopher
@bradley1492
Jan 11 2018 15:55
@kbaig okay I'll try to use Array.includes
Kaz Baig
@kbaig
Jan 11 2018 15:57
@bradley1492 nah I think you're better off comparing indices using indexOf
Christopher
@bradley1492
Jan 11 2018 15:59
@kbaig Okay, I couldn't figure out to replace indexOfwith Array.includes anyway
Stephen James
@sjames1958gm
Jan 11 2018 16:01
@bradley1492 FYI, there is a lastIndexOf function as well that might be useful
Kaz Baig
@kbaig
Jan 11 2018 16:01
@bradley1492 to clarify, here's the change I was suggesting
var a = [4,5,6,6];

var unique = a.filter(function(item, pos, arr){
  return arr.indexOf(item) == pos;
})

console.log(unique);
Stephen James
@sjames1958gm
Jan 11 2018 16:03
@zlfnhmd
var dateStamp = new Date();
This is a local variable to the constructor, not a property on the returned object so it is not visible.
this.dateStamp = new Data();
is what you need
Christopher
@bradley1492
Jan 11 2018 16:03
@kbaig Okay, thanks the arr as argument changes what? I can't understand out of the mdn doc
CamperBot
@camperbot
Jan 11 2018 16:03
bradley1492 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Kaz Baig
@kbaig
Jan 11 2018 16:04
@bradley1492 it just isolates things further. It just represents the original array that you're calling filter on. It doesn't change anything here but if you happened to decide to mutate a within your callback, you could run into issues
Christopher
@bradley1492
Jan 11 2018 16:05
@kbaig Ah okay, that I can understand. :) Thanks, I'll just use it as default then from now on.
@sjames1958gm Thanks for that tip, I can't really see the advantage of lastIndexOfhere, could you give me a tip on this?
CamperBot
@camperbot
Jan 11 2018 16:08
bradley1492 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8840 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Zulfan Hameed
@zlfnhmd
Jan 11 2018 16:15
@sjames1958gm thank you
CamperBot
@camperbot
Jan 11 2018 16:15
zlfnhmd sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8841 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Zulfan Hameed
@zlfnhmd
Jan 11 2018 16:19

@zlfnhmd
var dateStamp = new Date();
This is a local variable to the constructor, not a property on the returned object so it is not visible.
this.dateStamp = new Data();
is what you need

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

Stephen James
@sjames1958gm
Jan 11 2018 16:23
@bradley1492 If a element is duplicated then lastIndexOf is !== indexOf
Zulfan Hameed
@zlfnhmd
Jan 11 2018 19:25

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
Christopher McCormack
@cmccormack
Jan 11 2018 19:41
@zlfnhmd Check if .siblings(".replyArea") actually returns something for the first post, it may not until you've added a second
Zulfan Hameed
@zlfnhmd
Jan 11 2018 19:49

@zlfnhmd Check if .siblings(".replyArea") actually returns something for the first post, it may not until you've added a second

It does

Christopher McCormack
@cmccormack
Jan 11 2018 19:59
@zlfnhmd I think your issue is the append line is under your event listeners so jquery isn't actually finding the class you specified until after the first post is created. Move the following line underneath your newCommentMarkup assignement:
var newCommentMarkup = ...
$("#commentsContainer").append(newCommentMarkup);
Onome Sotu
@onomesotu
Jan 11 2018 20:00
Hello guys, I have problem with processing this intermediate algorithm scripting problem
function convertToRoman(num) { return num; }
Is there a js method to get roman numerals similar to string.prototype.charCodeAt()
Kaz Baig
@kbaig
Jan 11 2018 20:01
Nope
You just gotta manually work through the logic
Onome Sotu
@onomesotu
Jan 11 2018 20:02
hmm.. So can i implement it using the array data structure?
it seems like a lot of work
Kaz Baig
@kbaig
Jan 11 2018 20:03
How do you propose using arrays
Onome Sotu
@onomesotu
Jan 11 2018 20:03
Or can you point me in the right direction?
Something like [i, ii, iii, iv, v, ....]
Kaz Baig
@kbaig
Jan 11 2018 20:04
Right but how would that factor into your workflow
Jason Luboff
@JLuboff
Jan 11 2018 20:04
@cmccormack Welcome back as a married man! :clap: (and on that note...its lunch..I'll be back)
Kaz Baig
@kbaig
Jan 11 2018 20:04
@cmccormack congrats!!!!
Christopher McCormack
@cmccormack
Jan 11 2018 20:04
@JLuboff Thanks! I'd like to say it's great to be back but I was in Maui...
CamperBot
@camperbot
Jan 11 2018 20:04
cmccormack sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2292 | @jluboff |http://www.freecodecamp.org/jluboff
Onome Sotu
@onomesotu
Jan 11 2018 20:05
@kbaig I was thinking having different sets of arrays corresponding to the number of digits
Zulfan Hameed
@zlfnhmd
Jan 11 2018 20:05
@cmccormack Will try that out and get back to you
Christopher McCormack
@cmccormack
Jan 11 2018 20:05
@kbaig thanks :)
CamperBot
@camperbot
Jan 11 2018 20:05
cmccormack sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 11 2018 20:05
@cmccormack the idea of marriage scares me for cost reasons, idk when the gf and I will get there haha
Christopher McCormack
@cmccormack
Jan 11 2018 20:06
@kbaig do it when you can afford it, no reason to rush. We've been together 8 years and engaged 3
Kaz Baig
@kbaig
Jan 11 2018 20:06
@onomesotu In that case, wouldn't it be better to have an object with the keys and values denoting roman to digits
Zulfan Hameed
@zlfnhmd
Jan 11 2018 20:08
@cmccormack That worked. thanks.
This is why I love programming.
CamperBot
@camperbot
Jan 11 2018 20:08
zlfnhmd sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1291 | @cmccormack |http://www.freecodecamp.org/cmccormack
Kaz Baig
@kbaig
Jan 11 2018 20:08
@onomesotu imo best way would be to go through the list of logical rules for conversion and just stepping through them in your algorithm, using a dictionary type object to switch between roman and regular digits
Christopher McCormack
@cmccormack
Jan 11 2018 20:08
@zlfnhmd :D :thumbsup:
Onome Sotu
@onomesotu
Jan 11 2018 20:08
@kbaig yeah that is a good idea
Kaz Baig
@kbaig
Jan 11 2018 20:08
@cmccormack well it seems like it'll soon be my only shot at staying in the country sooooooo
Christopher McCormack
@cmccormack
Jan 11 2018 20:09
@kbaig you can always elope :)
something really small can still be great
Kaz Baig
@kbaig
Jan 11 2018 20:09
@cmccormack if I want to get kicked out of the family maybe :D
Christopher McCormack
@cmccormack
Jan 11 2018 20:09
we only did close family for the wedding and we'll do something bigger at our house in a month or so
way cheaper that way
Onome Sotu
@onomesotu
Jan 11 2018 20:10
@kbaig thanks I will figure something out and bring it up
CamperBot
@camperbot
Jan 11 2018 20:10
onomesotu sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Jan 11 2018 20:11
@cmccormack the short explanation of my obstacles is that I'm brown :)
Christopher McCormack
@cmccormack
Jan 11 2018 20:12
@kbaig I won't pretend I understand your obstacles but I do wish you luck in whatever you choose :four_leaf_clover: :D
Kaz Baig
@kbaig
Jan 11 2018 20:12
solid emoji choice lmao
Christopher McCormack
@cmccormack
Jan 11 2018 20:13
haha
Jason Luboff
@JLuboff
Jan 11 2018 21:18
@cmccormack I thought we were close? Clean invite to Maui :(
:P
Diego Mayer
@Chrono79
Jan 11 2018 21:22
Maui, T_T
Thank God we have air conditioners here, it's 40ºC outside today
Kaz Baig
@kbaig
Jan 11 2018 21:23
It's a deceptively warm day today at 15C
a week ago, it was -25
Jason Luboff
@JLuboff
Jan 11 2018 21:24
@Chrono79 Damn... 104 F? Its 67 F here right now. Comfortable enough
Diego Mayer
@Chrono79
Jan 11 2018 21:25
In fact, it's a little less, but feels like 40
What's the word/s for thermal sensation if there is/are?
Jason Luboff
@JLuboff
Jan 11 2018 21:27
What do you mean?
Diego Mayer
@Chrono79
Jan 11 2018 21:34
The real temp against the "feels like"
thermal sensation is a maybe too literal translation of how we call it
Jason Luboff
@JLuboff
Jan 11 2018 21:35
Oh...ya we just say "It's XX F but feels like YY F"
Not sure the actual word lol
Diego Mayer
@Chrono79
Jan 11 2018 21:35
Then feels like it is ;)
Jason Luboff
@JLuboff
Jan 11 2018 21:39
So... I sort of get how to use C# lol
Diego Mayer
@Chrono79
Jan 11 2018 21:44
Good!
I translated a kata from C++ to javascript, really painful :P
C# more like Java
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:
:star2: 1292 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 8843 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:cookie: 516 | @kbaig |http://www.freecodecamp.org/kbaig
Stephen James
@sjames1958gm
Jan 11 2018 22:55
@zlfnhmd :+1: