I have a vision to create a web application that can display the weather of any city based on user input. I've divided my project into three files - index.html for collecting user input, index2.html for retrieving and displaying the data, and a CSS file for styling. Everything works perfectly when I run the website locally using Chrome. However, once I upload the files to a web server, the $.getJSON function stops working. It used to work fine initially but after making some changes, it stopped functioning properly. Even simplifying the code doesn't help as it still fails to execute. Interestingly, the same code runs flawlessly when executed locally. Upon debugging, I found out that everything gets executed except for the getJSON API call.
Here's the content of the index file:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="page1">
<center>
<img src="sun.png" alt="Loading Screen" id="Icon" style="width:100px;height:100px;">
<h1>WeatherPro</h1>
<form action="index2.html" method="GET">
<input type="text" id="input" name="keyword" placeholder="City">
<br>
<button type="submit" id="submit">Get Weather</button>
</form>
</center>
</body>
</html>
And here's the second file:
<!DOCTYPE html>
<html>
<head>
<title>Weatherinfo</title>
<link rel="stylesheet" type="text/css" href="style.css"> </link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// JavaScript functions go here
</script>
</head>
<body id="page2">
<!-- HTML content goes here -->
</body>
</html>
Finally, the CSS styling:
/* CSS styles go here */