Hey there! I'm currently trying to transfer my project from Codepen at here to repl.it (This project) which you can find at this link. Don't forget to click run after checking it out!
The code is working perfectly fine on Brackets with the same code from Codepen. So, why isn't it working on repl.it?
Here are some issues that have appeared:
- The CSS and JavaScript aren't loading properly. I tried using
<script src="index.js"></script> - Could it be that the CSS isn't linked correctly? I'm used to only using Codepen so I'm not familiar with linking between CSS, HTML, and JS.
- I seem to have typed 2 before 1. Whoops!
- The HTML does not seem to be flexible (like Bootstrap), so if it works, it won't be responsive.
Check out all the links and codes below - any clarification would be greatly appreciated:
<!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>
I really need help with this. I apologize for coming across as a newbie, but we all start somewhere. This area of coding is new to me, especially when compared to HTML. Any guidance is welcomed!
I didn't include a JavaScript tag because everything seemed fine on Codepen. Could it be that API's don't work 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) {