Your zodiac signs around the world.... You might think that if you are a water bearer on the Gregorian calendar, you would be a water bearer on the Hebrew calendar as well. Not necessarily. This app will explore how different calendars around the world categorize you according to your date of birth.
Table of Contents
In this ReadMe Why this app? installation (tbd) Front-end Portfolio Project Accessibility Credits Why this app?
As much as I enjoy mobile games, I admit that time spent on them can easily get out of hand. I wanted to create something both fun and finite. In later iterations, zodiac signs from other places around the world will be added. Additionally, more visuals for each sign could change which may prompt people to come back to see what everything looks like. I don't want users to spend more than one or two minutes a day here.
Front-end Portfolio Project
WhatsMySigns is being created for an assignment for my fellowship at Pursuit Transformation Company. The fellowship is a 12-month, Google-funded software engineering fellowship with a 9% acceptance rate. Project-based curriculum provides hands-on experience with JavaScript, HTML, CSS, Node, Express, React/Redux, PostgreSQL, APIs, Git, Data Structures, Algorithms, sprints, Agile, code reviews, and pair programming.
This project will:
- Have a deployed front-end application.
- Allow for user interaction through button clicks and form inputs.
- Make requests to an external API.
- Have a theme and unique product design.
Overall requirements
- Create a GitHub repository and upload your code to it.
- Your GitHub repository should have a readme.md file with setup instructions for your application.
- Your project should have a coherent theme and narrative.
- Your project should be deployed to the web.
- Your application must have at least two .html files that are connected.
- Your application must include one or more .css files that are linked to one or more pages.
- Your application must include one or more .js files that are linked to one or more pages.
- You must make use of CSS Grid to organize your content on at least one of your pages.
- You must use the :hover selector in at least one CSS rule.
- You must use an HTML form on at least one of your pages.
- All of your pages must have some visual changes that occur when the screen is a different size.
Front-end interactivity requirements
- On page load, an external API request must be made. Upon receiving a successful response, something visual on the page should change.
- When a form is submitted on your page, JavaScript should prevent the default behavior of that form and some other effect should take place.
- There should be at least one way to incorrectly submit the form. When the form is incorrectly submitted, an error message should be added to the DOM for the user.
- Based on a button click or form submission, an external API request must be made. Upon receiving a successful response, something visual on the page should change.
There are also interview requirements, which are outside the scope of this README.
Accessibility
Keeping the following in mind: Vision - Hearing - Mobility - Literacy
My main goal is to make the app accessible to as many users as possible, but secondary goals include being on compliance with the American with Disabilities Act, the Canadian Standard on Web Accessibility, and guidelines stemming from the EU Web Accessibility Directive, which are set to be enforcable by June 28, 2025.
In this case, I focused on color contrasting, appropriate labeling of navigation tags, and language.
Style guidelines were taken from the Human Interface Guideslines from Apple.
Credits
-How to Write an Awesome Readme, by Suraj Vishwakarma -Markdown Guide -HebCal Converter -Visual Studio Code -Color Contrast Checker -Chinese Year -mdn web docs_ at -Juan Feliz -npm Docs