A portal where user can add new student details and also edit as well as delete the existing ones
A simple web app built using HTML5, CSS3, Bootstrap and ES6(Js) for basic structure and functionality of the page and also utilizing Session Web Storage to store the data in the browser till the time the user is using the portal. The ES6
is being converted into a backwards compatible version of JavaScript for current and older browsers or environments using babeljs.
Open and view the Project using the .zip
file provided or at my Github Repository.
The project is also hosted GitHub.
This project was built from scratch.
You would require the following tools to develop and run the project:
Start by setting up the project environment. cd
into the project's root folder and run the following command to install the packages mentioned in package.json
:
npm install
Create a project folder and open terminal
Run the following command to initialize a node project
npm init
Run the following command to add babeljs
npm i --save-dev babel-cli babel-core babel-preset-es2015
Add a script to the package.json
file as follows:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src/ES6/* -d js"
}
Create .babelrc
file with the following code:
{
"presets": ["es2015"]
}
Create index.html
with basic markup
Create src
folder containing the following:
img
folder with all the required imagescss
folder containing styles.css
with the required stylingES6
folder containing js/main.js
with the following ECMAScript 6
js functions:
newStudent
deleteStudent
editStudent
saveEditing
cancelEditing
deleteAll
Link all the resources to index.html
For details on how everything has been implemented, refer the source code.
Open terminal in the root directory and run the following command:
npm run build
This will convert the ES6/main.js
file's code and create a js/main.js
file
Open index.html
file in the browser of your choice.