Разбор открывающегося квадрата

Понажимайте на квадрат:

Если хотите добавить подобное себе на сайт, то скопируйте код предоставленный ниже, далее мы разберемся в этом коде:

<!DOCTYPE html>

<html>

<head>

<style>

.square {

width: 150px;

height: 150px;

background-color: #00BFFF;

display: flex;

justify-content: center;

align-items: center;

font-size: 24px;

color: white;

cursor: pointer;

}

.square.closed {

background-color: #FFFAFA;

color: #000000;

}

</style>

</head>

<body>

function toggleSquare() {

const square = document.querySelector('.square');

const content = square.innerHTML;

if (content === '1') {

square.innerHTML = '5+3';

square.classList.add('closed');

} else {

square.innerHTML = '1';

square.classList.remove('closed');

}

</script>

</body>

</html>

Этот код представляет собой простую HTML-страницу с использованием CSS и JavaScript. Визуально он создает квадратный элемент с классом "square", который может быть открытым или закрытым. При клике на квадрате происходит переключение его состояния.

Давайте разберем код по частям:

1. `<!DOCTYPE html>`: Это объявление типа документа, указывающее на то, что документ является HTML.

2. `<html>...</html>`: Это контейнерный элемент, содержащий все содержимое HTML-страницы.

3. `<head>...</head>`: Элемент `<head>` содержит информацию о документе, такую как заголовок страницы, подключаемые файлы стилей (CSS) и скрипты (JavaScript).

4. `<style>...</style>`: Элемент `<style>` используется для определения стилей CSS, применяемых к элементам на странице. В данном случае определены стили для классов "square" и "square.closed".

5. `<body>...</body>`: Элемент `<body>` содержит видимое содержимое страницы, которое будет отображаться в браузере.

6. `<div class="square" onclick="toggleSquare()">1</div>`: Это элемент `<div>` с классом "square". Он представляет квадратный элемент на странице. При клике на него вызывается функция `toggleSquare()`, а начальное содержимое элемента равно "1".

7. `<script>...</script>`: Элемент `<script>` используется для вставки JavaScript-кода в HTML-страницу. В данном коде определена функция `toggleSquare()`, которая переключает состояние квадратного элемента и изменяет его содержимое и класс в зависимости от текущего состояния.

Когда вы кликаете на квадрате, функция `toggleSquare()` проверяет текущее содержимое элемента. Если оно равно "1", то содержимое изменяется на "5+3", а также добавляется класс "closed". Если текущее содержимое не равно "1", то содержимое изменяется на "1", а класс "closed" удаляется.

Таким образом, при каждом клике на квадрате его состояние переключается между открытым и закрытым, а текст внутри квадрата меняется соответственно. Стили CSS определяют внешний вид квадрата в зависимости от его состояния.

А сейчас понажимайте на следующий квадрат:

Тут мы видим изображение на обороте которого появляется нужная информация.

Предоставляем код данного квадрата, далее разберемся в коде:

<!DOCTYPE html>

<html>

<head>

<style>

.square {

position: relative;

width: 150px;

height: 150px;

background-color: #FFFAFA;

cursor: pointer;

transition: transform 0.3s ease;

}

.square.closed {

transform: rotateY(180deg);

background-color: #FFFFFF; /* Изменяем фон на белый */

}

.square img {

max-width: 100%;

max-height: 100%;

transition: opacity 0.3s ease;

}

.square.closed img {

opacity: 0;

}

.square .content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) rotateY(0deg); /* Изменяем угол поворота на 0deg */

font-size: 16px;

color: #000000;

text-align: center;

visibility: hidden;

}

.square.closed .content {

visibility: visible;

transform: translate(-50%, -50%) rotateY(180deg); /* Изменяем угол поворота на 180deg */

}

</style>

</head>

<body>

<div class="content">Казахский народный щипковый струнный инструмент</div>

</div>

function toggleSquare() {

const square = document.querySelector('.square');

square.classList.toggle('closed');

}

</script>

</body>

</html>

Данный код представляет собой HTML-страницу с использованием CSS и JavaScript. Он создает квадратный элемент, который может быть открытым или закрытым, и содержит изображение и текст.

Разберем код по частям:

1. `<!DOCTYPE html>`: Это объявление типа документа, указывающее на то, что документ является HTML.

2. `<html>...</html>`: Это контейнерный элемент, содержащий все содержимое HTML-страницы.

3. `<head>...</head>`: Элемент `<head>` содержит информацию о документе, такую как заголовок страницы, подключаемые файлы стилей (CSS) и скрипты (JavaScript).

4. `<style>...</style>`: Элемент `<style>` используется для определения стилей CSS, применяемых к элементам на странице.

- `.square`: Это класс, применяемый к элементу с классом "square". Здесь определены стили для квадратного элемента.

- `.square.closed`: Это класс, применяемый к элементу с классом "square", когда он находится в закрытом состоянии.

- `.square img`: Это стили для изображения внутри квадратного элемента.

- `.square .content`: Это стили для содержимого квадратного элемента (текста).

5. `<body>...</body>`: Элемент `<body>` содержит видимое содержимое страницы, которое будет отображаться в браузере.

6. `<div class="square" onclick="toggleSquare()">...</div>`: Это элемент `<div>` с классом "square". Он представляет квадратный элемент на странице. При клике на нем вызывается функция `toggleSquare()`. Внутри `<div>` размещается изображение с помощью `<img>` и текстовое содержимое с помощью `<div class="content">`.

7. `<script>...</script>`: Элемент `<script>` используется для вставки JavaScript-кода в HTML-страницу. В данном коде определена функция `toggleSquare()`, которая переключает класс "closed" у элемента с классом "square", добавляя или удаляя его.

При клике на квадратном элементе происходит вызов функции `toggleSquare()`, которая изменяет состояние элемента. Если элемент имеет класс "closed", то он переходит в открытое состояние (удаляется класс "closed"). Если элемент не имеет класса "closed", то он переходит в закрытое состояние (добавляется класс "closed").

Стили CSS определяют различный внешний вид квадратного элемента в зависимости от его состояния. В открытом состоянии фоновый цвет квадрата белый, изображение отображается полностью, а текст скрыт.