SilasRodrigues19/INSTRUÇÕES.md

## index.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trabalho PHP - Datas (Eduarda)</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>


<?php

// Array com os nomes dos meses
$meses = array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");

// Loop pelos meses do ano
for ($i = 1; $i <= 12; $i++) {

    // Obtem a data do primeiro dia do mes no formato Y-m-d
    $data = date("Y-m-01", strtotime(date('Y') . '-' . $i . '-01'));

    // Obtem o numero de dias do mes
    $num_dias = date("t", strtotime($data));

    // Obtem o dia da semana do primeiro dia do mes (indice 0 = Domingo, indice 6 = Sábado)
    $dia_semana = date("w", strtotime($data));


    // Imprime o cabecalho da tabela
    echo "<table>
          <tr>
              <td colspan='7'><h2>" . $meses[$i-1] . "</h2></td>
          </tr>
          <br>
          <tr>
              <th>D</th>
              <th>S</th>
              <th>T</th>
              <th>Q</th>
              <th>Q</th>
              <th>S</th>
              <th>S</th>
          </tr>
        <tr>";

    // Imprime os dias da semana anteriores ao primeiro dia do mes
    for ($j = 0; $j < $dia_semana; $j++) {
        echo "<td></td>";
    }

    // Loop pelos dias do mes
    for ($j = 1; $j <= $num_dias; $j++) {

        // Obtem o dia da semana do dia atual (indice 0 = Domingo, indice 6 = Sábado)
        $dia_semana = date("w", strtotime(date('Y') . '-' . $i . '-' . $j));

        // Se dia for um domingo, pinte de vermelho e se for um sábado deixe negrito
        $classe = "";
        if ($dia_semana == 0) {
            $classe = "red";
        } else if ($dia_semana == 6) {
            $classe = "bold";
        }

        // Imprime o dia atual com a classe CSS definida
        echo "<td class='" . $classe . "'>" . $j . "</td>";

        // Se for sabado e ainda nao chegou ao ultimo dia do mes, fecha a linha e abre uma nova
        if ($dia_semana == 6 && $j != $num_dias) {
            echo "</tr><tr>";
        }
    }

    // Imprime os dias da semana seguintes ao ultimo dia do mes
    $dia_semana = date("w", strtotime(date('Y') . '-' . $i . '-' . $num_dias));
    for ($j = $dia_semana; $j < 6; $j++) {
        echo "<td></td>";
    }

    // Fecha a tabela
    echo "</tr>";
    echo "</table>";

}
?>

<h1 id="hour"></h1>

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


## INSTRUÇÕES.md

      
    Raw
  

              INSTRUÇÕES.md
            
          
    Instruções para rodar e testar usando o XAMPP


Baixe e instale o XAMPP em seu computador a partir do site oficial: https://www.apachefriends.org/index.html
Abra o executável xampp-control.exe, geralmente localizado em C:\xampp e inicie o Apache, conforme imagem: https://i.imgur.com/hxnlovN.png
Mova a pasta do projeto pra dentro de htdocs, geralmente localizado em C:\xampp\htdocs
Abra o navegador e digite o endereço localhost na barra de endereço para verificar se o XAMPP está funcionando corretamente.
Abra o navegador e digite o endereço localhost/nome_da_sua_pasta na barra de endereço para acessar seu projeto, nesse caso é localhost/Calend%c3%a1rio%20PHP/


## script.js
/*
  Função que atualiza a hora na página a cada segundo
*/
function updateTime() {
  // Obtém a hora atual
  let now = new Date();
  // Obtém a hora atual em formato de 24 horas, como uma string com dois dígitos
  let hour = now.getHours().toString().padStart(2, '0');
  // Obtém os minutos atuais como uma string com dois dígitos
  let minute = now.getMinutes().toString().padStart(2, '0');
  // Obtém os segundos atuais como uma string com dois dígitos
  let second = now.getSeconds().toString().padStart(2, '0');
  // Variável para armazenar a saudação (bom dia, boa tarde, boa noite)
  let greeting;

  // Define a saudação de acordo com a hora do dia
  if (hour >= 6 && hour < 12) {
    greeting = 'Bom dia';
  } else if (hour >= 12 && hour < 18) {
    greeting = 'Boa tarde';
  } else {
    greeting = 'Boa noite';
  }

  // Atualiza o conteúdo do elemento HTML com a saudação e a hora atual
  document.querySelector('#hour').innerHTML =
    greeting + ', agora são ' + hour + ':' + minute + ':' + second;
}

// Chama a função updateTime a cada 1000 milissegundos (1 segundo)
setInterval(updateTime, 1000);

## style.css
.red {
    color: red;
}
.bold {
    font-weight: bold;
}

table {
  border: 1px solid #000;
}

th, td {
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Trabalho PHP - Datas (Eduarda)</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>


	<?php

	// Array com os nomes dos meses
	$meses = array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");

	// Loop pelos meses do ano
	for ($i = 1; $i <= 12; $i++) {

	// Obtem a data do primeiro dia do mes no formato Y-m-d
	$data = date("Y-m-01", strtotime(date('Y') . '-' . $i . '-01'));

	// Obtem o numero de dias do mes
	$num_dias = date("t", strtotime($data));

	// Obtem o dia da semana do primeiro dia do mes (indice 0 = Domingo, indice 6 = Sábado)
	$dia_semana = date("w", strtotime($data));


	// Imprime o cabecalho da tabela
	echo "<table>
	<tr>
	<td colspan='7'><h2>" . $meses[$i-1] . "</h2></td>
	</tr>
	<br>
	<tr>
	<th>D</th>
	<th>S</th>
	<th>T</th>
	<th>Q</th>
	<th>Q</th>
	<th>S</th>
	<th>S</th>
	</tr>
	<tr>";

	// Imprime os dias da semana anteriores ao primeiro dia do mes
	for ($j = 0; $j < $dia_semana; $j++) {
	echo "<td></td>";
	}

	// Loop pelos dias do mes
	for ($j = 1; $j <= $num_dias; $j++) {

	// Obtem o dia da semana do dia atual (indice 0 = Domingo, indice 6 = Sábado)
	$dia_semana = date("w", strtotime(date('Y') . '-' . $i . '-' . $j));

	// Se dia for um domingo, pinte de vermelho e se for um sábado deixe negrito
	$classe = "";
	if ($dia_semana == 0) {
	$classe = "red";
	} else if ($dia_semana == 6) {
	$classe = "bold";
	}

	// Imprime o dia atual com a classe CSS definida
	echo "<td class='" . $classe . "'>" . $j . "</td>";

	// Se for sabado e ainda nao chegou ao ultimo dia do mes, fecha a linha e abre uma nova
	if ($dia_semana == 6 && $j != $num_dias) {
	echo "</tr><tr>";
	}
	}

	// Imprime os dias da semana seguintes ao ultimo dia do mes
	$dia_semana = date("w", strtotime(date('Y') . '-' . $i . '-' . $num_dias));
	for ($j = $dia_semana; $j < 6; $j++) {
	echo "<td></td>";
	}

	// Fecha a tabela
	echo "</tr>";
	echo "</table>";

	}
	?>

	<h1 id="hour"></h1>

	<script src="script.js"></script>
	</body>
	</html>
	/*
	Função que atualiza a hora na página a cada segundo
	*/
	function updateTime() {
	// Obtém a hora atual
	let now = new Date();
	// Obtém a hora atual em formato de 24 horas, como uma string com dois dígitos
	let hour = now.getHours().toString().padStart(2, '0');
	// Obtém os minutos atuais como uma string com dois dígitos
	let minute = now.getMinutes().toString().padStart(2, '0');
	// Obtém os segundos atuais como uma string com dois dígitos
	let second = now.getSeconds().toString().padStart(2, '0');
	// Variável para armazenar a saudação (bom dia, boa tarde, boa noite)
	let greeting;

	// Define a saudação de acordo com a hora do dia
	if (hour >= 6 && hour < 12) {
	greeting = 'Bom dia';
	} else if (hour >= 12 && hour < 18) {
	greeting = 'Boa tarde';
	} else {
	greeting = 'Boa noite';
	}

	// Atualiza o conteúdo do elemento HTML com a saudação e a hora atual
	document.querySelector('#hour').innerHTML =
	greeting + ', agora são ' + hour + ':' + minute + ':' + second;
	}

	// Chama a função updateTime a cada 1000 milissegundos (1 segundo)
	setInterval(updateTime, 1000);
	.red {
	color: red;
	}
	.bold {
	font-weight: bold;
	}

	table {
	border: 1px solid #000;
	}

	th, td {
	border: 1px solid #000;
	padding: 5px;
	text-align: center;
	}