文件列表:

.vscode/ (0, 2022-06-18)
.vscode/settings.json (113, 2022-06-18)
Screenshot1.png (35641, 2022-06-18)
Screenshot2.png (34601, 2022-06-18)
Screenshot3.png (33062, 2022-06-18)
_config.yml (25, 2022-06-18)
android/ (0, 2022-06-18)
android/android-launchericon-144-144.png (3212, 2022-06-18)
android/android-launchericon-192-192.png (4400, 2022-06-18)
android/android-launchericon-48-48.png (1443, 2022-06-18)
android/android-launchericon-512-512.png (12291, 2022-06-18)
android/android-launchericon-72-72.png (1873, 2022-06-18)
android/android-launchericon-96-96.png (2484, 2022-06-18)
css/ (0, 2022-06-18)
css/style.css (8043, 2022-06-18)
design/ (0, 2022-06-18)
design/desktop-design-theme-1.jpg (30832, 2022-06-18)
design/desktop-design-theme-2.jpg (24932, 2022-06-18)
design/desktop-design-theme-3.jpg (28946, 2022-06-18)
design/desktop-preview.jpg (41523, 2022-06-18)
design/mobile-design-theme-1.jpg (19445, 2022-06-18)
design/mobile-design-theme-2.jpg (15574, 2022-06-18)
design/mobile-design-theme-3.jpg (18574, 2022-06-18)
favicon.ico (4286, 2022-06-18)
gulpfile.js (366, 2022-06-18)
icons.json (10351, 2022-06-18)
index.html (3192, 2022-06-18)
ios/ (0, 2022-06-18)
ios/100.png (2614, 2022-06-18)
ios/1024.png (28188, 2022-06-18)
ios/114.png (2983, 2022-06-18)
ios/120.png (2862, 2022-06-18)
ios/128.png (3249, 2022-06-18)
ios/144.png (3212, 2022-06-18)
ios/152.png (3517, 2022-06-18)
ios/16.png (487, 2022-06-18)
ios/167.png (3781, 2022-06-18)
ios/180.png (4002, 2022-06-18)
... ...

# Frontend Mentor - Calculator app solution
This is a solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Overview [Calculator-app-main Live Site](https://alkanoidev.github.io/calculator-app-main/) ### The challenge Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathmatical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - **Bonus**: Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser ### Screenshot

### Built with - Semantic HTML5 markup - SCSS custom properties - Flexbox - Grid - Mobile-first workflow - Vanilla JavaScript - localStorage - JavaScript modules - PWA ### Something I'm proud of: ```js window.onload = () => { preferences = localStorage.getItem("theme")==undefined ? 1 : localStorage.getItem("theme"); document.documentElement.className = `theme${preferences}`; radios[Number(preferences)-1].checked=true; }; ``` ```js firstOperand = displayValue.split(operator)[0]; secondOperand = displayValue.split(operator).pop(); ``` ```css .buttons { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; gap: 10px; grid-template-areas: ". . . ." ". . . ." ". . . ." ". . . ." "reset reset equals equals"; height: 600px; } ``` ### Author **Filip Ivanovic** * Website: [https://filipivanovic.netlify.app/](https://filipivanovic.netlify.app/) * Github: [@alkanoidev](https://github.com/alkanoidev)

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：