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/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. + 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..0bb369e --- /dev/null +++ b/console.js @@ -0,0 +1,190 @@ +// 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); + + + 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"}); + } + + + + 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..a461c72 --- /dev/null +++ b/home.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + 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 0000000..e86aa00 Binary files /dev/null and b/moon.png differ diff --git a/readme.md b/readme.md deleted file mode 100644 index c584ec7..0000000 --- a/readme.md +++ /dev/null @@ -1,150 +0,0 @@ - -# CSOC'22 Week1 - - - -This week, we'll jump with the basics of development with three tracks - - - - -1. Android Development - - - -2. Web Development - - - -3. Cross Platform Development using Flutter - - - -Having knowledge of the previous week is necessary since Git remains highly used in this week. If you think you're weak in any of the topics, then try to revise them. - - - -There's a basic project in each track as well to finish by 7th june, so get your tools back in shape! - - - -You may choose to compete in any number of tracks. - - - -## Assignment - - - -This week tasks will be on the basic of UI and UX development. It will comprise of making simple games like HANGMAN and CALCULATOR. - - - -**Note** : You have to choose one of them. - - - -### [HANGMAN](https://en.wikipedia.org/wiki/Hangman_(game)) - - - -The task that we'll be working over is to build a HANGMAN game, It is a simple word guessing game. The player tries to figure out an unknown word by guessing letters. If too many letters which do not appear in the word are guessed, the player is hanged (and loses). - - - -### Tasks - - - -- **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](https://en.wikipedia.org/wiki/Calculator) - - - -The objective is that you need to build a Calculator which will perform at least our basic mathematical operations. - - - -### Tasks - - - -- **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. - - - -## 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 7th, 2022, at 23:59. - - - -## Tracks - - - -- [Web Development](/WebDev.md) - - - -- [Android](/Android.md) - - - -- [Flutter](/Flutter.md) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e623b5c --- /dev/null +++ b/style.css @@ -0,0 +1,229 @@ +:root{ + --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:#060709; + --tertiary-colour: ; + --quaternary-colour: aliceblue ; +} + +.sci{ + animation: fade-in 0.4s ease; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fade-out { + 100% { + opacity: 0; + } + 0% { + opacity: 1; + } +} + + + + +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{ + height: 100%; + border: 0; + margin: 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; + margin-right: 500px; + Overflow-x:hidden ; + scroll-behavior:smooth; + min-width: 500px; + text-align: center; + font-size: 25px; + animation: fade-out 0.4s ease; +} +.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: 25px; +} +.history::-webkit-scrollbar { + display: none; +} + + +#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; + border-radius: 50px 50px 0 0; +} + +.red{ + color:tomato; +} +.green{ + color: aquamarine; +} +.button { + line-height: 50px; + text-align: center; + font-size: 25px; + cursor: pointer; + border-radius: 10px; + background: var(--tertiary-colour); + margin: 2%; +} + +#equal { + background-color:var(--primaary-colour); + color:var(var(--secondary-colour)); +} +#equal:hover{ + background-color:rgb(67, 255, 158); + color: var(--primaary-colour); +} + + +#scientific { + background-color: var(--primaary-colour); + color: var(--secondary-colour); + transition: 0.25s ease-in-out; +} +#scientific:hover{ + background-color:rgb(139, 67, 255); + color: var(--primaary-colour); + transition: 0.25s ease-in-out; +} + +.button:hover { + background-color: var(--secondary-colour); + color: var(--primaary-colour); + transition: 0.25s ease-in-out; + font-size: 35px; +} + + +.sci:hover{ + background-color:rgb(139, 67, 255); + color: var(--primaary-colour); + transition: 0.25s ease-in-out; + +} + + + +#darkmode-icon { + height: 30px; + min-width: 30px; + margin-top: 5px; + cursor: pointer; + justify-self: left; + margin-right: 0%; + } + +.new-element{ + font-size: 50px; + animation: fade-in 0.4s ease; +} + + +@media screen and (min-height: 200px) and (max-height:700px){ + + .history{ + margin-bottom:-15px; + font-size: 12px; + margin-right: 300px; + } + + .new-element{ + font-size: 20px; + + } + .button { + line-height: 25px; + + font-size: 15px; + + } + +} + +@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; + } +} \ No newline at end of file diff --git a/sun.png b/sun.png new file mode 100644 index 0000000..a698922 Binary files /dev/null and b/sun.png differ