FE Candidate Task

fe-candidate-task.markdown

FE Candidate Task

A Pen by Jako on CodePen.

License.

index.html

<div id="app" style="display: none;" class="page">
  <!-- Site Header -->
  <header class="site-header">
    <div class="container">
      <h1 class="inline-block">Rob's Excellent Photography Space</h1>
      <span class="inline-block">Snappy snapping snaps</span>
    </div>
  </header>

  <!-- Site Navigation -->
  <nav class="site-nav theme-dark">
    <div class="container">
      <ul class="nav-list site-nav-links" id="siteNavList"></ul>
      <input class="site-nav-search" type="text" name="" value="" placeholder="search">
    </div>
  </nav>

  <main class="container site-main theme-light">
    <!-- Home Page -->
    <section id="home">
      <h2>Home</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Phasellus magna. Nam eget dui. Praesent vestibulum dapibus nibh. Sed cursus turpis vitae tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <h3>News</h3>
      <div id="blog"></div>
    </section>

    <!-- About Page -->
    <section id="about">
      <h2>About</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sagittis. Nam at tortor in tellus interdum sagittis. Etiam sit amet orci eget eros faucibus tincidunt. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.</p>
      <p>Nullam sagittis. Quisque id mi. Nulla consequat massa quis enim. Donec vitae orci sed dolor rutrum auctor. Praesent ac sem eget est egestas volutpat.</p>
      <p>Curabitur turpis. Cras dapibus. Sed libero. Aenean massa. Vivamus elementum semper nisi.</p>
    </section>

    <section id="gallerey" style="display: none;">
      <h2>Gallery</h2>
      <div id="images"></div>
    </section>

    <!-- Contact Page -->
    <section id="contact">
      <h2>Contact</h2>
      <form>
        <div class="form-group">
          <label for="">Name</label>
          <input type="text" name="" value="">
        </div>
        <div class="form-group">
          <label for="">Email</label>
          <input type="email" name="" value="">
        </div>
        <div class="form-group">
          <label for="">Message</label>
          <textarea name="name" rows="8" cols="80"></textarea>
        </div>

        <button class="btn">Submit</button>
      </form>
    </section>
  </main>

  <!-- Site Footer -->
  <footer class="site-footer theme-dark">
    <div class="container">
      <ul class="nav-list">
        <li>
          <a href="#">Big Company</a>
        </li>
        <li>
          <a href="#">Terms and Conditions</a>
        </li>
        <li>
          <a href="#">Cookie Policy</a>
        </li>
      </ul>
    </div>
  </footer>
</div>

<!-- Image Viewer Modal -->
<div id="modal" class="modal" style="display: none;" onclick="closeModal()">
  <div class="modal-inner">
    <div id="imageViewer" class="image-viewer"></div>
  </div>
</div>

script.js

/**
  # Rob's Photography client request
  
  Rob has had this website for quite some time and has hired you to make some 
  adjustments.
  There are some fixed requirements he has requested and also lots of room for 
  flexibility and experimentation. The site is in need a face lift and Rob
  would be open to a new look of your choosing.

  Work must be presented either in a codepen (or any other code playground), 
  a downloadable archive or a git repo. If it requires building then clear 
  instructions should be included and it should run on Mac and Linux.
  Though there are no particular time constraints, and you are free to go as far 
  as you want, ideally the task should take you no longer than an hour or two.

  Requirements:
  1) The website should be fully responsive.
  2) The gallery page has stopped showing and Rob would like it back.
  3) Once the gallery page is back Rob has requested that the thumbnails should 
     be correctly sized, positioned and scaled with the page to avoid uneven 
     whitespace.
  4) The image modal viewer isn't scaling the background image correctly and
     this will need to be fixed.
  5) Rob has requested that you add at least 2 images to the about page (use
     unsplash to get your images).
  6) The 'news' section on the homepage should be moved to a new page called 
     "Blog" which can be reached from the main site navigation bar and show
     after the home link.
  7) Rob would like to this image somewhere on his home page: 
     https://source.unsplash.com/gV6taBJuBTk/1600x900
  8) Rob is after a new look to his site and would like to see some fresh 
     branding colours, fonts and layouts.

  Restrictions:
  - You may use any code preprocessors you like for the CSS, HTML or Javascript.
  - You may use any Javascript framesworks you like. JQuery is already included.
  - All CSS must be written by hand (you may not use a CSS framework).
  - You may use any icon packs you wish.
  - You may change any and all branding. Colours and typography choices are yours.
  - You may rewrite the copy but using lorem ipsum is also perfectly acceptable.
  - The website should work with the latest version of Chrome and may use any new
    standards, techniques and supported technologies.
  - The search or contact form does not need to work and is merely placeholder.

  Bonus:
  - Annotate your work.

  Resources:
  - https://source.unsplash.com
  - https://jsonplaceholder.typicode.com/
  - https://developers.google.com/fonts/
**/

const pages = ['home', 'about', 'contact'];
const path = 'https://jsonplaceholder.typicode.com/';

const getNews = () => {
  fetch(`${path}posts`)
    .then(response => response.json())
    .then(json => {
      json.forEach((item) => {
        $('#blog').append(`
          <article class="card">
            <h3>${item.title}</h3>
            <p>${item.body}</p>
          </article>
        `);
      });
    });
}

const getPhotos = () => {
  fetch(`${path}photos?albumId=1`)
    .then(response => response.json())
    .then(json => {
      json.forEach((item) => {
        $('#images').append(`
          <figure class="gallery-image"
            style="background-image: url('${item.thumbnailUrl})'"
            onclick="openModal('${item.url}')"
          ></figure>
        `);
      });
    });
}

const openModal = (url) => {
  $('#modal').show();
  $('body').css('overflow', 'hidden');
  $('#imageViewer').css('background-image', `url(${url})`)
}

const closeModal = () => {
  $('#modal').hide();
  $('body').css('overflow', 'auto');
}

const makeNav = () => {
  pages.forEach((link) => {
    $(`#siteNavList`).append(`
      <li><a href="#" onclick="setPage('${link}')">${link}</a></li>
    `);
  });
}

const setPage = (setPage) => {
  pages.forEach((page) => {
    if (page === setPage) {
      $(`#${page}`).show();
    } else {
      $(`#${page}`).hide();
    }
  })
}

$(document).ready(() => {
  makeNav();
  setPage('home');
  $('#app').show();
  
  getNews();
  getPhotos();
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

:root {
  /* Page */
  --page-bg: #ececec;

  /* Theme */
  --dark-bg: #111;
  --dark-fg: #999;
  --light-bg: white;
  --light-fg: #333;
  --border-radius: 3px;

  /* Brand */
  --brand-primary: orange;
  --brand-secondary: teal;
  --brand-trim: red;
  --brand-wash: teal;
  
  /* Effects */
  --highlight: rgba(255,255,255,0.15);

  /* Interaction */
  --link-fg: teal;
  --link-bg: var(--highlight);

  /* Layout */
  --base-margin: 1.75rem;
  --base-padding: 1.5rem;
}

body
,html {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  background: var(--page-bg);
}

a {
  color: var(--link-fg);
  text-decoration: none;
}

/* Theme */
.theme-dark {
  color: var(--dark-fg);
  background: var(--dark-bg)
}

.theme-light {
  color: var(--light-fg);
  background: var(--light-bg);
}

/* Helpers */
.inline-block {display: inline-block;}

/* Layout */
.container {
  width: 700px;
  margin: 0 auto;
  padding: 0 var(--base-padding);
}

.form-group {
  margin-bottom: var(--base-margin);
}

.form-group > label {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.75rem;
}

.site-header {
  padding: 1.5rem 0 0.5rem;
  color: var(--brand-primary);
  background: var(--brand-wash);
  border-bottom: 2px solid var(--brand-trim);
}

.site-nav-search {
  margin-top: 1rem;
  width: 150px;
  float: right;
}

.site-nav-links {
  width: 350px;
  display: inline-block;
}

.site-main {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.site-footer {
  margin-top: 20px;
}

/* Interaction */
.btn {
  padding: 0.25rem;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}

/* Components */
.card {
  padding: 0.5rem var(--base-padding);
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  border-left: 3px solid var(--brand-trim);
  box-shadow: 0 0 5px #ececec;
}

.gallery-image {
  width: 10rem;
  height: 10rem;
  margin: 0;
  border: 1px solid var(--brand-trim);
  display: inline-block;
}

.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: auto;
  background: rgba(0,0,0,0.5)
}

.modal-inner {
  display: block;
  position: relative;
  margin: 20px auto;
  background: white;
  width: 500px;
  padding: var(--base-padding);
  overflow: hidden;
  border-radius: var(--border-radius);
}

.image-viewer {
  width: 100%;
  padding-bottom: 100%;
  background-color: black;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list > li {
  display: inline-block;
  padding: 0.25rem;
}
.nav-list > li > a {
  display: inline-block;
  padding: 1rem 0.25rem;
}
.nav-list > li > a:hover
,.nav-list > li > a.active {
  background: var(--highlight);
}