surshar / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Built by Anthropic · github.com/anthropics

Add interactive web page with separate JavaScript fileBrowse files

- 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 <noreply@anthropic.com>

Claude authored on Oct 10, 2025 parent 8462b07 · commit 107272c9fa7f

2 changed files+102 -0compared with 8462b07

Aindex.html

Ascript.js

Aindex.html+64 -0

		@@ -1,0 +1,64 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	6	+ <title>Sample Web Page</title>
	7	+ <style>
	8	+ body {
	9	+ font-family: Arial, sans-serif;
	10	+ margin: 0;
	11	+ padding: 20px;
	12	+ background-color: #f4f4f4;
	13	+ }
	14	+ .container {
	15	+ max-width: 800px;
	16	+ margin: 0 auto;
	17	+ background-color: white;
	18	+ padding: 30px;
	19	+ border-radius: 8px;
	20	+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	21	+ }
	22	+ h1 {
	23	+ color: #333;
	24	+ text-align: center;
	25	+ }
	26	+ .button {
	27	+ background-color: #007bff;
	28	+ color: white;
	29	+ padding: 10px 20px;
	30	+ border: none;
	31	+ border-radius: 4px;
	32	+ cursor: pointer;
	33	+ font-size: 16px;
	34	+ margin: 10px 5px;
	35	+ }
	36	+ .button:hover {
	37	+ background-color: #0056b3;
	38	+ }
	39	+ #output {
	40	+ margin-top: 20px;
	41	+ padding: 15px;
	42	+ background-color: #f8f9fa;
	43	+ border-left: 4px solid #007bff;
	44	+ border-radius: 4px;
	45	+ }
	46	+ </style>
	47	+</head>
	48	+<body>
	49	+ <div class="container">
	50	+ <h1>Welcome to My Web Page</h1>
	51	+ <p>This is a sample web page with JavaScript functionality.</p>
	52	+
	53	+ <button class="button" onclick="showMessage()">Show Message</button>
	54	+ <button class="button" onclick="changeColor()">Change Color</button>
	55	+ <button class="button" onclick="showDateTime()">Show Date/Time</button>
	56	+
	57	+ <div id="output">
	58	+ <p>Click a button to see JavaScript in action!</p>
	59	+ </div>
	60	+ </div>
	61	+
	62	+ <script src="script.js"></script>
	63	+</body>
	64	+</html>

Ascript.js+38 -0

		@@ -1,0 +1,38 @@
	1	+// Sample JavaScript functions for the web page
	2	+
	3	+function showMessage() {
	4	+ const output = document.getElementById('output');
	5	+ output.innerHTML = '<p><strong>Hello from JavaScript!</strong> This message was generated by the external script file.</p>';
	6	+}
	7	+
	8	+function changeColor() {
	9	+ const output = document.getElementById('output');
	10	+ const colors = ['#e3f2fd', '#f3e5f5', '#e8f5e8', '#fff3e0', '#fce4ec'];
	11	+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
	12	+
	13	+ output.style.backgroundColor = randomColor;
	14	+ output.innerHTML = '<p>Background color changed! The new color is: <strong>' + randomColor + '</strong></p>';
	15	+}
	16	+
	17	+function showDateTime() {
	18	+ const output = document.getElementById('output');
	19	+ const now = new Date();
	20	+ const dateTimeString = now.toLocaleString();
	21	+
	22	+ output.innerHTML = '<p>Current date and time: <strong>' + dateTimeString + '</strong></p>';
	23	+}
	24	+
	25	+// Add event listener for when the page loads
	26	+document.addEventListener('DOMContentLoaded', function() {
	27	+ console.log('JavaScript file loaded successfully!');
	28	+
	29	+ // You can add any initialization code here
	30	+ const container = document.querySelector('.container');
	31	+ if (container) {
	32	+ container.addEventListener('click', function(event) {
	33	+ if (event.target.classList.contains('button')) {
	34	+ console.log('Button clicked:', event.target.textContent);
	35	+ }
	36	+ });
	37	+ }
	38	+});