Commit 9950333c authored by AKASH TREHAN's avatar AKASH TREHAN

Lab2

parent 851274d9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body class="flow-text">
<nav>
<div class="nav-wrapper">
<div class="brand-logo" style="padding-left: 15px">
Homebrew
</div>
<ul class="right">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="aboutMe.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1 class="center"> About Me </h1>
<p>An enthusiastic programmer, a curious tinkerer, a serious gamer, and a typical foodie brought together is me. To know more about me, go to my contact page. Come on, its a <a href="contact.html">click</a> away!</p>
<hr><br>
<!--Add content-->
<div class="center">
My favorite inspirational video (Aasaan Hai by Sandeep Maheshwari)
</div>
<div class="center">
<iframe width="900" height="500" src="https://www.youtube.com/embed/Vsg_AbwuG-g" frameborder="0" allowfullscreen></iframe>
</div>
<!-- <h3>My favourite Inspirational Video</h3>
<iframe width="900" height="500" src="https://www.youtube.com/embed/Vsg_AbwuG-g" frameborder="0" allowfullscreen></iframe>
--><!--Add video link-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body class="flow-text">
<nav>
<div class="nav-wrapper">
<div class="brand-logo" style="padding-left: 15px">
Homebrew
</div>
<ul class="right">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div id="mywrapper">
<h3 class="center">Contact </h3>
<h4 class="center">Meet Taraviya (&#2350;&#2368;&#2340; &#2340;&#2352;&#2366;&#2357;&#2367;&#2351;&#2366; )</h4>
<div class="row center">
<div class="col l4">
<div class="card hoverable">
<div class="card-content">
<h4><small><i class="fa fa-envelope"></i></small> Email</h4>
<a href="mailto:meet11061997@gmail.com">meet11061997@gmail.com</a>
</div>
</div>
</div>
<div class="col l4">
<div class="card hoverable">
<div class="card-content">
<h4><small><i class="fa fa-facebook"></i></small> Facebook</h4>
<a href="https://www.facebook.com/meet.taraviya.7">meet.taraviya.7</a>
</div>
</div>
</div>
<div class="col l4">
<div class="card hoverable">
<div class="card-content">
<h4><small><i class="fa fa-github"></i></small> GitHub</h4>
<a href="https://github.com/meettaraviya">meettaraviya</a>
</div>
</div>
</div>
</div>
<!-- Change the email -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body>
<nav class="flow-text">
<div class="nav-wrapper">
<div class="brand-logo" style="padding-left: 15px">
Homebrew
</div>
<ul class="right">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="container flow-text">
<div id="teamname">
<h1 class="center">Homebrew</h1>
<div class="center">Inspired from the homebrew computer club, a club of computer hobbyists who made Silicon Valley great!
</div>
<hr>
</div>
<div id="teammate">
<h3 class="center">Members</h3>
<div class="row">
<div class="col s4">
<a href="http://www.cse.iitb.ac.in/~mtaraviya/home.html" target="_blank">
<div class="card hoverable">
<div class="card-image">
<img src="https://scontent.fbom1-2.fna.fbcdn.net/v/t1.0-9/12670303_457939621064602_8843765793310032841_n.jpg?oh=e905fa8239dfb3fc7ed43fa7eaa5f282&oe=585C2F2A" alt="Meet" class="responsive-img">
</div>
<div class="card-content flow-text center">
Meet Taraviya
</div>
</div>
</a>
</div>
<div class="col s4">
<a href="http://www.cse.iitb.ac.in/~atrehan/home.html" target="_blank">
<div class="card hoverable">
<div class="card-image">
<img src="https://scontent.fbom1-2.fna.fbcdn.net/v/t1.0-9/13592756_1072573342780392_7550294345227458969_n.jpg?oh=cc107ac4351b5a1d7722ebf16d96ee1d&oe=581B5826" alt="Akash" class="responsive-img">
</div>
<div class="card-content flow-text center">
Akash Trehan
</div>
</div>
</a>
</div>
<div class="col s4">
<a href="http://www.cse.iitb.ac.in/~rohitrango/home.html" target="_blank">
<div class="card hoverable">
<div class="card-image">
<img src="https://scontent.fbom1-2.fna.fbcdn.net/v/t1.0-9/12985481_1014353738601255_3067329206855061394_n.jpg?oh=58931e91a994081c54255c072e2d4573&oe=58253D5E" alt="Rohit" class="responsive-img">
</div>
<div class="card-content flow-text center">
Rohit Kumar Jena
</div>
</div>
</a>
</div>
</div>
<!--
<ul>
<li><a href="https://cse.iitb.ac.in/~mtaraviya/home.html">Meet Taraviya</a></li>
<li><a href="https://cse.iitb.ac.in/~atrehan/home.html">Akash Trehan</a></li>
<li><a href="https://cse.iitb.ac.in/~rohitrango/home.html">Rohit Kumar Jena</a></li>
</ul> -->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interests</title>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body class="flow-text">
<nav>
<div class="nav-wrapper">
<div class="brand-logo" style="padding-left: 15px">
Homebrew
</div>
<ul class="right">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">About Me</a></li>
<li class="active"><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1 class="center">Interests</h1>
<ul>
<li>
<b>Competitive Coding: </b> After coming to IIT, I knew more about competitive coding and the amount of practice and skill required to compete in ACM ICPC, considered as the 'Olympics of Competitive Coding'. With the aim of optimizing every algorithm that I find, competitive coding is something I like a lot.
</li>
<hr>
<li>
<b>Eating: </b> <blockquote>Skip food for work, said no foodie, ever.</blockquote> I'm a foodie with an interest for new tastes everyday. How about a little chat with me over a cup of coffee, or a plate of Biriyani maybe? :P
</li>
<hr>
<li>
<b>Watching Anime: </b> In my free time, I love watching anime. It does teach you a lot of things, like teamwork, the power of determination, and some are just for entertainment. Some of my favorites are 'Death Note' and 'Inazuma XI'.
</li>
<hr>
<li>
<b>Football: </b> Before my JEE preparation, I used to be in my school football team. After coming to IIT, I haven't played football a lot because of other reasons. But I love the game.
</li>
<hr>
<li>
<b>Music: </b> Who doesn't love music? I usually listen to 'Eminem','Linkin Park','Skrillex' and some other random party songs. Hindi songs don't appeal to me as much as English songs do.
</li>
</ul>
<hr>
<h1 class="center">Aim in life</h1>
<div id="aim">To become a freelance coder and possibly become the founder of a big Open Source organisation. ;)</div>
<hr>
<h4 class="center">Favourite Formulae</h4><br>
<div class="center" style="font-size: 25px">
Euler's formula<br>
$$e^{i\theta} = cos(\theta) + isin(\theta)$$
</div>
<hr>
<div class="center" style="font-size :25px">
L' Hospital Rule <br>
$$ \lim_{x \to c} \frac{f(x)}{g(x)} = \lim_{x \to c} \frac{\frac{d(f(x))}{dx}}{\frac{d(g(x))}{dx}} $$
</div>
</div>
</body>
</html>
#mywrapper {
max-width: 1920px;
padding-left: 18%;
padding-right:18%;
padding-top: 10px;
}
.card .card-title .card-content {
overflow: hidden;
}
/*table, th, td {
border: 2px solid;
}
a {
font-size: 35px;
}
nav{
background: orange;
font-size: 30px;
text-align: center;
padding: 5px;
padding-top: 20px;
padding-bottom: 20px;
}
h1 {
font-size: 50px;
}
body {
margin: 0;
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style: none;
font-size: 25px;
margin-right: 50px;
}
nav > a {
color: white;
text-decoration: none;
}
nav > a:hover {
font-weight: bold;
}
#teamname {
font-size: 40px;
}
#teammate,#aim {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 30px;
}
table{
margin-left: 20%;
margin-top: 10%;
font-size: 40px;
}
th {
padding : 10px;
}
#timetable {
text-align: center;
}*/
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timetable</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body>
<nav class="flow-text">
<div class="nav-wrapper">
<div class="brand-logo" style="padding-left: 15px">
Homebrew
</div>
<ul class="right">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li class="active"><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<div class="container" id="timetable">
<b><h1 class="center">My timetable</h1></b>
<h3 class="flow-text">The typical timetable of a second year CSE undergraduate. Don't go by the empty spaces in the timetable though, we have a lot of assignments to do. :P</h3>
<br>
<br>
<table class="striped">
<tr class="center"> <!-- table headers -->
<th>Time/Days</th>
<th>8:30 am-9:30 am</th>
<th>9:30 am-10:30 am</th>
<th>10:30 am-11:30 am</th>
<th>11:30 am-12:30 am</th>
<th>2:00 pm-3:30 pm</th>
<th>3:30 pm-5:00 pm</th>
</tr>
<tr class="center">
<td>Monday</td>
<td></td>
<td>EE 101<td>
<td>CS 207</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Tuesday</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>CS 251</td>
<td></td>
</tr>
<tr>
<td>Wednesday</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>CS293</td>
<td></td>
</tr>
<tr>
<td>Thursday</td>
<td></td>
<td>CS 207</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Friday</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>CS 215</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Form with Manual Validation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="formWrapper">
<h4 align="center">Form with Manual Validation</h4><br>
<div class="row">
<form class="col s12" method="post" name="lab2B" action="https://www.cse.iitb.ac.in/~sharat/php/example/form.php" onsubmit="return sanitise()">
<div class="row">
<div class="input-field col s12">
<input type="text" name="text" onblur="text_validate()" onfocus="rem('name')">
<label for="name">Name<sup>*</sup></label><br>
<span class="errormsg" id="name_error"></span><br>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="password" name="pass" onblur="pass_validate()" onfocus="rem('pass')">
<label for="password">Password<sup>*</sup></label><br>
<span class="errormsg" id="pass_error"></span><br>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" name="email" onblur="email_validate()" onfocus="rem('email')">
<label for="email">Email ID<sup>*</sup></label><br>
<span class="errormsg" id="email_error"></span><br>
</div>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</body>
</html>
\ No newline at end of file
function sanitise() {
if(!(text_validate() && pass_validate() && email_validate()))
{
alert("Please complete the form properly!");
return false;
}
var text = document.lab2B.text;
text.value = text.value.replace(/&/g, '&amp');
text.value = text.value.replace(/</g, '&lt');
text.value = text.value.replace(/>/g, '&gt');
text.value = text.value.replace(/"/g, '&quot');
text.value = text.value.replace(/'/g, '&#x27');
text.value = text.value.replace(/\//g, '&#x2F');
return true;
}
function text_validate() {
var text = document.lab2B.text.value;
var border = document.lab2B.text.style;
var re = new RegExp("^.{6,50}$");
var err = document.getElementById('name_error');
if(text.localeCompare("") != 1)
err.innerHTML = "Please fill this field.";
else if(!re.test(text))
err.innerHTML = "Name should be from 6 to 50 characters.";
else
{
err.innerHTML = "";
border.borderColor = "green";
return true;
}
border.borderColor = "red";
return false;
}
function pass_validate() {
var pass = document.lab2B.pass.value;
var border = document.lab2B.pass.style;
var re = new RegExp("^(?=.*[$!@_]).{8,20}$");
var err = document.getElementById('pass_error');
if(pass.localeCompare("") != 1)
err.innerHTML = "Please fill this field.";
else if(!re.test(pass))
err.innerHTML = "Password length should be between 8-20 characters with atleast one special character from the set {$, !, @, _}";
else
{
err.innerHTML = "";
border.borderColor = "green";
return true;
}
border.borderColor = "red";
return false;
}
function email_validate() {
var email = document.lab2B.email.value;
var border = document.lab2B.email.style;
var dot = new RegExp("@.*\\\.");
var at = new RegExp("@");
var re1 = new RegExp("^[0-9a-zA-Z._]{3,}@");
var re2 = new RegExp("^[0-9a-zA-Z._]{3,}@[a-zA-Z]{3,}\\\.");
var re3 = new RegExp("^[0-9a-zA-Z._]{3,}@[a-zA-Z]{3,}(\\\.[a-zA-Z]{2,})+$");
var err = document.getElementById('email_error');
if(email.localeCompare("") != 1)
err.innerHTML = "Please fill this field.";
else if(!at.test(email))
err.innerHTML = "Email should contain an @ symbol.";
else if(!dot.test(email))
err.innerHTML = "Domain-name after @ symbol should contain atleast one .(dot)";
else if(!re1.test(email))
err.innerHTML = "Local-part before @ symbol should contain atleast 3 characters. Only special characters allowed are .(dot) and _(underscore).";
else if(!re2.test(email))
err.innerHTML = "The substring of domain-part before the first .(dot) should have 3 or more alphabetical characters.";
else if(!re3.test(email))
err.innerHTML = "Each substring delimited by .(dot) should have 2 or more alphabetical characters.";
else
{
err.innerHTML = "";
border.borderColor = "green";
return true;
}
border.borderColor = "red";
return false;
}
function rem(inp) {
if(!inp.localeCompare('name'))
{
document.lab2B.text.style.borderColor = 'lightgrey';
document.getElementById('name_error').innerHTML = '';
}
else if(!inp.localeCompare('pass'))
{
document.lab2B.pass.style.borderColor = 'lightgrey';
document.getElementById('pass_error').innerHTML = '';
}
else if(!inp.localeCompare('email'))
{
document.lab2B.email.style.borderColor = 'lightgrey';
document.getElementById('email_error').innerHTML = '';
}
}
.errormsg {
color: red;
font-family: "Times New Roman", Times, serif;
}
sup {
color: red;
}
h4 {
font-family: "Times New Roman", Times, serif;
color: #26a69a;
}
#formWrapper {
padding: 10%;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Accordion</title>
<link rel="stylesheet" href="style.css">
<!-- Compiled and minified CSS -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
</head>
<body>
<br>
<div class="container">
<h1 class="center flow-text">Pokemon</h1>
<hr>
<div class="myaccordion flow-text">
<div class="mypanel">
<div class="mypanel-title fire">
Charizard
</div>
<div class="mypanel-body">
<div class="pokemon-container">
<div class="pokemon-img">
<img src="https://img.pokemondb.net/artwork/charizard.jpg" alt="Charizard">
</div>
<div class="pokemon-content">
<b>TYPE:</b> Fire/Flying <br>
<b>Evolution: </b> Charmander < Charmeleon < Charizard <br>
<b>Attacks: </b> <br>
<ul>
<li>Wing Attack</li>
<li>Inferno</li>
<li>Flamethrower</li>
<li>Flare Blitz</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mypanel">
<div class="mypanel-title grass">
Venasaur
</div>
<div class="mypanel-body">
<div class="pokemon-container">
<div class="pokemon-img">
<img src="https://img.pokemondb.net/artwork/venusaur.jpg" alt="Venasaur">
</div>
<div class="pokemon-content">
<b>TYPE:</b> Grass/Poison <br>
<b>Evolution: </b> Bulbasaur < Ivysaur < Venasaur <br>
<b>Attacks: </b> <br>
<ul>
<li>Leech Seed</li>
<li>Takedown</li>
<li>Vine whip</li>
<li>Solarbeam</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mypanel">
<div class="mypanel-title ghost">
Haunter
</div>
<div class="mypanel-body">
<div class="pokemon-container">
<div class="pokemon-img">
<img src="https://img.pokemondb.net/artwork/haunter.jpg" alt="Haunter">
</div>
<div class="pokemon-content">
<b>TYPE:</b> Ghost/Poison <br>
<b>Evolution: </b> Gastly < Haunter < Gengar <br>
<b>Attacks: </b> <br>
<ul>
<li>Hypnosis</li>
<li>Night Shade</li>
<li>Confuse Ray</li>
<li>Shadow Ball</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mypanel">
<div class="mypanel-title psychic">
Mewtwo
</div>
<div class="mypanel-body">
<div class="pokemon-container">
<div class="pokemon-img">
<img src="https://img.pokemondb.net/artwork/mewtwo.jpg" alt="Mewtwo">
</div>
<div class="pokemon-content">
<b>TYPE:</b> Psychic <br>
<b>Evolution: </b> No evolutions! <br>
<b>Attacks: </b> <br>
<ul>
<li>Aura Sphere</li>
<li>Future Sight</li>
<li>Psystrike</li>
<li>Psychic</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- accordion ends -->
<div style="text-align:center">
Images Source: <a href="http://pokemondb.net/" target="_blank">PokemonDB</a>
</div>
</div>
<!-- <button id="btn">This is a button</button> -->
<script type="text/javascript" src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</body>
</html>
\ No newline at end of file
var elements = document.getElementsByClassName('mypanel-title');
var length = elements.length;
function isNamePresent(value,classlist) {
var length = classlist.length;
for(var i=0;i<length;i++) {
if(value===classlist[i])
return true;
}
return false;
}
for(var i=0;i<length;i++) {
elements[i].addEventListener('click',function() {
var panel = this.parentNode; //panel corresponding to this title
var content = this.nextElementSibling; //content of the title
var accordion = panel.parentNode; //accordion
var el = accordion.getElementsByClassName("mypanel-body"); var l = el.length; //all panels of this accordion
var swap = 0;
for(var j=0;j<l;j++) {
if(isNamePresent('show',el[j].classList) && el[j]!=content) { // some other panel is open
swap = el[j];
break;
}
else if(isNamePresent('show',el[j].classList) && el[j]==content) { //the same panel is open, save and skip it
swap = el[j];
}
}
if(swap===0) { //no tab is open
content.classList.toggle('show');
}
else if(swap!=content) {
swap.classList.toggle("show");
content.classList.toggle("show");
}
else if(swap==content) {
content.classList.toggle("show");
}
});
}
/*IMPORTANT
Apply the CSS wrapper from materialize
*/
div {
display: block;
}
.pokemon-img {
width:25%;
float: left;
display: inline;
align-content: center;
overflow: hidden;
}
.pokemon-img > img {
width:100%;
height:auto;
overflow: hidden;
}
.pokemon-content {
width:70%;
float: right;
display: inline;
}
.pokemon-container {
display: block;
width:100%;
}
.myaccordion {
/* padding-left:15%;
padding-right:15%;*/
padding-top:5px;
}
.mypanel {
display: block;
border-width: 1.5px;
border-radius: 10px;
border-style: solid;
border-color: #0288d1 ;
margin: 20px 0px 20px 0px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.mypanel:hover {
display: block;
box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.16), 0 13px 30px 0 rgba(0, 0, 0, 0.15);
}
.mypanel > .mypanel-title:hover {
font-size:30px;
background-color: #0277bd ;
padding:10px 5px 10px 5px;
border-color: blue;
cursor: pointer;
border-radius: 6px 6px 0px 0px;
}
.mypanel > .mypanel-title {
font-size:30px;
background-color: #0288d1;
padding:10px 5px 10px 5px;
border-color: blue;
border-radius: 6px 6px 0px 0px;
cursor: pointer;
}
.mypanel > .mypanel-body {
overflow: hidden;
opacity: 0;
max-height: 0px;
font-size:20px;
padding:0px 5px 10px 5px;
border-radius: 0px 0px 6px 6px;
/*background-color: #f2f2f2;*/
transition: 0.4s;
}
.mypanel > .mypanel-body.show {
opacity: 1;
height: auto;
max-height: 1000px;
font-size:20px;
padding:10px 5px 10px 5px;
border-radius: 0px 0px 6px 6px;
/*background-color: #f2f2f2;*/
transition: 0.7s;
}
/*
body {
font-family: "Comic Sans MS",cursive,Sans-serif;
}
*/
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>CSE First Floor Plan</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lakki+Reddy" rel="stylesheet">
</head>
<body style="background-color: #D4F5FF">
<div class="contianer">
<h2 align="center" style="font-family: 'Lakki Reddy', cursive; color: #26a69a;">CSE New Building First Floor Plan</h2>
</div>
<hr>
<div class="center">
<object type="image/svg+xml" data="task_d_cse.svg" align="center">`
Your browser does not support SVG
</object>
<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</div>
</body>
\ No newline at end of file
F1. http://www.iitb.ac.in/newacadhome/quizscheduleaut16-174Aug.pdf
F2. http://www.iitb.ac.in/newacadhome/Classrooms201515Jan.pdf
F3. https://www.cse.iitb.ac.in/~sharat/current/cs251/Assign/Lab02/inlab.pdf
F4. https://www.cse.iitb.ac.in/~ttc/autumn2016-17.pdf
F5. https://www.cse.iitb.ac.in/~sharat/current/cs251/Assign/Lab02/outlab.pdf
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
Group Number 37
Members - (Meet Taraviya,150050002) (Akash Trehan,150050031) (Rohit Kumar Jena,150050061)
Meet Taraviya, Roll- 150050002
Honor Code-
I shall pledge to follow all the rules and guidelines issued by sir, while attempting the lab.
Akash Trehan, Roll- 150050031
Honor Code-
I pledge by my honor that I have not used unauthorized help in this assignment and have given my complete efforts.
Rohit Kumar Jena, Roll- 150050061
Honor Code-
I pledge to do my lab in a legitimate way, and not to provide or recieve any unauthorized help.
Contributions -
Meet Taraviya - 100%
Akash Trehan - 100%
Rohit Kumar Jena - 100%
Citations -
Pokemon Database and images - http://pokemondb.net/
SVG Icons - www.flaticon.com
Usage - Inkscape allows to import only one page of a pdf at a time. So we only uploaded the changed page in pdf.
Note: We have attempted both the extra tasks. Please refer to the relevant files that you asked for in the assignment document. The links to the extra task of Task D is there in the folder `pdf_bonus` along with the original files.
Reflection Essay -
In task A, the purpose was to revamp the features and add the Materialize library. We wanted a minimalistic theme, so we focused on content. The CSS wrapper used was from Materialize, and we didnot use a background because we didn't want to make it too fancy or something. We lacked on content, but tried our best to fill the pages with only `relevant` content.
Task B was fun. Javascript wasn't a problem but RegEx was :P. After a lot of silly mistakes, we finally arrived at the perfect(hopefully) regular expressions for checking various details. On-fly form felt good to implement. Cross-site scripting prevention while easy to implement was quite interesting to read about!
In task C, we had to make our own accordion. We used Materialize only for the CSS wrapper and font (according to the outlab pdf) but the entire css and js for the accordion was built by us. We used the same hierarchy of accordion as used by Materialize - the panels of a certain accordion are NOT related to the panels of the other accordion .i.e. the code is general, so if you use 2 or more accordions in the same page, they won't conflict with each other, and there can be any number of panels inside an accordion. This is a generalized code and can be directly used in a CSS library if we decide to build one :P
In task D, first we struggled regarding getting the dimensions right. But we came up with a trick and managed to get proportional dimensions. The design of first floor is tricky to explain using only simple shapes.
We had to try really hard to get 5 pdfs to edit. For the pdfs, everything went cool but editting text was tricky. We realized that inkscape is buggy.
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment