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

Sharks- Chinazo Onwukaike #14

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+442 −1
Open

Sharks- Chinazo Onwukaike #14

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7366427
complete wave 01, design and html
ChinazoOnwukaike Jun 8, 2022
dd0b5c9
Merge pull request #1 from ChinazoOnwukaike/wave-01
ChinazoOnwukaike Jun 8, 2022
f75d797
Completes wave 02. Changes pics and temp color dynamically
ChinazoOnwukaike Jun 9, 2022
dacbd1d
Merge pull request #2 from ChinazoOnwukaike/wave-02
ChinazoOnwukaike Jun 9, 2022
48733bb
complete wave 03
ChinazoOnwukaike Jun 9, 2022
7a6d8df
Merge pull request #3 from ChinazoOnwukaike/wave-03
ChinazoOnwukaike Jun 9, 2022
5476c35
complete wave 04. add F/C toggle
ChinazoOnwukaike Jun 10, 2022
ed1ba21
Merge pull request #4 from ChinazoOnwukaike/wave-04
ChinazoOnwukaike Jun 10, 2022
4f33a80
completes wave 05
ChinazoOnwukaike Jun 10, 2022
cec6b7b
Merge pull request #5 from ChinazoOnwukaike/wave-05
ChinazoOnwukaike Jun 10, 2022
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
Next Next commit
complete wave 01, design and html
@ChinazoOnwukaike
ChinazoOnwukaike committed Jun 8, 2022
commit 7366427b1e2a92ab73111be1d896ffca2476c300
51 changes: 50 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -5,8 +5,57 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
<link rel="stylesheet" href="styles/index.css">
<!------------- Font Awesome ------------>
<script src="https://kit.fontawesome.com/dff1440c2f.js" crossorigin="anonymous"></script>
</head>
<body>

<!------------- Header/ Search Box ------------>
<header>
<h1 class="logo">Weather App</h1>
<section class="search">
<input id="search-box" type="text" placeholder="Enter A City">
<button id="search-reset-btn">Reset</button>
</section>
</header>
<main>
<!------------- Temp Box ------------>
<section class="temp-box-container">
<!-- <div class="tempDiv"> -->
<h1 class="h1-temp">Temperature in</h1>

<div class="temp-box-header">
<p id="city-state">Dallas, TX</p>
<button>Get Current Temp</button>
</div>

<div class="temp-and-arrows">
<h1 id="temp">00</h1>

<div class="temp-arrows">
<i class="fa-solid fa-arrow-up" id="arrow-up"></i>
<i class="fa-solid fa-arrow-down" id="arrow-down"></i>
</div>
</div>
<!-- </div> -->
</section>

</main>
<script src="src/index.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</body>
<!------------- Sky Section ------------>
<footer class="sky-container">
<section >
<label for="sky">Sky:</label>

<select name="sky" id="cars">
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
<button id="sky-reset-btn">Reset</button>
</section>
</footer>
</html>
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
'use strict';
101 changes: 101 additions & 0 deletions styles/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
body{
display: grid;
grid-template: 20% 1fr 1fr 10%/ 1fr 1fr 1fr;
margin: 0;
padding: 0;
}

header{
background-color: blue;
display: flex;
justify-content: space-evenly;
min-height: 30vh;
grid-area: 1/1/2/4;
align-items: center;

}

main{
grid-area: 2/1/4/5;
background-color: blueviolet;
padding: 10% 0 5%;
}


footer{
grid-area: 4/1/5/5;
height: 100%;
/* background-color: peru; */
}

/* -----Search Bar */
.search-box{
width: 100px; height: 200px
}

/* Temp Area */
.h1-temp{
margin-bottom: 0;
margin-top: 0;
text-align: center;
}

.search{
/* align-items: center; */
/* background-color: red; */
size: 1.5rem;
align-content: flex-end;
}

.temp-box-container{
grid-column-start: 1;
grid-column-end: 3;
/* margin-top: 10vh; */
padding: 5% 0 5%;
width: 100%;
height: 100%;
justify-items: center;
}

.temp-box-header{
text-align: center;
/* background-color: brown; */
width: 100%;

}

.temp-and-arrows{
text-align: center;
}

.div-temp{
justify-items: center;
}

.temp-arrows{
margin: 0, .5rem;
}
#city-state{
margin: 0;
font-size: 3rem;
}

#temp{
font-size: 3rem;
margin-top: 0.5rem;
margin-bottom: 0;
}

/*----- sky ------*/
.sky-container{
background-color: palevioletred;
padding-top: 5%;
display: flex;
justify-content: center;
font-size: 1.5rem;
}

.sky{
height: 50%;

}