> Dans ce chapitre, nous allons développé la partie front-end d'un chat web en HTML5 / CSS3.
>

### Pré-requis : 
-

Développer la partie front-end d'un chat web avec socket.io

Dans ce chapitre, nous allons développé la partie back-end d'un chat web

### Pré-requis : 
- Une maitrise du HTML/CSS
- Une

Développer la partie back-end d'un chat web avec socket.io

> Dans ce chapitre, nous allons développé la base de données d'un chat web avec la librairie better-sqlite3.
>

### Pré-requis :

Ajouter la base de données d'un chat web avec SQLite3

HTML/CSS

Javascript

> Dans ce chapitre, nous allons développé la partie front-end d'un chat web en HTML5 / CSS3.
>

### Pré-requis : 
- Une maitrise du HTML/CSS
- Une maitrise de JavaScript 
- Une maitrise de Node.JS

### Qu’est-ce qu'un chat web ?

Un chat web est une discussion en ligne, elle permet de discuter via le web/internet, elle peut réunir plusieurs personnes ou simplement une discussion entre deux personnes. Un chat web va se trouver sur un site qui sera développé en HTML/CSS et va souvent utilisé un socket qu'on verra par la suite.

### Créer notre chat web  

Bon, bon, on y va ? Créez votre dossier pour votre site avec un fichier `index.html` et un autre fichier `style.css` puis GO ! 

#### La partie HTML

Pour cette partie, on va allez dans notre dossier html qui est un peu vide.. Bon ok ! On va commencé à faire le corp de notre site dans la balise body : 

``` html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Box</title>
    <link rel="stylesheet" href="style.css" type="text/css"  media="screen">
</head>
<body>
</body>
</html>
```

On va venir créer une div container pour notre chat box ensuite on va créer trois div avec la classe header pour le titre, body pour les messages et footer pour envoyer nos messages avec notre pseudo !

``` html
    <div class="container">
        <div class="header">
        </div>
        <div class="body">
        </div>
        <div class="footer">
        </div>
    </div>
```

Ensuite, on va ajouter une balise H1 pour le titre de notre chat box dans la div header.

``` html
<div class="header">
   <h1>Chat Box<h1>
</div>
```

Dans notre balise body, on va ajouter une balise div pour le contenu de notre message avec un pseudo. La div de l'utilisateur aura une classe message et ceux des autres utilisateurs message user.

``` html
<div class="body" id="message_body"> 
	<div class="message">
				
				<p>Bonjour!</p>
		
				
        <a>Hecone</a>
    </div>
	<div class="message user">
				<p>Bonjour Hecone!</p> 
        <a>Zaros</a> 
    </div>
</div>
```

Et pour finir notre balise footer aura une balise div body avec une autre div input qui va contenir l'input pour envoyer un message, mettre notre pseudo et le button pour envoyer le message. 

``` html
        <div class="footer">
            <div class="body">
                <div class="input">
                    <input id="message" type="text" name="message" placeholder="Envoyer un message">
	 				<input id="pseudo" type="text" name="message" placeholder="Votre pseudo">
                    <button class="inputMessage">></button>
                </div>
            </div>
        </div>
```

Le code de la partie HTML se trouve sur [le github du projet](https://github.com/creators-area/WebChatSocket/).

Maintenant, on peut passer au CSS !

#### La partie CSS

On pourra aller dans notre fichier `style.css` pour donner une apparence à notre site. Pour toute la page et le body on va ajouter :

> Modifier les couleurs et la famille des fonts à votre façon.
>

``` css
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background-color: #191919;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

Pour le container de la chat box, on va faire un rectangle avec un dégradé arc-en-ciel et selon la taille de l'ecran il prendra toute la place.

```css
.container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    border-radius: 0px 0px 25px 25px;
    flex-direction: column;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
```

Pour le titre, on va juste le mettre en blanc avec un padding :

```css
.header h1 {
    color: white;
    padding: 15px;
}
```

Ensuite, on va mettre la partie de nos messages qui prendra lui aussi quasiment une partie du container, on va faire en sorte que le body du container prend toute la largeur avec un fond noir/gris, les messages seront des rectangles avec une couleur qui différe si cela est un message de l'utilisateur ou des autres utilisateurs.

```css
.body {
    background-color: #191919;
    scrollbar-width: none;  
    height: 100%;
     display: flex;
    flex-direction: column;
    color: white;
    padding: 20px 30px;
    overflow-x: hidden;
    overflow-y: auto;
}

.message {
    padding: 10px 10px 10px 10px;
    height: fit-content;
    width: 100%;
    color: white;
    font-size: 15px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
    background-color: #444444;
    margin-bottom: 5px;
    transition: 0.5s;
    white-space: normal;
    word-wrap: break-word;
}


.message p {
    white-space: normal;
}

.user {
    background-color: transparent;
    color: rgb(255, 255, 255);
    white-space: normal;
}

.user p {
    white-space: normal;
}

.message a {
    color: rgb(221, 221, 221);
    text-decoration: none;
    font-size: 10px;
    opacity: 90%;
    white-space: normal;
}

.user a {
    color: rgb(204, 204, 204);
    text-decoration: none;
    font-size: 10px;
    opacity: 90%;
    white-space: normal;
}
``` 

On finit presque avec le footer qui sera juste un rectangle avec les inputs séparés verticalement.

```css
.footer div{
    padding: 5px;
    display: flex;
    border-radius: 0px 0px 10px 10px;
    align-items: center;
    justify-content: center;
}

.footer .body {
    display: flex;
    flex-direction: row;
}

.footer .body .input {
    flex: 1;
    width: 90%;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 1%;
    box-shadow: 2px 2px 20px rgba(5, 5, 5, 0.4);
    transition: 0.5s;
}

.footer .body .input:hover { 
    margin-bottom: 1.5%;
    transition: 0.5s;
}

.footer .body .input input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    padding-left: 5px;
    font-size: 16px;
    transition: 0.5s;
    height: 30px;
    color: rgb(26, 26, 26);
    background: linear-gradient(43deg, #384cb3 0%, #a742a0 46%, #d6ac5c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer .body .input .inputMessage {
    width: 30px;
    height: 30px;
    background-color: white;
    background-position: center;
    background-size: contain;
    font-size: 18px;
    border: none;
    border-radius: 100%;
    background-size: 80%;
    background: linear-gradient(43deg, #384cb3 0%, #a742a0 46%, #d6ac5c 100%);
    outline: none;
    transition: 0.5s;
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.footer .body .input .inputScroll {
    margin-left: 1%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    border-color: #a742a0;
    border-radius: 100%;
    outline: none;
    transform: rotate(180); 
    transition: 0.5s;
    cursor: pointer;
    background-color: #a742a0;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    writing-mode: vertical-rl;
    transition: 0.5s;
}

.footer .body .input .inputScroll:hover {
    box-shadow: 2px 2px 20px rgba(19, 19, 19, 0.7);
    background-color: white;
    color: #a742a0;
    transition: 0.5s;
}

div button:hover {
    transition: 0.5s;
    box-shadow: 2px 2px 20px rgba(19, 19, 19, 0.7);
    border-radius: 10px;
}
```

Et pour finir on ajoute le **responsive** !

```css
@media screen and (min-width: 600px) {
    .container {
        border-radius: 20px 20px 25px 25px;
        width: 95vw;
        height: 95vh;
    }

    div input {
        position: static;
    }

    div button {
        position: static;
    }

    .footer .body .input {
        flex: 0.9;
    }
}

@media screen and (min-width: 700px) {
    .container {
        width: 450px;
        height: 90vh;
    }
}
```

Le code de la partie CSS se trouve sur [le github du projet](https://github.com/creators-area/WebChatSocket/).

Voici le résultat : 

![resultat](https://i.imgur.com/sdtXluf.png)

Pour le prochain chapitre, on va rendre fonctionnel notre chat box avec un socket !

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Développer un chat web en HTML/CSS et connexion socket.io