Hi Welcome to Proto Coders Point, In this tutorial, we’ll building a simple stylish Digital + analog clock using HTML, CSS, and JS. This clock features distinct hour, minute, and second hands will show a numerical indicators where will show current hours, minute & second as a hand of the clock, providing a visually appealing and functional timekeeping display as animation.
Have a look at below gif image how our clock will look
Let’s start with the HTML structure. The clock is contained within a <div> element with the ID “clock” .Within this div, we have three child div’s which classes named a “hour-line,” “minute-line,” and “second-line,”. This 3 div.’s representing the hour, minute, and second hands of the clock, respectively. Additionally, within each line div, there are child div which classes names as “clock_number” to display numerical indicators.
CSS Styling
The CSS code is used to give styling and appearance to the clock design. The clock will have a square shape border, and each hand (hour, minute, and second) is represented by a digital number line with a specific dimensions and positions a the center of the square border. The transform-origin property ensures that the rotation occurs around the base of each line.
JavaScript and jQuery
The JavaScript code is used to update the clock’s hands based on the current time. For this we have a function updateClock that retrieves the current hour, minute, and second and perform calculation for each hand rotations in a proper angle for each hand. The angles we get is then applied using jQuery to rotate the lines. The numerical indicators are updated accordingly.
The setInterval function is used to call the updateClock function every second, ensuring that the clock hands are continuously updated in real-time.
Hi Guy’s Welcome to Proto Coders Point. It this fast growing digital era the importance of concise and shareable URL’s cannot be overstated. If you are trying to make you web address URL manageable or want to share the link of any content on social media or want to embed the URL in a email, but share a URL that is too long is very annoying thing. There for Shortened URL Plays a crucial role. So In this article we learn how to build a URL Shortener Application in flutter.
How to user flutter URL Shortener
Our Flutter URL Shortener Application we have 3 pages.
Registration.
Login.
Dashboard.
In Registration Page we simply have a form that the user can fill to register himself into our application using Flutter registration page.
In Login page user can enter his login credential and get logged in into the flutter to make use of URL Shortener.
In Dashboard we have 2 section. First section user can use to submit his LongURL and get ShortURL. Second section we can show all the data i.e. short URL created by that user.
Libraries need to created URL Shorten project in flutter
In pubspec.yaml file under dependencies we need to add below 2 library.
get:
get_storage:
We are going to make use of getx and get storage package
getx: used to make http calls to back api to store and retrieve data from backend nodejs server.
get storage:used to share logged in user data within the application storage same like sharedPreference.
Flutter URL Shortener Project Structure
In above flutter project I have 4 dart files namely:
main.dart
registration.dart
login.dart
dashboard.dart
main.dart
This is the starting point of our flutter application, Here we will check if the user has already signed into the application before, If the user data exist in get_storage (shared preferences) we will redirect the user to dashboard page else will redirect user to login page.
In login page we have 2 text field where the user can enter login credential i.e. email & password and a button on click will call a function that hit back-end NodeJS Login API.
After hitting the backEnd API if user exist in our MongoDB database will send the user data as response to frontEnd, and then store the user data into flutter app storage space using GetStorage package so that the used will be signIn into the application when he visit next time.
In the world of web application development, building a URL shortener server is best for beginners who wants to learn for scratch and also best for collage student who want to submit a project. A URL shortener project takes long URLs and provides a shortened link, making links more manageable and shareable in short form links. In this article, we will help you in developing a nodejs application in building a URL shortener using Node.js, Express, and MongoDB.
Video Playlist on building URL Shortener in Flutter + NodeJS with MongoDB Database
Project Structure
The NodeJS project will be organized into folders such as config, model, and routers for better code structure.
config: In config folder we have a file db.js that is responsible for mongodb database connectivity.
model: In model folder we have files that define mongodb database schema, Here we have 2 file namely url.model.js and user.model.js.
routers: In router folder we have RESTAPI for url and user apis.
app.js and index.js: This main root / starting point of our nodejs express URL shortener application in nodejs.
Node Module / Libraries required for building URL shortener Application
body-parser: used for parse incoming request bodies from client or front-end.
express: used to simplify the creation of nodejs express server and creating API and routers.
mongoose: used to connect or interact with MongoDB database, creating mongodb collection schema.
shortid: used for generating unique random identifier, that we can used as shortURL.
Enter below command to install this nodeJS Modules or Libraries
npm install body-parser cors express mongoose shortid
URL Shortener in NodeJS using ExpressJS and MongoDB
Refer above project structure and create respective files under the folders.
config >db.js
This file is responsible to get connected to mongodb database using nodejs mongoose library. This connection is exported so that the connection can we used in model file as below.
urlSubmit: Using this we can convert long URL into shorturl, Basically this API is used for LongURL submition and get shortURL of it. This API accept 2 parameters: userId & longUrl then generate a shortId i.e a random id which we can use as shortURL. This whole data will be stored into Mongodb database.
/:url: this api is a parameterized API, for example support a longURL is submitted and uses get the shortURL it, Now the user can us url like this http://localhost:3000/xya12id to redirect himself to longURL.
getUserURLList: This API will return all the URL’s been submitted by the user, This is been used to show or display the list of URL in Frontend (URL Shortener Flutter App).
Node.JS as you know is single threaded, asynchronous, event-driven architecture, Is so popular JavaScript JavaScript runtime environment for building high performance web application or back-end application like express server or Rest API’s.
You are here to know how can I increase the security level of my NodeJS express server by whitelisting IP to use our node server.
In this NodeJS article let’s explore how to enhance security of our NodeJS Express by adding middleware to check the whitelisted IP and allow only specific Client IP address to access our server.
Video Tutorial
The code complete source code with explanation is as below
The above code make use of ExpressJS to run a NodeJS server, which makes use of middleware function checkIpAccess thta is responsible to check the client request IP address if that IP exist in our allowed whitelisted IP list then grant the user to use our nodejs server else return a status error 403 that is forbidden.
Benefits of IP Whitelisting
Implementing IP whitelisting in your Node.js Express server offers several security advantages:
Access Control: Only requests originating from the specified IP address are permitted, providing a level of access control.
Reduced Attack Surface: By restricting access to a single IP, you minimize the potential attack surface, making it more challenging for unauthorized users to interact with your server.
Enhanced Security: IP whitelisting is an additional layer of security, complementing other security measures you may have in place.
In today’s world JavaScript versatile & been widely-used as a programming language that plays an important role in modern web development. Being a JavaScript developer, It’s very important to understand the language’s fundamentals and also adept solving real-world problems. In JS job interviews, JavaScript Interview Questions is been often asked from basic syntax to advanced concepts.
In this article, We will dive into 11 JavaScript questions that are commonly asked in interviews. Each question will be explained in detailed with solution, complete with source code examples where required.
If are you getting prepared for you next job interview or simple learning to enhance your JS skill, this article will have practical solution with code example for better understanding.
5 Interview Questions for JavaScript Job preparation
1. Implement a function that serializes a JavaScript value into a JSON string.
In JS we have a In-Built method i.e. JSON.stringify() using which we can easily convert javascript object or value into JSON string.
In Shallow Copy when you create a new object using originalObject, actually the shallowCopy points to same address to which originalObject is, Now when we modify shallowCopy the modification is made at address level, due to which originalObject will also get altered.
In below example, JSON.stringify() is used to serialize the original object into a JSON string, and then JSON.parse() is used to parse it back into a new object.
Doing this will create a deep copy, making sure that original data is not modified when copy is modified.
// Original Object
const originalObject = { a: 1, b: { c: 2 } };
// Deep Copy using JSON.stringify() and JSON.parse()
const deepCopy = JSON.parse(JSON.stringify(originalObject));
// Modifying the Deep Copy
deepCopy.b.c = 99;
console.log('Original Object:', originalObject);
console.log('Deep Copy:', deepCopy);
Now, Let’s performs a deep copy of a value, and also handles circular references
Note: We are using NodeJS circular-json library to handle circular references with deep clone.
In this example, the circular-json library is used to stringify and parse the object with circular references.
3. Create a Function in JS then accepts any numbers of arguments and returned memorized version
To Implement Memorization of data or we can say it as creating a cache of the data returned by a javascript function can be achieved by using caching technique. Below Code example uses simple cache object.
function memoize(func) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key]) {
console.log('Fetching from cache');
return cache[key];
} else {
console.log('Calculating result');
const result = func(...args);
cache[key] = result;
return result;
}
};
}
// Example usage:
const sum = memoize((...args) => args.reduce((acc, val) => acc + val, 0));
console.log(sum(1, 2, 3)); // Calculating result
console.log(sum(1, 2, 3)); // Fetching from cache
4. How do you stop a setInterval() function
We can easily stop setInterval() function of javascript, by making use of clearInterval(intervalId) method. The clearInterval method accept a parameter i.e. the ID of setInterval() method by which be can stop further executions of setInterval() func.
var i = 0;
const intervalId = setInterval(()=>{
console.log("i=> ",i)
i++;
if(i===5){
clearInterval(intervalId)
}
},1000);
The above code will stop execution of setInterval() when i value is 5.
5. How to Merge Two Object in JavaScript
There are many ways to merge or cancat two object into one, i.e. by using spread operator (...) or by uisng Object.assign() method.
The below example to merge two object using spread operator (...).
Hi Guy’s Welcome to Proto Coders Point, In this JS Article let’s under about looking in javascript using for…in loop.
for…in object javascript -How to iterate object in javascript
In Javascript, for…in loop statement is commonly used to iterate object over it’s properties also known a key of an object. This for…in loop is only recommended to used with object not with any array as the behavior might changed during iteration.
Syntax of for…in object loop
for (var key in object) {
// code to be executed for each property/key
}
for…in loop example to iterate object to access it’s properties
const person = {
firstName: "Rajat",
lastName: "Palankar",
age: 20,
email: "contact@protocoderspoint.com"
};
for (var key in person) {
console.log(key + ": " + person[key]);
}
Output
In above code we have an object by name person & I want to iterate it so for that I am using for…in loop to iterate the object over it’s properties.
Each loop it iterate has it’s key property and using that key we can access it’s corresponding value. The output is below:
firstName: Rajat
lastName: Palankar
age: 20
email: contact@protocoderspoint.com
Note: Use for…in loop use only on object, as it misbehave which used with arrays. For iterating an arrays it’s better to use for…of loop or forEach loop.
