diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7931d3a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+server/.env
+server/node_modules
+.vscode
\ No newline at end of file
diff --git a/README.md b/README.md
index e8e7797..c48072f 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,18 @@ A crossword consists of clues, answers, and a layout:
This crossword layout generator takes in a list of answers and outputs a crossword layout. Our program **does not** generate the answers or the clues.
+## Running the code locally
+
+**Step 1:** Navigate to the server directory: `cd server`
+
+**Step 2:** Install project dependencies: `npm install`
+
+**Step 3:** Create a file named `.env` in `server`. In the file, add your API key: `OPENAI_API_KEY=your_api_key`
+
+**Step 4:** Start the server with `npm start` (default: port 3000)
+
+**Step 5:** Go back to the main project directory and run the live server extension.
+
## Input and Output Format
An input is a list of answers in a JSON format. The clues can optionally be included with the input.
diff --git a/index.html b/index.html
index 20b910d..40fae87 100644
--- a/index.html
+++ b/index.html
@@ -5,51 +5,258 @@
+
+
+
+
+
Generate your own crossword puzzle
+
Enter a list of words on seperate lines
-
+
+
+
+ Maximum Grid Size
+
+ Generate layout
+
Crossword Layout Generator
- Enter a list of words below Generate Layout
+
Check if a word is in the crossword
+
+ Check word
+
+
+
Blank Crossword Filled Crossword " + filled_crossword_html;
+ document.getElementById("clues-html").innerHTML = "Clues " + clues_html;
+ }
+ } finally {
+ button.disabled = false;
+ button.textContent = "Generate Layout";
+ button.style.cursor = 'pointer';
+ document.getElementById("crossword-container").style.display = 'flex';
+ document.getElementById("clues-container").style.display = 'block';
+ document.getElementById("controls-container").style.display = 'block';
+ document.getElementById("extra-container").style.display = 'flex';
+ }
+ }
+
+ function playCrossword() { //need to check if word in corssword, not word list since not all words are in crossword
+ const wordGuess = document.getElementById("check-word").value.trim().toLowerCase();
+ const wordsInGame = document.getElementById("words").value.split('\n');
+ const crosswordData = convert_to_json(wordsInGame);
+
+ let isWordInCrossword = false;
+ for (let i=0; i
+ ${clues}
+ `;
+
+ // Append the temporary container to the body (hidden)
+ document.body.appendChild(tempContainer);
+
+ // Define options for html2pdf
+ const options = {
+ margin: 1,
+ filename: 'blank_crossword_with_clues.pdf',
+ image: { type: 'jpeg', quality: 0.98 },
+ html2canvas: { scale: 2 },
+ jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+ };
+
+ // Generate and download the PDF
+ html2pdf()
+ .set(options)
+ .from(tempContainer)
+ .save()
+ .then(() => {
+ // Clean up by removing the temporary container
+ document.body.removeChild(tempContainer);
+ });
+ }
+
+ function downloadFilledPDF() {
+ const element = document.getElementById('filled-html-crossword'); // Target the filled crossword
+ const options = {
+ margin: 1,
+ filename: 'Filled_Crossword.pdf',
+ html2canvas: { scale: 2 },
+ jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+ };
+ html2pdf().set(options).from(element).save();
+ }
+
+