React Pokedex
How do I make an react pokedex?
Http://pokedexify.herokuapp.com/#/. What is a react pokedex? How do you make a react pokedex? This script and codes were developed by Mihkel on 08 December 2022, Thursday.
React Pokedex Previews
React Pokedex - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Pokedex</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--<div id="main"></div>-->
<h1 class="text-center"><a href="https://pokedexify.herokuapp.com/#/">https://pokedexify.herokuapp.com/#/</a></h1> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js'></script>
<script src='https://cdn.jsdelivr.net/refluxjs/0.2.11/reflux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.3/index.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fetch/0.11.0/fetch.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>React Pokedex - Script Codes CSS Codes
/*
.input-group-addon:hover, .ability-toggle:hover { cursor:pointer;
}
input.form-control,input.form-control:focus { border:none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -moz-transition: none; -webkit-transition: none;
}
.dropdown .dropdown-menu { background:#303030;
}
.dropdown .dropdown-menu li a { color: #FFF;
}
.dropdown .dropdown-menu li a:hover { background-image: none; color: #000;
}
.hidden { display:none;
}
.btn { padding: 14px 24px; border: 0 none; font-weight: 700; letter-spacing: 1px;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none;
}
.btn-primary { background: #0099cc; color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: #33a6cc;
}
.btn-primary:active, .btn-primary.active { background: #007299; box-shadow: none;
}
.btn-warning { background: #eb8f34; color: #ffffff;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background: #eba259;
}
.btn-warning:active, .btn-warning.active { background: #b87430; box-shadow: none;
}
.btn.sharp { border-radius: 0;
}
.btn-xs, .btn-group-xs > .btn { padding: 2px 6px;
}
.btn-sm, .btn-group-sm > .btn { padding: 8px 12px;
}
.btn-lg { padding: 20px 40px; border-radius: 4px;
}
.btn-xs.btn-default, .btn-xs.outline { padding: 0px 4px;
}
.btn-sm.btn-default, .btn-sm.outline { padding: 6px 10px;
}
.btn-lg.btn-default, .btn-lg.outline { padding: 18px 38px;
} */React Pokedex - Script Codes JS Codes
/*
var HTTP = { baseUrl: "http://pokeapi.co", get: function (uri) { return fetch(this.baseUrl + uri) .then(function (res) { return res.json(); }); }
};
var Actions = Reflux.createActions([ "getPokemons", "sort", "search", "resetSearch", "getDetails"
]);
var PokemonStore = Reflux.createStore({ listenables: [Actions], getPokemons: function (start, end) { if (!this.pokemons) this.pokemons = []; var check; for (var i = start; i < end; i++) { if (i > 718) return this.sort("Lowest Number First"); (function (i) { HTTP.get("/api/v1/pokemon/" + i) .then(function (data) { check = this.checkDuplicates(data.pkdx_id); if (check) { var pokemon = { name: data.name, type: data.types, id: data.pkdx_id, imgUrl: "http://pokeapi.co/media/img/" + data.pkdx_id + ".png", detailsUrl: "/pokemons/" + data.pkdx_id }; this.pokemons.push(pokemon); } if (i === end - 1) this.sort("Lowest Number First"); }.bind(this)); }.bind(this))(i); } }, checkDuplicates: function (pokemonId) { return this.pokemons.every(function (item) { return item.id !== pokemonId; }); }, sort: function (method) { this.pokemons = this.pokemons.sort(function (a, b) { switch (method) { case "A-Z": return a.name.localeCompare(b.name); case "Z-A": return b.name.localeCompare(a.name); case "Lowest Number First": return a.id - b.id; case "Highest Number First": return b.id - a.id; } }); this.fireUpdate(); }, search: function (searchQuery) { if (!this.backup) this.backup = this.pokemons; searchQuery = searchQuery.toLowerCase(); this.pokemons = this.backup.filter(function (item) { if (item.name.toLowerCase().indexOf(searchQuery) > -1 || item.id.toString().indexOf(searchQuery) > -1) { return true; } else if (item.type[0].name.toLowerCase() === searchQuery) { return true; } else if (typeof item.type[1] !== "undefined" && item.type[1].name === searchQuery) { return true; } }); this.fireUpdate(); }, resetSearch: function () { this.pokemons = this.backup; this.fireUpdate(); }, fireUpdate: function () { this.trigger("change", this.pokemons); }
});
var PokemonDetailStore = Reflux.createStore({ listenables: [Actions], getDetails: function (pokemonId) { var pokemon = {}; HTTP.get("/api/v1/pokemon/" + pokemonId) .then(function (data) { pokemon.name = data.name; pokemon.type = data.types; pokemon.id = data.pkdx_id; pokemon.imgUrl = "http://pokeapi.co/media/img/" + data.pkdx_id + ".png"; pokemon.height = data.height; pokemon.weight = data.weight; pokemon.attack = data.attack; pokemon.defense = data.defense; pokemon.hp = data.hp; pokemon.sp_atk = data.sp_atk; pokemon.sp_def = data.sp_def; pokemon.speed = data.speed; // description HTTP.get(data.descriptions[0].resource_uri) .then(function (data2) { pokemon.description = data2.description; // weaknesses HTTP.get(data.types[0].resource_uri) .then(function (data3) { pokemon.weaknesses = data3.weakness; // category HTTP.get("/api/v2/pokemon-species/" + data.pkdx_id) .then(function (data4) { pokemon.category = data4.genera[0].genus; // get ability description HTTP.get("/api/v2/ability/" + data.abilities[0].name) .then(function (data) { pokemon.ability = data.names[0].name; pokemon.abilityDescription = data.flavor_text_entries[1].flavor_text; this.trigger("change", pokemon); }.bind(this)); }.bind(this)); }.bind(this)); }.bind(this)); }.bind(this)); }
});
var SearchField = React.createClass({ getInitialState: function () { return { value: "", hidden: "hidden", isSearched: false }; }, onChange: function (e) { this.setState({ value: e.target.value }); }, onSubmit: function (e) { e.preventDefault(); if (this.state.value) { this.setState({ isSearched: true }); Actions.search(this.state.value); this.setState({ value: "" }); this.setState({ hidden: "" }); } }, onClick: function () { this.setState({ isSearched: false }); this.setState({ hidden: "hidden" }); Actions.resetSearch(); }, render: function () { var headerStyle = { background: "#303030", color: "#FFF", paddingBottom: 10, paddingLeft: 35, paddingTop:30 }; var iconStyle = { background:"#eb8f34", borderColor: "#e59400", color: "#FFF" }; var paraStyle = { marginTop: 10 }; var classes = classNames("btn btn-warning sharp btn-sm", this.props.className, { "hidden": this.state.hidden }); return ( <div className="container"> <div style={headerStyle} className="header"> <div className="row"> <div className="col-xs-12"> <h3>Name, Number or Type</h3> </div> </div> <div className="row"> <div className="col-sm-8 col-md-6"> <form action="" method="" onSubmit={this.onSubmit} > <div className="input-group col-xs-8 col-md-6"> <div className="input-group"> <input type="text" className="form-control" placeholder="Search.." value={this.state.value} onChange={this.onChange} /> <span style={iconStyle} onClick={this.onSubmit} className="input-group-addon"> <i className="glyphicon glyphicon-search"></i> </span> </div> </div> </form> <p style={paraStyle}>Use the Advanced Search to explore Pokemon by type, weakness, Ability and more!</p> <button onClick={this.onClick} className={classes}>Reset</button> </div> </div> </div> </div> ); }
});
var Buttons = React.createClass({ getInitialState: function () { return { sortMethod: "Sort By" }; }, randomPokemon: function () { var random = Math.floor(Math.random() * (719 - 1) + 1); window.location.href = window.location.href + "/pokemons/" + random; }, sort: function (e) { var method = e.target.innerHTML; Actions.sort(method); this.setState({ sortMethod: method }); }, render: function () { var margin = { marginTop: 25 }; return ( <div className="container" style={margin}> <div className="row"> <div className="col-sm-4 col-xs-12"> <button onClick={this.randomPokemon} className="btn btn-primary sharp btn-block">Surprise Me!</button> </div> <div className="col-sm-4 col-sm-offset-4 col-xs-12"> <div className="dropdown"> <button className="btn btn-warning btn-block sharp dropdown-toggle" type="button" id="dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {this.state.sortMethod} <span className="caret"></span> </button> <ul className="dropdown-menu btn-block" aria-labelledby="dropdown-btn"> <li onClick={this.sort}><a href="#">A-Z</a></li> <li onClick={this.sort}><a href="#">Z-A</a></li> <li onClick={this.sort}><a href="#">Lowest Number First</a></li> <li onClick={this.sort}><a href="#">Highest Number First</a></li> </ul> </div> </div> </div> </div> ); }
});
var AbilityDescription = React.createClass({ getInitialState: function () { return { hidden: "hidden"}; }, render: function () { var iconStyle = { position: "absolute", top: 10, right: 10, color: "#FFF" }; var headerStyle = { fontWeight: 700, color: "#333" }; var paraStyle = { color: "#EEE", fontWeight: 700 }; var classes = classNames("panel-default", this.props.className, { "hidden": this.state.hidden }); return ( <div className={classes}> <div className="panel-body"> <h4 style={headerStyle}>{this.props.ability}</h4> <i onClick={this.props.callback} className="fa fa-times ability-toggle" style={iconStyle}></i> <p style={paraStyle}>{this.props.abilityDescription}</p> </div> </div> ); }
});
var PokemonDescription = React.createClass({ render: function () { var style = { fontWeight: 700 }; return ( <div className="col-xs-12"> <p style={style}>{this.props.pokemonDescription}</p> </div> ); }
});
var PokemonCharacteristics = React.createClass({ getInitialState: function () { return { hidden: "" }; }, hideElements: function () { this.setState({ hidden: "hidden" }); this.refs.abilityDescription.setState({ hidden: "" }); }, callback: function () { this.refs.abilityDescription.setState({ hidden: "hidden" }); this.setState({ hidden: "" }); }, getHeight: function (height) { return (height / 3.846153846).toFixed(1) + "'"; }, getWeight: function (weight) { return (weight / 4.545454545).toFixed(1) + " lbs"; }, render: function () { var wellStyle = { background: "#0099cc", marginTop: 110, minHeight:158 }; var headerStyle = { color: "#FFF", fontWeight: 700 }; var infoStyle = { marginTop: -5 }; var iconStyle = { color: "#FFF" }; var belowColStyle = { marginTop: 10 }; var classes = classNames("col-xs-6", this.props.className, { "hidden": this.state.hidden }); return ( <div style={wellStyle} className="col-xs-12 well"> <AbilityDescription ref="abilityDescription" callback={this.callback} abilityDescription={this.props.abilityDescription} ability={this.props.ability} /> <div className={classes}> <p style={headerStyle}>Height</p> <h4 style={infoStyle}>{this.getHeight(this.props.height)}</h4> </div> <div className={classes}> <p style={headerStyle}>Category</p> <h4 style={infoStyle}>{this.props.category}</h4> </div> <div className={classes} style={belowColStyle}> <p style={headerStyle}>Weight</p> <h4 style={infoStyle}>{this.getWeight(this.props.weight)}</h4> </div> <div className={classes} style={belowColStyle}> <p style={headerStyle}>Abilities</p> <h4 style={infoStyle}> {this.props.ability} <i onClick={this.hideElements} style={iconStyle} className="fa fa-info-circle ability-toggle"></i> </h4> </div> </div> ); }
});
var PokemonNameId = React.createClass({ formatId: function (id) { if (id.length === 1) { return "#00" + id; } else if (id.length === 2) { return "#0" + id; } else { return "#" + id; } }, render: function () { if (!this.props.pokemonId) return null; var headerStyle = { textAlign: "center", fontWeight: 700, opacity: 0.8 }; var idStyle = { opacity: 0.5 }; var divStyle = { paddingBottom: 70, marginTop:30 }; return ( <div style={divStyle} className="col-xs-12"> <h1 style={headerStyle}>{this.props.pokemonName} <span style={idStyle}> {this.formatId(this.props.pokemonId.toString())}</span></h1> </div> ); }
});
var PokemonType = React.createClass({ getInitialState: function () { return { backgroundColor: "", fontColor: "#FFF" }; }, componentWillMount: function () { this.getColor(this.props.pokemonType); }, componentWillReceiveProps: function (nextProps) { this.getColor(nextProps.pokemonType); }, uppercaser: function (str) { return str.replace(str[0], str[0].toUpperCase()); }, getColor: function (pokemonType) { var background = ""; var font = "#FFF"; switch (pokemonType) { case "poison": background = "#b97fc9"; break; case "grass": background = "#9bcc50"; font = "#333"; break; case "ice": background = "#51c4e7"; font = "#333"; break; case "flying": background = "linear-gradient(180deg, #3dc7ef 50%, #bdb9b8 50%)"; font = "#333"; break; case "fire": background = "#fd7d24"; break; case "psychic": background = "#f366b9"; break; case "bug": background = "#729f3f"; break; case "dragon": background = "linear-gradient(180deg, #53a4cf 50%, #f16e57 50%)"; break; case "fairy": background = "#fdb9e9"; font = "#333"; break; case "ghost": background = "#7b62a3"; break; case "ground": background = "linear-gradient(180deg, #f7de3f 50%, #ab9842 50%)"; font = "#333"; break; case "normal": background = "#a4acaf"; break; case "steel": background = "#9eb7b8"; font = "#333"; break; case "dark": background = "#707070"; break; case "electric": background = "#eed535"; font = "#333"; break; case "fighting": background = "#d56723"; break; case "rock": background = "#a38c21"; break; case "water": background = "#4592c4"; break; } this.setState({ fontColor: font }); this.setState({ backgroundColor: background }); }, render: function () { var colStyle = { textAlign: "center", background: this.state.backgroundColor, border: this.props.border }; var typeStyle = { marginTop: 8, color: this.state.fontColor, fontWeight:700 }; return ( <div style={colStyle} className={this.props.colSize}> <p style={typeStyle}>{this.uppercaser(this.props.pokemonType)}</p> </div> ); }
});
var TypesAndWeaknesses = React.createClass({ render: function () { // async ?? if (!this.props.pokemonType) return null; var imgStyle = { margin: "0 auto", display: "block" }; var colStyle = { paddingTop: 10 }; var types = []; var weaknesses = []; this.props.pokemonType.forEach(function (item, index) { types.push(<PokemonType key={index} pokemonType={item.name} colSize="col-sm-4" border="3px solid #EEE" />); }); this.props.weaknesses.forEach(function (item, index) { weaknesses.push(<PokemonType key={index} pokemonType={item.name} colSize="col-sm-4" border="3px solid #EEE" />); }); return ( <div className="col-xs-6"> <div className="col-xs-12"> <img style={imgStyle} src={this.props.imgUrl} alt="pokemon" className="img-responsive"/> </div> <br/> <div className="col-xs-12"> <h4>Type</h4> {types} <br/> </div> <div style={colStyle} className="col-xs-12"> <h4>Weaknesses</h4> <br/> {weaknesses} <br/> </div> </div> ); }
});
var PokemonStats = React.createClass({ render: function () { var hpStyle = { width: this.props.hp + "%", background: "#0099cc" }; var attackStyle = { width: this.props.attack + "%", background: "#0099cc", }; var defenseStyle = { width: this.props.defense + "%", background: "#0099cc", }; var spatkStyle = { width: this.props.sp_atk + "%", background: "#0099cc" }; var spdefStyle = { width: this.props.sp_def + "%", background: "#0099cc" }; var speedStyle = { width: this.props.speed + "%", background: "#0099cc" }; var special = { marginTop: 13 }; var progressStyle = { position: "relative" }; var spanStyle = { position: "absolute", display: "block", width: "100%", fontWeight: 700, color: "#000" }; return ( <div className="row"> <div className="col-sm-6"> <div className="col-sm-12"> <div className="col-sm-2"> <p>HP</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={hpStyle}> <span style={spanStyle}>{this.props.hp}</span> </div> </div> </div> </div> <div style={special} className="col-sm-12"> <div className="col-sm-2"> <p>Attack</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={attackStyle}> <span style={spanStyle}>{this.props.attack}</span> </div> </div> </div> </div> <div style={special} className="col-sm-12"> <div className="col-sm-2"> <p>Defense</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={defenseStyle}> <span style={spanStyle}>{this.props.defense}</span> </div> </div> </div> </div> </div> <div className="col-sm-6"> <div className="col-sm-12"> <div className="col-sm-2"> <p>Special Attack</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={spatkStyle}> <span style={spanStyle}>{this.props.sp_atk}</span> </div> </div> </div> </div> <div className="col-sm-12"> <div className="col-sm-2"> <p>Special Defense</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={spdefStyle}> <span style={spanStyle}>{this.props.sp_def}</span> </div> </div> </div> </div> <div className="col-sm-12"> <div className="col-sm-2"> <p>Speed</p> </div> <div className="col-sm-10"> <div style={progressStyle} className="progress"> <div className="progress-bar progress-bar-custom" role="progressbar" style={speedStyle}> <span style={spanStyle}>{this.props.speed}</span> </div> </div> </div> </div> </div> </div> ); }
});
var PokemonContainer = React.createClass({ formatId: function (id) { if (id.length === 1) { return "#00" + id; } else if (id.length === 2) { return "#0" + id; } else { return "#" + id; } }, render: function () { var captionStyle = { marginTop: -18 }; var containerStyle = { background: "#FFF", padding: 10, border: "12px solid #EEE", height: 298 }; var pokemonIdStyle = { opacity: 0.5, fontSize: 16, fontWeight: 700 }; var thumbnailStyle = { height: 130 }; var types = []; this.props.pokemonType.forEach(function (item, index) { types.push(<PokemonType pokemonType={item.name} key={index} colSize="col-xs-6 col-md-5" border="3px solid #FFF"/>); }); return ( <div style={containerStyle} className="col-sm-3 col-xs-12"> <Link to={this.props.detailsUrl} className="thumbnail" style={thumbnailStyle}> <img src={this.props.pokemonImgUrl} alt="pokemon"/> </Link> <div style={captionStyle} className="caption"> <p style={pokemonIdStyle} >{this.formatId(this.props.pokemonId)}</p> <h3>{this.props.pokemonName}</h3> {types} </div> </div> ); }
});
var AjaxLoader = React.createClass({ render: function () { var style = { top: "50%", left: "50%", transform: "translate(-50%, -50%)", position: "absolute" }; return ( <img src="https://www.upload.ee/image/5580893/ajax-loader.gif" alt="loading" style={style} /> ); }
});
var HomePage = React.createClass({ mixins: [Reflux.listenTo(PokemonStore, "onChange")], getInitialState: function () { return { pokemons: [], isLoading: false }; }, componentWillMount: function () { Actions.getPokemons(1, 13); $(window).scroll(function () { if ($(window).scrollTop() === $(document).height() - $(window).height() && !this.state.isLoading) { this.setState({ isLoading: true }); Actions.getPokemons(this.state.pokemons.length + 1, this.state.pokemons.length + 33); } }.bind(this)); }, onChange: function (msg, pokemons) { this.setState({ pokemons: pokemons }); this.setState({ isLoading: false }); }, render: function () { document.body.style.background = "#EEE"; var margin = { marginTop: 30 }; var loaderStyle = { margin: "0 auto", display: "block" }; var pokemonArr = []; this.state.pokemons.forEach(function (item, index) { pokemonArr.push( <PokemonContainer key={index} pokemonId={item.id} pokemonName={item.name} pokemonImgUrl={item.imgUrl} pokemonType={item.type} detailsUrl={item.detailsUrl} /> ); }); return ( <div> <SearchField ref="searchField" /> <Buttons callback={this.callback} /> <div className="container " style={margin}> <div className="row"> {pokemonArr} </div> {this.state.isLoading ? <img src="https://www.upload.ee/image/5580893/ajax-loader.gif" alt="loading" style={loaderStyle} /> : null} </div> </div> ); }
});
var DetailsPage = React.createClass({ mixins: [Reflux.listenTo(PokemonDetailStore, "getData")], getInitialState: function () { return { details: {} }; }, componentWillMount: function () { Actions.getDetails(this.props.params.pokemonId); }, getData: function (msg, details) { this.setState({ details: details }); }, render: function () { if (!this.state.details.ability) return (<AjaxLoader />); document.body.style.background = "#EEE"; document.body.style.color = "#000"; return ( <div className="container"> <PokemonNameId pokemonName={this.state.details.name} pokemonId={this.state.details.id} /> <div className="row"> <TypesAndWeaknesses imgUrl={this.state.details.imgUrl} pokemonType={this.state.details.type} weaknesses={this.state.details.weaknesses} /> <div className="col-xs-6"> <PokemonDescription pokemonDescription={this.state.details.description}/> <br/><br/> <PokemonCharacteristics weight={this.state.details.weight} height={this.state.details.height} category={this.state.details.category} ability={this.state.details.ability} abilityDescription={this.state.details.abilityDescription} /> </div> </div> <br/> <PokemonStats hp={this.state.details.hp} attack={this.state.details.attack} defense={this.state.details.defense} sp_atk={this.state.details.sp_atk} sp_def={this.state.details.sp_def} speed={this.state.details.speed} /> </div> ); }
});
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var Routes = ( <Router> <Route path="/" component={HomePage} /> <Route path="/pokemons/:pokemonId" component={DetailsPage} /> </Router>
);
ReactDOM.render(Routes, document.getElementById("main"));
*/
"use strict";
| Developer | Mihkel |
| Username | Krokodill |
| Uploaded | December 08, 2022 |
| Rating | 3 |
| Size | 13,070 Kb |
| Views | 6,072 |
Do you need developer help for React Pokedex?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mihkel (Krokodill) Script Codes
| Name | Size |
| Dungeon Crawler | 5,057 Kb |
| Twitch Status 2.0 | 4,245 Kb |
| Snake Game | 2,941 Kb |
| Game of Life | 2,922 Kb |
| Pomodoro Timer | 3,599 Kb |
| Simon Game | 4,975 Kb |
| React.js Game of Life | 5,760 Kb |
| Form validation with jQuery | 2,641 Kb |
| React Markdown Preview | 2,675 Kb |
| Wikipedia Viewer | 3,078 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by panstable | Panstable | 2,940 Kb |
| The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
| Using Flickr API | MoyArt | 6,761 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
| Website Concept | Sagoza | 3,104 Kb |
| CSS eye follow | Pedrocampos | 2,592 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!