My small coding projects!
HTML5, CSS3, JS
1- Form Validation: in which I tried to consider all possible input controls in a register form.
2- Seat Booking: a UI to reserve seats in a simulated cinema plan and get the total price based on the selected movie (these are the four movies I really enjoy watching!). My challenge here was to save data in localStorage to have them back in every page reloading.
3- Video Player: a practice to customize "video" tag in html file without using "controls" attribute.
4- Currency Converter: a UI to convert currencies by fetching data.
5-List: a practice to create a list of persons with their wealth using fetch API, and then sorting them, adding to the list, calculating the total wealth, etc.
6- Menu Slider and Modal: a simple website width a vertical menu slider which can be fold on click, and a customised modal to login.
7- "Guess Word" game (a fun version of Hangman game): I tought, well, "Hangman" is not a pleasant name, AT ALL. It is not a joke to play a game in which you are going to hang a man just like that! So, my challenge was to think of a more delightful graphic and less emotional one! I love gardening, so, I chose this! You will ruin my sunflower if you guess wrong letters. I can live with that though! Seriously! Watching a flower dying is not a big deal in comparison to take a human being life!
To Do Features:
- Fix the typing issue in mobile devices (make the blanks clickable).
- Fix the bottom message position in mobile devices.
8- Meals To Rescue!: a web app to find out wat to cock when you are helpless! Just enter the food keyword and wait for the results. Then you can click on a special meal to see the recipe. There is also a random button whic is handy when you have no idea!
9- "Expense Review" app: an app to keep track of your expenses and incomes.
10- Music Player: a very fun app to play music with cute animations!
To Do Features:
- Check the music lag issue.
11- Infinite Scrolling (fetch/load data on scroll): a template for blog or news website in which more data will be fetched when you are scrolling down. You can also search in loaded data for a special letter, word or sentence; whatever you type, the DOM will filter the data based on that.
12- "Type It Fast" game: a game to measure your typing speed! it has 3 difficulty levels and the timer changes based on your choice. I needed a random word creator API but I didn't find anything for free, so the random words are being created according to an array of words I have provided in the JS file.
13- "Text to Speech" web app: one of the things I remind myself of every now and then is that "You have to develop for the ones with disabilitis first!". I know how it is like to be disable, temporarily. We have to care about people who are limitted. This web app is a simple pne for autistic childs to express their feelings and needs via text and images.
14- "Memory Cards" app: I really like this one! As a constant learner, I appreciate any tools to help learning more and more. This memory cards app helps you to add your own Q/A. the animations are very lovely. This was the first time I was using these techniques.
To Do Features:
- Check the browser compability and solve the Safari issue#1.
- Add a login system.
- Add a database to keep the data instead of localstorage.
15- "Panda Toggle": a customized toggle button.
16- "Search Lyrics!" app: search the lyrics based on the song/artist name here. I finally learnt how to deal with CORS error in this project which means a lot to me!
17- "Breathe With Me!": a simple UI to practice deep breathing.
18- "Breakout Game" - only for desktop: wow! I learnt a lot in this project! It is a traditional game in which you should control the ball and break the bricks to win. Try it out!
To Do Features:
- Add background music which can be muted by user.
19- "New Year Countdown": a landing page in which there is a timer showing the remaining days/hours/minutes, and seconds to the coming year!
20- "Sortable List (Top-10 Game! - only for desktop)": this game kinda helps the user learn a bit about US geography! Try it! It is fun.
21- "Guess Number Outloud! Game": in this game you should guess the random number by talking! it was a good and fun practice for me to learan how to work with "Web Speech API".