Posts

Showing posts from September, 2018

Learn JavaScript: Loops. The break Keyword

This is an exersise from a Codecademy Javascript-tutorial, that I've made today
Imagine we're looking to adopt a dog. We plan to go to the shelter every day for a year and then give up. But what if we meet our dream dog on day 65? We don't want to keep going to the shelter for the next 300 days just because our original plan was to go for a whole year. In our code, when we want to stop a loop from continuing to execute even though the original stopping condition we wrote for our loop hasn't been met, we can use the keyword break.
The break keyword allows programs to “break” out of the loop from within the loop's block.
Let’s check out the syntax of a break keyword:
for (let i = 0; i < 99; i++){   console.log('Banana.');   if (i > 3) {      break;   }; };
console.log('Orange you glad I broke out the loop!'); This is the output for the code:
Banana Banana Banana Orange you glad I broke out the loop!
break statements can be especially helpful wh…

Learn JavaScript: Loops. Do...While Statements

This is an exersise from a Codecademy course, which I've made today
In some cases, you want a piece of code to run at least once and then loop based on a specific condition after its initial run. This is where the do...while statement comes in.
A do...while statement says to do a task once and then keep doing it until a specified condition is no longer met. The syntax for a do...while statement looks like this:
let countString = ''; let i = 0;
do {   countString = countString + i;   i++; } while (i < 5);
console.log(countString);
In this example, the code block makes changes to the countString variable by appending the string form of the i variable to it. First, the code block after the do keyword is executed once. Then the condition is evaluated. If the condition evaluates to true, the block will execute again. The looping stops when the condition evaluates to false.
Note that the while and do...while loop are different! Unlike the while loop, do...while will run at l…

How to make a filter using javascript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
<li><a href="#">Anton</a></li>
<li><a href="#">Andrey</a></li>

<li><a href="#">Bogdan</a></li>
<li><a href="#">Bill</a></li>
<li><a href="#">Boris</a></li>

<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
</ul>

<script src="script.js"></script>
</body>
</html>

CSS

#myInput{
width: 100%;
font-size:…

Как сделать Slideshow с помощью JavaScript

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="1.jpg" style="width: 100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="2.jpg" style="width: 100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="3.jpeg" style="width: 100%">
<div class="text">Caption Three</div>
</div>

Как сделать анимацию с помощью JavaScript

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<button onclick="myMove()">Animation</button>
<div id="myContainer">
<div id="myAnimation">

</div>
</div>
<script src="script.js"></script>
</body>

</html>

CSS

#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}

#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}

JS

function myMove() {
'use strict';
var elem = document.getElementById("myAnimation"),
pos = 0;


function frame() {
var id = setInterval(frame, 10);
if (pos === 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}

Как сделать модальное окно с помощью JavaScript

Решил немного перепрофилировать свой блог - Ашман-парк нахрен никому не нужен.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Модальное окно!</p>
</div>
</div>
<script src="script.js"></script>
</body>

</html>

CSS

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;