DEV Community: Ryan

12 Easy and Useful JavaScript Snippets for Beginners.

Ryan — Thu, 04 May 2023 12:48:44 +0000

Maintaining a list of useful yet simple JavaScript code snippets can save a good amount of time. You can always revisit the list when you are working on a complex JavaScript app and don't want to spend too much of time building a logic for simple tasks. Let's have a look at some of these snippets that are easy-to-understand and can save a good amount of time.

1. Create an array of a range of numbers

const numbers = [...Array(15).keys()].map(x => x + 1);
console.log(numbers); //[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

2. Check if the number is Even or Odd

//Even
const num = 4;
const isEven = num % 2 === 0;
console.log(isEven); //true

//Odd
const num = 9;
const isOdd = num % 2 !== 0;
console.log(isOdd); //true

3. Get a sub-string of a string

const subStr = 'jason'.substring(1, 4);
console.log(subStr); //aso

4. Replace a string

const replacedStr = 'king'.replace('in', 'on');
console.log(replacedStr); //kong

5. Check if a string starts with or ends with a specific strings

//startsWith
const startsWth = 'arnold'.startsWith('ar');
console.log(startsWth); //true;

//endsWith
const endsWth = 'arnold'.endsWith('ld');
console.log(endsWth); //true;

6. Trim and remove all empty spaces from a string

const strWithSpace = ' ryan ';
const strWithoutSpace = strWithSpace.trim();
console.log(strWithoutSpace);

7. Get the power of a number.

//1) Using the Math.pow() method
const power = Math.pow(2, 6);
console.log(power); //64;

//2) Using the exponentiation operator
const power1 = 2**6;
console.log(power); //64;

8. Check if an object has a specific property

const name = {
 firstName: "Shawn",
 lastName: "Ronalds",
 age: 35
};
const hasProp = 'firstName' in name;
console.log(hasProp); //true;

9. Creating a copy of an object

const profile = {
 name: "John Davis",
 city: "London",
 age: '45',
 hobby: 'football'
}
const profileCopy = {...profile};
console.log(profileCopy); //{name: 'John Davis', city: 'London', age: '45', hobby: 'football'}

10. Delete a property from an object

const car = {
 brand: 'Volvo',
 topSpeed: '250mph',
 color: 'red'
}
delete car.brand;
console.log(car); //{topSpeed: '250mph', color: 'red'}

11. Remove duplicate items from an array

const arr = [1, 2, 1, 3, 4, 7, 4, 8, 9]
const removeDuplicates = [...new Set(arr)];
console.log(removeDuplicates);

12. Merge 2 arrays or 2 objects

//1) Merging arrays
const arr1 = [1, 2];
const arr2 = [3, 4]
const mergedArr = [...arr1, ...arr2]
console.log(mergedArr); // [1, 2, 3, 4]

//2) Merging Objects
const obj1 = {name: 'Larry'};
const obj2 = {age: '30'};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {name: 'Larry', age: '30'}

So, that was a short list of some of the code snippets that I feel are highly useful and yet easy to understand. Hope you find this list helpful. Have a beautiful day.

10 HTML Attributes that Make Things a Lot Easier

Ryan — Fri, 28 Apr 2023 11:55:25 +0000

With over a 100 HTML attributes available, it's almost impossible to remember them all. While we are already aware of several such attributes, there are a few we usually tend to forget or probably haven't heard of yet. At times we end up using JavaScript to add a specific functionality only to later realize that there is an HTML attribute for the same.

In this short article I've tried to list down a few HTML attributes that can in fact make things a lot simple. No doubt, you may have come across, or in fact used, some of them before. But, you are sure to find a few that can be added to your current list of 'favourite' HTML attributes.

1. high / low

You may have used the min and 'max' attributes on the meter element. But, there are two more attributes that can help you add more information to the element - the high and the low attributes. These attributes help you specify a range as shown below:

<label for="wed">Inventory on Wednesday</label>
<meter id="wed" min="0" low="45" high="95" max="100" value="70"></meter>
<br>
<label for="thu">Inventory on Thursday</label>
<meter id="thu" min="0" low="45" high="95" max="100" value="98"></meter>

In the above code, the low and the high attributes specify a range. If the value is within the range, the meter displays a green colour, and if the value is below or above the set range, the meter turns yellow.

2.type="search"

We've been using the type attribute in almost every other project, while working on forms. But, have you heard about the 'search' attribute value? Well, at least I haven't, or probably I have been living under a massive rock 😂.

<label for="website-search">Search this Website:</label>
<input type="search" id="website-search">

This value was designed for users to enter search queries. It is recommended to use it with a label tag for accessibility purposes.

Also, notice that as you start typing, the search box displays a 'X' button at the extreme right that allows you to delete the search term you are currently typing.

3. maxlength

If you've been using JavaScript to restrict the user-input to a specific number of characters, here's an attribute that can make things easy for you. Simply add the 'maxlength' attribute to your input or the textarea element and specify the number of maximum character the user can input.

<label for="name">Name</label>
<input type="text" id="name" name="name" maxlength="12">

Below is how the attribute restricts the user-input to a certain character-length.

4. open

You've probably used the details element to create a simple accordion menu. In some cases you might want to display the contents of one of the accordion menu items even before the user clicks on it. All you need to do is simply add the 'open' attribute to the menu item that you wish to display the contents of.

<div class="accordion">
  <details open>
     <summary>First Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>

  <details>
     <summary>Second Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>

   <details>
     <summary>Third Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>
</div>

In the above code, the open attribute is applied to the first details element, and therefore, in the image below, you can see that the content of the first accordion menu item is displayed.

5. readonly

You can use the readonly attribute if you want to display a default value in an input field and prevent the user from changing the same. At times, you may confuse the readonly attribute with the disabled attribute.

<label for="readonly">Readonly:</label>  
<input type="text" id="readonly" name="fruits" value="apples" readonly>
<br>
<br>
<label for="readonly">Disabled:</label>  
<input type="text" id="readonly" name="fruits" disabled>

As you can see in the image below, the readonly attribute usually has a defined value. However, the disabled attribute, on the other hand may or may not have a value. Also, a disabled input field can be recognized by its grey background.

6. selected

You may have used the checked attribute to display a 'checkbox' or a 'radio' button in a checked state. Here's a similar attribute meant for displaying a selected option within the select element.

<select id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango" selected>Mango</option>
  <option value="orange" >Orange</option>
</select>

Here's how it looks like on the screen:

7. download

If you have downloadable resources on your website, you can use the download attribute on your download links. When clicked, the resource will instantly be downloaded to the users system.

 <a href = "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg" download>Download Image </a>

Here's a .gif image showing the download attribute in action:

8. step

If you want a user to input only a specific increment of a number, you can use the step attribute and set its value to the desired number. For instance, if you want your users to input a number that's not an odd number, you can set it to an even number, let's say 2.

<label for="units">Units Purchased:</label>
<input type="number" id="units" name="units" step="2" min="0">

Below is the step attribute in action:

9. contenteditable

If you want certain sections of your website to be editable, you can use the contenteditable attribute on the elements in those sections.

<p contenteditable>This content is editable. All you need to do is simply click on this paragraph and start editing</p>

Note that the content is not permanently edited by adding the contenteditable attribute alone.

10. title

If you do not want to spend too much of time creating a custom, beautiful-looking tooltip, you can use the title attribute which does pretty much the same thing but without all the jazz.

<p title="Free High Quality Images">Unsplash</p>

Here's how the title attribute displays the tooltip:

So, this was a short list of 10 HTML attributes that I feel can make your task a lot easier. In case you know of any such attributes that are equally or more useful, would love to know about them in the comment section below. Thanks for reading. Have a beautiful day.

Create a Simple Digital Clock Using HTML, CSS and JavaScript

Ryan — Tue, 25 Apr 2023 08:41:42 +0000

If you already possess the basic HTML, CSS and JavaScript skills, you know it's time to start building projects. It would be wise to get started building a few easy ones then moving up the ladder step by step. One such beginner-friendly projects would be a 'Digital Clock'

In this article, we'll learn to build a simple Digital Clock using some of the basic web development skills that you currently possess. We'll not work much on the UI of the clock, but in fact focus a lot on how to use JavaScript to put everything together to build the clock. so, let's get started.

First let's work on the markup. All we need is a single div element with a class of clock.

<div class="clock">16:20:35</div>

This div element will contain the digits of the clock in the hh:mm:ss format. For now, I've simply added some placeholder digits, which will later be replaced dynamically with the current time using JavaScript. Now, let's add a few CSS styles.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600&display=swap');

body{
  background: #000;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock{
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 6rem;
  letter-spacing: 1rem;
  font-weight: bold;
}

In the above styles, notice that we are using a custom Google font named Orbitron, which is best-suited for a digital clock. I've also added a few flex properties to the body simply to
vertically and horizontally center the clock. Lastly, a few styles have been added to the .clock div to slightly increase the font size and add a bit of a spacing. Below is a screen shot of what the clock looks like.

Lastly, let's start working on the most important part, the JavaScript. First let's create a variable named clock. This variable will store the div element that has a class of clock.

let clock = document.querySelector('.clock')

Now, we need to create a function to get the current hours, minutes and seconds. We'll name the function as updateTime.

function updateTime(){
  let hours = new Date().getHours();
  let minutes = new Date().getMinutes();
  let seconds = new Date().getSeconds(); 
}

In the above function, the new Date() constructor gets the current date and time. The 3 methods getHours(), getMinutes(), getSeconeds() give us the current hour, minutes and seconds respectively. If we run this function in the console, we get:

In the above screenshot, you can see that the function returns hours, minutes and seconds as 12, 58 and 35. That's because the current time on my system is 12:58:35.

The next thing we need to do is simply insert the hours, minutes and the seconds in the div element which has the class of clock. For this, we'll be using the innerText property. Add the below line inside the function updateTime().

clock.innerHTML = `${hours}:${minutes}:${seconds}`;

One additional thing we need to do is add an extra '0' if the digits are below 10. For instance if the time is 1:15:5, we want it to display 01:15:05. Add the below 3 lines of code in the function updateTime() just before the line clock.innerText = .....

hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

In the first line of code above, all we are trying to say is 'if the hours is less than 10, which means, if it is anything between 0 to 9, add an extra 0 in front of it. Or else, keep it as it is'. We are doing the same thing with the minutes and the seconds.

So far, we have the below JavaScript code:

let clock = document.querySelector('.clock')

function updateTime(){
  let hours = new Date().getHours();
  let minutes = new Date().getMinutes();
  let seconds = new Date().getSeconds();

  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

 clock.innerHTML = `${hours}:${minutes}:${seconds}`;
}

Now, all we need to do is simply display the time on our screen by calling the function updateTime() at the very end, outside the function block.

let clock = document.querySelector('.clock')

function updateTime(){
  let hours = new Date().getHours();
  let minutes = new Date().getMinutes();
  let seconds = new Date().getSeconds();

  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

 clock.innerHTML = `${hours}:${minutes}:${seconds}`;
}
updateTime();

Here's what our clock looks like:

But, our clock doesn't dynamically update yet. You need to refresh every time you want to check the updated time. So, to dynamically update our clock every second, we will be using the setTimeout() method. Add the below line inside the function block at the very end.

setTimeout(updateTime, 1000);

This setTimeout() method will call the function updateTime every 1000 milliseconds, i.e. after every second. So, the final JavaScript code that we have is:

let clock = document.querySelector('.clock')

function updateTime(){
  let hours = new Date().getHours();
  let minutes = new Date().getMinutes();
  let seconds = new Date().getSeconds();

  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

 clock.innerHTML = `${hours}:${minutes}:${seconds}`;

setTimeout(updateTime, 1000);
}
updateTime();

If you've done everything right, this is how your digital clock will look like:

In the above .gif image, you can notice that the clock is slightly shifting left and right, and that is because the digits do not have an even width. One of the easiest way to eliminate this issue is to remove the justify-content property given to the body element and give a margin-left to the clock div. I found 'margin-left:30%' seemed good enough to center the clock on larger displays.

So, that was a simple tutorial on how to create a digital clock using HTML, CSS and JavaScript. Hope you like it. Have a beautiful day.

List of 70+ JavaScript Projects You Can Work On

Ryan — Mon, 17 Aug 2020 16:46:27 +0000

One of the best ways to learn JavaScript is by building stuff. But, if you are just getting started, there’s one question you would probably ask yourself. What do I build? Well, a quick search on YouTube for ‘JavaScript Projects’ may answer that question.

However, with 1000s of videos available, you might be a bit tempted to check out each one of them. Well, obviously with limited time at hand, that’s definitely not possible.

In this post, I’ve tried my best to put together a list of some awesome JavaScript projects that will help you take your JavaScript skills to the next level. So, here’s the list.

1. Random Background Color

2. Responsive Navbar Tutorial

3. Custom Progress Bar

4. Simple Countdown Timer

5. JavaScript Responsive Sidebar Menu

6. Dynamic Website Footer Date

7. Random Quotes Project

8. Random Joke Generator

9. Random Name Generator

10. Random Meal Generator

11. Collapsible Navigation Menu

12. JavaScript Modal

13. Custom Confirm Window

14. Accordion Menu

15. Smooth Scroll

16. JavaScript Counter

17. Slideshow

18. Star Rating System

19. Image Gallery

20. Text Shadow on Mouse Move Effect

21. Type Writer Effect

22. Adding a Preloader

23. Preloader Animation

24. Live Website Visits Counter

25. Tabs

26. Animated Tabbed Layout

27. Custom Cursor

28. Form Animation

29. Custom File Upload Button

30. To-do List

31. Another To-do List, Why not?

32. Image Slider

33. Split Screen Slider

34. Typewriter Effect

35. Line Through Effect

36. Page Scroll Indicator

37. Hide Navbar on Scroll

38. Change the Navigation Style on Scroll

39. Animated Navbar

40. Image Lightbox

41. Image Password Strength

42. Form Validation

43. Custom Video Player

44. Weight Converter

45. Quiz App

46. Another Quiz App

47. Previewing Image Before File Upload

48. Filterable List

49. Sort a Table

50. Beat Maker

51. Drum Kit

52. Piano

53. Password Generator

54. JavaScript Calendar

55. Speed Typing Game

56. Simple Analog Clock

57. Create A Color Palette

58. Click and Drag to Scroll

59. Calculator

60. Scientific Calculator

61. Meditation App

62. BookList App

63. Weather App

64. PIN Pad Login Screen

65. URL Shortener

66. Bookmarker Application

67. Virtual Keyboard

68. Shopping Cart

69. Text to Speech

If you are a game developer, you would definitely want to check out the below video tutorials.

70. Memory Game

71. Rock Paper Scissors Game

72. Pong Game

73. Whack A Mole Game

74. Snake Game

75. Connect Four

76. Simple Flappy Bird

77. Space Invaders

78. Tetris

Creating A Responsive Masonry Layout Using The CSS column-count Property

Ryan — Thu, 09 Jul 2020 10:31:49 +0000

A masonry layout turns out to be a perfect choice for websites with images as their 'highlight'. Two such websites that make the best use of a masonry layout are 'Pinterest' and 'Unsplash'.

One of the best ways to create a responsive masonry layout is to use CSS Grid. However, if for some reason, you do not wish to use CSS Grid and are looking for a comparatively quicker solution, the CSS column-count property can help you out.

So, let's quickly have a look at the code starting with the HTML.



<div class="container">
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/300x380"></div>
        <div><img src="https://source.unsplash.com/300x200"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/200x400"></div>
        <div><img src="https://source.unsplash.com/280x350"></div>
        <div><img src="https://source.unsplash.com/200x360"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/250x320"></div>
        <div><img src="https://source.unsplash.com/200x200"></div>
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/200x340"></div>
        <div><img src="https://source.unsplash.com/200x350"></div>
        <div><img src="https://source.unsplash.com/200x250"></div>
   </div>

In the above code, we simply have a div with a class of container. Wrapped inside this div are 14 images with different heights and widths. All of these are placeholder images from Unsplash, which is without a doubt, one of the best websites for free images.

Moving to the CSS, let's first add a few styles to the body and the div that has the class of container.



body{
    background-color: #111;
}

.container{
  padding: 1rem;
  column-count: 4;
}

So, we've added a background color to the body, some padding to the .container div and, most importantly, defined the number of columns for our layout.

However, in the image above, notice that the images are not occupying the entire width of the column that they are placed in. So, let's give each of these images a width of 100% and also a little bit of margin at the bottom.



img{
  width: 100%;
  margin-bottom: 1rem;    
}

And now, we have a decent looking masonry layout. But, if we resize our browser and move to the smallest screen-size, we would still have 4 columns. So, let's add some media queries.



@media only screen and (max-width: 1000px){
  .container{
    column-count: 3;
  }
}

@media only screen and (max-width: 800px){
  .container{
    column-count: 2;
  }
}

@media only screen and (max-width: 400px){
  .container{
    column-count: 1;
  }
}

And our simple responsive masonry layout is ready.

No doubt, there are several other ways to achieve the same results. However, if you are looking for a quick solution for a not-too-complex-layout, the CSS column-count can do the trick for you. Below is the complete code.

HTML



<div class="container">
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/300x380"></div>
        <div><img src="https://source.unsplash.com/300x200"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/200x400"></div>
        <div><img src="https://source.unsplash.com/280x350"></div>
        <div><img src="https://source.unsplash.com/200x360"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/250x320"></div>
        <div><img src="https://source.unsplash.com/200x200"></div>
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/200x340"></div>
        <div><img src="https://source.unsplash.com/200x350"></div>
        <div><img src="https://source.unsplash.com/200x250"></div>
   </div>

CSS



body{
    background: #111;
}

.container{
  padding: 1rem;
  column-count: 4;
}


img{
  width: 100%;
  margin-bottom: 1rem;    
}



@media only screen and (max-width: 1000px){
  .container{
    column-count: 3;
  }
}

@media only screen and (max-width: 800px){
  .container{
    column-count: 2;
  }
}

@media only screen and (max-width: 400px){
  .container{
    column-count: 1;
  }
}

Creating a Fake 3D Effect in CSS Using a Single Div

Ryan — Mon, 29 Jun 2020 09:39:43 +0000

I recently came across an article titled Faking 3D Elements with CSS by Bradley Taunt. It's a very easy-to-understand article on how to create a fake 3D effect using not more than 2 divs.

I decided to recreate a similar effect using just a single div, and I guess the result seemed quite close enough. So, let's have a look at how we can achieve it.

As mentioned, we'll only require a single div. In your HTML, add a div and give it a class of circle.



<div class="circle"></div>

Now, let's start working on the CSS. First we'll add the below styles to the div with the class of circle



.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
}

Add a few flexbox properties to the body to vertically and horizontally center the circle on the page.



body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Now, we'll require one more circle that will be placed inside the main circle. This inner circle will be mainly responsible for producing the desired fake 3D effect. To create the inner circle we will be using the ::before pseudo element.



.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
}

Place it exactly at the center of the main circle by adding the necessary flexbox properties to the center class.



.circle{
  ...
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

By now, we have something that looks like this

For the final 3D effect, add the below two CSS properties to the ::before pseudo element.



.circle::before{
  ...
  ...
  border-radius: 50%;
  filter: blur(18px);
}

And lastly, let's give the body a background-color of #990000, which is a shade of red.



body{
  ...
  ...
  background: #990000;
}

Hold on. We are still missing one final thing - the drop shadow. We'll achieve it by using the ::after pseudo element.



.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}

Notice that the ::after pseudo element has been given the position of absolute. Make sure that it is positioned in relation to the main div with the class of circle. So, give the main div a position of relative.



.circle{
  ...
  ... 
  position: relative;
}

And our fake 3D effect is ready. Pretty simple, isn't it?

Below is the final code

HTML



<div class="circle"></div>

CSS



body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #990000;
}

.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
  border-radius: 50%;
  filter: blur(18px);
}

.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}

10 Web Development YouTube Channels You Probably Didn't Know About

Ryan — Sun, 28 Jun 2020 14:12:09 +0000

If you are a web developer who is constantly searching for tutorials on YouTube, you’ve definitely come across Traversy Media, Dev Ed, The Net Ninja and some other cool instructors creating awesome content for web developers. However, there are a few more you probably didn’t know about.

Of course, most of these channels may not presently be as popular as the ones mentioned above, but the content they create is truly informative. So, let’s have a look at some of these:

Coding Addict

This channel by John Smilga features a whole bunch of high quality tutorials on various topics such as Bootstrap, CSS, React, ES6, etc. Instead of simply talking about the syntax, John actually walks you through the entire process of building projects using various web technologies.

dcode

Created by Dom, a web developer from Australia, the channel has 100s of awesome tutorials on technologies like JavaScript, Rust, PHP, CSS and many more. Make sure to check out the JavaScript playlist that has over 180 videos for beginners, intermediate and experts.

codeSTACKr

The channel has some great content related to HTML, CSS, JavaScript, SASS, React.js and Node.js to name a few. Jesse, the owner of the channel has the right teaching skills to make complicated concepts look simple. He also has a few 'Learn X in Y minutes' styled videos that are worth checking out.

Drew Ryan

Want to learn how to build a complete responsive website using Bootstrap? Drew Ryan has some amazing tutorials in store for you. You can also check out his premium courses on Udemy.

Codevolution

This is without a doubt, one of my go-to channels to learn React. Not just React, the channel has a lot of great content related to CSS, Vue.js, mongoDB, Node.js, etc. At the time of writing this post, the channel has over 180 thousand subscribers and definitely deserves a lot more than that.

Online Tutorials

If a CSS Ninja is what you aspire to be, ‘Online Tutorials’ is a channel you should be subscribing to right away. An interesting thing about the channel is that the tutorials contain no audio explanation. However, the instructor walks you through the entire project from scratch, ensuring that the pace is right, so that you are able to code along.

Code Explained

One of the best ways to move from being a JavaScript beginner to an intermediate is to build apps. If you are looking for code-along video tutorials on how to build fancy JavaScript apps, check out Code Explained. Apart from helping you build a To-do list, a budget app or a calculator, the instructor also show you how to create complex games such as the Flappy Bird, Ping Pong and Tetris.

Ania Kubów

If building JavaScript games is what excites you the most, this channel is sure to further add up to your excitement. Minesweeper, Tetris, Candy Crush, Pac Man and of course, the classic snake game, this channel can help you build all of these. Apart from games, the channel also has short videos on various concepts related to Vanilla JavaScript and React.js.

FollowAndrew

Apart from web development, the channel also has a good number of videos on how to design user interfaces in Adobe XD. Moreover, you can also find some beginner-friendly Photoshop tutorials on the channel.

Tyler Moore

Finally let's talk a bit about WordPress. If you've just got a client who urgently needs a website, WordPress comes at your rescue. However, if you haven't worked with WordPress before, a few tutorials can definitely help get started. On this channel, Tyler Moore shows you how to build beautiful looking WordPress websites step by step with no step skipped.

So, these were the 10 YouTube channels I feel are worth bookmarking and definitely deserve a lot more subscribers and likes. If you know of a similar YouTube channel that is worth bookmarking, do let us all know about it.

Creating the Classic Marquee Effect Without The Marquee Tag

Ryan — Thu, 25 Jun 2020 14:51:12 +0000

Remember those good old days when you visited your favourite website and came across a line of text or probably a row of images that entered the screen from the right and moved out of your view to the left? And, when you hovered over it, it paused. That was pretty cool, right?

As a developer, you most likely have been tempted to create the same effect at least once. But, then you knew it wouldn't be wise to use the classic marquee tag anymore, now that it's deprecated. Of course, you probably got it done in the end using a few CSS properties.

I personally had a hard time getting the effect right, when I first tried it. I used the text-indent property, and sometimes the left and the right properties. But, using transform made the task quite simple.

So, in this short post, let's have a look at how we can achieve the popular classic marquee effect using just a few lines of HTML and CSS.

For the markup, all we need is just 2 divs. Give the parent div a class of marquee, and the child div will contain the line of text that you want to be displayed.


 HTML
<div class="marquee">
  <div>A Million Reasons To Love Web Development</div>
</div>

Now, let's add the CSS. First, let's vertically and horizontally center the text by adding a few Flexbox properties to the body.



body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Add the below styles to the div with the class of marquee.



.marquee{
  width: 80%;
  background: violet;
  text-transform: uppercase;
}

Now, style the div that contains your line of text.



.marquee div{
  font-size: 3rem;
  font-family: verdana;
}

So far this is what we have.

Notice, that the text wraps and moves to the next line. To avoid this, add the white-space property to the marquee div and set its value to nowrap.



.marquee{
  ...
  ...
  white-space: nowrap;
}

Now, its time to create our animation rule. We'll name it animate.



@keyframes animate{
  100%{
    transform: translate(-100%, 0);
  }
}

Add it to our child div that contains the line of text.



.marquee div{
  ...
  ...
  animation: animate 5s linear infinite;
}

But, we are facing 2 problems. First, the animation is not starting from the left as we want it to. Second, notice that the animation breaks and restarts. (Also, ignore the overflowing text. We'll work on it later.)

To solve this, add the below 2 lines of CSS to the div that contains the line of text.



.marquee div{
  ...
  ...
  padding-left: 100%;
  display: inline-block;
}

The animation may now seem a bit fast. Slow it down by increasing the animation duration from 5s to 10s. And of course, set the overflow to hidden for the div with the class of marquee.

Below is the final code.

HTML



  <div class="marquee">
    <div>A Million Reasons To Love Web Development</div>
  </div>

CSS



body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee {
  width: 80%;
  background: violet;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.marquee div {
  font-size: 3rem;
  font-family: verdana;
  padding-left: 100%;
  display: inline-block;
  animation: animate 10s linear infinite;
}

@keyframes animate {
  100% {
    transform: translate(-100%, 0);
  }
}

If you wish to pause the animation when one hovers over it, simply add the below style for the hover state.



.marquee:hover div{
  animation-play-state: paused;
}

So, that was a short tutorial on how to create a marquee effect without using the marquee tag. Hope you like it.

A simple Accordion Menu Using HTML, CSS and JavaScript.

Ryan — Tue, 23 Jun 2020 15:08:36 +0000

Hey awesome devs. Let's have a look at how we can create a simple accordion menu using HTML, CSS and just a few lines of JavaScript. Let's get started with the HTML.

First, create a div with the class of container

<div class="container">
</div>

Within this div, let's add a paragraph and give it a class of title.

<div class="container">
<p class="title">Do you accept online payements?</p>
</div>

Also, within the same container div, add another paragraph and give it a class of content. Fill this paragraph with some dummy text.

Copy the above two paragraph tags, and paste them two more times, so that you have 3 pairs of paragraph tags.

Finally, inside our paragraphs with the class of title, add a span tag, which contains a + sign . This sign will change to - when clicked by the user on the corresponding title. Below is what your HTML code should look like by now.

<div class="container">
  <p class="title">Do you accept online payements?<span>+</span></p>
  <p class="content">Lorem ipsum dolor, sit amet consectetur 
  adipisicing elit....</p>
  <p class="title">Do you have a return policy?<span>+</span></p>
  <p class="content">Lorem ipsum dolor, sit amet consectetur 
  adipisicing elit....</p>
  <p class="title">What is the average delivery time?<span>+</span></p>
  <p class="content">Lorem ipsum dolor, sit amet consectetur 
  adipisicing elit....</p>
</div>

And that's all we need for the HTML. Now, let's get started with the CSS by first adding some basic reset.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Add the below styles to the body and the div with the class of container.

body{
  background-color: #2BBA9E;
  font-family: Verdana;
}

.container{
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10%;
}

Add styles to the paragraphs which have the class of title and content

.title{
  background-color: #202D3C;
  padding: .8rem;
  border-bottom: 1px solid #000;
  cursor: pointer;
  position: relative;
  user-select: none;
  color: #fff;
  letter-spacing: .1rem;
}

.content{
  padding: 1rem;
  line-height: 1.5rem;
  display: none;
}

In the above code, notice that we have given display: none to the paragraphs with the class of content. Now, all you can see are the titles of the accordion menu. Later we will be changing the display to block using a class, which will be added with the help of JavaScript.

At last, we need to style the span which contains the + sign.

span{
  position: absolute;
  right: 1rem;
}

And this is what we have so far.

Now, it's time to move to the most crucial part, the JavaScript.
First select all the paragraphs with the class of title and save these to a variable.

let title = document.querySelectorAll(".title");

Let's use a for loop to loop over each of these.

for(let i = 0; i < title.length; i++){
}

Add an event listener of click to each of them.

for(let i = 0; i < title.length; i++){
title[i].addEventListener("click", function(){
 })
}

Now, we need to select the specific content, which corresponds to the title that the user clicks. For this, we will be using the nextElementSibling property. So, here's what it would look like.
this.nextElementSibling

Of course, understanding the this keyword can be a bit tricky. But, just keep in mind that in this case, the this keyword refers to the title that the user clicks on.

Let's save the above line of code to a variable named result. And, here's the code we have so far.

for(let i = 0; i < title.length; i++){
title[i].addEventListener("click", function(){
  let result = this.nextElementSibling;
 })
}

For our accordion to work, we just need one more line of code. Remember we had given the paragraphs with the class of content a display of 'none'? Well, it's time to change the display to block when the user clicks on a corresponding title.

Create a CSS class of active and add a single property of display: block.

.active{
  display: block;
}

Using the classList property, let's add the active class to paragraphs with the class of content, so that it is displayed as block. However, when the user clicks on it again, we want to change the display back to none. So, we will be using classList.toggle.

for(let i = 0; i < title.length; i++){
  title[i].addEventListener("click", function(){
    let result = this.nextElementSibling;
    result.classList.toggle("active");
  })
}

And we are almost done. The only thing that we need to work on now is the span which contains the + sign. The idea is simple. The + sign will be shown when the content is hidden, and will be replaced with a - sign when the content is shown. We can use the if statement to do the same.

So, our final JavaScript code will look like.

let title = document.querySelectorAll(".title");

for(let i = 0; i < title.length; i++){
  title[i].addEventListener("click", function(){
    let result = this.nextElementSibling;
    result.classList.toggle("active");

     if(this.firstElementChild.innerText === "+"){
       this.firstElementChild.innerText = "-"
       }
    else{
      this.firstElementChild.innerText = "+"
    }

  })
}

And that's how you create a simple accordion menu using HTML, CSS and just a little bit of JavaScript. Hope you like it.