Skip to content

dom lab #5

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

Open
TajanaeB wants to merge 1 commit into
base: main
Choose a base branch
from
Open

dom lab #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
55 changes: 55 additions & 0 deletions img/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="style.css">
</head>
<body>


<div id="box">
<h1 class="h1">Temperature Scale Converter</h1>
<br>
<div>

<select class="dropdown" id="options">
<option value="fahrenheit">Fahrenheit</option>
<option value="celsius">Celsius</option>
<option value="kelvin">Kelvin</option>
<option value="rankine">Rankine</option>
</select>
</div>
<br>
<p id="scale">Scale</p>
<p class="value">Value</p>
<input type="text" id="textbox">
<br>
<br>
<br>

<p id="fahrenheit">Fahrenheit</p>
<div id="outputF">F</div>

<p id="celsius">Celsius</p>
<div id="outputC">C</div>

<p id="kelvin">Kelvin</p>
<div id="outputK">K</div>

<p id="rankine">Rankine</p>
<div id="outputR">R</div>

<br>
<br>
<div class="calculate">
<button id="button" onclick="ClickCalculate()">Calculate</button>
</div>

</div>


</div>
<script src ="mockup.js"></script>
</body>


167 changes: 167 additions & 0 deletions img/mockup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@

let celsiusText = document.querySelector('#outputC')
let fahrenheitText = document.querySelector('#outputF')
let kelvinText = document.querySelector('#outputK')
let rankineText = document.querySelector('#outputR')
let scaleType = document.querySelector('#scale')


function findCelsius(){
let fahrenheit = document.getElementById("textbox").value;
let celsius;
if(fahrenheit != ''){
console.log({fahrenheit});
const parsedF = parseFloat(fahrenheit);
console.log({parsedF})
celsius = (parseFloat(fahrenheit) - 32) * 5/9;
celsius = celsius.toFixed(2) + " C";
console.log(typeof fahrenheit);
document.getElementById("outputC").innerHTML = celsius;
}
}

function findKelvin(){
let fahrenheit = document.getElementById("textbox").value;
let kelvin;
if(fahrenheit != ''){
console.log({fahrenheit});
const parsedF = parseFloat(fahrenheit);
console.log({parsedF})
kelvin = (parseFloat(fahrenheit) - 32) * 5/9 + 273.15;
kelvin = kelvin.toFixed(2)+ " K";
console.log(typeof fahrenheit);
document.getElementById("outputK").innerHTML = kelvin;
}
}

function findRankine(){
let fahrenheit = document.getElementById("textbox").value;
let rankine;
if(fahrenheit != ''){
console.log({fahrenheit});
const parsedF = parseFloat(fahrenheit);
console.log({parsedF})
rankine = (parseFloat(fahrenheit) + 459.67);
rankine = rankine.toFixed(2)+ " R";
console.log(typeof fahrenheit);
document.getElementById("outputR").innerHTML = rankine;
}
}


function findFahrenheit(){
let fahrenheit = document.getElementById("textbox").value;
document.getElementById("outputF").innerHTML = fahrenheit + " F";
}


function celsisusToCelsius () {
let celsius = document.querySelector("textbox").value;
document.getElementById("outputC").innerHTML = celsius + " C";
}


function celsiusToFahrenheit () {
let celsiusInput = document.querySelector("textbox").value
let product = (parseInt(celsiusInput) * 9/5) + 32
fahrenheitText.innerHTML = product.toFixed(2) + ' F'
}

function celsiusToKelvin () {
let celsiusInput = document.querySelector("textbox").value
let product = (parseInt(celsiusInput + 273.15))
kelvinText.innerHTML = product.toFixed(2) + ' K'
}

function celsiusToRankine () {
let celsiusInput = document.querySelector("textbox").value
let product = (parseInt(celsiusInput) * 9/5 + 491.67)
kelvinText.innerHTML = product.toFixed(2) + ' R'
}


function kelvinToKelvin () {
let kelvin = document.querySelector("textbox").value;
document.getElementById("outputK").innerHTML = kelvin + " K";
}

function kelvinToFahrenheit () {
let kelvinInput = document.querySelector("textbox").value
let product = (parseInt(kelvinInput - 273) * 9/5 +32);
fahrenheitText.innerHTML = product.toFixed(2) + ' F'
}

function kelvinToCelsius () {
let kelvinInput = document.querySelector("textbox").value
let product = (parseInt(kelvinInput - 273.15));
celsiusText.innerHTML = product.toFixed(2) + ' C'
}

function kelvinToRankine () {
let kelvinInput = document.querySelector("textbox").value
let product = (parseInt(kelvinInput * 1.8))
rankineText.innerHTML = product.toFixed(2) + ' R'
}


function rankineToRankine () {
let rankine = document.querySelector("textbox").value;
document.getElementById("outputR").innerHTML = rankine + " R";
}

function rankineToFahrenheit () {
let rankineInput = document.querySelector("textbox").value
let product = (parseInt(rankineInput - 459.67));
fahrenheitText.innerHTML = product.toFixed(2) + ' F'
}


function rankineToCelsius () {
let kelvinInput = document.querySelector("textbox").value
let product = (parseInt(kelvinInput - 491.67) * 5/9);
fahrenheitText.innerHTML = product.toFixed(2) + ' C'
}

function rankineToKelvin () {
let kelvinInput = document.querySelector("textbox").value
let product = (parseInt(kelvinInput * 5/9));
fahrenheitText.innerHTML = product.toFixed(2) + ' K'
}

function conversions () {

if (scaleType.value === 'faherenheit') {
findFahrenheit()
findCelsius()
findKelvin()
findRankine()
} else if (scaleType.value === 'celsius'){
celsisusToCelsius()
celsiusToFahrenheit()
celsiusToRankine()
celsiusToKelvin()
}
else if (scaleType.value === 'kelvin'){
kelvinToKelvin()
kelvinToCelsius()
kelvinToRankine()
kelvinToFahrenheit()
}
else if (scaleType.value === 'rankine') {
rankineToRankine()
rankineToFahrenheit()
rankineToCelsius()
rankineToKelvin()
}
}




function ClickCalculate(){
findKelvin()
findCelsius()
findRankine()
findFahrenheit(
)
}
106 changes: 106 additions & 0 deletions img/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
#box {
width: 600px;
border: solid black 2px;
height: 300px;
}

.dropdown {
float: left;
margin-top: 65px;
margin-left: 40px;
}

.degree {
float: center;
}

.calculate {
float: right;
margin-right: 80px;
margin-bottom: 100px;
margin-top: -135px;
}


#textbox {
margin-left: 100px;
margin-top: -40px;
width: 130px;
height: 25px;
border: solid black 2px;
}

.value {
margin-left: 260px;
}

#scale {
margin-left: -60px;
float: left;

}



.h1 {
margin-left: 60px;
}


#fahrenheit {
margin-left: 60px;
font-weight: bold;
margin-top: -15px;
}


#outputF {
margin-left: 60px;
margin-top: -15px;
}

#celsius {
margin-left: 200px;
font-weight: bold;
margin-top: -35px;
}

#outputC {
margin-left: 190px;
margin-top: -10px;
}

#kelvin {
margin-right: 250px;
font-weight: bold;
margin-top: -50px;
float: right;
}

#outputK {
margin-right: 250px;
margin-top: -19px;
float: right;
}

#rankine {
margin-left: 440px;
font-weight: bold;
margin-top: -45px;
}

#outputR {
margin-right: -190px;
margin-top: -20px;
float: right;
}

#button {
display: inherit;
margin-left: 12%;
background-color: #9cbdf0;
}