├── assets ├── favicon.ico ├── bottom-image.svg ├── top-image.svg └── rocket.svg ├── README.md ├── index.html ├── js └── script.js └── css └── style.css /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/betoblid/Countdown-Timer/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /assets/bottom-image.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/top-image.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Desafio *Countdown Timer* 2 | 3 | Neste desafio, fiz uma página de coming soon para o lançamento de um site, serviços de Vendas, e na página possui um countdown timer informando quanto tempo falta para o lançamento do serviço. 4 | 5 | ![Pagina principal](https://a.imagem.app/or2GMQ.jpeg) 6 | 7 | Ao clicar no botão inscreva-se, abrirá um formulário para que possa registrar-se para receber um aviso quando for lançado o site ou o countdown chegar a zero. 8 | 9 | ![Card Cadastro](https://a.imagem.app/orFovJ.jpeg) 10 | 11 | O formulário conta com validações, caso haja um erro no seu formulário um erro aparecerá na tela, assim como esse; 12 | 13 | ![Card Cadastro](https://a.imagem.app/orFBBG.jpeg) 14 | 15 | informando o que há de errado em seu formulário. A mensagem dura 4 segundos; 16 | 17 | Caso seu formulário esteja certo, ele irá fechar e uma mensagem aparecerá dizendo que o cadastro foi feito com sucesso. 18 | 19 | ## Como copiar esse projeto 20 | 21 | Usa-se o git com um comando bem simples e rápido "Git clone" e o nome do repositório. 22 | 23 | ``` sh 24 | git clone https://github.com/betoblid/Countdown-Timer.git 25 | ``` 26 | 27 | E após fazer dowloand dos arquivos o projeto rodará em sua maquina. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | countdown timer 11 | 12 | 13 | 14 | 15 |

16 |

17 |

Avisos

18 |

19 |

20 |

21 |

22 |

Ready to launch in...

23 |

24 |

25 |

Dia

26 | 27 |

28 |

29 |

30 |

Horas

31 | 32 |

33 |

34 | : 35 |

36 |

37 |

Minutos

38 | 39 | 40 |

41 |

42 | : 43 |

44 |

45 |

Segundos

46 | 47 |

48 |

49 | 50 |

Inscreva-se para saber mais sobre o lançamento

51 | 52 |

53 | 54 |

55 |

56 |

57 |

58 |

59 | 60 | 73 |

74 |

75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | //pegando elementos do DOM 2 | const days = document.getElementById('day'); 3 | const hors = document.getElementById('hors'); 4 | const minuts = document.getElementById('minut'); 5 | const seconds = document.getElementById('second'); 6 | const cxemail = document.getElementById('cxemail'); 7 | const cxnome = document.getElementById('cxnome'); 8 | const cxtel = document.getElementById('cxtel'); 9 | const closer = document.getElementById("close"); 10 | const formu = document.getElementById("form-cadastro"); 11 | const inscrever = document.getElementById("inscrever"); 12 | const enviar = document.getElementById("concluido"); 13 | const AlertAviso = document.getElementById("mensagem"); 14 | const popUpCard = document.getElementById("pop-up-alert"); 15 | 16 | //function responsavel por fazer a conveção 17 | function DateTime() { 18 | 19 | //pegando a data atual 20 | const dataatual = new Date(); 21 | //inserindo a data de lançamento 22 | const lançamento = new Date('2024-12-31'); 23 | //fazendo o calculo da diferença de segundos 24 | const totalSecond = (lançamento - dataatual) / 1000; 25 | 26 | //dividindo o total da conta por 3600 que é equivalente a minutos de um dia todo e dividindo por 24 que é o equivalente de horas que tem em um dia 27 | let yeas = Math.floor(totalSecond / 3600 / 24); 28 | //divide o total por minutos de um dia todo e faz a divição sobre esse valor e mostre o resto da divição de 24 29 | let hor = Math.floor(totalSecond / 3600) % 24; 30 | //pega o total divide por 60 que é o equivalente a uma hora em minutos e divide por 60 de novo e mostre o resto da divição por 60 31 | let min = Math.floor(totalSecond / 60) % 60; 32 | //nós segundos apenas faz a divição e mostre o resto da divição de 60 33 | let seg = Math.floor(totalSecond % 60); 34 | 35 | //fazendo uma validação para que caso hora, minutos, segundos ou dias for menos que 10 concatena com 0 para que sempre fique dois caracteres, poderiamos usar o toFixed(2) para que sempre mostre duas casinhas mas preferi a validação para não aver bugs no futuro 36 | days.textContent = yeas < 10 ? `0${yeas}` : yeas ; 37 | hors.textContent = hor < 10 ? `0${hor}` : hor; 38 | minuts.textContent = min < 10 ? `0${min}` : min; 39 | seconds.textContent = seg < 10 ? `0${seg}` : seg; 40 | } 41 | //execute essa função repetida mente a cada 1segundo 42 | setInterval(DateTime, 1000); 43 | 44 | 45 | //validando formulario 46 | function validaremail(email){ 47 | let teste = /\S+@\S+\.\S+/; 48 | if(teste.test(email) === false){ 49 | //controle de alerta para não aver bugs 50 | if(controlAlert == false){ 51 | AlertMensagem("Digite o email Corretamente") 52 | } 53 | return false 54 | }else{ 55 | return true 56 | } 57 | } 58 | function validarName(){ 59 | if(cxnome.value.length > 4){ 60 | return true 61 | }else{ 62 | //controle de alerta para não aver bugs 63 | if(controlAlert == false){ 64 | AlertMensagem("Digite um Nome Valido") 65 | } 66 | return false 67 | } 68 | } 69 | 70 | //variavel de controle do alertmensagem 71 | let controlAlert = false 72 | //function para chamar uma mensagem 73 | function AlertMensagem(mensagem) { 74 | 75 | popUpCard.classList.remove("off") 76 | popUpCard.classList.add("alert-mensagns") 77 | controlAlert = true 78 | 79 | setTimeout(() => { 80 | popUpCard.classList.remove("alert-mensagns") 81 | popUpCard.classList.add("off") 82 | controlAlert = false 83 | 84 | },4000) 85 | 86 | AlertAviso.textContent = mensagem 87 | } 88 | //function responsavel por fechar o formulario 89 | function btnclose(){ 90 | if(formu.classList.contains("form-pop-up")){ 91 | formu.classList.remove("form-pop-up") 92 | formu.classList.add("off") 93 | }else{ 94 | formu.classList.remove("off") 95 | formu.classList.add("form-pop-up") 96 | 97 | } 98 | } 99 | //function que envia dados, futuramente enviará para uma api 100 | function enviarDados(event){ 101 | if(validaremail(cxemail.value) && validarName()){ 102 | if(controlAlert == false){ 103 | AlertMensagem("Cadastro concluido") 104 | popUpCard.style.background = 'green' 105 | 106 | btnclose() 107 | cxemail.value = "" 108 | cxnome.value = "" 109 | cxtel.value = "" 110 | setTimeout(() => { 111 | popUpCard.style.background = '#858585' 112 | },4000) 113 | } 114 | } 115 | 116 | event.preventDefault() 117 | 118 | 119 | } 120 | closer.addEventListener("click", btnclose) 121 | inscrever.addEventListener("click", btnclose) 122 | cxnome.addEventListener("blur", validarName) 123 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | main { 8 | background-image: url("../assets/bottom-image.svg"); 9 | background-position: bottom; 10 | background-repeat: no-repeat; 11 | background-size: contain; 12 | position: relative; 13 | } 14 | 15 | .alert-mensagns{ 16 | position: absolute; 17 | top: 30px; 18 | right: 20px; 19 | background: #858585; 20 | width: 300px; 21 | color: white; 22 | border-radius: 6px; 23 | } 24 | .alert-mensagns p{ 25 | font: 500 15px 'Poppins', sans-serif; 26 | padding: 5px; 27 | text-align: center; 28 | } 29 | .card-load{ 30 | height: 5px; 31 | width: 100%; 32 | background: rgb(255, 255, 255); 33 | 34 | } 35 | .load-time{ 36 | background: blue; 37 | height: 5px; 38 | border-radius: 15px; 39 | animation: 4s loadMensagem linear infinite; 40 | } 41 | 42 | /* kayframe de load no time da mensagem onde o width grecerá na mensagem */ 43 | 44 | @keyframes loadMensagem { 45 | to{ 46 | width: 0%; 47 | } 48 | from{ 49 | width: 100%; 50 | } 51 | } 52 | 53 | .container-conteudo { 54 | display: flex; 55 | align-items: center; 56 | justify-content: space-around; 57 | width: 100%; 58 | min-height: 100vh; 59 | background-image: url("../assets/top-image.svg"); 60 | background-repeat: no-repeat; 61 | background-position: top; 62 | background-size: contain; 63 | } 64 | .card-time { 65 | display: flex; 66 | align-items: center; 67 | flex-direction: column; 68 | 69 | } 70 | .card-time h1 { 71 | color: #6C63FF; 72 | font: 700 36px 'Poppins', sans-serif; 73 | text-shadow: 0 0 2px #000; 74 | } 75 | 76 | .card-time p {color: #9C9AB6; font: 400 14px 'Poppins', sans-serif;} 77 | .card-time button { 78 | background: #6C63FF; 79 | color: white; 80 | padding: 10px 30px; 81 | border-radius: 10px; 82 | margin-top: 20px; 83 | border: none; 84 | font: 400 16px 'Poppins', sans-serif; 85 | cursor: pointer; 86 | } 87 | .card-logo img { width: 90%;} 88 | .box-time { 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | gap: 10px; 93 | margin-top: 10px; 94 | } 95 | .box-time p { font: 700 40px 'Poppins', sans-serif; color: #000;} 96 | .time { 97 | display: flex; 98 | align-items: center; 99 | justify-content: center; 100 | flex-direction: column; 101 | } 102 | .time p { color: #C8C8C8; font: 300 14px 'Poppins', sans-serif;} 103 | .time span { font: 400 72px 'Poppins', sans-serif;} 104 | 105 | 106 | /* Estilo do pop-up cadastro */ 107 | #pop-up-cadastro{ 108 | display: flex; 109 | align-items: center; 110 | justify-content: center; 111 | } 112 | #pop-up-cadastro form{ 113 | position: absolute; 114 | top: 30%; 115 | width: 450px; 116 | background-image: linear-gradient(to left, #001330, #001f65, #00279b, #0025cf, #2900ff); 117 | margin: 0 auto; 118 | border-radius: 10px; 119 | box-shadow: 0 0 10px 2px #001330; 120 | } 121 | .btn-close{ 122 | position: absolute; 123 | top: 7px; 124 | right: 10px; 125 | font: 700 18px 'Poppins'; 126 | background: none; 127 | border: none; 128 | color: white; 129 | cursor: pointer; 130 | 131 | } 132 | .form-pop-up{ 133 | padding: 10px; 134 | display: flex; 135 | justify-content: center; 136 | flex-direction: column; 137 | } 138 | .form-pop-up label{ 139 | font: 400 16px 'Poppins'; 140 | margin-top: 10px; 141 | color: white; 142 | } 143 | .form-pop-up input{ 144 | width: 90%; 145 | background: none; 146 | border: none; 147 | border-bottom: 2px solid rgb(255, 255, 255); 148 | padding: 6px; 149 | margin: 0 auto; 150 | outline: none; 151 | color: white; 152 | font: 500 14px 'Poppins'; 153 | } 154 | .btn-envia{ 155 | margin-top: 20px; 156 | border: none; 157 | padding: 10px 0; 158 | font: 600 14px 'Poppins'; 159 | color: white; 160 | background: #6C63FF; 161 | border-radius: 8px; 162 | cursor: pointer; 163 | } 164 | 165 | /* class manipulada pelo js */ 166 | .off{ 167 | display: none; 168 | } 169 | @media(max-width: 1000px) { 170 | .container-conteudo { flex-direction: column-reverse; } 171 | 172 | .card-logo img { width: 100%; } 173 | .time span{font-size: 60px;} 174 | } 175 | @media(min-width: 1440px) { 176 | 177 | .card-time h1 { font-size: 60px; } 178 | 179 | .card-time p { font-size: 24px; } 180 | 181 | .card-time button { font-size: 20px; } 182 | 183 | .card-logo img { width: 100%; } 184 | 185 | .box-time p { font-size: 50px; } 186 | 187 | .time p { font-size: 26px; } 188 | 189 | .time span { font-size: 92px;} 190 | } -------------------------------------------------------------------------------- /assets/rocket.svg: -------------------------------------------------------------------------------- 1 | 155 | --------------------------------------------------------------------------------