Description de mes projets:

Ces projets ont été réalisés avec les formations de Khan Academy, W3school et le CNAM. J'ai aussi... réalisé quelques bases de données sql dont vous trouverez quelques exemples sur le bas de cette page. Vous trouverez plus d'informations sur moi en cliquant ici.

Cette page html est ludique et simple. L'utilisateur... doit cliquer sur le chat afin que ce dernier puisse récupérer sa moustache. Dans ce projet j'ai utilisé les propriétés de DOM afin que l'utilisateur puisse déplacer la moustache jusqu'à ce qu'il parvienne à la placer au bon endroit. Ma fonction onCatClick () contient 4 éléménts: 2 propriétés d'un "DOM event" et 2 coordonnées X et Y. Les deux évenements DOM et Les 2 coordonnées X et Y vont permettre d'une part d'intégrer des éléments HTML comme variables dans ma fonction onClick() contenue dans Javascript et d'autre part de rendre le click de l'utilisateur interactif. L'"event listener" permet de rappeler ma fonction onCatClick () à chaque nouveau click de l'utilisateur.

Pour réaliser cette animation j'ai utilisé... HTML, CSS, DOM "animation" et javascript: Cet exemple de code montre que l'animation du chat est définie par une fonction. Pour indiquer toute modification dans la fonction au navigateur il faut utiliser "Window requestAnimationFrame". Le sens de la marche du chat est un exemple de fonctionnement de l'animation. Si je veux également minuter sa marche j'utilise la méthode "window.requestAnimationFrame" pour indiquer ce changement au navigateur. Le navigateur prendra en compte cette modification avant son actualisation. Cette méthode fait fonctionner l'animation en continu à chaque fois que la fonction (walkTheCat) est appellée.

Jquery est une "librairie" de méthodes JavaScript que ... j'ai utilisée dans cet exercice pour remplacer tous les mots "Caterpillars" par les mots "Butterflies". On utilise JQuery text() pour modifier un texte: Dans mon texte j'ai donc utilisé la méthode suivante "$("h1").text("Butterflies");" pour remplacer "caterpillars" par "butterflies". Une fois le texte changé j'ai aussi changé la couleur du titre et l'image source pour remplacer le "caterpillar" par un "butterfly. Cependant on utilise la méthode de JQuery .html() pour créer du contenu. Dans mon texte j'ai donc modifié la couleur du titre et remplacé l'image source en ajoutant des balises. $("p").html("Butterflies can have vivid colors"); $("img").attr("src",'https://www.kasandbox.org/ programming-images/animals/butterfly_monarch.png') $("h1").css("color","green") jquery m'a permis d'effectuer des changements en un temps limité. Bien qu'il s'agissait d'un texte court, cet exercice a montré tout l'intêret que JQuery vaut à être utilisé pour modifier de plus grands textes et ses contenus html.

Pour développer ce quizz j'ai d'abord créé un formulaire puis ... j'ai utilisé un "event lstener" de DOM. Le code suivant montre que l"event listener" va générer un évenement à chaque fois que l'utilisateur cliquera sur le bouton "answer". Dans ce jeu l'évenement généré dépendra du choix séléctionné par l'utilisateur. $("#quiz-form").on("submit",); Un navigateur par défaut envoie les formulaires sur un serveur afin de sauvegarder les données. "eventpreventDefault; Ce code est utilisé pour que javascript intercepte les données recueillies et permette à l'utilisateur de rester sur la page. Le variable $answer store la collection Jquery de toutes les réponses que l'utilisateur peut choisir. var $answer = $("#trivia-answer"); Plus précisément le fonctionnement de la méthode Jquery "val" est structuré sur le choix sélectionné par l'utilisateur: var answer = $answer.val(); J'ai ajouté dans mon code des conditions afin que l'utilisateur puisse savoir si sa réponse est correcte: if (answer ==="resig"){ $("#result").text("You did it!") } else{ $("#result").text("Try again!"); }

J'ai construit ce jeu sur sur la base d'un questionnaire html. Celui-ci est ... ludique et pédagogique. Il n'a que 3 catégories contenant un nombre de mots restreint mais les possibilités sont infinies, avec Html, Css et Javascript. Javascript et Jquery m'ont permis de rendre ce jeu interactif: $("#game").hover( function() { $("#img").show(1000); }, function() { $("#img").hide(1000); } );

Pendant ma formation j'ai réalisé quelques bases de données SQL. Vous pourrez voir... quelques exemples en cliquant sur le lien dans la colonne de droite. sql_1: Dans cet exemple j'ai crée une base de données pour un magasin fictif et inséré des valeurs avec "CREATE TABLE", "INSERT" and "VALUES"; J'ai aussi utilisé "SELECT", "FROM", "WHERE" et "ORDER BY" pour lancer des requêtes et selectionner par commande ou par client par exemple. sql_2: Cette base de données contient un ensemble de données concernant une liste d'étudiants et leurs moyenne. J'ai ajouté aux requêtes habituelles des conditions en utilisant "CASE" puis "WHEN", "THEN", "ELSE". sql_3: Le schéma de cette base de données relationnelle contient une liste de client(e)s avec leurs IDs, noms et emails et une deuxième liste avec les IDs des commandes et des client(e)s, l'objet commandé et son prix. Dans cet exercice j'ai lancé une requête pour avoir la liste de chaque client(e) avec son nom associé à son email et à l'objet commandé et associé son prix. En plus des requêtes normales j'ai donc utilisé LEFT OUTER JOIN pour joindre la liste des clients avec la liste de leurs commandes, incluant aussi les client(e)s n'ayant pas passé de commandes. J'ai lancé ensuite une autre requête et j'ai ajouté ORDER BY pour placer chaque client(e) dans le tableau selon le montant dépensé: Dans ce cas ci, ORDER BY total_money_spent desc, le desc indique un ordre descendant. sql_4: Dans cet exercice j'ai modifié une rangée déjà créée en utilisant ALTER TABLE, SET, ADD, FROM et UPDATE ou DELETE.

Ce blog est dédié aux... adultes débutants C'est une page pédagogique avec des jeux et des exercices réalisée avec html, css, JS et Flask. En cours de construction.