Running the code on my local browser


#1

Hi

I copied the three files; app.js, index.html and style.css in my system and tried to run the app by opening the index.html from browser. I tried in IE, firefox and also in chrome. Though the page comes up with the status message box and the post button, nothing happens when i type or click on the post button. Clearly, java script is not working. Anything i need to do more? Please provide some guidance.

Thanks
MiscApps


#2

Hey @tagrockstar29579! It will help us if you could Print screen your window.


#3

Hi MiscApps,

The JavaScript is working fine - it's jQuery (our JavaScript library) that isn't :wink:
You probably have something like this in index.html:

<script src="//..."></script>

(although ... is an actual URL in your file)
You'll need to replace the // with http:// or https://, so it looks like this:

<script src="https://..."></script>

And then I expect your code will work :)

You may also have to fix the same problem with a <link rel="stylesheet" href=""> tag in your <head> :)


If your code still isn't working, if you could show us your HTML code by copy/pasting it into the forums, it'd be great :)
You can format code to make it visible by selecting it all while in the post editor, and pressing Ctrl/Cmd + K, or by adding a new line and three backticks (`) before and after your code, like this:


```
<code> will show up properly here
```

Thanks!


#4

Thanks for your reply and my apologies for responding late.

Actually, i added the https:// to the src at the botom, but still the code is not functioning. I could get the textarea in the browser but wehn i type something the counter is not getting reduced and also the post button is not working. Please see the index.html below.

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
        </div>
      </form>
      <div class="button-group pull-right">
        <p class="counter">140</p>
        <a href="#" class="btn btn-primary">Post</a>
      </div>
    
      <ul class="posts">
      </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
    
  </body>
</html>

This is the app.js code that i copied from the exercise. I have pasted the style.css too below this for your kind reference. Thanks for your help in advance.

var main = function() {
  $('.btn').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text('140');
    $('.btn').addClass('disabled'); 
  });
  
  $('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);
  
    if(charactersLeft < 0) {
      $('.btn').addClass('disabled'); 
    }
    else if(charactersLeft == 140) {
      $('.btn').addClass('disabled');
    }
    else {
      $('.btn').removeClass('disabled');
    }
  });
  
  $('.btn').addClass('disabled');
}

$(document).ready(main);

style.css

html,
body {
  font-family: 'Roboto', sans-serif;
  color: #404040;
  background-color: #eee;
}

.container {
  width: 520px;
  margin-top: 20px;
}

.button-group {
  margin-bottom: 20px;
}

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
}

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.posts li {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  min-height: 42px;
}

#5

Your code worked for me inside a Pen. Does it work for you there?


#6

Nope...I m trying it in my local Chrome browser in my machine. Have placed the three files in one location in my harddrive and opening the index.html from there? Anything that i m missing?


#7

So it doesn't work for you, even on CodePen?
Do you know how to use your browser developer tools? It might be helpful if you watch your console as you attempt to type and post a message, then post the error message here :)


#8

Hi

It worked on codepen. But I am not familiar with codepen yet. I m trying to get it working in my local browser. There its not working. Any inputs?

Thanks


#9

Sorry for the slow reply.

Could you try using your developer tools (see my post above) to catch the error? I'm not seeing anything wrong right off, and they might give a helpful error.


#10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.