KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use querySelector method in Playwright Internal
Best JavaScript code snippet using playwright-internal
main.js
Source:main.js 
...6let descricao = nome_e_descricao[1].replace('descricao=', '')7let sala = nome_e_descricao[2].replace('sala=', '')8console.log(nome_e_descricao);9//coloca na tela seus nomes10document.querySelector('.barrabranca').innerHTML = nome + ' - ' + descricao11///12let table = document.querySelector(".table")13let cor = ''14///////////////////////////////////////////////////////////////////////15// diz pro server a sala16socket.emit('joinsala', {nome: nome, descricao: descricao, sala: sala})17//18//inicio - server te poe na sala19socket.on('start', data => {20 //21 if (data.cor == 'brancas') {22 //23 cor = 'brancas'24 document.querySelector('.barrapreta').innerHTML = 'aguardando oponente...'25 //26 //aguardar oponente27 socket.on('oponente', data => {28 document.querySelector('.barrapreta').innerHTML = data.nome + ' - ' + (data.descricao == null ? 'nada' : data.descricao)29 })30 //31 //32 } else if (data.cor == 'pretas'){33 //34 cor = 'pretas'35 document.querySelector('.barrapreta').innerHTML = 'aguardando oponente...'36 //37 //pegar as informacoes das brancas38 socket.on('brancas', data => {39 document.querySelector('.barrapreta').innerHTML = data.nome + ' - ' + (data.descricao == null ? 'nada' : data.descricao)40 })41 //42 /////////////////////////////////////////43 //arrumar o tabuleiro das negras44 document.querySelector('.barrapreta').style.backgroundColor = 'white'45 document.querySelector('.barrabranca').style.backgroundColor = 'gray'46 document.querySelector('.barrapreta').innerHTML = data.nome + ' - ' + (data.descricao == null ? 'nada' : data.descricao)47 let casas = 'a1 b1 c1 d1 e1 f1 g1 h1 a2 b2 c2 d2 e2 f2 g2 h2 a3 b3 c3 d3 e3 f3 g3 h3 a4 b4 c4 d4 e4 f4 g4 h4 a5 b5 c5 d5 e5 f5 g5 h5 a6 b6 c6 d6 e6 f6 g6 h6 a7 b7 c7 d7 e7 f7 g7 h7 a8 b8 c8 d8 e8 f8 g8 h8'48 let casasse = casas.split(' ')49 let nomes = 'rnbqkbnrpppppppp PPPPPPPPRNBQKBNR'50 for (var i = 0; i < 64; i++) {51 let a = `<div id='${casasse[i]}' class="${nomes[i] === ' ' ? 'sempeca' : `${i > 47 ? "pecaminha" : "peca"}`}">${nomes[i]}</div>`52 table.childNodes[i].innerHTML = a53 }54 ////////////////////////////////////////55 //56 } else {57 cor = 'expect'58 document.querySelector('.barrapreta').innerHTML = data.player2.nome + ' - ' + (data.player2.descricao== null ? 'nada' : data.player2.descricao)59 document.querySelector('.barrabranca').innerHTML = data.player1.nome + ' - ' + (data.player1.descricao== null ? 'nada' : data.player1.descricao)60 let casas = 'a8 b8 c8 d8 e8 f8 g8 h8 a7 b7 c7 d7 e7 f7 g7 h7 a6 b6 c6 d6 e6 f6 g6 h6 a5 b5 c5 d5 e5 f5 g5 h5 a4 b4 c4 d4 e4 f4 g4 h4 a3 b3 c3 d3 e3 f3 g3 h3 a2 b2 c2 d2 e2 f2 g2 h2 a1 b1 c1 d1 e1 f1 g1 h1'61 let casasse = casas.split(' ')62 let nomes = 'rnbqkbnrpppppppp PPPPPPPPRNBQKBNR'63 for (var i = 0; i < 64; i++) {64 let a = `<div id='${casasse[i]}' class="${nomes[i] === ' ' ? 'sempeca' : `${i > 47 ? "peca" : "peca"}`}">${nomes[i]}</div>`65 table.childNodes[i].innerHTML = a66 }67 }68 //69 //70})71//72/////////////////////////////////////////////////////////////////////73//escuta os resets74socket.on('reset', data => {75 if (cor != 'expect') {76 //77 document.querySelector('.barrapreta').innerHTML = 'aguardando oponente...'78 if (cor =='brancas') {79 let casas = 'a8 b8 c8 d8 e8 f8 g8 h8 a7 b7 c7 d7 e7 f7 g7 h7 a6 b6 c6 d6 e6 f6 g6 h6 a5 b5 c5 d5 e5 f5 g5 h5 a4 b4 c4 d4 e4 f4 g4 h4 a3 b3 c3 d3 e3 f3 g3 h3 a2 b2 c2 d2 e2 f2 g2 h2 a1 b1 c1 d1 e1 f1 g1 h1'80 let casasse = casas.split(' ')81 let nomes = 'rnbqkbnrpppppppp PPPPPPPPRNBQKBNR'82 for (var i = 0; i < 64; i++) {83 let a = `<div id='${casasse[i]}' class="${nomes[i] === ' ' ? 'sempeca' : `${i > 47 ? "pecaminha" : "peca"}`}">${nomes[i]}</div>`84 table.childNodes[i].innerHTML = a85 }86 } else {87 document.querySelector('.barrapreta').style.backgroundColor = 'white'88 document.querySelector('.barrabranca').style.backgroundColor = 'gray'89 document.querySelector('.barrapreta').innerHTML = 'aguardando oponente...'90 let casas = 'a1 b1 c1 d1 e1 f1 g1 h1 a2 b2 c2 d2 e2 f2 g2 h2 a3 b3 c3 d3 e3 f3 g3 h3 a4 b4 c4 d4 e4 f4 g4 h4 a5 b5 c5 d5 e5 f5 g5 h5 a6 b6 c6 d6 e6 f6 g6 h6 a7 b7 c7 d7 e7 f7 g7 h7 a8 b8 c8 d8 e8 f8 g8 h8'91 let casasse = casas.split(' ')92 let nomes = 'rnbqkbnrpppppppp PPPPPPPPRNBQKBNR'93 for (var i = 0; i < 64; i++) {94 let a = `<div id='${casasse[i]}' class="${nomes[i] === ' ' ? 'sempeca' : `${i > 47 ? "pecaminha" : "peca"}`}">${nomes[i]}</div>`95 table.childNodes[i].innerHTML = a96 }97 }98 //99 } else {100 console.log('nada por aqui, a sala vai ser resetada.');101 }102})103/////////104socket.on('resetparaexpect', data => {105 if (cor == 'expect') {106 document.querySelector('.barrapreta').innerHTML = (data.player2.nome == null ? 'ninguém' : data.player2.nome) + ' - ' + (data.player2.descricao = null ? 'nada':data.player2.descricao)107 document.querySelector('.barrabranca').innerHTML = (data.player1.nome == null ? 'ninguém' : data.player1.nome) + ' - ' + (data.player1.descricao = null ? 'nada':data.player1.descricao)108 let casas = 'a8 b8 c8 d8 e8 f8 g8 h8 a7 b7 c7 d7 e7 f7 g7 h7 a6 b6 c6 d6 e6 f6 g6 h6 a5 b5 c5 d5 e5 f5 g5 h5 a4 b4 c4 d4 e4 f4 g4 h4 a3 b3 c3 d3 e3 f3 g3 h3 a2 b2 c2 d2 e2 f2 g2 h2 a1 b1 c1 d1 e1 f1 g1 h1'109 let casasse = casas.split(' ')110 let nomes = 'rnbqkbnrpppppppp PPPPPPPPRNBQKBNR'111 for (var i = 0; i < 64; i++) {112 let a = `<div id='${casasse[i]}' class="${nomes[i] === ' ' ? 'sempeca' : `${i > 47 ? "peca" : "peca"}`}">${nomes[i]}</div>`113 table.childNodes[i].innerHTML = a114 }115 }116})117////////////////////////////////////////////////////118//escuta o movimento da sala/////////////////////119socket.on('movimento', data => {120 console.log('movimento');121 if (data) {122 mudar_tabuleiro(data.cor, data.c1, data.c2)123 }124})125socket.on('passagem', data => {126 console.log('passagem');127 if (data) {128 mudar_tabuleiropassagem(data.cor, data.c1, data.c2, data.c3)129 }130})131socket.on('roque', data => {132 console.log('roque');133 if (data) {134 mudar_tabuleiroroque(data.cor, data.qual)135 }136})137socket.on('promocao', data => {138 console.log('promocao');139 if (data) {140 mudar_tabuleiropromocao(data.cor, data.c1, data.c2)141 }142})143//////////////////////////////////////////////144////////////////////////////////////////////////145//////////////////////////////146/////funcoes que alteram o front end/////////////////147function mudar_tabuleiroroque(corr, qual) {148 if (cor == 'expect') {149 if (corr == 'brancas' && qual == 'curto') {150 document.querySelector(`#g1`).innerHTML = document.querySelector(`#e1`).innerHTML151 document.querySelector(`#g1`).className = 'peca'152 document.querySelector('#f1').innerHTML = document.querySelector(`#h1`).innerHTML153 document.querySelector(`#f1`).className = 'peca'154 /////////limpar155 document.querySelector(`#e1`).innerHTML = ' '156 document.querySelector(`#e1`).className = 'sempeca'157 document.querySelector(`#h1`).innerHTML = ' '158 document.querySelector(`#h1`).className = 'sempeca'159 ////////////160 } else if (corr == 'brancas' && qual == 'grande') {161 document.querySelector(`#c1`).innerHTML = document.querySelector(`#e1`).innerHTML162 document.querySelector(`#c1`).className = 'peca'163 document.querySelector('#d1').innerHTML = document.querySelector(`#a1`).innerHTML164 document.querySelector(`#d1`).className = 'peca'165 /////////limpar166 document.querySelector(`#e1`).innerHTML = ' '167 document.querySelector(`#e1`).className = 'sempeca'168 document.querySelector(`#a1`).innerHTML = ' '169 document.querySelector(`#a1`).className = 'sempeca'170 document.querySelector(`#b1`).innerHTML = ' '171 document.querySelector(`#b1`).className = 'sempeca'172 ////////////173 } else if (corr == 'pretas' && qual == 'curto') {174 document.querySelector(`#g8`).innerHTML = document.querySelector(`#e8`).innerHTML175 document.querySelector(`#g8`).className = 'peca'176 document.querySelector('#f8').innerHTML = document.querySelector(`#h8`).innerHTML177 document.querySelector(`#f8`).className = 'peca'178 /////////limpar179 document.querySelector(`#e8`).innerHTML = ' '180 document.querySelector(`#e8`).className = 'sempeca'181 document.querySelector(`#h8`).innerHTML = ' '182 document.querySelector(`#h8`).className = 'sempeca'183 ////////////184 } else if (corr == 'pretas' && qual == 'grande') {185 document.querySelector(`#c8`).innerHTML = document.querySelector(`#e8`).innerHTML186 document.querySelector(`#c8`).className = 'peca'187 document.querySelector('#d8').innerHTML = document.querySelector(`#a8`).innerHTML188 document.querySelector(`#d8`).className = 'peca'189 /////////limpar190 document.querySelector(`#e8`).innerHTML = ' '191 document.querySelector(`#e8`).className = 'sempeca'192 document.querySelector(`#a8`).innerHTML = ' '193 document.querySelector(`#a8`).className = 'sempeca'194 document.querySelector(`#b8`).innerHTML = ' '195 document.querySelector(`#b8`).className = 'sempeca'196 ////////////197 }198 return199 }200 if (corr == cor) {201 if (corr == 'brancas' && qual == 'curto') {202 document.querySelector(`#g1`).innerHTML = document.querySelector(`#e1`).innerHTML203 document.querySelector(`#g1`).className = 'pecaminha'204 document.querySelector('#f1').innerHTML = document.querySelector(`#h1`).innerHTML205 document.querySelector(`#f1`).className = 'pecaminha'206 /////////limpar207 document.querySelector(`#e1`).innerHTML = ' '208 document.querySelector(`#e1`).className = 'sempeca'209 document.querySelector(`#h1`).innerHTML = ' '210 document.querySelector(`#h1`).className = 'sempeca'211 ////////////212 } else if (corr == 'brancas' && qual == 'grande') {213 document.querySelector(`#c1`).innerHTML = document.querySelector(`#e1`).innerHTML214 document.querySelector(`#c1`).className = 'pecaminha'215 document.querySelector('#d1').innerHTML = document.querySelector(`#a1`).innerHTML216 document.querySelector(`#d1`).className = 'pecaminha'217 /////////limpar218 document.querySelector(`#e1`).innerHTML = ' '219 document.querySelector(`#e1`).className = 'sempeca'220 document.querySelector(`#a1`).innerHTML = ' '221 document.querySelector(`#a1`).className = 'sempeca'222 document.querySelector(`#b1`).innerHTML = ' '223 document.querySelector(`#b1`).className = 'sempeca'224 ////////////225 } else if (corr == 'pretas' && qual == 'curto') {226 document.querySelector(`#g8`).innerHTML = document.querySelector(`#e8`).innerHTML227 document.querySelector(`#g8`).className = 'peca'228 document.querySelector('#f8').innerHTML = document.querySelector(`#h8`).innerHTML229 document.querySelector(`#f8`).className = 'peca'230 /////////limpar231 document.querySelector(`#e8`).innerHTML = ' '232 document.querySelector(`#e8`).className = 'sempeca'233 document.querySelector(`#h8`).innerHTML = ' '234 document.querySelector(`#h8`).className = 'sempeca'235 ////////////236 } else if (corr == 'pretas' && qual == 'grande') {237 document.querySelector(`#c8`).innerHTML = document.querySelector(`#e8`).innerHTML238 document.querySelector(`#c8`).className = 'peca'239 document.querySelector('#d8').innerHTML = document.querySelector(`#a8`).innerHTML240 document.querySelector(`#d8`).className = 'peca'241 /////////limpar242 document.querySelector(`#e8`).innerHTML = ' '243 document.querySelector(`#e8`).className = 'sempeca'244 document.querySelector(`#a8`).innerHTML = ' '245 document.querySelector(`#a8`).className = 'sempeca'246 document.querySelector(`#b8`).innerHTML = ' '247 document.querySelector(`#b8`).className = 'sempeca'248 ////////////249 }250 } else {251 ///////////////252 if (corr == 'brancas' && qual == 'curto') {253 document.querySelector(`#g1`).innerHTML = document.querySelector(`#e1`).innerHTML254 document.querySelector(`#g1`).className = 'peca'255 document.querySelector('#f1').innerHTML = document.querySelector(`#h1`).innerHTML256 document.querySelector(`#f1`).className = 'peca'257 /////////limpar258 document.querySelector(`#e1`).innerHTML = ' '259 document.querySelector(`#e1`).className = 'sempeca'260 document.querySelector(`#h1`).innerHTML = ' '261 document.querySelector(`#h1`).className = 'sempeca'262 ////////////263 } else if (corr == 'brancas' && qual == 'grande') {264 document.querySelector(`#c1`).innerHTML = document.querySelector(`#e1`).innerHTML265 document.querySelector(`#c1`).className = 'peca'266 document.querySelector('#d1').innerHTML = document.querySelector(`#a1`).innerHTML267 document.querySelector(`#d1`).className = 'peca'268 /////////limpar269 document.querySelector(`#e1`).innerHTML = ' '270 document.querySelector(`#e1`).className = 'sempeca'271 document.querySelector(`#a1`).innerHTML = ' '272 document.querySelector(`#a1`).className = 'sempeca'273 document.querySelector(`#b1`).innerHTML = ' '274 document.querySelector(`#b1`).className = 'sempeca'275 ////////////276 } else if (corr == 'pretas' && qual == 'curto') {277 document.querySelector(`#g8`).innerHTML = document.querySelector(`#e8`).innerHTML278 document.querySelector(`#g8`).className = 'pecaminha'279 document.querySelector('#f8').innerHTML = document.querySelector(`#h8`).innerHTML280 document.querySelector(`#f8`).className = 'pecaminha'281 /////////limpar282 document.querySelector(`#e8`).innerHTML = ' '283 document.querySelector(`#e8`).className = 'sempeca'284 document.querySelector(`#h8`).innerHTML = ' '285 document.querySelector(`#h8`).className = 'sempeca'286 ////////////287 } else if (corr == 'pretas' && qual == 'grande') {288 document.querySelector(`#c8`).innerHTML = document.querySelector(`#e8`).innerHTML289 document.querySelector(`#c8`).className = 'pecaminha'290 document.querySelector('#d8').innerHTML = document.querySelector(`#a8`).innerHTML291 document.querySelector(`#d8`).className = 'pecaminha'292 /////////limpar293 document.querySelector(`#e8`).innerHTML = ' '294 document.querySelector(`#e8`).className = 'sempeca'295 document.querySelector(`#a8`).innerHTML = ' '296 document.querySelector(`#a8`).className = 'sempeca'297 document.querySelector(`#b8`).innerHTML = ' '298 document.querySelector(`#b8`).className = 'sempeca'299 ////////////300 }301 }302}303function mudar_tabuleiro(corr, c1, c2) {304 if (cor == 'expect') {305 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML306 document.querySelector(`#${c1}`).innerHTML = ' '307 document.querySelector(`#${c2}`).className = 'peca'308 document.querySelector(`#${c1}`).className = 'sempeca'309 return310 }311 if (cor == corr) {312 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML313 document.querySelector(`#${c1}`).innerHTML = ' '314 document.querySelector(`#${c2}`).className = 'pecaminha'315 document.querySelector(`#${c1}`).className = 'sempeca'316 return317 }318 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML319 document.querySelector(`#${c1}`).innerHTML = ' '320 document.querySelector(`#${c2}`).className = 'peca'321 document.querySelector(`#${c1}`).className = 'sempeca'322}323function mudar_tabuleiropassagem(corr, c1, c2, c3) {324 if (cor ==' expect') {325 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML326 document.querySelector(`#${c1}`).innerHTML = ' '327 document.querySelector(`#${c2}`).className = 'peca'328 document.querySelector(`#${c1}`).className = 'sempeca'329 document.querySelector(`#${c3}`).innerHTML = ' '330 document.querySelector(`#${c3}`).className = 'sempeca'331 return332 }333 if (cor == corr) {334 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML335 document.querySelector(`#${c1}`).innerHTML = ' '336 document.querySelector(`#${c2}`).className = 'pecaminha'337 document.querySelector(`#${c1}`).className = 'sempeca'338 document.querySelector(`#${c3}`).innerHTML = ' '339 document.querySelector(`#${c3}`).className = 'sempeca'340 return341 }342 document.querySelector(`#${c2}`).innerHTML = document.querySelector(`#${c1}`).innerHTML343 document.querySelector(`#${c1}`).innerHTML = ' '344 document.querySelector(`#${c2}`).className = 'peca'345 document.querySelector(`#${c1}`).className = 'sempeca'346 document.querySelector(`#${c3}`).innerHTML = ' '347 document.querySelector(`#${c3}`).className = 'sempeca'348}349function mudar_tabuleiropromocao(corr, c1, c2) {350 if (cor == 'expect') {351 document.querySelector(`#${c2}`).innerHTML = 'Q'352 document.querySelector(`#${c1}`).innerHTML = ' '353 document.querySelector(`#${c2}`).className = 'peca'354 document.querySelector(`#${c1}`).className = 'sempeca'355 return356 }357 if (cor == corr) {358 document.querySelector(`#${c2}`).innerHTML = 'Q'359 document.querySelector(`#${c1}`).innerHTML = ' '360 document.querySelector(`#${c2}`).className = 'pecaminha'361 document.querySelector(`#${c1}`).className = 'sempeca'362 return363 }364 document.querySelector(`#${c2}`).innerHTML = 'q'365 document.querySelector(`#${c1}`).innerHTML = ' '366 document.querySelector(`#${c2}`).className = 'peca'367 document.querySelector(`#${c1}`).className = 'sempeca'368}369////////////////////////////////////////////370//////////////////////////////////////////////////////371////////////////////////////////////////////////////////////////////////////372//função que faz um request pro server com o lance373function validar(c1, c2, cor){374 //375 socket.emit('lance', {de:c1,para:c2,cor:cor,sala:sala})376 //377 console.log('enviou: '+ {de:c1,para:c2,cor:cor,sala:sala});378 //379}380////////////////////////////////////////////////////////////////////////////381//verifica os cliques no tabuleiro382//383let clicks = 0384let de = ''385let para = ''386////387//388document.querySelector('.table').addEventListener('click', e => {389 console.log('clicou pela: '+clicks);390 ///391 if (document.querySelector('.barrapreta').innerHTML == 'aguardando oponente...') {392 return393 }394 ///395 ///396 if (clicks == 0) {397 //398 if (e.target.id == 'casa') {399 //400 if (e.target.childNodes[0].className != 'pecaminha') {401 return402 }403 //404 de = e.target.childNodes[0].id405 console.log(de);...
weather.js
Source:weather.js
1document.querySelector(".btn").addEventListener("click",f)2document.querySelector("#input").addEventListener("keypress",(e)=>{3 if(e.keyCode == 13){4 f();5 }6})7var myVar;8function f(){9 10 stop();11 let city=document.querySelector("#input").value;12 13 14fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=7537fc2df623430a5e00f2e755b75665`)15 .then((res)=>{16 return res.json();17 })18 .then((data)=>{19 console.log(data)20 document.querySelector("#input").value="";21 document.querySelector(".card-action").style.display="block";22 let temp=(data.main.temp-273.15).toFixed(2);23 let feel=(data.main.feels_like-273.15).toFixed(2);24 let mintemp=(data.main.temp_min-273.15).toFixed(2);25 let maxtemp=(data.main.temp_max-273.15).toFixed(2);26 let d=new Date();27 var p=d.getTimezoneOffset();28 p=p*60*1000;29 let gmt=d.getTime()+(p);30 31 let m=gmt+((data.timezone)*1000);32 33 let a=new Date(m);34 35 36 let hour=a.getHours();37 let min=a.getMinutes();38 let sec=a.getSeconds();3940 41 42 43 document.querySelector(".city").innerHTML=`${data.name} , ${data.sys.country}`;44 document.querySelector(".humidity").innerHTML=`Humidity: ${data.main.humidity}%`45 document.querySelector(".temp").innerHTML=`${temp}°C`;46 document.querySelector(".feel").innerHTML=`<span class="feel">Feels Like :${feel}°C</span>`;47 document.querySelector(".min-max").innerHTML=`Min: ${mintemp}°C | Max: ${maxtemp}°C `;48 document.querySelector(".con").innerHTML=`${data.weather[0].description}`;49 // document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11d@2x.png"50 let wid=data.weather[0].id;51 525354 if(wid<250){55 document.querySelector("body").style.backgroundImage=`url('Thunderstrome1.jpg')`56 if(hour>17 || hour<6){57 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/11n@2x.png"58 }59 else{60 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/11d@2x.png"61 }62 }63 else if(wid<350||(520==wid || wid==531|| wid==522 )){64 if((520==wid || wid==531|| wid==522 )){65 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`66 }67 else{68 document.querySelector("body").style.backgroundImage=`url('drizzle.jpg')`69 }70 if(hour>17 || hour<6){71 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/09n@2x.png"72 }73 else{74 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/09d@2x.png"75 }76 }77 else if(wid<505){78 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`79 if(hour>17 || hour<6){80 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/10n@2x.png"81 }82 else{83 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/10d@2x.png"84 }85 }86 else if(wid<630 ||(wid==511)){87 if(wid==511){88 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`89 }90 else{91 document.querySelector("body").style.backgroundImage=`url('snow.jpg')`92 }93 if(hour>17 || hour<6){94 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/13n@2x.png"95 }96 else{97 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/13d@2x.png"98 }99 }100 else if(wid<800){101 102 if(wid==701){103 document.querySelector("body").style.backgroundImage=`url('mist.jpg')`104 if(hour>17 || hour<6){105 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"106 }107 else{108 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"109 }110 }111112113 if(wid==711){114 document.querySelector("body").style.backgroundImage=`url('smoke.jpg')`115 if(hour>17 || hour<6){116 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"117 }118 else{119 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"120 }121 }122 if(wid==721){123 124 if(hour>17 || hour<6){125 document.querySelector("body").style.backgroundImage=`url('haze n.jpg')`126 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"127 }128 else{129 document.querySelector("body").style.backgroundImage=`url('haze.jpg')`130 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"131 }132 }133 if(wid==731){134 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`135 if(hour>17 || hour<6){136 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"137 }138 else{139 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"140 }141 }142 if(wid==741){143 document.querySelector("body").style.backgroundImage=`url('frog.jpg')`144 if(hour>17 || hour<6){145 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"146 }147 else{148 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"149 }150 }151152 if(wid==751){153 document.querySelector("body").style.backgroundImage=`url('sand.jpg')`154 if(hour>17 || hour<6){155 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"156 }157 else{158 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"159 }160 }161 if(wid==761){162 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`163 if(hour>17 || hour<6){164 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"165 }166 else{167 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"168 }169 }170 if(wid==762){171 document.querySelector("body").style.backgroundImage=`url('ash.jpg')`172 if(hour>17 || hour<6){173 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"174 }175 else{176 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"177 }178 }179 if(wid==771){180 document.querySelector("body").style.backgroundImage=`url('sq.jpg')`181 if(hour>17 || hour<6){182 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"183 }184 else{185 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"186 }187 }188 if(wid==781){189 document.querySelector("body").style.backgroundImage=`url('turnado.jpg')`190 if(hour>17 || hour<6){191 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50n@2x.png"192 }193 else{194 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/50d@2x.png"195 }196 }197 }198 else if(wid==800){199 200 if(hour>17 || hour<6){201 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/01n@2x.png"202 document.querySelector("body").style.backgroundImage=`url('clear night.jpg')`203 }204 else{205 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/01d@2x.png"206 document.querySelector("body").style.backgroundImage=`url('clear sky.jpg')`207 }208 }209 else if(wid==801){210211 if(hour>17 || hour<6){212 document.querySelector("body").style.backgroundImage=`url('cloud n.jpg')`213 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/02n@2x.png"214 }215 else{216 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`217 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/02d@2x.png"218 }219 }220 else if(wid==802){221 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`222 if(hour>17 || hour<6){223 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/03n@2x.png"224 }225 else{226 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/03d@2x.png"227 }228 }229 else if(wid==803 || wid==804){230 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`231 if(hour>17 || hour<6){232 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/04n@2x.png"233 }234 else{235 document.querySelector(".icon img").src="https://openweathermap.org/img/wn/04d@2x.png"236 }237 }238 else{239 document.querySelector(".icon img").src="";240 }241 242 243244245 function check(){246 247 248 var g=new Date();249 var n=g.getTimezoneOffset();250 251 n=n*60*1000;252 let gmt1=g.getTime()+(n);253254 255 256 let m1=gmt1+((data.timezone)*1000);257 258 let a1=new Date(m1);259 260 let am_pm;261 let hours=a1.getHours();262 let mins=a1.getMinutes();263 let secs=a1.getSeconds();264265 let hs;266 267 if(hours>12){268 hs=hours-12;269 am_pm=`PM`;270 if(hs<10){271 hs=hs;272 273 }274 else{275 hs=hs;276 277 }278 }279 else if(hours==12){280 hs=hours;281 am_pm=`PM`;282 283 }284 else if(hours==0){285 hs=12;286 am_pm=`AM`;287 288 }289 else{290 am_pm=`AM`;291 if(hours<10){292 hs=`${hours}`;293 294 }295 else{296 hs=`${hours}`;297 298 }299 }300301 302 if(secs<10){303 secs=`0${secs}`;304 305 306 }307 else{308 secs=secs;309 310 311 }312 if(mins<10){313 mins=`0${mins}`;314 315 }316 else{317 mins=`${mins}`;318 319 }320 321 322 let date1=a1.getDate();323 324 325 let days1 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];326 let month1 = ["January","February","March","April","May","June","July","August","September","October","November","December"];327 document.querySelector(".date").innerHTML = `${date1} ${month1[a1.getMonth()]} , ${days1[a1.getDay()]} `;328 document.querySelector("#y").innerHTML = ` ${data.name}'s Time:`;329 document.querySelector("#t").innerHTML = ` ${hs}:${mins}:${secs} ${am_pm} `;330 }331 myVar= setInterval(check,1000);332 333 let sunrise=sunTime(data.sys.sunrise,"rise",data.timezone)334 let sunset=sunTime(data.sys.sunset,"set",data.timezone)335 336 })337 .catch((error)=>{338 document.querySelector("body").style.backgroundImage=`url('pic1.jpg')`339 document.querySelector("#input").value="";340 document.querySelector(".card-action").style.display="none";341 console.log(error)342 showalert("City is not found","alert-danger")343 })344}345function stop(){346 clearInterval(myVar)347}348349function showalert(message,cls){350 let div=document.createElement("div");351 div.className=`alert ${cls} a`;352 div.innerHTML=` ${message}`;353 let row=document.querySelector(".b");354 let e=document.querySelector(".c");355 row.insertBefore(div,e)356 setTimeout(()=>{357 div.style.display="none"358 },1000)359}360function sunTime(e,b,c){361 var ab=new Date();362 var mn=ab.getTimezoneOffset();363 364 mn=mn*60*1000;365 let gmt2=(e*1000)+(mn);366367368369 let m2=gmt2+((c)*1000);370 let date=new Date(m2);371 372 let am;373 let h=date.getHours();374 let m=date.getMinutes();375 let s=date.getSeconds();376 377 let hu;378 379 if(h>11){380 381382 if(h==12){383 hu=h;384 am=`PM`;385 } 386 else{387 hu=h-12;388 am=`PM`;389 390 } 391 }392 else{393 394 am=`AM`;395 396 hu=h;397 398 399 400 401 }402403 404 if(s<10){405 s=`0${s}`;406 407 408 }409 else{410 s=s;411412 }413 if(m<10){414 m=`0${m}`;415 416 }417 else{418 m=m;419 420 }421 422 document.querySelector(`.${b}`).innerHTML=` ${hu}:${m}:${s} ${am}`423}
...
we.js
Source:we.js
1document.querySelector(".btn").addEventListener("click",f)2document.querySelector("#input").addEventListener("keypress",(e)=>{3 if(e.keyCode == 13){4 f();5 }6})7var myVar;8function f(){9 10 stop();11 let city=document.querySelector("#input").value;12 13 14fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=7537fc2df623430a5e00f2e755b75665`)15 .then((res)=>{16 return res.json();17 })18 .then((data)=>{19 console.log(data)20 document.querySelector("#input").value="";21 document.querySelector(".card-action").style.display="block";22 23 242526 function check(){27 let temp=(data.main.temp-273.15).toFixed(2);28 let feel=(data.main.feels_like-273.15).toFixed(2);29 let mintemp=(data.main.temp_min-273.15).toFixed(2);30 let maxtemp=(data.main.temp_max-273.15).toFixed(2);31 let d=new Date();32 var p=d.getTimezoneOffset();33 p=p*60*1000;34 let gmt=d.getTime()+(p);35 36 let m=gmt+((data.timezone)*1000);37 38 let a=new Date(m);39 40 41 let hour=a.getHours();42 let min=a.getMinutes();43 let sec=a.getSeconds();4445 46 47 48 document.querySelector(".city").innerHTML=`${data.name} , ${data.sys.country}`;49 document.querySelector(".humidity").innerHTML=`Humidity: ${data.main.humidity}%`50 document.querySelector(".temp").innerHTML=`${temp}°C`;51 document.querySelector(".feel").innerHTML=`<span class="feel">Feels Like :${feel}°C</span>`;52 document.querySelector(".min-max").innerHTML=`Min: ${mintemp}°C | Max: ${maxtemp}°C `;53 document.querySelector(".con").innerHTML=`${data.weather[0].description}`;54 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11d@2x.png"55 let wid=data.weather[0].id;56 575859 if(wid<250){60 document.querySelector("body").style.backgroundImage=`url('Thunderstrome1.jpg')`61 if(hour>17 || hour<6){62 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11n@2x.png"63 }64 else{65 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11d@2x.png"66 }67 }68 else if(wid<350||(520==wid || wid==531|| wid==522 )){69 if((520==wid || wid==531|| wid==522 )){70 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`71 }72 else{73 document.querySelector("body").style.backgroundImage=`url('drizzle.jpg')`74 }75 if(hour>17 || hour<6){76 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/09n@2x.png"77 }78 else{79 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/09d@2x.png"80 }81 }82 else if(wid<505){83 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`84 if(hour>17 || hour<6){85 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/10n@2x.png"86 }87 else{88 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/10d@2x.png"89 }90 }91 else if(wid<630 ||(wid==511)){92 if(wid==511){93 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`94 }95 else{96 document.querySelector("body").style.backgroundImage=`url('snow.jpg')`97 }98 if(hour>17 || hour<6){99 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/13n@2x.png"100 }101 else{102 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/13d@2x.png"103 }104 }105 else if(wid<800){106 107 if(wid==701){108 document.querySelector("body").style.backgroundImage=`url('mist.jpg')`109 if(hour>17 || hour<6){110 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"111 }112 else{113 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"114 }115 }116117118 if(wid==711){119 document.querySelector("body").style.backgroundImage=`url('smoke.jpg')`120 if(hour>17 || hour<6){121 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"122 }123 else{124 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"125 }126 }127 if(wid==721){128 129 if(hour>17 || hour<6){130 document.querySelector("body").style.backgroundImage=`url('haze n.jpg')`131 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"132 }133 else{134 document.querySelector("body").style.backgroundImage=`url('haze.jpg')`135 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"136 }137 }138 if(wid==731){139 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`140 if(hour>17 || hour<6){141 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"142 }143 else{144 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"145 }146 }147 if(wid==741){148 document.querySelector("body").style.backgroundImage=`url('frog.jpg')`149 if(hour>17 || hour<6){150 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"151 }152 else{153 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"154 }155 }156157 if(wid==751){158 document.querySelector("body").style.backgroundImage=`url('sand.jpg')`159 if(hour>17 || hour<6){160 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"161 }162 else{163 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"164 }165 }166 if(wid==761){167 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`168 if(hour>17 || hour<6){169 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"170 }171 else{172 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"173 }174 }175 if(wid==762){176 document.querySelector("body").style.backgroundImage=`url('ash.jpg')`177 if(hour>17 || hour<6){178 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"179 }180 else{181 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"182 }183 }184 if(wid==771){185 document.querySelector("body").style.backgroundImage=`url('sq.jpg')`186 if(hour>17 || hour<6){187 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"188 }189 else{190 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"191 }192 }193 if(wid==781){194 document.querySelector("body").style.backgroundImage=`url('turnado.jpg')`195 if(hour>17 || hour<6){196 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"197 }198 else{199 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"200 }201 }202 }203 else if(wid==800){204 205 if(hour>17 || hour<6){206 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/01n@2x.png"207 document.querySelector("body").style.backgroundImage=`url('clear night.jpg')`208 }209 else{210 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/01d@2x.png"211 document.querySelector("body").style.backgroundImage=`url('clear sky.jpg')`212 }213 }214 else if(wid==801){215216 if(hour>17 || hour<6){217 document.querySelector("body").style.backgroundImage=`url('cloud n.jpg')`218 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/02n@2x.png"219 }220 else{221 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`222 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/02d@2x.png"223 }224 }225 else if(wid==802){226 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`227 if(hour>17 || hour<6){228 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/03n@2x.png"229 }230 else{231 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/03d@2x.png"232 }233 }234 else if(wid==803 || wid==804){235 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`236 if(hour>17 || hour<6){237 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/04n@2x.png"238 }239 else{240 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/04d@2x.png"241 }242 }243 else{244 document.querySelector(".icon img").src="";245 }246 247 248 var g=new Date();249 var n=g.getTimezoneOffset();250 251 n=n*60*1000;252 let gmt1=g.getTime()+(n);253254 255 256 let m1=gmt1+((data.timezone)*1000);257 258 let a1=new Date(m1);259 260 let am_pm;261 let hours=a1.getHours();262 let mins=a1.getMinutes();263 let secs=a1.getSeconds();264265 let hs;266 267 if(hours>12){268 hs=hours-12;269 am_pm=`PM`;270 if(hs<10){271 hs=hs;272 273 }274 else{275 hs=hs;276 277 }278 }279 else if(hours==12){280 hs=hours;281 am_pm=`PM`;282 283 }284 else{285 am_pm=`AM`;286 if(hours<10){287 hs=`${hours}`;288 289 }290 else{291 hs=`${hours}`;292 293 }294 }295296 297 if(secs<10){298 secs=`0${secs}`;299 300 301 }302 else{303 secs=secs;304 305 306 }307 if(mins<10){308 mins=`0${mins}`;309 310 }311 else{312 mins=`${mins}`;313 314 }315 316 317 let date1=a1.getDate();318 319 320 let days1 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];321 let month1 = ["January","February","March","April","May","June","July","August","September","October","November","December"];322 document.querySelector(".date").innerHTML = `${date1} ${month1[a1.getMonth()]} , ${days1[a1.getDay()]} `;323 document.querySelector("#y").innerHTML = ` ${data.name}'s Time:`;324 document.querySelector("#t").innerHTML = ` ${hs}:${mins}:${secs} ${am_pm} `;325 }326 myVar= setInterval(check,1000);327 328 let sunrise=sunTime(data.sys.sunrise,"rise",data.timezone)329 let sunset=sunTime(data.sys.sunset,"set",data.timezone)330 331 })332 .catch((error)=>{333 document.querySelector("body").style.backgroundImage=`url('pic1.jpg')`334 document.querySelector("#input").value="";335 document.querySelector(".card-action").style.display="none";336 console.log(error)337 showalert("City is not found","alert-danger")338 })339}340function stop(){341 clearInterval(myVar)342}343344function showalert(message,cls){345 let div=document.createElement("div");346 div.className=`alert ${cls} a`;347 div.innerHTML=` ${message}`;348 let row=document.querySelector(".b");349 let e=document.querySelector(".c");350 row.insertBefore(div,e)351 setTimeout(()=>{352 div.style.display="none"353 },1000)354}355function sunTime(e,b,c){356 var ab=new Date();357 var mn=ab.getTimezoneOffset();358 359 mn=mn*60*1000;360 let gmt2=(e*1000)+(mn);361362363364 let m2=gmt2+((c)*1000);365 let date=new Date(m2);366 367 let am;368 let h=date.getHours();369 let m=date.getMinutes();370 let s=date.getSeconds();371 372 let hu;373 374 if(h>11){375 376377 if(h==12){378 hu=h;379 am=`PM`;380 } 381 else{382 hu=h-12;383 am=`PM`;384 385 } 386 }387 else{388 389 am=`AM`;390 391 hu=h;392 393 394 395 396 }397398 399 if(s<10){400 s=`0${s}`;401 402 403 }404 else{405 s=s;406407 }408 if(m<10){409 m=`0${m}`;410 411 }412 else{413 m=m;414 415 }416 417 document.querySelector(`.${b}`).innerHTML=` ${hu}:${m}:${s} ${am}`418}
...
w.js
Source:w.js
1document.querySelector(".btn").addEventListener("click",f)2document.querySelector("#input").addEventListener("keypress",(e)=>{3 if(e.keyCode == 13){4 f();5 }6})7var myVar;8function f(){9 10 stop();11 let city=document.querySelector("#input").value;12 13 14fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=7537fc2df623430a5e00f2e755b75665`)15 .then((res)=>{16 return res.json();17 })18 .then((data)=>{19 console.log(data)20 document.querySelector("#input").value="";21 document.querySelector(".card-action").style.display="block";22 let temp=(data.main.temp-273.15).toFixed(2);23 let feel=(data.main.feels_like-273.15).toFixed(2);24 let mintemp=(data.main.temp_min-273.15).toFixed(2);25 let maxtemp=(data.main.temp_max-273.15).toFixed(2);26 let d=new Date();27 var p=d.getTimezoneOffset();28 p=p*60*1000;29 let gmt=d.getTime()+(p);30 31 let m=gmt+((data.timezone)*1000);32 33 let a=new Date(m);34 35 36 let hour=a.getHours();37 let min=a.getMinutes();38 let sec=a.getSeconds();3940 41 42 43 document.querySelector(".city").innerHTML=`${data.name} , ${data.sys.country}`;44 document.querySelector(".humidity").innerHTML=`Humidity: ${data.main.humidity}%`45 document.querySelector(".temp").innerHTML=`${temp}°C`;46 document.querySelector(".feel").innerHTML=`<span class="feel">Feels Like :${feel}°C</span>`;47 document.querySelector(".min-max").innerHTML=`Min: ${mintemp}°C | Max: ${maxtemp}°C `;48 document.querySelector(".con").innerHTML=`${data.weather[0].description}`;49 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11d@2x.png"50 let wid=data.weather[0].id;51 525354 if(wid<250){55 document.querySelector("body").style.backgroundImage=`url('Thunderstrome1.jpg')`56 if(hour>17 || hour<6){57 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11n@2x.png"58 }59 else{60 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/11d@2x.png"61 }62 }63 else if(wid<350||(520==wid || wid==531|| wid==522 )){64 if((520==wid || wid==531|| wid==522 )){65 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`66 }67 else{68 document.querySelector("body").style.backgroundImage=`url('drizzle.jpg')`69 }70 if(hour>17 || hour<6){71 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/09n@2x.png"72 }73 else{74 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/09d@2x.png"75 }76 }77 else if(wid<505){78 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`79 if(hour>17 || hour<6){80 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/10n@2x.png"81 }82 else{83 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/10d@2x.png"84 }85 }86 else if(wid<630 ||(wid==511)){87 if(wid==511){88 document.querySelector("body").style.backgroundImage=`url('rain.jpg')`89 }90 else{91 document.querySelector("body").style.backgroundImage=`url('snow.jpg')`92 }93 if(hour>17 || hour<6){94 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/13n@2x.png"95 }96 else{97 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/13d@2x.png"98 }99 }100 else if(wid<800){101 102 if(wid==701){103 document.querySelector("body").style.backgroundImage=`url('mist.jpg')`104 if(hour>17 || hour<6){105 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"106 }107 else{108 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"109 }110 }111112113 if(wid==711){114 document.querySelector("body").style.backgroundImage=`url('smoke.jpg')`115 if(hour>17 || hour<6){116 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"117 }118 else{119 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"120 }121 }122 if(wid==721){123 124 if(hour>17 || hour<6){125 document.querySelector("body").style.backgroundImage=`url('haze n.jpg')`126 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"127 }128 else{129 document.querySelector("body").style.backgroundImage=`url('haze.jpg')`130 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"131 }132 }133 if(wid==731){134 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`135 if(hour>17 || hour<6){136 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"137 }138 else{139 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"140 }141 }142 if(wid==741){143 document.querySelector("body").style.backgroundImage=`url('frog.jpg')`144 if(hour>17 || hour<6){145 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"146 }147 else{148 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"149 }150 }151152 if(wid==751){153 document.querySelector("body").style.backgroundImage=`url('sand.jpg')`154 if(hour>17 || hour<6){155 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"156 }157 else{158 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"159 }160 }161 if(wid==761){162 document.querySelector("body").style.backgroundImage=`url('dust.jpg')`163 if(hour>17 || hour<6){164 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"165 }166 else{167 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"168 }169 }170 if(wid==762){171 document.querySelector("body").style.backgroundImage=`url('ash.jpg')`172 if(hour>17 || hour<6){173 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"174 }175 else{176 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"177 }178 }179 if(wid==771){180 document.querySelector("body").style.backgroundImage=`url('sq.jpg')`181 if(hour>17 || hour<6){182 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"183 }184 else{185 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"186 }187 }188 if(wid==781){189 document.querySelector("body").style.backgroundImage=`url('turnado.jpg')`190 if(hour>17 || hour<6){191 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50n@2x.png"192 }193 else{194 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/50d@2x.png"195 }196 }197 }198 else if(wid==800){199 200 if(hour>17 || hour<6){201 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/01n@2x.png"202 document.querySelector("body").style.backgroundImage=`url('clear night.jpg')`203 }204 else{205 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/01d@2x.png"206 document.querySelector("body").style.backgroundImage=`url('clear sky.jpg')`207 }208 }209 else if(wid==801){210211 if(hour>17 || hour<6){212 document.querySelector("body").style.backgroundImage=`url('cloud n.jpg')`213 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/02n@2x.png"214 }215 else{216 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`217 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/02d@2x.png"218 }219 }220 else if(wid==802){221 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`222 if(hour>17 || hour<6){223 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/03n@2x.png"224 }225 else{226 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/03d@2x.png"227 }228 }229 else if(wid==803 || wid==804){230 document.querySelector("body").style.backgroundImage=`url('cloud.jpg')`231 if(hour>17 || hour<6){232 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/04n@2x.png"233 }234 else{235 document.querySelector(".icon img").src="http://openweathermap.org/img/wn/04d@2x.png"236 }237 }238 else{239 document.querySelector(".icon img").src="";240 }241 242 243244245 function check(){246 247 248 var g=new Date();249 var n=g.getTimezoneOffset();250 251 n=n*60*1000;252 let gmt1=g.getTime()+(n);253254 255 256 let m1=gmt1+((data.timezone)*1000);257 258 let a1=new Date(m1);259 260 let am_pm;261 let hours=a1.getHours();262 let mins=a1.getMinutes();263 let secs=a1.getSeconds();264265 let hs;266 267 if(hours>12){268 hs=hours-12;269 am_pm=`PM`;270 if(hs<10){271 hs=hs;272 273 }274 else{275 hs=hs;276 277 }278 }279 else if(hours==12){280 hs=hours;281 am_pm=`PM`;282 283 }284 else{285 am_pm=`AM`;286 if(hours<10){287 hs=`${hours}`;288 289 }290 else{291 hs=`${hours}`;292 293 }294 }295296 297 if(secs<10){298 secs=`0${secs}`;299 300 301 }302 else{303 secs=secs;304 305 306 }307 if(mins<10){308 mins=`0${mins}`;309 310 }311 else{312 mins=`${mins}`;313 314 }315 316 317 let date1=a1.getDate();318 319 320 let days1 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];321 let month1 = ["January","February","March","April","May","June","July","August","September","October","November","December"];322 document.querySelector(".date").innerHTML = `${date1} ${month1[a1.getMonth()]} , ${days1[a1.getDay()]} `;323 document.querySelector("#y").innerHTML = ` ${data.name}'s Time:`;324 document.querySelector("#t").innerHTML = ` ${hs}:${mins}:${secs} ${am_pm} `;325 }326 myVar= setInterval(check,1000);327 328 let sunrise=sunTime(data.sys.sunrise,"rise",data.timezone)329 let sunset=sunTime(data.sys.sunset,"set",data.timezone)330 331 })332 .catch((error)=>{333 document.querySelector("body").style.backgroundImage=`url('pic1.jpg')`334 document.querySelector("#input").value="";335 document.querySelector(".card-action").style.display="none";336 console.log(error)337 showalert("City is not found","alert-danger")338 })339}340function stop(){341 clearInterval(myVar)342}343344function showalert(message,cls){345 let div=document.createElement("div");346 div.className=`alert ${cls} a`;347 div.innerHTML=` ${message}`;348 let row=document.querySelector(".b");349 let e=document.querySelector(".c");350 row.insertBefore(div,e)351 setTimeout(()=>{352 div.style.display="none"353 },1000)354}355function sunTime(e,b,c){356 var ab=new Date();357 var mn=ab.getTimezoneOffset();358 359 mn=mn*60*1000;360 let gmt2=(e*1000)+(mn);361362363364 let m2=gmt2+((c)*1000);365 let date=new Date(m2);366 367 let am;368 let h=date.getHours();369 let m=date.getMinutes();370 let s=date.getSeconds();371 372 let hu;373 374 if(h>11){375 376377 if(h==12){378 hu=h;379 am=`PM`;380 } 381 else{382 hu=h-12;383 am=`PM`;384 385 } 386 }387 else{388 389 am=`AM`;390 391 hu=h;392 393 394 395 396 }397398 399 if(s<10){400 s=`0${s}`;401 402 403 }404 else{405 s=s;406407 }408 if(m<10){409 m=`0${m}`;410 411 }412 else{413 m=m;414 415 }416 417 document.querySelector(`.${b}`).innerHTML=` ${hu}:${m}:${s} ${am}`418}
...
calender.js
Source:calender.js
1const date = new Date();2let wmadSwitch = true;3export function loadCalendar() {4 const seniorClassInput = document.querySelector('.slider');5 seniorClassInput.addEventListener('click', () => {6 if (wmadSwitch) wmadSwitch = false;7 else wmadSwitch = true;8 if (wmadSwitch) {9 document.querySelector('.senior-selected').innerHTML = 'Senior A';10 document.querySelector('.schedule-info').style.opacity = 0;11 } else {12 document.querySelector('.senior-selected').innerHTML = 'Senior B';13 document.querySelector('.schedule-info').style.opacity = 0;14 };15 });16 date.setDate(1);17 const monthDays = document.querySelector('.days');18 const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();19 const prevMonthLastDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();20 const firstDayNum = date.getDay();21 const lastDayNum = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();22 const nextDays = 7 - lastDayNum - 1;23 const months = [24 'January',25 'Feburary',26 'March',27 'April',28 'May',29 'June',30 'July',31 'August',32 'September',33 'October',34 'November',35 'December',36 ];37 document.querySelector('.date h1').innerHTML = months[date.getMonth()];38 let days = "";39 for (let x = firstDayNum; x > 0; x--) {40 days += `<div class="prev-date">${prevMonthLastDay - x + 1}</div>`41 }42 for (let i = 1; i <= lastDay; i++) {43 if (i === new Date().getDate() && date.getMonth() === new Date().getMonth()) {44 days += `<div class="current">${i}</div>`;45 } else {46 days += `<div>${i}</div>`;47 }48 }49 for (let j = 1; j <= nextDays; j++) {50 days += `<div class="next-date">${j}</div>`51 }52 monthDays.innerHTML = days;53}54export function changeMonth() {55 document.querySelector('.prev').addEventListener('click', () => {56 date.setMonth(date.getMonth() - 1);57 loadCalendar();58 useCalendar();59 });60 document.querySelector('.next').addEventListener('click', () => {61 date.setMonth(date.getMonth() + 1);62 loadCalendar();63 useCalendar();64 });65};66export function useCalendar() {67 const daysArray = document.querySelector('.days').children;68 const dayInfo = document.querySelector('.dayInfo');69 const scheduleInfo = document.querySelector('.schedule-info')70 const daysOfWeek = [71 'Sunday',72 'Monday - On Campus',73 'Tuesday - On Campus',74 'Wednesday - On Campus',75 'Thursday',76 'Friday',77 'Saturday',78 ];79 function scrollToService(selector, yOffset) {80 const serviceOffset = selector.getBoundingClientRect().top + window.pageYOffset + yOffset;81 window.scrollTo({82 top: serviceOffset,83 behavior: 'smooth'84 });85 }86 for (let i = 0; i < daysArray.length; i++) {87 daysArray[i].addEventListener('click', () => {88 scheduleInfo.style.opacity = 1;89 scrollToService(scheduleInfo, -100);90 for (let j = 0; j < daysArray.length; j++) {91 if (daysArray[j].classList.contains('current')) {92 daysArray[j].classList.toggle('current');93 }94 }95 daysArray[i].classList.toggle('current');96 let dayOfMonth = new Date(date);97 dayOfMonth.setDate(daysArray[i].innerHTML);98 dayInfo.innerHTML = daysOfWeek[dayOfMonth.getDay()];99 document.querySelector('.date p').innerHTML = dayOfMonth.toDateString();100 if (wmadSwitch) {101 switch (daysOfWeek[dayOfMonth.getDay()]) {102 case 'Sunday':103 document.querySelector('.class1 p').innerHTML = "Weekend";104 document.querySelector('.class2 p').innerHTML = "Weekend";105 document.querySelector('.class3 p').innerHTML = "Weekend";106 document.querySelector('.class4 p').innerHTML = "Weekend";107 document.querySelector('.class5 p').innerHTML = "Weekend";108 document.querySelector('.class6 p').innerHTML = "Weekend";109 break;110 case 'Monday - On Campus':111 document.querySelector('.class1 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Judson Murray";112 document.querySelector('.class2 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Judson Murray";113 document.querySelector('.class3 p').innerHTML = "<strong>Free Period</strong>";114 document.querySelector('.class4 p').innerHTML = "<strong>Free Period</strong>";115 document.querySelector('.class5 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";116 document.querySelector('.class6 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";117 break;118 case 'Tuesday - On Campus':119 document.querySelector('.class1 p').innerHTML = "Employment Strategies<br>PERS1070<br><br>Instructor: Sean Hemming";120 document.querySelector('.class2 p').innerHTML = "Intermediate Java<br>PROG1090I<br><br>Instructor: Andre Boudreau";121 document.querySelector('.class3 p').innerHTML = "Intermediate Java<br>PROG1090J<br><br>Instructor: Andre Boudreau";122 document.querySelector('.class4 p').innerHTML = "<strong>Free Period</strong>";123 document.querySelector('.class5 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";124 document.querySelector('.class6 p').innerHTML = "<strong>Free Period</strong>";125 break;126 case 'Wednesday - On Campus':127 document.querySelector('.class1 p').innerHTML = "Adv JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";128 document.querySelector('.class2 p').innerHTML = "Adv JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";129 document.querySelector('.class3 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";130 document.querySelector('.class4 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";131 document.querySelector('.class5 p').innerHTML = "<strong>Free Period</strong>";132 document.querySelector('.class6 p').innerHTML = "<strong>Free Period</strong>";133 break;134 case 'Thursday':135 document.querySelector('.class1 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Judson Murray";136 document.querySelector('.class2 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Judson Murray";137 document.querySelector('.class3 p').innerHTML = "<strong>Free Period</strong>";138 document.querySelector('.class4 p').innerHTML = "Employment Strategies<br>PERS1070<br><br>Instructor: Sean Hemming";139 document.querySelector('.class5 p').innerHTML = "<strong>Free Period</strong>";140 document.querySelector('.class6 p').innerHTML = "<strong>Free Period</strong>";141 break;142 case 'Friday':143 document.querySelector('.class1 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";144 document.querySelector('.class2 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Judson Murray";145 document.querySelector('.class3 p').innerHTML = "Intermediate Java<br>PROG1090J<br><br>Instructor: Andre Boudreau";146 document.querySelector('.class4 p').innerHTML = "Intermediate Java<br>PROG1090J<br><br>Instructor: Andre Boudreau";147 document.querySelector('.class5 p').innerHTML = "Adv JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";148 document.querySelector('.class6 p').innerHTML = "Adv JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";149 break;150 case 'Saturday':151 document.querySelector('.class1 p').innerHTML = "Weekend";152 document.querySelector('.class2 p').innerHTML = "Weekend";153 document.querySelector('.class3 p').innerHTML = "Weekend";154 document.querySelector('.class4 p').innerHTML = "Weekend";155 document.querySelector('.class5 p').innerHTML = "Weekend";156 document.querySelector('.class6 p').innerHTML = "Weekend";157 break;158 };159 } else {160 switch (daysOfWeek[dayOfMonth.getDay()]) {161 case 'Sunday':162 document.querySelector('.class1 p').innerHTML = "Weekend";163 document.querySelector('.class2 p').innerHTML = "Weekend";164 document.querySelector('.class3 p').innerHTML = "Weekend";165 document.querySelector('.class4 p').innerHTML = "Weekend";166 document.querySelector('.class5 p').innerHTML = "Weekend";167 document.querySelector('.class6 p').innerHTML = "Weekend";168 break;169 case 'Monday - On Campus':170 document.querySelector('.class1 p').innerHTML = "Intermediate Java<br>PROG1090I<br><br>Instructor: Andre Boudreau";171 document.querySelector('.class2 p').innerHTML = "Intermediate Java<br>PROG1090I<br><br>Instructor: Andre Boudreau";172 document.querySelector('.class3 p').innerHTML = "<strong>Free Period</strong>";173 document.querySelector('.class4 p').innerHTML = "<strong>Free Period</strong>";174 document.querySelector('.class5 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";175 document.querySelector('.class6 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";176 break;177 case 'Tuesday - On Campus':178 document.querySelector('.class1 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";179 document.querySelector('.class2 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";180 document.querySelector('.class3 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Stephen Carter";181 document.querySelector('.class4 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Stephen Carter";182 document.querySelector('.class5 p').innerHTML = "Employment Strategies<br>PERS1070<br><br>Instructor: Sean Hemming";183 document.querySelector('.class6 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";184 break;185 case 'Wednesday - On Campus':186 document.querySelector('.class1 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";187 document.querySelector('.class2 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";188 document.querySelector('.class3 p').innerHTML = "<strong>Free Period</strong>";189 document.querySelector('.class4 p').innerHTML = "Employment Strategies<br>PERS1070<br><br>Instructor: Sean Hemming";190 document.querySelector('.class5 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Stephen Carter";191 document.querySelector('.class6 p').innerHTML = "N-Tier Development<br>PROG1179<br><br>Instructor: Stephen Carter";192 break;193 case 'Thursday':194 document.querySelector('.class1 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";195 document.querySelector('.class2 p').innerHTML = "Advanced JavaScript<br>PROG1317A<br><br>Instructor: Chris Cusack";196 document.querySelector('.class3 p').innerHTML = "Intermediate Java<br>PROG1090I<br><br>Instructor: Andre Boudreau";197 document.querySelector('.class4 p').innerHTML = "Intermediate Java<br>PROG1090I<br><br>Instructor: Andre Boudreau";198 document.querySelector('.class5 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";199 document.querySelector('.class6 p').innerHTML = "Server Side Web (ASP.NET)<br>PROG1025<br><br>Instructor: Bonnie Ryan";200 break;201 case 'Friday':202 document.querySelector('.class1 p').innerHTML = "<strong>Free Period</strong>";203 document.querySelector('.class2 p').innerHTML = "<strong>Free Period</strong>";204 document.querySelector('.class3 p').innerHTML = "<strong>Free Period</strong>";205 document.querySelector('.class4 p').innerHTML = "<strong>Free Period</strong>";206 document.querySelector('.class5 p').innerHTML = "<strong>Free Period</strong>";207 document.querySelector('.class6 p').innerHTML = "<strong>Free Period</strong>";208 break;209 case 'Saturday':210 document.querySelector('.class1 p').innerHTML = "Weekend";211 document.querySelector('.class2 p').innerHTML = "Weekend";212 document.querySelector('.class3 p').innerHTML = "Weekend";213 document.querySelector('.class4 p').innerHTML = "Weekend";214 document.querySelector('.class5 p').innerHTML = "Weekend";215 document.querySelector('.class6 p').innerHTML = "Weekend";216 break;217 };218 };219 });220 }...
index.js
Source:index.js
1document.querySelector('.btn1').addEventListener('click', function () {2 document.querySelector('.num1').style.display = "block";3 document.querySelector('.num2').style.display = "none";4 document.querySelector('.num3').style.display = "none";5 document.querySelector('.num4').style.display = "none";6 document.querySelector('.num5').style.display = "none";7 document.querySelector('.num6').style.display = "none";8 document.querySelector('.num7').style.display = "none";9})10document.querySelector('.btn2').addEventListener('click', function () {11 document.querySelector('.num2').style.display = "block";12 document.querySelector('.num1').style.display = "none";13 document.querySelector('.num3').style.display = "none";14 document.querySelector('.num4').style.display = "none";15 document.querySelector('.num5').style.display = "none";16 document.querySelector('.num6').style.display = "none";17 document.querySelector('.num7').style.display = "none";18})19document.querySelector('.btn3').addEventListener('click', function () {20 document.querySelector('.num3').style.display = "block";21 document.querySelector('.num2').style.display = "none";22 document.querySelector('.num1').style.display = "none";23 document.querySelector('.num4').style.display = "none";24 document.querySelector('.num5').style.display = "none";25 document.querySelector('.num6').style.display = "none";26 document.querySelector('.num7').style.display = "none";27})28document.querySelector('.btn4').addEventListener('click', function () {29 document.querySelector('.num4').style.display = "block";30 document.querySelector('.num2').style.display = "none";31 document.querySelector('.num3').style.display = "none";32 document.querySelector('.num1').style.display = "none";33 document.querySelector('.num5').style.display = "none";34 document.querySelector('.num6').style.display = "none";35 document.querySelector('.num7').style.display = "none";36})37document.querySelector('.btn5').addEventListener('click', function () {38 document.querySelector('.num5').style.display = "block";39 document.querySelector('.num2').style.display = "none";40 document.querySelector('.num3').style.display = "none";41 document.querySelector('.num4').style.display = "none";42 document.querySelector('.num1').style.display = "none";43 document.querySelector('.num6').style.display = "none";44 document.querySelector('.num7').style.display = "none";45})46document.querySelector('.btn6').addEventListener('click', function () {47 document.querySelector('.num6').style.display = "block";48 document.querySelector('.num2').style.display = "none";49 document.querySelector('.num3').style.display = "none";50 document.querySelector('.num4').style.display = "none";51 document.querySelector('.num5').style.display = "none";52 document.querySelector('.num1').style.display = "none";53 document.querySelector('.num7').style.display = "none";54})55document.querySelector('.btn7').addEventListener('click', function () {56 document.querySelector('.num7').style.display = "block";57 document.querySelector('.num2').style.display = "none";58 document.querySelector('.num3').style.display = "none";59 document.querySelector('.num4').style.display = "none";60 document.querySelector('.num5').style.display = "none";61 document.querySelector('.num6').style.display = "none";62 document.querySelector('.num1').style.display = "none";63})64const btn = document.querySelectorAll(".btn"),65 btn1 = document.querySelector(".btn1"),66 btn2 = document.querySelector(".btn2"),67 btn3 = document.querySelector(".btn3"),68 btn4 = document.querySelector(".btn4"),69 btn5 = document.querySelector(".btn5"),70 btn6 = document.querySelector(".btn6"),71 btn7 = document.querySelector(".btn7"),72 num1 = document.querySelector(".num1"),73 num2 = document.querySelector(".num2"),74 num3 = document.querySelector(".num3"),75 num4 = document.querySelector(".num4"),76 num5 = document.querySelector(".num5"),77 num6 = document.querySelector(".num6"),78 num7 = document.querySelector(".num7");79function btnStyleHandle(event) {80 for (var i = 0; i < btn.length; i++) {81 btn[i].style.backgroundColor = "white";82 btn[i].style.borderColor = "rgb(177, 177, 177)"83 btn[i].style.color = "rgb(177, 177, 177)"84 }85 if (num1.style.display == "block") {86 btn1.style.backgroundColor = "#B8E0E3";87 btn1.style.borderColor = "#B8E0E3"88 btn1.style.color = "white"89 } else if (num2.style.display == "block") {90 btn2.style.backgroundColor = "#B8E0E3";91 btn2.style.borderColor = "#B8E0E3";92 btn2.style.color = "white";93 } else if (num3.style.display == "block") {94 btn3.style.backgroundColor = "#B8E0E3";95 btn3.style.borderColor = "#B8E0E3";96 btn3.style.color = "white";97 } else if (num4.style.display == "block") {98 btn4.style.backgroundColor = "#B8E0E3";99 btn4.style.borderColor = "#B8E0E3";100 btn4.style.color = "white";101 } else if (num5.style.display == "block") {102 btn5.style.backgroundColor = "#B8E0E3";103 btn5.style.borderColor = "#B8E0E3";104 btn5.style.color = "white";105 } else if (num6.style.display == "block") {106 btn6.style.backgroundColor = "#B8E0E3";107 btn6.style.borderColor = "#B8E0E3";108 btn6.style.color = "white";109 } else if (num7.style.display == "block") {110 btn7.style.backgroundColor = "#B8E0E3";111 btn7.style.borderColor = "#B8E0E3";112 btn7.style.color = "white";113 }114}115function init() {116 num1.style.display = "block";117 btn1.style.backgroundColor = "#B8E0E3";118 btn1.style.borderColor = "#B8E0E3";119 btn1.style.color = "white";120}121window.addEventListener("click", btnStyleHandle);122init();123const chart = document.querySelector(".box3_chart"),124 chartCtn = document.querySelector(".box3_chart_ctn"),125 chartTwo = document.getElementById("myChartFive"),126 chartThree = document.getElementById("myChartSix"),127 chartBtn = document.querySelectorAll(".box3_btn"),128 chartBtnTwo = document.querySelector(".box3_btn1"),129 chartBtnThree = document.querySelector(".box3_btn2");130let Width = 1000,131 p = 0132// function resize(event) {133// Width = '1000px';134// chart.style.width = `${Width * 2}px`;135// chartCtn.style.width = `${Width}px`;136// chart.style.transform = `translateX(0px)`;137// };138function buttonColor() {139 for (var i = 0; i < chartBtn.length; i++) {140 chartBtn[i].style.backgroundColor = "white";141 chartBtn[i].style.borderColor = "rgb(177, 177, 177)"142 chartBtn[i].style.color = "rgb(177, 177, 177)"143 }...
script.js
Source:script.js
...36 }37document.addEventListener("DOMContentLoaded", function(event) {38 console.log("start");39 /* changement de p avec le formulaire */40 const button_p = document.querySelector('#bouton_p');41 button_p.onclick = function(){42 var input_p = document.querySelector('#p');43 p = parseInt(input_p.value);44 document.querySelector('#afichage_p').innerHTML = p;45 console.log('p: ', p);46 };47 /* changement de q avec le formulaire */48 const button_q = document.querySelector('#bouton_q');49 button_q.onclick = function(){50 var input_q = document.querySelector('#q');51 q = parseInt(input_q.value);52 document.querySelector('#afichage_q').innerHTML = q;53 console.log('q: ', q); 54 };55 /* calcul de n avec le formulaire */56 const button_n = document.querySelector('#bouton_n');57 button_n.onclick = function(){58 n = p*q; 59 document.querySelector('#afichage_n').innerHTML = n;60 document.querySelector('#afichage_n2').innerHTML = n;61 fiN = (p - 1)*(q - 1);62 document.querySelector('#afichage_fiN').innerHTML = fiN;63 };64 /* changement de e avec le formulaire */65 const button_e = document.querySelector('#bouton_e');66 button_e.onclick = function(){67 var input_e = document.querySelector('#e');68 e = parseInt(input_e.value);69 document.querySelector('#afichage_e').innerHTML = e;70 document.querySelector('#afichage_e2').innerHTML = e;71 console.log('e: ', e); 72 document.querySelector('#afichage_pgcden').innerHTML = pgcd(e,fiN);73 d = euclide2(e,fiN);74 document.querySelector('#afichage_d').innerHTML = d;75 document.querySelector('#afichage_d2').innerHTML = d;76 };77 /* chiffrement */78 /* changement de m */79 const button_cm = document.querySelector('#bouton_cm');80 button_cm.onclick = function(){81 var input_cm = document.querySelector('#cm');82 cm = parseInt(input_cm.value);83 document.querySelector('#afichage_cm').innerHTML = cm;84 };85 /* changement de e */86 const button_ce = document.querySelector('#bouton_ce');87 button_ce.onclick = function(){88 var input_ce = document.querySelector('#ce');89 ce = parseInt(input_ce.value);90 document.querySelector('#afichage_ce').innerHTML = ce;91 };92 /* changement de n*/93 const button_cn = document.querySelector('#bouton_cn');94 button_cn.onclick = function(){95 var input_cn = document.querySelector('#cn');96 cn = parseInt(input_cn.value);97 document.querySelector('#afichage_cn').innerHTML = cn;98 };99 /*chiffrement*/100 const bouton_cx = document.querySelector('#bouton_cx');101 bouton_cx.onclick = function(){102 cx = Math.pow(cm, ce) % cn;103 document.querySelector('#afichage_cx').innerHTML = cx;104 };105 106 /*dechifrement */107 /* changement de x */108 const bouton_dx = document.querySelector('#bouton_dx');109 bouton_dx.onclick = function(){110 var input_dx = document.querySelector('#dx');111 dx = parseInt(input_dx.value);112 document.querySelector('#afichage_dx').innerHTML = dx;113 };114 /* changement de dd */115 const button_dd = document.querySelector('#bouton_dd');116 button_dd.onclick = function(){117 var input_dd = document.querySelector('#dd');118 dd = parseInt(input_dd.value);119 document.querySelector('#afichage_dd').innerHTML = dd;120 };121 /* changement de dn*/122 const button_dn = document.querySelector('#bouton_dn');123 button_dn.onclick = function(){124 var input_dn = document.querySelector('#dn');125 dn = parseInt(input_dn.value);126 document.querySelector('#afichage_dn').innerHTML = dn;127 };128 /*déchiffrement*/129 const bouton_dx2 = document.querySelector('#bouton_dx2');130 bouton_dx2.onclick = function(){131 dx2 = Math.pow(dx, dd) % dn;132 document.querySelector('#afichage_dx2').innerHTML = dx2;133 };134 /* conversion */135 const bouton_conversion = document.querySelector('#bouton_conversion');136 bouton_conversion.onclick = function(){137 var input_conversion = document.querySelector('#conversion');138 conversion = input_conversion.value;139 var output = 0;140 for (var i = 0; i < conversion.length; i++) {141 var actuelle = conversion[i].charCodeAt(0);142 if(actuelle.toString().length == 1){143 console.log("leng 1");144 output += "00"+actuelle;145 }else if (actuelle.toString().length == 2){146 console.log("leng 2");147 output += "0"+actuelle;148 }else{149 output += actuelle;150 }151 152 153 }154 output = output.substring(1);155 document.querySelector('#afichage_conversion').innerHTML = output;156 };157 /* conversion2 */158 const bouton_conversion2 = document.querySelector('#bouton_conversion2');159 bouton_conversion2.onclick = function(){160 var input_conversion2 = document.querySelector('#conversion2');161 conversion2 = input_conversion2.value;162 console.log('conversion2: ', conversion2);163 var output2 = 0;164 var flag = 0;165 var temp = "";166 for (var i = 0; i < conversion2.length; i++) { 167 flag++;168 temp = temp + conversion2[i];169 if (flag == 3){170 flag = 0;171 output2 = output2 + String.fromCharCode(parseInt(temp))172 console.log('parseInt(temp): ', parseInt(temp));173 temp = "";174 }175 }176 output2 = output2.substring(1);177 document.querySelector('#afichage_conversion2').innerHTML = output2;178 };179 /* var de test p = 5 q = 17 e = 5 */180 var p = 0;181 var q = 0;182 var n = 0;183 var fiN = 0;184 var e = 0;185 var d = 0;186 var m = 0;187 var x = 0;188 var x2 = 0;189 var x3 = 0;190 var cm = 0;191 var cx = 0;...
app.js
Source:app.js
1projects = document.querySelectorAll(".project");2document.querySelector(".nav__bar-skills").addEventListener("click", function(){3 document.querySelector(".nav__bar-home").classList.remove("active-link");4 document.querySelector(".nav__bar-skills").classList.add("active-link");5 document.querySelector(".nav__bar-projects").classList.remove("active-link");6 document.querySelector(".box-home").classList.remove("active");7 document.querySelector(".box-3").classList.remove("active");8 document.querySelector(".box-2").classList.add("active");9 document.querySelector(".content__box-1").classList.add("ani-box1");10 document.querySelector(".content__box-2").classList.add("ani-box2");11 document.querySelector(".content__box-3").classList.add("ani-box3");12 document.querySelector(".skills__btn").classList.add("ani__skills-btn"); 13 document.querySelector(".bio__img").classList.remove("ani_bio-img");14 document.querySelector(".bio__head").classList.remove("ani_bio-head");15 document.querySelector(".bio__p").classList.remove("ani_bio-p"); 16 document.querySelector(".bio__btn").classList.remove("ani_bio-btn"); 17 projects.forEach( el => {18 el.classList.remove('ani_scale')19 });20})21document.querySelector(".nav__bar-home").addEventListener("click", function(){22 // document.querySelector(".nav__bar-home").style.borderBottom = "1px solid black"23 document.querySelector(".nav__bar-home").classList.add("active-link");24 document.querySelector(".nav__bar-skills").classList.remove("active-link");25 document.querySelector(".nav__bar-projects").classList.remove("active-link");26 document.querySelector(".box-home").classList.add("active");27 document.querySelector(".box-2").classList.remove("active"); 28 document.querySelector(".box-3").classList.remove("active");29 document.querySelector(".content__box-1").classList.remove("ani-box1");30 document.querySelector(".content__box-2").classList.remove("ani-box2");31 document.querySelector(".content__box-3").classList.remove("ani-box3"); 32 document.querySelector(".skills__btn").classList.remove("ani__skills-btn"); 33 34 35 document.querySelector(".bio__img").classList.add("ani_bio-img");36 document.querySelector(".bio__head").classList.add("ani_bio-head");37 document.querySelector(".bio__p").classList.add("ani_bio-p");38 document.querySelector(".bio__btn").classList.add("ani_bio-btn"); 39 40 projects.forEach( el => {41 el.classList.remove('ani_scale')42 });43})44document.querySelector(".nav__bar-projects").addEventListener("click", function(){45 document.querySelector(".nav__bar-skills").classList.remove("active-link");46 document.querySelector(".nav__bar-home").classList.remove("active-link");47 document.querySelector(".nav__bar-projects").classList.add("active-link");48 document.querySelector(".box-3").classList.add("active");49 document.querySelector(".box-home").classList.remove("active"); 50 document.querySelector(".box-2").classList.remove("active");51 document.querySelector(".bio__img").classList.remove("ani_bio-img");52 document.querySelector(".bio__head").classList.remove("ani_bio-head");53 document.querySelector(".bio__p").classList.remove("ani_bio-p"); 54 document.querySelector(".bio__btn").classList.remove("ani_bio-btn")55 document.querySelector(".content__box-1").classList.remove("ani-box1");56 document.querySelector(".content__box-2").classList.remove("ani-box2");57 document.querySelector(".content__box-3").classList.remove("ani-box3"); 58 document.querySelector(".skills__btn").classList.remove("ani__skills-btn"); 59 projects.forEach( el => {60 el.classList.add('ani_scale')61 });...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.fill('input[name="q"]', 'Hello');7 await page.click('input[value="Google Search"]');8 await page.waitForNavigation();9 console.log(await page.textContent('body'));10 await browser.close();11})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'google.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'google.png' });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'google.png' });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'google.png' });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: 'google.png' });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();45 const page = await context.newPage();46 await page.screenshot({ path: 'google.png' });47 await browser.close();48})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Google apps');7 await page.click('text=Calculator');8 await page.click('input[aria-label="Search Google or type a URL"]');9 await page.fill('input[aria-label="Search Google or type a URL"]', 'Hello World');10 await page.click('text=Google Search');11 await page.click('text=Images');12 await page.click('text=Maps');13 await page.click('text=Play');14 await page.click('text=News');15 await page.click('text=Gmail');16 await page.click('text=Drive');17 await page.click('text=Calendar');18 await page.click('text=Translate');19 await page.click('text=Photos');20 await page.click('text=Shopping');21 await page.click('text=Docs');22 await page.click('text=Earth');23 await page.click('text=Save');24 await page.click('text=More');25 await page.click('text=YouTube');26 await page.click('text=Contacts');27 await page.click('text=Duo');28 await page.click('text=Hangouts');29 await page.click('text=Keep');30 await page.click('text=Jamboard');31 await page.click('text=Classroom');32 await page.click('text=Meet');33 await page.click('text=Google Workspace');34 await page.click('text=Hangouts Meet');35 await page.click('text=Google Photos');36 await page.click('text=Google Drive');37 await page.click('text=Google Translate');38 await page.click('text=Google Calendar');39 await page.click('text=Google Earth');40 await page.click('text=Google Docs');41 await page.click('text=Google Sheets');42 await page.click('text=Google Slides');43 await page.click('text=Google Keep');44 await page.click('text=Google Classroom');45 await page.click('text=Google Jamboard');46 await page.click('text=Google Meet');47 await page.click('text=Google Contacts');48 await page.click('text=Google Duo');49 await page.click('text=Google Workspace');
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const elementHandle = await page.$('input[type="text"]');7 await elementHandle.type('Playwright');8 await elementHandle.press('Enter');9 await page.screenshot({ path: 'google.png' });10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 const elementHandle = await page.$('input[type="text"]');18 await elementHandle.type('Playwright');19 await elementHandle.press('Enter');20 await page.screenshot({ path: 'google.png' });21 await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25 const browser = await chromium.launch();26 const context = await browser.newContext();27 const page = await context.newPage();28 const elementHandle = await page.$('input[type="text"]');29 await elementHandle.type('Playwright');30 await elementHandle.press('Enter');31 await page.screenshot({ path: 'google.png' });32 await browser.close();33})();34const { chromium } = require('playwright');35(async () => {36 const browser = await chromium.launch();37 const context = await browser.newContext();38 const page = await context.newPage();39 const elementHandle = await page.$('input[type="text"]');40 await elementHandle.type('Playwright');41 await elementHandle.press('Enter');42 await page.screenshot({ path
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const title = await page.$eval('title', el => el.textContent);8 console.log(title);9 await browser.close();10 }11})();12const playwright = require('playwright');13(async () => {14 for (const browserType of BROWSER) {15 const browser = await playwright[browserType].launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const title = await page.$eval('title', el => el.textContent);19 console.log(title);20 await browser.close();21 }22})();23const playwright = require('playwright');24(async () => {25 for (const browserType of BROWSER) {26 const browser = await playwright[browserType].launch();27 const context = await browser.newContext();28 const page = await context.newPage();29 const title = await page.$eval('title', el => el.textContent);30 console.log(title);31 await browser.close();32 }33})();34const playwright = require('playwright');35(async () => {36 for (const browserType of BROWSER) {37 const browser = await playwright[browserType].launch();38 const context = await browser.newContext();39 const page = await context.newPage();40 const title = await page.$eval('title', el => el.textContent);41 console.log(title);42 await browser.close();43 }44})();45const playwright = require('playwright');46(async () => {47 for (const browser
Using AI Code Generation
1const { chromium } = require("playwright");2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click("input[name=q]");7 await page.fill("input[name=q]", "Playwright");8 await page.press("input[name=q]", "Enter");9 await page.screenshot({ path: "example.png" });10 await browser.close();11})();12const { chromium } = require("playwright");13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 await page.click("input[name=q]");18 await page.fill("input[name=q]", "Playwright");19 await page.press("input[name=q]", "Enter");20 await page.screenshot({ path: "example.png" });21 await browser.close();22})();23const { chromium } = require("playwright");24(async () => {25 const browser = await chromium.launch();26 const context = await browser.newContext();27 const page = await context.newPage();28 await page.click("input[name=q]");29 await page.fill("input[name=q]", "Playwright");30 await page.press("input[name=q]", "Enter");31 await page.screenshot({ path: "example.png" });32 await browser.close();33})();34const { chromium } = require("playwright");35(async () => {36 const browser = await chromium.launch();37 const context = await browser.newContext();38 const page = await context.newPage();39 await page.click("input[name=q]");40 await page.fill("input[name=q]", "Playwright");41 await page.press("input[name=q]", "Enter");42 await page.screenshot({ path: "example.png" });43 await browser.close();44})();45const { chromium } =
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.screenshot({ path: `example.png` });6 const link = await page.$('a');7 console.log(await link.getAttribute('href'));8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const page = await browser.newPage();14 await page.screenshot({ path: `example.png` });15 const link = await page.$('a');16 console.log(await link.getAttribute('href'));17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const page = await browser.newPage();23 await page.screenshot({ path: `example.png` });24 const links = await page.$$('a');25 console.log(await links.length);26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch();31 const page = await browser.newPage();32 await page.screenshot({ path: `example.png` });33 const links = await page.$$('a');34 console.log(await links.length);35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const page = await browser.newPage();41 await page.screenshot({ path: `example.png` });42 const links = await page.$$('a');43 console.log(await links.length);44 await browser.close();45})();46const { chromium } = require('playwright');47(async () => {48 const browser = await chromium.launch();49 const page = await browser.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 await page.screenshot({ path: 'google.png' });6 await browser.close();7})();
Using AI Code Generation
1const { chromium } = require("playwright");2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.screenshot({ path: "google.png" });6 await browser.close();7})();8const { chromium } = require("playwright");9(async () => {10 const browser = await chromium.launch();11 const page = await browser.newPage();12 await page.screenshot({ path: "google.png" });13 await browser.close();14})();15const { chromium } = require("playwright");16(async () => {17 const browser = await chromium.launch();18 const page = await browser.newPage();19 await page.screenshot({ path: "google.png" });20 await browser.close();21})();22const { chromium } = require("playwright");23(async () => {24 const browser = await chromium.launch();25 const page = await browser.newPage();26 await page.screenshot({ path: "google.png" });27 await browser.close();28})();29const { chromium } = require("playwright");30(async () => {31 const browser = await chromium.launch();32 const page = await browser.newPage();33 await page.screenshot({ path: "google.png" });34 await browser.close();35})();36const { chromium } = require("playwright");37(async () => {38 const browser = await chromium.launch();39 const page = await browser.newPage();40 await page.screenshot({ path: "google.png" });41 await browser.close();42})();43const { chromium } = require("playwright");44(async () => {
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3const browser = await chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page.click('text=Images');7await page.click('text=Videos');8await page.click('text=News');9await page.click('text=MSN');10await page.click('text=Office');11await page.click('text=O
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
