Skip to content

Commit

Permalink
First iteration
Browse files Browse the repository at this point in the history
  • Loading branch information
armanmsb committed Nov 26, 2021
1 parent 28c0c88 commit 9029590
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 98 deletions.
129 changes: 104 additions & 25 deletions src/main/resources/static/css/addNewJokeFormStyle.css
View file
@@ -1,29 +1,108 @@
/* Stylesheet für NewJokeForm */

body{
background: url(https://images01.military.com/sites/default/files/styles/full/public/2021-04/chucknorris.jpeg.jpg?itok=2b4A6n29);
/*
background: url(https://4.bp.blogspot.com/-ts5fY5I42_E/UznmkwPjkLI/AAAAAAAAY8A/uri3AkoFH6I/s1600/Chuck.jpg);
background: url(https://beardoholic.com/wp-content/uploads/2017/12/c74461ae2a9917a2482ac7b53f195b3c6e2fdd59e778c673256fb29d1b07f181.jpg);
background: url(https://static3.srcdn.com/wordpress/wp-content/uploads/2020/04/Chuck-Norris-featured-Image.jpg?q=50&fit=crop&w=960&h=500&dpr=1.5);
*/
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

div{
height: 25%;
width: 25%;
}

label{
background-color: #e7e7e7;
color: black;
padding: 8px;
font-family: Arial;
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #e7e7e7;
color: black;
padding: 8px;
font-family: Arial;
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

/*
header{
background-image: url(https://www.domradio.de/sites/default/files/styles/domradio-title/public/stern-von-chuck-norris-auf-dem-walk-fame-hollywood_0.jpg?itok=Zbte8FhJ);
background-size: cover;
padding: 2%;
}
h1{
text-align: center;
margin-bottom: 4%;
margin-right: 5%;
}
.button-container form,
.button-container form div {
display: inline;
}
button:hover {
background-color: #a09999;
}
main {}
table{
background: url(https://4.bp.blogspot.com/-ts5fY5I42_E/UznmkwPjkLI/AAAAAAAAY8A/uri3AkoFH6I/s1600/Chuck.jpg);
background: url(https://images01.military.com/sites/default/files/styles/full/public/2021-04/chucknorris.jpeg.jpg?itok=2b4A6n29);
background: url(https://beardoholic.com/wp-content/uploads/2017/12/c74461ae2a9917a2482ac7b53f195b3c6e2fdd59e778c673256fb29d1b07f181.jpg);
background: url(https://static3.srcdn.com/wordpress/wp-content/uploads/2020/04/Chuck-Norris-featured-Image.jpg?q=50&fit=crop&w=960&h=500&dpr=1.5);
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
border: 5px solid rgba(233, 222, 77, 0.2);
background-color: #bb7492;
color:#ddd;
padding: 5px;
}
tr td {
border: 5px solid rgba(233, 222, 77, 0.2);
padding: 5px;
}
tr:hover td {
background-color: rgba(233, 222, 77, 0.2);
}
tr:nth-child(even) td {
border: 5px solid rgba(206, 198, 91, 0.2);
padding: 5px;
}
*/



118 changes: 90 additions & 28 deletions src/main/resources/static/css/homestyle.css
View file
@@ -1,29 +1,91 @@
/* Stylesheet für ChuckNorrisWitze */


header{
background-image: url(https://www.domradio.de/sites/default/files/styles/domradio-title/public/stern-von-chuck-norris-auf-dem-walk-fame-hollywood_0.jpg?itok=Zbte8FhJ);
background-size: cover;
padding: 2%;
}

h1{
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #e9de44;
/*height: 100px;*/
text-align: center;
margin-bottom: 4%;
margin-right: 5%;
}

/*.button-container form,
.button-container form div {
display: inline;
text-decoration: none;
color: #000000;
width: 150px;
padding: 10px;
margin: 2% 5%;
background-color: rgba(182, 165, 165, 0.5);
border-radius: 5px;
}*/

.button-container form,
.button-container form div {
display: inline;
}

.button-container button {
display: inline;
vertical-align: middle;
text-decoration: none;
color: #000000;
background-color: rgba(182, 165, 165, 0.5);
margin-top: 4%;
margin-left: 2%;
width: 150px;
padding: 5px;
border-radius: 5px;
}

button:hover {
background-color: #a09999;
}

main {}

table{
background: url(https://4.bp.blogspot.com/-ts5fY5I42_E/UznmkwPjkLI/AAAAAAAAY8A/uri3AkoFH6I/s1600/Chuck.jpg);
/*
background: url(https://images01.military.com/sites/default/files/styles/full/public/2021-04/chucknorris.jpeg.jpg?itok=2b4A6n29);
background: url(https://beardoholic.com/wp-content/uploads/2017/12/c74461ae2a9917a2482ac7b53f195b3c6e2fdd59e778c673256fb29d1b07f181.jpg);
background: url(https://static3.srcdn.com/wordpress/wp-content/uploads/2020/04/Chuck-Norris-featured-Image.jpg?q=50&fit=crop&w=960&h=500&dpr=1.5);
*/
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

th {
border: 5px solid rgba(233, 222, 77, 0.2);
background-color: #bb7492;
color:#ddd;
padding: 5px;
}

tr td {
border: 5px solid rgba(233, 222, 77, 0.2);
padding: 5px;
}

tr:hover td {
background-color: rgba(233, 222, 77, 0.2);
}

/*tr:nth-child(even) td {
border: 5px solid rgba(206, 198, 91, 0.2);
padding: 5px;
}*/



table{
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th{
border: 1px solid #ddd;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}

th {
background-color: #e20074;
color:white;
}

.button-container form,
.button-container form div {
display: inline;
}

.button-container button {
display: inline;
vertical-align: middle;
}
20 changes: 11 additions & 9 deletions src/main/resources/templates/addNewJokeForm.html
View file
@@ -1,18 +1,20 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/addNewJokeFormStyle.css" />
<title>NewJokeForm</title>>
<link rel="stylesheet" href="/css/addNewJokeFormStyle.css">
</head>

<body>
<form method="post" th:action="@{/addNewJoke}">
<label for="jokeText">Add your joke</label><br><br>
<input type="text" id="jokeText" name="jokeText" placeholder="Your joke.."><br><br>
<input type="submit" value="Submit">
</form>
<a href="/alljokes">Return to the list</a>
<div id="form">
<form method="post" th:action="@{/addNewJoke}">
<label for="jokeText">Add your joke</label><br><br>
<input type="text" id="jokeText" name="jokeText" placeholder="Add your joke here ..."><br><br>
<input type="submit" value="Submit">
</form>
<a href="/alljokes">Return to the list</a>
</div>
</body>
</html>
89 changes: 53 additions & 36 deletions src/main/resources/templates/home.html
View file
@@ -1,44 +1,61 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/homestyle.css" />
<title>Facts about Chuck</title>
<link rel="stylesheet" href="/css/homestyle.css">
</head>

<body>
<div class="button-container">
<form th:action="@{/alljokes(sort=${action})}">
<div>
<button type="submit" th:name="sort" th:value="alphabetically">Sort alphabetically</button>
<button type="submit" th:name="sort" th:value="date">Sort by date</button>
</div>
</form>
<form th:action="@{/addNewJokeForm}">
<div>
<button type="submit" value="Add new joke">Add new joke</button>
</div>
</form>
</div>
<table>
<thead>
<tr>
<th> Joke-Id </th>
<th> Chuck Norris-Joke </th>
<th> Remove joke </th>
<th> Date of creation</th>
</tr>
</thead>
<tbody>
<tr th:if="${jokes.empty}">
<td colspan="2"> No Jokes Available </td>
</tr>
<tr th:each="joke : ${jokes}">
<td><span th:text="${joke.id}"> ID </span></td>
<td><span th:text="${joke.jokeText}"> Joke </span></td>
<td><a th:href="@{/delete(id=${joke.id})}">Remove</a></td>
<td><span th:text="${joke.creationDate}"> Date </span></td>
</tr>
</tbody>
</table>
<header>
<h1>Facts about</h1>

<div class="button-container">
<!--<form>
<div>
<button type="submit" th:name="sort" th:value="alphabetically">Sort alphabetically</button>
<button type="submit" th:name="sort" th:value="date">Sort by date</button>
</div>
</form>-->
<form th:action="@{/addNewJokeForm}">
<div>
<button type="submit" value="Add new joke">Add new joke</button>
</div>
</form>
</div>
</header>

<main>
<table>
<form th:action="@{/alljokes(sort=${action})}">
<thead>
<th>
<button type="submit" th:name="sort" th:value="alphabetically">Chuck Norris-Joke</button>
</th>
<th>
<button type="submit" th:name="sort" th:value="date"> Date</button>
</th>
<th>
<label> Remove</label>
</th>
</thead>
</form>
<tbody>
<tr th:if="${jokes.empty}">
<td colspan="2"> There are NO Jokes about Chuck Norris !</td>
</tr>
<tr th:each="joke : ${jokes}">
<td><span th:text="${joke.jokeText}"> Joke </span></td>
<td><span th:text="${joke.creationDate}"> Date </span></td>
<td><a th:href="@{/delete(id=${joke.id})}">Remove</a></td>
</tr>
</tbody>
</table>
</main>

<footer>
</footer>
<script src="skript.js"></script>
</body>
</html>

0 comments on commit 9029590

Please sign in to comment.