Glam My Markup 2024

Glam My Markup Dev Challenge 2004

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Glam My Markup</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    </head>
    <body>
        <section id="camp-activities-inquiry">
            <h1>Camp Activities Inquiry</h1>
            <form action="/submit-form" method="POST">
                <label for="activity-select">Which camp activities are you most looking forward to?</label>
                <select id="activity-select" name="activity">
                    <option value="">--Please choose an option--</option>
                    <option value="hiking">Hiking</option>
                    <option value="canoeing">Canoeing</option>
                    <option value="fishing">Fishing</option>
                    <option value="crafts">Crafts</option>
                    <option value="archery">Archery</option>
                </select>
        
                <label for="food-allergies">Food Allergies (if any)</label>
                <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>
        
                <label for="additional-info">Additional things the counselor should know</label>
                <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>
        
                <button type="submit">Submit</button>
            </form>
        </section>
    </body>
</html>

SASS

/* RESET */

*, *:before, *:after
    box-sizing: border-box

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video, button
    margin: 0
    padding: 0
    border: 0
    font-size: 100%
    font: inherit
    vertical-align: baseline
    text-rendering: optimizeLegibility
    -webkit-font-smoothing: antialiased
    text-size-adjust: none

footer, header, nav, section, main
    display: block

body
    line-height: 1

ol, ul
    list-style: none

blockquote, q
    quotes: none

blockquote:before, blockquote:after, q:before, q:after
    content: ''
    content: none

table
    border-collapse: collapse
    border-spacing: 0

input
    -webkit-appearance: none
    border-radius: 0

*:focus
    outline: none
    

/* *************************************************** */
/* COLORS */

$color-black: #000000
$color-brown: #D98F82
$color-gray: #AEAEAE
$color-white: #FFFFFF


/* *************************************************** */
/* TYPOGRAPHY */

$font-family-open-sans-condensed: 'Open Sans Condensed'
$font-family-lato: 'Lato'

$font-family-button: $font-family-lato
$font-family-headings: $font-family-open-sans-condensed
$font-family-text: $font-family-lato

$font-size-text-huge: 3.75rem
$font-size-text-regular: 1.25rem
$font-size-text-tiny: 0.625rem
$font-size-button-big: 1.25rem
$font-size-button-regular: 0.875rem

$font-weight-bold: 700
$font-weight-light: 300


.heading-1
  font-family: $font-family-headings
  font-size: $font-size-text-huge
  font-weight: $font-weight-bold

.heading-6
  font-family: $font-family-headings
  font-size: $font-size-text-regular
  font-weight: $font-weight-bold

.paragraph
  font-family: $font-family-text
  font-size: $font-size-text-regular
  font-weight:...

JavaScript

const NodeCreator = {
                create: ({ type, className }) => {
                    const node = document.createElement(type);
                    
                    if(className) {
                        node.className = className;
                    }

                    return node;
                }
            };

            const NodeGetter = {
                byId: id => {
                    return document.getElementById(id);
                },
                byTag: tag => {
                    return document.getElementsByTagName(tag);
                }
            };

            const StyleSetter = {
                set: (node, name) => {
                    if(node.className) {
                        node.className = node.className + ' ' + name;
                    }
                    else {
                        node.className = name;
                    }
                },
                toggle: (node, name) => {
                    const isActive = node.className.split(' ').filter(c => c === 'active').length > 0;
                    if(isActive) {
                        node.className = node.className.split(' ').filter(c => c !== 'active').join(' ');
                    }
                    else {
                        node.className = node.className + ' active';
                    }
                }
            };

            const PlaceHolderSetter = {
                set: (node, text) => {
                    node.placeholder = text;
                }
            };

            const ButtonCreator = {
                create: ({ text }) => {
                    const button = NodeCreator.create({
                        type: 'BUTTON',
                        className: 'button'
                    });
                    button.innerText = text;
                    button.type = 'button';
                    return button;
                }
            };

            const DivCreator = {
                create:...