Typescript Quote Generator
Description:
This project serves as an illustration of utilizing TypeScript (TS) and Bootstrap to develop a web application. TypeScript is employed to provide static typing and additional features to JavaScript, enhancing code robustness and maintainability. Bootstrap, a CSS framework, is utilized for styling, facilitating the creation of a visually appealing and responsive interface.
The HTML file sets up the structure of the webpage and links to external resources, including the Bootstrap CSS file. It includes a container with a card element that displays a header (“Zitat Generator”), a paragraph element with an initial message (“Klicke auf den Button”), and a button styled with Bootstrap classes (“btn btn-secondary”). The button is configured to trigger a JavaScript function, generiereZitat(), upon click.
The TypeScript code is responsible for generating random quotes from an array (zitateArray) and updating the displayed quote dynamically. The generiereZitat() function is invoked when the button is clicked. It calculates a random index within the range of available quotes, retrieves a random quote from the array, and updates the HTML content to display the selected quote.
Additionally, the TypeScript file contains an example of generating random numbers and logging them to the console. This demonstrates basic TypeScript functionality unrelated to the main feature of the application.
In summary, this project showcases the integration of TypeScript for enhanced JavaScript development and Bootstrap for streamlined styling, resulting in a functional and visually appealing web application for generating random quotes.
This project is accessible at https://sophies-creative-hub.github.io/zitate/.