neelabalan/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Collection of HTML files


files I wrote when I started learning HTML, CSS and JS long back


## column.html
<hmtl>
<style>
	.multicol {
		width: 60em;
		columns: 3 18em;
	}

	p {
		break-after: column;
	}
</style>
<div class="multicol">
	<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet,
		consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla
		vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
	<p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis
		euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam.
		Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet,
		consectetur adipiscing elit.</p>
	<p>Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo,
		tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis
		lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.
		Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus,
		tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
		risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
	<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula
		porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
		sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
		ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo,
		tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</html>

## dummy-progress.html
<html>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
        var progress = function (sec) {
            var interval = 250;//milliseconds
            setTimeout(function () {
                sec = sec + 25;
                $('#bar').val(sec);
                if (sec < 100)
                    progress(sec);//call self with new value
            }, interval)
        }
        progress(0);
    </script>
    <body>
        <progress max="100" value="0" id="bar"></progress>
    </body>
</html>

## form-submit.html
<style>
	#Myform {
		width: 300px;
		border: 1px solid #ccc;
		padding: 14px;
		background: #ececec;
	}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
	$(document).ready(function () {
		$("#mysubmit").click(function () {
			$("#Myform").submit(); // Form submission.
			var name = $("#Name").val();
			var email = $("#Email").val();
			alert("Name : " + name + "\nEmail : " + email);
		});
	});
</script>
<div class="MainForm">
	<form method="post" id="Myform">
		<label>Enter Name</label>
		<input type="text" id="Name" name="Name"><br>
		<label>Enter Email</label>
		<input type="text" id="Email" name="Email"><br>
		<input type="submit" id="mysubmit" name="submit" value="Submit" class="btn btn-primary" />
	</form>
</div>

## highlight-text.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
		<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css">

	</head>
	<script>
		$(document).ready(function () {
			$('#searchInput').keyup(function () {
				var page = $('#searchtextlorem').text();
				var search_text = $('#searchInput').val();
				$("#searchtextlorem").unmark().mark(search_text);
			});

		});
	</script>

	<input id="searchInput" placeholder="Search">
	<div class="highlight_y"></div>
	<div class="filters-no-actions">
		<p>Example text to search</p>
		<body>
			<style>
				#input {
					text-align: center;
					font-family: "Roboto Mono";
					font-size: 12px;
				}

				.highlight_y {
					background-color: yellow;
				}

				body {
					font-family: "Roboto Mono";
				}

				p,
				div {
					display: inline-block;
				}

				mark {
					background: orange;
					color: black;
				}
			</style>

			<p id="searchtextlorem">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
				fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
				deserunt mollit anim id est laborum."
			</p>

		</body>
	</div>
</html>

## keyup.html
<!DOCTYPE html>
<html>
	<head>
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script>
			$(document).ready(function () {
				$("input").keydown(function () {
					$("input").css("font-weight", "bold");
				});

				$("input").keyup(function () {
					$("input").css("font-weight", "normal");
				});
			});
		</script>

		<style>
			input {
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		Write something: <input type="text">
	</body>

</html>

## regexmatch.html
<!DOCTYPE html>
<html>
    <title> userForm </title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script>
        function stringmatch() {
            var regexpression = new RegExp((document.getElementsByClassName("regex")[0].value));

            var entertext = document.getElementsByClassName("common")[0].value;
            if (!(entertext.match(regexpression))) {
                alert("not a match");
            }
            else {
                alert("the expression matches");
            }
        }
    // var regexpression = new RegExp((document.getElementsByClassName("regex")[0].value));
    </script>

    <style>
        html {
            font-family: verdana;
        }

        h1 {
            font-size: 30px;

        }

        .common {
            color: black;
            font-size: 30px;
            font-family: verdana;
            padding: 10px;
            width: 1000px;
            align-text: center;
        }

        .regex {
            color: black;
            font-size: 30px;
            font-family: verdana;
            padding: 10px;
            width: 1000px;
            align-text: center;
        }

        #para {
            font-size: 30px;
            font-family: verdana;
            padding: 10px;
        }

        #done {
            font-size: 30px;
            padding: 10px;
            color: green;
            width: 1000px;
        }
    </style>
    <h1> regex-experiment </h1>
    <body>
        <div class="mainform">
            <form action="#" id="regexform" onsubmit="stringmatch(); return false">
                <p id="para"> enter the regualr expression </p>
                <input class="regex" type="text" name="regex">
                <br><br><br>
                <p id="para"> enter the string </p>
                <input class="common" type="text" name="email">
                <br><br><br>
                <input id="done" type="submit" value="submit">
            </form>
        </div>
    </body>

</html>
	<hmtl>
	<style>
	.multicol {
	width: 60em;
	columns: 3 18em;
	}

	p {
	break-after: column;
	}
	</style>
	<div class="multicol">
	<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet,
	consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla
	vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
	<p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis
	euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam.
	Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet,
	consectetur adipiscing elit.</p>
	<p>Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo,
	tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis
	lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus,
	tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
	risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
	<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula
	porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
	sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
	ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo,
	tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
	</div>
	</html>
	<html>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script>
	var progress = function (sec) {
	var interval = 250;//milliseconds
	setTimeout(function () {
	sec = sec + 25;
	$('#bar').val(sec);
	if (sec < 100)
	progress(sec);//call self with new value
	}, interval)
	}
	progress(0);
	</script>
	<body>
	<progress max="100" value="0" id="bar"></progress>
	</body>
	</html>
	<style>
	#Myform {
	width: 300px;
	border: 1px solid #ccc;
	padding: 14px;
	background: #ececec;
	}
	</style>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script>
	$(document).ready(function () {
	$("#mysubmit").click(function () {
	$("#Myform").submit(); // Form submission.
	var name = $("#Name").val();
	var email = $("#Email").val();
	alert("Name : " + name + "\nEmail : " + email);
	});
	});
	</script>
	<div class="MainForm">
	<form method="post" id="Myform">
	<label>Enter Name</label>
	<input type="text" id="Name" name="Name"><br>
	<label>Enter Email</label>
	<input type="text" id="Email" name="Email"><br>
	<input type="submit" id="mysubmit" name="submit" value="Submit" class="btn btn-primary" />
	</form>
	</div>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">

	</head>
	<script>
	$(document).ready(function () {
	$('#searchInput').keyup(function () {
	var page = $('#searchtextlorem').text();
	var search_text = $('#searchInput').val();
	$("#searchtextlorem").unmark().mark(search_text);
	});

	});
	</script>

	<input id="searchInput" placeholder="Search">
	<div class="highlight_y"></div>
	<div class="filters-no-actions">
	<p>Example text to search</p>
	<body>
	<style>
	#input {
	text-align: center;
	font-family: "Roboto Mono";
	font-size: 12px;
	}

	.highlight_y {
	background-color: yellow;
	}

	body {
	font-family: "Roboto Mono";
	}

	p,
	div {
	display: inline-block;
	}

	mark {
	background: orange;
	color: black;
	}
	</style>

	<p id="searchtextlorem">
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
	dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
	ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
	fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
	deserunt mollit anim id est laborum."
	</p>

	</body>
	</div>
	</html>
	<!DOCTYPE html>
	<html>
	<title> userForm </title>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">

	<script>
	function stringmatch() {
	var regexpression = new RegExp((document.getElementsByClassName("regex")[0].value));

	var entertext = document.getElementsByClassName("common")[0].value;
	if (!(entertext.match(regexpression))) {
	alert("not a match");
	}
	else {
	alert("the expression matches");
	}
	}
	// var regexpression = new RegExp((document.getElementsByClassName("regex")[0].value));
	</script>

	<style>
	html {
	font-family: verdana;
	}

	h1 {
	font-size: 30px;

	}

	.common {
	color: black;
	font-size: 30px;
	font-family: verdana;
	padding: 10px;
	width: 1000px;
	align-text: center;
	}

	.regex {
	color: black;
	font-size: 30px;
	font-family: verdana;
	padding: 10px;
	width: 1000px;
	align-text: center;
	}

	#para {
	font-size: 30px;
	font-family: verdana;
	padding: 10px;
	}

	#done {
	font-size: 30px;
	padding: 10px;
	color: green;
	width: 1000px;
	}
	</style>
	<h1> regex-experiment </h1>
	<body>
	<div class="mainform">
	<form action="#" id="regexform" onsubmit="stringmatch(); return false">
	<p id="para"> enter the regualr expression </p>
	<input class="regex" type="text" name="regex">
	<br><br><br>
	<p id="para"> enter the string </p>
	<input class="common" type="text" name="email">
	<br><br><br>
	<input id="done" type="submit" value="submit">
	</form>
	</div>
	</body>

	</html>