0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <span class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </span> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-news"> <div class="tooltip"> <span class="tooltip-text"></span> <button class="button close-button" type="button"><span>Close</span></button> </div> <article class="container"> <h1 class="inner-heading">Augment your reality</h1> <div class="news-full"> <img src="img/ar.jpg" alt="Person wearing virtual reality glasses"> <div class="news-stats"> <button class="heart" type="button"><span class="likes-number">157</span></button> <time datetime="2020-02-18">February 18, 2020</time> </div> <p>The editors of Flashnews! have given their subscribers the following gift: an <button class="tooltip-button" type="button" data-tooltip-text="This is for when you have Pokemons in the living room">augmented reality</button> app in which you can pet an <button class="tooltip-button" type="button" data-tooltip-text="Something in between a pig and a jerboa">aardvark</button>, grow a <button class="tooltip-button" type="button" data-tooltip-text="Beats me what that is, I'll Google it">dragon fruit</button> plant or talk with <button class="tooltip-button" type="button" data-tooltip-text="Only available to annual subscribers">Muffin</button>.</p> </div> </article> <section class="comment-feed container"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">I want that!!!</li> </ol> <form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form"> <div class="comment-inner"> <label class="comment-label" for="comment-textarea">your comment</label> <textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea"></textarea> </div> <button class="button submit-button" type="submit">Submit</button> </form> </section> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </span> </div> </footer> <script src="themes.js"></script> <script src="likes.js"></script> <script src="comments.js"></script> <!-- Include the script here --> </body> </html></p>
1
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <span class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </span> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-news"> <div class="tooltip"> <span class="tooltip-text"></span> <button class="button close-button" type="button"><span>Close</span></button> </div> <article class="container"> <h1 class="inner-heading">Augment your reality</h1> <div class="news-full"> <img src="img/ar.jpg" alt="Person wearing virtual reality glasses"> <div class="news-stats"> <button class="heart" type="button"><span class="likes-number">157</span></button> <time datetime="2020-02-18">February 18, 2020</time> </div> <p>The editors of Flashnews! have given their subscribers the following gift: an <button class="tooltip-button" type="button" data-tooltip-text="This is for when you have Pokemons in the living room">augmented reality</button> app in which you can pet an <button class="tooltip-button" type="button" data-tooltip-text="Something in between a pig and a jerboa">aardvark</button>, grow a <button class="tooltip-button" type="button" data-tooltip-text="Beats me what that is, I'll Google it">dragon fruit</button> plant or talk with <button class="tooltip-button" type="button" data-tooltip-text="Only available to annual subscribers">Muffin</button>.</p> </div> </article> <section class="comment-feed container"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">I want that!!!</li> </ol> <form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form"> <div class="comment-inner"> <label class="comment-label" for="comment-textarea">your comment</label> <textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea"></textarea> </div> <button class="button submit-button" type="submit">Submit</button> </form> </section> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </span> </div> </footer> <script src="themes.js"></script> <script src="likes.js"></script> <script src="comments.js"></script> <!-- Include the script here --> </body> </html></p>
2
<p>/* Button text styles */ .tooltip-button { cursor: pointer; position: relative; padding: 1px 8px; border: none; color: inherit; font: inherit; } .tooltip-button::after { position: absolute; content: ""; top: 0; right: 0; width: 0; height: 0; border: 4px solid; border-left-color: transparent; border-bottom-color: transparent; } /* Tooltip styles */ @keyframes tooltip-opener { 0% { transform: translate(50%) scaleX(0); } 100% { transform: translate(100%) scaleX(100%); } } .tooltip { z-index: 2; display: none; flex-direction: row-reverse; position: fixed; max-width: 256px; right: 0; top: 160px; border-radius: 8px 0 0 8px; } .opened { display: flex; animation: tooltip-opener 150ms; } .tooltip-text { display: flex; align-items: center; padding: 10px; } .close-button { min-height: 64px; display: flex; justify-content: center; align-items: center; width: 30px; margin: 0; padding: 0; border-radius: 8px 0 0 8px; } .close-button span { display: inline-block; vertical-align: middle; transform: rotate(-90deg); } /* Comment entry block styles */ .comment-area { height: unset; resize: none; margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; line-height: 24px; } .text-counter { display: inline-block; vertical-align: baseline; padding: 7px 0; margin-right: auto; } .comment-form.warning .comment-label { color: #f05b29; } .comment-form.warning .comment-area { color: #f05b29; border-color: #f05b29; } .comment-form.warning .comment-area:focus { outline-color: #f05b29; } .comment-form.warning .char-counter { color: #f05b29; font-weight: bold; } .submit-button:disabled { opacity: 0.25; } /* Color schemes */ .light-theme .tooltip { background-color: #ffffff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); } .light-theme .tooltip-button { background-color: #f2f2f2; } .light-theme .tooltip-button:focus, .light-theme .tooltip-button:hover { background-color: #6653d9; color: #ffffff; outline-color: #b6aaff; } .tooltip-button:active { opacity: 0.6; } .light-theme .tooltip-button::after { border-right-color: #6653d9; border-top-color: #6653d9; } .dark-theme .tooltip { background-color: #2a2930; box-shadow: 0 0 16px rgba(0, 0, 0, 1); } .dark-theme .tooltip-button { background-color: #0a0910; } .dark-theme .tooltip-button:focus, .dark-theme .tooltip-button:hover { outline-color: #6653d9; background-color: #b6aaff; color: #17161a; } .dark-theme .tooltip-button::after { border-right-color: #b6aaff; border-top-color: #b6aaff; }</p>
2
<p>/* Button text styles */ .tooltip-button { cursor: pointer; position: relative; padding: 1px 8px; border: none; color: inherit; font: inherit; } .tooltip-button::after { position: absolute; content: ""; top: 0; right: 0; width: 0; height: 0; border: 4px solid; border-left-color: transparent; border-bottom-color: transparent; } /* Tooltip styles */ @keyframes tooltip-opener { 0% { transform: translate(50%) scaleX(0); } 100% { transform: translate(100%) scaleX(100%); } } .tooltip { z-index: 2; display: none; flex-direction: row-reverse; position: fixed; max-width: 256px; right: 0; top: 160px; border-radius: 8px 0 0 8px; } .opened { display: flex; animation: tooltip-opener 150ms; } .tooltip-text { display: flex; align-items: center; padding: 10px; } .close-button { min-height: 64px; display: flex; justify-content: center; align-items: center; width: 30px; margin: 0; padding: 0; border-radius: 8px 0 0 8px; } .close-button span { display: inline-block; vertical-align: middle; transform: rotate(-90deg); } /* Comment entry block styles */ .comment-area { height: unset; resize: none; margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; line-height: 24px; } .text-counter { display: inline-block; vertical-align: baseline; padding: 7px 0; margin-right: auto; } .comment-form.warning .comment-label { color: #f05b29; } .comment-form.warning .comment-area { color: #f05b29; border-color: #f05b29; } .comment-form.warning .comment-area:focus { outline-color: #f05b29; } .comment-form.warning .char-counter { color: #f05b29; font-weight: bold; } .submit-button:disabled { opacity: 0.25; } /* Color schemes */ .light-theme .tooltip { background-color: #ffffff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); } .light-theme .tooltip-button { background-color: #f2f2f2; } .light-theme .tooltip-button:focus, .light-theme .tooltip-button:hover { background-color: #6653d9; color: #ffffff; outline-color: #b6aaff; } .tooltip-button:active { opacity: 0.6; } .light-theme .tooltip-button::after { border-right-color: #6653d9; border-top-color: #6653d9; } .dark-theme .tooltip { background-color: #2a2930; box-shadow: 0 0 16px rgba(0, 0, 0, 1); } .dark-theme .tooltip-button { background-color: #0a0910; } .dark-theme .tooltip-button:focus, .dark-theme .tooltip-button:hover { outline-color: #6653d9; background-color: #b6aaff; color: #17161a; } .dark-theme .tooltip-button::after { border-right-color: #b6aaff; border-top-color: #b6aaff; }</p>
3
<p>let tooltip = document.querySelector('.tooltip'); let closeButton = document.querySelector('.close-button'); let tooltipButtons = document.querySelectorAll('.tooltip-button'); let tooltipText = document.querySelector('.tooltip-text'); tooltipButtons[0].onclick = function () { tooltipText.textContent = tooltipButtons[0].dataset.tooltipText; tooltip.classList.add('opened'); }; tooltipButtons[1].onclick = function () { tooltipText.textContent = tooltipButtons[1].dataset.tooltipText; tooltip.classList.add('opened'); }; closeButton.onclick = function () { tooltip.classList.remove('opened'); };</p>
3
<p>let tooltip = document.querySelector('.tooltip'); let closeButton = document.querySelector('.close-button'); let tooltipButtons = document.querySelectorAll('.tooltip-button'); let tooltipText = document.querySelector('.tooltip-text'); tooltipButtons[0].onclick = function () { tooltipText.textContent = tooltipButtons[0].dataset.tooltipText; tooltip.classList.add('opened'); }; tooltipButtons[1].onclick = function () { tooltipText.textContent = tooltipButtons[1].dataset.tooltipText; tooltip.classList.add('opened'); }; closeButton.onclick = function () { tooltip.classList.remove('opened'); };</p>
4
<p>let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); let commentField = document.querySelector('.comment-field'); commentForm.onsubmit = function (evt) { evt.preventDefault(); let newComment = document.createElement('li'); newComment.classList.add('user-comment'); newComment.textContent = commentField.value; commentField.value = ''; commentList.append(newComment); };</p>
4
<p>let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); let commentField = document.querySelector('.comment-field'); commentForm.onsubmit = function (evt) { evt.preventDefault(); let newComment = document.createElement('li'); newComment.classList.add('user-comment'); newComment.textContent = commentField.value; commentField.value = ''; commentList.append(newComment); };</p>
5
<p>let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function () { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); };</p>
5
<p>let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function () { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); };</p>
6
<p>let heart = document.querySelector('.heart'); let likesNumber = document.querySelector('.likes-number'); heart.onclick = function () { if (heart.classList.contains('added')) { likesNumber.textContent--; } else { likesNumber.textContent++; } heart.classList.toggle('added'); };</p>
6
<p>let heart = document.querySelector('.heart'); let likesNumber = document.querySelector('.likes-number'); heart.onclick = function () { if (heart.classList.contains('added')) { likesNumber.textContent--; } else { likesNumber.textContent++; } heart.classList.toggle('added'); };</p>