Skip to content

Commit 59fa699

Browse files
amit265amit265
committed
freecode camp js project added
1 parent 8c80af1 commit 59fa699

File tree

48 files changed

+4982
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+4982
-0
lines changed

‎binary-converter/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Decimal to Binary Converter</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<h1>Decimal to Binary Converter</h1>
12+
<div class="input-container">
13+
<label for="number-input">Enter a decimal number:</label>
14+
<input
15+
value=""
16+
type="number"
17+
name="decimal number input"
18+
id="number-input"
19+
class="number-input"
20+
/>
21+
<button class="convert-btn" id="convert-btn">Convert</button>
22+
</div>
23+
<output id="result" for="number-input"></output>
24+
<div id="animation-container"></div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎binary-converter/script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const numberInput = document.getElementById("number-input");
2+
const convertBtn = document.getElementById("convert-btn");
3+
const result = document.getElementById("result");
4+
5+
const decimalToBinary = (input) => {
6+
let binary = "";
7+
8+
while(input > 0){
9+
input = 0;
10+
}
11+
12+
result.innerText = binary;
13+
};
14+
15+
const checkUserInput = () => {
16+
if (!numberInput.value || isNaN(parseInt(numberInput.value))) {
17+
alert("Please provide a decimal number");
18+
return;
19+
}
20+
21+
decimalToBinary(parseInt(numberInput.value));
22+
numberInput.value = "";
23+
};
24+
25+
convertBtn.addEventListener("click", checkUserInput);
26+
27+
numberInput.addEventListener("keydown", (e) => {
28+
if (e.key === "Enter") {
29+
checkUserInput();
30+
}
31+
});

‎binary-converter/styles.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
:root {
10+
--light-grey: #f5f6f7;
11+
--dark-blue: #1b1b32;
12+
--orange: #f1be32;
13+
}
14+
15+
body {
16+
background-color: var(--dark-blue);
17+
font-family: "Times New Roman", Times, serif;
18+
font-size: 18px;
19+
color: var(--light-grey);
20+
padding: 0 15px;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
}
25+
26+
h1 {
27+
text-align: center;
28+
font-size: 2.3rem;
29+
margin: 20px 0;
30+
}
31+
32+
.input-container {
33+
margin: 10px 0;
34+
display: flex;
35+
flex-direction: column;
36+
gap: 10px;
37+
justify-content: center;
38+
align-items: center;
39+
}
40+
41+
.convert-btn {
42+
background-color: var(--orange);
43+
cursor: pointer;
44+
border: none;
45+
padding: 4px;
46+
}
47+
48+
.number-input {
49+
height: 25px;
50+
}
51+
52+
#result {
53+
margin: 10px 0;
54+
min-width: 200px;
55+
width: fit-content;
56+
min-height: 80px;
57+
word-break: break-word;
58+
padding: 15px;
59+
border: 5px solid var(--orange);
60+
font-size: 2rem;
61+
text-align: center;
62+
}
63+
64+
#animation-container {
65+
margin: auto;
66+
max-width: 300px;
67+
}
68+
69+
.animation-frame {
70+
margin: 250px auto 0;
71+
padding: 15px 10px;
72+
border: 5px solid var(--orange);
73+
font-size: 1.2rem;
74+
text-align: center;
75+
}
76+
77+
@media screen and (min-width: 500px) {
78+
.input-container {
79+
flex-direction: row;
80+
}
81+
82+
#result {
83+
max-width: 460px;
84+
}
85+
}

‎calorie-counter/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<title>Calorie Counter</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1>Calorie Counter</h1>
12+
<div class="container">
13+
<form id="calorie-counter">
14+
<label for="budget">Budget</label>
15+
<input
16+
type="number"
17+
min="0"
18+
id="budget"
19+
placeholder="Daily calorie budget"
20+
required
21+
/>
22+
<fieldset id="breakfast">
23+
<legend>Breakfast</legend>
24+
<div class="input-container"></div>
25+
</fieldset>
26+
<fieldset id="lunch">
27+
<legend>Lunch</legend>
28+
<div class="input-container"></div>
29+
</fieldset>
30+
<fieldset id="dinner">
31+
<legend>Dinner</legend>
32+
<div class="input-container"></div>
33+
</fieldset>
34+
<fieldset id="snacks">
35+
<legend>Snacks</legend>
36+
<div class="input-container"></div>
37+
</fieldset>
38+
<fieldset id="exercise">
39+
<legend>Exercise</legend>
40+
<div class="input-container"></div>
41+
</fieldset>
42+
<div class="controls">
43+
<span>
44+
<label for="entry-dropdown">Add food or exercise:</label>
45+
<select id="entry-dropdown" name="options">
46+
<option value="breakfast" selected>Breakfast</option>
47+
<option value="lunch">Lunch</option>
48+
<option value="dinner">Dinner</option>
49+
<option value="snacks">Snacks</option>
50+
<option value="exercise">Exercise</option>
51+
</select>
52+
<button type="button" id="add-entry">Add Entry</button>
53+
</span>
54+
</div>
55+
<div>
56+
<button type="submit">
57+
Calculate Remaining Calories
58+
</button>
59+
<button type="button" id="clear">Clear</button>
60+
</div>
61+
</form>
62+
<div id="output" class="output hide"></div>
63+
</div>
64+
</main>
65+
<script src="./script.js"></script>
66+
</body>
67+
</html>

‎calorie-counter/script.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const calorieCounter = document.getElementById('calorie-counter');
2+
const budgetNumberInput = document.getElementById('budget');
3+
const entryDropdown = document.getElementById('entry-dropdown');
4+
const addEntryButton = document.getElementById('add-entry');
5+
const clearButton = document.getElementById('clear');
6+
const output = document.getElementById('output');
7+
let isError = false;
8+
9+
function cleanInputString(str) {
10+
const regex = /[+-\s]/g;
11+
return str.replace(regex, '');
12+
}
13+
14+
function isInvalidInput(str) {
15+
const regex = /\d+e\d+/i;
16+
return str.match(regex);
17+
}
18+
19+
function addEntry() {
20+
const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
21+
const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
22+
const HTMLString = `
23+
<label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
24+
<input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
25+
<label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
26+
<input
27+
type="number"
28+
min="0"
29+
id="${entryDropdown.value}-${entryNumber}-calories"
30+
placeholder="Calories"
31+
/>`;
32+
targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
33+
}
34+
35+
function calculateCalories(e) {
36+
e.preventDefault();
37+
isError = false;
38+
39+
const breakfastNumberInputs = document.querySelectorAll('#breakfast input[type=number]');
40+
const lunchNumberInputs = document.querySelectorAll('#lunch input[type=number]');
41+
const dinnerNumberInputs = document.querySelectorAll('#dinner input[type=number]');
42+
const snacksNumberInputs = document.querySelectorAll('#snacks input[type=number]');
43+
const exerciseNumberInputs = document.querySelectorAll('#exercise input[type=number]');
44+
45+
const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs);
46+
const lunchCalories = getCaloriesFromInputs(lunchNumberInputs);
47+
const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs);
48+
const snacksCalories = getCaloriesFromInputs(snacksNumberInputs);
49+
const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs);
50+
const budgetCalories = getCaloriesFromInputs([budgetNumberInput]);
51+
52+
if (isError) {
53+
return;
54+
}
55+
56+
const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
57+
const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
58+
const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
59+
output.innerHTML = `
60+
<span class="${surplusOrDeficit.toLowerCase()}">${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}</span>
61+
<hr>
62+
<p>${budgetCalories} Calories Budgeted</p>
63+
<p>${consumedCalories} Calories Consumed</p>
64+
<p>${exerciseCalories} Calories Burned</p>
65+
`;
66+
67+
output.classList.remove('hide');
68+
}
69+
70+
function getCaloriesFromInputs(list) {
71+
let calories = 0;
72+
73+
for (let i = 0; i < list.length; i++) {
74+
const currVal = cleanInputString(list[i].value);
75+
const invalidInputMatch = isInvalidInput(currVal);
76+
77+
if (invalidInputMatch) {
78+
alert(`Invalid Input: ${invalidInputMatch[0]}`);
79+
isError = true;
80+
return null;
81+
}
82+
calories += Number(currVal);
83+
}
84+
return calories;
85+
}
86+
87+
function clearForm() {
88+
const inputContainers = Array.from(document.querySelectorAll('.input-container'));
89+
90+
for (let i = 0; i < inputContainers.length; i++) {
91+
inputContainers[i].innerHTML = '';
92+
}
93+
94+
budgetNumberInput.value = '';
95+
output.innerText = '';
96+
output.classList.add('hide');
97+
}
98+
99+
addEntryButton.addEventListener("click", addEntry);
100+
calorieCounter.addEventListener("submit", calculateCalories);
101+
clearButton.addEventListener("click", clearForm)

0 commit comments

Comments
 (0)