Full stack development Example code

Practical No. 1 Bootstrap example

<!doctype html>

<head>

<title>Bootstrap Example</title>

</head>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</body>

</html>

Practical No. 2 Bootstrap using Bradcrump

<!doctype html>

<head>

<title>Bootstrap Example</title>

</head>

</ol>

</nav>

<li class="breadcrumb-item active" aria-current="page">Library</li>

</ol>

</nav>

<li class="breadcrumb-item"><a href="#">Library</a></li>

</ol>

</nav>

</body>

</html>

Practical No. 3

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</button>

</li>

<a class="nav-link dropdown-toggle" id="ddAboutUs" role="button" data-bs-toggle="dropdown" href="#" aria-expanded="false">About Us</a>

<li><a class="dropdown-item" href="#">About TCSC</a></li>

<li><a class="dropdown-item" href="#">Vision and Mission</a></li>

</ul>

</li>

<a class="nav-link dropdown-toggle" id="ddAboutUs" role="button" data-bs-toggle="dropdown" href="#" aria-expanded="false">Alumni</a>

<li><a class="dropdown-item" href="#">Alumni Registration</a></li>

</ul>

</li>

<a class="nav-link" href="#">Contact Us</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Practical No. 4 Shopping List app

<!DOCTYPE html>

<head>

</head>

<h1>Shopping List</h1>

</form>

<ul>

<button ng-click="ctrl.removeItem(item)">Remove</button>

</li>

</ul>

</body>

</html>

angular.module('shoppingListApp', [])

.controller('ShoppingListController', function () {

var ctrl = this;

ctrl.items = [];

ctrl.newItem = '';

ctrl.addItem = function () {

if (ctrl.newItem !== '') {

ctrl.items.push(ctrl.newItem);

ctrl.newItem = '';

}

};

ctrl.removeItem = function (item) {

var index = ctrl.items.indexOf(item);

if (index !== -1) {

ctrl.items.splice(index, 1);

}

};

});

</script>

Practical no. 5 Cart application

<!DOCTYPE html>

<head>

<title>Cart Application</title>

</head>

<h1>Cart Application</h1>

<p>{{ product.name }} - ${{ product.price }}</p>

</div>

<ol>

<li ng-repeat="item in cartItems">{{ item.name }} - ${{ item.price }}</li>

</ol>

<h3>Total: ${{ getTotal() }}</h3>

</body>

</html>

angular.module('cartApp', [])

.controller('cartController', function($scope) {

$scope.products = [

{ name: 'Product 1', price: 10 },

{ name: 'Product 2', price: 20 },

{ name: 'Product 3', price: 30 }

];

$scope.cartItems = [];

$scope.addToCart = function(product) {

$scope.cartItems.push(product);

};

$scope.getTotal = function() {

var total = 0;

for (var i = 0; i < $scope.cartItems.length; i++) {

total += $scope.cartItems[i].price;

}

return total;

};

});

</script>

Practical no.6 Translation app

<!DOCTYPE html>

<head>

<title>Translation Application</title>

</head>

<h1>Translation Application</h1>

<option ng-repeat="language in languages" value="{{ language.code }}">{{ language.name }}</option>

</select>

<div>

<h2>Selected Language: {{ selectedLanguage }}</h2>

<p>{{ translations[selectedLanguage] }}</p>

</div>

</body>

</html>

angular.module('translationApp', [])

.controller('translationController', function($scope) {

$scope.languages = [

{ name: 'English', code: 'en' },

{ name: 'japanese', code: 'jm' },

{ name: 'Marathi', code: 'mr' },

{ name: 'Hindi', code: 'hd' },

];

$scope.translations = {

'en': 'Hello!',

'jm': 'konchiwa!',

'mr': 'Namaskar!',

'hd':'Namaste!'

};

$scope.selectedLanguage = 'en';

});

</script>

Practical no. 7 angular js Form application

<!DOCTYPE html>

<head>

<title>AngularJS Form Application</title>

</head>

<h1>AngularJS Form Application</h1>

<span style="color: red;" ng-show="nameError">{{ nameError }}</span>

<br>

<label for="email">Email:</label>

<span style="color: red;" ng-show="emailError">{{ emailError }}</span>

<br>

<button type="button" ng-click="clickEvent()">Click Me</button>

<br>

<button type="submit">Submit</button>

</form>

angular.module('formApp', [])

.controller('FormController', ['$scope', function($scope) {

$scope.formData = {};

$scope.clickEvent = function() {

console.log('Click event triggered.');

};

$scope.validateName = function() {

if (!$scope.formData.name) {

$scope.nameError = 'Name is required.';

} else {

$scope.nameError = '';

}

};

$scope.resetNameError = function() {

$scope.nameError = '';

};

$scope.validateEmail = function() {

if (!$scope.formData.email) {

$scope.emailError = 'Email is required.';

} else if (!/^\S+@\S+\.\S+$/.test($scope.formData.email)) {

$scope.emailError = 'Invalid email format.';

} else {

$scope.emailError = '';

}

};

$scope.resetEmailError = function() {

$scope.emailError = '';

};

$scope.submitForm = function() {

// Perform any additional logic or AJAX calls here if needed.

console.log('Form submitted:', $scope.formData);

};

}]);

</script>

</body>

</html>

Practical no. 8 Chat application

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Chatting</h1>

const socket = io();

const sendBtn = document.getElementById("sendBtn");

const messageInput = document.getElementById("message");

const allMessages = document.getElementById("messages");

socket.on("message", (message) => {

const p = document.createElement("p");

p.innerText = message;

allMessages.appendChild(p);

});

sendBtn.addEventListener("click", (e) => {

const message = messageInput.value;

console.log(message);

socket.emit("user-message", message);

});

</script>

</body>

</html>

PRACTICAL no. 9 Socket .io

const http = require("http");

const express = require("express");

const path = require("path");

const { Server } = require("socket.io");

const app = express();

const server = http.createServer(app);

const io = new Server(server);

// Socket.io

io.on("connection", (socket) => {

socket.on("user-message", (message) => {

io.emit("message", message);

});

app.use(express.static(path.resolve("./public")));

app.get("/", (req, res) => {

return res.sendFile("/public/index.html");

});

server.listen(9000, () => console.log(`Server Started at PORT:9000`));

const express = require('express')

const mongoose = require('mongoose')

const url = 'mongodb://localhost/AlienDBex'

const app = express()

mongoose.connect(url, {useNewUrlParser:true})

const con = mongoose.connection

con.on('open', () => {

console.log('connected...')

})

app.use(express.json())

const alienRouter = require('./routes/aliens')

app.use('/aliens',alienRouter)

app.listen(9000, () => {

console.log('Server started')

})

const mongoose = require('mongoose')

const alienSchema = new mongoose.Schema({

name: {

type: String,

required: true

tech: {

type: String,

required: true

sub: {

type: Boolean,

required: true,

default: false

}

})

module.exports = mongoose.model('Alien',alienSchema)

const express = require('express')

const router = express.Router()

const Alien = require('../models/alien')

router.get('/', async(req,res) => {

try{

const aliens = await Alien.find()

res.json(aliens)

}catch(err){

res.send('Error ' + err)

}

})

router.get('/:id', async(req,res) => {

try{

const alien = await Alien.findById(req.params.id)

res.json(alien)

}catch(err){

res.send('Error ' + err)

}

})

router.post('/', async(req,res) => {

const alien = new Alien({

name: req.body.name,

tech:

req.body.tech,

sub: req.body.sub

})

try{

const a1 = await alien.save()

res.json(a1)

}catch(err){

res.send('Error')

}

})

router.patch('/:id',async(req,res)=> {

try{

const alien = await Alien.findById(req.params.id)

alien.sub = req.body.sub

const a1 = await alien.save()

res.json(a1)

}catch(err){

res.send('Error')

}

})

module.exports = router

Search This Blog

Sewestian

Full stack development Example code

Comments

Post a Comment

Popular posts from this blog

INS

Ankur wariko Do EPIC shit pdf