<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image board</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="boardsList" class="callTextareaButton">
<br>
<br>
<br>
<div class="headNameBoard">
Творчество
</div>
<div class="nameBoard">
Лепка
</div>
<div class="nameBoard">
Рукоделие
</div>
<div class="nameBoard">
Рисования
</div>
<div class="nameBoard">
Вышивание
</div>
<div class="nameBoard">
Садовотство
</div>
<div class="headNameBoard">
Игры
</div>
<div class="nameBoard">
Футбол
</div>
<div class="nameBoard">
Баскетбо
</div>
<div class="nameBoard">
Бег
</div>
<div class="nameBoard">
Прыг
</div>
<div class="headNameBoard">
Развлечения
</div>
<div class="nameBoard">
Кино
</div>
<div class="nameBoard">
Аниме
</div>
<div class="nameBoard">
Сериалы
</div>
<div class="nameBoard" >
Мультфильмы
</div>
<div class="nameBoard">
Наркотики
</div>
<div class="headNameBoard">
Администрация
</div>
<div class="nameBoard">
Бан
</div>
<div class="nameBoard" style="border-bottom: 1px solid #000000">
Разбан
</div>
<br>
<br>
<br>
<div class="hiddenButton">
Скрыть
</div>
</div>
<div id="divPrivate" class="callTextareaButton">
<form class="" action="index.html" method="post">
<br>
<div class="headNameBoard" style="border-bottom: 1px solid #000000">
Вход
</div>
<div class="main">
<div class="field">
<label for="email">Эмейл </label>
<input type="text" name="name" value="" id="email">
</div>
<div class="field">
<label for="password">Пароль </label>
<input type="text" name="name" value="" id="password">
</div>
<div class="">
</div>
<input class="buttonPrivate " type="button" name="name" value="Войти">
<br>
<input class="buttonPrivate" type="button" name="name"
value="Зарегистрироваться">
</div>
</form>
<div class="headNameBoard" style="border-bottom: 1px solid #000000">
Кабинет
</div>
<div class="cabinet">
Заработанные лайки
<br>
<span class="countLikePrivate">0</span><span class="likePrivate">👍</span>
<br>
<a href="#">Мои посты</a>
<br>
<a href="#">Ответы</a>
</div>
<div class="hiddenButton">
Скрыть
</div>
</div>
<div id="divNewPost" class="callTextareaButton">
<form id="formNewPost" class="" action="index.html" method="post" >
<textarea name="textForPost" placeholder="Введите сообщение..."></textarea>
<br>
<div class="textareaButton">
Форматирование:
</div>
<input class="textareaButton" type="file" name="image" value=""
accept="image/jpeg, image/gif, image/png">
<br>
<input class="textareaButton" type="button" name="name" value="Убрать файл"
onclick="document.forms[0].elements[1].value=''">
<br>
<input id="submitPost" class="textareaButton" type="button" name="Submit" value="Отправить">
</form>
<div class="hiddenButton">
Скрыть
</div>
</div>
<div id="topButtons">
<div id="buttonBoardsList" class="board openButton">
Доски
</div>
<div id="buttonDivNewPost" class="write openButton">
Написать
</div>
<div id="buttonPrivate" class="private openButton">
Личное
</div>
</div>
<div id="levelingDiv"></div>
</body>
<script src="script.js"></script>
</html>
var textareaButton = document.querySelector(".callTextareaButton");
var formNewPost = document.getElementById("formNewPost");
var buttonDivNewPost = document.getElementById("buttonDivNewPost");
var levelingDiv = document.getElementById("levelingDiv");
var submitPost = document.getElementById("submitPost");
var divNewPost = document.getElementById("divNewPost");
var topButtons = document.getElementById("topButtons");
var buttonBoardsList = document.getElementById("buttonBoardsList");
var boardsList = document.getElementById("boardsList");
var divPrivate = document.getElementById("divPrivate");
var buttonPrivate = document.getElementById("buttonPrivate");
var id = 0;
function date() {
var date = new Date();
var dateObj = {};
dateObj.mounth = date.getMonth();
dateObj.date = date.getDate();
dateObj.hours = date.getHours();
dateObj.minutes = date.getMinutes();
dateObj.secounds = date.getSeconds();
for (var key in dateObj) {
if (dateObj[key] < 10) dateObj[key] = "0" + dateObj[key];
}
date = date.getFullYear() + "-" + dateObj.mounth + "-" + dateObj.date
+ " " + dateObj.hours + ":" + dateObj.minutes + ":" + dateObj.secounds;
return date;
}
divNewPost.hidden = boardsList.hidden = divPrivate.hidden = true;
//topButtons.hidden = true;
levelingDiv.style.top = divNewPost.offsetHeight + divNewPost.offsetTop + "px";
document.onclick = function (e) {
if (e.target == buttonDivNewPost) {
openDiv(buttonDivNewPost, divNewPost);
}
if (e.target == buttonBoardsList) {
openDiv(buttonBoardsList, boardsList);
}
if (e.target == buttonPrivate) {
openDiv(buttonPrivate, divPrivate);
}
if (e.target.className == "hiddenButton") {
hiddenForm(e);
}
if (e.target == submitPost) {
newPost();
}
};
function openDiv(button, target) {
if (target.hidden) {
divNewPost.hidden = boardsList.hidden = divPrivate.hidden = true;
target.hidden = "";
levelingDiv.style.top = target.offsetHeight + target.offsetTop + "px";
} else {
target.hidden = true;
levelingDiv.style.top = button.offsetHeight + button.offsetTop + "px";
}
}
function hiddenForm(e) {
e.target.parentNode.hidden = true;
if (topButtons.hidden) {
topButtons.hidden = "";
}
levelingDiv.style.top = buttonDivNewPost.offsetHeight + "px";
}
function newPost() {
var textPost = document.forms.formNewPost.textForPost.value;
console.log("newPost");
if (!textPost) {
return false;
}
document.forms.formNewPost.textForPost.value = "";
var div = document.createElement("div");
div.className = "posts clearfix";
var divText = document.createElement("div");
divText.textContent = textPost;
divText.className = "divText clearfix";
levelingDiv.appendChild(div);
var divId = document.createElement("div");
var idDataText = document.createElement("span");
idDataText.className = "idDataText";
idDataText.textContent = "id: " + id + " date: " + date();
id++;
divId.appendChild(idDataText);
divId.className = "id clearfix" ;
div.appendChild(divId);
like(divId);
if (!document.forms.formNewPost.image.value) {
var img = document.createElement("img");
img.setAttribute("src", "http://rghost.ru/6LZvkvlWB/image.png");
img.className = "postImg clearfix";
div.appendChild(img);
divText.style.width = "410px";
document.forms.formNewPost.image.value = "";
}
div.appendChild(divText);
}
function like(elem) {
var likeButton = document.createElement("span");
likeButton.className = "like";
likeButton.setAttribute("id", "like");
likeButton.innerHTML = "👍";
elem.appendChild(likeButton);
var countLike = document.createElement("span");
countLike.innerHTML = 0;
countLike.className = "countLike";
elem.appendChild(countLike);
var clickLike = false;
likeButton.onclick = function() {
if(clickLike) return false;
var count = countLike.innerHTML;
count++;
countLike.innerHTML = count;
clickLike = true;
}
likeButton.onselectstart = likeButton.onmousedown = function () {
return false;
}
}
A {
color: green;
}
.callTextareaButton {
border: 1px solid green;
background-color: #e6e6e6;
position: fixed;
top: 19px;
width: 600px;
left: 50%;
margin-left: -301px;
z-index: 9999;
}
.field {
clear: both;
text-align: right;
line-height: 25px;
}
label {
float: left;
padding-right: 10px;
}
.main {
float: left;
margin: 10px;
}
.buttonPrivate {
margin: 5px 5px 0 0;
}
.nameBoard {
border-top: 1px solid #000000;
text-align: center;
cursor: pointer;
}
.nameBoard:hover {
background-color: #cccccc;
}
.headNameBoard {
background-color: #c8d2e6;
border-top: 1px solid #000000;
font-weight: bold;
text-align: center;
clear: both;
}
.cabinet {
text-align: center;
margin: 10px;
line-height: 1.5;
}
#levelingDiv {
width: 602px;
margin: 0 auto;
position: relative;
}
.posts {
border: 1px solid green;
background-color: #e6e6e6;
margin: 10px 0 10px 0;
text-align: left;
word-wrap: break-word;
}
textarea {
width: 574px;
height: 200px;
margin: 10px;
max-width: 574px;
}
.hiddenButton {
cursor: pointer;
text-align: center;
width: 600px;
border-top: 1px solid green;
}
.hiddenButton:hover {
background-color: #cccccc;
}
.openButton {
cursor: pointer;
text-align: center;
width: 200px;
border: 1px solid green;
background-color: #e6e6e6;
position: fixed;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.openButton:hover {
background-color: #cccccc;
}
.board {
left: 50%;
margin-left: -100px;
z-index: 9999;
}
.private {
left: 50%;
margin-left: 99px;
z-index: 9999;
}
.write {
left: 50%;
margin-left: -301px;
z-index: 9999;
}
.textareaButton {
margin: 0 0 10px 10px;
}
.postImg {
width: 150px;
height: 150px;
margin: 10px;
float: left;
}
.divText {
margin: 10px;
word-wrap: break-word;
width: 580px;
float: right;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.id {
text-align: center;
background-color: #d0f0c0;
border-bottom: 1px solid green;
}
.idDataText {
height:50px;
line-height:50px;
}
.helper {
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
}
.like {
cursor: pointer;
font-size: xx-large;
font-weight: bold;
color: #0000ff;
float: right;
height:50px;
line-height:50px;
}
.like:hover {
color: #000099;
}
.countLike {
cursor: pointer;
font-size: xx-large;
font-weight: bold;
color: #228b22;
float: right;
height:50px;
line-height:50px;
}
.likePrivate {
font-size: xx-large;
font-weight: bold;
color: #0000ff;
}
.countLikePrivate {
font-size: xx-large;
font-weight: bold;
color: #228b22;
}