<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>RenArt</title>
<link rel="shortcut icon" href="a198cd0c_e2f0_4c99_ba51_342624a24db9_WP4_icon.ico" type="image/x-icon"/>
<link href = "https://fonts.googleapis.com/css?family=Nunito+Sans:400,900&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body,#artInput{text-align: center;}
#artInput {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/221px-Vector_search_icon.svg.png');
background-position: 10px 10px;;
background-repeat: no-repeat;
background-size: 25px;
width: 60%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
border-radius: 25px;
}
#artInput:focus {
outline:none
}
#artTable {
border-collapse: collapse;
width: 85%;
border: 1px solid #ddd;
font-size: 18px;
margin-bottom:40px;
}
#artTable th, #artTable td {
text-align: left;
padding: 12px;
text-align: center;
}
#artTable tr {
border-bottom: 1px solid #ddd;
}
#artTable tr.header, #artTable tr:hover {
background-color: #f1f1f1;
}
a {
color: #f56642;
}
h2, h1, p {
font-family: 'Nunito Sans', sans-serif;
}
h1:hover {
animation-name: artshadow;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-duration: 0.5s;
animation-delay: 0.1s;
}
@keyframes artshadow {
from {}
to {text-shadow: 2px 2px 5px black;}
}
h1 {
color: #f56642;
transition: 0.3s;
}
</style>
</head>
<body>
<h1><a href="https://micahlt.github.io/renart/"><b>RenArt</b></a></h1>
<h2>search artworks by name, artist, and more</h2>
<div class="centerenter">
<input type="text" id="artInput" ="artFunction()" placeholder="name, date, artist..." title="Work search">
</div>
<div class="tablesearch">
<table id="artTable" align="center">
<tr class="header">
<th style="width:25%">Title</th>
<th style="width:25%">Artist</th>
<th style="width:25%">Commisioner</th>
<th style="width:25%">Completed</th>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+annunciation">The Annunciation</a></td>
<td>Fra Angelico</td>
<td>Cosimo de' Medici</td>
<td>1446</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+hunters+in+the+snow">The Hunters in the Snow</a></td>
<td>Pieter Bruegel the Elder</td>
<td>not commissioned</td>
<td>1567</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=portrait+of+julius+ii">Portrait of Julius II</a></td>
<td>Raphael</td>
<td>Julius II</td>
<td>1512</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+presentation+of+the+virgin+in+the+temple">The Presentation of the Virgin in the Temple</a></td>
<td>Fra Carnevale</td>
<td>unknown</td>
<td>1467</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+wedding+at+cana">The Wedding at Cana</a></td>
<td>Botticelli</td>
<td>the Black Monks</td>
<td>1563</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+sistine+chapel+ceiling">The Sistine Chapel Ceiling</a></td>
<td>Michaelangelo</td>
<td>Julius II</td>
<td>1512</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=venus+and+mars">Venus and Mars</a></td>
<td>Botticelli</td>
<td>possibly the Vespuccis</td>
<td>1485</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+feast+in+the+house+of+levi">The Feast in the House of Levi</a></td>
<td>Paolo Veronese</td>
<td>possibly Dominican monks</td>
<td>1573</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+sistine+madonna">The Sistine Madonna</a></td>
<td>Raphael</td>
<td>Julius II</td>
<td>1514</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+school+of+athens">The School of Athens</a></td>
<td>Raphael</td>
<td>Julius II</td>
<td>1511</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=bacchus+and+ariadne">Bacchus and Ariadne</a></td>
<td>Titian</td>
<td>Alfonso I de'Este</td>
<td>1523</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=marriage+of+the+virgin">Marriage of the Virgin</a></td>
<td>Titian</td>
<td>Filippo degli Albezzini</td>
<td>1504</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=adoration+of+the+magi">Adoration of the Magi</a></td>
<td>Sandro Botticelli</td>
<td>Gaspare di Zanobi del Lama</td>
<td>1476</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=st+stephens+disputation">St. Stephen's Disputation</a></td>
<td>Paolo Veronese</td>
<td>the Scuola di Santo Stefano</td>
<td>1514</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+peasant+wedding">The Peasant Wedding</a></td>
<td>Pieter Bruegel the Elder</td>
<td>not commissioned</td>
<td>1565</td>
</tr>
<tr>
<td><a href="http://www.google.com/search?q=the+holy+trinity+art">The Holy Trinity</a></td>
<td>Masaccio</td>
<td>unknown</td>
<td>1427</td>
</tr>
</table>
</div>
<p>this project was created and is maintained by <a href = "https://micahlt.github.io/">Micah Lindley</a>. Last updated 8/21/19.</p>
function artFunction() {
// Declare starting variables
var input = document.getElementById("artInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("artTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through rows
for (var i = 0; i < trs.length; i++) {
// Define the cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
</body>
</html>