Skip to content

Commit 3f66da4

Browse files
diegoarmandoodiegoarmandoo
committed
✨feat: converte páginas em views do SPA | Parte 03
- Cria a "HomeView" a Partir de Trechos do HTML da Página "Index" - Prepara a Página "Index" para Ser o Ponto de Carregamento Único do SPA - Configura a "HomeView" nas Rotas e Na Barra de Navegação - Converte a Página "Contato" em "ContatoView" - Configura a "ContatoView" nas Rotas e Na Barra de Navegação - Convertendo a Página "Sobre" em "SobreView" - Configura a "SobreView" nas Rotas e Na Barra de Navegação - Implementa a "NotFoundView" e Configura nas Rotas
1 parent e695b03 commit 3f66da4

File tree

13 files changed

+325
-286
lines changed

13 files changed

+325
-286
lines changed

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"liveServer.settings.port": 5400,
3+
"liveServer.settings.file": "index.html",
4+
"liveServer.settings.root":"/",
5+
}

‎contato.html‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎index.html‎

Lines changed: 8 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@
2424
<div class="collapse navbar-collapse" id="navbarNav">
2525
<ul class="navbar-nav me-auto">
2626
<li class="nav-item">
27-
<a class="nav-link page" href="/">
27+
<a class="nav-link page" href="/" data-link>
2828
<i class="bi bi-house"> Home</i>
2929
</a>
3030
</li>
3131
<li class="nav-item">
32-
<a class="nav-link page" href="/contato.html">
32+
<a class="nav-link page" href="/contato" data-link>
3333
<i class="bi bi-telephone"> Contato</i>
3434
</a>
3535
</li>
3636
<li class="nav-item">
37-
<a class="nav-link page" href="/sobre.html">
37+
<a class="nav-link page" href="/sobre" data-link>
3838
<i class="bi bi-patch-question"> Sobre</i>
3939
</a>
4040
</li>
@@ -43,103 +43,13 @@
4343
</div>
4444
</nav>
4545

46-
<!-- Introdução -->
47-
<header class="py-4" style="background-color:#f4dfc8;">
48-
<div class="container px-4 px-lg-5">
49-
<div class="row align-items-center justify-content-center">
50-
<div class="col-lg-8 col-xl-7 col-xxl-6">
51-
<div class="my-5 text-center text-xl-start">
52-
<h1 class="display-5 fw-bolder mb-2" style="color: #425862;">
53-
🛒 E-Commerce ABC
54-
</h1>
55-
<p class="lead fw-medium mb-4 mt-4 text-break" style="color: #425862;">
56-
A Fábrica ABC, especializada em produtos de <b>cama, mesa e banho</b>, ingressou no comércio eletrônico para expandir seu alcance no Brasil.
57-
Adotando o modelo B2C, a empresa oferece uma <b>experiência de compra online personalizada e eficiente</b>.
58-
A ABC é conhecida pela <b>qualidade de seus produtos</b>, agora <b>combina tradição com inovação</b>, adaptando-se às novas demandas do mercado.</p>
59-
</p>
60-
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
61-
<a class="btn btn-lg px-4 me-sm-3" style="background-color: #7d7062; color: #f8e9d8" href="#">
62-
Inicie Sua Experiência
63-
</a>
64-
<a class="btn btn-outline-dark btn-lg px-4 fw-bolder" href="#">
65-
Sobre
66-
</a>
67-
</div>
68-
</div>
69-
</div>
70-
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center">
71-
<img class="img-fluid rounded-4" src="/images/abc.png" alt="Imagem representando os princípios da Fábrica ABC" />
72-
</div>
73-
</div>
74-
</div>
75-
</header>
76-
77-
<!-- Qualidades -->
78-
<section class="py-5" id="qualidades" style="background-color: #f7d3ad;">
79-
<div class="container px-5 my-5">
80-
<div class="row gx-5">
81-
<div class="col-lg-5 mb-5 mb-lg-0"><h2 class="fw-bolder mb-0" style="color: #425862;">⭐ Nosso Diferencial</h2></div>
82-
<div class="col-lg-7">
83-
<div class="row gx-5 row-cols-1 row-cols-md-2" style="color: #425862;">
84-
<div class="col mb-5 h-100">
85-
<h2 class="h5">★ Qualidade Superior</h2>
86-
<p class="mb-0">Os produtos da ABC são feitos com materiais premium, garantindo durabilidade e conforto excepcionais.</p>
87-
</div>
88-
<div class="col mb-5 h-100">
89-
<h2 class="h5">★ Variedade de Produtos</h2>
90-
<p class="mb-0">A ABC oferece uma ampla gama de estilos e designs, atendendo a todos os gostos e necessidades.</p>
91-
</div>
92-
<div class="col mb-5 mb-md-0 h-100">
93-
<h2 class="h5">★ Entrega Eficiente</h2>
94-
<p class="mb-0">Com a ABC, a entrega é rápida e confiável, trazendo comodidade e satisfação ao cliente.</p>
95-
</div>
96-
<div class="col h-100">
97-
<h2 class="h5">★ Atendimento ao Cliente</h2>
98-
<p class="mb-0">A equipe de atendimento da ABC é atenciosa e pronta para resolver quaisquer dúvidas ou problemas.</p>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
103-
</div>
104-
</section>
105-
106-
<!-- Testimonial -->
107-
<div class="py-5" style="background-color: #faf7f5;">
108-
<div class="container px-5 my-5">
109-
<div class="row gx-10 justify-content-center">
110-
<div class="col-lg-10 col-xl-7">
111-
<div class="text-center" style="color: #425862;">
112-
<div class="fs-4 mb-4 fst-italic">"Comprei lençóis da Fábrica ABC e estou encantado! Qualidade excepcional, conforto incomparável e entrega rápida. Superou todas as minhas expectativas!"</div>
113-
<div class="d-flex align-items-center justify-content-center">
114-
<div class="fw-bold">
115-
João
116-
<span class="fw-bold mx-1">/</span>
117-
Cliente, Tobias Barreto
118-
</div>
119-
</div>
120-
</div>
121-
</div>
122-
</div>
123-
</div>
124-
<div class="container px-5 my-5">
125-
<div class="row gx-10 justify-content-center">
126-
<div class="col-lg-10 col-xl-7">
127-
<div class="text-center" style="color: #425862;">
128-
<div class="fs-4 mb-4 fst-italic">"ABC tem qualidade, mas precisa melhorar no atendimento online. Entrega e produto excelentes, mas o suporte é lento!"</div>
129-
<div class="d-flex align-items-center justify-content-center">
130-
<div class="fw-bold">
131-
Maria
132-
<span class="fw-bold mx-1">/</span>
133-
Cliente, Riachão do Dantas
134-
</div>
135-
</div>
136-
</div>
137-
</div>
138-
</div>
139-
</div>
140-
</div>
46+
<!-- Container Template Views -->
47+
<main id="content-view" style="margin-top:56px"></main>
14148

14249
<!-- Bootstrap JS Bundle (optional) -->
14350
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
51+
52+
<!-- Script de Inicialização do SPA -->
53+
<script type="module" src="./index.js"></script>
14454
</body>
14555
</html>

‎js/routes.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
1+
import { HomeView } from "../views/home/home.js";
2+
import { ContatoView } from "../views/contato/contato.js";
3+
import { SobreView } from "../views/sobre/sobre.js";
4+
import { NotFoundView } from "../views/not-found/not-found.js";
5+
6+
//Recupera o elemento HTML que vai armazenar os templates das views
7+
const containerView = document.getElementById('content-view');
8+
9+
//Instancia as Views
10+
const homeView = new HomeView(containerView);
11+
const contatoView = new ContatoView(containerView);
12+
const sobreView = new SobreView(containerView);
13+
const notFoundView = new NotFoundView(containerView);
14+
115
//Define um objeto para relacionar as rotas (URL) as views
2-
const routes = {};
16+
const routes = {
17+
'/': homeView,
18+
'/home': homeView,
19+
'/contato': contatoView,
20+
'/sobre': sobreView,
21+
'/not-found': notFoundView,
22+
};
323

424
export { routes }

‎sobre.html‎

Lines changed: 0 additions & 96 deletions
This file was deleted.

0 commit comments

Comments
 (0)