JS Media Queries

by Tom M

HTML

<div id="leftPane">
<li>
	<ul id="detroitButton">Detroit</ul>
	<ul>Star Wars</ul>
	<ul>Blade Runner</ul>
</li>
</div>

<div id="rightPane">


  <p id ="detroit">
    Aussi, par peur de représailles, je me suis retenue de comparer ces deux récits de science-fiction mis en scène au cœur de la chaude Cité
    des anges. D’ailleurs, selon le rédacteur en chef de Luxuriant, il aurait été plus judicieux de comparer le film de Villeneuve avec le Blade
    Runner de Ridley Scott, sorti en 1982. Qu’à cela ne tienne, aujourd’hui, comme l’agent K, interprété par Ryan Gosling dans le blockbuster
    de 2017, je vais seule, libérée de mon passé et affranchie des carcans de la dictature de la pensée.
  </p>
	
	  <p id="starWars">
    Dans Blade Runner 2049, il fait nuit même le jour et l’hiver est la seule saison. Roger Deakins (directeur de la photo de Fargo, No Country
    For Old Men, Skyfall, etc.) nous plonge dans un beau cauchemar dans lequel le ciel gris-bleu semble très proche et plafonné. Dans ce décor,
    l’agent K, un humanoïde réplicant du LAPD, est chargé d’effacer les traces d’un miracle survenu il y a quelques années : un enfant né d’une
    mère réplicant et d’un père humain. Dans sa doudoune kaki de grand couturier et sa Peugeot du futur, K s’exécute et court après des preuves
    qui pourraient créer une guerre entre les deux espèces. Qu'à cela ne tienne, la vérité et la justice le tiennent en haleine...
  </p>
	
  <p id="bladeRunner">
    Blade Runner 2049 est évidemment éblouissant de beauté. Pas étonnant, il n’y a que des numéros 10 dans la team de Villeneuve (à qui on
    doit les très brillants et remarqués Sicario et Arrival), et ce n’est pas juste pour la frime. Je l’ai écrit plus haut, Roger Deakins
    est à la lumière, Hans Zimmer à la musique et Joe Walker (Hunger, 12 Years A Slave) fait des merveilles au montage. Le rythme du film est
    étonnant pour une sortie hollywoodienne. Le casting est...

CSS

li {
	list-style: none;
}

#leftPane {
	float: left;
	width:30%;
}

#rightPane {
	float: right;
	width: 70%;
}

JavaScript

function myfunction(x) {
	if (x.matches) {
		document.getElementById('rightPane').style.display = "none";
	} else {
		document.getElementById('rightPane').style.display = "block";
	}
}

var x = window.matchMedia("(max-width:300px)")
myfunction(x)
x.addListener(myfunction)


document.getElementById("detroitButton").addEventListener("click", nextFunction);

function nextFunction() {
var y = document.getElementById("detroit");
	document.getElementById("rightPane").innerHTML = y.innerHTML;
}