Spaces:
Runtime error
Runtime error
mametchi
commited on
Commit
·
ab90bc9
1
Parent(s):
d3630a9
Show when input handled - Papukaija pomppii
Browse files- static/papukaija.png +0 -0
- static/papukaija_miettii.png +0 -0
- templates/index.html +14 -24
static/papukaija.png
ADDED
|
static/papukaija_miettii.png
ADDED
|
templates/index.html
CHANGED
|
@@ -5,12 +5,10 @@
|
|
| 5 |
height: 100%;
|
| 6 |
margin: 0;
|
| 7 |
}
|
| 8 |
-
|
| 9 |
#bottom_filler {
|
| 10 |
height: 1.5em;
|
| 11 |
margin-bottom: 1em;
|
| 12 |
}
|
| 13 |
-
|
| 14 |
#message-box, #result-box {
|
| 15 |
display: flex;
|
| 16 |
justify-content: space-between;
|
|
@@ -19,7 +17,6 @@
|
|
| 19 |
border: 2px solid #000;
|
| 20 |
border-radius: 10px;
|
| 21 |
}
|
| 22 |
-
|
| 23 |
#message, #result {
|
| 24 |
width: 100%;
|
| 25 |
height: 50%;
|
|
@@ -38,23 +35,19 @@
|
|
| 38 |
font-size: 1em;
|
| 39 |
resize: none;
|
| 40 |
}
|
| 41 |
-
|
| 42 |
#message:focus {
|
| 43 |
outline: none !important;
|
| 44 |
border: none;
|
| 45 |
box-shadow: none;
|
| 46 |
}
|
| 47 |
-
|
| 48 |
#message::-webkit-resizer {
|
| 49 |
display: none;
|
| 50 |
}
|
| 51 |
-
|
| 52 |
body {
|
| 53 |
display: flex;
|
| 54 |
justify-content: center;
|
| 55 |
align-items: center;
|
| 56 |
}
|
| 57 |
-
|
| 58 |
.container {
|
| 59 |
flex-direction: row;
|
| 60 |
display: flex;
|
|
@@ -65,11 +58,9 @@
|
|
| 65 |
box-sizing: border-box;
|
| 66 |
margin-top: -10%;
|
| 67 |
}
|
| 68 |
-
|
| 69 |
.image {
|
| 70 |
max-width: 15%;
|
| 71 |
}
|
| 72 |
-
|
| 73 |
.child {
|
| 74 |
max-height: 600px;
|
| 75 |
width: 45%;
|
|
@@ -78,7 +69,6 @@
|
|
| 78 |
box-sizing: border-box;
|
| 79 |
margin: 0 2.5em; /* Add margin here */
|
| 80 |
}
|
| 81 |
-
|
| 82 |
@keyframes bounce {
|
| 83 |
0% {
|
| 84 |
transform: translateY(0);
|
|
@@ -93,12 +83,9 @@
|
|
| 93 |
transform: translateY(0);
|
| 94 |
}
|
| 95 |
}
|
| 96 |
-
|
| 97 |
.bounce {
|
| 98 |
animation: bounce 0.5s;
|
| 99 |
}
|
| 100 |
-
|
| 101 |
-
|
| 102 |
</style>
|
| 103 |
<title>Flask Form Submission without Page Reload</title>
|
| 104 |
<link rel="stylesheet" type="text/css" href="static/style.css">
|
|
@@ -106,12 +93,10 @@
|
|
| 106 |
<script>
|
| 107 |
$(document).ready(function () {
|
| 108 |
var timeoutId; // Variable to store the timeout ID
|
| 109 |
-
|
| 110 |
function handleChange() {
|
| 111 |
clearTimeout(timeoutId); // Clear any previous timeout
|
| 112 |
-
timeoutId = setTimeout(callFunction,
|
| 113 |
}
|
| 114 |
-
|
| 115 |
function callFunction() {
|
| 116 |
// get the form data
|
| 117 |
var formData = {
|
|
@@ -128,25 +113,29 @@
|
|
| 128 |
});
|
| 129 |
// alert("This is a pop-up message.");
|
| 130 |
|
| 131 |
-
//
|
|
|
|
| 132 |
$(".image").addClass("bounce");
|
| 133 |
-
|
| 134 |
setTimeout(function () {
|
|
|
|
| 135 |
$(".image").removeClass("bounce");
|
| 136 |
}, 700);
|
| 137 |
}
|
| 138 |
-
|
| 139 |
const textarea = document.getElementById("message"); // Replace "message" with the ID of your textarea element
|
| 140 |
textarea.addEventListener("input", handleChange);
|
| 141 |
|
|
|
|
| 142 |
$("#message").keypress(function (e) {
|
| 143 |
if (e.which === 13) {
|
| 144 |
e.preventDefault();
|
| 145 |
$(this).closest("form").submit();
|
| 146 |
}
|
| 147 |
});
|
| 148 |
-
|
|
|
|
| 149 |
$('#message-box').on('submit', function (e) {
|
|
|
|
| 150 |
callFunction();
|
| 151 |
});
|
| 152 |
});
|
|
@@ -155,13 +144,14 @@
|
|
| 155 |
<body>
|
| 156 |
<div class="container">
|
| 157 |
<form id="message-box" class="child">
|
| 158 |
-
<span id="suomi_label">
|
| 159 |
<textarea id="message" name="message" autofocus="autofocus" spellcheck="false"></textarea>
|
| 160 |
-
<button
|
| 161 |
</form>
|
| 162 |
-
|
|
|
|
| 163 |
<div id="result-box" class="child">
|
| 164 |
-
<span id="enkku_label">
|
| 165 |
<div id="result"></div>
|
| 166 |
<span id="bottom_filler"></span>
|
| 167 |
</div>
|
|
|
|
| 5 |
height: 100%;
|
| 6 |
margin: 0;
|
| 7 |
}
|
|
|
|
| 8 |
#bottom_filler {
|
| 9 |
height: 1.5em;
|
| 10 |
margin-bottom: 1em;
|
| 11 |
}
|
|
|
|
| 12 |
#message-box, #result-box {
|
| 13 |
display: flex;
|
| 14 |
justify-content: space-between;
|
|
|
|
| 17 |
border: 2px solid #000;
|
| 18 |
border-radius: 10px;
|
| 19 |
}
|
|
|
|
| 20 |
#message, #result {
|
| 21 |
width: 100%;
|
| 22 |
height: 50%;
|
|
|
|
| 35 |
font-size: 1em;
|
| 36 |
resize: none;
|
| 37 |
}
|
|
|
|
| 38 |
#message:focus {
|
| 39 |
outline: none !important;
|
| 40 |
border: none;
|
| 41 |
box-shadow: none;
|
| 42 |
}
|
|
|
|
| 43 |
#message::-webkit-resizer {
|
| 44 |
display: none;
|
| 45 |
}
|
|
|
|
| 46 |
body {
|
| 47 |
display: flex;
|
| 48 |
justify-content: center;
|
| 49 |
align-items: center;
|
| 50 |
}
|
|
|
|
| 51 |
.container {
|
| 52 |
flex-direction: row;
|
| 53 |
display: flex;
|
|
|
|
| 58 |
box-sizing: border-box;
|
| 59 |
margin-top: -10%;
|
| 60 |
}
|
|
|
|
| 61 |
.image {
|
| 62 |
max-width: 15%;
|
| 63 |
}
|
|
|
|
| 64 |
.child {
|
| 65 |
max-height: 600px;
|
| 66 |
width: 45%;
|
|
|
|
| 69 |
box-sizing: border-box;
|
| 70 |
margin: 0 2.5em; /* Add margin here */
|
| 71 |
}
|
|
|
|
| 72 |
@keyframes bounce {
|
| 73 |
0% {
|
| 74 |
transform: translateY(0);
|
|
|
|
| 83 |
transform: translateY(0);
|
| 84 |
}
|
| 85 |
}
|
|
|
|
| 86 |
.bounce {
|
| 87 |
animation: bounce 0.5s;
|
| 88 |
}
|
|
|
|
|
|
|
| 89 |
</style>
|
| 90 |
<title>Flask Form Submission without Page Reload</title>
|
| 91 |
<link rel="stylesheet" type="text/css" href="static/style.css">
|
|
|
|
| 93 |
<script>
|
| 94 |
$(document).ready(function () {
|
| 95 |
var timeoutId; // Variable to store the timeout ID
|
|
|
|
| 96 |
function handleChange() {
|
| 97 |
clearTimeout(timeoutId); // Clear any previous timeout
|
| 98 |
+
timeoutId = setTimeout(callFunction, 750); // Set a new timeout of 1 second
|
| 99 |
}
|
|
|
|
| 100 |
function callFunction() {
|
| 101 |
// get the form data
|
| 102 |
var formData = {
|
|
|
|
| 113 |
});
|
| 114 |
// alert("This is a pop-up message.");
|
| 115 |
|
| 116 |
+
// Animaatio - dinosaurus pomppii
|
| 117 |
+
$(".image").attr("src", "{{ url_for('static', filename='papukaija_miettii.png') }}")
|
| 118 |
$(".image").addClass("bounce");
|
| 119 |
+
|
| 120 |
setTimeout(function () {
|
| 121 |
+
$(".image").attr("src", "{{ url_for('static', filename='papukaija.png') }}")
|
| 122 |
$(".image").removeClass("bounce");
|
| 123 |
}, 700);
|
| 124 |
}
|
|
|
|
| 125 |
const textarea = document.getElementById("message"); // Replace "message" with the ID of your textarea element
|
| 126 |
textarea.addEventListener("input", handleChange);
|
| 127 |
|
| 128 |
+
{#ENTERIÄ PAINETTAESSA SAMA - EI REFRESHIÄ#}
|
| 129 |
$("#message").keypress(function (e) {
|
| 130 |
if (e.which === 13) {
|
| 131 |
e.preventDefault();
|
| 132 |
$(this).closest("form").submit();
|
| 133 |
}
|
| 134 |
});
|
| 135 |
+
|
| 136 |
+
|
| 137 |
$('#message-box').on('submit', function (e) {
|
| 138 |
+
e.preventDefault();
|
| 139 |
callFunction();
|
| 140 |
});
|
| 141 |
});
|
|
|
|
| 144 |
<body>
|
| 145 |
<div class="container">
|
| 146 |
<form id="message-box" class="child">
|
| 147 |
+
<span id="suomi_label">Englanniksi:</span>
|
| 148 |
<textarea id="message" name="message" autofocus="autofocus" spellcheck="false"></textarea>
|
| 149 |
+
<button id="bottom_filler">Submit</button>
|
| 150 |
</form>
|
| 151 |
+
|
| 152 |
+
<img src="{{ url_for('static', filename='papukaija.png') }}" class="child image" alt="dino_image">
|
| 153 |
<div id="result-box" class="child">
|
| 154 |
+
<span id="enkku_label">Suomeksi:</span>
|
| 155 |
<div id="result"></div>
|
| 156 |
<span id="bottom_filler"></span>
|
| 157 |
</div>
|