diff --git a/1310/CNS Project 1/Sign_in.css b/1310/CNS Project 1/Sign_in.css new file mode 100644 index 0000000..8e44371 --- /dev/null +++ b/1310/CNS Project 1/Sign_in.css @@ -0,0 +1,130 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html, +body { + width: 100%; + height: 100%; +} +a { + cursor: pointer; + text-decoration-line: none; +} +.background { + width: 100%; + height: 650px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.nav { + width: 100%; + height: 50px; + top: 0; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); + position: fixed; + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: center; +} +.navCns { + width: 35%; + color: #1485ee; + text-align: center; + font-size: 20px; + font-weight: 700; + position: relative; +} +.navSignIn { + width: 35%; + color: #000; + font-size: 12px; + text-align: right; + position: relative; +} +.navSignUp { + width: 10%; + color: #000; + font-size: 12px; + text-align: right; + position: relative; +} +.main { + width: 300px; + height: 380px; + border-radius: 1%; + border: 1px solid #c1c1c1; + display: flex; + flex-direction: column; + align-items: center; +} +.mainHead { + width: 100%; + height: 40%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.mainHeadTitle1 { + color: #1485ee; + font-size: 13px; + font-weight: 700; +} +.mainHeadTitle2 { + font-size: 20px; + font-weight: 700; +} +.mainBody { + width: 80%; + height: 30%; + display: flex; + flex-direction: column; +} +.mainBodyLbl { + color: #1485ee; + font-size: 4px; + font-weight: 700; +} +.mainBodyInput { + width: 100%; + height: 50%; + border-radius: 5px; + border: 1px solid #c1c1c1; + padding: 4%; +} +.mainBodyInput::placeholder { + color: #909090; + font-size: 10px; + font-weight: 700; +} +.mainFoot { + width: 100%; + height: 15%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; +} +.mainFootBtn { + width: 110px; + height: 50%; + color: #fff; + font-size: 12px; + font-weight: 700; + border-radius: 50px; + background-color: #1485ee; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.mainFootAccount { + color: #1485ee; + font-size: 1px; + font-weight: 500; +} diff --git a/1310/CNS Project 1/Sign_in.html b/1310/CNS Project 1/Sign_in.html new file mode 100644 index 0000000..462f52e --- /dev/null +++ b/1310/CNS Project 1/Sign_in.html @@ -0,0 +1,59 @@ + + + + + + + CNS Project 1 + + + +
+
+ CNS + 로그인 + 회원가입 +
+
+
+
Care aNd Service
+
로그인
+
+
+
+
+ +
+
+
+ +
+
+
+ 로그인 + 계정이 없으신가요? +
+
+
+ + diff --git a/1310/CNS Project 2/Weather.css b/1310/CNS Project 2/Weather.css new file mode 100644 index 0000000..cd57b80 --- /dev/null +++ b/1310/CNS Project 2/Weather.css @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html, +body { + width: 100%; + height: 100%; +} +.background { + width: 100%; + height: 650px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.nav { + width: 100%; + height: 50px; + top: 0; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); + position: fixed; + display: flex; + flex-direction: row; + align-items: center; +} +.navCns { + width: 20%; + color: #1485ee; + text-align: center; + font-size: 25px; + font-weight: 700; + position: relative; +} +.main { + width: 800px; + height: 400px; + border: 1px solid #b2b2b2; + border-radius: 5px; + display: flex; + flex-direction: column; +} +#cityName { + font-size: 80px; + font-weight: 900; + color: #1485ee; +} +.mainBody { + height: 300px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} \ No newline at end of file diff --git a/1310/CNS Project 2/Weather.html b/1310/CNS Project 2/Weather.html new file mode 100644 index 0000000..224c31e --- /dev/null +++ b/1310/CNS Project 2/Weather.html @@ -0,0 +1,28 @@ + + + + + + CNS Project 2 + + + + +
+
+ CNS +
+
+
+ + +
+
+

+

+

+
+
+
+ + diff --git a/1310/CNS Project 2/Weather.js b/1310/CNS Project 2/Weather.js new file mode 100644 index 0000000..c6f2435 --- /dev/null +++ b/1310/CNS Project 2/Weather.js @@ -0,0 +1,37 @@ +const apiKey = "6cb08faa165808cef5f64335f15272fc"; + +fetch( + `http://api.openweathermap.org/geo/1.0/direct?q=Daegu&limit=5&appid=${apiKey}` +) + .then((res) => res.json()) + .then((data) => { + let geo = data; + + fetch( + `http://api.openweathermap.org/data/2.5/forecast?lat=${geo[0].lat}&lon=${geo[0].lon}&appid=${apiKey}` + ) + .then((res) => res.json()) + .then((data) => { + console.log(data); + + // Value of object + const idWeather = document.getElementById("weather"); + const idCityName = document.getElementById("cityName"); + const idTempMin = document.getElementById("tempMin"); + const idTempMax = document.getElementById("tempMax"); + const idWindSpeed = document.getElementById("windSpeed"); + + idCityName.textContent = + JSON.stringify(data.city.name); + idWeather.textContent = + JSON.stringify(data.list[39].weather[0].main); + idTempMin.textContent = + "최저 온도 : " + + Math.round(JSON.stringify(data.list[39].main.temp_min) - 273.15); + idTempMax.textContent = + "최고 온도 : " + + Math.round(JSON.stringify(data.list[39].main.temp_max) - 273.15); + idWindSpeed.textContent = + "풍속 : " + JSON.stringify(data.list[39].wind.speed); + }); + }); diff --git a/README.md b/README.md index 4e0f26b..15384f7 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ ![Group 3](https://github.com/2023NewCNSMember/Frontend-Assignment/assets/101560583/87ca165b-df46-4003-9912-417cbf8dba9b) 3. 클론이 되었으면 자신의 branch를 선택한뒤 vsc를 열고 자신의 학번으로 폴더를 새로 열고 개발을 하시면 됩니다.
![newcns3](https://github.com/2023NewCNSMember/Frontend-Assignment/assets/101560583/7b93c510-d7cd-4d99-aef6-51cfeb029295) -![newcns3-1](https://github.com/2023NewCNSMember/Frontend-Assignment/assets/101560583/07df326c-5afb-4538-a38f-62ad905854b8) +![newcns333](https://github.com/2023NewCNSMember/Frontend-Assignment/assets/101560583/a75b3a2f-0651-467b-9aa1-8e05ee20e4d4) 4. 만약 개발이 다 된 상태라면 create pull request를 눌러 자신의 학번이름으로 제목을 입력한뒤
내용엔 간단한 코드 설명을 적으시면 됩니다.(미리보기 사진이 있으면 더 좋습니다.)