Showing 10 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

To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu

Responsive dropdown menu with logo

To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu created by way of SCSS code, rather than hard-coding it into html, or using a scripting language, such as JavaScript. The drop down menu part refers to the way a sub-menu item “drops down” from its parent menu item. In tutorial you are able how to create submenu

HTML

<nav class="navbar">
  <div class="logo"><img src="http://viewtechindia.com/wp-content/uploads/2019/10/final-logo.png" alt="LOGO"></div>
  <div class="push-left">
    <button id="menu-toggler" data-class="menu-active" class="hamburger">
      <span class="hamburger-line hamburger-line-top"></span>
      <span class="hamburger-line hamburger-line-middle"></span>
      <span class="hamburger-line hamburger-line-bottom"></span>
    </button>    
    <ul id="primary-menu" class="menu nav-menu">
      <li class="menu-item current-menu-item"><a class="nav__link"  href="#">Home</a></li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">About</a>
         <ul class="sub-nav" >
          <li><a class="sub-nav__link" href="#">link 1</a></li>
          <li><a class="sub-nav__link" href="#">link 2</a></li>
          <li><a class="sub-nav__link" href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">Contact</a>
        <ul class = "sub-nav">
          <li><a class="sub-nav__link"  href="#">link 1</a></li>
          <li><a class="sub-nav__link"  href="#">link 2</a></li>
          <li><a class="sub-nav__link"  href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Blog</a>       
      </li>
    </ul>
</div>
</nav>

SCSS

$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
  background: linear-gradient(90deg, rgba(18,40,182,1) 3%, rgba(0,212,255,1) 100%);
  color: $ternary;
  font-size: 14px;
  margin: 0;
}
.logo {
  max-width: 200px;
}
.navbar {
  align-items: center;
  background: $primary;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  padding: 10px 50px;
}
.push-left {
  margin-left: auto;
}
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  outline: none;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1000;
  @media screen and (max-width: 768px) {
    display: inline-block;
  }
  &-line {
    background: $ternary;
    height: 3px;
    position: absolute;
    left: 0;
    transition: all 0.2s ease-out;
    width: 100%;
    .hamburger:hover & {
      background: #777;
    }
    &-top {
      top: 3px;
    }
    .menu-active &-top {
      top: 50%;
      transform: rotate(45deg) translatey(-50%);
    }
    &-middle {
      top: 50%;
      transform: translatey(-50%);
    }
    .menu-active &-middle {
      left: 50%;
      opacity: 0;
      width: 0;
    }
    &-bottom {
      bottom: 3px;
    }
    .menu-active &-bottom {
      bottom: 50%;
      transform: rotate(-45deg) translatey(50%);
    }
  }
}
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.25s ease-in;
  @media screen and (max-width: 768px) {
    background: $primary;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translatey(-100%);
    text-align: center;
    .menu-active & {
      transform: translatey(0%);
      opacity: 1;
    }
  }
  .menu-item a {
    color: $dark;
    display: block;
    line-height: 30px;
    margin: 0px 10px;
    text-decoration: none;
    text-transform: uppercase;
    &:hover {
      color: lighten($dark, 20);
      text-decoration: underline;
    }
    @media screen and (max-width: 768px) {
      font-size: 20px;
      margin: 8px;
    }
  }
}
.sub-nav {
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  background-color: $primary;
  padding: 5px 5px;
  list-style: none;
  width: 230px;
  @media screen and (max-width: 768px) {
    position: relative;
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }
}
.nav__link {
  &:hover + .sub-nav {
    display: block;
  }
}
.sub-nav {
  &:hover {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});

function toggleBodyClass(className) {
document.body.classList.toggle(className);
}});

Responsive

Digital Clock Design Using 8086 Theory

Digital Clock Design Using 8086 Theory

In this tutorials we  are going to learning how to create  a simple digital clock using HTML5, CSS3 and JavaScript.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

Files

For this project we will need three files namely

  • index.html
  • style.css
  • script.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet">
</head>
<body>
    <h2>Digital Clock</h2>
    <div class="clock">
        <div class="times">
            <div class="time">
                <span id="hour">00</span>
            </div>
            <div class="title">
                <span>Hours</span>
            </div>
        </div>
        <div class="times">
            <div class="time">
                <span id="minute">00</span>
            </div>
            <div class="title">
                <span>Minutes</span>
            </div>
        </div>
        <div class="times">
            <div class="time">
                <span id="second">00</span>
            </div>
            <div class="title">
                <span>Seconds</span>
            </div>
        </div>
    </div>
</body>
</html>

style.css

*{
font-family: 'Big Shoulders Display', cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #c2c2c2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
}
h2{
font-size: 4em;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 30px;
}
.clock{
max-width: 800px;
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
}
.clock .times{
width: 200px;
height: 250px;
position: relative;
}
.clock .times::before{
content: "";
position: absolute;
transform-origin: bottom;
}
.clock .times::after{
content: "";
position: absolute;
transform-origin: left;
}
.clock .times .time{
width: 100%;
height: 180px;
text-align: center;
background: #003f83;
line-height: 180px;
font-size: 5em;
letter-spacing: 3px;
}
.clock .times .title{
width: 100%;
height: 70px;
text-align: center;
line-height: 70px;
background:#0051a9;
font-size: 2em;
letter-spacing: 2px;
}
.clock .times .title::before{
content: "";
position: absolute;
width: 100%;
height: 250px;
bottom: 0;
left: 0;
z-index: -1;
filter: blur(5px);
}

script.js

<script>
const hours = document.querySelector('#hour');
        const minutes = document.querySelector('#minute');
        const seconds = document.querySelector('#second');
        function clock(){
            let h = new Date().getHours();
            let m = new Date().getMinutes();
            let s = new Date().getSeconds();
            hours.textContent = h;
            minutes.textContent = m;
            seconds.textContent = s;
        }
        // clock();
        let interval = setInterval(clock, 1000);
<script>

Result:

How to apply design in table?

How to apply design in table?

The HTML tables allow web designer to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example

<table class="rwd-table">
        <tbody>
            <tr>
                <th>Supplier Code</th>
                <th>Supplier Name</th>
                <th>Invoice Number</th>
                <th>Invoice Date</th>
                <th>Due Date</th>
                <th>Net Amount</th>
            </tr>
            <tr>
                <td data-th="Supplier Code"> UPS5005 </td>
                <td data-th="Supplier Name"> UPS </td>
                <td data-th="Invoice Number">  ASDF19218  </td>
                <td data-th="Invoice Date"> 06/25/2016 </td>
                <td data-th="Due Date">12/25/2016</td>
                <td data-th="Net Amount"> $8,322.12 </td>
            </tr>
            <tr>
                <td data-th="Supplier Code"> UPS3449</td>
                <td data-th="Supplier Name">UPS South Inc.</td>
                <td data-th="Invoice Number"> ASDF29301</td> 
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount"> $3,255.49</td>
                <td data-th="Net Amount"> $8,255.49</td>
            </tr>
            <tr>
                <td data-th="Supplier Code"> BOX5599</td>
                <td data-th="Supplier Name">BOX Pro West</td>
                <td data-th="Invoice Number">ASDF43000</td>
                <td data-th="Invoice Date"> 6/27/2016 </td>
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount"> $45,255.49</td>
            </tr>
            <tr>
                <td data-th="Supplier Code">PAN9999</td>
                <td data-th="Supplier Name">Pan Providers and Co.</td>
                <td data-th="Invoice Number">ASDF33433</td>
                <td data-th="Invoice Date">6/29/2016</td>
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount">$12,335.69</td>
            </tr>
        </tbody>
    </table>

This will produce the following result −

Supplier Code Supplier Name Invoice Number Invoice Date Due Date Net Amount
UPS5005 UPS ASDF19218 06/25/2016 12/25/2016 $8,322.12
UPS3449 UPS South Inc. ASDF29301 12/25/2016 $3,255.49 $8,255.49
BOX5599 BOX Pro West ASDF43000 6/27/2016 12/25/2016 $45,255.49
PAN9999 Pan Providers and Co. ASDF33433 6/29/2016 12/25/2016 $12,335.69

Tables Backgrounds

You can set table background using css style sheet

  • background-gcolor  − You can set background shade for complete table or just for one raw.
  • text − You can set text image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';

* {font-family: 'Open Sans', sans-serif;}

.rwd-table {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}

.rwd-table tr:first-child 
border-top: none;
background: #428bca;
color: #fff;


.rwd-table tr 
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;


.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}

.rwd-table th 

.rwd-table td 
display: block;


.rwd-table td:first-child {
margin-top: .5em;
}

.rwd-table td:last-child {
margin-bottom: .5em;
}

.rwd-table td:before 

.rwd-table th,
.rwd-table td {
text-align: left;
}

.rwd-table 
color: #333;
border-radius: .4em;
overflow: hidden;


.rwd-table tr {
border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}

This will produce the following result −

Fore responiive

Example

@media screen and (max-width: 601px) {
  .rwd-table tr:nth-child(2) {
    border-top: none;
  }
}
@media screen and (min-width: 600px) {
  .rwd-table tr:hover:not(:first-child) {
    background-color: #d8e7f3;
  }
  .rwd-table td:before 
    show: none;
  
  .rwd-table th,
  .rwd-table td 
    display: table-cell;
    padding: .25em .5em;
  
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table th,
  .rwd-table td 
}

body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);        
}
h1 
.container 
  display: block;
  text-align: center;

h3 
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 1.5em;
  color: #cecece;

h3:before 
  content: "\25C0";
  position: absolute;
  left: -50px;
  -webkit-animation: leftRight 2s linear infinite;
  animation: leftRight 2s linear infinite;

h3:after 
@-webkit-keyframes leftRight {
  0%    { -webkit-transform: translateX(0)}
  25%   { -webkit-transform: translateX(-10px)}
  75%   { -webkit-transform: translateX(10px)}
  100%  { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
  0%    
  25%   
  75%   
  100%  
}

This will produce the following 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.