Posts

Showing posts from April, 2021

HTML CSS Bat Ball Hover Effect

-
Image
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transform</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hover on the bat ... </h1> <div class="field"> <img class="bat" src="img/bat.png"> <div class="ball"> </div> </div> </body> </html> CSS h1 { font-size : 50px; text-align : center; font-weight: bolder; font-family: 'Segoe UI'; } .field { border : 5px dotted green; background-color: rgba(4, 145, 4, 0.2); width : 85%; height : 550px; margin : auto; padding : 30px; } /***************** bat **************...
Post a Comment
Read more

Get Your Geo Location

-
Image
  HTML + CSS + JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geo Location</title> <style> body { font-family: 'Courier New', Courier, monospace; } button { font-size: 18px; padding: 10px 5px; cursor: pointer; } </style> </head> <body> <div> <h3>Click the button to get your coordinates.</h3> <button onclick="getLocation()">Know Your Geo Location...</button> <h1>Latitude : <span id="lan"></span></h1> <h1>Longitude : <span id="lon"></span...
Post a Comment
Read more

Simple HTML Form

-
Image
Ingredients :  HTML  CSS  Main Focus Point : CSS  outline border  box-shadow transition   HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input Focus Hover</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <input type="text" placeholder="First Name" name="" id=""> <input type="text" placeholder="Last Name" name="" id=""> <input type="text" placeholder="Email" name="" id=""> <input type="text" placeholder="Phone" name="" id=""> <input type="submit" value="Submit Your Info"> </div> </body> </html> CSS * { margin...
Post a Comment
Read more

Half Diamond By HTML & CSS

-
Image
  If you are searching for How to make Half Diamond by HTML & CSS? then it might be what you are looking for...  Ingredients : HTML  CSS Main Focus Point : grid  grid-template-areas   place-items    transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Half Diamond</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- .box#box-$*6>p.text{$} --> <div class="box" id="box-1"> <p class="text">1</p> </div> <div class="box" id="box-2"> <p class="text">2</p> </div> <div class="box" id="box-3"> <p class="text">3</p> </div> ...
Post a Comment
Read more

Responsive | CSS Media-Quarry

-
Image
If you are looking for the best simple responsive media-query example, then below these code snipped must be helpful for you.  Ingreadients : HTML  CSS  image files  Main Focus Point : CSS display : none | block @media min-width  max-width    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Media Query</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="box" id="box-1"> <img src="./img/mobile.png" alt=""> <p>Phone</p> </div> <div class="box" id="box-2"> <...
Post a Comment
Read more

React | State Toggling

-
Image
  if you are wondering How to toggle Boolean   state in react component, then maybe this little code snippet for you... Ingredients :  HTML CSS React *** Dependency :  Bootstrap (Only for button) command: npm start   import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { const [isLoggedIn, setIsLoggedIn] = useState(true); //let isLoggedIn = true; <<<|<<< this approach not work... // Element Variable const buttonText = isLoggedIn ? 'Log Out' : 'Log In'; const classNameChange = isLoggedIn ? 'danger' : 'success' const toggleFunction = () => { //isLoggedIn = !isLoggedIn; <<<|<<< this approach not work... setIsLoggedIn(!isLoggedIn); } const style = { textAlign: 'center', marginTop: '20px', lineHeight: 5 }; return ( <div style={style}> ...
Post a Comment
Read more

Simple Responsive Menu Bar

-
Image
  If you are looking for how to create a responsive menu bar very easy way, then I think this little code snippet is that what you are looking for...  Ingrediants HTML CSS Main Focus Point: In HTML  input (id = checked ) label (for = checked ) In CSS ul { flex } media queary ( 600px ) ul  { flex + column } position : absolute top : 70px left : -100% #checked : checked ~ ul {   left : 0  } HTML  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Menu</title> <link rel="stylesheet" href="style.css"> <!--For Bar Icon--> <script src="https://kit.fontawesome.com/1f45fef13f.js" crossorigin="anonymous"></script> </head> <body> ...
Post a Comment
Read more

Diamond Shape by HTML & CSS

-
Image
Diamond Hover Effect You may wonder How to create a diamond shape in HTML, so here it may what you looking at... Ingredients:  HTML  CSS  Main Use Of: Grid Flex Transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Diamond Shape</title> </head> <body> <!-- .item.item$*9>p.text{$} --> <main> <div class="item item1"> <p class="text">1</p> </div> <div class="item item3"> <p class="text">3</p> </div> <div class="item item6"> <p class="text">6</p> </div> <div class="item item2"> <p class="text">2</p> </div> <div class="item item5"> <p class="text...
Post a Comment
Read more

React Formik HTML Form

-
Image
This React HTML Form Build by the help of Formik library... So You Need 1st to install this library : npm install formik After that 2nd install library : npm install yup And add bellow CSS also import React from 'react'; import './Formik.css' import { Formik, Form, Field, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const Formik_v2 = () => { // for formik property Object const initialValues = { userName: '', userEmail: '', userPhone: '', } // for formik method ot Submit const onSubmit = values => { console.log('onSubmit Method ==> ', values); } // use Yup library for validation... const validationSchema = Yup.object({ userName: Yup.string().required('Required!'), userEmail: Yup.string() .email('Invalid Email Address') .required('Required!'), userPhone: Yup.stri...
Post a Comment
Read more

Create GET Request API

-
GET - API NodeJs - with Express app.get('/products' , (req, res) => {     res.send('<p>Testing</p>') });
Post a Comment
Read more

CURD Operations

-
 For NodeJs & MongoDB
Post a Comment
Read more