Completing 30 vanilla JS projects in 30 days — part 1
Inspired by the Wes Bos course JavaScript30 to hone my vanilla JavaScript skills, but wanting to be free to build my own ideas in the order I feel most appropriate, I have embarked on a personal challenge to build 30 web applications in vanilla JavaScript over a 30-day period. This is what I built in the first week:
Day 1: “Are You Hungry Yet?” — https://ruthenewman.github.io/AreYouHungryYet/
First of all, I built an image gallery with rotating images, and in true millennial 21st-century style, the gallery is made up of photographs of food. It only required a small amount of JavaScript in addition to the HTML & CSS, with the rotating image function the key part:
function changeImage() {
document.slide.src = images[i];
if (i < images.length -1) {
i++;
} else {
i = 0;
}I called a setTimeout function and used the changeImage function as a callback every 3 seconds (or 3 thousand milliseconds).
The Github repo with all the files is at https://github.com/RuthENewman/AreYouHungryYet
Day 2: “Move The Dots” — https://ruthenewman.github.io/MoveTheDots/
This project practiced another basic animation in the browser made with CSS and JavaScript, dragging and dropping.
For the design I took inspiration from the Japanese artist Yayoi Kusama’s polka dot obsession work, and the app is a range of white polka dots on a red background, with one of the dots containing an image of black polka dots on a red background. This image can be dragged from the initial dot and dropped into any other dot on the page.
The code involved adding event listeners to the white dots with callback functions that added to the class list for the dot concerned, changing the CSS for the given dot.
The Github repo can be found at: https://github.com/RuthENewman/MoveTheDots
Day 3: “Meditate With Einaudi” — https://ruthenewman.github.io/MeditateWithEinaudi/
The third project was a meditation app, and for this project I couldn’t think of any more soothing music than the work of the contemporary Italian composer Ludovico Einaudi (he’s on tour this year). The app launches a video of waves (appropriate for his work ‘Le Onde’) or on switching to ‘Una mattina’, of a sun rising in the morning). Clicking on different buttons changes the time frame from between 1 minute and 1 hour.
Github repo at — https://github.com/RuthENewman/MeditateWithEinaudi
Day 4: “Is It Raining in Manchester?” — https://ruthenewman.github.io/IsItRainingInManchester/
For this challenge I am constantly looking for ideas for vanilla JavaScript projects that can be confidently completed within a single day. One repeat suggestion is a weather app, and I am keen to include some projects which use data from external APIs, so I figured this was an obvious project to attempt.
However, I wanted to make this slightly more interesting and thought to adapt a usual weather app to solely check the weather in my hometown of Manchester, known across the UK for its apparently rainy weather as much as its football teams. I know from experience that the rainy weather is grossly exaggerated, and it’s not always raining. So this app gives the weather at any given moment in Manchester, as well as for the minute and the hour specifically.
I made a get request to the dark sky API for Manchester’s coordinates and used a function I built to convert from Fahrenheit to Celsius.
fetch(manchesterApi)
.then(response => response.json())
.then(data => {
const {icon} = data.currently;
temperatureDegree.textContent = toCelsius(data.currently.temperature);
temperatureDescription.textContent = data.currently.summary;
hourlyWeatherDescription.textContent = data.hourly.summary;
minutelyWeatherDescription.textContent = data.minutely.summary;
setIcons(icon, document.querySelector('.icon'));
}) function toCelsius(fahrenheit) {
return parseFloat((fahrenheit - 32) / 1.8000).toFixed(1);
}
And here’s the final application:
Github repo at — https://github.com/RuthENewman/IsItRainingInManchester
Day 5: “Emoji Memory Game” — https://ruthenewman.github.io/EmojiMemoryGame/
Another common JavaScript project appears to be memory games, and I wanted a design that would be both fun and simple. I went for emojis, and whilst choosing from popular and favourite emojis proved to be challenging, I was happy with the end result.
<div class="memory-card" data-emoji="loudlycrying">
<img class="front-face" src="./images/loudlycrying.png" alt="Loudly crying emoji" />
<img class="back-face" src="./images/smilelaugh.png" alt="Smiling and laughing emoji" />
</div>
<div class="memory-card" data-emoji="womansaysno">
<img class="front-face" src="./images/womansaysno.png" alt="Woman says no emoji" />
<img class="back-face" src="./images/smilelaugh.png" alt="Smiling and laughing emoji" />
</div>
<div class="memory-card" data-emoji="sleeping">
<img class="front-face" src="./images/sleeping.png" alt="Sleeping emoji" />
<img class="back-face" src="./images/smilelaugh.png" alt="Smiling and laughing emoji" />
</div>The HTML should give the game away for any coders who know to inspect the dev tools, but I used a shuffle function in the Javascript to add an order class to the CSS, meaning that the card order was randomised.
Github repo — https://github.com/RuthENewman/EmojiMemoryGame
Day 6: “Wildlife Photographer of the Year Flex Panels” — https://ruthenewman.github.io/WildlifePhotographerFlexPanels/
Last year I visited the Natural History Musuem’s Wildlife Photographer of the Year exhibit and was blown away by how the exhibition was curated, and the quality of the photographs nominated and awarded. I will be going again to this year’s exhibit before it finishes in June.
To mark my appreciation, I used photos from the exhibition over recent years in the design of a flex panels application that expands and narrows on response to user clicks.
Similar to my Day 1 project, whilst a different animation, this required adding event listeners to the panels that on a user click toggled classes with CSS styles.
Github repo — https://github.com/RuthENewman/WildlifePhotographerFlexPanels
Day 7: “Beats Builder” — https://ruthenewman.github.io/BeatsBuilder/
Another common JavaScript project (including day 1 of the Wes Bos course, although taking a different approach to me), is a drum kit website. I had already used audio for the mediation app, and for this I wanted rather to import several short audio files into my html file which I could add an onclick method for.
<audio src="./drums/kick-acoustic01.wav" autostart="false" data-id="kick-acoustic"></audio>
<audio src="./drums/snare-acoustic01.wav" autostart="false" data-id="snare-acoustic"></audio> And later on the page (I included JavaScript in script tags in the HTML for this project):
<div class="drum" data-id="kick-acoustic" onclick="playSample('kick-acoustic')">
<p>Kick (acoustic)</p>
<img src="./images/kickdrum.png" alt="kick"/>
</div> <div class="drum" data-id="snare-acoustic" onclick="playSample('snare-acoustic')">
<p>Snare (acoustic)</p>
<img src="./images/snare.jpg" alt="snare"/>
</div>
Github repo — https://github.com/RuthENewman/BeatsBuilder
That was the first 7 projects of this 30 project journey! Only 23 more to go after which I’ll reflect overall what I’ve learnt.
I have a handful of remaining ideas but need a lot more to reach all 30, so any suggestions or relevant resources are as such extremely welcome! I will probably make a few more games and am definitely looking to use more public APIs in the next few projects.
I am updating a single Read.me file on Github with links to all my projects as I go: https://github.com/RuthENewman/30vanillaJSprojects
