Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

5 rxjs #177

Closed
wants to merge 17 commits into from
Closed

5 rxjs #177

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
50afa24
add rxjs project
ConstDev Nov 19, 2021
aaef19c
remove redundant image
ConstDev Nov 19, 2021
0b03504
add new classes, code and accomodate classes to bem
ConstDev Nov 21, 2021
3402167
fix problems with linters
ConstDev Nov 21, 2021
1d500ec
fix issues related to linters
ConstDev Nov 21, 2021
f3040c8
fix problem with js code
ConstDev Nov 21, 2021
da0a46f
add new fix with js code
ConstDev Nov 21, 2021
871187c
add to js file new fix
ConstDev Nov 21, 2021
d88b848
fix: remove new line
ConstDev Nov 21, 2021
447526e
remove new line
ConstDev Nov 21, 2021
4b08f2f
fix issues related to comments
ConstDev Nov 22, 2021
568a440
fix issues revealed by html linter
ConstDev Nov 22, 2021
5803529
Merge branch 'MastersAcademy:main' into 5-rxjs
ConstBagel Nov 22, 2021
41b0b84
fix problem with burger and header
ConstDev Nov 22, 2021
05b400c
fix issues with js linter
ConstDev Nov 22, 2021
732fdcd
fix curly braces
ConstDev Nov 22, 2021
3569a93
move statement to the next line
ConstDev Nov 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions homeworks/kostya.bublyk_ConstBagel/5-rxjs/images/burger.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 109 additions & 0 deletions homeworks/kostya.bublyk_ConstBagel/5-rxjs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!doctype html>

<html lang="en">
<head>
<title>RxJs</title>
<link rel="stylesheet" href="styles/style.css">
</head>

<body>
<div class="page__wrapper">
<header class="page__header" data-role="page-header-section">
<section
class="header__main"
data-role="header-main-section">
<h1 class="header__title">Logo</h1>
ConstBagel marked this conversation as resolved.
Show resolved Hide resolved
ConstBagel marked this conversation as resolved.
Show resolved Hide resolved
<button
type="button"
class="header__burger"
data-role="toggle-menu-button">
<img src="./images/burger.svg" alt="burger-menu">
</button>
</section>
<nav class="header__navigation" data-role="page-navigation-section">
<ul class="navigation__menu">
<li class="navigation__item">
<a class="navigation__link" href="#">Новости</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Контакты</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Про нас</a>
</li>
</ul>
</nav>
</header>
<main class="page__main">
<p>
Lorem ipsum dolor sit amet, quis sonet referrentur cum ad, ex vim duis malorum. Te has recusabo complectitur, vix dolorum qualisque definiebas eu. Nam amet stet ut, ex natum decore delicata mea. Usu maluisset voluptaria suscipiantur id, id cetero imperdiet laboramus has. Sed veritus explicari interesset ad, mea diam velit aliquando ei.
</p>
<p>
Alia affert aliquando ex his, no per copiosae ponderum inciderint, congue utamur vel ea. Mei at utinam conclusionemque. Dicit adipiscing eu mea. Pro insolens reprehendunt ex, malorum detraxit moderatius ex vix.
</p>
<p>
Ut vel deserunt electram disputando, commodo eleifend mel et, amet errem eos ex. Mei facete oblique recteque in, ei pertinacia maiestatis percipitur vim. Pri falli legere adversarium no, mazim fabulas noluisse eu mel, duo at maiorum elaboraret instructior. Ei vis esse scripserit, et pro evertitur intellegam. Possim dolorum lobortis at eum, sed an voluptatum delicatissimi.
</p>
<p>
Ex quis mutat ignota nec, his te affert fastidii epicurei. Cu diam sint debitis mei. Vel ne nonumy pericula sententiae, sea convenire tincidunt id, ea vis eirmod vivendum. Utroque detraxit incorrupte te sit, summo aliquid percipit mei et, ut vero exerci nam. At similique argumentum qui, cu vix populo voluptua interesset.
</p>
<p>
Cum ullum oporteat mediocritatem eu. Cum et quaestio vulputate accommodare, duo luptatum sensibus consequat id, eripuit feugiat has ad. Offendit invenire cotidieque ex mel, per tempor constituto ne. Sed ut odio vide mandamus. Stet reprehendunt an sea. At vis adhuc rebum facilisi.
</p>
<p>
At est debitis molestiae, pri ut modo putant gubergren, zril malorum theophrastus his no. Vel nostrum convenire suscipiantur et, ius autem liber argumentum id, te movet nominavi repudiandae cum. Ex vix expetenda abhorreant interpretaris. Debitis salutandi hendrerit mea ad, cu vix movet iudico vituperatoribus, in adhuc definitiones vis. In per mundi audire, vitae ridens quidam has cu, eu stet aeterno quo.
</p>
<p>
An urbanitas appellantur nam, odio tale duo ea, qui cu aliquando interpretaris. Amet suas nam ut. An quando nostro numquam per. Vix ex graecis vivendo, qui te probo commune.
</p>
<p>
Eius mentitum cu pro, semper vivendum id sit. Et nec justo propriae, perfecto indoctum interpretaris nam et. Ut dicant ornatus pertinax vis, tacimates indoctum sadipscing et vis. Eu vidit iudico intellegat mea, ignota eripuit reformidans in pro, per et amet vidit. Meis causae atomorum nec id. At abhorreant adipiscing voluptatum sed, quod mutat nec ea, justo aperiam accusata ut has.
</p>
<p>
Utroque electram sed te, id labores perfecto appellantur quo. Duo ut natum congue, ad nec albucius oporteat. Modus splendide quo ad, quo modus reque nihil id. Ex molestie accommodare qui, tation signiferumque duo ut. Has sint agam nonumes id. An vel facer consectetuer.
</p>
<p>
Ei duo altera tritani eleifend. Ludus audiam integre id quo. Animal accusam eu vel, putant adipisci pro ex, cum sanctus quaestio an. Ei dolor ceteros scriptorem vel, his cu integre utroque forensibus. Debet sonet an pro, vix conceptam theophrastus ne, at diceret minimum ius.
</p>
<p>
Sea ex amet dignissim assentior. Clita melius audire eum eu. Habemus periculis posidonium pro eu, liber veniam sed ex. Nam ea quidam ponderum consectetuer.
</p>
<p>
In latine temporibus vix, ignota voluptatum mediocritatem te eos. In facilisis disputationi vel. Te maiorum ancillae ius, pri prodesset consequuntur ex. Sit iusto gubergren concludaturque te, invenire salutatus rationibus per no. Quaeque adipisci eum no. Dicat aliquando nec ne.
</p>
<p>
Mei error abhorreant ex, sea ne virtute eligendi gloriatur. Nam in probo eripuit blandit, ad perpetua vituperata eam. Alterum maluisset vituperatoribus eam eu, et usu quando eligendi petentium. Duo suas everti dolorum cu, omittam vivendum ad eam, vide illud ex quo. Eos liber indoctum patrioque at. Mel velit debitis accusam ne, vivendum menandri rationibus sit at, suscipit insolens sea ad.
</p>
<p>
Cu vitae aeterno per, ex adhuc facer accommodare nam, esse ubique te mel. Vis ut graece mentitum ullamcorper, has ancillae deleniti referrentur eu. Ut novum accumsan mel, eos atqui deleniti ei. Atqui dissentiunt eos et, diam delenit probatus vel ex.
</p>
<p>
Eu has mundi apeirian, no disputationi deterruisset nam, at pertinax expetendis definitionem mea. Alii nibh rationibus pro in, duo tota legere quaestio at, ea ius delicata gubergren. Mei cu prima probatus, no feugiat antiopam pri. Sed adhuc numquam eloquentiam ex, in nam erat semper, at duo timeam regione consequuntur. Verterem assentior eu pro, lobortis quaestio ne sit.
</p>
<p>
Eu cum euismod utroque maluisset, id nulla tritani feugait eum, his tempor dissentias reprehendunt et. Dicunt assentior sed eu, unum delectus complectitur mei ex. Cu prodesset democritum vel, at vocibus electram complectitur has. Eos te nemore oblique recusabo. Est ea petentium principes, ex harum nemore iracundia eum.
</p>
<p>
Mel ad prima modus, odio tale his id, pro an augue eleifend. Pro atqui omnium voluptatibus ei. At pri ipsum animal, no eum inimicus expetenda scriptorem, eirmod adipiscing at vim. Ea eam volumus noluisse placerat, cu sed apeirian gubergren scripserit, suas erat ei ius. Ius assum officiis ullamcorper id, duo choro nostrum accusamus ad, cu posse tractatos vix. Et lorem eirmod constituam sit. Assum vocibus scaevola sea ei, homero cotidieque concludaturque sed te.
</p>
<p>
Tibique reprimique vim in, pri in tantas periculis dignissim, qui ex choro semper. Has an velit soluta theophrastus, in his atqui dolores, ne harum fabellas mel. Sea ei everti recusabo. Ei his mollis patrioque, solum illud deterruisset duo ei.
</p>
<p>
Vix aeque decore omittam an. Quas mutat ius ex. Mel in nostro tractatos, homero dolorem euripidis vis in. Pro amet ridens deserunt ea, scripta signiferumque sea ex, in sed suas adhuc nobis. Aeque omnium an his, ex indoctum maiestatis his, legendos deseruisse his ea. Ei mea lorem civibus dissentias, est cu commodo debitis docendi.
</p>
<p>
Tibique corpora epicurei qui cu. Sint esse brute est ut, mei inani corpora efficiendi ex. Mea audiam corpora voluptatibus ei, eius dolor alienum vix ex. Ad pro invenire inimicus consequuntur, an sea ponderum salutatus moderatius, modus inermis minimum cu mei. Cum luptatum facilisi cu, sed cu audire disputando suscipiantur.
</p>
<p>
Impedit ponderum vis cu, vix mucius posidonium consectetuer ea. Ne labore tractatos sit, ei est dolorum mediocrem partiendo, ex pro mutat accumsan consequuntur. Unum volumus forensibus te mei, te decore sapientem nec. Id munere ancillae abhorreant mei. Cu sit docendi gubergren delicatissimi.
</p>
<p>
Mel assum splendide at, eum albucius convenire ea.
</p>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js" integrity="sha512-JnZPWAckMDks0CCIeGznqEo7ifmYK7VowHq/NVFlSXGkwxv4OBCJFy7nouOtJZmVldHo7FQLIdeWTI55yyZc4Q==" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions homeworks/kostya.bublyk_ConstBagel/5-rxjs/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const { fromEvent } = window.rxjs;
const { map } = window.rxjs.operators;

const pageHeaderEl = document.querySelector('[data-role="page-header-section"]');
const toggleMenuButtonEl = document.querySelector('[data-role="toggle-menu-button"]');
const headerMainEl = document.querySelector('[data-role="header-main-section"]');
const pageNavigationEl = document.querySelector('[data-role="page-navigation-section"]');

const changeHeaderClasses = (addedStyle, removedStyle) => {
pageHeaderEl.classList.add(addedStyle);
pageHeaderEl.classList.remove(removedStyle);
};

fromEvent(window, 'scroll').pipe(
ConstBagel marked this conversation as resolved.
Show resolved Hide resolved
map(() => this.scrollY),
).subscribe((position) => (position > 50 ? changeHeaderClasses('page__header--hide', 'page__header--show')
: changeHeaderClasses('page__header--show', 'page__header--hide')));

toggleMenuButtonEl.addEventListener('click', () => {
headerMainEl.classList.toggle('header__main--open');
pageNavigationEl.classList.toggle('header__navigation--show');
});
126 changes: 126 additions & 0 deletions homeworks/kostya.bublyk_ConstBagel/5-rxjs/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.page__wrapper {
width: 90%;
min-height: 50%;
margin: 0 auto;
border: 1px solid #24292F;
}

.page__header {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
ConstBagel marked this conversation as resolved.
Show resolved Hide resolved
align-items: center;
background-color: #24292F;
}

.header__main {
display: flex;
width: fit-content;
flex-direction: row;
justify-content: start;
}

.header__title {
width: 80px;
padding: 3%;
height: 100%;
background-color: #44A047;
text-align: center;
color: #FFF;
}

.header__burger {
display: none;
width: 50px;
height: 100%;
}

.header__navigation {
width: 60%;
height: 100%;
margin-left: 5%;
}

.navigation__menu {
list-style: none;
}

.navigation__item {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-right: 2%;
}

.navigation__link {
color: #FFF;
text-decoration: none;
}

.navigation__link:hover {
text-decoration: underline;
cursor: pointer;
}

.page__main {
width: fit-content;
height: auto;
}

/* Media queries: */

@media screen and (max-width: 600px) {

.page__header {
flex-direction: column;
}

.header__main {
width: 100%;
}

.header__burger {
display: block;
}

.header__navigation {
width: 100%;
height: 100px;
display: none;
}

li.navigation__item {
display: block;
margin-top: 10px;
}
}

/* Classes for JS effects: */

.page__header--hide {
visibility: hidden;
opacity: 0;
transition: opacity 1s, visibility 1s;
}

.page__header--show {
visibility: visible;
opacity: 1;
transition: opacity 1s, visibility 1s;
}

.header__navigation--show {
display: block;
}

.header__main--open {
background-color: #44A047;
justify-content: space-between;
}