function isIsogram(str){
- str.toLowerCase();
+ str = str.toLowerCase();
for (let i = 0; i < str.length; i++) {
for (let j = i + 1; j < str.length; j++) {
if (str[i] === str[j]) {
return false;
}
}
}
return true;
}
console.log(isIsogram("moose")); // false
console.log(isIsogram("moOse")); // должно быть false, получается true
console.log(isIsogram("Dermatoglyphics")); // true
.btn-menu span {
transition: all .1s linear .23s;
transition: all .1s linear;
<html lang="ru">
<head>
<title>МЯСНОЙ ДАР</title>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/xphoto.png" type="image/x-icon">
</head>
<body>
<header>
<div class="HeaderContainer">
<div class="logo"> <img src="images/logo.png" alt=""> </div>
<a href="#" class="item photo"><img src="images/phone.png" alt="" width="45" height="45"></a>
<a href="#" class="item anim">КОМПАНИЯ</a>
<a href="#" class="item anim">ПРОДУКЦИЯ</a>
<a href="#" class="item anim">КЛИЕНТАМ</a>
<a href="#" class="item anim">КОНТАКТЫ</a>
<a href="#" class="item photo"><img src="images/poloski.png" alt="" width="45" height="40"></a>
</div>
</header>
<main>
<div class="container"> <!-- container начало -->
<div class="box">
<div class="slider middle"><!-- Слайдео начало -->
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<div class="slide s1"><img src="images/longkolbas.png" alt></div>
<div class="slide"><img src="images/kolbasa2.png" alt></div>
<div class="slide"><img src="images/kolbasa3.png" alt></div>
<div class="slide"><img src="images/kolbasa4.png" alt></div>
</div>
<div class="navigation">
<label for="r1" class="bar"> </label>
<label for="r2" class="bar"> </label>
<label for="r3" class="bar"> </label>
<label for="r4" class="bar"> </label>
</div>
</div><!-- Сладйер конец -->
</div> <!-- вот закрытый box -->
</div><!-- container конец -->
</main>
<footer class="container">
<a>это футер</a>
</footer>
</body>
</html>
document.addEventListener('click', ({ target }) => {
if (target.classList.contains('класс кнопки')) {
target
.closest('селектор общего предка пары кнопка-блок')
.querySelector('селектор блока')
.classList
.toggle('класс, показывающий блок');
}
});
<div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
<!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
<button class="btn" onmouseover="bigImage();" onmouseout="smallImage();">Подробнее</button>
</div>
<div class="certificate__image">
<!-- Изображению добавлен id для обращения к нему-->
<img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
</div>
</div>
<script type="text/javascript">
//Берем наше изображение по ИД
let myImage = document.getElementById('certificate__image');
//Увеличивает (запускается событием onmouseover)
function bigImage(){
myImage.style.width = "502px";
myImage.style.height= "363.54px";
};
//Уменьшает (запускается событием onmouseout)
function smallImage(){
myImage.style.width = "250px";
myImage.style.height= "130px";
};
</script>
<div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
<!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
<button class="btn" onmouseover="myImage.classList.toggle('large');" onmouseout="myImage.classList.toggle('large');">Подробнее</button>
</div>
<div class="certificate__image">
<!-- Изображению добавлен id для обращения к нему-->
<img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
</div>
</div>
<style>
/* Это класс увеличивающий изображение */
.large{
width: 502px;
height: 363.54px;
}
</style>
<script type="text/javascript">
//Берем наше изображение по ИД
let myImage = document.getElementById('certificate__image');
</script>
<div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями</p>
<button class="btn">Подробнее</button>
<div class="certificate__image">
<img src="./img/certificate.png" alt="">
</div>
</div>
<!--<div class="certificate__image">
<img src="./img/certificate.png" alt="">
</div>-->
</div>
const today = String((new Date()).getDate()).padStart(2, '0');
const dayStartElements = document.querySelectorAll(".js-text");
dayStartElements.forEach((el) => { el.innerText = `${dd}` });
$mail->isSMTP(); //Send using SMTP
$mail->Host = 'smtp.example.com'; //Set the SMTP server to send through
$mail->SMTPAuth = true; //Enable SMTP authentication
$mail->Username = 'user@example.com'; //SMTP username
$mail->Password = 'secret'; //SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465; //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`
const slider = new Slider();
const breakpoint = window.matchMedia("(min-width: 1200px)");
if (breakpoint.matches) {
slider.init();
}
const slider = new Slider();
const breakpoint = window.matchMedia("(max-width: 1200px)");
const breakpointChecker = () => {
if (breakpoint.matches) {
slider.init();
} else {
slider.destroy();
}
};
breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();
init()
и destroy()
или аналогичные методы для включения и отключения слайдера. Так вот, используя эти методы в связке с matchMedia()
, можно добиться желаемого результата.// если ширина окна больше или равна 1200px,
// выполняем инициализацию слайдера
if(window.innerWidth >= 1200) {
slider.init();
}