A design system is a set of standardized guidelines and components that can be used to build a consistent and cohesive user interface for a product or service. It serves as a reference for designers and developers, helping them create a cohesive user experience across different platforms and devices. A design system typically includes elements …
Add all numbers entered as function parameters Method 1 Method 2
Edge Side Includes (ESI) is a small markup language for edge level dynamic web content assembly. The purpose of ESI is to tackle the problem of web infrastructure scaling. It is an application of edge computing. More details can be found on wikipedia ESI element tags are inserted into HTML or other text based content …
Lets create index.html file which will include the basic html code.Now create a div with class menu and a header tag with class logo and three span tags to make the humburger menu (three lines) which I will animate on toggle and turn into a cross. Middle line (span tag) will fade out on click …
Create a humburger menu using html, css and javascript Read More »
Google Geocoding API to display address details including latitude and longitude Create your own Google API key and update YOUR_API_KEY in the src/script.js https://developers.google.com/maps/documentation/javascript/get-api-key Use HTML, Javascript and CSS Include axios CDN or you can use npm install Inlude bootstrap CDN or use npm install Address search results using Google Geocodig API Step 1 – create an …
Google Maps API to display map with different types of markers for multiple locations First you will need to get Google Maps API key from below link: https://developers.google.com/maps/documentation/javascript/get-api-key Update this API key at YOUR_API_KEY in index.html Step 1 – create an index.html which is used to display map in the div section where id is …
This is a simple todo application design using html, css and vanilla javascript. You will need an editor of your choice to begin with. I usually use vscode with Liveserver extension which helps to view developed application in the browser. First step is to create an html page which will display the todo list. Create …
Create a TODO list design using javascript, html, css Read More »
WebKit is a HTML web browser rendering engine which is used by Safari and Chrome browsers.It supports custom css properties which can be prefixed with -webkit- For example -webkit-font-size will be replaced by the standard font-size. Below is the list of various other browsers and rendering engines, css-prefix used by them: Browser Engine CSS Prefix …
What is WebKit? How is it used by browsers and CSS? Read More »
To align items from right to left in Arabic language using use dir=”RTL” This is first item This is second item This is last item Left to Right alignment for a list of items in Arabic using dir=”LTR” This is first item This is second item This is last item
What is a Regular Expression? As per wikipedia, A regular expression (shortened as regex or regexp; also referred to as rational expression) is a sequence of characters that specifies a search pattern. Create an index.html file where you can add all the form input fields as below. Add name property for the fields which will be accessed in the validation.js to perform regex validations. index.html validation.js …
Conditional rendering can be achieved using v-ifConditional display can be achieved using v-show First create a vue project using vue cli Now change directory start the server Lets start building the VUE component inside src/components/showHide.vue Remove HelloWorld.vue component and register showHide.vue component in App.vue Your showHide.vue component will look like this:
How to turn off autoplay for youtube videos url? Its quiet annoying to have autoplay for videos on the website and can put off visitors on the websiteThe simple way is to auto turn off the autoplay setting to 0 in the query string parameters of thr url. For example your website youtube link is …
Count words for a textarea field using javascript
Create two css class draw to give white background box on which we will draw the check or dot and get the X and Y coordinates. Link Vue Js CDN to use Vue framework Create an instance of Vue and create app id Now create drawDot() and drawCheck() methods to add Check or Dot and …
Google Maps API key error If you have generated Google Maps API key and when you save it gives the below error: It is because Google services takes about 10 mins to make service available for the newly created API keys.Wait for some time and it will start working.