Web Development Assignment
1. Develop a dynamic webpage using jQuery
Ans: The webpage includes the following features:
- **jQuery Selectors for Dynamic Style and Content:**
```javascript
$('#heading').css('color', 'blue').text('Updated Heading');
```
- **document.ready and AJAX Implementation:**
```javascript
$(document).ready(function(){
$('#fetchData').click(function(){
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
success: function(data){
$('#output').html(`<p>${data.title}</p>`);
}
});
});
});
```
- **jQuery UI Component:**
```html
<input type="text" id="datepicker">
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
```
- **Modernizr Feature Detection:**
```javascript
if (!Modernizr.inputtypes.date) {
$('#fallback').text("Your browser does not support HTML5 date
inputs.");
}
```
2. Create a Single Page Application (SPA) using AngularJS
Ans: Features:
- **Angular Form with Validation:**
```html
<form name="productForm">
<input type="text" ng-model="product.name" required>
<span ng-show="productForm.name.$error.required">Required</span>
</form>
```
- **Angular Service for Product Data:**
```javascript
app.service('ProductService', function(){
var products = [];
this.add = function(product) { products.push(product); };
this.list = function() { return products; };
});
```
- **Display with Angular Directives:**
```html
<div ng-repeat="product in products">{{product.name}}</div>
```
- **Custom Directive for Highlighting:**
```javascript
app.directive('lowStock', function(){
return {
link: function(scope, element, attrs){
if (scope.product.stock < 5) {
element.css('color', 'red');
}
}
}
});
```
- **Testing with Protractor or Karma for e2e Tests.**
3. Build a Node.js-based application for user management
Ans: Steps:
- **Initialize Project:**
```bash
npm init -y
```
- **Create Server:**
```javascript
const http = require('http');
const server = http.createServer((req, res) => {
// handle login or registration
});
server.listen(3000);
```
- **EventEmitter:**
```javascript
const events = require('events');
const emitter = new events.EventEmitter();
emitter.on('userRegistered', (user) => console.log(user.name + '
registered'));
```
- **File System for JSON Storage:**
```javascript
const fs = require('fs');
fs.writeFileSync('users.json', JSON.stringify(userData));
```
- **MongoDB Integration for CRUD:**
```javascript
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/users');
```
4. Perform SEO optimization for a sample webpage
Ans: Steps:
- **Analyze using Tools:**
Use tools like Ahrefs, Moz, or Screaming Frog to identify SEO
issues.
- **Optimize HTML Structure:**
- Add meta tags: `<meta name="description">`
- Use headers `<h1> to <h3>` appropriately.
- Add `alt` attributes to images.
- **Keyword Optimization:**
- Maintain keyword density of 1–2%.
- Ensure readable and engaging content.
- **Internal Linking:**
- Add links between related posts/pages.
- Plan backlinks via guest blogging or partnerships.
- **Performance Optimization:**
- Use Google PageSpeed Insights.
- Compress images, minify CSS/JS.
5. Develop a complete web-based blogging platform
Ans: Integration of all technologies:
- **Frontend with jQuery:**
- Form validation using `.on('submit', function(){})`
- AJAX fetch/post of blog data.
- **SPA with AngularJS:**
- Create/edit/delete posts using Angular routes and controllers.
- Form validations and dynamic blog listing.
- **Backend with Node.js:**
- Use Express to define APIs (`POST /create`, `GET /posts`, etc.)
- JWT-based user authentication.
- Store data in MongoDB.
- **SEO Implementation:**
- Add meta tags dynamically.
- Structured URLs and sitemaps.
- **Documentation:**
- Include architecture diagram, tech stack explanation.
- Challenges: Auth handling, state management, database schema
design.
