Let's break this down into smaller parts.
I can provide a framework for each project along with sample
code snippets where possible, but due to the complexity and length of full project implementations, I
will summarize the essential parts. You can then use these snippets as a foundation to develop each
application.
### 1. Node JS Hello World Application
```javascript
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
```
### 2. User Login System (Node.js with Express)
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/login', (req, res) => {
const { username, password } = req.body;
// Authentication logic here
res.send(`Username: ${username}, Password: ${password}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
### 3. File Operations in Node.js
```javascript
const fs = require('fs');
// Write to file
fs.writeFileSync('example.txt', 'Hello, World!');
// Read from file
const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);
// Append to file
fs.appendFileSync('example.txt', ' Appending this text.');
// Delete file
fs.unlinkSync('example.txt');
```
### 4. Read Form Data from Query String
```javascript
const express = require('express');
const app = express();
app.get('/form', (req, res) => {
const name = req.query.name || 'Guest';
res.send(`Hello ${name}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
### 5. Food Delivery Website (Simplified)
```javascript
const express = require('express');
const app = express();
app.get('/restaurants', (req, res) => {
const restaurants = ['Pizza Place', 'Sushi House', 'Burger Joint'];
res.json(restaurants);
});
app.listen(3000, () => {
console.log('Food Delivery Server running on port 3000');
});
```
### 6. MongoDB Basic Commands
```javascript
const { MongoClient } = require('mongodb');
async function run() {
const client = new MongoClient('mongodb://localhost:27017');
await client.connect();
const database = client.db('testdb');
const collection = database.collection('testcollection');
// Insert a document
await collection.insertOne({ name: 'John Doe' });
// Find a document
const results = await collection.findOne({ name: 'John Doe' });
console.log(results);
await client.close();
}
run().catch(console.error);
```
### 7. CRUD Operations in MongoDB
```javascript
async function crudOperations() {
// Assuming you have already established a connection to MongoDB
// Create
await collection.insertOne({ name: 'Jane Doe' });
// Read
const user = await collection.findOne({ name: 'Jane Doe' });
// Update
await collection.updateOne({ name: 'Jane Doe' }, { $set: { age: 30 } });
// Delete
await collection.deleteOne({ name: 'Jane Doe' });
}
```
### 8. Count, Limit, Sort, and Skip in MongoDB
```javascript
const count = await collection.countDocuments(); // Count
const results = await collection.find()
.sort({ name: 1 }) // Sort by name
.skip(10) // Skip first 10
.limit(5) // Limit to 5 results
.toArray();
```
### 9. AngularJS Form with CSS and Events
```html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body ng-controller="MyController">
<form ng-submit="submitForm()">
<input type="text" ng-model="name" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<p>Hello, {{ name }}</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('MyController', function($scope) {
$scope.submitForm = function() {
alert("Form submitted!");
};
});
</script>
</html>
```
### 10. Job Registration Form (AngularJS Validation)
```html
<form name="jobForm" novalidate>
<input type="text" ng-model="jobTitle" name="jobTitle" required>
<span ng-show="jobForm.jobTitle.$touched && jobForm.jobTitle.$invalid">Job title is
required.</span>
<input type="email" ng-model="email" name="email" required>
<span ng-show="jobForm.email.$touched && jobForm.email.$invalid">Email is required.</span>
<button type="submit" ng-disabled="jobForm.$invalid">Submit</button>
</form>
```
### 11. AngularJS Application Using $http Service
```javascript
app.controller('MyController', function($scope, $http) {
$http.get('employee.json').then(function(response) {
$scope.employees = response.data;
});
});
```
### 12. Student Information Management with Express and AngularJS
The implementation may require a backend API using Express, like the one outlined previously for
login, combined with an AngularJS front end to manage students.
### 13. Simple Calculator Application (ReactJS)
```javascript
import React, { useState } from 'react';
function Calculator() {
const [result, setResult] = useState("");
const calculate = (value) => {
setResult(result + value);
};
return (
<div>
<input type="text" value={result} readOnly />
<button onClick={() => calculate('1')}>1</button>
<button onClick={() => calculate('2')}>2</button>
<button onClick={() => setResult(eval(result))}>=</button>
</div>
);
}
export default Calculator;
```
### 14. Voting Application (ReactJS)
```javascript
import React, { useState } from 'react';
function VotingApp() {
const [votes, setVotes] = useState(0);
const vote = () => {
setVotes(votes + 1);
};
return (
<div>
<h1>Votes: {votes}</h1>
<button onClick={vote}>Vote</button>
</div>
);
}
export default VotingApp;
```
### 15. Leave Management System (ReactJS)
```javascript
import React, { useState } from 'react';
function LeaveManagement() {
const [leaveType, setLeaveType] = useState('Casual Leave');
const [days, setDays] = useState(10); // Available Days
const applyLeave = () => {
console.log(`Applied for ${leaveType}`);
setDays(days - 1); // Assuming 1 day leave applied
};
return (
<div>
<h2>Available Leave Days: {days}</h2>
<select value={leaveType} onChange={(e) => setLeaveType(e.target.value)}>
<option value="Casual Leave">Casual Leave</option>
<option value="Medical Leave">Medical Leave</option>
</select>
<button onClick={applyLeave}>Apply Leave</button>
</div>
);
}
export default LeaveManagement;
```
### 16. Music Store Application (ReactJS Routing)
You’d generally use `react-router-dom` for routing.
```javascript
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/products" component={Products} />
<Route path="/checkout" component={Checkout} />
</Switch>
</Router>
);
}
```
### 17. Online Store Application (ReactJS)
This will be similar to the food delivery concept but with additional pages for registration and product
viewing.
```javascript
function App() {
return (
<Router>
<Route path="/register" component={Registration} />
<Route path="/login" component={Login} />
<Route path="/products" component={Products} />
</Router>
);
}
```
