Agora com essa minha nova ideia maluca todo dia tou tendo que pensar em algo novo pra postar aqui usando programação. Pensei em iniciar uma trilha básica de JavaScript do zero (já que já temos uma trilha de Python do zero e uma de web do zero) mas nos chats já estamos vendo JavaScript básico. Talvez quando terminarmos essa parte inicial nos chats eu insira teoria de JavaScript por aqui. Então descartei essa ideia.
Então resolvi ir em um dos cursos da Udemy que eu tenho comprados pra ver se tenho alguma ideia e vi em um desses cursos o instrutor criando um site de relaxamento, que é basicamente um HTML, CSS e JavaScript básico orientando a pessoa a respirar devagar e relaxar. Achei que algo que muita gente tá precisando esses dias de pandemia era relaxar então ele poderia vir bem a calhar.
Então, nos próximos dias dentro do #QuarantineDaysOfCode vamos criar isto aqui:
Ao final podemos ver de disponibilizar o site no ar usando o Github Pages.
Então vamos começar esse projetinho rápido.
Crie dentro de uma pasta um arquivo index.html, um style.css e um main.js, e uma pasta chamada img:
No index.html, se você estiver usando o editor de texto Visual Studio Code, basta digitar uma exclamação (!) e apertar tab que o editor de texto cria esse html base para a gente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Vamos alterar o título da página para "Exercício para respiração" e criar um título h1 dentro do body com o mesmo texto. Também vamos importar o css e o javascript para nossa página usando as tags <link> e <script>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Exercício para respiração</title>
</head>
<body>
<h1>Exercício para respiração</h1>
<script src="main.js"></script>
</body>
</html>
Após a tag h1, vamos criar uma div que será o container no qual todo o código do app ficará. Vamos adicionar a classe "container" e o id "container" a essa div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Exercício para respiração</title>
</head>
<body>
<h1>Exercício para respiração</h1>
<div class="container" id="container">
</div>
<script src="main.js"></script>
</body>
</html>
Observem nosso app atentamente agora:
Temos alguns elementos principais aqui. Um deles é o círculo principal, em fundo quase preto, com o texto dentro que alterna entre "Inspire...", "Segure..." e "Expire...". Temos um círculo externo a ele com essas 3 cores em tons de verde e branco. E temos mais externamente ainda a bolinha branca que fica marcando o tempo. Então temos 4 elementos principais:
Dentro da div container, vamos inserir cada um desses elementos. Serão 3 novas divs e um parágrafo. O círculo interno, o círculo externo (com as bordas), o ponteiro em branco serão as divs e o parágrafo conterá o texto que ficará dentro do círculo preto.
A div do círculo preto terá a classe "circle", o parágrafo com o texto terá o id "text", o ponteiro (a bolinha branca) será uma tag <span> dentro de uma nova div que funcionará como um container, que terá a classe "pointer-container" e o ponteiro terá a classe "pointer" e, enfim, o círculo externo será uma div com a classe "gradient-circle". O código fica assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Exercício para respiração</title>
</head>
<body>
<h1>Exercício para respiração</h1>
<div class="container" id="container">
<div class="circle"></div>
<p id="text">Inspire...</p>
<div class="pointer-container">
<span class="pointer"></span>
</div>
<div class="gradient-circle"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Abrindo nossa página agora, temos:
Sim, só esse html puro bem sem graça. Ao final dessa série nova iremos transformar esse html sem graça no nosso site do gif acima. Amanhã iremos estilizar a página com CSS.
