How to add the current time using JavaScript

Note: skip all the way down to the bottom to grab the completed code. You can view the running code from a codepen embed at the botom of this post. Or read through this short article to find out how it’s done.

Here are some ways to add the current time onto a web page using JavaScript

The first way is simple, but comes with caveats, so is not ideal. The last code is the best solution.

For the first way, the hours, minutes and seconds are grabbed from a new date object, but there are two problems: a) JS is added within the HTML – not good practice. And B) the format can appear without double figures ie: 12:4:2pm.

<h4>Get current time</h4>
<p>
The current time is:
<script>
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  document.write(hours + ":" + minutes + ":" + seconds);
</script>
</p>

The second way is to add just the hours, but put am or pm after the number. In this example, there are some conditional statements and also ‘modulo %’, which calculates based on the 12 hour clock:

<h4>Change hours to a.m and p.m</h4>
<p>The current time is:
  <script>
    var now = new Date();
    var hour= now.getHours();
    if (hour < 12) {
      meridiem = 'am';
    }
    else {
      meridiem = 'pm';
    }
    hour = hour % 12;
    if (hour==0) {
      hour = 12;
    }
    hour = hour + ' ' + meridiem;
    
    document.write(hours);
    </script>

Add a zero to minutes that are less than 10.

<script>
  var minutes = now.getMinutes();
  if (minutes<10) {
    minutes = '0' + minutes;
  }
</script>

The code above getsthe minutes. Checks if it is less than ten. If it is, it adds a zero as a string to minutes. If a string concatenates with a number in JavaScript, then JS autonatically converts the number to a string. In this instance, ‘string’ number becomes ‘string’.

This is all well and good but the JS needs to move out of the HTML. The code needs to be repackaged into a function that can be called.

Here is the function to add the current time to HTML, currently formatted:

function printTime(secs) {
  var sep = ':'; // separator character
  var hours, minutes, seconds, time;
  var now = new Date();
  hours = now.getHours();
  if (hours < 12) {
    meridiem = 'am';
  } else {
    meridiem = 'pm';
  }
  hours = hours % 12;
  if (hours==0) {
    hours = 12;
  }
  time = hours;
  minutes = now.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  time += sep + minutes;
  if (secs) {
    seconds = now.getSeconds();
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    time += sep + seconds;
  }
  return time + ' ' + meridiem;
}

This code needs to run first. Then, add a call to the function in the HTML:

<h4>A function to print the time</h4>
The current time is: 
<script>document.write(printTime());</script>

If you want to add the seconds include true as a parameter inside the function call:

<h4>A function to print the time</h4>
The current time is: 
<script>document.write(printTime(true));</script>

So to recap: Make sure the function is read first, then the HTML and the function call.

Note: This code is not to the current ECMA JavaScript standard but will still work. I’ve grabbed it from an old book as I needed it for a project. At some point I’ll re-write it, but for now, I hope it helps.

See the Pen Get current time using JavaScript by Dan Johnson (@danjohnsonwhitstable) on CodePen.

Beginners guide to using the command line on a Mac

I’ve decided to blog a command line course that I’ve been reading through. So here it is. The very very basic absolute beginners guide to using terminal on a Mac.

This will be an ongoing post so I will post as the course goes along.

Understand this before continuing:

  • Terminal is a program built into the Mac. It is what is called a command line interpreter.
  • A command line interpreter is a program that enables you to ‘program’ the computer to do things. Automate tasks, create folders, change file names and much more.
  • These types of programs are called ‘shells’. Terminal is a particular type of shell called the ‘bash’ shell.
  • Modern web development and computer programming involves using the Terminal to set up tasks that automate processes on your local development environment. The Terminal is used to run commands and get programs to do things.
  • Lots of super things can be achieved using the Terminal and a lot of it is easy – you just have to learn how!

The first thing you need to know is how to navigate around your Mac in order to get to certain folders and files.

Chapter 1: Navigating Directories

Where is the Terminal on the Mac?
Go to Applications, it is in the Utilities folder:

/Applications/Utilities/Terminal.app

Open it.
You know you can open another tab (cmd T) as and when you want.

The first steps to getting used to using the Terminal is in navigating your directory structure.

Some very common commands you will be using a lot:

ls – List everything in a directory

You can provide ‘switches’ to a command that fine tunes your list.
ls -ltr
l = list
t = sort by time modifies
r = reverse results

This is what appears:
drwx------+ 39 Dan staff 1056 22 May 22:49 Desktop

Breakdown of what these characters mean:
d = directory, the following characters are what permissions are avaliable:
r = read. The directory can be read.
w = Write. The directory can be changed.
x = Excecute. Programs can be executed from the directory.
The characters after these letters signify if other people sharing my computer can do things.

How do I get to another folder (directory)?
cd = change directory

Why would I want to go to another folder?
Programs can be used to perform actions on files within particular folders.

Type cd Documents to go to the documents folder
Or,use autocomplete:

Press tab to autocomplete:

Start to type ‘Docu’ and press tab to autocomplete the command. So ‘cd Docu [tab].

Type just ‘d’. Autocomplete advises which of the 2 folders: Documents or Downloads?

So…Using ls and autocomplete means that the full name of the directory doesn’t have to be typed, every time. Just ‘ls’, see the directory, then type the first few letters of the directory and press tab. This is a much quicker and simpler form of navigation.

How to get to the home directory?
Cd ~
Use the tilde character ‘~’.

How to clear the terminal screen?
Type ‘clear
Or ctrl L.

How to navigate to a folder within a folder?
Just continue the path using a slash
cd folder/another-folder

How to find the path of the current located directory?
Type ‘pwd’.
Pwd = show path of Present Working Directory

Terminal shows the path of the directory:
/Users/Dan/Documents/folder/another-folder

How to navigate up the directory tree?
Type 2 full-stops (periods):
cd .. = go to the parent directory

This saves from having to start from the home directory again, just to move up one level. So from the example above:
/Users/Dan/Documents/folder/another-folder

Typing cd ..
Will move to
/Users/Dan/Documents/folder/

This can be typed multiple times to move up to other levels:

cd ../../ etc.

Note that the slash directory system is the same for must websites. This is because Macs use a ‘unix’ file system, the same as websites.

Next chapter:
Navigating shortcuts…

Design a Christmas mandala in Illustrator.

In this post I’ll show you how I designed a Christmas mandala in Illustrator. Explaining the techniques used and thought processes involved. Tis the season to be jolly and also to spend ages designing Christmas cards instead of shopping for presents! I hope you like my card design.

I had been pondering the concept for a while. I’d probably known since last year I wanted to create a mandala design. I’ve always been particularly interested in symmetry and repetition in design. I’d made a seemless pattern Xmas card one previous year. I was also interested in the mystical and spiritual symbology of the mandala and its use in meditation.

For all of the various different interpretations of the mandala though, my design is simply a circular pattern design (with no inner square). A celebration of Christmas, with no other deep meaningful interpretation, apart from my choice of icons which represent the Christmas I associate with most.

As I’m a perfectionist, I started to try and visualise creating all of the icons from scratch, but this would’ve taken a fair amount of time and I didn’t have much spare. Fortunately an email popped into my inbox from Free goodies for Designers which just happened to have 70 AWESOME XMAS ICONS. Perfect! I loaded them into Illustrator and started to check them out.

I had to find a way to copy a line of icons and rotate around in a circle. There’s always so many different ways to do this in Illustrator. You can always find yourself venturing down a rabbit hole with these things. I checked a few tutorials on you-tube and found this extremely cool way which uses the transform ‘effect’ to make copies of a line of icons around a circle. it is quick, easy to use and very cool. Definitely a neat Illustrator trick I will remember for next time.

The last thing left was colour. I tried several different ideas ranging from pastel to indian colour schemes and it just didn’t look right. I had to focus on what I wanted to achieve rather than trying to make it look like what a card should look like – if you get what I mean. For the final colour scheme, the bright shine of the mandala against the dark blue background makes it appear like a glowing star in the night sky.

I still had troubles with the icon placements so I got back to basics, I looked at all of them again and picked out the ones that meant more about Christmas to me than the others. I then played with the arrangement of the icons to make them fit visually within the mandala. The tree began the line of icons as it pointed upwards, the reindeer’s antlers pointing outwards at the end of the icon line. An array of twelve icon lines seemed to suit the best.

I then added a second line of snowflakes, to add to the mandala. I had to straighten some of them as they were a slightly angled. Finally a star right in the middle of the mandala finished the design nicely.

After tweaking the colours to match the background, I decided upon a gold yellow, a cerise/fuscia/magenta red and a turquoise/cyan/aqua blue. I gave them all a slight gradient for that added sparkle. For the ‘Merry Christmas’ text I used my go-to Christmas typeface Samantha.

So there you go, I hope you like it. Merry Christmas!

Kudos to the following:
Freegoodiesfordesigners for the free Xmas icons.
Pixel and Bracket for the smart Illustrator tutorial.
Laura Worthington Design for the Samantha typeface.
Coolers for the colour scheme help.

A Simple Responsive, Two Line Footer

I was designing a website the other day and realised the text in the footer for my website looked better on two lines, at a certain mobile breakpoint. Whereas on desktop, it looked better all on one line. I typed out a few lines in codepen to try it out and thought I’d add it here so that it can be shared and reused.

All CSS, JavaScript and HTML was written ‘obtrusively’. This is because I needed to add it to a custom HTML section within a WordPress theme, for speed more than anything else. As it was such a small piece of code it hardly seemed necessary to split it out, unless of course, you are going down that route.

This is the text:
© 2019 All rights reserved. Web designed in Whitstable by DJW

I added the year as JavaScript so that it updates automatically (php wouldn’t work due to the custom HTML theme section).

The sentences are actually paragraphs <p> – by default they are displayed as blocks, thus on two separate lines. This means it is ‘mobile-first’.

The query is for larger screens, 600px and over (feel free to change to size to suit). When the screen is this size, the query makes the second sentence (with a class) display: inline and therefore moves it onto the first line.

Note that the first sentence has an inline style of display: inline. for some reason I got funny styling without including this.

Here’s the code to grab:

<style scoped>@media (min-width:600px){.TwoLineMob{display: inline;}}</style>
<div class="footerCustomTheme">
<p style="display:inline">© <script> document.write(new Date().getFullYear()); </script> All rights reserved.</p>
<p class="TwoLineMob">Web designed in Whitstable by <a title="Whitstable Web and Graphic solutions for startups and sme's" href="https://danjohnsonwhitstable.com/" >DJW</a></p></div>

You can view the code in codepen here:

How to use content aware tool in Photoshop

The Content aware tool in Photoshop is awesome! It removes unwanted objects by being ‘aware of the surrounding content’ and filling in the space so that the object is removed and the ‘background’ appears normal. The great thing about this is that it doesn’t matter if it doesn’t go right first time. Just keep on selecting and removing objects until it looks great.

This is a super quick guide to using it. First have the pic ready in Photoshop (CS 5.5 and newer versions).

  1.  Duplicate the pic (alt + drag the pic icon in the layers panel), therefore the pic can be reused if it all goes wong.
  2. Use the lasso tool to select an area around the object you want to remove. (I prefer the standard lasso so that you can ‘draw’ the selection). The selection only has to be roughly around the edges of the object – obviously some of the background will be included in the selection but that’s ok. Make sure the selection does not touch the object.
  3. Go to edit – fill – content-aware, ok. (or shift + F5). Voila! The object is filled in by using background information to fill the selected area.
  4. Grin smugly.

London to Brighton Bike Ride 2018

When: Sunday 17th June 2018
Distance: 54 miles
Time: 6hrs 10 mins
Hills: plenty, including one ginormous one
Donated: £215

Tl:dr – I did a bike ride. 54 miles. One very big steep hill at the end. Got a medal and a sore backside. Oh and a film was made.

Continue reading

Posted in Me

So I decided to cut off my hair for charity

Hey all,

The deed is done!

On the 10th December 2016 I had my hair cut for charity:

After years of procrastination and persuasion, I finally decided to cut my hair off for charity!

I last went to the barbers when I was fifteen (so about 10 years ago then!) and it feels a bit bizarre but I’m so pleased with the way it turned out.

Continue reading

Posted in Me

Happy Cat / Grumpy Cat Christmas card 2016

Merry Christmas everyone, hope you like my Christmas card:

Happy Cat / Grumpy Cat Christmas Card 2016

Happy Cat / Grumpy Cat Christmas Card 2016

Entitled Happy Cat / Grumpy Cat. For those that received my card you got a choice. One side shows Happy Cat with the slogan “i can haz presents?” whilst turning the card around shows Grumpy Cat with a ‘paw’ written slogan of “BAH HUMBUG!”.

Continue reading

Christmas tree card 2015

Hey, hope you like my sparkly Christmas tree card.

The idea for the design all started when I was struggling to find inspiration for my Christmas card design. For the past set of years I’ve always designed my own Christmas card and this year I couldn’t think of what to do until I saw this website advent of code which was from an email by webdesignernews. I just thought the simple tree with animation flashes looked great. I’d used ASCII art before but only in the HTML source code for an old website just for a bit of fun but that was a few years go.

Continue reading