humster_spb's questions

let obj = {
    smallNews: {
        title1: "Заголовок 1",
        title2: "Заголовок 2",
        title3: "Заголовок 3",
        title4: "Заголовок 4",
    }
}

for (let i = 1; i<= 4; i++) {
  let str = 'obj.smallNews.title'+i;
    console.log(eval(str));
}

$('.open-btn').click(function(){
  $('.modal-window').css('display','flex');
})
$('.close-btn').click(function(){
  $('.modal-window').css('display','none');
})

.modal-window {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1cacf3;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-content {
  width: 200px;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
}
.modal-content .close-btn {
  cursor: pointer;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-btn">Открыть окно</button>
<div class="modal-window">
  <div class="modal-content">
      <p class="close-btn">Закрыть</p>
      <h1>Заголовок модального окна</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}

<div class="wrapper">
  <img src="https://avatars.mds.yandex.net/get-pdb/33827/8ee85d23-431a-487b-8efb-d8f5fdd6bf29/s1200" alt="" class="img" />
  <div class="arrow"><div>>><div></div>
</div>

function getMyDate() {

	var nowDate = Date.now(); //текущая дата в timestamp

	var myDate = Date.parse(new Date(2018, 4, 12, 22)); //нужная дата в timestamp

	var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд
  
  var days = parseInt(sec/86400); //количество дней
  
  var hours = parseInt(sec/3600)%24; //...часов
  
  var mins = parseInt(sec/60)%60; //...минут
  
  sec = sec%60; //...секунд
  
  document.getElementById('days').innerHTML = days;
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('mins').innerHTML = mins;
  document.getElementById('sec').innerHTML = sec;

}


setInterval(function() { getMyDate(); }, 1000);

table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: center;
  border: 1px solid black;
}

<h2>ОСТАЛОСЬ</h2>
<table>
<tr>
  <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td>
</tr>
<tr>
  <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td>
</tr>
</table>

#wrapper {
  width: 200px;
  height: 70px;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#inner {
  width: 220px;
  height: 70px;
  background-color: green;
  position: absolute;
  top: 0;
  left: -230px;
  transition: .7s;
}

#wrapper:hover #inner {
  left: 0;
}

<div id="wrapper">
  <div id="inner">
  
  </div>
</div>

$('div').click(function(){
  $(this).attr('value', true);
  console.log($(this).attr('value'));
});

div {
  width: 70px;
  height: 35px;
  border: 1px solid black;
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<div name="one" value=""></div>
<div name="two" value=""></div>
<div name="three" value=""></div>
<div name="four" value=""></div>

var check = function(input, word) {
  input.keyup(function(){
    if($(this).val() == word) {
      $(this).css({'color':'green', 'border-bottom-color':'green'});
    }
    else {
      $(this).css({'color':'black', 'border-bottom-color':'gray'});
    }
  });
  input.blur(function(){
    if($(this).val() == word) {
      $(this).css({'color':'green', 'border-bottom-color':'green'});
    }
    else {
      $(this).css({'color':'red', 'border-bottom-color':'red'});
    }
  });
}


check($('#am'), 'am');
check($('#has'), 'has');
check($('#will'), 'will');

input {
  border: none;
  border-bottom: 1px solid gray;
  width: 50px;
  outline: none;
  text-align: center;
}

I <input type="text" id="am" /> a student.<br />
She <input type="text" id="has" /> a dog.<br />
We <input type="text" id="will" /> come home tomorrow.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

var arr = [];

$('td').each(function(){
   arr.push($(this));
});

$('td').click(function(){
   console.log(arr.indexOf($(this)));
});

table {
  border-collapse: collapse;
}

table td {
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

div {
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  border-top: none;
}

div:nth-of-type(1) {
  border-right: none;
  border-radius: 0 0 0 15px;
}

div:nth-of-type(2) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}

div:nth-of-type(3) {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

div:nth-of-type(4) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}

<div></div>
<div></div>
<div></div>
<div></div>

<script src="https://vk.com/js/api/openapi.js?143" type="text/javascript"></script>

<div id="vk">
  <div id="vk_groups"></div>
  <script type="text/javascript">
    window.onresize = function() {
      var vk = document.getElementById('vk');
      var wid = vk.offsetWidth;
      VK.Widgets.Group("vk_groups", {
        width: wid,
        height: "300"
      }, 1);
    };
    window.onresize();
  </script>
</div>

body {
	font-size: 20px;
}

.container {
	border-left: 1px solid silver;
  border-right: 1px solid silver;
}

aside {
	background-color: silver;
	border-radius: 5px;
	padding: 10px;
}

aside ul {
	margin: 0;
}

aside ul li {
	list-style: none;
	margin: 5px;
}

.main {
	background-color: gray;
	border-radius: 5px;
}

#comp, #uslugi, #zakaz, #kontakt {
	height: 400px;
	padding: 20px;
	margin: 20px 5px;
	background-color: silver;
	border-radius: 5px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    <div class="jumbotron"><h1>Компания</h1></div>
	  <aside class="col-md-3">
	    <ul>
		    <li>О компании</li>
		    <li>Услуги</li>
		    <li>Заказать</li>
		    <li>Контакты</li>
		  </ul>
	  </aside>
	  <div class="main col-md-8 col-md-offset-1">
	     <div id="comp">Здесь информация о компании</div>
		   <div id="uslugi">Тут описание наших услуг</div>
		   <div id="zakaz">В этом блоке можно оформить заказ</div>
		   <div id="kontakt">Здесь - связаться с нами</div>
	  </div>
</div>