T-Shirt Creator

Developer
Azizur Rahman
Size
2,512 Kb
Views
4,048
  1. T-Shirt Creator Previews
  2. T-Shirt Creator HTML Codes
  3. T-Shirt Creator CSS Codes
  4. T-Shirt Creator JS Codes

How do I make an t-shirt creator?

What is a t-shirt creator? How do you make a t-shirt creator? This script and codes were developed by Azizur Rahman on 09 January 2023, Monday.

T-Shirt Creator Previews
IQ Test

T-Shirt Creator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>T-Shirt Creator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="container"> <div id="left"> <div class="prints"> <h1>Choose a design</h1> <img id="heartone" class="design" src="https://anonimag.es/i/f2b85c73ac1ab1e46189ee918b19bef8.png"> <img id="hearttwo" class="design" src="https://anonimag.es/i/d8562fb6a11f60b1853e988723d047b6.png"> <img id="twig" class="design" src="https://anonimag.es/i/42aee29746d4f068a5d188e693dbf90c.png"> <img id="bird" class="design" src="https://anonimag.es/i/262f38a877b5fecca80ebd2b499c7696.png"> </div> <button>Add to Basket</button> </div> <div id="right"> <span id="showprint"></span> <img class="shirt" src="https://anonimag.es/i/f5f049ce3a23ccedec87f6636aeaafc5.png"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

T-Shirt Creator - Script Codes CSS Codes

.container { width: 1000px; height: 500px; margin: 60px auto; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
#right { float: right; width: 40%; height: 100%; position: relative;
}
.design { height: 70px; width: 190px; padding: 10px; margin: 6px 6px; border-radius: 1px; border: 1px solid #e0e0e0; background-color: #eeeeee; cursor: pointer;
}
#left { float: left; width: 60%; text-align: center;
}
.prints { padding: 40px; margin: 10px; font-family: 'Open Sans';
}
.shirt { height: 100%;
}
h1 { text-align: center; color: #212121; text-transform: uppercase; font-size: 1.5rem; padding: 10px;
}
button { background-color: #cddc39; border: 0px; padding: 8px; font-size: 1rem; font-family: 'Open Sans'; cursor: pointer;
}
#showprint img { width: 140px; position: absolute; top: 150px; right: 180px;
}
.design:hover { background-color: white;
}
button:active { background-color: #dce775;
}

T-Shirt Creator - Script Codes JS Codes

var heartOne = document.getElementById('heartone');
var heartTwo = document.getElementById('hearttwo');
var twig = document.getElementById('twig');
var bird = document.getElementById('bird');
var rightSide = document.getElementById('right');
var img = document.createElement("img");
var src = document.getElementById("showprint");
heartOne.onclick = function(){ img.src = "https://anonimag.es/i/f2b85c73ac1ab1e46189ee918b19bef8.png"; src.appendChild(img);
}
heartTwo.onclick = function(){ img.src = "https://anonimag.es/i/d8562fb6a11f60b1853e988723d047b6.png"; src.appendChild(img);
}
twig.onclick = function(){ img.src = "https://anonimag.es/i/42aee29746d4f068a5d188e693dbf90c.png"; src.appendChild(img);
}
bird.onclick = function(){ img.src = "https://anonimag.es/i/262f38a877b5fecca80ebd2b499c7696.png"; src.appendChild(img);
}
T-Shirt Creator - Script Codes
T-Shirt Creator - Script Codes
Home Page Home
Developer Azizur Rahman
Username azizurrahman
Uploaded January 09, 2023
Rating 4.5
Size 2,512 Kb
Views 4,048
Do you need developer help for T-Shirt Creator?

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!

Azizur Rahman (azizurrahman) Script Codes
Name
Recipe Card
Login Form
Simple Transition Buttons
Working Weather Search
Fitness Card
Spinning Buttons
Text Bounce
Temperature Converter
One Page Site
Web Audio Player
Create amazing video scripts 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!