Skip to content

Instantly share code, notes, and snippets.

@neelabalan

neelabalan/README.md

Last active October 19, 2020 14:38
Show Gist options
  • Save neelabalan/1cf6cc7e0807d2f814896aae8bfccf88 to your computer and use it in GitHub Desktop.
Save neelabalan/1cf6cc7e0807d2f814896aae8bfccf88 to your computer and use it in GitHub Desktop.
Download ZIP
collection of html files
Raw
README.md

Collection of HTML files

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

Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment