Merge pull request #47 from code4policy/citations

Citations
code4policy · Jan 12, 2024 · 80b74c1 · 80b74c1
2 parents 80603f5 + b6c0ed1
commit 80b74c1
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -28,6 +28,44 @@ <h1 class="centered">How the War in Ukraine is Portrayed <br> in the American Me
             <p>On February 24, 2022, Russia launched a full-scale invasion of Ukraine. In response, many NATO member nations, including the United States, have sent financial, humanitarian, and military aid to Ukraine to support their efforts. As the war has played out, providing this aid has become a political football in the United States with the latest relief legislation failing in Congress in December 2023 after being panned by Republican Members of Congress. As support for providing aid to Ukraine begins to show cracks along ideological lines, we aim to investigate how the war in Ukraine is portrayed by media outlets across the political spectrum and how these may contribute to this development.</p>
         </div>
 
+
+        <!--how to cite our research -->
+        <h2 class="centered">Cite This Project</h2>
+
+        <p class="centered">If you would like to cite any of this project, please feel free to use any of the premade citations below.</p>
+
+        <br>
+
+<!--------- APA citation --------->
+<p class="centered">APA</p>
+    <div class="centered" id="copyContainerAPA">
+        <p class="centered" id="textToCopyAPA">Luke, S., Yushchyshyn, S., & Beskrovna, A. (2024, January 14). <em>How the War in Ukraine is Portrayed in the American Media.</em> code4policy. https://code4policy.com/2024-b3-Ukraine-media/index.html</p>
+    <button id="copyButtonAPA">Copy Citation</button>
+</div>
+
+<br>
+
+<!---------  Chicago citation --------->
+<p class="centered">Chicago</p>
+<div class="centered" id="copyContainerChicago">
+    <p class="centered" id="textToCopyChicago">Luke, Schields, Sly Yushchyshyn, and Alina Beskrovna. "How the War in Ukraine is Portrayed in the American Media." code4policy. January 14, 2024. https://code4policy.com/2024-b3-Ukraine-media/index.html.</p>
+    <button id="copyButtonChicago">Copy Citation</button>
+</div>
+
+<br>
+
+<!--------- MLA citation ---------> 
+<p class="centered">MLA</p>
+<body>
+    <div class="centered" id="copyContainerMLA">
+    <p class="centered" id="textToCopyMLA">Luke, Schields, Yushchyshyn, Sly, and Beskrovna, Alina. "How the War in Ukraine is Portrayed in the American Media." <em>code4policy</em>, 14 Jan. 2024, https://code4policy.com/2024-b3-Ukraine-media/index.html.</p>
+    <button id="copyButtonMLA">Copy Citation</button>
+    </div>
+</body>
+
+
+
+
         <hr>
 
         <!-- national tv section -->

diff --git a/main.js b/main.js
@@ -1,4 +1,48 @@
 // function for changing year on word chart
 function switchVis(chartId) {
   document.querySelector('iframe').src = 'https://datawrapper.dwcdn.net/' + chartId;
-}
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Add a click event listener to the APA copy button
+    var copyButtonAPA = document.getElementById('copyButtonAPA');
+    copyButtonAPA.addEventListener('click', function() {
+        copyTextToClipboard('textToCopyAPA', copyButtonAPA);
+    });
+
+    // Add a click event listener to the Chicago copy button
+    var copyButtonChicago = document.getElementById('copyButtonChicago');
+    copyButtonChicago.addEventListener('click', function() {
+        copyTextToClipboard('textToCopyChicago', copyButtonChicago);
+    });
+
+    // Add a click event listener to the MLA copy button
+    var copyButtonMLA = document.getElementById('copyButtonMLA');
+    copyButtonMLA.addEventListener('click', function() {
+        copyTextToClipboard('textToCopyMLA', copyButtonMLA);
+    });
+
+    // Function to copy text to clipboard
+    function copyTextToClipboard(textElementId, copyButton) {
+        var textToCopy = document.getElementById(textElementId);
+        var textarea = document.createElement('textarea');
+        textarea.value = textToCopy.innerText;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+
+        // Change button color and text
+        copyButton.style.backgroundColor = '#45a049'; // Change to the desired color
+        copyButton.style.borderColor = '#45a049'; // Add border color
+        copyButton.innerText = 'Copied!';
+
+        // Reset button after a delay (you can adjust the delay as needed)
+        setTimeout(function() {
+            copyButton.style.backgroundColor = ''; // Reset to the original color
+            copyButton.style.borderColor = ''; // Remove border color
+            copyButton.innerText = 'Copy Citation';
+        }, 2000); // Adjust the delay in milliseconds
+    }
+});
+
diff --git a/styles.css b/styles.css
@@ -168,7 +168,109 @@ hr {
 /* Change button background on hover */
 .linkedin-button:hover {
     background-color: #005885;
+}
+
+/* copy button */
+#copyContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#textToCopy {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+    flex: 1; /* Allow the text to take available space */
+}
+
+#copyButton {
+    background-color: white;
+    color: black;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    margin-left: 10px; /* Add margin to the left of the button */
+}
+
+
+
+/* copy button for APA citation */
+#copyContainerAPA {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#textToCopyAPA {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+    flex: 1; /* Allow the text to take available space */
+}
+
+#copyButtonAPA {
+    background-color: white;
+    color: black;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    margin-left: 10px; /* Add margin to the left of the button */
+}
+
+/* copy button for Chicago citation */
+#copyContainerChicago {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
+#textToCopyChicago {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+    flex: 1; /* Allow the text to take available space */
+}
+
+#copyButtonChicago {
+    background-color: white;
+    color: black;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    margin-left: 10px; /* Add margin to the left of the button */
+}
+
+/* copy button for MLA citation */
+#copyContainerMLA {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#textToCopyMLA {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+    flex: 1; /* Allow the text to take available space */
+}
+
+#copyButtonMLA {
+    background-color: white;
+    color: black;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    margin-left: 10px; /* Add margin to the left of the button */
+}