Creative Technocrayts

Creating boxes with repeating background color - jQuery practice In this article, we’ll cover how to use jQuery , DOM methods , and JavaScript arrays to create interactive boxes with repeating background colors. You could try our previous practice exercise for hands on jquery knowledge. Jquery array i) When you get an input, check whether it is validated as a number. ii) Based on the input value, create a number of boxes. iii) Set all the boxes with background colors from an array. How to Get an Input Value from a Textbox var inputValue = $(this).val(); console.log(inputValue); Testing Whether the Input Value is a Number To test whether the input is a number, we use a regular expression pattern. if (/^[0-9]$/.test(inputValue)) { console.log("It is...

Wow!! 2018 has been a fantastic year for us, Creative Technocrayts. There has been a satisfying learning curve for us in front end development be it using CSS Flexbox or adapting Google’s AMP in optimisation or designing our websites using Font Awesome 5. We have discussed a lot, thanks to the constant support from the community. We have received both positive feedback and negative criticism as well. Keeping that in mind we strive to improve and learn more and give back to the community. 2018 showed tremendous increasing readership from googleplus community and facebook page apart from Twitter and Linkedin and we are so happy about that. Thank you guys :) Its time for us to look back at this awesome year, 2018!!! Daily UI practice - Range slider and getting the value in jQuery This article, demonstrates how we can style input range, a form elements.It gives you an idea that 1. Input range can be custom styled. 2. Shadow DOM gives selectors to styles input ranges 3. It has trac...

Daily UI practice Recently I had some time so checked for latest updates in design from awwwards.com I wanted to practice UI for the day. So I picked up a site from there. The reason I picked up that is i) I wanted to learn something new ii) I wanted to do something which I haven’t done before So the exercise was about, Creating a range slider and getting the value Added box-shadow to jumbotron component. Now placing input range elements inside the component, Following bootstrap 4 documentation I got the above screen as it looked like in bootstrap website. I can’t proceed further as I didn’t have any other elements to style. Then I read few tutorials from css-tricks.com What is Shadow DOM? Well, we all know that, when a HTML page is loaded in a browser DOM (Document Object Model) is created. Likewise browsers have capability to create sub tree to the already created DOM elements.   Now we have got two components and customize the styles. They are 1. Trac...

jQuery is a Javascript framework. When do we use Javascript, jQuery, jQuery UI DOM Manipulation in jQuery What jQuery does? jQuery is a JavaScript library that can: Access parts of a page Modify the appearance of the page Alter the content of the page Respond to user interaction with the page Add animation to a page Manipulating DOM with jQuery methods 1. To insert new elements inside every matched element, use: .append() .appendTo() .prependTo() .prepend() Example for .prepend() in jQuery HTML: <div class="productsContent one-box"> <div class="box"> <h4> Loreum ipsum1</h4> <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </p> </div> </div> Prepending an element using jQuery: $('.productsContent').prepend('November, 2018'); New DOM: $(...

Websites we develop should always ensure better user experience keep in my mind the tough competition in the market by contemporary players How to solve browser issues in website How our website or web applications looks in different browsers and in different platforms matters the most. We are seeing increase in range of browsers and we may not know from which browser users visit our site. Every browsers have their own way of being an ideal browsers and they have their own features. Making our functions and UI across all the browsers should follow certain guidelines. By ensuring browser compatibility in our SDLC, it would be a safe game to play instead of going about things in the final end. To solve common browser compatible inconsistencies, we are discussing few effective points here. Browser compatibility for modern browsers Keeping in mind, the cost and time constraints, making sure our websites work for Chrome, M...

Flexbox CSS justify-content:space-* In modern web design, Flexbox has become one of the most powerful layout tools in CSS. The justify-content property plays a crucial role in aligning and distributing space between items within a container, especially in horizontal layouts. In this article, we'll explore how to use justify-content with various values like space-between, space-around, and space-evenly to achieve optimal alignment for your web designs. Flexbox CSS justify-content: space-* Flexbox layout and its properties are a set of properties which helps to align flex-items in a container. As we have discussed in detail in our previous articles: Flexbox is a set of properties. It helps to align grid elements in a container in many ways. It also helps to realign the way elements are arranged on mobile or responsive screens without writing too much code. What is justify-content in CSS Flexbox? The justify-content ...

What is the difference between Javascript, JQuery, JQuery UI, JQuery mobile? Javascript Javascript is a programming language with its own syntax, functions, data structures and loops. Javascript is the most popular language used in web development. According to Stack overflow 2018 survey results Javascript is the most popular programming language. It has become an ubiquitous in web development. What is the difference between JQuery and Javascript JQuery is a Javascript library. It is built on top of Javascript and makes use of its functions. Jquery carries the motto “write less; do more”. JQuery is an extensive library making use of Javascript features and function within its library. JQuery framework is useful for 1) Manipulating DOM elements 2) CSS Selectors manipulation 3) Handling AJAX data for communicating with servers perform actions on specific events. 4) AJAX communication with servers 5) Animation effects 6) HTTP requests JQuery is said to have poor backwar...