Je dois créer une page responsive dans le cadre du 2ème projet de ma formation. Seulement, ça fait 5 jours maintenant que je n'arrive pas à trouver la réponse par moi-même sur la réactivité du Header vidmate.

Qui saura me dire pourquoi toute la carte est collée en bas ? Je voudrais des caractéristiques (énoncé de ma liste) qui commencerait à la même hauteur, après le titre. Logique et plus joli aussi https://testmyspeed.onl/.

Merci Olivier. Je vais me pencher sur ça. Bon week-end !

Bonjour,

Tout d'abord, un article ancien mais toujours pertinent : 24 WAYS, Colour Accessibility

Pour l'accessibilité des couleurs, et donc le contraste, Adobe propose dernièrement sur leur application mise à jour un onglet où l'on peut jouer avec les contrastes entre texte et background : Adobe Color. Cherchez l'onglet "Outils d’accessibilité".

Pour tester son site une fois en ligne il y a aussi des outils de ce genre : WAVE.

Bien sûr, il faut voir ces évaluations avant tout comme des indications et juger de la pertinence de ce type de test avec mesure.

Olivier C a écrit :
Bonjour. Il faut faire passer le contenu de la navigation au dessus de tout le reste. Je ne suis pas sûr, mais il me semble que l'élément à faire passer au-dessus est .nav-links et ce dernier est déjà en position absolute, il suffit donc de lui ajouter un z-index pour "monter" l'élément, par exemple :

.nav-links {
    z-index: 1000; /* C'est une grosse valeur, mais il y a bien souvent tout un tas d'élément dans les pages susceptible de posséder un z-index élevé */
}

Bonjour, je viens d'essayer et tout marche nickel, merci beaucoup !!

Bonjour. Il faut faire passer le contenu de la navigation au dessus de tout le reste. Je ne suis pas sûr, mais il me semble que l'élément à faire passer au-dessus est .nav-links et ce dernier est déjà en position absolute, il suffit donc de lui ajouter un z-index pour "monter" l'élément, par exemple :

.nav-links {
    z-index: 1000; /* C'est une grosse valeur, mais il y a bien souvent tout un tas d'éléments dans les pages susceptibles de posséder un z-index élevé */
}

Modifié par Olivier C (05 Aug 2022 - 19:29)

Oups, pardon j'ai du mal à joindre l'image, voilà le lien de l'image qui se trouve sur mon drive : https://drive.google.com/file/d/10a3wJ7aeUdEK8pqR2rZISD3Ngh4z65dT/view?usp=drivesdk

Voici ce que arrive avec le <h1>.

Bonjour,
je suis débutant en css et je souhaite créer mon premier site web, grâce à cette vidéo : https://youtu.be/HQopEEurQYE j'ai codé et adapté le Header pour le site. Je souhaite ensuite rajouter le contenu à savoir un <h1> etc.
Lorsque que le site est en version mobile comme il est codé dans la vidéo, le menu horizontal qui est normalement en haut de page devient le "menu burger" et le menu s'affiche donc en apparaissant de la gauche. Hors dans cette configuration si je rajoute un <h1> après avoirs mis </Header> les contenus du <h1> apparaît par dessus le menu qui apparaît de gauche (voir Image jointe) alors que je souhaiterais qu'il reste dans le fond en flou.
Comment pourrais je faire celà, merci beaucoup d'avance.
Tristan K
Modifié par TristanK (05 Aug 2022 - 16:49)

Bonjour,

Je cherche un site (ou plusieurs ^^) exposant les bonnes pratiques en matière de webdesign et d’accessibilité, ou delà de la simple théorie des couleurs (le rouge=agitation, bleu=tranquilité, sérieux, blablabla). Mon frère cherche à maintenir que les dégradés dans les pages internet ou les container ferait oldschool, ou une faute de goût.

Je reste dubitatif, et cherche aussi à produire un site différent des autres.

Je n’ai pas trouvé de conseils à ce niveau-là.

Merci de votre aide et orientation.

Merci beaucoup je dois avouer que je ne comprends pas toujours avec les before et after mais merci

Bonjour,

Pour commencer, tu as une erreur de syntaxe sur ta structure html : une balise li doit obligatoirement être un enfant direct d'une balise ul ou ol. Tes balises a devraient donc être à l'intérieur des balises li.

Une astuce possible pour faire une transition avec un fond dégradé est d'appliquer une transition via opacity sur un pseudo-élément. Exemple : https://jsfiddle.net/7pscowrg/
Source : https://keithjgrant.com/posts/2017/07/transitioning-gradients/

Bonjour je suis actuellement entrain de crée un site internet et dans le footer je voulais faire des transition notamment avec le lien qui emmène sur intagrame. Je me suis rendu compte qu'il était impossible de faire une transition avec un background image. J'aimerais donc savoir si quelqu'un a un technique pour quand même avoir une transition

<footer>
			<ul>
				<a href="https://www.instagram.com/ilynx_/?hl=fr"><li id="insta"><img src="images/instagram.png" />Instagram ilynx_</li></a>
				<a href="https://www.facebook.com/ilynx_-106408177500434/?ref=page_internal"><li id="facebook"><img src="images/facebook.png"/>Facebook ilynx_</li></a>
				<a href="mailto:email.contact@gmail.com"><li id="email"><img src="images/email.png"/>email.contact@gmail.com</li></a>
				<li id="copy"><img src="images/copy.png" />Olivier Lefez</li>
			</ul>
</footer>

footer{
	background: linear-gradient(white ,#808080);
	margin-bottom: 0px;
}
footer ul{
	min-width: 265px;
	display: inline-table;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-bottom: 0px;
	margin-left: 5%;
}
footer img{
	vertical-align: middle;
	margin-right: 5px;
}
footer li{
	padding: 5px;
	border-radius: 25px;
	transition: all 1s;
	margin-bottom: 5px;
}
footer a{
	color: #111111;
	text-decoration: none;
}
footer #email img{
	margin-right: 10px;
}
footer #copy img{
	margin-right: 9px;
}
footer #insta img{
	margin-right: 7px;
}
#facebook:hover{
	background-color: #c4a667;
	filter: invert(100%);
}

Dans l'idee le but est de faire la meme chose qu'avec le lien facebook mais avec

background-image: radial-gradient(circle at 15% 207%, #fdf497 0%, #fdf497 5%,#fd5949 45%, #d6249f 60%,#285aeb 95%);

Hello,

Voilà une question qui ne date pas d'hier

L'élément HTML <table> s'affiche selon un algorithme qui, par défaut, donne la priorité aux contenus ou à son environnement. Ainsi, même si tu essayes de fixer des largeurs au tableau ou aux cellules, ta valeur ne sera pas prioritaire en cas de conflit.

Depuis CSS1 (et reconnu depuis feu IE4), il existe une propriété CSS pour choisir ton algorithme d'affichage. Il s'agit de table-layout.

Si tu souhaites imposer tes dimensions (à priori 80vw si j'ai bien compris) au tableau et ne pas être tributaire de tes contenus ou de la fenêtre, il suffit de passer la valeur auto à "table-layout: fixed"

Plus d'infos : https://developer.mozilla.org/fr/docs/Web/CSS/table-layout

Bonne journée
Modifié par Raphael (03 Aug 2022 - 16:59)

Merci Olivier
Comme quoi on se pose tous les mêmes questions quand on aborde un nouveau sujet...

Ah oui mais par contre dans le cadre d'une simple boucle for la variable ne sera pas indépendante justement... For, forEach et for...of ont chacune leur subtilité.

Regarde la réponse de Niuxe à ma question ici par exemple : Instruction for...of versus méthode forEach
Modifié par Olivier C (02 Aug 2022 - 20:09)

Je comprends que chaque itération de la boucle crée son propre environnement. Mais si écrit

for(const i = 0: i < x; i++)…

Ça ne semble pas fonctionner parce que on ne pas faire i++ si i est déclaré par const.
Un peu subtil pour mon cerveau d’octogénaire

Bonjour,

const fonctionne puisque les constantes ne sont justement pas modifiées/réaffectées en permanence : les constantes sont définies de manière indépendante à chaque tour de boucle.

Après quelques essais (et quelques bugs bien entendu) je suis arrivé à une solution

WORKS.forEach(work, i) => WORKS[i] = new Work(work);

et

for(const [workID, work] of Object.entries(WORKS)) WORKS[workID] = new Work(work);

Une petite question: j'ai trouvé cette dernière formulation dans cette page
Je ne vois pas pourquoi const fonctionne dans cette boucle, alors que c'est en permanence modifié.

Bonjour,

j'ai un peu modifié mon codepen en m'inspirant de celui de gcyrillus.

A priori les objectifs semblent atteints, juste des trucs que je ne comprends pas.

Si je remplace <span> par <aside> cela ne marche plus.

Je suis obligé de régler le positionnement vertical par les marges.
Je pensais que align_items ou align-self étaient faits pour cela.

Salut,

les tableaux sont pas vraiment faire pour dépasser ils sont archi rigide. Pour s'en défaire il faut se passer des display table-cell etc donc, selon moi, autant le faire en grid si t'as la main sur le DOM.

Bonjour à tous
suite de la suite du passage à ES6
Mes questions précédentes s'étant révélées fructueuse, je me permet de vous poser une autre question dans le même domaine.

J'ai actuellement un certain nombre de constructions de ce genre

var = WORKS[....]; //variable globale
...
for(let i= 0; i < WORKS.length; i++) WORKS[i] = new Work(WORKS[i]);

C'est à dire : dans le tableau WORKS qui contient des objets récupérés par AJAX, remplacer chaque item par un objet de la classe Work bâti sur le contenu de l'item.

Il me semble qu'on doit pouvoir exprimer ça sous la forme

WORKS.forEach(makeWorkObject);

mais je ne vois pas très bien à la lecture de la documentation comment écrire la fonction makeWorkObject

Même question si WORKS est un objet

var WORKS = {work1:data1, work2:data2,...}
...
for(let workID in WORKS) WORKS[workID] = new Work(WORKS[workID]);

mais là ça ne va pas le faire si j'ai bien compris la doc forEach
Modifié par PapyJP (02 Aug 2022 - 10:34)

Voici une des lignes d'une page qui représente le programme des œuvres qui seront travaillées dans le prochain stage de chant choral


Un clic sur l'image ouvre la page Wikipédia, un clic sur une chacune des icônes ouvre une représentation différente de l’œuvre, de gauche à droite:
- la partition en pdf
- une page html contenant le texte en anglais et sa traduction en français
- le petit rond supérieur ouvre une page HTML qui permet de faire jouer la pièce en faisant défiler la partition à l'écran
- le petit rond inférieur télécharge cette page zippée sur l'ordinateur de l'utilisateur

Chacun de ces éléments provient d'informations extraites de la base de données.
Cette ligne correspond à une structure d'objets JavaScript imbriqués:
ProgItem représente la ligne qui contient
- une propriété author qui vaut un objet Author
- une propriété work qui vaut un objet Work qui contient lui même
* une propriété title
* une propriété workfiles qui vaut un tableau d'objet WorkFile représentant chacun des fichiers

Merci pour cette clarification
Effectivement le titre du sujet n’était pas approprié, pour moi le mot "Construction" impliquait une classe avec un constructor

Mon contexte c’est de récupérer par AJAX des objets provenant d’une base de données et de les doter de méthodes appropriées pour finalement générer des éléments du DOM et les doter de possibilités de réaction à différents types d’événements, surtout des clics sur l’un ou l’autre des éléments du DOM issus de ces objets.
Par exemple l’objet Author décrit ci dessus permet génère une <figure> contenant l’image et une <figcaption> qui regroupe le nom de l’auteur et ses dates. Quand on clique sur l’image ça ouvre la page Wikipedia concernant l’auteur.
Modifié par PapyJP (02 Aug 2022 - 09:42)

L'étape d'après :

function pericolorlister( $liste, $path, $rouge, $vert, $bleu )
{
$files = $bornes = $rouges = $verts = $bleus = array() ; $delta = 25 ; 

$colors = array( "rouge", "vert", "bleu" ) ; 
foreach( $colors as $color ) $bornes[$color] = array( $$color-$delta, $$color+$delta ) ;

foreach( $liste as $file )
{
$image = ImageCreateFromJpeg( "$path/$file" ) ;
$width = imagesx( $image ) ;
$height = imagesy( $image ) ;
 
for( $x=0; $x<$width; $x++ ) for( $y=0; $y<$height; $y++ )
{
$rgb = ImageColorAt( $image, $x, $y ) ;

$rouges[] = ( $rgb >> 16 ) & 0xFF ;
$verts[] = ( $rgb >> 8 ) & 0xFF ;
$bleus[] = $rgb & 0xFF ;
}

$nombre = $width * $height ;
$rouge = round( array_sum( $rouges ) / $nombre ) ;
$vert = round(  array_sum( $verts ) / $nombre ) ;
$bleu = round(  array_sum( $bleus ) / $nombre ) ;

if( $rouge > $bornes["rouge"][0] && $rouge < $bornes["rouge"][1]
&& $vert > $bornes["vert"][0] && $vert < $bornes["vert"][1]
&& $bleu > $bornes["bleu"][0] && $bleu < $bornes["bleu"][1]
) 
$files[] = tag( $file, "li" ) ;
}

return tag( "liste des images proches de la couleur indiquée", "h3" ).tag( $files, "ol" ) ;
}

Et la fonction tag :

function tag()
{
$arguments = func_get_args() ;
$curseur = trim( is_array( $arguments[0] ) ? join( NL, $arguments[0] ) : $arguments[0] ) ;
$intercalaire = pallsdenombrer( $curseur ) || strlen( $curseur ) > 200 ? NL : VIDE ;

foreach( $arguments as $no => $argument ) if( $no && $argument )
{
$commentaire = VIDE ;
$attributs = explode( SPACE, $argument ) ; 
if( ! defined( "??" ) ) define( "??", TRUE ) ; 

foreach( $attributs as $no => $attribut ) 
if( $no && $attribut ) { $commentaire = ?? ? commenter( $attribut ) : VIDE ; break ; }

$curseur = LT.$argument.GT.$intercalaire.$curseur.$intercalaire.LT.SLASH.$attributs[0].GT.$commentaire ;
}

return $curseur ;
}

Lister les jpg proches d'une couleur donnée ( $rouge, $vert, $bleu ) :

function pericolorlister( $liste, $rouge, $vert, $bleu )
{
$files = $bornes = array() ; 

$colors = array( "rouge", "vert", "bleu" ) ; 
foreach( $colors as $color ) $bornes[$color] = array( $$color * .9, $$color * 1.1 ) ;

foreach( $liste as $file )
{
$image = ImageCreateFromJpeg( "Paints/$file" ) ;
$width = imagesx( $image ) ;
$height = imagesy( $image ) ;
 
for( $x=0; $x<$width; $x++ ) for( $y=0; $y<$height; $y++ )
{
$rgb = ImageColorAt( $image, $x, $y ) ;

$rouges[] = ( $rgb >> 16 ) & 0xFF ;
$verts[] = ( $rgb >> 8 ) & 0xFF ;
$bleus[] = $rgb & 0xFF ;
}

$nombre = $width * $height ;
$rouge = round( array_sum( $rouges ) / $nombre ) ;
$vert = round(  array_sum( $verts ) / $nombre ) ;
$bleu = round(  array_sum( $bleus ) / $nombre ) ;

if( $rouge > $bornes["rouge"][0] && $rouge < $bornes["rouge"][1]
&& $vert > $bornes["vert"][0] && $vert < $bornes["vert"][1]
&& $bleu > $bornes["bleu"][0] && $bleu < $bornes["bleu"][1]
) 
$files[] = $file ;
}

return implode( SPACE, $files ) ; // exploitable par un fetch JS ;
}

Qu'en pensez-vous ?

Un chouia plus élaboré; sous forme de fonction :

function dominanteextraire( $path )
{
$image = ImageCreateFromJpeg( $path ) ;
$rouges = $verts = $bleus = array() ; 

$width = imagesx( $image ) ;
$height = imagesy( $image ) ;
 
for( $x=0; $x<$width; $x++ ) for( $y=0; $y<$height; $y++ )
{
$rgb = ImageColorAt( $image, $x, $y ) ;

$rouges[] = ( $rgb >> 16 ) & 0xFF ;
$verts[] = ( $rgb >> 8 ) & 0xFF ;
$bleus[] = $rgb & 0xFF ;
}

$nombre = $width * $height ;

$rouge = round( array_sum( $rouges ) / $nombre ) ;
$vert = round(  array_sum( $verts ) / $nombre ) ;
$bleu = round(  array_sum( $bleus ) / $nombre ) ;

return "rgb( $rouge, $vert, $bleu )" ; 
}

A vos tests !!!

Et bonne nuit...

Je ne résiste pas plus longtemps à la satisfaction narcissique de vous soumettre le fruit de mes cogitations vespérales :

ini_set( "display_errors" , TRUE ) ; error_reporting( E_ALL ) ;

$image = ImageCreateFromJpeg( "chauffe-eau.jpg" ) ;
$rouges = $verts = $bleus = array() ; 

$width = imagesx( $image ) ;
$height = imagesy( $image ) ;
 
for( $x=0; $x<$width; $x++ ) for( $y=0; $y<$height; $y++ )
{
$rgb = ImageColorAt( $image, $x, $y ) ;

$rouges[] = ( $rgb >> 16 ) & 0xFF ;
$verts[] = ( $rgb >> 8 ) & 0xFF ;
$bleus[] = $rgb & 0xFF ;
}

$nombre = $width * $height ;

$rouge = round( array_sum( $rouges ) / $nombre ) ;
$vert = round(  array_sum( $verts ) / $nombre ) ;
$bleu = round(  array_sum( $bleus ) / $nombre ) ;

$couleur = "rgb( $rouge, $vert, $bleu )" ; 

echo "<hr style=\"width:1cm; height:1cm; background:$couleur;\" />" ;  

Des réactions ?

Bonsoir gcyrillus,

Bien reçu.

Je m'y mets demain soir.

Voilà le genre de script que je recherche :

$source_file = "test_image.jpg";
//histogram options
$maxheight = 300;
$barwidth = 2;
$im = ImageCreateFromJpeg($source_file);
$imgw = imagesx($im);
$imgh = imagesy($im);
//n = total number or pixels
$n = $imgw*$imgh;
$histo = array();
for ($i=0; $i<$imgw; $i++)
{
for ($j=0; $j<$imgh; $j++)
{
//get the rgb value for current pixel
$rgb = ImageColorAt($im, $i, $j);
//extract each value for r, g, b
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
//get the Value from the RGB value
$V = round(($r + $g + $b) / 3);
//add the point to the histogram
$histo[$V] += $V / $n;
}
}
//find the maximum in the histogram in order to display a normated graph
$max = 0;
for ($i=0; $i<255; $i++)
{
if ($histo[$i] > $max)
{
$max = $histo[$i];
}
}

Bonsoir, Jencal, et merci de ta fidélité.

Les images sont dans un répertoire, et les descriptions, dans une base de données.

L'idéé, c'est de ne rien avoir à ajouter à la base de données. De trouver un manière que PHP ou JS détecte automatiquement la couleur dominante.

boteha_2 a écrit :
Encore merci de ton suivi.

Cependant, sur ton codepen, l'alignement vertical des flèches n'est pas parfait.

Quel inconvénient y a-t-il à laisser &lt;aside&gt; dans p avec margin-left: auto ?
Là on est sûr d'un alignement vertical parfait sut la dernière ligne, non ?

Par ailleurs, si plusieurs lignes, il faudrait que le bouton soit aligné vertical en haut.

#footer > button {margin: auto 0.6em}

Il suffit de remplacer auto par 0, non ?

Comme tu as compris comment faire l'alignement à partir des marges, c'est comme tu veut , pas comme je l'aurai compris.
Fait comme tu l'entends, ce ne sont que des règles de styles ... et je n'ai pas la réputation d'avoir la moindre fibre de designer

Cdt

Bonsoir,

Non, le spread operator ne doit pas être utilisé dans le constructeur de la class, il donne juste une copie de l'objet 'data' (dans ton exemple) SANS passer par la class.

La class n'est qu'un modele. Sa finalité est de créer des instances et ce sont les instances qu'on utilise (ce qu'on affiche à l'écran c'est l'instance, ce qu'on enregistre dans la base de donnée c'est l'instance...).

Dans mon exemple, on passe de l'objet 'data' directement à un autre objet, SANS passer par une class.

Donc ca ne sert pas à remplacer la ligne du constructeur (désolé, s'il y a eu confusion).


NB : le titre c'était "Construction d'un objet à partir d'un objet"
Modifié par alain_47 (01 Aug 2022 - 20:11)

Je ne comprends pas comment on peut utiliser le spread dans un construct.
this = {...data}; ne fonctionne bien entendu pas plus que this = data;

Intéressant, je vais essayer les deux approches et voir ce que ça donne.
Modifié par PapyJP (01 Aug 2022 - 19:01)

Bonsoir,

Si tu veux juste copier l'objet data dans un autre objet, tu peux le faire directement par le 'Spread' :

data = {
	"authorID": "Byrd",
	"firstName": "William",
	"lastName": "Byrd",
	"birth": "1539",
	"death": "1623",
	"url": "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)",
	"image": "/images/auteurs/Byrd.jpg"
}


class Author 
{
  constructor(data) { 
      for(let property in data) this[property] = data[property];
  } 
}

let author1 = new Author(data);
console.log(author1);
/* 
Object { authorID: "Byrd", firstName: "William", lastName: "Byrd", birth: "1539", death: "1623", url: "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)", image: "/images/auteurs/Byrd.jpg" }
*/


let author2 = {...data};
console.log(author2);
/*
Object { authorID: "Byrd", firstName: "William", lastName: "Byrd", birth: "1539", death: "1623", url: "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)", image: "/images/auteurs/Byrd.jpg" }
*/

Bingo! C’est exactement ce que je cherchais !

Encore merci de ton suivi.

Cependant, sur ton codepen, l'alignement vertical des flèches n'est pas parfait.

Quel inconvénient y a-t-il à laisser <aside> dans p avec margin-left: auto ?
Là on est sûr d'un alignement vertical parfait sut la dernière ligne, non ?

Par ailleurs, si plusieurs lignes, il faudrait que le bouton soit aligné vertical en haut.

#footer > button {margin: auto 0.6em}

Il suffit de remplacer auto par 0, non ?
Modifié par boteha_2 (01 Aug 2022 - 18:55)

\ô/
tu peux faire effectivement plus concis :

class Author {
  constructor(data) {
    //for(let property in data) this[property] = data[property];
    Object.assign(this, data);
  }
}

Hello,

if that is no spam to come , did you read inviul.com/parse-xml-file-selenium/ yet ?

You better go on SO forums for such questions, you landed here on a french forum .

Have fun
Modifié par gcyrillus (01 Aug 2022 - 17:18)

So this may be an odd request, but I am at the end of my wits and looking for any help I can get.

My job is currently trying to teach me how to do 'test automation' of the front-end of our website in Selenium using XML only. I am familiar with XML, but I am new to test automation, and everything I try to look for about test automation in Selenium uses Java or something else other than XML. I learn best when I have several different reference points to look to when I get stuck, so only relying on one self-taught instructor is leaving me in the dust.

Does anyone have a site or a link to a document that goes over XML test automation that I can use?

boteha_2 a écrit :
Encore merci de ton suivi.

Par contre :
Sauf erreur si tu les sors du p ils ne sont plus alignés sur la dernière ligne, c'est ce que je vois sur la nouvelle version de ton codepen.
L'ajout d'un span permet quand même de simplifier les CSS en ciblant ce span au lieu des nth-last-child.

.

Il faut simplement lui assigné des marges différentes que celles du boutons.
en fait tu as là , un flex de trois colonnes , puis un enfant flex qui passe sur plusieurs ligne et un enfant simple flex pour garder ses 2 éléments cote à cote. align-self ou margin permettent ensuite d'aligner verticalement le premier et le dernier enfant flex

Merci de ta réponse
Sauf que ce n'est pas ce que je cherche : ce n'est ni let ni const (ou var) mais this
l'objet data est obtenu par AJAX, data = JSON.parse(ajaxData) a l'aspect suivant

data = {
	"authorID": "Byrd",
	"firstName": "William",
	"lastName": "Byrd",
	"birth": "1539",
	"death": "1623",
	"url": "https://fr.wikipedia.org/wiki/William_Byrd_(compositeur)",
	"image": "/images/auteurs/Byrd.jpg"
}

si je fais new Author(data) la première chose à faire est de mettre ces informations dans le nouvel objet
Pour l'instant je fais une boucle d'initialisation for... in

class Author {
    constructor(data) {
       for(let property in data) this[property] = data[property;
      ........
    }

Je cherche s'il existe maintenant une syntaxe plus "à la mode"
Ce n'est pas très important, cette formulation fonctionne très bien depuis des années, c'est juste pour savoir.
Modifié par PapyJP (01 Aug 2022 - 16:18)

utilisé une base de donnée, et une table intermediaire qui lie les tableaux à des couleurs dominante choisir pour ton clients.

Pour déconstruire, tu peux aussi utilisé les spreads typescript (spread = ... => trois petits points)
cela fonctionne pour les objets bien sur
exemple :

let origArrayOne = [ 1, 2, 3];              //1,2,3
 
let copyArray = [...origArrayOne];            //1,2,3

Modifié par JENCAL (01 Aug 2022 - 15:38)

Bonjour à tous
suite de mon passage à ES6
Actuellement j'ai souvent des initialisations d'objet de ce type :

class Author {
    constructor(data) { //data est un objet reçu par AJAX
        for(let property in data) this[property] = data[property];
        ...
    }

c'est à dire que je commence par initialiser les propriétés de l'objet Author à partir des propriétés de même nom de l'objet data
Je me demande si le mécanisme de déconstruction ne pourrait pas permettre d'effectuer cette initialisation plus simplement.
Une idée ?
Modifié par PapyJP (02 Aug 2022 - 09:43)

Bonjour !

Mon commanditaire, artiste-peintre, https://www.jerome-turpin-peintre.net souhaiterait que l'internaute puisse sélectionner ses œuvres en fonction de la couleur dominante. Une idée ?

Encore merci de ton suivi.

Par contre :

boteha_2 a écrit :
Les 2 V, c'est simple, il faut les pousser vers la droite en étant sur la dernière ligne (si plusieurs lignes), c'est ce que tu fais.

Sauf erreur si tu les sors du p ils ne sont plus alignés sur la dernière ligne, c'est ce que je vois sur la nouvelle version de ton codepen.
L'ajout d'un span permet quand même de simplifier les CSS en ciblant ce span au lieu des nth-last-child.

Je m'y mets ce soir.

Par souci de pratique, je fais le jeu de démineur en HTML/CSS/JS, où le champ de mines lui-même est une table. J'ai défini le CSS de telle sorte que les cellules du tableau aient une taille définie de 20x20 pixels et que si l'utilisateur souhaite jouer sur un champ de mines trop grand pour la taille de sa fenêtre, il peut utiliser des barres de défilement verticales/horizontales. Malgré cela, chaque fois que je génère un champ de mines plus grand, la largeur se réduit de sorte que toutes les colonnes tiennent dans la largeur maximale de la table (actuellement 80% de la taille de la fenêtre). Pour une raison quelconque, je ne suis pas confronté au même problème avec la hauteur.

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.

À quelques détails près ce que tu as fait correspond exactement au projet.

Les 2 V, c'est simple, il faut les pousser vers la droite en étant sur la dernière ligne (si plusieurs lignes), c'est ce que tu fais.

Je regarde tout cela avec attention ce soir.

Une petite question en passant, je veux solidariser les 2 V, qu'ils soient forcément sur la même ligne.
Cela me semble impossible à faire en CSS, il faut changer un peu la structure.

<span>
<a id="w" href="#bas">V</a>
<a href="#header">&amp;Lambda;</a>
</span>

span {white-space: nowrap}

Oui tout à fait, ils peuvent être gérer comme le bouton en les sortant du paragraphe et cela simplifi aussi la feuille de style: example https://codepen.io/gc-nomade/pen/xxWpBEo
Modifié par gcyrillus (01 Aug 2022 - 14:52)