https://github.com/bittricky/launch-countdown
Simple web app to countdown on a set time 🚀
https://github.com/bittricky/launch-countdown
exercise flask html javascript python tailwindcss
Last synced: 3 months ago
JSON representation
Simple web app to countdown on a set time 🚀
- Host: GitHub
- URL: https://github.com/bittricky/launch-countdown
- Owner: bittricky
- Created: 2024-11-23T22:23:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-06T15:51:10.000Z (over 1 year ago)
- Last Synced: 2025-01-25T06:41:59.620Z (over 1 year ago)
- Topics: exercise, flask, html, javascript, python, tailwindcss
- Language: CSS
- Homepage:
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Launch Countdown
This is a simple countdown timer web app built using Flask, Tailwind CSS, and JavaScript (ES6). The application allows users to set a countdown time.
## Project Directory Structure
```
launch-countdown/
├── app.py
├── templates/
│ ├── index.html
│ └── countdown.html
├── static/
│ ├── css/
│ │ ├── styles.css
│ │ └── output.css
│ ├── js/
│ │ └── countdown.js
├── tailwind.config.js
├── package.json
├── package-lock.json
├── .gitignore
└── requirements.txt
```
## Prerequisites
- Python 3.x
- Node.js and npm
- Virtual environment support (optional but recommended)
## Setup Instructions
### Clone the Repository
```bash
git clone
cd launch-countdown
```
### Set Up a Virtual Environment (Optional but Recommended)
```bash
python3 -m venv venv
source venv/bin/activate # For Unix-based systems
```
### Install Python Dependencies
```bash
pip install -r requirements.txt
```
### Install Tailwind CSS
Make sure you have Node.js and npm installed.
```bash
# Initialize the project
npm init -y
# Install Tailwind CSS and related dependencies
npm install -D tailwindcss postcss autoprefixer
# Initialize Tailwind CSS configuration
npx tailwindcss init
```
### Configure Tailwind
Edit `tailwind.config.js` to include the content paths for Tailwind to scan:
```js
module.exports = {
content: ["./templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};
```
### Compile Tailwind CSS
Compile Tailwind's CSS from `styles.css` to `output.css`:
```bash
npx tailwindcss -i ./static/css/styles.css -o ./static/css/output.css --watch
```
This command will compile your Tailwind CSS classes and continuously watch for changes.
### Run the Flask Application
To run the application, execute the following command:
```bash
python app.py
```
You can then visit `http://localhost:5000` in your browser to interact with the web application.