Skip to content

Commit 6df7fc0

Browse files
brianetaverasbrianetaveras
committed
initial commit
0 parents  commit 6df7fc0

File tree

5 files changed

+314
-0
lines changed

5 files changed

+314
-0
lines changed

‎index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Javascript Aplicado 2</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="card create-post">
13+
<form id="formulario">
14+
<div>
15+
<label for="title-input">Post Title</label>
16+
<input required title="Debes dar un título" placeholder="Titulo" id="title-input" type="text">
17+
</div>
18+
<div>
19+
<label for="post-content">Post Body</label>
20+
<textarea required title="Debes dar contenido" placeholder="Contenido" id="post-content" id="" cols="30" rows="10"></textarea>
21+
</div>
22+
<button id="publicar-twit-btn" class="btn">Post</button>
23+
</form>
24+
</div>
25+
<div id="post-container" class="post-container">
26+
27+
</div>
28+
</div>
29+
<script src="./index.js"></script>
30+
</body>
31+
</html>

‎index.js

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/*
2+
3+
Componentes HTML/Javascript
4+
5+
1 - Una parte de un elemento grande o pequeño
6+
2 - Pieza modular e individual
7+
3 - Usualmente consiste de HTML, CSS y JS
8+
4 - Reusable
9+
10+
*/
11+
const botonDePublicar = document.getElementById('publicar-twit-btn');
12+
const formulario = document.getElementById('formulario');
13+
// Declarar el event listener
14+
// botonDePublicar.addEventListener('click', publicarTwit);
15+
formulario.addEventListener('submit', publicarTwit);
16+
// Seleccionar contenedor de publicaciones
17+
const contenedorDePublicaciones = document.getElementById('post-container');
18+
19+
function publicarTwit(evento){
20+
evento.preventDefault()
21+
const titleInputValue = document.getElementById('title-input');
22+
const postContentValue = document.getElementById('post-content');
23+
const twit = {
24+
titulo: titleInputValue.value,
25+
contenido: postContentValue.value,
26+
}
27+
28+
titleInputValue.value = '';
29+
postContentValue.value = '';
30+
31+
32+
// CrearNuevoTwit(twit);
33+
// CrearNuevoTwit2(twit);
34+
35+
new Twit(contenedorDePublicaciones, twit);
36+
37+
}
38+
39+
40+
function CrearNuevoTwit({titulo, contenido}){
41+
// Crear el contenedor
42+
const contenedor = document.createElement('div');
43+
contenedor.classList.add('card', 'post');
44+
45+
// Crear el elemento de la imágen
46+
const imagen = document.createElement('img');
47+
imagen.classList.add('post-img');
48+
imagen.src = 'https://lh3.googleusercontent.com/proxy/5ct9e37RtBJXlTDkJ-d0eix218oShdLKHQ7ctMgNM6nyJY26KimCOqYvt1qChHYNyG4S9z1JPZEqA3XVlj52TDz-LZ_7fYehOvbhCL5aakwZ';
49+
imagen.alt = 'profile pic';
50+
51+
// crear el titulo
52+
const contenedorDeTitulo = document.createElement('div');
53+
contenedorDeTitulo.classList.add('post-title');
54+
contenedorDeTitulo.textContent = titulo;
55+
56+
// Creamos el contenido
57+
const contenedorDeContenido = document.createElement('div');
58+
contenedorDeContenido.classList.add('post-content');
59+
contenedorDeContenido.textContent = contenido;
60+
61+
contenedor.appendChild(imagen);
62+
contenedor.appendChild(contenedorDeTitulo);
63+
contenedor.appendChild(contenedorDeContenido);
64+
65+
return contenedor;
66+
}
67+
68+
// JSX: JavaScript XML
69+
// JSON: JavaScript Object Notation
70+
function CrearNuevoTwit2({titulo, contenido}){
71+
72+
const nuevoTwit = `
73+
<div class="card post">
74+
<img class="post-img" src="https://lh3.googleusercontent.com/proxy/5ct9e37RtBJXlTDkJ-d0eix218oShdLKHQ7ctMgNM6nyJY26KimCOqYvt1qChHYNyG4S9z1JPZEqA3XVlj52TDz-LZ_7fYehOvbhCL5aakwZ" alt="profile pic">
75+
<div class="post-title">${titulo}</div>
76+
<div class="post-content">${contenido}</div>
77+
</div>
78+
`;
79+
80+
contenedorDePublicaciones.innerHTML += nuevoTwit;
81+
}
82+
83+
class Twit {
84+
constructor(contenedor, {titulo, contenido}){
85+
this.titulo = titulo;
86+
this.contenido = contenido;
87+
this.contenedor = contenedor;
88+
89+
if(this.validarEntrada()){
90+
this.agregarAlContenedor();
91+
}
92+
}
93+
94+
generarElementos(){
95+
const nuevoTwit = `
96+
<div class="card post">
97+
<img class="post-img" src="https://lh3.googleusercontent.com/proxy/5ct9e37RtBJXlTDkJ-d0eix218oShdLKHQ7ctMgNM6nyJY26KimCOqYvt1qChHYNyG4S9z1JPZEqA3XVlj52TDz-LZ_7fYehOvbhCL5aakwZ" alt="profile pic">
98+
<div class="post-title">${this.titulo}</div>
99+
<div class="post-content">${this.contenido}</div>
100+
</div>
101+
`;
102+
103+
return nuevoTwit;
104+
}
105+
106+
validarEntrada(){
107+
if(!this.titulo){
108+
alert('Debes dar un título a tu twit!');
109+
return false;
110+
}
111+
112+
if(!this.contenido){
113+
alert('Debes dar contenido a tu twit!');
114+
return false;
115+
}
116+
return true;
117+
}
118+
119+
agregarAlContenedor(){
120+
this.contenedor.innerHTML += this.generarElementos();
121+
}
122+
123+
}
124+
125+
126+
{/* <div class="card post">
127+
<img class="post-img" src="https://lh3.googleusercontent.com/proxy/5ct9e37RtBJXlTDkJ-d0eix218oShdLKHQ7ctMgNM6nyJY26KimCOqYvt1qChHYNyG4S9z1JPZEqA3XVlj52TDz-LZ_7fYehOvbhCL5aakwZ" alt="profile pic">
128+
<div class="post-title">Este es el twitter faik</div>
129+
<div class="post-content">Hola, les escribo desde el twitter de titiri mundati</div>
130+
</div> */}

‎style.css

+72
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
body {
2+
background: #f1f1f1;
3+
margin: 0;
4+
padding: 0;
5+
font-family: sans-serif;
6+
}
7+
8+
.container {
9+
max-width: 800px;
10+
margin: 0 auto;
11+
}
12+
13+
.card {
14+
background: white;
15+
padding: 20px;
16+
border-radius: 15px;
17+
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
18+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
19+
margin: 10px 0;
20+
}
21+
22+
.create-post {
23+
24+
label {
25+
margin: 10px 0;
26+
display: block;
27+
}
28+
input, textarea {
29+
padding: 5px;
30+
box-sizing: border-box;
31+
}
32+
input {
33+
height: 50px;
34+
box-sizing: border-box;
35+
width: 100%;
36+
}
37+
textarea {
38+
width: 100%;
39+
padding: 5px;
40+
}
41+
42+
.btn {
43+
width: 100%;
44+
height: 50px;
45+
background: #fc8f48;
46+
border: none;
47+
color: white;
48+
font-weight: bold;
49+
border-radius: 5px;
50+
}
51+
}
52+
53+
.post {
54+
display: grid;
55+
grid-template-areas: "img title title"
56+
"img content content";
57+
grid-template-columns: 50px auto;
58+
gap: 20px;
59+
60+
.post-img {
61+
grid-area: img;
62+
width: 50px;
63+
height: 50px;
64+
-o-object-fit: cover;
65+
object-fit: cover;
66+
border-radius: 50%;
67+
}
68+
69+
.post-title {
70+
grid-area: title;
71+
text-align: left;
72+
font-weight: bold;
73+
}
74+
75+
.post-content {
76+
grid-area: content;
77+
}
78+
}
79+
80+

0 commit comments

Comments
 (0)