{"id":9111,"date":"2024-01-19T17:59:00","date_gmt":"2024-01-19T17:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9111"},"modified":"2024-01-22T15:59:28","modified_gmt":"2024-01-22T10:59:28","slug":"javascript-t-shirt-designer","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/","title":{"rendered":"JavaScript T-shirt Designer Code with Demo"},"content":{"rendered":"

This JavaScript code powers a T-shirt designer application. It enables color selection, logo and text addition, and texture customization. This tool allows you to create and preview personalized T-shirt designs effortlessly.<\/p>\n

You can utilize this code to add a customizable T-shirt designer feature on your e-commerce website. It simplifies T-shirt design by enabling color selection, logo placement, and text customization, making it a valuable addition for apparel businesses.<\/p>\n

How to Create JavaScript T-shirt Designer Tool<\/h2>\n

1. First of all, load the jQuery<\/a>, Magnifier JS<\/a> (to view product image with zoom), and ColorPicker JS<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<script\r\n  src=\"https:\/\/code.jquery.com\/jquery-2.1.3.min.js\"\r\n  integrity=\"sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=\"\r\n  crossorigin=\"anonymous\"><\/script>\r\n<script src=\"\/\/res.cloudinary.com\/demo-robert\/raw\/upload\/magnifier.js\"><\/script>\r\n<script src=\"\/\/res.cloudinary.com\/demo-robert\/raw\/upload\/colorPicker.js\"><\/script>\r\n<script src=\"\/\/widget.cloudinary.com\/global\/all.js\" type=\"text\/javascript\"><\/script><\/pre>\n
2. After that, create the HTML structure for T-shirt designer tool as follows. Modify the code according to your needs.<\/p>\n
<div id=\"demoContainer\">\r\n    <div id=\"header\">\r\n        <a href=\"https:\/\/cloudinary.com\/\">\r\n        <img width=\"172\" height=\"38\" src=\"https:\/\/res-1.cloudinary.com\/cloudinary\/image\/asset\/dpr_2.0\/logo-e0df892053afd966cc0bfe047ba93ca4.png\" alt=\"Cloudinary Logo\">\r\n        <\/a>\r\n        <h1>Product Personalization Demo<\/h1>\r\n    <\/div>\r\n    <div id=\"imageDemoContainer\">\r\n    <div id=\"preview\">\r\n    <\/div>\r\n        <div id=\"mainImageLoading\" class=\"hide\"><\/div>\r\n        <div id=\"mainImage\"><img id=\"mainImageTag\" src=\"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_700\/e_red:0\/e_blue:0\/e_green:0\/l_hanging-shirt-texture,o_0,fl_relative,w_1.0\/l_Hanger_qa2diz,fl_relative,w_1.0\/Hanging_T-Shirt_v83je9.jpg\" data-large-img-url=\"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/e_red:0\/e_blue:0\/e_green:0\/l_hanging-shirt-texture,o_0,fl_relative,w_1.0\/l_Hanger_qa2diz,fl_relative,w_1.0\/Hanging_T-Shirt_v83je9.jpg\"\/><\/div>\r\n        <div id=\"imageThumbs\">\r\n            <ul id=\"thumbs\">\r\n                <li class=\"active\" id=\"hangingThumb\"><img src=\"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_75\/e_red:0\/e_blue:0\/e_green:0\/l_hanging-shirt-texture,o_0,fl_relative,w_1.0\/l_Hanger_qa2diz,fl_relative,w_1.0\/Hanging_T-Shirt_v83je9.jpg\" \/><\/li>\r\n                <li id=\"layingThumb\"><img src=\"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_75\/e_red:0\/e_blue:0\/e_green:0\/l_laying-shirt-texture,o_0,fl_relative,w_1.0\/laying-shirt_xqstgr.jpg\" \/><\/li>\r\n                <li id=\"modelThumb\"><img src=\"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_75\/e_red:0\/e_blue:0\/e_green:0\/u_model2,fl_relative,w_1.0\/l_heather_texture,o_0,fl_relative,w_1.0\/shirt_only.jpg\" \/><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"demoInputContainer\">\r\n        <div class=\"inputSelections\">\r\n            <h2>Select a color:<\/h2>\r\n            <ul id=\"colorList\" class=\"swatches\">\r\n                <li class=\"active\" id=\"ffffff\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"47E8D2\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:47E8D2:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"DCA381\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:DCA381:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"702C3C\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:702C3C:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"E9C660\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:E9C660:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"A11D1F\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:A11D1F:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"897115\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:897115:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"598DE6\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:598DE6:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n            <\/ul>\r\n            <p><a href=\"#\" onclick=\"addColor()\">Add a custom color<\/a><\/p>\r\n            <input type='text' id=\"full\"\/>\r\n        <\/div>\r\n        <div class=\"inputSelections\">\r\n            <h2>Select a texture:<\/h2>\r\n            <ul id=\"texture\" class=\"swatches\">\r\n                <li id=\"flat\" class=\"active\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30,e_red:0\/e_green:0\/e_blue:0\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n                <li id=\"heatherTexture\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30,e_red:0\/e_green:0\/e_blue:0\/l_heather_texture,o_30,w_30,h_30,c_crop\/white-bar.jpg\" \/><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n        <div class=\"inputSelections\">\r\n            <h2>Add a logo:<\/h2>\r\n            <ul id=\"logo-list\" class=\"swatches\">\r\n                <li id=\"cloudinary-logo\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/q_auto,f_auto,h_30\/cloudinary-logo.jpg\" \/><\/li>\r\n                <li id=\"fire\"><img src=\"\/\/res.cloudinary.com\/demo-robert\/image\/upload\/q_auto,f_auto,h_30\/fire.png\" \/><\/li>\r\n            <\/ul>\r\n            <p><a href=\"#\" id=\"add_a_logo\">Add a Custom Logo<\/a><\/p>\r\n        <\/div>\r\n        <div class=\"inputSelections\">\r\n            <h2>Add text:<\/h2>\r\n            <select id=\"fontList\">\r\n                <option value=\"Arial\">Arial<\/option>\r\n                <option value=\"Georgia\">Georgia<\/option>\r\n                <option value=\"Sacramento\">Sacramento<\/option>\r\n                <option value=\"Roboto\">Roboto<\/option>\r\n                <option value=\"Montserrat\">Montserrat<\/option>\r\n                <option value=\"Bitter\">Bitter<\/option>\r\n            <\/select>\r\n            <div id=\"textInputContainer\">\r\n                <input type=\"text\" id=\"shirtText\" \/>\r\n                <input type=\"button\" id=\"addText\" value=\"Add Text\" \/>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div><\/pre>\n
3. Use the following CSS code to customize the basic interface for the T-shirt designing tool.<\/p>\n
html, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed, \r\nfigure, figcaption, footer, header, hgroup, \r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tborder: 0;\r\n\tfont-size: 100%;\r\n\tfont: inherit;\r\n\tvertical-align: baseline;\r\n  font-family:arial;\r\n}\r\n\/* HTML5 display-role reset for older browsers *\/\r\narticle, aside, details, figcaption, figure, \r\nfooter, header, hgroup, menu, nav, section {\r\n\tdisplay: block;\r\n}\r\nbody {\r\n\tline-height: 1;\r\n}\r\nol, ul {\r\n\tlist-style: none;\r\n}\r\nblockquote, q {\r\n\tquotes: none;\r\n}\r\nblockquote:before, blockquote:after,\r\nq:before, q:after {\r\n\tcontent: '';\r\n\tcontent: none;\r\n}\r\ntable {\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n}\r\n\r\n\r\na  {\r\n    color:#2074b5;\r\n    text-decoration:none;\r\n    font-size:12px;\r\n}\r\ninput  {\r\n    border: 1px solid #888;\r\n    border-radius: 5px;\r\n    height: 24px;\r\n    line-height: 20px;\r\n    padding: 5px;\r\n    width: 200px;\r\n    float:left;\r\n    margin:0 5px 0 0;\r\n}\r\n#preview  {\r\n  width:300px;\r\n  height:300px;\r\n  position:absolute;\r\n  left:0px;\r\n  top:0px;\r\n  overflow:hidden;\r\n}\r\n.show  {\r\n  border:1px solid #888;\r\n  left:750px !important;\r\n}\r\n\r\n#addText  {\r\n    background-color: #db631e;\r\n    border: medium none;\r\n    border-radius: 3px;\r\n    color: #fff;\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    height: 36px;\r\n    line-height: 24px;\r\n    width: 150px;\r\n}\r\n#demoContainer  {\r\n    width:1200px;\r\n    height:auto;\r\n    margin:0 auto;\r\n    font-family:Roboto;\r\n    position:relative;\r\n}\r\n    #header  {\r\n        width:100%;\r\n        height:auto;\r\n        float:left;\r\n        margin:0 0 10px;\r\n    }\r\n        #header a  {\r\n            float:left;\r\n        }\r\n        #header h1  {\r\n            font-size:30px;\r\n            color:#0E2F5A;\r\n            clear:none;\r\n            float:left;\r\n            margin:10px 0 0 20px;\r\n        }\r\n    #imageDemoContainer  {\r\n        width:700px;\r\n        height:auto;\r\n        float:left;\r\n        position:relative;\r\n    }\r\n      #mainImageLoading {\r\n        width:700px;\r\n        height:700px;\r\n        position:absolute;\r\n        z-index:1000;\r\n        background:#fff url('\/\/res.cloudinary.com\/demo-robert\/image\/upload\/v1452886398\/loader.gif') no-repeat center;\r\n        opacity:.7;\r\n      }\r\n      .hide  {\r\n        display:none !important;\r\n      }\r\n        #imageThumbs  {\r\n            float:left;\r\n            width:100%;\r\n            height:75px;\r\n        }\r\n            ul#thumbs  {\r\n                float:left;\r\n                list-style:none;\r\n                display:inline;\r\n                padding:0;\r\n                margin:10px 0 50px 50px;\r\n            }\r\n                ul#thumbs li  {\r\n                    float:left;\r\n                    display:inline;\r\n                    margin:0 10px 0 0;\r\n                    border:1px solid #E8E8E8;\r\n                    padding:0;\r\n                    height:75px;\r\n                    width:75px;\r\n                }\r\n    #demoInputContainer  {\r\n        width:450px;\r\n        height:auto;\r\n        float:right;\r\n        padding:100px 0 0;\r\n    }\r\n        .inputSelections  {\r\n            width:100%;\r\n            margin:0 0 20px;\r\n            height:auto;\r\n            float:left;\r\n        }\r\n            .inputSelections h2  {\r\n                font-weight:bold;\r\n                font-size:18px;\r\n                margin:5px 0 10px;\r\n            }\r\n            .inputSelections ul  {\r\n                width:100%;\r\n                height:auto;\r\n                display:block;\r\n                clear:both;\r\n                float:left;\r\n                margin:0 0 15px;\r\n            }\r\n                .inputSelections ul li  {\r\n                    float:left;\r\n                    padding:0;\r\n                    width:auto;\r\n                    border:1px solid #E8E8E8;\r\n                }\r\n                .swatches  {\r\n                  margin:-10px 0 15px !important;\r\n                }\r\n                .swatches li  {\r\n                    width:30px;\r\n                    height:30px;\r\n                    padding:0;\r\n                    margin:10px 10px 0 0;\r\n                }\r\n                  .inputSelections ul li:hover  {\r\n                    cursor:pointer;\r\n                  }\r\n                 ul#swatches li  {\r\n                    border:1px solid #E8E8E8;\r\n                    height:50px;\r\n                    padding:0;\r\n                    width:auto;\r\n                }\r\n                #fontSelector li  {\r\n                    margin:0 10px 0 0;\r\n                    height:30px;\r\n                    width:auto;\r\n                }\r\nul.logo li  {\r\n  height:50px;\r\n}\r\n.active  {\r\n    border:1px solid #959595 !important;\r\n}\r\n#textInputContainer  {\r\n    float:left;\r\n    width:100%;\r\n    height:auto;\r\n}\r\n#imageThumbs li:hover  {\r\n    cursor:pointer;\r\n}\r\n#fontlist  {\r\n    width:200px;\r\n    height:30px;\r\n    margin:0 0 15px;\r\n}\r\n#preview  {\r\n}\r\n\r\n.magnifier-thumb-wrapper {\r\n    position: relative;\r\n    display: block;\r\n    top: 0;\r\n    left: 0\r\n}\r\n\r\n.magnifier-lens {\r\n    position: absolute;\r\n    border: solid 1px #ccc;\r\n    z-index: 1000;\r\n    top: 0;\r\n    left: 0;\r\n    overflow: hidden;\r\n    background-image: none !important;\r\n}\r\n\r\n.magnifier-loader {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    border: solid 1px #ccc;\r\n    color: #fff;\r\n    text-align: center;\r\n    background: transparent;\r\n    background: rgba(50, 50, 50, 0.5);\r\n    z-index: 1000;\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)\";\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)\r\n}\r\n\r\n.magnifier-loader-text {\r\n    font: 13px Arial;\r\n    margin-top: 10px\r\n}\r\n\r\n.magnifier-large {\r\n    position: absolute;\r\n    z-index: 100\r\n}\r\n\r\n.magnifier-preview {\r\n    padding: 0;\r\n    width: 100%;\r\n    height: 150px;\r\n    position: relative;\r\n    overflow: hidden\r\n}\r\n\r\n.magnifier-preview img {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0\r\n}\r\n\r\n.opaque {\r\n    opacity: 1;\r\n    filter: alpha(opacity=100);\r\n    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\r\n}\r\n\r\n.hidden {\r\n    display: none\r\n}\r\n\/***\r\nSpectrum Colorpicker v1.8.0\r\nhttps:\/\/github.com\/bgrins\/spectrum\r\nAuthor: Brian Grinstead\r\nLicense: MIT\r\n***\/\r\n\r\n.sp-container {\r\n    position:absolute;\r\n    top:0;\r\n    left:0;\r\n    display:inline-block;\r\n    *display: inline;\r\n    *zoom: 1;\r\n    \/* https:\/\/github.com\/bgrins\/spectrum\/issues\/40 *\/\r\n    z-index: 9999994;\r\n    overflow: hidden;\r\n}\r\n.sp-container.sp-flat {\r\n    position: relative;\r\n}\r\n\r\n\/* Fix for * { box-sizing: border-box; } *\/\r\n.sp-container,\r\n.sp-container * {\r\n    -webkit-box-sizing: content-box;\r\n       -moz-box-sizing: content-box;\r\n            box-sizing: content-box;\r\n}\r\n\r\n\/* http:\/\/ansciath.tumblr.com\/post\/7347495869\/css-aspect-ratio *\/\r\n.sp-top {\r\n  position:relative;\r\n  width: 100%;\r\n  display:inline-block;\r\n}\r\n.sp-top-inner {\r\n   position:absolute;\r\n   top:0;\r\n   left:0;\r\n   bottom:0;\r\n   right:0;\r\n}\r\n.sp-color {\r\n    position: absolute;\r\n    top:0;\r\n    left:0;\r\n    bottom:0;\r\n    right:20%;\r\n}\r\n.sp-hue {\r\n    position: absolute;\r\n    top:0;\r\n    right:0;\r\n    bottom:0;\r\n    left:84%;\r\n    height: 100%;\r\n}\r\n\r\n.sp-clear-enabled .sp-hue {\r\n    top:33px;\r\n    height: 77.5%;\r\n}\r\n\r\n.sp-fill {\r\n    padding-top: 80%;\r\n}\r\n.sp-sat, .sp-val {\r\n    position: absolute;\r\n    top:0;\r\n    left:0;\r\n    right:0;\r\n    bottom:0;\r\n}\r\n\r\n.sp-alpha-enabled .sp-top {\r\n    margin-bottom: 18px;\r\n}\r\n.sp-alpha-enabled .sp-alpha {\r\n    display: block;\r\n}\r\n.sp-alpha-handle {\r\n    position:absolute;\r\n    top:-4px;\r\n    bottom: -4px;\r\n    width: 6px;\r\n    left: 50%;\r\n    cursor: pointer;\r\n    border: 1px solid black;\r\n    background: white;\r\n    opacity: .8;\r\n}\r\n.sp-alpha {\r\n    display: none;\r\n    position: absolute;\r\n    bottom: -14px;\r\n    right: 0;\r\n    left: 0;\r\n    height: 8px;\r\n}\r\n.sp-alpha-inner {\r\n    border: solid 1px #333;\r\n}\r\n\r\n.sp-clear {\r\n    display: none;\r\n}\r\n\r\n.sp-clear.sp-clear-display {\r\n    background-position: center;\r\n}\r\n\r\n.sp-clear-enabled .sp-clear {\r\n    display: block;\r\n    position:absolute;\r\n    top:0px;\r\n    right:0;\r\n    bottom:0;\r\n    left:84%;\r\n    height: 28px;\r\n}\r\n\r\n\/* Don't allow text selection *\/\r\n.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {\r\n    -webkit-user-select:none;\r\n    -moz-user-select: -moz-none;\r\n    -o-user-select:none;\r\n    user-select: none;\r\n}\r\n\r\n.sp-container.sp-input-disabled .sp-input-container {\r\n    display: none;\r\n}\r\n.sp-container.sp-buttons-disabled .sp-button-container {\r\n    display: none;\r\n}\r\n.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {\r\n    display: none;\r\n}\r\n.sp-palette-only .sp-picker-container {\r\n    display: none;\r\n}\r\n.sp-palette-disabled .sp-palette-container {\r\n    display: none;\r\n}\r\n\r\n.sp-initial-disabled .sp-initial {\r\n    display: none;\r\n}\r\n\r\n\r\n\/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works *\/\r\n.sp-sat {\r\n    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));\r\n    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));\r\n    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));\r\n    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));\r\n    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));\r\n    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)\";\r\n    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');\r\n}\r\n.sp-val {\r\n    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));\r\n    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));\r\n    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));\r\n    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));\r\n    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));\r\n    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)\";\r\n    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');\r\n}\r\n\r\n.sp-hue {\r\n    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));\r\n    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n}\r\n\r\n\/* IE filters do not support multiple color stops.\r\n   Generate 6 divs, line them up, and do two color gradients for each.\r\n   Yes, really.\r\n *\/\r\n.sp-1 {\r\n    height:17%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');\r\n}\r\n.sp-2 {\r\n    height:16%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');\r\n}\r\n.sp-3 {\r\n    height:17%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');\r\n}\r\n.sp-4 {\r\n    height:17%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');\r\n}\r\n.sp-5 {\r\n    height:16%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');\r\n}\r\n.sp-6 {\r\n    height:17%;\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');\r\n}\r\n\r\n.sp-hidden {\r\n    display: none !important;\r\n}\r\n\r\n\/* Clearfix hack *\/\r\n.sp-cf:before, .sp-cf:after { content: \"\"; display: table; }\r\n.sp-cf:after { clear: both; }\r\n.sp-cf { *zoom: 1; }\r\n\r\n\/* Mobile devices, make hue slider bigger so it is easier to slide *\/\r\n@media (max-device-width: 480px) {\r\n    .sp-color { right: 40%; }\r\n    .sp-hue { left: 63%; }\r\n    .sp-fill { padding-top: 60%; }\r\n}\r\n.sp-dragger {\r\n   border-radius: 5px;\r\n   height: 5px;\r\n   width: 5px;\r\n   border: 1px solid #fff;\r\n   background: #000;\r\n   cursor: pointer;\r\n   position:absolute;\r\n   top:0;\r\n   left: 0;\r\n}\r\n.sp-slider {\r\n    position: absolute;\r\n    top:0;\r\n    cursor:pointer;\r\n    height: 3px;\r\n    left: -1px;\r\n    right: -1px;\r\n    border: 1px solid #000;\r\n    background: white;\r\n    opacity: .8;\r\n}\r\n\r\n\/*\r\nTheme authors:\r\nHere are the basic themeable display options (colors, fonts, global widths).\r\nSee http:\/\/bgrins.github.io\/spectrum\/themes\/ for instructions.\r\n*\/\r\n\r\n.sp-container {\r\n    border-radius: 0;\r\n    background-color: #ECECEC;\r\n    border: solid 1px #f0c49B;\r\n    padding: 0;\r\n}\r\n.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {\r\n    font: normal 12px \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\r\n    -webkit-box-sizing: border-box;\r\n    -moz-box-sizing: border-box;\r\n    -ms-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n.sp-top {\r\n    margin-bottom: 3px;\r\n}\r\n.sp-color, .sp-hue, .sp-clear {\r\n    border: solid 1px #666;\r\n}\r\n\r\n\/* Input *\/\r\n.sp-input-container {\r\n    float:right;\r\n    width: 100px;\r\n    margin-bottom: 4px;\r\n}\r\n.sp-initial-disabled  .sp-input-container {\r\n    width: 100%;\r\n}\r\n.sp-input {\r\n   font-size: 12px !important;\r\n   border: 1px inset;\r\n   padding: 4px 5px;\r\n   margin: 0;\r\n   width: 100%;\r\n   background:transparent;\r\n   border-radius: 3px;\r\n   color: #222;\r\n}\r\n.sp-input:focus  {\r\n    border: 1px solid orange;\r\n}\r\n.sp-input.sp-validation-error {\r\n    border: 1px solid red;\r\n    background: #fdd;\r\n}\r\n.sp-picker-container , .sp-palette-container {\r\n    float:left;\r\n    position: relative;\r\n    padding: 10px;\r\n    padding-bottom: 300px;\r\n    margin-bottom: -290px;\r\n}\r\n.sp-picker-container {\r\n    width: 172px;\r\n    border-left: solid 1px #fff;\r\n}\r\n\r\n\/* Palettes *\/\r\n.sp-palette-container {\r\n    border-right: solid 1px #ccc;\r\n}\r\n\r\n.sp-palette-only .sp-palette-container {\r\n    border: 0;\r\n}\r\n\r\n.sp-palette .sp-thumb-el {\r\n    display: block;\r\n    position:relative;\r\n    float:left;\r\n    width: 24px;\r\n    height: 15px;\r\n    margin: 3px;\r\n    cursor: pointer;\r\n    border:solid 2px transparent;\r\n}\r\n.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {\r\n    border-color: orange;\r\n}\r\n.sp-thumb-el {\r\n    position:relative;\r\n}\r\n\r\n\/* Initial *\/\r\n.sp-initial {\r\n    float: left;\r\n    border: solid 1px #333;\r\n}\r\n.sp-initial span {\r\n    width: 30px;\r\n    height: 25px;\r\n    border:none;\r\n    display:block;\r\n    float:left;\r\n    margin:0;\r\n}\r\n\r\n.sp-initial .sp-clear-display {\r\n    background-position: center;\r\n}\r\n\r\n\/* Buttons *\/\r\n.sp-palette-button-container,\r\n.sp-button-container {\r\n    float: right;\r\n}\r\n\r\n\/* Replacer (the little preview div that shows up instead of the <input>) *\/\r\n.sp-replacer {\r\n    margin:0;\r\n    overflow:hidden;\r\n    cursor:pointer;\r\n    padding: 4px;\r\n    display:inline-block;\r\n    *zoom: 1;\r\n    *display: inline;\r\n    border: solid 1px #91765d;\r\n    background: #eee;\r\n    color: #333;\r\n    vertical-align: middle;\r\n}\r\n.sp-replacer:hover, .sp-replacer.sp-active {\r\n    border-color: #F0C49B;\r\n    color: #111;\r\n}\r\n.sp-replacer.sp-disabled {\r\n    cursor:default;\r\n    border-color: silver;\r\n    color: silver;\r\n}\r\n.sp-dd {\r\n    padding: 2px 0;\r\n    height: 16px;\r\n    line-height: 16px;\r\n    float:left;\r\n    font-size:10px;\r\n}\r\n.sp-preview {\r\n    position:relative;\r\n    width:25px;\r\n    height: 20px;\r\n    border: solid 1px #222;\r\n    margin-right: 5px;\r\n    float:left;\r\n    z-index: 0;\r\n}\r\n\r\n.sp-palette {\r\n    *width: 220px;\r\n    max-width: 220px;\r\n}\r\n.sp-palette .sp-thumb-el {\r\n    width:16px;\r\n    height: 16px;\r\n    margin:2px 1px;\r\n    border: solid 1px #d0d0d0;\r\n}\r\n\r\n.sp-container {\r\n    padding-bottom:0;\r\n}\r\n\r\n\r\n\/* Buttons: http:\/\/hellohappy.org\/css3-buttons\/ *\/\r\n.sp-container button {\r\n  background-color: #eeeeee;\r\n  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);\r\n  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);\r\n  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);\r\n  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);\r\n  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);\r\n  border: 1px solid #ccc;\r\n  border-bottom: 1px solid #bbb;\r\n  border-radius: 3px;\r\n  color: #333;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 5px 4px;\r\n  text-align: center;\r\n  text-shadow: 0 1px 0 #eee;\r\n  vertical-align: middle;\r\n}\r\n.sp-container button:hover {\r\n    background-color: #dddddd;\r\n    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);\r\n    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);\r\n    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);\r\n    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);\r\n    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);\r\n    border: 1px solid #bbb;\r\n    border-bottom: 1px solid #999;\r\n    cursor: pointer;\r\n    text-shadow: 0 1px 0 #ddd;\r\n}\r\n.sp-container button:active {\r\n    border: 1px solid #aaa;\r\n    border-bottom: 1px solid #888;\r\n    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;\r\n    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;\r\n    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;\r\n    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;\r\n    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;\r\n}\r\n.sp-cancel {\r\n    font-size: 11px;\r\n    color: #d93f3f !important;\r\n    margin:0;\r\n    padding:2px;\r\n    margin-right: 5px;\r\n    vertical-align: middle;\r\n    text-decoration:none;\r\n\r\n}\r\n.sp-cancel:hover {\r\n    color: #d93f3f !important;\r\n    text-decoration: underline;\r\n}\r\n\r\n\r\n.sp-palette span:hover, .sp-palette span.sp-thumb-active {\r\n    border-color: #000;\r\n}\r\n\r\n.sp-preview, .sp-alpha, .sp-thumb-el {\r\n    position:relative;\r\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\r\n}\r\n.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {\r\n    display:block;\r\n    position:absolute;\r\n    top:0;left:0;bottom:0;right:0;\r\n}\r\n\r\n.sp-palette .sp-thumb-inner {\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n}\r\n\r\n.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {\r\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi\/0DsT64h8UD8HmpIPCWG\/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);\r\n}\r\n\r\n.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {\r\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m\/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);\r\n}\r\n\r\n.sp-clear-display {\r\n    background-repeat:no-repeat;\r\n    background-position: center;\r\n    background-image: url(data:image\/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq\/Hx8fLy8vT09PX19ff39\/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M\/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);\r\n}\r\n\r\n\r\n.full-spectrum .sp-palette {\r\nmax-width: 200px;\r\n}\r\n.sp-palette-container {\r\n    border-right: 1px solid #ccc;\r\n    display: none;\r\n}<\/pre>\n
4. Finally, integrate the JavaScript code into your website to handle the T-shirt designer functionality.<\/p>\n
<script>\r\n\/\/generic image vars\r\nvar URLPrefix = 'https:\/\/res.cloudinary.com\/demo-robert\/q_auto,f_auto\/',\r\ntextString = '%20',\r\ntextVariable1 = '$text_!',\r\ntextVariable2 = '!\/o_0\/',\r\nlogoID = 'sample,o_0',\r\ntextFont = 'arial',\r\nnewHexColor = 'white',\r\nURLSuffix = 'shirt_only.jpg',\r\ntextureOpacity = '0',\r\nlogoResult = '';\r\n\r\n\/\/model image vars\r\nvar modelOverlayString1 = 'l_',\r\nmodelOverlayString2 = ',w_300,ar_30:25,c_fit,y_-200,x_-5,e_overlay\/',\r\nmodelTextTransform1 = 'l_text:',\r\nmodelTextTransform2 = '_100_bold:$(text),y_-40,co_rgb:333,o_70,w_300\/',\r\nmodelDisplace = 'l_shirt_displace,e_displace,x_10,y_10\/',\r\nmodelShirtUnderlay1 = 'u_shirt_only,e_replace_color:'\r\nmodelShirtUnderlay2 = ':60:white\/',\r\nmodelTexture = 'l_heather_texture,o_',\r\nmodelUnderlay = '\/u_model2\/';\r\n\r\n\/\/hanging image vars\r\nvar hangingOverlayString1 = 'l_',\r\nhangingOverlayString2 = ',w_220,ar_30:25,c_fit,y_-40,x_-5,e_overlay\/',\r\nhangingTextTransform1 = 'l_text:',\r\nhangingTextTransform2 = '_100_bold:$(text),y_90,co_rgb:333,o_70,w_250\/',\r\nhangingDisplace = 'l_hanging_displace,e_displace,x_10,y_10\/',\r\nhangingShirtUnderlay1 = 'u_Hanging_T-Shirt_v83je9,e_replace_color:',\r\nhangingShirtUnderlay2 = ':60:white\/',\r\nhangingTexture1 = 'l_hanging-shirt-texture,o_',\r\nhangingTexture2 = '\/l_Hanger_qa2diz,fl_relative,w_1.0\/';\r\n\r\n\/\/laying image vars\r\nvar layingOverlayString1 = 'l_',\r\nlayingOverlayString2 = ',w_330,ar_30:25,c_fit,y_-30,x_-5,e_overlay\/',\r\nlayingTextTransform1 = 'l_text:',\r\nlayingTextTransform2 = '_100_bold:$(text),y_150,co_rgb:333,o_70,w_350\/',\r\nlayingDisplace = 'l_laying_displace,e_displace,x_10,y_10\/',\r\nlayingShirtUnderlay1 = 'u_laying-shirt_xqstgr,e_replace_color:',\r\nlayingShirtUnderlay2 = ':60:white\/',\r\nlayingTexture = 'l_laying-shirt-texture,o_';\r\n\r\n\r\n\/\/end image vars\r\n\r\n\/\/Invoke Color Swatch and set settings\r\nfunction hexToRgb(hex) {\r\n    var result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\r\n    return result ? {\r\n        r: parseInt(result[1], 16),\r\n        g: parseInt(result[2], 16),\r\n        b: parseInt(result[3], 16)\r\n    } : null;\r\n}\r\n$(document).ready(function(){\r\n  $(\".basic\").spectrum({\r\n      color: \"#f00\",\r\n      change: function(color) {\r\n          $(\"#basic-log\").text(\"change called: \" + color.toHexString());\r\n      }\r\n  });\r\n\r\n$(\"#full\").spectrum({\r\n    color: \"#ECC\",\r\n    showInput: true,\r\n    className: \"full-spectrum\",\r\n    showInitial: true,\r\n    showPalette: true,\r\n    showSelectionPalette: true,\r\n    maxSelectionSize: 10,\r\n    preferredFormat: \"rgb\",\r\n    localStorageKey: \"spectrum.demo\",\r\n    move: function (color) {\r\n\r\n    },\r\n    show: function () {\r\n\r\n    },\r\n    beforeShow: function () {\r\n\r\n    },\r\n    hide: function () {\r\n\r\n    },\r\n    change: function(color) {\r\n        var firstSwatch = $('#colorList')[0].children[0].children[0].src;\r\n        newHexColor = color.toHexString().split('#')[1];\r\n        var hexColor = color.toHexString().split('#')[1],\r\n        newSrc = '\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:'+hexColor+':60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg';\r\n        $(\"#colorList\").append('<li id=\"'+hexColor+'\"><img src=\"'+newSrc+'\" \/><\/li>');\r\n        colorSwatchClick();\r\n    },\r\n    palette: [\r\n        [\"rgb(0, 0, 0)\", \"rgb(67, 67, 67)\", \"rgb(102, 102, 102)\",\r\n        \"rgb(204, 204, 204)\", \"rgb(217, 217, 217)\",\"rgb(255, 255, 255)\"],\r\n        [\"rgb(152, 0, 0)\", \"rgb(255, 0, 0)\", \"rgb(255, 153, 0)\", \"rgb(255, 255, 0)\", \"rgb(0, 255, 0)\",\r\n        \"rgb(0, 255, 255)\", \"rgb(74, 134, 232)\", \"rgb(0, 0, 255)\", \"rgb(153, 0, 255)\", \"rgb(255, 0, 255)\"],\r\n        [\"rgb(230, 184, 175)\", \"rgb(244, 204, 204)\", \"rgb(252, 229, 205)\", \"rgb(255, 242, 204)\", \"rgb(217, 234, 211)\",\r\n        \"rgb(208, 224, 227)\", \"rgb(201, 218, 248)\", \"rgb(207, 226, 243)\", \"rgb(217, 210, 233)\", \"rgb(234, 209, 220)\",\r\n        \"rgb(221, 126, 107)\", \"rgb(234, 153, 153)\", \"rgb(249, 203, 156)\", \"rgb(255, 229, 153)\", \"rgb(182, 215, 168)\",\r\n        \"rgb(162, 196, 201)\", \"rgb(164, 194, 244)\", \"rgb(159, 197, 232)\", \"rgb(180, 167, 214)\", \"rgb(213, 166, 189)\",\r\n        \"rgb(204, 65, 37)\", \"rgb(224, 102, 102)\", \"rgb(246, 178, 107)\", \"rgb(255, 217, 102)\", \"rgb(147, 196, 125)\",\r\n        \"rgb(118, 165, 175)\", \"rgb(109, 158, 235)\", \"rgb(111, 168, 220)\", \"rgb(142, 124, 195)\", \"rgb(194, 123, 160)\",\r\n        \"rgb(166, 28, 0)\", \"rgb(204, 0, 0)\", \"rgb(230, 145, 56)\", \"rgb(241, 194, 50)\", \"rgb(106, 168, 79)\",\r\n        \"rgb(69, 129, 142)\", \"rgb(60, 120, 216)\", \"rgb(61, 133, 198)\", \"rgb(103, 78, 167)\", \"rgb(166, 77, 121)\",\r\n        \"rgb(91, 15, 0)\", \"rgb(102, 0, 0)\", \"rgb(120, 63, 4)\", \"rgb(127, 96, 0)\", \"rgb(39, 78, 19)\",\r\n        \"rgb(12, 52, 61)\", \"rgb(28, 69, 135)\", \"rgb(7, 55, 99)\", \"rgb(32, 18, 77)\", \"rgb(76, 17, 48)\"]\r\n    ]\r\n})});\r\n\r\n\r\n\/\/Invoke magnifier\r\n  $(document).ready(function(){\r\n    var evt = new Event(),\r\n    mag = new Magnifier(evt);\r\n    mag.attach({\r\n        thumb: '#mainImageTag',\r\n        largeWrapper: 'preview',\r\n        zoom: '4'\r\n    });\r\n    $(\"#mainImage\").hover(\r\n      function() {\r\n        $('#preview').addClass('show');\r\n      }, function() {\r\n        $('#preview').removeClass('show');\r\n      }\r\n  \t);\r\n  });\r\n\r\n\r\n\/\/open upload Widget and set response variable\r\n  document.getElementById(\"add_a_logo\").addEventListener(\"click\", function() {\r\n    cloudinary.openUploadWidget({ cloud_name: 'demo-robert', upload_preset: 'pagespeed'},\r\n      function(error, result) {\r\n        if(!result)return;\r\n        window.logoResult=result[0];\r\n        addLogo();\r\n      });\r\n  }, false);\r\n\r\n  \/\/loader gif while images are loading\r\n  function loader(a){\r\n  \t$('#mainImageLoading').removeClass('hide');\r\n    var newImage = new Image();\r\n    newImage.src= a;\r\n    $(newImage).one(\"load\", function() {\r\n      $('#mainImageLoading').addClass('hide');\r\n    }).each(function() {\r\n      if(this.complete) $(this).load();\r\n    });\r\n  }\r\n\r\n  \/\/Update Image URLS\r\n  function updateImageURLs(){\r\n    var mainImageURL = function(){\r\n      if ($('#thumbs .active')[0].id == 'hangingThumb'){\r\n        return URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_700,ar_1:1,c_pad\/'+URLSuffix\r\n      }\r\n      else if ($('#thumbs .active')[0].id == 'layingThumb'){\r\n        return URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'\/w_700,ar_1:1,c_pad\/'+URLSuffix\r\n      }\r\n      else {\r\n        return URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_700,ar_1:1,c_pad\/'+URLSuffix\r\n      }\r\n    }()\r\n    \/\/run loader gif until image is loaded\r\n    loader(mainImageURL);\r\n    \/\/set new main image URL\r\n    document.getElementById('mainImageTag').src = mainImageURL;\r\n    document.getElementById('mainImageTag').setAttribute('data-large-img-url', document.getElementById('mainImageTag').src.replace('w_700,',''));\r\n    document.getElementById('mainImageTag-large').src = document.getElementById('mainImageTag').src.replace('w_700,','');\r\n    \/\/set new Thumbnail URLs\r\n    document.getElementById('hangingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_75,ar_1:1,c_pad\/'+URLSuffix\r\n    document.getElementById('layingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'\/w_75,ar_1:1,c_pad\/'+URLSuffix\r\n    document.getElementById('modelThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_75,ar_1:1,c_pad\/'+URLSuffix\r\n  }\r\n\r\n\r\n  \/\/Color-changing when somebody clicks on a color swatch\r\n  function colorSwatchClick(){\r\n      $(\"#colorList li\").on(\"click\", function() {\r\n          $('#colorList .active').removeClass('active');\r\n          $(this).addClass('active');\r\n          \/\/set window color variable\r\n          newHexColor = $('#colorList .active')[0].id;\r\n          \/\/update image URLS\r\n          updateImageURLs();\r\n          \/\/Set flat color swatch color\r\n          document.getElementById('flat').children[0].src = \"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:\"+newHexColor+\":60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg\"\r\n          \/\/Set heather texture swatch color\r\n          document.getElementById('heatherTexture').children[0].src = \"https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:\"+newHexColor+\":60:white\/l_heather_texture,o_30,w_30,h_30,c_crop\/white-bar.jpg\";\r\n      })\r\n  };\r\n\r\n  \/\/Thumnail to main image\r\n    function thumbToMain(){\r\n      $(\"#thumbs li\").on(\"click\", function() {\r\n        $('#thumbs .active').removeClass('active');\r\n        $(this).addClass('active');\r\n        updateImageURLs();\r\n      })\r\n    };\r\n\r\n  \/\/Texture add\/remove\r\n    function textureSwap(){\r\n      $(\"#texture li\").on(\"click\", function() {\r\n          $('#texture .active').removeClass('active');\r\n          $(this).addClass('active');\r\n          \/\/set texture opacity window variable\r\n          if ($('#texture .active')[0].id == 'flat'){\r\n            textureOpacity = '0';\r\n          }\r\n          else {\r\n            textureOpacity = '30';\r\n          }\r\n          \/\/rebuild URLS\r\n          updateImageURLs();\r\n          var newTexture = 'texture,o_'+textureOpacity;\r\n          var numColors = document.getElementById('colorList').children.length;\r\n          for (var i=0; i<numColors;i++){\r\n              document.getElementById('colorList').children[i].children[0].src = document.getElementById('colorList').children[i].children[0].src.replace(\/texture,o_([^,]+)\/,newTexture);\r\n          }\r\n      })\r\n    };\r\n\r\n    \/\/add logo to images\r\n    function addLogo(){\r\n        logoID = logoResult.public_id;\r\n        var newLogoSrc = \"\/\/res.cloudinary.com\/demo-robert\/q_auto,f_auto,h_30\/\"+logoID;\r\n        $(\"#logo-list\").prepend('<li id=\"'+logoID+'\"><img src=\"'+newLogoSrc+'\"\/><\/li>');\r\n        updateImageURLs();\r\n    }\r\n    function applyLogo(){\r\n      $(\"#logo-list li\").on(\"click\", function() {\r\n        $('#logo-list .active').removeClass('active');\r\n        $(this).addClass('active');\r\n        logoID = $('#logo-list .active')[0].id;\r\n        updateImageURLs();\r\n        applyLogo();\r\n      })\r\n    }\r\n\r\n    \/\/add text to images\r\n    function addText(){\r\n      $(\"#addText\").on(\"click\", function() {\r\n        textString = $('#shirtText').val();\r\n        textFont = $('#fontList').val();\r\n        updateImageURLs();\r\n      })\r\n    }\r\n\r\n\/\/initialize click watchers\r\n  $(document).ready(function(){\r\n      colorSwatchClick();\r\n      thumbToMain();\r\n      textureSwap();\r\n      addText();\r\n      applyLogo();\r\n  });\r\n<\/script><\/pre>\n
You can customize the code further to fit your website’s design and requirements. For example, you can adjust the layout and appearance of the T-shirt designer elements to match your site’s style.<\/p>\n
That’s all! hopefully, you have successfully created a JavaScript T-shirt Designer tool for your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code powers a T-shirt designer application. It enables color selection, logo and text addition, and texture customization. This…<\/p>\n","protected":false},"author":1,"featured_media":9122,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-9111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"\nJavaScript T-shirt Designer Code with Demo — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript T-shirt Designer Code with Demo — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T17:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:59:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript T-shirt Designer Code with Demo\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\"},\"wordCount\":222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\",\"name\":\"JavaScript T-shirt Designer Code with Demo — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:28+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript T-shirt Designer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript T-shirt Designer Code with Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript T-shirt Designer Code with Demo — CodeHim","description":"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript T-shirt Designer Code with Demo — CodeHim","og_description":"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T17:59:00+00:00","article_modified_time":"2024-01-22T10:59:28+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript T-shirt Designer Code with Demo","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/"},"wordCount":222,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/","name":"JavaScript T-shirt Designer Code with Demo — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:28+00:00","description":"Here is a free code snippet to create a JavaScript T-shirt Designer Code with Demo. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-T-shirt-Designer.png","width":1280,"height":960,"caption":"JavaScript T-shirt Designer"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-t-shirt-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript T-shirt Designer Code with Demo"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":4855,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9111"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9111\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9122"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}