first commit

rickreisdev · Jan 18, 2023 · 50f28da · 50f28da
commit 50f28da
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 0 deletions.
diff --git a/estilo.css b/estilo.css
@@ -0,0 +1,53 @@
+body{
+    background: rgb(28, 69, 218);
+    font: normal 15pt Arial;
+}
+
+header{
+    color: white;
+    text-align: center;
+}
+
+section{
+    background: rgb(21, 198, 77) ;
+    border-radius: 10px;
+    padding: 15px;
+    width: 500px;
+    margin: auto;
+    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.674);
+}
+
+footer{
+    color: white;
+    text-align: center;
+    font-style: italic;
+    padding: 15px;
+    font-size: 14px;
+}
+div#cont{
+    text-align: center;
+}
+#btn{
+    background-color: rgb(251, 252, 251);
+    border-radius: 10px;
+    font-size: 19px;
+}
+#btn:hover{
+    background-color: rgb(47, 179, 20);
+    color: white;
+}
+#txtano{
+    border-radius: 10px;
+    text-shadow: none;
+}
+#cont p{
+    color: white;
+    text-shadow: 1px 1px 6px black;
+    font-size: 20px;
+}
+#res{
+    color: white;
+    text-shadow: 2px 2px 6px black;
+    text-align: center;
+    font-size: 16px;
+}
diff --git a/hAdult.png b/hAdult.png
diff --git a/hBaby.png b/hBaby.png
diff --git a/hIdoso.png b/hIdoso.png
diff --git a/hJove.png b/hJove.png
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<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>Verificador de Idade</title>
+    <link rel="stylesheet" href="estilo.css">
+</head>
+<body>
+    <header>
+        <h1>Verificador de Idade</h1>
+    </header>
+    <section>
+        <div id="cont">
+            <p>Digite o ano de Nascimento:
+                <input class="Iano" type="number" name="txtano" id="txtano" min="0">
+            </p>
+            <p>Selecione o sexo:
+                <input type="radio" name="radsex" id="masc" checked>
+                <label for="masc">Masculino</label>
+                <input type="radio" name="radsex" id="fem">
+                <label for="fem">Feminino</label>
+            </p>
+            <p>
+                <input id="btn" type="button" value="Verificar idade" onclick="verificar()">
+            </p>
+        </div>
+        <div id="res">
+            Por favor, preencha os dados acima para ver o resultado!
+        </div>
+    </section>
+    <footer>
+        <p>&copy; CursoemVideo</p>
+        <p>Desenvolvido por RickReis</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/mAdult.png b/mAdult.png
diff --git a/mBaby.png b/mBaby.png
diff --git a/mIdosa.png b/mIdosa.png
diff --git a/mJove.png b/mJove.png
diff --git a/script.js b/script.js
@@ -0,0 +1,52 @@
+function verificar(){
+    var data = new Date()
+    var ano = data.getFullYear()
+    var fano = document.getElementById('txtano')
+    var res = document.querySelector('div#res')
+
+    if(fano.value.length == 0 || fano.value > ano){
+        window.alert('{ERRO} Verifique os dados e tente novamente!')
+    }else{
+        var fsex = document.getElementsByName('radsex')
+        var idade = ano - fano.value
+        var genero =''
+        var img = document.createElement('img')
+        img.setAttribute('id', 'foto')
+
+        if(fsex[0].checked){
+            genero='Homem'
+            if(idade >=0 && idade <10){
+                //criança
+                img.setAttribute('src', 'hBaby.png')
+            }else if(idade < 21){
+                //jovem
+                img.setAttribute('src', 'hJove.png')
+            }else if(idade < 60){
+                //adulto
+                img.setAttribute('src', 'hAdult.png')
+            }else{
+                //idoso
+                img.setAttribute('src', 'hIdoso.png')
+            }
+
+        }else if(fsex[1].checked){
+            genero='Mulher'
+            if(idade >=0 && idade <10){
+                //criança
+                img.setAttribute('src', 'mBaby.png')
+            }else if(idade < 21){
+                //jovem
+                img.setAttribute('src', 'mJove.png')
+            }else if(idade < 60){
+                //adulto
+                img.setAttribute('src', 'mAdult.png')
+            }else{
+                //idoso
+                img.setAttribute('src', 'mIdosa.png')
+            }
+        }
+        res.style.textAlign='center'
+        res.innerHTML =`Detectamos ${genero} com idade ${idade} anos.`
+        res.appendChild(img)
+    }
+}