screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState, useEffect } = React; // Define the App component const App = () => { const [dataLoaded, setDataLoaded] = useState(false); const [items, setItems] = useState([]); const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); const loadData = () => { axios .get("https://api.coindesk.com/v1/bpi/currentprice.json") .then((response) => { setDataLoaded(true); setItems(response.data.bpi); showToastMessage("Data reloaded successfully!"); }) .catch((error) => { console.error(error); }); }; const showToastMessage = (message) => { setShowToast(true); setToastMessage(message); setTimeout(() => { hideToastMessage(); }, 3000); // Hide the toast after 3 seconds }; const hideToastMessage = () => { setShowToast(false); setToastMessage(""); }; useEffect(() => { loadData(); // Initial data load const intervalId = setInterval(() => { loadData(); // Load data every 6 sec (adjust the interval as needed) }, 6000); // 6 sec in milliseconds return () => clearInterval(intervalId); // Cleanup the interval on component unmount }, []); return ( <div className="container"> <h3> React Js load data without reloading page | Automatically Reload Data </h3> {dataLoaded ? ( <table className="currency-table"> <thead> <tr> <th>Code</th> <th>Symbol</th> <th>Rate</th> <th>Description</th> <th>Rate Float</th> </tr> </thead> <tbody> {Object.entries(items).map(([key, item]) => ( <tr key={key}> <td>{item.code}</td> <td>{item.symbol}</td> <td>{item.rate}</td> <td>{item.description}</td> <td>{item.rate_float}</td> </tr> ))} </tbody> </table> ) : ( <div>Loading...</div> )} {showToast && <div id="toast">{toastMessage}</div>} </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); </script> <style> /* Styles for the container */ .container { margin: 30px; padding: 20px; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); } /* Styles for the table */ .currency-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .currency-table th, .currency-table td { padding: 12px; text-align: left; } .currency-table th { background-color: #f2f2f2; border-bottom: 1px solid #ddd; } .currency-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .currency-table tbody tr:hover { background-color: #f2f2f2; } /* Styles for the toast */ #toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background-color: #333; color: #fff; border-radius: 4px; } </style> </body> </html>