/2023-tarefa-01

Primary LanguageCSS

Tarefa do 1o Bimestre

copmonentizar react a partir de html

Tarefas

  1. Criar uma aplicação react
  2. Copiar código html para App.tsx
    1. (Opcional) copiar o código CSS para App.css
  3. Criar componentes React App.tsx no próprio arquivo
  4. Colocar os dados em variáveis
  5. Fork do reposiório https://github.com/infoweb-pos/2023-tarefa-01
  6. Publicar seu código no repositório pessoal 2023-tarefa-01

Referência

Bootstrap snippet. bs4 todo list

Código HTML inicial

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>bs4 todo list - Bootdey.com</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
			rel="stylesheet"
		/>
		<style type="text/css">
			body {
				margin-top: 20px;
				background: #f8f8f8;
			}

			.todo-nav {
				margin-top: 10px;
			}

			.todo-list {
				margin: 10px 0;
			}

			.todo-list .todo-item {
				padding: 15px;
				margin: 5px 0;
				border-radius: 0;
				background: #f7f7f7;
			}

			.todo-list.only-active .todo-item.complete {
				display: none;
			}

			.todo-list.only-active .todo-item:not(.complete) {
				display: block;
			}

			.todo-list.only-complete .todo-item:not(.complete) {
				display: none;
			}

			.todo-list.only-complete .todo-item.complete {
				display: block;
			}

			.todo-list .todo-item.complete span {
				text-decoration: line-through;
			}

			.remove-todo-item {
				color: #ccc;
				visibility: hidden;
			}

			.remove-todo-item:hover {
				color: #5f5f5f;
			}

			.todo-item:hover .remove-todo-item {
				visibility: visible;
			}

			div.checker {
				width: 18px;
				height: 18px;
			}

			div.checker input,
			div.checker span {
				width: 18px;
				height: 18px;
			}

			div.checker span {
				display: -moz-inline-box;
				display: inline-block;
				zoom: 1;
				text-align: center;
				background-position: 0 -260px;
			}

			div.checker,
			div.checker input,
			div.checker span {
				width: 19px;
				height: 19px;
			}

			div.checker,
			div.radio,
			div.uploader {
				position: relative;
			}

			div.button,
			div.button *,
			div.checker,
			div.checker *,
			div.radio,
			div.radio *,
			div.selector,
			div.selector *,
			div.uploader,
			div.uploader * {
				margin: 0;
				padding: 0;
			}

			div.button,
			div.checker,
			div.radio,
			div.selector,
			div.uploader {
				display: -moz-inline-box;
				display: inline-block;
				zoom: 1;
				vertical-align: middle;
			}

			.card {
				padding: 25px;
				margin-bottom: 20px;
				border: initial;
				background: #fff;
				border-radius: calc(0.15rem - 1px);
				box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04),
					0 1px 6px rgba(0, 0, 0, 0.04);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="card card-white">
						<div class="card-body">
							<form action="javascript:void(0);">
								<input
									type="text"
									class="form-control add-task"
									placeholder="New Task..."
								/>
							</form>
							<ul class="nav nav-pills todo-nav">
								<li
									role="presentation"
									class="nav-item all-task active"
								>
									<a href="#" class="nav-link">All</a>
								</li>
								<li
									role="presentation"
									class="nav-item active-task"
								>
									<a href="#" class="nav-link">Active</a>
								</li>
								<li
									role="presentation"
									class="nav-item completed-task"
								>
									<a href="#" class="nav-link">Completed</a>
								</li>
							</ul>
							<div class="todo-list">
								<div class="todo-item">
									<div class="checker">
										<span class
											><input type="checkbox"
										/></span>
									</div>
									<span>Create theme</span>
									<a
										href="javascript:void(0);"
										class="float-right remove-todo-item"
										><i class="icon-close"></i
									></a>
								</div>
								<div class="todo-item">
									<div class="checker">
										<span class
											><input type="checkbox"
										/></span>
									</div>
									<span>Work on wordpress</span>
									<a
										href="javascript:void(0);"
										class="float-right remove-todo-item"
										><i class="icon-close"></i
									></a>
								</div>
								<div class="todo-item">
									<div class="checker">
										<span class
											><input type="checkbox"
										/></span>
									</div>
									<span>Organize office main department</span>
									<a
										href="javascript:void(0);"
										class="float-right remove-todo-item"
										><i class="icon-close"></i
									></a>
								</div>
								<div class="todo-item">
									<div class="checker">
										<span><input type="checkbox" /></span>
									</div>
									<span>Error solve in HTML template</span>
									<a
										href="javascript:void(0);"
										class="float-right remove-todo-item"
										><i class="icon-close"></i
									></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				"use strict";

				var todo = function () {
					$(".todo-list .todo-item input").click(function () {
						if ($(this).is(":checked")) {
							$(this)
								.parent()
								.parent()
								.parent()
								.toggleClass("complete");
						} else {
							$(this)
								.parent()
								.parent()
								.parent()
								.toggleClass("complete");
						}
					});

					$(".todo-nav .all-task").click(function () {
						$(".todo-list").removeClass("only-active");
						$(".todo-list").removeClass("only-complete");
						$(".todo-nav li.active").removeClass("active");
						$(this).addClass("active");
					});

					$(".todo-nav .active-task").click(function () {
						$(".todo-list").removeClass("only-complete");
						$(".todo-list").addClass("only-active");
						$(".todo-nav li.active").removeClass("active");
						$(this).addClass("active");
					});

					$(".todo-nav .completed-task").click(function () {
						$(".todo-list").removeClass("only-active");
						$(".todo-list").addClass("only-complete");
						$(".todo-nav li.active").removeClass("active");
						$(this).addClass("active");
					});

					$("#uniform-all-complete input").click(function () {
						if ($(this).is(":checked")) {
							$(
								".todo-item .checker span:not(.checked) input"
							).click();
						} else {
							$(".todo-item .checker span.checked input").click();
						}
					});

					$(".remove-todo-item").click(function () {
						$(this).parent().remove();
					});
				};

				todo();

				$(".add-task").keypress(function (e) {
					if (e.which == 13 && !$(this).val().length == 0) {
						$(
							'<div class="todo-item"><div class="checker"><span class=""><input type="checkbox"></span></div> <span>' +
								$(this).val() +
								'</span> <a href="javascript:void(0);" class="float-right remove-todo-item"><i class="icon-close"></i></a></div>'
						).insertAfter(".todo-list .todo-item:last-child");
						$(this).val("");
					} else if (e.which == 13) {
						alert("Please enter new task");
					}
					$(document)
						.on(".todo-list .todo-item.added input")
						.click(function () {
							if ($(this).is(":checked")) {
								$(this)
									.parent()
									.parent()
									.parent()
									.toggleClass("complete");
							} else {
								$(this)
									.parent()
									.parent()
									.parent()
									.toggleClass("complete");
							}
						});
					$(".todo-list .todo-item.added .remove-todo-item").click(
						function () {
							$(this).parent().remove();
						}
					);
				});
			});
		</script>
	</body>
</html>