This is page shows the 4 cities I have lived where I have called my home. This is a personal side-project built to practice front-end and UI skills. I use Vanilla JavaScript and a touch of jQuery.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- View the current time in 2 different time-zone, as well as the current weather in that specific city
- Rearrange the pins by clicking and dragging on the fingerprint icon
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
- jQuery
I was under the impression that one could get the time using the Time.now method, however in Vanilla JavaScript it is a bit more complicated than that.
I still haven't learnt how to make my code DRY-er. I have a feeling that
I was impressed to see that the drag-and-drop UX is not as complex as one would imagine and relied heavily on HTML more than anything else.
<div class="boxes" id="draggable" ondrop="drop(event)" ondragover="allowDrop(event)">
I still need to perfect the following details:
- live reload
- unix time converter
- only allow one drag per click.
I would also like to add a an if statement to enable some icons showing weather display.
- Stackoverflow - This helped me try out jQuery and understand that all the boxes needed a specific id.
- Website - Krista Calleja