0

I am creating a weather app in which the user will enter his/her city name and the app will display his/her city's temperature. I am having an error that only comes in my computer but on codepen and other coding platforms it works totally fine. And one more thing even I have used event.preventDefault(); my page gets reload after clicking on the button and it also works absolutely fine on online coding platforms. I am using Express for the backend and HBS as a template engine.
JS Code :

const cityName = document.getElementById("cityName");
const submitBtn = document.getElementById("submitBtn");
const temp_form = document.getElementById("temp_form");

const city_temp = document.getElementById("city_temp");

async function getInfo(event) {
  event.preventDefault();
  let cityVal = cityName.value;
  if (cityVal === "") {
    city_temp.innerText = `Please write the name before search`;
  } else {
    try {
      let apiKey = `my api key is here`;
      let url = `https://api.openweathermap.org/data/2.5/weather?q=${cityVal}&units=metric&appid=${apiKey}`;
      let response = await fetch(url);
      let data = await response.json();
      console.log(url);
      console.log(data);
      let temp = data.main.temp;
      city_temp.innerHTML = `${temp}<sup>o</sup>C`;
    } catch (error) {
      city_name.innerText = `Please enter the city name properly`;
    }
  }
}

temp_form.addEventListener("submit", getInfo);

Error:

GET http://127.0.0.1:3000/public/js/main.js net::ERR_ABORTED 404 (Not Found)

HTML(hbs) Code:

<!DOCTYPE html>
<html lang="en">

<head>
    {{>headerlinks}}
    <script src="../../public/js/main.js"></script>
</head>

<body>
    {{>navbar}}
    <!-- main header  -->
    <div class="container-fluid main_header">
        <div class="row">
            <div class="col-md-10 col-12 mx-auto">
                <div class="main_content">
                    <form class="temp_form" id="temp_form">
                        <input type="text" id="cityName" placeholder="Enter your city name" autocomplete="off">
                        <button id="submitBtn">Check</button>
                    </form>
                </div>

                <div class="tempInfo">
                    <div class="top_layer">
                        <p id="day">Monday</p>
                        <p id="today_date">13 OCT</p>
                    </div>
                    <div class="main_layer">
                        <p id="city_temp">
                            Get Output Here
                        </p>
                        <div class="middle_layer data_hide">
                            <p id="temp"><span>0</span><sup>o</sup>C</p>
                            <p id="temp_status"> <i class="fa fa-cloud"></i> </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- footer code -->
    {{>footer}}

    {{>bsl}}
</body>

</html>

Express Code :

const express = require("express");
const app = express();
const hbs = require("hbs");
const path = require("path");
const port = process.env.PORT || 3000;

// public static path
const static_path = path.join(__dirname, "../public");
const templates_path = path.join(__dirname, "../templates/views");
const partials_path = path.join(__dirname, "../templates/partials");

hbs.registerPartials(partials_path);
app.set("view engine", "hbs");
app.set("views", templates_path);

app.use(express.static(static_path));

// routing
app.get("/", (req, res) => {
  res.status(200).render("index");
});

app.get("/about", (req, res) => {
  res.status(200).render("about");
});

app.get("/weather", (req, res) => {
  res.status(200).render("weather");
});

app.get("*", (req, res) => {
  res.status(404).render("404error");
});
app.listen(port, () => {
  console.log("listning on port " + port);
});
Dhruvan Rai
  • 3
  • 5
  • You need to check if `./public/js/main.js` actually exists in your project folder – Ameer Jul 14 '21 at 14:29
  • @Ameer Ya it is there. – Dhruvan Rai Jul 14 '21 at 15:06
  • Can you post your server code, or whatever pertant server code you can post, because this may be due to misconfiguration in your express app – Ameer Jul 14 '21 at 15:58
  • The URL for your script file (ie `../../public/js/main.js`) is incorrect. You probably want `src="/js/main.js"` (see https://expressjs.com/en/starter/static-files.html). Also, you should move the ` – Phil Jul 15 '21 at 04:36
  • @Phil Oh ya, I changed src to ```js/main.js``` and it worked. Thank You so much. – Dhruvan Rai Jul 15 '21 at 05:02

0 Answers0