Skip to content

Commit 1744c47

Browse files
pablo-schpablo-sch
committed
begin to implement CSS styles to the project
1 parent befa126 commit 1744c47

File tree

25 files changed

+700
-114
lines changed

25 files changed

+700
-114
lines changed

‎index.html‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,42 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
67
<title>Document</title>
7-
<link rel="stylesheet" href="src/styles/notifications.css">
8-
<link rel="stylesheet" href="src/styles/loader.css">
8+
9+
<link rel="icon" type="image/png" href="./src/assets/web_icon.png">
10+
11+
<link rel="stylesheet" href="src/styles/normalize.css">
12+
<link rel="stylesheet" href="src/styles/common.css">
13+
14+
<link rel="stylesheet" href="src/styles/navbar.css">
15+
<link rel="stylesheet" href="src/styles/components/notifications.css">
16+
17+
<link rel="stylesheet" href="src/styles/components/loader.css">
18+
<link rel="stylesheet" href="src/styles/components/loader-container.css">
19+
20+
<link rel="stylesheet" href="src/styles/display-posts.css">
921

1022
</head>
23+
1124
<body>
12-
13-
<div id="navbar"></div>
1425

15-
<h1>Posts</h1>
26+
<div class="navbar"></div>
27+
28+
<main>
29+
<h1>Posts</h1>
30+
31+
<div class="session"></div>
32+
33+
<div class="loader-container">
34+
<div class="loader hidden"></div>
35+
</div>
36+
37+
<div class="notifications"></div>
38+
39+
<div class="showPosts-container"></div>
40+
</main>
1641

17-
<div class="session"></div>
18-
<div class="notifications"></div>
19-
<div class="loader hidden"></div> <!-- by defaul "loader" is hidden -->
20-
<div class="posts-container"></div>
2142
<script type="module" src="./src/js/main.js"></script>
2243
</body>
2344
</html>

‎src/assets/web_icon.png‎

1.59 KB
Loading

‎src/js/components/navbar/navbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from './navbarController.js';
1010

1111
export function navbar() {
12-
const container = document.getElementById('navbar');
12+
const container = document.querySelector('.navbar');
1313
if (!container) return;
1414

1515
container.innerHTML = navbarView();

‎src/js/components/navbar/navbarView.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11

22
export function navbarView() {
33
return `
4-
<nav>
5-
<button id="index-btn">Inicio</button>
6-
<button id="create-post-btn">Crear Post</button>
7-
<button id="login-btn">Login</button>
8-
<button id="signup-btn">Sign Up</button>
9-
<button id="logout-btn">Logout</button>
10-
</nav>
4+
<a id="index-btn">Home</a>
5+
<div class="nav-right">
6+
<a id="create-post-btn">Create Post</a>
7+
<a id="login-btn">Login</a>
8+
<a id="signup-btn">Sign Up</a>
9+
<a id="logout-btn">Log Out</a>
10+
</div>
1111
`;
1212
}

‎src/js/modules/create-post/createPost.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function initCreatePost() {
1212
}
1313

1414
const createPostForm = document.querySelector('#createPostForm')
15-
const notifications = document.querySelector("#notifications");
15+
const notifications = document.querySelector(".notifications");
1616
const loader = document.querySelector(".loader")
1717

1818
const { showNotification } = notificationsController(notifications)

‎src/js/modules/login/login.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { loaderController } from "../../components/loader/loaderController.js";
66
export function initLogin() {
77

88
const loginForm = document.querySelector("#loginForm")
9-
const notifications = document.querySelector("#notifications");
9+
const notifications = document.querySelector(".notifications");
1010
const loader = document.querySelector(".loader")
1111

1212
const { showNotification } = notificationsController(notifications)

‎src/js/modules/post-detail/postDetail.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function initPostDetail() {
99
const searchParams = new URLSearchParams(window.location.search);
1010
const postId = searchParams.get("id");
1111

12-
const notifications = document.querySelector("#notifications")
12+
const notifications = document.querySelector(".notifications")
1313
const loader = document.querySelector(".loader")
1414

1515

@@ -18,7 +18,7 @@ export function initPostDetail() {
1818

1919
if (postId) {
2020

21-
const postContainer = document.querySelector(".post-container")
21+
const postContainer = document.querySelector(".postDetail-container")
2222

2323
postContainer.addEventListener('load-posts-started', () => {
2424
show();

‎src/js/modules/post-detail/postDetailView.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
export const buildpostDetailView = (post) => {
22
let postView = `
3-
<p>${post.user.name}</p>
4-
<p>${post.name}</p>
5-
<p>${post.photo}</p>
3+
<label> Post Owner: ${post.user.name}</label>
4+
<label>${post.name}</label>
5+
<label>${post.photo}</label>
6+
<label> Description:</label>
67
<p>${post.description}</p>
7-
<p>${post.price}</p>
8-
<p>${post.isPurchase}</p>
8+
<label>Price: $ ${post.price}</label>
9+
<label>${post.isPurchase}</label>
910
`;
1011

1112
return postView
1213
}
1314

1415
export const buildRemovepostButton = () => {
1516
const removeButton = document.createElement("button");
16-
removeButton.textContent = 'Borrar post';
17+
removeButton.textContent = 'Delete Post';
1718

1819
return removeButton;
1920
}

‎src/js/modules/show-posts/showPosts.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { loginController } from "../../modules/login/loginController.js";
99
export function initShowPosts() {
1010

1111
// Here I go to the DOM and select the nodes I need to manage in my code and I manage them in my controllers.
12-
const container = document.querySelector(".posts-container")
12+
const container = document.querySelector(".showPosts-container")
1313
const loader = document.querySelector(".loader")
1414
const notifications = document.querySelector(".notifications")
1515
const session = document.querySelector(".session")

‎src/js/modules/show-posts/showPostsView.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
export const buildPost = (post) => {
22
let postView = `
3+
4+
<div class='post'>
35
<p>${post.userId}</p>
46
<p>${post.name}</p>
57
<p>${post.description}</p>
68
<p>${post.price}</p>
79
<img src=${post.photo}>
810
<p>${post.sale_purchase}</p>
9-
`;
11+
</div>`;
1012

1113
return postView
1214
}

0 commit comments

Comments
 (0)