21 |
22 | Min : ${data.main.temp_min} °C
23 | Max : ${data.main.temp_max} °C
24 |
25 |
26 | Humidity : ${data.main.humidity} %
27 | Wind : ${data.wind.speed} km/hr
28 |
29 |
12 |
15 |
16 |
17 |
18 |
19 |
20 | Student Grade Calcy
21 |
22 |
23 |
47 |
48 |
49 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/projects/percentcalc/script.js:
--------------------------------------------------------------------------------
1 | const calc = () =>{
2 | let phy = document.getElementById('phy').value;
3 | let chem = document.getElementById('chem').value;
4 | let maths = document.getElementById('math').value;
5 | let cs = document.getElementById('cs').value;
6 | let eng = document.getElementById('eng').value;
7 | let grade = "";
8 |
9 | let totalGrade = parseFloat(phy) + parseFloat(chem) + parseFloat(maths) + parseFloat(cs) + parseFloat(eng);
10 | let percent = (totalGrade/500) * 100;
11 |
12 | if(percent <= 100 && percent >= 80){
13 | grade = 'A';
14 | }else if(percent <= 79 && percent >= 60){
15 | grade = 'B';
16 | }else if(percent <= 59 && percent >= 40){
17 | grade = 'C';
18 | }else{
19 | grade = 'F';
20 | }
21 |
22 | if(percent >= 39.5){
23 | document.getElementById('result').innerHTML = `Total Marks Out of 500 : ${totalGrade}
Percentage : ${percent}%
Grade : ${grade} (You are Pass) `
24 | }
25 | else{
26 | document.getElementById('result').innerHTML = `Total Marks Out of 500 : ${totalGrade}
Percentage : ${percent}%
Grade : ${grade} (You are Fail) `
27 | }
28 | }
--------------------------------------------------------------------------------
/projects/percentcalc/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
2 |
3 | body {
4 | background: linear-gradient(to right, #da22ff, #9733ee);;
5 | font-size: 62.5%;
6 | overflow: hidden;
7 | }
8 | body, button, input {
9 | font-family: 'Poppins', sans-serif;
10 | font-weight: 700;
11 | letter-spacing: .1rem;
12 | }
13 | .background {
14 | display: flex;
15 | min-height: 100vh;
16 | }
17 | .backbtn {
18 | position: absolute;
19 | font-size: 2rem;
20 | float: left;
21 | cursor: pointer;
22 | margin-top: 1.5rem;
23 | margin-left: 10rem;
24 | color:#fff;
25 | }
26 | .backbtn a{
27 | text-decoration: none;
28 | color: inherit;
29 | }
30 | .container {
31 | flex: 0 1 30rem;
32 | margin: auto;
33 | padding: 1rem;
34 | }
35 | .screen {
36 | position: relative;
37 | border-radius: 1rem;
38 | background: rgba(0, 0, 0, 0.7);
39 | transform-style: preserve-3d;
40 | transition: .1s;
41 | box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
42 | }
43 | .screen-body {
44 | display: block;
45 | }
46 | .form-body {
47 | flex: 1;
48 | padding: 2rem;
49 | }
50 | .title {
51 | justify-content: center;
52 | align-items: center;
53 | color: #ffee04;
54 | font-size: 2rem;
55 | padding: 1.5rem;
56 | text-transform: uppercase;
57 | display: flex;
58 | }
59 | .inputs {
60 | margin-bottom: 1rem;
61 | }
62 | input {
63 | padding: 10px 0;
64 | background: none;
65 | border: none;
66 | border-bottom: 1px solid rgb(199, 198, 198);
67 | color: rgb(252, 252, 252);
68 | font-size: .9rem;
69 | text-transform: uppercase;
70 | outline: none;
71 | transition: border-color .2s;
72 | width: 100%;
73 | }
74 | input::placeholder {
75 | color: rgb(230, 227, 227);
76 | }
77 | input:focus {
78 | border-bottom-color: rgb(235, 233, 233);
79 | }
80 | .result{
81 | color: rgb(255, 255, 255);
82 | font-size: 1rem;
83 | padding-bottom: .2rem;
84 | margin-left: 1rem;
85 | text-align: left;
86 | }
87 | .form-btn{
88 | margin-top: 2rem;
89 | text-align: center;
90 | }
91 | .btn {
92 | line-height: 0;
93 | padding: 1rem 1rem;
94 | border-radius: .5rem;
95 | transition: 0.5s;
96 | color: #fff;
97 | cursor: pointer;
98 | background: #e41919;
99 | }
100 | .btn span {
101 | font-weight: 600;
102 | font-size: 1rem;
103 | }
104 | .btn i {
105 | margin-left: 0.2rem;
106 | font-size: .8rem;
107 | transition: 0.3s;
108 | }
109 | .btn:hover i {
110 | transform: translateX(5px);
111 | }
--------------------------------------------------------------------------------
/projects/pwdgen/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Password Generator
9 |
10 |
11 |
12 |
15 |
16 |
Password Generator
17 |
23 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/projects/pwdgen/script.js:
--------------------------------------------------------------------------------
1 | const empty = "";
2 | const uCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
3 | const lCase = "abcdefghijklmnopqrstuvwxyz";
4 | const number = "0123456789";
5 | const symbol = "!@#$%^&*=-_";
6 |
7 | const pLength = document.getElementById('plength');
8 | const upperCase = document.getElementById('puppercase');
9 | const lowerCase = document.getElementById('plowercase');
10 | const pNumber = document.getElementById('pnumber');
11 | const pSymbol = document.getElementById('psymbol');
12 | const submit = document.getElementById('submit');
13 | const password = document.getElementById('pwd');
14 |
15 | submit.addEventListener('click', ()=>{
16 | let initPwd = empty;
17 | (upperCase.checked) ? initPwd += uCase : "";
18 | (lowerCase.checked) ? initPwd += lCase : "";
19 | (pNumber.checked) ? initPwd += number : "";
20 | (pSymbol.checked) ? initPwd += symbol : "";
21 |
22 | password.value = generatePwd(pLength.value,initPwd);
23 | });
24 |
25 | function generatePwd(l, initPwd){
26 | let pass = "";
27 | for (let i=0;i
{
36 | if(password.value == ""){
37 | alert("Please generate a password!");
38 | }else{
39 | password.select();
40 | document.execCommand("copy");
41 | alert("Password has been copied to clipboard.");
42 | }
43 | });
--------------------------------------------------------------------------------
/projects/pwdgen/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
3 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
4 |
5 | *{
6 | padding: 0;
7 | margin: 0;
8 | box-sizing: border-box;
9 | }
10 | body{
11 | background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
12 | display: flex;
13 | justify-content: center;
14 | font-family: 'Roboto', sans-serif;
15 | align-items: center;
16 | height: 100vh;
17 | }
18 |
19 | .container{
20 | background: linear-gradient(#FF4331, #D31A50);
21 | padding: 20px;
22 | border-radius: 5px;
23 | width: 350px;
24 | }
25 | h1{
26 | font-size: 30px;
27 | letter-spacing: 1px;
28 | color: #fff;
29 | text-align: center;
30 | margin-bottom: 10px;
31 | }
32 | .form-control{
33 | display: flex;
34 | justify-content: space-between;
35 | align-items: center;
36 | padding: 10px 0;
37 | color: #fff;
38 | border-bottom: 1px solid #eee;
39 | }
40 | .form-control label{
41 | cursor: pointer;
42 | }
43 | .header{
44 | position: relative;
45 | }
46 | .header input{
47 | width: 100%;
48 | height: 100%;
49 | background: rgb(68, 68, 68);
50 | padding: 14px;
51 | color: #fff;
52 | outline: none;
53 | border: none;
54 | border-radius: 4px;
55 | font-size: 16px;
56 | }
57 |
58 | .header button,
59 | .form-control input[type=number]{
60 | padding: 3px 5px;
61 | background-color: #eee;
62 | outline: none;
63 | border: none;
64 | border-radius: 3px;
65 | }
66 | .header button{
67 | position: absolute;
68 | padding: 11px;
69 | font-size: 21px;
70 | right: 0;
71 | cursor: pointer;
72 | color: rgb(41, 41, 41);
73 | }
74 | #submit{
75 | width: 100%;
76 | padding: 15px;
77 | margin-top: 10px;
78 | background: #222222;
79 | font-size: 18px;
80 | font-family: 'Nunito', sans-serif;
81 | font-weight: 600;
82 | outline: none;border: none;
83 | border-radius: 3px;
84 | color: #fff;
85 | cursor: pointer;
86 | transition: .3s;
87 | display: inline-block;
88 | }
89 | #submit:hover{
90 | background: rgb(51, 51, 51);
91 | }
92 | #submit span {
93 | cursor: pointer;
94 | display: inline-block;
95 | position: relative;
96 | transition: 0.5s;
97 | }
98 | #submit span:after {
99 | content: '\00bb';
100 | position: absolute;
101 | opacity: 0;
102 | top: -8px;
103 | font-size: 28px;
104 | right: -20px;
105 | transition: 0.5s;
106 | }
107 | #submit:hover span {
108 | padding-right: 25px;
109 | }
110 | #submit:hover span:after {
111 | opacity: 1;
112 | right: 0;
113 | }
114 |
115 |
116 | .backbtn {
117 | position: absolute;
118 | font-size: 2rem;
119 | float: left;
120 | cursor: pointer;
121 | top: 3rem;
122 | left: 8rem;
123 | }
124 | .backbtn a{
125 | text-decoration: none;
126 | color: #fff;
127 | }
--------------------------------------------------------------------------------
/projects/quizapp/assets/fav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jigar-sable/JavaScript-Projects/8ff97cbaa40f77591b2da8439851835f29704dbd/projects/quizapp/assets/fav.png
--------------------------------------------------------------------------------
/projects/quizapp/assets/quizes.js:
--------------------------------------------------------------------------------
1 | const quizArr = [
2 | {
3 | question:"What does HTML stand for?",
4 | opt1:"Hyperlinks Text Mark Language",
5 | opt2:"Hyper Text Markup Language",
6 | opt3:"Hyper Tag Markup Language",
7 | opt4:"Hyper Tool Multi Language",
8 | ans:"ans2"
9 | },
10 | {
11 | question:"What does CSS stand for?",
12 | opt1:"Computer Style Sheets",
13 | opt2:"Colorful Style Sheets",
14 | opt3:"Cascading Style Sheets",
15 | opt4:"Creative Style Sheets",
16 | ans:"ans3"
17 | },
18 | {
19 | question:"What does XML stand for?",
20 | opt1:"eXecutale Markup Language",
21 | opt2:"eXtensible Markup Language",
22 | opt3:"eXamine Multiple Language",
23 | opt4:"eXtra Multi-Program Language",
24 | ans:"ans2"
25 | },
26 | {
27 | question:"What does PHP stand for?",
28 | opt1:"Hypertext Programming",
29 | opt2:"Hometext Preprocessor",
30 | opt3:"Hypertext Preprogramming",
31 | opt4:"Hypertext Preprocessor",
32 | ans:"ans4"
33 | },
34 | {
35 | question:"What does SQL stand for?",
36 | opt1:"Stylesheet Query Language",
37 | opt2:"Structured Query Language",
38 | opt3:"Stylish Query Language",
39 | opt4:"Statement Query Language",
40 | ans:"ans2"
41 | }
42 | ];
--------------------------------------------------------------------------------
/projects/quizapp/assets/script.js:
--------------------------------------------------------------------------------
1 | const question = document.querySelector('.question');
2 | const option1 = document.querySelector('#opt1');
3 | const option2 = document.querySelector('#opt2');
4 | const option3 = document.querySelector('#opt3');
5 | const option4 = document.querySelector('#opt4');
6 | const submitBtn = document.querySelector('#submit');
7 | const options = document.querySelectorAll('.answer');
8 | const quizWrapper = document.querySelector('#quiz-wrapper');
9 | const result = document.querySelector('#result');
10 |
11 | let queIndex = 0;
12 | let score = 0;
13 |
14 | const loadQuestion = () => {
15 | let queList = quizArr[queIndex];
16 | question.innerHTML = `${queIndex + 1}. ${queList.question}`;
17 | option1.innerHTML = queList.opt1;
18 | option2.innerHTML = queList.opt2;
19 | option3.innerHTML = queList.opt3;
20 | option4.innerHTML = queList.opt4;
21 | }
22 |
23 | loadQuestion(queIndex);
24 |
25 | const getCheckedAnswer = () => {
26 | let selectedOption;
27 |
28 | options.forEach((option) => {
29 | if(option.checked){
30 | selectedOption = option.id;
31 | }
32 | });
33 | return selectedOption;
34 | }
35 |
36 | const deselectAll = () => {
37 | options.forEach(option => option.checked = false);
38 | }
39 |
40 | submitBtn.addEventListener('click', () => {
41 | const checkedAnswer = getCheckedAnswer();
42 | // console.log(checkedAnswer);
43 | deselectAll();
44 | if(checkedAnswer === quizArr[queIndex].ans) {
45 | score++;
46 | // console.log(score);
47 | }
48 | queIndex++;
49 | if(queIndex < quizArr.length){
50 | loadQuestion(queIndex);
51 | } else {
52 | quizWrapper.classList.add('hidden');
53 | result.innerHTML = `
54 | Your Score Is : ${score}/${quizArr.length}
55 | Restart
56 | `;
57 | }
58 | });
--------------------------------------------------------------------------------
/projects/quizapp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Quiz App | JavaScript
8 |
19 |
20 |
21 |
1. Question
22 |
43 |
44 |
Submit
45 |
46 |
47 |
48 |
50 |
51 |
201 |
202 |
${elm.name}
203 |
${elm.artist}
204 |
00:00
207 | `;
208 | ulTag.insertAdjacentHTML('beforeend', liTag);
209 |
210 | let liAudioTagDuration = ulTag.querySelector(`#${elm.src}`);
211 | let liAudioTag = ulTag.querySelector(`.${elm.src}`);
212 |
213 | liAudioTag.addEventListener('loadeddata', () => {
214 | let audioDuration = liAudioTag.duration;
215 | let totalMin = Math.floor(audioDuration / 60);
216 | let totalSec = Math.floor(audioDuration % 60);
217 | if(totalMin<10){
218 | totalMin = `0${totalMin}`;
219 | }
220 | if(totalSec<10){
221 | totalSec = `0${totalSec}`;
222 | }
223 | liAudioTagDuration.textContent = `${totalMin}:${totalSec}`;
224 | liAudioTagDuration.setAttribute('t-duration', `${totalMin}:${totalSec}`);
225 | });
226 | });
227 |
228 | // play particular song on click list item
229 | const allLiTags = ulTag.querySelectorAll('li');
230 |
231 | // add class and set duration of playing song
232 | const playingNow = () => {
233 |
234 | allLiTags.forEach((liTag) => {
235 | let audioDur = liTag.querySelector('.audio-duration');
236 |
237 | if(liTag.classList.contains('playing')){
238 | liTag.classList.remove('playing');
239 | audioDur.textContent = audioDur.getAttribute('t-duration');;
240 | }
241 |
242 | if(liTag.getAttribute('liIndex') == musicIndex) {
243 | liTag.classList.add('playing');
244 | audioDur.textContent = "Playing Now";
245 | }
246 |
247 | liTag.setAttribute('onclick', "clicked(this)");
248 | });
249 |
250 | }
251 |
252 | // play song on click of list item
253 | const clicked = (el) => {
254 | let liIndex = el.getAttribute('liIndex');
255 | musicIndex = liIndex;
256 | loadMusic(musicIndex);
257 | playMusic();
258 | playingNow();
259 | }
--------------------------------------------------------------------------------
/projects/songify/assets/songs.js:
--------------------------------------------------------------------------------
1 | let songs = [
2 | {
3 | name: "Flares",
4 | artist: "NIVIRO",
5 | img: "cover8",
6 | src: "song8"
7 | },
8 | {
9 | name: "Phoenix",
10 | artist: "Halvorsen, Netrum",
11 | img: "cover2",
12 | src: "song2"
13 | },
14 | {
15 | name: "Father",
16 | artist: "Diamond Eyes",
17 | img: "cover3",
18 | src: "song3"
19 | },
20 | {
21 | name: "Anonymous Music",
22 | artist: "Unknown",
23 | img: "cover1",
24 | src: "song1"
25 | },
26 | {
27 | name: "Bittersweet",
28 | artist: "Roses, Time To Talk",
29 | img: "cover4",
30 | src: "song4"
31 | },
32 | {
33 | name: "Time",
34 | artist: "Syn Cole",
35 | img: "cover5",
36 | src: "song5"
37 | },
38 | {
39 | name: "Lights",
40 | artist: "Whales",
41 | img: "cover10",
42 | src: "song10"
43 | },
44 | {
45 | name: "Never Give Up",
46 | artist: "Steve Hartz",
47 | img: "cover11",
48 | src: "song11"
49 | },
50 | {
51 | name: "Memory",
52 | artist: "RUD, Elektronomia",
53 | img: "cover12",
54 | src: "song12"
55 | },
56 | {
57 | name: "Victory",
58 | artist: "Poylow",
59 | img: "cover6",
60 | src: "song6"
61 | },
62 | {
63 | name: "Grow",
64 | artist: "VØR, Alisky",
65 | img: "cover7",
66 | src: "song7"
67 | },
68 | {
69 | name: "Firefly",
70 | artist: "Andromedik",
71 | img: "cover9",
72 | src: "song9"
73 | },
74 | {
75 | name: "Chasing Stars",
76 | artist: "STAR SEED",
77 | img: "cover13",
78 | src: "song13"
79 | }
80 | ]
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_anim.scss:
--------------------------------------------------------------------------------
1 | @keyframes rotateCover {
2 | from {
3 | transform: rotate(0deg);
4 | }
5 | to {
6 | transform: rotate(360deg);
7 | }
8 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_colors.scss:
--------------------------------------------------------------------------------
1 | $yellow : #ffd900;
2 | $orange : #ff6600;
3 | $lightblack : #444;
4 | $white : #ffffff;
5 | $darkwhite : #cecaca;
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_controls.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'mixins';
3 |
4 | .controls {
5 | @include flexCenter;
6 | margin: 4rem 0 .5rem 0;
7 |
8 | i {
9 | font-size: 3rem;
10 | color: $orange;
11 | cursor: pointer;
12 |
13 | &:nth-child(2),
14 | &:nth-child(4) {
15 | font-size: 4rem;
16 | }
17 |
18 | &:hover {
19 | color: #d85600;
20 | }
21 | }
22 |
23 | #prev {
24 | margin-right: -1.2rem;
25 | }
26 |
27 | #next {
28 | margin-left: -1.2rem;
29 | }
30 |
31 | .play-pause {
32 | height: 5rem;
33 | width: 5rem;
34 | background: $orange;
35 | box-shadow: 0 .2rem 2rem .1rem $yellow;
36 | border-radius: 50%;
37 | display: flex;
38 | align-items: center;
39 | justify-content: center;
40 | transition: .2s ease-out;
41 |
42 | i {
43 | height: 4rem;
44 | width: 4rem;
45 | line-height: 4rem;
46 | text-align: center;
47 | border-radius: inherit;
48 | background: inherit;
49 | position: relative;
50 | color: $white;
51 | }
52 |
53 | &:hover {
54 | background: #d85600;
55 | transform: scale(1.07);
56 | }
57 | }
58 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin flexCenter {
2 | display: flex;
3 | justify-content: space-between;
4 | align-items: center;
5 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_music_list.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'mixins';
3 |
4 | .music_list {
5 | padding: 2rem 3rem 1.5rem 3rem;
6 | max-height: 55rem;
7 | width: 35rem;
8 | border-radius: 1.5rem;
9 | background: $white;
10 | transition: all .14s ease-out;
11 | box-shadow: 0px .5rem 1.5rem rgba(0, 0, 0, .35);
12 |
13 | .header {
14 | @include flexCenter;
15 | justify-content: flex-start;
16 | font-size: 2rem;
17 | color: $lightblack;
18 |
19 | span {
20 | margin-left: 1rem;
21 | }
22 | }
23 |
24 | ul {
25 | margin: 1rem 0;
26 | max-height: 50rem;
27 | height: 100%;
28 | overflow-y: auto;
29 |
30 | &::-webkit-scrollbar {
31 | width: .3rem;
32 | height: .3rem;
33 | }
34 | &::-webkit-scrollbar-thumb {
35 | background: $orange;
36 | }
37 | &::-webkit-scrollbar-track {
38 | background: rgb(221, 221, 221);
39 | }
40 |
41 | li {
42 | @include flexCenter;
43 | list-style: none;
44 | cursor: pointer;
45 | padding: 1rem 1rem 1rem 0;
46 | color: $lightblack;
47 | border-bottom: .1rem solid #e5e5e5;
48 |
49 | &:last-child {
50 | border-bottom: 0px;
51 | }
52 |
53 | .row {
54 | span {
55 | font-size: 1.8rem;
56 | }
57 | p {
58 | font-size: 1.1rem;
59 | opacity: .9;
60 | }
61 | }
62 |
63 | .audio-duration {
64 | font-size: 1.5rem;
65 | }
66 |
67 | &:hover {
68 | background: rgba(0,0,0,.03);
69 | }
70 | }
71 |
72 | .playing {
73 | color: $orange;
74 | pointer-events: none;
75 | font-weight: 500;
76 |
77 | }
78 | }
79 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_music_player.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'mixins';
3 |
4 | .music_player {
5 | position: relative;
6 | overflow: hidden;
7 | width: 35rem;
8 | min-height: 50rem;
9 | border-radius: 1.5rem;
10 | padding: 3rem;
11 | background: $white;
12 | box-shadow: 0px .5rem 1.5rem rgba(0, 0, 0, .35);
13 |
14 | .header {
15 | @include flexCenter;
16 |
17 | i {
18 | font-size: 3rem;
19 | color: $lightblack;
20 | }
21 |
22 | span {
23 | font-size: 2rem;
24 | color: $lightblack;
25 | }
26 | }
27 |
28 | .songDetails {
29 | text-align: center;
30 | margin: 3rem 0;
31 | color: $lightblack;
32 |
33 | .name {
34 | font-size: 2.2rem;
35 | font-weight: 500;
36 | }
37 |
38 | .artist {
39 | opacity: .8;
40 | font-size: 1.6rem;
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_player_cover.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'mixins';
3 | @import 'anim';
4 |
5 |
6 | .imgBox {
7 | width: 25rem;
8 | height: 25rem;
9 | margin: auto;
10 | margin-top: 2.5rem;
11 |
12 | img {
13 | width: 100%;
14 | height: 100%;
15 | object-fit: cover;
16 | border-radius: 50%;
17 | box-shadow: 0 .5rem 3rem .1rem rgba(0, 0, 0, .2);
18 | }
19 | .anim {
20 | animation: rotateCover 3s linear infinite;
21 | }
22 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/_progress.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'mixins';
3 |
4 | .progressBox {
5 | height: .6rem;
6 | width: 100%;
7 | border-radius: 5rem;
8 | background: #e9e9e9;
9 | cursor: pointer;
10 |
11 | .progress-bar {
12 | height: inherit;
13 | width: 0%;
14 | position: relative;
15 | border-radius: inherit;
16 | background: linear-gradient(90deg, $yellow 0%, $orange 100%);
17 |
18 | &::before {
19 | content: '';
20 | position: absolute;
21 | height: 1.2rem;
22 | width: 1.2rem;
23 | border-radius: inherit;
24 | top: 50%;
25 | right: -.5rem;
26 | transform: translateY(-50%);
27 | background: $orange;
28 | pointer-events: none;
29 | z-index: 2;
30 | opacity: 0;
31 | transition: opacity .2s ease;
32 | }
33 | }
34 |
35 | &:hover .progress-bar::before {
36 | opacity: 1;
37 | }
38 |
39 | .timer {
40 | @include flexCenter;
41 | margin-top: .5rem;
42 |
43 | span {
44 | font-size: 1.3rem;
45 | font-weight: 500;
46 | color: $lightblack;
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
2 | *,
3 | *::before, *::after {
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | html {
9 | font-size: 62.5%;
10 | font-family: 'Poppins', sans-serif;
11 | }
12 |
13 | .container {
14 | display: -webkit-box;
15 | display: -ms-flexbox;
16 | display: flex;
17 | -webkit-box-pack: center;
18 | -ms-flex-pack: center;
19 | justify-content: center;
20 | -webkit-box-align: center;
21 | -ms-flex-align: center;
22 | align-items: center;
23 | gap: 2rem;
24 | -ms-flex-wrap: wrap;
25 | flex-wrap: wrap;
26 | min-height: 100vh;
27 | background: -webkit-gradient(linear, left top, right top, from(#da22ff), to(#9733ee));
28 | background: linear-gradient(to right, #da22ff, #9733ee);
29 | }
30 |
31 | @media screen and (max-width: 460px) {
32 | html {
33 | font-size: 55%;
34 | }
35 | .container {
36 | padding: 1.5rem;
37 | }
38 | }
39 |
40 | .music_player {
41 | position: relative;
42 | overflow: hidden;
43 | width: 35rem;
44 | min-height: 50rem;
45 | border-radius: 1.5rem;
46 | padding: 3rem;
47 | background: #ffffff;
48 | -webkit-box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
49 | box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
50 | }
51 |
52 | .music_player .header {
53 | display: -webkit-box;
54 | display: -ms-flexbox;
55 | display: flex;
56 | -webkit-box-pack: justify;
57 | -ms-flex-pack: justify;
58 | justify-content: space-between;
59 | -webkit-box-align: center;
60 | -ms-flex-align: center;
61 | align-items: center;
62 | }
63 |
64 | .music_player .header i {
65 | font-size: 3rem;
66 | color: #444;
67 | }
68 |
69 | .music_player .header span {
70 | font-size: 2rem;
71 | color: #444;
72 | }
73 |
74 | .music_player .songDetails {
75 | text-align: center;
76 | margin: 3rem 0;
77 | color: #444;
78 | }
79 |
80 | .music_player .songDetails .name {
81 | font-size: 2.2rem;
82 | font-weight: 500;
83 | }
84 |
85 | .music_player .songDetails .artist {
86 | opacity: .8;
87 | font-size: 1.6rem;
88 | }
89 |
90 | @-webkit-keyframes rotateCover {
91 | from {
92 | -webkit-transform: rotate(0deg);
93 | transform: rotate(0deg);
94 | }
95 | to {
96 | -webkit-transform: rotate(360deg);
97 | transform: rotate(360deg);
98 | }
99 | }
100 |
101 | @keyframes rotateCover {
102 | from {
103 | -webkit-transform: rotate(0deg);
104 | transform: rotate(0deg);
105 | }
106 | to {
107 | -webkit-transform: rotate(360deg);
108 | transform: rotate(360deg);
109 | }
110 | }
111 |
112 | .imgBox {
113 | width: 25rem;
114 | height: 25rem;
115 | margin: auto;
116 | margin-top: 2.5rem;
117 | }
118 |
119 | .imgBox img {
120 | width: 100%;
121 | height: 100%;
122 | -o-object-fit: cover;
123 | object-fit: cover;
124 | border-radius: 50%;
125 | -webkit-box-shadow: 0 0.5rem 3rem 0.1rem rgba(0, 0, 0, 0.2);
126 | box-shadow: 0 0.5rem 3rem 0.1rem rgba(0, 0, 0, 0.2);
127 | }
128 |
129 | .imgBox .anim {
130 | -webkit-animation: rotateCover 3s linear infinite;
131 | animation: rotateCover 3s linear infinite;
132 | }
133 |
134 | .progressBox {
135 | height: .6rem;
136 | width: 100%;
137 | border-radius: 5rem;
138 | background: #e9e9e9;
139 | cursor: pointer;
140 | }
141 |
142 | .progressBox .progress-bar {
143 | height: inherit;
144 | width: 0%;
145 | position: relative;
146 | border-radius: inherit;
147 | background: -webkit-gradient(linear, left top, right top, from(#ffd900), to(#ff6600));
148 | background: linear-gradient(90deg, #ffd900 0%, #ff6600 100%);
149 | }
150 |
151 | .progressBox .progress-bar::before {
152 | content: '';
153 | position: absolute;
154 | height: 1.2rem;
155 | width: 1.2rem;
156 | border-radius: inherit;
157 | top: 50%;
158 | right: -.5rem;
159 | -webkit-transform: translateY(-50%);
160 | transform: translateY(-50%);
161 | background: #ff6600;
162 | pointer-events: none;
163 | z-index: 2;
164 | opacity: 0;
165 | -webkit-transition: opacity .2s ease;
166 | transition: opacity .2s ease;
167 | }
168 |
169 | .progressBox:hover .progress-bar::before {
170 | opacity: 1;
171 | }
172 |
173 | .progressBox .timer {
174 | display: -webkit-box;
175 | display: -ms-flexbox;
176 | display: flex;
177 | -webkit-box-pack: justify;
178 | -ms-flex-pack: justify;
179 | justify-content: space-between;
180 | -webkit-box-align: center;
181 | -ms-flex-align: center;
182 | align-items: center;
183 | margin-top: .5rem;
184 | }
185 |
186 | .progressBox .timer span {
187 | font-size: 1.3rem;
188 | font-weight: 500;
189 | color: #444;
190 | }
191 |
192 | .controls {
193 | display: -webkit-box;
194 | display: -ms-flexbox;
195 | display: flex;
196 | -webkit-box-pack: justify;
197 | -ms-flex-pack: justify;
198 | justify-content: space-between;
199 | -webkit-box-align: center;
200 | -ms-flex-align: center;
201 | align-items: center;
202 | margin: 4rem 0 .5rem 0;
203 | }
204 |
205 | .controls i {
206 | font-size: 3rem;
207 | color: #ff6600;
208 | cursor: pointer;
209 | }
210 |
211 | .controls i:nth-child(2), .controls i:nth-child(4) {
212 | font-size: 4rem;
213 | }
214 |
215 | .controls i:hover {
216 | color: #d85600;
217 | }
218 |
219 | .controls #prev {
220 | margin-right: -1.2rem;
221 | }
222 |
223 | .controls #next {
224 | margin-left: -1.2rem;
225 | }
226 |
227 | .controls .play-pause {
228 | height: 5rem;
229 | width: 5rem;
230 | background: #ff6600;
231 | -webkit-box-shadow: 0 0.2rem 2rem 0.1rem #ffd900;
232 | box-shadow: 0 0.2rem 2rem 0.1rem #ffd900;
233 | border-radius: 50%;
234 | display: -webkit-box;
235 | display: -ms-flexbox;
236 | display: flex;
237 | -webkit-box-align: center;
238 | -ms-flex-align: center;
239 | align-items: center;
240 | -webkit-box-pack: center;
241 | -ms-flex-pack: center;
242 | justify-content: center;
243 | -webkit-transition: .2s ease-out;
244 | transition: .2s ease-out;
245 | }
246 |
247 | .controls .play-pause i {
248 | height: 4rem;
249 | width: 4rem;
250 | line-height: 4rem;
251 | text-align: center;
252 | border-radius: inherit;
253 | background: inherit;
254 | position: relative;
255 | color: #ffffff;
256 | }
257 |
258 | .controls .play-pause:hover {
259 | background: #d85600;
260 | -webkit-transform: scale(1.07);
261 | transform: scale(1.07);
262 | }
263 |
264 | .music_list {
265 | padding: 2rem 3rem 1.5rem 3rem;
266 | max-height: 55rem;
267 | width: 35rem;
268 | border-radius: 1.5rem;
269 | background: #ffffff;
270 | -webkit-transition: all .14s ease-out;
271 | transition: all .14s ease-out;
272 | -webkit-box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
273 | box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
274 | }
275 |
276 | .music_list .header {
277 | display: -webkit-box;
278 | display: -ms-flexbox;
279 | display: flex;
280 | -webkit-box-pack: justify;
281 | -ms-flex-pack: justify;
282 | justify-content: space-between;
283 | -webkit-box-align: center;
284 | -ms-flex-align: center;
285 | align-items: center;
286 | -webkit-box-pack: start;
287 | -ms-flex-pack: start;
288 | justify-content: flex-start;
289 | font-size: 2rem;
290 | color: #444;
291 | }
292 |
293 | .music_list .header span {
294 | margin-left: 1rem;
295 | }
296 |
297 | .music_list ul {
298 | margin: 1rem 0;
299 | max-height: 50rem;
300 | height: 100%;
301 | overflow-y: auto;
302 | }
303 |
304 | .music_list ul::-webkit-scrollbar {
305 | width: .3rem;
306 | height: .3rem;
307 | }
308 |
309 | .music_list ul::-webkit-scrollbar-thumb {
310 | background: #ff6600;
311 | }
312 |
313 | .music_list ul::-webkit-scrollbar-track {
314 | background: #dddddd;
315 | }
316 |
317 | .music_list ul li {
318 | display: -webkit-box;
319 | display: -ms-flexbox;
320 | display: flex;
321 | -webkit-box-pack: justify;
322 | -ms-flex-pack: justify;
323 | justify-content: space-between;
324 | -webkit-box-align: center;
325 | -ms-flex-align: center;
326 | align-items: center;
327 | list-style: none;
328 | cursor: pointer;
329 | padding: 1rem 1rem 1rem 0;
330 | color: #444;
331 | border-bottom: .1rem solid #e5e5e5;
332 | }
333 |
334 | .music_list ul li:last-child {
335 | border-bottom: 0px;
336 | }
337 |
338 | .music_list ul li .row span {
339 | font-size: 1.8rem;
340 | }
341 |
342 | .music_list ul li .row p {
343 | font-size: 1.1rem;
344 | opacity: .9;
345 | }
346 |
347 | .music_list ul li .audio-duration {
348 | font-size: 1.5rem;
349 | }
350 |
351 | .music_list ul li:hover {
352 | background: rgba(0, 0, 0, 0.03);
353 | }
354 |
355 | .music_list ul .playing {
356 | color: #ff6600;
357 | pointer-events: none;
358 | font-weight: 500;
359 | }
360 | /*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/projects/songify/assets/styles/style.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": [
5 | "style.scss",
6 | "_music_player.scss",
7 | "_colors.scss",
8 | "_mixins.scss",
9 | "_player_cover.scss",
10 | "_colors.scss",
11 | "_mixins.scss",
12 | "_anim.scss",
13 | "_progress.scss",
14 | "_colors.scss",
15 | "_mixins.scss",
16 | "_controls.scss",
17 | "_colors.scss",
18 | "_mixins.scss",
19 | "_music_list.scss",
20 | "_colors.scss",
21 | "_mixins.scss"
22 | ],
23 | "names": [],
24 | "file": "style.css"
25 | }
--------------------------------------------------------------------------------
/projects/songify/assets/styles/style.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2 |
3 | *,
4 | *::before, *::after {
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | html {
10 | font-size: 62.5%;
11 | font-family: 'Poppins', sans-serif;
12 | }
13 |
14 | .container {
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | gap: 2rem;
19 | flex-wrap: wrap;
20 | min-height: 100vh;
21 | background: linear-gradient(to right, #da22ff, #9733ee);
22 | }
23 |
24 | @media screen and (max-width: 460px) {
25 | html {
26 | font-size: 55%;
27 | }
28 | .container {
29 | padding: 1.5rem;
30 | }
31 | }
32 |
33 | @import 'music_player';
34 | @import 'player_cover';
35 | @import 'progress';
36 | @import 'controls';
37 | @import 'music_list';
--------------------------------------------------------------------------------
/projects/songify/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Songify | Music Player
12 |
18 |
19 |
20 |
21 |
22 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
Song Name
34 |
Jhon Doe
35 |
36 |
37 |
38 |
39 |
40 | 00:00
41 | 00:00
42 |
43 |
44 |
45 |
46 |
47 |
repeat
48 |
skip_previous
49 |
50 | play_arrow
51 |
52 |
skip_next
53 |
volume_up
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
65 |
66 |
75 |
76 |
77 |
78 |
Stopwatch
9 |
14 |
StopWatch
15 |
16 |
17 | 00
18 | Hr
19 |
20 |
21 | 00
22 | Min
23 |
24 |
25 | 00
26 | Sec
27 |
28 |
29 | 00
30 | Millisec
31 |
32 |
33 |
34 |
35 | Start
36 | Stop
37 | Reset
38 |
39 |
40 |
Temperature Converter
8 | JavaScript Todo
8 |
16 |
17 |
18 |
21 |
24 |
28 |
${index+1}. ${element} `;
50 | });
51 | todoList.innerHTML = newLiTag;
52 | inputBox.value = "";
53 | }
54 |
55 | // delete todo
56 | function deleteTask(index){
57 | let getLocalStorageData = localStorage.getItem("Todos");
58 | listArray = JSON.parse(getLocalStorageData);
59 | listArray.splice(index, 1);
60 | localStorage.setItem("Todos", JSON.stringify(listArray));
61 | showTodos();
62 | }
63 |
64 | // delete all todos
65 | deleteAllBtn.onclick = ()=>{
66 | listArray = [];
67 | localStorage.setItem("Todos", JSON.stringify(listArray));
68 | showTodos();
69 | }
--------------------------------------------------------------------------------
/projects/todo/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: 'Poppins', sans-serif;
7 | }
8 | ::selection{
9 | color: #ffff;
10 | background: rgb(130, 62, 219);
11 | }
12 | body{
13 | width: 100%;
14 | height: 100vh;
15 | padding: 10px;
16 | background: linear-gradient(to right, #11998e, #38ef7d);
17 | }
18 | .container{
19 | background: rgba(255, 255, 255, 0.40);
20 | transform-style: preserve-3d;
21 | transition: .3s;
22 | backdrop-filter: blur(100px);
23 | box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
24 | max-width: 400px;
25 | width: 100%;
26 | margin: 120px auto;
27 | padding: 25px;
28 | border-radius: 5px;
29 | box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
30 | }
31 | .container header{
32 | font-size: 30px;
33 | font-weight: 600;
34 | text-align: center;
35 | }
36 | .container .inputf{
37 | margin: 20px 0;
38 | width: 100%;
39 | display: flex;
40 | height: 45px;
41 | }
42 | .inputf input{
43 | width: 85%;
44 | height: 100%;
45 | outline: none;
46 | border-radius: 3px;
47 | border: 1px solid #ccc;
48 | font-size: 17px;
49 | padding-left: 15px;
50 | transition: all 0.3s ease;
51 | }
52 | .inputf input:focus{
53 | border-color: #7c05b3;
54 | }
55 | .inputf button{
56 | width: 50px;
57 | height: 100%;
58 | border: none;
59 | color: #fff;
60 | margin-left: 5px;
61 | font-size: 21px;
62 | outline: none;
63 | background: #7c05b3;
64 | cursor: pointer;
65 | border-radius: 3px;
66 | opacity: 0.6;
67 | pointer-events: none;
68 | transition: all 0.3s ease;
69 | }
70 | .inputf button:hover,
71 | .footer button:hover{
72 | background: rgb(137, 67, 228);
73 | }
74 | .inputf button.active{
75 | opacity: 1;
76 | pointer-events: auto;
77 | }
78 | .container .todoList{
79 | max-height: 250px;
80 | overflow-y: auto;
81 | }
82 | .todoList li{
83 | position: relative;
84 | list-style: none;
85 | height: 45px;
86 | line-height: 45px;
87 | margin-bottom: 8px;
88 | background: #f2f2f2;
89 | border-radius: 3px;
90 | padding: 0 15px;
91 | cursor: default;
92 | overflow: hidden;
93 | }
94 | .todoList li .icon{
95 | position: absolute;
96 | right: -45px;
97 | background: #dd4230;
98 | width: 45px;
99 | text-align: center;
100 | color: #fff;
101 | border-radius: 0 3px 3px 0;
102 | cursor: pointer;
103 | transition: all 0.2s ease;
104 | }
105 | .todoList li:hover .icon{
106 | right: 0px;
107 | }
108 | .container .footer{
109 | display: flex;
110 | width: 100%;
111 | margin-top: 20px;
112 | align-items: center;
113 | justify-content: space-between;
114 | }
115 | .footer button{
116 | padding: 6px 10px;
117 | border-radius: 3px;
118 | border: none;
119 | outline: none;
120 | color: #fff;
121 | font-weight: 400;
122 | font-size: 16px;
123 | margin-left: 5px;
124 | background: #7c05b3;
125 | cursor: pointer;
126 | user-select: none;
127 | opacity: 0.6;
128 | pointer-events: none;
129 | transition: all 0.3s ease;
130 | }
131 | .footer button.active{
132 | opacity: 1;
133 | pointer-events: auto;
134 | }
135 | .backbtn {
136 | position: absolute;
137 | font-size: 2rem;
138 | float: left;
139 | cursor: pointer;
140 | margin-top: 1.5rem;
141 | margin-left: 10rem;
142 | color:rgb(0, 0, 0);
143 | }
144 | .backbtn a{
145 | text-decoration: none;
146 | color: inherit;
147 | }
--------------------------------------------------------------------------------
/projects/twonumcalc/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Simple Calculator | JavaScript-Projects
5 |
14 |
15 |
JavaScript 2 Num Calc
16 |
38 |
41 |
42 |
23 | ${txt ? "edit_note" : "done" }
24 | delete
25 |
26 |
27 |
28 | `;
29 |
30 | note.insertAdjacentHTML('afterbegin',htmlData);
31 |
32 | const editBtn = note.querySelector('.edit');
33 | const delBtn = note.querySelector('.delete');
34 | const noteTxt = note.querySelector('.noteTxt');
35 | const textArea = note.querySelector('textarea');
36 |
37 | // delete note
38 | delBtn.addEventListener('click', () => {
39 | note.classList.add('animate-ping','opacity-30');
40 | setTimeout(() => {
41 | note.remove();
42 | updateNote();
43 | }, 200);
44 | });
45 |
46 | textArea.value = txt;
47 | noteTxt.innerHTML = txt;
48 |
49 | // edit btn event
50 | editBtn.addEventListener('click', () => {
51 | noteTxt.classList.toggle('hidden');
52 | textArea.classList.toggle('hidden');
53 | if(textArea.classList.contains('hidden')) {
54 | editBtn.textContent = "edit_note";
55 | } else {
56 | editBtn.textContent = "done";
57 | }
58 | updateNote();
59 | });
60 |
61 | textArea.addEventListener('change', (event) => {
62 | const value = event.target.value;
63 | noteTxt.innerHTML = value;
64 | if(note.value != ""){
65 | updateNote();
66 | }
67 | });
68 |
69 | notesContainer.appendChild(note);
70 | }
71 |
72 | // fetch stored notes from localstorage
73 | const notes = JSON.parse(localStorage.getItem('notes'));
74 | if(notes) {
75 | notes.forEach((note) => addNewNote(note));
76 | }
77 |
78 | // add new note btn event
79 | addBtn.addEventListener('click', () => addNewNote() );
--------------------------------------------------------------------------------
/projects/wekeep/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | We Keep | Notes
8 |
27 |
28 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/projects/wordcount/assets/favic.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jigar-sable/JavaScript-Projects/8ff97cbaa40f77591b2da8439851835f29704dbd/projects/wordcount/assets/favic.ico
--------------------------------------------------------------------------------
/projects/wordcount/assets/script.js:
--------------------------------------------------------------------------------
1 | const textArea = document.getElementById('textArea');
2 |
3 | textArea.addEventListener('input', function() {
4 | let text = this.value;
5 | document.getElementById('char').innerHTML = text.length
6 | text = text.trim();
7 | let words = text.split(" ");
8 | // console.log(words);
9 | let wordArr = words.filter(elm => elm != "");
10 | // console.log(wordArr);
11 | document.getElementById('word').innerHTML = wordArr.length;
12 | });
--------------------------------------------------------------------------------
/projects/wordcount/assets/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | min-height: 100vh;
11 | width: 100%;
12 | font-size: 62.5%;
13 | overflow: hidden;
14 | background: linear-gradient(to right, #8e2de2, #4a00e0);
15 | font-family: 'Poppins', sans-serif;
16 | }
17 | .container {
18 | background: rgba(255, 255, 255, 0.4);
19 | transform-style: preserve-3d;
20 | box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
21 | max-width: 35rem;
22 | width: 100%;
23 | margin: 6rem auto;
24 | padding: 1rem 2rem;
25 | border-radius: .5rem;
26 | transition: .3s;
27 |
28 | display: flex;
29 | flex-direction: column;
30 | justify-content: center;
31 | align-items: center;
32 | }
33 |
34 |
35 | h1 {
36 | font-size: 1.7rem;
37 | text-align: center;
38 | color: #111;
39 | }
40 | textarea {
41 | resize: none;
42 | margin-top: .8rem;
43 | width: 100%;
44 | border-radius: .5rem;
45 | font-size: 1.3rem;
46 | padding: .5rem;
47 | outline: none;
48 | border: 2px solid rgb(55, 0, 158);
49 | }
50 | p {
51 | font-size: 2.1rem;
52 | font-weight: bold;
53 | color: rgb(83, 0, 0);
54 | padding: .8rem;
55 | }
56 | p #word, #char{
57 | color: #000000;
58 | }
59 |
60 | @media screen and (max-width:570px) {
61 | html {
62 | font-size: 65%;
63 | }
64 | }
--------------------------------------------------------------------------------
/projects/wordcount/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Word Char Counter
9 |
13 |
14 |
Word & Character Counter
15 |
16 |
17 | 0 Words
18 | 0 Character
19 |
20 |
21 |
56 | 
16 | 
21 | 
52 | 
87 |
95 | 
99 |
107 | 
111 |
119 | 
146 |
158 | 
162 |
174 | 
178 |
190 | 
123 | 
194 |