These are chat archives for FreeCodeCamp/Help

19th
Jan 2015
Jimmy Bryant II
@JimBry
Jan 19 2015 15:47
I'm having trouble adding jQuery to my site, do I need to create a separate js folder or can it be embedded in the body of my HTML?
Kamal Sharif
@ksharifbd
Jan 19 2015 15:48
It can be done in both way. But having a seperate JS folder is recommended
Ammar Ali Shah
@AmmarAliShah
Jan 19 2015 15:48
@JimBry just download the script from jquery.com and add it usind the <script> tag
I usually go with "_scripts" to separate assets from site structure
the _ distinguishes assets from site directories
Jimmy Bryant II
@JimBry
Jan 19 2015 15:50
This is my HTML, but it still doesn't seem to work.
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

  <div class="first">
    <h2>THOUGHTS</h2>
    <ul>
      <li class="twitter">
        <a href="https://twitter.com/savebutter">twitter</a>
      </li>
    </ul>
  </div>
  <div class="second">
    <h2>PROJECTS</h2>
    <ul>
      <li class="github">
        <a href="https://github.com/JimBry">github</a>
      </li>
    </ul>
  </div>
  <div class="third">
    <h2>ESSAYS</h2>
    <ul>
      <li class="stanford">
        <a href="">stanford</a>
      </li>
    </ul>
  </div>
  <div class="fourth">
    <h2>FUN</h2>
    <ul>
      <li class="instagram">
        <a href="http://instagram.com/tokyomyth/">instagram</a>
      </li>
    </ul>
  </div>

    <script>
        $('.second').hover(function() {
            $('.github').toggleClass('animated shake')
        });
    </script>
</body>
</html>
Kamal Sharif
@ksharifbd
Jan 19 2015 15:54
Are you sure the class name is "animated shake"?
Jimmy Bryant II
@JimBry
Jan 19 2015 15:55
@ksharifbd Yeah I got it from challenge 17 http://www.freecodecamp.com/challenges/17
Jimmy Bryant II
@JimBry
Jan 19 2015 16:21
This is what I'm trying to test http://codepen.io/anon/pen/QwvGRa
Jordan Wood
@jordanw
Jan 19 2015 16:47
@JimBry Did you figure it out?
Jimmy Bryant II
@JimBry
Jan 19 2015 16:48
@JordanW Trying, but no haha
Not sure what I am missing in my HTML document in order to utilize jQuery and Animate.css (http://daneden.github.io/animate.css/)
Jordan Wood
@jordanw
Jan 19 2015 16:50
@JimBry Gotcha. Yeah I'm looking at that page right now.
@JimBry Where are you trying to get this to work?
Jimmy Bryant II
@JimBry
Jan 19 2015 16:53
Thanks! I tried adding some scripts to my <head> but that didn't seem to help either.
<head>
    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <link rel="js" href="js/main.js">

    <script type="text/javascript" src="main.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>
Jordan Wood
@jordanw
Jan 19 2015 16:54
It's working in the codepen you posted.
Jimmy Bryant II
@JimBry
Jan 19 2015 16:57
@JordanW Yeah I know, the only problem is I can't get it to do that from my personal site.
Jordan Wood
@jordanw
Jan 19 2015 16:59
@JimBry What folder do you have the animate.min.css file in?
Jimmy Bryant II
@JimBry
Jan 19 2015 16:59
It's either the jQuery itself or I am not linking the correct jQuery file to my HTML file. That's what I think is the overall issue.
I don't have it in a folder I got it from this site http://daneden.github.io/animate.css/
should I have created a folder?
Jordan Wood
@jordanw
Jan 19 2015 17:00
Yeah you need to include that
codepen is deceiving cause it does it for you.
or just throw this in
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
That will pull the file in from a content delivery network. Like you're doing with the jQuery file,
John Sanchez
@john8801
Jan 19 2015 17:04
anyone up for coderbyte pairing?
im almost done with them and need a bit of help
Jimmy Bryant II
@JimBry
Jan 19 2015 17:05
Okay this is my <head> now, but it still doesnt seem to work. I have the jQuery in a seperate file called main.js
<head>
    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="animate.min.css">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <link rel="js" href="js/main.js">

    <script type="text/javascript" src="main.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>
Jordan Wood
@jordanw
Jan 19 2015 17:08
@JimBry Well...Bummer. Seems like something might be wrong with your folder/file structure.
Nathan
@terakilobyte
Jan 19 2015 17:08
are you getting any error messages in the console?
MychaelZ
@MychaelZ
Jan 19 2015 17:09
instead of link use script
and instead of href use src
Jordan Wood
@jordanw
Jan 19 2015 17:09
This message was deleted
Jimmy Bryant II
@JimBry
Jan 19 2015 17:11
@MychaelZ do I still need rel="stylesheet"?
MychaelZ
@MychaelZ
Jan 19 2015 17:11
no
tell me what happens
Jimmy Bryant II
@JimBry
Jan 19 2015 17:18

Do I need these? I created a file called "main.js" that includes the jQuery and that file is inside of a folder called "js".

It still didn't work, but I think below is the reason why I just don't know how to word my file path correctly I think.

<link rel="js" href="js/main.js">

    <script type="text/javascript" src="main.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Jordan Wood
@jordanw
Jan 19 2015 17:19
<script type="text/javascript" src="js/main.js"></script>
you don't need the link
MychaelZ
@MychaelZ
Jan 19 2015 17:20
im pretty sure u can't link a js file
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

</head>
<body>

  <div class="first">
    <h2>THOUGHTS</h2>
    <ul>
      <li class="twitter">
        <a href="https://twitter.com/savebutter">twitter</a>
      </li>
    </ul>
  </div>
  <div class="second">
    <h2>PROJECTS</h2>
    <ul>
      <li class="github">
        <a href="https://github.com/JimBry">github</a>
      </li>
    </ul>
  </div>
  <div class="third">
    <h2>ESSAYS</h2>
    <ul>
      <li class="stanford">
        <a href="">stanford</a>
      </li>
    </ul>
  </div>
  <div class="fourth">
    <h2>FUN</h2>
    <ul>
      <li class="instagram">
        <a href="http://instagram.com/tokyomyth/">instagram</a>
      </li>
    </ul>
  </div>

    <script>
        $('.second').hover(function() {
            $('.github').toggleClass('animated shake')
        });
    </script>
</body>
</html>
replace it with this
Jimmy Bryant II
@JimBry
Jan 19 2015 17:25
Okay I made the changes to the head, it is still not working, but @terakilobyte I do get some errors in the console in regards to my js file.
$('.first').hover(function() {
  $('.twitter').toggleClass('animated fadeInRight');
});

$('.second').hover(function() {
  $('.github').toggleClass('animated shake');
});                  

$('.third').hover(function() {
  $('.stanford').toggleClass('animated shake');
});

$('.fourth').hover(function() {
  $('.instagram').toggleClass('animated shake');
});
MychaelZ
@MychaelZ
Jan 19 2015 17:28
what are the errors saying?
also enter '$' into the console and tell me what returns
Jimmy Bryant II
@JimBry
Jan 19 2015 17:33
My error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
jquery-migrate-1.2.1.min.js:2 Uncaught ReferenceError: jQuery is not defined
$
function $(selector, [startNode]) { [Command Line API] }
MychaelZ
@MychaelZ
Jan 19 2015 17:34
okay its linking correctly
do u have screen hero?
Jimmy Bryant II
@JimBry
Jan 19 2015 17:36
No I don't think screen hero supports Linux
MychaelZ
@MychaelZ
Jan 19 2015 17:37
alright what file is this stored at
$('.first').hover(function() {
  $('.twitter').toggleClass('animated fadeInRight');
});

$('.second').hover(function() {
  $('.github').toggleClass('animated shake');
});                  

$('.third').hover(function() {
  $('.stanford').toggleClass('animated shake');
});

$('.fourth').hover(function() {
  $('.instagram').toggleClass('animated shake');
});
Jordan Wood
@jordanw
Jan 19 2015 17:37
K I got it working...
<!DOCTYPE html>
<head>
    <!-- <link rel="stylesheet" href="stylesheets/main.css">
 -->
    <link rel="stylesheet" href="animate.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
    <title>Jimmy</title>
</head>
<body>

  <div class="first">
    <h2>THOUGHTS</h2>
    <ul>
      <li class="twitter">
        <a href="https://twitter.com/savebutter">twitter</a>
      </li>
    </ul>
  </div>
  <div class="second">
    <h2>PROJECTS</h2>
    <ul>
      <li class="github">
        <a href="https://github.com/JimBry">github</a>
      </li>
    </ul>
  </div>
  <div class="third">
    <h2>ESSAYS</h2>
    <ul>
      <li class="stanford">
        <a href="">stanford</a>
      </li>
    </ul>
  </div>
  <div class="fourth">
    <h2>FUN</h2>
    <ul>
      <li class="instagram">
        <a href="http://instagram.com/tokyomyth/">instagram</a>
      </li>
    </ul>
  </div>

    <script>
    window.onload = function() {
        $('.second').hover(function() {
            $('.github').toggleClass('animated shake')
        });
    };
    </script>
</body>
</html>
And put local copies of jquery and animate.css in the same folder as your main.html file. Just to see if it works for you.
Jimmy Bryant II
@JimBry
Jan 19 2015 17:39
@MychaelZ That file is stored in my js folder that is within my Official Site folder /home/jimmay/Official Site/js the file name is main.js
MychaelZ
@MychaelZ
Jan 19 2015 17:40
<head>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>
</head>
<body>

  <div class="first">
    <h2>THOUGHTS</h2>
    <ul>
      <li class="twitter">
        <a href="https://twitter.com/savebutter">twitter</a>
      </li>
    </ul>
  </div>
  <div class="second">
    <h2>PROJECTS</h2>
    <ul>
      <li class="github">
        <a href="https://github.com/JimBry">github</a>
      </li>
    </ul>
  </div>
  <div class="third">
    <h2>ESSAYS</h2>
    <ul>
      <li class="stanford">
        <a href="">stanford</a>
      </li>
    </ul>
  </div>
  <div class="fourth">
    <h2>FUN</h2>
    <ul>
      <li class="instagram">
        <a href="http://instagram.com/tokyomyth/">instagram</a>
      </li>
    </ul>
  </div>

    <script>
        $('.second').hover(function() {
            $('.github').toggleClass('animated shake')
        });
    </script>
</body>
</html>
use only this for ur html at first
do not link ur main.js yet
see if this works first
Jimmy Bryant II
@JimBry
Jan 19 2015 17:44
@MychaelZ That didn't work as well
MychaelZ
@MychaelZ
Jan 19 2015 17:44
okay what is the console saying
put '$' again in the console and see what it returns
also tell me the errors
Jimmy Bryant II
@JimBry
Jan 19 2015 17:46
Where should I go to get put local copies of jquery and animate.css?
MychaelZ
@MychaelZ
Jan 19 2015 17:46
don't do that yet let's first see why this isn't linking
do u have teamviewer?
Jordan Wood
@jordanw
Jan 19 2015 17:47
lol...
MychaelZ
@MychaelZ
Jan 19 2015 17:48
i've never experienced so much trouble with linking jQuery lol
Jimmy Bryant II
@JimBry
Jan 19 2015 17:48
@MychaelZ Yes I do! ahah I know thankyou greatly though
Jordan Wood
@jordanw
Jan 19 2015 17:49
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheets/main.css">

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

    <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <title>Jimmy</title>
</head>
<body>

  <div class="first">
    <h2>THOUGHTS</h2>
    <ul>
      <li class="twitter">
        <a href="https://twitter.com/savebutter">twitter</a>
      </li>
    </ul>
  </div>
  <div class="second">
    <h2>PROJECTS</h2>
    <ul>
      <li class="github">
        <a href="https://github.com/JimBry">github</a>
      </li>
    </ul>
  </div>
  <div class="third">
    <h2>ESSAYS</h2>
    <ul>
      <li class="stanford">
        <a href="">stanford</a>
      </li>
    </ul>
  </div>
  <div class="fourth">
    <h2>FUN</h2>
    <ul>
      <li class="instagram">
        <a href="http://instagram.com/tokyomyth/">instagram</a>
      </li>
    </ul>
  </div>

    <script>
    window.onload = function() {
        $('.second').hover(function() {
            $('.github').toggleClass('animated shake')
        });
    };
    </script>
</body>
</html>
Try that.
MychaelZ
@MychaelZ
Jan 19 2015 17:50
can u pm me ur id
Jimmy Bryant II
@JimBry
Jan 19 2015 17:51
@JordanW That works! What did you do?
Jordan Wood
@jordanw
Jan 19 2015 17:51
Fixed the cdn for including the animate.css file
and added the window.onload to the jquery
:)
MychaelZ
@MychaelZ
Jan 19 2015 17:52
great job
Jimmy Bryant II
@JimBry
Jan 19 2015 17:53
Cool thanks for the help! @JordanW @MychaelZ
Jordan Wood
@jordanw
Jan 19 2015 17:53
@JimBry Sure thing. Let me know if you need any more help.
Evan Davis
@davisec52
Jan 19 2015 19:04

Good afternoon, everybody. I was wondering if someone could help me understand why the second and third statements are true. My conditional statement is supposed to be saying that each letter must be preceded by and followed by "+".

Here is the first statement that evaluates to true as I expected.


function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) === "+" && str.charAt(str.indexOf(str[i]) - 1) === "+") {
                return true;
            }
            else
            {
                return false;
            }
        }
    }
}
sym("+t+y+");

Here is the second statment, which also evaluates as true.


function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) === "+" && str.charAt(str.indexOf(str[i]) - 1) === "+") {
                return true;
            }
            else
            {
                return false;
            }
        }
    }
}
sym("+t+y");

And here is the third statment, also evaluating to true.


function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) === "+" && str.charAt(str.indexOf(str[i]) - 1) === "+") {
                return true;
            }
            else
            {
                return false;
            }
        }
    }
}
sym("+t+yy+");
Justin Rogers
@yaskyj
Jan 19 2015 19:23
@davisec52 In all of those cases the '+t+' will return true from the function.
Evan Davis
@davisec52
Jan 19 2015 19:24
@yaskyj I understand that +t+ will return true, but why do the other two return true?
@yaskyj Sorry, right. the single instance +t+ is causing all to return true.
Justin Rogers
@yaskyj
Jan 19 2015 19:25
@davisec52 Yep
Evan Davis
@davisec52
Jan 19 2015 19:25
How do I force the scope to apply to all letters?
Justin Rogers
@yaskyj
Jan 19 2015 19:26
You could just the one 'if' statement to return false if it's not matched and return true from the function otherwise.
Evan Davis
@davisec52
Jan 19 2015 19:27
Sorry, could you restate that?
Justin Rogers
@yaskyj
Jan 19 2015 19:29
Something like this
function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) !== "+" || str.charAt(str.indexOf(str[i]) - 1) !== "+") {
                return false;
            }
        }
    }
    return true;
}
sym("+t+yy+");
That appears to be working.
Evan Davis
@davisec52
Jan 19 2015 19:33
@yaskyj My mouse batteries needed changing.
@yaskyj I have tried that. When I change the statement to use !==, I get false on sym("+t+y+y+");
Justin Rogers
@yaskyj
Jan 19 2015 19:37
I get true.
Evan Davis
@davisec52
Jan 19 2015 19:37
Oops, never mind.
Justin Rogers
@yaskyj
Jan 19 2015 19:38
What was wrong?
Evan Davis
@davisec52
Jan 19 2015 19:39
Yes, comes out true. However, I think that repli.it makes boolean exceptions just for me.
I needed to change the return.
Justin Rogers
@yaskyj
Jan 19 2015 19:40
Cool. So it's working now?
Evan Davis
@davisec52
Jan 19 2015 19:41
But I think that also allows statements like sym("+t+y+9y+"); to evaluate as true.
Justin Rogers
@yaskyj
Jan 19 2015 19:45
That's strange.
Evan Davis
@davisec52
Jan 19 2015 19:48
Do you get the same result?
Justin Rogers
@yaskyj
Jan 19 2015 19:48
I did, what about this one:
function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) === "+" && str.charAt(str.indexOf(str[i]) - 1) === "+") {
                continue;
            }
        }
        else {
            return false;
        }
    }
    return true;
}
Nvm, that one isn't returning true correctly.
Evan Davis
@davisec52
Jan 19 2015 19:50
What is the "continue:" statment?
Justin Rogers
@yaskyj
Jan 19 2015 19:51
If they both return true, it should continue going through the loop.
And it should have been a '&&'
Evan Davis
@davisec52
Jan 19 2015 19:53
I tried adding another var, pattern2. However, when I check it, I get a blank return. Repl.it just gives a blank return.
function sym(str) {
    var pattern = /[a-zA-Z]/g;
    var pattern2 = /[^\d^!^@^#^%^&^*^\$^\^\^\-]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) !== "+" && str.charAt(str.indexOf(str[i]) - 1) !== "+") {
                if(str[i].match(pattern2)) {
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }
    }
}
sym("+t+y+9y+");
Evan Davis
@davisec52
Jan 19 2015 19:59
I made a change to pattern2, but it did not make any difference. I still get a blank response when I check it.
function sym(str) {
    var pattern = /[a-zA-Z]/g;
    var pattern2 = /[0-9!@#\$%\^&\*\?]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str.charAt(str.indexOf(str[i]) + 1) !== "+" && str.charAt(str.indexOf(str[i]) - 1) !== "+") {
                if(str[i].match(pattern2)) {
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }
    }
}
sym("+t+y+9y+");
Justin Rogers
@yaskyj
Jan 19 2015 20:05
This one works correctly in all of the given cases so far:
function sym(str) {
    var pattern = /[a-zA-Z]/g;
    for(var i = 0; i < str.length; i++) {
        if(str[i].match(pattern)) {
            if(str[i + 1] !== "+" || str[i - 1] !== "+") {
                return false
            }
        }
    }
    return true;
}
Evan Davis
@davisec52
Jan 19 2015 20:07
Yes! I get the same results.
If I could ask some questions . . .
Justin Rogers
@yaskyj
Jan 19 2015 20:07
What's up?
Evan Davis
@davisec52
Jan 19 2015 20:10
I guess I am having trouble consistently understanding the logic.
for example, in the first code I posted, I though the && statement would cover all cases
but in fact it appears that if one segment of a string meets the condition then the entire string i evaluated as true.
Ben Clist
@BenClist
Jan 19 2015 20:12
In your most recent one @davisec52 all the + symbols fail the first if, all the letters and the 9 fail the second if
Justin Rogers
@yaskyj
Jan 19 2015 20:12
It will only check the first item that matches the regex.
Ben Clist
@BenClist
Jan 19 2015 20:12
hence you get no return
Evan Davis
@davisec52
Jan 19 2015 20:13
@BenClist Thank you!
Ben Clist
@BenClist
Jan 19 2015 20:14
sorry, the 9 actually fails the first if as well, but I think you see the point
Evan Davis
@davisec52
Jan 19 2015 20:15
I see I'm tripping over what I think I'm saying vs what I'm actually saying.
Ben Clist
@BenClist
Jan 19 2015 20:15
your 2nd if statement says if the character at -1 is NOT a + AND if the character at +1 is NOT a + then continue
at no point in your string does that occur with a letter
they've all got a + next to them, so they all fail the if statement
Justin Rogers
@yaskyj
Jan 19 2015 20:16
I think the nested charAt, indexOf, str might also be obfuscating what's going on.
Evan Davis
@davisec52
Jan 19 2015 20:20
The intention was to say if the character at -1 is NOT a "+" and if the character at +1 is NOT a "+", then that statement is false.
Ben Clist
@BenClist
Jan 19 2015 20:23
Well then your if statement is correct, however the string you feed in that never occurs
and you've not told it what to do when there is a + on either side
Evan Davis
@davisec52
Jan 19 2015 20:24
Ok, I thought that the statement was basically saying the a "+" must occur on either side of the letter.
Ben Clist
@BenClist
Jan 19 2015 20:25
on either side or on both sides?
you've checked if there's NOT a + on both sides, so if there is a + on both sides or if there's a + on one side you've not told it what to do
Evan Davis
@davisec52
Jan 19 2015 20:27
Maybe this is where the problem lies. What is the difference? I meant to say that the "+" must exist on the right and left side of the letter simultaneously.
Ben Clist
@BenClist
Jan 19 2015 20:28
Your if statement needs you to change two symbols and then it will fail everytime there's a + on both sides, you're really close to the correct answer
you don't need the 2nd regex either ;)
Evan Davis
@davisec52
Jan 19 2015 20:31
All right. Thank you. At least I'm in the right direction. Also helps to know that I was incorrectly understanding the booleans.
As for the second regex, I had a gut feeling that was screwy.
Ben Clist
@BenClist
Jan 19 2015 20:31
you just don't need it because your code never even touches it
your first regex has already filtered it to letters only
Evan Davis
@davisec52
Jan 19 2015 20:33
Right, that's what I thought, except that I kept getting statements evaluating to true that included digits and and nonalphanumerics.
Ben Clist
@BenClist
Jan 19 2015 20:35
I think that was just the same problem with the way your loop was set-up and nothing passing that if statement
Evan Davis
@davisec52
Jan 19 2015 20:37
Ok. That makes sense. I was beginning to think that the first regex only identified matches but did not filter out other non letters.
Ben Clist
@BenClist
Jan 19 2015 20:39
That if statement is taking care of that by running match against every character individually
you never run it against the string as a whole
Evan Davis
@davisec52
Jan 19 2015 20:42
Got it, now. I think I've just had a couple of "ah hah" moments.
Ben Clist
@BenClist
Jan 19 2015 20:43
Nice one, you'll get there eventually :)
The solution @yaskyj posted is really close to your code ;)
Evan Davis
@davisec52
Jan 19 2015 20:47
That is great help. I've been reviewing what you and @yaskyj have been pointing out and I think I really see, viscerally get, where I was going wrong with the booleans.
Mind you, no shortage of wrong paths to take :)
Ben Clist
@BenClist
Jan 19 2015 20:55
If you ever get stuck with logic the debugger in Chrome Dev Tools is so helpful, let's you step through the code one line at a time and see all the values etc.
seahik
@seahik
Jan 19 2015 22:16
@BenClist oh thats such great advice....i have been inserting a bunch of document.write() into my code when I get stuck instead. will have to try in dev tools
Ben Stoltz
@benstoltz
Jan 19 2015 22:21
@seahik You can also use debugger; in your code anywhere and it’ll function similarly to in chrome dev tools
seahik
@seahik
Jan 19 2015 22:37
cool thanks ! will take a look.
Evan Davis
@davisec52
Jan 19 2015 22:55
@BenClist Thank you for that. I'll start using the debugger.
Nathan
@terakilobyte
Jan 19 2015 23:30
what I'm working with so far on the overlapping rectangles challenge on coderbyte
function OverlappingRectangles(strArr) { 
  return getOverlap(parseRectangles(strArr));      
}

function parseRectangles(strArr) {
  var coords = [];
  var firstRec;
  var secRec;

  coords = strArr.replace(/\),/g, ')').match(/(\d,\d)|(\d,\-\d)/g);
  firstRec = coords.slice(0,4);
  secRec = coords.slice(4);
  for (var i = 0; i < firstRec.length; i++) {
    firstRec[i] = firstRec[i].split(',');
    secRec[i] = secRec[i].split(',');
  }
  var first = new Rectangle(firstRec);
  var second = new Rectangle(secRec);
  return [first, second];

}

var Rectangle = function(coordArr) {
  this.lowX = coordArr[0][0];
  this.lowY = coordArr[0][1];
  this.highX;
  this.highY;

  for (var i = 0; i < coordArr.length; i++) {

    // Fill in our values
    if (coordArr[i][0] > this.lowX ) {
      this.highX = coordArr[i][0];
    } else if (coordArr[i][0] < this.lowX) {
      this.highX = this.lowX;
      this.lowX = coordArr[i][0];
    }
    if (coordArr[i][1] > this.lowY ) {
      this.highY = coordArr[i][1];
    } else if (coordArr[i][1] < this.lowY) {
      this.highY = this.lowY;
      this.lowY = coordArr[i][1];
    }
  }

  this.area = Math.abs(this.highX - this.lowX) * Math.abs(this.highY - this.lowY);
};

function getOverlap(rects) {
  var rect1 = rects[0];
  var rect2 = rects[1];
  var xOverLapping = false;
  var yOverLapping = false;
  var overLappingArea = 0;

  // shortcut conditionals to find if X or Y of rect2 is within rec1. Will not return
  // true if they are touching but not overlapping.
  if ((rect2.lowX - rect1.lowX) * (rect2.lowX - rect1.highX) < 0 ||
      rect2.highX - rect1.lowX) * (rect2.highX - rect1.highX) < 0) {
    xOverLapping = true;
  }
  if ((rect2.lowY - rect1.lowY) * (rect2.lowY - rect1.highY) < 0 ||
      rect2.highY - rect1.lowY) * (rect2.highY - rect2.highY) < 0) {
    yOverLapping = true;
  }
  if (!(xOverLapping && yOverLapping)) {
    return 0;
  }
  //start building a new rectangle coordinates
}
I broke the gitters :)
so here, instead of building rectangle coordinates I just thought about making an array big enough to hold both rectangles, and "drawing" them in the array by setting the x,y pair to 1
if it's already 1, I'll increment to 2
that should give me my overlapping area right there I'm thinking
I'll have to offset both rectangles so that if they have a negative component they start at 0
Nathan
@terakilobyte
Jan 19 2015 23:36
actually nvm, I don't have to draw them, I'll separate each side of my OR statements in the conditionals and set the highest and lowest X there