1

So i'm trying to put https://codepen.io/Mike-was-here123/full/Ozbzqq/ onto repl.it (This project) --> https://repl.it/@John_Nicole/EcstaticDarkorchidDegrees <-- click run

My code also works on Brackets (the codepen code) so it must be repl?

Now there a a couple of unnoticeable issues (not):

  1. The JavaScript isn't loading in, just like the CSS. I tried <script src="index.js"></script>
  2. The CSS isn't loading in, is it not connected right? I have only ever used Codepen so i have never worked with linking before (between CSS, HTML, JS)
  3. 2 was typed before 1. ^
  4. The HTML is not flexiable (boostrap) so when, if it works it wont flex.

Here are all my links & stuff, i really need some clarification on how to do this:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>


<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>


</head>

Any help is accepted, i'm sorry if thy acting like such a 'noob' but we all learn somewhere. I have never used this area before, and its my weaker area of HTML.

I never included a JavaScript tag because i didn't think something is wrong there, as it works on the codepen. Do API's not working on repl.it ?

    // Line 10
navigator.geolocation.getCurrentPosition(function(position) {
          lon = position.coords.longitude;
          lat = position.coords.latitude;
          var api =
            "https://fcc-weather-api.glitch.me/api/current?lat=" +
            lat +
            "&lon=" +
            lon;
          $.getJSON(api, function(data) {
Cœur
  • 37,241
  • 25
  • 195
  • 267
user9319687
  • 13
  • 4

1 Answers1

0

You did big mistake when you edit html page inside replt.it.

  1. You need add script tag in body or head for add external js file but you add both inside head and body tag. You need to remove script tag from head tag.
  2. repl.it Don't recognize href="css/style.css". This your big mistake. You need to check where you write the CSS code. check the image. Your custom CSS file name is index.css not style.css. repl.it haven't any absolute file path. like css/style.css. If you add new css file called custom.css it should be href="custom.css".

I created new snippet for you in repl.it check it and compare it.

According to user9319687 comments. Now issue is JavaScript isn't running. No, It's wrong JavaScript is running properly. repl.it unable to run this script. This Google GEO Location services need https:// server. Open this link then go to console.

[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See here for more details.

Need more information about the HTTPS and HTTP issue check it StackOverflow and Github

  • Solution 1: Run this project in HTTPS server then it will work.
  • Solution 2: Run this project in localhost server then it will work.

If you think how codepen.io is running this script because of codepen.io running in https server.

Rahul
  • 2,011
  • 3
  • 18
  • 31
  • ```You need to remove script tag from head tag.``` I did that, and added to the body (``````) and nothing? I also tried using ```href``` too. – user9319687 Feb 19 '18 at 16:29
  • Check the link https://repl.it/@RahulMoral/LegitimateDraftyRar and http://rahulmoral.repl.co/LegitimateDraftyRar/ – Rahul Feb 19 '18 at 18:50
  • The JavaScript isn't loading in. That is a placeholder, not the actual weather. Here is my repl right now --> https://repl.it/@John_Nicole/EcstaticDarkorchidDegrees – user9319687 Feb 19 '18 at 22:06