We Keep Coding

Create a Tag with an input

I have an input for writing tags. My problem is that I wanted to write in the input any name of tag and by pressing enter or clicking the button, the tag was created in the box below as shown in the image.
What I have
What I want when I press enter key or button plus
Final
.TagInput {
width: 400px;
height: 32px;
background: #FAFAFB 0% 0% no-repeat padding-box;
border-radius: 16px;
background: url(https://cdn0.iconfinder.com/data/icons/social- messaging-ui-color-shapes/128/add-circle-blue-512.png) no-repeat scroll 370px 3px;
}
.card {
width: 435px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
}
<div class="card">
<div class="card-header header">
<h1> Tags </h1>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control TagInput" placeholder="Tag your product...">
</div>
</div>
</div>

I'm not so familiar with bootstrap to be honest. But maybe you can try out an Angular solution. This could be a starting point:
CSS
.your-class{
list-style-type: none;
display:inline-block;
position:relative;
background:#eee;
padding:5px;
min-width:50px;
text-align: center;
border-radius:30px;
margin-right:10px;
}
HTML
<ul>
<li *ngFor="let tag of tags" class="your-class">
{{tag}} <span class="delete-entry" (click)="deleteTagFromProduct(tag)">x</span>
</li>
</ul>
<input (change)="addTagToProduct($event)" class="form-control TagInput"/>
Typescript
private tags:string[] = [];
private addTagToProduct( $event ):void {
this.tags.push($event.target.value);
$event.target.value = "";
}
private deleteTagFromProduct( tag:string ):void {
this.tags = this.tags.filter( (a) => a!==tag );
}

How to change border color when fields are empty

I am trying to create a login form. Here is the example..
.log {
margin-top: 40px;
margin-left: 30px;
margin-right: 30px;
position: relative;
}
.log input[type="text"] {
font-size:13px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.log input[type="password"] {
font-size:13px;
padding: 5px 10px 5px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.inputlog:focus { outline:none;}
.log label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left: 5px;
top: 5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input.inputlog:focus ~ label, input.used ~ label {
top: -20px;
color: #4a89dc;
}
.bar {
position:relative;
display:block;
width:100%;
}
.bar:before, .bar:after {
content:'';
height:2px;
width: 0;
bottom:1px;
position:absolute;
background: #1ba4df;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after {
width:50%;
}
<div class="form-desc">
<div class="lock-icon">
<img src="assets/img/icon/padlock.png">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password">
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div class="login-btn">
<h4>LOGIN</h4>
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
</div>
Here now if click on the fields, the border bottom color is change to Blue.
Suppose if the fields are empty and if I am click on the login button, How to change of the border bottom color Blue to Red? Means it should show these are required field like that.
I need only the border color change to Red.
Thank you.

Try this code.
Plunker LINK
HTML
<div class="log">
<input id="user" class="inputlog" type="text" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input id="pwd" class="inputlog" type="password" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
JS
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
CSS
.makeRed{
border-bottom: 1px solid red !important;
}

using this jQuery
$('form').find('input').each(function(){
if($(this).prop('required')){
$(this).parent().find('.bar')addClass('red-bar');
} else {
$(this).parent().find('.bar')removeClass('red-bar');
}
});
and CSS
.bar.red-bar:before, .bar.red-bar:after {
background: red;
}

Hope, this will help to get idea to solve your problem, HTML with edited login button
<div class="form-desc">
<div class="lock-icon">
<img src="">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div>
<input class="login-btn" type="submit" value="login">
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
JQuery
$(".login-btn").on("click",function(){
var text = $("input[type='text']");
var pass = $("input[type='password']");
if(!text.val()){
text.css("border","2px solid red");
}
if(!pass.val()){
pass.css("border","2px solid red");
}
});

This work for me
var Error_Flag = false;
$('.Signin_Form').find('input').each(function(){
if($(this).attr('required')){
if($(this).val() == ''){
$(this).css({'border': '1px solid #FFB74D'});
Error_Flag = true;
}
else
{
$(this).css({'border':''});
}
}
});
$('.Signin_Form input').on('keyup',function(event) {
if($(this).val() != ''){
$(this).css({'border':''});
}
});
if(Error_Flag){
return;
}

Jquery add checked radio parent div class

I have one question about add class.
I have created this DEMO from codepen.io .
In this demo you can see there are tree radio button. When you click blue button after checked radio button then the .checkedWrap text will be changing.
I want to add also some class in this .checkedWrap .
So when you click
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
there is also <div id="1" class="addthisClassone"></div> i want to add addthisClassone from the .checkedWrap also like this:
<div class="checkedWrap addthisClassone"></div>
<div class="checkedWrap addthisClasstwo"></div>
<div class="checkedWrap addthisClasstree"></div>
How can i do that after clicking blue button. Anyone can help me in this regard.
CSS
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div id="2" class="addthisClasstwo"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div id="3" class="addthisClasstree"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
JS
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
});

I suggest to add an extra general class instead of ids and data attributes to store the classes you want to change on every radio button, check the example bellow.
Note : To add class you can use addClass() function but that will append classes so every time you click new class will be added, you could reset class attribute using removeClass() on every click and add default class checkedWrap plus the new class :
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
Hope this helps.
Snippet
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
var additional_class = $('input[name=checkit]:checked').parent().find('.global-class').data('additional-class');
$('.checkedWrap').text(checked_radio_text);
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
});
});
.container {
width:400px;
height:auto;
box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
margin:0px auto;
margin-top:10px;
}
.checkedWrap {
width:100% !important;
float:left;
padding:15px;
background-color:#b71c1c;
box-sizing:border-box;
}
.checkList {
width:100%;
padding:10px;
box-sizing:border-box;
float:left;
}
.lbl {
float:left;
position: relative;
display: block;
height: 10px;
width: 34px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -5px;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after { transform: scale(1.15, 0.85); }
.cbx:checked ~ label { background: #6fbeb5; }
.cbx:checked ~ label:after {
left: 20px;
background: #179588;
}
.cbx:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.cbx:disabled ~ label:after { background: #bcbdbc; }
.container {
position: absolute;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.demo {
padding:30px;
width:100%;
overflow:hidden;
padding:5px;
box-sizing:border-box;
text-indent:10px;
}
.hidden { display: none; }
.Click {
float:left;
margin-top: 30px;
color: #fff;
height:30px;
background-color:#0288d1;
color:#ffffff;
width:100%;
box-sizing:border-box;
text-align:center;
line-height:30px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
.addthisClassone {
width:10px;
height:10px;
background-color:blue;
}
.addthisClasstwo {
background-color:green;
width:10px;
height:10px;
}
.addthisClasstree {
background-color:black;
width:10px;
height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div data-additional-class='addthisClassone' class="global-class"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div data-additional-class='addthisClasstwo' class="global-class"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden"/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div data-additional-class='addthisClasstree' class="global-class"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>

addClass Adds the specified class(es) to each element in the set of
matched elements.
Try out this
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
$("#checkedWrap").addClass("addthisClasstree");
});

If you want to add a class with JavaScript, you can use jQuery, it has a function for that.
Check addClass(). It adds a new class to a particular jQuery DOM Element.

Use of external .js & css files fails

I'm trying to design a web site with bootstrap and I downloaded code for registration page
There are 3 files:
HTML,
CSS
and .js
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code </title>
<link href="css/my.css" rel="stylesheet">
<script src="js/b.js"></script>
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
</body>
my.css
#import "compass/css3";
$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;
$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);
$gray-light: #a0b3b0;
$gray: #ddd;
$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
}
}
.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}
.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
}
}
.active a {
background:$main;
color:$white;
}
}
.tab-content > div:last-child {
display:none;
}
h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
}
label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
}
}
label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
}
}
label.highlight {
color:$white;
}
input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
}
}
textarea {
border:2px solid $gray-light;
resize: vertical;
}
.field-wrap {
position:relative;
margin-bottom:40px;
}
.top-row {
&:after {
content: "";
display: table;
clear: both;
}
> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
}
}
}
.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
}
}
.button-block {
display:block;
width:100%;
}
.forgot {
margin-top:-20px;
text-align:right;
}
b.js
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
I downloaded it and put the html file in the website folder
& the css and js files in the css and js folders respectively.
Then I tried to call these external files:
<link href="css/my.css" rel="stylesheet">
<script src="js/b.js"></script>
but failed.
I think the css rule is the reason or the the code for using external ".js" files & css files

The code that you have in my.css is not CSS - it's SCSS, which needs to be compiled into CSS. You can read more about SASS/SCSS here:
http://sass-lang.com/guide

dynamically changing text in div

Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>

The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.

David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>