Adding Simple JavaScript | Lecture 30

Let’s begin with Lecture 30 of the HTML5 & CSS3 series. Adding Simple JavaScript – Make Your Website Interactive. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

• Understand what JavaScript is and why it’s important
• Know how to add JavaScript to your HTML page
• Be able to respond to user actions like clicks and hovers
• Add simple interactivity like alerts , text changes , and dark mode toggle
• Bring your HTML & CSS website to life with real interaction!

💡 What Is JavaScript?

JavaScript is a programming language that makes websites interactive.

Think of it like this:

If HTML is the skeleton and CSS is the skin , then JavaScript is the brain — it helps your site think, react, and do things!

With JavaScript, you can:

• Show messages when someone clicks a button
• Change content without reloading the page
• Toggle dark/light mode
• Validate forms
• Animate elements
• And much more!

🔧 How to Add JavaScript to Your Page

There are two ways:

1. Inline Script (inside HTML)

<script>
    alert("Welcome to my website!");
</script>

Place this before </body> for better performance.

2. External Script (best practice)

Create a file named script.js and link it like this:

<script src="script.js"></script>

This keeps your code organized and reusable.

🧠 Basic JavaScript Concepts

💻 Try This: Add a Welcome Alert

Let’s make your portfolio page show a friendly greeting when it loads.

Step 1: Open portfolio.html

Go to your personal portfolio page from Lecture 29.

Build a Personal Portfolio Page | Lecture 29

Step 2: Add This Code Before </body>

<script>
    // Show welcome message
    alert("Welcome to My Portfolio!");
</script>

Now every time someone visits your page, they’ll see a greeting! 🎉

💡 Bonus: Add a Button That Changes Text

Let’s create a button that updates a paragraph when clicked.

Step 1: Add HTML

Add this inside the <main> section of your portfolio page:

<section id="interactive">
    <h2>Interactive Section</h2>
    <p id="message">Click the button to change this text!</p>
    <button onclick="changeText()">Change Text</button>
</section>

Step 2: Add JavaScript

Update your <script> block or script.js with:

<script>
    function changeText() {
        document.getElementById("message").innerHTML = "You changed the text! 😄";
    }
</script>

🎉 Now clicking the button changes the message dynamically!

💡 Bonus: Add a Dark Mode Toggle

Let’s let users switch between light and dark themes using JavaScript.

Step 1: Define a Dark Theme in CSS

Add this inside <style>:

.dark-mode {
    background-color: #1e1e1e;
    color: #f1f1f1;
}

.dark-mode .card, .dark-mode header, .dark-mode footer {
    background-color: #2d2d2d;
}

Step 2: Add Toggle Button in HTML

Inside your <header> or <footer>:

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

Step 3: Add JavaScript Function

Update your <script> block with:

<script>
    function toggleDarkMode() {
        document.body.classList.toggle("dark-mode");
    }
</script>

Now users can toggle between light and dark mode with one click! 🌙💡

🧪 Try It Yourself!

1. Add a counter button that increases a number each time it’s clicked.
2. Create a “Show More” button under the About section to reveal hidden text.
3. Add an onmouseover effect that changes heading color when hovered.
4. Style the dark mode further by changing all links and buttons to look good in dark theme.

📚 Summary of What You Learned Today

✅ You now know how to:

• Add JavaScript to your HTML page
• Use functions to run code on events like onclick
• Modify HTML content using document.getElementById()
• Toggle styles and modes using JavaScript
• Make your site interactive and fun!

🚀 Next Lecture Preview:

In Lecture 31 , we’ll explore more JavaScript basics — including variables, data types, and conditionals — so you can write smarter, more powerful scripts for your webpages!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series