Skip to content

Начинаем программировать #2

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

Merged
keksobot merged 4 commits into from
May 25, 2026
Merged

Начинаем программировать #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f13a0e
Делает main-page.tsx
Igor-Alexeevich May 23, 2026
30387dc
Отрисовалgit add .!
Igor-Alexeevich May 23, 2026
b4b903b
Готовит страницы
Igor-Alexeevich May 23, 2026
cee5bc3
Исправляет ошибки
Igor-Alexeevich May 24, 2026
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
13 changes: 13 additions & 0 deletions src/components/App/app.tsx
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 23, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

src/components/app/app.tsx

upd - правильней src/app/app.tsx, потому что app это не переиспользуемый компонент, а отдельная смысловая сущность

Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не исправлено:
Должно быть src/app/app.tsx

Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import MainPage from '../../pages/main-page/main-page';

type AppScreenProps = {
offersCount: number;
}

function App({ offersCount }: AppScreenProps): JSX.Element {
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSX.Element - не обязательно

return (
<MainPage offersCount={offersCount} />
);
}

export default App;
42 changes: 42 additions & 0 deletions src/components/card/offer-card.tsx
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

offer-card.tsx

Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@


function OfferCard(): JSX.Element {
return (
<article className="cities__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="cities__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-01.jpg" width="260" height="200" alt="Place image" />
</a>
</div>
<div className="place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;120</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">To bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '80%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Beautiful &amp; luxurious apartment at great location</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
);
}

export default OfferCard;
5 changes: 5 additions & 0 deletions src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const setting = {
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Новая ошибка:

Константные объекты с большой буквы (смотри критерий Б9)
https://up.htmlacademy.ru/react-individual/3/criteries#b9

offersCount: 312,
} as const;

export default setting;
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Новая ошибка:

В данном случае как default не экспортируем

Про то как устроены экспорты и какие когда используются, можно почитать тут: https://learn.javascript.ru/import-export

13 changes: 11 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/app/app';

Check failure on line 3 in src/index.tsx

View workflow job for this annotation

GitHub Actions / build 

Cannot find module './components/app/app' or its corresponding type declarations.
Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Надо дирректорию для App объявить с маленькой буквы

Переместить в корень src
И тогда путь будет "./app/app"

Copy link
Copy Markdown
Collaborator

@UnidentifiedRaccoon UnidentifiedRaccoon May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не исправлено:
Переместить в корень src
И тогда путь будет "./app/app"

import setting from './const';


// площадка для монтирования react-элемента , находится в index.html: <div id="root"></div>:
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

root.render(
// запуск отрисовки всего проекта в строгом режиме
<React.StrictMode>
<h1>Hello, World!</h1>
</React.StrictMode>

<App // запуск корневого компонента App
offersCount={setting.offersCount}
/>

</React.StrictMode>,
);
171 changes: 171 additions & 0 deletions src/pages/favorites/favorites-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
function FavoritesPage(): JSX.Element {
return (
<div className="page">
<header className="header">
<div className="container">
<div className="header__wrapper">
<div className="header__left">
<a className="header__logo-link" href="main.html">
<img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
</a>
</div>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a className="header__nav-link header__nav-link--profile" href="#">
<div className="header__avatar-wrapper user__avatar-wrapper">
</div>
<span className="header__user-name user__name">Oliver.conner@gmail.com</span>
<span className="header__favorite-count">3</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>

<main className="page__main page__main--favorites">
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Amsterdam</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-03.jpg" width="150" height="110" alt="Place image" />
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Nice, cozy, warm big bed apartment</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>

<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/room-small.jpg" width="150" height="110" alt="Place image" />
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;80</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '80%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Wood and stone place</a>
</h2>
<p className="place-card__type">Room</p>
</div>
</article>
</div>
</li>

<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Cologne</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-04.jpg" width="150" height="110" alt="Place image" />
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">White castle</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
</div>
</li>
</ul>
</section>
</div>
</main>
<footer className="footer container">
<a className="footer__logo-link" href="main.html">
<img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33" />
</a>
</footer>
</div>
);
}

export default FavoritesPage;
45 changes: 45 additions & 0 deletions src/pages/login-page/login-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
function LoginPage(): JSX.Element {
return (
<div className="page page--gray page--login">
<header className="header">
<div className="container">
<div className="header__wrapper">
<div className="header__left">
<a className="header__logo-link" href="main.html">
<img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
</a>
</div>
</div>
</div>
</header>

<main className="page__main page__main--login">
<div className="page__login-container container">
<section className="login">
<h1 className="login__title">Sign in</h1>
<form className="login__form form" action="#" method="post">
<div className="login__input-wrapper form__input-wrapper">
<label className="visually-hidden">E-mail</label>
<input className="login__input form__input" type="email" name="email" placeholder="Email" required={false} />
</div>
<div className="login__input-wrapper form__input-wrapper">
<label className="visually-hidden">Password</label>
<input className="login__input form__input" type="password" name="password" placeholder="Password" required={false} />
</div>
<button className="login__submit form__submit button" type="submit">Sign in</button>
</form>
</section>
<section className="locations locations--login locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Amsterdam</span>
</a>
</div>
</section>
</div>
</main>
</div>
);
}

export default LoginPage;
Loading
Loading