Banano-Calculator

Gallery

About

The website is a responsive web application designed to estimate earnings in Banano cryptocurrency from [email protected] features a clean and modern interface with soft pastel colors such as light yellow, mint green, and sky blue.The layout adapts seamlessly to both desktop and mobile devices.At the very top, a sticky header displays the current date and time, updated every second.Next to the date and time, the live price of Banano in US dollars is shown, fetched from the public CoinGecko API.The price also includes the 24-hour percentage change, colored green for positive and red for negative.Below the header, a large central title reads "Banano Calculator" in a bold gradient font.Underneath the title, a slogan states "Estimate your BAN earnings from Folding@home. Fast, free, and potassium-rich."The main content area is divided into two cards side by side on desktop and stacked on mobile.The first card is a calculator that takes two inputs: Points Per Day (PPD) and a conversion rate in BAN per PPD.A default conversion rate of 0.001 BAN per PPD is provided, but users can adjust it.After clicking the Calculate button, the results appear showing estimated earnings per day, per week, and per month.Each result displays both the amount in BAN and its equivalent value in US dollars based on the current price.A Reset button clears the inputs and hides the results.The second card displays a line chart of the BAN/USD price over the last seven days.The chart is rendered using Chart.js with a smooth gradient fill and interactive tooltips.A Refresh button allows users to manually update the chart and the price.Below the main grid, an About section provides information about Banano and the calculator.The About section is divided into three cards, each with a colored icon and a heading.The first card explains what Banano is, mentioning it is a fee-less, instant, and potassium-rich cryptocurrency.The second card describes how the calculator works and how to use it with BananoMiner.The third card lists official resources and includes external links to BananoMiner, Reddit, and FaucetPay.All external links open in a new tab and have the rel="noopener" attribute for security.The official website banano.cc is cited in plain text without a return link.Following the About section is a Contact section with three clickable cards.These cards link to the Reddit community, BananoMiner, and a FaucetPay referral link.Each contact card has a hover effect with a colored top border and an animated arrow.At the bottom, a footer credits the technologies used to build the site.Large icons represent HTML, CSS, JavaScript, Chart.js, and Font Awesome.The footer also states that price data is provided by CoinGecko, without a hyperlink.The Banano icon in the hero section is an SVG from Arcticons, licensed under CC BY-SA 4.0.The site uses the Inter font family from Google Fonts for a modern look.All JavaScript code is contained in a separate file and handles date/time, price fetching, chart rendering, and calculator logic.The CoinGecko API is called every sixty seconds to keep the price up to date.The chart data is fetched from the CoinGecko market chart endpoint for the last seven days.The calculator uses the current price to compute USD equivalents instantly.The design is fully responsive with breakpoints at 900px, 768px, 600px, and 480px.The entire project is contained in three files: index.html, style.css, and script.js.These files can be copied and pasted directly into CodePen for immediate use.No build tools or external dependencies other than CDNs are required.The website is intended for the Banano community and anyone interested in earning BAN through folding.It provides a simple yet informative tool to estimate potential earnings.The interface is intuitive and visually appealing, with smooth animations and hover effects.The color scheme is soft and inviting, avoiding harsh contrasts.The typography is clear and legible, with large headings and readable body text.The layout uses CSS Grid and Flexbox for robust responsiveness.The calculator results are displayed in a grid of three items that stack on small screens.The chart canvas resizes automatically to fit its container.The top bar remains visible while scrolling thanks to position: sticky.The hero logo floats gently with a CSS animation.The section headers feature large badge icons with gradient backgrounds and a slight rotation.The about and contact cards have subtle shadows and lift on hover.The footer icons are large and colored according to their brand.The overall aesthetic is friendly, modern, and aligned with the playful Banano brand.This description covers all major aspects of the website's design, functionality, and content.