scrabill / how-many-days-until-halloween

A vanilla Javascript countdown to the spookiest day of the year.

How Many Days Until Halloween

A vanilla Javascript countdown to the spookiest day of the year.

It can be seen online at halloweenti.me if you dare!

Opting Out of Hacktoberfest

I made the decision not to opt this project into Hacktoberfest for 2020.

The reasons why can be found in my blog post Opting Out Of Hacktoberfest.

how-many-days-until-halloween's Issues

Enhancement: Revise JS so that only 10/31 counts as Halloween

Currently, the logic is set up so the Halloween message will display if it is the 31st day in the month, regardless of what month it is.

Some pseudocode ideas to get you started

• Get current month
• If month is not October, then, do not display Halloween message
• If month is October, continue with existing logic

Adding icon logo in title bar

Why not add an icon logo in the title bar ?

Documentation: Add link to contributor graph to the contributer-list.md

In the first few weeks of this project, I did not have a contributer-list.md

To save a little time from having to go back and adding early contributor manually, we can cheat a bit and add a link to the insights page for this repository.

For this issue, I'd suggest adding something like this to the bottom of the contributer-list.md file:

[And many more!](https://github.com/scrabill/how-many-days-until-halloween/graphs/contributors)

Documentation: Remove or Update "New features" link from CONTRIBUTING.md

This request is for

[x] Beginners
[x] First Timers
[x] Non-Coders (Markdown knowledge needed)

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[X] Documentation issue or request

Current behavior

Currently, the New features link on CONTRIBUTING.md (line 32, as of this writing) links to the very first issue I created last year. This doesn't work anymore as that issue has been closed (it was made for the 2017 version / branch) and there are no uses of a tag named "New Features"

Expected behavior

I think this link should either be removed entirely or replaced with a link to a different issue label

For example,

Instead of this

[New features](https://github.com/scrabill/how-many-days-until-halloween/issues/1)

Something like this

[Discussion](https://github.com/scrabill/how-many-days-until-halloween/issues?q=is%3Aissue+is%3Aopen+label%3Adiscussion)

Other examples would be to link to the Hacktoberfest tag

Important

Before you make a pull request, please comment on issue that you would like to work on it. That way, we can avoid duplicate PRs and a first-timer can work on this.

Documentation: Remove "fonts folder" link from CONTRIBUTING.md

This request is for

[x] Beginners
[x] First Timers
[x] Non-Coders (Markdown knowledge needed)

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Documentation issue or request

Current behavior

The Fonts folder link in CONTRIBUTING.md (line 61 as of this writing) gives a 404 error, since the folder does not currently exist.

Expected behavior

Remove the link so there is no 404 error :)

Important

Before you make a pull request, please comment on the issue that you would like to work on it. That way, we can avoid duplicate PRs and a first-timer can work on this.

Enhancement: Improve Rendering for Mobile Devices

I'm submitting a...

[ ] Bug report  
[x ] Feature request
[ ] Documentation issue or request

Current behavior

On smaller screens (simulated in a browser window) the spooky text is really small and everything seems squashed at the top of the screen. The default CSS can be tweaked so that there is a better visual for anyone viewing this on a mobile device.

For example

Expected behavior

Larger text on mobile. Assets take up more of the mobile device real estate

If this is a feature request please fill out the following:

As a (user, developer, contributor, etc): User
I want: Better read the text on screen
So that: I know how many days there are until Halloween 🙃

Environment

Browser:
- [ ] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

URl with problems

The url http://shannoncrabill.com/how-many-days-until-halloween/ is a problem.

Documentation: Improve CONTRIBUTING.md

I copied last year CONTRIBUTION.md document, which can be improved on.

It would be nice to include dependencies, exact steps on how to fork this repo, etc to make this more user-friendly.

I'm open to ideas on this one.

Enhancement: Add Halloween Costume Ideas

@stufinn added a feature that will randomly generate a new Halloween custom idea.

Adding a new costume idea is a very easy addition that is beginner or first-timer friendly.

• Open scripts.js and look for // Script for Random Costume Picker
• Add an object to the costumes array with the costume name and a link to an image (or tutorial) in the following format

["Octocat", "https://twitter.com/ryanlanciaux/status/659415196058918912"],

• Please keep your suggested customs PG / SFW
• Include a source for your custom in your pull request if you can
• Limit costume additions to three to help keep the array from getting too long

Reach out if you have a question

Documentation: Check spelling on CONTRIBUTING.md

There are a few typos and misspellings on the CONTRIBUTING.md page.

I'm reserving this issue for any first-timers or code newbies who want to practice using git and making pull requests.

If you need help comment below and I'll help you to get started!

Documentation: Refactor styles.css

Our styles.css file is getting a little jumbled. Adding some section headers for common groups of CSS (fonts, links, mobile styles, etc) will help to keep this file easy to read, add to and maintain.

Delete rouge ":" file

Not sure how this got here, but it can be deleted.

Super easy issues. Great for first-timers :)

Documentation: Add contributor page

It may be nice to have a page where all contributors to this repo can add include their username and link to their Github page.

If someone wants to tackle this, here is an example

• HacktoberFest-Census

If you are a first-time git contributor, message me and I can help you get this set up. Feel free to ask questions below.

Can't push the update

Please suggest the steps!

Documentation: Create CHANGELOG.md

Since this project was posted on Github there have been several updates.

Instead of cluttering up the README.md file, the updates may be better suited in a CHANGELOG.md file. This way, updates with added features, etc, can be seen in one place. The template for the changelog can include:

• Date
• List of features added (or removed)
• Screenshot to show changes (optional)

Here's an idea of what the changelog can look like: http://keepachangelog.com/en/1.0.0/

Feel free to ask questions below before starting a pull request

Enhancement: Add Fork me on Github Ribbon OR Github Corner

This request is for

[x] Beginners
[x] First Timers
[x] Intermediate (If you want to do any customizations)
[] Non-Coders (Markdown knowledge needed)
[x] Coders (Some HTML knowledge may be needed)

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

I've been wondering where people were getting those cool Github Corner or Fork me on Github ribbons. Now that I've found them, I think it would be nice to add one or the other (or both?) to the How Many Days Until Halloween Page

Steps

1. Pick a badge option (I'm open to suggestions on this)
2. Add it to the site
3. Also, add a reference to it in the technologies section of the README.md document

Enhancement: Randomize <h2> text on page load

This one is a bit of a challenge. It'll involve more knowledge of Javascript and the DOM.

The text on the <h2> tag is currently static. Some randomly generated "Spooky" messaging may be fun.

• Fork this repo
• Download all files

Here's some pseudo code to get you started

• Create a list of possible text
• Randomly generate a number equal to the number of items in the list
• Pick an item from the list that corresponds to that number
• Target the <h2> element
• Insert random text into <h2> element

For any beginners who want to give this a try, I'd be happy to walk thru the logic with you

For reference

• Quote Generator

Documentation: Add PULL_REQUEST_TEMPLATE

How-to can be found here:

• https://help.github.com/articles/creating-a-pull-request-template-for-your-repository/

I'm open to thoughts on how to best structure this. To start, I think the pull request template should have the following:

• Reference to the issue, if it applies: https://help.github.com/articles/basic-writing-and-formatting-syntax/#referencing-issues-and-pull-requests
• A line or two about the proposed changes
• A prompt to add yourself to the Contributor list after your pull request has been merged

Documentation: List of technologies used in project

Based off an idea from @nikoheikkila and myself from #166

As cool things are added to this project, we should document what they are for future reference.

Here's what I'm thinking.

• Let's start a new header on README for Technologies.
• Under that, we can list each technology used with a link to their documentation, site, repo, etc
• Optional, a short description explaining what the technology is and how it was used.
• Optional, include a reference to this in the contributing doc, pull request template, etc
• Optional, include a code sample for so that copy and pasting and adding new links is easy peasy

This is an easy issue I'd like to reserve for an eager first timer

Comment below if you have questions and before starting work on this issue

Enhancement: Adjust font sizes

The fonts are looking a little small, especially the <p>. On mobile, it looks fine, but on desktop, it could use some adjusting (thing bigger, SCARIER!)

Attached is what it looks like on my 13in Macbook

Documentation: Update CONTRIBUTE.md

Include the following

• How to contribute
• What is currently there / how it works
• Links to resources

Fix: Correct Github usernames on Contributer-list.md

A few of links in the Contributor List are broken and do not correctly link to the contributor's Github profiles.

Adding https:// in front of all URLs should fix the issue.

For example, this:
[Bill McClung](github.com/cfgauss)

Should be something like this:
[Bill McClung](https://github.com/cfgauss)

First timers welcome! Ask questions below

Enhancement: Design a Cool Header Image for README

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

If this is a feature request please fill out the following:

As a (user, developer, contributor, etc): User
I want: To see a spiffy, engaging banner image on README
So that: It's not as much of a wall of text

Additional Information

I like what freeCodeCamp has, maybe we can have something similar, but spooky. Even some designed text that minics what the website might look like may be cool. Last year, I had gif to fill the space.

Discussion: Add LICENSE.md

Looking at the Community Profile for this repo made me realize that I did not set up a license file for this project.

As stated in our CODE_OF_CONDUCT.md "Everyone is Welcome" to contribute to this project.

That said, I'm not sure which license type is best suited for this project or if one is needed at all.

Here is Github's documentation on the subject:

• https://help.github.com/articles/adding-a-license-to-a-repository/
• https://opensource.guide/legal/#which-open-source-license-is-appropriate-for-my-project
• https://choosealicense.com/

Thoughts?

Enhancement: Add more variables to splashText array

On page load, a randomly generated string is displayed in the <h2> tag of index.html. We have several spooky lines of text, but there is always room for more!

To add to the array, do the following:

1. Fork the repo
2. Download all files
3. Open spookymain.js
4. Starting at line 21 you will see a variable array named splashText
5. Within the array, add your spooky string to with the following format
   "Your Spooky Text Here",
6. Note: The last item in the array does not need a comma
7. Commit your changes
8. Open a pull request

Beginners are more than welcome! Ask your questions below!

Enhancement: Migrate the facts and costumes array to different javascript files

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

If this is a feature request please fill out the following:

As a contributor:
I want to take these two arrays into seperate files
So that the code is more readable.

I would put them in seperate files and call them in script.js as ES6 modules (no need to add dependencies, especially if you don't officially support IE11)

Update Mobile Styling

Because of the font-size and length of the word Halloween the current design does not scale well on smaller screens.

Some Ideas

• Add a media query so that the font size is scaled down appropriately on smaller screens.

Documentation: PULL_REQUEST_TEMPLATE.md

The purpose of a pull request template is to guide Githubbers in providing detailed information when opening a pull request. A template can help answer commonly asked questions, provide guidance and help to maintain a quality codebase.

The main information I would like the pull request template to include is as follows

• Descriptive name. Your pull request should have a descriptive name.

• Has this feature already been added? Sometimes, duplicate pull requests happen. It's worth checking the pull requests and issue page to see if the change you are requesting has already been made.

• Description of the change being made. It's helpful to outline what changes were made to which files so that I have an idea of what will be involved in reviewing the code and—hopefully—merging it into the codebase.

• Issue number. If your pull request is related to a specific issue, included it in your description and or pull request name. It helps to keep changes linked. Any issues that are referenced in pull requests become part of the discussion history of the issue.

Here is an example of a pull request template
https://github.com/freeCodeCamp/freeCodeCamp/blob/master/.github/PULL_REQUEST_TEMPLATE.md

Ours does not need to be that detailed but think about what information is helpful for both the contributor and maintainer to know.

Make background color the same over whole page

I'm submitting a...

[ ] Bug report  
[X] Feature request/enhancement
[ ] Documentation issue or request

Current behavior

Background color of body element is slightly different from the div with class jumbotron.

Expected behavior

If background color of body and jumbotron are the same, the site may look more visually appealing.

Minimal reproduction of the problem with instructions

Visible when viewed in browser.

If this is a feature request please fill out the following:

As a user:
I want: The site to have the same background color throughout.
So that: The site may look even better!

## Environment

Browser:
- [X] Chrome (desktop) version 69.0
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 62.0
- [X] Safari (desktop) version 12.0
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

I will be submitting a PR for this shortly!

Update contributing document

What I currently have on the README is very quickly going to get out of hand. I would like to have an in-depth contributing document to help contributors get started with quality submissions.

Documentation: CHANGELOG.md

We need a changelog. Last year, I did a manual changelog to document what features are added over time. Recently discovered that there are ways to auto-generate changelogs based on your issues and commits.

This is the example I found: https://github.com/github-changelog-generator/github-changelog-generator

Is someone is interested in giving this a try, post here and let's chat

BugFix: Fix a typography error in the website's footer

I'm submitting a...

[X] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

The website footer contains a typography error

Expected behavior

The text should be Bootstrap

Environment

Browser:
- [X] Chrome (desktop) version 71
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Enhancement: Design a better looking page

This page isn't nearly spooky enough! I'm open to ideas on a better layout, design, colors, etc.

Preferably, I'd like to keep using the Bootstrap framework.

Documentation: Comment all of the things!

The code for this project has changed dramatically since I first pushed it to Github last week.

But it's also not 100% clear on what does what (I'm looking at you script.js)

This is a bigger issue that may need to be broken into chunks.

I'd like to see commenting around functions outlining what they do, what does what to (hopefully) avoid duplicate effort and merge errors in the future.

Add License

MIT license is a good one.

The Website Isn't Up-To-Date

I'm submitting a...

[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

The recent costume ideas and facts aren't implemented on the website.

Expected behavior

The recent costume ideas and facts should be implemented on the website.

Minimal reproduction of the problem with instructions

If this is a feature request please fill out the following:

As a (user, developer, contributor, etc):
I want:
So that:

Environment

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Add feature: Random costume generator

I'm submitting a...

[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request

If this is a feature request please fill out the following:

As a user:

I want: Assistance with DIY Halloween costume ideas. 
So that: When I click a button, I get a random costume idea with a url to a sample image.

Motivation:

Visitors to the site may, like myself, may have trouble figuring out what they should dress up as for Halloween. Random costume suggestions may be helpful for the users to decide how they should dress up. For those visitors who already know what they want to wear, the feature can provide some entertainment value.

Environment

Browser:
- [X] Chrome (desktop) version 69.0
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox desktop 62.0.3 version XX
- [X] Safari (desktop) version 12.0
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Enhancement: Add link to github repo to index.html

Similar to the footnote on this page add a link to the Github repo to the index.html page

1. Fork the repo
2. Download all files
3. Open Index.html
4. Add the following (or something similar) to the end of the

   starting with "Powered by.."

Fork this on <a href="https://github.com/scrabill/how-many-days-until-halloween">Github</a>

6. Commit change
7. Open a pull request

Questions can be asked here

Documentation: Move 10/18 & 10/19 updates from README.md to CHANGELOG.md

#52 will need to be completed first.

Move the 10/18 and 10/19 updates to CHANGELOG.md to keep README.md from getting too cluttered.

Fix: Broken CSS declaration block

I was wondering why a recent addition to the styles.css wasn't rendering.

While resolving merge conflicts, I accidentally deleted the second to the last closing curly bracket.

What I have is this:

#splashText {
	font-size: 40px;

.text-large {
	font-size: 20px !important;
}

And it should be this:

#splashText {
	font-size: 40px;
}
.text-large {
	font-size: 20px !important;
}

Simple fix. Perfect for a beginner or first timer

Enhancement: Add sheilds to README.md

I'd like to add some shields to make some information easier to spot on the README.md.

Looking at what is available at Sheilds.io, these are the shields that I think are best suited for this project.

• GitHub commit activity the past week, 4 weeks, year
  * GitHub last commit

freeCodeCamp is a good example of a repo that uses some custom and pre-built shields

Open to discussion and suggestions for additional or custom shields.

Documentation: Add Table of Contents to README.md

It'll be helpful to have easy to access links to commonly referenced files on the homepage

Under the about paragraph, add links to the following pages (or any others that are relevent):

• CHANGELOG.md
• CODE_OF_CONDUCT.md
• CONTRIBUTING.md

Blurbs describing each page can be added too

Enhancement: Add a Halloween fact

@brandonstinson added a list of random Halloween facts that generate on page load.

The facts (strings) are stored in a facts array. Adding a new item to this array is an easy, first-timer-friendly pull request.

• Within script.js, look for the comment // Array of Halloween facts.
• Add a new fact to the facts array (try to keep them 1-2 lines long)
• Open a pull request with your new fact(s) and I'll get them added in.

Reach out if you have any questions.

Edit: Wow, there's been an explosion of pull requests relating to this template in the past 12 hours! To keep this array and JS file from getting out of hand, please limit your facts to no more than 3 lines total.

Enhancement: Add link to Contributors-list.md to README.md

Simple edit for anyone looking to practice creating pull requests.

1. Fork the repo
2. Download all files
3. Open README.md
4. Add the following (or something similar) to README.md

<a href="https://github.com/scrabill/how-many-days-until-halloween/blob/master/contributer-list.md">Contributors List</a>

5. Commit change
6. Open a pull request

Questions can be asked here

Clarify contributing instructions

Related to #360, I could use help coming up with clear contribution language. Perhaps, something I can use year after year.

What I would like it to include

• How to close this repo, including which branch to focus on (the master branch)
• How to make quality contributions that are in line with the spirit of Hacktoberfest and this project
• Best practices for naming branches, refactoring, etc.
• How to avoid duplicate PRs, 'taking' someone else's idea, saving first-timers-only contributions for first-timers, etc

I am open to input on this and one person does not have to tackle all of what I've included above. Chime in and let's come up with something.

Chime in on this

Bug: Broken link in CONTRIBUTING.md

About halfway down, the Hacktoberfest link is broken.

This is what is there currently

`
Make sure you are registered for the [HacktoberFest] before you start!(https://hacktoberfest.digitalocean.com/)

`

Bug: Countdown logic is off by 1

This request is for
[x] Beginners (maybe, this will take some debugging)
[x] First Timers
[x] Coders

I'm submitting a...

[X] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Today is Wednesday, October 24. Halloween is next Wednesday, which should be 7 days away. Currently, the countdown timer is saying it is 6 days away. 31-24 should be 7 days away.

Expected behavior

Update logic to correctly count the days left until the 31st

Minimal reproduction of the problem with instructions

Enhancement: Add link to CONTRIBUTING.md to README.md

Simple edit for anyone looking to practice creating pull requests.

1. Fork the repo
2. Download all files
3. Open README.md
4. Add the following (or something similar) to README.md

<a href="https://github.com/scrabill/how-many-days-until-halloween/blob/master/CONTRIBUTING.md">Contributing Guidelines</a>

5. Commit change
6. Open a pull request

Questions can be asked here

Documentation: Create CODE_OF_CONDUCT.md

This project is currently lacking one.

Here is github's open source documentation on the topic:

• https://opensource.guide/code-of-conduct/

And here are other code of conduct templates/resources to reference

• http://todogroup.org/opencodeofconduct/
• https://www.contributor-covenant.org/

Overall, the code of content should hit on the following points:

• Beginners are welcome
• This is a safe place to share ideas, comments, code, etc.
• Don't be an ass

This has the potential to be a big project with some back and forth, so please, start the convo below.

Documentation: ISSUE_TEMPLATE.md

The purpose of an issue template is to guide Githubbers in providing detailed information when creating a new issue.

The main information I would like this issue template to include is as follows

• Description of the feature, request or problem. Be specific. If it is a bug, what happened? What were you expecting to happen? If you are looking to make an improvement, outline what you are suggesting and how it might be achieved. You do not know how exactly to solve a problem or how to implement a new feature, but an idea can help to get the information started.

Here is an example of an issue template
https://github.com/thepracticaldev/dev.to/blob/master/.github/ISSUE_TEMPLATE.md

Ours does not need to be that detailed but think about what information you would like to know as a maintainer or would be helpful for contributors to know.