Tutorial 6: JavaScript Interactivity
Challenges
Add interactivity to your portfolio with these 5 beginner-friendly challenges.
Now that your portfolio looks great with HTML/CSS, let's make it interactive! Work through
the challenges below in order. They are optional but highly recommended — they will make
your portfolio stand out and prepare you for next year's projects.
Remember: Save your work, test often, and commit to GitHub after each challenge!
Tips before you start
How to Approach These Challenges
● Create your [Link] file and link it to your HTML first
● Start with Challenge 1 — it's the easiest and most useful
● Save and test after each step — don't add everything at once
● Use browser DevTools (F12 → Console tab) to check for errors
● Commit to GitHub after each working challenge so you don't lose progress
● Ask for help if you get stuck — show your code!
Troubleshooting Tips
● JavaScript not working? Check the console (F12 → Console tab) — red errors tell you
what's wrong
● "Uncaught TypeError: Cannot read property..." usually means your ID name is wrong
● Button not appearing? Make sure IDs match in both HTML and JS
● Copy-paste carefully — one missing bracket breaks everything!
● Test on different browsers (Chrome works best for development)
📌 Don't Forget to Push to GitHub After Each Challenge!
git add .
git commit -m "Added dark mode toggle"
git push
Then check your live site on GitHub Pages to make sure everything works!
BEFORE YOU START: Setting Up Your JavaScript File
Just like [Link] holds your styles, [Link] will hold your interactivity.
Step 1: Create a JavaScript File
● In your project folder, create a new file called [Link]
● This is where you will put all your JavaScript code
Step 2: Link It to Your HTML
Open each HTML file where you want JavaScript to work (like [Link]) and add this line right
before the closing </body> tag:
<!-- Your content goes above here -->
<script src="[Link]"></script>
</body>
</html>
Step 3: Test That It's Working
Add this line to your [Link] file:
[Link]("JavaScript is connected!");
Then:
● Open your HTML file in Chrome or Firefox
● Right-click anywhere and select Inspect, or press F12
● Click the Console tab
● You should see "JavaScript is connected!" — if you see it, you are good to go!
Tip — Option B: For quick testing, you can also write JavaScript directly inside your HTML file
between <script> tags. For these challenges, either approach works!
Challenge 1: Dark/Light Mode Toggle
Dark/Light Mode Toggle
What it does: Adds a button that switches between light and dark themes.
Step 1 — Add to your [Link] (inside <body>, wherever you want the button to appear —
e.g. inside your <nav> or at the top of your page):
<body>
<nav>
<!-- your nav links -->
<button id="theme-toggle"> Dark Mode</button> <!-- ADD THIS -->
</nav>
<!-- rest of your page... -->
</body>
Step 2 — Add to [Link] (find your existing body {} block and add the transition line, then
paste the new dark mode blocks at the very bottom of the file):
/* FIND your existing body {} block and add transition: */
body {
font-family: Arial, sans-serif; /* already there */
background-color: #ffffff; /* already there */
color: #333; /* already there */
transition: background-color 0.3s, color 0.3s; /* ADD THIS LINE */
}
/* Then paste these NEW blocks at the BOTTOM of [Link] */
[Link]-mode {
background-color: #333333;
color: #f9f9f9;
}
[Link]-mode nav { background-color: #222222; }
#theme-toggle { padding: 8px 16px; cursor: pointer; margin: 10px; }
Step 3 — Add to [Link]:
const toggleButton = [Link]('theme-toggle');
[Link]('click', function() {
[Link]('dark-mode');
if ([Link]('dark-mode')) {
[Link] = 'Light Mode';
} else {
[Link] = 'Dark Mode';
}
});
Your Tasks:
☐ Test it! Click the button and watch your colors change
☐ Add more dark mode styles for other elements (footer, cards, etc.)
Challenge 2: Typing Animation for Your Headline
Typing Animation for Your Headline
What it does: Creates a cool typewriter effect on your main headline.
Step 1 — Open [Link] and find your <header> section. Replace your existing <h1> tag
with this:
<header>
<h1 id="typing-headline"></h1> <!-- REPLACE your old <h1>Your Full Name</h1> with
this -->
<p>A short headline about yourself</p>
<img src="[Link]" alt="Your Name" width="200">
</header>
Step 2 — Add to [Link] (paste at the bottom of your [Link] file, after all your existing
styles):
#typing-headline {
min-height: 80px;
border-right: 3px solid #4CAF50;
display: inline-block;
animation: blink 0.75s step-end infinite;
}
@keyframes blink {
from, to { border-color: transparent; }
50% { border-color: #4CAF50; }
}
Step 3 — Add to [Link] (paste at the bottom of your [Link] file):
const texts = [
"Hi, I'm Your Name!",
"I'm a Web Developer",
"I Build Cool Things",
"Welcome to My Portfolio!"
];
let textIndex = 0;
let charIndex = 0;
let isDeleting = false;
const typingElement = [Link]('typing-headline');
function typeEffect() {
const currentText = texts[textIndex];
if (isDeleting) {
[Link] = [Link](0, charIndex - 1);
charIndex--;
} else {
[Link] = [Link](0, charIndex + 1);
charIndex++;
}
if (!isDeleting && charIndex === [Link]) {
isDeleting = true;
setTimeout(typeEffect, 2000);
return;
}
if (isDeleting && charIndex === 0) {
isDeleting = false;
textIndex = (textIndex + 1) % [Link];
}
const speed = isDeleting ? 50 : 100;
setTimeout(typeEffect, speed);
}
typeEffect();
Your Tasks:
☐ Change the texts array to say things about YOU
☐ Adjust colors to match your theme
☐ Try different typing speeds
Challenge 3: Back to Top Button
⬆️"Back to Top" Button
What it does: Shows a button when you scroll down that takes you back to the top.
Step 1 — Open [Link] and add this button just before the closing </body> tag, right after
your <footer> block:
<footer>
<p>© 2025 Your Name</p> <!-- your existing footer -->
</footer>
<button id="back-to-top" title="Go to top">↑</button> <!-- ADD THIS -->
<script src="[Link]"></script>
</body>
</html>
Step 2 — Add to [Link] (paste at the bottom of your [Link] file, after all your existing
styles):
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4CAF50;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
font-size: 24px;
cursor: pointer;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
transition: background-color 0.3s;
}
#back-to-top:hover { background-color: #45a049; }
Step 3 — Add to [Link] (paste at the bottom of your [Link] file):
const backToTopButton = [Link]('back-to-top');
[Link]('scroll', function() {
if ([Link] > 300) {
[Link] = 'block';
} else {
[Link] = 'none';
}
});
[Link]('click', function() {
[Link]({ top: 0, behavior: 'smooth' });
});
Your Tasks:
☐ Change the scroll distance (replace 300 with different numbers)
☐ Customize the button colors and position
☐ Test on different screen sizes
Challenge 4: Simple Project Filter
Simple Project Filter
What it does: Adds buttons to filter your projects by technology.
Step 1 — Open [Link]. First, add the filter buttons just before your first <article>
inside <main>. Then add data-category="..." to each of your existing <article> tags:
<main>
<!-- ADD these filter buttons at the top of <main>, before your articles -->
<div id="filter-buttons">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="html">HTML/CSS</button>
<button class="filter-btn" data-filter="bootstrap">Bootstrap</button>
<button class="filter-btn" data-filter="javascript">JavaScript</button>
</div>
<!-- UPDATE your existing <article> tags — add class and data-category -->
<article class="project-card" data-category="html"> <!-- ADD class and data-
category -->
<h2>Project 1: Personal Portfolio</h2>
<p>This is the portfolio you built in Tutorial 5!</p>
...
</article>
<article class="project-card" data-category="bootstrap"> <!-- ADD class and data-
category -->
<h2>Project 2: Your Next Project</h2>
...
</article>
</main>
Step 2 — Add to [Link] (paste at the bottom of your [Link] file, after all your existing
styles):
.filter-btn {
padding: 8px 16px; margin: 5px;
border: 1px solid #4CAF50;
background: white; color: #4CAF50;
cursor: pointer; border-radius: 4px;
}
.[Link] { background: #4CAF50; color: white; }
.project-card { transition: all 0.3s; margin: 15px 0; padding: 15px;
border: 1px solid #ddd; border-radius: 8px; }
.[Link] { display: none; }
Step 3 — Add to [Link] (paste at the bottom of your [Link] file):
const filterButtons = [Link]('.filter-btn');
const projects = [Link]('.project-card');
[Link](button => {
[Link]('click', function() {
[Link](btn => [Link]('active'));
[Link]('active');
const filterValue = [Link]('data-filter');
[Link](project => {
if (filterValue === 'all') {
[Link]('hidden');
} else {
const categories = [Link]('data-category');
if ([Link](filterValue)) {
[Link]('hidden');
} else {
[Link]('hidden');
}
}
});
});
});
Your Tasks:
☐ Add categories to your own projects
☐ Customize the button styles
☐ Add more filter categories (like "all" or "featured")
Challenge 5: Click to Reveal Fun Fact
"Click to Reveal" Fun Fact
What it does: Hides a fun fact about yourself until the user clicks a button. Perfect for adding
personality to your About page!
Step 1 — Open [Link] and find your <main> section. Add this block inside it, after your
introductory paragraph about yourself:
<main>
<img src="[Link]" alt="Your Name" width="200">
<h2>Hi, I'm [Your Name]!</h2>
<p>Write a paragraph about yourself...</p> <!-- already there -->
<!-- ADD THIS BLOCK after your intro paragraph -->
<div class="fun-fact-container">
<button id="reveal-fact">🔍 Click to Reveal a Fun Fact About
Me!</button>
<p id="fun-fact" class="hidden-fact">🎮 I can solve a Rubik's cube in
under 2 minutes!</p>
</div>
<h3>My Skills</h3> <!-- rest of your page continues... -->
</main>
Step 2 — Add to [Link] (paste at the bottom of your [Link] file, after all your existing
styles):
.fun-fact-container {
margin: 30px 0;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
text-align: center;
}
#reveal-fact {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#reveal-fact:hover {
background-color: #45a049;
}
.hidden-fact {
display: none;
font-size: 18px;
margin-top: 20px;
padding: 15px;
background-color: white;
border-radius: 5px;
animation: fadeIn 0.5s;
}
.[Link] {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
Step 3 — Add to [Link] (paste at the bottom of your [Link] file):
const revealButton = [Link]('reveal-fact');
const funFact = [Link]('fun-fact');
[Link]('click', function() {
// Toggle the fact visibility
[Link]('show');
// Change button text based on visibility
if ([Link]('show')) {
[Link] = ' Hide Fun Fact';
} else {
[Link] = '🔍 Click to Reveal a Fun Fact About Me!';
}
});
Your Tasks:
☐ Change the fun fact to something true about YOU (hobby, talent, achievement, weird skill)
☐ Add multiple fun facts that cycle through on each click
☐ Change the colors to match your theme
☐ Bonus: Add an image that appears alongside the fact!
Happy coding! 🚀