From 14d8f9810afb1d4ddc85965806d7bb0b744be148 Mon Sep 17 00:00:00 2001 From: Ayush Date: Wed, 27 Jul 2022 20:50:46 +0200 Subject: [PATCH] Completed with responsive UI --- Android.md | 59 ------------ Flutter.md | 73 --------------- WebDev.md | 55 ----------- index.html | 111 ++++++++++++++++++++++ script.js | 232 ++++++++++++++++++++++++++++++++++++++++++++++ style-dark.css | 68 ++++++++++++++ style-grapher.css | 26 ++++++ style-light.css | 4 + style.css | 178 +++++++++++++++++++++++++++++++++++ 9 files changed, 619 insertions(+), 187 deletions(-) delete mode 100644 Android.md delete mode 100644 Flutter.md delete mode 100644 WebDev.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style-dark.css create mode 100644 style-grapher.css create mode 100644 style-light.css create mode 100644 style.css 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 e80605c..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 7th, 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/index.html b/index.html new file mode 100644 index 0000000..24c1ed2 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + + Calculator + + + + + +
+
+ History + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + +

    +
    + + + + + + +

    +
    + + + + + + +

    +
    +
    + + + + +
    +

    +
    + + + +

    + + + +
    +

    +
    + + +

    +
    +
    + + +
    +
    +
    + + + +
    +
    +
    +
    +
      +

    • Clear previous result before entering new value

      • +
      +

    • Multiplication sign can not be skipped with brackets and other places

      • +
    +
    + + +
    + +
    + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0726ce9 --- /dev/null +++ b/script.js @@ -0,0 +1,232 @@ +const visible_text_area = document.getElementById("visible-text-area"), +hidden_text_area = document.getElementById("hidden-text-area"), +btn_degree = document.getElementById("btn-degree"), +btn_radian = document.getElementById("btn-radian"); + +//max 30 calculations can be stored +let update_history = (expr, val)=>{ + document.getElementById('history-list').innerHTML = '
  • '+expr+' = '+val+'
    • ' + document.getElementById('history-list').innerHTML; +} + +let no_of_digs = 15; +let multi_brackets_req=0; + +// arg is in degree returns in radian +let modify_arg = (arg)=>{ + if(btn_degree.checked) return (arg*Math.PI)/180; + return arg; +} + +// ans is in radian returns in degrees +let modify_ans = (ans)=>{ + if(btn_degree.checked) return (ans*180)/Math.PI; + return ans; +} + +//fucntion to calculate factorial +let fact = (x)=>{ + let f=1; + for(let i=2; i<=x; i++){ + f*=i; + } + return f; +} + +//script for working of radio buttons +btn_radian.checked = true; +btn_degree.onclick = ()=>{ + btn_radian.checked = false; + btn_degree.checked = true; +} +btn_radian.onclick = ()=>{ + btn_degree.checked = false; + btn_radian.checked = true; +} + +//function to add values in text areas +const add_value = (vval, hval)=>{ + function add(){ + visible_text_area.textContent += vval; + hidden_text_area.textContent += hval; + } + return add; +} + +//function to set values in the text areas +const set_value = (vval, hval)=>{ + visible_text_area.textContent = vval; + hidden_text_area.textContent = hval; +} + +for(let i=0;i<=9;i++){ + document.getElementById(String(i)).onclick = add_value(i, i); +} +document.getElementById("no-of-digs").onchange = ()=>{ + no_of_digs = Number(document.getElementById("no-of-digs").value); +}; +document.getElementById("btn-add").onclick = add_value('+', '+'); +document.getElementById("btn-sub").onclick = add_value('-', '-'); +document.getElementById("btn-multiply").onclick = add_value('*', '*'); +document.getElementById("btn-div").onclick = add_value('/', '/'); +document.getElementById("btn-pow").onclick = add_value('^', '**'); +document.getElementById("btn-factorial").onclick = add_value('fact(', 'fact('); +document.getElementById("btn-decimal").onclick = add_value('.', '.'); +document.getElementById("btn-e").onclick = add_value('e', 'Math.E'); +document.getElementById("btn-pi").onclick = add_value('Pi', 'Math.PI'); +document.getElementById("btn-sqrt").onclick = add_value('sqrt(', 'Math.sqrt('); +document.getElementById("btn-sin").onclick = ()=>{ + visible_text_area.textContent += 'sin('; + hidden_text_area.textContent += 'Math.sin(modify_arg('; + multi_brackets_req++; +}; +document.getElementById("btn-cos").onclick = ()=>{ + visible_text_area.textContent += 'cos('; + hidden_text_area.textContent += 'Math.cos(modify_arg('; + multi_brackets_req++; +}; +document.getElementById("btn-tan").onclick = ()=>{ + visible_text_area.textContent += 'tan('; + hidden_text_area.textContent += 'Math.tan(modify_arg('; + multi_brackets_req++; +}; +document.getElementById("btn-arcsin").onclick = ()=>{ + visible_text_area.textContent += 'arcsin('; + hidden_text_area.textContent += 'modify_ans(Math.asin('; + multi_brackets_req++; +}; +document.getElementById("btn-arccos").onclick = ()=>{ + visible_text_area.textContent += 'arccos('; + hidden_text_area.textContent += 'modify_ans(Math.acos('; + multi_brackets_req++; +}; +document.getElementById("btn-arctan").onclick = ()=>{ + visible_text_area.textContent += 'arctan('; + hidden_text_area.textContent += 'modify_ans(Math.atan('; + multi_brackets_req++; +}; +document.getElementById("btn-log").onclick = add_value('log(', 'Math.log('); +document.getElementById("btn-expo").onclick = add_value('exp(', 'Math.exp('); +document.getElementById("btn-bracket-left").onclick = add_value('(', '('); + +document.getElementById("btn-bracket-right").onclick = ()=> { + let expr1 = visible_text_area.textContent; + let expr2 = hidden_text_area.textContent; + if(multi_brackets_req>0){ + set_value(expr1+')', expr2+'))'); + multi_brackets_req--; + } + else{ + set_value(expr1+')', expr2+')'); + } +}; + +document.getElementById("btn-clear").onclick = ()=>{ + visible_text_area.textContent = hidden_text_area.textContent = ''; + multi_brackets_req=0; +}; +document.getElementById("btn-backspace").onclick = () =>{ + let expr1 = visible_text_area.textContent; + let expr2 = hidden_text_area.textContent; + let l1=expr1.length, l2=expr2.length; + + if(expr1[l1-1]=='^' || (expr1[l1-1]==')' && expr2.substr(l2-2)=='))')){ + set_value(expr1.slice(0, -1), expr2.slice(0, -2)); + } + else if(expr1.substr(l1-2)=='Pi'){ + set_value(expr1.slice(0, -2), expr2.slice(0, -7)); + } + else if(expr1.substr(l1-1)=='e'){ + set_value(expr1.slice(0, -1), expr2.slice(0, -6)); + } + else if(expr1.substr(l1-5)=='fact('){ + set_value(expr1.slice(0, -5), expr2.slice(0, -5)); + } + else if(expr1.substr(l1-5)=='sqrt('){ + set_value(expr1.slice(0, -5), expr2.slice(0, -10)); + } + else if(expr1.substr(l1-4)=='sin(' || + expr1.substr(l1-4)=='cos(' || + expr1.substr(l1-4)=='tan('){ + set_value(expr1.slice(0, -4), expr2.slice(0, -20)); + multi_brackets_req--; + } + else if(expr1.substr(l1-4)=='log(' || + expr1.substr(l1-4)=='exp('){ + set_value(expr1.slice(0, -4), expr2.slice(0, -9)); + } + else if(expr1.substr(l1-7)=='arcsin(' || + expr1.substr(l1-7)=='arccos(' || + expr1.substr(l1-7)=='arctan('){ + set_value(expr1.slice(0, -7), expr2.slice(0, -21)); + multi_brackets_req--; + } + else{ + set_value(expr1.slice(0, -1), expr2.slice(0, -1)); + } +}; + + +document.getElementById("btn-calc").onclick = ()=> { + let expr = visible_text_area.textContent; + let val = hidden_text_area.textContent; + let bracket = multi_brackets_req; + while(multi_brackets_req>0){ + val+='))'; + expr+=')'; + multi_brackets_req--; + } + try{ + val=eval(val); + } + catch{ + try{ + val=eval(val+')'); + expr=expr+')'; + + } + catch{ + alert("Invalid Expression!"); + multi_brackets_req=bracket; + return; + } + } + if(isNaN(val)){ + alert("Invalid Expression!"); + multi_brackets_req=bracket; + return; + } + if(Math.abs(val-1e-16)<1e-7) val=0; + val=String(val); + if(val.includes('.')){ + val = val.slice(0, val.indexOf('.')+no_of_digs+1); + } + update_history(expr, val); + set_value(val, val); + multi_brackets_req=0; +} + +document.getElementById("change-theme").onclick = ()=>{ + let css_sheet = document.getElementById("css-sheet"); + if(css_sheet.getAttribute("href").substr(6, 4) == 'dark'){ + css_sheet.setAttribute("href", 'style-light.css'); + document.getElementById("change-theme").value = 'Dark Mode'; + } + else{ + css_sheet.setAttribute("href", 'style-dark.css'); + document.getElementById("change-theme").value = 'Light Mode'; + } +} + +document.getElementById('btn-clear-history').onclick = ()=>{ + document.getElementById('history-list').innerHTML = ''; +} + +document.getElementById("btn-close-grapher").onclick = ()=>{ + document.getElementById("main-grapher").style.visibility = 'hidden'; + document.getElementById("main-calculator").style.visibility = 'visible'; +} + +document.getElementById("btn-grapher").onclick = ()=>{ + document.getElementById("main-grapher").style.visibility = 'visible'; + document.getElementById("main-calculator").style.visibility = 'hidden'; +} \ No newline at end of file diff --git a/style-dark.css b/style-dark.css new file mode 100644 index 0000000..66ebd81 --- /dev/null +++ b/style-dark.css @@ -0,0 +1,68 @@ +body{ + background-color: black; +} +.yellow{ + box-shadow: 1px 1px 1px 1px rgb(92, 92, 1); +} +.red{ + box-shadow: 1px 1px 1px 1px rgba(255, 0, 0, 0.664); +} +.green{ + box-shadow: 1px 1px 1px 1px rgba(26, 232, 16, 0.829); +} +input[type=radio]{ + box-shadow: none; +} +input{ + border: 1px white solid; + box-shadow: 1px 1px 1px 1px white; +} +#visible-text-area{ + color: black; + background-color: lightgrey; +} +#container{ + border: 1px white solid; +} +#dig-buttons-container input{ + background-color: lightgrey; +} +#arithematic input{ + background-color: lightgrey; +} +#math input{ + background-color: lightgrey; +} +#info{ + color: white; +} +#trigo label{ + color: white; +} +#trigo .trig input{ + background-color: lightgrey; +} +.dig-label{ + color: white; +} +#digs .digs-input{ + background-color: lightgrey; +} +#misc input{ + background-color: lightgrey; +} +#change-theme{ + background-color: lightgrey; +} +#btn-grapher{ + background-color: lightgrey; +} +#history-container{ + color: white; +} +#history-container input{ + box-shadow: 0 0 15px rgba(60, 76, 245, 0.884); +} +#main-grapher label{ + color: white; +} \ No newline at end of file diff --git a/style-grapher.css b/style-grapher.css new file mode 100644 index 0000000..3113500 --- /dev/null +++ b/style-grapher.css @@ -0,0 +1,26 @@ +#main-grapher{ + position: absolute; + left: 50%; + transform: translate(-50%, 0); + visibility: hidden; +} +#main-grapher label{ + font-size: 40px; + font-weight: bold; + margin: 10px 200px 10px 0; +} +#btn-close-grapher{ + margin-bottom: 10px; + height: 40px; + width: 70px; + background-color: rgba(255, 0, 0, 0.888); + border: 1px rgba(255, 0, 0, 0.664) solid; + color: white; + font-weight: bold; + border-radius: 10px; + box-shadow: none; +} +#grapher{ + width: 900px; + height: 800px; +} \ No newline at end of file diff --git a/style-light.css b/style-light.css new file mode 100644 index 0000000..82c258f --- /dev/null +++ b/style-light.css @@ -0,0 +1,4 @@ +#visible-text-area{ + color: white; + background-color: black; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c9bfb0e --- /dev/null +++ b/style.css @@ -0,0 +1,178 @@ +*{ + margin: 0; + padding: 0; + text-align: center; + font-size: large; +} +.yellow{ + background-color: rgba(255, 255, 0, 0.776); + border: 1px rgba(181, 181, 7, 0.909) solid; + border-radius: 1px; +} +.red{ + background-color: rgba(255, 0, 0, 0.888); + border: 1px rgba(255, 0, 0, 0.664) solid; + border-radius: 1px; +} +.green{ + background-color: rgba(26, 232, 16, 0.829); + border: 1px rgba(26, 232, 16, 0.829) solid; + border-radius: 1px; +} +#container{ + position: absolute; + left: 50%; + top: 1px; + transform: translate(-50%, 0); + width: 50%; + border-radius: 10px; +} +#dig-buttons-container input{ + width: 8%; + height: 30px; + white-space: nowrap; +} +#container{ + border: 2px black solid; +} +#arithematic input{ + width: 12.5%; + height: 30px; +} +#math input{ + width: 13.5%; + height: 30px; +} +#info{ + position: absolute; + right: 0; + bottom: 0; + margin-right: 20px; + margin-bottom: 20px; + width: 200px; +} +#info p{ + text-align: left; +} +#trigo .degree{ + margin-right: 40px; +} +#trigo label{ + font-size: 25px; + user-select: none; +} +#trigo .trig input{ + width: 25%; + height: 30px; +} +.dig-label{ + font-size: 20px; +} +#digs .digs-input{ + width: 35px; +} +#calculate input{ + width: 25%; + height: 30px; +} +#misc input{ + width: 38%; + height: 30px; +} +#type:hover{ + cursor: pointer; +} +#hidden-text-area{ + height: 0; + width: 0; + visibility: hidden; +} +#visible-text-area{ + color: white; + padding-top: 10px; + box-sizing: border-box; + font-size: 30px; + margin: 10px 10px 0 10px; + height: 60px; + background-color: black; +} +#change-theme{ + position: absolute; + top: 10px; + right: 10px; + border-radius: 2px; + height: 40px; + width: 100px; +} +#change-theme:hover{ + cursor: pointer; +} +#btn-grapher{ + position: absolute; + top: 10px; + right: 150px; + border-radius: 2px; + height: 40px; + width: 100px; +} +#btn-grapher:hover{ + cursor: pointer; +} +#history-container{ + width: auto; + position: absolute; + top: 10px; + left: 10px; + width: 300px; + max-width: 300px; + text-align: left; +} +#history-container span{ + font-size: 30px; + font-weight: bold; + margin-right: 20px; + margin-left: 10px; +} +#history-container input{ + width: 70px; + height: 25px; + background-color: rgba(72, 124, 255, 0.781); + border: 2px rgba(37, 54, 242, 0.884) solid; + border-radius: 10px; +} + +#history-list{ + margin-top: 10px; + text-align: left; + padding-left: 20px; + padding-right: 3px; +} +#history-list li{ + text-align: left; + font-size: 17px; +} + +@media screen and (max-width: 992px) { + #btn-grapher{ + top: 80px; + right: 7%; + } + #change-theme{ + right: 7%; + } + #info{ + visibility: hidden; + } + } +@media screen and (max-width: 876px) { + #history-container{ + width: 200px; + } + #btn-grapher{ + top: 80px; + right: 2%; + } + #change-theme{ + right: 2%; + } +} \ No newline at end of file