Chaos Weather Display

This program is a chaotic interpretation of a weather display. Instead of a conventional layout, where weather information is neatly organized, this program embraces chaos by animating text boxes that display the current time and temperature.

Features

• Dynamic Animation: Text boxes representing weather information jump from the corner of the page and then slide across the bottom in a chaotic manner.

• Real-Time Weather: Each text box displays the current time and temperature in Celsius.

How it Works

The program is built using HTML, CSS, and JavaScript. Here's how it operates:

• HTML Structure: The main container holds multiple text boxes, each representing a weather display.

• CSS Styling: Text boxes are styled to have a fixed size and background color.

• JavaScript Animation: Upon loading, the program initializes velocities for each text box and continuously updates their positions based on simulated gravity and friction. The text boxes bounce off the edges of the window to create chaotic movement.

Instructions

To run the program:

1. Ensure you have a modern web browser installed.
2. Save the provided HTML, CSS, and JavaScript code into separate files (index.html, styles.css, and script.js respectively).
3. Open index.html in your web browser.

Compatibility

This program should work in most modern web browsers that support HTML5, CSS3, and JavaScript.

Disclaimer

This project is intended for demonstration and entertainment purposes only. It does not provide accurate weather information and is purely a chaotic representation of weather display.

Feel free to experiment with the code and customize it to your liking. Embrace the chaos!

---

Prototype with TypeScript, React, and Node.js

We also experimented with a more structured approach using TypeScript, React, and Node.js to create a dynamic website with chaotic features.

Features

• Weather Display: The weather is displayed in fixed boxes using React components.

• Chaotic Mouse Trail: Whenever the mouse hovers over the page, it leaves a trail of animated circles, adding a chaotic element to the interface.

Technologies Used

• TypeScript: To add static typing to JavaScript and enhance code quality.

• React: A JavaScript library for building user interfaces, used for creating dynamic components.

• Node.js: A JavaScript runtime used for server-side scripting and managing dependencies.

How to Run

1. Ensure you have Node.js installed on your system.
2. Clone the repository containing the project files.
3. Navigate to the project directory in your terminal.
4. Install dependencies using npm install.
5. Start the development server using npm start.
6. Open your web browser and navigate to the provided localhost address.

Compatibility

This prototype should work across modern web browsers and platforms, leveraging the capabilities of React and Node.js for a seamless user experience.

Note

This prototype is a work in progress and may require further development and refinement. Feel free to contribute and explore different chaotic features!