{"id":20980283,"url":"https://github.com/ali-sdg90/calculator","last_synced_at":"2025-10-03T21:43:56.776Z","repository":{"id":142140259,"uuid":"563315036","full_name":"Ali-Sdg90/Calculator","owner":"Ali-Sdg90","description":"Calculator for CS Internship","archived":false,"fork":false,"pushed_at":"2023-05-25T08:53:19.000Z","size":154983,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T22:21:16.640Z","etag":null,"topics":["calculator","css","html","javascript","scss"],"latest_commit_sha":null,"homepage":"https://ali-sdg90.github.io/Calculator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ali-Sdg90.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-08T11:06:59.000Z","updated_at":"2024-09-07T20:01:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1854926-8eee-41ff-b48c-9c7ac619f8cb","html_url":"https://github.com/Ali-Sdg90/Calculator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FCalculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FCalculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FCalculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FCalculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ali-Sdg90","download_url":"https://codeload.github.com/Ali-Sdg90/Calculator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507467,"owners_count":21115607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calculator","css","html","javascript","scss"],"created_at":"2024-11-19T05:17:38.692Z","updated_at":"2025-10-03T21:43:51.752Z","avatar_url":"https://github.com/Ali-Sdg90.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eCalculator\u003c/h1\u003e\n\u003cp\u003e\n    This is a project for the CS_Intership course, where we will implement a\n    calculator with various functionalities. The goal of this project is to\n    create a calculator that looks and behaves similarly to the Windows 10\n    calculator while also being responsive and themeable.\n\u003c/p\u003e\n\u003ch2\u003eSteps\u003c/h2\u003e\n\u003ch3\u003eStep 1: Implement a Calculator Layout\u003c/h3\u003e\n\u003cp\u003e\n    In this step, we will implement a calculator layout that resembles the\n    Windows 10 calculator in maximum size (Standard mode). The calculator will\n    be unresponsive but resizable, which means that it can tolerate resizing\n    from desktop view to tablet view.\n\u003c/p\u003e\n\u003cp\u003e\n    \u003cimg src=\"/Gifs/step 1.gif\" alt=\"Step 1\" height=\"283px\" width=\"600px\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003ca\n        href=\"https://github.com/Ali-Sdg90/Calculator/tree/main/Previous-Steps/Step1\"\n        target=\"_new\"\n        \u003eView on GitHub\u003c/a\n    \u003e\n    |\n    \u003ca href=\"https://jsfiddle.net/Ali_Sdg90/m6za93ct/13/\" target=\"_new\"\n        \u003eView on JSFiddle\u003c/a\n    \u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\u003ch3\u003eStep 2: Implement a Responsive Calculator\u003c/h3\u003e\n\u003cp\u003e\n    In this step, we will make the calculator responsive just like the Windows\n    10 calculator. This means that the calculator will be able to adjust its\n    layout based on the screen size of the device.\n\u003c/p\u003e\n\u003cp\u003e\n    \u003cimg src=\"Gifs/step 2.gif\" alt=\"Step 2\" height=\"283px\" width=\"600px\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003ca\n        href=\"https://github.com/Ali-Sdg90/Calculator-step3/tree/b42cb2223e7ffd36dd84efe3134d45f6981a978a\"\n        target=\"_new\"\n        \u003eView on GitHub\u003c/a\n    \u003e\n    |\n    \u003ca href=\"https://jsfiddle.net/Ali_Sdg90/cmLy0kjz/13/\" target=\"_new\"\n        \u003eView on JSFiddle\u003c/a\n    \u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\u003ch3\u003eStep 3: Make the Calculator Functional\u003c/h3\u003e\n\u003cp\u003e\n    In this step, we will add the ability to theme the calculator. We will add a\n    green and blue theme, as well as a dark mode theme. Additionally, we will\n    enhance the standard calculator by adding calculation functionalities using\n    JavaScript.\n\u003c/p\u003e\n\u003ch4\u003eA: Themeable Calculator\u003c/h4\u003e\n\u003cp\u003e\n    In this substep, we will make the calculator themeable by adding a green and\n    blue theme and a dark mode theme.\n\u003c/p\u003e\n\u003cp\u003e\n    \u003cimg src=\"Gifs/step 3A.gif\" alt=\"Step 3A\" height=\"293px\" width=\"520px\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003ca\n        href=\"https://github.com/Ali-Sdg90/Calculator-step3/tree/e0b2c9df3d65270616b635744b720fadea03e3c7\"\n        target=\"_new\"\n        \u003eView on GitHub\u003c/a\n    \u003e\n    |\n    \u003ca href=\"https://jsfiddle.net/Ali_Sdg90/4ge5u26b/8/\" target=\"_new\"\n        \u003eView on JSFiddle\u003c/a\n    \u003e\n\u003c/p\u003e\n\u003ch4\u003eB: Enhanced Calculator\u003c/h4\u003e\n\u003cp\u003e\n    In this substep, we will enhance the standard calculator by adding\n    calculation functionalities using JavaScript.\n\u003c/p\u003e\n\u003cul\u003e\n    \u003cli\u003eHistory + Calculable Calculator :\u003c/li\u003e\n    \u003cbr /\u003e\n    \u003cimg\n        src=\"Gifs/step 3B1.gif\"\n        alt=\"Step 3B1\"\n        height=\"293px\"\n        width=\"520px\"\n    /\u003e\u003cbr /\u003e\u003cbr /\u003e\n    \u003cli\u003eMemory Functioning :\u003c/li\u003e\n    \u003cbr /\u003e\n    \u003cimg\n        src=\"Gifs/step 3B2.gif\"\n        alt=\"Step 3B2\"\n        height=\"293px\"\n        width=\"520px\"\n    /\u003e\u003cbr /\u003e\u003cbr /\u003e\n    \u003cli\u003eHaving LocalStorage :\u003c/li\u003e\n    \u003cbr /\u003e\n    \u003cimg\n        src=\"Gifs/step 3B3.gif\"\n        alt=\"Step 3B3\"\n        height=\"293px\"\n        width=\"520px\"\n    /\u003e\u003cbr /\u003e\n\u003c/ul\u003e\n\u003cp\u003e\n    \u003ca\n        href=\"https://github.com/Ali-Sdg90/Calculator-step3/tree/72b2e63abf5891a70f69654c35c02fa4ee0e62b6\"\n        target=\"_new\"\n        \u003eView on GitHub\u003c/a\n    \u003e\n    |\n    \u003ca href=\"https://jsfiddle.net/Ali_Sdg90/vrub5a19/7/\" target=\"_new\"\n        \u003eView on JSFiddle\u003c/a\n    \u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\u003ch3\u003eStep 4: Refactor the Style and Themeable with SCSS/SASS\u003c/h3\u003e\n\u003cp\u003e\n    In this step, we will refactor the style and themeable of the calculator\n    from the previous step using SCSS/SASS.\n\u003c/p\u003e\n\u003cp\u003e\n    \u003cimg src=\"Gifs/step 4.gif\" alt=\"Step 4\" height=\"293px\" width=\"520px\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003ca\n        href=\"https://github.com/Ali-Sdg90/Calculator/tree/a4638b29f55d1f69c5337c48254ecb7777642994\"\n        target=\"_new\"\n        \u003eView on GitHub\u003c/a\n    \u003e\n\u003c/p\u003e\n\u003ch2\u003eConclusion\u003c/h2\u003e\n\u003cp\u003e\n    In conclusion, this project is an excellent opportunity to develop practical\n    skills in web development using HTML, CSS, and JavaScript, as well as\n    SCSS/SASS. By following the four steps outlined in this README, we will\n    create a functional calculator that resembles the Windows 10 calculator in\n    appearance and functionality. Through this project, we will learn how to\n    create a responsive and themeable calculator and enhance its functionality\n    using JavaScript. Overall, this project will help us gain valuable\n    experience in web development and provide a foundation for more advanced web\n    development projects.\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-sdg90%2Fcalculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fali-sdg90%2Fcalculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-sdg90%2Fcalculator/lists"}