DEV Community: isurojit

Vite React Tailwind Starter Repository

isurojit — Fri, 12 Apr 2024 06:27:46 +0000

Introduction:

Welcome to the exploration of the "Vite React Tailwind Starter" repository. This repository is a treasure trove for developers seeking to jumpstart their React.js projects with the Vite build tool and the Tailwind CSS framework. Let's embark on a journey through this comprehensive toolkit and uncover its riches.

Overview of the Repository:

Within this repository, you'll find a structured array of files and directories crafted to expedite the setup process for React projects. Let's navigate through its key elements:

Folder Structure:

The repository boasts an organized folder structure, ensuring easy traversal and management of project assets.

Dependencies:

Dive into the package.json file to discover a meticulously curated list of dependencies essential for React, Vite, and Tailwind CSS integration.

Configuration Files:

Essential configuration files such as vite.config.js and .eslintrc.json are provided, pre-tailored to optimize your development environment and uphold coding standards.

Scripts:

Engage with convenient scripts tailored for common development tasks like launching the development server, building for production, and conducting lint checks.

Sample Components:

Explore a gallery of sample React components nestled within the repository, serving as blueprints for best practices and showcasing the seamless integration of Tailwind CSS for styling prowess.

Key Features:

Let's delve deeper into the repository's hallmark features:

Vite Build Tool:

Harness the power of Vite, a nimble and efficient build tool engineered for modern web development. Experience near-instantaneous hot module replacement (HMR) and lightning-fast build times, elevating your development workflow to new heights.

React Integration:

Immerse yourself in React.js, a beloved JavaScript library renowned for crafting dynamic user interfaces. Seamlessly integrated within the repository, React empowers developers with its component-based architecture and declarative syntax.

Tailwind CSS Framework:

Embrace the versatility of Tailwind CSS, a utility-first CSS framework boasting a rich palette of pre-designed, composable utility classes. With Tailwind CSS at your disposal, styling components becomes a breeze, eliminating the need for custom CSS and fostering consistency across your project.

Modern JavaScript Syntax:

Navigate through the repository's codebase adorned with modern JavaScript syntax features such as ES6 arrow functions, template literals, and destructuring assignment. Embrace code readability and maintainability as you traverse through the codebase.

Developer Tools:

Equip yourself with indispensable developer tools including ESLint for code linting and Prettier for code formatting. Uphold coding standards, enforce consistency, and elevate the quality of your codebase with these essential tools by your side.

Getting Started:

Embark on your journey with the "Vite React Tailwind Starter" repository using these simple steps:

Clone the Repository:

Clone the repository to your local machine using the following command:

Install Dependencies:

Traverse to the project directory and install dependencies by running:

Start the Development Server:

Launch the development server with a simple command:

Explore and Customize:

Embark on a journey of exploration within the repository. Customize the project to your heart's content, adding new components, pages, or styles as you see fit.

Build for Production:

When the time comes to unleash your creation upon the world, build the project for production with ease:

Conclusion:

In conclusion, the "Vite React Tailwind Starter" repository stands as a beacon of efficiency and innovation, empowering developers to embark on their React.js journey with confidence. Whether you're a seasoned React aficionado or a budding enthusiast, this repository offers a wealth of resources to accelerate your development process and unleash your creativity. Dive in, explore its depths, and embark on a voyage of discovery through the world of modern web development.

Fun Fact- This Post Have Been Created Via OpenAI. ~hehe~

Pokemon API using ReactJs

isurojit — Wed, 17 Mar 2021 07:51:28 +0000

Tried to create a little fun project using reactjs.pokeapi is used to fetch data. Multiple components used to trigger the state. Try it- https://bit.ly/3tsW78L. #API used from http://pokeapi.co.
Code given bellow:-
App.js

import React, {Component} from 'react';
import { CardList } from './components/card-list/card-list.component';
import { SearchBox } from './components/search-box/search-box.component';
import { NavigationBtn } from './components/page-navigation/back-to-top';
import './App.css';

class App extends Component{
  constructor(){
    super();

    this.state = {
      pokemons: [],
      search:''
    };
  }

  componentDidMount(){
    fetch('https://pokeapi.co/api/v2/pokemon?limit=500')
    .then(response => response.json())
    .then(name => this.setState({pokemons:name.results}));
  }

  handleChange=(e) => {
    this.setState({search: e.target.value});
  };

  render(){

    const {pokemons, search } = this.state;
    const fileteredPokemons = pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(search.toLowerCase()));

    return(
      <div className="App">
        <h4><a href="https://www.linkedin.com/in/surojit-manna" target="_blank" noreferrer>Author</a></h4>
        <h1>Pokemon Database</h1>
        <SearchBox
          placeholder='Search Pokemon' 
          handleChange= {this.handleChange}
        />
        <NavigationBtn/>
        <CardList pokemons={fileteredPokemons}></CardList>

      </div>
    );
  }
}

export default App;

CardList component

import React from 'react';

import { Card } from '../card/card.component';

import './card-list.style.css';


export const CardList = props => (
    <div className='card-list'>
        {props.pokemons.map(pokemon =>(
        <Card key={pokemon.name} pokemon={pokemon}></Card>
        ))}
    </div>
);

SearchBox component

import React from 'react';
import './search-box.styles.css';

export const SearchBox = ({placeholder, handleChange}) =>(
    <input 
        className='search'
        type='search' 
        placeholder={placeholder} 
        onChange={handleChange}
    />
);

Card component

import React from 'react';

import './card.styles.css';

export const Card = props =>(
    <div className="card-continer">
        <a href={`https://www.pokemon.com/us/pokedex/${props.pokemon.name}`} target="_blank" rel="noreferrer">
            <img alt="pokemon" src={`https://img.pokemondb.net/artwork/large/${props.pokemon.name}.jpg`}/>
            <h2>{props.pokemon.name[0].toUpperCase()+props.pokemon.name.slice(1)}</h2>
        </a>
    </div>
);

Use your own style using the class names on components. Any suggestion on improving this little project will be appreciated.
Ping for full code.

Signup and Login form using Javascript Regular Expression

isurojit — Fri, 22 Jan 2021 16:46:53 +0000

Tried to create signup and login from using vanilla javascript, regexp & bootstrap. A small but very interesting little project. Pull code:- http://bit.ly/39TAMxo try:- http://bit.ly/3p9CUYc

Javascript grid to list view

isurojit — Mon, 28 Dec 2020 07:39:58 +0000

Created a small project where we can toggle between grid view to list view. used #HTML & #javascript only. #CSS3 is being used in javascript. No #framework used.

JS code

//Assigning UI
const productRow = document.querySelector(".row");
const images = document.querySelectorAll(".image");
const productTemplate = document.querySelectorAll('.product');
const unorderedList = document.querySelectorAll('ul');
const productItems = document.querySelectorAll('.product-item');
const buyBtn = document.querySelectorAll('.buy');
const productHeading = document.querySelectorAll('h3');
const listView = document.querySelector('#list-view');
const gridView = document.querySelector('#grid-view');
const btnSection = document.querySelector('.buttons');
const footerSection = document.querySelector('footer');

//Css variables
const borderShadow = '-webkit-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);-moz-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);';
const mainBtn = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;

//Listen For Events
btnSection.addEventListener('click',function(e){
    let targetElement = e.target;
    if(targetElement.id === 'list-view' || targetElement.id === 'list-icon'){
        listViewOperation();
    }else if(targetElement.id === 'grid-view' || targetElement.id === 'grid-icon'){
        gridStyleView();
    }else{
        e.preventDefault();
    }
});

//By default grid style
gridStyleView();

//universal
document.body.style.cssText ="font-family: 'Ubuntu', sans-serif;";

//remove buttes
iteration(unorderedList, "list-style-type: none;position:relative;right:15px");

// //Resizing buttons
listView.style.cssText = mainBtn;
gridView.style.cssText = mainBtn;

//Iteration function
function iteration(itarator,cssElements){
    itarator.forEach(function(variable){
        variable.style.cssText = cssElements;
    });
}

//For Fun (given a footer)
const footer = document.createElement('p');
footer.innerHTML = '<h4>Create by <a href="https://www.linkedin.com/in/surojit-manna" target="_blank">isuro</a>&nbsp;With <i class="fas fa-heart"></i></h4>';
footerSection.appendChild(footer);
footerSection.style.cssText = 'text-align:center';

function listViewOperation(){
    //list Test
    //Productlist view flex
    iteration(productTemplate, `display:flex;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;transition: all 0.3s ease`);

    //Making product row column wise
    productRow.style.cssText = "display:flex;flex-direction:column;transition: all 2s ease";

    //Images
    iteration(images, "width:10%;");

    //Buybutton
    iteration(buyBtn, "width:15%;height:10%;transform:translateY(30%);transition: all 0.3s ease");

    //Heading
    iteration(productHeading, "transform:translateY(30%);transition: all 0.3s ease");

    //UI interaction with button when active
    listView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;background-color:green;`
    gridView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;

}

//gridview function
function gridStyleView(){
    //grid view
    productRow.style.cssText = "display:flex;transition: all 0.3s ease";

    //For Images
    iteration(images,"width:50%;transition: all 0.3s ease");

    //For Product Template
    iteration(productTemplate,`text-align:center;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;padding:1%;transition: all 0.3s ease`);

    //For buy now button
    iteration(buyBtn,"width:60%;height:23%;transform:translateY(-10%);transition: all 0.3s ease");

    //UI interaction with button when active
    gridView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;background-color:green;`
    listView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;
}

HTML Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid To List</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <Header style="text-align: center;">
            <H1>Grid To List View</H1>
            <p><em><u>For Desktop only</u></em></p>
        </Header>
    </div>
    <div class="container">
        <div class="buttons">
            <button type="submit" value="list" id="list-view"><i class="fas fa-list" id="list-icon"></i></button>
            <button type="submit" value="grid" id="grid-view"><i class="fas fa-th-large" id="grid-icon"></i></button>
        </div>
        <div class="row">
            <div class="product">
                <img class="image product-item" src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone11-select-2019-family_GEO_EMEA?wid=882&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1567022219953" alt="Iphone11">
                <h3>Apple Iphone11</h3>
                <ul><b>SPECIFICATION</b>
                    <li>Price - $849</li>
                    <li>6 Gigabyte Ram</li>
                    <li>256 GB Storage</li>
                    <li>Bionic A13 Chip</li>
                    <li>Wide Lense Camera</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="./img/galaxy-note-20.png" alt="Galaxy Note 20">
                <h3>Galaxy Note 20&nbsp;&nbsp;</h3>
                <ul><b>SPECIFICATION</b>
                    <li>Price -$999</li>
                    <li>8 Gigabyte Ram</li>
                    <li>256 GB Storage</li>
                    <li>Exynos 990 Processor</li>
                    <li>64+12+12MP Triple Camera</li>
                    <li>Exchange For Your Kidney</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="./img/pixel-5.png" alt="Google Pixel 5">
                <h3>Google Pixel 5 5G</h3>
                <ul><b>SPECIFICATION</b>
                    <li>Price -$699 </li>
                    <li>8 Gigabyte Ram</li>
                    <li>128 GB Storage</li>
                    <li>Snapdragon 765G</li>
                    <li>Wide Lense Triple Camera</li>
                    <li>Exchange For Your Old Phone</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
            <div class="product">
                <img class="image" src="./img/oneplus-8t.png" alt="one plus 8t">
                <h3>OnePlus 8T 5G</h3>
                <ul><b>SPECIFICATION</b>
                    <li>Price -$549</li>
                    <li>12 Gb Ram</li>
                    <li>256 GB Storage</li>
                    <li>Bionic A13 Chip</li>
                    <li>48+16+5+2 Quad Camera</li>
                    <li>Exchange For Your Dignity</li>
                </ul>
                <img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
            </div>
        </div>
    </div>
    <footer>

    </footer>
    <script src="app.js"></script>
</body>
</html>

CSS code

button:hover, button:focus{
    outline: none;
}
button:hover{
    background-color: rgba(233, 114, 114, 0.856);
}

Any suggestions will be helpful.

Temperature converter with background changer using vanilla javascript

isurojit — Sat, 26 Dec 2020 15:57:29 +0000

Tried a small javascript project. Temperature converter using vanilla javascript & ES6. you can change into a different unit to try it on. Depending on the resulting background will also be changed. Try it http://bit.ly/3nLEgHT

HTML Code

<!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.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Link css -->
    <link rel="stylesheet" href="style.css">

    <title>Temperature Converter</title>
  </head>

  <body>

    <!-- Vidoes will be chnaged according to the Temperature -->

    <video autoplay muted loop id="default-video">
        <source src="https://isurojit.github.io/temperature-converter/default.mp4" type="video/mp4">
    </video>
    <video autoplay muted loop id="summer-video">
        <source src="https://isurojit.github.io/temperature-converter/summerseason.mp4" type="video/mp4">
    </video>
    <video autoplay muted loop id="auttum-video">
        <source src="https://isurojit.github.io/temperature-converter/auttum.mp4" type="video/mp4">
    </video>
    <video autoplay muted loop id="winter-video">
        <source src="https://isurojit.github.io/temperature-converter/winter.mp4" type="video/mp4">
    </video>

    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mx-auto">
                    <div class="card card-body text-center pt-4">
                        <h1 id="heading" class="pb-4 display-5">
                            Temperature Converter
                        </h1>
                        <!-- Main form -->
                        <form id="temp-form">

                            <!-- Input Elements -->
                            <div class="form-group pt-2">
                                <select id="tempUnit" class="form-select" aria-label="Default select example">
                                    <option selected>Select Your Desire Temperature Unit</option>
                                    <option value="fahrenheit">Fahrenheit</option>
                                    <option value="celsius">Celsius</option>
                                    <option value="kelvin">Kelvin</option>
                                    <option value="rankine">Rankine</option>
                                </select>
                            </div>
                            <div class="form-group pt-2">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="UIinputValue" placeholder="Enter Your Value">
                                    <span class="input-group-text" id="UIinputValueUnit"></span>
                                </div>
                            </div>
                            <div class="form-group d-grid pt-4">
                                <input type="submit" value="Calculate" class="btn btn-dark calculateBtn">
                            </div>
                        </form>

                        <!-- Results -->
                        <div class="form-group pt-4">
                            <div class="input-group pt-1">
                                <span class="input-group-text"> Value In Celsius:</span>
                                <input type="number" class="form-control" id="result-celsius" disabled><span class="input-group-text">&deg;C</span>
                            </div>
                            <div class="input-group pt-1">
                                <span class="input-group-text"> Value In Fahrenheit:</span>
                                <input type="number" class="form-control" id="result-fahrenheit" disabled>
                                <span class="input-group-text">&deg;F</span>
                            </div>
                            <div class="input-group pt-1">
                                <span class="input-group-text"> Value In Kelvin:</span>
                                <input type="number" class="form-control" id="result-kelvin" disabled>
                                <span class="input-group-text">&deg;K</span>
                            </div>
                            <div class="input-group pt-1">
                                <span class="input-group-text"> Value In Rankine:</span>
                                <input type="number" class="form-control" id="result-rankine" disabled>
                                <span class="input-group-text">&deg;R</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Not showing Don't know why :'(' -->
    <footer>
        <h4>Made with &#10084; by <a href="https://www.linkedin.com/in/surojit-manna" target="_blank">isuro</a></h4>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

    <script src="script.js"></script>
  </body>
</html>

Javascript code

//Defining UI
const UIcelsius = document.querySelector('#result-celsius');
const UIfahrenheit = document.querySelector('#result-fahrenheit');
const UIkelvin = document.querySelector('#result-kelvin');
const UIrankine = document.querySelector('#result-rankine');
const UIinputValue = document.querySelector('#UIinputValue');
const UIinputValueUnit = document.querySelector('#UIinputValueUnit');

//Gathering videos
const defaultVideo = document.querySelector('#default-video');
const summerVideo = document.querySelector('#summer-video');
const autumnVideo = document.querySelector('#auttum-video');
const winterVideo = document.querySelector('#winter-video');

//Initially hide every video except defaut
summerVideo.style.display = 'none';
autumnVideo.style.display = 'none';
winterVideo.style.display = 'none';

//Defining Calculating elements
const calculateBtn = document.querySelector('.calculateBtn');
const temperatureUnit = document.querySelector('#tempUnit');

//Listen for value when calculated clicked
calculateBtn.addEventListener('click',calculateResult);
//Listen for value when option is clicked
temperatureUnit.addEventListener('click',changeUIUnit);

//Defining variables in global scope so that it can be use in outer function.
let celsius,fahrenheit,kelvin,rankine;

//Calculate function
function calculateResult(e){
    //getting the input value
    let inputNumber = parseInt(UIinputValue.value);

    //getting the values from option
    let optionValue = (temperatureUnit.options[temperatureUnit.selectedIndex].text).toLowerCase();

    //Checking the input and assigning if statement according to that
    if(optionValue == "select your desire temperature unit" || isNaN(inputNumber)){
       alert('Please Enter Both Number / Temperature Value');

    }else
        if(optionValue == "celsius"){
            celsius = inputNumber;
            fahrenheit = ((inputNumber * 9/5)+32).toFixed(2);
            kelvin = (inputNumber + 273.15).toFixed(2);
            rankine =(inputNumber * 9/5 + 491.67).toFixed(2);
            UIresultOutput();
        };
        if(optionValue == "fahrenheit"){
            celsius = ((inputNumber-32)*5/9).toFixed(2);
            fahrenheit = inputNumber;
            kelvin = (((inputNumber-32)*5/9)+273.15).toFixed(2);
            rankine =(inputNumber+ 491.67).toFixed(2);
            UIresultOutput();
        };
        if(optionValue == "kelvin"){
            celsius = (inputNumber - 273.15).toFixed(2);
            fahrenheit = ((inputNumber - 273.15)*9/5 + 32).toFixed(2);
            kelvin = inputNumber;
            rankine =(inputNumber * 1.8).toFixed(2);
            UIresultOutput();
        }
        if(optionValue == "rankine"){
            celsius = ((inputNumber - 491.67)*5/9).toFixed(2);
            fahrenheit = (inputNumber - 459.67).toFixed(2);
            kelvin = (inputNumber*5/9).toFixed(2);
            rankine =inputNumber;
            UIresultOutput();
        }

    e.preventDefault();
};

//Dynamically Unit changing function
function changeUIUnit(){
    let UIoptionValue = (temperatureUnit.options[temperatureUnit.selectedIndex].text).toLowerCase();
        if(UIoptionValue == 'celsius'){
            UIinputValueUnit.innerHTML ='&deg;C';
        }
        if(UIoptionValue == 'fahrenheit'){
            UIinputValueUnit.innerHTML ='&deg;F';
        }
        if(UIoptionValue == 'kelvin'){
            UIinputValueUnit.innerHTML ='&deg;K';
        }
        if(UIoptionValue == 'rankine'){
            UIinputValueUnit.innerHTML ='&deg;R';
        }
}

//Appending result into UI function
function UIresultOutput(){
    UIcelsius.value = celsius;
    UIfahrenheit.value = fahrenheit;
    UIkelvin.value = kelvin;
    UIrankine.value = rankine;
    if(celsius >= 30){
        summerVideo.style.display = 'block';
        autumnVideo.style.display = 'none';
        winterVideo.style.display = 'none';
        defaultVideo.style.display = 'none';
    }
   else if(celsius >= 20  &&  celsius <= 29){
        summerVideo.style.display = 'none';
        autumnVideo.style.display = 'block';
        winterVideo.style.display = 'none';
        defaultVideo.style.display = 'none';
    }
    else {
        summerVideo.style.display = 'none';
        autumnVideo.style.display = 'none';
        winterVideo.style.display = 'block';
        defaultVideo.style.display = 'none';
    }

    //clear Input
    UIinputValue.value = '';
    UIinputValueUnit.value = '';

}

Css Code

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

body{
    font-family: 'Audiowide', cursive;
}

.container{
    margin-top: 5%;
}

.card{
    padding: 5%
}
/* Curved border */
.card,.form-control,.form-select,.input-group-text,.calculateBtn,option{
    border-radius: 50px;
    background-color: rgba(216, 221, 216, 0.726);
}

.calculateBtn{
    color: #000;
}

/* Video Positioning */
#default-video,#summer-video,#auttum-video,#winter-video{
position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

Any Suggesitions appriciated.

Search Bar Filter Using Vanilla Javascript

isurojit — Tue, 15 Dec 2020 12:20:51 +0000

We can achieve simple things like search products and filter them using simple vanilla javascript. jQuery, Ajax might make things simple, the same time it makes the app bulky. I have used only 40 lines of js code to achieve this.
I think nowadays rather than depending on libraries we should focus more on how to accomplish our task using vanilla javascript as much as we can.

Try this small project on - https://lnkd.in/diS5S2T

Code-
javaScript

//Defining Ui
const filter = document.querySelector('.searchBar');
const fruitList = document.querySelector('.collection');

//Load Event Listners
loadEventListners();

//Load all event listners  function
function loadEventListners(){
    //filter fruit
    filter.addEventListener('keyup', filterFruit);
    //search Bar cross malfunction
    filter.addEventListener("search", closeSearch);
}

//filter function
function filterFruit(e){
    //Accessing input data from input field
    const text = e.target.value.toLowerCase();

    document.querySelectorAll('.collection-item').forEach
    (function (fruit){
        const item = fruit.textContent;
        if(item.toLowerCase().indexOf(text) != -1){
            fruit.style.display = 'block';
        }else{
            fruit.style.display = 'none';
            noResult.style.display ='block';
        }
    });
}

//Search cross malfunction closeSearch
function closeSearch(e){
    document.location.reload();
}

//just for fun
const heading = document.querySelector('#heading');
heading.style.cssText= "font-family: 'Langar', cursive;";

Html

<!-- boiler template -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Search</title>
    <link rel="stylesheet" href="style.css">

<!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">

<!-- fontawesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

</head>

<body>

<!-- heading -->
    <h1 id="heading">Fruit Search</h1>

<!-- Search Bar -->
    <input type="search" class="searchBar" name="Search" results="5" placeholder="Search">

<!-- Product Template -->
    <div>
        <ul class="collection">
<!-- apple -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Apple">
                    <img src="https://isurojit.github.io/fruitsearch/img/apple.png" alt="apple">
                </a>
                <h1>Apple</h1>
            </li>

<!-- orange -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Orange_(fruit)">
                    <img src="https://isurojit.github.io/fruitsearch/img/orange.jpg" alt="orange">
                </a>
                <h1>Orange</h1>
            </li>

<!-- mango -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Mango">
                    <img src="https://isurojit.github.io/fruitsearch/img/mango.jpeg" alt="mango">
                </a>
                <h1>Mango</h1>
            </li>

<!-- banana -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Banana">
                    <img src="https://isurojit.github.io/fruitsearch/img/banana.jpg" alt="banana">
                </a>
                <h1>Banana</h1>
            </li>

<!-- pomegranate -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pomegranate">
                    <img src="https://isurojit.github.io/fruitsearch/img/pomegranate.png" alt="pomegranate">
                </a>
                <h1>Pomegranate</h1>
            </li>

<!-- pitaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pitaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/dragonfruit.jpg" alt="pitaya">
                </a>
                <h1>Pitaya</h1>
            </li>

<!-- kiwi -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Kiwifruit">
                    <img src="https://isurojit.github.io/fruitsearch/img/kiwi.png" alt="kiwi">
                </a>
                <h1>Kiwi</h1>
            </li>

<!-- papaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Papaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/papaya.jpg" alt="papaya">
                </a>
                <h1>Papaya</h1>
            </li>

<!-- strawberry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Strawberry">
                    <img src="https://isurojit.github.io/fruitsearch/img/strawberry.jpg" alt="strawberry">
                </a>
                <h1>Strawberry</h1>
            </li>

<!-- watermelon -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Watermelon">
                    <img src="https://isurojit.github.io/fruitsearch/img/watermellon.jpg" alt="watermellon">
                </a>
                <h1>Watermelon</h1>
            </li>

<!-- pear -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pear">
                    <img src="https://isurojit.github.io/fruitsearch/img/pears.png" alt="pear">
                </a>
                <h1>Pear</h1>
            </li>

<!-- cherry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Cherry">
                    <img src="https://isurojit.github.io/fruitsearch/img/cherry.jpg" alt="cherry">
                </a>
                <h1>Cherry</h1>
            </li>

 <!-- end of products -->           
        </ul>
<!-- end of list -->
    </div>
<!-- end of product template -->

  <footer>

        <h4>Made With <i class="fas fa-heart"></i> by <a href="https://www.linkedin.com/in/surojit-manna">isuro</a></h4>

  </footer>

    <script src="app.js"></script>
</body>
</html>

Css

body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.collection-item:hover{
    transform: scale(.9);
    transition: all .5s ease-in-out;
    cursor: pointer;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    img{
        width: 90%;
    }
    .collection{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
    }
    .collection-item{
        list-style: none;
        flex: 0 0 24.3333%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 15%;
        padding: 2%;
        margin: 2% 2%;
    }
    h1{
        text-align: center;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 1% 12%;
        font-size: 3rem;
    }

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .collection-item{
        list-style: none;
        flex: 0 0 95%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 900px) and (min-width: 600px){
    .collection-item{
        list-style: none;
        flex: 0 0 45%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Scroll bar */

  /* width */
  ::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */

    ::-webkit-scrollbar-track {
    background: rgb(255, 0, 0); 
  }

  /* Handle */

    ::-webkit-scrollbar-thumb {
    background: rgb(38, 0, 255); 
    border-radius: 50px;
  }


  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgb(0, 255, 42); 
  } 
  footer{
      text-align: center;
  }

[ps:- didn't work on CSS. so kept it messy.]

Any suggestions welcome.

Number Guessing Game using javaScript

isurojit — Wed, 16 Sep 2020 04:41:23 +0000

Tried to create a simple yet complicated Number Guessing Game using #javascript. Event Delegation is used to target DOM elements. After creating this simple app even I can't win within the first try. Smiling face with tear try it here- https://bit.ly/32wBHRU code-https://codepen.io/isurojit/pen/GRZBdoq #HTML #css #ReactJS #webdev #webdeveloper

Loan Calculator using Vanilla Js

isurojit — Thu, 10 Sep 2020 16:16:55 +0000

Tried to create a simple loan calculator with loading #UX using #javascript. #Bootstrap is being used for the #UI part, a few simple methods are used to target the DOM elements.Test-https://bit.ly/3iioLnT. code- https://bit.ly/33jMDBx. #HTML #css3 #webdev #WebDeveloper #reactjs

Task List With Local Storage Using Vanilla JS Only

isurojit — Mon, 07 Sep 2020 16:05:04 +0000

Tried to create a task list #javascript project. In this project, Local storage is being used to store data on local browser. Event bubbling & deligation is mainly used to target the parent element. demo/code-https://bit.ly/3i7q5tV

Apple Product Landing Page

isurojit — Wed, 05 Aug 2020 11:58:24 +0000

Responsive Web Design Projects - Build a Technical Documentation Page

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/NdrKKL.

Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.

You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!

User Story #1: I can see a main element with a corresponding id="main-doc", which contains the page's main content (technical documentation).

User Story #2: Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.

User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.

User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding id="JavaScript_and_Java").

User Story #5: The .main-section elements should contain at least 10 p elements total (not each).

User Story #6: The .main-section elements should contain at least 5 code elements total (not each).

User Story #7: The .main-section elements should contain at least 5 li items total (not each).

User Story #8: I can see a nav element with a corresponding id="navbar".

User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation.

User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.

User Story #11: The header element in the navbar must come before any link (a) elements in the navbar.

User Story #12: Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").

User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id and contains the corresponding header.

User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.

User Story #15: My Technical Documentation page should use at least one media query.

Js Documentation Page

isurojit — Wed, 05 Aug 2020 11:58:07 +0000

Responsive Web Design Projects - Build a Personal Portfolio Webpage

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNBOYG.

Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.

User Story #1: My portfolio should have a welcome section with an id of welcome-section.

User Story #2: The welcome section should have an h1 element that contains text.

User Story #3: My portfolio should have a projects section with an id of projects.

User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.

User Story #5: The projects section should contain at least one link to a project.

User Story #6: My portfolio should have a navbar with an id of navbar.

User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.

User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.

User Story #9: My portfolio should have at least one media query.

User Story #10: The height of the welcome section should be equal to the height of the viewport.

User Story #11: The navbar should always be at the top of the viewport.

Video Backgound

isurojit — Wed, 05 Aug 2020 11:57:49 +0000

Tried to used video background as html css project. This simple project is inspired by Brad Traversy.