{"componentChunkName":"component---src-pages-projects-index-js","path":"/projects/","result":{"data":{"projects":{"nodes":[{"html":"

A program that helps a cashier give adequate change to customers. It return the amount of notes and coins for the customer's change.

\n

Example: If the price is €3.75 and the paid amount is €50, then the client should receive €46.25 back in change.

","frontmatter":{"slug":"Cashier-Problem","stack":"JAVASCRIPT HTML & CSS","title":"Cashier","link":"https://mohammadkharma.github.io/DOM/projects/cashier_problem/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMFAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFbJYlwwr//xAAcEAACAgIDAAAAAAAAAAAAAAABAwACERITIjL/2gAIAQEAAQUCT5Le4aIGWxvap4wZ/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8BV//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAEFAQAAAAAAAAAAAAAAAAABAhASITH/2gAIAQEABj8CKtQ07P8A/8QAGxABAAICAwAAAAAAAAAAAAAAAQARIXExQbH/2gAIAQEAAT8h9ZiAHu8wBV71EIKGoBoizmLP/9oADAMBAAIAAwAAABCn3//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAwEBPxAW2f/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxBkf//EABsQAQEBAAIDAAAAAAAAAAAAAAERADFBUWHR/9oACAEBAAE/EHKCxd84yzMTYfWBojzMtWniPmZ6CVPLpBCzvf/Z","aspectRatio":1.492537313432836,"src":"/static/b434ce8fd26648afc56742c12dc5085e/14b42/cashier-min.jpg","srcSet":"/static/b434ce8fd26648afc56742c12dc5085e/f836f/cashier-min.jpg 200w,\n/static/b434ce8fd26648afc56742c12dc5085e/2244e/cashier-min.jpg 400w,\n/static/b434ce8fd26648afc56742c12dc5085e/14b42/cashier-min.jpg 800w,\n/static/b434ce8fd26648afc56742c12dc5085e/47498/cashier-min.jpg 1200w,\n/static/b434ce8fd26648afc56742c12dc5085e/0e329/cashier-min.jpg 1600w,\n/static/b434ce8fd26648afc56742c12dc5085e/a51c4/cashier-min.jpg 3872w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"4776c4c5-b069-5f79-b7b0-077d84079048"},{"html":"

This project was a template website for a doctor friend that has a laboratories and a clinic. The aim was to work on a complete project from styles to data handling and deployment as well.

","frontmatter":{"slug":"Clinic","stack":"JAVASCRIPT HTML & CSS","title":"Clinic","link":"https://mohammadkharma.github.io/DOM/projects/pharmakopoeia_laboratories/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAQX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB6msxGWCf/8QAGhABAAIDAQAAAAAAAAAAAAAAAQACEBESIf/aAAgBAQABBQJv5zWNiNRgax//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAABBAMAAAAAAAAAAAAAAAAAAQMRIRBxgf/aAAgBAQAGPwKiYnZTKrwvP//EABwQAAICAgMAAAAAAAAAAAAAAAERACFBUWFxkf/aAAgBAQABPyG0SQFM56mkLYON+AEahr5gQQxDP//aAAwDAQACAAMAAAAQkO//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QZX//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPxBX/8QAHBAAAgMAAwEAAAAAAAAAAAAAAREAITFBUYGx/9oACAEBAAE/EDF+9DeNuBd8qOLGuwPpmIHaHyCHARgEIKhQpEBwT//Z","aspectRatio":1.5037593984962405,"src":"/static/7b8d092184a0e6557f204c5395dda59b/14b42/clinic-min.jpg","srcSet":"/static/7b8d092184a0e6557f204c5395dda59b/f836f/clinic-min.jpg 200w,\n/static/7b8d092184a0e6557f204c5395dda59b/2244e/clinic-min.jpg 400w,\n/static/7b8d092184a0e6557f204c5395dda59b/14b42/clinic-min.jpg 800w,\n/static/7b8d092184a0e6557f204c5395dda59b/47498/clinic-min.jpg 1200w,\n/static/7b8d092184a0e6557f204c5395dda59b/0e329/clinic-min.jpg 1600w,\n/static/7b8d092184a0e6557f204c5395dda59b/b2131/clinic-min.jpg 3000w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"ecdf1908-63c3-50b1-8049-0a278982fbd4"},{"html":"

A simple glowing checlbox button that switch between dark and light theme. The deployment was on netflify.

","frontmatter":{"slug":"glowing-button-themes","stack":"HTML & CSS","title":"Themes","link":"https://epic-benz-9f533b.netlify.app/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABw2KYXILP/8QAFxABAQEBAAAAAAAAAAAAAAAAAAEyIf/aAAgBAQABBQKLrqLt/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhABAQEAAAAAAAAAAAAAAAAAEAEx/9oACAEBAAY/AjSn/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEhMRARQf/aAAgBAQABPyEaU6QrJEoP/9oADAMBAAIAAwAAABBz3//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAACAgIDAAAAAAAAAAAAAAABIQARMXGBscH/2gAIAQEAAT8QaqDcvMqGzhTQQujB4a8giwn/2Q==","aspectRatio":1.7699115044247788,"src":"/static/73f20be5c7418b18207854621aa01275/14b42/glow-min.jpg","srcSet":"/static/73f20be5c7418b18207854621aa01275/f836f/glow-min.jpg 200w,\n/static/73f20be5c7418b18207854621aa01275/2244e/glow-min.jpg 400w,\n/static/73f20be5c7418b18207854621aa01275/14b42/glow-min.jpg 800w,\n/static/73f20be5c7418b18207854621aa01275/47498/glow-min.jpg 1200w,\n/static/73f20be5c7418b18207854621aa01275/0e329/glow-min.jpg 1600w,\n/static/73f20be5c7418b18207854621aa01275/27fce/glow-min.jpg 3840w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"ac0f5530-cee4-5304-bef2-18d869d6959d"},{"html":"

A UI for a guessing game where the player has to guess a number in the browser. The player input the guess in the browser and recieve an answer will be displayed to show if the guess was successful or not The player also see how many attempts there is left.\nAfter three attempts, the player will be informed that they have either won (on the last attempt) or lost the game. The player able to restart the game.

","frontmatter":{"slug":"Guessing-Game","stack":"JAVASCRIPT HTML & CSS","title":"Guessing Game","link":"https://mohammadkharma.github.io/DOM/projects/guessing_game/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAACBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHjoLsZEk//xAAZEAADAAMAAAAAAAAAAAAAAAAAARECEBL/2gAIAQEAAQUCQsoutVlP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACBh/9oACAEBAAY/Air/AP/EABsQAAICAwEAAAAAAAAAAAAAAAABMXERQWGR/9oACAEBAAE/IZlSfhpmRNKzsJj/2gAMAwEAAgADAAAAEOM//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHxAAAgMAAAcAAAAAAAAAAAAAAREAITFBUWFxkaHw/9oACAEBAAE/EL6tV3hykk0eSL3CZDEl/CLSierITFhOFb5iGz//2Q==","aspectRatio":1.4388489208633093,"src":"/static/f2c9a9cd2a5076d1b9861a791e628b83/14b42/guess-min.jpg","srcSet":"/static/f2c9a9cd2a5076d1b9861a791e628b83/f836f/guess-min.jpg 200w,\n/static/f2c9a9cd2a5076d1b9861a791e628b83/2244e/guess-min.jpg 400w,\n/static/f2c9a9cd2a5076d1b9861a791e628b83/14b42/guess-min.jpg 800w,\n/static/f2c9a9cd2a5076d1b9861a791e628b83/47498/guess-min.jpg 1200w,\n/static/f2c9a9cd2a5076d1b9861a791e628b83/0e329/guess-min.jpg 1600w,\n/static/f2c9a9cd2a5076d1b9861a791e628b83/4fcd8/guess-min.jpg 2200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"54fe5cf6-3da2-5cac-9a8e-3e1a944bf529"},{"html":"

Firebase

\n

A realtime chat app using firebase as a database. Three JAVASCRIPT files were created to handle the database, the UI, and to combine them together.

","frontmatter":{"slug":"Chatroom-App","stack":"JAVASCRIPT HTML & CSS","title":"Chatroom","link":"https://mohammadkharma.github.io/DOM/projects/real_time_chatroom/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQT/xAAXAQADAQAAAAAAAAAAAAAAAAAAAgMF/9oADAMBAAIQAxAAAAG3CiU0NJin/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQACEBESEyH/2gAIAQEAAQUC12HcKyn/xAAXEQADAQAAAAAAAAAAAAAAAAABEBFB/9oACAEDAQE/ARdX/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BZ//EABcQAAMBAAAAAAAAAAAAAAAAAAABESD/2gAIAQEABj8CqaJn/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAERIVH/2gAIAQEAAT8hbr0EaOHClDZT/9oADAMBAAIAAwAAABCr3//EABcRAQEBAQAAAAAAAAAAAAAAABEBAHH/2gAIAQMBAT8QG1M5nf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKP/xAAaEAEBAQEAAwAAAAAAAAAAAAABABExIVGh/9oACAEBAAE/EOlEY7HWTWWeyfKXO/ZWVt//2Q==","aspectRatio":1.5037593984962405,"src":"/static/bb753daa46d754a5aa446030cadf3dfa/14b42/chat-min.jpg","srcSet":"/static/bb753daa46d754a5aa446030cadf3dfa/f836f/chat-min.jpg 200w,\n/static/bb753daa46d754a5aa446030cadf3dfa/2244e/chat-min.jpg 400w,\n/static/bb753daa46d754a5aa446030cadf3dfa/14b42/chat-min.jpg 800w,\n/static/bb753daa46d754a5aa446030cadf3dfa/47498/chat-min.jpg 1200w,\n/static/bb753daa46d754a5aa446030cadf3dfa/0e329/chat-min.jpg 1600w,\n/static/bb753daa46d754a5aa446030cadf3dfa/facae/chat-min.jpg 6016w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"e98866db-8c3a-5516-b6fc-1eebaef56d87"},{"html":"

REACT

\n

A simple Posting app with authentication to signup and signin. The project is based on React and google firebase for data. The styles are initial as the focus was on the authentication.

","frontmatter":{"slug":"Posts-Manager","stack":"JAVASCRIPT HTML & CSS","title":"Posts Manager","link":"https://mohammadkharma.github.io/signin","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAGwVy4zSL//xAAZEAACAwEAAAAAAAAAAAAAAAAAAQIRIQP/2gAIAQEAAQUCSRR0W3tk3v8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEQcYH/2gAIAQEABj8CiyLgj//EAB0QAAEEAgMAAAAAAAAAAAAAAAABESFRMUGRobH/2gAIAQEAAT8hhIyaqhkY1VCeFAnenhk95scQf//aAAwDAQACAAMAAAAQ+P8A/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAwEBPxDsJl//xAAVEQEBAAAAAAAAAAAAAAAAAAABAP/aAAgBAgEBPxCRv//EABwQAQACAgMBAAAAAAAAAAAAAAEAESFBMWGBUf/aAAgBAQABPxCwBljgbzLjfWvpM2yHR3FyRe2C4WZHwzUPvtn/2Q==","aspectRatio":1.5037593984962405,"src":"/static/f40044ce4443af1c9202d94e35d22dea/14b42/post-min.jpg","srcSet":"/static/f40044ce4443af1c9202d94e35d22dea/f836f/post-min.jpg 200w,\n/static/f40044ce4443af1c9202d94e35d22dea/2244e/post-min.jpg 400w,\n/static/f40044ce4443af1c9202d94e35d22dea/14b42/post-min.jpg 800w,\n/static/f40044ce4443af1c9202d94e35d22dea/47498/post-min.jpg 1200w,\n/static/f40044ce4443af1c9202d94e35d22dea/0e329/post-min.jpg 1600w,\n/static/f40044ce4443af1c9202d94e35d22dea/c128d/post-min.jpg 5760w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"2b826bbe-fc98-50dc-9fbf-704a45abace9"},{"html":"

JAVASCRIPT

\n

A Quiz templte that allow to choose from the giving answers and then recieve a percentage grade with some animation.

","frontmatter":{"slug":"Quiz-App","stack":"JAVASCRIPT HTML & CSS","title":"Quiz","link":"https://mohammadkharma.github.io/DOM/projects/quiz_app/main.html","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAgT/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAai2Q94uLP/EABgQAAMBAQAAAAAAAAAAAAAAAAACERMB/9oACAEBAAEFAovTiKRLoamh/8QAFhEAAwAAAAAAAAAAAAAAAAAAAAIR/9oACAEDAQE/AYpFP//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAECAQE/Aar/xAAeEAABAgcBAAAAAAAAAAAAAAAAITEBAgMQERJygf/aAAgBAQAGPwJJtfBamYc2YYY//8QAGhABAQADAQEAAAAAAAAAAAAAAQARIVFBof/aAAgBAQABPyF+kbREw8NJyDwcD0gkYa//2gAMAwEAAgADAAAAEGAv/8QAFREBAQAAAAAAAAAAAAAAAAAAAGH/2gAIAQMBAT8QFH//xAAWEQEBAQAAAAAAAAAAAAAAAAAAEVH/2gAIAQIBAT8QrcP/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhMUGBUf/aAAgBAQABPxBJDGoBfjisa5lXpg1u0qr9nBL34mFQJesgx2Od5//Z","aspectRatio":1.3986013986013985,"src":"/static/7cae25046adf59db8fa4ddd329aeda49/14b42/quiz-min.jpg","srcSet":"/static/7cae25046adf59db8fa4ddd329aeda49/f836f/quiz-min.jpg 200w,\n/static/7cae25046adf59db8fa4ddd329aeda49/2244e/quiz-min.jpg 400w,\n/static/7cae25046adf59db8fa4ddd329aeda49/14b42/quiz-min.jpg 800w,\n/static/7cae25046adf59db8fa4ddd329aeda49/47498/quiz-min.jpg 1200w,\n/static/7cae25046adf59db8fa4ddd329aeda49/0e329/quiz-min.jpg 1600w,\n/static/7cae25046adf59db8fa4ddd329aeda49/a91b5/quiz-min.jpg 2889w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"c1ff0d91-76c6-5af6-b2a7-4b5ca956b493"},{"html":"

A quote of the day generator that returns a random quote from the array of quotes. Used multiple functions, that do one specific thing only to make the code more readable and easier to maintain / extend. Used modules to complete the task of importing the quotes into the main javascript file. The user is able to click a \"Random Quote\" button to generate one of the quotes.

","frontmatter":{"slug":"Quote-Of-The-Day","stack":"JAVASCRIPT HTML & CSS","title":"Quotes","link":"https://mohammadkharma.github.io/DOM/projects/quote_of_day/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAAB5lxSzAG//8QAFxABAQEBAAAAAAAAAAAAAAAAAwIBEP/aAAgBAQABBQKI1NsqPhpp6jUvP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABcRAAMBAAAAAAAAAAAAAAAAAAECEBH/2gAIAQIBAT8BU5P/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIQESEiQf/aAAgBAQAGPwKmm3YtDMf/xAAZEAEBAAMBAAAAAAAAAAAAAAABEQAQITH/2gAIAQEAAT8hewoXJkx8d0l90mMDPCa//9oADAMBAAIAAwAAABBQP//EABYRAQEBAAAAAAAAAAAAAAAAAAEQMf/aAAgBAwEBPxBFyf/EABYRAAMAAAAAAAAAAAAAAAAAAAEQMf/aAAgBAgEBPxAFL//EABoQAQEAAwEBAAAAAAAAAAAAAAERABAhUfD/2gAIAQEAAT8QPNUKznzhpACzVmoM0K+ZC9yAa//Z","aspectRatio":1.5037593984962405,"src":"/static/a9bcd91d004816f044372cb44daa933a/14b42/quote-min.jpg","srcSet":"/static/a9bcd91d004816f044372cb44daa933a/f836f/quote-min.jpg 200w,\n/static/a9bcd91d004816f044372cb44daa933a/2244e/quote-min.jpg 400w,\n/static/a9bcd91d004816f044372cb44daa933a/14b42/quote-min.jpg 800w,\n/static/a9bcd91d004816f044372cb44daa933a/47498/quote-min.jpg 1200w,\n/static/a9bcd91d004816f044372cb44daa933a/0e329/quote-min.jpg 1600w,\n/static/a9bcd91d004816f044372cb44daa933a/c57b6/quote-min.jpg 4272w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"727d5e5f-baf0-5061-b5f2-b649126128c0"},{"html":"

REACT

\n

The goal of this project was to practice React Router. AXIOS is used as well in addition to a JSON placeholder to request an API.

","frontmatter":{"slug":"React-Router","stack":"JAVASCRIPT HTML & CSS","title":"React Router","link":"https://mohammadkharma.github.io/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAQP/2gAMAwEAAhADEAAAARpCWlvM80n/xAAYEAADAQEAAAAAAAAAAAAAAAAAAQIRIf/aAAgBAQABBQJMVLKrsU0VbNP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARL/2gAIAQMBAT8BjL//xAAXEQADAQAAAAAAAAAAAAAAAAAAAQIS/9oACAECAQE/AahtmD//xAAWEAADAAAAAAAAAAAAAAAAAAAAICH/2gAIAQEABj8CIv8A/8QAGBABAQEBAQAAAAAAAAAAAAAAAQAhEUH/2gAIAQEAAT8hPO9tEKnnLXC4y/Za3//aAAwDAQACAAMAAAAQE+//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAAR//EABgRAAIDAAAAAAAAAAAAAAAAAAABESEx/9oACAECAQE/EKTglg//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAxIVFx/9oACAEBAAE/ECPqvwX5r8+HBbOXEBeZJYvY4b1P65orv//Z","aspectRatio":1.5037593984962405,"src":"/static/8306093e518af7b81516b642fc48689c/14b42/router-min.jpg","srcSet":"/static/8306093e518af7b81516b642fc48689c/f836f/router-min.jpg 200w,\n/static/8306093e518af7b81516b642fc48689c/2244e/router-min.jpg 400w,\n/static/8306093e518af7b81516b642fc48689c/14b42/router-min.jpg 800w,\n/static/8306093e518af7b81516b642fc48689c/47498/router-min.jpg 1200w,\n/static/8306093e518af7b81516b642fc48689c/0e329/router-min.jpg 1600w,\n/static/8306093e518af7b81516b642fc48689c/b85df/router-min.jpg 3500w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"f292537c-30aa-5b6e-8ca2-18e649ccc571"},{"html":"

REACT

\n

This is my first React project. It was fun and easy to follow the documentation and build a Tic Tac Toe game. No fancy styles were applied, as the main focus was giving the ability to jump between the stages of the game by saving each move in the state of the component.

","frontmatter":{"slug":"Tic-Tac-Toe-Game","stack":"JAVASCRIPT HTML & CSS","title":"Tic Tac Toe","link":"https://mohammadkharma.github.io/Tic_Tac_Toe_Game/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgADBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAecWTCUf/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAIRIDH/2gAIAQEAAQUCijaf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAGBABAQEBAQAAAAAAAAAAAAAAAQAhETH/2gAIAQEAAT8hnBMk28sKb//aAAwDAQACAAMAAAAQay//xAAYEQACAwAAAAAAAAAAAAAAAAAAEQEhMf/aAAgBAwEBPxBsnaP/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCH/8QAGxABAQACAwEAAAAAAAAAAAAAAREAITFBYVH/2gAIAQEAAT8QA6QNa3bizFnLJjEPOLFJTuZ6B8cFaqvrn//Z","aspectRatio":1.492537313432836,"src":"/static/61446c87c377ec481968fd90c4eb5541/14b42/tic-min.jpg","srcSet":"/static/61446c87c377ec481968fd90c4eb5541/f836f/tic-min.jpg 200w,\n/static/61446c87c377ec481968fd90c4eb5541/2244e/tic-min.jpg 400w,\n/static/61446c87c377ec481968fd90c4eb5541/14b42/tic-min.jpg 800w,\n/static/61446c87c377ec481968fd90c4eb5541/47498/tic-min.jpg 1200w,\n/static/61446c87c377ec481968fd90c4eb5541/0e329/tic-min.jpg 1600w,\n/static/61446c87c377ec481968fd90c4eb5541/c57b6/tic-min.jpg 4272w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"3330e257-d40f-576e-b722-27caab7999bd"},{"html":"

JQUERY

\n

The application have an input text field inside a form and a button for submitting. The user is able to write any task in the input field and then see the task as a list item below. Any time the form is submitted (by either hitting enter on the field, or by clicking the button) a new list item is created with the text of the content of the input field.

","frontmatter":{"slug":"ToDo-App","stack":"JAVASCRIPT HTML & CSS","title":"ToDo","link":"https://mohammadkharma.github.io/DOM/projects/to_do_app/","thumb":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQX/xAAWAQEBAQAAAAAAAAAAAAAAAAADAQL/2gAMAwEAAhADEAAAAcfCs16ZEXP/xAAbEAABBAMAAAAAAAAAAAAAAAADAAECERAhIv/aAAgBAQABBQIRrTkwNqhB+tr/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEJ/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEhIFH/2gAIAQEABj8Cp3EbR//EABoQAAMBAQEBAAAAAAAAAAAAAAABESFRQaH/2gAIAQEAAT8hqmGJq6+Dj0Tf1q0Y1HDxOI//2gAMAwEAAgADAAAAEBsP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAREA/9oACAEDAQE/EKFdHf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxBsf//EABoQAQEBAQADAAAAAAAAAAAAAAERACExgaH/2gAIAQEAAT8QjPHomYYqcUT2cG6GlphB7c+pqh3j51CybQl3/9k=","aspectRatio":1.5037593984962405,"src":"/static/f90b38e5969a944594dba1d041d22df1/14b42/todo-min.jpg","srcSet":"/static/f90b38e5969a944594dba1d041d22df1/f836f/todo-min.jpg 200w,\n/static/f90b38e5969a944594dba1d041d22df1/2244e/todo-min.jpg 400w,\n/static/f90b38e5969a944594dba1d041d22df1/14b42/todo-min.jpg 800w,\n/static/f90b38e5969a944594dba1d041d22df1/47498/todo-min.jpg 1200w,\n/static/f90b38e5969a944594dba1d041d22df1/0e329/todo-min.jpg 1600w,\n/static/f90b38e5969a944594dba1d041d22df1/4111b/todo-min.jpg 4574w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"0c0d4db3-4e73-5256-8cab-95617404ef47"}]},"contact":{"siteMetadata":{"contact":"mohammad.kh.8688@gmail.com"}}},"pageContext":{}},"staticQueryHashes":["190507014"]}