We will create an app that allows user to upload an image and then we will display it in the canvas. First let’s create a file inputbox . Also create a canvas to display the image. <div> <input type=”file” id=”fileinput” accept = “image/*”> </div> <canvas id= “canvas”></canvas> type = file ; to say that the input-box accepts …
Continue reading “Draw an image in canvas using Javascript ⌨️”
Create an awesome effect on selecting text using css. First we need to create a para with some text. <p class=”highlight-text”>Select the text to see magic . </p> Now let’s add a ::selection pseudo selector on an element to style text within it when selected. .highlight-text ::selection { background : #738BFA; color : white; } To …
Will create a super bouncing loader in css . First we need to create 3 dots , to create a loader. <div class = “loader”> <div></div> <div></div> <div></div> </div> Add some css to make the div to fill whole screen. Set the loader as flex-box and set all div inside loader to center vertically using align-items: center …
There is no built-in reverse method present in String object to reverse a string.But we can reverse a string by, Convert the string to array , using split method. Reverse the array. Join the reversed array. function reverse (string) { return string.split(”).reverse().join(); } That is you have finished reading small and sweet article. 🤩😎. Follow Javascript …
Algorithm: Create a function that executes every second using setInterval. Get the total number of minutes. Convert that into seconds and store in a global variable. Decrement the seconds by “1” for each second. Check if the seconds reaches 0. If true then alert the user and clear the timer. Coding time! Ready→ Set → …
Continue reading “Creating a Pomodoro Timer in JavaScript in 10 Lines of Code”
The typeof operator returns a string indicating the type of the unevaluated operand.(source: MDN) Numbers 2.String 3. Booleans 4.Object 5. Function 6.undefined 7.Symbol Remember I referred here for writing this article. Follow Javascript Jeep🚙 for more interesting Javascript tips.
The styleSetter function will return a function that has a local reference to the element that we have passed to styleSetter function so this is stored in the scope of the function which is returned by the function styleSetter . Follow Javascript Jeep🚙 🥶.
Learn basic features of typescript Create a new file with extenstion .ts ,say add.ts In that file we will create a variable a , then assign different types of values then see what typescript says When we compile the code using tsc add.ts . It generates a.js file in the same folder . And it doesn’t reports any error. So …
Continue reading “Learn TypeScript:Part 2 → Type declaration.”
First part in learning TypeScript. What is TypeScript ? TypeScript is modern JavaScript + types . TypeScript is an open-source programming language developed and maintained by Microsoft. Typically Typescript is Javascript with types. So that the type error and some of data type related bugs can be resolved . It is highly useful in large projects. Why TypeScript? …
Let’s write a function to return a random element from an array. We can use Math.random() to generate a number between 0–1(inclusive of 0, but not 1) randomly. Then multiply the random number with the length of the array. floor to result to make it whole number . That’s it we find the random Index. Let’s …
Js Jeep 🚙