<h1>Hello World!</h1>

<button class="my-btn">Click Me</button>
<style>
.my-btn {
  background: #e67e22;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</style>

<button id="counter">0</button>
<script>
let count = 0;
document.getElementById('counter').addEventListener('click', () => {
  count++;
  document.getElementById('counter').textContent = count;
});
</script>

<div class="color-picker">
  <input type="range" id="red" min="0" max="255">
  <input type="range" id="green" min="0" max="255">
  <input type="range" id="blue" min="0" max="255">
  <div id="color-box"></div>
  <p id="rgb-value">RGB(127, 127, 127)</p>
</div>
<style>
.color-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
}
#color-box {
  width: 100px;
  height: 100px;
  background: rgb(127, 127, 127);
}
</style>
<script>
const updateColor = () => {
  const r = document.getElementById('red').value;
  const g = document.getElementById('green').value;
  const b = document.getElementById('blue').value;
  document.getElementById('color-box').style.background = `rgb(${r}, ${g}, ${b})`;
  document.getElementById('rgb-value').textContent = `RGB(${r}, ${g}, ${b})`;
};
document.querySelectorAll('input[type="range"]').forEach(input => {
  input.value = 127;
  input.addEventListener('input', updateColor);
});
updateColor();
</script>

<div class="todo-app">
  <input type="text" id="new-task" placeholder="Add new task">
  <button id="add-btn">Add</button>
  <ul id="task-list"></ul>
</div>
<style>
.todo-app {
  max-width: 400px;
  margin: 0 auto;
}
#new-task {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
#add-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
#task-list {
  margin-top: 10px;
  list-style: none;
  padding: 0;
}
#task-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.delete-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<script>
document.getElementById('add-btn').addEventListener('click', addTask);
document.getElementById('new-task').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});

function addTask() {
  const taskInput = document.getElementById('new-task');
  const taskText = taskInput.value.trim();
  if (taskText === '') return;
  
  const li = document.createElement('li');
  li.innerHTML = `
    ${taskText}
    Delete
  `;
  
  li.querySelector('.delete-btn').addEventListener('click', () => {
    li.remove();
  });
  
  document.getElementById('task-list').appendChild(li);
  taskInput.value = '';
}
</script>

<div id="clock"></div>
<style>
#clock {
  font-family: monospace;
  font-size: 2rem;
  background: #2c3e50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
}
</style>
<script>
function updateClock() {
  const now = new Date();
  const timeString = now.toLocaleTimeString();
  document.getElementById('clock').textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>