How To Create Option Menu With Function Night And Day Mode Using Bootstrap

What Will I Learn?

• You will learn how to programming languages
• You will learn how to create option menu with day mode
• You will learn how to create option menu with night mode
• You will learn how to use bootstrap

Requirements

• You must have interest first
• You have basic about Hypertext Markup Language (HTML)
• You have basic about Cascading Style Sheets (CSS )

Difficulty

• Intermediate

Tool

Subline Text

Source Picture

Google Crome

Source Picture

Tutorial Contents

For a toggle night mode and toggle day mode on a website is not that rarely heard in this era because every major website or advanced applications must use night mode and day mode on their website because it can create different variations on their website and for the visitors who see their website will be more interested to see it and if you are interested how to make this toggle you should follow the steps as below:

• The first step you have to create a .html file that will be used as a night and day mode file, for example like the author created a file (1.html) or you can also use the name you like in tab making this time and important thing you should remember is the making of this file occurs in subline text because the author uses subline text if you use text editor different version you can also make it origin must have text editor.

• As usual the second step is to make the skeleton first if you are already proficient in the programming language you can immediately make it thoroughly.

• Then for the third step to note is on every bootstrap usage we have to do is to host the boostrap file that we will execute or you can also add the boostrap CDN in your program, And for this time the author will use CDC version only because for the version is easier in the process of processing and also users who will access it will be greatly helped by all facilities on offer because it is very complete, Paste the syntax listed below in the file 1.html :

• Then the next step is to make CSS for night mode and also the day mode where the night mode is given black background because for night mode is synonymous with black while for day mode used CSS that berindentik with background day or morning that is white and on occasion this time the author uses green writing for night mode and blue writing for day mode is used to give the impression to the visitors of this blog more interested in the color and for syntaxnya, Can be seen in the picture below:

• 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:

• Then is the creation of the body on toggle night and day mode, This does not have to be made just this as a writer on your website page so as not too flat or too plain in inputkan this syntax, And for syntax can be seen in the picture below:

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

• And for the last step is step footer making on website, this is not necessity that must be done but to show just that this website is your production as well as closing syntax / html him, As shown below:

The syntax is listed below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Toggle Night Mode And Toggle Day Mode</title>
<style>.night{
        background: black;
        color :green;
    }.day{
        background: white;
        color: blue;
    }
</style>
<script>
    function day(){
        body.className='day';
    }
    function night(){
        body.className='night';
    }
</script>

    <h1 class="text-center">NIGHT & DAY </h1>
    <h3 class="text-center">Choose On Option Menu To Change To Dark Mode</h3>
    <h3 class="text-center">Choose On Option Menu" To Change Bright Mode </h3>
    <br> 
    <br>
        <center> 
            <label>
            <input type="radio" onclick="night()" name="night" value="night"/>Night
            </label>
            <br>
            <label>
            <input type="radio" onclick="day()" name="day" value="day"/>Day
            </label>
        </center>