Skip to content

Commit

Permalink
Add JS: count & input messages (broken icons)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpalaz
jpalaz committed Mar 3, 2015
1 parent 1c4e57f commit de549b0
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 24 deletions.
37 changes: 13 additions & 24 deletions Chat/homepage.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
<!DOCTYPE html>
<html lang="be">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Чат - Палазнік</title>
<title>Jan Messenger</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="scripts.js"></script>
</head>
<body>
<body onload="run();">

<nav class="navbar navbar-default">
<div class="container-fluid">
Expand All @@ -37,7 +30,7 @@
<ul class="nav navbar-nav">
<li class="active"><a href="#">Conversation <span class="sr-only">(current)</span></a></li>
<li><a href="#">History</a></li>

</ul>
<form class="navbar-form navbar-left" role="input">
<div class="input-group">
Expand All @@ -47,6 +40,7 @@
</form>

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="counter-holder">0</span></a></li>
<li><a href="#"><span class="label label-success">Connected</span></a></li>

</ul>
Expand All @@ -67,26 +61,26 @@
</div>

<div class="col-md-6 conversation">
<table class="table">
<tr>
<table class="table items">
<tr class="item">
<td class="col-time"><time>2015-02-26</time></td>
<td class="col-message">Person 1: Message 1.</td>
<td class="col-edit"><a class="btn-default" href="#"><i class="glyphicon glyphicon-edit"></i></a></td>
<td class="col-delete"><a class="btn-default" href="#"><i class="glyphicon glyphicon-remove"></i></a></td>
</tr>
<tr>
<tr class="item">
<td class="col-time"><time>2015-02-26</time></td>
<td class="col-message">Person 3: Message 2.</td>
<td class="col-edit"><a class="btn-default" href="#"><i class="glyphicon glyphicon-edit"></i></a></td>
<td class="col-delete"><a class="btn-default" href="#"><i class="glyphicon glyphicon-remove"></i></a></td>
</tr>
<tr>
<tr class="item">
<td class="col-time"><time>2015-02-27</time></td>
<td class="col-message">Person 4: Message 3.</td>
<td class="col-edit"><a class="btn-default" href="#"><i class="glyphicon glyphicon-edit"></i></a></td>
<td class="col-delete"><a class="btn-default" href="#"><i class="glyphicon glyphicon-remove"></i></a></td>
</tr>
<tr>
<tr class="item">
<td class="col-time"><time>2015-02-27</time></td>
<td class="col-message">Person 3: Message 4.</td>
<td class="col-edit"><a class="btn-default" href="#"><i class="glyphicon glyphicon-edit"></i></a></td>
Expand All @@ -96,19 +90,14 @@
</table>

<div class="input-group">
<input type="text" class="form-control" placeholder="Input message...">
<input type="text" class="form-control messageText" placeholder="Input message...">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Send</button>
<button class="btn btn-success btn-add" type="button" id="addButton">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
65 changes: 65 additions & 0 deletions Chat/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
function run() {
var button = document.getElementsByClassName('btn-add')[0];

button.addEventListener('click', onAddButtonClick);
updateCounter();
}

function onAddButtonClick() {
var message = document.getElementsByClassName('messageText')[0];

addMessage(message.value);
message.value = '';
updateCounter();
}

function addMessage(value) {
if(!value){
return;
}

var table = document.getElementsByClassName('table')[0];
var row = table.insertRow(-1);
createRowValues(row, value);

updateCounter();
}

/*<tr class="item">
<td class="col-time"><time>2015-02-26</time></td>
<td class="col-message">Person 1: Message 1.</td>
<td class="col-edit"><a class="btn-default" href="#"><i class="glyphicon glyphicon-edit"></i></a></td>
<td class="col-delete"><a class=&quot;btn-default&quot; href=&quot;#&quot;><i class=&quot;glyphicon glyphicon-remove&quot;></i></a></td>
</tr>*/

function createRowValues(row, text){
var tdTime = document.createElement('td');
var tdMessage = document.createElement('td');
var tdEdit = document.createElement('td');
var tdRemove = document.createElement('td');

row.classList.add('item');
tdTime.classList.add('col-time');
tdMessage.classList.add('col-message');
tdEdit.classList.add('col-edit');
tdRemove.classList.add('col-delete');

tdTime.appendChild(document.createTextNode("2015-03-03"));
tdMessage.appendChild(document.createTextNode(text));
tdEdit.innerHTML = "<a class=&quot;btn-default&quot; href=&quot;#&quot;><i class=&quot;glyphicon glyphicon-edit&quot;></i></a>";
tdRemove.innerHTML = "<a class=&quot;btn-default&quot; href=&quot;#&quot;><i class=&quot;glyphicon glyphicon-remove&quot;></i></a>";

row.appendChild(tdTime);
row.appendChild(tdMessage);
row.appendChild(tdEdit);
row.appendChild(tdRemove);

//return row;
}

function updateCounter(){
var counter = document.getElementsByClassName('counter-holder')[0];
var count = document.getElementsByClassName("items")[0].rows.length;

counter.innerText = count.toString();
}

0 comments on commit de549b0

Please sign in to comment.