How to Create a Selection Menu With a Rainbow Color Sequence Background Function Using Bootstrap

Words
444
Reading
2 min
9y
Listen to this post
~3 min
    What Will I Learn?
  • You will learn how to programming HTML, CSS, and JS
  • You will learn how to change the background color like a rainbow color sequence
  • You will learn how to use bootstrap

    Requirements
  • You must have interest first
  • You have a baseline about Hypertext Markup Language (HTML)
  • You have a basis on Cascading Style Sheets (CSS)
  • You have a basic about Javascript (JS)

    Difficulty
  • medium

    Tools
  • notepad ++
  • Browser(Google Chroum/Mozilla Firefox)

Contents Tutorial To change the background color just pressing toggle. who sees their site will be interested if you want to follow the steps as below:

  • The first step you should create a .html file that will be used as a file to change the background in the rainbow color sequence, such as the author creates the file (rainbow.html) or you can also use the name you like.
  • As usual the second step is to create a template first if you are already proficient in the programming language you can immediately make it thoroughly.
  • Then for the third step note the use of bootstrap we have to do is to host the boostrap file that we will run or you can also add the boostrap CDN in your program, and for this time the author will only use the CDC version because for the Processing and processing version will be available in processing. Patch the syntax listed below in the file rainbow.html:
  • 1.png

  • So the next step is to make CSS for red, orange, yellow, green, blue, indigo, violet. Can be seen in the picture below:
  • 2.png

  • The next step is to create a function that when inputted syntax call it will be called through this function, And for the caller syntax can be seen in the picture below:
  • 3.png

  • Here are the words to explain more clearly, so it is not too flat or too plain in the input of this syntax, And for the syntax can be seen. in the picture below:
  • 4.png

    5.png

  • In the next stage is the stage of making the menu options that will call the syntax that has been done above, and the image syntax can be seen in the picture below:
  • 6.png

  • And for the last step is the footer step goes, this is not a necessity to do but to show only that this website is your production as well as close the syntax / htmlnya, As shown below:
  • 7.png

    Below is all the code for the rainbow background function

    8.png

    and this is the result of the html, css, and js code above

    10.png

    11.png

    12.png

    13.png

    14.png

    15.png

    16.png

    17.png

    preview
    rainbow.gif

    all the above code you can download on google drive I uploaded
    Document or File



    Posted on Utopian.io - Rewarding Open Source Contributors