"It's just a phase!" is a simple online tool that allows you to track the Moon Cycle. It displays the current Moon Phase alongside its image and detailed description. Additionally, it offers other relevant information such as the approximate distance between the Moon and Earth, the percentage of the Moon that is currently visible, the number of days until the next Full Moon etc., all of which are updated daily. The website also explains how the Moon Cycle works; it lists and describes all phases of the Moon. Finally, it showcases the changes in the Moon's surface throughout the cycle with a small photo gallery. The site is composed of four pages: Current Moon Phase, Moon Cycle Explained, FAQ, and Gallery.
"It's just a phase!" deployed website is available here.
- It's just a phase! - your daily Moon Phase Tracker
- To provide users with accurate and up-to-date information about the current phase of the Moon. This could include displaying the Moon's appearance, percentage of illumination, distance to the Moon from Earth, and other relevant details.
- To educate users about the different phases of the Moon and the science behind them. It could provide explanations, diagrams, and relevant images to help users understand the lunar cycle.
- To provide a visual calendar that displays the Moon phases for a specific period (e.g., a year) that can help users track the Moon's changing appearance over time.
- To deliver all of the above in the form of a visually appealing, intuitive, responsive across different devices and easy to navigate website.
- To quickly and easily see the current phase of the Moon, whether it's a Full Moon, New Moon, Waxing Crescent, Waning Gibbous, etc.
- Users might be interested in accessing more than just the current Moon Phase. They might want additional information such as Moon illumination percentage, number of days through the cycle, number of days till the next Full Moon, etc.
- To explore a calendar view that shows the Moon's phases for a specific period, helping them understand how the Moon's appearance changes over time.
- To learn about the different phases of the Moon and their significance. They might be curious about why the Moon's appearance changes over time.
- To navigate throughout the page in an easy, effortless and intuitive way.
- To have a positive and enjoyable experience while browsing the website.
- To continue tracking the Moon's changing phases to deepen their understanding of the lunar cycle.
- To plan upcoming activities that align with specific Moon phases, such as outdoor events, photography sessions, or astronomical observations.
- To revisit the website's settings to fine-tune their preferences, such as adjusting time zones or choosing favorite locations.
- To share their own observations, photos, or experiences related to Moon phases within the website's community.
- To stay informed about upcoming celestial events beyond Moon phases, such as meteor showers, planetary alignments, asteroids and comets.
- To access the provider's social media accounts.
- To offer feedback to the app developers based on their experiences, helping to shape future updates and improvements.
The colour scheme of "It's just a phase!" Moon Cycle Tracker was generated from its background picture, which captures the beauty of a night, starry sky. Because it plays a crucial role in setting the tone and atmosphere of the app, I wanted to keep it simple and elegant by introducing the classic combination of black and white, alongside a few subtle shades of blue and grey to emphasize a connection to the astronomical theme. The strongest colour accent of the website is a mid-toned, golden ochre shade called buff, which refers to the colour of natural, undyed leather. I believe it provides a nice contrast to the darker shades, adding a touch of warmth and balance to the overall colour scheme.
I used Coolors to generate my colour palette.
The combination of well-matching Playfair Display and Quattrocento fonts was suggested by one of the font pairing services called fontpair.co. These fonts create a great contrast in a harmonising way. They enhance the visual hierarchy of the website and highlight essential information.
-
The Playfair Display font is well-suited for titling and headlines, which makes it a perfect choice for the website's main logo and sections' headings. It's eye-catching, sophisticated and it easily draws attention
-
The Quattrocento font is the main font used throughout the whole website with Serif as the fallback font. It's a classic and elegant typeface that ensures easy readability. It was mainly used to provide text content to the paragraphs.
Font Awesome icons were used throughout the site, such as the social media icons in the footer.
Imagery plays a vital role in capturing the awe-inspiring beauty of the Moon in "It's just a phase!" Moon Phase Tracker. Its main purpose is to inspire and immerse visitors in the captivating world of the lunar cycle - and to encourage them to expand their knowledge on this topic.
The images used on the website were sourced from two leading providers of free stock photography:
- Pexels
- images of all eight Moon phases by Maxwell Fury,
- Unsplash
- background image of all four pages: photo by Des Récits.
Phases of the Moon diagram was downloaded from NASA's Solar System Exploration website, credit: Bill Dunford. Data visualization of the Waning Crescent Moon as seen from the northern and southern hemispheres came from NASA's Earth's Moon Website, credit: NASA’s Scientific Visualization Studio.
Wireframes were created using Balsamiq - the industry top wireframing software.
| Size | Screenshot |
|---|---|
| Mobile |  |
| Tablet |  |
| Desktop |  |
"It's just a phase!" consists of four pages: Current Moon Phase, Moon Cycle Explained, FAQ and Gallery.
Some features are common for all of them. These are:
- Page Header - It's comprised of the logo in the top left corner, the site's name and the responsive navigation, which collapses on medium and small devices to the shape of a hamburger menu. The collapsed menu holds a list of links to all four pages. When the lines are clicked or tapped on, the menu slides into view. A link appears underlined when a user hovers over it. The active link stays underlined. The responsive navigation header was built using Bootstrap.
- Page Footer - It stretches across the entire width of the screen. It consists of social media links on the left side and copyright information on the right. It was created using Bootstrap's
container-fluid. Social media icons change their colour to white when a user hovers over them.
Home page consists of:
- Main heading - It indicates clearly what's the website's main purpose.
- First section - It's nearly entirely built of information obtained from the external source, which is Moon Phase API, a provider of comprehensive astronomical data. The information provided includes the name of a current Moon Phase, its image and description, an approximate distance to the Moon from Earth, a percentage of illumination, a current zodiac sign, a percentage of the complete Lunar Cycle, the number of days till the next Full Moon and the age of the Moon since the last New Moon. It's all wrapped in the
container-fluid, which divides the section into three columns. On smaller devices they are stacked one below the other, the middle column first, then the left one and the right one at the end.
- Second Section - It consists of the heading, short instructions and the Lunar Cycle calendar for the current year. The calendar, like the previous section, is also the effect of consuming the Moon Phase API. This data was originally delivered in markdown format, but it was converted into HTML using the Marked Library (CDN link provided in the head of the index.html file). A horizontal scroll bar is added at the bottom of it to make the whole calendar accessible to users.
The second page, Moon Cycle Explained, consists of one section divided into three columns. On medium devices, they are stacked one below the other, on small ones the image in the middle is hidden. This section explains what are the Moon Phases and why our view of the Moon changes throughout the month. It also lists and describes all of the eight Moon Phases providing a graphical representation of how it all may look on the night sky.
The third page, Frequently Asked Questions, answers a few simple questions about the Moon Phases and the Moon Cycle in general. Like the previous page, this one also consists of just one section divided into three columns. On smaller devices, they are stacked one below the other. They are all placed on a slightly darker background than the main background picture to make the text fully visible and easy to read.
The fourth and last page, the Gallery, consists of the main heading, a short introduction and eight images illustrating eight Moon Phases - displayed in the form of an image carousel, which was created from scratch using JavaScript.
- Moonrise and moonset parameters available on the website - depending on the user's location and their time zone (to meet the third returning/frequent user goal).
- Community Section - letting users interact with one another, discuss their ideas and share their resources (to meet the fourth returning/frequent user goal).
- Linking the website to another API providing data about near-Earth objects like asteroids, meteors, and comets (to meet the fifth returning/frequent user goal).
- Contact Us Section - to let users provide their feedback to the app developers based on their experiences, which may help with future updates and improvements (to meet the seventh returning/frequent user goal).
- Introducing a simple matching game to test users' knowledge.
- HTML - used for the main site content.
- CSS - used for the main site design and layout.
- JavaScript - used for user interaction on the site.
- Am I responsive? - used to check the site's responsiveness and to create mockups.
- Balsamiq - used to create wireframes.
- Bootstrap v5.3 - used to assist with responsiveness by utilizing its components and layout elements.
- Coolors - used to create the colour palette.
- Font Awesome - used to provide icons across the website.
- Fontpair - used for font pairing.
- Free Convert - used to convert jpg/png images to webp format.
- Google Chrome Dev Tools - used to inspect and debug the code.
- Google Fonts - used to import the fonts that style all of the text content.
- Git - used for version control by utilizing VS Code's terminal.
- GitHub - used to store the project's code and images in the repository.
- GitHub Pages - used to deploy the website.
- Icon-Icons - used to provide the favicon.
- Marked Library - used to convert external API's response in markdown format to HTML.
- Moon Phase API - external API used as a provider of comprehensive astronomical data.
- Tiny.png - used to reduce the size of the image files.
- Visual Studio Code - used as a code editor.
For all testing, please refer to the TESTING.md file.
- Log in to your GitHub account and locate the repository you would like to deploy.
- Navigate to the "Settings" tab at the top of your selected repository.
- Select "Pages" from the menu on the left-hand side of the screen.
- Make sure the "Select" dropdown menu shows "Deploy from a branch".
- From the "Branch" dropdown menu select "Main" and click "Save".
- The page will automatically refresh and display the link to your deployed website.
By forking the repository, you make a copy of the original repository on your GitHub account to view or to make changes to, without affecting the original repository.
- Log in to your GitHub account and locate the repository you would like to fork.
- At the top of the repository on the right-hand side of the screen, locate the "Fork" button.
- After clicking on it, you should have your own copy of the original repository in your GitHub account.
Making a clone is basically making a copy of the selected repository.
- Log in to your GitHub account and locate the repository you would like to clone.
- Click on the "Code" button just under the repository name.
- Copy the HTTPS link from the website address bar.
- Open a GitBash terminal and locate the directory where you want to place the clone.
- Type 'git clone' and then paste the URL you copied earlier.
- Press enter. Then your local clone will be created.
-
Code for the outline effect used on multiple occasions across the CSS stylesheet was taken from Stack Overflow and was slightly edited to fit the project's needs.
-
Code for a sticky footer, that always stays on the bottom of the page regardless of how little content is on the page, was taken from Materialize's website.
-
Code for Get Date methods, letting me customise the date output, was taken from W3Schools.
-
Code for calling external API was taken from Moon Phase API's documentation.
-
Code for converting markdown response into HTML output was taken from documentation for Marked Library.
-
Code for image carousel from gallery.js file was created following Log Rocket Fronend Analytics's tutorial on how to build an image carousel from scratch using vanilla JavaScript.
-
Bootstrap v5.3 - Bootstrap's
container-fluidwas used throughout the project to make the site responsive. Bootstrap'snavbarwas used for the responsive navigation header.
- NASA Science Space Place - the information contained on the Moon Cycle Explained page.
- Moon Connection Website - the information contained on the Moon Cycle Explained page.
- Space.com - the information contained on the Moon Cycle Explained page.
- Astronomical Applications Department of the U.S. Naval Observatory - the information contained on the Moon Cycle Explained page.
- NASA Science Earth's Moon - the information contained on the FAQ page.
- Love the Night Sky - the information contained on the FAQ page.
| Image | Source |
|---|---|
 |
Photo by Des Récits on Unsplash |
        |
Photos by Maxwell Fury on Pexels. |
 |
NASA's Solar System Exploration Website, credit: Bill Dunford |
 |
NASA's Earth's Moon Website, credit: NASA’s Scientific Visualization Studio |
- Iuliia Konovalova (my Code Institute mentor) - for sharing her impressive knowledge, for her guidance, constructive feedback and for invaluable help with debugging my JavaScript code.
- Callum Jones (Newcastle College cohort facilitator) - for his helpful advice and continuous encouragement throughout the creation of my website.
- Code Institute Slack Community - for the moral support; it kept me going during periods of self doubt and imposter syndrome.