Posts

Let User Create an HTML Form Dynamically

Create a single HTML/CSS/JavaScript page that shall facilitate users creating form dynamically. User shall be able to add required number of input fields of different types. Initially, your page shall display an option list to choose the type of input field to add in the form. So the option list shall include: text input, password, radio, checkbox, option list, email etc. When user select an option, your app shall display a form to get details of that input field. User shall fill the form and click CREATE button. On click, your app shall add that field in the form.

For example, if user select 'text input' from the option list, your app shall display a form with 3 input field, like this:
Field Name:   ____________ Max Width:   ____________ Field ID:        _____________ CSS Class:     _____________ (option list of predefined CSS classes to choose from) CREATE
When user fill the form and click the CREATE button. Your app shall create an input field as per given detail. Do same f…

JavaScript - number

// there are no separate types for integers and floating points numbers in JS // only one type for both is used i.e. 'number' // when you assign some variable or constant a number, its type become number let num1 = 10; console.log('value of num1 = ' + num1); console.log('typoe of num1 = ' + typeof num1); // though above used syntax is more common, but we can create // a number type variable using Number function too. like below: // below syntax is useful when you want to create 'number' variable // from string or others. we can pass that to Number function. let num2 = Number(20); console.log('num2 = ' + num2); // we can call this method passing string and other types too // in case of other types, its string equivalent would be used // to create number. num2 = Number("30"); console.log('now value of num2 = ' + num2); // like string, primitive type 'number' has also a corresponding // wrapper reference type i.e.…

JavaScript - string

console.log("// ----------------- Strings ----------------------"); console.log("///////////////////////////////////////////////////"); // 1. declaration and assignment // 2. string literals. defining single line and multi-line string literals // 3. functions: length, toLowerCase, toUpperCase, substring, trim, concat, indexOf, lastIndexOf, charAt // 4. using string as array - for reading. since ES5 // 5. comparing strings // 6. primitive string and String object. How to create each? use typeof to see, what is difference. what to prefer. // 7. auto-boxing: Automatic conversion of primitive to String object depending on context // 8. primitive is pointer to a row memory location i.e. fast speed/random-access // 9. they are not same e.g. eval method takes expression in primitive string // 10. use instance and typeof to check each case // 11. converting one form to another. e.g. new keyword and valueof method lastName = "Shahzad"; console.log(lastName); co…

Focusing Technology and Creating Products - What We Need to Know

Image
Students put high energy in developing their academic final year projects, they look very inspired by the technology-stack and many of them ask about technology only. When you discuss, they claim to launch the product too. Young friends, products are not made like this. Let me share a few things that I have learned with time:

Developing something to learn a technology only (Node.JS, Angular, .Net, Android, etc) and creating a real product for users are different things. If you want to create a product, your primary focus should be the market e.g. value creation, target customers and their pain points, user experience, understanding market need and gap, idea validation and testing, understanding business processes your product target, along with creating the actual product. Technology matters but not that much as craftmen think. Technology stack can be improved with time, no one really cares about the technology used as long as the product solve their problem. How many times you think…

Create a Basic Marketplace Web Application using PHP MySQL

Image
Create a web application using HTML/CSS, Bootstrap, PHP, MySQL etc. that shall be a basic marketplace where sellers create account to list products to sell and buyers create account to review products and add them to their shopping cart. Here is the ERD of marketplace (lets call it primestore)
Click Here to download SQL Script file.
Different pages you need to create to complete this marketplace are explained below.
index.php i.e homepage. It shall contain list of categories (on left side) and recently added 16 products (4 products in each row) with pagination. Show each product title, price, main picture and shop name. When shop name is clicked, open same page i.e index.php to show all products of that shop (hint: Pass seller ID to index.php page as request parameter). When seller ID is received in page, display heading i.e. "All Products Listed by <Shop Title>" for the list of products. When user click a category at index.php, open same page passing category ID to lis…

Task 4a - Position, Box-Sizing and Opacity CSS Properties

Image
There are two very useful properties in CSS i.e. position and box-sizing. You must have good understanding how both of these work. Below I have explained two tasks that should help you to understand them.
Position and OpacityBefore doing this task, I suggest you read basics of different values of position e.g. static, relative, fixed, and absolute. Then do the below task to see how position of one element can effect others.

Using position property you can change the default position of an element on HTML page. From below screen you can see, the element with text is placed at top of image. A container div contains img and text (in span element). The text has property postion:absolute & bottom:0px and the container div has the property postion:relative. Below is how it looks like.


You can clearly see, the text element is placed at top of the image. If we change the text span to div and apply width property, it shall look like this:


Though the text div is placed on image but its not cl…

Blogger Theme / Template Tutorial

I'm exploring Blogger theme structure to customize it. I want to write learning notes along the way. So, this post is work-in-progress, so don't consider it complete.

To understand this tutorial, you shall know Blogger basic usage e.g. adding new posts in Blogger blog, creating new pages, assigning labels, etc. and you shall have basic knowledge of HTML, CSS and programming e.g. variables, if/else, loops etc. My objective is to explain basic concepts and building blocks of blogger theme, I do not intend to build a professional looking theme.

There are following points, you must understand to work on Blogger templates:
Basic ConceptsStyle VariablesData TagsWidget TagsStructure of ThemeBasic Blogger Template ConceptsIts important to understand different types of web pages that blogger offer. Understanding page type is important as in custom theme you need to embed different contents based on the type of page e.g. images slider at home page only, specific background image at top of …