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. Boa Noite, Estou nos primeiros passo de programação e resolvendo alguns exercícios on-line estou com problemas com operadores de lógica no seguinte exercício: Using the logical operators you just learned, write an expression that represents the following statement: "I would like an ice cream with strawberry and either chocolate or stracciatella, or an ice cream of any flavour but caramel." Declare a variable named iceCream and assign it the logical expression. var chocolate; var strawberry; var stracciatella; var caramel; o exercício já declara as variáveis acima, então procedo com o desenvolvimento: var chocolate = true; var strawberry = true; var stracciatella = true; var caramel = false; var iceCream = (strawberry || chocolate)(strawberry || stracciatella)!caramel; porém me retorna o erro: >>>>Code is incorrect syntax error Unexpected token '!' Além da sintaxe, também estou errando na lógica ?
  2. Boa Tarde, Estou começando nos estudos a programação e resolvendo alguns exercícios on-line e não consigo perceber o erro no seguinte exercício proposto... Let's create some more variables. How about your year of birth and how many hours you've been dealing with this code challenge up to now? Remember to use meaningful names, and respect the convention. Go! var YearOfBirth = 1983; var PriceOfBanana = 21; var QuestionsForFinish = 54; var NumberOfHours = 77; console.log(YearOfBirth); console.log(PriceOfBanana); console.log(QuestionsForFinish); console.log(NumberOfHours); porém me retorna o seguinte erro... >>>>Code is incorrect Make sure you are using meaningful names to your variables Imagino que seja algo simples, mas não percebo. Onde estou errando ?
  3. estou desenvolvível um fichário em Html e gostaria que alguém me explica-se como eu faço para criar um script que salve o Html em txt na maquina e depois eu possa abrir este arquivo com uma função de editar
  4. Boa Noite Costumo jogar paciencia neste site Paciência, que supostamente utiliza Javascript Hoje em conversa com colegas, eles disseram-me que dava para saber quais as cartas de traz, sem precisar de mexer nas da frente. Que apesar da informação de quais são, só sair do servidor depois da minha jogada. A minha questão, é se realmente é verdade que dê para fazer isso. E se é assim tão fácil?
  5. Boas.. preciso de ajuda.. estou a fazer uma formação e... O problema é o seguinte: Iterate over the array provided in powerRangers and print to the console a string that shows the elements' index and the content of the element. e.g.: '0: Red' Eu escrevi: var powerRangers = ['Red', 'Black', 'Yellow', 'Pink', 'Blue']; for (i = 0; i < powerRangers.length ; i++) { console.log(i + ':' + powerRangers[i]); } Output >>>>Code is incorrect unknown error 0:Red 1:Black 2:Yellow 3:Pink 4:Blue Alguem consegue identificar onde está o erro para a consola não deixar passar para o exercicio seguinte?
  6. Boa noite, Estou a fazer um exame de admissão a um curso de programação e estou parado nesta pergunta: It's time to print all the names starting with 'M', again. Only this time use a much cooler nested for loop. Just a tip: you already know some string methods which will help you with this task. One we've never talked about is startsWith(). Can you guess what it does? var filmCharacters = [ ['Vito', 'Michael', 'Sonny', 'Freddo'], ['Mia', 'Vincent', 'Jules', 'Butch'], ['Bella', 'Edward', 'Jacob', 'Carlisle'], ['James', 'M', 'Moneypenny', 'Felix'] ]; // a partir daqui o código já foi feito por mim for (var i= 0; i < filmCharacters.length; i++){ for (var j= 0; j < filmCharacters[i].length ; j++){ if (filmCharacters[i][j].starsWith('M')) console.log(filmCharacters[i][j]); } } Output >>>>Code is incorrect unknown error filmCharacters[i][j].starsWith is not a function
  7. Olá tenho um exercício para resolver e não consigo perceber o que está a faltar. O output parece estár correto mas não me deixa avançar / errado. Create a function named extractPassword which takes an array of characters (which includes some trash characters) and returns a string with only valid characters (a - z, A - Z, 0 - 9). Here's an example: extractPassword(['a', '-', '~', '1', 'a', '/']); // should return the string 'a1a' extractPassword(['~', 'A', '7', '/', 'C']); // should return the string 'A7C' __________________________ O meu código: var password = (["a","-","~","1","a","/","~","A","7","/","C"]); var newPass =[]; var arrayLength = password.length; function extractPassword(password){ for (var i=0;i<arrayLength;i++){ var j = password[i]; if (("a"<= j && j<="z") || ("A"<=j && j<="Z") || ("0"<=j && j<="9")){ newPass.push(j); } } return newPass; } extractPassword(password); console.log(newPass.join("")); OUTPUT: >>>>Code is incorrect Your function is not returning the correct value a1aA7C _________________________ O que está a falhar? O output parece estar correto. Alguém consegue ajudar? Obrigado!
  8. Boas, estou completamente bloqueado neste exercício e não consigo mesmo pensar em nada, espero que me consigam ajudar <Hacking Task #3> One of your accomplices was able to physically steal a hard drive from one of fSociety's targets, however the victim had safeguards in place and was able to corrupt the data on the disk. Now back in the arcade you have been tasked with recovering the jumbled data, which is central to fSociety's next big play. You can leave the data on the disk as it is , but you should be able to copy it to a new hard drive, and be able to print it. Instructions Copy the uncorrupted data in the array stored in targetDisk to the empty array newDisk (corrupted data looks like this: ø). Then print the contents of the disk to the terminal as a string. To complete this task remember the arrays' methods we have learned so far. e depois tenho o seguinte código var targetDisk = [ 'E', 'ø', '-', 'C', 'ø', 'o', 'r', 'ø', 'ø', 'p', '\'', 'ø', 's', ' ', 'E', 'v', 'ø', 'i', 'ø', 'ø', 'l']; var newDisk = []; var corruptionSymbol = 'ø'; alguem consegue dar uma ajuda ?
  9. 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!'); } });
  10. 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.
  11. 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; } }
  12. 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>
  13. 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?
  14. 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
  15. Velhinho

    Functions

    Boa tarde, tenho este situação para resolver mas estou a ter dificuldade se alguém, ,me pudesse ajudar agradecia.
  16. 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>
  17. 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).
  18. 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">
  19. 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
  20. 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(); });
  21. 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á
  22. 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!
  23. 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?
  24. 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,
  25. <!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.
×
×
  • 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.