@ -0,0 +1,195 @@
|
|||||||
|
const countries = [
|
||||||
|
'Afghanistan',
|
||||||
|
'Albania',
|
||||||
|
'Algeria',
|
||||||
|
'Andorra',
|
||||||
|
'Angola',
|
||||||
|
'Antigua and Barbuda',
|
||||||
|
'Argentina',
|
||||||
|
'Armenia',
|
||||||
|
'Australia',
|
||||||
|
'Austria',
|
||||||
|
'Azerbaijan',
|
||||||
|
'Bahamas',
|
||||||
|
'Bahrain',
|
||||||
|
'Bangladesh',
|
||||||
|
'Barbados',
|
||||||
|
'Belarus',
|
||||||
|
'Belgium',
|
||||||
|
'Belize',
|
||||||
|
'Benin',
|
||||||
|
'Bhutan',
|
||||||
|
'Bolivia',
|
||||||
|
'Bosnia and Herzegovina',
|
||||||
|
'Botswana',
|
||||||
|
'Brazil',
|
||||||
|
'Brunei',
|
||||||
|
'Bulgaria',
|
||||||
|
'Burkina Faso',
|
||||||
|
'Burundi',
|
||||||
|
'Cambodia',
|
||||||
|
'Cameroon',
|
||||||
|
'Canada',
|
||||||
|
'Cape Verde',
|
||||||
|
'Central African Republic',
|
||||||
|
'Chad',
|
||||||
|
'Chile',
|
||||||
|
'China',
|
||||||
|
'Colombi',
|
||||||
|
'Comoros',
|
||||||
|
'Congo (Brazzaville)',
|
||||||
|
'Congo',
|
||||||
|
'Costa Rica',
|
||||||
|
"Cote d'Ivoire",
|
||||||
|
'Croatia',
|
||||||
|
'Cuba',
|
||||||
|
'Cyprus',
|
||||||
|
'Czech Republic',
|
||||||
|
'Denmark',
|
||||||
|
'Djibouti',
|
||||||
|
'Dominica',
|
||||||
|
'Dominican Republic',
|
||||||
|
'East Timor (Timor Timur)',
|
||||||
|
'Ecuador',
|
||||||
|
'Egypt',
|
||||||
|
'El Salvador',
|
||||||
|
'Equatorial Guinea',
|
||||||
|
'Eritrea',
|
||||||
|
'Estonia',
|
||||||
|
'Ethiopia',
|
||||||
|
'Fiji',
|
||||||
|
'Finland',
|
||||||
|
'France',
|
||||||
|
'Gabon',
|
||||||
|
'Gambia, The',
|
||||||
|
'Georgia',
|
||||||
|
'Germany',
|
||||||
|
'Ghana',
|
||||||
|
'Greece',
|
||||||
|
'Grenada',
|
||||||
|
'Guatemala',
|
||||||
|
'Guinea',
|
||||||
|
'Guinea-Bissau',
|
||||||
|
'Guyana',
|
||||||
|
'Haiti',
|
||||||
|
'Honduras',
|
||||||
|
'Hungary',
|
||||||
|
'Iceland',
|
||||||
|
'India',
|
||||||
|
'Indonesia',
|
||||||
|
'Iran',
|
||||||
|
'Iraq',
|
||||||
|
'Ireland',
|
||||||
|
'Israel',
|
||||||
|
'Italy',
|
||||||
|
'Jamaica',
|
||||||
|
'Japan',
|
||||||
|
'Jordan',
|
||||||
|
'Kazakhstan',
|
||||||
|
'Kenya',
|
||||||
|
'Kiribati',
|
||||||
|
'Korea, North',
|
||||||
|
'Korea, South',
|
||||||
|
'Kuwait',
|
||||||
|
'Kyrgyzstan',
|
||||||
|
'Laos',
|
||||||
|
'Latvia',
|
||||||
|
'Lebanon',
|
||||||
|
'Lesotho',
|
||||||
|
'Liberia',
|
||||||
|
'Libya',
|
||||||
|
'Liechtenstein',
|
||||||
|
'Lithuania',
|
||||||
|
'Luxembourg',
|
||||||
|
'Macedonia',
|
||||||
|
'Madagascar',
|
||||||
|
'Malawi',
|
||||||
|
'Malaysia',
|
||||||
|
'Maldives',
|
||||||
|
'Mali',
|
||||||
|
'Malta',
|
||||||
|
'Marshall Islands',
|
||||||
|
'Mauritania',
|
||||||
|
'Mauritius',
|
||||||
|
'Mexico',
|
||||||
|
'Micronesia',
|
||||||
|
'Moldova',
|
||||||
|
'Monaco',
|
||||||
|
'Mongolia',
|
||||||
|
'Morocco',
|
||||||
|
'Mozambique',
|
||||||
|
'Myanmar',
|
||||||
|
'Namibia',
|
||||||
|
'Nauru',
|
||||||
|
'Nepal',
|
||||||
|
'Netherlands',
|
||||||
|
'New Zealand',
|
||||||
|
'Nicaragua',
|
||||||
|
'Niger',
|
||||||
|
'Nigeria',
|
||||||
|
'Norway',
|
||||||
|
'Oman',
|
||||||
|
'Pakistan',
|
||||||
|
'Palau',
|
||||||
|
'Panama',
|
||||||
|
'Papua New Guinea',
|
||||||
|
'Paraguay',
|
||||||
|
'Peru',
|
||||||
|
'Philippines',
|
||||||
|
'Poland',
|
||||||
|
'Portugal',
|
||||||
|
'Qatar',
|
||||||
|
'Romania',
|
||||||
|
'Russia',
|
||||||
|
'Rwanda',
|
||||||
|
'Saint Kitts and Nevis',
|
||||||
|
'Saint Lucia',
|
||||||
|
'Saint Vincent',
|
||||||
|
'Samoa',
|
||||||
|
'San Marino',
|
||||||
|
'Sao Tome and Principe',
|
||||||
|
'Saudi Arabia',
|
||||||
|
'Senegal',
|
||||||
|
'Serbia and Montenegro',
|
||||||
|
'Seychelles',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Singapore',
|
||||||
|
'Slovakia',
|
||||||
|
'Slovenia',
|
||||||
|
'Solomon Islands',
|
||||||
|
'Somalia',
|
||||||
|
'South Africa',
|
||||||
|
'Spain',
|
||||||
|
'Sri Lanka',
|
||||||
|
'Sudan',
|
||||||
|
'Suriname',
|
||||||
|
'Swaziland',
|
||||||
|
'Sweden',
|
||||||
|
'Switzerland',
|
||||||
|
'Syria',
|
||||||
|
'Taiwan',
|
||||||
|
'Tajikistan',
|
||||||
|
'Tanzania',
|
||||||
|
'Thailand',
|
||||||
|
'Togo',
|
||||||
|
'Tonga',
|
||||||
|
'Trinidad and Tobago',
|
||||||
|
'Tunisia',
|
||||||
|
'Turkey',
|
||||||
|
'Turkmenistan',
|
||||||
|
'Tuvalu',
|
||||||
|
'Uganda',
|
||||||
|
'Ukraine',
|
||||||
|
'United Arab Emirates',
|
||||||
|
'United Kingdom',
|
||||||
|
'United States',
|
||||||
|
'Uruguay',
|
||||||
|
'Uzbekistan',
|
||||||
|
'Vanuatu',
|
||||||
|
'Vatican City',
|
||||||
|
'Venezuela',
|
||||||
|
'Vietnam',
|
||||||
|
'Yemen',
|
||||||
|
'Zambia',
|
||||||
|
'Zimbabwe'
|
||||||
|
]
|
After Width: | Height: | Size: 85 KiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 338 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 509 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 189 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 166 KiB |
After Width: | Height: | Size: 167 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 115 KiB |
After Width: | Height: | Size: 126 KiB |
After Width: | Height: | Size: 234 KiB |
After Width: | Height: | Size: 121 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 234 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 88 KiB |
After Width: | Height: | Size: 536 KiB |
After Width: | Height: | Size: 123 KiB |
After Width: | Height: | Size: 866 KiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 315 KiB |
After Width: | Height: | Size: 434 KiB |
After Width: | Height: | Size: 3.0 MiB |
After Width: | Height: | Size: 15 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 373 KiB |
After Width: | Height: | Size: 22 MiB |
After Width: | Height: | Size: 4.1 MiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 327 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 526 KiB |
After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 335 KiB |
After Width: | Height: | Size: 233 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 284 KiB |
After Width: | Height: | Size: 242 KiB |
After Width: | Height: | Size: 183 KiB |
@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lato:300, 400,400i,700,700i&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1>Asabeneh Yetayeh challenges in <span>2020</span></h1>
|
||||||
|
<h2>30DaysOfJavaScript Challenge</h2>
|
||||||
|
<p></p>
|
||||||
|
<ul>
|
||||||
|
<li>30DaysOfPython Challenge Done</li>
|
||||||
|
<li>30DaysOfJavaScript Challenge Ongoing</li>
|
||||||
|
<li>30DaysOfReact Challenge Coming</li>
|
||||||
|
<li>30DaysOfReactNative Challenge Coming</li>
|
||||||
|
<li>30DaysOfFullStack Challenge Coming</li>
|
||||||
|
<li>30DaysOfDataAnalysis Challenge Coming</li>
|
||||||
|
<li>30DaysOfMachineLearning Challenge Coming</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const hexaColor = () => {
|
||||||
|
const str = '0123456789abcdef'
|
||||||
|
let hexa = '#'
|
||||||
|
let index
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
index = Math.floor(Math.random() * str.length)
|
||||||
|
hexa += str[index]
|
||||||
|
}
|
||||||
|
return hexa
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDateTime = () => {
|
||||||
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
|
||||||
|
'October', 'November', 'December'
|
||||||
|
]
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = months[now.getMonth()]
|
||||||
|
const date = now.getDate()
|
||||||
|
let hours = now.getHours()
|
||||||
|
let minutes = now.getMinutes()
|
||||||
|
let seconds = now.getSeconds()
|
||||||
|
if (hours < 10) {
|
||||||
|
hours = '0' + hours
|
||||||
|
}
|
||||||
|
if (minutes < 10) {
|
||||||
|
minutes = '0' + minutes
|
||||||
|
}
|
||||||
|
if (seconds < 10) {
|
||||||
|
seconds = '0' + seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateMonthYear = `${month} ${date}, ${year}`
|
||||||
|
|
||||||
|
const time = hours + ':' + minutes
|
||||||
|
const fullTime = dateMonthYear + ' ' + time
|
||||||
|
return fullTime + `:${seconds}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapper = document.querySelector('.wrapper')
|
||||||
|
const year = document.querySelector('span')
|
||||||
|
const time = document.querySelector('p')
|
||||||
|
wrapper.style.width = '50%'
|
||||||
|
wrapper.style.margin = 'auto'
|
||||||
|
const title = document.querySelector('h1')
|
||||||
|
const subTitle = document.querySelector('h2')
|
||||||
|
title.style.textAlign = 'center'
|
||||||
|
title.style.fontFamily = 'Montserrat'
|
||||||
|
title.style.fontWeight = 500
|
||||||
|
|
||||||
|
subTitle.style.textAlign = 'center'
|
||||||
|
subTitle.style.fontFamily = 'Montserrat'
|
||||||
|
subTitle.style.fontWeight = 300
|
||||||
|
subTitle.style.textDecoration = 'underline'
|
||||||
|
|
||||||
|
|
||||||
|
time.style.textAlign = 'center'
|
||||||
|
time.style.fontFamily = 'Montserrat'
|
||||||
|
time.style.fontWeight = 400
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
year.style.color = hexaColor()
|
||||||
|
year.style.fontSize = '96px'
|
||||||
|
year.style.fontWeight = 700;
|
||||||
|
time.textContent = showDateTime()
|
||||||
|
time.style.background = hexaColor()
|
||||||
|
time.style.width = "25%"
|
||||||
|
time.style.margin = 'auto'
|
||||||
|
time.style.padding = '10px'
|
||||||
|
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const ul = document.querySelector('ul')
|
||||||
|
const lists = document.querySelectorAll('li')
|
||||||
|
for (const list of lists) {
|
||||||
|
list.style.listStyle = 'none'
|
||||||
|
list.style.padding = '25px'
|
||||||
|
list.style.margin = '3px'
|
||||||
|
list.style.fontFamily = 'Montserrat'
|
||||||
|
list.style.fontWeight = 300;
|
||||||
|
list.style.letterSpacing = '0.0625em'
|
||||||
|
|
||||||
|
if (list.textContent.includes('Done')) {
|
||||||
|
list.style.background = '#21bf73'
|
||||||
|
} else if (list.textContent.includes('Ongoing')) {
|
||||||
|
list.style.background = '#fddb3a'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
list.style.background = '#fd5e53'
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|