-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcoding.php
222 lines (189 loc) · 7.5 KB
/
coding.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$pageTitle = "Coding Examples";
include('src/head.php');
?>
</head>
<body>
<img id="background-image" src="https://jtickett.github.io/Portfolio/img/waterposter.jpg" alt="Background Image"></img>
<video id="background-video" src="img/waterUHD.mp4" autoplay="true" loop="true" muted="true" poster="img\waterposter.jpg"></video>
<div id="page-wrapper">
<?php
include('src/nav.php');
?>
<header id="banner-section">
<!-- TODO: This needs to move out of this section, but for now I'm not sure how to get rid of the visible space at the bottom of the page -->
<!-- Mobile Menu (with Burger) -->
<nav>
<div id="hamburger">
<div id="burger"></div>
</div>
</nav>
<div id="banner-overlay">
<!-- <img src="img\banner1.jpg" alt="Banner Image" id="banner-image"> -->
<h1 id="banner-text">
James Tickett
</h1>
<h3 id="banner-subtext">
Software Developer
</h3>
</div>
<a id="banner-link" href="#scs-header">
Scroll Down
<br>
<span class="icon-chevron-down"></span>
</a>
</header>
<main id="main">
<div id="banner-gradient"></div>
<section id="coding-section" class="section">
<div id="scs-spacer"></div>
<header id="scs-header">
<h2 class="section-title">Coding Examples</h2>
</header>
<div id="scs-wrapper">
<h3>HTML5</h3>
<pre><code class="language-html"><!--
This HTML is used in my JS Array Project.
It is a container for an image that is used to display a random image from a list.
Since I need the image to not to have a preset URL on page load, I am generating a single transparent pixel to use as a temporary placeholder.
This is a bit of a workaround to make it compliant with W3C HTML validation.
-->
<div class="image-container" id="main-image-container">
<img id="random-image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="Random Image">
</div></code></pre>
<h3>CSS3 and SCSS</h3>
<pre><code class="language-css">@mixin button($bgcolor, $brcolor: null, $lheight: 20px, $bradius: $br-small) {
// Assign parameters to variables
background-color: $bgcolor;
border: 2px solid $brcolor;
border-radius: $bradius;
line-height: $lheight;
// Default styles of buttons
color: white;
display: inline-block;
// Prevent underlining links.
text-decoration: none;
:hover {
text-decoration: none;
}
// Allow for additional styles to be added.
@content;
}</code></pre>
<pre><code class="language-css">/*
This class is used on the image in my JS Array Project.
It sets it up with a slight blur and desaturation
When hovering above it, the filters are removed, and a slight zoom effect is used.
*/
.image-container{
position: relative;
display: inline-block;
transition: transform $zoom-duration $zoom-curve;
filter: blur(0.5px) saturate(0.9);
cursor: pointer;
&:hover {
-ms-transform: scale($zoom-scale-thumb); /* IE 9 */
-webkit-transform: scale($zoom-scale-thumb); /* Safari 3-8 */
transform: scale($zoom-scale-thumb);
filter: blur(0px) saturate(1);
div.delete-button {
display: block;
}
}
}
// In another seperate file I have all my units stored as variables, allowing quick reconfiguration across the board.
$zoom-duration: 0.3s;
$zoom-scale-thumb: 1.1;
$zoom-scale-main: 1.03;
$zoom-curve: cubic-bezier(0.68, -0.55, 0.27, 1.55);
$transition-button: all 0.3s ease-in-out;</code></pre>
<h3>JavaScript</h3>
<pre><code class="language-javascript">// Assign image to email
function assignImageToEmail(email, imageURL) {
const emailInput = document.getElementById("email-input");
emailInput.setCustomValidity("");
// If the email is not in the list, add it, otherwise do nothing
if (!isEmailInList(email)) {
log("New Email: " + email);
addEmailToList(email);
}
// If the image is not already in the list, add it, otherwise report it as duplicated.
if (!isImageInList(email, imageURL)) {
addImageToList(email, imageURL);
} else {
emailInput.setCustomValidity(
"This image is already assigned to this email address!"
);
emailInput.reportValidity();
// Timeout needed to avoid clashing with the previous validity message.
setTimeout(() => {
emailInput.setCustomValidity("");
}, 1000);
}
}</code></pre>
<h3>PHP</h3>
<pre><code class="language-php">// This is only called once the form has been both validated and sanitised.
function insertContactSubmission(FormData $formData) {
try {
$pdo = getPDO();
$query = "INSERT INTO contact (name, company, email, phone, message, marketing, date) VALUES (:name, :company, :email, :phone, :message, :marketing, NOW())";
$stmt = $pdo->prepare($query);
$stmt->bindValue(':name', $formData->name);
$stmt->bindValue(':company', $formData->company);
$stmt->bindValue(':email', $formData->email);
$stmt->bindValue(':phone', $formData->phone);
$stmt->bindValue(':message', $formData->message);
$stmt->bindValue(':marketing', $formData->marketing);
$success = $stmt->execute();
if ($success) {
return ['success' => true, 'message' => 'Your message has been sent!'];
} else {
return ['success' => false, 'message' => 'Failed to insert contact submission.'];
}
} catch (PDOException $e) {
error_log('PDO Error in insertContactSubmission: ' . $e->getMessage() .
' [Error Code: ' . $e->getCode() . ']');
return [
'success' => false,
'message' => 'Database error occurred.',
'debug' => $e->getMessage() // Only in development environment
];
} catch (Exception $e) {
error_log('General Error: ' . $e->getMessage());
return ['success' => false, 'message' => 'An error occurred.'];
}
}</code></pre>
<h3>SQL</h3>
<pre><code class="language-sql">/*
This Select statement will join a users table to an orders table, and then select the users who have made more than one order.
It will then order the results by the total amount of orders they have made, and limit the results to 10.
The offset is set to 5, so the first 5 results are skipped.
*/
SELECT u.id, u.name, u.email, o.order_id, o.total
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
GROUP BY u.id, u.name, u.email, o.order_id, o.total
HAVING COUNT(o.order_id) > 1
ORDER BY o.total DESC
LIMIT 10 OFFSET 5;</code></pre>
</div>
</section>
</main>
<footer id="footer">
<a id="footer-link" href="#banner-section">
<span class="icon-chevron-up"></span>
<br>
Back to Top
</a>
</footer>
</div>
<?php
include('src/footer.php');
?>
</body>
</html>