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

Paper--Andrea Palacios #61

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Paper--Andrea Palacios #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aa6ac6e
basic html file created
dre-create Jun 15, 2021
f28a911
increase and decrease buttons are functioning
dre-create Jun 17, 2021
349dc6d
increase and decrease temp buttons working
dre-create Jun 17, 2021
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
58 changes: 58 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Weather</title>
<link rel="stylesheet" href="styles/index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@657&display=swap" rel="stylesheet">
</head>
<body>
<header>
<section class = "city-header">
<h1><em class= "your-city">your</em> Weather Report</h1>
</section>
</header>
<main>
<section class = "weather-forms">
<div class="weather-boxes">
<h3>City</h3>
<input type="text" id="city-input">
<button id="weather-button">reset</button>
</div>

<div class= "weather-boxes">
<h3>Sky</h3>
<select>
<option>Sunny</option>
<option>Cloudy</option>
<option>Rainy</option>
<option>Snowy</option>
</select>
</div>

<div class= "weather-boxes">
<h3>Temperature</h3>
<!--clickable option to increase or decrease temp hot cold--->
<section id="tempbox">
<p id ="decrease-temp">🔽</p>
<p id=temp>70</p>
<p id="increase-temp">🔼</p>
Comment on lines +40 to +42
Copy link

@CheezItMan CheezItMan Jul 15, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just want to point out that making these p tags is not great for accessibility. Instead I suggest making them hyperlinks or buttons.

Screen readers won't pick up that these are clickable.

</section>
</div>
</section>

<section class="weather-garden">
<h2><em class= "your-city">your</em> Weather Garden</h2>
<figure>
<p id="sky">🌧️ ⛈️ 🌦️ 🌈 🌨️ 🌩️ ❄️ ☀️ ☀️</p>
<p id= "earth">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</p>
</figure>
</section>
</main>
<footer>&copy; 2021 Andrea Palacios</footer>
<script src="scripts/index.js" type="text/javascript"></script>
</body>
</html>
70 changes: 70 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
console.log("hellooo!")

//store current temp in a variable

const state = {
//color: "red",
tempCount : 70,
};


//increase temp
const increaseTemp= () => {
state.tempCount +=1
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};

const decreaseTemp= () => {
state.tempCount -=1
const tempDown = document.querySelector("#temp")
tempDown.textContent = `${state.tempCount}`
//updateTempColor();
};
Comment on lines +11 to +24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just note that you can combine these functions and use a parameter.

Suggested change
//increase temp
const increaseTemp= () => {
state.tempCount +=1
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};
const decreaseTemp= () => {
state.tempCount -=1
const tempDown = document.querySelector("#temp")
tempDown.textContent = `${state.tempCount}`
//updateTempColor();
};
//increase temp
const changeTemp= (increment) => {
state.tempCount +=increment
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};

Then you can pass these in as event handlers

upButton.addEventListener("click",() => changeTemp(1));

downButton.addEventListener("click",() => changeTemp( -1 ));



// const updateTempColor = () => {
// const temp = state.tempcount
// if (temp>= 80) {
// state.color = "red";
// } else if (temp >= 70) {
// state.color = "orange";
// } else if (temp >= 60) {
// state.color = "yellow";
// } else if (temp >= 50) {
// state.color = "teal";
// }
// };



const registerEventHandlers = () => {
//updateTempColor(tempCount);

const upButton = document.querySelector("#increase-temp");
upButton.addEventListener("click", increaseTemp);

const downButton = document.querySelector("#decrease-temp");
downButton.addEventListener("click", decreaseTemp);


};

document.addEventListener("DOMContentLoaded", registerEventHandlers);


//change city name///

//Select Html element the event will occur on//
//make function run when it occurs
// const changeCityName = () => {
// const cityInput = document.querySelector("#city-input");
// const changedElement = document.querySelectorAll(".your-city");
// changedElement.textContent = cityInput.value;
Comment on lines +63 to +64
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a note that querySelectorAll returns an array.

Suggested change
// const changedElement = document.querySelectorAll(".your-city");
// changedElement.textContent = cityInput.value;
// const changedElement = document.querySelectorAll(".your-city")[0];
// changedElement.textContent = cityInput.value;

// };
// //register the function as an event listener




166 changes: 166 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@


:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--ff-tertiary: 'Caveat', cursive;

--fw-reg: 300;
--fw-bold: 1000;

--clr-light: rgb(255, 255, 255);
--clr-accent: lightgray;
--clr-body:mediumturquoise;

--fs-h1: 3rem;
--fs-h2: 2.5rem;
--fs-h3: 2rem;
--fs-body: 1rem;
}

/***** General Styling *******/

h1{
font-family: var(--ff-primary);
font-size: var(--fs-h1);
}

h2{
font-size: var(--fs-h3);
}

h3{
font-size: var(--fs-body);
}

em{
font-family: var(--ff-tertiary);
}

body{
margin: 0;
background-color: var(--clr-body);
}

main{
background-color: var(--clr-body);
margin:0;
display: flex;
}

/***** header styles *****/
.city-header{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;

}

/***** user input styling ******/

.weather-boxes{
display: flex;
flex-wrap: wrap;
/*max-width: min-content;*/
flex-direction: column;
justify-content: center;
border-radius: 20%;
padding: 8%;
margin: 3%;
background-color: white;
}

.weather-forms{
display: flex;
flex-direction: column;
max-width: 50%;
padding:3%;
margin-left:7%;
justify-content: left;
min-width:min-content ;
}

/******* city styles *****/

button{
max-width: 75%;
margin: 3%;
justify-content: center;
}

input{
max-width: 80%;
}

/******* temperature styles ******/

#temp{
display: flex;
color:red;
font-weight:var(--fw-bold);
align-items: center;
font-size: 2rem;
}

#tempbox{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

p{
max-width: inherit;
}
/******* weather garden styles ****/

.weather-garden {
display: flex;
margin-left: 10%;
margin-top: 5%;
flex-direction: column;
align-items:center;
justify-content: flex-start;


}

figure{
display: flex;
flex-direction: column;
height: 50%;
width: 100%;
background-color:var(--clr-accent);
justify-content: space-between;
text-align: center;
border-radius: 8px;
font-size: 2em;
}

footer{
text-align: center;
color: var(--clr-light);
}

/*colors*/

.orange {
color: darkorange;
}

.red {
color: red;
}

.yellow {
color: yellow;
}

.green {
color: green;
}

.blue{
color: teal;
}