Repl.it JavaScript not activating

So im trying to move my local weather app (https://codepen.io/Mike-was-here123/pen/Ozbzqq) to repl.it --> https://repl.it/@John_Nicole/wip

Everything with CSS/ html is working, but for some reason my JavaScript is just not running at all. Can repl.it support API’s?

Is there anyway i can prevent my background image from moving in size? Ill do this until i make bootstrap html.

<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
    <script src="index.js" type="text/javascript"></script>
</head>

Update: fixed the link

If you look at the console in repl you’ll see that it’s tellin you what’s wrong:

It encountered an unexpected symbol at the first character of line 5. It doesn’t know what $ means. This tells me that there is a problem with how you imported jQuery.

Okay, so whats the correct way to import jQurey?

I you google it, you’ll see lots of handy results that you can copy-paste.

I tried
<script src="jquery-3.3.1.min.js"></script> &
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Got the same error

I’m still highly confused. I fixed the HTML syntax, and just cannot get the head right. As you said the body is fine, so i’m highly confused on how to do the head. Help?

Why cant i copy and paste all my links in the head and it work? Why does it have to be so over complicated? Its importing links, i can’t calculate this out. The only way i will know is by seeing the answer. I asked this same question on stack overflow and someone told me to arrange the links like that, and i did (what you saw). Then it didn’t work and they just left.

I fixed all the HTML errors again, as it didn’t save for some reason.

So i went back and deleted the two lines you told me too and now my head looks like:

<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
</head>

Body:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="js/index.js"></script>

And still for me its not working. If the link isn’t working --> https://repl.it/@John_Nicole/wip
Here is the entire HTML code, did i miss anything?


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">
  <div class="background" id="back">
    <div class="parent" id="main">
      <div>
        <div class="town">
          <h3 id="city" class="ban">New York, US</h3></div>
        <div class="date">
          <h4 id="date">Sunday, October 15th, 2017</h4></div>
        <hr class="style-one"/>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="image"><img id="y" src="https://s1.postimg.org/1adylj5ef3/Weather_Sun_Abstract.png" /></div>
          <h4 id="temp">21</h4>
          <div class="convertClass"><a class="f" id="convert" href=#>°C</a></div>
          <h3 class="" id="click"></h3>
          <div class="extra-wrapper">
            <div class="row">
              <div class="column first">
                <h1 class="extra-font" id="visable">Visiblity: 3 km</h1>
                <h1 class="extra-font" id="pressure">Pressure: 30 inHG</h1>
                <h1 class="extra-font" id="clouds">Clouds: 2</h1>
              </div>
              <div class="column second">
                <h1 class="extra-font" id="speed">Wind speed: 18 kph</h1>
                <h1 class="extra-font" id="humidity">Humidity: 78%</h1>
                <h1 class="extra-font" id="hoursOfLight">day light: 11:09</h1></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <h2 id="sky">Clear sky</h2>
        <!-- sky -->
        <div class="row hl">
          <div><img id="arrow" src="https://s1.postimg.org/1belime5m7/image.png"></div>
          <div>
            <h1 id="highest">23°C</h1></div>
          <div><img id="arrow" src="https://s1.postimg.org/3oh7ztlyr3/down.png"></div>
          <div>
            <h1 id="lowest">14°C</h1></div>
        </div>
        <hr/>
      </div>
      <div class="container-fluid">
        <h2 id="time">19:35</h2>
        <div class="row sun">
          <div><img id="arrow" src="https://s1.postimg.org/2opqfq2bof/sunrise.png"></div>
          <div>
            <h1 id="sunrise">07:14</h1></div>
          <div><img id="arrow" src="https://s1.postimg.org/1b37bosrnz/sunset.png"></div>
          <div>
            <h1 id="sunset">18:22</h1></div>
          <!-- row -->
        </div>
        <hr /><b><button class="information" id = "nk" href="#">Convert to North Korean Weather</button></b></div>
    </div>
    </div>
    </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Soon i’m planning to go back through and redo the HTML/ css (keeping the tags/ links) because i used way to many Div’s and i want to make a fluid html.

Look at the errors you are getting in the console. You should always start with the console when things are not working as you expect.

First, you are referencing a JavaScript file at js/index.js

It should be just index.js, because you do not have it in a folder called js.

The second error suggests that repl.it is blocking access to the geolocation API. I guess they feel this is a privacy issue and have blocked the ability to use it. A user could also block it, which is why you should have a backup method in place to use the user’s ip address with a third-party API which returns geo-location coordinates for an ip.

1 Like

Here is my code for body:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="index.js"></script>

I would say its most likely that it is blocked, and ill just submit my codepen.io code to the website/ webpage competition on repl.it.

I will give you the solution as it would work and doesn’t because of something out of your control.

Update: It does work!

You just cant run it in that view, open it in new tab.