{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzUwNDc2NTgyLCJpYXQiOjE3NTA0NzI5ODIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.I1FIBmn1Dsdhi_LvtrDGC2CYz-1Jp6peP57eg0ZFsURpcCRmno6mUG2OAik52Yp6MP-ymV3GGAjl14yUZQNdyQFcHZiTggJsxlMqSLg7S4mKioFRMCU8I6EvuYk0JCOk8xhaxVYWBEOIzggkimRr_w4S1TWTY8l-YUlRpdulR39YYDwmNcepU8u1jkmZZU_ua5tVsrlxqmOj2UQpln6F8l_3bdHyvQPX3MIQtUe5QUPlTTkgFyxbWC67CG8_IKgzFjXLILnYc-QI35glgrm4uPQwbvs7If44dRKUWDSnjd9X0RyG85_IyiqJCMfT8E7xm-unIcSAizp8nzlJSDmQ8Q"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":77337646,\"user_id\":252820,\"html\":\"<div id=\\\"root\\\"><\\/div>\\n\",\"css\":\"@font-face {\\n\\tfont-family: \\\"PuppyBellies\\\";\\n\\tsrc: url(\\\"https:\\/\\/assets.codepen.io\\/252820\\/PuppyBellies.ttf\\\")\\n\\t\\tformat(\\\"truetype\\\");\\n\\tfont-weight: normal;\\n\\tfont-style: normal;\\n}\\n\\nbody {\\n\\tfont-family: \\\"PuppyBellies\\\", Sans-Serif;\\n\\tfont-weight: 400;\\n\\tfont-style: normal;\\n\\theight: 100vh;\\n\\tmargin: 0;\\n\\tpadding: 0;\\n}\\n\",\"js\":\"const config = {\\n\\tslideSpeed: 5000,\\n\\tloopSlides: false\\n};\\n\\nconst App = () => {\\n\\tconst [dogImages, setDogImages] = React.useState([]);\\n\\tconst [loading, setLoading] = React.useState(true);\\n\\tconst [error, setError] = React.useState(null);\\n\\tconst [currentIndex, setCurrentIndex] = React.useState(0);\\n\\tconst slideInterval = React.useRef(null);\\n\\n\\t\\/\\/ Fetch dog images from the API\\n\\tconst fetchDogImages = async () => {\\n\\t\\tsetLoading(true);\\n\\t\\tsetError(null);\\n\\n\\t\\ttry {\\n\\t\\t\\tconst response = await axios.get(\\n\\t\\t\\t\\t\\\"https:\\/\\/api.thedogapi.com\\/v1\\/images\\/search?limit=5\\\"\\n\\t\\t\\t);\\n\\t\\t\\tsetDogImages(response.data);\\n\\t\\t\\tsetLoading(false);\\n\\t\\t\\tsetCurrentIndex(0);\\n\\t\\t} catch (err) {\\n\\t\\t\\tsetError(\\\"Error fetching dog images\\\");\\n\\t\\t\\tsetLoading(false);\\n\\t\\t}\\n\\t};\\n\\n\\t\\/\\/ Fetch dominant colors from image\\n\\tconst fetchColorsFromImage = async (imageUrl) => {\\n\\t\\ttry {\\n\\t\\t\\tconst proxyUrl = `https:\\/\\/corsimage.vercel.app\\/api\\/cors-image?url=${encodeURIComponent(\\n\\t\\t\\t\\timageUrl\\n\\t\\t\\t)}`;\\n\\n\\t\\t\\tconst response = await axios.get(proxyUrl, { responseType: \\\"blob\\\" });\\n\\t\\t\\tlet img = new Image();\\n\\n\\t\\t\\tif (img && img.src) {\\n\\t\\t\\t\\timg.onload = null;\\n\\t\\t\\t}\\n\\n\\t\\t\\timg.src = URL.createObjectURL(response.data);\\n\\t\\t\\timg.onload = () => {\\n\\t\\t\\t\\tconst fac = new FastAverageColor();\\n\\t\\t\\t\\tconst color = fac.getColor(img);\\n\\t\\t\\t\\tdocument.body.style.background = `linear-gradient(to bottom right, ${color.rgba}, rgba(255,255,255,0.5))`;\\n\\t\\t\\t\\tdocument.body.style.height = \\\"100vh\\\";\\n\\t\\t\\t\\tdocument.body.style.margin = \\\"0\\\";\\n\\t\\t\\t};\\n\\t\\t} catch (error) {\\n\\t\\t\\tconsole.error(\\\"Failed to extract colors\\\", error);\\n\\t\\t}\\n\\t};\\n\\n\\t\\/\\/ Effect to fetch colors from image\\n\\tReact.useEffect(() => {\\n\\t\\tif (dogImages.length > 0) {\\n\\t\\t\\tfetchColorsFromImage(dogImages[currentIndex].url);\\n\\t\\t}\\n\\t}, [currentIndex, dogImages]);\\n\\n\\t\\/\\/ Effect to fetch dog images\\n\\tReact.useEffect(() => {\\n\\t\\tfetchDogImages();\\n\\t}, []);\\n\\n\\t\\/\\/ Function to start the auto-slide interval\\n\\tconst startSlideInterval = () => {\\n\\t\\tclearInterval(slideInterval.current);\\n\\t\\tslideInterval.current = setInterval(() => {\\n\\t\\t\\thandleNext();\\n\\t\\t}, config.slideSpeed);\\n\\t};\\n\\n\\t\\/\\/ Effect to start the auto-slide interval\\n\\tReact.useEffect(() => {\\n\\t\\tif (dogImages.length > 0) {\\n\\t\\t\\tstartSlideInterval();\\n\\t\\t}\\n\\n\\t\\treturn () => clearInterval(slideInterval.current);\\n\\t}, [dogImages]);\\n\\n\\tconst handleNext = () => {\\n\\t\\tsetCurrentIndex((prevIndex) => {\\n\\t\\t\\tif (prevIndex === dogImages.length - 1) {\\n\\t\\t\\t\\treturn config.loopSlides ? 0 : prevIndex;\\n\\t\\t\\t} else {\\n\\t\\t\\t\\treturn prevIndex + 1;\\n\\t\\t\\t}\\n\\t\\t});\\n\\t\\tstartSlideInterval();\\n\\t};\\n\\n\\tconst handlePrev = () => {\\n\\t\\tsetCurrentIndex((prevIndex) => {\\n\\t\\t\\tif (prevIndex === 0) {\\n\\t\\t\\t\\treturn config.loopSlides ? dogImages.length - 1 : prevIndex;\\n\\t\\t\\t} else {\\n\\t\\t\\t\\treturn prevIndex - 1;\\n\\t\\t\\t}\\n\\t\\t});\\n\\t\\tstartSlideInterval();\\n\\t};\\n\\n\\t\\/\\/ Handle thumbnail click and reset the timer\\n\\tconst handleThumbnailClick = (index) => {\\n\\t\\tsetCurrentIndex(index);\\n\\t\\tstartSlideInterval();\\n\\t};\\n\\n\\tif (loading) {\\n\\t\\treturn <div className=\\\"text-center text-xl\\\">Loading...<\\/div>;\\n\\t}\\n\\n\\tif (error) {\\n\\t\\treturn <div className=\\\"text-center text-red-500\\\">{error}<\\/div>;\\n\\t}\\n\\n\\t\\/\\/ Render the app\\n\\treturn (\\n\\t\\t<div className=\\\"flex justify-center items-center min-h-screen\\\">\\n\\t\\t\\t{\\/* Glassmorphic container *\\/}\\n\\t\\t\\t<div className=\\\"p-8 w-full md:w-[800px] lg:w-[1200px] bg-white bg-opacity-10 backdrop-blur-2xl border border-gray-200 rounded-xl shadow-lg space-y-6 text-center\\\">\\n\\t\\t\\t\\t<h1 className=\\\"text-4xl font-bold text-white mb-6 tracking-wider\\\">\\n\\t\\t\\t\\t\\t<span>🐶 The Doggo Image Slider<\\/span>\\n\\t\\t\\t\\t<\\/h1>\\n\\t\\t\\t\\t<small>\\n\\t\\t\\t\\t\\tCourtesy of{\\\" \\\"}\\n\\t\\t\\t\\t\\t<a href=\\\"https:\\/\\/www.thedogapi.com\\/\\\" target=\\\"_blank\\\" rel=\\\"noreferrer\\\">\\n\\t\\t\\t\\t\\t\\tThe Dog API\\n\\t\\t\\t\\t\\t<\\/a>\\n\\t\\t\\t\\t<\\/small>\\n\\n\\t\\t\\t\\t{dogImages.length > 0 && (\\n\\t\\t\\t\\t\\t<div className=\\\"relative mb-8\\\">\\n\\t\\t\\t\\t\\t\\t<img\\n\\t\\t\\t\\t\\t\\t\\tkey={dogImages[currentIndex].url}\\n\\t\\t\\t\\t\\t\\t\\tsrc={dogImages[currentIndex].url}\\n\\t\\t\\t\\t\\t\\t\\talt=\\\"Random Dog\\\"\\n\\t\\t\\t\\t\\t\\t\\tclassName=\\\"mx-auto rounded-xl shadow-lg w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover transition-opacity duration-500 ease-in-out opacity-0\\\"\\n\\t\\t\\t\\t\\t\\t\\tonLoad={(e) => (e.target.style.opacity = 1)}\\n\\t\\t\\t\\t\\t\\t\\/>\\n\\t\\t\\t\\t\\t\\t{dogImages[currentIndex].breeds &&\\n\\t\\t\\t\\t\\t\\t\\tdogImages[currentIndex].breeds.length > 0 && (\\n\\t\\t\\t\\t\\t\\t\\t\\t<div className=\\\"text-lg mt-4\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h2 className=\\\"text-2xl font-semibold text-white tracking-wide\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tBreed: {dogImages[currentIndex].breeds[0].name}\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<\\/h2>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p className=\\\"text-sm italic text-gray-300\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tTemperament: {dogImages[currentIndex].breeds[0].temperament}\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<\\/p>\\n\\t\\t\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t\\t)}\\n\\t\\t\\t\\t\\t\\t<button\\n\\t\\t\\t\\t\\t\\t\\tclassName=\\\"absolute top-1\\/2 left-0 transform -translate-y-1\\/2 px-3 py-1 bg-white bg-opacity-20 backdrop-blur-md border border-white border-opacity-30 text-white rounded-full hover:bg-opacity-30 hover:scale-105 shadow-lg hover:shadow-2xl transition-all duration-300\\\"\\n\\t\\t\\t\\t\\t\\t\\tonClick={handlePrev}\\n\\t\\t\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t\\t\\t<svg\\n\\t\\t\\t\\t\\t\\t\\t\\txmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tfill=\\\"none\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tstrokeWidth=\\\"1.5\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tstroke=\\\"currentColor\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tclassName=\\\"w-6 h-6\\\"\\n\\t\\t\\t\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tstrokeLinecap=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tstrokeLinejoin=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\td=\\\"M15.75 19.5 8.25 12l7.5-7.5\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\/>\\n\\t\\t\\t\\t\\t\\t\\t<\\/svg>\\n\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<button\\n\\t\\t\\t\\t\\t\\t\\tclassName=\\\"absolute top-1\\/2 right-0 transform -translate-y-1\\/2 px-3 py-1 bg-white bg-opacity-20 backdrop-blur-md border border-white border-opacity-30 text-white rounded-full hover:bg-opacity-30 hover:scale-105 shadow-lg hover:shadow-2xl transition-all duration-300\\\"\\n\\t\\t\\t\\t\\t\\t\\tonClick={handleNext}\\n\\t\\t\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t\\t\\t<svg\\n\\t\\t\\t\\t\\t\\t\\t\\txmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tfill=\\\"none\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tstrokeWidth=\\\"1.5\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tstroke=\\\"currentColor\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\tclassName=\\\"w-6 h-6\\\"\\n\\t\\t\\t\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tstrokeLinecap=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tstrokeLinejoin=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\td=\\\"m8.25 4.5 7.5 7.5-7.5 7.5\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\/>\\n\\t\\t\\t\\t\\t\\t\\t<\\/svg>\\n\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t)}\\n\\t\\t\\t\\t<div className=\\\"overflow-x-auto mt-4\\\">\\n\\t\\t\\t\\t\\t<div className=\\\"flex justify-center space-x-2\\\">\\n\\t\\t\\t\\t\\t\\t{dogImages.map((image, index) => (\\n\\t\\t\\t\\t\\t\\t\\t<img\\n\\t\\t\\t\\t\\t\\t\\t\\tkey={index}\\n\\t\\t\\t\\t\\t\\t\\t\\tsrc={image.url}\\n\\t\\t\\t\\t\\t\\t\\t\\talt={`Thumbnail ${index}`}\\n\\t\\t\\t\\t\\t\\t\\t\\tclassName={`w-16 h-16 object-cover rounded-lg cursor-pointer ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tcurrentIndex === index ? \\\"ring-2 ring-blue-500\\\" : \\\"\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t} transition-transform duration-300 hover:scale-105`}\\n\\t\\t\\t\\t\\t\\t\\t\\tonClick={() => handleThumbnailClick(index)}\\n\\t\\t\\t\\t\\t\\t\\t\\/>\\n\\t\\t\\t\\t\\t\\t))}\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<button\\n\\t\\t\\t\\t\\tclassName=\\\"mt-4 px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 shadow-lg transition-all duration-300 hover:shadow-xl flex justify-center items-center space-x-2 mx-auto\\\"\\n\\t\\t\\t\\t\\tonClick={fetchDogImages}\\n\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t<svg\\n\\t\\t\\t\\t\\t\\txmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n\\t\\t\\t\\t\\t\\tfill=\\\"none\\\"\\n\\t\\t\\t\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\t\\t\\t\\tstrokeWidth=\\\"1.5\\\"\\n\\t\\t\\t\\t\\t\\tstroke=\\\"currentColor\\\"\\n\\t\\t\\t\\t\\t\\tclassName=\\\"w-6 h-6\\\"\\n\\t\\t\\t\\t\\t>\\n\\t\\t\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\t\\t\\tstrokeLinecap=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\tstrokeLinejoin=\\\"round\\\"\\n\\t\\t\\t\\t\\t\\t\\td=\\\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99\\\"\\n\\t\\t\\t\\t\\t\\t\\/>\\n\\t\\t\\t\\t\\t<\\/svg>\\n\\t\\t\\t\\t\\t<span>Fetch New Doggos<\\/span>\\n\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t);\\n};\\n\\nReactDOM.render(<App \\/>, document.getElementById(\\\"root\\\"));\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-10-04T21:27:27.806Z\",\"updated_at\":\"2024-11-13T20:14:58.129Z\",\"title\":\"Demo: The Doggo Image Slider\",\"description\":\"This project is built using React for managing the component state and rendering, Axios for fetching data from the Dog API, and Tailwind CSS for styling, including a glassmorphic effect on the UI. The slider is fully configurable, allowing dynamic control over the slide speed and looping behavior. React's useState and useEffect hooks manage state updates and side effects like fetching images and handling the auto-slide feature. The useRef hook is used to handle and reset the slide timer efficiently. The design leverages Tailwind’s utility classes for smooth transitions, hover effects, and responsive design, creating a modern, flexible, and highly interactive UI.\",\"slug_hash\":\"dyxXyYy\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\"private\":false,\"slug_hash_private\":\"70f1e83ccdaece14370bc6f46bc2c5e8\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":77337066,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":2,\"views_count\":24,\"pick_visible_at\":null,\"cpid\":\"0192596e-353e-7ae4-bed0-d61ef8831021\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"dyxXyYy\"}"}