This is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://pyscript.net/releases/2024.2.1/core.js"></script>
<!--<link rel="stylesheet" href="https://pyscript.net/releases/2025.7.3/core.css" />-->
<title>Simple Moving Average</title>
</head>
<body>
<link rel="stylesheet" href="styleSMA.css">
<body id="bodyWelcome" style="background-color: #b8e0fc;">
<nav class="navbar">
<ul>
<img src="logo.png" id="logo">
<li><a href="">About Us</a></li>
<li><a href="">Sign In / Login</a></li>
<li><!--<a href="">Stock Data</a>-->
<div class="drop">
<button class="dropbtn">Stock Data</button>
<!--<a href="">Visualize</a>-->
<div class="drop-down">
<a href="">Ticker Symbol</a>
<a href="">Simple Moving Average</a>
<a href="">Exponential Moving Average</a>
</div>
</div>
</li>
<li>
<div class="drop">
<button class="dropbtn">Visualize</button>
<!--<a href="">Visualize</a>-->
<div class="drop-down">
<a href="">Simple Moving Average</a>
<a href="">Exponential Moving Average</a>
<a href="">Bollinger's Band</a>
<a href="">Candlestick Graph</a>
</div>
</div>
</li>
<li><a href="">Home</a></li>
</ul>
</nav>
<form >
<label for="tickersym">Enter ticker symbol:</label>
<input type="text" name="tickersym" id="tickersym">
<br>
<label for="start"> Enter start date:</label>
<input type="datetime" name="start" id="start"><br>
<label for="end">Enter end date:</label>
<input type="datetime" name="end" id="end"><br>
<label for="windtd">Enter number of trading days (window) for SMA:</label>
<input type="number" name="windtd" id="windtd"><br>
<button type="button" name="calculate" id="calculate">Calculate SMA</button>
<button type="button" name="refresh" id="refresh">Refresh</button>
</form>
<py-script>
from pyodide import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import yfinance as yf
ticker = Element('tickersym').element
st= Element('start').element
en = Element('end').element
df = yf.download(ticker,start=st,end=ed)
td = Element('windtd').element
df['Simple Moving Aberage'] = df['Close'].rolling(window = td).mean()
print(df)
</py-script>
</body>
</html>
This is the css code:
.navbar ul {
list-style-type: none;
background-color: #1e81d8;
margin: 0%;
padding: 0%;
overflow: hidden;
margin-bottom: 0%;
}
a {
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
margin-bottom: 0%;
}
a:hover{
background-color: #5f9cd1;
}
.navbar li {
float: right;
}
#logo {
margin: 0%;
padding: 0%;
height: 49px;
margin-bottom: 0%;
padding-bottom: 0%;
}
h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(20, 90, 123);
padding-bottom: 0%;
margin-bottom: 0%;
}
h5 {
padding-top: 0%;
color: rgb(20, 90, 123);
text-align: center;
margin-top: auto;
}
body {
margin: 0%;
}
p {
margin: 15px;
color: rgba(4, 19, 26, 0.925);
}
.drop-down{
overflow: hidden;
}
.drop .dropbtn{
font-family: 'Times New Roman', Times, serif;
float: none;
padding: 16px;
font-size: 16px;
padding-bottom: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop-down a {
display: none;
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-down{
display: block;
}
.dropbtn {
padding: 16px;
background-color: #1e81d8;
border: none;
color: white;
}
.drop-down {
display: none;
position: absolute;
background-color: #2d75b0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropbtn:hover{
background: #5f9cd1;
}
The preview:Image of the result
This is the error I am getting:
Traceback (most recent call last):
File "/lib/python311.zip/_pyodide/_base.py", line 501, in eval_code
.run(globals, locals)
^^^^^^^^^^^^^^^^^^^^
File "/lib/python311.zip/_pyodide/_base.py", line 339, in run
coroutine = eval(self.code, globals, locals)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "<exec>", line 2, in <module>
ImportError: cannot import name 'pandas' from 'pyodide' (/lib/python311.zip/pyodide/__init__.py)
I cannot understand how to make the python code work while taking input from the user and also using it to generate output on the screen.
I tried to take input from the user by creating label and input tags in HTML code and sending it python code in the "py-script" tag. I need to calculate the SMA and display it on screen. The inputs required are Ticker symbol, start date, end date and period of trading days. However, I keep getting an error.
The main problem is not so much the import of pandas. This is easily possible with a configuration and the line import pandas as pd.
<py-config>
name = "Pandas"
description = "A simple application that loads a csv and displays a table of its contents."
packages = ["pandas"]
</py-config>
<py-script>
import pandas as pd
# ...
</py-script>
You can find a complete example here.
However, you are trying to use the yfinance package, which is not available in the browser due to the use of requests. A variant of retrieving the data via fetch fails due to CORS.
You have no choice but to use a small web framework, such as Flask, to retrieve the data from a server and then process and display it. Then you can easily use yfinance to retrieve the data.
PyScript does not offer the solution for your requirements.