Build a P5.js Microsoft Word (.DOC) to HandWriting Text Converter in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

# Author:Priyadarshan2000 (Priyadarshan Ghosh)
# Document to Handwritting 


<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="Jitender Gola">
		<meta name="description" content="Digital Text to Handwritten Scanned Page. Waana Save time on writing assginment on Paper use Our Super Fast Tool.">
		<title>Doc-to-Handwritting</title>
		<meta property="og:image" content="https://repository-images.githubusercontent.com/259044567/7737b480-87f8-11ea-9dd6-3c649ad63d14" />
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
		<link rel="stylesheet" href="https://milligram.io/styles/main.css">
		<link rel="stylesheet" href="../assets/css/DocumenttoHandwrittingcustom.css">
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-142979168-1"></script>
		<script>
		  window.dataLayer = window.dataLayer || [];

		  function gtag() {
		    dataLayer.push(arguments);
		  }
		  gtag('js', new Date());

		  gtag('config', '{{ site.google_analytics }}');
		</script>
        
	</head>
	<body>
		<main class="wrapper">
			<nav class="navigation">
				<section class="container">
					<a class="navigation-title" href="/">
						
						 
						<h1 class="title">Doc-to-Handwritting</h1>
					</a>
					<ul class="navigation-list float-right">
						<li class="navigation-item">
							<label class="switch">
								<input type="checkbox" id="darkmode" onclick='darkLightToggle()'>
								<span class="slider"></span>
							  </label>
						</li>
					</ul>
					
				</section>
			</nav>
			<section class="container" id="examples">
				<h3 class="title">Write Text</h3>
				<form onsubmit="return false">
					<fieldset>
						<textarea placeholder="Enter Text You want to be written a paper...." id="dataField" onkeyup="myData = this.value"></textarea>
					</fieldset>
					<input class="button-primary button-large download-image hidden" type="file" id="pageUploader" onclick="">
					<input class="button-primary button-large download-image hidden" type="file" id="fontUploader" onclick="">
					<div class="row">
						<button class="column button-primary button-large inline-btn" id="btnPageUpload">Upload Page</button>
						<button class="column button-primary button-large inline-btn" onclick="loadPage()">Default Page</button>
						<button class="column button-primary button-large inline-btn" onclick="changeFont()">Switch Font</button>
						<button class="column button-primary button-large inline-btn" id="btnFontUpload" onclick="uploadFont()">Upload Your Font</button>
						<button class="column button-primary button-large download-image inline-btn" onclick="save(str(pageNum++))">Download Page</button>
					</div>
					<div class="row">
						<div class="column">
							<label>Adjust X axis</label>
							<input type="range" min="1" max="200" value="20" oninput="xaxis=float(this.value)" class="slider">
						</div>
						<div class="column">
							<label>Adjust Y axis</label>
							<input type="range" min="1" max="200" value="20" oninput="yaxis=float(this.value)" class="slider">
						</div>
						<div class="column">
							<label>Font Size</label>
							<input type="range" min="1" max="100" value="30" oninput="fontsize=float(this.value)" class="slider">
						</div>
						<div class="column">
							<label>width</label>
							<input type="range" min="100" max="800" value="700" oninput="w=float(this.value)" class="slider">
						</div>
						<div class="column">
							<label>Line Spacing</label>
							<input type="range" min="10" max="50" value="30" oninput="linespacing=float(this.value)" class="slider">
						</div>
					</div>
				</form>
				<div id="contributing"></div>
			</section>

			<footer class="footer">
				<section class="container">
					<p>Designed with  by <a target="_blank" href="https://www.linkedin.com/in/priyadarshan-ghosh-0a6274190/" title="Priyadarshan Ghosh">Priyadarshan Ghosh</a>.</p>
				</section>
			</footer>
		</main>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
		<script src="../assets/js/DocumenttoHandwrittingscript.js"></script>
		<script src="../assets/js/DocumenttoHandwrittingsketch.js"></script>

	</body>
</html>

 

 

#dataField{
    height:300px;
}

.hidden{
    display: none;
}

canvas{
    width: 100% !important;
    height: auto !important;
}

.inline-btn{
    margin-right: 10px !important;
    margin-left: 10px !important;
}

.slidecontainer {
    width: 100%;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top:10px;
    margin-bottom:0px;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #9b4dca;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #9b4dca;
    cursor: pointer;
  }



  .switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .switch .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .switch input:checked + .slider {
    background-color: rgb(71, 71, 71);
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 1px rgb(71, 71, 71);
  }
  
  .switch input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
  }
  
  /* Rounded sliders */
  .switch .slider.round {
    border-radius: 34px;
  }
  
  .switch .slider.round:before {
    border-radius: 50%;
  }

 

See also  Build a Coronavirus COVID-19 Live World Tracker Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

.navigation {
  background: rgb(36, 36, 36);
  border-bottom: 0.1rem solid rgb(71, 71, 71);
}

body {
  color: rgb(185, 192, 198);
  background-color: #1f1f1f;
  background-image: none !important;
}
.navigation .navigation-title,
.navigation .title {
  color: rgb(185, 192, 198);
}

a {
  color: rgb(199, 157, 226);
}

a:focus,
a:hover {
  color: rgb(185, 192, 198);
}

.navigation .img {
  fill: rgb(199, 157, 226);
}

 

 

window.onload = function () {
    var fileupload = document.getElementById("pageUploader");
    var button = document.getElementById("btnPageUpload");
    button.onclick = function () {
        fileupload.click();
    };
    fileupload.onchange = function () {
        console.log("page Uploader Triggered.")
        var reader = new FileReader();
        reader.readAsDataURL(fileupload.files[0]);
        reader.onload = function (e) {
            img = loadImage(e.target.result);
        }
    };

    var fontupload = document.getElementById("fontUploader");
    button = document.getElementById("btnFontUpload");
    button.onclick = function () {
        fontupload.click();
    };
    fontupload.onchange = function () {
        console.log("font Uploader Triggered.")
        var reader = new FileReader();
        reader.readAsDataURL(fontupload.files[0]);
        reader.onload = function (e) {
            myFont.push(loadFont(e.target.result))
            myFonts += 1
            fontNum = myFonts - 1
        }
    };


    loadDarkModeFromLocalStorage();
    darkLightToggle()
};

function loadDarkModeFromLocalStorage(){
    isDark = boolean(localStorage.isDark)
    document.getElementById('darkmode').checked = isDark
}

function darkLightToggle() {
    saveLocalStorageDarkMode();
    isDark = document.getElementById('darkmode').checked
    if (isDark) {
        var link = document.createElement('link');  
        link.rel = 'stylesheet';  
        link.type = 'text/css'; 
        link.href = '../assets/css/DocumenttoHandwrittingdark.css';  
        link.id = "darkcss";
        document.getElementsByTagName('head')[0].appendChild(link)
    } else {
        if (document.contains(document.getElementById("darkcss"))) {
            document.getElementById('darkcss').remove()
        }
    }
 }

 function saveLocalStorageDarkMode(){
    isDark = document.getElementById('darkmode').checked
    localStorage.isDark = isDark
 }

 

See also  Build a Unit Weight (Mass) Conversion Calculator in HTML5 CSS3 and Javascript Full Project For Beginners

 

myData = `Hi! my name is Priyadarshan I develop this Site this Site Convert Doc To Handwritting..`
let img, 
myFont = [];
myFonts = 7
imgNum = 1
fontNum = 0
pageNum = 1
xaxis=20
yaxis=20
fontsize=30
w=700
linespacing=false
function preload() {
    fontLoad();
    loadPage();
}

function setup(){
    canvas = createCanvas(750,1000)
    canvas.parent('contributing')
    rectMode(CORNER);
}

function draw(){
    image(img, 0, 0, width, height)
    textFont(myFont[fontNum]);
    textSize(fontsize)
    fill('#264180')
    if(linespacing){
        textLeading(linespacing);
    }
    data = "\n"+myData
    text(data, xaxis, yaxis, w, 900);
}

function fontLoad(){
    for(var i = 0; i < myFonts; i++){
        myFont.push(loadFont('../assets/fonts/font ('+str(i)+').ttf'));
    }
}

function changeFont(){
    fontNum += 1;
    fontNum %= myFonts
}

function loadPage(){
    img = loadImage('../assets/pages/page (2).jpg');
}

Leave a Reply