Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[KWoC] Refactor: BMI Calculator #207

Merged
merged 2 commits into from
Jan 6, 2024
Merged

[KWoC] Refactor: BMI Calculator #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e686ed2
feat: display color code
supr1yo Jan 5, 2024
534b8e0
refactor:
supr1yo Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions BMI calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ <h1 class="popupheading2">38.3</h1>
<div class="mainContainer">
<h1 class="heading">Body Mass</h1>
<h1 class="heading1">Index</h1>
<h1 class="subheading">Gender:</h1>
<h1 class="subheading">Gender</h1>
<select name="gender" id="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Male">Male ♂️</option>
<option value="Female">Female ♀️</option>
</select>
<h1 class="subheading">Height:</h1>
<input class="heightInput" placeholder="Enter your height in cm" type="number"/><span class="symbol">CM</span>
<h1 class="subheading">Height <span id="symbol">(cm)</span></h1>
<input class="heightInput" placeholder="Enter in centimeter" type="number"/>
<div class="ageAndweightcontainer">
<div class="EachContainer">
<h1 class="subheading">Age</h1>
<input class="AgeInput" type="number"/>
<input class="AgeInput" placeholder="in years" type="number"/>
</div>
<div class="EachContainer">
<h1 class="subheading">Weight</h1>
Expand Down
34 changes: 24 additions & 10 deletions BMI calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
/* Disable increment/decrement arows from Number input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type=number]{
-moz-appearance: textfield;
}


body{
display: flex;
align-items: center;
Expand Down Expand Up @@ -66,6 +78,10 @@ body{
margin: 0px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#symbol {
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
}
.heading{
margin-top: 10px;
font-size: 40px;
Expand All @@ -78,10 +94,10 @@ body{
font-weight: 100;
}
.subheading{
font-size: 30px;
text-decoration: underline;
font-weight: 100;
font-size: 25px;
font-weight: 80;
}

select {
cursor: pointer;
display: inline-block;
Expand All @@ -100,13 +116,9 @@ select {
font-size: 20px;
color: black;
}
.symbol{
margin-left: 20px;
font-size: 30px;
font-weight: 100;
}

.heightInput{
width: 80%;
width: 95%;
border: 2px solid rgba(255, 0, 0, 0.386);
height: 40px;
border-radius: 10px;
Expand All @@ -125,8 +137,10 @@ select {
align-items: center;
}
.WeightInput,.AgeInput{
font-size: 60px;
font-size: 20px;
text-align: center;
width: 50%;
height: 50px;
border: 2px solid rgba(255, 0, 0, 0.386);
border-radius: 10px;
}
Expand Down
1 change: 1 addition & 0 deletions BackgroundColorChanger/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

<body>
<h1>Background Color Changer</h1>
<p id="hexcode"></p>
<div id="colorbox"></div>

<script src="script.js"></script>
Expand Down
5 changes: 5 additions & 0 deletions BackgroundColorChanger/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@ function bgchange(color) {
var colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
var colorbox = document.getElementById("colorbox");

let hexcode = document.getElementById('hexcode');

colorarray.forEach(function (color, index) {
let span = document.createElement("span");
span.style.backgroundColor = color;
span.addEventListener("click", function () {
bgchange(index);

// Display the color code
hexcode.innerHTML = colorarray[index].toUpperCase();
});
colorbox.appendChild(span);
});
8 changes: 7 additions & 1 deletion BackgroundColorChanger/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@ body {

h1 {
color: #6203e0;
margin-bottom: 2rem;
margin-bottom: 1rem;
}

p {
font-family: monospace;
padding: 5px;
font-size: large;
}

#colorbox {
Expand Down