diff --git a/Cool Calculator/Calculator-master/Calculator_screenshot.png b/Cool Calculator/Calculator-master/Calculator_screenshot.png new file mode 100644 index 0000000..313037d Binary files /dev/null and b/Cool Calculator/Calculator-master/Calculator_screenshot.png differ diff --git a/Cool Calculator/Calculator-master/Icon.png b/Cool Calculator/Calculator-master/Icon.png new file mode 100644 index 0000000..c531bb7 Binary files /dev/null and b/Cool Calculator/Calculator-master/Icon.png differ diff --git a/Cool Calculator/Calculator-master/README.md b/Cool Calculator/Calculator-master/README.md new file mode 100644 index 0000000..95d45b3 --- /dev/null +++ b/Cool Calculator/Calculator-master/README.md @@ -0,0 +1,4 @@ +# Calculator +A simple Calculator built using HTML, CSS and JavaScript. + +Consists of Backspace button(C), Reset button(AC) and can perform basic operations Addition, Subtraction, Multiplication, Division and Modulus. diff --git a/Cool Calculator/Calculator-master/calc.js b/Cool Calculator/Calculator-master/calc.js new file mode 100644 index 0000000..81e5694 --- /dev/null +++ b/Cool Calculator/Calculator-master/calc.js @@ -0,0 +1,27 @@ + +/*Function to display numbers on keypress*/ + +function numpress(val){ + document.getElementById("screen").value = document.getElementById("screen").value + val; +} + +/*Function to calculate the result*/ + +function equals(){ + var x = document.getElementById("screen").value; + var result = eval(x); + document.getElementById("screen").value = result; +} + +/*Function for backspace*/ + +function clearscreen(){ + var value = document.getElementById("screen").value; + document.getElementById("screen").value = value.substr(0, value.length - 1); +} + +/*Function to reset*/ + +function reset(){ + document.getElementById("screen").value =" "; +} diff --git a/Cool Calculator/Calculator-master/index.html b/Cool Calculator/Calculator-master/index.html new file mode 100644 index 0000000..eb9abb3 --- /dev/null +++ b/Cool Calculator/Calculator-master/index.html @@ -0,0 +1,43 @@ + + + + + + Calculator + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + \ No newline at end of file diff --git a/Cool Calculator/Calculator-master/style.css b/Cool Calculator/Calculator-master/style.css new file mode 100644 index 0000000..da0660d --- /dev/null +++ b/Cool Calculator/Calculator-master/style.css @@ -0,0 +1,137 @@ + +/*Body section*/ +body{ + background-color: #091921; +} + +/*Main section*/ +.main{ + width: 335px; + height: 519px; + background-color: #091921; + margin: auto; + margin-top: 110px; + -moz-box-shadow: 0 0 17px; + -webkit-box-shadow: 0 0 17px ; + box-shadow: 0 0 17px ; +} + +/*Screen section*/ +#screen{ + width: 322.6px; + height: 129px; + background-color: rgb(255, 255, 255); + border: none; + margin-left: 0.3px; + text-align: right; + padding-right: 10px; + font-size: 30px; + pointer-events: none; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight:500; +} + +/*--------Button section starting--------*/ + +/*Dark-blue buttons starting*/ +.bt{ + width: 80.3px; + height: 79.35px; + display:inline-block; + border: none; + background-color: rgba(20, 35, 61, 0.836); + font-size: 22px; + color: white; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 500; + margin-top: -2.7px; + margin-left: .45px; + transition:all .2s ease; + outline: none; + position: relative; + overflow: hidden; +} +/*Dark-blue buttons ending*/ + + +/*Clear button starting*/ +.bt1 { + width: 165.5px; + height: 76.5px; + background-color: rgb(255, 145, 42); + font-size: 26px; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: bold; + border: none; + position: relative; + left: 0.55px; + color: white; + transition: .5s; + outline:none; + overflow:hidden; +} +/*Clear button ending*/ + + +/*EqualTo button starting*/ +.bt2{ + width: 80.3px; + height: 79px; + background-color: #03afffbd; + position: relative; + left: 254.7px; + top: -79px; + text-align: center; + border: none; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; + font-weight: bold; + font-size: 31px; + color: white; + outline: none; + overflow: hidden; +} +/*EqualTo button ending*/ + + +/*Button hover-effects*/ +.bt:hover, .bt1:hover, .bt2:hover{ + background-image:linear-gradient(rgb(63, 241, 63),rgb(65, 160, 52)); +} + + +/*Button focus-effects starting*/ +.bt:after, .bt1:after, .bt2:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, .5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; +} + +@keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 1; + } + 20% { + transform: scale(15, 15); + opacity: 1; + } + 100% { + opacity: 0; + transform: scale(35, 35); + } +} + +.bt:focus:not(:active)::after, .bt1:focus:not(:active)::after, .bt2:focus:not(:active)::after { + animation: ripple .8s ease-out; +} +/*Button focus-effects ending*/ + +/*---------End of Button section---------*/ \ No newline at end of file diff --git a/Cool Calculator/Calculator_screenshot.png b/Cool Calculator/Calculator_screenshot.png new file mode 100644 index 0000000..313037d Binary files /dev/null and b/Cool Calculator/Calculator_screenshot.png differ diff --git a/Cool Calculator/Icon.png b/Cool Calculator/Icon.png new file mode 100644 index 0000000..c531bb7 Binary files /dev/null and b/Cool Calculator/Icon.png differ diff --git a/Cool Calculator/README.md b/Cool Calculator/README.md new file mode 100644 index 0000000..95d45b3 --- /dev/null +++ b/Cool Calculator/README.md @@ -0,0 +1,4 @@ +# Calculator +A simple Calculator built using HTML, CSS and JavaScript. + +Consists of Backspace button(C), Reset button(AC) and can perform basic operations Addition, Subtraction, Multiplication, Division and Modulus. diff --git a/Cool Calculator/calc.js b/Cool Calculator/calc.js new file mode 100644 index 0000000..81e5694 --- /dev/null +++ b/Cool Calculator/calc.js @@ -0,0 +1,27 @@ + +/*Function to display numbers on keypress*/ + +function numpress(val){ + document.getElementById("screen").value = document.getElementById("screen").value + val; +} + +/*Function to calculate the result*/ + +function equals(){ + var x = document.getElementById("screen").value; + var result = eval(x); + document.getElementById("screen").value = result; +} + +/*Function for backspace*/ + +function clearscreen(){ + var value = document.getElementById("screen").value; + document.getElementById("screen").value = value.substr(0, value.length - 1); +} + +/*Function to reset*/ + +function reset(){ + document.getElementById("screen").value =" "; +} diff --git a/Cool Calculator/index.html b/Cool Calculator/index.html new file mode 100644 index 0000000..eb9abb3 --- /dev/null +++ b/Cool Calculator/index.html @@ -0,0 +1,43 @@ + + + + + + Calculator + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + \ No newline at end of file diff --git a/Cool Calculator/style.css b/Cool Calculator/style.css new file mode 100644 index 0000000..da0660d --- /dev/null +++ b/Cool Calculator/style.css @@ -0,0 +1,137 @@ + +/*Body section*/ +body{ + background-color: #091921; +} + +/*Main section*/ +.main{ + width: 335px; + height: 519px; + background-color: #091921; + margin: auto; + margin-top: 110px; + -moz-box-shadow: 0 0 17px; + -webkit-box-shadow: 0 0 17px ; + box-shadow: 0 0 17px ; +} + +/*Screen section*/ +#screen{ + width: 322.6px; + height: 129px; + background-color: rgb(255, 255, 255); + border: none; + margin-left: 0.3px; + text-align: right; + padding-right: 10px; + font-size: 30px; + pointer-events: none; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight:500; +} + +/*--------Button section starting--------*/ + +/*Dark-blue buttons starting*/ +.bt{ + width: 80.3px; + height: 79.35px; + display:inline-block; + border: none; + background-color: rgba(20, 35, 61, 0.836); + font-size: 22px; + color: white; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 500; + margin-top: -2.7px; + margin-left: .45px; + transition:all .2s ease; + outline: none; + position: relative; + overflow: hidden; +} +/*Dark-blue buttons ending*/ + + +/*Clear button starting*/ +.bt1 { + width: 165.5px; + height: 76.5px; + background-color: rgb(255, 145, 42); + font-size: 26px; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: bold; + border: none; + position: relative; + left: 0.55px; + color: white; + transition: .5s; + outline:none; + overflow:hidden; +} +/*Clear button ending*/ + + +/*EqualTo button starting*/ +.bt2{ + width: 80.3px; + height: 79px; + background-color: #03afffbd; + position: relative; + left: 254.7px; + top: -79px; + text-align: center; + border: none; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; + font-weight: bold; + font-size: 31px; + color: white; + outline: none; + overflow: hidden; +} +/*EqualTo button ending*/ + + +/*Button hover-effects*/ +.bt:hover, .bt1:hover, .bt2:hover{ + background-image:linear-gradient(rgb(63, 241, 63),rgb(65, 160, 52)); +} + + +/*Button focus-effects starting*/ +.bt:after, .bt1:after, .bt2:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, .5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; +} + +@keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 1; + } + 20% { + transform: scale(15, 15); + opacity: 1; + } + 100% { + opacity: 0; + transform: scale(35, 35); + } +} + +.bt:focus:not(:active)::after, .bt1:focus:not(:active)::after, .bt2:focus:not(:active)::after { + animation: ripple .8s ease-out; +} +/*Button focus-effects ending*/ + +/*---------End of Button section---------*/ \ No newline at end of file diff --git a/Digital Clock/Digital_Clock-master/Screenshot of the built clock.png b/Digital Clock/Digital_Clock-master/Screenshot of the built clock.png new file mode 100644 index 0000000..b33e19d Binary files /dev/null and b/Digital Clock/Digital_Clock-master/Screenshot of the built clock.png differ diff --git a/Digital Clock/Digital_Clock-master/clock icon.png b/Digital Clock/Digital_Clock-master/clock icon.png new file mode 100644 index 0000000..85147b6 Binary files /dev/null and b/Digital Clock/Digital_Clock-master/clock icon.png differ diff --git a/Digital Clock/Digital_Clock-master/clock.js b/Digital Clock/Digital_Clock-master/clock.js new file mode 100644 index 0000000..a22dfef --- /dev/null +++ b/Digital Clock/Digital_Clock-master/clock.js @@ -0,0 +1,30 @@ +function clock(){ + + var hours = document.getElementById('hours'); + var minutes = document.getElementById('minutes'); + var seconds = document.getElementById('seconds'); + var ampm = document.getElementById('ampm'); + + var h = new Date().getHours(); + var m = new Date().getMinutes(); + var s = new Date().getSeconds(); + + /* am/pm section */ + var am = "AM" + if(h>12){ + h = h-12; + var am = "PM"; + } + + /* section which adds a zero before each single digits */ + h = (h < 10) ? "0" + h : h; + m = (m < 10) ? "0" + m : m; + s = (s < 10) ? "0" + s : s; + + hours.innerHTML = h; + minutes.innerHTML = m; + seconds.innerHTML = s; + ampm.innerHTML = am; + +} +var interval = setInterval(clock, 1000); \ No newline at end of file diff --git a/Digital Clock/Digital_Clock-master/index.html b/Digital Clock/Digital_Clock-master/index.html new file mode 100644 index 0000000..0a23c5f --- /dev/null +++ b/Digital Clock/Digital_Clock-master/index.html @@ -0,0 +1,26 @@ + + + + + + Digital Clock + + + + + +
+

THE TIME IS NOW

+
+
00HOURS
+
+
+
00MINUTES
+
+
+
00SECONDS
+
+

AM

+
+ + \ No newline at end of file diff --git a/Digital Clock/Digital_Clock-master/style.css b/Digital Clock/Digital_Clock-master/style.css new file mode 100644 index 0000000..656da5b --- /dev/null +++ b/Digital Clock/Digital_Clock-master/style.css @@ -0,0 +1,157 @@ + +/*backgound section*/ +body{ + background-color:rgb(7, 0, 24); +} + +/*Main section in which all the elements are contained*/ +.container{ + height: 270px; + width: 563px; + background-color: rgb(7, 0, 24); + margin-left:33%; + margin-top: 11%; + position: relative; +} + +/*Main heading ("THE TIME IS NOW")*/ +h3{ + color: whitesmoke; + font-size: 18px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + letter-spacing: 3px; + margin-left: 33%; + position: relative; + top: 35px; +} + +/*-----hours block starting-----*/ +.hours-top-part{ + height: 120px; + width: 134px; + background-color: #0581e6; + border-bottom: 2px solid; + border-color: rgb(0, 82, 136); +} + +.hours-bottom-part{ + height: 165px; + width: 134px; + background-color: #1374c4; + position: relative; + top: 63px; + float: left; +} +/*-----hours block ending------*/ + + +/*-----minutes block starting-----*/ +.minutes-top-part{ + height: 120px; + width: 134px; + background-color: #0581e6; + border-bottom: 2px solid; + border-color: rgb(0, 82, 136); +} + +.minutes-bottom-part{ + height: 165px; + width: 134px; + background-color: #1374c4; + position: relative; + top: 63px; + float: left; + margin-left: 9px ; +} +/*-----minutes block ending-----*/ + + +/*-----seconds block starting-----*/ +.seconds-top-part{ + height: 120px; + width: 134px; + background-color: #0581e6; + border-bottom: 2px solid; + border-color: rgb(0, 82, 136); +} + +.seconds-bottom-part{ + height: 165px; + width: 134px; + background-color: #1374c4; + position: relative; + top: 63px; + float: left; + margin-left: 9px; +} +/*-----seconds block ending-----*/ + + +/* Reflection */ +.hours-bottom-part, .minutes-bottom-part, .seconds-bottom-part, .meridian-part{ + -webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0, 0, 0, 0.205)); +} + + +/*Style for digits and words*/ +p1{ + font-size: 80px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + color: whitesmoke; + letter-spacing: 2px; + margin-left: 23px; +} + +p2{ + font-size: 15px; + letter-spacing: 2px; + font-weight: bold; + color: white; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: relative; + top: 62px; + left: -75px; +} + +p3{ + font-size: 15px; + letter-spacing: 2px; + font-weight: bold; + color: white; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: relative; + top: 62px; + left: -86px; +} + + +/*Meridian section (AM/PM)*/ +.meridian-part{ + height: 165px; + width: 134px; + background-color: rgb(204, 0, 126); + float: left; + position: relative; + top: 63px; + margin-left: 9px; +} + +.meridian-part:hover{ + background-color: rgb(48, 0, 48); +} + +p{ + font-size: 60px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: bold; + color: whitesmoke; + margin-top: 40px; + text-align: center; +} + + + + + + +