simoneloru/ora.html

## ora.html
<!DOCTYPE html>
<html>
<head>
  <title>Clock App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Clock App</h1>
    <div class="clock">
      <div class="hour">
        <span id="hour"></span>
      </div>
      <div class="minute">
        <span id="minute"></span>
      </div>
      <div class="second">
        <span id="second"></span>
      </div>
    </div>
    <button id="fullscreen-btn">Full Screen</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

## script.js
// Ottieni l'elemento clock
const clock = document.querySelector('.clock');

// Ottieni l'elemento fullscreen-btn
const fullscreenBtn = document.querySelector('#fullscreen-btn');

// Funzione per aggiornare l'ora
function updateClock() {
  const now = new Date();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  clock.innerHTML = `<span>${hour}</span>:<span>${minute}</span>:<span>${second}</span>`;
}

// Funzione per attivare la modalità full screen
function enterFullScreen() {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();
  }
}

// Aggiungi un listener per l'evento click sul bottone fullscreen-btn
fullscreenBtn.addEventListener('click', enterFullScreen);

// Aggiungi un listener per l'evento tick dell'orologio
setInterval(updateClock, 1000);

## style.css
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.clock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.hour, .minute, .second {
  font-size: 1em;
  font-weight: bold;
  color: #333;
}

.hour {
  margin-right: 20px;
}

.minute {
  margin-right: 20px;
}

.second {
  margin-left: 20px;
}

#fullscreen-btn {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#fullscreen-btn:hover {
  background-color: #45a049;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Clock App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h1>Clock App</h1>
	<div class="clock">
	<div class="hour">
	<span id="hour"></span>
	</div>
	<div class="minute">
	<span id="minute"></span>
	</div>
	<div class="second">
	<span id="second"></span>
	</div>
	</div>
	<button id="fullscreen-btn">Full Screen</button>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	// Ottieni l'elemento clock
	const clock = document.querySelector('.clock');

	// Ottieni l'elemento fullscreen-btn
	const fullscreenBtn = document.querySelector('#fullscreen-btn');

	// Funzione per aggiornare l'ora
	function updateClock() {
	const now = new Date();
	const hour = now.getHours();
	const minute = now.getMinutes();
	const second = now.getSeconds();
	clock.innerHTML = `<span>${hour}</span>:<span>${minute}</span>:<span>${second}</span>`;
	}

	// Funzione per attivare la modalità full screen
	function enterFullScreen() {
	if (document.documentElement.requestFullscreen) {
	document.documentElement.requestFullscreen();
	} else if (document.documentElement.webkitRequestFullscreen) {
	document.documentElement.webkitRequestFullscreen();
	} else if (document.documentElement.msRequestFullscreen) {
	document.documentElement.msRequestFullscreen();
	}
	}

	// Aggiungi un listener per l'evento click sul bottone fullscreen-btn
	fullscreenBtn.addEventListener('click', enterFullScreen);

	// Aggiungi un listener per l'evento tick dell'orologio
	setInterval(updateClock, 1000);
	body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.clock {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	}

	.hour, .minute, .second {
	font-size: 1em;
	font-weight: bold;
	color: #333;
	}

	.hour {
	margin-right: 20px;
	}

	.minute {
	margin-right: 20px;
	}

	.second {
	margin-left: 20px;
	}

	#fullscreen-btn {
	background-color: #4CAF50;
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}

	#fullscreen-btn:hover {
	background-color: #45a049;
	}