ПУТИНСКИХ БОЙЦОВ НОКАУТИРОВАЛИ ГРУШИ | ПОСЛЕВКУСИЕ – 12

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 when we’re looping through large data structures! With breaks, we can add test conditions besides the stopping condition, and exit the loop when they're met.

Instructions

1. Log each element from rapperArray in a for loop with the iterator variable rapperArrayIndex.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

for (let i = 0; i < rapperArray.length; i++){

  console.log(rapperArray[i]);

 }

2. After the for loop, log the string "And if you don't know, now you know." to the console. Note: since there's a single quote character, ', in our string, we can use double quotes around the string to make sure character prints.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

for (let i = 0; i < rapperArray.length; i++){

  console.log(rapperArray[i]);

 }

console.log("And if you don't know, now you know.");

3. Add a break inside your loop's block that breaks out of the loop if the element at the current index in the rapperArray is 'Notorious B.I.G.'.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

for (let i = 0; i < rapperArray.length; i++){

  console.log(rapperArray[i]);

  if (rapperArray[i] === 'Notorious B.I.G.'){

    break;

  };

 };

console.log("And if you don't know, now you know.");

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 least once whether or not the condition evaluates to true.

const firstMessage = 'I will print!';

const secondMessage = 'I will not print!'; 

// A do while with a stopping condition that evaluates to false

do {

 console.log(firstMessage)

} while (true === false);

// A while loop with a stopping condition that evaluates to false

while (true === false){

  console.log(secondMessage)

};

Instructions

1. We'd like a program to simulate part of the cake-baking process. Depending on the recipe, a different number of cups of sugar is required. Create the variable cupsOfSugarNeeded, and assign it a number value of your choosing. The cups of sugar must be added to the batter one at a time. Declare the variable cupsAdded and assign it the value 0.

const cupsOfSugarNeeded = 4;

const cupsAdded = 0;

2. We have a sweet tooth, so we want to add at least one cup of sugar to the batter even if the value of cupsOfSugarNeeded is 0. Create a do...while loop which increments cupsAdded by one while cupsAdded is less than cupsOfSugarNeeded.

let cupsOfSugarNeeded = 4;

let cupsAdded = 0;

do {

 cupsAdded = (cupsAdded + 1); 

} while (cupsAdded < cupsOfSugarNeeded);

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: 16px;
padding: 12px 20px 12 px 5 px;
border: 1 px solid #ddd;
margin-bottom: 12px;
}
#myUL{
list-style: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a.header{
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header){
background-color: #eee;
}

JS

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Как сделать 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>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

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

</html>

CSS

* {
box-sizing: border-box
}

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color. white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3 px 0;
}

.next {
right: 0;
border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

text {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active,
dot:hover {
background-color: #717171;
}

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {
opacity: .4
}

to {
opacity: 1
}
}

@keyframes fade {
from {
opacity: .4
}

to {
opacity: 1
}

}

JS

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i,
slides = document.getElementsByClassName("mySlides"),
dots = document.getElementsByClassName("dot");

if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

Как сделать анимацию с помощью 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;
font-weight: bold;
}

JavaScript

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function () {
"use strict";
modal.style.display = "block";
};
span.onclick = function () {
"use strict";
modal.style.display = "none";
};

window.onclick = function (event) {
"use strict";
if (event.target === modal) {
modal.style.display = "none";
}
};