How to Create JavaScript Compiler Using Java/CSS/HTML5/React_Native
How it's gonna look
How to setup folders and files
Go to my GitHub to clone the project
GitHub
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
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>
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")
}
}
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
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";
}
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;
}
Top comments (0)