How to use setDisplay method in Playwright Internal

Best JavaScript code snippet using playwright-internal

App.js

Source:App.js Github

copy

Full Screen

...44 setNeg(true)45 if(display.show === ""){46 null47 } else {48 setDisplay(x => {49 return {50 ...x,51 show: -Math.abs(parseFloat(display.show))52 }53 })54 }55 56 }57 58 function clearDisplay(){59 setDisplay(prev => {60 return {61 ...prev,62 show: ""63 }64 })65 }66 67 68 69 function addOne(){70 if(plus && display.show !== ""){71 display.currentValue.push(parseFloat(display.show)) 72 clearOperationStates()73 setDisplay(x => {74 return {75 ...x,76 show: "" + "1"77 }78 })79 } else if(sub && display.show !== ""){80 display.currentValue.push(parseFloat(display.show)) 81 clearOperationStates()82 setDisplay(x => {83 return {84 ...x,85 show: "" + "1"86 }87 })88 89 } else if(muli && display.show !== ""){90 display.currentValue.push(parseFloat(display.show))91 clearOperationStates()92 setDisplay(x => {93 return {94 ...x,95 show: "" + "1"96 }97 })98 } else if(divide && display.show !== ""){99 display.currentValue.push(parseFloat(display.show))100 clearOperationStates()101 setDisplay(x => {102 return {103 ...x,104 show: "" + "1"105 }106 })107 } else if(display.show === "" && decimal){108 setDisplay(x => {109 return {110 ...x,111 show: display.show + "." + "1"112 }113 })114 setDecimal(false)115 } else if(display.show !== "" && decimal){116 setDisplay(x => {117 return {118 ...x,119 show: display.show + "." + "1",120 }121 })122 setDecimal(false)123 } else if(display.show === "" && neg){124 setDisplay(x => {125 return {126 ...x,127 show: -Math.abs(display.show + "1")128 }129 })130 setNeg(false)131 } else {132 clearOperationStates()133 setDisplay(x => {134 return {135 ...x,136 show: display.show + "1"137 }138 })139 } 140 } 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 function addTwo(){158 if(plus && display.show !== ""){159 display.currentValue.push(parseFloat(display.show)) 160 clearOperationStates()161 setDisplay(x => {162 return {163 ...x,164 show: "" + "2"165 }166 })167 } else if(sub && display.show !== ""){168 display.currentValue.push(parseFloat(display.show)) 169 clearOperationStates()170 setDisplay(x => {171 return {172 ...x,173 show: "" + "2"174 }175 })176 177 } else if(muli && display.show !== ""){178 display.currentValue.push(parseFloat(display.show))179 clearOperationStates()180 setDisplay(x => {181 return {182 ...x,183 show: "" + "2"184 }185 })186 } else if(divide && display.show !== ""){187 display.currentValue.push(parseFloat(display.show))188 clearOperationStates()189 setDisplay(x => {190 return {191 ...x,192 show: "" + "2"193 }194 })195 } else if(display.show === "" && decimal){196 setDisplay(x => {197 return {198 ...x,199 show: display.show + "." + "2"200 }201 })202 setDecimal(false)203 } else if(display.show !== "" && decimal){204 setDisplay(x => {205 return {206 ...x,207 show: display.show + "." + "2",208 }209 })210 setDecimal(false)211 }else if(display.show === "" && neg){212 setDisplay(x => {213 return {214 ...x,215 show: -Math.abs(display.show + "2")216 }217 })218 } else {219 clearOperationStates()220 setDisplay(x => {221 return {222 ...x,223 show: display.show + "2"224 }225 })226 } 227 }228 229 230 231 function addThree(){232 if(plus && display.show !== ""){233 display.currentValue.push(parseFloat(display.show)) 234 clearOperationStates()235 setDisplay(x => {236 return {237 ...x,238 show: "" + "3"239 }240 })241 } else if(sub && display.show !== ""){242 display.currentValue.push(parseFloat(display.show)) 243 clearOperationStates()244 setDisplay(x => {245 return {246 ...x,247 show: "" + "3"248 }249 })250 251 } else if(muli && display.show !== ""){252 display.currentValue.push(parseFloat(display.show))253 clearOperationStates()254 setDisplay(x => {255 return {256 ...x,257 show: "" + "3"258 }259 })260 } else if(divide && display.show !== ""){261 display.currentValue.push(parseFloat(display.show))262 clearOperationStates()263 setDisplay(x => {264 return {265 ...x,266 show: "" + "3"267 }268 })269 } else if(display.show === "" && decimal){270 setDisplay(x => {271 return {272 ...x,273 show: display.show + "." + "3"274 }275 })276 setDecimal(false)277 } else if(display.show !== "" && decimal){278 setDisplay(x => {279 return {280 ...x,281 show: display.show + "." + "3",282 }283 })284 setDecimal(false)285 } else if(display.show === "" && neg){286 setDisplay(x => {287 return {288 ...x,289 show: -Math.abs(display.show + "3")290 }291 })292 } else {293 clearOperationStates()294 setDisplay(x => {295 return {296 ...x,297 show: display.show + "3"298 }299 })300 } 301 }302 303 function addFour(){304 if(plus && display.show !== ""){305 display.currentValue.push(parseFloat(display.show)) 306 clearOperationStates()307 setDisplay(x => {308 return {309 ...x,310 show: "" + "4"311 }312 })313 } else if(sub && display.show !== ""){314 display.currentValue.push(parseFloat(display.show)) 315 clearOperationStates()316 setDisplay(x => {317 return {318 ...x,319 show: "" + "4"320 }321 })322 323 } else if(muli && display.show !== ""){324 display.currentValue.push(parseFloat(display.show))325 clearOperationStates()326 setDisplay(x => {327 return {328 ...x,329 show: "" + "4"330 }331 })332 } else if(divide && display.show !== ""){333 display.currentValue.push(parseFloat(display.show))334 clearOperationStates()335 setDisplay(x => {336 return {337 ...x,338 show: "" + "4"339 }340 })341 } else if(display.show === "" && decimal){342 setDisplay(x => {343 return {344 ...x,345 show: display.show + "." + "4"346 }347 })348 setDecimal(false)349 } else if(display.show !== "" && decimal){350 setDisplay(x => {351 return {352 ...x,353 show: display.show + "." + "4",354 }355 })356 setDecimal(false)357 } else if(display.show === "" && neg){358 setDisplay(x => {359 return {360 ...x,361 show: -Math.abs(display.show + "4")362 }363 })364 } else {365 clearOperationStates()366 setDisplay(x => {367 return {368 ...x,369 show: display.show + "4"370 }371 })372 } 373 }374 375 function addFive(){376 if(plus && display.show !== ""){377 display.currentValue.push(parseFloat(display.show)) 378 clearOperationStates()379 setDisplay(x => {380 return {381 ...x,382 show: "" + "5"383 }384 })385 } else if(sub && display.show !== ""){386 display.currentValue.push(parseFloat(display.show)) 387 clearOperationStates()388 setDisplay(x => {389 return {390 ...x,391 show: "" + "5"392 }393 })394 395 } else if(muli && display.show !== ""){396 display.currentValue.push(parseFloat(display.show))397 clearOperationStates()398 setDisplay(x => {399 return {400 ...x,401 show: "" + "5"402 }403 })404 } else if(divide && display.show !== ""){405 display.currentValue.push(parseFloat(display.show))406 clearOperationStates()407 setDisplay(x => {408 return {409 ...x,410 show: "" + "5"411 }412 })413 } else if(display.show === "" && decimal){414 setDisplay(x => {415 return {416 ...x,417 show: display.show + "." + "5"418 }419 })420 setDecimal(false)421 } else if(display.show !== "" && decimal){422 setDisplay(x => {423 return {424 ...x,425 show: display.show + "." + "5",426 }427 })428 setDecimal(false)429 } else if(display.show === "" && neg){430 setDisplay(x => {431 return {432 ...x,433 show: -Math.abs(display.show + "5")434 }435 })436 } else {437 clearOperationStates()438 setDisplay(x => {439 return {440 ...x,441 show: display.show + "5"442 }443 })444 } 445 }446 447 function addSix(){448 if(plus && display.show !== ""){449 display.currentValue.push(parseFloat(display.show)) 450 clearOperationStates()451 setDisplay(x => {452 return {453 ...x,454 show: "" + "6"455 }456 })457 } else if(sub && display.show !== ""){458 display.currentValue.push(parseFloat(display.show)) 459 clearOperationStates()460 setDisplay(x => {461 return {462 ...x,463 show: "" + "6"464 }465 })466 467 } else if(muli && display.show !== ""){468 display.currentValue.push(parseFloat(display.show))469 clearOperationStates()470 setDisplay(x => {471 return {472 ...x,473 show: "" + "6"474 }475 })476 } else if(divide && display.show !== ""){477 display.currentValue.push(parseFloat(display.show))478 clearOperationStates()479 setDisplay(x => {480 return {481 ...x,482 show: "" + "6"483 }484 })485 } else if(display.show === "" && decimal){486 setDisplay(x => {487 return {488 ...x,489 show: display.show + "." + "6"490 }491 })492 setDecimal(false)493 } else if(display.show !== "" && decimal){494 setDisplay(x => {495 return {496 ...x,497 show: display.show + "." + "6",498 }499 })500 setDecimal(false)501 } else if(display.show === "" && neg){502 setDisplay(x => {503 return {504 ...x,505 show: -Math.abs(display.show + "6")506 }507 })508 } else {509 clearOperationStates()510 setDisplay(x => {511 return {512 ...x,513 show: display.show + "6"514 }515 })516 } 517 }518 519 function addSeven(){520 if(plus && display.show !== ""){521 display.currentValue.push(parseFloat(display.show)) 522 clearOperationStates()523 setDisplay(x => {524 return {525 ...x,526 show: "" + "7"527 }528 })529 } else if(sub && display.show !== ""){530 display.currentValue.push(parseFloat(display.show)) 531 clearOperationStates()532 setDisplay(x => {533 return {534 ...x,535 show: "" + "7"536 }537 })538 539 } else if(muli && display.show !== ""){540 display.currentValue.push(parseFloat(display.show))541 clearOperationStates()542 setDisplay(x => {543 return {544 ...x,545 show: "" + "7"546 }547 })548 } else if(divide && display.show !== ""){549 display.currentValue.push(parseFloat(display.show))550 clearOperationStates()551 setDisplay(x => {552 return {553 ...x,554 show: "" + "7"555 }556 })557 } else if(display.show === "" && decimal){558 setDisplay(x => {559 return {560 ...x,561 show: display.show + "." + "7"562 }563 })564 setDecimal(false)565 } else if(display.show !== "" && decimal){566 setDisplay(x => {567 return {568 ...x,569 show: display.show + "." + "7",570 }571 })572 setDecimal(false)573 } else if(display.show === "" && neg){574 setDisplay(x => {575 return {576 ...x,577 show: -Math.abs(display.show + "7")578 }579 })580 } else {581 clearOperationStates()582 setDisplay(x => {583 return {584 ...x,585 show: display.show + "7"586 }587 })588 } 589 }590 591 function addEight(){592 if(plus && display.show !== ""){593 display.currentValue.push(parseFloat(display.show)) 594 clearOperationStates()595 setDisplay(x => {596 return {597 ...x,598 show: "" + "8"599 }600 })601 } else if(sub && display.show !== ""){602 display.currentValue.push(parseFloat(display.show)) 603 clearOperationStates()604 setDisplay(x => {605 return {606 ...x,607 show: "" + "8"608 }609 })610 611 } else if(muli && display.show !== ""){612 display.currentValue.push(parseFloat(display.show))613 clearOperationStates()614 setDisplay(x => {615 return {616 ...x,617 show: "" + "8"618 }619 })620 } else if(divide && display.show !== ""){621 display.currentValue.push(parseFloat(display.show))622 clearOperationStates()623 setDisplay(x => {624 return {625 ...x,626 show: "" + "8"627 }628 })629 } else if(display.show === "" && decimal){630 setDisplay(x => {631 return {632 ...x,633 show: display.show + "." + "8"634 }635 })636 setDecimal(false)637 } else if(display.show !== "" && decimal){638 setDisplay(x => {639 return {640 ...x,641 show: display.show + "." + "8",642 }643 })644 setDecimal(false)645 } else if(display.show === "" && neg){646 setDisplay(x => {647 return {648 ...x,649 show: -Math.abs(display.show + "8")650 }651 })652 } else {653 clearOperationStates()654 setDisplay(x => {655 return {656 ...x,657 show: display.show + "8"658 }659 })660 } 661 }662 663 function addNine(){664 if(plus && display.show !== ""){665 display.currentValue.push(parseFloat(display.show)) 666 clearOperationStates()667 setDisplay(x => {668 return {669 ...x,670 show: "" + "9"671 }672 })673 } else if(sub && display.show !== ""){674 display.currentValue.push(parseFloat(display.show)) 675 clearOperationStates()676 setDisplay(x => {677 return {678 ...x,679 show: "" + "9"680 }681 })682 683 } else if(muli && display.show !== ""){684 display.currentValue.push(parseFloat(display.show))685 clearOperationStates()686 setDisplay(x => {687 return {688 ...x,689 show: "" + "9"690 }691 })692 } else if(divide && display.show !== ""){693 display.currentValue.push(parseFloat(display.show))694 clearOperationStates()695 setDisplay(x => {696 return {697 ...x,698 show: "" + "9"699 }700 })701 } else if(display.show === "" && decimal){702 setDisplay(x => {703 return {704 ...x,705 show: display.show + "." + "9"706 }707 })708 setDecimal(false)709 } else if(display.show !== "" && decimal){710 setDisplay(x => {711 return {712 ...x,713 show: display.show + "." + "9",714 }715 })716 setDecimal(false)717 } else if(display.show === "" && neg){718 setDisplay(x => {719 return {720 ...x,721 show: -Math.abs(display.show + "1")722 }723 })724 } else {725 clearOperationStates()726 setDisplay(x => {727 return {728 ...x,729 show: display.show + "9"730 }731 })732 } 733 }734 735 function addZero(){736 if(display.show === ""){737 null738 } else if(plus && display.show !== ""){739 display.currentValue.push(parseFloat(display.show)) 740 clearOperationStates()741 setDisplay(x => {742 return {743 ...x,744 show: "" + "0"745 }746 })747 } else if(sub && display.show !== ""){748 display.currentValue.push(parseFloat(display.show)) 749 clearOperationStates()750 setDisplay(x => {751 return {752 ...x,753 show: "" + "0"754 }755 })756 757 } else if(muli && display.show !== ""){758 display.currentValue.push(parseFloat(display.show))759 clearOperationStates()760 setDisplay(x => {761 return {762 ...x,763 show: "" + "0"764 }765 })766 } else if(divide && display.show !== ""){767 display.currentValue.push(parseFloat(display.show))768 clearOperationStates()769 setDisplay(x => {770 return {771 ...x,772 show: "" + "0"773 }774 })775 } else if(display.show === "" && decimal){776 setDisplay(x => {777 return {778 ...x,779 show: display.show + "." + "0"780 }781 })782 setDecimal(false)783 } else if(display.show !== "" && decimal){784 setDisplay(x => {785 return {786 ...x,787 show: display.show + "." + "0",788 }789 })790 setDecimal(false)791 } else {792 clearOperationStates()793 setDisplay(x => {794 return {795 ...x,796 show: display.show + "0"797 }798 })799 } 800 }801 802 803 804 function addition(){ 805 if(display.currentValue.length <= 0 && display.show !== ""){806 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false)807 display.currentValue.push(parseFloat(display.show))808 clearDisplay()809 } else if(display.currentValue.length == 1 && !wasMuli && !wasSub && !wasDivide && display.show !== ""){810 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false)811 setDisplay(x => {812 return {813 ...x,814 show: parseFloat(display.show) + display.currentValue[0],815 currentValue: []816 } 817 })818 } else if(display.currentValue.length == 1 && wasSub && display.show !== ""){819 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false), setWasSub(false)820 setDisplay(x => {821 return {822 ...x,823 show: display.currentValue[0] - parseFloat(display.show),824 currentValue: []825 }826 })827 } else if(display.currentValue.length == 1 && wasMuli && display.show !== ""){828 setPlus(true), setSub(false), setMuli(false), setDivide(false), setWasPlus(true), setWasMuli(false)829 setDisplay(x => {830 return {831 ...x,832 show: display.currentValue[0] * parseFloat(display.show),833 currentValue: []834 }835 })836 } else if(display.currentValue.length == 1 && wasDivide && display.show !== ""){837 setPlus(true), setSub(false), setMuli(false), setDivide(false), setWasPlus(true), setWasDivide(false)838 setDisplay(x => {839 return {840 ...x,841 show: display.currentValue[0] /​ parseFloat(display.show),842 currentValue: []843 }844 })845 } else if(display.show === "" && display.currentValue.length <= 0){846 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false)847 setDisplay(x => {848 return {849 ...x,850 show: ""851 }852 })853 } else if(display.show === "" && display.currentValue.length == 1 && wasDivide){854 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false), setWasDivide(false)855 setDisplay(x => {856 return {857 ...x,858 show: display.show,859 }860 })861 } else if(display.show === "" && display.currentValue.length == 1 && wasMuli){862 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false), setWasMuli(false)863 setDisplay(x => {864 return {865 ...x,866 show: display.show867 }868 })869 } else if(display.show === "" && display.currentValue.length == 1 && wasSub){870 setPlus(true), setWasPlus(true), setSub(false), setMuli(false), setDivide(false), setWasSub(false)871 setDisplay(x => {872 return {873 ...x,874 show: display.show875 }876 })877 }878} 879 880 881 882 function subtract(){883 if(display.currentValue.length <= 0 && display.show !== ""){884 setSub(true), setWasSub(true), setPlus(false), setMuli(false), setDivide(false)885 display.currentValue.push(parseFloat(display.show))886 clearDisplay()887 } else if(display.currentValue.length == 1 && !wasPlus && !wasMuli && !wasDivide){888 setSub(true), setWasSub(true), setPlus(false), setMuli(false), setDivide(false)889 setDisplay(x => {890 return {891 ...x,892 show: display.currentValue[0] - parseFloat(display.show),893 currentValue: []894 }895 })896 } else if(display.currentValue.length == 1 && wasPlus && display.show !== ""){897 setSub(true), setPlus(false), setMuli(false), setDivide(false), setWasSub(true), setWasPlus(false)898 setDisplay(x => {899 return {900 ...x,901 show: parseFloat(display.show) + display.currentValue[0],902 currentValue: []903 }904 })905 } else if(display.currentValue.length == 1 && wasMuli && display.show !== ""){906 setSub(true), setPlus(false), setMuli(false), setDivide(false), setWasSub(true), setWasMuli(false)907 setDisplay(x => {908 return {909 ...x,910 show: parseFloat(display.show) * display.currentValue[0],911 currentValue: []912 }913 })914 } else if(display.currentValue.length == 1 && wasDivide && display.show !== ""){915 setSub(true), setPlus(false), setMuli(false), setDivide(false), setWasSub(true), setWasDivide(false)916 setDisplay(x => {917 return {918 ...x,919 show: display.currentValue[0] /​ parseFloat(display.show),920 currentValue: []921 }922 })923 } else if(display.show === "" && display.currentValue.length <= 0){924 setSub(true), setWasSub(true), setPlus(false), setMuli(false), setDivide(false)925 setDisplay(x => {926 return {927 ...x,928 show: ""929 }930 })931 } else if(display.show === "" && display.currentValue.length == 1 && wasPlus){932 setSub(true), setWasSub(true), setWasPlus(false), setPlus(false), setMuli(false), setDivide(false)933 setDisplay(x => {934 return {935 ...x,936 show: display.show937 }938 })939 } else if(display.show === "" && display.currentValue.length == 1 && wasMuli){940 setSub(true), setWasSub(true), setWasMuli(false), setPlus(false), setMuli(false), setDivide(false)941 setDisplay(x => {942 return {943 ...x,944 show: display.show945 }946 })947 } else if(display.show === "" && display.currentValue.length == 1 && wasDivide){948 setSub(true), setWasSub(true), setWasDivide(false), setPlus(false), setMuli(false), setDivide(false)949 setDisplay(x => {950 return {951 ...x,952 show: display.show953 }954 })955 } 956 } 957 958 function mulipcation(){959 if(display.currentValue.length <= 0 && display.show !== ""){960 setMuli(true), setWasMuli(true), setPlus(false), setSub(false), setDivide(false)961 display.currentValue.push(parseFloat(display.show))962 clearDisplay()963 } else if(display.currentValue.length == 1 && !wasSub && !wasPlus && !wasDivide){964 setMuli(true), setWasMuli(true), setSub(false), setPlus(false), setDivide(false)965 setDisplay(x => {966 return {967 ...x,968 show: parseFloat(display.show) * display.currentValue[0],969 currentValue: []970 }971 })972 } else if(display.currentValue.length == 1 && wasSub && display.show !== ""){973 setMuli(true), setSub(false), setPlus(false), setDivide(false), setWasMuli(true), setWasSub(false)974 setDisplay(x => {975 return {976 ...x,977 show: display.currentValue[0] - parseFloat(display.show),978 currentValue: []979 }980 })981 } else if(display.currentValue.length == 1 && wasPlus && display.show !== ""){982 setMuli(true), setSub(false), setPlus(false), setDivide(false), setWasPlus(false), setWasMuli(true)983 setDisplay(x => {984 return {985 ...x,986 show: display.currentValue[0] + parseFloat(display.show),987 currentValue: []988 }989 })990 } else if(display.currentValue.length == 1 && wasDivide && display.show !== ""){991 setMuli(true), setPlus(false), setSub(false), setDivide(false), setDivide(false), setWasMuli(true), setWasDivide(false)992 setDisplay(x => {993 return {994 ...x,995 show: display.currentValue[0] /​ parseFloat(display.show),996 currentValue: []997 }998 })999 } else if(display.show === "" && display.currentValue.length <= 0){1000 setMuli(true), setWasMuli(true), setSub(false), setPlus(false), setDivide(false)1001 setDisplay(x => {1002 return {1003 ...x,1004 show: ""1005 }1006 })1007 } else if(display.show === "" && display.currentValue.length == 1 && wasPlus){1008 setMuli(true), setWasMuli(true), setSub(false), setPlus(false), setWasPlus(false), setDivide(false)1009 setDisplay(x => {1010 return {1011 ...x,1012 show: display.show1013 }1014 })1015 } else if(display.show === "" && display.currentValue.length == 1 && wasSub){1016 setMuli(true)1017 setWasMuli(true)1018 setSub(false)1019 setWasSub(false)1020 setPlus(false)1021 setDivide(false)1022 setDisplay(x => {1023 return {1024 ...x,1025 show: display.show1026 }1027 })1028 } else if(display.show === "" && display.currentValue.length == 1 && wasDivide){1029 setMuli(true)1030 setWasMuli(true)1031 setSub(false)1032 setPlus(false)1033 setDivide(false)1034 setWasDivide(false)1035 setDisplay(x => {1036 return {1037 ...x,1038 show: display.show1039 }1040 })1041 } 1042} 1043 1044 function divition(){1045 if(display.currentValue.length <= 0 && display.show !== ""){1046 setDivide(true)1047 setWasDivide(true)1048 setPlus(false)1049 setSub(false)1050 setMuli(false)1051 display.currentValue.push(parseFloat(display.show))1052 clearDisplay()1053 } else if(display.currentValue.length == 1 && !wasMuli && !wasPlus && !wasSub){1054 setDivide(true)1055 setWasDivide(true)1056 setSub(false)1057 setMuli(false)1058 setPlus(false)1059 setDisplay(x => {1060 return {1061 ...x,1062 show: display.currentValue[0] /​ parseFloat(display.show),1063 currentValue: []1064 }1065 })1066 } else if(display.currentValue.length == 1 && wasSub && display.show !== ""){1067 setDivide(true)1068 setSub(false)1069 setMuli(false)1070 setPlus(false)1071 setWasDivide(true)1072 setWasSub(false)1073 setDisplay(x => {1074 return {1075 ...x,1076 show: display.currentValue[0] - parseFloat(display.show),1077 currentValue: []1078 }1079 })1080 } else if(display.currentValue.length == 1 && wasPlus && display.show !== ""){1081 setDivide(true)1082 setSub(false)1083 setPlus(false)1084 setMuli(false)1085 setWasPlus(false)1086 setWasDivide(true)1087 setDisplay(x => {1088 return {1089 ...x,1090 show: display.currentValue[0] + parseFloat(display.show),1091 currentValue: []1092 }1093 })1094 } else if(display.currentValue.length == 1 && wasMuli && display.show !== ""){1095 setDivide(true)1096 setSub(false)1097 setPlus(false)1098 setMuli(false)1099 setWasMuli(false)1100 setWasDivide(true)1101 setDisplay(x => {1102 return {1103 ...x,1104 show: display.currentValue[0] * parseFloat(display.show),1105 currentValue: []1106 }1107 })1108 } else if(display.show === "" && display.currentValue.length <= 0){1109 setDivide(true)1110 setWasDivide(true)1111 setSub(false)1112 setPlus(false)1113 setMuli(false)1114 setDisplay(x => {1115 return {1116 ...x,1117 show: ""1118 }1119 })1120 } else if(display.show === "" && display.currentValue.length == 1 && wasPlus){1121 setDivide(true)1122 setWasDivide(true)1123 setSub(false)1124 setPlus(false)1125 setWasPlus(false)1126 setMuli(false)1127 setDisplay(x => {1128 return {1129 ...x,1130 show: display.show1131 }1132 })1133 } else if(display.show === "" && display.currentValue.length == 1 && wasSub){1134 setDivide(true)1135 setWasDivide(true)1136 setSub(false)1137 setWasSub(false)1138 setPlus(false)1139 setMuli(false)1140 setDisplay(x => {1141 return {1142 ...x,1143 show: display.show1144 }1145 }) 1146 } else if(display.show === "" && display.currentValue.length == 1 && wasMuli){1147 setDivide(true)1148 setWasDivide(true)1149 setSub(false)1150 setPlus(false)1151 setMuli(false)1152 setWasMuli(false)1153 setDisplay(x => {1154 return {1155 ...x,1156 show: display.show1157 }1158 })1159 } 1160 } 1161 1162 1163 1164 1165 function solution(){1166 if(display.currentValue.length == 1 && wasPlus){1167 setWasPlus(false)1168 setWasSub(false)1169 setWasMuli(false)1170 setWasDivide(false)1171 setDisplay(x => {1172 return {1173 ...x,1174 show: display.currentValue[0] + parseFloat(display.show),1175 currentValue: []1176 }1177 })1178 } else if(display.currentValue.length == 1 && wasSub){1179 setWasPlus(false)1180 setWasSub(false)1181 setWasMuli(false)1182 setWasDivide(false)1183 setDisplay(x => {1184 return {1185 ...x,1186 show: display.currentValue[0] - parseFloat(display.show),1187 currentValue: []1188 }1189 })1190 } else if(display.currentValue.length == 1 && wasMuli){1191 setWasPlus(false)1192 setWasSub(false)1193 setWasMuli(false)1194 setWasDivide(false)1195 setDisplay(x => {1196 return {1197 ...x,1198 show: display.currentValue[0] * parseFloat(display.show),1199 currentValue: []1200 }1201 })1202 } else if(display.currentValue.length == 1 && wasDivide){1203 setWasPlus(false)1204 setWasSub(false)1205 setWasMuli(false)1206 setWasDivide(false)1207 setDisplay(x => {1208 return {1209 ...x,1210 show: display.currentValue[0] /​ parseFloat(display.show),1211 currentValue: []1212 }1213 })1214 }1215 }1216 1217 console.log(display.currentValue)1218 1219 1220 1221 1222 function clear(){1223 setDisplay(prev => {1224 return {1225 ...prev,1226 show: "",1227 add: [],1228 subtract: [],1229 currentValue: []1230 }1231 })1232 setPlus(false)1233 setSub(false)1234 setMuli(false)1235 setDivide(false)1236 setWasPlus(false)1237 setWasSub(false)...

Full Screen

Full Screen

lov.js

Source:lov.js Github

copy

Full Screen

...198 var o=this199 o.oldInit()200 201 o.textField.init()202 o.textField.setDisplay(o.showTextField) 203 204 o.dateField.init()205 o.dateField.setDisplay(o.showDate)206 207 /​/​ Do not show textfield if date is visible208 if(o.showDate) 209 o.textField.setDisplay(false)210 211 o.chunkLabel.init() 212 o.chunkLabel.setHTML(o.chunkText)213 o.noChunkLabel.init()214 o.noChunkLabel.setHTML(_lovRefreshValuesLab)215 o.noChunkLabel.setDisplay(false) /​/​ Not displayed by default216 o.prevChunkIcn.init() 217 o.chunkCombo.init() 218 o.nextChunkIcn.init()219 220 o.refreshIcn.init()221 o.refreshIcn.setDisplay(o.showRefreshIcn) 222 223 o.lovList.init() 224 o.lovSearch.init()225/​* o.searchField.init() 226 o.searchIcn.init()227 o.searchIcn.setDisabled((o.searchField.getValue()=='')) /​/​ Disabled if no value set on loading widget228 o.setCaseSensitive(false)229*/​ 230 o.showTextFieldOnly(o.showTextOnly)231 232 o.resize(o.width,o.lines) 233}234/​/​ resize(w,lines)235/​/​ Resize the LOVWidget236function LovWidget_resize(w,lines)237/​/​ w [int] widget width, including borders238/​/​ lines [int] number of visible lines in the LOV list239{ 240 var o=this241 242 /​/​ The search field must be at least <_searchMinW>px long243 var tmp = w - _searchIcnSize244 var searchW = (tmp < _searchMinW)?_searchMinW:tmp245 246 /​/​ If not possible to have a search field of <_searchMinW>px long with the <w> specified, increase <w> 247 var newWidth= (tmp < _searchMinW)?((w+_searchMinW)-_margin):(w- _margin)248 249 var textW = newWidth250 251 var comboW = o.showRefreshIcn ? (newWidth - (2*_arrowSize+_refreshIcnSize)) : (newWidth - (2*_arrowSize))252 if ( o.showTextField ) 253 o.textField.resize(textW)254 255 if ( o.showDate )256 o.dateField.resize(newWidth)257 258 o.chunkCombo.resize(comboW)259 260 o.lovList.resize(newWidth)261 o.lovList.layer.size = lines262 263 /​/​o.searchField.resize(searchW) 264 o.lovSearch.resize(_searchIcnSize+searchW);265}266/​/​ addChunkElem(s,val,sel,id)267/​/​ Add one element to the chunkCombo combobox268function LovWidget_addChunkElem(s,val,sel,id)269/​/​ s [String] string that will be displayed270/​/​ val [String] stored value271/​/​ sel [boolean] if true the item is selected272/​/​ id [String] the id for DHTML processing273{274 var o=this;275 o.chunkCombo.add(s,val,sel,id);276}277/​/​ addLOVElem(s,val,sel,id)278/​/​ Add one element to the lovList ListWidget279function LovWidget_addLOVElem(s,val,sel,id)280/​/​ s [String] string that will be displayed281/​/​ val [String] stored value282/​/​ sel [boolean] if true the item is selected283/​/​ id [String] the id for DHTML processing284{285 var o=this;286 o.lovList.add(s,val,sel,id);287}288/​/​ fillChunk(arrTxt,arrVal)289/​/​ Fill the chunkCombo combobox290function LovWidget_fillChunk(arrTxt,arrVal)291/​/​ This function can take one or two parameters292/​/​ 1st parameter is mandatory293/​/​ 2nd parameter is optional294/​/​ arrTxt [array] array with text to insert the combo295/​/​ arrTxt [array] array with values to insert the combo296{297 298 var o=this299 o.chunkCombo.del()300 301 /​/​disable the buttons and the combo box when it is empty302 o.setPrevNextIconState()303 304 if ( arrTxt == null )305 { 306 o.updateWidget() 307 return308 }309 310 if ( arrVal == null )311 {312 for (var i=0;i<arrTxt.length;i++)313 o.chunkCombo.add(arrTxt[i],arrTxt[i],false,i)314 }315 else316 {317 for (var i=0;i<arrTxt.length;i++)318 o.chunkCombo.add(arrTxt[i],arrVal[i],false,i)319 }320 321 /​/​ select the 1st item322 o.chunkCombo.select(0)323 324 /​/​ set the previous and next icon state325 o.setPrevNextIconState()326 327 o.updateWidget()328}329/​/​ _fillLOV(arrTxt,arrVal)330/​/​ Fill the lovList ListWidget331function LovWidget_fillLOV(arrTxt,arrVal)332/​/​ This function can take one or two parameters333/​/​ 1st parameter is mandatory334/​/​ 2nd parameter is optional335/​/​ arrTxt [array] array with text to insert the list336/​/​ arrTxt [array] array with values to insert the list337{338 var o=this;339 o.lovList.del();340 341 if ( arrTxt == null )342 return;343 344 if ( arrVal == null )345 {346 for (var i=0;i<arrTxt.length;i++)347 o.lovList.add(arrTxt[i],arrTxt[i],false,i);348 }349 else350 {351 for (var i=0;i<arrTxt.length;i++)352 o.lovList.add(arrTxt[i],arrVal[i],false,i);353 }354}355/​/​ getSearchValue()356/​/​ Return the value inserted in the search text field357function LovWidget_getSearchValue()358/​/​ return a string with the value entered in the search field359{360 var o=this;361 return o.lovSearch.getSearchValue();362}363/​/​ setSearchValue(s)364/​/​ Set the value of the search text field365function LovWidget_setSearchValue(s)366/​/​ s [String] string that will be displayed in the textfield367{368 var o=this;369 o.lovSearch.setValue(s);370}371/​/​ getTextValue()372/​/​ Return the value inserted in the text field373function LovWidget_getTextValue()374/​/​ return a string with the value entered in the text field375{376 var o=this;377 return o.textField.getValue();378}379/​/​ setTextValue(s)380/​/​ Set the value of the search text field381function LovWidget_setTextValue(s)382/​/​ s [String] string that will be displayed in the textfield383{384 var o=this;385 o.textField.setValue(s);386}387/​/​ getChunkSelection()388/​/​ Return the selected chunk389function LovWidget_getChunkSelection()390/​/​ return a structure(index, value) of the selected chunk391{392 var o=this;393 return o.chunkCombo.getSelection();394}395/​/​ getLOVSelection()396/​/​ Return the selected lov(s)397function LovWidget_getLOVSelection()398/​/​ return an array of structure(index, value) of the selected lov(s)399{400 var o=this;401 return o.lovList.getMultiSelection();402}403/​/​ getDateValue()404/​/​ Return the value inserted in the date text field405function LovWidget_getDateValue()406/​/​ return a string with the value entered in the text field407{408 var o=this;409 return o.dateField.getValue();410}411/​/​ setDateValue(s)412/​/​ Set the value of the date text field413function LovWidget_setDateValue(s)414/​/​ s [String] string that will be displayed in the textfield415{416 var o=this;417 o.dateField.setValue(s);418}419/​/​ setTooltips(text,prev,next,refresh,search,chunk,lov)420/​/​ Set the tooltips of the differents widgets421function LovWidget_setTooltips(text,prev,next,refresh,search,chunk,lov)422{423 var o=this;424 if ( o.showTextField )425 o.textField.setTooltip(text);426 o.prevChunkIcn.setTooltip(prev);427 o.nextChunkIcn.setTooltip(next);428 if (o.showRefreshIcn)429 o.refreshIcn.setTooltip(refresh);430 /​/​o.searchIcn.setTooltip(search); 431 o.lovSearch.searchIcn.setTooltip(search);432 o.chunkCombo.setTooltip(chunk);433 o.lovList.setTooltip(lov);434}435/​/​ LovWidget_goToChunk(step)436/​/​ Move to a specified chunk437function LovWidget_goToChunk(step)438{439 var o=this;440 if ( o.chunkCombo.getSelection() == null )441 return;442 443 var curChunk = o.chunkCombo.getSelection().index;444 445 /​/​ If click on next or previous icon,446 /​/​ select the corresponding item in the combobox447 if (step != null)448 o.chunkCombo.select(curChunk+step);449 450 /​/​ set the previous and next icon state451 o.setPrevNextIconState();452 453 /​/​ Call the user callBack454 if (o.moveCB != null)455 o.moveCB(); 456}457/​/​ function LovWidget_setPrevNextIconState458/​/​ Enables or disables the next and previous icon459/​/​ depending on the item number selected in the LOV list460function LovWidget_setPrevNextIconState()461{462 var o=this;463 464 /​/​if combo is empty the disable combo and buttons465 if(!o.chunkCombo.getSelection())466 {467 o.chunkCombo.setDisabled(true);468 o.prevChunkIcn.setDisabled(true);469 o.nextChunkIcn.setDisabled(true); 470 }471 else472 {473 o.chunkCombo.setDisabled(false);474 }475 476 var curChunk = o.chunkCombo.getSelection().index;477 478 if ( o.chunkCombo.getCount() == 1 )479 {480 o.prevChunkIcn.setDisabled(true);481 o.nextChunkIcn.setDisabled(true);482 return;483 }484 485 if ( curChunk == 0 )486 {487 o.prevChunkIcn.setDisabled(true);488 o.nextChunkIcn.setDisabled(false);489 return;490 }491 492 if ( (curChunk+1) == o.chunkCombo.getCount() )493 {494 o.prevChunkIcn.setDisabled(false);495 o.nextChunkIcn.setDisabled(true);496 return;497 }498 499 o.prevChunkIcn.setDisabled(false);500 o.nextChunkIcn.setDisabled(false); 501}502/​/​ function LovWidget_change503/​/​ modify the UI of the widget504function LovWidget_change(label,w,lines,showText,showRefresh,moveCB,refreshCB,searchCB,505 dblClickCB,multi,enterCB,showDate,showTextOnly)506/​/​ label [String] the label of the chunk507/​/​ w [int] widget width, including borders508/​/​ lines [int] number of visible lines in the LOV list 509/​/​ IF SET TO 0 ONLY THE TEXTFIELD IS VISIBLE510/​/​ (LOVWIDGET equals a TEXTFIELDWIDGET IN THIS CASE)511/​/​ showText [boolean] display a textFieldWidget if true512/​/​ showRefresh [boolean] display a refresh icon if true513/​/​ moveCB [function] callback when click on the left arrow, combobox, right arrow514/​/​ refreshCB [function] callback when clicking on the refresh icon515/​/​ searchCB [function] callback when clicking on ENTER or on search icon516/​/​ dlbClickCB [function] callback when double clicking on the lov list517/​/​ multi [boolean] list is multi "selectionable" if true518/​/​ showDate [boolean] display a calendar widget if true519{520 var o=this521 522 /​/​ properties523 if(showText!=null)524 {525 o.showTextField = showText;526 o.textField.setDisplay(o.showTextField);527 }528 if(showRefresh!=null)529 {530 o.showRefreshIcn = showRefresh;531 o.refreshIcn.setDisplay(o.showRefreshIcn);532 o.updateWidget();/​/​to initialize o.noChunkLabel 533 }534 if(label!=null)535 {536 o.chunkText = label;537 o.chunkLabel.setHTML(o.chunkText);538 }539 if(showDate!=null)540 {541 o.showDate = showDate;542 o.dateField.setDisplay(o.showDate);543 if(o.showDate)544 o.textField.setDisplay(false);545 }546 /​/​ methods 547 if(moveCB!=null)548 o.moveCB = moveCB;549 550 if(refreshCB!=null)551 o.refreshCB = refreshCB;552 553 if(searchCB!=null)554 o.searchCB = searchCB;555 556 if(dblClickCB!=null)557 o.dblClickCB = dblClickCB;558 559 if(enterCB!=null)560 o.enterCB = enterCB;561 /​/​change list multi selection and lines562 o.lovList.change(multi,lines) 563 564 o.showTextOnly = showTextOnly==null?false:showTextOnly;565 o.showTextFieldOnly(o.showTextOnly)566 if (o.showTextOnly) o.lovList.del() /​/​FR 109490 567 /​/​ change w ? if(w!=null)568 569}570/​/​ function isCaseSensitive571/​/​ indicates if the option is checked572function LovWidget_isCaseSensitive()573/​/​ return [boolean] true if the option is checked574{575 return this.lovSearch.isCaseSensitive()576}577/​/​ function setCaseSensitive578/​/​ check or uncheck the match case checkbox579/​/​ update the icon580function LovWidget_setCaseSensitive(b)581/​/​ b [boolean] used as is582{583 var o=this584 585 o.lovSearch.setCaseSensitive(b);586}587/​/​---------------------------------------------------------------------------------------588/​/​calback functions589/​/​---------------------------------------------------------------------------------------590function LovWidget_prevCB()591{592 this.par.goToChunk(-1);593}594function LovWidget_nextCB()595{596 this.par.goToChunk(+1);597}598function LovWidget_comboCB()599{600 this.par.goToChunk(null);601}602function LovWidget_refreshCB()603{604 var p=this.par;605 606 if (p.refreshCB != null) 607 p.refreshCB();608}609function LovWidget_searchCB()610{611 var p=this.par;612 613 if (p.searchCB != null)614 p.searchCB();615}616function LovWidget_enterCB(e)617{618 var p=this.par;619 620 if (p.enterCB != null)621 p.enterCB(e);622}623function LovWidget_ListKeyUpCB(e)624{625 var p=this.par;626 var k=eventGetKey(e);627 if ((eventGetKey(e) == 13)&& (p.enterCB != null))628 p.enterCB(e);629}630function LovWidget_dblClickCB()631{632 var p=this.par;633 634 if (p.dblClickCB != null)635 p.dblClickCB();636}637function LovWidget_clickCB()638{639}640/​*641function LovWidget_normalClickCB()642{643 var p=this.par.parIcon.par644 645 var b=this.isChecked()646 if (b)647 p.searchIcn.icon.changeImg(0,0) /​/​ normal icon648 else649 p.searchIcn.icon.changeImg(55,0) /​/​ match case icon650 p.matchCase.check(!b) 651}652function LovWidget_matchCaseClickCB()653{654 var p=this.par.parIcon.par655 656 var b=this.isChecked()657 658 if (b)659 p.searchIcn.icon.changeImg(55,0) /​/​ match case icon660 else661 p.searchIcn.icon.changeImg(0,0) /​/​ normal icon662 663 p.normal.check(!b) 664}665function LovWidget_keyUpCB()666{667 var p=this.par668 669 p.searchIcn.setDisabled((this.getValue()==''))670}671*/​672function LovWidget_showTextFieldOnly(bVal)673{674 var o=this;675 o.showTextOnly=bVal676 if(o.showTextOnly == true)677 {678 o.textField.setDisplay(true);679 o.dateField.setDisplay(false);680 o.chunkLabel.setDisplay(false);681 o.prevChunkIcn.setDisplay(false);682 o.chunkCombo.setDisplay(false);683 o.nextChunkIcn.setDisplay(false); 684 o.refreshIcn.setDisplay(false);685 o.noChunkLabel.setDisplay(false);686 o.lovList.setDisplay(false);687 o.lovSearch.setDisplay(false);688 /​/​o.searchField.setDisplay(false);689 /​/​o.searchIcn.setDisplay(false);690 }691 else692 {693 o.textField.setDisplay(o.showTextField);694 o.dateField.setDisplay(o.showDate);695 if(o.showDate) o.textField.setDisplay(false);696 697 o.chunkLabel.setDisplay(true);698 o.prevChunkIcn.setDisplay(true);699 o.chunkCombo.setDisplay(true);700 o.nextChunkIcn.setDisplay(true);701 o.refreshIcn.setDisplay(o.showRefreshIcn);702 /​/​be carefull o.noChunkLabel depends on the combo size ===>function updateWidget()703 o.lovList.setDisplay(true);704 o.lovSearch.setDisplay(true);705 /​/​o.searchField.setDisplay(true);706 /​/​o.searchIcn.setDisplay(true);707 708 /​/​ Update the widget to take the combo size into account709 o.updateWidget()710 }711}712/​/​set the input format for calendar widget713function LovWidget_setFormatDate(format,arrDays,arrMonth,AM,PM)714{715 var o=this716 if(o.showDate && o.dateField) 717 o.dateField.setFormatInfo(format,arrDays,arrMonth,AM,PM);718}719function LovWidget_updateWidget()720{721 var o=this722 var b=(o.chunkCombo.getCount()>1)723 724 o.chunkLabel.setDisplay(b) 725 o.prevChunkIcn.setDisplay(b) 726 o.chunkCombo.setDisplay(b)727 o.nextChunkIcn.setDisplay(b)728 729 /​/​o.noChunkLabel depends on the combo size and the display of the refresh button730 o.noChunkLabel.setDisplay(!b && o.showRefreshIcn)...

Full Screen

Full Screen

run.js

Source:run.js Github

copy

Full Screen

...28const btn_switch = document.querySelector("#button_switchStyle")29let formula = "_";30let output = "";31/​/​ Helper functions32function setDisplay() {33 display_formula.textContent = formula;34 display_output.textContent = output;35}36function opAfterEq() {37 if(output != "") {38 output = "";39 }40}41function formulaAddElement(element) {42 if(formula === "_") {43 formula = element;44 } else {45 formula = formula+element;46 }47}48/​/​ monitor the buttons49btn_0.onclick = function() {50 opAfterEq();51 formulaAddElement("0");52 setDisplay();53}54btn_1.onclick = function() {55 opAfterEq();56 formulaAddElement("1");57 setDisplay();58}59btn_2.onclick = function() {60 opAfterEq();61 formulaAddElement("2");62 setDisplay();63}64btn_3.onclick = function() {65 opAfterEq();66 formulaAddElement("3");67 setDisplay();68}69btn_4.onclick = function() {70 opAfterEq();71 formulaAddElement("4");72 setDisplay();73}74btn_5.onclick = function() {75 opAfterEq();76 formulaAddElement("5");77 setDisplay();78}79btn_6.onclick = function() {80 opAfterEq();81 formulaAddElement("6");82 setDisplay();83}84btn_7.onclick = function() {85 opAfterEq();86 formulaAddElement("7");87 setDisplay();88}89btn_8.onclick = function() {90 opAfterEq();91 formulaAddElement("8");92 setDisplay();93}94btn_9.onclick = function() {95 opAfterEq();96 formulaAddElement("9");97 setDisplay();98}99btn_dot.onclick = function() {100 opAfterEq();101 formulaAddElement(".");102 setDisplay();103}104btn_add.onclick = function() {105 opAfterEq();106 formulaAddElement("+");107 setDisplay();108}109btn_minus.onclick = function() {110 opAfterEq();111 formulaAddElement("-");112 setDisplay();113}114btn_times.onclick = function() {115 opAfterEq();116 formulaAddElement("*");117 setDisplay();118}119btn_div.onclick = function() {120 opAfterEq();121 formulaAddElement("/​");122 setDisplay();123}124btn_power.onclick = function() {125 opAfterEq();126 formulaAddElement("**");127 setDisplay();128}129btn_ans.onclick = function() {130 opAfterEq();131 ans = localStorage.getItem("ans");132 formulaAddElement(ans.toString());133 setDisplay();134}135btn_inf.onclick = function() {136 opAfterEq();137 formulaAddElement("Infinity");138 setDisplay();139}140btn_nan.onclick = function() {141 opAfterEq();142 formulaAddElement("NaN");143 setDisplay();144}145btn_mod.onclick = function() {146 opAfterEq();147 formulaAddElement("%");148 setDisplay();149}150btn_lp.onclick = function() {151 opAfterEq();152 formulaAddElement("(");153 setDisplay();154}155btn_rp.onclick = function() {156 opAfterEq();157 formulaAddElement(")");158 setDisplay();159}160btn_eq.onclick = function() {161 let err_occurred = false;162 try{163 output = eval(formula);164 } catch(err) {165 output = "An error occurred";166 err_occurred = true;167 } finally {168 formula = "_";169 }170 if(!err_occurred) {171 localStorage.setItem("ans", output);172 }173 setDisplay();174}175btn_ac.onclick = function() {176 formula = "_";177 output = "";178 setDisplay();179}180btn_del.onclick = function() {181 opAfterEq();182 formula = formula.substring(0, formula.length-1);183 if(formula.length === 0) {184 formula = "_";185 }186 setDisplay(); 187}188btn_switch.onclick = function() {189 current_text = btn_switch.textContent;190 link = document.querySelector("link")191 if(current_text === "Switch to Light Style") {192 link.href = "./​css/​light_style.css";193 btn_switch.textContent = "Switch to Dark Style"194 } else if (current_text === "Switch to Dark Style") {195 link.href = "./​css/​dark_style.css";196 btn_switch.textContent = "Switch to Eva Style"197 } else if(current_text === "Switch to Eva Style") {198 link.href = "./​css/​eva_style.css";199 btn_switch.textContent = "Switch to Light Style"200 }201}202/​/​ initializing203btn_switch.textContent = "Switch to Dark Style"...

Full Screen

Full Screen

DrumMachine.js

Source:DrumMachine.js Github

copy

Full Screen

...7 const [display, setDisplay] = useState(8 "Click some buttons to hear some sounds!!"9 );10 if (display === "q") {11 setDisplay("Heater 1");12 } else if (display === "w") {13 setDisplay("Heater 2");14 } else if (display === "e") {15 setDisplay("Heater 3");16 } else if (display === "a") {17 setDisplay("Heater 4");18 } else if (display === "s") {19 setDisplay("Clap");20 } else if (display === "d") {21 setDisplay("Open HH");22 } else if (display === "z") {23 setDisplay("KicknHat");24 } else if (display === "x") {25 setDisplay("Kick");26 } else if (display === "c") {27 setDisplay("Closed HH");28 }29 return (30 <div className={drummachine} id={"drum-machine"}>31 <Display display={display} /​>32 <div className={grid}>33 <div className={padcontainer}34 onClick={() => {35 setDisplay("Heater 1");36 }}37 >38 <DrumPad39 id={"qKey"}40 handleKeys={["Q"]}41 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-1.mp3"42 /​>43 </​div>44 <div className={padcontainer}45 onClick={() => {46 setDisplay("Heater 2");47 }}48 >49 <DrumPad50 id={"wKey"}51 handleKeys={["W"]}52 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-2.mp3"53 /​>54 </​div>55 <div className={padcontainer}56 onClick={() => {57 setDisplay("Heater 3");58 }}59 >60 <DrumPad61 id={"eKey"}62 handleKeys={["E"]}63 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-3.mp3"64 /​>65 </​div>66 <div className={padcontainer}67 onClick={() => {68 setDisplay("Heater 4");69 }}70 >71 <DrumPad72 id={"aKey"}73 handleKeys={["A"]}74 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-4_1.mp3"75 /​>76 </​div>77 <div className={padcontainer}78 onClick={() => {79 setDisplay("Clap");80 }}81 >82 <DrumPad83 id={"sKey"}84 handleKeys={["S"]}85 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-6.mp3"86 /​>87 </​div>88 <div className={padcontainer}89 onClick={() => {90 setDisplay("Open HH");91 }}92 >93 <DrumPad94 id={"dKey"}95 handleKeys={["D"]}96 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Dsc_Oh.mp3"97 /​>98 </​div>99 <div className={padcontainer}100 onClick={() => {101 setDisplay("KickNHat");102 }}103 >104 <DrumPad105 id={"zKey"}106 handleKeys={["Z"]}107 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Kick_n_Hat.mp3"108 /​>109 </​div>110 <div className={padcontainer}111 onClick={() => {112 setDisplay("Kick");113 }}114 >115 <DrumPad116 id={"xKey"}117 handleKeys={["X"]}118 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​RP4_KICK_1.mp3"119 /​>120 </​div>121 <div className={padcontainer}122 onClick={() => {123 setDisplay("Closed HH");124 }}125 >126 <DrumPad127 id={"cKey"}128 handleKeys={["C"]}129 audioSrc="https:/​/​s3.amazonaws.com/​freecodecamp/​drums/​Cev_H2.mp3"130 /​>131 </​div>132 </​div>133 <KeyboardEventHandler134 handleKeys={["q", "w", "e", "a", "s", "d", "z", "x", "c"]}135 onKeyEvent={(key, e) => setDisplay(key)}136 /​>137 </​div>138 );139};...

Full Screen

Full Screen

App.jsx

Source:App.jsx Github

copy

Full Screen

...46 const ChordChanger = (temp) => {47 switch(temp) {48 case 'C':49 C.map(n => console.log(n));50 setDisplay(display.concat(C));51 break;52 case 'Db':53 Db.map(n => console.log(n));54 setDisplay(display.concat(Db));55 break;56 case 'D':57 D.map(n => console.log(n));58 setDisplay(display.concat(D));59 break;60 case 'Dm':61 Dm.map(n => console.log(n));62 setDisplay(display.concat(Dm));63 break;64 case 'Eb':65 Eb.map(n => console.log(n));66 setDisplay(display.concat(Eb));67 break;68 case 'E':69 E.map(n => console.log(n));70 setDisplay(display.concat(E));71 break;72 case 'Em':73 Em.map(n => console.log(n));74 setDisplay(display.concat(Em));75 break;76 case 'F':77 F.map(n => console.log(n));78 setDisplay(display.concat(F));79 break;80 case 'Fm':81 Fm.map(n => console.log(n));82 setDisplay(display.concat(Fm));83 break;84 case 'Gb':85 Gb.map(n => console.log(n));86 setDisplay(display.concat(Gb));87 break;88 case 'G':89 G.map(n => console.log(n));90 setDisplay(display.concat(G));91 break;92 case 'Gm':93 Gm.map(n => console.log(n));94 setDisplay(display.concat(Gm));95 break;96 case 'Ab':97 Ab.map(n => console.log(n));98 setDisplay(display.concat(Ab));99 break;100 case 'Abm':101 Abm.map(n => console.log(n));102 setDisplay(display.concat(Abm));103 break;104 case 'A':105 A.map(n => console.log(n));106 setDisplay(display.concat(A));107 break;108 case 'Am':109 Am.map(n => console.log(n));110 setDisplay(display.concat(Am));111 break;112 case 'Bb':113 Bb.map(n => console.log(n));114 setDisplay(display.concat(Bb));115 break;116 case 'B':117 B.map(n => console.log(n));118 setDisplay(display.concat(B));119 break;120 case 'Bm':121 Bm.map(n => console.log(n));122 setDisplay(display.concat(Bm));123 break;124 default:125 console.log('oops');126 }127 };128 129 130 131 const value = C.map((n, i) => {132 console.log('value', value);133 return (134 135 <li onClick={() => {136 return (setChord(n), ChordChanger(n));...

Full Screen

Full Screen

Calculator.js

Source:Calculator.js Github

copy

Full Screen

...10 </​div>11 <div className='Char'>12 <div className='row-1'>13 <button onClick={() => {14 setDisplay(9)15 }}>9</​button>16 <button onClick={() => {17 setDisplay(8)18 }}>8</​button>19 <button onClick={() => {20 setDisplay(7)21 }}>7</​button>22 <button onClick={() => {23 setDisplay(0)24 }}>C</​button>25 </​div>26 <div className='row-2'>27 <button onClick={() => {28 setDisplay(6)29 }}>6</​button>30 <button onClick={() => {31 setDisplay(5)32 }}>5</​button>33 <button onClick={() => {34 setDisplay(4)35 }}>4</​button>36 <button onClick={() => {37 setDisplay('*')38 }}>×</​button>39 </​div>40 <div className='row-3'>41 <button onClick={() => {42 setDisplay(3)43 }}>3</​button>44 <button onClick={() => {45 setDisplay(2)46 }}>2</​button>47 <button onClick={() => {48 setDisplay(1)49 }}>1</​button>50 <button onClick={() => {51 setDisplay('/​')52 }}>÷</​button>53 </​div>54 <div className='row-4'>55 <button onClick={() => {56 setDisplay(0)57 }}>0</​button>58 <button onClick={() => {59 setDisplay('+')60 }}>+</​button>61 <button onClick={() => {62 setDisplay('-')63 }}>-</​button>64 <button onClick={() => {65 setDisplay('=')66 }}>=</​button>67 </​div>68 </​div>69 </​div>70 </​div>71 )72}...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...19 setNumero(0);20 };21 if (press === "C") {22 console.log(press);23 /​/​setDisplay("");24 setDisplay("0");25 setState(null);26 setOperac(null);27 }28 if (press === ".") {29 if (display.includes(".")) return;30 setDisplay(display + ".");31 return;32 }33 if (oper === 0) {34 if (display.length === 10) return;35 if (display === "0" || display === "-0") {36 press === "0" ? setDisplay("0") : setDisplay(press);37 } else {38 if (operac !== null) {39 setDisplay(`${display}${press}`);40 setNumero(`${numero}${press}`);41 } else {42 setDisplay(`${display}${press}`);43 }44 }45 } else {46 /​/​--------------------------------------47 if (press === "+") {48 if (operac === null) {49 setOperac(operaciones.suma);50 setDisplay(`${display}${press}`);51 formatNumber();52 /​/​console.log(operando);53 } else {54 formatNumber();55 calcular();56 setDisplay(numero);57 }58 }59 /​/​------------------------hasta aca ok60 if (press === "=") {61 display.endsWith(".")62 ? setNumero(parseFloat(display.slice(0, -1)))63 : setNumero(parseFloat(display));64 calcular();65 }66 }67 };68 const calcular = () => {69 switch (operac) {70 case operaciones.suma:...

Full Screen

Full Screen

main.js

Source:main.js Github

copy

Full Screen

1function setDisplay(idName, displayValue) {2 var item = document.getElementById(idName);3 item.style.display = displayValue;4 }5 6 function displayHome() {7 setDisplay("home", "block");8 setDisplay("workex", "none");9 setDisplay("edu", "none");10 setDisplay("info", "none");11 setDisplay("certificates", "none");12 setDisplay("gallery", "none");13 }14 15 function displayWorkex() {16 setDisplay("home", "none");17 setDisplay("workex", "block");18 setDisplay("edu", "none");19 setDisplay("info", "none");20 setDisplay("certificates", "none");21 setDisplay("gallery", "none");22 }23 24 function displayEdu() {25 setDisplay("home", "none");26 setDisplay("workex", "none");27 setDisplay("edu", "block");28 setDisplay("info", "none");29 setDisplay("certificates", "none");30 setDisplay("gallery", "none");31 }32 function displayInfo() {33 setDisplay("home", "none");34 setDisplay("workex", "none");35 setDisplay("edu", "none");36 setDisplay("info", "block");37 setDisplay("certificates", "none");38 setDisplay("gallery", "none");39 }40 function displayCertificates() {41 setDisplay("home", "none");42 setDisplay("workex", "none");43 setDisplay("edu", "none");44 setDisplay("info", "none");45 setDisplay("certificates", "block");46 setDisplay("gallery", "none");47 }48 function displayGallery() {49 setDisplay("home", "none");50 setDisplay("workex", "none");51 setDisplay("edu", "none");52 setDisplay("info", "none");53 setDisplay("certificates", "none");54 setDisplay("gallery", "block");...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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.waitForTimeout(5000);7 await page.evaluate(() => {8 window.playwright.setDisplay({ width: 800, height: 600, deviceScaleFactor: 1, isMobile: false, hasTouch: false, colorScheme: 'light' });9 });10 await page.waitForTimeout(5000);11 await browser.close();12})();13const { chromium } = require('playwright');14const { test, expect } = require('@playwright/​test');15test.use({ viewport: { width: 800, height: 600 } });16test('test', async ({ page }) => {17 await page.waitForTimeout(5000);18 await page.evaluate(() => {19 window.playwright.setDisplay({ width: 800, height: 600, deviceScaleFactor: 1, isMobile: false, hasTouch: false, colorScheme: 'light' });20 });21 await page.waitForTimeout(5000);22});23const { chromium } = require('playwright');24const { test, expect } = require('@playwright/​test');25test.use({ viewport: { width: 800, height: 600 } });26test('test', async ({ page }) => {27 await page.waitForTimeout(5000);28 await page.setViewportSize({ width: 800, height: 600 });29 await page.waitForTimeout(5000);30});31Note: You can also set the viewport size using the launch() method of Playwright API

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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.setDisplay({ width: 800, height: 600 });7 await page.screenshot({ path: 'example.png' });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.setDisplay({ width: 800, height: 600 });16 await page.screenshot({ path: 'example.png' });17 await browser.close();18})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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.setViewportSize({width: 1280, height: 720});7 await page.screenshot({path: 'screenshot.png'});8 await browser.close();9})();10const {chromium} = require('playwright');11(async () => {12 const browser = await chromium.launch({headless: false});13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.setViewportSize({width: 1280, height: 720});16 await page.screenshot({path: 'screenshot.png'});17 await browser.close();18})();19const {chromium} = require('playwright');20(async () => {21 const browser = await chromium.launch({headless: false});22 const context = await browser.newContext();23 const page = await context.newPage();24 await page.setViewportSize({width: 1280, height: 720});25 await page.screenshot({path: 'screenshot.png'});26 await browser.close();27})();28const {chromium} = require('playwright');29(async () => {30 const browser = await chromium.launch({headless: false});31 const context = await browser.newContext();32 const page = await context.newPage();33 await page.setViewportSize({width: 1280, height: 720});34 await page.screenshot({path: 'screenshot.png'});35 await browser.close();36})();37const {chromium} = require('playwright');38(async () => {39 const browser = await chromium.launch({headless: false});40 const context = await browser.newContext();41 const page = await context.newPage();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext({ viewport: { width: 640, height: 480 } });5 const page = await context.newPage();6 await page.screenshot({ path: 'example.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: 'example.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: '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.screenshot({ path: 'example.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: '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();45 const page = await context.newPage();46 await page.screenshot({ path: 'example.png' });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setDisplay } = require('playwright/​lib/​server/​chromium/​crBrowser');2const browser = await chromium.launch();3const context = await browser.newContext();4const page = await context.newPage();5await setDisplay(page, { width: 1000, height: 1000, deviceScaleFactor: 2, mobile: true });6await page.screenshot({ path: 'example.png' });7const { setDisplay } = require('playwright/​lib/​server/​chromium/​crBrowser');8const browser = await chromium.launch();9const context = await browser.newContext();10const page = await context.newPage();11await setDisplay(page, { width: 1000, height: 1000, deviceScaleFactor: 2, mobile: true });12await page.screenshot({ path: 'example.png' });13const { setDisplay } = require('playwright/​lib/​server/​chromium/​crBrowser');14const browser = await chromium.launch();15const context = await browser.newContext();16const page = await context.newPage();17await setDisplay(page, { width: 1000, height: 1000, deviceScaleFactor: 2, mobile: true });18await page.screenshot({ path: 'example.png' });19const { setDisplay } = require('playwright/​lib/​server/​chromium/​crBrowser');20const browser = await chromium.launch();21const context = await browser.newContext();22const page = await context.newPage();23await setDisplay(page, { width: 1000, height: 1000, deviceScaleFactor: 2, mobile: true });24await page.screenshot({ path: 'example.png' });25const { setDisplay } = require('playwright/​lib/​server/​chromium/​crBrowser');26const browser = await chromium.launch();27const context = await browser.newContext();28const page = await context.newPage();29await setDisplay(page, { width: 1000, height: 1000, deviceScaleFactor: 2, mobile: true });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext({5 viewport: { width: 800, height: 600 },6 });7 const page = await context.newPage();8 await page.screenshot({ path: `example.png` });9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch({ headless: false });14 const context = await browser.newContext({15 viewport: { width: 800, height: 600 },16 });17 const page = await context.newPage();18 await page.screenshot({ path: `example.png` });19 await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23 const browser = await chromium.launch({ headless: false });24 const context = await browser.newContext({25 viewport: { width: 800, height: 600 },26 });27 const page = await context.newPage();28 await page.screenshot({ path: `example.png` });29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch({ headless: false });34 const context = await browser.newContext({35 viewport: { width: 800, height: 600 },36 });37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });39 await browser.close();40})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext({5 });6 const page = await context.newPage();7 await page.screenshot({ path: `wikipedia-home-mobile.png` });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext({14 });15 const page = await context.newPage();16 await page.screenshot({ path: `wikipedia-home-mobile.png` });17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const context = await browser.newContext({23 });24 const page = await context.newPage();25 await page.screenshot({ path: `wikipedia-home-mobile.png` });26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch();31 const context = await browser.newContext({32 });33 const page = await context.newPage();34 await page.screenshot({ path: `wikipedia-home-mobile.png` });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({4 });5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.waitForSelector('text=Get started');8 await page.click('text=Get started');9 await page.waitForSelector('text=API reference');10 await page.click('text=API reference');11 await page.waitForSelector('text=Page');12 await page.click('text=Page');13 await page.waitForSelector('text=setDisplaySize');14 await page.click('text=setDisplaySize');15 await page.waitForSelector('text=page.setDisplaySize(options)');16 await page.click('text=page.setDisplaySize(options)');17 await page.waitForSelector('text=Parameters');18 await page.click('text=Parameters');19 await page.waitForSelector('text=options');20 await page.click('text=options');21 await page.waitForSelector('text=Object');22 await page.click('text=Object');23 await page.waitForSelector('text=width');24 await page.click('text=width');25 await page.waitForSelector('text=Number');26 await page.click('text=Number');27 await page.waitForSelector('text=height');28 await page.click('text=height');29 await page.waitForSelector('text=scaleFactor');30 await page.click('text=scaleFactor');31 await page.waitForSelector('text=1');32 await page.click('text=1');33 await page.waitForSelector('text=mobile');34 await page.click('text=mobile');35 await page.waitForSelector('text=boolean');36 await page.click('text=boolean');37 await page.waitForSelector('text=Returns');38 await page.click('text=Returns');39 await page.waitForSelector('text=Promise');40 await page.click('text=Promise');41 await page.waitForSelector('text=Promise<void>');42 await page.click('text=Promise<void>');43 await page.waitForSelector('text=Example');44 await page.click('text=Example');45 await page.waitForSelector('text=const page = await browser.newPage();');46 await page.click('text=const page = await browser.newPage();');47 await page.waitForSelector('text=await page.setDisplaySize

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful