poll assignment.

db-start/index.php

@@ -1,34 +0,0 @@
-<?php
-require_once 'vendor/autoload.php';
-
-$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
-$dotenv->safeLoad();
-$db_pass = $_ENV['DATABASE_PASSWORD'];
-
-// Make some constants
-if ($_SERVER['HTTP_HOST'] == 'localhost') {
-    define('HOST', 'localhost');
-    define('USER', 'root');
-    define('PASS', $db_pass);
-    define('DB', 'palindromes');
-} else {
-    define('HOST', 'cs2440.joshashton.dev');
-    define('USER', 'root');
-    define('PASS', $db_pass);
-    define('DB', 'palindromes');
-}
-
-// Connect to the DB
-$conn = mysqli_connect(HOST, USER, PASS, DB);
-
-// Write a DB query
-$sql = 'SELECT * FROM palindrome;';
-
-// Run DB query
-$results = mysqli_query($conn, $sql);
-
-// Loop through data
-while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)) {
-    echo $row['phrase'] . '<br>';
-};
-?>

db-start/pal.sql

@@ -1,15 +0,0 @@
--------------------------- copy and paste to your local mysql server -------------------------------
-drop database if exists palindromes;
-create database palindromes;
-use palindromes;
-create table palindrome (id int auto_increment primary key, phrase varchar(255));
-insert into palindrome (phrase) values ('race car'), ('bob'), ('senile felines'), ('stack cats');
-select * from palindrome;
-----------------------------------------------------------------------------------------------------
-
-
----------------------------- copy and paste to your remote server ----------------------------------
-create table palindrome (id int auto_increment primary key, phrase varchar(255));
-insert into palindrome (phrase) values ('race car'), ('bob'), ('senile felines'), ('stack cats');
-select * from palindrome;
-----------------------------------------------------------------------------------------------------

poll/composer.json

@@ -1,8 +1,8 @@
 {
-    "name": "violet/db-start",
+    "name": "violet/poll",
     "autoload": {
         "psr-4": {
-            "Violet\\DbStart\\": "src/"
+            "Violet\\Poll\\": "src/"
         }
     },
     "authors": [

poll/css/styles.css

@@ -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;
+}

poll/index.php

@@ -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>';
+}
+?>

poll/js/index.js

@@ -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');
+    }
+  });
+});