Cursos Empresas Blog Live Conf Eventos Precios

0:0015:38

Programando la lógica del chat

Curso de Aplicaciones en Tiempo Real con Socket.io

Clase 24 de 26

Clase 24 / 26

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--btn-color);
    background-color: var(--btn-bg);
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.secondary {
    --btn-color: #fff;
    --btn-bg: #7C4DFF;
    --btn-border-color: #7C4DFF;
    --btn-hover-color: #fff;
    --btn-hover-bg: #8356fd;
    --btn-hover-border-color: #8356fd;
    --btn-focus-shadow-rgb: 131,83,256;
    --btn-active-color: #fff;
    --btn-active-bg: #8356fd;
    --btn-active-border-color: #8356fd;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #8356fd;
    --btn-disabled-border-color: #8356fd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    display: inline-block;
    width: 100%;
}

#all-messages {
    padding: 50px 25px;
}

.message {
    display: flex;
    margin-bottom: 20px;
}

.message .image-container {
    width: 50px;
    align-items: flex-start;
}

.message .message-body {
    margin-left: 10px;
    width: calc(100% - 50px)
}

.message .message-body .user-info {
    font-weight: bold;
}

.message .message-body .user-info .time {
    color: #a19c9c;
    font-size: 13px;
}

.message .message-body p {
    margin-top: 5px;
    color: #6e6e6e;
    font-size: 14px;
}

.send-message {
    background: #3F51B5;
    padding: 10px;
    display: flex;
}

.send-message input {
    width: 100%;
    padding: 7px 5px;
}

.send-message button {
    margin-left: 10px;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--btn-color);
    background-color: var(--btn-bg);
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.secondary {
    --btn-color: #fff;
    --btn-bg: #7C4DFF;
    --btn-border-color: #7C4DFF;
    --btn-hover-color: #fff;
    --btn-hover-bg: #8356fd;
    --btn-hover-border-color: #8356fd;
    --btn-focus-shadow-rgb: 131,83,256;
    --btn-active-color: #fff;
    --btn-active-bg: #8356fd;
    --btn-active-border-color: #8356fd;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #8356fd;
    --btn-disabled-border-color: #8356fd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    display: inline-block;
    width: 100%;
}

#all-messages {
    padding: 50px 25px;
}

.message {
    display: flex;
    margin-bottom: 20px;
}

.message .image-container {
    width: 50px;
    align-items: flex-start;
}

.message .message-body {
    margin-left: 10px;
    width: calc(100% - 50px)
}

.message .message-body .user-info {
    font-weight: bold;
}

.message .message-body .user-info .time {
    color: #a19c9c;
    font-size: 13px;
}

.message .message-body p {
    margin-top: 5px;
    color: #6e6e6e;
    font-size: 14px;
}

.send-message {
    background: #3F51B5;
    padding: 10px;
    display: flex;
}

.send-message input {
    width: 100%;
    padding: 7px 5px;
}

.send-message button {
    margin-left: 10px;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
}

Comentarios (4)4 comentarios

Yeison David Sanabria Ascanio

Hace 4 años

Style.css

chat.css

Julio Bastidas

Hace 2 años

como se llama ese plugin de html en js?

Francisco Carranza

Hace 3 años

excelente curso

Santiago Reynoso Dunjo

Una opción similar a la extensión que usa el profe es: https://marketplace.visualstudio.com/items?itemName=ms-fast.fast-tagged-templates

Programando la lógica del chat

Progreso del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre