How to create a background color switcher with JavaScript

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 .

    

Don’t forget Ctrl + S.

7. Reload the URL address: http: // localhost / BackgroundSwitcher. First view of Background color toggle switch.

Click button Toggle switch to open the color options.

Click on a color to change the color.

Click the back button Toggle switch to close the color selection.

8. Since the switcher button symbol used is from:

So make sure your computer is connected to the internet, otherwise you won’t see the icon.

9. Done.

Hence the explanation of the tutorial ‘How to Make Background color toggle switch with JavaScript ‘. Much luck.






Leave a Reply

Your email address will not be published.