DEV Community

loading...

"For loop developer" how to use pug/jade, scss, javascript, python(backend) - (Stack Tutorial 1)

nikhilroy2 profile image Nikhil Chandra Roy ・2 min read

This tutorial we will learn how to use for loop at

  • Pug/Jade
  • Scss
  • Javascript
  • Python (BackEnd) For front-end code editor you can use codepen and backend python Programic

1. Pug/Jade

Pug will compile html and for online code editor pug/jade is the best way to practice code such as codepen, codesandbox, Web Maker (chrome extension).

Pug/Jade Example 1

- var max= 10+1;
- for(var i = 1; i < max; i++)
    input(value="Hello Input " + i, class="input"+i)

Enter fullscreen mode Exit fullscreen mode

There are several way to loop pug/jude like while loop, each will will discuss it later.

2. SCSS
Scss is the css preprocessor to compile scss extension to css, vs live sass compiler one of the best extension I ever see.

Scss Example 1



$count: 10;
@for $i from 1 through $count {
  [class*=input]{
    border: solid red;
    animation: animate 10s ;
    @keyframes animate{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    &:nth-child(#{$i}){
      animation-delay: #{$i}s;
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

3. Javascript
Javascript is one of the most useful programming language for web programmer.
for javascript there are couple of way to loop for example: do, while, for, (foreach,map,filter)=array etc
for this tutorial we are going to learn just basic about for loop
Javascript Example1


let input = document.querySelectorAll('input');
for(let i = 0; i< input.length; i++){
  input[i].style.setProperty('margin','15px')
}

Enter fullscreen mode Exit fullscreen mode

4. Python
Python is one of the best choices for backend development with Django framework, so we will go to keep that beautiful language, and also it is very easy to learn.
Python Example1

for i in range(1,20+1):
    print(i)

Enter fullscreen mode Exit fullscreen mode

Python Example2

country = ["Bangladehs", "India", "Pakistan"]
for c in country:
    print(c)

Enter fullscreen mode Exit fullscreen mode

This is our short tutorial, if you like this tutorial please like, comment, follow. I will encourage by you to do more posts here.
Thanks all.

Discussion (0)

Forem Open with the Forem app