Best JavaScript code snippet using playwright-internal
Keyboard.js
Source:Keyboard.js  
1import React, { Component } from "react";2import "../App.css";3import MIDISounds from "midi-sounds-react";4import { Select } from "semantic-ui-react";5const STYLE = {6  keyWhite: {7    backgroundColor: "#dddddd",8    width: "1cm",9    height: "1.5cm"10  },11  keyWhitePress: {12    backgroundColor: "#c58fd8",13    width: "1cm",14    height: "0.75cm"15  },16  keyBlack: {17    backgroundColor: "#333333",18    width: "1cm",19    height: "1cm"20  },21  keyBlackPress: {22    backgroundColor: "#80df82",23    width: "1cm",24    height: "0.5cm"25  },26  keyNo: {27    width: "0.5cm",28    height: "0.5cm"29  },30  keyMargin: {31    width: "0.25cm",32    height: "0.5cm"33  }34};35class Keyboard extends Component {36  state = {37    midiNotes: [],38    selectedInstrument: 519,39    status: "?"40  };41  componentDidMount() {42    this.envelopes = [];43    this.startListening();44  }45  onSelectInstrument = e => {46    let list = e.target;47    let n = list.options[list.selectedIndex].getAttribute("value");48    this.setState({49      selectedInstrument: n50    });51    this.midiSounds.cacheInstrument(n);52  };53  createSelectItems() {54    if (this.midiSounds) {55      if (!this.items) {56        this.items = [];57        for (58          let i = 0;59          i < this.midiSounds.player.loader.instrumentKeys().length;60          i++61        ) {62          this.items.push(63            <option key={i} value={i}>64              {"" +65                (i + 0) +66                ". " +67                this.midiSounds.player.loader.instrumentInfo(i).title}68            </option>69          );70        }71      }72      return this.items;73    }74  }75  keyDown(n, v) {76    this.keyUp(n);77    let volume = 1;78    if (v) {79      volume = v;80    }81    this.envelopes[n] = this.midiSounds.player.queueWaveTable(82      this.midiSounds.audioContext,83      this.midiSounds.equalizer.input,84      window[85        this.midiSounds.player.loader.instrumentInfo(86          this.state.selectedInstrument87        ).variable88      ],89      0,90      n,91      9999,92      volume93    );94    this.setState(this.state);95  }96  keyUp(n) {97    if (this.envelopes) {98      if (this.envelopes[n]) {99        this.envelopes[n].cancel();100        this.envelopes[n] = null;101        this.setState(this.state);102      }103    }104  }105  pressed(n) {106    if (this.envelopes) {107      if (this.envelopes[n]) {108        return true;109      }110    }111    return false;112  }113  midiOnMIDImessage = event => {114    let data = event.data;115    let cmd = data[0] >> 4;116    let channel = data[0] & 0xf;117    let type = data[0] & 0xf0;118    let pitch = data[1];119    let velocity = data[2];120    switch (type) {121      case 144:122        this.keyDown(pitch, velocity / 127);123        break;124      case 128:125        this.keyUp(pitch);126        break;127    }128  };129  onMIDIOnStateChange = event => {130    this.setState({131      status:132        event.port.manufacturer + " " + event.port.name + " " + event.port.state133    });134  };135  requestMIDIAccessSuccess = midi => {136    console.log(midi);137    let inputs = midi.inputs.values();138    for (139      let input = inputs.next();140      input && !input.done;141      input = inputs.next()142    ) {143      input.value.onmidimessage = this.midiOnMIDImessage;144    }145    midi.onstatechange = this.onMIDIOnStateChange;146  };147  requestMIDIAccessFailure = e => {148    console.log("requestMIDIAccessFailure", e);149    this.setState({ status: "MIDI Access Failure" });150  };151  startListening() {152    this.setState({ status: "waiting" });153    if (navigator.requestMIDIAccess) {154      navigator155        .requestMIDIAccess()156        .then(this.requestMIDIAccessSuccess, this.requestMIDIAccessFailure);157    } else {158      this.setState({ status: "navigator.requestMIDIAccess undefined" });159    }160  }161  render() {162    return (163      <div className="Keyboard">164        <header className="Keyboard-header" />165        <h1 className="Keyboard-title">MIDI KEYBOARD</h1>166        <div>Instruments</div>167        <p>168          <select169            size="10"170            className="Keyboard-select"171            value={this.state.selectedInstrument}172            onChange={this.onSelectInstrument}173          >174            {this.createSelectItems()}175          </select>176        </p>177        <p className="status">Status: {this.state.status}</p>178        <table align="center">179          <tbody>180            <tr>181              <td style={STYLE.keyMargin} />182              <td183                style={184                  this.pressed(1 + 12 * 2)185                    ? STYLE.keyBlackPress186                    : STYLE.keyBlack187                }188                onMouseDown={e => this.keyDown(1 + 12 * 2)}189                onMouseUp={e => this.keyUp(1 + 12 * 2)}190                onMouseOut={e => this.keyUp(1 + 12 * 2)}191              />192              <td193                style={194                  this.pressed(3 + 12 * 2)195                    ? STYLE.keyBlackPress196                    : STYLE.keyBlack197                }198                onMouseDown={e => this.keyDown(3 + 12 * 2)}199                onMouseUp={e => this.keyUp(3 + 12 * 2)}200                onMouseOut={e => this.keyUp(3 + 12 * 2)}201              />202              <td style={STYLE.keyNo} />203              <td204                style={205                  this.pressed(6 + 12 * 2)206                    ? STYLE.keyBlackPress207                    : STYLE.keyBlack208                }209                onMouseDown={e => this.keyDown(6 + 12 * 2)}210                onMouseUp={e => this.keyUp(6 + 12 * 2)}211                onMouseOut={e => this.keyUp(6 + 12 * 2)}212              />213              <td214                style={215                  this.pressed(8 + 12 * 2)216                    ? STYLE.keyBlackPress217                    : STYLE.keyBlack218                }219                onMouseDown={e => this.keyDown(8 + 12 * 2)}220                onMouseUp={e => this.keyUp(8 + 12 * 2)}221                onMouseOut={e => this.keyUp(8 + 12 * 2)}222              />223              <td224                style={225                  this.pressed(10 + 12 * 2)226                    ? STYLE.keyBlackPress227                    : STYLE.keyBlack228                }229                onMouseDown={e => this.keyDown(10 + 12 * 2)}230                onMouseUp={e => this.keyUp(10 + 12 * 2)}231                onMouseOut={e => this.keyUp(10 + 12 * 2)}232              />233              <td style={STYLE.keyNo} />234              <td235                style={236                  this.pressed(1 + 12 * 3)237                    ? STYLE.keyBlackPress238                    : STYLE.keyBlack239                }240                onMouseDown={e => this.keyDown(1 + 12 * 3)}241                onMouseUp={e => this.keyUp(1 + 12 * 3)}242                onMouseOut={e => this.keyUp(1 + 12 * 3)}243              />244              <td245                style={246                  this.pressed(3 + 12 * 3)247                    ? STYLE.keyBlackPress248                    : STYLE.keyBlack249                }250                onMouseDown={e => this.keyDown(3 + 12 * 3)}251                onMouseUp={e => this.keyUp(3 + 12 * 3)}252                onMouseOut={e => this.keyUp(3 + 12 * 3)}253              />254              <td style={STYLE.keyNo} />255              <td256                style={257                  this.pressed(6 + 12 * 3)258                    ? STYLE.keyBlackPress259                    : STYLE.keyBlack260                }261                onMouseDown={e => this.keyDown(6 + 12 * 3)}262                onMouseUp={e => this.keyUp(6 + 12 * 3)}263                onMouseOut={e => this.keyUp(6 + 12 * 3)}264              />265              <td266                style={267                  this.pressed(8 + 12 * 3)268                    ? STYLE.keyBlackPress269                    : STYLE.keyBlack270                }271                onMouseDown={e => this.keyDown(8 + 12 * 3)}272                onMouseUp={e => this.keyUp(8 + 12 * 3)}273                onMouseOut={e => this.keyUp(8 + 12 * 3)}274              />275              <td276                style={277                  this.pressed(10 + 12 * 3)278                    ? STYLE.keyBlackPress279                    : STYLE.keyBlack280                }281                onMouseDown={e => this.keyDown(10 + 12 * 3)}282                onMouseUp={e => this.keyUp(10 + 12 * 3)}283                onMouseOut={e => this.keyUp(10 + 12 * 3)}284              />285              <td style={STYLE.keyNo} />286              <td287                style={288                  this.pressed(1 + 12 * 4)289                    ? STYLE.keyBlackPress290                    : STYLE.keyBlack291                }292                onMouseDown={e => this.keyDown(1 + 12 * 4)}293                onMouseUp={e => this.keyUp(1 + 12 * 4)}294                onMouseOut={e => this.keyUp(1 + 12 * 4)}295              />296              <td297                style={298                  this.pressed(3 + 12 * 4)299                    ? STYLE.keyBlackPress300                    : STYLE.keyBlack301                }302                onMouseDown={e => this.keyDown(3 + 12 * 4)}303                onMouseUp={e => this.keyUp(3 + 12 * 4)}304                onMouseOut={e => this.keyUp(3 + 12 * 4)}305              />306              <td style={STYLE.keyNo} />307              <td308                style={309                  this.pressed(6 + 12 * 4)310                    ? STYLE.keyBlackPress311                    : STYLE.keyBlack312                }313                onMouseDown={e => this.keyDown(6 + 12 * 4)}314                onMouseUp={e => this.keyUp(6 + 12 * 4)}315                onMouseOut={e => this.keyUp(6 + 12 * 4)}316              />317              <td318                style={319                  this.pressed(8 + 12 * 4)320                    ? STYLE.keyBlackPress321                    : STYLE.keyBlack322                }323                onMouseDown={e => this.keyDown(8 + 12 * 4)}324                onMouseUp={e => this.keyUp(8 + 12 * 4)}325                onMouseOut={e => this.keyUp(8 + 12 * 4)}326              />327              <td328                style={329                  this.pressed(10 + 12 * 4)330                    ? STYLE.keyBlackPress331                    : STYLE.keyBlack332                }333                onMouseDown={e => this.keyDown(10 + 12 * 4)}334                onMouseUp={e => this.keyUp(10 + 12 * 4)}335                onMouseOut={e => this.keyUp(10 + 12 * 4)}336              />337              <td style={STYLE.keyNo} />338              <td339                style={340                  this.pressed(1 + 12 * 5)341                    ? STYLE.keyBlackPress342                    : STYLE.keyBlack343                }344                onMouseDown={e => this.keyDown(1 + 12 * 5)}345                onMouseUp={e => this.keyUp(1 + 12 * 5)}346                onMouseOut={e => this.keyUp(1 + 12 * 5)}347              />348              <td349                style={350                  this.pressed(3 + 12 * 5)351                    ? STYLE.keyBlackPress352                    : STYLE.keyBlack353                }354                onMouseDown={e => this.keyDown(3 + 12 * 5)}355                onMouseUp={e => this.keyUp(3 + 12 * 5)}356                onMouseOut={e => this.keyUp(3 + 12 * 5)}357              />358              <td style={STYLE.keyNo} />359              <td360                style={361                  this.pressed(6 + 12 * 5)362                    ? STYLE.keyBlackPress363                    : STYLE.keyBlack364                }365                onMouseDown={e => this.keyDown(6 + 12 * 5)}366                onMouseUp={e => this.keyUp(6 + 12 * 5)}367                onMouseOut={e => this.keyUp(6 + 12 * 5)}368              />369              <td370                style={371                  this.pressed(8 + 12 * 5)372                    ? STYLE.keyBlackPress373                    : STYLE.keyBlack374                }375                onMouseDown={e => this.keyDown(8 + 12 * 5)}376                onMouseUp={e => this.keyUp(8 + 12 * 5)}377                onMouseOut={e => this.keyUp(8 + 12 * 5)}378              />379              <td380                style={381                  this.pressed(10 + 12 * 5)382                    ? STYLE.keyBlackPress383                    : STYLE.keyBlack384                }385                onMouseDown={e => this.keyDown(10 + 12 * 5)}386                onMouseUp={e => this.keyUp(10 + 12 * 5)}387                onMouseOut={e => this.keyUp(10 + 12 * 5)}388              />389              <td style={STYLE.keyNo} />390            </tr>391          </tbody>392        </table>393        <table align="center">394          <tbody>395            <tr>396              <td397                style={398                  this.pressed(0 + 12 * 2)399                    ? STYLE.keyWhitePress400                    : STYLE.keyWhite401                }402                onMouseDown={e => this.keyDown(0 + 12 * 2)}403                onMouseUp={e => this.keyUp(0 + 12 * 2)}404                onMouseOut={e => this.keyUp(0 + 12 * 2)}405              />406              <td407                style={408                  this.pressed(2 + 12 * 2)409                    ? STYLE.keyWhitePress410                    : STYLE.keyWhite411                }412                onMouseDown={e => this.keyDown(2 + 12 * 2)}413                onMouseUp={e => this.keyUp(2 + 12 * 2)}414                onMouseOut={e => this.keyUp(2 + 12 * 2)}415              />416              <td417                style={418                  this.pressed(4 + 12 * 2)419                    ? STYLE.keyWhitePress420                    : STYLE.keyWhite421                }422                onMouseDown={e => this.keyDown(4 + 12 * 2)}423                onMouseUp={e => this.keyUp(4 + 12 * 2)}424                onMouseOut={e => this.keyUp(4 + 12 * 2)}425              />426              <td427                style={428                  this.pressed(5 + 12 * 2)429                    ? STYLE.keyWhitePress430                    : STYLE.keyWhite431                }432                onMouseDown={e => this.keyDown(5 + 12 * 2)}433                onMouseUp={e => this.keyUp(5 + 12 * 2)}434                onMouseOut={e => this.keyUp(5 + 12 * 2)}435              />436              <td437                style={438                  this.pressed(7 + 12 * 2)439                    ? STYLE.keyWhitePress440                    : STYLE.keyWhite441                }442                onMouseDown={e => this.keyDown(7 + 12 * 2)}443                onMouseUp={e => this.keyUp(7 + 12 * 2)}444                onMouseOut={e => this.keyUp(7 + 12 * 2)}445              />446              <td447                style={448                  this.pressed(9 + 12 * 2)449                    ? STYLE.keyWhitePress450                    : STYLE.keyWhite451                }452                onMouseDown={e => this.keyDown(9 + 12 * 2)}453                onMouseUp={e => this.keyUp(9 + 12 * 2)}454                onMouseOut={e => this.keyUp(9 + 12 * 2)}455              />456              <td457                style={458                  this.pressed(11 + 12 * 2)459                    ? STYLE.keyWhitePress460                    : STYLE.keyWhite461                }462                onMouseDown={e => this.keyDown(11 + 12 * 2)}463                onMouseUp={e => this.keyUp(11 + 12 * 2)}464                onMouseOut={e => this.keyUp(11 + 12 * 2)}465              />466              <td467                style={468                  this.pressed(0 + 12 * 3)469                    ? STYLE.keyWhitePress470                    : STYLE.keyWhite471                }472                onMouseDown={e => this.keyDown(0 + 12 * 3)}473                onMouseUp={e => this.keyUp(0 + 12 * 3)}474                onMouseOut={e => this.keyUp(0 + 12 * 3)}475              />476              <td477                style={478                  this.pressed(2 + 12 * 3)479                    ? STYLE.keyWhitePress480                    : STYLE.keyWhite481                }482                onMouseDown={e => this.keyDown(2 + 12 * 3)}483                onMouseUp={e => this.keyUp(2 + 12 * 3)}484                onMouseOut={e => this.keyUp(2 + 12 * 3)}485              />486              <td487                style={488                  this.pressed(4 + 12 * 3)489                    ? STYLE.keyWhitePress490                    : STYLE.keyWhite491                }492                onMouseDown={e => this.keyDown(4 + 12 * 3)}493                onMouseUp={e => this.keyUp(4 + 12 * 3)}494                onMouseOut={e => this.keyUp(4 + 12 * 3)}495              />496              <td497                style={498                  this.pressed(5 + 12 * 3)499                    ? STYLE.keyWhitePress500                    : STYLE.keyWhite501                }502                onMouseDown={e => this.keyDown(5 + 12 * 3)}503                onMouseUp={e => this.keyUp(5 + 12 * 3)}504                onMouseOut={e => this.keyUp(5 + 12 * 3)}505              />506              <td507                style={508                  this.pressed(7 + 12 * 3)509                    ? STYLE.keyWhitePress510                    : STYLE.keyWhite511                }512                onMouseDown={e => this.keyDown(7 + 12 * 3)}513                onMouseUp={e => this.keyUp(7 + 12 * 3)}514                onMouseOut={e => this.keyUp(7 + 12 * 3)}515              />516              <td517                style={518                  this.pressed(9 + 12 * 3)519                    ? STYLE.keyWhitePress520                    : STYLE.keyWhite521                }522                onMouseDown={e => this.keyDown(9 + 12 * 3)}523                onMouseUp={e => this.keyUp(9 + 12 * 3)}524                onMouseOut={e => this.keyUp(9 + 12 * 3)}525              />526              <td527                style={528                  this.pressed(11 + 12 * 3)529                    ? STYLE.keyWhitePress530                    : STYLE.keyWhite531                }532                onMouseDown={e => this.keyDown(11 + 12 * 3)}533                onMouseUp={e => this.keyUp(11 + 12 * 3)}534                onMouseOut={e => this.keyUp(11 + 12 * 3)}535              />536              <td537                style={538                  this.pressed(0 + 12 * 4)539                    ? STYLE.keyWhitePress540                    : STYLE.keyWhite541                }542                onMouseDown={e => this.keyDown(0 + 12 * 4)}543                onMouseUp={e => this.keyUp(0 + 12 * 4)}544                onMouseOut={e => this.keyUp(0 + 12 * 4)}545              />546              <td547                style={548                  this.pressed(2 + 12 * 4)549                    ? STYLE.keyWhitePress550                    : STYLE.keyWhite551                }552                onMouseDown={e => this.keyDown(2 + 12 * 4)}553                onMouseUp={e => this.keyUp(2 + 12 * 4)}554                onMouseOut={e => this.keyUp(2 + 12 * 4)}555              />556              <td557                style={558                  this.pressed(4 + 12 * 4)559                    ? STYLE.keyWhitePress560                    : STYLE.keyWhite561                }562                onMouseDown={e => this.keyDown(4 + 12 * 4)}563                onMouseUp={e => this.keyUp(4 + 12 * 4)}564                onMouseOut={e => this.keyUp(4 + 12 * 4)}565              />566              <td567                style={568                  this.pressed(5 + 12 * 4)569                    ? STYLE.keyWhitePress570                    : STYLE.keyWhite571                }572                onMouseDown={e => this.keyDown(5 + 12 * 4)}573                onMouseUp={e => this.keyUp(5 + 12 * 4)}574                onMouseOut={e => this.keyUp(5 + 12 * 4)}575              />576              <td577                style={578                  this.pressed(7 + 12 * 4)579                    ? STYLE.keyWhitePress580                    : STYLE.keyWhite581                }582                onMouseDown={e => this.keyDown(7 + 12 * 4)}583                onMouseUp={e => this.keyUp(7 + 12 * 4)}584                onMouseOut={e => this.keyUp(7 + 12 * 4)}585              />586              <td587                style={588                  this.pressed(9 + 12 * 4)589                    ? STYLE.keyWhitePress590                    : STYLE.keyWhite591                }592                onMouseDown={e => this.keyDown(9 + 12 * 4)}593                onMouseUp={e => this.keyUp(9 + 12 * 4)}594                onMouseOut={e => this.keyUp(9 + 12 * 4)}595              />596              <td597                style={598                  this.pressed(11 + 12 * 4)599                    ? STYLE.keyWhitePress600                    : STYLE.keyWhite601                }602                onMouseDown={e => this.keyDown(11 + 12 * 4)}603                onMouseUp={e => this.keyUp(11 + 12 * 4)}604                onMouseOut={e => this.keyUp(11 + 12 * 4)}605              />606              <td607                style={608                  this.pressed(0 + 12 * 5)609                    ? STYLE.keyWhitePress610                    : STYLE.keyWhite611                }612                onMouseDown={e => this.keyDown(0 + 12 * 5)}613                onMouseUp={e => this.keyUp(0 + 12 * 5)}614                onMouseOut={e => this.keyUp(0 + 12 * 5)}615              />616              <td617                style={618                  this.pressed(2 + 12 * 5)619                    ? STYLE.keyWhitePress620                    : STYLE.keyWhite621                }622                onMouseDown={e => this.keyDown(2 + 12 * 5)}623                onMouseUp={e => this.keyUp(2 + 12 * 5)}624                onMouseOut={e => this.keyUp(2 + 12 * 5)}625              />626              <td627                style={628                  this.pressed(4 + 12 * 5)629                    ? STYLE.keyWhitePress630                    : STYLE.keyWhite631                }632                onMouseDown={e => this.keyDown(4 + 12 * 5)}633                onMouseUp={e => this.keyUp(4 + 12 * 5)}634                onMouseOut={e => this.keyUp(4 + 12 * 5)}635              />636              <td637                style={638                  this.pressed(5 + 12 * 5)639                    ? STYLE.keyWhitePress640                    : STYLE.keyWhite641                }642                onMouseDown={e => this.keyDown(5 + 12 * 5)}643                onMouseUp={e => this.keyUp(5 + 12 * 5)}644                onMouseOut={e => this.keyUp(5 + 12 * 5)}645              />646              <td647                style={648                  this.pressed(7 + 12 * 5)649                    ? STYLE.keyWhitePress650                    : STYLE.keyWhite651                }652                onMouseDown={e => this.keyDown(7 + 12 * 5)}653                onMouseUp={e => this.keyUp(7 + 12 * 5)}654                onMouseOut={e => this.keyUp(7 + 12 * 5)}655              />656              <td657                style={658                  this.pressed(9 + 12 * 5)659                    ? STYLE.keyWhitePress660                    : STYLE.keyWhite661                }662                onMouseDown={e => this.keyDown(9 + 12 * 5)}663                onMouseUp={e => this.keyUp(9 + 12 * 5)}664                onMouseOut={e => this.keyUp(9 + 12 * 5)}665              />666              <td667                style={668                  this.pressed(11 + 12 * 5)669                    ? STYLE.keyWhitePress670                    : STYLE.keyWhite671                }672                onMouseDown={e => this.keyDown(11 + 12 * 5)}673                onMouseUp={e => this.keyUp(11 + 12 * 5)}674                onMouseOut={e => this.keyUp(11 + 12 * 5)}675              />676              <td style={STYLE.keyMargin} />677            </tr>678          </tbody>679        </table>680        <div className="midi-sounds">681          <MIDISounds682            ref={ref => (this.midiSounds = ref)}683            appElementName="root"684            instruments={[this.state.selectedInstrument]}685          />686        </div>687        <p className="Keyboard-intro">Click keys or use MIDI keyboard.</p>688      </div>689    );690  }691}...gestion.js
Source:gestion.js  
1const montant1_1 = document.getElementById("montant1_1");2const montant1_2 = document.getElementById("montant1_2");3const montant2_1 = document.getElementById("montant2_1");4const montant2_2 = document.getElementById("montant2_2");5const montant3_1 = document.getElementById("montant3_1");6const montant3_2 = document.getElementById("montant3_2");7const montant4_1 = document.getElementById("montant4_1");8const montant4_2 = document.getElementById("montant4_2");9const montant5_1 = document.getElementById("montant5_1");10const montant5_2 = document.getElementById("montant5_2");11const montant6_1 = document.getElementById("montant6_1");12const montant6_2 = document.getElementById("montant6_2");13const montant7_1 = document.getElementById("montant7_1");14const montant7_2 = document.getElementById("montant7_2");15const montant8_1 = document.getElementById("montant8_1");16const montant8_2 = document.getElementById("montant8_2");17const montant9_1 = document.getElementById("montant9_1");18const montant9_2 = document.getElementById("montant9_2");19const montant10_1 = document.getElementById("montant10_1");20const montant10_2 = document.getElementById("montant10_2");21const montant11_1 = document.getElementById("montant11_1");22const montant11_2 = document.getElementById("montant11_2");23const montant12_1 = document.getElementById("montant12_1");24const montant12_2 = document.getElementById("montant12_2");25const montant13_1 = document.getElementById("montant13_1");26const montant13_2 = document.getElementById("montant13_2");27const montant14_1 = document.getElementById("montant14_1");28const montant14_2 = document.getElementById("montant14_2");29const montant15_1 = document.getElementById("montant15_1");30const montant15_2 = document.getElementById("montant15_2");31const montant16_1 = document.getElementById("montant16_1");32const montant16_2 = document.getElementById("montant16_2");33const montant17_1 = document.getElementById("montant17_1");34const montant17_2 = document.getElementById("montant17_2");35const montant18_1 = document.getElementById("montant18_1");36const montant18_2 = document.getElementById("montant18_2");37const montant19_1 = document.getElementById("montant19_1");38const montant19_2 = document.getElementById("montant19_2");39const montan20_1 = document.getElementById("montant20_1");40const montant20_2 = document.getElementById("montant20_2");41const total_plus = document.getElementById("total_plus");42const total_moins = document.getElementById("total_moins");43const budget = document.getElementById("budget");44// Déclaration des écouteurs45montant1_1.addEventListener("keyup", calcul);46montant1_2.addEventListener("keyup", calcul);47montant2_1.addEventListener("keyup", calcul);48montant2_2.addEventListener("keyup", calcul);49montant3_1.addEventListener("keyup", calcul);50montant3_2.addEventListener("keyup", calcul);51montant4_1.addEventListener("keyup", calcul);52montant4_2.addEventListener("keyup", calcul);53montant5_1.addEventListener("keyup", calcul);54montant5_2.addEventListener("keyup", calcul);55montant6_1.addEventListener("keyup", calcul);56montant6_2.addEventListener("keyup", calcul);57montant7_1.addEventListener("keyup", calcul);58montant7_2.addEventListener("keyup", calcul);59montant8_1.addEventListener("keyup", calcul);60montant8_2.addEventListener("keyup", calcul);61montant9_1.addEventListener("keyup", calcul);62montant9_2.addEventListener("keyup", calcul);63montant10_1.addEventListener("keyup", calcul);64montant10_2.addEventListener("keyup", calcul);65montant11_1.addEventListener("keyup", calcul);66montant11_2.addEventListener("keyup", calcul);67montant12_1.addEventListener("keyup", calcul);68montant12_2.addEventListener("keyup", calcul);69montant13_1.addEventListener("keyup", calcul);70montant13_2.addEventListener("keyup", calcul);71montant14_1.addEventListener("keyup", calcul);72montant14_2.addEventListener("keyup", calcul);73montant15_1.addEventListener("keyup", calcul);74montant15_2.addEventListener("keyup", calcul);75montant16_1.addEventListener("keyup", calcul);76montant16_2.addEventListener("keyup", calcul);77montant17_1.addEventListener("keyup", calcul);78montant17_2.addEventListener("keyup", calcul);79montant18_1.addEventListener("keyup", calcul);80montant18_2.addEventListener("keyup", calcul);81montant19_1.addEventListener("keyup", calcul);82montant19_2.addEventListener("keyup", calcul);83montant20_1.addEventListener("keyup", calcul);84montant20_2.addEventListener("keyup", calcul);85function calcul() {86    // Ligne 187    if (Number(montant1_1.value) > 0) {88        montant1_2.disabled = true;89    }90    if (Number(montant1_1.value) == 0) {91        montant1_2.disabled = false;92    }93    if (Number(montant1_2.value) > 0) {94        montant1_1.disabled = true;95    }96    if (Number(montant1_2.value) == 0) {97        montant1_1.disabled = false;98    }99    // Ligne 2100    if (Number(montant2_1.value) > 0) {101        montant2_2.disabled = true;102    }103    if (Number(montant2_1.value) == 0) {104        montant2_2.disabled = false;105    }106    if (Number(montant2_2.value) > 0) {107        montant2_1.disabled = true;108    }109    if (Number(montant2_2.value) == 0) {110        montant2_1.disabled = false;111    }112    // Ligne 3113    if (Number(montant3_1.value) > 0) {114        montant3_2.disabled = true;115    }116    if (Number(montant3_1.value) == 0) {117        montant3_2.disabled = false;118    }119    if (Number(montant3_2.value) > 0) {120        montant3_1.disabled = true;121    }122    if (Number(montant3_2.value) == 0) {123        montant3_1.disabled = false;124    }125    // Ligne 4126    if (Number(montant4_1.value) > 0) {127        montant4_2.disabled = true;128    }129    if (Number(montant4_1.value) == 0) {130        montant4_2.disabled = false;131    }132    if (Number(montant4_2.value) > 0) {133        montant4_1.disabled = true;134    }135    if (Number(montant4_2.value) == 0) {136        montant4_1.disabled = false;137    }138    // Ligne 5139    if (Number(montant5_1.value) > 0) {140        montant5_2.disabled = true;141    }142    if (Number(montant5_1.value) == 0) {143        montant5_2.disabled = false;144    }145    if (Number(montant5_2.value) > 0) {146        montant5_1.disabled = true;147    }148    if (Number(montant5_2.value) == 0) {149        montant5_1.disabled = false;150    }151    // Ligne 6152    if (Number(montant6_1.value) > 0) {153        montant6_2.disabled = true;154    }155    if (Number(montant6_1.value) == 0) {156        montant6_2.disabled = false;157    }158    if (Number(montant6_2.value) > 0) {159        montant6_1.disabled = true;160    }161    if (Number(montant6_2.value) == 0) {162        montant6_1.disabled = false;163    }164    // Ligne 7165    if (Number(montant7_1.value) > 0) {166        montant7_2.disabled = true;167    }168    if (Number(montant7_1.value) == 0) {169        montant7_2.disabled = false;170    }171    if (Number(montant7_2.value) > 0) {172        montant7_1.disabled = true;173    }174    if (Number(montant7_2.value) == 0) {175        montant7_1.disabled = false;176    }177    // Ligne 8178    if (Number(montant8_1.value) > 0) {179        montant8_2.disabled = true;180    }181    if (Number(montant8_1.value) == 0) {182        montant8_2.disabled = false;183    }184    if (Number(montant8_2.value) > 0) {185        montant8_1.disabled = true;186    }187    if (Number(montant8_2.value) == 0) {188        montant8_1.disabled = false;189    }190    // Ligne 9191    if (Number(montant9_1.value) > 0) {192        montant9_2.disabled = true;193    }194    if (Number(montant9_1.value) == 0) {195        montant9_2.disabled = false;196    }197    if (Number(montant9_2.value) > 0) {198        montant9_1.disabled = true;199    }200    if (Number(montant9_2.value) == 0) {201        montant9_1.disabled = false;202    }203    // Ligne 10204    if (Number(montant10_1.value) > 0) {205        montant10_2.disabled = true;206    }207    if (Number(montant10_1.value) == 0) {208        montant10_2.disabled = false;209    }210    if (Number(montant10_2.value) > 0) {211        montant10_1.disabled = true;212    }213    if (Number(montant10_2.value) == 0) {214        montant10_1.disabled = false;215    }216        // Ligne 11217        if (Number(montant11_1.value) > 0) {218            montant11_2.disabled = true;219        }220    221        if (Number(montant11_1.value) == 0) {222            montant11_2.disabled = false;223        }224    225        if (Number(montant11_2.value) > 0) {226            montant11_1.disabled = true;227        }228    229        if (Number(montant11_2.value) == 0) {230            montant11_1.disabled = false;231        }232    233        // Ligne 12234        if (Number(montant12_1.value) > 0) {235            montant12_2.disabled = true;236        }237    238        if (Number(montant12_1.value) == 0) {239            montant12_2.disabled = false;240        }241    242        if (Number(montant12_2.value) > 0) {243            montant12_1.disabled = true;244        }245    246        if (Number(montant12_2.value) == 0) {247            montant12_1.disabled = false;248        }249    250        // Ligne 13251        if (Number(montant13_1.value) > 0) {252            montant13_2.disabled = true;253        }254    255        if (Number(montant13_1.value) == 0) {256            montant13_2.disabled = false;257        }258    259        if (Number(montant13_2.value) > 0) {260            montant13_1.disabled = true;261        }262    263        if (Number(montant13_2.value) == 0) {264            montant13_1.disabled = false;265        }266    267        // Ligne 14268        if (Number(montant14_1.value) > 0) {269            montant14_2.disabled = true;270        }271    272        if (Number(montant14_1.value) == 0) {273            montant14_2.disabled = false;274        }275    276        if (Number(montant14_2.value) > 0) {277            montant4_1.disabled = true;278        }279    280        if (Number(montant14_2.value) == 0) {281            montant14_1.disabled = false;282        }283    284        // Ligne 15285        if (Number(montant15_1.value) > 0) {286            montant15_2.disabled = true;287        }288    289        if (Number(montant15_1.value) == 0) {290            montant15_2.disabled = false;291        }292    293        if (Number(montant15_2.value) > 0) {294            montant15_1.disabled = true;295        }296    297        if (Number(montant15_2.value) == 0) {298            montant15_1.disabled = false;299        }300    301        // Ligne 16302        if (Number(montant16_1.value) > 0) {303            montant16_2.disabled = true;304        }305    306        if (Number(montant16_1.value) == 0) {307            montant16_2.disabled = false;308        }309    310        if (Number(montant16_2.value) > 0) {311            montant16_1.disabled = true;312        }313    314        if (Number(montant16_2.value) == 0) {315            montant16_1.disabled = false;316        }317    318        // Ligne 17319        if (Number(montant17_1.value) > 0) {320            montant17_2.disabled = true;321        }322    323        if (Number(montant17_1.value) == 0) {324            montant17_2.disabled = false;325        }326    327        if (Number(montant17_2.value) > 0) {328            montant17_1.disabled = true;329        }330    331        if (Number(montant17_2.value) == 0) {332            montant17_1.disabled = false;333        }334    335        // Ligne 18336        if (Number(montant18_1.value) > 0) {337            montant18_2.disabled = true;338        }339    340        if (Number(montant18_1.value) == 0) {341            montant18_2.disabled = false;342        }343    344        if (Number(montant18_2.value) > 0) {345            montant18_1.disabled = true;346        }347    348        if (Number(montant18_2.value) == 0) {349            montant18_1.disabled = false;350        }351    352    353        // Ligne 19354        if (Number(montant19_1.value) > 0) {355            montant19_2.disabled = true;356        }357    358        if (Number(montant19_1.value) == 0) {359            montant19_2.disabled = false;360        }361    362        if (Number(montant19_2.value) > 0) {363            montant19_1.disabled = true;364        }365    366        if (Number(montant19_2.value) == 0) {367            montant19_1.disabled = false;368        }369    370        // Ligne 20371        if (Number(montant20_1.value) > 0) {372            montant10_2.disabled = true;373        }374    375        if (Number(montant20_1.value) == 0) {376            montant20_2.disabled = false;377        }378    379        if (Number(montant20_2.value) > 0) {380            montant20_1.disabled = true;381        }382    383        if (Number(montant20_2.value) == 0) {384            montant20_1.disabled = false;385        }386    // Calcul du total des colonnes387    total_plus.value = Number(montant1_1.value) + Number(montant2_1.value) + Number(montant3_1.value) + Number(montant4_1.value) + Number(montant5_1.value) + Number(montant6_1.value) + Number(montant7_1.value) + Number(montant8_1.value) + Number(montant9_1.value) + Number(montant10_1.value) + Number(montant11_1.value) + Number(montant12_1.value) + Number(montant13_1.value) + Number(montant14_1.value) + Number(montant15_1.value) + Number(montant16_1.value) + Number(montant17_1.value) + Number(montant18_1.value) + Number(montant19_1.value) + Number(montant20_1.value);388    total_moins.value = Number(montant1_2.value) + Number(montant2_2.value) + Number(montant3_2.value) + Number(montant4_2.value) + Number(montant5_2.value) + Number(montant6_2.value) + Number(montant7_2.value) + Number(montant8_2.value) + Number(montant9_2.value) + Number(montant10_2.value) + Number(montant11_2.value) + Number(montant12_2.value) + Number(montant13_2.value) + Number(montant14_2.value) + Number(montant15_2.value) + Number(montant16_2.value) + Number(montant17_2.value) + Number(montant18_2.value) + Number(montant19_2.value) + Number(montant20_2.value)389    // Calcul du budget restant390    budget.value = total_plus.value - total_moins.value;391    if (budget.value >= 0) {392        budget.style.color = "green";393    }394    else {395        budget.style.color = "red";396    }...search.js
Source:search.js  
...94  }), new Jets({95    searchTag: "#gestures_search",96    contentTag: "#gestures_list ul"97})];98  $("#playthrough_search").keyup(function() {99    $("#playthrough_list").unhighlight();100    $("#playthrough_list").highlight($(this).val());101  });102  $("#quest_order_tldr_search").keyup(function() {103    $("#quest_order_tldr_list").unhighlight();104    $("#quest_order_tldr_list").highlight($(this).val());105  });106  $("#npc_quests_search").keyup(function() {107    $("#npc_quests_list").unhighlight();108    $("#npc_quests_list").highlight($(this).val());109  });110  $("#achievements_search").keyup(function() {111    $("#achievements_list").unhighlight();112    $("#achievements_list").highlight($(this).val());113  });114  $("#legendaries_search").keyup(function() {115    $("#legendaries_list").unhighlight();116    $("#legendaries_list").highlight($(this).val());117  });118  $("#bosses_search").keyup(function() {119    $("#bosses_list").unhighlight();120    $("#bosses_list").highlight($(this).val());121  });122  $("#legacy_search").keyup(function() {123    $("#legacy_list").unhighlight();124    $("#legacy_list").highlight($(this).val());125  });126  $("#caves_search").keyup(function() {127    $("#caves_list").unhighlight();128    $("#caves_list").highlight($(this).val());129  });130  $("#evergaols_search").keyup(function() {131    $("#evergaols_list").unhighlight();132    $("#evergaols_list").highlight($(this).val());133  });134  $("#illusory_walls_search").keyup(function() {135    $("#illusory_walls_list").unhighlight();136    $("#illusory_walls_list").highlight($(this).val());137  });138  $("#weapons_search").keyup(function() {139    $("#weapons_list").unhighlight();140    $("#weapons_list").highlight($(this).val());141  });142  $("#armor_search").keyup(function() {143    $("#armor_list").unhighlight();144    $("#armor_list").highlight($(this).val());145  });146  $("#talismans_search").keyup(function() {147    $("#talismans_list").unhighlight();148    $("#talismans_list").highlight($(this).val());149  });150  $("#incantations_search").keyup(function() {151    $("#incantations_list").unhighlight();152    $("#incantations_list").highlight($(this).val());153  });154  $("#sorceries_search").keyup(function() {155    $("#sorceries_list").unhighlight();156    $("#sorceries_list").highlight($(this).val());157  });158  $("#ashesofwar_search").keyup(function() {159    $("#ashesofwar_list").unhighlight();160    $("#ashesofwar_list").highlight($(this).val());161  });162  $("#spirit_ashes_search").keyup(function() {163    $("#spirit_ashes_list").unhighlight();164    $("#spirit_ashes_list").highlight($(this).val());165  });166  $("#flasks_search").keyup(function() {167    $("#flasks_list").unhighlight();168    $("#flasks_list").highlight($(this).val());169  });170  $("#crystal_tears_search").keyup(function() {171    $("#crystal_tears_list").unhighlight();172    $("#crystal_tears_list").highlight($(this).val());173  });174  $("#memory_stones_talisman_pouches_search").keyup(function() {175    $("#memory_stones_talisman_pouches_list").unhighlight();176    $("#memory_stones_talisman_pouches_list").highlight($(this).val());177  });178  $("#scrolls_prayerbooks_search").keyup(function() {179    $("#scrolls_prayerbooks_list").unhighlight();180    $("#scrolls_prayerbooks_list").highlight($(this).val());181  });182  $("#whetstones_search").keyup(function() {183    $("#whetstones_list").unhighlight();184    $("#whetstones_list").highlight($(this).val());185  });186  $("#bell_bearings_search").keyup(function() {187    $("#bell_bearings_list").unhighlight();188    $("#bell_bearings_list").highlight($(this).val());189  });190  $("#cookbooks_search").keyup(function() {191    $("#cookbooks_list").unhighlight();192    $("#cookbooks_list").highlight($(this).val());193  });194  $("#ancient_dragon_smithing_stones_search").keyup(function() {195    $("#ancient_dragon_smithing_stones_list").unhighlight();196    $("#ancient_dragon_smithing_stones_list").highlight($(this).val());197  });198  $("#remembrances_mausoleums_search").keyup(function() {199    $("#remembrances_mausoleums_list").unhighlight();200    $("#remembrances_mausoleums_list").highlight($(this).val());201  });202  $("#great_runes_search").keyup(function() {203    $("#great_runes_list").unhighlight();204    $("#great_runes_list").highlight($(this).val());205  });206  $("#dragon_hearts_death_roots_search").keyup(function() {207    $("#dragon_hearts_death_roots_list").unhighlight();208    $("#dragon_hearts_death_roots_list").highlight($(this).val());209  });210  $("#paintings_search").keyup(function() {211    $("#paintings_list").unhighlight();212    $("#paintings_list").highlight($(this).val());213  });214  $("#pots_bottles_search").keyup(function() {215    $("#pots_bottles_list").unhighlight();216    $("#pots_bottles_list").highlight($(this).val());217  });218  $("#gestures_search").keyup(function() {219    $("#gestures_list").unhighlight();220    $("#gestures_list").highlight($(this).val());221  });222});...browsers.js
Source:browsers.js  
1(function(){2	Syn.key.browsers = {3		webkit : {4			'prevent':5			 {"keyup":[],"keydown":["char","keypress"],"keypress":["char"]},6			'character':7			 {"keydown":[0,"key"],"keypress":["char","char"],"keyup":[0,"key"]},8			'specialChars':9			 {"keydown":[0,"char"],"keyup":[0,"char"]},10			'navigation':11			 {"keydown":[0,"key"],"keyup":[0,"key"]},12			'special':13			 {"keydown":[0,"key"],"keyup":[0,"key"]},14			'tab':15			 {"keydown":[0,"char"],"keyup":[0,"char"]},16			'pause-break':17			 {"keydown":[0,"key"],"keyup":[0,"key"]},18			'caps':19			 {"keydown":[0,"key"],"keyup":[0,"key"]},20			'escape':21			 {"keydown":[0,"key"],"keyup":[0,"key"]},22			'num-lock':23			 {"keydown":[0,"key"],"keyup":[0,"key"]},24			'scroll-lock':25			 {"keydown":[0,"key"],"keyup":[0,"key"]},26			'print':27			 {"keyup":[0,"key"]},28			'function':29			 {"keydown":[0,"key"],"keyup":[0,"key"]},30			'\r':31			 {"keydown":[0,"key"],"keypress":["char","key"],"keyup":[0,"key"]}32		},33		gecko : {34			'prevent':35			 {"keyup":[],"keydown":["char"],"keypress":["char"]},36			'character':37			 {"keydown":[0,"key"],"keypress":["char",0],"keyup":[0,"key"]},38			'specialChars':39			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]},40			'navigation':41			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]},42			'special':43			 {"keydown":[0,"key"],"keyup":[0,"key"]},44			'\t':45			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]},46			'pause-break':47			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]},48			'caps':49			 {"keydown":[0,"key"],"keyup":[0,"key"]},50			'escape':51			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]},52			'num-lock':53			 {"keydown":[0,"key"],"keyup":[0,"key"]},54			'scroll-lock':55			 {"keydown":[0,"key"],"keyup":[0,"key"]},56			'print':57			 {"keyup":[0,"key"]},58			'function':59			 {"keydown":[0,"key"],"keyup":[0,"key"]},60			'\r':61			 {"keydown":[0,"key"],"keypress":[0,"key"],"keyup":[0,"key"]}62		},63		msie : {64			'prevent':{"keyup":[],"keydown":["char","keypress"],"keypress":["char"]},65			'character':{"keydown":[null,"key"],"keypress":[null,"char"],"keyup":[null,"key"]},66			'specialChars':{"keydown":[null,"char"],"keyup":[null,"char"]},67			'navigation':{"keydown":[null,"key"],"keyup":[null,"key"]},68			'special':{"keydown":[null,"key"],"keyup":[null,"key"]},69			'tab':{"keydown":[null,"char"],"keyup":[null,"char"]},70			'pause-break':{"keydown":[null,"key"],"keyup":[null,"key"]},71			'caps':{"keydown":[null,"key"],"keyup":[null,"key"]},72			'escape':{"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]},73			'num-lock':{"keydown":[null,"key"],"keyup":[null,"key"]},74			'scroll-lock':{"keydown":[null,"key"],"keyup":[null,"key"]},75			'print':{"keyup":[null,"key"]},76			'function':{"keydown":[null,"key"],"keyup":[null,"key"]},77			'\r':{"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]}	78		},79		opera : {80			'prevent':81			 {"keyup":[],"keydown":[],"keypress":["char"]},82			'character':83			 {"keydown":[null,"key"],"keypress":[null,"char"],"keyup":[null,"key"]},84			'specialChars':85			 {"keydown":[null,"char"],"keypress":[null,"char"],"keyup":[null,"char"]},86			'navigation':87			 {"keydown":[null,"key"],"keypress":[null,"key"]},88			'special':89			 {"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]},90			'tab':91			 {"keydown":[null,"char"],"keypress":[null,"char"],"keyup":[null,"char"]},92			'pause-break':93			 {"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]},94			'caps':95			 {"keydown":[null,"key"],"keyup":[null,"key"]},96			'escape':97			 {"keydown":[null,"key"],"keypress":[null,"key"]},98			'num-lock':99			 {"keyup":[null,"key"],"keydown":[null,"key"],"keypress":[null,"key"]},100			'scroll-lock':101			 {"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]},102			'print':103			 {},104			'function':105			 {"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]},106			'\r':107			 {"keydown":[null,"key"],"keypress":[null,"key"],"keyup":[null,"key"]}	108		}109	};110	111	Syn.mouse.browsers = {112		webkit : {"right":{"mousedown":{"button":2,"which":3},"mouseup":{"button":2,"which":3},"contextmenu":{"button":2,"which":3}},113		          "left":{"mousedown":{"button":0,"which":1},"mouseup":{"button":0,"which":1},"click":{"button":0,"which":1}}},114		opera: {"right":{"mousedown":{"button":2,"which":3},"mouseup":{"button":2,"which":3}},115		        "left":{"mousedown":{"button":0,"which":1},"mouseup":{"button":0,"which":1},"click":{"button":0,"which":1}}},116		msie: {	"right":{"mousedown":{"button":2},"mouseup":{"button":2},"contextmenu":{"button":0}},117				"left":{"mousedown":{"button":1},"mouseup":{"button":1},"click":{"button":0}}},118		chrome : {"right":{"mousedown":{"button":2,"which":3},"mouseup":{"button":2,"which":3},"contextmenu":{"button":2,"which":3}},119				  "left":{"mousedown":{"button":0,"which":1},"mouseup":{"button":0,"which":1},"click":{"button":0,"which":1}}},120		gecko: {"left":{"mousedown":{"button":0,"which":1},"mouseup":{"button":0,"which":1},"click":{"button":0,"which":1}},121		        "right":{"mousedown":{"button":2,"which":3},"mouseup":{"button":2,"which":3},"contextmenu":{"button":2,"which":3}}}122	}123	124	//set browser125	Syn.key.browser = 126	(function(){127		if(Syn.key.browsers[window.navigator.userAgent]){128			return Syn.key.browsers[window.navigator.userAgent];129		}130		for(var browser in Syn.browser){131			if(Syn.browser[browser] && Syn.key.browsers[browser]){132				return Syn.key.browsers[browser]133			}134		}135		return Syn.key.browsers.gecko;136	})();137	138	Syn.mouse.browser = 139	(function(){140		if(Syn.mouse.browsers[window.navigator.userAgent]){141			return Syn.mouse.browsers[window.navigator.userAgent];142		}143		for(var browser in Syn.browser){144			if(Syn.browser[browser] && Syn.mouse.browsers[browser]){145				return Syn.mouse.browsers[browser]146			}147		}148		return Syn.mouse.browsers.gecko;149	})();...app.js
Source:app.js  
...30    $('.btn3').click(function (e) {31        text.css('background', 'red');32    });33    // Keyup()34    $('#eventoKeyup').html("$(selector).ready(function(){input.keyup(function(){code})}); => contenido: input.val()... eventos del teclado");35    36    $('.keyup').ready(function () {37        var inputKeyup = $('.inputKeyup');38        var textKeyup = $('.textKeyup');39        inputKeyup.keyup(function () {40            textKeyup.html(inputKeyup.val());41            42            if (inputKeyup.val() == "") {43                textKeyup.html("loading...");44            }45        })46    });47    // animaciones48    var animation= $('.animation');49    50    $('#hideAnimation').html("$(selector).hide(time)/show(time)/toggle(time); => animacion de ocultar y mostrar");51    $('#fadeInAnimation').html("$(selector).fadeIn(time)/fadeOut(time)/fadeToggle(time)/fadeTo(time); => animacion desvanecer");52    $('#SlidingAnimation').html("$(selector).slideDown(time)/slideUp(time)/slideToggle(time); => animacion deslizar");53    $('#Animation').html("$(selector).animate({params},speed,callback); => animacion personalizada");...dimensions.js
Source:dimensions.js  
1var $ = jQuery;2wp.customize.controlConstructor['oceanwp-dimensions'] = wp.customize.Control.extend({3	ready: function() {4		'use strict';5		var control = this;6		control.container.on( 'change keyup paste', '.dimension-desktop_top', function() {7			control.settings['desktop_top'].set( jQuery( this ).val() );8		} );9		control.container.on( 'change keyup paste', '.dimension-desktop_right', function() {10			control.settings['desktop_right'].set( jQuery( this ).val() );11		} );12		control.container.on( 'change keyup paste', '.dimension-desktop_bottom', function() {13			control.settings['desktop_bottom'].set( jQuery( this ).val() );14		} );15		control.container.on( 'change keyup paste', '.dimension-desktop_left', function() {16			control.settings['desktop_left'].set( jQuery( this ).val() );17		} );18		control.container.on( 'change keyup paste', '.dimension-tablet_top', function() {19			control.settings['tablet_top'].set( jQuery( this ).val() );20		} );21		control.container.on( 'change keyup paste', '.dimension-tablet_right', function() {22			control.settings['tablet_right'].set( jQuery( this ).val() );23		} );24		control.container.on( 'change keyup paste', '.dimension-tablet_bottom', function() {25			control.settings['tablet_bottom'].set( jQuery( this ).val() );26		} );27		control.container.on( 'change keyup paste', '.dimension-tablet_left', function() {28			control.settings['tablet_left'].set( jQuery( this ).val() );29		} );30		control.container.on( 'change keyup paste', '.dimension-mobile_top', function() {31			control.settings['mobile_top'].set( jQuery( this ).val() );32		} );33		control.container.on( 'change keyup paste', '.dimension-mobile_right', function() {34			control.settings['mobile_right'].set( jQuery( this ).val() );35		} );36		control.container.on( 'change keyup paste', '.dimension-mobile_bottom', function() {37			control.settings['mobile_bottom'].set( jQuery( this ).val() );38		} );39		control.container.on( 'change keyup paste', '.dimension-mobile_left', function() {40			control.settings['mobile_left'].set( jQuery( this ).val() );41		} );42	}43});44$( document ).on( 'click', '.oceanwp-linked',  function() {45	// Set up variables46	var $this = $( this );47	// Remove linked class48	$this.parent().parent( '.dimension-wrap' ).prevAll().slice(0,4).find( 'input' ).removeClass( 'linked' ).attr( 'data-element', '' );49	// Remove class50	$this.parent( '.link-dimensions' ).removeClass( 'unlinked' );51} );52// Unlinked button53$( document ).on( 'click', '.oceanwp-unlinked',  function() {54	// Set up variables55	var $this 		= $( this ),56		$element 	= $this.data( 'element' );57	// Add linked class58	$this.parent().parent( '.dimension-wrap' ).prevAll().slice(0,4).find( 'input' ).addClass( 'linked' ).attr( 'data-element', $element );59	// Add class60	$this.parent( '.link-dimensions' ).addClass( 'unlinked' );61} );62// Values linked inputs63$( document ).on( 'input', '.dimension-wrap .linked', function() {64	var $data 	= $( this ).attr( 'data-element' ),65		$val 	= $( this ).val();66	$( '.linked[ data-element="' + $data + '" ]' ).each( function( key, value ) {67		$( this ).val( $val ).change();68	} );...getValidationEvents.js
Source:getValidationEvents.js  
1const EVENT_TYPES= {2  'checkbox'        : ['change'],                    // {change: 'click' , premature: []},3  'color'           : ['change', 'click'],          // {change: 'change', premature: ['click']},4  'date'            : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},5  'datetime-local'  : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},6  'email'           : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},7  'file'            : ['change'],                   // {change: 'change', premature: []},8  'hidden'          : ['change'],                   // {change: 'change', premature: []},9  'image'           : ['change'],                   // {change: 'change', premature: []},10  'month'           : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},11  'number'          : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},12  'password'        : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},13  'radio'           : ['change', 'click'],          // {change: 'change', premature: ['click']},14  'range'           : ['change', 'click'],          // {change: 'change', premature: ['click']},15  'search'          : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},16  'select-multiple' : ['click'],                    // {change: 'click' , premature: []},17  'select-one'      : ['click'],                    // {change: 'click' , premature: []},18  'tel'             : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},19  'text'            : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},20  'textarea'        : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},21  'time'            : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},22  'url'             : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},23  'week'            : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},24  // Obsolete25  'datetime'        : ['change', 'keyup', 'paste'], // {change: 'change', premature: ['keyup', 'paste']},26  // No handler for these27  'button'          : [],                           // {change: '', premature: []},28  'reset'           : [],                           // {change: '', premature: []},29  'submit'          : [],                           // {change: '', premature: []} 30}31const getValidationEvents = (inputType) => {32  inputType= inputType.toLowerCase()33  return EVENT_TYPES[inputType]34}...keys.js
Source:keys.js  
1//export2Mousetrap.bind('Ñ', function() { onKeydown("up")},"keydown");3Mousetrap.bind('в', function() { onKeydown("right")},"keydown");4Mousetrap.bind('Ñ', function() { onKeydown("down")},"keydown");5Mousetrap.bind('Ñ', function() { onKeydown("left")},"keydown");6Mousetrap.bind('w', function() { onKeydown("up")},"keydown");7Mousetrap.bind('d', function() { onKeydown("right")},"keydown");8Mousetrap.bind('s', function() { onKeydown("down")},"keydown");9Mousetrap.bind('a', function() { onKeydown("left")},"keydown");1011Mousetrap.bind('Ñ', function() {onKeyup("up")}, "keyup");12Mousetrap.bind('в', function() {onKeyup("right")} ,"keyup");13Mousetrap.bind('Ñ', function() {onKeyup("down")} ,"keyup");14Mousetrap.bind('Ñ', function() {onKeyup("left")} ,"keyup");15Mousetrap.bind('w', function() {onKeyup("up")} ,"keyup");16Mousetrap.bind('d', function() {onKeyup("right")} ,"keyup");17Mousetrap.bind('s', function() {onKeyup("down")} ,"keyup");18Mousetrap.bind('a', function() {onKeyup("left")},"keyup");1920Mousetrap.bind('up', function() { onKeydown("useup")},"keydown");21Mousetrap.bind('right', function() { onKeydown("useright")},"keydown");22Mousetrap.bind('down', function() { onKeydown("usedown")},"keydown");23Mousetrap.bind('left', function() { onKeydown("useleft")},"keydown");2425Mousetrap.bind('up', function() {onKeyup("useup")}, "keyup");26Mousetrap.bind('right', function() {onKeyup("useright")} ,"keyup");27Mousetrap.bind('down', function() {onKeyup("usedown")} ,"keyup");28Mousetrap.bind('left', function() {onKeyup("useleft")} ,"keyup");2930Mousetrap.bind('space', function() { onKeydown("usehere")},"keydown");31Mousetrap.bind('enter', function() { onKeydown("use")},"keydown");3233Mousetrap.bind('space', function() {onKeyup("usehere")}, "keyup");34Mousetrap.bind('enter', function() {onKeyup("use")}, "keyup");3536Mousetrap.bind('2', function() { onKeydown("2")},"keydown");37Mousetrap.bind('1', function() { onKeydown("1")},"keydown");38Mousetrap.bind('3', function() { onKeydown("3")},"keydown");39Mousetrap.bind('4', function() { onKeydown("4")},"keydown");40Mousetrap.bind('5', function() { onKeydown("5")},"keydown");41Mousetrap.bind('6', function() { onKeydown("6")},"keydown");42Mousetrap.bind('7', function() { onKeydown("7")},"keydown");43Mousetrap.bind('8', function() { onKeydown("8")},"keydown");44Mousetrap.bind('9', function() { onKeydown("9")},"keydown");45
...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.keyboard.press('ArrowDown');7  await page.keyboard.press('ArrowDown');8  await page.keyboard.press('ArrowDown');9  await page.keyboard.press('Enter');10  await page.screenshot({ path: `example.png` });11  await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15  const browser = await chromium.launch();16  const context = await browser.newContext();17  const page = await context.newPage();18  await page.keyboard.press('ArrowDown');19  await page.keyboard.press('ArrowDown');20  await page.keyboard.press('ArrowDown');21  await page.keyboard.press('Enter');22  await page.screenshot({ path: `example.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.keyboard.press('ArrowDown');31  await page.keyboard.press('ArrowDown');32  await page.keyboard.press('ArrowDown');33  await page.keyboard.press('Enter');34  await page.screenshot({ path: `example.png` });35  await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39  const browser = await chromium.launch();40  const context = await browser.newContext();41  const page = await context.newPage();42  await page.keyboard.press('ArrowDown');43  await page.keyboard.press('ArrowDown');44  await page.keyboard.press('ArrowDown');45  await page.keyboard.press('Enter');46  await page.screenshot({ path: `example.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.fill('input[name="q"]', 'Playwright');7  await page.keyboard.press('Enter');8  await page.waitForSelector('text=Playwright');9  await page.screenshot({ path: `example.png` });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.fill('input.gLFyf.gsfi', 'Playwright');7  await page.keyboard.press('Enter');8  await page.screenshot({ path: `example.png` });9  await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13  const browser = await chromium.launch();14  const context = await browser.newContext();15  const page = await context.newPage();16  await page.fill('input.gLFyf.gsfi', 'Playwright');17  await page.keyboard.press('Enter');18  await page.screenshot({ path: `example.png` });19  await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23  const browser = await chromium.launch();24  const context = await browser.newContext();25  const page = await context.newPage();26  await page.fill('input.gLFyf.gsfi', 'Playwright');27  await page.keyboard.press('Enter');28  await page.screenshot({ path: `example.png` });29  await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33  const browser = await chromium.launch();34  const context = await browser.newContext();35  const page = await context.newPage();36  await page.fill('input.gLFyf.gsfi', 'Playwright');37  await page.keyboard.press('Enter');38  await page.screenshot({ path: `example.png` });39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();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.keyboard.press('Control+Shift+P');Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.fill('input[aria-label="Search"]', 'Playwright');7  await page.keyboard.press('Enter');8  await page.waitForNavigation();9  await page.screenshot({ path: `example.png` });10  await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14  const browser = await chromium.launch({ headless: false });15  const context = await browser.newContext();16  const page = await context.newPage();17  await page.fill('input[aria-label="Search"]', 'Playwright');18  await page.keyboard.press('Enter');19  await page.waitForNavigation();20  await page.screenshot({ path: `example.png` });21  await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25  const browser = await chromium.launch({ headless: false });26  const context = await browser.newContext();27  const page = await context.newPage();28  await page.fill('input[aria-label="Search"]', 'Playwright');29  await page.keyboard.press('Enter');30  await page.waitForNavigation();31  await page.screenshot({ path: `example.png` });32  await browser.close();33})();34const { chromium } = require('playwright');35(async () => {36  const browser = await chromium.launch({ headless: false });37  const context = await browser.newContext();38  const page = await context.newPage();39  await page.fill('input[aria-label="Search"]', 'Playwright');40  await page.keyboard.press('Enter');41  await page.waitForNavigation();42  await page.screenshot({ path: `example.png` });43  await browser.close();44})();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.keyboard.press('KeyA');7  await page.keyboard.press('KeyB');8  await page.keyboard.press('KeyC');9  await page.keyboard.press('KeyD');10  await page.keyboard.press('KeyE');11  await page.keyboard.press('KeyF');12  await page.keyboard.press('KeyG');13  await page.keyboard.press('KeyH');14  await page.keyboard.press('KeyI');15  await page.keyboard.press('KeyJ');16  await page.keyboard.press('KeyK');17  await page.keyboard.press('KeyL');18  await page.keyboard.press('KeyM');19  await page.keyboard.press('KeyN');20  await page.keyboard.press('KeyO');21  await page.keyboard.press('KeyP');22  await page.keyboard.press('KeyQ');23  await page.keyboard.press('KeyR');24  await page.keyboard.press('KeyS');25  await page.keyboard.press('KeyT');26  await page.keyboard.press('KeyU');27  await page.keyboard.press('KeyV');28  await page.keyboard.press('KeyW');29  await page.keyboard.press('KeyX');30  await page.keyboard.press('KeyY');31  await page.keyboard.press('KeyZ');32  await page.keyboard.press('Digit1');33  await page.keyboard.press('Digit2');34  await page.keyboard.press('Digit3');35  await page.keyboard.press('Digit4');36  await page.keyboard.press('Digit5');37  await page.keyboard.press('Digit6');38  await page.keyboard.press('Digit7');39  await page.keyboard.press('Digit8');40  await page.keyboard.press('Digit9');41  await page.keyboard.press('Digit0');42  await page.keyboard.press('Backquote');43  await page.keyboard.press('Minus');44  await page.keyboard.press('Equal');45  await page.keyboard.press('Backspace');46  await page.keyboard.press('Tab');47  await page.keyboard.press('BracketLeft');48  await page.keyboard.press('BracketRight');49  await page.keyboard.press('Backslash');50  await page.keyboard.press('Semicolon');51  await page.keyboard.press('Quote');52  await page.keyboard.press('Enter');53  await page.keyboard.press('ShiftLeft');54  await page.keyboard.press('Comma');55  await page.keyboard.press('Using AI Code Generation
1const { webkit } = require('playwright-internal');2(async () => {3  const browser = await webkit.launch();4  const page = await browser.newPage();5  await page.keyboard.press('Enter');6  await page.keyboard.type('Hello');7  await page.keyboard.down('Shift');8  await page.keyboard.press('KeyW');9  await page.keyboard.up('Shift');10  await page.keyboard.press('ArrowLeft');11  await page.keyboard.press('Backspace');12  await page.keyboard.insertText('World!');13  await page.keyboard.down('Control');14  await page.keyboard.press('KeyA');15  await page.keyboard.up('Control');16  await page.keyboard.down('Control');17  await page.keyboard.press('KeyX');18  await page.keyboard.up('Control');19  await page.keyboard.down('Control');20  await page.keyboard.press('KeyV');21  await page.keyboard.up('Control');22  await page.keyboard.press('Enter');23  await page.screenshot({ path: `example.png` });24  await browser.close();25})();Using AI Code Generation
1const { chromium, webkit } = require('playwright');2const { expect } = require('chai');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.fill('input[name="q"]', 'Hello World');8  const input = await page.$('input[name="q"]');9  await input.press('Enter');10  await page.waitForNavigation();11  expect(await page.title()).to.contain('Hello World');12  await browser.close();13})();14const { chromium, webkit } = require('playwright');15const { expect } = require('chai');16(async () => {17  const browser = await chromium.launch();18  const context = await browser.newContext();19  const page = await context.newPage();20  await page.fill('input[name="q"]', 'Hello World');21  const input = await page.$('input[name="q"]');22  await input.press('Enter');23  await page.waitForNavigation();24  expect(await page.title()).to.contain('Hello World');25  await browser.close();26})();27const { chromium, webkit } = require('playwright');28const { expect } = require('chai');29(async () => {30  const browser = await chromium.launch();31  const context = await browser.newContext();32  const page = await context.newPage();33  await page.fill('input[name="q"]', 'Hello World');34  const input = await page.$('input[name="q"]');35  await input.press('Enter');36  await page.waitForNavigation();37  expect(await page.title()).to.contain('Hello World');38  await browser.close();39})();40const { chromium, webkit } = require('playwright');41const { expect } = require('chai');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();45  const page = await context.newPage();46  await page.fill('input[name="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.
Get 100 minutes of automation test minutes FREE!!
