PROJETO JAVASCRIPT

TODOS PROJETOS -FREE para vocês.

Todos os códigos para fins de estudos.

 

 PRIMEIRO PROJETO DESPERTADOR

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Despertador em JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #alarm-set {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Despertador</h1>
    <label for="alarm-time">Defina o horário do alarme:</label>
    <input type="time" id="alarm-time">
    <button id="alarm-set">Ativar Alarme</button>
    <p id="alarm-status"></p>

    <script>
        // Código JavaScript aqui
    </script>
</body>
</html>
 
 
document.getElementById('alarm-set').addEventListener('click', function () {
    const alarmTime = document.getElementById('alarm-time').value;
    if (!alarmTime) {
        alert("Por favor, defina um horário para o alarme.");
        return;
    }

    const [alarmHour, alarmMinute] = alarmTime.split(':');
    const now = new Date();
    const alarmDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), alarmHour, alarmMinute, 0, 0);

    // Verifica se o horário do alarme já passou hoje
    if (alarmDate <= now) {
        alert("O horário do alarme deve ser no futuro.");
        return;
    }

    document.getElementById('alarm-status').textContent = `Alarme definido para ${alarmTime}`;

    // Calcula o tempo restante para o alarme
    const timeUntilAlarm = alarmDate - now;

    setTimeout(() => {
        alert("Hora de acordar!");
        document.getElementById('alarm-status').textContent = "Alarme disparado!";
    }, timeUntilAlarm);
}); 
 
29/01/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006. 
Todos os direito reservados;;  
 

 
SEGUNDO PROJETO EM JAVASCRIPT QUEBRA - CABEÇA
 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quebra-Cabeça</title>
    <style>
        #puzzle {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
        }
        .piece {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #000;
            font-size: 24px;
            cursor: pointer;
        }
        .empty {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>Quebra-Cabeça</h1>
    <div id="puzzle"></div>
    <button id="shuffle">Embaralhar</button>

    <script src="puzzle.js"></script>
</body>
</html>
 
JAVASCRIPT 
document.addEventListener("DOMContentLoaded", function() {
    const puzzleContainer = document.getElementById("puzzle");
    const shuffleButton = document.getElementById("shuffle");
    const pieces = [];
    let emptyIndex = 8; // A última peça está vazia

    // Cria as peças do quebra-cabeça
    function createPuzzle() {
        for (let i = 0; i < 8; i++) {
            const piece = document.createElement("div");
            piece.classList.add("piece");
            piece.textContent = i + 1;
            piece.addEventListener("click", () => movePiece(i));
            pieces.push(piece);
            puzzleContainer.appendChild(piece);
        }
        // Adiciona a peça vazia
        const emptyPiece = document.createElement("div");
        emptyPiece.classList.add("piece", "empty");
        pieces.push(emptyPiece);
        puzzleContainer.appendChild(emptyPiece);
    }

    // Move a peça clicada para a posição vazia
    function movePiece(index) {
        const emptyRow = Math.floor(emptyIndex / 3);
        const emptyCol = emptyIndex % 3;
        const pieceRow = Math.floor(index / 3);
        const pieceCol = index % 3;

        if ((Math.abs(emptyRow - pieceRow) === 1 && emptyCol === pieceCol) ||
            (Math.abs(emptyCol - pieceCol) === 1 && emptyRow === pieceRow)) {
            // Troca a peça clicada com a peça vazia
            pieces[emptyIndex].textContent = pieces[index].textContent;
            pieces[index].textContent = "";
            pieces[emptyIndex].classList.remove("empty");
            pieces[index].classList.add("empty");
            emptyIndex = index;
        }
    }

    // Embaralha as peças
    function shufflePieces() {
        for (let i = pieces.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [pieces[i].textContent, pieces[j].textContent] = [pieces[j].textContent, pieces[i].textContent];
        }
        pieces[emptyIndex].classList.add("empty");
    }

    // Inicializa o jogo
    createPuzzle();
    shuffleButton.addEventListener("click", shufflePieces);
});  
 
29/01/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006. 
Todos os direito reservados;;  

 
 TERCEIRO PROJETO AGENDA PESSOAL 2025
 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agenda em JavaScript</title>
</head>
<body>
    <h1>Minha Agenda</h1>
    
    <form id="eventForm">
        <label for="eventName">Nome do Evento:</label>
        <input type="text" id="eventName" required>
        
        <label for="eventDate">Data do Evento:</label>
        <input type="date" id="eventDate" required>
        
        <button type="submit">Adicionar Evento</button>
    </form>

    <h2>Eventos Agendados</h2>
    <ul id="eventList"></ul>

    <script>
        // Array para armazenar os eventos
        let eventos = [];

        // Função para adicionar um evento
        function adicionarEvento(nome, data) {
            eventos.push({ nome: nome, data: data });
            atualizarLista();
        }

        // Função para remover um evento
        function removerEvento(index) {
            eventos.splice(index, 1);
            atualizarLista();
        }

        // Função para atualizar a lista de eventos na tela
        function atualizarLista() {
            const lista = document.getElementById('eventList');
            lista.innerHTML = ''; // Limpa a lista atual

            eventos.forEach((evento, index) => {
                const item = document.createElement('li');
                item.textContent = `${evento.nome} - ${evento.data}`;

                // Botão para remover o evento
                const botaoRemover = document.createElement('button');
                botaoRemover.textContent = 'Remover';
                botaoRemover.onclick = () => removerEvento(index);

                item.appendChild(botaoRemover);
                lista.appendChild(item);
            });
        }

        // Manipulador de evento para o formulário
        document.getElementById('eventForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Evita o recarregamento da página

            const nome = document.getElementById('eventName').value;
            const data = document.getElementById('eventDate').value;

            adicionarEvento(nome, data);

            // Limpa os campos do formulário
            document.getElementById('eventName').value = '';
            document.getElementById('eventDate').value = '';
        });
    </script>
</body>
</html> 
29/01/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006. 
Todos os direito reservados;;  

 
 
 
 Código fonte de como  criar um chat de conversa em javascript


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat com Fotos e Apelidos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .chat-container {
            width: 400px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            text-align: center;
            font-size: 18px;
        }

        .chat-messages {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }

        .message {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .message img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .message-content {
            background-color: #f1f1f1;
            padding: 8px;
            border-radius: 8px;
            max-width: 70%;
        }

        .message-content .nickname {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .chat-input {
            display: flex;
            padding: 10px;
            background-color: #f9f9f9;
        }

        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }

        .chat-input button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .chat-input button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <div class="chat-container">
        <div class="chat-header">
            Chat
        </div>
        <div class="chat-messages" id="chat-messages">
            <!-- Mensagens serão adicionadas aqui via JavaScript -->
        </div>
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="Digite sua mensagem...">
            <button onclick="sendMessage()">Enviar</button>
        </div>
    </div>

    <script>
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');

        function sendMessage() {
            const messageText = messageInput.value.trim();
            if (messageText !== '') {
                const messageElement = document.createElement('div');
                messageElement.classList.add('message');

                const userImage = document.createElement('img');
                userImage.src = 'https://via.placeholder.com/40'; // URL da imagem do usuário
                userImage.alt = 'Usuário';

                const messageContent = document.createElement('div');
                messageContent.classList.add('message-content');

                const nickname = document.createElement('div');
                nickname.classList.add('nickname');
                nickname.textContent = 'Apelido'; // Apelido do usuário

                const messageTextElement = document.createElement('div');
                messageTextElement.textContent = messageText;

                messageContent.appendChild(nickname);
                messageContent.appendChild(messageTextElement);

                messageElement.appendChild(userImage);
                messageElement.appendChild(messageContent);

                chatMessages.appendChild(messageElement);

                // Limpa o campo de entrada
                messageInput.value = '';

                // Rola para a última mensagem
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        }

        // Permite enviar mensagem pressionando Enter
        messageInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>

</body>
</html>
 
30/01/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006.
Todos os direito reservados;; 

 Agenda de contato
 
 

 


Código fonte apenas para estudo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agenda de Contatos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group input[type="file"] {
            padding: 3px;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-remove {
            background-color: #dc3545;
        }
        .contact-list {
            margin-top: 20px;
        }
        .contact-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .contact-item img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }
        .contact-item div {
            flex-grow: 1;
        }
        .contact-item button {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Agenda de Contatos</h1>
        <form id="contactForm">
            <div class="form-group">
                <label for="name">Nome:</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label for="phone">Telefone:</label>
                <input type="text" id="phone" required>
            </div>
            <div class="form-group">
                <label for="photo">Foto:</label>
                <input type="file" id="photo" accept="image/*">
            </div>
            <button type="submit" class="btn">Adicionar Contato</button>
        </form>
        <div class="contact-list" id="contactList"></div>
    </div>

    <script>
        const contactForm = document.getElementById('contactForm');
        const contactList = document.getElementById('contactList');

        let contacts = [];

        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            const photoFile = document.getElementById('photo').files[0];

            if (name && phone) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const contact = {
                        name: name,
                        phone: phone,
                        photo: e.target.result
                    };
                    contacts.push(contact);
                    renderContacts();
                    contactForm.reset();
                };
                if (photoFile) {
                    reader.readAsDataURL(photoFile);
                } else {
                    const contact = {
                        name: name,
                        phone: phone,
                        photo: ''
                    };
                    contacts.push(contact);
                    renderContacts();
                    contactForm.reset();
                }
            }
        });

        function renderContacts() {
            contactList.innerHTML = '';
            contacts.forEach((contact, index) => {
                const contactItem = document.createElement('div');
                contactItem.classList.add('contact-item');

                const contactPhoto = document.createElement('img');
                contactPhoto.src = contact.photo || 'https://via.placeholder.com/50';
                contactPhoto.alt = contact.name;

                const contactInfo = document.createElement('div');
                contactInfo.innerHTML = `<strong>${contact.name}</strong><br>${contact.phone}`;

                const removeButton = document.createElement('button');
                removeButton.classList.add('btn', 'btn-remove');
                removeButton.textContent = 'Remover';
                removeButton.addEventListener('click', () => {
                    contacts.splice(index, 1);
                    renderContacts();
                });

                contactItem.appendChild(contactPhoto);
                contactItem.appendChild(contactInfo);
                contactItem.appendChild(removeButton);

                contactList.appendChild(contactItem);
            });
        }
    </script>
</body>
</html>


01/02/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006.
Todos os direito reservados;; 

 
 Contador recressivo, script para você estudar como e feito em javascript- apenas para fins de estudos.
 




<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cronômetro Regressivo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
    }

    .container {
      width: 1330px;
      height: 700px;
      background-color: black;
      border: 2px solid white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .timer {
      width: 1300px;
      height: 500px;
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
      border: 2px solid white;
      margin-bottom: 20px;
    }

    .controls {
      display: flex;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: white;
      color: black;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #ccc;
    }

    .split-times {
      margin-top: 20px;
      text-align: left;
      width: 1300px;
      height: 100px;
      overflow-y: auto;
      border: 2px solid white;
      padding: 10px;
    }

    .split-times div {
      font-size: 18px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="timer" id="timer">00:00:00</div>
    <div class="controls">
      <button id="start">Iniciar</button>
      <button id="stop">Parar</button>
      <button id="reset">Reiniciar</button>
      <button id="split">Dividir Tempo</button>
      <button id="exit">Sair</button>
    </div>
    <div class="split-times" id="splitTimes"></div>
  </div>

  <script>
    let timerInterval;
    let totalSeconds = 0; // Tempo inicial em segundos (pode ser ajustado)
    let isRunning = false;

    const timerElement = document.getElementById('timer');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    const resetButton = document.getElementById('reset');
    const splitButton = document.getElementById('split');
    const exitButton = document.getElementById('exit');
    const splitTimesElement = document.getElementById('splitTimes');

    // Função para formatar o tempo no formato HH:MM:SS
    function formatTime(seconds) {
      const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
      const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
      const secs = (seconds % 60).toString().padStart(2, '0');
      return `${hours}:${minutes}:${secs}`;
    }

    // Função para atualizar o cronômetro na tela
    function updateTimer() {
      if (totalSeconds <= 0) {
        clearInterval(timerInterval);
        isRunning = false;
        alert("Tempo esgotado!");
        return;
      }
      totalSeconds--;
      timerElement.textContent = formatTime(totalSeconds);
    }

    // Botão Iniciar
    startButton.addEventListener('click', () => {
      if (!isRunning && totalSeconds > 0) {
        isRunning = true;
        timerInterval = setInterval(updateTimer, 1000);
      } else if (totalSeconds === 0) {
        alert("Por favor, defina um tempo antes de iniciar.");
      }
    });

    // Botão Parar
    stopButton.addEventListener('click', () => {
      if (isRunning) {
        isRunning = false;
        clearInterval(timerInterval);
      }
    });

    // Botão Reiniciar
    resetButton.addEventListener('click', () => {
      isRunning = false;
      clearInterval(timerInterval);
      totalSeconds = prompt("Defina o tempo inicial em segundos:", 60); // Define o tempo inicial
      totalSeconds = parseInt(totalSeconds) || 0; // Garante que seja um número válido
      timerElement.textContent = formatTime(totalSeconds);
      splitTimesElement.innerHTML = '';
    });

    // Botão Dividir Tempo
    splitButton.addEventListener('click', () => {
      const splitTime = formatTime(totalSeconds);
      const splitDiv = document.createElement('div');
      splitDiv.textContent = `Tempo Dividido: ${splitTime}`;
      splitTimesElement.appendChild(splitDiv);
    });

    // Botão Sair
    exitButton.addEventListener('click', () => {
      window.close();
    });

    // Inicializa o cronômetro com um valor padrão
    resetButton.click();
  </script>
</body>
</html>




02/02/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006.
Todos os direito reservados;; 

 
  
CADASTRO DE BLURAY E DVD
 
Boa noite Galera mais uma aula de javascript um sistema de cadastrar filmes fisicos...







<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Cadastro de DVDs e Blu-rays</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .container {
            width: 1330px;
            height: 700px;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            overflow-y: auto;
        }
        .form-container {
            width: 1300px;
            height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            font-weight: bold;
        }
        input[type="text"], input[type="number"], textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
        }
        button {
            padding: 10px 20px;
            border: none;
            color: white;
            cursor: pointer;
        }
        .btn-green {
            background-color: green;
        }
        .btn-purple {
            background-color: purple;
        }
        .btn-red {
            background-color: red;
        }
        .image-preview {
            margin-top: 10px;
            max-width: 200px;
            max-height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Cadastro de DVDs e Blu-rays</h1>
        <div class="form-container">
            <div class="form-group">
                <label for="nome">Nome do DVD/Blu-ray:</label>
                <input type="text" id="nome" placeholder="Digite o nome">
            </div>
            <div class="form-group">
                <label for="codigo">Código de Barras:</label>
                <input type="text" id="codigo" placeholder="Digite o código de barras">
            </div>
            <div class="form-group">
                <label for="valor">Valor:</label>
                <input type="number" id="valor" placeholder="Digite o valor">
            </div>
            <div class="form-group">
                <label for="duracao">Duração (minutos):</label>
                <input type="number" id="duracao" placeholder="Digite a duração">
            </div>
            <div class="form-group">
                <label for="discos">Quantidade de Discos:</label>
                <input type="number" id="discos" placeholder="Digite a quantidade de discos">
            </div>
            <div class="form-group">
                <label for="pais">País de Origem:</label>
                <input type="text" id="pais" placeholder="Digite o país de origem">
            </div>
            <div class="form-group">
                <label for="data">Data de Saída:</label>
                <input type="date" id="data">
            </div>
            <div class="form-group">
                <label for="memorando">Memorando (20 linhas):</label>
                <textarea id="memorando" placeholder="Escreva aqui..."></textarea>
            </div>
            <div class="form-group">
                <label for="imagem">Importar Imagem:</label>
                <input type="file" id="imagem" accept="image/*">
                <img id="preview" class="image-preview" alt="Imagem Preview">
            </div>
            <div class="form-group">
                <button class="btn-green" onclick="cadastrar()">Cadastrar</button>
                <button class="btn-purple" onclick="calcularDias()">Calcular Dias Fora</button>
                <button class="btn-red" onclick="sair()">Sair</button>
            </div>
        </div>
    </div>

    <script>
        function cadastrar() {
            const nome = document.getElementById('nome').value;
            const codigo = document.getElementById('codigo').value;
            const valor = document.getElementById('valor').value;
            const duracao = document.getElementById('duracao').value;
            const discos = document.getElementById('discos').value;
            const pais = document.getElementById('pais').value;
            const data = document.getElementById('data').value;
            const memorando = document.getElementById('memorando').value;

            if (!nome || !codigo || !valor || !duracao || !discos || !pais || !data) {
                alert("Preencha todos os campos obrigatórios!");
                return;
            }

            alert(`DVD/Blu-ray cadastrado:\nNome: ${nome}\nCódigo: ${codigo}\nValor: ${valor}\nDuração: ${duracao} minutos\nDiscos: ${discos}\nPaís: ${pais}\nData de Saída: ${data}\nMemorando: ${memorando}`);
        }

        function calcularDias() {
            const dataSaida = new Date(document.getElementById('data').value);
            const hoje = new Date();
            const diffTime = Math.abs(hoje - dataSaida);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            alert(`O DVD/Blu-ray ficou fora por ${diffDays} dias.`);
        }

        function sair() {
            if (confirm("Deseja realmente sair?")) {
                window.close();
            }
        }

        document.getElementById('imagem').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>



BANCO DE DADOS
 
 
<?php
// cadastrar.php
include 'conexao.php';

$codigoBarra = $_POST['codigoBarra'];
$nomeDvd = $_POST['nomeDvd'];
$duracao = $_POST['duracao'];
$quantidadeDiscos = $_POST['quantidadeDiscos'];
$paisOrigem = $_POST['paisOrigem'];
$memorando = $_POST['memorando'];
$dataLocacao = $_POST['dataLocacao'];

$sql = "INSERT INTO midias (codigo_barra, nome_dvd, duracao, quantidade_discos, pais_origem, memorando, data_locacao)
        VALUES ('$codigoBarra', '$nomeDvd', $duracao, $quantidadeDiscos, '$paisOrigem', '$memorando', '$dataLocacao')";

if ($conn->query($sql) === TRUE) {
    echo "Registro inserido com sucesso!";
} else {
    echo "Erro: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
 
 
 
 





03/02/2025.
Sistema criado por Alexandre Carneiro da Motta
Formado em tecnologia em Gestão de Sistema de Informação - uninove 2006.
Todos os direito reservados;; 


 

0 comentários:

Postar um comentário

Assinar: Comentários (Atom)