DevWars Weekly Challenge Week 3

Developer
Keith Light
Size
6,386 Kb
Views
16,192
  1. DevWars Weekly Challenge Week 3 Previews
  2. DevWars Weekly Challenge Week 3 HTML Codes
  3. DevWars Weekly Challenge Week 3 CSS Codes
  4. DevWars Weekly Challenge Week 3 JS Codes

How do I make an devwars weekly challenge week 3?

WORK IN PROGRESS - here it is, my DevWars Weekly Challenge Week 3. check out the rules at - http://codepen.io/DevWars/pen/XbPaNg. What is a devwars weekly challenge week 3? How do you make a devwars weekly challenge week 3? This script and codes were developed by Keith Light on 18 November 2022, Friday.

DevWars Weekly Challenge Week 3 Previews
IQ Test

DevWars Weekly Challenge Week 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DevWars Weekly Challenge Week 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Vars */
/* Grid System */
* { box-sizing: border-box;
}
.container { max-width: 620px; position: relative; margin: 0 auto; padding: 0 0;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; display: block; margin-bottom: 0px; vertical-align: top; padding: 0;
}
.columns.sm-four { width: 33.33%;
}
.columns.sm-days { width: 14.28%; opacity: 0;
}
/* Main Styles */
html { font-size: 15px; height: 101%;
}
body { background: url(https://unsplash.imgix.net/23/pink-sky.JPG?fit=crop&fm=jpg&h=700&q=75&w=1050) center center/cover fixed; color: #fff; font-family: "Lato", "Arial", sans-serif; font-size: 1.5rem; line-height: 1.6; transition: all 0.5s;
}
.container { background: rgba(64, 165, 188, 0.8); border-radius: 0.5rem; box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25); margin: 5rem auto; min-height: 200px; overflow: hidden;
}
/* Header Section */
header { font-size: 3rem; font-weight: 300; padding: 1rem; text-align: center; overflow: hidden;
}
header h2 { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.current-city-day { font-size: 1rem; display: block;
}
sup { position: relative; top: -1em; font-size: 50%;
}
.current-city-weather { font-size: 4rem;
}
/* Week Days Section */
.week-days { font-weight: 700; text-align: center;
}
.day { background: #55a0b3; border: 1px solid #86bdc9;
}
.sm-days { border-right: 1px solid #86bdc9; cursor: pointer;
}
.sm-days:last-child { border: none;
}
.day-weather-icon, .day-weather-info { margin: 1rem 0;
}
.day-weather-icon { font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) { html { font-size: 12px; }
}
@media (max-width: 520px) { body { padding: 1rem; } .columns { float: left; margin-left: 0; margin-top: 1rem; } .columns:nth-child(odd) { margin-left: 0; } .columns.sm-four, .columns.sm-days { width: 100%; } .day { padding: 1rem; } .current-city-day { font-size: 2rem; }
}
/* Keyframes */
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; }
}
.fadeInUp { animation-name: fadeInUp; animation-duration: 1s; animation-fill-mode: both;
}
@keyframes fadeIn { 0% { transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }
}
.fadeIn, .columns.sm-days { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both;
}
.sm-days:nth-child(1) { animation-delay: 0.2s;
}
.sm-days:nth-child(2) { animation-delay: 0.4s;
}
.sm-days:nth-child(3) { animation-delay: 0.6s;
}
.sm-days:nth-child(4) { animation-delay: 0.8s;
}
.sm-days:nth-child(5) { animation-delay: 1s;
}
.sm-days:nth-child(6) { animation-delay: 1.2s;
}
.sm-days:nth-child(7) { animation-delay: 1.4s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="container"> <!-- Current Weather Details //--> <header> <div class="row"> <div class="sm-four columns current-city-name"> <h2>Portsmouth</h2> </div> <div class="sm-four columns current-city-weather"> <i class="wi wi-day-showers"></i> </div> <div class="sm-four columns current-city-temp"> <h2>18<sup>o</sup>C</h2> </div> <span class="current-city-day">Sun</span> </div> </header> <!--// End Current Weather Details --> <!-- Days //--> <section class="week-days"> <div class="row"> <div class="sm-days columns"> <div class="day"> Sun </div> <div class="day-weather-icon"> <i class="wi wi-day-showers"></i> </div> <div class="day-weather-info"> <h2>18<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Mon </div> <div class="day-weather-icon"> <i class="wi wi-cloudy"></i> </div> <div class="day-weather-info"> <h2>19<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Tue </div> <div class="day-weather-icon"> <i class="wi wi-showers"></i> </div> <div class="day-weather-info"> <h2>17<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Wed </div> <div class="day-weather-icon"> <i class="wi wi-day-lightning"></i> </div> <div class="day-weather-info"> <h2>18<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Thu </div> <div class="day-weather-icon"> <i class="wi wi-cloudy"></i> </div> <div class="day-weather-info"> <h2>19<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Fri </div> <div class="day-weather-icon"> <i class="wi wi-day-showers"></i> </div> <div class="day-weather-info"> <h2>20<sup>o</sup>C</h2> </div> </div> <div class="sm-days columns"> <div class="day"> Sat </div> <div class="day-weather-icon"> <i class="wi wi-day-sunny"></i> </div> <div class="day-weather-info"> <h2>18<sup>o</sup>C</h2> </div> </div> </div> </section> <!--// End Days -->
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

DevWars Weekly Challenge Week 3 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Vars */
/* Grid System */
* { box-sizing: border-box;
}
.container { max-width: 620px; position: relative; margin: 0 auto; padding: 0 0;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; display: block; margin-bottom: 0px; vertical-align: top; padding: 0;
}
.columns.sm-four { width: 33.33%;
}
.columns.sm-days { width: 14.28%; opacity: 0;
}
/* Main Styles */
html { font-size: 15px; height: 101%;
}
body { background: url(https://unsplash.imgix.net/23/pink-sky.JPG?fit=crop&fm=jpg&h=700&q=75&w=1050) center center/cover fixed; color: #fff; font-family: "Lato", "Arial", sans-serif; font-size: 1.5rem; line-height: 1.6; transition: all 0.5s;
}
.container { background: rgba(64, 165, 188, 0.8); border-radius: 0.5rem; box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25); margin: 5rem auto; min-height: 200px; overflow: hidden;
}
/* Header Section */
header { font-size: 3rem; font-weight: 300; padding: 1rem; text-align: center; overflow: hidden;
}
header h2 { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.current-city-day { font-size: 1rem; display: block;
}
sup { position: relative; top: -1em; font-size: 50%;
}
.current-city-weather { font-size: 4rem;
}
/* Week Days Section */
.week-days { font-weight: 700; text-align: center;
}
.day { background: #55a0b3; border: 1px solid #86bdc9;
}
.sm-days { border-right: 1px solid #86bdc9; cursor: pointer;
}
.sm-days:last-child { border: none;
}
.day-weather-icon, .day-weather-info { margin: 1rem 0;
}
.day-weather-icon { font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) { html { font-size: 12px; }
}
@media (max-width: 520px) { body { padding: 1rem; } .columns { float: left; margin-left: 0; margin-top: 1rem; } .columns:nth-child(odd) { margin-left: 0; } .columns.sm-four, .columns.sm-days { width: 100%; } .day { padding: 1rem; } .current-city-day { font-size: 2rem; }
}
/* Keyframes */
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; }
}
.fadeInUp { animation-name: fadeInUp; animation-duration: 1s; animation-fill-mode: both;
}
@keyframes fadeIn { 0% { transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }
}
.fadeIn, .columns.sm-days { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both;
}
.sm-days:nth-child(1) { animation-delay: 0.2s;
}
.sm-days:nth-child(2) { animation-delay: 0.4s;
}
.sm-days:nth-child(3) { animation-delay: 0.6s;
}
.sm-days:nth-child(4) { animation-delay: 0.8s;
}
.sm-days:nth-child(5) { animation-delay: 1s;
}
.sm-days:nth-child(6) { animation-delay: 1.2s;
}
.sm-days:nth-child(7) { animation-delay: 1.4s;
}

DevWars Weekly Challenge Week 3 - Script Codes JS Codes

$('.sm-days').click(function() { if ($(this).find('.day-weather-icon > i').hasClass('wi-day-showers')) { $('body').css({ 'background': 'url(https://ununsplash.imgix.net/18/trickle.JPG?fit=crop&fm=jpg&h=700&q=75&w=1050) center center / cover fixed' }); } if ($(this).find('.day-weather-icon > i').hasClass('wi-cloudy')) { $('body').css({ 'background': 'url(https://ununsplash.imgix.net/36/q3Y09XWNRRC5Et7bEQnE_beach-alex-talmon.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050) center center / cover fixed' }); } if ($(this).find('.day-weather-icon > i').hasClass('wi-showers')) { $('body').css({ 'background': 'url(https://unsplash.imgix.net/photo-1432836431433-925d3cc0a5cd?fit=crop&fm=jpg&h=700&q=75&w=1050) center center / cover fixed' }); } if ($(this).find('.day-weather-icon > i').hasClass('wi-day-lightning')) { $('body').css({ 'background': 'url(https://unsplash.imgix.net/16/unsplash_5252b10dacd20_1.JPG?fit=crop&fm=jpg&h=700&q=75&w=1050) center center / cover fixed' }); } if ($(this).find('.day-weather-icon > i').hasClass('wi-day-sunny')) { $('body').css({ 'background': 'url(https://unsplash.imgix.net/photo-1422405153578-4bd676b19036?fit=crop&fm=jpg&h=700&q=75&w=1050) center center / cover fixed' }); }
// Weather Info Replacement var icon = $(this).find('i').attr("class"); var temp = $(this).find('.day-weather-info').html(); var day = $(this).find('.day').html(); $('.current-city-weather>i').removeClass().addClass(icon); $('.current-city-temp').html(temp); $('.current-city-day').html(day); $('.current-city-weather').addClass('fadeInUp'); setTimeout(function() { $('.current-city-weather').removeClass('fadeInUp'); }, 1000);
});
DevWars Weekly Challenge Week 3 - Script Codes
DevWars Weekly Challenge Week 3 - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3.5
Size 6,386 Kb
Views 16,192
Do you need developer help for DevWars Weekly Challenge Week 3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Light (keefyboooo) Script Codes
Name
Angled Menu
SlideToggle Menu
Tron Light Cycle Loader
Animated Burger Menu
Material Design Buttons
Weather App Concept
Overlay Menu Concept
JQuery Responsive Tabs
Colour Palette From Material Design
Material Design Colour Palette
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!