??? ???? ?? VANILLA JS
??? ?????? ???????? ?????? ?????? ????? ?? ?? ??????? ? ????? ????? ??? ??????. ?? ??????? ?? Vanilla JS? ?????? ??? ??????? ?? ?? ????? ????? ???. ?? ?????? ????? ???? ?? ?????? ??? ???? ?? ????? ?????? ???.
????? ?????? HTML
?? ?????? ?? ?????? ???? HTML ???? ??? ???? ???? ?????. ??? ?????? ???? ???? ?? ????? ?????? ? ????? ???? ????? ???? ? ???? ????.
```html
???? ?? ????? ???????
???? ?? ????? ???????
????? ???? ???? ????
```
????????? ?? CSS
????????? ?? ?????? ??????? ????? ????? ?? ????? ?????? ????? ????. ???? ???? ???? ??????? ?????? ?? CSS ??????? ???.
```css
#flashcard {
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
width: 300px;
text-align: center;
margin: auto;
}
```
????? ?? JavaScript
???? ?? ???? ???? ??????? ???? ????? ?? JavaScript. ??? ?? ????? ?????? ?????? ????? ???.
```javascript
const questions = [
{ question: "?????? ?????", answer: "?? ???? ??????????? ???." },
{ question: "JavaScript ?????", answer: "???? ???? ?? ???." }
];
let currentCard = 0;
const questionElement = document.getElementById('question');
const answerElement = document.getElementById('answer');
const showAnswerButton = document.getElementById('show-answer');
const nextCardButton = document.getElementById('next-card');
function loadCard() {
questionElement.textContent = questions[currentCard].question;
answerElement.textContent = questions[currentCard].answer;
answerElement.style.display = 'none';
}
showAnswerButton.addEventListener('click', () => {
answerElement.style.display = 'block';
});
nextCardButton.addEventListener('click', () => {
currentCard = (currentCard + 1) % questions.length;
loadCard();
});
loadCard();
```
?????????
?? ?????? ?? ??????? ?? ??? ?? ? ????????? ?????? ?? ??? ???? ???? ??? ??????? ????? ???. ??? ?????? ?? ??????? ???? ? ???? ??? ????? ???. ?? ????? ???????? ?? ????? ? ????? ?????? ??? ????????? ?? ????? ????? ?? ?????? ????????? ?? ?????? ??? ?????.
??????? ?????? ???? ??? ????? (??? ????) ?? ???? ?????????????? ????? ????? ??? ??????????? ??? ???? ????????? ??? ???? ???????? ??? ???? ?? javascript????? ????? ??? ???? ?? VanillaJS????? ??? ????????? ??? ???? ?? javascript??? ???? ?? ???? ?????????? ???? ??? ?? ???? ?????????????? ????? ????? ??? ??????? ???? ?? VanillaJS????? ????? ??? ???? ???? ???????????? ????? ??? ??????? ???? ?? VanillaJS??????? ??? ???? ??????????? ??? ???? ??????? ??? ???? JavaScript
??????? ????? ????? ??? ???? ?? VanillaJS ??? ???? ?? ?? ????? ???? ????? ???? ?? ?? ??????? ??? ????? ?? ????? ?? ?? ??????? ?? VanillaJS? ??? ???????? ?? ????? ????. ?? ???? ?? ????? VanillaJS ?? ????? ??????? ?? JavaScript ???? ???? ?????????? ? ?????????? ????? ???? ??? ????? ???? ????????????? ?? ?? ????? ??????? ?????? ??? ???? ????? ?????? ????? ????? ???. ?? ?????? ??? ??????? ?????? ?? ????? ?? ????? ???. ??????? ?? VanillaJS ?? ???????????? ??? ????? ?? ????? ?? ???? ??????? ?? ?????????? ?????? ????? ??? ?? ????? ? ??? ???????. ????? ?? ???? ??????? ???????? ?? ????? ?????? ?? ?????????? ???? ? ???? ?? ?? ??????? ??? ??? ????? ????. ??? ??? ?? ??????? ? ??? ????? ??? ?????? ????? ? ??????? ?? ???????? ????? ???? ?? ?? ??????? ?? ???? ?? ??????? ??????? ????? ??????? ????. ?? ?????? ??? ??????? ?? ??? ??? ???? ????? ????? ??? ??? ?? ?? ????? ???????? ???? ? ?????? ???? ??????? ? ????? ?????. ??? ?? ??? ????? ????? ?????? ??? ???? ??????? ???? ???? ???? ??? ????.