JavaScript Course Project Generator

Generate JavaScript learning projects following EmersonBraun's JS Dev Course methodology. Creates structured projects with progressive challenges, bilingual documentation, and modern web standards.

Instructions

When creating a new JavaScript course project, follow these steps:

1. Project Structure Setup

Create the standard folder structure:

```

project-name/

├── index.html

├── index.js

├── style.css

├── README.md

├── README-PTBR.md

├── challenge-1/

│ ├── index.html

│ ├── index.js

│ ├── style.css

│ ├── README.md

│ └── README-PTBR.md

├── challenge-2/

│ ├── index.html

│ ├── index.js

│ ├── style.css

│ ├── README.md

│ └── README-PTBR.md

└── gifs/

├── class.gif

├── challenge-1.gif

└── challenge-2.gif

```

2. HTML Standards

Generate HTML5 files with:

Semantic structure using `<!DOCTYPE html>`

Meta tags: charset (UTF-8), viewport, IE compatibility

Roboto font from Google Fonts: `https://fonts.googleapis.com/css?family=Roboto`

Linked CSS and JavaScript files

`lang="en"` attribute on root

Template:

```html

<!DOCTYPE html>

<head>

<title>Project Name</title>

</head>

<body>

</body>

</html>

```

3. CSS Standards

Implement consistent styling:

**Reset**: `* { box-sizing: border-box; margin: 0; padding: 0; }`

**Typography**: Roboto font family, white text (`#fff`)

**Background**: Gradient from `#0f2027` → `#2c5364` → `#203a43`

**Buttons**: Base color `#2e647a`, hover effects with `transition: all 0.3s`

**Layout**: Use `.row` containers, rem units for responsiveness

**Class naming**: kebab-case (`.btn-group`, `.input-field`)

4. JavaScript Standards

Write modern, clean JavaScript:

Use ES6+ features (arrow functions, template literals, const/let)

DOM manipulation with `getElementById()` and `querySelector()`

Event listeners for user interactions

Simple, focused functions with descriptive names (camelCase)

Input validation where appropriate

Clear variable naming (camelCase for IDs and functions)

5. Documentation Pattern

Create bilingual README files:

**README.md (English)**:

Project title

Link to Portuguese version

"CLASS" section: basic implementation

"CHALLENGE 01" section: added logic and categorization

"CHALLENGE 02" section: enhanced UX with colors and feedback

GIF demonstrations for each version

Navigation links between challenges

**README-PTBR.md (Portuguese)**:

Complete translation maintaining same structure

Adapted technical terminology

6. Progressive Challenge Design

Design three levels:

1. **CLASS (index.html)**: Basic functional implementation with core features

2. **CHALLENGE 01**: Add business logic, categorization, and conditional outputs

3. **CHALLENGE 02**: Enhance UX with color coding, additional information, and visual feedback

7. Common UI Components

Include standard interactive elements:

**Buttons**: "Calculate" and "Clear" in `.btn-group`

**Inputs**: `type="number"` with `min`/`max`, descriptive placeholders

**Output**: Semantic elements with proper formatting (decimals, units)

**Hover effects**: Consistent transition animations

8. Naming Conventions

Use consistent naming:

**Files**: lowercase-with-hyphens (`switch-light`, `tic-tac-toe`)

**IDs**: camelCase (`calculateBtn`, `resultDisplay`)

**CSS classes**: kebab-case (`.btn-group`, `.input-field`)

**Functions**: camelCase (`calculateBMI`, `clearInputs`)

9. Best Practices

Ensure quality:

Clean, well-commented code

Descriptive variable and function names

Basic error handling and input validation

Cross-browser compatibility

Responsive design for all screen sizes

Basic accessibility (labels, semantic HTML)

Example Usage

**User request**: "Create a BMI calculator project"

**Agent actions**:

1. Generate folder structure with main project and 2 challenges

2. Create CLASS version with basic BMI calculation

3. Create CHALLENGE 01 adding BMI categories (Underweight, Normal, Overweight, Obese)

4. Create CHALLENGE 02 adding color-coded results and health recommendations

5. Write bilingual documentation with GIF placeholders

6. Apply consistent styling with gradient background and Roboto font

Constraints

Always generate bilingual documentation (English and Portuguese)

Follow the three-tier progression (CLASS → CHALLENGE 01 → CHALLENGE 02)

Use only vanilla JavaScript (no frameworks)

Maintain visual consistency across all challenges

Include GIF placeholder references in documentation

Keep code beginner-friendly with clear comments

JavaScript Course Project Generator

Safety Warning

JavaScript Course Project Generator

Instructions

1. Project Structure Setup

2. HTML Standards

3. CSS Standards

4. JavaScript Standards

5. Documentation Pattern

6. Progressive Challenge Design

7. Common UI Components

8. Naming Conventions

9. Best Practices

Example Usage

Constraints

Reviews (0)