পোস্টগুলি

React JS Input From Shotcut

 import React, { useState } from 'react'; const Forms = () => {     const [names, setnames] = useState({         fname: '',         lname: '',         email: ''     });     const submitting = (e) => {         e.preventDefault();       //revent default events     }     const inputEvent = (e) => {         //    const names2 = e.target.name;         //    const value = e.target.value;         const {name, value} = e.target;                //array destructure         setnames((preValue) => {             return {                 ...preValue,            //using spred operator     ...

React Js - Form Submit, Input

 App.js import React from "react"; import './App.css'; import ReactDom from "react-dom"; import Forms from './froms'; function App() {  return(    <>    <Forms/>    </>  ); } export default App; forms.js import React, { useState } from 'react'; const Forms = () => {     const [names, setnames] = useState("");     const [fullnames, setfullname] = useState("");     const submitting = (e) =>{         e.preventDefault();       //revent default events     }     const inputEvent = (e) => {         console.log(e.target.value);         setnames(e.target.value);     }     const clicked = () => {         setfullname(names);     }     return (         <>             <div classNam...

React Js - Events With Hooks

 App.js import React from "react"; import './App.css'; import ReactDom from "react-dom"; import Events from './events'; function App() {  return(    <>    <Events/>    </>  ); } export default App; Events.js import React, {useState} from 'react'; export default function Events() {   //react components name should start with upper case     const purple = '#8e44ad';     const [bg, setBg] = useState(purple);       const [named, setName] = useState("Click Me");     const bgChange = () =>{         let newBg = "#34495e";         setBg(newBg);         let newName = "UFF!";         setName(newName);       //  console.log("clicked");     }     const bgBack = () =>{         setBg(purple);         setName("Ayyo!")...

React JS - Hooks

 App.js import './App.css'; import Cntr from './Cntr'; function App() {  return(    <>    <Cntr/>    </>  ); } export default App; Cntr.js import React, {useState} from 'react'; //use state is used to change the sate of a varibale means update a value with a eventlistner in our DOM.  export default function Cntr() {     const [count , setCount] = useState(0);   // const[variable , update value fuction] = useState (variable initialization);         const valinc = () =>{              setCount(count+1);   //set setcount function     }     return (         <div className="col-6 m-auto mt-4">               <h1 className="text-center">{count}</h1>               <p className="text-center"><button className...

React Js Cards (Props, Array, Mapping, Rendaring)

 App.js import Card from './card'; import './App.css'; import Movie from './Movie'; const movies = (val) =>{   return(     <>     <Card img={val.img} title={val.title} Category={val.Category}/>     </>   ) } function App() {   return (     <>     {Movie.map(movies)}            </>   ); } //map function is used to create a array of each array elements.  export default App; Card.js import React from 'react' export default function card(props) {   //props means properties. We can create custom attributes using props.     return (         <div className="card">             <img src={props.source} />             <div className="container">                 <h4><b>{props.title}</b...

Shoyeb Portfolio website

 <!doctype html> <html lang="en"> <head>   <!-- Required meta tags -->   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <!-- Bootstrap CSS -->   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"     integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   <link rel="stylesheet" href="style/style.css">   <title>Sk Shoyeb - Protfolio</title> </head> <body>   <section class="home">     <nav class="primary-menu navbar navbar-expand-lg">       <div class="container">         ...