- index.html
- style.css
- script.js
HTML
<!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">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</a>
<a href="subscription.html" class="subscription-link">Subscription</a>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="inner-heading">Rate the FlashNews news portal!</h1>
<div class="poll">
<form class="review-form" action="https://echo.htmlacademy.ru/courses" method="post">
<fieldset>
<legend>How much do you like our news?</legend>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="bad" type="radio" name="review" id="option1" value="Everything is terrible!">
<label for="option1">Everything is terrible!</label>
</p>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="bad" type="radio" name="review" id="option2" value="Poor">
<label for="option2">Poor</label>
</p>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="good" type="radio" name="review" id="option3" value="I want more news">
<label for="option3">I want more news</label>
</p>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="bad" type="radio" name="review" id="option4" value="It’s OK">
<label for="option4">It’s OK</label>
</p>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="good" type="radio" name="review" id="option5" value="It couldn’t be better!">
<label for="option5">It couldn’t be better!</label>
</p>
<p class="poll-option">
<input class="review visually-hidden" data-evaluation="good" type="radio" name="review" id="option6" value="My favorite site!">
<label for="option6">My favorite site!</label>
</p>
<p class="error">Oops, an error occurred! Try to choose another option ;)</p>
<p>
<button class="button submit-button" type="submit">Submit feedback</button>
</p>
</fieldset>
</form>
</div>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</a>
</div>
</footer>
<script src="script.js"></script>
<script src="themes.js"></script>
</body>
</html>
CSS
/* Header */
.subscription-link {
position: relative;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 26px;
margin: auto 4%;
}
.subscription-link::before {
position: absolute;
content: "";
width: 18px;
height: 12px;
top: 9px;
left: 2px;
}
.subscription-link:hover {
padding-bottom: 4px;
border-bottom: 2px solid;
}
.subscription-link:active {
opacity: 0.6;
}
.light-theme .subscription-link {
color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .subscription-link:hover {
border-color: #6653d9;
}
.light-theme .subscription-link::before {
background-image: url("img/letter-light.svg");
}
.dark-theme .subscription-link {
color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .subscription-link:hover {
border-color: #9484f2;
}
.dark-theme .subscription-link::before {
background-image: url("img/letter-dark.svg");
}
/* Poll */
.poll {
position: relative;
margin-left: 24px;
margin-top: 20px;
padding-top: 12px;
padding-right: 32px;
padding-left: 32px;
padding-bottom: 32px;
border-radius: 0 32px;
font-size: 18px;
line-height: 24px;
font-size: 14px;
line-height: 16px;
}
.poll::before {
position: absolute;
content: "";
width: 48px;
height: 48px;
top: 0;
left: -24px;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
legend {
margin: 0;
margin-bottom: 20px;
font-weight: bold;
font-size: 18px;
line-height: 24px;
}
.light-theme .poll {
background-color: #6653d9;
color: #eae9f2;
}
.light-theme .poll::before {
background-image: url("img/poll-icon-light.svg");
color: #6653D9;
}
.dark-theme .poll {
background-color: #9484f2;
color: #17161A;
}
.dark-theme .poll::before {
background-image: url("img/poll-icon-dark.svg");
color: #9484F2;
}
.submit-button {
padding: 7px 16px;
width: 165px;
height: 30px;
border-radius: 2px;
}
.light-theme .submit-button {
background-color: #ffffff;
color: #6653D9;
}
.dark-theme .submit-button {
background-color: #17161A;
color: #9484F2;
}
.light-theme .submit-button:not(:disabled):focus,
.light-theme .submit-button:not(:disabled):hover,
.light-theme .submit-button:not(:disabled):active {
background-color: #473c8d;
color: #ffffff;
}
.dark-theme .submit-button:not(:disabled):focus,
.dark-theme .submit-button:not(:disabled):hover,
.dark-theme .submit-button:not(:disabled):active {
background-color: #473c8d;
}
.submit-button:disabled {
opacity: 0.25;
}
.error {
display: none;
margin-left: -32px;
margin-right: -32px;
height: 40px;
justify-content: center;
align-items: center;
background-color: #F05B29;
font-size: 12px;
}
.error::before {
content: "";
width: 16px;
height: 16px;
margin-right: 8px;
background-repeat: no-repeat;
background-position: 0 0;
}
.light-theme .error::before {
background-image: url('img/cross-light.svg');
}
.dark-theme .error::before {
background-image: url('img/cross-dark.svg');
}
.light-theme .error {
color: #ffffff;
border-color: #ffffff;
}
.dark-theme .error {
color: #17161A;
}
.poll-option {
margin-bottom: 16px;
}
.review + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-bottom: -2px;
margin-right: 10px;
background-size: 16px 16px;
background-repeat: no-repeat;
}
.light-theme .review + label::before {
background-image: url('img/option-light.svg');
}
.dark-theme .review + label::before {
background-image: url('img/option-dark.svg');
}
.light-theme .review:checked + label::before {
background-image: url('img/tick-light.svg');
}
.dark-theme .review:checked + label::before {
background-image: url('img/tick-dark.svg');
}
.review:focus + label {
outline: 5px solid #4d90fe;
}
.shown {
display: flex;
}
JavaScript
/*
1. All radio buttons have the review class.
2. To track when radio buttons are selected, you need to add the onchange event handler to each radio button.
3. All radio buttons have the data-evaluation attribute. If the review is good, then the value of this attribute is 'good', and if the review is bad, then it is 'bad'.
4. The submit button has the submit-button class. If the user tries to leave bad feedback, the button must be blocked, but if they want to leave good feedback, then it should be unblocked.
5. In order to display an error message, you need to add the shown class to the element with the error class. This message should be displayed if the user tries to leave a bad rating. If the user decides to leave good feedback, then the error message should be hidden.
*/
Click inside the mini browser to put the focus in this window.
Console
let reviews = document.querySelectorAll('.review');
let error = document.querySelector('.error');
let button = document.querySelector('.submit-button');
for (let review of reviews) {
review.onchange = function () {
if (review.dataset.evaluation === 'bad') {
button.disabled = true;
error.classList.add('shown');
} else {
button.disabled = false;
error.classList.remove('shown');
}
};
}