WebTaverna /> js, css, html

<div class="container">
    <img src="image.jpg" class="gradient">
    <div class="gradient"></div>
</div>

.container {
  width: 500px; height: 700px;
  position: relative;
}
.gradient {
  height: 100%; width: 100%;
  background-image: 
          linear-gradient(to top, 
        rgba(0, 0, 0, 0.8), 
        rgba(255, 255, 255, 0.2));
  position: absolute;
  top: 0; left: 0;
}
img {
  height: 100%; width: 100%;
  object-fit: cover;
  display: block;
}

<div class="wrapper">
    <div class="card" style="--delay: 0ms"></div>
    <div class="card" style="--delay: 300ms"></div>
    <div class="card" style="--delay: 600ms"></div>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.card {
  width: 200px;
  height: 200px;
  background-color: #f2d492;
  margin: 10px;
  animation: fadeIn 1s ease forwards;
  animation-delay: var(--delay);
  opacity: 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<h1>Канал WebTaverna /> JavaScript</h1>

h1 {
  position: relative;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
h1::after {
  content: "";
  position: absolute;
  right: 0;
  height: 100%;
  width: 120px;
  background-image: linear-gradient(to right, transparent, #fff);
}

<details name="tab">
    <summary>Вкладка 1</summary>
    <p>Lorem... </p>
</details>

<details name="tab">
    <summary>Вкладка 2</summary>
    <p>Lorem... </p>
</details>

<details name="tab">
    <summary>Вкладка 3</summary>
    <p>Lorem... </p>
</details>

const copyToClipboard = (text) => navigator.clipboard.writeText(text)

copyToClipboard("This Sring is Copied To Clipboard.")

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) 
// Результат: True или False

const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min

randomNumberInRange()
// Получите случайное число по умолчанию от 0 до 100

// В качестве аргументов вы указываете минимальное и максимальное значение
randomNumberInRange(100, 200)
// Получите случайное число в диапазоне от 100 до 200

const goToTop = () => window.scrollTo(0, 0)

goToTop()

const toggleElementDisplay = element => element.style.display = (element.style.display === "none" ? "block" : "none")

toggleElementDisplay(document.body)

<div class="wave">
    <span style="--i:1">W</span>
    <span style="--i:2">e</span>
    <span style="--i:3">b</span>
    <span style="--i:4">T</span>
    <span style="--i:5">a</span>
    <span style="--i:6">v</span>
    <span style="--i:7">e</span>
    <span style="--i:8">r</span>
    <span style="--i:9">n</span>
    <span style="--i:10">a</span>
</div>

.wave {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, .2));
}
.wave span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 6em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));
}
@keyframes animate {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-20px);
  }
  40%,
  100% {
      transform: translateY(0px);
  }
}

<h1>t.me/WebTaverna</h1>

h1 {
  background: linear-gradient(90deg, 
              #d988da, #dcde8a, #d988da);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
  0% { background-position: -500%; }
  100% { background-position: 500%; }
}

<h1 data-text="WebTaverna">WebTaverna</h1>

h1 {
  position: relative;
  color: #fff;
  font-size: 5em;
  font-weight: 800;
}
h1:before {
  content: attr(data-text);
  position: absolute;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #ffffff88 0, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.5;
}

const text = '<a href="https://t.me/jsProger">jsProger</a>'

const stripHtml = html => (new DOMParser()
        .parseFromString(html, 'text/html'))
        .body.textContent || ''

console.log(stripHtml(text))

// Результат: jsProger

const value = Math.random()

// Каждый раз будет получать случайное число 
console.log(value)
// 0.8526006877925647

<h1>Канал WebTaverna /> JavaScript</h1>

h1 {
  position: relative;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
h1::after {
  content: "";
  position: absolute;
  right: 0;
  height: 100%;
  width: 120px;
  background-image: linear-gradient(to right, transparent, #fff);
}

<div class="outer-div">
    <div class="inner-div"></div>
</div>

.outer-div {
  height: 100vh;
}
.inner-div {
  width: 100px;
  height: 100px;
  background-color: #F2D492;
}

.inner-div {
  display: grid;
  place-content: center;
}

.inner-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-div {
  position: relative;
}
.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<a href="https://t.me/WebTaverna">
    WebTaverna
</a>

a::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  transition: all 0.3s;
  background: #12c2e9;
  background: linear-gradient(to right,
        #f64f59,#c471ed,#12c2e9);
}
a:hover::after {
  width: 100%;
}

<div class="wrap">
    <header>2 способа прижать footer к низу</header>
    <main>Какой-то контент...</main>
    <footer>t.me/WebTaverna ©️ 2024</footer>
</div>

html { height: 100%; }
body { height: 100%; }
main { flex: 1 1 auto; } 
.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
} 

html { height: 100%; }
body { height: 100%; }
.wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

// вибросигнал длительностью 1 сек 
navigator.vibrate(1000)

// последовательность: вибросигнал 0.5 сек, 
// пауза 1 сек, вибросигнал 0.3 сек 
navigator.vibrate([500, 1000, 300])

<button class="btn">Вибрация телефона</button>

const btn = document.querySelector('btn')

btn.addEventListener('click', vibratePhone)

function vibratePhone() {
    if (navigator.vibrate) {
      navigator.vibrate(1000)
    } else {
      console.log('Vibration API не поддерживается в вашем браузере')
    }
}

h1::selection {
  background-color: #c83e4d;
  color: #f4b860;
}

<h1 class="neon-text">WebTaverna</h1>

.neon-text {
  color: #fff;
  text-shadow: 
      0 0 1px #fff,
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 11px #b60aff,
      0 0 20px #b60aff,
      0 0 30px #b60aff,
      0 0 55px #b60aff,
      0 0 80px #b60aff;
}

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

<div class="card">
    <img src="/image.jpg" alt="">
    <span class="title">t.me/WebTaverna</span>
</div>

.card {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.title {
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    font-size: 1.8rem;
    opacity: 0;
    color: #fff;
    transition: 0.8s;
    background: rgba(0,0,0, 0.6);
}
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
    filter: grayscale(100%);
}
.card:hover img {
    filter: grayscale(0);
    scale: 1.05;
}
.card:hover .title {
    opacity: 1;
    bottom: 0;
}

h1 {
  text-shadow: 10px 10px 30px #2101ec, 
              -10px -10px 30px #8a31e9;
  -webkit-text-stroke: 2px #fc65ff;
  -webkit-text-fill-color: transparent;

  font-size: 4em;
  font-weight: bold;
}

<footer>
    <p>t.me/WebTaverna <span id="current-year"></span> ©️ </p>
</footer>

const currentYear = document.querySelector('#current-year')

currentYear.textContent = new Date().getFullYear()

<div class="wave">
    <span style="--i:1">W</span>
    <span style="--i:2">e</span>
    <span style="--i:3">b</span>
    <span style="--i:4">T</span>
    <span style="--i:5">a</span>
    <span style="--i:6">v</span>
    <span style="--i:7">e</span>
    <span style="--i:8">r</span>
    <span style="--i:9">n</span>
    <span style="--i:10">a</span>
</div>

.wave {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, .2));
}
.wave span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 6em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));
}
@keyframes animate {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-20px);
  }
  40%,
  100% {
      transform: translateY(0px);
  }
}

const text = 'jsProger'

const textSplit = text.split('')
console.log(textSplit)
// ['j', 's', 'P', 'r', 'o', 'g', 'e', 'r']

const textReverse = textSplit.reverse()
console.log(textReverse)
// ['r', 'e', 'g', 'o', 'r', 'P', 's', 'j']

const textJoin = textSplit.join('')
console.log(textJoin)
// regorPsj

const textReversed = text.split('').reverse().join('')
console.log(textReversed)
// regorPsj

<h1 data-text="WebTaverna">WebTaverna</h1>

h1 {
  position: relative;
  color: #fff;
  font-size: 5em;
  font-weight: 800;
}
h1:before {
  content: attr(data-text);
  position: absolute;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #ffffff88 0, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.5;
}

const array = [0, 1, 2, 3, 4, 5]

// Сокращаем массив до трёх элементов
array.length = 3
console.log(array)
// Результат: [ 0, 1, 2 ]

// Очищаем массив полностью
array.length = 0
console.log(array)
// Результат: []