<html>
<head>
<title>Первое задание</title>
<!-- Подключаем main.css -->
<meta charset="utf-8">
<style>body{
font-family:'Arial', sans-serif;
font-size: 90%;
background-color: #84CCC1
}
select {
width: 155px;
}
.form{
width:400px;
margin:10px auto;
padding:15px 20px;
background: #EE514A;
box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
}
.inputType{
outline: none;
width:49%;
margin-right:2 px;
border: solid 1px #da7c0c;
padding:5px;
background:#ffb515;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background: #f78d1d;
}
.button {
width:100%;
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
padding: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border-radius: 3px;
/*box-shadow: 0 1px 2px rgba(0,0,0,.2);*/
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
}
.button:active {
position: relative;
top: 10px;
background-color: #f78d3f;
}
::-webkit-input-placeholder {
color: white;
}
.word{
margin-right:4px;
}
.numberOfColumn{
}
.container{
/*padding:10px;*/
width:49%;
/*min-height:100px;*/
margin-top:5px;
border-radius:5px;
box-shadow:1px 1px 3px #999;
}
.left_container{
float:left;
background-color:#022F32;
}
.right_container{
float:right;
background-color:#087070;
}
.node{
margin: 3px;
padding-left:3px;
background: #f78d1d;
width:94%;
border: solid 1px #da7c0c;
border-radius: 5px;
color:white;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.cross{
/*border: 1px solid red;*/
float:right;
width:15px;
height:15px;
background-repeat: no-repeat;
background-image:url('../img/cross.png');
background-size: 70%;
background-position:center;
}
.clearfix:after{
content:'';
display:table;
clear:both;
}</style>
<!-- <link rel='StyleSheet' type='text/css' href='css/main0_3.css' /> -->
</head>
<body>
<div class="form clearfix">
<input class="inputType word" type="text" placeholder="Слово" id="tf1" >
<input class="inputType numberOfColumn" type="text" placeholder="Номер колонки" id="tf2">
<input class="button" type="button" value="Нажми меня" >
<div class="container left_container" id="left_container">
<div class="node">
<span>text1</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
<div class="node">
<span>text2</span>
<div class="cross"></div>
</div>
</div>
<div class="container right_container" id="right_container">
<div class="node">
<span>text1</span>
<div class="cross"></div>
</div>
</div>
</div>
<!-- // <script type='text/javascript' src='js/add_elem.js'></script> -->
<script>
var button1=document.getElementsByClassName('button')[0];
button1.addEventListener("mouseup", function(event) {
console.log(event);
add_elem1(event);
}, false);
function add_elem1(event){
// alert('hello');
var left_container=document.getElementsByClassName('left_container')[0];
var right_container=document.getElementsByClassName('right_container')[0];
// left_container.parentNode.removeChild(left_container);
var elem=document.createElement('div');
var text=document.getElementsByClassName('inputType')[0].value;
var numberOfContainer=document.getElementsByClassName('inputType')[1].value;
elem.className="node";
elem.innerHTML=text+' <div class="cross"></div> ';
if (numberOfContainer!=1 && numberOfContainer!=2){
//alert('Номер колонки должен быть 1 или 2');
return;
}
if (numberOfContainer==1){
left_container.appendChild(elem);
}else{
right_container.appendChild(elem);
}
}
function add_elem12() {
// var elem=document.body.children[0].children[3];
var elem=document.getElementById('left_container');
// var elem=document.body.children[0].getElementByClass('container left_container');
return elem.parentNode ? elem.parentNode.removeChild(elem) : elem;
}
// someCross.addEventListener('click', funct
// })
</script>
</body>
</html>