Make Your jersey Application with HTML5, CSS3 and Javascript
In this application the technology stack which we will be using is HTML5, CSS3 and Javascript, all of which are very easy to learn and understand with a minimum of brain efforts. This application allows the user to customize the given t-shirts and allows him to create his jersey with his own name and number. Also we can save the same and can utilize it say for example, use the customized jersey image as a desktop wallpaper or a mobile wallpaper.
The basic idea behind development of the application in HTML5 is to explore the features of a new framework and to make a habit of coping up ourselves with the changing technology and latest trends in the market.
Creating application in HTML5, CSS3 and Javascript
This is a single Webpage application developed using HTML5 canvas tag and other basic HTML5 tags with the javascript code.
There is a discrete set of operations (or things we want to achieve) that fall within the scope of this article, they are (in the order that we will tackle them):
- Select Your Favorite T-shirt.
- Enter your name and number which you to display on the T-shirt.
- Save the customized image and use it as per your interest.
1. After the user enters the URL, he is redirected to the application itself.
2. T-shirt of your choice and it will appear into the editable canvas.
3. Enter name and number of your choice which you want to display on the T-shirt and click on submit button. Now the image will appear as below.
4. Right click on the customized image and save it at your specified location.
Code snippet:
Index.html file
◦ Code for canvas tag:
<table align=”center” cellspacing=”4″ cellpadding=”4″>
<tr>
<td>
<div id=”div1″ style=”width:390px;height:380px;border:1px solid #ddd;” align=”center”>
<canvas id=”mycanvas” style=”border: 5px solid;” width=”390″ height=”380″>
Sorry! Your browser doesn’t support Canvas.
</canvas>
</div>
</div>
</td>
</table>
◦ Code for form tag:
<form>
Enter Your Name:<input id=”textin” type=”text” />
<br/>
Enter Number:
<input id=”numin” type=”text” />
<br/>
<input type=”button” value=”Submit” onClick=”entertxt();” />
</form>
◦ Code for Selecting T-shirt:
◦
</table>
<tr>
<td>
<a onClick=”loadcanvas(‘./images/white.JPG’);” >
<img src=”./images/white.JPG” width=”50″ heigth=”50″/>
</a>
</td>
<td>
<a onClick=”loadcanvas(‘./images/a.JPG’);”>
<img src=”./images/a.JPG” width=”50″ heigth=”50″/>
</a>
</td>
<td>
<a onClick=”loadcanvas(‘./images/b.JPG’);”>
<img src=”./images/b.JPG” width=”50″ heigth=”50″/></a>
</td>
</tr>
</table>
Javascript code
function loadcanvas(x){
canvas = document.getElementById(“mycanvas”);
context = canvas.getContext(“2d”);
draw(x);
}
function draw(x) {
var ctx = document.getElementById(‘mycanvas’).getContext(‘2d’);
var img = new Image();
//image object is onload
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = x;
}
function entertxt() {
var userenter = document.getElementById(“textin”).value;
context.font=”18px sans-serif”;
context.fillText(userenter, 160, 140);
var userenter1 = document.getElementById(“numin”).value;
context.font=”80px sans-serif”;
context.fillText(userenter1, 140, 260);
}
You can also use the application in your mobile browser. The application recognizes your mobile browser and provides you the appropriate mobile view of the application.
This application is an effort from Pragmatic Techsoft still in the advanced development stage and still many features to will be added to this to make it a full fledged application with high quality graphics and improvised user interface.
![The Must-Know Odoo 18 Inventory Updates [Streamline Your Stock Operations]](https://blog.pragtech.co.in/wp-content/uploads/2024/10/The-Must-Know-Odoo-18-Inventory-Updates-1-102x54.jpg)
Leave a Reply
You must be logged in to post a comment.