Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aburraq/me-myrandomexercises

Welcome to my 30-day coding challenge! I like solving/coding exercises I see around, and I decided to share them for 30 days xx
https://github.com/aburraq/me-myrandomexercises

animation array css dom eventlisteners functions html javascript methods string styling

Last synced: 4 days ago
JSON representation

Welcome to my 30-day coding challenge! I like solving/coding exercises I see around, and I decided to share them for 30 days xx

Awesome Lists containing this project

README 

        
# Exercises

Welcome to my 30-day coding challenge! It all began with a single exercise that piqued my interest, and I couldn't resist the urge to keep going. What started as a 10-day challenge quickly evolved as I discovered more exciting exercises to tackle. Throughout this journey, I used nearly all the methods of arrays and strings in JavaScript, along with many other utilities. Coding while listening to music has become one of my favorite pastimes, pushing me to extend this challenge further. Here, you'll find the results of my 30-day coding adventure. If I had more time, I'd continue indefinitely! Stay tuned for my next challenge, where I'll be diving into React and Next.js.



## Exercise 1

I stumbled upon this awesome review page design via a link: [Interactive Rating Component](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI/hub). Working on it felt less like a chore and more like a journey filled with coding adventures.



## Exercise 2

I came across a fascinating example that involved playing around with array mutators. It wasn't just about adding city names; it was about sorting, reversing, or even mixing them up! It all began with a simple need to organize data, hence the name "sorting-arrays." Using Bootstrap for layout and JavaScript for functionality made the experience even more enjoyable.



## Exercise 3

I couldn't resist coding a rock-paper-scissors game exercise. Being a game enthusiast, bringing it to life was an absolute joy. I sprinkled it with style and added some cool functionalities using array properties, making it quite an engaging project. You can check out the exercise instructions [here](https://www.theodinproject.com/lessons/foundations-rock-paper-scissors).



## Exercise 4

Today, I found myself without a specific exercise in mind, so I turned to Google for inspiration. What I ended up with was a classic temperature converter code. Adding my own touch of style to it was surprisingly satisfying.



## Exercise 5

Wanting to create something practical for others, I built a page visit counter. It keeps track of how many times a page is visited by storing visit data locally. Simple, yet quite handy!



## Exercise 6

Instead of just hunting for new exercises, I decided to invest my time in coding. So, I created a sleek digital clock. Implementing blinking columns using setInterval() was a fun challenge that I thoroughly enjoyed.



## Exercise 7

Feeling creative, I set out to create a fontawesome search page. Making it responsive and adaptable to different screen sizes was quite the puzzle, but I cracked it using media queries.



## Exercise 8

Delving into dynamic table manipulation, I crafted a tool that lets users add, update, or remove entries effortlessly. By combining HTML, CSS (Bootstrap), and JavaScript, I created a seamless interaction experience for users.



## Exercise 9

To enhance user experience, I designed an offcanvas privacy policy prompt positioned at the bottom of the page. Users can accept or reject the policy, with their actions being stored locally for legal purposes.



## Exercise 10

For a significant milestone, I developed a comprehensive weather application. Just input a city name, and voila! You get weather forecasts at your fingertips. It was quite fulfilling to see it come together.



## Exercise 11

Recognizing the importance of planning and organization, I created a user-friendly day planner. It integrates seamlessly with local storage, making it super convenient for users to plan their days effectively.



## Exercise 12

Inspired by a project called Etch-e Sketch from the Odin Project, I decided to give it a go. Its unique visual appeal made it a delightful project to work on.



## Exercise 13

Building on a similar project I did in Java, I created a visually captivating quiz game. And yes, there's a surprise waiting for you at the end when you complete the quiz and hit the "Cheers" button.



## Exercise 14

Amidst life's hustle and bustle, we all need some downtime. So, I came up with a boredom-busting app. Just generate a random activity or use advanced filters for tailor-made solutions. It's a great way to unwind!



## Exercise 15

I stumbled upon another free API and decided to put it to good use. This time, I incorporated more visuals, making it easier to find series and films. Plus, I implemented a technique to make searching smoother, which I believe would be quite helpful for websites.



## Exercise 16

Crafting a robust password generator was quite the challenge. Manipulating strings and ASCII values to create tough passwords required some serious tech finesse, but the end result was worth it.



## Exercise 17

Expanding on the concept of a to-do list, I created a notebook app for more comprehensive note-taking. With a reactive layout and data persistence through local storage, it's now easier to keep track of work and study details.



## Exercise 18

When a friend joked about getting old, I decided to prove them wrong by creating an age calculator. I added a touch of humor to the styling, indicating that age is just a number. Who knows, maybe I'll update the code when I hit that milestone myself!



## Exercise 19

Feeling inspired, I built a quote generator app. It offers motivational quotes from different authors or philosophers, perfect for uplifting spirits. And yes, you can share these quotes on social media too, spreading the positivity!



## Exercise 20

I created a QR code generator app. It helps users make QR codes for payments, contacts, or anything else they need. It's simple to use with options to customize colors and sizes. Perfect for quick sharing and organizing information.



## Exercise 21

I created a stopwatch to keep track of time. To be honest, it seemed me quite easy in the first glance. However, as setInterval() is an async function, i needed to arrange functions again and again to make the buttons working perfectly. Otherwise, the buttons were not working perfectly and more than one stopwatch is started when play button is clicked twice. Eventually, it really helps me to understand how async functions work in JS. 



## Exercise 22

I coded a push notification sending buttons. I used animation, transition and translation to make the UI experience softer and relaxing. 



## Exercise 23

I enjoy music a lot. In fact, I do music production as hobby. And decided to create spotify-like music player card. Also, I added range input to adjust the music for better UI experience.



## Exercise 24

I have seen this calculator app nearly everywhere. And, I decided to code it when I dont have many exercises left. Unlike tutorial videos and codes, I coded it as concise as possible by utilizing JS methods. By doing that, even if html file is changes, JS will react accordingly. Meaning that you can add up your new operator and numbers and it adapts to them.



## Exercise 25

I have coded a simple password hider. You can write your password in hidden way, and you can check whether you have any typo by pressing the unlock icon. Small part of a sign up/log in page.



## Exercise 26

I have coded a password strength checker. Basically, there are passwrods that can be cracked easily, the main idea is setting a password that can be protected from the malevolent third parties. I used regular expressions to achieve this. Additionally, I added password hider feature from my last exercise.



## Exercise 27

I have not been coding really complex exercises as I am super busy. However, this sunday, I decided to sit on a coffeeshop and code something with API. While checking what kind of app I can code, I stumbled upon [joke api](https://sv443.net/jokeapi/v2/). Some jokes are quite offensive, so blacklist filter is adviced for sensitive people. Also, you can choose amount of joke which has a different mapping than normal one.



## Exercise 28

I coded light theme to dark theme switcher. Increasing screen time may harm your eyes, I experienced it first-hand. 



## Exercise 29

I have written down all the Array and String methods, and I realized I havent used some of them. Then I came up with coding a sign up page and added validation for each input by using unused methods and regex. There are many sources to validate inputs like bootstrap, formik, react hook form etc. However, I believe it is always good to learn the logic behind of them and try to code something similar to them to understand them better. 



## Exercise 30

I decided to code something different than usual, and come up with an idea of text reader. To do this, I used SpeechSynthesisUtterance method, map the voices in select element. Learning new concepts always make me excited, and this project was the peak for sure.