"
95 | break;
96 | case 'won':
97 | dialog = "
"
98 | break;
99 | }
100 | dialog += text;
101 | dialog += "
"
102 | return dialog;
103 | }
104 |
105 | //function to restart the game
106 | function initGame(){
107 | correctNumber = getRandomNumber();
108 | document.getElementById('result').innerHTML = "";
109 | guessList = [];
110 | displayHistory();
111 | }
112 |
--------------------------------------------------------------------------------
/Guess the Number/style.css:
--------------------------------------------------------------------------------
1 | #number-guess,#result,#history,#number-submit,#restart-game{
2 | max-width: 400px;
3 | margin: 0 auto;
4 | }
5 | #history,#result{
6 | margin-top: 16px;
7 | text-align: center;
8 | }
9 | .banner{
10 | color: #ffd23f;
11 | font-size: 90px;
12 | font-family: sans-serif;
13 | text-align: center;
14 | }
15 | footer{
16 | margin-top: 5%;
17 | }
--------------------------------------------------------------------------------
/JS Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
JS Calculator
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
22 |
23 |
24 |
25 |
26 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/JS Calculator/script.js:
--------------------------------------------------------------------------------
1 | //Get the input value
2 | function getInput(){
3 | return document.getElementById('input-value').innerText;
4 | }
5 |
6 | //Print input value
7 | function printInput(num){
8 | document.getElementById('input-value').innerText = num;
9 | }
10 |
11 | //Get the output value
12 | function getOutput(){
13 | return document.getElementById('output-value').innerText;
14 | }
15 |
16 | //Print the output value
17 | function printOutput(num){
18 | if(num==""){
19 | document.getElementById('output-value').innerText=num;
20 | }
21 | else{
22 | document.getElementById('output-value').innerText = getFormattedNumber(num);
23 | }
24 | }
25 |
26 | //Function to display number with commas
27 | function getFormattedNumber(num){
28 | if(num=="-"){
29 | return "";
30 | }
31 | let n = Number(num);
32 | let value = n.toLocaleString("en");
33 | return value;
34 | }
35 |
36 |
37 | //function to dislay number without commas
38 |
39 | function reverseNumberFormat(num){
40 | return Number(num.replace(/,/g,''));
41 | }
42 |
43 | //get all operators
44 | let operators = document.getElementsByClassName('operator');
45 |
46 |
47 | for(let i=0;i
2 |
3 |
4 |
5 |
6 | Login Form
7 |
8 |
9 |
10 |
11 |
12 |
13 | TODO APP
14 |
15 |
16 |
17 |
18 |
19 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/TODO App/script.js:
--------------------------------------------------------------------------------
1 | const addButton = document.querySelector('.add');
2 | let input = document.querySelector('.input');
3 | const container = document.querySelector('.container');
4 |
5 | class item{
6 | constructor(itemName){
7 | //create the item div
8 | this.createDiv(itemName);
9 | }
10 | createDiv(itemName){
11 | let input = document.createElement('input');
12 | input.value = itemName;
13 | input.disabled = true;
14 | input.classList.add('input-item');
15 | input.type = "text";
16 |
17 | let itemBox = document.createElement('div');
18 | itemBox.classList.add('item');
19 |
20 | let editButton = document.createElement('button');
21 | editButton.innerHTML = "Edit";
22 | editButton.classList.add('edit-Button');
23 |
24 | let removeButton = document.createElement('button');
25 | removeButton.innerHTML = "Remove";
26 | removeButton.classList.add('remove-button');
27 |
28 | container.appendChild(itemBox);
29 |
30 | itemBox.appendChild(input);
31 | itemBox.appendChild(editButton);
32 | itemBox.appendChild(removeButton);
33 |
34 | editButton.addEventListener('click',() => this.edit(input));
35 |
36 | removeButton.addEventListener('click',() => this.remove(itemBox));
37 | }
38 | edit(input){
39 | input.disabled = !input.disabled;
40 | }
41 | remove(item){
42 | container.removeChild(item);
43 | }
44 | }
45 | function check(){
46 | if(input.value != ""){
47 | new item(input.value);
48 | input.value="";
49 | }
50 | }
51 | addButton.addEventListener('click',check);
52 | window.addEventListener('keydown',(e) => {
53 | if(e.which == 13){
54 | check();
55 | }
56 | });
--------------------------------------------------------------------------------
/TODO App/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: 'Poppins','sans-serif';
6 | }
7 | body{
8 | height: 100%;
9 | background-color: #222831;
10 | }
11 | h1{
12 | font-size: 3rem;
13 | font-weight: 700;
14 | margin: 1rem 0 3rem;
15 | text-align: center;
16 | color: #fde8cd;
17 | }
18 | .main-heading{
19 | color: #f05454;
20 | }
21 | .input-div{
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | text-align: center;
26 | }
27 | .input-div .input{
28 | padding: 0.5rem 1rem;
29 | height: 50px;
30 | outline: none;
31 | border:none;
32 | width: 450px;
33 | font-size: 1.15rem;
34 | margin: 0.25rem;
35 | border-radius: 2rem;
36 | }
37 | .add{
38 | width: 50px;
39 | height: 50px;
40 | border-radius: 50%;
41 | border: none;
42 | color: white;
43 | background: #ef4f4f;
44 | margin: 0.25px;
45 | cursor: pointer;
46 | outline: none;
47 | }
48 | .add:hover{
49 | opacity: 0.7;
50 | }
51 | .container{
52 | display: flex;
53 | flex-direction: column;
54 | justify-content: center;
55 | align-items: center;
56 | text-align: center;
57 | margin-top: 2rem;
58 | }
59 | .item{
60 | padding: 0.5rem;
61 | margin-bottom: 1.5rem;
62 | border-bottom: 2px solid #ffffff;
63 | }
64 | .input-item{
65 | background: none;
66 | outline: none;
67 | border: none;
68 | color:#ffffff ;
69 | width: 350px;
70 | font-size: 1.1rem;
71 | }
72 | .edit-Button{
73 | font-size: 1.2rem;
74 | margin: 0 1rem;
75 | background: none;
76 | outline: none;
77 | color: #ef4f4f;
78 | border: none;
79 | cursor: pointer;
80 | }
81 | .remove-button{
82 | font-size: 1.2rem;
83 | background: none;
84 | outline: none;
85 | color: #ffcda3;
86 | border: none;
87 | cursor: pointer;
88 | }
--------------------------------------------------------------------------------
/Text Editor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Text Editor
9 |
10 |
11 |
12 |
13 | Text Editor
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |