Coding Examples

Using SCSS to control colours

First I write the basic structure of the elements in HTML that I want to style:

<div class="btn-big">
        <span class="btn-logo btn-logo--dev-grey">
            <svg class="icon"> <use href="svg/icon-laptop"> </use> </svg>
        </span>
        <h2>Consultancy & development</h2>
        <span class="btn-sm btn-sm--dev-yellow">Read More</span>
    </div>
    <div class="btn-big">
        <span class="btn-logo btn-logo--support-blue">
            <svg class="icon"> <use href="svg/icon-laptop"> </use> </svg>
        </span>
        <h2>IT Support</h2>
        <span class="btn-sm btn-sm--support-blue">Read More</span>
    </div>
Hover over the code to learn more ↑

I then make a sass map for the respective button colours:

$btn-colors: (
    dev-yellow:        #f7b322,
    dev-grey:          #67809f,
    support-blue:      #4183d7,
    market-green:      #2ecc71,
    telecoms-red:      #d64541,
    design-purple:     #926fb1,
    security-pink:     #f62459,
    training-orange:   #ce4125
    );
Hover over the code to learn more ↑

Finally I make an @each rule, targeting the variable pairs in the colour map to assign set colours to each button and style them and their hover effects with a short amount of code:

.btn-logo {
    @each $name, $color in $btn-colors {
    &--#{$name} {
        display: inline-grid;
        min-height: 65px;
        min-width: 65px;
        border-radius: 50%;
        background-color: $color;
        fill: $bg-white;
        border-color: transparent;
        align-self: center;
        & svg {  
        justify-self: center;
        align-self: center;
        height: 32px;
        width: 32px;
        }
        }
    }
    }
Hover over the code to learn more ↑

JavaScript Cookie Logic

First I declare a function that accepts one parameter- a name. The function will check if any cookies exist with the value of the name I pass the function. I then declare a variable called "accepted" and call the function getCookie() and I pass it the name "cookie_accepted". An if statement then checks if cookie_accepted= true in the list of document cookies. If it's not, then the cookie popup appears on the page and adds a click event to the 'accept' button. If the user clicks 'accept' then the current date and time is noted, and the expiration on the cookie is set 7 days (or 604,800 milliseconds) from that point. If the cookie has been accepted, the user will not see the cookie popup until it expires or is deleted manually. 

const accept = document.getElementById("accept-cookie");
    const cookieAll = document.getElementById("cookie-cont");


    function getCookie(name) {
        return document.cookie
            .split("; ")
            .map(c => c.trim())
            .find(row => row.startsWith(name + "="))
            ?.split("=")[1];
    }

    const accepted = getCookie("cookie_accepted");

    if (accepted !== "true") {
        cookieAll.style.display ="block";
        accept.addEventListener("click", () => {
            let date = new Date(Date.now() + 604800e3);
            document.cookie = `cookie_accepted=true; expires=${date.toUTCString()}; path=/; SameSite=Lax`;
            cookieAll.style.display ="none";
        });
    } else {
        cookieAll.style.display = "none";
    }

PHP Forloop & database query

Below I've use a PHP for loop and a database query to populate the content and styling of a news section on a website.


<?php
    require 'Database.php';
    $db = new Database();

    foreach ($db->queryAll('SELECT  
                articles.title, 
                articles.article_id,
                articles.date,
                articles.png,
                articles.excerpt,
                
                authors.author_id AS author_id,
                authors.name AS author_name,
                authors.author_png,
                authors.png_alt,
                styling.tooltip,
                styling.button,
                styling.title_colour FROM articles
                JOIN authors ON authors.author_id = articles.author_id
                JOIN styling ON styling.article_id = articles.article_id') as $article) :
?>
<a href="#" class="news-link">
<div class="article news article<?= $article['article_id'] ?>">
    <div class="image">
        <?=  $article['tooltip']; ?>
        <span class="news-img">
            <img src="<?=  $article['png']; ?>" class="news-image" alt="Increase Exit Value With 
            Bespoke Software- Our Key Strategies">
        </span>
    </div>
    <div class="news-txt">
        <h3 class="<?=  $article['title_colour']; ?>">
        <span><?= $article['title']; ?></span></h3>
        <p><?=  $article['excerpt']; ?></p>
        <div class="<?=  $article['button']; ?>"><p>Read More</p></div>
    


        <div class="poster">
            <div class="post-pic">
                <img class="news-logo" src="<?= $article['author_png']; ?>" 
                alt="The Netmatters Logo">
            </div>
            <div class="post-deet">
                <p class="nm">
                    <strong>Posted by <?= $article['author_name']; ?></strong>
                </p>
                <p class="date">
                    <?=  $article['date']; ?>
                </p>
            </div>
        </div>
    </div>
</div>
</a>
<?php endforeach ?>