poll assignment.
This commit is contained in:
Joshua Ashton
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "violet/poll",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Violet\\Poll\\": "src/"
|
||||
}
|
||||
},
|
||||
"authors": [
|
||||
{
|
||||
"name": "Joshua Ashton",
|
||||
"email": "joshuatashton+dev@gmail.com"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"vlucas/phpdotenv": "^5.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: #bbedbe;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
p,
|
||||
input {
|
||||
color: #0e3610;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
width: 60%;
|
||||
|
||||
border-radius: 18px;
|
||||
|
||||
background-color: #26942D;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.option {
|
||||
text-align: center;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.option label:hover {
|
||||
background-color: green;
|
||||
color: #f1fbf2;
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: #f1fbf2;
|
||||
color: #0e3610;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 2vw;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option label.checked {
|
||||
color: #f1fbf2;
|
||||
background-color: #0e3610;
|
||||
}
|
||||
|
||||
button {
|
||||
/* Button Shape */
|
||||
grid-column: span 2;
|
||||
padding: 1vw;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
|
||||
/* Font */
|
||||
color: white;
|
||||
font-size: 1vw;
|
||||
font-weight: 600;
|
||||
|
||||
/* Transition for hover */
|
||||
transition-duration: 500ms;
|
||||
|
||||
background-color: #1c6b20;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0e3610;
|
||||
color: #f1fbf2;
|
||||
}
|
||||
|
||||
.chart {
|
||||
background-color: #f1fbf2;
|
||||
border-radius: 18px;
|
||||
padding: 1vw;
|
||||
width: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: 10% 90%;
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar {
|
||||
padding: 1vw 0 1vw 0;
|
||||
margin: 10px 0 10px 0;
|
||||
background-color: #0e3610;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
margin-left: 10px;
|
||||
color: #f1fbf2;
|
||||
font-weight: 800;
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
<?php
|
||||
require_once 'vendor/autoload.php';
|
||||
|
||||
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
|
||||
$dotenv->safeLoad();
|
||||
|
||||
// Use environment variables for the database password and IP address.
|
||||
$db_pass = $_ENV['DATABASE_PASSWORD'];
|
||||
$ip_addr = $_ENV['IP_ADDRESS'];
|
||||
|
||||
// Make some constants
|
||||
if ($_SERVER['HTTP_HOST'] == 'localhost') {
|
||||
define('HOST', 'localhost');
|
||||
define('USER', 'root');
|
||||
define('PASS', $db_pass);
|
||||
define('DB', 'poll');
|
||||
} else {
|
||||
define('HOST', $ip_addr);
|
||||
define('USER', 'root');
|
||||
define('PASS', $db_pass);
|
||||
define('DB', 'poll');
|
||||
}
|
||||
|
||||
$poll_options = [
|
||||
'Atom',
|
||||
'Brackets',
|
||||
'Eclipse',
|
||||
'Emacs',
|
||||
'Gedit',
|
||||
'IntelliJ',
|
||||
'Nano',
|
||||
'NetBeans',
|
||||
'NeoVim',
|
||||
'Notepad++',
|
||||
'Sublime',
|
||||
'Visual Studio',
|
||||
'Visual Studio Code',
|
||||
'XCode',
|
||||
];
|
||||
|
||||
if (isset($_POST['option'])) {
|
||||
setcookie('form_submitted', 'true', time() + 3600, '/'); // Expires in 1 hour (adjust as needed)
|
||||
}
|
||||
?>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Poll</title>
|
||||
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||
<script src="js/index.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Poll</h1>
|
||||
<?php
|
||||
if (!isset($_POST['option']) && !isset($_COOKIE['form_submitted'])) {
|
||||
echo '
|
||||
<h3>What is the best text editor or IDE?</h3>
|
||||
<form method="post">';
|
||||
|
||||
foreach ($poll_options as $option) {
|
||||
echo '
|
||||
<div class="option">
|
||||
<label for="' . $option . '">
|
||||
<input type="radio" value="' . $option . '" id="' . $option . '" name="option">
|
||||
' . $option . '
|
||||
</label>
|
||||
</div>
|
||||
';
|
||||
}
|
||||
|
||||
echo '
|
||||
<button>Submit</button>
|
||||
</form>';
|
||||
} else {
|
||||
echo "<h3>Thank you! Here's the results.</h3>";
|
||||
if ($_COOKIE['form_submitted'])
|
||||
displayChart();
|
||||
else
|
||||
updateDb($_POST['option']);
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<?php
|
||||
function updateDb($option)
|
||||
{
|
||||
// Connect to the DB
|
||||
$conn = mysqli_connect(HOST, USER, PASS, DB);
|
||||
|
||||
// Write a DB query
|
||||
$sql = 'SELECT * FROM poll_results WHERE option = "' . $option . '";';
|
||||
|
||||
// Run DB query
|
||||
$results = mysqli_query($conn, $sql);
|
||||
if (mysqli_num_rows($results) == 0) {
|
||||
$sql = "INSERT INTO poll_results (option, count) VALUES ('$option', 1)";
|
||||
$results = mysqli_query($conn, $sql);
|
||||
} else {
|
||||
$sql = 'UPDATE poll_results SET count = count + 1 WHERE option = "' . $option . '";';
|
||||
$results = mysqli_query($conn, $sql);
|
||||
}
|
||||
|
||||
displayChart();
|
||||
}
|
||||
|
||||
function displayChart()
|
||||
{
|
||||
// Connect to the DB
|
||||
$conn = mysqli_connect(HOST, USER, PASS, DB);
|
||||
|
||||
$sql = 'SELECT * FROM poll_results ORDER BY count DESC;';
|
||||
$data = mysqli_query($conn, $sql);
|
||||
|
||||
$sql = 'SELECT SUM(count) AS total_count FROM poll_results;';
|
||||
$result = mysqli_query($conn, $sql);
|
||||
$row = mysqli_fetch_assoc($result);
|
||||
$totalCount = $row['total_count'];
|
||||
|
||||
echo '<div class="chart">';
|
||||
while ($row = mysqli_fetch_assoc($data)) {
|
||||
$width = ($row['count'] / $totalCount) * 100;
|
||||
$calculatedWidth = max($width, 5);
|
||||
echo '<p class="chart-label">' . $row['option'] . '</p>';
|
||||
echo '<div class="bar" style="width: ' . $calculatedWidth . '%"><p class="bar-label">' . ceil($width) . '%</p></div>';
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,17 @@
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
|
||||
radioButtons.forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
// Remove 'checked' class from all labels
|
||||
radioButtons.forEach(otherRadio => {
|
||||
otherRadio.parentNode.classList.remove('checked'); // parentNode gets the label
|
||||
console.log('removed checked');
|
||||
});
|
||||
|
||||
// Add 'checked' class to the currently selected label
|
||||
if (radio.checked) {
|
||||
radio.parentNode.classList.add('checked');
|
||||
console.log('added checked');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user