Demo Mode

Activity 1 of 12

Activity 1: Introduction to JavaScript

Practice and reinforce the concepts from Lesson 1

Guide on How to use Stackblitz

What you'll learn

How to use StackBlitz as your online development environment
How to fork and commit changes to GitHub repositories
How to work with JavaScript in an online IDE

Estimated time: 10-15 minutes

:information_source: Info Prerequisites GitHub Account Required: You must have a GitHub account to use StackBlitz's GitHub integration. If you don't have one, sign up for GitHub first.

Step One: Access StackBlitz

Go to StackBlitz.com
Click "Continue with GitHub" (red highlighted button)
Authorize StackBlitz to access your GitHub account

Step 2: Open a GitHub Repository

From StackBlitz dashboard, click "Open GitHub repository"
In the dialog box, enter the repository in format: owner/repository-name
- Example: academic-telebort/Web3-C8-SvelteKit
Click "Open repository"

Step 3: Work on Your Project

StackBlitz will load the repository in the online IDE
Navigate to the appropriate folders (e.g., src/lib for components)
Make your changes and edits
Test your code in the integrated preview

Step 4: Save Your Work (Fork & Commit)

When ready to save, click the "Fork and Commit" button
Add a commit message describing your changes
StackBlitz will:
- Fork the repository to your GitHub account
- Commit your changes to the fork
- Create a new branch with your modifications
Submit your stackblitz link to the form

tip Troubleshooting Preview Issues If you encounter an issue with the preview, click the Refresh button here to resolve it:

Other alternative: You can click this button to open the preview in new tab:

Important Notes

tip Best Practices

Always Fork First: StackBlitz automatically forks repositories when you commit changes
Branch Creation: Each commit creates a new branch (e.g., patch-83167)
SvelteKit Structure: Understand the folder structure before making changes
Commit Often: Save your progress frequently with descriptive commit messages

Workflow Summary

Login -> StackBlitz with GitHub
Open -> GitHub repository
Code -> Make your changes
Commit -> Fork and save changes
Repeat -> Continue development cycle

This workflow lets you code directly in the browser while maintaining proper version control through GitHub!

Introduction to JavaScript

What you'll learn

How to link external JavaScript files to HTML
How to write inline JavaScript with event handlers
Basic JavaScript alert methods
Testing JavaScript in the browser environment

Total estimated time: 20-30 minutes

:computer: Steps to Create Your JavaScript Projects

:warning: IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files.

One. External JavaScript File Exercise

Estimated time: 10 minutes

Open StackBlitz and access the template: Exercise 1
- Alternative: Download the source code template from Stackblitz Download Project button if you want to use your local IDE
On the left panel, locate the external JavaScript file called script.js
Link the script.js file to your index.html page by adding this line before the closing </body> tag:
html
```
<script src="script.js"></script>
```
In the script.js file, write an alert message:
javascript
```
alert("Yay!");
```

tip Common Challenge If your alert doesn't appear, check that your script tag is placed correctly in the HTML file and that the file path is correct.

2. Inline JavaScript Exercise

Estimated time: 10 minutes

Open StackBlitz and access the template: Exercise 2
- Alternative: Download the source code template from Stackblitz Download Project button if you want to use your local IDE
In the left panel, select the index.html file
- You should see the basic HTML structure
Add a button element inside the <body> tag:
html
```
<button>Click me</button>
```
Add inline JavaScript to the button using the onclick attribute:
html
```
<button onclick="alert('Yay!')">Click me</button>
```

tip Remember Inline JavaScript is written directly in HTML attributes. While useful for simple interactions, external JavaScript files are preferred for larger applications.

3. Test Your Projects

Estimated time: 5 minutes

Preview your projects to ensure alerts appear correctly
Check that external JavaScript loads properly
Verify button interactions work as expected
Open the browser console (F12) to check for any errors

:white_check_mark: Required Elements

Make sure your JavaScript projects include:

External Exercise:
- A separate script.js file properly linked to HTML
- Alert showing "Yay!" when page loads
Inline Exercise:
- Button with onclick event
- Alert showing "Yay!" when button is clicked
Both projects should display alerts correctly
Clean, working code with no console errors

:hammer_and_wrench: Troubleshooting

:information_source: Info Common Issues

Alert not showing: Check if pop-ups are blocked in your browser
Script not loading: Verify the script tag path matches your file location
Button not working: Ensure quotes are properly closed in the onclick attribute
Console errors: Open Developer Tools (F12) to see detailed error messages

:emoji: Project Submission

:warning: Submission Requirements Before submitting, ensure:

Both exercises are completed and working

All alerts display correctly

You have committed your changes in StackBlitz

You have copied your StackBlitz URLs

When you have completed your "Introduction to JavaScript" projects, submit them using the link below:

Submit Your Projects Here

:information_source: Info What to Submit You'll need to provide:

Your StackBlitz URL for Exercise 1 (External JavaScript)
Your StackBlitz URL for Exercise 2 (Inline JavaScript)
Any additional notes about your implementation

Make sure to test both exercises before submitting to ensure all alert messages are working properly!

Activity 1 of 12

Activity 1: Introduction to JavaScript

Practice and reinforce the concepts from Lesson 1

Guide on How to use Stackblitz

What you'll learn

How to use StackBlitz as your online development environment
How to fork and commit changes to GitHub repositories
How to work with JavaScript in an online IDE

Estimated time: 10-15 minutes

:information_source: Info Prerequisites GitHub Account Required: You must have a GitHub account to use StackBlitz's GitHub integration. If you don't have one, sign up for GitHub first.

Step One: Access StackBlitz

Go to StackBlitz.com
Click "Continue with GitHub" (red highlighted button)
Authorize StackBlitz to access your GitHub account

Step 2: Open a GitHub Repository

From StackBlitz dashboard, click "Open GitHub repository"
In the dialog box, enter the repository in format: owner/repository-name
- Example: academic-telebort/Web3-C8-SvelteKit
Click "Open repository"

Step 3: Work on Your Project

StackBlitz will load the repository in the online IDE
Navigate to the appropriate folders (e.g., src/lib for components)
Make your changes and edits
Test your code in the integrated preview

Step 4: Save Your Work (Fork & Commit)

When ready to save, click the "Fork and Commit" button
Add a commit message describing your changes
StackBlitz will:
- Fork the repository to your GitHub account
- Commit your changes to the fork
- Create a new branch with your modifications
Submit your stackblitz link to the form

tip Troubleshooting Preview Issues If you encounter an issue with the preview, click the Refresh button here to resolve it:

Other alternative: You can click this button to open the preview in new tab:

Important Notes

tip Best Practices

Always Fork First: StackBlitz automatically forks repositories when you commit changes
Branch Creation: Each commit creates a new branch (e.g., patch-83167)
SvelteKit Structure: Understand the folder structure before making changes
Commit Often: Save your progress frequently with descriptive commit messages

Workflow Summary

Login -> StackBlitz with GitHub
Open -> GitHub repository
Code -> Make your changes
Commit -> Fork and save changes
Repeat -> Continue development cycle

This workflow lets you code directly in the browser while maintaining proper version control through GitHub!

Introduction to JavaScript

What you'll learn

How to link external JavaScript files to HTML
How to write inline JavaScript with event handlers
Basic JavaScript alert methods
Testing JavaScript in the browser environment

Total estimated time: 20-30 minutes

:computer: Steps to Create Your JavaScript Projects

:warning: IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files.

One. External JavaScript File Exercise

Estimated time: 10 minutes

Open StackBlitz and access the template: Exercise 1
- Alternative: Download the source code template from Stackblitz Download Project button if you want to use your local IDE
On the left panel, locate the external JavaScript file called script.js
Link the script.js file to your index.html page by adding this line before the closing </body> tag:
html
```
<script src="script.js"></script>
```
In the script.js file, write an alert message:
javascript
```
alert("Yay!");
```

tip Common Challenge If your alert doesn't appear, check that your script tag is placed correctly in the HTML file and that the file path is correct.

2. Inline JavaScript Exercise

Estimated time: 10 minutes

Open StackBlitz and access the template: Exercise 2
- Alternative: Download the source code template from Stackblitz Download Project button if you want to use your local IDE
In the left panel, select the index.html file
- You should see the basic HTML structure
Add a button element inside the <body> tag:
html
```
<button>Click me</button>
```
Add inline JavaScript to the button using the onclick attribute:
html
```
<button onclick="alert('Yay!')">Click me</button>
```

tip Remember Inline JavaScript is written directly in HTML attributes. While useful for simple interactions, external JavaScript files are preferred for larger applications.

3. Test Your Projects

Estimated time: 5 minutes

Preview your projects to ensure alerts appear correctly
Check that external JavaScript loads properly
Verify button interactions work as expected
Open the browser console (F12) to check for any errors

:white_check_mark: Required Elements

Make sure your JavaScript projects include:

External Exercise:
- A separate script.js file properly linked to HTML
- Alert showing "Yay!" when page loads
Inline Exercise:
- Button with onclick event
- Alert showing "Yay!" when button is clicked
Both projects should display alerts correctly
Clean, working code with no console errors

:hammer_and_wrench: Troubleshooting

:information_source: Info Common Issues

Alert not showing: Check if pop-ups are blocked in your browser
Script not loading: Verify the script tag path matches your file location
Button not working: Ensure quotes are properly closed in the onclick attribute
Console errors: Open Developer Tools (F12) to see detailed error messages

:emoji: Project Submission

:warning: Submission Requirements Before submitting, ensure:

Both exercises are completed and working

All alerts display correctly

You have committed your changes in StackBlitz

You have copied your StackBlitz URLs

When you have completed your "Introduction to JavaScript" projects, submit them using the link below:

Submit Your Projects Here

:information_source: Info What to Submit You'll need to provide:

Your StackBlitz URL for Exercise 1 (External JavaScript)
Your StackBlitz URL for Exercise 2 (Inline JavaScript)
Any additional notes about your implementation

Make sure to test both exercises before submitting to ensure all alert messages are working properly!