# Application Todo

## Objectif <a href="#objectif" id="objectif"></a>

Notre objectif final est de développer une application de gestion des tâches paramétrable, organisée autour de deux pages :

* Page **tâches** : présentant la liste des tâches et permettant leur édition (ajout, modification, suppression)
* Page **paramètres** : Permets de modifier les paramètres de l'application (format de l'heure et mode d'affichage des tâches) et d'accéder à des informations supplémentaires.

![](https://140209345-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M60O5kdEkdIt2ATmwdy%2F-M6sQkJYj4Az1nhQIMvF%2F-M6sVYr6hdu0N6M2SIDK%2FToDo-presentation-taches-param.gif?alt=media\&token=e4aaa3e6-79ae-4782-b496-dcd58ec08907)

## Nouveau projet Quasar

Pour commencer, nous allons créer un nouveau projet Quasar "todo" :

```bash
   yarn create quasar
   # ou
   npm init quasar
```

Faire les choix décrit dans ce chapitre

{% embed url="<https://divtec.gitbook.io/quasar/mise-en-place#faire-les-choix-suivants-dans-lassistant>" %}
Configuration d'un nouveau projet Quasar
{% endembed %}

Ouvrez votre projet "ToDo" dans WebStorm ou un autre éditeur de code.

Lancez votre projet pour et assurez-vous qu'il fonctionne bien en ouvrant la console du navigateur.

```bash
quasar dev
# ou
npx quasar dev
```

## ESLint

Pour ce nouveau projet, nous avons activé ESLint.

ESLint est un outil d'analyse de code très performant et populaire, et permet ainsi d'assurer la qualité de votre code en vous forçant à respecter les règles du standard JavaScript.

{% hint style="danger" %}
**Si vous ne respecter pas ces règles, votre code ne pourra pas être exécuté !**
{% endhint %}

La liste complète des règles à respecter : <https://standardjs.com/rules-fr.html>

### Ignorer une erreur ESLint

Vous pouvez utiliser les commentaires suivant pour indiquer à ESLint d'ignorer une portion de code.

```javascript
/*eslint-disable */

//Supprime tous les avertissements entre les deux commentaires eslint-xxx
            alert("Je fais ce que je veux !!!");

/*eslint-enable */
```

### Résumé des règles de base

**Utilisez 2 espaces** pour l'indentation.

```javascript
const hello = (name) => {
  console.log('hi', name)
}
```

**Plusieurs lignes vides ne sont pas autorisées.**

```javascript
// ✓ bien
let value = 'hello world'
console.log(value)
```

```javascript
// ✗ pas bien
let value = 'hello world'


console.log(value)
```

**Utilisez les apostrophes (') pour le texte** à part pour éviter un caractère d'échappement.

```javascript
console.log('hello there')
console.log("<div class='box'>")
```

**Pas de variables non-utilisées.**

```javascript
function myFunction () {
  let result = something()   // ✗ pas bien
}
```

**Ajoutez un espace après les mots clés.**

```javascript
if (condition) { ... }   // ✓ bien
if(condition) { ... }    // ✗ pas bien
```

**Ajoutez un espace avant les parenthèses de déclaration de fonction.**

```javascript
function name (arg) { ... }   // ✓ bien
function name(arg) { ... }    // ✗ pas bien
 
run(function () { ... })      // ✓ bien
run(function() { ... })       // ✗ pas bien
```

**Utilisez toujours** `===` au lieu de `==`.\
&#x20;Exception: `obj == null` est autorisé pour vérifier `null || undefined`.

```javascript
if (name === 'John')   // ✓ bien
if (name == 'John')    // ✗ pas bien

if (name !== 'John')   // ✓ bien
if (name != 'John')    // ✗ pas bien
```

**Les opérateurs infixes** doivent être espacés.

```javascript
// ✓ bien
var x = 2
var message = 'hello, ' + name + '!'

// ✗ pas bien
var x=2
var message = 'hello, '+name+'!'
```

**Les virgules doivent être suivies d'un espace**.

```javascript
// ✓ bien
var list = [1, 2, 3, 4]
const greet = (name, options) => { ... }

// ✗ pas bien
var list = [1,2,3,4]
const greet = (name,options) => { ... }
```

**Gardez les 'else'** sur la même ligne que leurs accolades.

```javascript
// ✓ bien
if (condition) {
  // ...
} else {
  // ...
}
```

```javascript
// ✗ pas bien
if (condition) {
  // ...
}
else {
  // ...
}
```

**Pour les conditions 'if',** utilisez des accolades. \
Excepté si écrit sur une ligne comptant une seule instruction.

```javascript
// ✓ bien
if (options.quiet !== true) console.log('done')
```

```javascript
// ✓ bien
if (options.quiet !== true) {
  console.log('done')
}
```

```javascript
// ✗ avoid
if (options.quiet !== true)
  console.log('done')
```

## Nettoyage du projet

Remplacer le code la page d'accueil : `pages/IndexPage.vue`

```markup
<template>
  <q-page padding>

  </q-page>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>
```
