Netmatters Reflection
I wrote this piece of code to populate the CSS classes of the Service Card section of the Netmatters home page.
// Assigning the theme colours to variables
// to aid reuse throughout the project
$design: #926fb1;
$support: #4183d7;
$telecoms: #d64541;
$software: #67809f;
$marketing: #2ecc71;
$security: #f62459;
// Creating a map of the colour variables
$service-colours: (
"design": $design,
"support": $support,
"telecoms": $telecoms,
"software": $software,
"marketing": $marketing,
"security": $security,
);
// A mixin to create the icon backgrounds
@mixin circle-icon($dim) {
color: white;
border-radius: 50%;
text-align: center;
align-self: center;
width: $dim;
height: $dim;
}
// Setting up the service cards
// An each loop iterating through
// the colour map
@each $name, $colour in ($service-colours) {
// Using interpolation to assign
// a class name using the map key
.#{$name} {
// Targeting the icon element using nesting
i {
// Calling the mixin
@include circle-icon(60px);
// Setting the colour to
// the map value
background-color: $colour;
margin-bottom: 17px;
font-size: 23px;
line-height: 60px;
}
// Assigning the values for when
// the service card is hovered over
// and the colours change
&:hover {
color: white;
background-color: $colour;
i, .btn {
color: $colour;
background-color: white;
}
}
}
}
The code above is written in Sass (syntactically awesome style sheets), a CSS preprocessor.
Sass extends on the CSS language using techniques like vaiables, loops, nesting, inheritance and mixins. These methods allow the creation of much more efficient code.
In the example above, twenty seven lines of code define the each loop and mixin, when this is compiled it creates 120 lines of CSS rules.
These rules define the appearance of the Service Cards and how the colours change when the element is hovered over with the mouse pointer.
Database Challenge
For this challenge I was given a choice of three data sets. Being a bit of a film buff I chose the one on movies, the table structure of this can be seen below. I decided to see if I could find the most popular film of the bussiest year.
I wrote a query that selects the year in which the most film releases were recorded and displays the titles of the films from this year. The query pulls in data from the rating table so that this subset can be sorted by rating.
SELECT
mov_title AS "Title",
dir_fname || ' ' || dir_lname AS "Director",
rev_stars AS "Rating",
mov_year AS "Year"
FROM movie m
JOIN movie_direction md
ON m.mov_id = md.mov_id
JOIN director d
ON md.dir_id = d.dir_id
JOIN rating r
ON m.mov_id = r.mov_id
WHERE mov_year IN (
SELECT mov_year
FROM movie
GROUP BY mov_year
ORDER BY COUNT(*) DESC
LIMIT 1
)
ORDER BY rev_stars DESC
;
The query also links to the director table, via movie_direction. The final output includes the film title, directors name, rating and year of release. I formatted the column headings to be a little more human-friendly. The result of my query can be seen in the table below.
| Title | Director | Rating | Year |
|---|---|---|---|
| Princess Mononoke | Hayao Miyazaki | 8.40 | 1997 |
| Titanic | James Cameron | 7.70 | 1997 |
| Good Will Hunting | Gus Van Sant | 4.0 | 1997 |
| Boogie Nights | Paul Thomas Anderson | 3.0 | 1997 |