Skip to content

Commit 141c010

Browse files
KaduFlorestaKaduFloresta
committed
28/09/2020
1 parent 543b6e0 commit 141c010

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+2828
-158
lines changed

‎Index.html

Lines changed: 69 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,84 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!doctype html>
2+
<html lang="en">
33

44
<head>
55
<title>Óros · O que está por vir?</title>
6-
<meta charset="UTF-8">
6+
7+
<!-- Required meta tags -->
8+
<meta charset="utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
710
<meta name="description" content="Descubra seu horóscopo com apenas seu nome e data de nascimento.">
811
<meta name=" author " content="Kadu Floresta">
9-
<link rel="stylesheet" type="text/css" href="css/style.css" />
10-
<link rel="sortcut icon" href="../PaginaAtividade/img/favicon.png" type="image/x-icon" />;
12+
<link rel="sortcut icon" href="../JavaScript_CreatePage_CRUD/img/favicon.png" type="image/x-icon" />;
13+
<link rel="stylesheet" href="../JavaScript_CreatePage_CRUD/css/style.css">
1114
<!-- <script src="js/Index.js"></script> -->
12-
<script>
13-
14-
// $("#telefone").mask("(00) 0000-00009");
15-
16-
function salvarDados() {
17-
var inputPrimeiroNome = document.getElementById("fname");
18-
var valorPrimeiroNome = inputPrimeiroNome.value;
19-
if (valorPrimeiroNome === "")
20-
inputPrimeiroNome.style.backgroundColor = "red";
21-
else
22-
inputPrimeiroNome.style.backgroundColor = "blue";
23-
24-
var inputUltimoNome = document.getElementById("lname");
25-
var valorUltimoNome = inputUltimoNome.value;
26-
if (valorUltimoNome === "")
27-
inputUltimoNome.style.backgroundColor = "red";
28-
else
29-
inputUltimoNome.style.backgroundColor = "blue";
30-
31-
var inputDataNascimento = document.getElementById("dataNasc");
32-
var valorDataNascimento = inputDataNascimento.value;
33-
if (valorDataNascimento === "")
34-
inputDataNascimento.style.backgroundColor = "red";
35-
36-
else
37-
inputDataNascimento.style.backgroundColor = "blue";
38-
39-
var inputEmail = document.getElementById("email");
40-
var valorEmail = inputEmail.value;
41-
if (valorEmail === "")
42-
inputEmail.style.backgroundColor = "red";
43-
else
44-
inputEmail.style.backgroundColor = "blue";
45-
46-
var inputTelefone = document.getElementById("tel");
47-
var valorTelefone = inputTelefone.value;
48-
if (valorTelefone === "")
49-
inputTelefone.style.backgroundColor = "red";
50-
else
51-
inputTelefone.style.backgroundColor = "blue";
52-
53-
var inputSenha = document.getElementById("tel");
54-
var valorSenha = inputSenha.value;
55-
if (valorSenha === "")
56-
inputSenha.style.backgroundColor = "red";
57-
else
58-
inputSenha.style.backgroundColor = "blue"
59-
60-
// Verificar o signo da Data de Nascimento
61-
var dataSigno = valorDataNascimento.value;
62-
dataSigno = returnMonth(dataSigno);
63-
var signoUsuario = getSign(dataSigno);
64-
alert("Signo: " + signoUsuario);
65-
}
66-
67-
function validarData(id) {
68-
var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02]) [\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;
69-
70-
if (!((id.value.match(RegExPattern)) && (id.value != ''))) {
71-
alert('Data inválida.');
72-
id.focus();
73-
}
74-
else
75-
alert('Data válida.');
76-
}
77-
</script>
7815

16+
<!-- Bootstrap CSS -->
17+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
18+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
7919
</head>
8020

81-
<body>
82-
<header>
83-
<nav class="navegador">
84-
<a href="#"><img src="img/favicon.png" class="icone"></a>
85-
<ul class="nav-links ">
86-
<h1 class="nomeSite">Óros · Horóscopos Diários</h1>
87-
</ul>
88-
</nav>
89-
</header>
90-
91-
<div class="conteudoVidente">
92-
<img id="bolaCristal" src="img/bola.gif" alt="">
21+
<body class="bodyContent">
22+
<nav>
23+
<h1 class="pageName">Óros</h1>
24+
<ul class="nav-links ">
25+
<li><a href="formulario.html">cadastro</a></li>
26+
<li class="active"><a href="Index.html">home</a></li>
27+
</ul>
28+
</nav>
29+
<hr>
30+
<div class="container">
31+
<div class="form-row">
32+
<div class="form-group col-3">
33+
<img class="signo1" src="../JavaScript_CreatePage_CRUD/img/signo1.png" alt="signo" usemap="#menu1">
34+
35+
<!-- Mapeamento da imagem -->
36+
<map name="menu1">
37+
<area shape="rect" coords="8, 12, 169, 164" href="aries.html" alt="aries">
38+
<area shape="rect" coords="181, 12, 343, 164" href="touro.html" alt="touro">
39+
<area shape="rect" coords="8, 175, 169, 328" href="leao.html" alt="leao">
40+
<area shape="rect" coords="181, 175, 343, 328" href="virgem.html" alt="virgem">
41+
<area shape="rect" coords="8, 341, 169, 508" href="sagitario.html" alt="sagitairio">
42+
<area shape="rect" coords="181, 341, 343, 508" href="capricornio.html" alt="capricornio">
43+
</map>
44+
</div>
45+
46+
<div class="form-group col-6">
47+
<img class="vidente" src="../JavaScript_CreatePage_CRUD/img/vidente.png" alt="vidente">
48+
49+
<img id="bolaCristal" src="img/bola.gif" alt="">
50+
</div>
51+
52+
<div class="form-group col-3">
53+
<img class="signo2" src="../JavaScript_CreatePage_CRUD/img/signo2.png" alt="signo" usemap="#menu2"
54+
border="1">
55+
56+
<!-- Mapeamento da imagem -->
57+
<map name="menu2">
58+
<area shape="rect" coords="21, 7, 172, 167" href="gemeos.html" alt="gemeos">
59+
<area shape="rect" coords="186, 7, 339, 167" href="cancer.html" alt="cancer">
60+
<area shape="rect" coords="21, 176, 172, 330" href="libra.html" alt="libra">
61+
<area shape="rect" coords="186, 176, 339, 330" href="escorpiao.html" alt="escorpiao">
62+
<area shape="rect" coords="21, 343, 172, 512" href="aquario.html" alt="aquario">
63+
<area shape="rect" coords="186, 343, 339, 512" href="peixes.html" alt="peixes">
64+
</map>
65+
</div>
66+
</div>
67+
<p class="copyright">Copyright © 2020 | Kadu Floresta</p>
9368
</div>
9469

95-
<div class="conteudoDados">
96-
<input class="inputBox" type="text" id="fname" placeholder="Primeiro Nome">
97-
<input class="inputBox" type="text" id="lname" placeholder="Último Nome">
98-
<input class="inputBox" type="date" id="dataNasc" placeholder="Data de Nascimento" onclick="validarData()">
99-
<input class="inputBox" type="email" id="email" placeholder="E-mail">
100-
<input class="inputBox" type="tel" id="tel" placeholder="Telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}">
101-
102-
103-
104-
<input class="inputBox" type="password" id="senha" placeholder="Senha">
105-
</div>
106-
<div>
107-
<input class="btnSalvar" type="button" value="Salvar" onclick="salvarDados()">
108-
</div>
10970

71+
<!-- Optional JavaScript -->
72+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
73+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
74+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
75+
crossorigin="anonymous"></script>
76+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
77+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
78+
crossorigin="anonymous"></script>
79+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
80+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
81+
crossorigin="anonymous"></script>
11082
</body>
11183

11284
</html>

‎README.md

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
### Autor
22

33
<a href="https://www.linkedin.com/in/kadufloresta/">
4-
<img style="border-radius: 5px;" src="https://media-exp1.licdn.com/dms/image/C4D03AQFfIeRf3UDQ9Q/profile-displayphoto-shrink_400_400/0?e=1605139200&v=beta&t=vWVjctWELGPrf-DrfqlwmBWjl88lk6ZwKTUJoCIkI_I" width="100px; alt=""/></b>
4+
<img style="border-radius: 5px;" src="https://media-exp1.licdn.com/dms/image/C4D03AQFfIeRf3UDQ9Q/profile-displayphoto-shrink_400_400/0?e=1605139200&v=beta&t=vWVjctWELGPrf-DrfqlwmBWjl88lk6ZwKTUJoCIkI_I" width="100px; alt="/></b>
55

66
<code><b>Kadu Floresta</b></code></a>
77

@@ -16,6 +16,51 @@
1616
[![Facebook Badge](https://img.shields.io/badge/-Kadu_Floresta-lightblue?style=flat-square&logo=Facebook&logoColor=white&link=https://https://www.facebook.com/kadu.floresta)](https://https://www.facebook.com/kadu.floresta)
1717

1818
---
19-
<img src="/img/senac.png" alt="drawing" width="400"/><br>
19+
<img src="img/senac.png" alt="drawing" width="300"/><br>
2020
Análise e Desenvolvimento de Sistemas - Senac 2020
21-
# JAVASCRIPT - Lista 1
21+
22+
**Site Horóscopo - Óros**
23+
**1. Página Principal**
24+
- NavBar
25+
- Links
26+
- Imagens JPEG, PNG e GIF
27+
- Mapeamento de Imagem
28+
- CSS
29+
30+
31+
**2. Forms**
32+
- Elementos Bootstrap
33+
- Funções
34+
- Métodos
35+
- Máscaras Input
36+
- Tabela
37+
- CSS
38+
- javascript
39+
40+
**3. Páginas secundárias**
41+
- Elementos Bootstrap
42+
- Edição de Texto
43+
- Inserção de Imagens
44+
- Tabelas
45+
- CSS
46+
___
47+
---
48+
## Desenvolvimento de CRUD - DOM e Bootstrap (Projeto indicador 2)
49+
(Desenvolvimento WEB)
50+
51+
# Instruções
52+
**PRIMEIRA ENTREGA - 21/09**
53+
54+
1. Escolher um tema e enviar para a professora aprovar.
55+
2. Desenvolver uma tela que possua comandos de CRUD (visualização, atualização, exclusão e inclusão), em que sejam aplicados eventos e propriedades/métodos do DOM:
56+
57+
- Utilizar ao menos 3 eventos DIFERENTES (exemplo: onclick, onload, onmouseover)
58+
- Utilizar ao menos 2 propriedades/métodos DIFERENTES<br>
59+
(Exemplo: document.getElementById, document.style.XYZ)
60+
---
61+
62+
**SEGUNDA ENTREGA - 02/10**
63+
1. Site inteiro desenvolvido com componentes do bootstrap
64+
- Navbar - criar páginas fake para simular navegação
65+
- Linha e coluna - você define os espaçamentos conforme seu projeto
66+
- Controles de formulário do bootstrap

0 commit comments

Comments
 (0)