With the help of the programming languages CSS and JavaScript we can create very easily Background color toggle switch. By using Background color switcher, we can change the color easily Background.
How to do Background color toggle switch with JavaScript? Let’s just open your computer and do the following.
Tutorials
1. Open the XAMPP control panel and activate Apache.
2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.
BACKGROUND COLOR SWITCHER BACKGROUND COLOR SWITCHER
Pilih Warna Favorit-mu
Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named Background switcher – save the code above with the name index.html.
3. To see the results of the script code above, you can open your browser and type http: // localhost / BackgroundSwitcher.
4. Enter the following CSS code.
*{ padding: 0; margin: 0; box-sizing:border-box; transition: .5s ease;}body { color : #fff; padding-top:40px; background: red;}.all .main { position: absolute; width: 100%; height: 100%; z-index: 1; text-align: center; color:#fff;}.all .main h1 { margin: 20% 0 0; padding: 20px; font-size: 80px;}.all .main h3{ font-size: 30px;}.all .choose{ position:absolute; z-index: 2; overflow: hidden;}.all .choose .colors { float: left; padding: 7px; background: #ffeb3b; width: 400px; }.all .choose .colors ul li { display: inline-block; width: 25px; height: 25px; margin: 10px 5px; cursor: pointer; background: green; }.all .choose .themes-btn { float: left; color: black; background: #fff; padding: 22px 23px 23px 23px; box-shadow: 3px 3px 0 -2px rgba(0,0,0,0.2); font-weight: bold; cursor: pointer;}.all .choose .themes-btn:hover{ box-shadow: 4px 4px 10px -3px rgba(0,0,0,0.56); }.all .choose .colors .theme ul li:nth-child(1),.all .choose .colors .text ul li:nth-child(1) { background: #1a1a1a; color: #1c1b1b;}.all .choose .colors .theme ul li:nth-child(2),.all .choose .colors .text ul li:nth-child(2) { background: white; color: #fff;}.all .choose .colors .theme ul li:nth-child(3),.all .choose .colors .text ul li:nth-child(3) { background: #7b1fa2; color: #7b1fa2; }.all .choose .colors .theme ul li:nth-child(4),.all .choose .colors .text ul li:nth-child(4) { background: #0084d6; color: #0084d6;}.all .choose .colors .theme ul li:nth-child(5),.all .choose .colors .text ul li:nth-child(5) { background: #009688; color:#009688;}.all .choose .colors .theme ul li:nth-child(6),.all .choose .colors .text ul li:nth-child(6) { background: #cf455c; color: #cf455c;}.all .choose .colors .theme ul li:nth-child(7),.all .choose .colors .text ul li:nth-child(7) { background: #43a047; color: #43a047;}.all .choose .colors .theme ul li:nth-child(8),.all .choose .colors .text ul li:nth-child(8) { background: #00acc1; color: #00acc1;}.all .choose .colors .theme ul li:nth-child(9),.all .choose .colors .text ul li:nth-child(9) { background: #34495e; color: #34495e;}.active { transform: translate(-400px);} body h1,h3{ font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
Save the CSS code in the xampplite folder – htdocs – create a new folder named Background switcher – Save the CSS code under the name style.css.
5. Reload the URL address: http: // localhost / BackgroundSwitcher. First view of Background color toggle switchbut the button Toggle switch does not work yet.
6. To activate the button Counter, Enter the JavaScript code in the index.html file. Enter the following JavaScript code before the code
