DEV Community: Manoj Rathod

Random Quotes Generator

Manoj Rathod — Wed, 23 Mar 2022 19:09:46 +0000

If you like to read quotes then this quotes generator is for you.

Website Github Feel free to give me a ⭐

Movie app using JavaScript

Manoj Rathod — Sun, 20 Mar 2022 12:12:49 +0000

This is a movie app made using API.

Movie App Github Feel free to give a ⭐

Fake Store App using API

Manoj Rathod — Wed, 16 Mar 2022 08:04:13 +0000

This is a simple store app made using fake store api.

Project Github

Weather app using Javascript

Manoj Rathod — Sun, 13 Feb 2022 17:59:59 +0000

I have made Weather-app using API in JavaScript
Website Code

Gradient Generator Project

Manoj Rathod — Fri, 28 Jan 2022 14:58:35 +0000

I've created Linear Gradient Project in CSS.
Github Project

This is a Open Source.
Contributions are always welcome!

Email Newsletter template using CSS

Manoj Rathod — Fri, 21 Jan 2022 11:32:56 +0000

This is the tutorial about how to create Minimalistic Newsletter using CSS.

Demo

HTML code: -

<div class="container">
  <h1>Subscribe to the Newsletter</h1>
  <div class="mail_box">
  <input type="email" placeholder="Enter your email">
  <button>Submit</button>
  </div>
  <p class="footer">Created with ❤ by <span>Manoj Rathod</span></p>
</div>

CSS code: -

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  background: #F5EEDC;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container, .mail_box{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 80%;
  height: 350px;
  padding: 50px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.mail_box{
  position : relative;
  border: 2px solid #0092ff;
  border-radius: 5px;
  width: 400px;
  height: 50px;
  padding: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}
.mail_box input{
  background: none;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #0092ff;
}
input::placeholder{
  font-size: 15px;
}
button{
  position: absolute;
  right: -7px;
  padding: 9px 20px;
  border: 2px solid #0092ff;
  border-radius: 5px;
  outline: none;
  margin-right: 10px;
  background: #0092ff;
  color: #fff;
  cursor: pointer;
}
button:hover{
  background: #0d6efd;
}
.footer{
  position: absolute;
  bottom: 10px;
}
.footer span{
  color: #0d6efd;
}

Auto typing text animation in JavaScript

Manoj Rathod — Fri, 21 Jan 2022 08:50:16 +0000

Demo:- https://codepen.io/iammanojrathod/pen/PoJLExZ

This is Auto typing text effect using simple JavaScript.

CSS code: -

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1C6DD0;
  color: #000;
  font-size: 30px;
  font-weight: 700;
}

JavaScript: -

const text = "This is the typing text effect in JavaScript";

let index = 0;

function writeText() {
document.body.innerHTML = text.slice(0, index);

  index++;

  if (index > text.length) {
    index = 0;
  }
};

setInterval(writeText, 100);

Animated hamburger menu

Manoj Rathod — Tue, 18 Jan 2022 14:43:40 +0000

Demo: - https://codepen.io/iammanojrathod/pen/RwLOZGE

HTML code: -

  <div class="button">
        <div class="btn"></div>
    </div>

CSS code: -

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    height: 100vh;
}
.button{
    width: 100px;
    height: 100px;
    border: 3px solid white;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.btn{
    width: 70px;
    height: 6px;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}
.btn::before,
.btn::after{
    content: '';
    position: absolute;
    width: 70px;
    height: 6px;
    background-color: white;
    border-radius: 10px;
    transition: all 0.5s ease;
}
.btn::before{
    transform: translateY(-20px);
}
.btn::after{
    transform: translateY(20px);
}
.button.open .btn{
    background: transparent;
}
.button.open .btn::before{
    transform: rotate(45deg) translate(1px, -1px);
    background-color: red;
}
.button.open .btn::after{
    transform: rotate(-45deg) translate(-1px, -1px);
    background-color: red;
}

JavaScript code: -

const button = document.querySelector('.button');

let menuOpen = false;

button.addEventListener('click', () => {
    if(!menuOpen){
        button.classList.add('open');
        menuOpen = true;
    } else {
        button.classList.remove('open');
        menuOpen = false;
    }
})

Random background color changer in JavaScript

Manoj Rathod — Mon, 17 Jan 2022 12:30:51 +0000

Demo:- https://codepen.io/iammanojrathod/pen/PoJLQvQ

HTML code: -

<button id="btn">Click me</button>

CSS code: -

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button{
  background: orange;
  color: black;
  outline: none;
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 3px 3px 5px;
}
button:active{
  transform: translate(3px, 3px);
}

JavaScript code: -

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  document.body.style.background = randomBg();
  console.log(randomBg());
});

function randomBg() {
  return `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
}

How to create Advanced Button hover effect in HTML and CSS

Manoj Rathod — Fri, 14 Jan 2022 09:35:40 +0000

Here is code for creating advanced button hover effect

See demo:- (https://codepen.io/iammanojrathod/pen/vYevVap)

HTML code:-

<header>
 <button class="btn1">Button1</button>
  <button class="btn2">Button2</button>
</header>

CSS code:-

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
}
button{
  margin-right: 20px;
}
.btn1{
  color: #fff;
}
.btn2{
  color: #000;
}
.btn1, .btn2{
  position: relative;
  background: transparent;
  padding: 20px 30px;
  font-size: 30px;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 10;
  trasition: all 0.5s ease;
}
.btn1:before,
.btn1:after,
.btn2:before,
.btn2:after{
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  z-index: -1;
} 
.btn1:before {
  left: 0;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn1:hover:before{
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn1:after {
  right: 0;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn1:hover::after{
 transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn2:before {
  left: 0;
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn2:hover:before{
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn2:after {
  right: 0;
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn2:hover::after{
 transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn1:hover{
  color: #000;
}
.btn2:hover{
  color: #fff;
}

Thanks You ❤