Created in February 2025.
Gettysburg Address in HTML. Interactive.
A sequel to Gettysburg Address in HTML Buttons!
And the source code:
JavaScript
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('GETTYSBURG-ADDRESS');
form.addEventListener('submit', function (event) {
event.preventDefault();
return false;
});
const buttons = document.querySelectorAll('#GETTYSBURG-ADDRESS button');
buttons.forEach(function (button) {
button.addEventListener('click', function (event) {
window.speechSynthesis.speak(new SpeechSynthesisUtterance(this.innerText));
this.className = 'active';
return false;
});
});
});SCSS
form#GETTYSBURG-ADDRESS {
max-width: 80ch;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3rem;
button {
font-size: 1.2rem;
transition: 1.2s background-position;
background: linear-gradient(to right, #d5d5d5 50%, rgba(0, 0, 0, 0) 0%) 0 0/200% 100% no-repeat;
border: 1px solid #ccc;
border-radius: 0.2rem;
padding: 0.5rem;
flex-grow: 1;
&.active {
background-position: -100% 0;
}
}
}
HTML
<form id="GETTYSBURG-ADDRESS" onsubmit="return false">
<button>Four</button>
<button>score</button>
<button>and</button>
<button>seven</button>
<button>years</button>
<button>ago</button>
<button>our</button>
<button>fathers</button>
<button>brought</button>
<button>forth</button>
<button>on</button>
<button>this</button>
<button>continent</button>
<button>a</button>
<button>new</button>
<button>nation,</button>
<button>conceived</button>
<button>in</button>
<button>liberty</button>
<button>and</button>
<button>dedicated</button>
<button>to</button>
<button>the</button>
<button>proposition</button>
<button>that</button>
<button>all</button>
<button>men</button>
<button>are</button>
<button>created</button>
<button>equal.</button>
<button>Now</button>
<button>we</button>
<button>are</button>
<button>engaged</button>
<button>in</button>
<button>a</button>
<button>great</button>
<button>civil</button>
<button>war,</button>
<button>testing</button>
<button>whether</button>
<button>that</button>
<button>nation</button>
<button>or</button>
<button>any</button>
<button>nation</button>
<button>so</button>
<button>conceived</button>
<button>and</button>
<button>so</button>
<button>dedicated</button>
<button>can</button>
<button>long</button>
<button>endure.</button>
<button>We</button>
<button>are</button>
<button>met</button>
<button>on</button>
<button>a</button>
<button>great</button>
<button>battlefield</button>
<button>of</button>
<button>that</button>
<button>war.</button>
<button>We</button>
<button>have</button>
<button>come</button>
<button>to</button>
<button>dedicate</button>
<button>a</button>
<button>portion</button>
<button>of</button>
<button>that</button>
<button>field</button>
<button>as</button>
<button>a</button>
<button>final</button>
<button>resting-place</button>
<button>for</button>
<button>those</button>
<button>who</button>
<button>here</button>
<button>gave</button>
<button>their</button>
<button>lives</button>
<button>that</button>
<button>that</button>
<button>nation</button>
<button>might</button>
<button>live.</button>
<button>It</button>
<button>is</button>
<button>altogether</button>
<button>fitting</button>
<button>and</button>
<button>proper</button>
<button>that</button>
<button>we</button>
<button>should</button>
<button>do</button>
<button>this.</button>
<button>But</button>
<button>in</button>
<button>a</button>
<button>larger</button>
<button>sense,</button>
<button>we</button>
<button>cannot</button>
<button>dedicate,</button>
<button>we</button>
<button>cannot</button>
<button>consecrate,</button>
<button>we</button>
<button>cannot</button>
<button>hallow</button>
<button>this</button>
<button>ground.</button>
<button>The</button>
<button>brave</button>
<button>men,</button>
<button>living</button>
<button>and</button>
<button>dead</button>
<button>who</button>
<button>struggled</button>
<button>here</button>
<button>have</button>
<button>consecrated</button>
<button>it</button>
<button>far</button>
<button>above</button>
<button>our</button>
<button>poor</button>
<button>power</button>
<button>to</button>
<button>add</button>
<button>or</button>
<button>detract.</button>
<button>The</button>
<button>world</button>
<button>will</button>
<button>little</button>
<button>note</button>
<button>nor</button>
<button>long</button>
<button>remember</button>
<button>what</button>
<button>we</button>
<button>say</button>
<button>here,</button>
<button>but</button>
<button>it</button>
<button>can</button>
<button>never</button>
<button>forget</button>
<button>what</button>
<button>they</button>
<button>did</button>
<button>here.</button>
<button>It</button>
<button>is</button>
<button>for</button>
<button>us</button>
<button>the</button>
<button>living</button>
<button>rather</button>
<button>to</button>
<button>be</button>
<button>dedicated</button>
<button>here</button>
<button>to</button>
<button>the</button>
<button>unfinished</button>
<button>work</button>
<button>which</button>
<button>they</button>
<button>who</button>
<button>fought</button>
<button>here</button>
<button>have</button>
<button>thus</button>
<button>far</button>
<button>so</button>
<button>nobly</button>
<button>advanced.</button>
<button>It</button>
<button>is</button>
<button>rather</button>
<button>for</button>
<button>us</button>
<button>to</button>
<button>be</button>
<button>here</button>
<button>dedicated</button>
<button>to</button>
<button>the</button>
<button>great</button>
<button>task</button>
<button>remaining</button>
<button>before</button>
<button>us—that</button>
<button>from</button>
<button>these</button>
<button>honored</button>
<button>dead</button>
<button>we</button>
<button>take</button>
<button>increased</button>
<button>devotion</button>
<button>to</button>
<button>that</button>
<button>cause</button>
<button>for</button>
<button>which</button>
<button>they</button>
<button>gave</button>
<button>the</button>
<button>last</button>
<button>full</button>
<button>measure</button>
<button>of</button>
<button>devotion—that</button>
<button>we</button>
<button>here</button>
<button>highly</button>
<button>resolve</button>
<button>that</button>
<button>these</button>
<button>dead</button>
<button>shall</button>
<button>not</button>
<button>have</button>
<button>died</button>
<button>in</button>
<button>vain,</button>
<button>that</button>
<button>this</button>
<button>nation</button>
<button>under</button>
<button>God</button>
<button>shall</button>
<button>have</button>
<button>a</button>
<button>new</button>
<button>birth</button>
<button>of</button>
<button>freedom,</button>
<button>and</button>
<button>that</button>
<button>government</button>
<button>of</button>
<button>the</button>
<button>people,</button>
<button>by</button>
<button>the</button>
<button>people,</button>
<button>for</button>
<button>the</button>
<button>people</button>
<button>shall</button>
<button>not</button>
<button>perish</button>
<button>from</button>
<button>the</button>
<button>earth.</button>
</form>