Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Comunidade
    • Sugestões, Críticas ou Dúvidas relativas ao P@P
    • Acerca do P@P
  • Comunidade a Trabalhar
    • Apresentação de Projectos de Programação
    • Downloads
    • Revista PROGRAMAR
  • Desenvolvimento Geral
    • C
    • C++
    • Java
    • Pascal
    • Python
    • Bases de Dados
    • Dispositivos Móveis
    • Outras Linguagens
  • Desenvolvimento Orientado para Web
    • PHP
    • HTML
    • CSS
    • Javascript
    • Outras Linguagens de WebDevelopment
    • Desenvolvimento Web
  • Desenvolvimento .NET
    • C#
    • Visual Basic .NET
    • ASP.NET
    • WPF & SilverLight
  • Software e Sistemas Operativos
    • Software de Produtividade
    • Sistemas Operativos
    • Apresentação de Software
  • Informática
    • Interfaces Visuais
    • Computação Gráfica
    • Algoritmia e Lógica
    • Segurança e Redes
    • Hardware
    • Electrónica e Automação Industrial
    • Matemática
    • Software de Contabilidade e Finanças
    • Dúvidas e Discussão de Programação
  • Outras Áreas
    • Notícias de Tecnologia
    • Dúvidas Gerais
    • Discussão Geral
    • Eventos
    • Anúncios de Emprego
    • Tutoriais
    • Snippets / Armazém de Código
  • Arquivo Morto
    • Projectos Descontinuados
    • System Empires

Blogs

  • Blog dos Moderadores
  • Eventos
  • Notícias de Tecnologia
  • Blog do Staff
  • Revista PROGRAMAR
  • Projectos
  • Wiki

Categories

  • Revista PROGRAMAR
  • Tutoriais
  • Textos Académicos
  • Exercícios Académicos
    • Exercícios c/ Solução
    • Exercícios s/ Solução
  • Bibliotecas e Aplicações
  • Outros

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website


GitHub


LinkedIn


Twitter


Facebook

  1. Numa tabela com as datas das consultas queria que não fosse permitido ao utilizador alterar os dados da consulta a menos de 72 horas da data da consulta marcada. O projeto de avaliação que estou a fazer esta tabela é gerada em php diretamente da base de dados. Mas para exemplificar resumi a uma tabela. Já tentei fazer um loop mas não estou a conseguir, apenas consegui umas dicas com o código a seguir: <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table td { padding: 15px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table> <thead> <tr> <th>ID_CONSULTA</th> <th>UTILIZADOR</th> <th>DATA</th> <th>OBSERVAÇÕES</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>marco</td> <td id="data-consulta">2022-06-16</td> <td>marcação1</td> <td><button id="editar">Editar</button></td> </tr> <tr> <td>2</td> <td>martim</td> <td id="data-consulta">2022-06-20</td> <td>marcação2</td> <td><button id="editar">Editar</button></td> </tr> <tr> <td>3</td> <td>carlos</td> <td id="data-consulta">2022-06-15</td> <td>marcação3</td> <td><button id="editar">Editar</button></td> </tr> </tbody> </table> <script src="script.js"></script> </body> </html> var inputConsulta = document.querySelector('#data-consulta'); var editar = document.querySelector('#editar'); function calcularDiferenca() { var dataConsulta = inputConsulta.innerHTML; //var dataAtual = inputAtual.value; var dataAtual = new Date().toISOString().slice(0, 10); dataConsulta = new Date(dataConsulta).toISOString().slice(0, 10); //dataConsulta = new Date(dataConsulta); //dataAtual= new Date(dataAtual); var diffInTime = Math.abs(dataConsulta - dataAtual); var timeInOneDay = 1000 * 60 * 60 * 24; var diffInDays = diffInTime / timeInOneDay; if (diffInDays >= 3) { alert('Você escolher alterar a marcação!'); } else { alert('O prazo de 72 para alterar a marcação expirou!'); } } editar.addEventListener('click', () => { var diffInDays = calcularDiferenca(); if (diffInDays >= 3) { ('#editar').prop('disabled', false); alert('Você escolheu alterar uma marcação!'); } else { $('#editar').prop('disabled', true); alert('O prazo para alterar a marcação foi expirado!\nPor favor, entre em contacto com a empresa!'); } });
  2. Boa tarde, Já levo umas horas valentes a tentar encontrar o erro, ou uma solução o que acontece é o seguinte: eu tenho uma tabela que, com a instrução onchange atualiza os valores de base de dados, mas, graficamente tanto muda como não muda o conteúdo, se fizer o refresh/F5 manual fica tudo ok, mas o objetivo era ser automático. As instruções funcionam o graficamente não, isso é que me esta a intrigar. function CriarProcesso(){ var NomeProcesso = document.getElementById("NomeProcesso").value; var dadosajax = { 'NomeProcesso' : NomeProcesso }; pageurl = 'URL/CriarProcesso.php'; $.ajax({ url: pageurl, data: dadosajax, type: 'POST', dataType: "text", cache: false, error: function(){ toastr.danger('Erro: Inserir Registo!!'); }, success: function(result){ if($.trim(result) == '1'){ toastr.success('O registo foi editado com sucesso'); $("#table-custo").load(location.href + " #table-custo"); } else{ toastr.danger('Não é possível registar.Tente mais tarde.'); } } }); } Mesmo com load em divs diferentes ou mesmo o Append, não estão a fazer o refresh.
  3. Bom dia, sou iniciante na programação e tenho este exercício teste. Preciso de apresentar o valor total e dinâmico de um orçamento num único campo, essa está a ser a dificuldade no momento. Como já pedi ajuda aqui antes e resolveram a questão de somar os checkbox seleciondados, queria apresentar o total no mesmo campo (id="valor-orcamento"). O desconto em percentagem do prazo dos meses é sobre o total do somatório ()Option + Checkboxes) - desconto em meses ); Agradecia a ajuda, qualquer explicação para me ajudarem questionem por favor... <!-- Pedido de Orçamento --> <div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> // Atualizar Orçamento consoante as alterações function atualizarPreco() { var preco = 0; // Tipo de página Selecionada com preços Diferentes if (document.getElementById('tipopagina').value == '400') { preco = 400; } if (document.getElementById('tipopagina').value == '500') { preco = 500; } if (document.getElementById('tipopagina').value == '600') { preco = 600; } // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value; if (prazo == 0) { preco = preco + 0; } else if (prazo == 1) { preco = preco - (preco * 0.05); } else if (prazo == 2) { preco = preco - (preco * 0.10); } else if (prazo == 3) { preco = preco - (preco * 0.15); } else { preco = preco - (preco * 0.20); } document.getElementById('valor-orcamento').value = preco; // Código que soma 400€ ao total por cada checkbox selecionado var soma1 = 0; function somar(check) { if ( check.checked ){ soma1 += 1*check.value; } else { soma1 -= 1*check.value; } document.getElementById("valor-orcamento").value = soma1; } }
  4. Queria somar os valores de várias checkbox, cada vez que fizer check numa checkbox ele acrescenta o valor, quando retirar o check ele retira o valor. Sou iniciante e estou com dúvidas neste ponto, por favor. Deixo aqui o meu formulário HTML: <form action="" name="formulario" onchange="calcularValores()"> <input type="checkbox" id="tipo-pagina" name="separadores" value="400">1 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">2 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">3 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">4 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">5 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">6 <input type="checkbox" id="tipo-pagina" name="separadores" value="400">7 <input type="text" id="valororcamento" name="valororcamento" value=""> </form>
  5. Olá, Estou a fazer um formulário de preenchimento automático usando Jquery e a função autocomplete. A ideia é: no campo "numero" escreve-se o número e aparece uma lista de resultados. Seleciona-se o resultado desejado e 3 campos são preenchidos automaticamente. Problema: só consigo fazer com que o campo "número" seja preenchido e não os outros campos, por exemplo o campo "nome". Excerto Jquery $("#numero, #nome").autocomplete( { source: "pesquisa.php", minLength: 2, autoFocus: true, change: function(event,ui) { if (!ui.item) { $("#numero").val(""); $("#nome").text(ui.item.$nome_emp); } }); Excerto do ficheiro "pesquisa.php" correspondente aos resultados depois de feita a pesquisa SQL while($row = sqlsrv_fetch_array($result)) // fetch result { if($i<16){ $sector = $row[3]; $n_emp = $row[2]; $nome_emp = $row[1]; $nome_abrev = $row[0]; $resultados[] = array('label' => ($nome_emp).' - '.$n_emp.' - '.$sector, 'value' => ($nome_emp).' - '.$n_emp.' - '.$sector); } $i++; } Será que me poderiam ajudar?
  6. Olá a todos, bom dia, estou fazendo um site pessoal para divulgar meus trabalhos multimídia. Como minha principal preocupação é o alinhamento de divs e seções, agradeço muito sua ajuda. Minhas dúvidas estão nos comentários. E eu também os envio aqui. <!--Como colocar isso como a imagem do tempo? (ver weather image)?--> <!--Como corrigir o espaço entre as duas bordas da barra de clima e data e hora (veja o layout image)--> index.html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>complete responsive personal portfolio website design tutorial</title> <!-- font awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- custom css file link --> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </head> <body> <!--This is the weather and datetime bar--> <!--How to put that as the weather image? (see the image weather image)?--> <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)--> <section class="header" id="header"> <div class="datetime" style="width:150px"> <p id="date">Sat 11 Sep 2021</p> <p id="time">10:08:58</p> </div> <div class="weather"><p><a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-label_1="VIANA DO CASTELO" data-label_2="" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js'); </script></p> </div> </div> <!-- header section starts --> <header> <div id="menu" class="fas fa-bars"></div> <nav class="navbar"> <a href="#home">home</a> <a href="#about">about</a> <a href="#services">services</a> <a href="#portfolio">portfolio</a> <a href="#blog">blog</a> <a href="#contact">contact</a> </nav> <div id="theme-toggler" class="fas fa-moon"></div> </header> <!-- header section ends --> <!-- home section starts --> <section class="home" id="home"> <div class="image"> <img src="images/foto ze.jpg" alt=""> </div> <div class="content"> <h1>Chamo-me José Moreira sou <span class="txt-rotate" data-period="2000" data-rotate='[ "Design Gráfico.", "Fotográfo.", "Web developer.",]'></span> </h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Quas, error?</p> <a href="#about" class="btn">about me</a> </div> </section> <!-- home section ends --> <section class="about" id="about"> <h1 class="heading"> about <span>me</span> </h1> <div class="row"> <div class="box"> <h3 class="title">coding skills</h3> <div class="progress"> <h3> html <span>95%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> css <span>80%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> js <span>65%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> sass <span>75%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">professional skills</h3> <div class="progress"> <h3> web design <span>98%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> web development <span>67%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> graphic design <span>75%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> seo marketing <span>60%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">experience</h3> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> <div class="box"> <h3 class="title">education</h3> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> </div> <div class="download"> <a href="#" class="btn"> download CV </a> </div> </section> <!-- service section starts --> <section class="services" id="services"> <h1 class="heading"> <span>my</span> services </h1> <div class="box-container"> <div class="box"> <span class="number">1</span> <img src="images/s1.png" alt=""> <h3>seo marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">2</span> <img src="images/s2.png" alt=""> <h3>graphic design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">3</span> <img src="images/s3.png" alt=""> <h3>digital marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">4</span> <img src="images/s4.png" alt=""> <h3>data analysis</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">5</span> <img src="images/s5.png" alt=""> <h3>web development</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">6</span> <img src="images/s6.png" alt=""> <h3>web design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> </div> </section> <!-- service section ends --> <!-- portfolio section starts --> <section class="portfolio" id="portfolio"> <h1 class="heading"> <span>my</span> portfolio </h1> <div class="button-container"> <div class="btn" data-filter="all">all</div> <div class="btn" data-filter="design">design</div> <div class="btn" data-filter="code">code</div> <div class="btn" data-filter="website">website</div> <div class="btn" data-filter="brand">brand</div> </div> <div class="image-container"> <div class="box design"> <img src="images/img1.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img2.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img3.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img4.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img5.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box website"> <img src="images/img6.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img7.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img8.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img9.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> </div> </section> <!-- portfolio section ends --> <!-- blog section start --> <section class="blog" id="blog"> <h1 class="heading"> <span>my</span> blogs </h1> <div class="box-container"> <div class="box"> <img src="images/blog1.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog2.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog3.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog4.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog5.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog6.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section> <!-- blog section ends --> <!-- contact section starts --> <section class="contact" id="contact"> <h1 class="heading"> contact <span>me</span> </h1> <div class="box-container"> <div class="box"> <i class="fas fa-phone"></i> <h3>my number</h3> <p>+123-456-7890</p> </div> <div class="box"> <i class="fas fa-envelope"></i> <h3>my email</h3> <p>example@gmail.com</p> </div> <div class="box"> <i class="fas fa-map-marker-alt"></i> <h3>my address</h3> <p>mumbai, india - 400104</p> </div> </div> <div class="row"> <form action=""> <div class="inputBox"> <input type="text" placeholder="name"> <input type="email" placeholder="email"> </div> <input type="text" placeholder="subject"> <textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea> <button class="btn"> send message </button> </form> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe> </div> </section> <!-- contact section ends --> <div id="td_container"> <div class="flex"> <div class="button-wrapper"> <i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i> <i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i> </div> <div id = "content"> <div class="now-playing-label">Now Playing</div> <div id="show"> </div> <div id="artist"> </div> </div> <div class="stream-wrapper"> <!-- <span>Stations</span> --> <div class="dropdown"> <button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i> <div class="dropdown-content"> <a href="#" onclick="changeStream(this)">22 West Radio Online</a> <a href="#" onclick="changeStream(this)">22 West FM</a> <a href="#" onclick="changeStream(this)">22 West Music Stream</a> </div> </div> </div> <div id="player"> <i class="fa fa-volume-up"></i> <div id="volume"></div> </div> <div class="social-icons"> <a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a> <a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a> <a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a> </div> </div> </div> <!-- footer section --> <div class="footer"> <div class="container> <div class="container copyright d-flex-r justify-content-space-around"> <ul class="d-flex-r my-1"> <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li> <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li> <p class="text-center my1">&copy;Copyright 2022.Designed by José Moreira</p> </ul> </div> <div class="d-flex-r justify-content-center"> <a href="#home"><i class="fas fa-angle-up"></i></a> </div> </div> </div> <!--footer--> <!-- jquery cdn link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- custom js file link --> <script src="js/script.js"></script> </body> </html> style.css :root{ --main-color:#4C84FF; --primary-bg-color:#fff; --secondary-bg-color:#eee; --primary-text-color:#222; --secondary-text-color:#666; } @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap'); *{ font-family: 'Roboto', sans-serif; margin:0; padding:0; box-sizing: border-box; text-transform: capitalize; outline: none; border:none; text-decoration: none; transition:all .3s cubic-bezier(.38,1.15,.7,1.12); } *::selection{ background-color: var(--main-color); color:#fff; } html{ font-size: 62.5%; overflow-x: hidden; } html::-webkit-scrollbar{ width:1.3rem; } html::-webkit-scrollbar-track{ background-color: var(--secondary-bg-color); } html::-webkit-scrollbar-thumb{ background-color: var(--main-color); } body{ background:var(--secondary-bg-color); } body.dark-theme{ --primary-bg-color:#252C48; --secondary-bg-color:#171C32; --primary-text-color:#fff; --secondary-text-color:#eee; } section{ min-height: 100vh; padding:1rem; padding:0 8%; } .btn{ display: inline-block; padding:.9rem 3.5rem; font-size: 2rem; background:none; color:#fff; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin-top: 1rem; z-index: 0; position: relative; overflow: hidden; border:.2rem solid var(--main-color); } .btn::before{ content: ''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: .5rem; background:var(--main-color); height:85%; width: 95%; z-index: -1; transition: .2s linear; } .btn:hover:before{ top:100%; transform: translate(-50%, 100%); } .btn:hover{ color:var(--primary-text-color); } .heading{ font-size: 5rem; color:var(--primary-text-color); text-align: center; padding:1rem; text-transform: uppercase; } .heading span{ color:var(--main-color); text-transform: uppercase; } /*weather and datetime*/ .header .datetime { width: auto !important; /* to kill your inline style (width:150px) */ display: flex; margin: 0 !important; padding: 8px 0 !important; /* better to use space in between date/time (see above) */ } .header .weather { flex-grow: 1; } .header .weather > p { margin: 0; border-color: black; } #weatherwidget-io-0 { position: relative !important; } .weatherwidget-io { padding: 0 !important; height: auto !important; position: static !important; margin: 0 !important; font-size: 0; } #date, #time { margin: 1em .5em; } /*weather and datetime*/ #menu{ font-size: 2rem; background:var(--main-color); color:#fff; border-radius: 5rem; height:5rem; width:5rem; text-align: center; line-height: 5rem; position: fixed; top: 2rem; right:2rem; z-index: 1000; cursor: pointer; } #menu.fa-times{ transform:rotate(-180deg); } .navbar{ position: fixed; top:2.4rem; right:2.5rem; padding:1.1rem 2rem; padding-right: 4rem; z-index: 999; border:.2rem solid var(--main-color); border-radius: 1rem; background:var(--primary-bg-color); opacity: 0; transform-origin: top right; transform: scale(0); } .navbar.nav-toggle{ opacity: 1; transform: scale(1); } .navbar a{ display: block; font-size: 2rem; padding:1rem; padding-right: 7rem; color:var(--primary-text-color); } .navbar a:hover{ color:var(--main-color); transform: translateX(1rem); } .home{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .home .image{ flex:1 1 40rem; padding:1rem; text-align: center; } .home .image img{ height:50rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); border-top: 3rem solid var(--primary-bg-color); border-right: 3rem solid var(--primary-bg-color); border-bottom: 3rem solid var(--main-color); border-left: 3rem solid var(--main-color); border-radius: .5rem; } .home .content{ flex:1 1 40rem; padding:1rem; } .home .content .hello{ display: inline-block; padding:1rem 0; font-size: 2.6rem; color:var(--secondary-text-color); } .home .content h3{ color:var(--primary-text-color); font-size: 5rem; } .home .content h3 span{ color:var(--main-color); } .home .content p{ padding:1rem 0; color:var(--secondary-text-color); font-size: 2rem; } .about .row{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .about .row .box{ flex:1 1 40rem; background-color: var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:.5rem 1.5rem; margin:1.5rem; } .about .row .box .title{ color:var(--primary-text-color); font-size: 2.5rem; padding:1rem 0; } .about .row .box .progress{ padding:1rem 0; } .about .row .box .progress h3{ font-size: 1.7rem; color:var(--secondary-text-color); display: flex; justify-content: space-between; } .about .row .box .progress .bar{ height: 2.5rem; border-radius: .5rem; border:.2rem solid var(--main-color); padding:.5rem; margin:1rem 0; } .about .row .box .progress .bar span{ height: 100%; border-radius: .3rem; background-color: var(--main-color); display: block; } .about .row .box:nth-child(1) .progress:nth-child(2) .bar span{ width: 95%; } .about .row .box:nth-child(1) .progress:nth-child(3) .bar span{ width: 80%; } .about .row .box:nth-child(1) .progress:nth-child(4) .bar span{ width: 65%; } .about .row .box:nth-child(1) .progress:nth-child(5) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(2) .bar span{ width: 98%; } .about .row .box:nth-child(2) .progress:nth-child(3) .bar span{ width: 67%; } .about .row .box:nth-child(2) .progress:nth-child(4) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(5) .bar span{ width: 60%; } .about .row .box .exp-box{ padding:0 1.8rem; margin-top: 1rem; margin-bottom: 2rem; border-left: .2rem solid var(--main-color); position: relative; } .about .row .box .exp-box h3{ color:var(--main-color); font-size: 2rem; } .about .row .box .exp-box p{ color:var(--secondary-text-color); font-size: 1.5rem; padding:1rem 0; } .about .row .box .exp-box::before{ content:''; position: absolute; top:0; left: -1rem; border-radius: 50%; height: 2rem; width: 2rem; background: var(--main-color); } .about .download{ background:var(--primary-bg-color); border-radius: .5rem; text-align: center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:2rem; padding-bottom: 3rem; margin:1rem; } .services .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .services .box-container .box{ background:var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1rem; padding:1rem; width:35rem; text-align: center; position: relative; z-index: 0; } .services .box-container .box .number{ position: absolute; top:1.5rem; left: 2rem; font-size: 2.5rem; color:var(--primary-text-color); } .services .box-container .box img{ height:7rem; width:7rem; margin:1rem; } .services .box-container .box h3{ font-size: 2rem; color:var(--main-color); } .services .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); padding:1rem; } .services .box-container .box::before{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--main-color); z-index: -1; clip-path: circle(25% at 0 0); opacity: .1; transition: .3s; } .services .box-container .box:hover::before{ clip-path: circle(100%); } .portfolio .button-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding:1rem 0; } .portfolio .button-container .btn{ margin:1rem; cursor: pointer; } .portfolio .image-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 1rem 0; } .portfolio .image-container .box{ width:35rem; margin: 1rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); overflow: hidden; height: 25rem; position: relative; border:1.5rem solid var(--primary-bg-color); cursor: pointer; } .portfolio .image-container .box img{ height: 100%; width: 100%; object-fit: cover; } .portfolio .image-container .box .info{ position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--primary-bg-color); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .9; transform: scale(0); } .portfolio .image-container .box:hover .info{ transform: scale(1); } .portfolio .image-container .box .info h3{ font-size: 2.5rem; color:var(--primary-text-color); } .blog .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .blog .box-container .box{ width:33rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1.5rem; background: var(--primary-bg-color); overflow: hidden; } .blog .box-container .box img{ width: 100%; height: 20rem; object-fit: cover; } .blog .box-container .box .content{ padding:1.5rem; } .blog .box-container .box .content .info{ border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); text-align: center; position: relative; font-size: 1.5rem; color:var(--primary-text-color); background:var(--secondary-bg-color); padding:1rem; margin-top: -4rem; margin-bottom: 1rem; } .blog .box-container .box .content .info i{ color:var(--main-color); padding:0 1rem; } .blog .box-container .box .content .title{ color:var(--primary-text-color); display: block; font-size: 2.5rem; padding:.5rem 0; } .blog .box-container .box .content .title:hover{ text-decoration: underline; color:var(--main-color); } .blog .box-container .box .content p{ color:var(--secondary-text-color); padding:.5rem 0; font-size: 1.5rem; } .contact .row{ display: flex; justify-content: center; flex-wrap: wrap; } .contact .row form{ flex:1 1 40rem; background: var(--primary-bg-color); padding: 2rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; } .contact .row .map{ flex:1 1 40rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; border:2rem solid var(--primary-bg-color); width:100%; } .contact .row form .inputBox{ display: flex; justify-content: space-between; flex-wrap: wrap; } .contact .row form input, .contact .row form textarea{ padding:1rem 0; margin:1rem 0; font-size: 1.7rem; border-bottom: .1rem solid var(--secondary-text-color); text-transform: none; background:none; color:var(--main-color); width: 100%; } .contact .row form input::placeholder, .contact .row form textarea::placeholder{ text-transform: capitalize; color:var(--secondary-text-color); } .contact .row form input:focus, .contact .row form textarea:focus{ border-color: var(--main-color); } .contact .row form .inputBox input{ width:49%; } .contact .row form textarea{ height: 15rem; resize: none; } .contact .row form .btn{ cursor: pointer; } .contact .box-container{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .contact .box-container .box{ flex:1 1 30rem; margin:1rem; padding:3rem 1rem; background:var(--primary-bg-color); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; text-align: center; } .contact .box-container .box i{ height: 6rem; width:6rem; line-height: 6rem; border-radius: 50%; font-size: 3rem; background:var(--secondary-bg-color); color:var(--main-color); } .contact .box-container .box h3{ color:var(--primary-text-color); padding:1rem 0; font-size: 2rem; } .contact .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); } /*Radio station*/ .flex { display:flex; background:#000; width:900px; height:108px; align-items:center; justify-content:flex-start; } .button-wrapper { background: #000; height:100%; width:20%; position:relative; } .button { position:absolute; top:35%; left:0; right:0; text-align:center; font-size:2rem !important; color:#4cc8f4 !important; } #pause { display:none; } .stream-wrapper { color:#fff !important; margin-left:5%; font-size:1rem !important; min-width:200px; } .social-icons { margin-left:15%; display:inline-table; height:40px; width:200px !important; } .icons { border:1px #4cc8f4 solid; border-radius:50%; color:#4cc8f4 !important; margin-top:1%; padding:8px 12px; font-size:1.2rem !important; } .icons:hover { color:#fff !important; border-color:#fff !important; } .social-icons a { margin-left:5%; } .dropbtn { background-color: #4cc8f4; color: white; padding: 10px; font-size: 16px; border: none; min-width: 180px; } .dropdown { position: relative; display: inline-block; background-color: #4cc8f4; color: white; padding-right:5px; min-width: 199px; text-align:center; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 199px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #4cc8f4; padding: 10px 12px; text-decoration: none; display: block; width:180px; } .dropdown-content a:hover { background-color: #4cc8f4; color:#fff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: ##4cc8f4; } #player { width: 50px; height: 50px; position: relative; margin-left:5%; top: 25px; } #player i { position: absolute; margin-top: -6px; color: #666; } #player i.fa-volume-up { color:#4cc8f4; } #volume { position: absolute; left: 24px; margin-left:12px; margin: 0 auto; height: 3px; width: 100px; background: #555; border-radius: 10px; } #volume .ui-slider-range-min { height: 3px; width: 300px; position: absolute; background: #4cc8f4; border: none; border-radius: 10px; outline: none; } #volume .ui-slider-handle { width: 10px; height: 10px; border-radius: 10px; background: #f1f1f1; position: absolute; margin-left: -6px; margin-top: -3px; cursor: pointer; outline: none; } #content { display:none; width:150px !important; color:#4cc8f4 !important; font-size:0.9rem; } #artist { width:100% !important; margin-top:10%; } #show { width:100% !important; margin-top:5%; } .now-playing-label { color:#fff; } /*Radio Staion ends*/ .footer{ background-color:orange; color: #bbb; height: auto; } .container{ padding: 2rem 1rem; } .footer ul{ font-size: normal; list-style: none; } .footer a{ color:red; text-decoration: none; } /*Margins and padding Classes*/ .my-1{margin-top: 1rem; margin-bottom: 1rem;} /*Flex Proprieties*/ .d-flex-r{ display: flex; flex-direction: row; flex-wrap: wrap; } .justify-content-center{ justify-content:center; } .justify-content-space-around{ justify-content:space-around; } .footer i{color: white;} .footer .copyright i {margin-left: 1rem;} .footer i.fab, .footer i.fas{font-size: 1.25rem;transition: 0.3s ease;} .footer i.fab:hover{color:white important;} .footer i.fas { border-radius: 50%; border:1px solid white; margin-top: 1rem; margin-bottom: 1rem; padding: 12px 15px; #theme-toggler{ position: fixed; top:8.5rem; right:2rem; z-index: 998; height: 5rem; width:5rem; line-height: 5rem; text-align: center; font-size: 2rem; background:var(--main-color); color:#fff; cursor: pointer; border-radius: 5rem; } #theme-toggler.fa-sun{ transform:rotate(-180deg); } .home .content { font-family: 'Raleway', sans-serif; padding: 3em 2em; font-size: 18px; background: #222; color: #aaa } .home .content h1{ font-weight: 200; margin: 0.4em 0; } .home .content h1 { font-size: 3.5em; } /* media queries */ @media (max-width:991px){ html{ font-size: 55%; } section{ padding:1rem; padding: 0 3%; } } @media (max-width:768px){ .home .image img{ height: auto; width: 100%; } } @media (max-width:400px){ html{ font-size: 50%; } .services .box-container .box{ width: 100%; } .portfolio .image-container .box{ width:100%; } .blog .box-container .box{ width:100%; } .contact .row form .inputBox input{ width:100%; } } sccript.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; script.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; Agradeço imenso a vossa ajuda, por favor. Aguardando uma resposta breve de vossa parte. Cumprimentos José Moreira Ps: https://codepen.io/Quencyjones79/pen/gOXQrbV (imagens para ajuda referidas em cima)- https://mab.to/64upEF7st todo o código-fonte.: https://mab.to/S7mtJ2kmh
  7. Velhinho

    Functions

    Boa tarde, tenho este situação para resolver mas estou a ter dificuldade se alguém, ,me pudesse ajudar agradecia.
  8. Bom Dia Pessoal Eu tenho um gráfico criado em chart.js só que não aparece o título, nem a "tooltip" tão interessante como uma versão antiga que tinha criado, apesar de o código ser quase igual. Alguém tem ideia do que poderá ser? <script> $.post("data.php", function(data) { console.log(data); var mês = []; var linha = []; var tc = []; for (var i in data) { linha.push(data[i].linha); mês.push(data[i].mês); tc.push(data[i].tc); } var data1 = { labels: mês, linha, tc, datasets: [{ label: 'Bootleneck Linha', fillColor: "rgba(39, 93, 245, 0.56)", strokeColor: "rgba(39, 93, 245, 0.83)", highlightFill: "rgba(39, 93, 245, 0.83)", data: tc, mês, linha, }] }; $.post("data2.php", function(data) { console.log(data); var mês = []; var linha = []; var tc = []; for (var i in data) { linha.push(data[i].linha); mês.push(data[i].mês); tc.push(data[i].tc); } var data2 = { labels: mês, tc, linha, datasets: [{ label: 'Bootleneck Linha', fillColor: "rgba(245, 93, 93, 0.5)", strokeColor: "rgba(245, 93, 93, 1)", highlightFill: "rgba(245, 93, 93, 1)", data: tc, }] }; var ctx = document.querySelector("#graph").getContext("2d"); var myBarChart = new Chart(ctx).Bar(data1); $("#btn1").on("click", function() { var context1 = document.querySelector('#graph').getContext('2d'); new Chart(context1).Bar(data1); }); $("#btn2").on("click", function() { var context2 = document.querySelector('#graph').getContext('2d'); new Chart(context2).Bar(data2); }); }); }); </script>
  9. Bom Dia Pessoal Tenho um gráfico simples que muda de valores de acordo com os botões, e esses valores vêm de uma BD que eu criei. Agora a questão é a seguinte. <html> <title> Teste </title> <h1> Teste </h1> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <canvas id="graph" width="800px" height="400px"></canvas> <button id="btn1"> Option 1 </button> <button id="btn2"> Option 2 </button> <script> $(document).ready(function () { showGraph(); }); function showGraph() { { $.post("data.php", function (data) { console.log(data); var mês = []; var linha = []; var tc = []; for (var i in data) { linha.push(data[i].linha); mês.push(data[i].mês); tc.push(data[i].tc); } var data = { labels: linha, tc, datasets: [ { label: 'Bootleneck Linha', backgroundColor: '#49e2ff', borderColor: '#46d5f1', hoverBackgroundColor: '#CCCCCC', hoverBorderColor: '#666666', data: tc } ] }; var data2 = { labels: mês, tc, datasets: [ { label: 'Bootleneck Linha', backgroundColor: '#49e2ff', borderColor: '#46d5f1', hoverBackgroundColor: '#CCCCCC', hoverBorderColor: '#666666', data: tc } ] }; var context = document.querySelector('#graph').getContext('2d'); new Chart(context).Line(data); $("#btn1").on("click", function() { var context1 = document.querySelector('#graph').getContext('2d'); new Chart(context1).Line(data); }); $("#btn2").on("click", function() { var context2 = document.querySelector('#graph').getContext('2d'); new Chart(context2).Line(data2); }); }); } } </script> </body> </html> Como é que faço para que a variável data2 vá buscar os valores a outro php sem ser o data.php? (que é o que está a ser usado de momento para as duas variáveis).
  10. Olá a todos, Estou a aperfeiçoar pequenos coisas no meu projeto e gostaria de saber se é possivel limitar o date 2 com a informação do date 1 . Exemplo pratico : Date1 recebe a data inicial de férias e o Date 2 nunca poderá ser inferior ao date1 Neste momento a unica opção que tenho é pedir para inserir duas datas da seguinte forma : <label>Data de Inicio</label> <input type="date" class="form-control" id="data_inicio" name="data_inicio" placeholder="" aria-describedby="basic-addon1"> <label>Data de Fim</label> <input type="date" class="form-control" id="data_fim" name="data_fim" placeholder="" aria-describedby="basic-addon1">
  11. Boa noite, Estou a fazer um bot para o discord para um jogo e estou aqui com algumas dificuldades porque a experiencia nao é a melhor.. É o seguinte, eu preciso que me mande na variavel "color" 3 coisas diferentes, ou melhor, me escreva na cor dependendo do innerHTML tiver "small", "medium" ou "large" escreva na variavel color "verde", "castanho" ou "vermelho". Como posso fazer para essa variavel procurar uma das tres variaveis? for (var i = 1, row; row = table.rows[i]; i++) { var color = row.cells[0].innerHTML.includes("small") var player = row.cells[0].innerText; var status = row.cells[1].innerText; if (status){ msg += " " + color + " ---> " + player + " ----> " + status + " \n" } } Obrigado pela ajuda. Abraço
  12. Olá pessoal, no meu código abaixo estou usando Fetch api para retornar os dados do usuario (Github) objetivo é pegar o número total de estrelas (starsgazers) de todos os repositórios. Eu utilizei um foreach para percorrer todos os repositórios e retornar suas respectivas "stars earned" eu tenho esse valor mas no meu código abaixo eu só estou tendo esse valor total ao clicar pela segunda vez no botão que chama a função. O código está funcional mas vejo que a lógica não. agradeço alguma dica que puderem dar. const btnEl = document.getElementById("btnUser"); function run() { let stars = 0; userEl = document.getElementById("gituser").value; let api = `https://api.github.com/users/${userEl}/repos`; fetch(api) .then((data) => data.json()) .then((data) => { console.log(data); const repo = data.map(({ name }) => name); console.log(repo); console.log(repo.length); repo.forEach(function (item) { console.log(item); let repoName = `https://api.github.com/repos/${userEl}/`; fetch(repoName + item) .then((repores) => repores.json()) .then((repores) => { console.log(repores.stargazers_count) stars += repores.stargazers_count; }); }); console.log("Stars number is: ", stars); }); } btnEl.addEventListener("click", () => { run(); });
  13. Tenho um formulário onde preencho alguns dados e quero transferir esses dados para outro formulário após preenchimento por JS. Mas ele clona tudo direito mas não transfere os dados que eu insiro. Alguém poderia dar uma luz? <div id='hidden'> <div class='espaco'></div> <div id='lista' class='row'> <div id='clone' class="col-md-3"> <div class="card"> <img src="https://www.leirispumas.com/wp-content/uploads/2021/01/Capturar-4.jpg" alt="amostra" style="width:100%"> <div class="card-body"> <div class='nossaRef1'> <h6><strong>Ref forn: </strong></h6> <div> <div class='nossaRef1'> <h6><strong>Ref: </strong></h6> <div> <div class='copyLoc1'> <h6><strong>Localização: </strong></h6> </div> </div> <div> <input class='verMais' type="button" id="verMais" value="Ver mais"> </div> </div> <div class='espaco'></div> </div> </div> </div> </div> </div> </div> </div> const copialoc = document.getElementById('copyLoc'); const copiaRefForn = document.getElementById('copyRefForn'); const copiaRefInt = document.getElementsByClassName('copyRef'); /** * clique no botão + */ function create1() { duplicar('copyRefForn1', 'nossaRef1', 'copyLoc1'); } let i = 0; function duplicar(copyRefForn1, nossaRef1, copyLoc1) { const original = document.getElementById('clone'); const clone = original.cloneNode(true); clone.id = "clone" + ++i; clone.getElementsByClassName('copyRefForn1')[0].innertext; clone.getElementsByClassName('nossaRef1')[0].innertext; clone.getElementsByClassName('copyLoc1')[0].innertext; lista.appendChild(clone); } Obrigado desde já
  14. Boa tarde, Não sou assim grande coisa com Ajax e gostaria de alguma ajuda de como fazer o que pretendo que é: De X em X tempo a informação dentro das divs atualizam automaticamente em Ajax. Link de exemplo E a informação que iria aparecer seria de uma query como: SELECT * FROM tbl ORDER BY DESC LIMIT 5 Desde já obrigado antecipadamente!
  15. Boas, tenho o seguinte código abaixo que cria um filtro para uma foto. let canvas = document.getElementById('canvas'); let c = canvas.getContext('2d'); let filename = "profile-photo"; let btnDownload = document.getElementById('download'); let reader = new FileReader(); let target = new Image(); let target2 = new Image(); let image = document.getElementById('image_perfil'); let image2 = document.getElementById('image_logo') c.canvas.width = 1024; c.canvas.height = 1024; let download = function () { link = document.createElement('a'); link.download = filename + '.png'; link.href = document.getElementById('canvas').toDataURL() link.click(); } let destroyInterval = () => { for (var i = 1; i < 99999; i++) window.clearInterval(i); } let load = () => { c.clearRect(0, 0, c.canvas.width, c.canvas.height); draw(); } let draw = () => { // made reponsive twibbon c.canvas.width = target.width; c.canvas.height = target.height; c.drawImage(target, 0, 0, target.width, target.height); c.drawImage(target2, 0, 0, target.width, target.height); } let enableButton = () => { let } let init = () => { run = setInterval(function () { load(); }, 1000); } //IMAGEM SELECIONADA DA PASTA let setTwibbon = () => { target2.src = 'images/IXER.png'; } let imageReaderOnLoad = () => { reader.onload = (res) => { target.src = res.target.result.replace(/ +/g, ""); } } let enableBtnDownload = () => { btnDownload.removeAttribute('disabled'); } let generate = () => { if (image.files[0] === undefined) alert('Nenhuma imagem selecionada'); else { destroyInterval(); imageReaderOnLoad(); setTwibbon(); enableBtnDownload(); // reader.readAsDataURL(image.files[0]); reader.readAsDataURL(image.files[0]); init(); } } Só que só consigo o resultado que quero se na função setTwibbon é passado uma imagem dentro de uma pasta do projeto. Como fazer para que a imagem seja de forma upload? Clicar num input type file e essa imagem selecionada tomar o lugar do target2?
  16. Bom dia meus caros, alguém com algumas dicas sobre formas de envio de SMS via Browser? Tenho que usar uma API e enviar a partir dela? Alguma luz? obrigado,
  17. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ height: 100px; width: 100px; border-radius: 10px; margin: 10px; background-color: gray; } </style> </head> <body> <div id ="d1"></div> <div id ="d2"></div> <div id ="d3"></div> <div id ="d4"></div> <input type="color" id="cor"/> <script> var divs = document.getElementsByTagName('div'); var input_cor = document.getElementById('cor'); for(var i=0;i<divs.length;i++){ divs[i].addEventListener('click', (e)=>{ cor.addEventListener('change',function(){ e.target.style.background = input_cor.value; }) }); } </script> </body> </html> Boa tarde! Com este exemplo de código, estou a tentar arranjar forma de que cada vez que clico numa das "div" e sucessivamente altero a cor da "input_color", essa mesma "div" mude de cor. De facto tudo acontece como o esperado, mas quando clico em outras "divs", numa de cada vez, para lhes alterar a cor de fundo, acontece que todas as "divs" que foram clicadas até então, alterando a cor, elas ficam todas com a mesma cor e não era suposto. Se alguém me conseguisse ajudar, agradecia, e gostaria que de cada vez que o utilizador clicasse numa "div", o JavaScript esquecesse ou desabilitasse a "div" anterior clicada e alterasse apenas a cor da "div" clicada.
  18. Boa tarde, estava a fazer testes num projecto com full scroll apenas com css. Na versão horizontal, e como está full screen, é necessário usar a tecla esquerda ou direita do teclado para mover entre secções. Então queria criar uma seta numa div que ao ser clicada simulava que tinha sido pressionada a tecla esquerda ou direita. Mas não estou a conseguir. Abaixo o meu código. Um grande obrigado <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <title>PROJECTO</title> </head> <body> <div class="slider"> <section> <div id="seta" style="">Seta</div> <h1>Section One</h1> </section> <section> <h1>Section Two</h1> </section> <section> <h1>Section Three</h1> </section> <section> <h1>Section Four</h1> </section> <section> <h1>Section Five</h1> </section> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $( "#seta" ).click(function() { console.log("entrou"); var e = jQuery.Event("keydown"); e.which = 39; // tecla direita $("body").trigger(e); }); </script> * { box-sizing: border-box; margin: 0; padding: 0; } body { overflow-y: hidden; } .slider { font-family: sans-serif; scroll-snap-type: x mandatory; display: flex; -webkit-overflow-scrolling: touch; overflow-x: scroll; } section { border-right: 1px solid white; padding: 1rem; min-width: 100vw; height: 100vh; scroll-snap-align: start; text-align: center; position: relative; } #seta{ background: #000; width: 50px; height: 20px; color: #fff; } .one{ background: rgb(5, 54, 125); } .two{ background: rgb(43, 211, 148); } .three{ background: rgb(5, 54, 125); } .four{ background: rgb(43, 211, 148) }
  19. Boa noite, Estou a fazer um exercício onde tenho arrays dentro de um array com nomes de personagens de filmes. A ideia é através de loop e de startsWith imprimir todas as personagens começadas por 'M'. O código que tenho está de facto a imprimir apenas os nomes de personagens começados por 'M' no entanto dá código incorrecto. O código está a ser corrigido por um computador e poderá ser por isso. Alguém me consegue ajudar a perceber porquê? desde já agradeço. var filmCharacters = [ ['Vito', 'Michael', 'Sonny', 'Freddo'], ['Mia', 'Vincent', 'Jules', 'Butch'], ['Bella', 'Edward', 'Jacob', 'Carlisle'], ['James', 'M', 'Moneypenny', 'Felix'] ]; var filmCharactersM = []; for(var i = 0; i < filmCharacters.length; i++) { for(var j = 0; j < filmCharacters[i].length; j++) { if(filmCharacters[i][j].startsWith('M')) filmCharactersM.push(filmCharacters[i][j]); } } console.log(filmCharactersM.join(', ')); já tentei colocar no console.log apenas filmCharactersM e continua a dar código incorrecto.
  20. tenho um exercício para fazer com este enunciado: Using the methods you have learned, modify the xMen array already declared in the editor so that only members of the X-Men are present. Then add all of the mutants present in the xMen array to the freelancers array. Já escrevi este código: var xMen = ['Professor X', 'Cyclops', 'Beast', 'Iron-Man', 'Hobgoblin']; var freelancers = ['Legion', 'Magneto']; xMen.pop(); xMen.pop(); for(var i=0; i<freelancers.length; i++) { freelancers.push(...xMen); freelancers.length = 5; console.log(freelancers[i]); } O código que escrevi está de facto a imprimir o array freelancers + os primeiros 3 elementos do array xMen conforme pedido(acho que compreendi correctamente o enunciado) . No entanto aparece-me mensagens de erro a dizer: >>>>Code is incorrect. You should use the first expression of the for loop to declare a variable. >>>>Code is incorrect. The for loop should iterate until the value stored in i reaches the length of the array. Alguém me consegue ajudar? obrigada
  21. Boas pessoal, Tenho o seguinte Butão que ao clicar nele ele envia o ficheiro selecionado para o cliente. <a href="sendEmail.php?id=<?php echo $fatura['id']; ?>&doc=faturas&OPTION=F" class="btn btn-sm btn-primary"> <i class="fa fa-at"></i> E-mail</a> O que eu queria fazer era, quando eu clicar para enviar o botão ficar verde e a mostrar a mensagem "enviado" para sempre. Eu ja consegui fazer isso mas quando atualizo a pagina ele volta ao normal. Alguém tem uma ideia de como posso fazer isso de uma forma simples? Obrigado
  22. Boas devs! Alguém por ai sabe de alguma API com os códigos postais atualizados? Ou poderia dar umas luzes de como o fazer? Obrigado
  23. Olá caros! estou reproduzindo uma formula do excel para o html e faltam somente uns detalhes... A função retorna um valor que eu acho que deve ser o calculo em decimal de horas. No excel se eu formatar a celular em número e não em hora, aparece este mesmo valor. Como faço pra obter o resultado abaixo em horas, minutos e segundos. Este resultado menos duas 2 horas (-2h)? Grato pela atenção. <script> function calcularAut(){ var aut = 0; var G14 = document.querySelector('#cmar1').value; var E13 = document.querySelector('#volc1').value; var D10 = document.querySelector('#cilCheio').value; var I14 = document.querySelector('#lm1').value; var C19 = 2; // aqui deveria ser 2 horas (quero que subtraia 2 horas. aut = ((((G14*(E13/D10)/24)/(I14*60)))*0.9)-C19; document.querySelector('#autCil1').value = aut; } </script>
  24. Olá! Caros estou com este tipo de situação. Já procurei e achei alguns códigos, mas não sei se é a questão da biblioteca, eles não funcionam. Eu preciso de uma função javascript que pegue um arquivo txt de uma foto ( imagem transformada num texto) e possa exibir no html como a imagem era originalmente. alguém sabe como fazer isso? a Algo como isso: <script> var base64String = "iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAIAAADY27xgAAAAA3NCSVQICAjb4U\/gAAAAlnpUWHRS\r\nYXcgcHJvZmlsZSB0eXBlIEFQUDEAAHicVY5BDsMgDATvvIInjG0w8BxUkSpS1Vb5\/6EHSNvsZaVZ\r\na9fhPp7j2G\/xfby2\/TFCjDFGkRpSS007UJlSMEFQoCzk073VQgJk8cFFGW9uLsV8XhhAmz2JhUxN\r\nDaTPfHV9PXf+N\/L51yldmf46s1qzuth1S2w+AUD4AOdVNXTvLP3VAAAKV0lEQVRYhc2YWahm2VWA\r\n17DXPuc\/\/3jnGq7VldKkaDskbQcR7EZ9yaO0gvioKIREfM9DIBjzEESSgPok+CSNb4IGnCJigmij\r\nJtIopCSp7hru\/W\/VrTv\/wxn2sHYezn+7u27dquoqW+N6O4e99\/rYa9hrLUwpwYcqIThEy\/zMG+nD\r\n5Whl6+5flKX70aMYY5dXXh5vfXU6LX\/EKAAwGFztFJcf3P+Dsmz+j1E0gZ75tbzyOuLb9++94cMH\r\nPcU8j2atyvJmXb3T1O+ozlJyCQCBkTIrl\/POtaK4XhRrYl8N\/l93713f\/LHXPsix+EwRVFVvHx\/9\r\nQ13dQIxElsggEiICQAJISZNGVa8aRC5GXQe9ESKubXxxMBh+aChNs7P34M+8u82mMMYyGSQiQkRE\r\nQEBICVJKKSVVVY0a\/XxeF0URwhzptReu\/spTVXwgA+3v\/eXk5O9E+nln2bBhZmImIiQiRABsl72P\r\nJEaVlAwSGilc888nx68ORxefrOUpt5JSHG99LYTtLOuLCLNBtoQiFg0jMSNiSnS6WBcSY4zROe99\r\nJFLvmv393Y9e\/3xRXH9OlJTC1p3fRZwlWG+aNSJjhMSgMZjAqKIq5rkbjSYIKUFrLQQAVY0xeOfL\r\nyokB1zQnkzno0Wj5t9bWX3kelO07v9M4bNyVXq8ZjaY2M2KEjaSUVKNqVNW6ksPDUd5xo9EhJEYi\r\npoX5NMbprBJB1zR1Xc9mFdNkMPr86uq1Z0PZvf8nDx7Mi4KXlw9FciOZiCWiGEIIIcYFSkqKGMuy\r\nN5str6+PEZmIiNkYw2yaJooB5xrv\/cHBJM9hNg2XNr\/c7+ePajw\/xc1m\/zEeV0tLk6XRoTEdI7m1\r\nGSJ655xrvG+8b5xrXFM3dVNVnvCw1709Hl\/yvnRN451zTdPUTUoqVsRaESsiIllRxLt3vnGu0nMj\r\nKNz8wXfX1+7nWcYmFxFrBRGcc65xTeOa2jnvY4zMYBhUFSAhYtG5tbe3sTQax2iNMQlCluWqKmIR\r\nUcQagyqFlbf29j65tnbWhc9B2bp7Y9C\/KTZnIyIiNtMIx8eTunaqIaWYUkwak4aTqROxw+FKAtQ4\r\nS7rj3bCqVUyjKcUIWZaFEHhxkBgDGm1RzHfv\/+Pa2sfezQLno6jCbPrN4RCZRUQS4MlJjaidjuQ5\r\nheC998GD90rES0tZ464ORp8ZDDKA5P3R9OSf7m7R0vB2SilEAtAYIgAQCRsjgjFGE41qPZt+p9f\/\r\n6Sf5ysnJrTy\/zZwZw5Opcy4uLRf9fk4E+p6k1tlTIitv7977w8PDEwAUWV5eff2lj38GeehcRYgh\r\nhBhDDDGEgEhsDDMzGzFyfPztM6rPolTlv4h0NOHhYdXv2cGggPZh0TaVLpL7adxpSmDMzb3d35\/P\r\nF9WJSHHlhS9FHVmLMYQYQowhhACQmE9RROtqJ8bpkwwU\/PdixKpu1taHxhhC1KSaFgiQkmodo0sp\r\npAREF7P8JzvFi0Vx1drs\/ecMh78Qwt+EyAkAEJ2L1mZtnBMTEkGiqrrV633ifJQYp1V1pFqsrnUR\r\nkZiQMIUEKYUQy3lVN+Vw+HqWCaLNO9fyfEjnZYOmbuazbxixCBEAELGuY1HkANC+XCmJCDT13cei\r\nNPXhfF5duLCMSEzMzDGm2bQqy9K7OoaqU7y4svr04mMyvQHQxGgQQovivSICABASIaoaw8k148ca\r\naP9ge2mpj0jMhEiu0aiOSDNLkEg1doqPPZUDAOrqvxEFUgoxAkDjQqdTtDZGQkQCSAAc9SFfee9+\r\n5\/PaN3\/PnDNzCBBC6hQ2swYBW1cNoevcpadyxAje3QBgAICUosa6CllmICVIAADeZyINAKXkz0fZ\r\n3\/s20yGRaZpAhHlHoK3N2oIEcTbfzPO9p6JU1QRgFwABlAjnM1d0Tz0aAVGPjpYHg4OUEOGhZmmB\r\nMptVwX8LkOvaGyFmTNr6PiIiUZrNNgf9O82pdWOM\/jEFdDm\/gehDMI27trt7zMydXBAREBHBe4Po\r\nAVJKivTQo7hAOT76T6J9Ni8TRYQ2dWhKiRa1K6saES3nb7XrDw9Ptu9+xfmzhT4AeB\/Z\/PbGxS+t\r\nrn58dbXT7+e4EELU8Xh1dXVXI6SkIhtnUWKEqvp3Ni9d3vx1IrNIqKpJlZiIyflBUcyIJMbJdPId\r\nAKiqLYDxztZXnYtnUC5v\/uyVF17p97Pp9K+ILLZ1J5G1aXt7bWN9N8Y2cfssu3IWpaxKSDfXN36T\r\nCMRuxuj1tFZuo8m5blFUzIa52N97Q7XxbguxgLSzM\/6ac+dY6sH9N5I2bISZjWERHI8vjEYT5iZG\r\n1aSqrlNcewRl\/qA\/+Pk8HwBAr\/dKjE1bnMYYISVm1mSzDNiIMYJobr\/zFe+\/D8CAFnTn3vjrzj0U\r\nC\/t7fz6bvWlMLoZEyPvueGfzwoVplpUhtNVmYF6x9hEDAUyXVz7dfvf6P9WujbF9OgKzISLTiohI\r\nNpsdMm0t9qJVHT+4\/0a7fTI9vvXOHx8fvYm4omk4Ly8dHL4QY\/cjH9ln9sG3x8YY617\/Z85cpAGA\r\n5eWPiiycmbnb7X6qaf6LgzAzczBCIoiUiSBAQsCiKELw1sJphBUAN7bu\/inAtmvuhbCBuInIbNJo\r\nNO905mIzABu8C63EEKMfjn7uHJR3OVpZWf3Fu3f+zYQ8MDN777DT8SF0xS7Cezjq3ts57g8EUhtg\r\nSJipfn86K4tOr9OpjfFsjIiwsWwss4QQvPcLFF\/2+q8aMzgH5ewvWR4MPz2bfouo7bsws9PJdKXb\r\nbSC1aYbXN0aTk3JpuYAESISIRJZN5hqXZRkxMxsjC4vGGL133rdll1NNq2u\/fI7eR38BwOraL81n\r\n3\/W+XqjJoKoSEdksI6IYQ\/s4eJfaTEpISCiSidgYtaUxRpg5xuhd450L3gXvnDta3\/gsUfao0sc2\r\nHyEc3739BWtHNsusSNCBam9ttQTkNr406cH+NM9Np2NPnQaJKEQNQfv9DgCG9iq889555+v6uNt7\r\nbX3jV8\/V+KSWrK5ujbd\/L8uWxWZZxvsHVy9dPDDCxggitpXU\/sE0y0y3OKUhIkRNUJY1JEWM3rc8\r\nzjWTLHvx4uXPPU7dU3rmurq9M\/66kdxKLiL7B9c2N7eRLDMzMRER0cmkTklHo256X9OcNDWNK8tK\r\nNUCKzs2K7qc2LvzaE3Q9fagRwtHO9h+pHojtEXZOJlcuXtxClHcnCUjkmjCbNd1uZi3FGBe5WlNK\r\n6hpflvMse+ni5d8gAjztN1q9iO\/1Hx90vnK4\/9fHx3\/Lhon6k8mPr66MRQIgIxK0AxZIs5lrGm8t\r\nZ5YSaIxBY9RFRRxSikSrRF0AE7WXZZ9YW3\/ZmPfi5hmmTiGcHB1+cz57E7GZzq6LcL+3S6yLtJsQ\r\nIKlqVTVlOY\/q8vyqSB\/SMYAHYIACcMmYzSz\/iX7\/SlHk+FBH9owDMABQbcr598r5W2U5nk6LBFFk\r\nLmaG2CAmoq7IRtF9qdv7pMiFECDGoKqISMyG6Qmj5WdGeRhrEkLtHITAImAtG9NFlOc77X+E8uHK\r\n\/8oI+fnk\/xHKDwFCDVuRTRk4QwAAAABJRU5ErkJggg=="; function adicionarImg(imagem) { document.querySelector("#image").src = "data:image/gif;base64,"+ imagem; } adicionarImg(base64String); } adicionarImg(base64String); </script> <img id="image" /> Obrigado pela atenção.
  25. Boas, tenho um exercício para fazer que diz que dependendo da quantidade de dias que alugarmos um carro o desconto varia. Entre 3 e 6 dias ha um disconto de 10€ 7 ou mais dias dá 40€ de desconto. O preço base por dia é 35€. E visto que nunca trabalhei com javascript está meio complicado. Eles deram parte do código e eu fiz o resto: Não sei que variáveis preciso nem algo do genero, como devo usar a função, etc... Sei apenas a lógica do IF, alguém pode me ajuda a corrigir? const getRentalCost = (days) => { let rentalcost = 0; if (days>=3 && days<7){ rentalcost=days*35-10; } else { if (days>=7){ rentalcost=days*35-40;} } else { rentalcost=days*35; } return rentalcost; }; // Test your code by changing the number of days below! getRentalCost(1);
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.