Day 4: Building an AI Chat Interface with Gemini

Time commitment: 25–30 minutes (+ video)

Today's project builds on everything you've done so far — HTML, CSS, and JavaScript — but now you'll use them to connect with a real AI model using Google's Gemini API.

This is where coding starts to feel powerful. You'll build an app that sends a message to Google Gemini and displays its response — a mini chat experience right inside your webpage.

You'll follow along with the video for most of this, typing as you go.

Step 1: Get Your Gemini API Key

Go to Google AI Studio
Sign in with your Google account
Click Create API Key
Copy the key — you'll only see it once

Keep this key private and never commit it to GitHub.

Step 2: Follow Along with the Video

You'll continue working in the same HTML and CSS files from the previous lessons.

Understanding what an API is
Writing JavaScript that makes a request to Google's Gemini API
Handling a JSON response
Displaying the AI's response right below your text box

🎥 Watch: Connecting Your Site to Google Gemini

This video walks you through setting up your API key, writing the fetch request, and displaying Gemini’s response inside your page

Setup JavaScript

Create script.js in your folder.
Link it at the bottom of your HTML (right before </body>):

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

Why at the bottom? JavaScript interacts with HTML elements. If the script loads before the elements, there’s nothing to interact with. Putting it at the bottom ensures the page loads first.

Button-Driven Development

Add this section to your HTML before the closing </body> tag:

<section>
  <input id="content" type="text" />
  <button id="myButton">Click Me</button>
  <p id="message"></p>
</section>

Then in script.js:

const btn = document.getElementById('myButton');
const input = document.getElementById('content');
const message = document.getElementById('message');

Each variable stores a reference to an HTML element you’ll use later.

Key JavaScript Concepts

Variables: const, let, and var

var input = "something";
let count = 0;
const name = "Alice";

Which to use?

const – default choice; can’t reassign
let – when value will change
var – older; avoid

The Core Pattern

Select elements
Listen for events
Do something

Making It Interactive

const btn = document.getElementById('myButton');
const input = document.getElementById('content');
const message = document.getElementById('message');

// when a user clicks the button:
btn.addEventListener('click', function() {
  message.textContent = input.value;
  input.value = '';
});

Test it: Save and refresh, type in the box, click the button — your message appears!

Console and Debugging

Method 1: console.log()

btn.addEventListener('click', function() {
  console.log('HERE');
  console.log(input.value, 'VALUE');
  message.textContent = input.value;
  input.value = '';
});

Method 2: The Debugger

btn.addEventListener('click', function() {
  debugger;
  message.textContent = input.value;
  input.value = '';
});

Add debugger; to pause execution and inspect variable values step-by-step.

Practice Challenges

Make comments stack instead of replace.
Create a counter with + / – buttons.
Color changer: button toggles background color.
Show/hide paragraph with a button.

Common Mistakes

“Cannot read property of null” – wrong ID or script in head.
Nothing happens – check console for errors.
Red text – read and fix the message!

How to Get Unstuck

Check the console (F12).
Use console.log().
Use debugger;.
Google it.
Break it on purpose and learn.

Key Takeaways

JavaScript is hard — and that’s normal.
Pattern: Select → Listen → Do
Use const by default, let when reassigning
getElementById() selects elements
.addEventListener('click') responds to clicks
.value gets input text
Console (F12) is your best friend
debugger; is powerful

Tomorrow: Build your first project using everything you’ve learned.... with AI!