Éditeur JS , Pour les apprenants de JS

Télécharger le projet
Commenter

Description

Bonjour les amis. Voici un code simple qui vous permettra de mieux faire vos excercices en javascript, excercice que vous fairez directement dans votre navigateur
Pour implementer le système, vous devez avoir un fichier index.html pour le code html, un autre pour le fichier javascript et enfin un autre pour le fichier css. Merci. 
//index.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
  <title>EDITEUR JS</title>
  <link rel="stylesheet" href="style.css"/>
 </head>
<body>

<fieldset>
 <legend>RESULTAT - EXECUTION</legend>
 <div id="aff-html" style="height:150px; overflow:auto; margin:auto; width:97%; font-size:13px"></div>
 <button id="editCss">Ouvrir l'editeur CSS</button>
 <div id="conteneur">
  <textarea id="txtCSS"></textarea><br/>
  <input type="submit" value="INSERT^" id="iptCss" class="ipt"/>
 </div>
</fieldset>
<fieldset style="margin-top:-20px;">
 <legend>INSERT HTML CODE</legend>
 <textarea id="txtHTML"></textarea><br/>
 <input type="submit" value="INSERT^" id="ipt0" class="ipt"/>
</fieldset>
<fieldset style="margin-top:-30px;" class="language-javascript">
 <legend>INSERT JS CODE</legend>
 <textarea id="txtJS"></textarea><br/>
 <input type="submit" value="INSERT^" id="ipt1" class="ipt"/>
</fieldset>
<script type="text/javaScript" src="index.js"></script>
</body>
</html>


//index.js

 (function(){
  var inputs = [document.getElementById('ipt0'), document.getElementById('ipt1')];
  function addEvent(elmt, evnt, funct){
   if(elmt.addEventListener){
    elmt.addEventListener(evnt, funct, false);
   }else{
    elmt.attachEvent('on' + evnt, funct);
   }
  }
  
  addEvent(inputs[1], 'click', function(){   
   if(document.getElementById('JS')){
    document.getElementsByTagName('head')[0].removeChild(document.getElementById('JS'));
   }   
   var script = document.createElement('script');
   script.type = 'text/javaScript'
   script.id = "JS";
   script.text = document.getElementById('txtJS').value;
   document.getElementsByTagName('head')[0].appendChild(script);   
  });
  
  addEvent(inputs[0], 'click', function(){  
   var txtHTML = document.getElementById('aff-html');
   txtHTML.innerHTML += document.getElementById('txtHTML').value;   
  });  
  
  var a = document.getElementById('conteneur');
  var button = document.getElementById('editCss'), i = 0;
 
  addEvent(button, 'click', function(e){
   i++;
   var target = e.target || e.srcElement;
   if(i == 1){
    a.setAttribute('style', 'width:auto; min-width:100px;height:100px; display:block');
    target.innerHTML = "Fermer l'editeur CSS";
   }
   if(i == 2){
    a.style.display = "none";
    i = 0;
    target.innerHTML = "Ouvrir l'editeur CSS";
   }
  });
  
  var but = document.getElementById('iptCss');  
  addEvent(but, 'click', function(){   
   if(document.getElementById('styleId')){
    document.getElementsByTagName('head')[0].removeChild(document.getElementById('styleId'));
   }
   var styl = document.createElement('style');
   styl.type = "text/css";
   styl.id = 'styleId';
   
   if(styl.textContent){
    styl.textContent = document.getElementById('txtCSS').value; // MOZ
   }
   else if(styl.innerText){
    styl.innerText = document.getElementById('txtCSS').value; // IE 6 - 7 - 8
   }else{
    styl.innerHTML = document.getElementById('txtCSS').value; // MOZ - webkit
   }
   
   document.getElementsByTagName('head')[0].appendChild(styl);
  });
 })();


//style.css

   textarea{
    width:97%;
    margin:auto;
    min-height:150px;
    min-width:500px;
    border:2px #ededed solid;
    border-radius:5px;
    padding:5px;
    font-family:consolas;
    font-size:12px;
   }
   #txtHTML{
    color:#7B7B66;
   }
   #txtJS{
    color:#7B0F0F;
   }
   #txtCSS{
    color:#A63C2E;
    font-weight:bold;
    min-height:250px;
   }
   button, div#conteneur{
    position:absolute;
    top:-1px;
    left:400px;
   }
   div#conteneur{
    display:none;
   }
   button{
    transition-property: background, color;
    transition-duration:300ms;
    left:240px;
    top:7px;
    border:none;
    font-family:consolas;
    height:25px;
   }
   button:hover{
    background:rgba(37, 45, 45, 0.5);
    color:white;
   }
   input[class="ipt"]{
    position:relative; top:-32px;
    margin-left:2px;
    border:1px dashed #ddd;
    height:30px;
   }
   input[class="ipt"]:hover{
    background:#252D2D;
    color:white;
   }
   fieldset{
    border:none;
   }
   legend{
    text-decoration:underline;
    font-family:verdana;
   }
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (papac1010)