From 107272c9fa7ff3ff895b8fa6d7503e10b15907c5 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 10 Oct 2025 02:49:39 +0000 Subject: [PATCH] Add interactive web page with separate JavaScript file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create index.html with interactive buttons and styling - Create script.js with JavaScript functions for user interactions - Features include message display, color changing, and date/time display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 38 ++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..ad08c103 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + Sample Web Page + + + +
+

Welcome to My Web Page

+

This is a sample web page with JavaScript functionality.

+ + + + + +
+

Click a button to see JavaScript in action!

+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..3552fdf5 --- /dev/null +++ b/script.js @@ -0,0 +1,38 @@ +// Sample JavaScript functions for the web page + +function showMessage() { + const output = document.getElementById('output'); + output.innerHTML = '

Hello from JavaScript! This message was generated by the external script file.

'; +} + +function changeColor() { + const output = document.getElementById('output'); + const colors = ['#e3f2fd', '#f3e5f5', '#e8f5e8', '#fff3e0', '#fce4ec']; + const randomColor = colors[Math.floor(Math.random() * colors.length)]; + + output.style.backgroundColor = randomColor; + output.innerHTML = '

Background color changed! The new color is: ' + randomColor + '

'; +} + +function showDateTime() { + const output = document.getElementById('output'); + const now = new Date(); + const dateTimeString = now.toLocaleString(); + + output.innerHTML = '

Current date and time: ' + dateTimeString + '

'; +} + +// Add event listener for when the page loads +document.addEventListener('DOMContentLoaded', function() { + console.log('JavaScript file loaded successfully!'); + + // You can add any initialization code here + const container = document.querySelector('.container'); + if (container) { + container.addEventListener('click', function(event) { + if (event.target.classList.contains('button')) { + console.log('Button clicked:', event.target.textContent); + } + }); + } +}); \ No newline at end of file