Creative Technocrayts

Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...

Hide show input fields based on select value Many times, while learning a new technology or a framework, it is not sufficient to read just the documentation and syntax, we need to practice. Many of us may try on our own sometimes things will work out for us sometimes we don't know how to evaluate ourselves. All our recent practice articles were published in that thought of giving readers a practice in jQuery  concepts.  Follow our FB page @CreativeTechnocrayts Other jQuery practice articles 1. jQuery DOM functions and array 2. DOM manipulation in jQuery 3. Daily ui practice - Input range sliders Subscribe to Creative Technocrayts and get updates in front end development and UI / UX. Some of us might run into a problem of  showing input value based on user selecting an option from the dropdown. We can achieve that in many ways.If the user is not selecting a value, the form is incomplete so the user cannot submit the form To check whether the select value is s...

How to check whether at least one input is selected using jQuery When building forms, it's often necessary to ensure that users make a selection before submitting. This is especially true for options like checkboxes, where users might need to choose at least one option. In this article, we'll show you how to easily check if a checkbox is selected using jQuery and how to prompt users to select at least one option before submission. For instance, consider developing a survey form where users need to select their preferred communication methods (Email, SMS, etc.). If none are selected, it's important to notify the user to make a selection before they can proceed. How to check that using jQuery When a select option is checked checked attribute is added. To check whether any of it is checked, :checked is used in jQuery. If any of the checkboxes have the checked attribute, then the user is allowed to submit. How to check whether an el...

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...

A Fantastic Year of Learning: Creative Technocrayts' 2018 Rewind Wow!! 2018 was a fantastic foundational year for us, Creative Technocrayts. The skills we mastered that year—like implementing **advanced CSS layout techniques (Flexbox)**, pioneering **Core Web Vitals concepts** via Google’s AMP, and streamlining UI design with **Font Awesome 5**—are still **critical for modern high-performance web development today.** 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 the Google+ community and Facebook page, apart from Twitter and LinkedIn, and we are so happy about that. Thank you guys :) It's time for us to look back at this awesome year, 2018!!! Daily UI ...

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: $(...