JavaScript Compiler
Tags: javascript, webdev, programming, react
Published: 2022-02-28 20:16:56

##**How to Create JavaScript Compiler Using Java/CSS/HTML5/React_Native**

_How it's gonna look_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r96cs00c3kcwoe94de9.jpg)
###How to setup folders and files
_Go to my GitHub to clone the project_
<a href="https://github.com/manabjb/JavaScriptCompiler.git">GitHub</a>

```
Trees
----JS_Compiler[Folder]
main.js
----js[Folder]
------sceipt.js
------main.js
-----css[Folder]
------style.css

//Don't forget to link script and style source in main.html
```
_Clone using git or download zip directly
cloning tutorial 
for Linux/Windows/Mac[Git required]
cmd: git clone https://github.com/manabjb/JavaScriptCompiler.git
also you can curl the gitlink_
<br>
**Create main.html and paste the html code**
_This main.html source also contain essential js codes for js compiler_


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <title>JS Editor - ManabJB</title>
</head>
<body>
    <div class="container">
       <div class="main">
               <fieldset class="field">
                   <legend>JS Compiler</legend>
                   <textarea class="text" id="editor" placeholder="  Type your JavaScript codes here..." spellcheck="of" autocapitalize="off"></textarea>
                   <hr>
                   <button class="btn" id="clear">Reset</button><button class="btn" id="run" onclick="comp();">Run</button><button class="btn" onclick="about();">About</button><input type="button" id="change" class="light" onclick="theme();" value="Dark"><hr>
                   <div class="abar">
                   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8q65W3zbUH3FixbfRcoIJH94HUQugM2pSJg&usqp=CAU">
                   <code>Developed by ManabJB</code>
                   </div>
               </fieldset>
       </div>
    </div>
</body>
</html>
```

<br>
**JavaScript code that help to create JavaScript Compiler**
_create folder and file like folder js file main.js - for understanding more about folder and file setup see project trees_

```
var input = document.querySelector('#clear');

var textarea = document.querySelector('#editor');
var submit = document.getElementById("run")[0];

input.addEventListener('click', function () {
    textarea.value = '';
}, false);

function about() {
  document.getElementById("editor").value = "alert('hi');\nconsole.log('Developed by ManabJB');";
}

function comp() { 
    try
        {
            eval( "" + textarea.value + "" )        }
        catch(err)
        {
           alert("Not a JavaScript Code") 
        }
} 

```
<br>
**Js for theme toggle**
_create folder and file like folder js and file script.js - for understanding more about folder and file setup see project trees_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al5b3xf79lgzwajuupym.jpg)

_It's simple we need to called theme() func in toggle button in main.js_
```
function theme() 
{
    theme_change = document.getElementById("editor")
    theme_change.classList.toggle("dark")
    theme_change = document.getElementById("change")
    theme_change.classList.toggle("lights")
    var elem = document.getElementById("change"); 
    if (elem.value=="Dark") elem.value = "Light"; 
    else elem.value = "Dark";
}
```
<br>
**Final part which help to style the whole app**
_css/style.css - for understanding more about folder and file setup see project trees_

```
body

{
    background-color: dodgerblue;
}
.container
{
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main
{
    background:linear-gradient(gray 30%, #ddf);
    border-radius: 10px;
    backdrop-filter:blur( 14.5px );
}
.field
{
    color: whitesmoke;
    font-size: 2rem;
    border-radius: 10px;
    font-family: lato;
}
.text
{
    height: 200px;
    width: 270px;
    resize: none;
    outline: none;
    background-color: whitesmoke;
    color: gray;
    border-radius: 10px;
    border-bottom: rebeccapurple;
    font-size: 1rem;
    font-family: lato;
}
.dark
{
    background-color: black;
    color: gray;
    border-color: black;
}
.btn
{
    background-color: dodgerblue;
    height: 40px;
    width: 60px;
    outline: none;
    border-color: transparent;
    color: whitesmoke;
    border-radius: 10px;
    border: none;
    font-family: lato;
    margin-right: 5px;
    font-size: 1rem;
}
.btn:active
{
    color: dodgerblue;
    background-color: whitesmoke;
}
.light
{
    background-color: dodgerblue;
    height: 40px;
    width: 60px;
    outline: none;
    border-color: transparent;
    color: whitesmoke;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    font-family: lato;
    margin-right: 5px;
    font-size: 1rem;
}
.lights
{
    color: dodgerblue;
    background-color: whitesmoke;
}
hr
{
    color: whitesmoke;
}
code
{
    font-size: 16px;
    font-family: lato;
}
img
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0 0 10px black;
}
.abar
{
    display: flex;
    font-size: 1rem;
    font-family: lato;
    align-items: center;
    gap: 15px;
}
.console
{
    height: 50px;
    width: 270px;
    resize: none;
    outline: none;
    background-color: whitesmoke;
    color: green;
    border-radius: 10px;
    border-bottom: rebeccapurple;
    font-size: 1rem;
    font-family: lato;
}
```