-
-
Save 5310/f14190b49d01cc7b6e5a7771602d5f66 to your computer and use it in GitHub Desktop.
PracprogW — Madlibs #article
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .input{max-width:600px;text-align:center;line-height:1.5em}.input input{width:8em;border:none;border-bottom:1px dashed currentColor;color:#000;font-size:0.8em;font-style:italic;text-align:center;text-transform:uppercase}.input input:focus{border-bottom:2px solid}.input input[name^=noun]{color:blue}.input input[name^=exclamation]{color:#a61a1a}.input input[name^=adjective]{color:#b85c21}.input input[name^=adverb]{color:#cca500}.input input[name^=verb]{color:green}.input button{margin-top:4em;padding:1em;border:none;background:black;color:white;font-weight:bold;text-transform:uppercase;cursor:pointer}.input button:focus,.input button:hover{-webkit-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg);position:relative;top:-0.5em;box-shadow:0 0.5em 1em rgba(0, 0, 0, 0.2)} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Madlibs! Gimme Some Words!</title> | |
| <link href="style.css" rel="stylesheet"> | |
| <link href="index.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <main> | |
| <form class="input" action="output.html" method="GET"> | |
| <p>Gimme an | |
| <label for="exclamation">exclamation</label> | |
| <input id="exclamation" name="exclamation" type="text" placeholder="ouch">, an | |
| <label for="adverb">adverb</label> | |
| <input id="adverb" name="adverb" type="text" placeholder="stupidly" autofocus>, a | |
| <label for="noun">noun</label> | |
| <input id="noun" name="noun" type="text" placeholder="cat">, and finally an | |
| <label for="adjective">adjective</label> | |
| <input id="adjective" name="adjective" type="text" placeholder="brave">! | |
| </p> | |
| <button name="submit" type="submit">Madlibs!</button> | |
| </form> | |
| </main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .input { | |
| max-width: 600px; | |
| text-align: center; | |
| line-height: 1.5em; | |
| input { | |
| width: 8em; | |
| border: none; | |
| border-bottom: 1px dashed currentColor; | |
| color: #000; | |
| font-size: 0.8em; | |
| font-style: italic; | |
| text-align: center; | |
| text-transform: uppercase; | |
| &:focus { | |
| border-bottom: 2px solid; | |
| } | |
| &[name^="noun"] { color: blue; } | |
| &[name^="exclamation"] { color: rgb(166, 26, 26); } | |
| &[name^="adjective"] { color: rgb(184, 92, 33); } | |
| &[name^="adverb"] { color: rgb(204, 165, 0); } | |
| &[name^="verb"] { color: green; } | |
| } | |
| button { | |
| margin-top: 4em; | |
| padding: 1em; | |
| border: none; | |
| background: black; | |
| color: white; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| &:hover, &:focus { | |
| transform: rotate(-3deg); | |
| position: relative; | |
| top: -0.5em; | |
| box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| html(lang='en') | |
| head | |
| meta(charset='utf-8') | |
| title Madlibs! Gimme Some Words! | |
| link(href='style.css', rel='stylesheet') | |
| link(href='index.css', rel='stylesheet') | |
| body | |
| main | |
| form.input(action="output.html", method="GET") | |
| p | |
| | Gimme an | |
| label(for="exclamation") exclamation | |
| input(id="exclamation", name="exclamation", type="text" placeholder="ouch") | |
| | , an | |
| label(for="adverb") adverb | |
| input(id="adverb", name="adverb", type="text" placeholder="stupidly", autofocus) | |
| | , a | |
| label(for="noun") noun | |
| input(id="noun", name="noun", type="text" placeholder="cat") | |
| | , and finally an | |
| label(for="adjective") adjective | |
| input(id="adjective", name="adjective", type="text" placeholder="brave") | |
| |! | |
| button(name="submit", type="submit") Madlibs! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .output{max-width:600px;font-style:italic;text-align:center;line-height:1.5em}.output:before{position:relative;top:-0.5em;content:"〃"}.output:after{position:relative;bottom:-0.5em;content:"〃"}.output span{text-transform:uppercase}.output span.noun{color:blue}.output span.exclamation{color:#a61a1a}.output span.adjective{color:#b85c21}.output span.adverb{color:#cca500}.output span.verb{color:green} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Madlibs! Cool Story Bro!</title> | |
| <link href="style.css" rel="stylesheet"> | |
| <link href="output.css" rel="stylesheet"> | |
| <script src="output.js"></script> | |
| </head> | |
| <body> | |
| <main> | |
| <blockquote class="output"><span class="exclamation">Ouch</span>! He said <span class="adverb">stupidly</span> as he jumped into his convertible <span class="noun">cat</span> and drove off with his <span class="adjective">brave</span> wife.</blockquote> | |
| </main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', () => { | |
| const params = new URLSearchParams(location.search) | |
| const libs = ['exclamation', 'adverb', 'noun', 'adjective'] | |
| libs.forEach((lib) => { | |
| const word = params.get(lib) | |
| if (word) document.querySelector(`.output .${lib}`).innerHTML = word | |
| }) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .output { | |
| max-width: 600px; | |
| // font-size: 1.2em; | |
| font-style: italic; | |
| text-align: center; | |
| line-height: 1.5em; | |
| &:before { | |
| position: relative; | |
| top: -0.5em; | |
| content: "〃"; | |
| } | |
| &:after { | |
| position: relative; | |
| bottom: -0.5em; | |
| content: "〃"; | |
| } | |
| span { | |
| text-transform: uppercase; | |
| &.noun { color: blue; } | |
| &.exclamation { color: rgb(166, 26, 26); } | |
| &.adjective { color: rgb(184, 92, 33); } | |
| &.adverb { color: rgb(204, 165, 0); } | |
| &.verb { color: green; } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| html(lang='en') | |
| head | |
| meta(charset='utf-8') | |
| title Madlibs! Cool Story Bro! | |
| link(href='style.css', rel='stylesheet') | |
| link(href='output.css', rel='stylesheet') | |
| script(src='output.js'). | |
| body | |
| main | |
| blockquote.output | |
| <span class="exclamation">Ouch</span>! He said <span class="adverb">stupidly</span> as he jumped into his convertible <span class="noun">cat</span> and drove off with his <span class="adjective">brave</span> wife. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root{font-size:24px;font-family:sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{width:100vw;min-height:100vh;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| font-size: 24px; | |
| font-family: sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| width: 100vw; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment