Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/janetmndz/teatime-v2
🍵⌛✨ a more updated version of my teatime project
https://github.com/janetmndz/teatime-v2
Last synced: about 1 month ago
JSON representation
🍵⌛✨ a more updated version of my teatime project
- Host: GitHub
- URL: https://github.com/janetmndz/teatime-v2
- Owner: janetmndz
- Created: 2018-09-20T20:38:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-30T23:22:42.000Z (about 6 years ago)
- Last Synced: 2024-08-04T04:01:02.344Z (5 months ago)
- Language: CSS
- Homepage: https://janetmndz.github.io/teatime-v2/
- Size: 166 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-notfancyappchallenge - Tea Timer - A timer for the recommneded tea brewing times. By [Janet Mendez](https://twitter.com/_janetmendez) (Uncategorized / Uncategorized)
README
# Teatime version 2
A revamped version of my Teatime project. The original can be found [here](https://github.com/janetmndz/teatime) and an even **earlier** version [here](https://codepen.io/janmez/pen/XJgRRV)
# Notes
Teatime was one of the first projects I made when I started learning the basics of CSS and Javascript. I wanted to remake this now that I have more experience with them
## **Final Version can be seen here:** [Live Version](https://janetmndz.github.io/teatime-v2/) | [CodePen](https://codepen.io/janmez/full/XxJvwY/)
**Built using**
- Vanilla JS
- Javascript Date Object
- Sass
# Changes and Updates
## **1. CSS => Sass**
One of the major changes I have made was using Sass to organize and branch out my CSS code.
**Sass folder layout**
```
sass
├── _header.sass
├── _mediaqueries.sass
├── _timer.sass
└── styles.sass
```
**styles.sass**
```scss
// ...
@import "mediaqueries"
@import "header"
@import "timer"
```
With Sass, it is easier to separate stylesheets and import them into one single master stylesheet. This is a major improvement from the earlier versions of this project where I just wrote everything in one single style sheet, making it a disorganized mess.
## **2. jQuery => vanillaJS**
Another major change I made was to write the entire interactivity in vanilla JS to save the time it takes to load then use a framework for such a small project. The first time I made this tea timer I wasn't confident in my JS skills so I opted to use a framework. After a year I am more comfortable using vanilla JS and functional programming.
In the earlier version of the timer feature, I made a separate array in my JS to hold the tea time information and had to find a match to the array's `name` key from the HTML `id` tag selected.
**HTML**
```html
```
**Javascript / jQuery**
```javascript
/*Tea Time Version 1*/
var tealist = [
{'name':'white','time':1},
{'name':'green','time':2},
{'name':'black','time':3},
{'name':'darjeeling','time':3},
{'name':'oolong','time':3},
{'name':'prueh','time':4},
{'name':'herbal','time':5},
{'name':'roobios','time':5},
{'name':'mate','time':6} ];
$('.tea-selection').click(function(){
teatime_startup($(this).attr('id'));
//...
});
function teatime_startup (tea_id) {
//...
var result = $.grep(tealist,function(e){
return e.name == tea_id;
});
//...
}
```
While this technically works just fine, it is pretty redundant code. So, in an attempt to lessen the hoops to jump through, in my second version I used a `data-` attribute in my HTML to make it simpler to run my JS script.
**HTML**
```html
```
**Javascript**
```javascript
/*Tea Time Version 2*/
const teas = document.querySelectorAll(".tea_item");
function clicked(){
//...
setTimer(this.dataset.time)
}
//...
teas.forEach(tea => tea.addEventListener("click", clicked));
```
As you can see, using this method requires less code and traversing compared to the previous version. I didn't need to rely on jQuery for this simple aspect.
## **3. Accessibility Improvements**
**Version 1**
**Version 2**
Accessibility is an aspect I often overlook when making projects. Some ways I can improve accessibility is fixing the hierarchy of my HTML, making sure my color contrast ratio is enough and **not** removing the default outline styles.
**HTML**
```HTML
```
**CSS**
```scss
*:focus
outline: 2px solid #57A773
```
**Colorable results**
# Resources
- [Sass Basics](http://sass-lang.com/guide)
- [Exploring the Javascript Date Object](https://alligator.io/js/date-object/)
- [Lighthouse for Chrome](https://developers.google.com/web/tools/lighthouse/)
- [Colorable by jxnblk](https://github.com/jxnblk/colorable)