From 365af6d0919d3b88068cdd8d8e29e4f082b24a86 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 Date: Wed, 8 Jun 2022 19:34:05 +0530 Subject: [PATCH 1/7] first commit --- .github/PULL_REQUEST_TEMPLATE.md | 32 ------ .github/labeler.yml | 8 -- .github/workflows/labeler.yml | 11 -- Android.md | 59 ----------- Flutter.md | 73 ------------- WebDev.md | 55 ---------- console.js | 176 +++++++++++++++++++++++++++++++ home.html | 82 ++++++++++++++ moon.png | Bin 0 -> 8081 bytes readme.md | 150 -------------------------- style.css | 124 ++++++++++++++++++++++ sun.png | Bin 0 -> 9140 bytes 12 files changed, 382 insertions(+), 388 deletions(-) delete mode 100644 .github/PULL_REQUEST_TEMPLATE.md delete mode 100644 .github/labeler.yml delete mode 100644 .github/workflows/labeler.yml delete mode 100644 Android.md delete mode 100644 Flutter.md delete mode 100644 WebDev.md create mode 100644 console.js create mode 100644 home.html create mode 100644 moon.png delete mode 100644 readme.md create mode 100644 style.css create mode 100644 sun.png diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index dc2beda..0000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,32 +0,0 @@ -## CSOC Task 1 Submission - - -### Track - -- [ ] Android -- [ ] Flutter -- [ ] Web Devlopment - -### Task Completed - -#### Hangman - -- [ ] **Task 1**: Implement a hangman game. Create a word generator and generate random words in every game. -- [ ] **Task 2**: Add a high score page to view the previous scores. -- [ ] **Task 3**: Giving hints to users, by showing a few letters when the user needs them. Also, you could give signs when the entered letters are wrong. -- [ ] **Task 4:** Make hard and easy mode with say, 5 lives in easy and 3 in hard mode. Also, word length and difficulty could be changed with respective levels. Easy words could have till 5 letters while difficult ones with longer words. -- [ ] **Extras:** Adding a timer for making it more interactive and competitive. - -#### Calculator - -- [ ] **Task 1**: Create a simple calculator with basic mathematical operations. -- [ ] **Task 2**: Add complex operations including exponentiation, logarithms, trigonometry, etc. -- [ ] **Task 3:** Add an option to change settings, say from radians to degrees and vice versa, and an option to change the theme of the app. -- [ ] **Task 4:** Feature to show a history of previous calculations. -- [ ] **Extras:** Add feature for matrix calculations and plotting of simple basic graphs using equations. - -### Submission - - -[Repo](link) -[APK|Web Site](link) diff --git a/.github/labeler.yml b/.github/labeler.yml deleted file mode 100644 index 714b6e5..0000000 --- a/.github/labeler.yml +++ /dev/null @@ -1,8 +0,0 @@ -android: -- any: ['Android.md'] - -flutter: -- any: ['Flutter.md'] - -web: -- any: ['WebDev.md'] diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml deleted file mode 100644 index 331ddc9..0000000 --- a/.github/workflows/labeler.yml +++ /dev/null @@ -1,11 +0,0 @@ -name: "Pull Request Labeler" -on: -- pull_request_target - -jobs: - triage: - runs-on: ubuntu-latest - steps: - - uses: actions/labeler@v3 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/Android.md b/Android.md deleted file mode 100644 index d532893..0000000 --- a/Android.md +++ /dev/null @@ -1,59 +0,0 @@ -# CSOC Week1 Android - -## Introduction -The most apt definition for android is - "Android is a mobile operating system based on a modified version of the Linux kernel and other open-source software, designed primarily for touchscreen mobile devices such as smartphones and tablets." -In short, we can say that it is an Operating system for touchscreen devices, and any device that runs on this Operating System is known as an Android Device. Now for every operating system, some applications can run on it to perform specific tasks. Similarly, for Android Devices, we have Android Apps that can run on them to perform specific tasks. - -Evident enough that the software engineering field for developing such apps is known as Android App Development. -The official language for Android development is Kotlin, but Java is still used in many famous courses and many projects, so you are free to use any of them. - -## Installation - -### Android Studio - -Android Studio is the official Integrated Development Environment (IDE) for Android app development. This software is a bit heavy on normal systems (8 GB Ram & 1 TB HDD) and can be quite laggy for any systems below this configuration. - -[](https://developer.android.com/studio/install) - -While developing an android app you will need to test it on a device. You can test it in two ways - - -- [Real Device (Preferred for slower systems)](https://developer.android.com/studio/debug/dev-options) -For testing you apps on a real device you will need to have a USB cable and an Android device. Follow this tutorial to enable USB debugging in order to run your app in the device. - -- [Emulator](https://developer.android.com/studio/run/emulator) -An Android Emulator simulates Android devices on your computer so that you can test your application on a variety of devices and Android API levels without needing to have each physical device. It provides almost all of the capabilities of a real Android device. - - -## How to get started - -If you haven't had any chance to develop android apps earlier then don't worry it's not too late to start now. Here are few resources to start with android development. - -- Video Tutorial - - [Android development tutorial 1](https://www.youtube.com/playlist?list=PLUcsbZa0qzu3Mri2tL1FzZy-5SX75UJfb) - - [Android development tutorial 2](https://www.youtube.com/playlist?list=PLgCYzUzKIBE8TUoCyjomGFqzTFcJ05OaC) -- Written Tutorials - - [Create a project](https://developer.android.com/training/basics/firstapp/creating-project) - - [Run your app](https://developer.android.com/training/basics/firstapp/running-app) - - [Include new UI](https://developer.android.com/training/basics/firstapp/building-ui) - - [Make it functional](https://developer.android.com/training/basics/firstapp/starting-activity) - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and the .apk file of your android app - -- Fork and then Clone your repository -- Make a new entry into submissions as explained in comments -- Commit and Push the changes -- Make a Pull request - -## Submissions - - - - diff --git a/Flutter.md b/Flutter.md deleted file mode 100644 index f0a98c4..0000000 --- a/Flutter.md +++ /dev/null @@ -1,73 +0,0 @@ -# CSoC Week-1 Flutter - -# Introduction - -Flutter - promises cross platform, natively compiled apps, with slick smooth UIs. Developed by Google, the framework is gaining in popularity, especially amongst new startups. - -## Single Codebase…like Java? - -Flutter’s major selling point is that it allows developers to create mobile apps for Android and iOS using a single codebase. It’s possible to build a Flutter app targeting Android and build the same project on a Mac for iOS devices without changing a single line of code. - -Unlike most other mobile app frameworks Flutter does not use WebView nor OEM widgets. Instead, Flutter uses its own rendering engine to draw widgets. - -Apps are natively compiled too, so you’ll need a machine with Android SDK installed for targetting Android and you’ll need to be running XCode to build for iOS devices. - -# Getting Started - -## Installation - -Here is how you can install Flutter. Do not install Android Studio right now, this week you do not require it. Read until writing your first flutter app. - -[Install](https://flutter.dev/docs/get-started/install) - -To use flutter consistently between different terminal sessions, go through this - -[Linux install](https://flutter.dev/docs/get-started/install/linux#update-your-path) - -Install a suitable IDE. VS Code (compared to Android Studio) is good choice for a light and better experience. - -# For Basic Understanding - -- [Flutter Widgets - Javatpoint](https://www.javatpoint.com/flutter-widgets) -- [Flutter - Container Cheat Sheet](https://medium.com/jlouage/container-de5b0d3ad184) -- [Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart](https://www.youtube.com/watch?v=x0uinJvhNxI) -- [The Flutter Series: Exploring a Flutter project and building your first Flutter app](https://medium.com/@dev.n/the-complete-flutter-series-article-1-exploring-a-flutter-project-and-building-your-first-flutter-e438ea941d70) - -- [The Flutter Series: Basic Widgets and Layout](https://medium.com/@dev.n/the-complete-flutter-series-article-2-basic-widgets-and-layout-in-flutter-92a4fbd4a3e1) - -Don't forget to switch on USB Debugging on your mobile. (In case you are not using an emulator) - -For reference, keep this handy - -[Flutter - Dart API docs](https://api.flutter.dev/) - -# Challenge - -As an aspiring developer, you'd need to keep building things to keep your knowledge on tips. Now that you are good to go with the basics of native Android Development, we want you to build **one of the apps** from the following list on your own. - -1. Calculator app -2. Hangman game - -You have to provide your Repo and APK File as part of submission - -### **Judging** - -The evaluation would be done mainly on the following basis: - -1. User Interface and User Experience -2. Authenticity and readability of the code -3. Completion of mentioned tasks -4. Bonus Points for implementing extra features depending on your creativity😉 - -Remember, the deadline for this week's task is **June 10th, 2022, 23:59**. - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and the .apk file of your application - -- Fork and then Clone your repository -- Make a new entry into submissions as explained in comments -- Commit and Push the changes -- Make a Pull request - -## Submissions diff --git a/WebDev.md b/WebDev.md deleted file mode 100644 index cb78c5f..0000000 --- a/WebDev.md +++ /dev/null @@ -1,55 +0,0 @@ -# CSOC'22 Week1 Web Development - -## Introduction - -Web development is a basic skill that is often said as a good start to the development field. This week you will learn the basics of web development. You will get familiar with HTML, CSS, and JavaScript. On completion, you will be able to make simple static websites for both desktop and mobile. - -## Responsive UI - -One major thing to ensure while working on Web Apps is to ensure that most people will open your websites on mobile first based on that we develop our site on Mobile First approach and then make changes to scale with increasing screen size - -### Native CSS Tools - -These are vanilla CSS Tools that will allow you to make your UI respond to changes in the screen size. - -- Flexbox - -- Grid - -- Float - -- Media Queries - -### CSS Frameworks - -They provide you with a set of classes and components that scale with the screen size. Although its only recommended to use them when you understand native CSS properly. - -- [Bootstrap 5](https://getbootstrap.com/) - -- [TailwindCSS 2](https://tailwindcss.com/) - -- [Bulma](https://bulma.io/) - -- [Materialize](https://materializecss.com/) - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and deployment link of site - -- Fork and then Clone your repository - -- Make a new entry into submissions as explained in comments - -- Commit and Push the changes - -- Make a Pull request - -Remember, the deadline for this week's task is June 7th, 2022, at 23:59. - -## Submissions - - - - - - diff --git a/console.js b/console.js new file mode 100644 index 0000000..7b3ed36 --- /dev/null +++ b/console.js @@ -0,0 +1,176 @@ +// darkmode +var darkmode = document.getElementById("darkmode-icon"); + +darkmode.onclick = function(){ + document.body.classList.toggle("light-mode"); + if(document.body.classList.contains("light-mode")) + darkmode.src= "moon.png" + else + darkmode.src= "sun.png" +} + + +let inv = document.getElementsByClassName("sci"); + +let display = document.getElementById('display-input'); + +let buttons = Array.from(document.getElementsByClassName('button')); + +let expression = ''; + +let history = ''; + +let x; + +let i = 0; + + +linebreak = document.createElement("br"); +hist = document.getElementById("history"); + +buttons.map(button => { + button.addEventListener('click', (e) => { + switch (e.target.innerText) { + + // for clearing text + case 'C': + display.innerText = ''; + expression = ''; + addToHistory(''); + i++; + history = ''; + console.log(expression);//test + break; + + // when = is pressed + case '=': + try { + display.innerText = eval(expression); + addToHistory(expression + '=' + display.innerText); + expression = display.innerText; + console.log(expression);//test + i++; + history = ''; + } catch { + display.innerText = "Error" + expression = ''; + } + break; + + + // backspace + case '←': + if (display.innerText) { + display.innerText = display.innerText.slice(0, -1); + expression = display.innerText; + console.log(expression);//test + } + break; + + + case 'π': + display.innerText += 'π'; + expression += Math.PI; + console.log(expression);//test + break; + case 'e': + display.innerText += 'e'; + expression += Math.E; + console.log(expression);//test + break; + case 'ln': + display.innerText = "log(" + display.innerText + ")"; + expression = eval(expression); + expression = Math.log(expression); + console.log(expression);//test + break; + case '%': + display.innerText += '%'; + expression = eval(expression); + expression = (expression) / 100; + break; + case '√': + display.innerText = '√' + display.innerText; + expression = Math.sqrt(expression); + break; + case '!': + display.innerText += '!'; + expression = factorial(expression); + break; + case 'sci': + for (let j = 0; j < 7; j++) { + inv[j].classList.toggle("invisible"); + } + + break; + case '^': + display.innerText += '^'; + expression += '^'; + switch (e.target.innerText) { + case '=': + expression = power(expression); + try { + display.innerText = eval(expression); + console.log(expression);//test + } catch { + display.innerText = "Error" + expression = ''; + } + } + + break; + default: + display.innerText += e.target.innerText; + expression += e.target.innerText; + console.log(expression);//test + } + }); +}); + +function addToHistory(value) { + let hist = document.getElementsByClassName('history'); + + var el = document.createElement('div'); + el.setAttribute("id", `Div${i}`); + hist[0].appendChild(el); + + + + history += value; + + console.log(history); + + if (history === '=undefined') { + history = ''; + expression = ''; + display.innerText = ''; + } + else + { + document.getElementById(`Div${i}`).innerHTML = history; + } + + + +} + +factorial = (n) => { + let answer = 1; + if (n == 0 || n == 1) { + return answer; + } else { + for (var i = n; i >= 1; i--) { + answer = answer * i; + } + return answer; + } +} + +power = (n) => { + var textinside = n; + var a = textinside.slice(0, textinside.indexOf('^')); + var b = textinside.slice(-1, textinside.indexOf('^')); + console.log(a, b); + ans = Math.pow(a, b); + return (ans); +} diff --git a/home.html b/home.html new file mode 100644 index 0000000..16b8eb2 --- /dev/null +++ b/home.html @@ -0,0 +1,82 @@ + + + + + + + + + + + Document + + + +
+ +
+
+
+
+
C
+
/
+
*
+
←
+ + + +
7
+
8
+
9
+
-
+ + +
4
+
5
+
6
+
+
+ + +
1
+
2
+
3
+
.
+ + +
0
+
(
+
)
+
=
+ + + + + + +
sci
+ + +
+ +
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+ + + + + + \ No newline at end of file diff --git a/moon.png b/moon.png new file mode 100644 index 0000000000000000000000000000000000000000..e86aa0039b338dcce5e56b5a337570cbd88ef741 GIT binary patch literal 8081 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 Date: Wed, 8 Jun 2022 19:49:48 +0530 Subject: [PATCH 2/7] fade effect --- console.js | 14 +++++++++++++- style.css | 8 +++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/console.js b/console.js index 7b3ed36..1ded6f8 100644 --- a/console.js +++ b/console.js @@ -134,6 +134,18 @@ function addToHistory(value) { el.setAttribute("id", `Div${i}`); hist[0].appendChild(el); + + if (i<1) { + let newElement= document.getElementById(`Div${i}`); + newElement.classList.add("new-element"); + } + else { + let newElement= document.getElementById(`Div${i}`); + newElement.classList.add("new-element"); + let oldElement= document.getElementById(`Div${i-1}`); + oldElement.classList.remove("new-element"); + } + history += value; @@ -149,7 +161,7 @@ function addToHistory(value) { { document.getElementById(`Div${i}`).innerHTML = history; } - + } diff --git a/style.css b/style.css index b7355fc..05f292a 100644 --- a/style.css +++ b/style.css @@ -112,6 +112,7 @@ body{ min-width: 500px; text-align: center; font-size: 25px; + animation: fade-out 0.4s ease; } #darkmode-icon { @@ -121,4 +122,9 @@ body{ cursor: pointer; justify-self: left; margin-right: 0%; - } \ No newline at end of file + } + +.new-element{ + font-size: 50px; + animation: fade-in 0.4s ease; +} \ No newline at end of file From fb3c7be2d23609016bad2e81a82dfda0d97053c9 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 Date: Thu, 9 Jun 2022 13:51:26 +0530 Subject: [PATCH 3/7] theme change --- home.html | 36 ++++++++++++++++++------------------ style.css | 30 ++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 26 deletions(-) diff --git a/home.html b/home.html index 16b8eb2..c244aee 100644 --- a/home.html +++ b/home.html @@ -4,7 +4,10 @@ - + + + + @@ -15,38 +18,42 @@
+
+
+
+
-
C
-
/
-
*
-
←
+
C
+
/
+
←
+
*
7
8
9
-
-
+
-
4
5
6
-
+
+
+
1
2
3
-
.
+
.
0
(
)
-
=
+
=
@@ -63,15 +70,8 @@
-
- -
-
-
-
- -
- + +
diff --git a/style.css b/style.css index 05f292a..774c78d 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,14 @@ :root{ - --primaary-colour: #323330; + --primaary-colour: #01011b; --secondary-colour: aliceblue; + --tertiary-colour: rgba(23, 23, 24, 0.929) ; + --quaternary-colour: #1c1c1de4; } .light-mode{ - --primaary-colour:aliceblue; - --secondary-colour:#323330; + --primaary-colour:rgb(255, 255, 255); + --secondary-colour:#01011b; + --tertiary-colour: ; + --quaternary-colour: aliceblue ; } .sci{ @@ -33,11 +37,13 @@ body{ background: var(--primaary-colour); color: var(--secondary-colour); transition: background 0.5s linear; + font-family: 'Varela Round', sans-serif; + border: 0; + margin: 0; } .main{ display: grid; - grid-template-columns: 2fr 1fr; } .invisible{ @@ -56,17 +62,25 @@ body{ .buttons { display: grid; - + background: var(--quaternary-colour); grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + border-radius: 50px 50px 0 0; } - +.red{ + color:tomato; +} +.green{ + color: aquamarine; +} .button { - line-height: 100px; + line-height: 50px; text-align: center; font-size: 25px; cursor: pointer; - border-radius: 50px; + border-radius: 10px; + background: var(--tertiary-colour); + margin: 10%; } #equal { From 9af735ce68faf84cea940356c3da799fe5cbb1d3 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 Date: Thu, 9 Jun 2022 16:25:11 +0530 Subject: [PATCH 4/7] changes --- console.js | 2 + home.html | 78 ++++++++++++++++++------------------- style.css | 110 +++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 129 insertions(+), 61 deletions(-) diff --git a/console.js b/console.js index 1ded6f8..0bb369e 100644 --- a/console.js +++ b/console.js @@ -138,12 +138,14 @@ function addToHistory(value) { if (i<1) { let newElement= document.getElementById(`Div${i}`); newElement.classList.add("new-element"); + newElement.scrollIntoView({behavior:"smooth"}); } else { let newElement= document.getElementById(`Div${i}`); newElement.classList.add("new-element"); let oldElement= document.getElementById(`Div${i-1}`); oldElement.classList.remove("new-element"); + newElement.scrollIntoView({behavior:"smooth"}); } diff --git a/home.html b/home.html index c244aee..a461c72 100644 --- a/home.html +++ b/home.html @@ -17,62 +17,58 @@
-
-
-
-
-
-
+
+
+
+
+
+
-
-
C
-
/
-
←
-
*
- - +
+ +
+
C
+
/
+
←
+
*
+ -
7
-
8
-
9
-
-
- -
4
-
5
-
6
-
+
- +
7
+
8
+
9
+
-
+ -
1
-
2
-
3
-
.
- +
4
+
5
+
6
+
+
+ -
0
-
(
-
)
-
=
+
1
+
2
+
3
+
.
+ +
0
+
(
+
)
+
=
- -
sci
- - -
+ +
sci
+ +
-
-
- -
diff --git a/style.css b/style.css index 774c78d..31f8e2c 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,12 @@ :root{ - --primaary-colour: #01011b; + --primaary-colour: #060709; --secondary-colour: aliceblue; --tertiary-colour: rgba(23, 23, 24, 0.929) ; --quaternary-colour: #1c1c1de4; } .light-mode{ --primaary-colour:rgb(255, 255, 255); - --secondary-colour:#01011b; + --secondary-colour:#060709; --tertiary-colour: ; --quaternary-colour: aliceblue ; } @@ -43,24 +43,76 @@ body{ } .main{ - display: grid; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + display:grid; + height: 100%; + border: 0; + margin: 0; } -.invisible{ - opacity: 0; +.input-box{ + display: flex; + flex-direction: column; + margin: 0; + border: 0; +} + + +.top-area{ + position:absolute; + top:0px; + right:0px; + display: flex; + flex-direction: column; +} + + +.history{ + height: 55px; + margin-bottom: 200px; + Overflow-x:hidden ; + scroll-behavior:smooth; + min-width: 500px; + text-align: center; + font-size: 25px; animation: fade-out 0.4s ease; + +} +.history::-webkit-scrollbar { + display: none; } #display-input { - text-align: right; - height: 70px; - line-height: 70px; - padding: 16px 8px; - font-size: 25px; + text-align: flex-end; + min-height: 60px; + line-height: 60px; + padding:8px; + font-size: 50px; +} + + +#display-input{ + align-self: flex-end; +} + + +.invisible{ + opacity: 0; + animation: fade-out 0.4s ease; } .buttons { + padding: 10px; + align-self: bottom; + position: absolute; + right: 0px; + bottom: 0px; + left: 0px; display: grid; background: var(--quaternary-colour); grid-template-columns: 1fr 1fr 1fr 1fr 1fr; @@ -80,7 +132,7 @@ body{ cursor: pointer; border-radius: 10px; background: var(--tertiary-colour); - margin: 10%; + margin: 2%; } #equal { @@ -119,15 +171,7 @@ body{ } -.right-panel{ - display: flex; -} -.history{ - min-width: 500px; - text-align: center; - font-size: 25px; - animation: fade-out 0.4s ease; -} + #darkmode-icon { height: 30px; @@ -141,4 +185,30 @@ body{ .new-element{ font-size: 50px; animation: fade-in 0.4s ease; +} + + + +@media screen and (max-width: 480px) { + .buttons { + padding: 10px; + align-self: bottom; + position: absolute; + right: 0px; + bottom: 0px; + left: 0px; + display: grid; + background: var(--quaternary-colour); + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + border-radius: 50px 50px 0 0; + } + .button { + line-height: 70px; + text-align: center; + font-size: 50px; + cursor: pointer; + border-radius: 10px; + background: var(--tertiary-colour); + margin: 2%; + } } \ No newline at end of file From e366f37f9317083335965943e8b41d040cb36250 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 Date: Thu, 9 Jun 2022 23:28:49 +0530 Subject: [PATCH 5/7] responsive --- style.css | 73 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 29 deletions(-) diff --git a/style.css b/style.css index 31f8e2c..d0b6495 100644 --- a/style.css +++ b/style.css @@ -33,6 +33,9 @@ } } + + + body{ background: var(--primaary-colour); color: var(--secondary-colour); @@ -43,12 +46,6 @@ body{ } .main{ - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - display:grid; height: 100%; border: 0; margin: 0; @@ -62,6 +59,7 @@ body{ } + .top-area{ position:absolute; top:0px; @@ -74,25 +72,28 @@ body{ .history{ height: 55px; margin-bottom: 200px; + margin-right: 500px; Overflow-x:hidden ; scroll-behavior:smooth; min-width: 500px; text-align: center; font-size: 25px; animation: fade-out 0.4s ease; - } -.history::-webkit-scrollbar { - display: none; +.new-element{ + font-size: 25px; + animation: fade-in 0.4s ease; } - #display-input { text-align: flex-end; min-height: 60px; line-height: 60px; padding:8px; - font-size: 50px; + font-size: 25px; +} +.history::-webkit-scrollbar { + display: none; } @@ -188,27 +189,41 @@ body{ } +@media screen and (min-height: 400px) and (max-height:700px){ + + .history{ + margin-bottom:-15px; + font-size: 12px; + margin-right: 300px; + } + + .new-element{ + font-size: 20px; -@media screen and (max-width: 480px) { - .buttons { - padding: 10px; - align-self: bottom; - position: absolute; - right: 0px; - bottom: 0px; - left: 0px; - display: grid; - background: var(--quaternary-colour); - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - border-radius: 50px 50px 0 0; } .button { - line-height: 70px; - text-align: center; + line-height: 45px; + + font-size: 25px; + + } + +} + +@media screen and (max-device-width: 500px) { + .history{ + margin-bottom:30px; + font-size: 40px; + margin-left: 30%; + } + + .button{ + line-height: 200px; + font-size: 50px; + } + + #display-input { + margin-top: 40%; font-size: 50px; - cursor: pointer; - border-radius: 10px; - background: var(--tertiary-colour); - margin: 2%; } } \ No newline at end of file From 691f1dc9e4f54da75544b5f9136a39c3063bef92 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 Date: Thu, 9 Jun 2022 23:34:11 +0530 Subject: [PATCH 6/7] minor changes --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index d0b6495..e623b5c 100644 --- a/style.css +++ b/style.css @@ -189,7 +189,7 @@ body{ } -@media screen and (min-height: 400px) and (max-height:700px){ +@media screen and (min-height: 200px) and (max-height:700px){ .history{ margin-bottom:-15px; @@ -202,9 +202,9 @@ body{ } .button { - line-height: 45px; + line-height: 25px; - font-size: 25px; + font-size: 15px; } From 14eaf2897d8b465ae38fa3c5815ddf4500bdfae4 Mon Sep 17 00:00:00 2001 From: vaibhav-1508 <96713176+vaibhav-1508@users.noreply.github.com> Date: Thu, 9 Jun 2022 23:52:41 +0530 Subject: [PATCH 7/7] Create README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..52b8417 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# CSOC22-Week1 + +A responsive scientific calculator that works on phones, tablets as well as PC screen with dark and light themes. +