From faaeb2633b571ed4f1f73d804ecaf7fd7a96af57 Mon Sep 17 00:00:00 2001 From: Jacob Haddon Date: Tue, 12 Mar 2024 21:16:51 -0400 Subject: [PATCH] code cleanup --- index.html | 121 +++++++++++++++++++---------------------------------- style.css | 39 +++++++---------- 2 files changed, 58 insertions(+), 102 deletions(-) diff --git a/index.html b/index.html index 7e9f896..3b09a27 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Daily Blackout Poetry Challenge - @@ -44,77 +44,65 @@ this file uses: // console.log(book.pages[14][6]); $(document).ready(function(){ -// let text = $("#spina").html().split(" "); -// console.log(text); - // Make the header with the book info $("#poem_header").html("

" + book.title + "

\n\n

" + book.author + "

\n"); // Add in the page, change the underscores to italics $("#spina").html(book.pages[14][6].replace(/(_([a-z0-9]+)_)/ig, "$2")); + // format the text with span tags $("#spina p").each(function( index ) { let text = $( this ).html().split(" "); let newText = []; $.each( text , function(index, value ){ newText[index] = "" + value + ""; -// console.log("index:" + index + " " + value + "") }); // each text $( this ).html(newText.join(" ")); -// console.log(newText.join(" ")); }); // each p - - $("#spina p span").each(function( index ) { - - - }); // each p - + // lock the page to prevent edits $("#lock").click(function(){ $("#spina").toggleClass("unlock"); }); // lock button click - $("#screen").click(function(){ - html2canvas(document.getElementById('poem'), { - scale: 3 + // make a screenshot + $("#screen").click(function() { + html2canvas(document.getElementById('poem'), { + scale: 3 }).then(function(canvas) { - // Export the canvas to its data URI representation -// var base64image = canvas.toDataURL("image/png"); -// -// // Open the image in a new window -// window.open(base64image , "_blank"); - // Export canvas as a blob - canvas.toBlob(function(blob) { - // Generate file download - window.saveAs(blob, "yourwebsite_screenshot.png"); - }); + canvas.toBlob(function(blob) { + window.saveAs(blob, "yourwebsite_screenshot.png"); + }); }); }); // screen button click - + // change for composition view - $("#compose").click(function(){ + $("#blackout").click(function() { $("#spina").toggleClass("unlock"); $("#spina").toggleClass("done"); - $( "#spina p span.click" ).toggleClass("clickDone"); + $("#spina p span.click").toggleClass("clickDone"); + + // get today and format const today = Date(Date.now()); todayFormatted = today.toString(); - - $("#byline").html("

blackout poem inspired by " + book.title + " by " + book.author + "

composed on: " + todayFormatted) + "

"; - $(this).text(function(i, text){ - return text === "Blackout!" ? "Un-Blackout!" : "Blackout!"; - }) - }); // compose + // add the byline + $("#byline").html("

blackout poem inspired by " + book.title + " by " + book.author + "

composed on: " + todayFormatted) + "

"; + + // toggle the text on the button + $(this).text(function(i, text) { + return text === "Blackout!" ? "Un-Blackout!": "Blackout!"; + }); + }); // blackout button click // reset everything back $("#clear").click(function(){ $("#spina").removeClass("done"); - $( "#spina p span.click" ).removeClass("click"); + $("#spina p span.click").removeClass("click"); $("#byline").html(""); $("#poem_list").html(""); $("#spina").addClass("unlock"); - }); // clear -// $("help").hide(); + }); // clear button click // show help section $(".helpbtn").click(function(){ @@ -127,25 +115,31 @@ $(document).ready(function(){ }); // copy text $("#copy_text_meta").click(function(){ + + // get today and format it const today = Date(Date.now()); todayFormatted = today.toString(); + + // add the meta to the copyed text var poem_meta = "#dailyBlackoutPoetryChallenge\n\n" + $("#poem_list").text() + "\n\n" + book.title + " - " + todayFormatted; navigator.clipboard.writeText(poem_meta); - }); // copy text - + }); // copy text w/meta // change the color of a clicked word; add/remove clicked word to list $(document).on('click', "#spina.unlock p span", function(e){ -// $("#spina.unlock p span").click(function(){ + + // add the class to the clicked word $( this ).toggleClass("click"); + + // make the list of words let list = ""; $("#spina p span.click").each(function(index) { list += " " + $(this).text(); }); //poem // Add to the list, but strip out punctuation -// console.log(list.replace(/[^a-z0-9 ]+/ig, "")); $("#poem_list").html(list.replace(/[^a-z0-9 ]+/ig, "")); }); //spina click + }); // document ready @@ -161,41 +155,15 @@ $(document).ready(function(){

Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!

-
-

Invaders from the Dark

-

Greye La Spina

-
+
- -
- -
- -

I ascertained that Miss Delorme was a responsible person, quite able and willing to defray the costs of printing her book, in case it proved to be out of the line of the regular publishing houses. I arranged to visit her home on June 18th, an easy matter, as I found I could get there by subway. On June 18th, therefor, I walked across the fields to the great wall which she had described in her letters, and rang the bell of the bronze gate. From that moment, I began to realize what Miss Delorme meant when she wrote that she feared for the safety of her manuscript.

- -

Even as I stood there waiting, things started to happen in a most bewildering fashion. I heard somebody throw up a window on a side of the house (to my right), and then there came a woman’s scream, which sounded to me more angry than fearful. The scream was followed by a heavy, metallic clang upon the pavement just around the corner from where I stood. I left the gate and ran in the direction of the noise.

- -

On the sidewalk lay a black tin box as is often used to preserve papers of importance. It was dented badly where it had struck the pavement. I picked it up and then turned my eyes toward the windows above me.

- -

And elderly woman stood at the open window nearest the corner of the house, holding with both hands to the window-frame at either side of her. Although she appeared to be alone, I received a strong impression that she was being pulled from behind, for she was struggling as if with all her power to maintain her position there. As I looked up, the tin box in my hand, she called to me anxiously.

- -

“Who are you?”

- -

I told her.

- -

“Thank God you came in time!” She cried excitedly. “Take the box and get away from her as quickly as you can. Don’t let it out of your sight until it has been printed and the books distributed. You’ll understand why, when you’ve read it. Never mind about me! My work is done!”

- -

As the last words were flung down at me, she disappeared backward into the room, as if pulled there by invisible hands.

- -
- +
-
@@ -209,21 +177,18 @@ $(document).ready(function(){
- - - - - +
-
- -
+ +
+ +
diff --git a/style.css b/style.css index 14b6ce0..763aee8 100644 --- a/style.css +++ b/style.css @@ -15,21 +15,15 @@ font-family: "lora"; src: local("Lora"), url("fonts/Lora/webfonts/Lora-Regular.woff2") format('woff2'), url("fonts/Lora/variable/Lora-VariableFont_wght.ttf") format('truetype'); - font-style: normal; - font-weight: normal; -} - -@font-face { -font-family: "brygada"; -src: local("Brygada1918"), - url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf") format('truetype'); +font-style: normal; +font-weight: normal; } @font-face { font-family: "lora"; src: local("Lora"), url("fonts/Lora/webfonts/Lora-Italic.woff2") format('woff2'), - url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf"); + url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf")format('truetype'); font-weight: normal; font-style: italic; } @@ -51,6 +45,10 @@ a:hover { text-decoration: underline; } +.purple { + color: RebeccaPurple; +} + .help { display: none; } @@ -58,11 +56,11 @@ a:hover { /* Styles for the help section of the site */ #help { + background-color: black; color: white; position: absolute; top: 0%; left: 0%; - background-color: black; width: 100%; } @@ -76,13 +74,13 @@ a:hover { } /* styles for the 'page */ + #spina { max-width: 100%; margin: 0; - border-style: solid; padding: 10%; + border-style: solid; border-width: 1px; - /*background-color: #fdf8e9;*/ } #byline { @@ -91,18 +89,17 @@ a:hover { } #poem_list { - border: 2px solid RebeccaPurple; min-height: 75px; + border: 2px solid RebeccaPurple; padding: 50px 5% 5%; } + #copy_buttons { float: right; } .click { background-color: Plum; - /*background-color: RebeccaPurple;*/ - /*color: #ffffff;*/ } /* Styles for the buttons */ @@ -119,11 +116,10 @@ a:hover { background-color: RebeccaPurple; color: #ffffff; } + .btn-mn:hover { -/* background-color: Plum; - color: #000000;*/ -background-color: black; -color: white; + background-color: black; + color: white; } .btn-hlp-bx { @@ -146,7 +142,6 @@ color: white; .clickDone { background-color: white; - padding: 2px; color: black; } @@ -156,7 +151,3 @@ color: white; /*border: 10px solid black;*/ } -.purple { - color: RebeccaPurple; -} - \ No newline at end of file