Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
all: breaking into different pages and add forms
css/form.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++ css/header.css | 6 ++++ css/tasks.css | 4 ++ index.html | 45 +++++++----------------------- js/tasks.js | 43 +++++++++++++++++++++--------- tasks.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++ weather.html | 43 ++++++++++++++++++++++++++++++
diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000000000000000000000000000000000000..67902c805f2485605dd575fa25b37f7da0ff7408 --- /dev/null +++ b/css/form.css @@ -0,0 +1,74 @@ +form { + background-color: #ffffff; + border: 1px solid #b1b4b6; + padding: 30px; + max-width: 600px; + margin: 20px auto; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); +} + +form > div.actions { + margin-top: 1rem; +} + +input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea { + width: 100%; + padding: 5px; + margin: 10px 0; + border: 2px solid #0b0c0c; + font-size: 16px; + background-color: #ffffff; + height: 2.5rem; +} + +input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus { + border-color: #0b0c0c; + outline: 3px solid #4CAF50; + outline-offset: 0; + box-shadow: inset 0 0 0 2px; +} + +select { + min-width: 11.5em; + max-width: 100%; + height: 2.5rem; + padding: 5px; + border: 2px solid #0b0c0c; + color: #0b0c0c; + background-color: #fff; +} + +label { + font-size: 16px; + color: #333333; + display: block; + margin-bottom: 0.125rem; +} + +label small.required { + color: #ff0000; +} + +input.error { + border-color: #d4351c; +} + +button { + display: inline-block; + position: relative; + width: 100%; + margin: 0 0 22px; + padding: 8px 10px 7px; + border: 2px solid transparent; + + color: #fff; + background-color: #00703c; + box-shadow: 0 2px 0 #002d18; + text-align: center; + vertical-align: top; + cursor: pointer; +} + +button:hover { + background-color: #005a30; +} diff --git a/css/header.css b/css/header.css index da60e9a0a794d7c558952536104793579d3ce93a..94ad1863b344e653e48f3054e52c1eaf0bb4d345 100644 --- a/css/header.css +++ b/css/header.css @@ -24,6 +24,12 @@ color: white; text-decoration: none; } +nav ul li a:hover { + text-decoration: underline; + text-decoration-thickness: max(3px, .1875rem, .12em); + text-underline-offset: .1578em; +} + #menuToggle { font-size: 1.5rem; background: none; diff --git a/css/tasks.css b/css/tasks.css new file mode 100644 index 0000000000000000000000000000000000000000..4b4c5554c9a0dee496727633cd971ee6c9f95520 --- /dev/null +++ b/css/tasks.css @@ -0,0 +1,4 @@ +#task-form { + display: flex; + flex-direction: column; +} diff --git a/index.html b/index.html index 2347dcdb61e86a1a0f3228365a72e771a49ff27e..21ee50c704b459b7f7b1e0f6796e6b2b0a93f389 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,36 @@ <!DOCTYPE html> -<html lang="pt-BR"> +<html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Planejador Diário</title> - + <title>Bem-vindo</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/header.css"> - <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/footer.css"> </head> <body> <header> - <h1>Planejador Diário</h1> + <h1>Bem-vindo!</h1> + <button id="menuToggle">☰</button> <nav> - <button id="menuToggle" aria-label="Abrir menu">☰</button> - <ul id="menu" class="hidden"> - <li><a href="#add-task">Adicionar Tarefa</a></li> - <li><a href="#tasks">Minhas Tarefas</a></li> - <li><a href="#weather">Previsão do Tempo</a></li> + <ul class="hidden"> + <li><a href="index.html">Início</a></li> + <li><a href="tasks.html">Tarefas</a></li> + <li><a href="weather.html">Previsão do Tempo</a></li> </ul> </nav> </header> <main> - <section id="add-task"> - <h2>Adicionar Tarefa</h2> - <form id="task-form"> - <label for="task-input">Tarefa:</label> - <input type="text" id="task-input" placeholder="Digite sua tarefa" required> - <button type="submit">Adicionar</button> - </form> - </section> - - <section id="tasks"> - <h2>Minhas Tarefas</h2> - <ul id="task-list"></ul> - </section> - - <section id="weather"> - <h2>Previsão do Tempo</h2> - <p id="location">Buscando localização...</p> - <p id="forecast">Carregando previsão...</p> - </section> + <h2>Seja bem-vindo à nossa aplicação web!</h2> + <p>Escolha uma das opções no menu acima para começar.</p> </main> <footer> - <p>2025</p> + <p>© 2025</p> </footer> - <script src="js/menu.js" defer></script> - <script src="js/tasks.js" defer></script> - <script src="js/geolocation.js" defer></script> - <script src="js/app.js" defer></script> </body> </html> diff --git a/js/tasks.js b/js/tasks.js index ec5ca242301c8a9d6b0ac679f8959c5622c02c25..4e4c059ac340c3e6f7aee8a0f5e196aad7aa0558 100644 --- a/js/tasks.js +++ b/js/tasks.js @@ -1,20 +1,37 @@ -const taskForm = document.querySelector("form"); -const taskList = document.getElementById("task-list"); +document.addEventListener("DOMContentLoaded", () => { + const taskForm = document.getElementById("task-form"); + const taskList = document.querySelector("#task-list ul"); -taskForm.addEventListener("submit", (e) => { - e.preventDefault(); - const taskInput = e.target.querySelector("input"); - const taskText = taskInput.value.trim(); - if (!taskText) return; + taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + const title = document.getElementById("task-title").value; + const description = document.getElementById("task-desc").value; + const deadline = document.getElementById("task-deadline").value; + const priority = document.getElementById("task-priority").value; + + if (!title || !description || !deadline || !priority) { + alert("Por favor, preencha todos os campos."); + return; + } - const taskItem = document.createElement("li"); - taskItem.innerHTML = `${taskText} <button>Remover</button>`; - taskList.appendChild(taskItem); + const taskItem = document.createElement("li"); + taskItem.innerHTML = ` + <strong>${title}</strong> + <p>${description}</p> + <p>Prazo: ${deadline}</p> + <p>Prioridade: ${priority}</p> + <button class="remove-task">Remover</button> + `; - taskItem.querySelector("button").addEventListener("click", () => { - taskItem.remove(); + taskList.appendChild(taskItem); + taskForm.reset(); }); - taskInput.value = ""; + taskList.addEventListener("click", (e) => { + if (e.target.classList.contains("remove-task")) { + e.target.parentElement.remove(); + } + }); }); diff --git a/tasks.html b/tasks.html new file mode 100644 index 0000000000000000000000000000000000000000..8469fdfd897b9efe779cdc44283eb49cc1b068b9 --- /dev/null +++ b/tasks.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html lang="pt-br"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Lista de Tarefas</title> + <link rel="stylesheet" href="css/reset.css"> + <link rel="stylesheet" href="css/layout.css"> + <link rel="stylesheet" href="css/header.css"> + <link rel="stylesheet" href="css/footer.css"> + <link rel="stylesheet" href="css/form.css"> + <link rel="stylesheet" href="css/tasks.css"> +</head> +<body> + <header> + <h1>Gerenciador de Tarefas</h1> + <button id="menuToggle">☰</button> + <nav> + <ul class="hidden"> + <li><a href="index.html">Início</a></li> + <li><a href="tasks.html">Tarefas</a></li> + <li><a href="weather.html">Previsão do Tempo</a></li> + </ul> + </nav> + </header> + + <main> + <section id="add-task"> + <h2>Adicionar Nova Tarefa</h2> + + <form id="task-form"> + <label for="task-title">Título: <small class="required">*</small></label> + <input type="text" id="task-title" name="title" required> + <small class="error-message hidden">O título é obrigatório.</small> + + <label for="task-desc">Descrição:</label> + <textarea id="task-desc" name="description" required></textarea> + <small class="error-message hidden">A descrição é obrigatória.</small> + + <label for="task-deadline">Prazo:</label> + <input type="date" id="task-deadline" name="deadline" required> + <small class="error-message hidden">O prazo deve ser uma data válida no futuro.</small> + + <label for="task-priority">Prioridade:</label> + <select id="task-priority" name="priority" required> + <option value="alta">Alta</option> + <option value="média">Média</option> + <option value="baixa">Baixa</option> + </select> + <small class="error-message hidden">Por favor, selecione uma prioridade.</small> + + <div class="actions"> + <button type="submit">Adicionar Tarefa</button> + </div> + </form> + </section> + + <section id="task-list"> + <h2>Lista de Tarefas</h2> + <ul></ul> + </section> + </main> + + <footer> + <p>© 2025</p> + </footer> + + <script src="js/menu.js" defer></script> + <script src="js/tasks.js" defer></script> +</body> +</html> + diff --git a/weather.html b/weather.html new file mode 100644 index 0000000000000000000000000000000000000000..308c5d451dfc2ea74b57d96e7ef71a9618e1386b --- /dev/null +++ b/weather.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="pt-br"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Previsão do Tempo</title> + <link rel="stylesheet" href="css/reset.css"> + <link rel="stylesheet" href="css/layout.css"> + <link rel="stylesheet" href="css/header.css"> + <link rel="stylesheet" href="css/footer.css"> + <link rel="stylesheet" href="css/weather.css"> +</head> +<body> + <header> + <h1>Previsão do Tempo</h1> + <button id="menuToggle">☰</button> + <nav> + <ul class="hidden"> + <li><a href="index.html">Início</a></li> + <li><a href="tasks.html">Tarefas</a></li> + <li><a href="weather.html">Previsão do Tempo</a></li> + </ul> + </nav> + </header> + <main> + <section id="weather"> + <h2>Veja o clima na sua região</h2> + <p id="loading">Carregando informações...</p> + <div id="weather-info" class="hidden"> + <p><strong>Local:</strong> <span id="location"></span></p> + <p><strong>Temperatura:</strong> <span id="temperature"></span>°C</p> + <p><strong>Condições:</strong> <span id="conditions"></span></p> + </div> + </section> + </main> + <footer> + <p>© 2025 Sua Aplicação - Todos os direitos reservados.</p> + </footer> + <script src="js/menu.js" defer></script> + <script src="js/weather.js" defer></script> +</body> +</html> +