Showing 9 Result(s)
HTML program to display the capital of a state

HTML program to display the capital of a state

Hello guys, in this tutorials you’ll learn how to code a HTML program to display the capital of a state, it is very easy,  just peak these code and paste in your daily code editor as well in text editor keep it separate html, css and javascript file.

HTML Code

<html>
<head>
<meta charset="utf-8">
<title>viewtechindia.com</title>
</head>
<body>
<form class="form" name="myform" id="myForm">
  <lable class="label">Select Country:</lable> <select class="select" name="state" id="countySel" size="1">
<option value="" selected="selected">Select Country</option>
</select>
<br>
<br>
<lable class="label">Select State:</lable> <select class="select" name="countrya" id="stateSel" size="1">
<option class="option" value="" selected="selected">Please select Country first</option>
</select>
<br>
<br>
<lable class="label">Select District: </lable><select class="select" name="district" id="districtSel" size="1">
<option value="" selected="selected">Please select State first</option>
</select><br>
<input class="submit-button"  type="submit">
</form>
</body>
</html>

CSS Code

body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.form {
border:solid 1px #ffffff;
padding:40px;
text-align:left;
display:block;
margin:65px auto 0px auto;
max-width:400px;
border-radius:5px; background:rbga(256,256,256, 0.5);
}
.select {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
}
.label {
min-width:130px;
display:inline-block;
}
.submit-button {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
border:none;
background:#f2f2f2;
margin-left:130px;
margin-top:25px
}

JavaScript

var stateObject = {
"India": { "Delhi": ["new Delhi", "North Delhi"],
"Kerala": ["Thiruvananthapuram", "Palakkad"],
"Goa": ["North Goa", "South Goa"],
},
"Australia": {
"South Australia": ["Dunstan", "Mitchell"],
"Victoria": ["Altona", "Euroa"]
}, "Canada": {
"Alberta": ["Acadia", "Bighorn"],
"Columbia": ["Washington", ""]
},
}
window.onload = function () {
var countySel = document.getElementById("countySel"),
stateSel = document.getElementById("stateSel"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
countySel.options[countySel.options.length] = new Option(country, country);
}
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[countySel.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}

View Result

Responsive mega menu without bootstrap and with bootstrap

Responsive mega menu without bootstrap and with bootstrap

Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks of traditional drop-downs. Hierarchy of your navigation is made visible all at once and the amount of clicking, searching, and navigating is reduced.

This module allows you to build mega menus by leveraging jQuery and the prevailing Bootstrap menu system. Megamenu takes a  menu that is 3 levels deep, and converts it into a categorized 3-level mega menu, which is placed into your site as a block.

Responsive and Mega menu

See the Pen
Responsive and Mega menu
by Arjun Amgain (@arjunamgain)
on CodePen.

 

Responsive Mega Menu – Navigation

See the Pen
Responsive Mega Menu – Navigation
by samir alley (@samiralley)
on CodePen.

Mega Menu Dropdowns with Foundation 5

See the Pen
Mega Menu Dropdowns with Foundation 5
by SitePoint (@SitePoint)
on CodePen.

Responsive Bootstrap mega menu with various content

See the Pen
Responsive Bootstrap mega menu
by Martin Stanek (@skywalkapps)
on CodePen.

How to make datepicker responsive?

How to make datepicker responsive?

In this tutorial, learn how to add datepicker to input field using Bootstrap. The short answer is to use the bootstrap-datepicker.js to create a text box with the date picker. The input box if contains the date picker will display the date picker when the user clicks on it.

The date picker adds the date picker to the input box which contains days, month and year to select. When you select the date from the date picker, it adds the selected date to the input box.

So, let’s start creating a date picker input box using Bootstrap with the below methods.

Simple Bootstrap datepicker example

See the Pen
Simple Bootstrap datepicker example
by Luís Cruz (@milz)
on CodePen.

Home Bootstrap Datepicker with popup

See the Pen
Bootstrap datepicker in modal
by Sinetheta (@Sinetheta)
on CodePen.

CodePen Home Bootstrap Datepicker Demo

See the Pen
Bootstrap Datepicker Demo
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Bootstrap Datepicker – Inline

See the Pen
Bootstrap Datepicker – Inline
by alenii (@alenii)
on CodePen.

Date Picker Untuk Jadwal Penerbangan Travel Website

See the Pen
Date Picker Untuk Jadwal Penerbangan Travel Website
by Desain 360 (@desain360)
on CodePen.