Visible Spectrum background in form

bug free code by sudhir kumar

Html part

Visible Spectrum Console Text Generator


Css part

body,input,button{
font: 16px/1.4 ‘Open Sans’, ‘sans-serif’;
letter-spacing:.05em;
}

body{
display:flex;
text-align:center;
height:100vh;
background:linear-gradient(-45deg, #334D5C, #45B29D, #EFC94C, #E27A3F, #DF5A49);
color:#fff;
padding:2rem;
box-sizing:border-box;
}

.page-title{
font-size:2rem;
margin-bottom:1rem;
font-weight:700;
text-transform:uppercase;
span{
display:block;
font-size:3.01rem;
line-height:1;
}
}

.form{
max-width:450px;
margin:auto;
}

.form-group{
display:flex;
align-items:center;
margin-bottom:1rem;
justify-content:space-between;
}

.content{
margin:auto;
}

#input{
border:0;
height:40px;
padding:0 .5rem;
font-size:1rem;
letter-spacing:.05rem;
border-radius:2px;
width:100%;
color:#334D5C;
}

#submit{
border:0;
background:#fff;
margin-left:1rem;
cursor:pointer;
padding:0 1rem;
height:40px;
font-size:1rem;
border-radius:2px;
background:#334D5C;
color:#fff;
letter-spacing:.05em;
&:hover, &:focus{
background:lighten(#334D5C, 5%);
}
&:active{
background:darken(#334D5C, 5%);
}
}

#bg-toggle, label{
border:0;
cursor:pointer;
}

var ColoredConsoleText = new function(){
var self = this;

self.controls = {
input: document.getElementById(‘input’),
bgToggle: document.getElementById(‘bg-toggle’),
submit: document.getElementById(‘submit’)
}

self.cssString = function(color){
var background = self.controls.bgToggle.checked ? ‘#121C21’ : ”;
return ‘background: ‘+ background +’; color: ‘ + color;
}

self.handleSubmit = function(text){
var arguments = [”];
var textArr = text.split(”);
var ratio = 360 / textArr.length;
for( var i = 0; i < textArr.length; i++){ arguments[0] = arguments[0] + '%c' + textArr[i]; var lightness = self.controls.bgToggle.checked ? '70%' : '40%'; var color = 'hsl('+ratio*i+', 100%, ' + lightness +')'; arguments.push( self.cssString(color) ); if(i === textArr.length - 1){ console.log.apply(console, arguments); } } self.controls.input.value = ''; } self.controls.submit.addEventListener('click', function(e){ e.preventDefault(); self.handleSubmit(self.controls.input.value); }); }

Simple Horizontal Accordian on click using jquery

jquery_horizontal_accordion

See how to create horizontal accordian
Html portion:

<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>

css(scss) portion:

*{
box-sizing: border-box;
}

section{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
top: 25vh;
left: 5vw;
min-height: 50vh;
width: 90vw;

transition: all 200ms ease-in-out 50ms;
opacity: 0;

div{
margin-left: 5px;
margin-right: 5px;
border-radius: 3px;
background: rgba(220,220,220,.5);
transition: all 200ms ease-in-out 50ms;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: 500;
cursor: pointer;
font-size: 16pt;
}

.default{
height: 50vh;
width: 10vw;
color: rgba(255,255,255,0);
font-size: 16pt;
overflow: hidden;

}

.expand{
height: 50vh;
width: 100vw;
background: #7ab7ff;
color: rgba(255,255,255,1);
padding: 20px;
}

}

Jquery portion:

$(function() {

window.setTimeout(function() {
$(‘section’).css(‘opacity’, ‘1’);
}, 2000);

$(‘div’).addClass(‘default’);

$(‘div’).on(‘click’, function() {

var e = $(‘section > div’);
if(e.hasClass(‘expand’)){
e.removeClass(‘expand’);
$(this).addClass(‘expand’);
} else { $(this).addClass(‘expand’); }
})
})

demo here:

Hover activated accordian with default state

elegant design

we already know about accordion, basically accordian work on click. But think about accordion works on hover…. its looking ,ore better if it works on hover.
lets see how it happens:
here…
file arrangements:
div(accordian) > section(accordian-item) > h1,div(accordion-item-content)

we take a div having a class “accordian”is the wrapper of all elements.
then we take a section inside that div which represent the single element of according.
we just need to change height of accordian-item-content on hover.
Demo:-

how to set action of any form through jquery -javascript

<form method="post" title="myForm" id="myForm" name="myForm" action="test_auth.php">
<fieldset>
    <legend>Request Details</legend>
    <p><label>Brand: </label>
        <select id="Brand" name="Brand">
            <option value"">Select...</option>
            <option value="brand">Brand 1</option>
            <option value="brand">Brand 2</option>
            <option value="brand">Brand 3</option>
            <option value="brand">Brand 4</option>
            <option value="brand">Brand 5</option>
        </select> 
    </p>
    <br />
<p class="submit"><input class="button" name="Submit" type="submit" value="Submit" onclick="actionDetermine();" /></p>






jquery for form:


function actionDetermine() {
var thisform = document.myForm;
if (thisform.elements["brand"] [1].selectedIndex) {
        thisform.action ="test.php";
} else if (thisform.elements["brand"] [2].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [3].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [4].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [5].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [0].selectedIndex) {
        thisform.action="test_auth.php";
}
return true;
};