• Este é um repositório com os conteúdos de Programação Web,
ministradas pelo professor Karan Luciano, utilizando a IDE VSCode e as linguagens de
HTML, CSS e JavaScript, além de frameworks e bibliotecas como ferramentas de aprendizado.
Professor | Sobre o tópico | Conceitos Aprendidos 1 | Conceitos Aprendidos 2
Conceitos Aprendidos 3 | Conceitos Aprendidos 4 | Autor
Karan Luciano - Analista de T.I. | Desenvolvedor Full-Stack
IFRO Campus Ji-Paraná • Atuando desde 2024
Linguagens & Tecnologias: VSCode • DevOps • Java • JavaScript • React.js • E outros...
Contato: Karan Luciano (LinkedIn)
Esta disciplina introduz a primeira parte do desenvolvimento web, com foco em HTML e CSS básicos, seguido por uma imersão em JavaScript, APIs e o uso de React para a criação de aplicações web dinâmicas. O curso terá uma abordagem prática, com desenvolvimento de projetos que evoluem ao longo das aulas.
- Desenvolver sites estáticos e aplicativos web dinâmicos, utilizando JavaScript e React, com foco em funcionalidades modernas e consumo de APIs.
- 📝 Especificar documentos utilizando HTML;
- 🎨 Estilizar documentos utilizando regras de CSS;
- 🖥️ Implementar interatividade com JavaScript;
- 🔗 Consumir APIs utilizando JavaScript;
- 🚀 Desenvolver interfaces dinâmicas com React.
- Desenvolvimento web
- Aplicações cliente/servidor
- HTML e CSS básicos
- JavaScript para interatividade
- APIs e integração com back-end
- React (biblioteca front-end)
- Link da "organização" oficial da disciplina:
- Link do repositório com as informações da disciplina:
Note
Retirado da aula de "CodigoAula01"
Nesta aula foram aprendidos:
- Início da disciplina utilizando a IDE VSCode e as linguagens HTML, CSS e JavaScript
- Criação de uma página-web "Sobre mim"
- Como linkar o JavaScript ao HTML
- Mensagem de alerta utilizando JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha NÃO Primeira Página-web | Aula 01 de Programação Web</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/fonts.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<link rel="shortcut icon" href="src/images/webProgrammingIcon.ico" type="image/x-icon" />
</head>
<body>
<!-- Cabeçalho da página -->
<header class="main-title">
<div class="parallax-container">
<img src="src/images/webProgrammingImage.png" alt="WebProgrammingImage">
<h1>Bem-vindo(a) ao<br><span class="main-title-highlight">DESENVOLVIMENTO WEB</span></h1>
<hr>
<p>Esta <strong>NÃO É</strong> minha primeira pagina-web <span class="main-title-emote">(ò_óˇ)</span></p>
</div>
</header>
<!-- Seção "Sobre mim" da página -->
<section class="about-me">
<h2>SOBRE<br><span class="about-me-highlight">MIM</span></h2>
<p>
Oiii, bom dia, boa tarde, boa noite! Me chamo Julio Cezar (a.k.a Juletopi). Atualmente, tenho 21 anos e sou um desenvolvedor Full-Stack apaixonado por tecnologia e um estudante de Analise e Desenvolvimento de Sistemas no IFRO Campus Ji-Parana.
<br><br>
No meu tempo livre, voce provavelmente vai me encontrar estudando, ouvindo rock satanico, assistindo anime, jogando na Steam ou lendo The Witcher/mangas.
<br><br>
Meus animes favoritos sao: 3º Genshiken Nidaime, 2º Hunter x Hunter e 1º Made in Abyss.
<br><br>
Curto musica lo-fi, rock e eletronica, e minha musica favorita e "Daft Punk - Get Lucky".
<br><br>
Sou um gamer casual hoje-em-dia. Amo jogar Minecraft, Stardew Valley, The Witcher 3, Dying Light, e o meu favorito: Sunset Overdrive.
</p>
<img src="src/images/JulioCezarImage.png" alt="JulioCezarPicture">
</section>
<!-- Seção "Meus interesses" da página -->
<section class="my-interests">
<h2>MEUS<br><span class="my-interests-highlight1">INTERE</span><br><span class="my-interests-highlight2">SSES</span></h2>
<ul class="interests-list">
<li>🖥️💻 Programacao back-end e front-end</li>
<li>🎨🖌️ UX/UI Design e Web Design</li>
<li>🎮 Videogames</li>
<li>📚 Aprender</li>
<li>🚲 Ciclismo</li>
<li>🎧 Musica</li>
<li>🍜 Anime</li>
<li>🎲 RPG</li>
</ul>
<img src="src/images/bikeImage.png" alt="JulioCezarBikePicture">
</section>
<!-- Seção extra "Imagens" -->
<section class="extra-images">
<img id="image1" src="src/images/NFS2015GameImage.png" alt="NeedForSpeedGamePicture">
<img id="image2" src="src/images/MinecraftGameImage.png" alt="MinecraftGamePicture">
<img id="image3" src="src/images/TheDivision2GameImage.png" alt="TheDivison2GamePicture">
</section>
<div class="arrow-container">
<span class="arrow"></span>
</div>
<!-- Botão abaixo da seção "Meus interesses" da página -->
<div class="button-container">
<a href="https://github.com/juletopi" target="_blank">
<button id="github-button-id" class="github-button">
Visite o meu Github
<svg id="github-button-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="31" height="31" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</button>
</a>
</div>
<!-- Rodapé da página -->
<footer class="footer">
<p>© <span id="current-year"></span> Aula 01 de Programacao Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Programacao_Web" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<!-- Link do script do JavaScript -->
<script src="src/js/script.js"></script>
</body>
</html>/* Reset básico para todos os elementos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove a decoração padrão dos links */
a {
text-decoration: none;
}
/* Adiciona um scroll suave */
html {
scroll-behavior: smooth;
} /* Definição da fonte DisposableDroidBB-Regular */
@font-face {
font-family: "DisposableDroidBB-Regular";
src: url("../fonts/DisposableDroidBB-Regular.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Regular.ttf") format("woff");
}
/* Definição da fonte DisposableDroidBB-Bold */
@font-face {
font-family: "DisposableDroidBB-Bold";
src: url("../fonts/DisposableDroidBB-Bold.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Bold.ttf") format("woff");
}
/* Definição da fonte DisposableDroidBB-Italic */
@font-face {
font-family: "DisposableDroidBB-Italic";
src: url("../fonts/DisposableDroidBB-Italic.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Italic.ttf") format("woff");
}/* Estilização básica do corpo do documento */
body {
font-family: DisposableDroidBB-Regular;
color: #dbc0ff;
background-color: #191625;
}
/* Estilização do container do efeito parallax na imagem de fundo */
.parallax-container {
background-image: url('../images/espiralBackgroundImage.png');
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* Usando ::before para adicionar uma camada de fundo dinâmica do efeito parallax na imagem de fundo */
.parallax-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: inherit;
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
transform: translateY(-50%);
z-index: -1;
}
/* Estilização da imagem no título principal da página */
.main-title img {
width: 100%;
height: auto;
max-width: 200px;
display: block;
margin: 0 auto;
padding-top: 100px;
}
/* Estilização do título principal da página */
.main-title h1 {
font-family: "DisposableDroidBB-Bold";
font-size: 80px;
color: #dbc0ff;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
line-height: 0.7;
letter-spacing: -3px;
}
/* Estilização da parte "highlight" no título principal da página */
.main-title h1 .main-title-highlight {
background: linear-gradient(45deg, #de96ff, #32335e, #5ca8f5);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Estilização da linha horizontal no título principal da página */
.main-title hr {
border: none;
width: 60%;
height: 4px;
margin: 0 auto;
background-image: linear-gradient(to right, transparent, #3f375fd3, transparent);
}
/* Estilização do parágrafo no título principal da página */
.main-title p {
font-size: 32px;
margin-top: 26px;
padding-bottom: 160px;
text-align: center;
letter-spacing: -2px;
}
/* Estilização específica do emotico no título principal da página */
.main-title strong {
font-family: Verdana;
font-size: 22px;
}
/* Estilização específica da parte em negrito do parágrafo no título principal da página */
.main-title-emote {
font-family: Verdana;
font-size: 22px;
}
/* Estilização do container da seção "Sobre mim" da página */
.about-me {
background: linear-gradient(to bottom, rgba(50, 51, 94, 0.6), rgba(50, 51, 94, 1)), #32335e;
color: #dbc0ff;
padding: 60px;
display: flex;
align-items: center;
}
/* Estilização do título na seção "Sobre mim" da página */
.about-me h2 {
color: #dbc0ff;
padding-right: 40px;
font-size: 120px;
flex: 0;
text-align: left;
line-height: 0.5;
letter-spacing: -4px;
}
/* Estilização da parte "highlight" no título da seção "Sobre mim" da página */
.about-me h2 .about-me-highlight {
color: #3786d6;
}
/* Estilização dos parágrafos na seção "Sobre mim" da página */
.about-me p {
font-size: 24px;
flex: 1;
text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}
/* Estilização da imagem na seção "Sobre mim" da página */
.about-me img {
width: 100%;
height: auto;
max-width: 300px;
margin-left: 40px;
color: #212b47;
border: 10px solid #3786d6;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre a imagem na seção extra "Sobre mim" da página */
.about-me img:hover {
transform: scale(1.3);
}
/* Estilização do container da seção "Meus interesses" da página */
.my-interests {
background-color: #3786d6;
color: #181d2c;
padding: 60px;
display: flex;
flex-direction: row-reverse;
text-align: right;
align-items: center;
}
/* Estilização do título na seção "Meus interesses" da página */
.my-interests h2 {
color: #181d2c;
padding-left: 40px;
padding-right: 40px;
font-size: 120px;
text-align: right;
line-height: 0.5;
letter-spacing: -4px;
}
/* Estilização da parte "highlight 1" no título da seção "Meus interesses" da página */
.my-interests h2 .my-interests-highlight1 {
color: #5730e2;
}
/* Estilização da parte "highlight 2" no título da seção "Meus interesses" da página */
.my-interests h2 .my-interests-highlight2 {
color: #5a1791;
}
/* Estilização da imagem na seção "Meus interesses" da página */
.my-interests img {
width: 100%;
height: auto;
max-width: 300px;
margin-top: 40px;
margin-right: 60px;
color: #212b47;
border: 10px solid #212b47;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre os a imagens na seção extra "Sobre mim" da página */
.my-interests img:hover {
transform: scale(1.3);
}
/* Estilização da lista e dos parágrafos na seção "Meus interesses" da página */
.my-interests li {
font-size: 24px;
text-align: right;
}
/* Removendo o estilo de lista padrão */
.interests-list {
list-style-type: none;
padding-left: 0;
}
/* Removendo a margem e posicionando a lista */
.interests-list li {
position: relative;
padding-right: 20px;
text-align: right;
}
/* Adicionando o marcador do lado direito dos itens da lista */
.interests-list li::before {
content: '•';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
color: #181d2c;
font-size: 26px;
}
/* Estilização do container da seção extra "Imagens" da página */
.extra-images {
background-color: #3786d6;
padding: 20px;
padding-bottom: 80px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização geral das imagens na seção extra "Imagens" da página */
#image1, #image2, #image3 {
width: 100%;
height: auto;
color: #212b47;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre os as imagens na seção extra "Imagens" da página */
#image1:hover, #image2:hover, #image3:hover {
transform: scale(1.3);
}
/* Estilização específica da imagem 1 na seção extra "Imagens" da página */
#image1 {
max-width: 370px;
border: 6px solid #2245a5;
border-radius: 5px;
}
/* Estilização específica da imagem 2 na seção extra "Imagens" da página */
#image2 {
max-width: 220px;
border: 6px solid #208a37;
border-radius: 5px;
}
/* Estilização específica da imagem 3 na seção extra "Imagens" da página */
#image3 {
max-width: 370px;
border: 6px solid #d37811;
border-radius: 5px;
}
/* Estilização do container da seta animada */
.arrow-container {
background-color: #5ea2e6; /* Cor de fundo desejada */
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding-top: 40px;
}
/* Estilização da seta animada */
.arrow {
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 23px solid #181d2c;
position: relative;
animation: arrowAnimation 0.5s infinite alternate;
}
/* Animação da seta */
@keyframes arrowAnimation {
from {
top: 0;
}
to {
top: 10px;
}
}
/* Estilização do container do botão "Github" */
.button-container {
background-color: #5ea2e6;
display: flex;
justify-content: center;
padding-bottom: 50px;
padding-top: 40px;
}
/* Estilização do botão "Github" */
.github-button {
font-family: "DisposableDroidBB-Bold";
display: flex;
align-items: center;
background-color: transparent;
color: #181d2c;
border: 4px solid #212b47;
border-radius: 5px;
padding: 10px 20px;
font-size: 28px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* Estilização da cor do ícone SVG dentro do botão "Github" */
.github-button #github-button-icon path {
fill: #1a2238;
}
/* Estilização específica do ícone SVG dentro do botão "Github" */
.github-button #github-button-icon {
margin-left: 8px;
}
/* Estilização do botão "Github" ao passar o mouse */
.github-button:hover {
background-color: #212b47;
color: #ffffff;
border-color: #212b47;
}
/* Estilização do ícone SVG dentro do botão "Github" ao passar o mouse */
.github-button:hover #github-button-icon path {
fill: #ffffff;
transition: fill 0.3s ease-in-out;
}
/* Estilização do rodapé */
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
}
/* Estilização do texto do rodapé */
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 16px;
}
/* Estilização do texto predescente aos links pessoais do autor do site no rodapé */
#my-links {
margin-top: -25px;
}
/* Estilização dos ícones sociais pessoais do autor do site */
.personal-social-icons {
margin-top: 8px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização do preenchimento dos ícones sociais do autor do site */
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
/* Estilização geral inicial dos ícones sociais do autor do site */
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
/* Estilização específica do ícone "Facebook" ao passar o mouse */
#facebook-icon:hover svg path {
fill: #3b5998;
}
/* Estilização específica do ícone "Instagram" ao passar o mouse */
#instagram-icon:hover svg path {
fill: #e1306c;
}
/* Estilização específica do ícone "LinkedIn" ao passar o mouse */
#linkedin-icon:hover svg path {
fill: #0077b5;
}
/* Estilização específica do ícone "GitHub" ao passar o mouse */
#github-icon:hover svg path {
fill: #333333;
}
/* Estilização específica do ícone "Whatsapp" ao passar o mouse */
#whatsapp-icon:hover svg path {
fill: #25d366;
}
/* Estilização da expansão ao passar o mouse sobre os ícones do autor do site */
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
/* Estilização do texto no final do site no rodapé */
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Estilização do link texto no final do site no rodapé */
#repository-link a {
color: #8848ff;
}
/* Estilização do link texto no final do site no rodapé ao passar o mouse */
#repository-link:hover a {
color: #69afe9;
}/* Estilização da barra de rolagem */
::-webkit-scrollbar {
background-color: #191625;
width: 10px;
height: 8px;
}
/* Estilização do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
background-color: #6343d877;
border-radius: 8px;
}
/* Estilização da seleção de texto */
::selection {
background-color: #6447ce9d;
color: #dbc0ff;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.main-title img {
max-width: 175px;
}
.main-title h1 {
font-size: 60px;
}
.main-title hr {
width: 75%;
height: 3px;
margin-top: -6px;
}
.main-title p {
font-size: 28px;
margin-top: 16px;
}
.main-title strong {
font-size: 18px;
}
.main-title-emote {
font-size: 18px;
}
.about-me {
display: flex;
flex-direction: column;
text-align: center;
}
.about-me h2 {
font-size: 85px;
text-align: center;
padding: 0;
order: -1;
}
.about-me img {
max-width: 220px;
margin-left: 0;
margin-top: 40px;
border: 6px solid #3786d6;
order: 0;
transition: none;
}
.about-me img:hover {
transform: none;
}
.about-me p {
font-size: 23px;
padding-top: 40px;
margin-bottom: -30px;
order: 1;
}
.my-interests {
flex-direction: column;
text-align: center;
}
.my-interests h2 {
font-size: 85px;
text-align: center;
padding: 0;
order: -1;
}
.my-interests img {
max-width: 220px;
margin: 0;
margin-top: 40px;
border: 6px solid #212b47;
transition: none;
order: 0;
}
.my-interests img:hover {
transform: none;
}
.interests-list {
list-style-type: disc ;
margin-top: 30px;
margin-bottom: -30px;
padding: 0;
padding-left: 15px;
order: 1;
}
.interests-list li {
position: relative;
padding: 0;
text-align: left;
font-size: 22px;
}
.interests-list li::before {
display: none;
}
.extra-images {
flex-direction: row;
align-items: center;
gap: 10px;
margin-bottom: -20px;
}
#image1, #image2, #image3 {
transition: none;
max-width: 280px;
}
#image2 {
max-width: 162px;
}
#image1:hover, #image2:hover, #image3:hover {
transform: none;
}
.arrow-container {
padding-top: 25px;
}
.arrow {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 15px solid #181d2c;
}
.button-container {
padding-bottom: 50px;
padding-top: 30px;
}
.github-button {
font-size: 25px;
}
.button-container #github-button-id #github-button-icon {
max-width: 24px;
}
.footer p {
font-size: 15px;
padding-top: 20px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -10px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
.main-title img {
max-width: 140px;
}
.main-title h1 {
font-size: 50px;
}
.main-title hr {
width: 80%;
height: 3px;
margin-top: -6px;
}
.main-title p {
font-size: 25px;
margin-top: 16px;
}
.main-title strong {
font-size: 14px;
}
.main-title-emote {
font-size: 16px;
}
.about-me {
flex-direction: column;
text-align: center;
}
.about-me h2 {
font-size: 76px;
text-align: center;
padding: 0;
order: -1;
}
.about-me img {
max-width: 220px;
margin-left: 0;
margin-top: 40px;
border: 6px solid #3786d6;
order: 0;
transition: none;
}
.about-me img:hover {
transform: none;
}
.about-me p {
font-size: 22px;
padding-top: 40px;
margin-bottom: -30px;
order: 1;
}
.my-interests {
flex-direction: column;
text-align: center;
}
.my-interests h2 {
font-size: 76px;
text-align: center;
padding: 0;
order: -1;
}
.my-interests img {
max-width: 220px;
margin: 0;
margin-top: 40px;
border: 6px solid #212b47;
transition: none;
order: 0;
}
.my-interests img:hover {
transform: none;
}
.interests-list {
list-style-type: disc ;
margin-top: 30px;
margin-bottom: -30px;
padding: 0;
padding-left: 15px;
order: 1;
}
.interests-list li {
position: relative;
padding: 0;
text-align: left;
font-size: 22px;
}
.interests-list li::before {
display: none;
}
.extra-images {
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: -20px;
}
#image1, #image2, #image3 {
transition: none;
max-width: 320px;
}
#image1:hover, #image2:hover, #image3:hover {
transform: none;
}
.arrow-container {
padding-top: 25px;
}
.arrow {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 13px solid #181d2c;
}
.button-container {
padding-bottom: 50px;
padding-top: 30px;
}
.github-button {
font-size: 22px;
}
.button-container #github-button-id #github-button-icon {
max-width: 24px;
}
.footer p {
font-size: 14px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}window.addEventListener('scroll', function() {
const parallaxContainer = document.querySelector('.parallax-container');
let scrollPosition = window.scrollY;
parallaxContainer.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
});
// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();
// Event listener para o clique do usuário no botão do "Github"
document.getElementById('github-button-id').addEventListener('click', function() {
// Impede o comportamento padrão do link
event.preventDefault();
// Exibindo mensagem de alerta e verificando a escolha do usuário
if (confirm('⚠️⚠️⚠️✋😲 Calma aí meu consagrado, você será redirecionado para outra página.\r\n\n Deseja continuar meeesmo?🤔🤔🤔')) {
// Se o usuário clicar em "OK", redireciona para o link do GitHub...
window.location.href = 'https://github.com/juletopi';
}
// ...se clicar em "Cancelar", nada acontece e o usuário permanece na página
});
Note
Retirado da aula de "CodigoAula02"
Link do repositório do projeto original: static-website by Prof-Karan-Luciano
Nesta aula foram aprendidos:
- Utilização da biblioteca do jQuery para interações com o DOM e manipulação de eventos.
- Criação de uma página-web com as seguintes funcionalidades:
- Trocar o texto do título entre "Título Inicial" e "Título Alterado".
- Alterar as cores principais da página entre os modos escuro e claro.
- Modificar o texto do título com um valor inserido pelo usuário no campo de texto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulação de Texto e Cor com jQuery | Aula 02 de Programação Web</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/lightMode.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="shortcut icon" href="src/images/ProgramacaoWebAula02Icon.ico" type="image/x-icon" />
</head>
<body>
<!-- Cabeçalho da página da página -->
<header class="header">
<img src="src/images/ProgramacaoWebAula02Image.png" alt="ProgramacaoWebAula02Image">
<h1 id="titulo">Título Inicial</h1>
</header>
<!-- Container-pai principal que contém as duas seções lado-a-lado -->
<div class="main-content">
<!-- Seção de informações do projeto -->
<aside class="project-info">
<h2>Projeto de Manipulação de Texto e Cor com jQuery</h2>
<p>Este é um projeto simples de manipulação de texto e cor usando HTML, CSS, JavaScript e jQuery.</p>
<h3>Funcionalidades</h3>
<ul>
<li>Trocar o texto do título entre "Título Inicial" e "Título Alterado".</li>
<li>Alterar as cores principais da página entre os modos escuro e claro.</li>
<li>Modificar o texto do título com um valor inserido pelo usuário no campo de texto.</li>
</ul>
</aside>
<!-- Container com o conteúdo principal da página -->
<div class="container">
<button id="botao-trocar-texto">Trocar Texto</button>
<button id="botao-trocar-cor">Trocar Cor de Fundo</button>
<input type="text" id="input-novo-texto" placeholder="Novo texto...">
<button id="botao-alterar-texto">Alterar Texto do Título</button>
</div>
</div>
<!-- Rodapé da página -->
<footer class="footer">
<p>© <span id="current-year"></span> Aula 02 de Programação Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Programacao_Web" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<!-- Link do script do JavaScript com as funções -->
<script src="src/js/functions.js"></script>
</body>
</html>/* Reset básico para todos os elementos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove a decoração padrão dos links */
a {
text-decoration: none;
}
/* Adiciona um scroll suave */
html {
scroll-behavior: smooth;
}/* Arquivo o qual fica a estilização CSS da página */
/* Estilização básica do corpo do documento */
body {
font-family: Verdana;
color: #dbc0ff;
background-color: #191625;
}
/* Estilização do cabeçalho da página */
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Estilização da imagem no cabeçalho da página */
.header img {
width: 100%;
height: auto;
max-width: 190px;
margin-top: 80px;
}
/* Estilização do título no cabeçalho da página */
.header h1 {
font-size: 45px;
color: #dbc0ff;
margin: 20px 0;
margin-bottom: -20px;
text-align: center;
letter-spacing: -3px;
}
/* Estilização do contêiner-pai principal da página */
.main-content {
display: flex;
justify-content: space-between;
padding: 40px;
}
/* Estilização da seção de informações do projeto da página */
.project-info {
flex: 2;
background-color: #2a2d4d;
color: #dbc0ff;
padding: 30px;
padding-right: 80px;
margin: 40px auto;
margin-right: 40px;
border-radius: 10px;
max-width: 600px;
text-align: left;
}
/* Estilização dos títulos na seção de informações do projeto da página */
.project-info h2 {
font-size: 26px;
margin-bottom: 10px;
}
/* Estilização do subtítulo na seção de informações do projeto da página */
.project-info h3 {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
/* Estilização da lista na seção de informações do projeto da página */
.project-info ul {
list-style-type: disc;
padding-left: 20px;
}
/* Estilização do container principal da página */
.container {
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 80px;
padding-bottom: 80px;
border: 5px solid #dbc0ff;
border-radius: 10px;
background-color: transparent;
}
/* Estilização dos botões */
.container button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
border: none;
background-color: #214772;
color: #ffffff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* Estilização específica do botão 'botao-trocar-texto' da página */
#botao-trocar-texto {
padding: 12px 62px;
}
/* Estilização específica do botão 'botao-trocar-cor' da página */
#botao-trocar-cor {
padding: 12px 30px;
}
/* Estilização específica do botão 'botao-alterar-texto' da página */
#botao-alterar-texto {
border: 3px solid #214772;
color: #dbc0ff;
border-radius: 5px;
padding: 10px 22px;
background-color: transparent;
}
/* Estilização específica dos botões 'botao-trocar-texto' e 'botao-trocar-cor' da página ao passar o mouse por cima */
#botao-trocar-texto:hover,
#botao-trocar-cor:hover {
background-color: #dbc0ff;
color: #0e0e0e;
}
/* Estilização específica do botão 'botao-alterar-texto' da página ao passar o mouse por cima */
#botao-alterar-texto:hover {
background-color: #214772;
border: 3px solid #214772;
border-radius: 5px;
}
/* Estilização do input */
.container input {
padding: 10px;
font-size: 16px;
margin: 10px;
border: 3px solid #dbc0ff;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #00000000;
}
/* Estilização do rodapé */
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
}
/* Estilização do texto do rodapé */
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 14px;
}
/* Estilização do texto predescente aos links pessoais do autor do site no rodapé */
#my-links {
margin-top: -25px;
}
/* Estilização dos ícones sociais pessoais do autor do site */
.personal-social-icons {
margin-top: 8px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização do preenchimento dos ícones sociais do autor do site */
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
/* Estilização geral inicial dos ícones sociais do autor do site */
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
/* Estilização específica do ícone "Facebook" ao passar o mouse */
#facebook-icon:hover svg path {
fill: #3b5998;
}
/* Estilização específica do ícone "Instagram" ao passar o mouse */
#instagram-icon:hover svg path {
fill: #e1306c;
}
/* Estilização específica do ícone "LinkedIn" ao passar o mouse */
#linkedin-icon:hover svg path {
fill: #0077b5;
}
/* Estilização específica do ícone "GitHub" ao passar o mouse */
#github-icon:hover svg path {
fill: #333333;
}
/* Estilização específica do ícone "Whatsapp" ao passar o mouse */
#whatsapp-icon:hover svg path {
fill: #25d366;
}
/* Estilização da expansão ao passar o mouse sobre os ícones do autor do site */
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
/* Estilização do texto no final do site no rodapé */
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Estilização do link texto no final do site no rodapé */
#repository-link a {
color: #8848ff;
}
/* Estilização do link texto no final do site no rodapé ao passar o mouse */
#repository-link:hover a {
color: #69afe9;
}/* Arquivo o qual fica o modo 'Light Mode' da página */
.light-mode {
background-color: #e2e3f0;
color: #080e16;
}
.light-mode .header h1 {
color: #080e16;
}
.light-mode .project-info {
background-color: #a5aeff;
color: #214772;
}
.light-mode .container {
border: 5px solid #080e16;
}
.light-mode .container button {
background-color: #214772;
color: #e2e3f0;
}
.light-mode #botao-alterar-texto {
color: #080e16;
}
.light-mode .container input {
border: 3px solid #080e16;
color: #080e16;
}
.light-mode #botao-trocar-texto:hover,
.light-mode #botao-trocar-cor:hover {
background-color: #a5aeff;
color: #214772;
}
.light-mode #botao-alterar-texto:hover {
background-color: #214772;
border: 3px solid #214772;
color: #e2e3f0;
border-radius: 5px;
}
.light-mode::-webkit-scrollbar {
background-color: #c5c5c5;
width: 10px;
height: 8px;
}
.light-mode::-webkit-scrollbar-thumb {
background-color: #214772;
border-radius: 8px;
}
.light-mode::selection {
background-color: #193556b0;
color: #c0c6ff;
}/* Estilização da barra de rolagem */
::-webkit-scrollbar {
background-color: #13111d;
width: 10px;
height: 8px;
}
/* Estilização do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
background-color: #193556;
border-radius: 8px;
}
/* Estilização da seleção de texto */
::selection {
background-color: #dee1fab6;
color: #193556;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.header img {
max-width: 160px;
}
.header h1 {
font-size: 38px;
}
.project-info {
padding-right: 40px;
}
.project-info h2 {
font-size: 22px;
}
.project-info h3 {
font-size: 19px;
}
.footer p {
font-size: 13px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
.header img {
max-width: 140px;
}
.header h1 {
font-size: 35px;
margin-bottom: -50px;
}
.main-content {
flex-direction: column;
align-items: center;
}
.project-info {
order: 2;
width: 90%;
margin: 20px 0;
padding-right: 40px;
}
.project-info h2 {
font-size: 19px;
}
.project-info h3 {
font-size: 17px;
}
.container {
order: 1;
width: 90%;
margin: 20px 0;
}
.footer p {
font-size: 11px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}// Arquivo o qual fica o JavaScript da página
/*
let textoOriginal = document.getElementById('titulo').textContent;
document.getElementById('botao-trocar-texto').addEventListener('click' , function() {
document.getElementById('titulo').textContent = 'Texto trocado'
let titulo = document.getElementById('titulo');
if (titulo.textContent === 'Texto trocado'){
titulo.textContent = textoOriginal;
} else {
textoOriginal = titulo.textContent;
titulo.textContent = 'Texto trocado'
}
});
*/
// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();
// Função para mudar o título principal da página
$(document).ready(function(){
$('#botao-trocar-texto').on('click', function(){
let titulo = document.getElementById('titulo'); // <-- Obtém o elemento do título pelo ID 'titulo'
if (titulo.textContent === 'Texto trocado'){
titulo.textContent = textoOriginal;
} else {
textoOriginal = titulo.textContent;
titulo.textContent = 'Texto trocado';
}
})
let corAtual = true; // <-- Variável para armazenar o estado atual da cor
// Função para mudar a cor do fundo da página
$('#botao-trocar-cor').on('click', function() {
if (corAtual) {
$('body').addClass('light-mode'); // <-- Adiciona a classe de light mode
} else {
$('body').removeClass('light-mode'); // <-- Remove a classe de light mode
}
corAtual = !corAtual; // <-- Alterna o valor da variável
})
// Função para mudar o título principal da página via input
$('#botao-alterar-texto').on('click', function() {
let novoTexto = $('#input-novo-texto').val(); // <-- Pega o valor do campo de input
if (novoTexto) {
$('#titulo').text(novoTexto);
} else {
alert('Por favor, insira um texto válido!'); // <-- Alerta se o campo estiver vazio
}
})
});
Note
Retirado da aula de "CodigoAula03"
Link do repositório do projeto original: Aula3 by Prof-Karan-Luciano
Nesta aula foram aprendidos:
- Utilização da biblioteca do Bootstrap para criação de estruturas de CSS pré-prontas.
- Utilização de JavaScript com jQuery para validar diferentes informações de cadastro.
- Criação e validação de um formulário de cadastro de usuário com os seguintes campos:
- Nome completo;
- Email;
- Senha e confirmação de senha;
- Número de telefone;
- CPF.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário de Validação | Aula 03 de Programação Web</title>
<!-- Link para o Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementsStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<link rel="shortcut icon" href="src/images/FormularioCadastroIcon.ico" type="image/x-icon" />
</head>
<body>
<div class="container mt-5">
<img src="src/images/FormularioCadastroImage.png" alt="ProgramacaoWebAula03Image">
<h2>Formulário de Cadastro</h2>
<form id="meuFormulario" novalidate>
<!-- Nome -->
<div class="form-group">
<label for="nome">Nome Completo <span id="asterisco">*</span></label>
<input type="text" class="form-control" id="nome" name="nome" placeholder="Digite seu nome completo" required>
<div class="invalid-feedback">
Por favor, insira um nome válido (apenas letras).
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email <span id="asterisco">*</span></label>
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required>
<div class="invalid-feedback">
Por favor, insira um email válido.
</div>
</div>
<!-- Senha -->
<div class="form-group">
<label for="senha">Senha <span id="asterisco">*</span></label>
<input type="password" class="form-control" id="senha" name="senha" placeholder="Mínimo 8 caracteres, incluindo números e letras" required>
<div class="invalid-feedback">
A senha deve ter no mínimo 8 caracteres, incluindo números e letras.
</div>
</div>
<!-- Confirmação de Senha -->
<div class="form-group">
<label for="confirmarSenha">Confirmar Senha <span id="asterisco">*</span></label>
<input type="password" class="form-control" id="confirmarSenha" name="confirmarSenha" placeholder="Confirme sua senha" required>
<div class="invalid-feedback">
As senhas não correspondem.
</div>
</div>
<!-- Telefone -->
<div class="form-group">
<label for="telefone">Telefone <span id="asterisco">*</span></label>
<input type="text" class="form-control" id="telefone" name="telefone" placeholder="(XX) XXXXX-XXXX" required>
<div class="invalid-feedback">
Por favor, insira um telefone válido no formato (XX) XXXXX-XXXX.
</div>
</div>
<!-- CPF -->
<div class="form-group">
<label for="cpf">CPF <span id="asterisco">*</span></label>
<input type="text" class="form-control" id="cpf" name="cpf" placeholder="XXX.XXX.XXX-XX" required>
<div class="invalid-feedback">
Por favor, insira um CPF válido.
</div>
</div>
<!-- Botão de Submissão -->
<button id="btn-submit" type="submit" class="btn btn-primary">Cadastrar</button>
</form>
</div>
<footer class="footer">
<p>© <span id="current-year"></span> Aula 03 de Programação Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Pagina_Calculadora_de_Soma_Simples" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<!-- Scripts JavaScript -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="src/js/script.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
html {
scroll-behavior: smooth;
}body {
background-color: #dee0e2;
font-family: 'Arial', sans-serif;
color: #343a40;
}
#asterisco {
color: #e72525;
}
/* Container principal */
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
max-width: 170px;
margin-top: 10px;
margin-bottom: 20px;
}
h2 {
margin-bottom: 30px;
font-weight: 600;
font-size: 1.75rem;
color: #007bff;
text-align: center;
}
/* Formulário */
.form-group label {
font-weight: 500;
font-size: 1rem;
color: #495057;
}
.form-control {
border-radius: 5px;
border: 1px solid #ced4da;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Feedback de erro */
.invalid-feedback {
font-size: 0.875rem;
color: #dc3545;
}
/* Botão de submissão */
.btn-primary {
background-color: #007bff;
border-color: #007bff;
font-weight: 600;
padding: 10px 30px;
margin-top: 10px;
border-radius: 5px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #004085;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
margin-top: 60px;
}
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 14px;
}
#my-links {
margin-top: -45px;
}
.personal-social-icons {
margin-top: -8px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
#facebook-icon:hover svg path {
fill: #3b5998;
}
#instagram-icon:hover svg path {
fill: #e1306c;
}
#linkedin-icon:hover svg path {
fill: #0077b5;
}
#github-icon:hover svg path {
fill: #333333;
}
#whatsapp-icon:hover svg path {
fill: #25d366;
}
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: -10px;
}
#repository-link a {
color: #007bff;
}
#repository-link:hover a {
color: #0056b3;
}::-webkit-scrollbar {
background-color: #a5a8aa;
width: 10px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #007bff;
border-radius: 8px;
}
::selection {
background-color: #0a57a89d;
color: #ffffff;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
img {
max-width: 140px;
}
h2 {
font-size: 28px;
}
.footer p {
font-size: 13px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -25px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -10px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
img {
max-width: 120px;
}
h2 {
font-size: 24px;
}
.footer p {
font-size: 11px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -25px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -15px;
font-size: 9px;
}
}/*
function demostrarRegexCPF(cpf){
const regex = /\d(3)\.\d(3).\d(3)\-\d(2)/;
const resultado = regex.exec(cpf);
if(resultado){
console.log('Texto $(cpf)');
console.log('CPF válido: ');
console.log(resultado[0]);
}else{
console.log('Texto $(cpf)');
console.log('CPF inválido: ');
}
}
*/
$(document).ready(function () {
// Resetando mensagens de erro
$('#meuFormulario').on('submit', function (event) {
event.preventDefault();
$('.form-control').removeClass('is-invalid');
let isValid = true;
// Validação do nome (apenas letras e espaços)
const nome = $('#nome').val().trim();
if (!/^[a-zA-Z\s]+$/.test(nome)) {
$('#nome').addClass('is-invalid');
isValid = false;
}
// Validação do email
const email = $('#email').val().trim();
if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
$('#email').addClass('is-invalid');
isValid = false;
}
// Validação da senha
const senha = $('#senha').val().trim();
if (senha.length < 8 || !/[a-zA-Z]/.test(senha) || !/[0-9]/.test(senha)) {
$('#senha').addClass('is-invalid');
isValid = false;
}
// Validação da confirmação da senha
const confirmarSenha = $('#confirmarSenha').val().trim();
if (confirmarSenha !== senha) {
$('#confirmarSenha').addClass('is-invalid');
isValid = false;
}
// Máscara e validação do campo Telefone
$('#telefone').on('input', function () {
let telefone = $(this).val().replace(/\D/g, '').substring(0, 11);
telefone = telefone.replace(/^(\d{2})(\d)/g, '($1) $2');
telefone = telefone.replace(/(\d{5})(\d{4})$/, '$1-$2');
$(this).val(telefone);
const telefonePattern = /^\(\d{2}\) \d{5}-\d{4}$/;
if (telefonePattern.test(telefone)) {
$(this).removeClass('is-invalid').addClass('is-valid');
} else {
$(this).removeClass('is-valid').addClass('is-invalid');
}
});
// Máscara e validação do campo CPF
$('#cpf').on('input', function () {
let cpf = $(this).val().replace(/\D/g, '').substring(0, 11);
cpf = cpf.replace(/(\d{3})(\d)/, '$1.$2');
cpf = cpf.replace(/(\d{3})(\d)/, '$1.$2');
cpf = cpf.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
$(this).val(cpf);
if (validarCPF(cpf)) {
$(this).removeClass('is-invalid').addClass('is-valid');
} else {
$(this).removeClass('is-valid').addClass('is-invalid');
}
});
// Função de validação do CPF
function validarCPF(cpf) {
cpf = cpf.replace(/\D/g, '');
if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf)) return false;
let soma = 0, resto;
for (let i = 0; i < 9; i++) soma += parseInt(cpf.charAt(i)) * (10 - i);
resto = 11 - (soma % 11);
let digitoVerificador1 = (resto === 10 || resto === 11) ? 0 : resto;
if (digitoVerificador1 !== parseInt(cpf.charAt(9))) return false;
soma = 0;
for (let i = 0; i < 10; i++) soma += parseInt(cpf.charAt(i)) * (11 - i);
resto = 11 - (soma % 11);
let digitoVerificador2 = (resto === 10 || resto === 11) ? 0 : resto;
return digitoVerificador2 === parseInt(cpf.charAt(10));
}
// Validação final do formulário
const form = $(this)[0];
if (!form.checkValidity() || !isValid) {
event.stopPropagation();
$(form).addClass('was-validated');
} else {
alert('Formulário válido! Pronto para ser enviado.');
this.submit();
}
});
});
Note
Retirado da aula de "CodigoAula04"
Link do repositório do projeto original: Aula4 by Prof-Karan-Luciano
Nesta aula foram aprendidos:
- Aprendizado sobre a lógica de programação com JavaScript.
- Criação de uma página-web de uma Lista de Tarefas simples com:
- Imput de texto para receber o conteúdo da tarefa;
- Botões de adicionar e remover tarefas.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Lista de Tarefas Simples | Aula 04 de Programação Web</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementsStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<link rel="shortcut icon" href="src/images/ListaTarefaSimplesIcon.ico" type="image/x-icon" />
</head>
<body>
<div class="container">
<img src="src/images/ListaTarefaSimplesImage.png" alt="ProgramacaoWebAula04Image">
<h1>Lista de Tarefas</h1>
<div class="input-group">
<input type="text" id="entradaTarefa" placeholder="Digite uma nova tarefa">
<button id="botaoAdicionar"><span>+</span></button>
</div>
<ul id="listaTarefas"></ul>
</div>
<footer class="footer">
<p>© <span id="current-year"></span> Aula 04 de Programação Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Pagina_Calculadora_de_Soma_Simples" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<script src="src/js/script.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
html {
scroll-behavior: smooth;
}body {
font-family: 'Arial', sans-serif;
background-color: #e1e3e7;
}
.container {
width: 90%;
max-width: 500px;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
max-width: 170px;
margin-top: 12px;
margin-bottom: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.input-group {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px 15px;
font-size: 16px;
border: 2px solid #dddddd;
border-right: none;
border-radius: 8px 0 0 8px;
outline: none;
}
input[type="text"]:focus {
border-color: #a29bfe;
}
button {
padding: 10px 15px;
font-size: 20px;
background-color: #6c5ce7;
color: #ffffff;
border: none;
cursor: pointer;
border-radius: 0 8px 8px 0;
transition: background-color 0.3s;
}
button:hover {
background-color: #4439ac;
}
button span {
display: block;
transform: translateY(-2px);
}
.botaoRemover:hover {
background-color: #c0392b;
color: #ffffff;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
li:nth-child(even) {
background-color: #f1f1f1;
}
li.completed {
text-decoration: line-through;
color: #999;
}
li button {
background-color: transparent;
border: none;
font-size: 18px;
color: #e74c3c;
cursor: pointer;
}
li button:hover {
color: #c0392b;
}
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
margin-top: 60px;
}
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 14px;
}
#my-links {
margin-top: -25px;
}
.personal-social-icons {
margin-top: 10px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
#facebook-icon:hover svg path {
fill: #3b5998;
}
#instagram-icon:hover svg path {
fill: #e1306c;
}
#linkedin-icon:hover svg path {
fill: #0077b5;
}
#github-icon:hover svg path {
fill: #333333;
}
#whatsapp-icon:hover svg path {
fill: #25d366;
}
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: -10px;
}
#repository-link a {
color: #6c5ce7;
}
#repository-link:hover a {
color: #5ca8e7;
}::-webkit-scrollbar {
background-color: #a5a8aa;
width: 10px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #6c5ce7;
border-radius: 8px;
}
::selection {
background-color: #4134a7a9;
color: #ffffff;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
img {
max-width: 140px;
}
h1 {
font-size: 28px;
}
.botaoRemover {
font-size: 16px;
}
.footer p {
font-size: 13px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -5px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -10px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
img {
max-width: 120px;
}
h1 {
font-size: 24px;
}
.botaoRemover {
font-size: 14px;
}
.footer p {
font-size: 11px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -10px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -15px;
font-size: 9px;
}
}// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();
const tarefas = {
lista: [],
entradaTarefa: document.getElementById('entradaTarefa'),
botaoAdicionar: document.getElementById('botaoAdicionar'),
listaTarefas: document.getElementById('listaTarefas'),
// Função de adicionar uma nova tarefa
adicionarTarefa: () => {
const textoTarefa = tarefas.entradaTarefa.value.trim();
if (textoTarefa !== ''){
// Cria um objeto de tarefa
const tarefa = {
texto: textoTarefa,
concluida: false
}
// Adiciona ao array de tarefa
tarefas.lista.push(tarefa);
// Atualiza a exibição de tarefas
tarefas.exibirTarefas();
// Limpa o campo de entrada
tarefas.entradaTarefa.value = '';
tarefas.entradaTarefa.focus();
}
},
// Função para exibir tarefas
exibirTarefas: () => {
// Limpa a lista antes de exibi-la
tarefas.listaTarefas.innerHTML = '';
// Itera o array de tarefas
tarefas.lista.forEach((tarefa, indice) => {
const itemTarefa = document.createElement('li');
const texto = document.createElement('span');
texto.textContent = tarefa.texto;
if (tarefa.concluida){
itemTarefa.classList.add('completed')
}
texto.addEventListener('click', () => {
tarefa.marcarConcluida(indice)
});
// Botão para remover a tarefa
const botaoRemover = document.createElement('button');
botaoRemover.textContent = 'Remover';
botaoRemover.classList.add('botaoRemover');
botaoRemover.addEventListener('click', () => (
tarefas.removerTarefa(indice)
));
itemTarefa.appendChild(texto);
itemTarefa.appendChild(botaoRemover);
tarefas.listaTarefas.appendChild(itemTarefa);
});
},
// Função para marcar uma tarefa como concluída
marcarConcluida: (indice) => {
tarefas.lista[indice].concluida = !tarefas.lista[indice].concluida;
tarefas.exibirTarefas();
},
// Função para remover uma tarefa
removerTarefa: (indice) => {
tarefas.lista.splice(indice, 1);
tarefas.exibirTarefas();
},
// Método de inicialização
init: () => {
// Adicionar evento de clique ao botão
tarefas.botaoAdicionar.addEventListener('click', tarefas.adicionarTarefa);
// Adicionar evento de tecla "Enter" no campo de entrada
tarefas.entradaTarefa.addEventListener('keyup', (evento) => {
if (evento.key === 'Enter') {
tarefas.adicionarTarefa();
}
});
}
};
// Inicializar a aplicação quando o DOM estiver carregado
document.addEventListener('DOMContentLoaded', () => {
tarefas.init();
});
|
Feito com 💜 por Juletopi.