Update settings.json, backend.js, and index.html

maxiwee69 · Jan 31, 2024 · 8cc9c1d · 8cc9c1d
1 parent 67f41d3
commit 8cc9c1d
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 73 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
diff --git a/hihi/answer.txt b/hihi/answer.txt
@@ -0,0 +1 @@
+Yes
diff --git a/hihi/backend.js b/hihi/backend.js
@@ -1,20 +1,27 @@
 const express = require('express');
-const fs = require('fs');
+const cors = require('cors');
+const writeFileAtomic = require('write-file-atomic');
 const app = express();
+const port = 3000;
 
+app.use(cors());
 app.use(express.json());
 
 app.post('/save_answer', (req, res) => {
     const answer = req.body.answer;
-    fs.writeFile('answer.txt', answer, err => {
+    console.log(`Received answer: ${answer}`); // Print the received answer
+
+    writeFileAtomic('answer.txt', `${answer}\n`, { encoding: 'utf8', mode: 0o600 }, function (err) {
         if (err) {
-            console.error(err);
-            res.status(500).send('An error occurred while writing the answer to a file.');
+            console.error(`Error writing to file: ${err}`); // Print the error
+            res.status(500).json({ message: 'Error writing to file' });
         } else {
-            console.log('Answer saved to file.');
-            res.status(200).send('Answer saved to file.');
+            console.log('Saved!');
+            res.status(200).json({ message: 'Answer saved' });
         }
     });
 });
 
-app.listen(3000, () => console.log('Server listening on port 3000.'));
+app.listen(port, () => {
+    console.log(`Server listening at http://localhost:${port}`);
+});
diff --git a/hihi/cat.gif b/hihi/cat.gif
diff --git a/hihi/index.html b/hihi/index.html
@@ -1,27 +1,24 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <div class="title">
     <title>Valentine's Date</title>
-    </div>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body class="body">
-    <header class="header">
-        <h1 class="title">Will you be my Valentine?</h1>
-    </header>
-
-    <main class="main">
-        <p class="message">Dear Leonie,</p>
-        <p class="message">I wanted to ask you something very special...</p>
-        <p class="message">Will you be my Valentine?</p>        
-        <button id="yesButton" class="button">Yes, I'd love to!</button>
-        <button id="noButton" class="button">Sorry, I can't.</button>
-    </main>
-    <img id="image" src="" style="display: none;">
-    <footer class="footer">
-        <p class="footer-text">Created with love by Your secret lover</p>
-    </footer>
+    <img id="cat.png" style="display: none;" />
+    <div class="container">
+        <main class="main">
+            <p class="message">Dear Leonie,</p>
+            <p class="message">I wanted to ask you something very special...</p>
+            <p class="message">Will you be my Valentine?</p>        
+            <button id="yesButton" class="button">Yes, I'd love to!</button>
+            <button id="noButton" class="button">Sorry, I can't.</button>
+        </main>
+        <img id="image" src="" style="display: none;">
+        <footer class="footer">
+            <p class="footer-text">Created with love by Your secret lover</p>
+        </footer>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/hihi/sarlah-sarlahthecat.gif b/hihi/sarlah-sarlahthecat.gif
diff --git a/hihi/script.js b/hihi/script.js
@@ -1,47 +1,46 @@
-window.onload = function() {
+document.addEventListener('DOMContentLoaded', function() {
+    var yesButton = document.getElementById('yesButton');
+    var noButton = document.getElementById('noButton');
+
+    yesButton.style.cursor = 'pointer';
+    noButton.style.cursor = 'pointer';
 
+    function sendAnswer(answer) {
+        fetch('http://localhost:3000/save_answer', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ answer: answer }),
+        })
+        .then(response => {
+            console.log(response);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => console.log('Success:', data))
+        .catch((error) => console.error('Error:', error));
+    }
+
     document.getElementById('yesButton').addEventListener('click', function() {
+        console.log('Yes button clicked');
         sendAnswer('Yes');
         // Change the title
-        document.getElementById('title').textContent = 'Yippie!!';
-
-        // Embed the Tenor GIF
-        var gifEmbed = document.createElement('div');
-        gifEmbed.innerHTML = `
-            <div class="tenor-gif-embed" data-postid="26594385" data-share-method="host" data-aspect-ratio="0.60625" data-width="100%">
-                <a href="https://tenor.com/view/yippee-cat-excited-gif-26594385">Yippee Cat GIF</a>from 
-                <a href="https://tenor.com/search/yippee-gifs">Yippee GIFs</a>
-            </div>
-            <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
-        `;
-        document.body.appendChild(gifEmbed);
+        document.getElementById('message').textContent = 'Yippie!!';
+        var image = document.getElementById('image');
+        image.src = 'cat.gif'; 
+        image.style.display = 'block';
     });
 
     document.getElementById('noButton').addEventListener('click', function() {
         sendAnswer('No');
-        // Change the title
-        document.getElementById('title').textContent = 'No button is just for show'; // Replace 'New Title' with your actual title
-
-        // Remove the "No" button
+        document.getElementById('message').textContent = 'No button is just for show'; 
         var noButton = document.getElementById('noButton');
         noButton.parentNode.removeChild(noButton);
-
-        // Display the image
         var image = document.getElementById('image');
-        image.src = 'https://www.reddit.com/media?url=https%253A%252F%252Fi.redd.it%252F4kcezfmr06s41.png%0'; // Replace 'image.jpg' with the path to your image
+        image.src = 'sarlah-sarlahthecat.gif'; 
         image.style.display = 'block';
     });
-
-    function sendAnswer(answer) {
-        fetch('http://loaclhost:3000/hihi/save_answer', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ answer: answer }),
-        })
-        .then(response => response.json())
-        .then(data => console.log('Success:', data))
-        .catch((error) => console.error('Error:', error));
-    }
-}
+});
diff --git a/hihi/styles.css b/hihi/styles.css
@@ -46,10 +46,12 @@ body {
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease-out;
+    cursor: pointer;
 }
 
 .button:hover {
     background: #ff4500;
+    cursor: pointer;
 }
 
 #yesButton, #noButton {
@@ -58,21 +60,12 @@ body {
     min-height: 50px; 
 }
 
-
-
-.title {
-    font-size: 3em;
-    color: white;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-    text-align: center;
-    margin-top: 600px;
+#yesButton:hover, #noButton:hover {
+    background: #ff4500;
+    cursor: pointer;
 }
 
+
 .footer {
     position: absolute;
     bottom: 20px;