<file_sep># v3schools - Basic HTML Editor

## Functionalities covered
##### 1) List out the programs in dropdown
##### 2) Allow to Edit & Run the code 

## Technology Stack
##### HTML, CSS Javascript, Jquery, NodeJS

## Software Requirement
##### NodeJS 
##### ExpressJS 
##### Chrome Browser

## Steps to Run the app
##### 1) Goto root folder
##### 2) Start Server in command prompt
###### type -> node server.js 
##### 3) Run the below URL in Browser
###### localhost:8090

<file_sep>$(document).ready(function() {
    app.init();
});

var app = (function(app) {
    var _fileList = [];
    var _currentSelectedIndex;
    app.init = function() {
        var ajaxObj = {
            url: '/filelist',
            type: 'get'
        };
        _dataProvider(ajaxObj).done(function(response) {
            console.log(response);
            $('#program-list').empty();
            if(Array.isArray(response)) {
                _fileList = response;
                _fileList.forEach(function(fileName) {
                    $('#program-list').append('<option>' + fileName + '</option>');
                });
                app.changeContent();
            }
        });
    };

    app.changeContent = function() {
        var select = $('#program-list')[0];
        if(_currentSelectedIndex != select.selectedIndex) {
            _currentSelectedIndex = select.selectedIndex;
            var fileName = select.options[select.selectedIndex].text;
            app.getSourceFile(fileName);
        }
    };

    app.getSourceFile = function(fileName) {
        var ajaxObj = {
            url: '/src',
            type: 'get',
            data: {'fileName': fileName}
        };
        _dataProvider(ajaxObj).done(function(response) {
            $('#code')[0].value = response;
            $('#output')[0].srcdoc = response;
        });
    };

    var _dataProvider = function(ajaxObj) {
        var promise = $.ajax({
            url: ajaxObj.url,
            type: ajaxObj.type,
            data: ajaxObj.data
        });
        return promise;
    };

    app.runCode = function() {
        $('#output')[0].srcdoc = $('#code')[0].value;
    };

    return app;

})({});<file_sep>var express = require('express');
var app = express();

var fs = require('fs');
var path = require('path');
var programDir = './logical Programs/';

app.use('/style', express.static(__dirname + '/style'));
app.use('/js', express.static(__dirname + '/js'));

app.get('/', function(req, res) {

    res.sendFile(__dirname + '/index.html');
    
});

app.get('/filelist', function(req, res) {
    res.send(getFileList());
});

app.get('/src', function(req, res) {
    var fileList = fs.readdirSync(programDir);
    for(var i = 0;i < fileList.length;i++) {
        if(path.parse(fileList[i]).name == req.query.fileName) {
            res.send(getFile(fileList[i]));
            break;
        }
    }
});

var server = app.listen(8090, function() {
    var host = server.address().address;
    var port = server.address().port;

    console.log("Example app listening at http://%s:%s", host, port)

});

function getFileList() {
    var fileList = fs.readdirSync(programDir);
    for(var i = 0;i < fileList.length;i++) {
        fileList[i] = path.parse(fileList[i]).name;
    }
    console.log(fileList);
    return fileList;
}

function getFile(fileBaseName) {
    var fileBuffer = fs.readFileSync(programDir + fileBaseName);
    return fileBuffer.toString();
}